.topnav{
  font-family: 'Montserrat';
  font-size: 20px;
}

.tosca{
  background-color: #166174;
}

#navbarNavDropdown a:hover, .nav-active{
  background-color: #339ab2;
}

.body{
  font-family: Montserrat;
  padding-left: 20px;
  padding-right: 20px;
}

.footer i{
  margin: 10px 5px 10px 25px;
  font-size: 24px;
  color:rgba(255, 255, 255, 0.762);
}

.footer i:hover{
  color: #00A4BD;
}

.footer p{
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 12px;
  font-family: 'Montserrat';
}

.bg-plblack{
  background-color: rgba(0, 0, 0, 0.137);
}

.grey{
  background-color: rgba(133, 133, 133, 0.425);
}

.nav-item{
  margin-left: 10px;
  margin-right: 10px;
}

.centerin2{
  text-align: right;
}

.content1{
  line-height:2.6;
  text-align: justify;
}

.kanit{
  font-family: "kanit", sans-serif;
}

.header{
  color:#339ab2;
}


/*Introo*/
.intro {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 3;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  background: #222529;
  transition: 1s;
  box-sizing: border-box;
  font-size: 52.5%;
  font-family: 'montserrat', sans-serif;
}

.intro img {
  top: 150px;
}

.intro p{
  color: #339ab2;
  font-size: 3rem;
  margin-top: 10px;
}

.logo {
  font-size: 2.5rem;
  color: #ffffff;
}

.logo-parts {
  position: relative;
  display: inline-block;
  bottom: -20px;
  opacity: 0;
}

.logo-parts.active {
  bottom: 0;
  opacity: 1;
  transition: ease-in-out 0.5s;
}

.logo-parts.fade {
  bottom: 250px;
  opacity: 0;
  transition: ease-in-out 0.5s;
}

.content{
  width: 100%;
  padding: 50px;
  font-size: 2rem;
}

.dummy{
  height: 50px;
}


/*Content top*/
.wrapper {
  background-image: url(all-time\ pict/bg.gif);
}

.gap{
  height: 8vw;
}

.mont1{
  font-family: 'Montserrat';
  margin-left: 18%;
  font-size: 2vw;
  line-height: 1.5;
}

.mont{
  font-family: 'Montserrat';
}

.margin1{
  margin-bottom: 30px;
}

.mont-subra{
  font-family: 'Montserrat Subrayada';
  font-size: 6.5vw;
}

@media (max-width: 1024px){
  .mont-subra{
    font-size: 6.2vw;
  }
}


/*Text animation color*/
.text-animate {
  animation-name: change-color;
  animation-duration: 8s;
  animation-delay: 4s;
  animation-iteration-count: infinite;
  font-weight: 600;
  text-align: center;
}

@keyframes change-color {
  25% {
    color: #00A4BD;
  }
  50% {
    color: #339ab2;
  }
  75% {
    color: #166174;
  }
  100% {
    color: #ffffff;
  }
}


/*Feature section*/
.hover{
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
}
.features img{
  height: 100px;
}
.feature_desc{
  font-size: 18px;
  font-family: "Montserrat", sans-serif;
  margin-left: auto;
  margin-right: auto;
  max-width: 60%;
}

@media (max-width: 1772px){
  #feature_desc4{
    max-width: 65%;
  }
}

@media (max-width: 1646px){
  .feature_desc, #feature_desc4{
    max-width: 75%;
  }
}

@media (max-width: 1440px){
  #feature_desc4, #feature_desc1{
    max-width: 86%;
  }
}

@media (max-width: 1286px){
  #feature_desc4, #feature_desc3, #feature_desc2, #feature_desc1{
    max-width: 94%;
  }
}

@media (max-width: 1173px){
  #feature_desc3, #feature_desc2{
    max-width: 84%;
  }
  #feature_desc4{
    max-width: 94%;
  }
  #feature_desc1{
    max-width: 90%;
  }
}

@media (max-width: 1072px){
  #feature_desc4{
    max-width: 100%;
  }
  #feature_desc1{
    max-width: 98%;
  }
  #feature_desc2{
    max-width: 92%;
  }
}

@media (max-width: 980px){
  #feature_desc4, #feature_desc1, #feature_desc2{
    max-width: 90%;
  }
  #feature_desc3{
    max-width: 60%;
  }
}

@media (max-width: 916px){
  #feature_desc3{
    max-width: 70%;
  }
}

@media (max-width: 916px){
  #feature_desc4, #feature_desc1, #feature_desc2{
    max-width: 80%;
  }
}

.feature{
  font-family: "Montserrat", sans-serif;
  margin: 10px 0 20px 0;
}
.feature_faq{
  margin-bottom: 33px;
}
.features .dropdwn{
  padding: 10px;
}
#button22{
  padding: 10px;
}
.itemh a:hover{
  background-color: #51bbd3ae;
}
.features button:hover{
  background-color: #676666c7;
}



/*Tabbed content*/
.tab-active{
  background-color:rgba(133, 133, 133, 0.425);
  transform: perspective(10px) rotateX(1deg);
}
.tabs div{
  display: inline-block;
  padding: 12px;
  font-size: 20px;
  border: 1px solid rgba(255, 255, 255, 0.304);
  width: 100px;
  text-align: center;
  border-bottom: none;
  margin-right: 5px;
}

