html {
  scroll-behavior: smooth;
}

* {
   cursor: default;
}

th, td {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

/*----------------------------------*/
.headerTabs{
 display:none;
}

.hideOnSmall{
  text-decoration: none;
  color:#fff;
  cursor:pointer;
}
.hideOnSmall:hover{
  text-decoration: none;
  color:#013257;
}


.headerTabFont{
  width:100%;
  text-align:center;
  font-size:20px;
  color:#fff;
  float:left;
  display:block;
  position:relative;
  text-decoration: none;
  cursor:pointer;
}

.headerTabFont:hover{
  color:#013257;
}

.headerTabFont30{
  margin-left:2%;
  font-size:30px;
  color:#000;
  float:left;
}

.headerTabFont30-1{
  margin-left:2%;
  font-size:40px;
  color:#000;
  float:left;
  font-weight:bold;
  width:90%;
  margin-left:5%;
}

.headerTabFont30-2{
  font-size:16px;
  color:#000;
  float:left;
  font-weight:bold;
  width:70%;
  margin-left:15%;
}


.headerTabFontArrow{
  font-size:20px;
  color:#fff;
  margin-top:-15%;
  float:left;
  width:100%;
  text-align:center;
  position:relative;
  text-decoration: none;
}
.headerTabFontArrow:hover{
  text-decoration: none;
  color:#0361a8;
}

.signInButton{
  float:right;
  font-weight:bold;
  color:#fff;
  font-size:20px;
  background:#0361a8;
  padding:7px 20px 7px 20px;
  border-radius: 5px;
  margin:10px;
  position:relative;
}

.headerTabFontSignin{
  background:#0361a8;
  color:#fff;
  padding:5px;
  font-size:20px;
  border-radius: 5px;
  cursor:pointer;
  width:100%;
  text-align:center;
  display:block;
  float:left;
  position:relative;
  font-weight:bold;
}

.marqueeSection{
  width:60%;
  margin-left:20%;
  height:50px;
  padding:auto;
  display:block;
  float:left;
  text-align:center;
  position:relative;
  background-image: linear-gradient(to right, rgba(255,0,0,0)20%, rgba(255,255,255,1)60%, rgba(255,0,0,0));
}




.marqueeSection2{
  margin-top:-5%;
  width:90%;
  margin-left:5%;
  height:80px;
  padding:15px;
  display:block;
  float:left;
  text-align:center;
  position:relative;
  background-image: linear-gradient(to right, rgba(255,0,0,0)20%, rgba(39,59,92,1)60%, rgba(255,0,0,0));

}

.marqueeSectionFont{
  color:#0361a8;
  font-size:40px;
  font-weight:bold;
}

.marqueeSectionLink{
  color:#0361a8;
  font-size:40px;
  font-weight:bold;
  cursor:pointer;
  padding-left:20px;
  padding-right:20px;
  border-radius: 5px;
}
.marqueeSectionLink:hover{
  background:#0361a8;
  color:#fff;
  font-size:40px;
  font-weight:bold;
}

.marqueeSectionFont2{
  color:#000;
  font-size:40px;
  font-weight:bold;
}


.headerInfo{
  width:30%;
  margin-left:35%;
  height:auto;
  display:block;
  float:left;
  text-align:center;
  position:relative;
  background:transparent;
  }


  .quartersOrHalfs{
  width:20%;
  height:150px;
  margin-left:4%;
  background:#013257;
  float:left;
  position:relative;
  border-radius: 5px;
  margin-top:20px;
  align-items: center;
  justify-content: center;

}

.quartersOrHalfs p{
  width:100%;
  text-align:center;
  font-size:20px;
  font-weight:bold;
  color: #fff;
  line-height: 150px;
}

.quartersOrHalfs p1{
  font-size:20px;
  font-weight:bold;
  color: #013257;
  margin-top:10%;
}


.ipadImageClass{
  height:auto;
  width: 50%;
  margin-left:25%;
  margin-top:100px;
  margin-bottom:100px;
  transition: all 2s;
  transform: rotate(-15deg);
}

.schedulerContainer{
  width:50%;
  text-align:center;
  margin-top:100px;
  float:left;
  display:block;
  background-image: linear-gradient(to right, rgba(255,0,0,0)10%, rgba(255,255,255,1)60%, rgba(255,0,0,0));
}
.schedulerContainer1{
  width:50%;
  text-align:center;
  margin-top:100px;
  float:right;
  display:block;
  background-image: linear-gradient(to right, rgba(255,0,0,0)10%, rgba(255,255,255,1)60%, rgba(255,0,0,0));
}


.bg{
   width:92%;
   Height:auto;
   transition: all 2s;
   background:lightgrey;
   margin-top:35px;
   margin-left:4%;
   float:left;
}

.bg:hover {
  background-color: grey;
  cursor: pointer;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

.bg1{
  transition: all 2s;
  filter: brightness(75%);
  width:49%;
}
.bg1:hover{
  filter: brightness(100%);
}

.scheduleImage{
  width:50%;
}

#easyOpticianLink{
  color:#0f2f47;
  padding-left:5px;
  padding-right:5px;
  cursor: pointer;
  border-radius: 2px;
  text-decoration: underline;
}

#easyOpticianLink:hover{
  background:#3096e3;
}

.contactForm{
  width:30%;
  display:block;
  float:left;
  min-width:350px;
  position:relative;
  margin-left:35%;
}

.contactForm2{
  width:50%;
  display:block;
  float:left;
  min-width:350px;
  position:relative;
  margin-left:25%;
}









