* {
      box-sizing: border-box;
      padding: 0;
      margin: 0;
}

html, body{
      height: 100%;
      width: 100%;
      font-family: 'lato', sans-serif;
    }

#mypage{
      display: flex;
      flex-direction: column;
      background-image: url('images/Backgroundimage-Mobile.jpg');
      background-size: 100vw;
      font-family: 'lato', sans-serif;

  }


a {
      color: black;
      text-decoration: none;
}


/*cookie notice */
#cookie-notice{
      background-color: black;
      padding: 10px;
      height: auto;
      width: 100%;
    }

    .statement{
        color: white;
        font-size:14px;
        margin-top: 10px;
        width:90%;

    }
    .statement a {
        color: white;
        text-decoration: underline;
    }
  #close {
        float: right;
        color: white;
        width: 20px;
        height: 20px;
        font-size: 20px;
        margin-bottom: 10px;

  }

  #close:hover{
        cursor: pointer;
  }

.enter {
        display: block;
        text-align: center;
        text-decoration: underline;
        font-size:22px;
        margin-left: auto;
        margin-right: auto;
}

#homelink{
        text-align: center;
        font-size: 18px;
        padding: 20px 30px 10px 30px;
        font-family: 'lato', sans-serif;
        font-weight: 300;
        text-decoration: underline;
}
.policy-button{
        display: block;
        margin: 10px auto 10px auto;
        width: 150px;
        height: 60px;
        font-size: 18px;
        font-family: 'lato', sans-serif;
        background-color: black;
        border-radius: 10px;
        clear: both;
}
.policy-button a{
        color: white;
}

#back{
      background-color: black;
      width: 20px;
      height: 20px;
      float: right;
      text-align: center;
      border-radius: 3px;

}

#back a{
      color: white;
}
/* mobile repsonsive menu*/

nav {
        padding: 0 15px;
        left: 0;
        right: 0;
        background-color: #F2C4CD;
}

.menu {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        list-style-type: none;
  }

.menu li a {
        display: block;
        padding: 5px 5px 10px 25px;
}

.toggle {
        font-size: 30px;
        margin-top: 10px;
        margin-right: 20px;
        text-align: right;
        flex: 1;
}

.page {
        order: 1;
        width: 100%;
        font-size: 18px;
        text-align: left;
        display: none;
        padding: 2px;
        letter-spacing: 3px;

}

.active .page {
        display: block;
}

#menu-logo{
        margin-top: 10px;
        order: 0;
}
#menu-logo img {
          width: 52px;
          height: 52px;
}

/* Body */
main{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        flex: 1;
}

#logo{
        display: block;
        margin: 90px auto 15px auto;
        width:120px;
}

.aboutImg{
        display: block;
        margin: 90px auto 15px auto;
        width:120px;
        border-radius: 50%;
        background-color: white;
    }
#greenbox{
        background: #4EA67C;
        justify-content: center;
        padding: 30px;
        margin: 15px auto 15px auto;

}

h1{
        text-align: center;
        font-size: 18px;
        padding-bottom: 10px;
        font-family: 'lato', sans-serif;

}

.para{
        font-family:'lato', sans-serif;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        padding: 10px;

}

/* bubbles on about page*/
#bubblebox{
          background: #F2C4CD;
          justify-content: center;
          padding: 30px;
          margin: 15px auto 15px auto;
    }



  .para-bubble{
          height: auto;
          width:90%;
          font-size: 16px;
          text-align: left;
          margin: 5px;
          padding: 10px;
    }


/*services styles */
#servicespage{
        width: 90%;
}
.marker{
        height: 5px;
        margin-bottom: 50px;

}
.servicesimage{
        display: block;
        margin: 10% auto 15px auto;
        width:150px;
        border-radius: 50%;
    }
