@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');

html, body {
      margin: 0;
      padding: 0;
      width: 100%;
}

body {
      font-family: 'Raleway', sans-serif;
      font-weight: lighter;
      background: #f6fcf4;

}
.wrapper {
      width: 80%;
      margin:auto !important;
}
header {
      width: 80%;
      height: 60px;
      background: transparent;
      background-size: cover;
      margin: auto;

}

.content {
      width: 94%;
      margin: 4em auto;
      font-size: 20px;
      line-height: 30px;
      text-align: justify;
}

.logo {
      line-height: 30px;
      position: fixed;
      float: left;
      margin: 16px 46px;
      height: 120px !important;

}


.nav {
      position: fixed;
      width: 80%;
      line-height: 200px !important;
      margin-bottom:25px;
      z-index:10;
      margin:auto !important;

}

/*.logo img{
      width:15% !important;
      border:1px solid blue;
      }*/

      .slid {
            z-index: -10;
            margin-top: 85px;
      }

      .nav ul {
            line-height: 65px;
            list-style: none;
            background: white;
            overflow: hidden;
            padding: 0;
            text-align: right;
            margin: 0;
            padding-right: 40px;
            transition: 1s;
      }
      .navv .iconfb {
            margin-left: 35px;
      }

      .navv .icon:hover {
            color:#cd486b
      }

      .navv .iconfb:hover {
            color:#3b5998;
      }

      .nav.black ul {
            background: #fff;
            color:black;
      }
      .nav.black ul a {
            color:black;
      }

      .nav ul li {
            display: inline-block;
            padding: 30px 10px;
      }

      .nav ul li a {
            text-decoration: none;
            color: #555;
            font-size: 18px;
      }

      .icon {
            color:#555;
            font-size: 30px;

      }

      .nav ul li a:hover {
            color:#00c853
      }

      .icon:hover {
            color:#00c853;
      }
      .menu-icon {
            line-height: 60px;
            width: 100%;
            background: #000;
            text-align: right;
            box-sizing: border-box;
            padding: 15px 24px;
            cursor: pointer;
            color: #00c853;
            display: none;
      }

      .logo img {
            width:125px;
      }

      @media(max-width: 906px) {

            header {
                  width:100%;
            }

            .logo {
                  position: fixed;
                  top: 0;
                  top: -15px;
                  left:-25px;
            }

            .logo img {
                  width:120px;
            }

            .navv {
                  max-height: 0px;
                  background: #fff;
                  margin:auto !important;
                  width:100%;
            }


            .nav.black ul {
                  background: #fff;
            }


            .showing {
                  max-height: 34em;
            }

            .nav ul li {
                  box-sizing: border-box;
                  width: 100%;
                  padding: 5px;
                  background:white;

            }

            .nav ul li a {
                  color:black;
            }

            .nav ul li a:hover {
                  color: green;
            }

            .menu-icon {
                  display: block;
                  background: white;
            }

            .wrapper {
                  width:100%;
            }

            .nav {
                  width: 100%;
                  height:40px;
            }

            .iconfb {
                  margin:auto;
            }


      }

      @media (min-width: 810px) and (max-width: 1039px){
            .nav ul li a {
                  font-size:13px;
            }

      }


      /*------------------ MY PREV VERSION CODE ----------------------------*/

      .fbook {
          width:45%;  
          padding:15px;

    }

    .fbook iframe {
         margin:auto;
   }

   .slider {
        width:80% !important;
        margin:auto;
        margin-top: 25px;
        border-radius:5px;
  }

  .main {
        display: flex;
        width:80%;
        margin: 25px auto;
        box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
        background-color:white; 
        margin-top:75px;

  }

  #fb {
        padding:10px;
        margin:auto;
        font-size: 60px !important;
  }

  .mainPage p,img {

        padding:15px;
        text-align: center;
        width:70%;
        margin:auto;
  }

  .mainPage a {
    color:#00c853;
    font-size: 16px;
  }

  .mainPage a:hover {
    opacity: 0.6;
    transform: all .5s;
  }

  .image {
        width:95%;
        margin:auto;
        margin-top:15px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        padding:15px;
  }

  .stopa {
    display:flex;
    width:100%;
    height: 200px;
    background:#aaa;
    margin:22px auto;
    box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
    justify-content: space-around;
    flex-wrap: nowrap;
    align-items: center;

}

