:root{
    --greenblue: #23d796;
    --dark-blue: #333366;
    --cornflower-blue: #577bd0;
    --sun-yellow: #fdd63b;
    --pinkis: #f4aed8;
    --blue: #577bd0;
    --dropdownframe: #c4c4c4;
  }
  #startbox{
    display: none;
  }
.halfstarspan1{
    width: 6px;
    display: inline-block;
    overflow-y: hidden;
    margin-bottom: -8px;
}
#spacerrtttl{
    height: 100px;
    display: block;
    width: 100%;
}
.productbox-typee {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #535353;
  }

.learnlangtitle{
    text-align: left;
}
.withunderline{
    text-decoration: underline;
}
.timetextshouldbeblue{
    color: #577BD0 !important;
}
@media only screen and (max-width: 768px) {
    .learnlangtitle{
        text-align: center;
    }
    .readmorelinklangpage{
        text-align: center;
        margin: 25px auto 0 auto;
    display: block;
    }
}
/* cookies @@@@@@@@@@@@@@@@@@@@@@  */
#cookieconsent{
    background: #577BD0 ;
    width: 60vw;
    max-width: max(812px, 60vw) !important;
    height: 250px;
    margin: 0 auto;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 20px;
    border-top-right-radius: 115px;
    border-bottom-right-radius: 115px;
    padding: 2rem 4rem;
    z-index: 999;
    position: fixed;
    display: none;


}
.cookie-title {
font-size: 21px;
line-height: 32px;
letter-spacing: -0.005em;
color: #FFFFFF;
}
.cookie-message {
font-size: 15px;
line-height: 32px;
letter-spacing: -0.005em;
color: #FFFFFF;
}
#acceptcookies{
width: 145px;
height: 36px;
background-color: #23D796;
border-radius: 21px;
color: #fff;
border: 0;
float: right;
margin-right: 25px;
}
#denycookies{
    width: 145px;
    height: 36px;
    background-color: #23D796;
    border-radius: 21px;
    color: #fff;
    border: 0;
    float: right;
    margin-right: 25px;
}
#opencookies{
    width: 145px;
    height: 36px;
    background-color: #23D796;
    border-radius: 21px;
    color: #fff;
    border: 0;
    float: right;
    margin-right: 25px;
}

@media only screen and (max-width: 1300px) {
#cookieconsent{

    padding: 2rem 2rem;
}

}
@media only screen and (max-width: 992px) {
#cookieconsent{
    background: #577BD0 ;
    width: 100vw;
    max-width: 100vw !important;
    height: min(250px, 100%);
    margin: 0 auto;
    text-align: left;
    position: absolute;
    left: 0;
    bottom: 20px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    padding: 2rem 4rem;
}
}
@media only screen and (max-width: 500px) {
#cookieconsent{
    text-align: center;
    height: 350px;
}
#acceptcookies{

float: none;
margin-right: 0;
}
#denycookies{

float: none;
margin-right: 0;
}
#opencookies{

float: none;
margin-right: 0;
}
}

/* old cookie */
.cc-window.cc-floating {
   padding: 0;    
   max-width: max(812px, 40%) !important; 
   border-top-right-radius: 115px;
   border-bottom-right-radius: 115px;
   width: 812px;
height: 200px;
background: #577BD0 !important;
max-width: 100vw;

}
.cc-bottom {
    bottom: 2em;
  }
  .cc-left {
    left: 0;
  }
  .cc-btn {
    display: block;

  }
  .cc-message{
    padding: 0 4rem 0 4rem;
    font-size: 21px;
    line-height: 32px;
    letter-spacing: -0.005em;
        color: #FFFFFF;

  }
  
  .cc-link{
      display: inline;
      color: #23D796 !important;
  }
  .cc-color-override-1656469763 .cc-btn {
    color: rgb(0, 0, 0);
    border-color: transparent;
    background-color: transparent !important;
    background: url('../images/buttons/find-out-more-green-open.png');
    /* background: url('../images/buttons/find-out-more.png'); */
    width: 145px;
    height: 36px;
    background-position: center center;
  }
  .cc-window.cc-floating .cc-compliance {
    width: 145px;
    height: 36px;
    margin-left: 4rem;
    font-size: 0px;
  }
  .cc-btn {
    border-style: none;
  }
  .cc-color-override-1656469763 .cc-btn:hover, .cc-color-override-1656469763 .cc-btn:focus {
    background-color: transparent;
  }
  @media only screen and (max-width: 992px) {
    #spacerrtttl{
        height: 0;

    }
    .cc-window.cc-floating {

     height: 300px;

     
     }
    .cc-window.cc-floating {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        width: 100vw;
        text-align: center;
    }
    .cc-window.cc-floating .cc-compliance {

        margin: 0 auto;
    }
  }