#top-backgroundbox{
        background-color: #4EA67C;
        width: 90%;
        padding: 30px;
        text-align: left;
        height: auto;
        margin: 15px auto 100px auto;

}
.backgroundbox{
        background-color: #4EA67C;
        width: 90%;
        height: auto;
        text-align: left;
        padding: 30px;
        margin-bottom: 100px;
        margin-left: auto;
        margin-right: auto;

}

.servicestext{
        margin: 5px;
        padding: 10px;
        font-size: 16px;

}



.section-links{
        display: flex;
        flex-direction: row;
        font-weight: bold;
        text-decoration: none;
        justify-content: center;
}


.linkcircle{
        height: 80px;
        width: 80px;
        border-radius: 50%;
        background-color: black;
        margin: 30% auto 15px auto;
}


.subpage{
        list-style-type: none;
        text-align: center;
        margin-top: 55%;
        margin-left: auto;
        margin-right: auto;
}
.subpage a {
        color: white;
        font-size: 9px;
        font-family: 'lato', sans-serif;
        text-decoration: underline;
}
/*Testimonials page - mobile */
#logoFlex{
       display: flex;
       flex-direction: column;
       justify-content: center;
       background-color: #F2C4CD;
       width: 90%;
       margin: 50px auto 50px auto
}
#topLogo{
      padding-top: 30px;
}
.logo-container{
      margin-right: auto;
      margin-left: auto;
}

.logo-box{
        margin: auto;
        padding-bottom: 20px;
}
.logo-box img{
        width:150px;
}

.testimonials-container{
        width: 90%;
        display: flex;
        flex-direction: column;
        background-color: #F2C4CD;
        margin: 20px auto 50px auto;
        padding: 10px;

}

.testimonialBox{
        margin: 15px auto 15px auto;
        padding: 10px;
        width: 90%;
        text-align: center;
  }
.testimonialBox p{
        text-align: left;
}
#testimonial-1 img{
       width: 25px;
       margin-bottom: 10px;
       margin-left: auto;
       margin-right: auto;

}
#testimonial-1 p{
        margin-bottom: 20px;
        text-align: left;

}

/*mobile contact page*/

#email{
    display: block;
    margin: 90px auto 15px auto;
    width:120px;
}

#emailLink{
    text-decoration: underline;

}

/*footer with social media icons)*/
footer{
      clear: both;
      margin-bottom: 0px;
      padding-bottom: 0px;
}

#mediabox{
        display: flex;
        margin: 20px auto 0px auto;
        padding-bottom: 0;
        width: 200px;
        justify-content: space-around;

}

.socialmedia{
        padding: 10px;
}
/*footer - site map */
.site-map{
        width:80%;
        display: inline-flex;
        flex-wrap: wrap;
        justify-content:left;
        font-size: 11px;
        margin: 10px;

}

.link{
        list-style: none;
        padding-right: 3px;
}

.website{
        font-size: 8px;
        text-align: right;
        margin-right: 2px;
        margin-bottom: 2px;
        text-decoration: underline;
        font-style: italic;
}

/* Tablet*/
@media only screen and (max-width:959px) and (min-width: 600px){

/* table menu*/
.page {
        width: 100%;
        font-size: 16px;
}
.toggle {
        font-size: 40px;
}

/*tablet cookie notice*/

.statement{
        font-size: 18px;
}

/*tablet body */
main{
        width: 80%;
    }
#logo{
        display: block;
        margin: 100px auto 50px auto;
        width:140px;
}
.aboutImg{
        display: block;
        margin: 100px auto 50px auto;
        width:140px;
        border-radius: 50%;
}
h1{
        font-size: 20px;
}

#homelink{
        font-size: 24px;
}

.para{
        text-align: left;
        font-size: 18px;
        width: 90%;
}
/* Tablet about page*/
.para-bubble{
        font-size: 18px;
        width: 90%;
        margin-left: auto;
        margin-right: auto;
}

