@charset "utf-8";

/* CSS Document */



.hamburger { width: 92px; float: left; margin: 0 0 0; position: absolute; top: 94px; left: 19px; z-index: 99999999;cursor: pointer;}

.hamburger .hamburger-tex1 { float: right;font-size: 14px;font-weight: 500;color: #ffffff;letter-spacing: 0.3px;line-height: 40px;margin: 0 0 0;text-transform: capitalize;}

/*.hamburger .scroll.fixed .hamburger-tex1 { color: #328198;}*/

.hamburger .hamburger-row1 {width: 39px;height: 39px;float: left;background: url(../images/toggle-menu-thumb1.svg) no-repeat center top / 100%;border-radius: 50%;margin: 0 0 0;padding: 13px 11px 13px;position: relative;transition: transform 0.8s ease-in-out 0s;}

.hamburger .hamburger-row1 span {display: block;opacity: 1;width: 100%;height: 2px;float: left;background: none;transform-origin: 50% 50%;transition: background-color 0.2s ease-in-out, top 0.2s 0.2s ease-out, transform 0.2s linear;margin: 0 0 0;position: relative;}

.hamburger .hamburger-row1 span:first-child {margin-top: 0;}

.hamburger.open .hamburger-tex1 { color: #ffffff;}

.hamburger.open .hamburger-row1 span { background: #ffffff;}

.hamburger.open .hamburger-row1 span:nth-child(1) {width: 100%;bottom: -18px;transform: rotate3d(0, 0, 1, 45deg);}

.hamburger.open .hamburger-row1 span:nth-child(2) { width: 0;}

.hamburger.open .hamburger-row1 span:nth-child(3) {transform: rotate(-45deg);bottom: -16px;}

.hamburger:hover .hamburger-row1 { transform: rotate(360deg);}

.hamburger.open .hamburger-row1 { background: none; padding: 0;}

.hamburger.open:hover .hamburger-row1 { transform: inherit;}


.overlay {width: 100%;height: 100%;background-color: #f9f6f3;border-radius: 0;position: fixed;top: 50%;left: 50%;transform: translateY(-50%) translateX(-50%) scale(0.001);opacity: 0;z-index: 99999999;}

.showMenu { -webkit-animation: showMenu 1s cubic-bezier(0, 0, 0, 0) forwards; animation: showMenu 1s cubic-bezier(0, 0, 0, 0) forwards;}






@-webkit-keyframes showMenu {

  0% {

    transform: translateY(-50%) translateX(-50%) scale(0.001);

    opacity: 0;

  }

  5% {

    opacity: 1;

  }

  100% {

    transform: translateY(-50%) translateX(-50%) scale(1);

    opacity: 1;

  }

}



@keyframes showMenu {

  0% {

    transform: translateY(-50%) translateX(-50%) scale(0.001);

    opacity: 0;

  }

  5% {

    opacity: 1;

  }

  100% {

    transform: translateY(-50%) translateX(-50%) scale(1);

    opacity: 1;

  }

}

.hideMenu {

  -webkit-animation: hideMenu 1s cubic-bezier(0, 0, 0, 1);

    animation: hideMenu 1s cubic-bezier(0, 0, 0, 1);

}



@-webkit-keyframes hideMenu {

  0% {

    transform: translateY(-50%) translateX(-50%) scale(1);

    opacity: 1;

  }

  95% {

    opacity: 1;

  }

  100% {

    transform: translateY(-50%) translateX(-50%) scale(0.001);

    opacity: 0;

  }

}



@keyframes hideMenu {

  0% {

    transform: translateY(-50%) translateX(-50%) scale(1);

    opacity: 1;

  }

  95% {

    opacity: 1;

  }

  100% {

    transform: translateY(-50%) translateX(-50%) scale(0.001);

    opacity: 0;

  }

}

.fadeIn {

  -webkit-animation: fadeIn 0.25s ease-in forwards;

          animation: fadeIn 0.25s ease-in forwards;

}



@-webkit-keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}



@keyframes fadeIn {

  0% {

    opacity: 0;

  }

  100% {

    opacity: 1;

  }

}

.overlay-back {
    width: 42%;
    height: 100%;
    float: left;
    margin: 0 0 0;
    position: absolute;
    top: 0;
    left: 0;
    background-position-x: 100% !important;
}


/*Smartphone css*/

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

.hamburger { width: 76px; margin: 0 0 0; position: fixed; top: 16px; left: 5%;}

.hamburger .hamburger-row1 { float: left;}

.hamburger .hamburger-tex1 { float: right; display: block;}

.overlay-back {  width: 100%;  display: none;  margin: 0 0 0;}



.hamburger.open .hamburger-row1 span { background: #328198;}

.hamburger.open .hamburger-tex1 { color: #328198;}

.hamburger .hamburger-row1 { width: 33px; height: 33px;}

.hamburger .hamburger-tex1 { font-size: 13px; line-height: 34px;}




}



@media screen and (min-width:481px) and (max-width:600px) {


.hamburger { width: 76px; margin: 0 0 0; position: fixed; top: 16px; left: 5%;}

.hamburger .hamburger-row1 { float: left;}

.hamburger .hamburger-tex1 { float: right; display: block;}

.overlay-back {  width: 100%;  display: none;  margin: 0 0 0;}
 

.hamburger.open .hamburger-row1 span { background: #328198;}

.hamburger.open .hamburger-tex1 { color: #328198;}

.hamburger .hamburger-row1 { width: 33px; height: 33px;}

.hamburger .hamburger-tex1 { font-size: 13px; line-height: 34px;}


}



@media screen and (min-width:601px) and (max-width:767px) {

.hamburger { width: 76px; margin: 0 0 0; position: fixed; top: 16px; left: 5%;}

.hamburger .hamburger-row1 { float: left;}

.hamburger .hamburger-tex1 { float: right; display: block;}

.overlay-back {  width: 100%;  display: none;  margin: 0 0 0;}


.hamburger.open .hamburger-row1 span { background: #328198;}

.hamburger.open .hamburger-tex1 { color: #328198;}

.hamburger .hamburger-row1 { width: 33px; height: 33px;}

.hamburger .hamburger-tex1 { font-size: 13px; line-height: 34px;}


}



@media screen and (min-width:768px) and (max-width:900px) {

.hamburger { width: 72px; top: 22px; left: 3%;}

.hamburger .hamburger-tex1 { font-size: 13px; letter-spacing: 0.22px; line-height: 34px;}

.hamburger .hamburger-row1 { width: 31px; height: 31px;}

.hamburger.open .hamburger-row1 span:nth-child(3) { bottom: -13px;}

.hamburger.open .hamburger-row1 span:nth-child(1) { bottom: -15px;}

.hamburger .scroll.fixed .hamburger-tex1 {display: none;}


}



@media screen and (min-width:901px) and (max-width:1024px) {

.hamburger { width: 82px; top: 24px; left: 3%;}

.hamburger .hamburger-tex1 {font-size: 14px;letter-spacing: 0.27px;line-height: 36px;}

.hamburger .hamburger-row1 {width: 35px;height: 35px;}

.hamburger.open .hamburger-row1 span:nth-child(3) { bottom: -13px;}

.hamburger.open .hamburger-row1 span:nth-child(1) { bottom: -15px;}

.hamburger .fixed .hamburger-tex1 {font-size: 12px; line-height: 26px;}

.hamburger .fixed .hamburger-row1 {float: none; margin: 0 auto 0;}

}



@media screen and (min-width:1025px) and (max-width:1240px) {

.hamburger { width: 82px; top: 24px; left: 3%;}

.hamburger .hamburger-tex1 {font-size: 14px;letter-spacing: 0.27px;line-height: 34px;}

.hamburger .hamburger-row1 {width: 35px;height: 35px;}

.hamburger.open .hamburger-row1 span:nth-child(3) { bottom: -13px;}

.hamburger.open .hamburger-row1 span:nth-child(1) { bottom: -15px;}

.hamburger .fixed .hamburger-tex1 {line-height: 32px;}

.hamburger .fixed .hamburger-row1 {float: none; margin: 0 auto 0;}

}



@media screen and (min-width:1241px) and (max-width:1340px) {

.hamburger {width: 82px; top: 24px; left: 3%;}

.hamburger .hamburger-row1 {width: 35px;height: 35px;}

.hamburger.open .hamburger-row1 span:nth-child(3) { bottom: -13px;}

.hamburger.open .hamburger-row1 span:nth-child(1) { bottom: -15px;}

.hamburger .fixed .hamburger-row1 {float: none; margin: 0 auto 0;}

.hamburger .hamburger-tex1 {line-height: 35px;}

}


@media screen and (min-width:1341px) and (max-width:1440px) {
 
.hamburger .hamburger-tex1 { display: none;} 

.hamburger { width: 39px; left: 3%;}


}