#headdiv{
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 100%;
    object-fit: cover;
    height: 100vh;
    background-position: center; 
  }
  body{
    font-family: Karla;
  }
h1{
    width: 100%;
    font-weight: 600;
    font-size: 48px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -0.005em;
    /* text-transform: capitalize; */
    color: #FFFFFF;
    margin-top: calc(40vh - 86px);
}
h4{
    font-weight: 600;
font-size: 36px;
line-height: 58px;
text-align: center;
letter-spacing: -0.005em;
color: #333366;
}
p{
    font-size: 14px;
    line-height: 26px;
    color: #535353;
}
input:focus{
    border: none;
    border-color: transparent;
}
a{
    color: #0ACF83;
}
a:hover{
    cursor: pointer;
}

.imgbox img{
    width: 100%;
}
/* section h3{
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 36px !important;
    line-height: 58px;
    letter-spacing: -0.005em;
    color: #577BD0;
    text-align: left;
} */
textarea:focus, input:focus{
    outline: none;
}
input:focus{
    border: none;
    border-color: transparent;
  }
h2{
    font-size: 36px;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: -0.18px;
    text-align: left;
    color: #577bd0;
}
h3{
    font-weight: 600;
    font-size: 36px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -0.005em;
    color: #333366;
}
h5{

    font-weight: 600;
    font-size: 36px;
    line-height: 58px;
    text-align: center;
    letter-spacing: -0.005em;
    color: #577bd0;
    width: 100%;

}

.textbox p {
    font-weight: 400;
    font-size: 14px;
    line-height: 26px;
    color: #535353;
  }
   .firstp{
    font-size: 17px;
}

  .textbox .firstp{
    font-size: 17px;
}

  .button{
      width: 145px;
      height: 35px;
  }
  input::placeholder{
    font-weight: 500;
    font-size: 13px;
    line-height: 68px;
    letter-spacing: -0.015em;
    color: #565658;
    /* margin-left: 10px; */
    text-align: left;
    text-indent: 30px !important;
  }
  .readmorelink, .readlesslink{
      color: var(--greenblue) !important;
  }
  #startbox{
    position: absolute;
    top: 75px;
    right: 55px;    
    }
    #startbox a{
        color: #F1DD28;
    }
    #blackcolortext{
        color: black;
    }
  /* bluebox and transparent !!!!!!!!!!!!!!!!!!!!@@@@@@@@@@@@@@@@@@@ */
  .blueboxleft {
    background: #577BD0;
    border-top-right-radius: 131px;
    border-bottom-right-radius: 131px;
    height: 247px;
    color: #fff;
    padding-left: 5rem;
    padding-right: 2rem;
  }
  
.blueboxleft p{
    color: #fff;
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
}
.imagecontainerright{
    text-align: center;
}
.blueboxleft p {
    color: #fff;
    font-style: italic;
    font-size: 14px;
    line-height: 26px;
  }

/* lang */
.getspecificarrow:hover{
    text-decoration: none;
}
  /* buttons @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ */
  #signupbutton{
    width: 145px;
    height: 36px;
    background: url('../images/buttons/sign-up-green-open.png');
    border: 0;
}
#signupbutton:active, #signupbutton:focus, #signupbutton:hover{
    outline: none;
    background: url('../images/buttons/sign-up-green-closed.png');
    width: 145px;
    height: 36px;
    background-size: 145px 36px;
}
#findoutmorebutton{
    width: 145px;
    height: 36px;
    /* background: url('../images/buttons/find-out-more-green-open.png'); */
    background: url('../images/buttons/find-out-more.png');
    border: 0;
}
#findoutmorebutton:active, #findoutmorebutton:focus, #findoutmorebutton:hover{
    outline: none;
    background: url('../images/buttons/find-out-more-green-closed.png');
    width: 145px;
    height: 36px;
    background-size: 145px 36px;
}
#submitbutton, .submitbutton{
    width: 145px;
    height: 36px;
    background: url('../images/buttons/submit-green-open.png');
    border: 0;
    background-color: #fff;