.copyRight {
    align-self: center;
    padding-left:35px;
    padding-top:15px;
    width:300px;
}

.footer {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:33%;
}

.footer p{
    font-size:13px;
    color:#f9f9f9;
    padding:20px;
    text-align: center;
}

.footerContact {
    margin:auto;
    width: 33%;
    padding-left: 10px;


}
.footerContact h4 {
    padding-bottom:5px;
    color:#555;
    margin: 25px auto;

}

u {
    text-decoration: none;
    border-bottom:3px solid #00c853;
}

.footerContact li {
    color:#f9f9f9;
    font-size: 16px;
}

.footerSocial{
    width:33%;
    display: flex;
    justify-content: center;
    align-items: center;



}

.footerSocial li {
      list-style: none;
      margin:auto 25px;
      background: transparent;
}

.footerSocial .icon{
      color:#f9f9f9;
}

.sliderBtn {
  width:220px;
  height:70px;
  color:red;
  border-radius:8px;
  margin:45px auto;
  border:none;
  background: #00c853;
  color:#f9f9f9;
  opacity:0.8;
  font-size:20px;
  text-decoration:none;
}

.sliderBtn a {
  text-decoration: none;
  color:#f9f9f9;
}

.sliderBtn:hover {
  opacity:1;
  text-decoration:none; 
}


.main h4 {
  padding:15px 45px ;
}

.about p {

  padding:15px;
  width:70%;
  text-align: justify;
  padding-left:30px;
}

.about {

  display:flex;
  justify-content: space-between;

}

#profile{
  width:750px;
  padding:10px;
  display:flex;
  justify-content: center;
  align-items: center;

}

#aboutMe{
  display:flex;
  flex-wrap: wrap;
  width:80%;
  margin: 25px auto;
  box-shadow:0 1px 4px rgba(0, 0, 0, 0.3);
  background-color:white; 
  margin-top:75px;
}

#aboutMe h4 {
  margin-left:45px;
}

.diplomas {
  display: flex;
  justify-content: space-around; 
  flex-wrap: wrap;
  margin: 15px auto;

}

.diplomas div {
  width:265px;
  padding:10px;

}

.vertical {
  width: 280px;
  margin-left:-35px;
}



.offer p {
  width:100%;
  text-align: justify;
  margin-left:45px;
}

.offerImg{
  width:35%;
  margin:auto;
  display:flex;
  justify-content: center;
  align-items: center;
}

.offer h5,h6,p {
  margin-left:45px;
}

.offer {
  color:#222222;
  width:60%;
  padding:50px;
}

#online {
  color:#222222;
  width:45%;
  padding:50px;
}

#offer {
  display: flex;
  flex-wrap: wrap;
  width:80%;
  margin: 25px auto;
  margin-top:75px;
}

.offerList li {
  list-style:square !important;
  text-align: justify;
  color:inherit;
  padding-left:5px;
  margin:10px;
  margin-left:70px;
}
.offer h4 {
  padding:10px;
  border-bottom:1px solid #00c853;
  font-weight: 700;
}

#firstMeeting {
  width:60%;
  margin:auto;
}

.main h4  {
  padding:15px;
  border-bottom:1px solid #00c853;
  font-weight: 700;
  margin:25px;
}

.price {
  color:#222222;
  width:80%;
  padding:50px;
}

.price h6 {
  padding:15px;
}

.contact {
  margin:auto;
  width:80%;
}


.contactWays {
  margin: auto;
  margin-bottom:35px;
  display: flex;
  justify-content: center;
  width:95%;
  align-items: center;
}
#contactIcons {
  color:#555555;
  background: white;
  font-size:45px;
  padding:10px;
}

.contactMe {
  display:flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
  padding:15px;
  margin:10px;
}

.contactMe p {
  font-size:15px;
  color:#555;
  margin:auto;
}

.contact form {
  outline: none;
  width:60%;
  margin:auto;
  padding-top:25px;
}

form input[type=text]:focus {
      border-bottom: 1px solid #00c853 !important;
      box-shadow: 0 1px 0 0 #00c853 !important;
}

#textArea {
  width:100%;
  height:250px;

}

#send {
  text-decoration: none;
  padding:15px;
  width:150px;
  background:transparent;
  border:1px solid #00c853;
  margin: 25px;
}

#send:hover {
  color:#00c853;
}