#bubblebox {
        margin-bottom: 180px;
}
/* SERVICES INFORMATION */
.section-links{
        margin-top: 40px;
        margin-bottom: 20px;

}
.subpage a {
        color: white;
        font-size: 15px;
        font-family: 'lato', sans-serif;
        text-decoration: underline;
}
.linkcircle{
        height: 130px;
        width: 130px;
        border-radius: 50%;
        background-color: black;
        margin: 20% 30px 15px 30px;
}
#top-backgroundbox{
        padding: 40px 30px 70px 30px;
        margin-bottom: 200px;
        width:90%;
        margin-left: auto;
        margin-right: auto;

}
.backgroundbox{
        padding: 40px 30px 70px 30px;
        margin-bottom: 150px;
        width:90%;
        margin-left: auto;
        margin-right: auto;
}

.servicestext{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-size: 18px;
}
/* testimonial*/

#logoFlex{
        display: flex;
        width:90%;
        flex-wrap: wrap;
        flex-direction: row;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
}

.logo-container{


}

.logo-box{
  margin-top:20px;

}
.logo-box img{
        width:150px;
}

.testimonials-container{
        width: 90%;
        display: flex;
        flex-direction: column;
        background-color: #F2C4CD;
        margin: 60px auto 60px auto

}

.testimonialBox{
        margin: 15px auto 15px auto;
        padding-bottom: 15px;
        padding-top: 10px;
        text-align: center;
  }
.testimonialBox p{
        text-align: left;
}
#testimonial-1 img{
       width: 25px;
       margin-bottom: 10px;
       margin-left: auto;
       margin-right: auto;

}
#testimonial-1 p{
        margin-bottom: 20px;
        text-align: left;

}

/*contact page tablet */
#email{
  display: block;
  margin: 100px auto 50px auto;
  width:140px;
}

#email a {
    text-decoration: underline;
}

.website{
        font-size: 9px;
        margin-right: 5px;
        margin-bottom: 2px;
        text-decoration: underline;
        font-style: italic;
}


  }

  /* Medium Screen (laptop) */

  @media only screen and (max-width: 1399px) and (min-width: 960px) {
body {
        margin-left: auto;
        margin-right: auto;
}
#mypage{
        background-image: url('images/BackgroundImage-Laptop.jpg');

}
.nav{
        width: 100%;
}
/* menu*/
.menu {
          align-items: center;
          flex-wrap: nowrap;
          background: none;
          justify-content: center;
          width: 70%;
          margin-left: auto;
          margin-right: auto;
    }

.page {
        order: 0;
        position: relative;
        display: block;
        width: auto;
        padding-right: 20px;
        margin-left: auto;
        margin-right: auto;
        letter-spacing: 3px;
    }

.page a {
        padding-left: auto;
        padding-right: auto;
}
#menu-logo{
        margin-left: auto;
        margin-right: auto;

      }

#menu-logo img {
      width: 60px;
      height: 60px;
}



.submenu-active  {
        display: block;
        position: absolute;
        left: 0;
    }

.toggle {
        display: none;
    }


  /*laptop body */
  main{
          width: 80%;
  }
  #logo{
          display: block;
          margin: 90px auto 40px auto;
          width:150px;
  }

  .aboutImg{
            width:150px;
            margin: 90px auto 40px auto;
            align-content: center;
            border-radius: 50%;
            background-color: white;
      }
      #greenbox{
              background: #4EA67C;
              width: 80%;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 30px;

      }
h1{
        font-size: 22px;

      }

.para{
        font-family: 'corbel', sans-serif;
        width: 90%;
        text-align: center;
        font-size: 18px;
        margin-bottom: 10px;
        margin-top: 20px;
  }
/* about bubble page */
#heading-bubble{
        margin: 0;
        font-size: 20px;
}
#bubblebox{
        background: #F2C4CD;
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
  }

  .para-bubble{
        height: auto;
        width:90%;
        font-size: 18px;
        text-align: left;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
  }

  /*services styles */