border-radius: 18px;
}
.submitbutton2{
    background: url('../images/buttons/submit-button-white.png');
    width: 150px;
    height: 36px;
    display: block;
margin: 0 auto;
    background-size: cover;
    border: 0;

}
.submitbutton2:active, .submitbutton2:focus, .submitbutton2:hover{
    background: url('../images/buttons/submit-button-green.png');
    width: 150px;
    height: 36px;
    background-size: cover;

}
#submitbutton:active, .submitbutton:active, .submitbutton:focus, .submitbutton:hover, #submitbutton:focus, #submitbutton:hover{
    outline: none;
    background: url('../images/buttons/submit-button-green.png');
    width: 145px;
    height: 36px;
    background-size: 145px 36px;
    /* background-color: #7a23d7 ; */
}
#letsgobutton{
    width: 131px;
    height: 36px;
    background: url('../images/buttons/lets-go-green-open.png');
    border: 0;
}
.button:active, .button:focus, .button:hover{
    outline: none;
}
.productbox-signup:hover{
    cursor: pointer;
}
.signupbutton{
    width: 145px;
height: 36px;
background-image: url('/images/buttons/sign-up-green-open.png');
margin: 5px auto 50px auto;
  margin-top: 5px; 
position: relative;
top: 50%;
transform: translateY(-50%);
}
.signupbutton:hover, .signupbutton:active, .signupbutton:focus{
    background-image: url('/images/buttons/sign-up-green-closed.png');
    background-size: cover;
    height: 37px;

}
.greensignupbut {
    width: 86.9px;
    height: 22px;
  }
.readmoretext{
    display: none;
}
.firstthreep {
    display: block;
}
/* RESP @@@@@@@@@@@@@@@@@@@@@@@ / */
@media only screen and (max-width: 992px) {
    .firstthreep {
        display: none;
    }
    #courseincludes{
        margin: 0 auto 100px auto;
    }
    h2, h4{
        text-align: center;
    }
    .signupbutton{

    margin: 50px auto 50px auto;

    }
    .blueboxleft{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        padding-left: 4rem;
        padding-right: 4rem;
    }
    .imagecontainerright{
        margin-top: 4rem;
    }

}

#coursescontainer{
    padding-top: 4rem;
    justify-content: space-around;
}





  @media only screen and (max-width: 992px) {
    h2{
        /* text-align: center !important; */
        width: 100%;
    }
  }
  @media only screen and (max-width: 768px) {
    p{
        text-align: center;
    }
    #start h1{
        font-size: 36px;
    }
    #beginsection h1{
        font-size: 36px;

    }
    #courseincludes{
        margin: 0 auto 0 auto;
    }

  }
  @media only screen and (max-width: 600px) {
    #nextslide, #nextslide1{
        display: none;
    }
  }
  @media only screen and (max-width: 576px) {
    h3{
        text-align: center !important;
    }

  }
  
  /* green button */
@font-face {
  font-family: 'KarlaMedium';
  src: url('../vendor/fonts/Karla/Karla-Medium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

  .customgreenbutton:focus{
      outline : none;
  }
  .customgreenbutton{
      width: 155px;
      height: 36px;
      border-radius: 25px;
      border: 1px solid #23D796;
      /* padding-left: 15px; */
      justify-content: space-between;
      display: flex;
      /* font-weight: bold; */
      box-sizing: content-box;
      background-color: #fff;
      padding: 0;
      margin: 0 auto 15px auto;
  }
  .customsubmitbutton{
      margin: 20px auto 0 auto;
  }
  .customgreenbutton p{
      /* display: inline-block; */
      color: #23D796;
      line-height: 34px;
      font-size: 15px;
      margin: 0;
      height: 34px;
      font-family: 'KarlaMedium' , 'KarlaTest', 'Arial', 'times new roman', 'Helvetica';
  }
  .customgreenbutton p:nth-child(1){
      margin-left: 16px;
      width: 100px !important;
  }

  .custombuttonlink:hover{
      text-decoration: none;
  }

  .customgreenbutton p:nth-child(2){
      background-color: #23D796;
      color: #fff;
      width: 36px !important;
      height: 36px;
      border-radius: 50%;
      text-align: center;
      font-size: 22px;
  }

  .customgreenbutton:hover{
      background-color: #23D796;
  }
  .customgreenbutton:hover p{
      color: #fff;
  }