html {
  font-size: 1;
}

body {
  font-family: Verdana, sans-serif; 
  margin:0px; 
  padding:0px;
  overflow: hidden;
}


.mainHeader {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 10vmin;
  position: fixed;
  width: 100%;
  z-index:100;
  background-color: white;
}

.companyName {
  font-weight: 700;
  white-space: normal;
  color: #c1c1c1;
  font-size: calc( 1.35rem + (2 - 1.35) * ((100vmax - 20rem) / (48 - 20)));
  font-family: 'Dosis', sans-serif;
  padding: 1vmax 0 1.2vmax 2vmax;
}

.enquiry{
  display: flex;
  flex-direction: column;
  padding: 0 0 1.2vmax 2vmax;
  font-size: 15px
}

.logo{
  padding: 2vmax 0 0.3vmax 2vmax;
  font-weight: 700;
  white-space: normal;
  color: black;
  font-size: calc( 1.35rem + (2 - 1.35) * ((100vmax - 20rem) / (48 - 20)));
  font-family: 'Dosis', sans-serif;
}

.image{
  height:45px;
}

.enquiry > span {
  margin-bottom: 4px;
  font-size: 2.5vmin;
}

.companyLoginArea {
  padding: 1.5vmax 2vmax 1.2vmax 2vmax;
}

.mainLogin {
  text-align: center;
  margin: .4rem .8rem;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  font-style: normal;
  white-space: normal;
  transition: all .2s ease-in-out,box-shadow 2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  line-height: 1.5;
  letter-spacing: 1px;
  font-family: 'Josefin Sans',sans-serif;
  font-size: calc( 1.35rem + (2 - 1.35) * ((40vw - 20rem) / (48 - 20)));
  padding: 1.3vmin 2.5vmin;
}

.mainLogin:hover {
  text-align: center;
  margin: .4rem .8rem;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  font-style: normal;
  white-space: normal;
  transition: all .2s ease-in-out,box-shadow 2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  line-height: 1.5;
  letter-spacing: 1px;
  font-family: 'Josefin Sans',sans-serif;
  font-size: calc( 1.35rem + (2 - 1.35) * ((40vw - 20rem) / (48 - 20)));
  padding: 8px 30px;
  color:white;
  background-color: black;
}

.mainBody {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}
.slideshow {
  position: relative;
}
.parallax__layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.slideshow-container {
  /* position: relative; */
  top: 0px;
  margin-top: 0px;
  padding:0px;
  width: 300%;
  text-align: left;
  font-size: 0;
  animation-name: slidy;
  animation: 15s slidy infinite; 
  background-attachment: fixed;
  background-position: left;
  background-repeat: no-repeat;
  background-size: cover;
  transform: translateZ(-1px) scale(2);

}

.slideshow-container img {
  margin: 0px;
  flex-grow: 1;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  width: 80vw;
  height: 70vh;
  object-fit: cover;
}