.contentss, .contentss1{
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

.tabs div:not(.tab-active):hover{
  background-color: #c8c8c86a;
}

@media (max-width: 992px){
  .contentss p, .contentss h2{
    padding-left: 5%;
  }
}


/*Swiper*/
.swiper {
  width: 85%;
}

.swiper-slide {
  background-size: cover;
}

.swiper-slide img {
  display: block;
  width: 100%;
}


/*Contact us*/
.submitt{
  border: 0px;
  padding: 7px;
  font-size: 18px;
  width: 100px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 20px;
}

.submitt:hover{
  background-color: #339ab2;
}


/*Responsive*/
@media (max-width:768px) {
  .centerin{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .centerin2{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .buttonn1{
    margin-bottom: 15px;
  }

  .bigcontent{
    padding-left: 0;
  }

  .dummy{
    height: 40px;
  } 

  .mont1{
    font-size: 4vw;
    margin-left: 8%;
  }

  .imagebreak{
    width: 20%;
  }

  .break500{
    margin-top: 10vw;
    margin-left: auto;
    margin-right: auto;
  }

  .text-animate{
    font-size: 6.8vw;
  }
  .feature_desc{
    max-width: 50%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 767px){
  .break500{
    margin-top: 0;
  }
  .text-animate{
    font-size: 10vw;
  }
} 

@media (max-width: 552px){
  .dummy{
      height: 0px;
  }
  .mont1{
    font-size: 5vw;
  }
  .mont-subra{
    font-size: 12vw;
  }
  .feature_desc{
    max-width: 75%;
  }
  .break500{
    margin-top: 0;
  }
}

@media (max-width:993px) {
  .swiper, .break500{
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
  }
  .submitt{
    font-size: 18px;
    width: 100px;
    height: 50px;
  }
}

@media (max-width: 367px){
  .tabs div{
    padding: 5px ;
    font-size: 16px;
    width: 70px;
    margin-right: 2px;
  }
  .feature_desc{
    max-width: 95%;
    margin-left: auto;
    margin-right: auto;
  }
}


/*searchbar desktop*/
.findIcon{
  margin-top: 12px;
}
#ico2{
  display: none;
  margin-top: 10px;
}

#findA{
  margin-top: 10px;
  margin-right: 10px;
  margin-left: 15px;
}

#myInput2 {
  width: 180px;
  font-size: 16px;
  border: 1px solid #ddd;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin-left: 57%;
  position: fixed;
  overflow-y: scroll;
  max-height: 80vh;
  z-index: 3;
  font-family: Montserrat;
}

@media (min-width: 1851px){
  #myUL{
      max-height: 50vh;
  }
}

@media (max-width:1850px){
  #myUL {
      margin-left: 60%;
      max-height: 60vh;
  }
}
@media (max-width:1750px){
  #myUL {
      margin-left: 64%;
  }
} 
@media (max-width:1650px){
  #myUL {
      margin-left: 68%;
  }
} 
@media (max-width:1550px){
  #myUL {
      margin-left: 73%;
  }
} 
@media (max-width:1450px){
  #myUL {
      margin-left: 78%;
  }
} 
@media (max-width:1350px){
  #myUL {
      margin-left: 83%;
  }
} 

#myUL li a {
  border: 1px solid rgb(76, 77, 80);
  margin-top: -1px; 
  background-color: rgb(34,37,41);
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: none;
  width: 210px;
  text-align: center;
}

#myUL li a:hover:not(.header) {
  background-color: rgb(76, 77, 80); 
}


@media only screen and (max-width: 1318px) {
  #myInput2 {
      display: none;
      width: 80px;
  }
}


/*searchbar mobile*/
.input-search{
  position: fixed;
  display: none;
  left: 0px;
  top: 10px;
  width: 100%;
  background-color: #166174;
  padding: 10px;
}

.input-search .ico {
  margin-top: 10px;
  float: left;
}
.input-search input {
  width: 100%;
  border: none;
}
.input-search div {
  margin-left: 20px; 
  border: 0px;
}

#findB{
  margin-right: 70vw;
}

@media (max-width:915px) {
  #findB{
      margin-right: 50vw;
  }
}
@media (max-width:552px) {
  #findB{
      margin-right: 35vw;
  }
}
@media (max-width:425px) {
  #findB{
      margin-right: 1vw;
  }
}

#myUL2 {
  list-style-type: none;
  padding: 0;
  position: fixed;
  overflow-y: scroll;
  max-height: 60vh;
  z-index: 6;
  width: 100%;
  position: fixed;
  font-family: 'Montserrat';
}

#myUL2 li a {
  border: 1px solid rgb(76, 77, 80);
  margin-top: -1px; 
  background-color: rgb(34,37,41);
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: white;
  display: none;
  width: 100%;
  z-index: 7;
  text-align: center;
}

#myUL2 li a:hover:not(.header) {
  background-color: rgb(76, 77, 80); 
}

@media (max-width:1200px) {
  #findA, #ico2, #myInput2{
      display: none;
  }
}