#servicespage{
        width: 80%;
  }

#top-backgroundbox{
        background-color: #4EA67C;
        width:  80%;
        height: 350px;
        margin: 10px auto 150px auto;
        padding: 30px 50px 100px 50px;
}
  #linksbox{
        margin-left: auto;
        margin-right: auto;
        width: 70%;
  }

#alignment-box1{
        display: flex;
        flex-direction: row;
        text-align: left;
        width: 80%;
        margin: 10px auto 200px auto;
        padding-left: 50px;
        background-color: #4EA67C;
}

#alignment-box2{
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        width: 80%;
        margin: 10px auto 200px auto;
        padding-right: 50px;
        background-color: #4EA67C;
}

#alignment-box3{
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 80%;
        height: 400px;
        height: auto;
        margin: 10px auto 200px auto;
        padding-left: 50px;
        padding-bottom: 0px;
        background-color: #4EA67C;
}
.servicesimage{
        width: 300px;
        height: 300px;
        border-radius: 50%;
        margin-top: auto;
        margin-bottom: auto;
      }

  .backgroundbox{
        height: auto;
        margin: auto;

  }

  .servicestext{
        margin-left: auto;
        margin-right: auto;
        padding: 20px;
        font-size: 18px;
        text-align: left;

  }

  .section-links{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 30px;
        margin-bottom: 30px;
  }


  .linkcircle{
        height: 130px;
        width: 130px;
        margin: 60px auto 30px auto;
        text-align: center;
        padding-top: 20px;
  }


  .subpage{
        margin-top: 60px;
  }
  .subpage a {
        color: white;
        font-size: 14px;
  }
/* testimonials page */


#logoFlex{
        display: flex;
        width:80%;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;

}

.logo-container{
        margin: 20px;

}


.logo-box img{
        width:170px;
}

.testimonials-container{
        width: 80%;
        display: flex;
        flex-direction: column;
        background-color: #F2C4CD;
        margin: 50px auto 100px auto;
        font-size: 18px;

}

.testimonialBox{
        margin: 15px auto 15px auto;
        padding-bottom: 30px;
        padding-top: 10px;
        text-align: center;
        font-size: 18px;
  }
.testimonialBox p{
        text-align: left;

}

#testimonial-1 img{
       width: 25px;
       margin-bottom: 10px;
       margin-left: auto;
       margin-right: auto;

}



  /* contact page Laptop */
  #email{

            display: block;
            margin: 90px auto 40px auto;
            width:150px;
    }


  #email a {
            text-decoration: underline;
            text-align: center;

  }
  .website{
          font-size: 10px;
          margin-right: 8px;
          margin-bottom: 3px;
          text-decoration: underline;
          font-style: italic;
  }

}

/* Large Screen */
@media only screen and (min-width: 1400px){
  body {

  }
  #mypage{
          background-image: url('images/BackgroundImage-LargeSceeen.jpg');

  }
  nav{
           width: 100%;
  }
  /* menu*/
  .menu {
            align-items: center;
            flex-wrap: nowrap;
            background: none;
            justify-content: center;
            width: 50%;
            margin-left: auto;
            margin-right: auto;
      }

  .page {
            order: 0;
            position: relative;
            display: block;
            width: auto;
            padding-right: 20px;
            margin-left: auto;
            margin-right: auto;
            letter-spacing: 3px;
            font-size: 20px;
      }

  .page a {
            padding-left: auto;
            padding-right: auto;
  }
  #menu-logo{
            margin-left: auto;
            margin-right: auto;

        }

  #menu-logo img {
            width: 73px;
            height: 73px;
  }

  .toggle {
          display: none;
      }


    /*large screen body */
    main{
        width: 60%;
    }
    #logo{
          display: block;
          margin: 130px auto 60px auto;
          width:160px;
    }

    .aboutImg{
          width:160px;
          margin: 130px auto 60px auto;
          align-content: center;
          border-radius: 50%;
          background-color: white;
        }