textarea:focus {
  outline: none !important;
  border:2px solid #00c853;

}

textarea {

  overflow: auto;
  outline: none;
  resize: none;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.bottomRights {
  text-align: center;
  margin:auto;
  padding:5px;
}

.hiddenSocial {
  display:none;
}

.sliderPage {
  height:80%;
  background-size:cover;
  position: absolute;
  top:0;
  left: 0;
}

@media (max-width:768px) {


    .main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width:90%;

  }


        .fbook {
            width:90%;
            margin:auto;
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;

      }

      .fbook iframe {
            margin:auto !important;
            padding:5px;
            width:400px;



      }
    
      .about {
            display:flex;
            flex-direction: column;
            width:90%;
            justify-content: center;
            /* align-items: center; */
      }

      .about p {
            width:95%;
            margin:auto;
      }

      #profile {
            width:90%;
            margin:auto;
      }

      #profile img {
            width:100%;
            padding:0;
      }

      .offer {
            display: flex;
            flex-direction: column;
            width:95%;
      }

      .offerList li {

            padding-left:5px;
            margin:10px;
            margin-left:7px;
      }

      .offer h4 {
            text-align:center;
            font-size:23px;
            margin:auto;
            padding-bottom:2px;
            margin-bottom:5px;
      }

      .offer p {
            text-align: justify;
            font-size:14px;
            margin:auto;
            margin-top:10px;
      }

      .offerImg {
            /* border:1px solid green; */
            display:flex;
            justify-content: center;
            align-items: center;
            width:45%;
      }

      .offerImg img{
            /* border:1px solid blue; */
            margin:auto;

      }

      .price {
            width:95%; 
      }

      .price h6,p {
            width:95%;
            margin: auto;
            text-align: center;
            padding-top:10px;
      }

      .offerList ul {
         text-align: center; 
   }
   #dietOnline {
        margin-top:10px;
        font-size:18px;
  }

  .contact {
        width:98%;
  }

  .contactWays {
        width:98%;
        display:flex;
        flex-direction: column;
        margin-bottom:20px;
  }

  .contactMe {
        width:90%;
  }

  .contact form {
        width:80%;
        margin:auto;
  }

  header {
      width: 100%;
}


}

@media (min-width:768px) and (max-width:1165px){
    .about {
        display:flex;
        flex-direction: column;
        width:90%;
        justify-content: center;
        margin:auto;
  }

  .about p {
        width:95%;
        margin:auto;
  }

  #profile {
        width:90%;
        margin:auto;
  }

  #profile img {
        width:95%;
        padding:0;
  }

  .rwdFb{
        display: flex;
        flex-direction: column;

  }
  .fbook {

        width:90%;
        margin:auto;
        display: flex;
        justify-content: center !important;
        align-items: center !important;
        margin-bottom:5px;
  }

  .fbook iframe {
        margin:auto;
        padding:5px;
        width:400px;
  }
}

@media (min-width:200px ) and (max-width: 375px){

    .sliderBtn {
          width:120px;
          height:60px;
          font-size:16px;
          transform: translate(5%,0%);
    }

    .fbook iframe{
      width:250px !important;
      margin:auto !important;
}
}

@media (min-width: 180px) {
        .stopa {
            width:100%;
            display:flex;
            flex-direction: column;
            flex-wrap:wrap;
            justify-content: center;
            align-items: center;

      }

      .footer {
            display:none;
      }

      .footerContact {
            text-align: center;
            margin:auto;
            margin-top:30px;
            width:90%;

      }


      .footerContact h4 {
            margin:auto;
            font-size:25px;
      }


      .footerContact ul {
            font-size:15px;
            padding-top:3px;
      }

      .footerContact li {
            color:#333;
            padding:1px;
      }

      .copyRight {
            display:none;
      }


      .footerSocial {
            display:none;
      }

      .hiddenSocial {
            display:flex;
            width:35%;
            margin:auto; 
            margin-top:15px;

      }

      .hiddenSocial li {
            margin:auto;
      }

      .hiddenSocial .icon {
            color:#f9f9f9;
      }

}

@media (min-width: 500px) {

      .hiddenSocial {
            display:flex;
            width:15%;
            margin:auto; 
            margin-top:15px; 
      }

      .hiddenSocial li {
            margin:auto;
      }

      .hiddenSocial .icon {
            color:#f9f9f9;
      }


}