.mySlides { 
  width: 33.33%; 
  float: left; 
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.highlight {
  background-color: blue;;
}

.wrap {
  height: 200px;
}

.slideTextAnime {
  position: absolute;
  top: 50vh;
  left: calc( 10vw - 4vh);
  font-size: calc( 1.875rem + (3.5 - 1.875) * ((70vmax - 20rem) / (48 - 20)));
  line-height: calc( 1.4 * (1.875rem + (3.5 - 1.875) * ((120vmax - 20rem) / (48 - 20))));
  font-family: 'Dosis';
  color: white;
  width: 97%;  
  padding-left: 5px;
  padding-right: 5px;
}

.slideText {
  font-size: calc( 1.14rem + (1.4 - 1.14) * ((190vmax - 20rem) / (48 - 20)));
  line-height: calc( 1.4 * (1.14rem + (1.4 - 1.14) * ((170vmax - 20rem) / (48 - 20))));
  font-family: 'Dosis';
  color: black;
  background-color: #ffffff;
  position: absolute;
  width: auto;
  padding-bottom: 0;
  margin-bottom: 0;
  padding-left: 5px;
  padding-right: 5px;
}

@keyframes slidy {
  0% { left: 99.2%; }
  25% { left: 99.2%; }
  33% { left: -100.6%; }
  58% { left: -100.6%; }
  66% { left: -302%; }
  91% { left: -302%; }
  100% { left: 99%; }
}

.nextBody {
  margin-top: 18vw;
  font-weight: 700;
  white-space: normal;
  vertical-align: -4px;
  color: black;
  font-size: calc( 1.35rem + (2 - 1.35) * ((100vw - 20rem) / (48 - 20)));
  font-family: 'Dosis', sans-serif;
  background-color: white;
  z-index:1000;
  height:70%;
  min-height:90%;
  width:100%;
  transform: translateZ(0);
  color: #232323;
  position: relative;
  top: 70%;
  
}

.active {
  background-color: #717171;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */


.curriculumBrief {
  color: black;
  padding-top: 2vmax;
  background-color: rgb(229, 229, 238);
}

.curriculumBrief h2 {
  font-family: 'Dosis';
  font-size: calc( 1.35rem + (2 - 1.35) * ((90vmax - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  font-weight: 300;
  margin-bottom: .5vh;
}

.curriculumBrief .underline .line {
  width: 20vmax;
  height: 2px;
  background: #444444;
  display: inline-block;
}

.underline {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.align-center {
  text-align: center;
}

.curriculumBrief h3 {
  font-family: 'Dosis';
  font-size: calc( 1.35rem + (2 - 1.35) * ((60vmax - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.3;
  text-align: center;
  font-weight: 300;
  margin-top: 0;
  padding: 1vmax 1vmin 3.6vmax 1vmin;
}

.curriculum {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  width: 100%;
  margin-top: 3vmax;
  margin-bottom: 5vmax;
}

.curriculumDetail {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  padding: 2vmin 0;
  padding-left: 3vmin;
  padding-right: 2vmin;
}

.curriculumDetailIcon {
  text-align: center;
  padding-bottom: 1.5vh;
}

.curriculumDetailHeading {
  text-align: center;
  font-family: 'Dosis';
  font-size: calc( 1.35rem + (2 - 1.35) * ((60vw - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.3;
  font-weight: 600;
  padding-bottom: 1vh;
}

.curriculumDetailText {
  justify-content: flex-start;
  font-family: 'Dosis';
  font-size: calc( 1.35rem + (2 - 1.35) * ((44vw - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.6;
  font-weight: 400;
}

.footer {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: rgb(229, 229, 238);
  justify-content: center;
  font-size: calc( 1.35rem + (2 - 1.35) * ((60vmax - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.2;
  text-align: center;
  font-weight: 300;
}

.footerFlexDirection {
  display: flex;
  justify-content: space-between
}

.leftFooter {
  display: flex;
  flex-direction: column;
  margin-left: 15px;
}

.rightFooter {
  margin-right: 50px;
}

.middleContentFooter{
  justify-content: center;
  width: 100vw;
}


.logoFooter {
  text-shadow: rgb(0 0 0 / 40%) 0px 4px 5px;
  margin-top: 35px;
}

.contactLabels {
  font-family: 'Dosis';
  font-size: calc( 1.35rem + (2 - 1.35) * ((50vmax - 20rem) / (48 - 20)));
  font-style: normal;
  line-height: 1.3;
  font-weight: 600;
}

.contactForm {
  display: flex;
  flex-direction: column;
  width: 290px;
  align-items: center;
}

.contactForm{
  margin-bottom: 15px;
  padding: 4px;
  margin-top: -4px;
}

.contactInput{
  padding: 10px;
  border-style: none;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px, rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
  margin-top: -4px;
}


.submitBtn {
  margin: 4px 2px;
  cursor: pointer;
  width: 100px;
  padding: 4px;
  margin-top: -3px;
  text-align: center;
  font-weight: 700;
  border-width: 2px;
  border-style: solid;
  font-style: normal;
  white-space: normal;
  transition: all .2s ease-in-out,box-shadow 2s ease-in-out;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  line-height: 1.5;
  letter-spacing: 1px;
  font-family: 'Josefin Sans',sans-serif;
}

.submitBtn:hover:disabled,
.submitBtn:hover[disabled]{
  background-color: grey;
  cursor: not-allowed;
}


.submitBtn:hover {
  text-align: center;
  color:white;
  background-color: black;
}

h6 {
  color: #333;
  font-family: tahoma;
  font-weight: 90;
  line-height: 1.5;
}

.animateTrial
{
   text-transform: uppercase;
  background-image: linear-gradient(
    -225deg,
    #231557 0%,
    #44107a 29%,
    #ff1361 67%,
    #b6b24a 100%
  );
  background-size: auto auto;
  background-clip: border-box;
  background-size: 200% auto;
  color: #fff;
  background-clip: text;
  /* text-fill-color: transparent; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textclip 2s linear infinite;
  display: inline-block;
  font-size:23px;
}

@keyframes textclip {
  to {
    background-position: 200% center;
  }
}

#email_error, #phone_error {
  position: absolute;
  margin: 0;
  padding-top:4px;
  padding-left: 8px;
  color: red;
  font-size: 14px;
}

.emailInput {
  position: relative;
  height: 60px;
}

.mobileInput {
  position: relative;
  height: 65px;
}

#snackbar {
  visibility: hidden; 
  /* Hidden by default. Visible on click */
  font-family: tahoma;
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  background-color: #333; /* Black background color */
  color: #fff; /* White text color */
  text-align: center; /* Centered text */
  border-radius: 2px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: absolute; /* Sit on bottom of the screen */
  z-index: 1; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  bottom: 15px; /* 30px from the bottom */
}

/* Show the snackbar when form is submitted */
.show {
  visibility: visible !important; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 15px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 15px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 15px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 15px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}
/* .contactInput {
  --color_0: 255,255,255;
  --color_27: 240,240,240;
  --color_1: 68,39,13;
  --color_2: 220,124,12;
  --color_3: 148,148,147;
  --color_4: 240,240,240;
  --color_5: 236,221,200;
  --color_6: 255,255,255;
  --color_7: 238,199,165;
  --color_8: 221,144,75;
  --color_28: 180,180,180;
  --color_9: 158,91,30;
  --color_10: 68,39,13;
  --color_11: 255,255,255;
  --color_12: 238,199,165;
  --color_13: 221,144,75;
  --color_14: 158,91,30;
  --color_15: 68,39,13;
  --color_16: 250,212,167;
  --color_17: 245,169,79;
  --color_18: 220,124,12;
  --color_29: 120,120,120;
  --color_19: 147,83,8;
  --color_20: 73,41,4;
  --color_21: 234,234,233;
  --color_22: 212,212,212;
  --color_23: 191,191,190;
  --color_24: 169,169,169;
  --color_25: 148,148,147;
  --color_30: 60,60,60;
  --color_31: 245,238,228;
  --color_32: 236,221,200;
  --color_33: 208,171,119;
  --color_34: 162,118,56;
  --color_35: 81,59,28;
  --font_0: normal normal normal 22px/1.41em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_1: normal normal normal 14px/1.79em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
  --font_2: normal normal normal 28px/1.375em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_3: normal normal normal 88px/1.2em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_4: normal normal normal 72px/1.25em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_5: normal normal normal 50px/1.34em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_6: normal normal normal 40px/1.35em futura-lt-w01-book,futura-lt-w05-book,sans-serif;
  --font_7: normal normal normal 20px/1.67em dancingscript-regular,'dancing script',cursive;
  --font_8: normal normal normal 18px/1.75em dancingscript-regular,'dancing script',cursive;
  --font_9: normal normal normal 15px/1.875em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
  --font_10: normal normal normal 14px/1.79em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
  --wix-ads-height: 0px;
  --wix-ads-top-height: 0px;
  --site-width: 980px;
  --above-all-z-index: 100000;
  --portals-z-index: 100001;
  --minViewportSize: 320;
  --color_26: 248,248,248;
  --maxViewportSize: 1920;
  --pinned-layers-in-page: 0;
  --pinned-layer-in-container: 50;
  --above-all-in-container: 49;
  --shadow: inset 0 4px 6px -4px rgba(255, 255, 255, 0.59), inset 0 1px 0 0 rgba(255, 255, 255, 0.59), inset 0 -5px 5px -5px rgba(255, 255, 255, 0.9);
  --shc-mutated-brightness: 123,119,114;
  pointer-events: auto;
  --shd: 0.00px 1.00px 4px 0px rgba(0,0,0,0.6);
  --brdd: 219,219,219;
  --rd: 0px;
  --fnt: normal normal normal 14px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
  --brw: 0px 0px 1px 0px;
  --bg: var(--color_11);
  --txt: var(--color_15);
  --alpha-txt: 1;
  --brd: var(--color_15);
  --txt2: var(--color_15);
  --alpha-txt2: 1;
  --brwh: 1px;
  --bgh: var(--color_11);
  --brdh: var(--color_15);
  --brwf: 1px;
  --bgf: var(--color_11);
  --brdf: var(--color_15);
  --brwe: 1px;
  --bge: 255,64,64;
  --brde: 255,64,64;
  --trns: opacity 0.5s ease 0s, border 0.5s ease 0s, color 0.5s ease 0s;
  --bgd: 255,255,255;
  --alpha-bgd: 1;
  --alpha-brdd: 1;
  --fntlbl: normal normal normal 8px/1.4em avenir-lt-w01_35-light1475496,avenir-lt-w05_35-light,sans-serif;
  --txtlbl: var(--color_15);
  --txtd: 219,219,219;
  --alpha-txtlbl: 1;
  --txtlblrq: var(--color_15);
  --alpha-txtlblrq: 1;
  --fntprefix: normal normal normal 16px/1.4em helvetica-w01-roman,helvetica-w02-roman,helvetica-lt-w10-roman,sans-serif;
  --alpha-brd: 1;
  --alpha-brdf: 1;
  --alpha-brdh: 1;
  --alpha-bg: 0;
  --alpha-bgh: 0;
  --alpha-bgf: 0;
  --alpha-txtd: 1;
  --alpha-bge: 0.1;
  --alpha-brde: 1;
  --dir: ltr;
  --textAlign: left;
  --textPadding: 3px 3px 3px 8px;
  --labelPadding: 0 20px 0 0px;
  --requiredIndicationDisplay: inline;
  --labelMarginBottom: 9px;
  --brwd: 1px;
  --inputHeight: 35px;
  color: var(--corvid-color,rgb(var(--txt,var(--color_15))));
  box-shadow: var(--shd,0 0 0 transparent);
  font: var(--fnt,var(--font_8));
  -webkit-appearance: none;
  border-radius: var(--corvid-border-radius,var(--rd,0));
  box-sizing: border-box!important;
  padding: var(--textPadding);
  margin: 0;
  max-width: 100%;
  text-overflow: ellipsis;
  text-align: var(--textAlign);
  direction: var(--dir);
  min-height: var(--inputHeight);
  width: 100%;
  border-width: var(--brwe,1px);
  background-color: rgba(var(--bge,255,255,255),var(--alpha-bge,1));
  border-style: solid;
  border-color: rgba(var(--brde,163,217,246),var(--alpha-brde,1));
} */

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }


/* modale */

.btn {
  background: #428bca;
  border: #357ebd solid 0px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}
.btn.btn-big {
  font-size: 18px;
  padding: 15px 20px;
  min-width: 100px;
}
.btn-close {
  color: #aaaaaa;
  font-size: 20px;
  text-decoration: none;
  padding:10px;
  position: absolute;
  right: 7px;
  top: 0;
}
.btn-close:hover {
  color: #919191;
}
.modale:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.opened:before {
  display: block;
}
.opened .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 20%;
}
.modal-dialog {
  background: #fefefe;
  border: #333333 solid 0px;
  border-radius: 5px;
  margin-left: -12%;
  margin-right: -1%;

  text-align:center;
  position: fixed;
  left: 50%;
  right:30%;
  top: -100%;
  z-index: 11;
  width: 500px;
  box-shadow:0 5px 10px rgba(0,0,0,0.3);
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 20px;
}
.modal-body input{
  width:200px;
  padding:8px;
  border:1px solid #ddd;
  color:#888;
  outline:0;
  font-size:14px;
  font-weight:bold
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eeeeee solid 1px;
}
.modal-header h2 {
  font-size: 18px;
}


/* overlay */
.mainHeaderOverlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
}

@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

@media only screen and (max-width: 500px) {
  .modal-dialog {
    width: 100%;
    text-align:center;
    position: fixed ;
    left: 11%;
    top: -100%;
  }
  .modal-header h2 {
    font-size: 14px;
  }
  .mainLogin {
    font-size: 8px;
    height: 5%;
  }
  .slideshow-container img {
    width: 100px;
    height: 40vh;
  }
  .nextBody {
    font-size: 10px;
  }

  .nextBody .curriculum {
    flex-direction: column;
  }

  .curriculum .curriculumDetail .curriculumDetailText {
    font-size: 11px;
  }

  .curriculum .curriculumDetail .curriculumDetailHeading {
    font-size: 11px;
  }

  .footer {
    flex-direction: column;
  }

  .footerFlexDirection {
    flex-direction: column;
  }

  .leftFooter {
    align-items: center;
    margin-top: 6px !important;
    margin-left: 0px;
  }

  .rightFooter {
    margin-right: 0px !important;
  }

  .enquiry {
    font-size: 10px;
    padding: 0 0 1.2vmax 3.1vmax;
  }  

  .logoFooter{
    margin-top: 0 !important;
  }

  .image {
    height: 20px;
  }

  .animateTrial {
    font-size: 15px !important;
    font-weight: bold !important;
  }

  #snackbar {
    left: 55% !important;
    align-items: center !important; 
    min-width: 190px !important;
    bottom: 185px !important;
  }

  .contactForm {
    width: 220px;
    margin-top: 3px;
    align-items: center;
  }

  .contactInput{
    width: 200px  !important;
    padding: 9px !important;
    margin-top: 2px;
    /* align-items: center; */
  }

  .submitBtn{
    height: 25px;
    width: 10vmax !important;
    font-size: 9px !important;
  }

  .curriculumDetail {
    padding-top: 10vmax;
  }

  .curriculumBrief {
    padding-bottom: 3vh;
    padding-top: 10vh;
  }

  .curriculum {
    padding-bottom: 5vw;
  } 

}

@media only screen and (max-width: 389px) {
  .curriculumBrief {
    padding-bottom: 1vh;
  }
}