#greenbox{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
        padding: 50px;
}

  h1{
          font-size: 23px;

        }

  .para{
          font-family: 'corbel', sans-serif;
          text-align: center;
          font-size: 19px;
          padding: 10px;
    }


  /* about bubble page */
  #heading-bubble{
          font-size: 21px;
  }
#bubblebox{
          background: #F2C4CD;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 150px;
          width: 90%;
          padding: 50px;
    }

    .para-bubble{
          height: auto;
          width:90%;
          font-size: 19px;
          text-align: left;
          margin-left: auto;
          margin-right: auto;
          padding: 10px;
    }


    /*services styles */
    #servicespage{
          width: 60%;
    }
  #top-backgroundbox{
          background-color: #4EA67C;
          width:  90%;
          margin: 10px auto 150px auto;
          padding: 50px;
  }
    #linksbox{
          margin-left: auto;
          margin-right: auto;
          width: 60%;
    }

  #alignment-box1{
          display: flex;
          flex-direction: row;
          text-align: left;
          width: 90%;
          margin: 10px auto 150px auto;
          background-color: #4EA67C;
          padding: 50px;
  }

  #alignment-box2{
          display: flex;
          flex-direction: row-reverse;
          justify-content: center;
          width: 90%;
          margin: 10px auto 150px auto;
          background-color: #4EA67C;
          padding: 50px;
  }

  #alignment-box3{
          display: flex;
          flex-direction: row;
          justify-content: center;
          width: 90%;
          margin: 10px auto 150px auto;
          background-color: #4EA67C;
          padding: 50px;
  }
    .servicesimage{
          width: 300px;
          height: 300px;
          border-radius: 50%;
          padding: 40px;
          margin-top: auto;
          margin-bottom: auto;
        }

    .backgroundbox{
          height:auto;
          margin: auto;
    }

    .servicestext{
          margin-left: auto;
          margin-right: auto;
          padding: 5px;
          font-size: 22px;
          text-align: left;

    }

    .section-links{
          display: flex;
          flex-direction: row;
          justify-content: space-around;
          margin-top: 30px;
          margin-bottom: 30px;
    }
    .linkcircle{
          height: 120px;
          width: 120px;
          margin: 130px auto 30px auto;
          text-align: center;
          padding-top: 20px;
    }


    .subpage{
          margin-top: 50px;
    }
    .subpage a {
          color: white;
          font-size: 14px;
    }

  /*Testimonials*/
  #logoFlex{
          display: flex;
          width:90%;
          flex-wrap: wrap;
          flex-direction: row;
          margin-left: auto;
          margin-right: auto;
          justify-content: space-around;
  }

  .logo-container{
        padding: 40px;
  }
  #topLogo{
        margin-top: 40px;
  }
  .logo-box{
          margin-left: auto;
          margin-right: auto;
  }
  .logo-box img{
          width:200px;
  }

  .testimonials-container{
          width: 90%;
          display: flex;
          flex-direction: column;
          background-color: #F2C4CD;
          margin: 50px auto 100px auto

  }

  .testimonialBox{
          margin: 15px auto 15px auto;
          padding-bottom: 30px;
          padding-top: 10px;
          text-align: center;
          font-size: 20px;
    }
  .testimonialBox p{
          text-align: left;

  }

  #testimonial-1 img{
         width: 25px;
         margin-bottom: 10px;
         margin-left: auto;
         margin-right: auto;

  }
    /* Form style Laptop */
    #email{
        display: block;
        margin: 130px auto 60px auto;
        width:160px;


    }

    #email a {
      text-decoration: underline;
      text-align: center;
    }
.website{
      font-size: 11px;
      margin-right: 10px;
      margin-bottom: 5px;
      text-decoration: underline;
      font-style: italic;

}


  }