/*************************/

.area1{
  width:100%;
  height:auto;
  margin-top:-370px;
  margin-bottom:100px;
  display:block;
  float:left;
  background:transparent;
  position:relative;
  text-align:center;
}

@import url('https://fonts.googleapis.com/css?family=Exo:400,700');
@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}
@keyframes move { 0%{ left: 0px; top: 0px; } 50%{left: 88%; top: 0%;}  100%{ left: 0px; top: 0px; }}

.area{
    background: #013257;
    width: 92%;
    height:400px;
    position:relative;
    display:block;
    float:left;
    margin-top: 100px;
    margin-left:4%;
}




.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;

}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}



/********************************/

/*********11111111111111111111111*****************/


section{
  position: relative;
  width: 100%;
  height: 250px;
  background: grey;
  overflow: hidden;
}
section .air{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-size: 1000px 100px;
}
section .air.air1{
  animation: wave 30s linear infinite;
  z-index: 1000;
  opacity: 1;
  animation-delay: 0s;
  bottom: 0;
}
section .air.air2{
  animation: wave2 15s linear infinite;
  z-index: 999;
  opacity: 0.5;
  animation-delay: -5s;
  bottom: 10px;
}
section .air.air3{
  animation: wave 30s linear infinite;
  z-index: 998;
  opacity: 0.2;
  animation-delay: -2s;
  bottom: 15px;
}
section .air.air4{
  animation: wave2 5s linear infinite;
  z-index: 997;
  opacity: 0.7;
  animation-delay: -5s;
  bottom: 20px;
  background:#999999;
}
@keyframes wave{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: 1000px;
  }
}
@keyframes wave2{
  0%{
    background-position-x: 0px;
  }
  100%{
    background-position-x: -1000px;
  }
}





/**************11111111111111111111111111111*********************/

.optician{
  width: 100%;
  border-radius: 50%;
  animation: rotation 6s infinite linear;
  margin:0px;
}

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.mapleleaf{
  width: 20%;
  position:absolute;
  top:40%;
  left:40%;
}

#captchaBox{
  display:none;
  float:left;
  position:relative;
  margin-top:-250px;
  width:40%;
  margin-left:30%;
  padding:40px;
  background:#fff;
  box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
  -webkit-box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
  -moz-box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
}

#accessCodeBox{
  display:none;
  float:left;
  position:relative;
  width:40%;
  margin-left:30%;
  padding:40px;
}



#dbCreated{
  display:none;
  float:left;
  position:relative;
  margin-top:-250px;
  width:40%;
  margin-left:30%;
  padding:40px;
  background:#fff;
  box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
  -webkit-box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
  -moz-box-shadow: -5px 1px 103px 50px rgba(0,0,0,0.46);
}




@media screen and (max-width: 1370px) {


}






@media screen and (max-width: 1170px) {
  .headerTabFont{
    font-size:15px;
  }

  .headerTabFontArrow{
    display:none;
  }


}


@media screen and (max-width: 970px) {
  .hideOnSmall{
    display:none;
  }


  .headerTabs{
    width:12%;
    float:right;
    margin-right:10px;
    position:relative;
    text-align:left;
    display:block;
  }

  .headerTabFont{
    font-size:12px;
  }




  .signInButton{
    display:none;
  }

  .headerTabFontSignin{
    font-size:12px;
  }


  .marqueeSectionFont{
    font-size:20px;
  }
  .marqueeSectionLink{
    font-size:20px;
  }

  .marqueeSectionFont2{
    font-size:20px;
  }

  .marqueeSection{
    height: 25px;
    width:100%;
    margin-left:0%;
  }

  .headerInfo{
    width:50%;
    margin-left:25%;
  }

  .headerTabFont30{
    font-size:12px;
  }


  .headerTabFont30-1{
    font-size:14px;
    width:80%;
    margin-left:10%;

  }

  .headerTabFont30-2{
    font-size:12px;
    width:80%;
    margin-left:10%;
  }

  .quartersOrHalfs{
    width:41%;
    height:70px;
    margin-left:6%;
  }


  .quartersOrHalfs p{
    font-size:12px;
    line-height: 70px;
  }


  .quartersOrHalfs p1{
    font-size:12px;
  }

  .ipadImageClass{
    height:auto;
    width: 80%;
    margin-left:10%;
    margin-top:50px;
    margin-bottom:50px;
  }

  .area{
      background: #013257;
      height:250px;
  }

  .area1{
    margin-top:-230px;
  }


  .schedulerContainer{
    margin-top:0px;
    width:100%;
  }
  .schedulerContainer1{
    margin-top:0px;
    width:100%;
    float:left;
  }
  .marqueeSection2{
    margin-top:-10%;
  }

  .bg1{
    width:100%;
  }


  .scheduleImage{
    width:100%;
  }

  .contactForm{
    width:60%;
    margin-left:20%;
  }


  .contactForm2{
    width:80%;
    margin-left:10%;
  }


  #captchaBox{
    margin-top:-250px;
    width:90%;
    margin-left:5%;
    padding:10px;
  }
  #captchaBox p input table{
    font-size:12px;
  }

  #accessCodeBox{
    width:90%;
    margin-left:5%;
    padding:10px;
  }


  #dbCreated{
    width:80%;
    margin-left:10%;
    padding:10px;
  }

  #dbCreated h1{
    font-size:18px;
  }

  #dbCreated h2{
    font-size:12px;
  }





}



@media screen and (max-width: 750px) {



}