/*COLORS*/

:root{
  /*
  --blueDark:#242d4c;
  --orange: #FF8E45;
  */
  /*--blueDarkOriginal:#204376;
  */
  --blueDark2:#1955A9;
  --blueDark3:#2d61ac;
  --blueDark:#0580CC;

  --blueMedio:#006db6;
  
  --blueOriginal: #025BAD;
  --blue: #2779c4;
  --blue2: #cde7ff;
  
  --orange: #f58220;
  --gray:#e5e6e7;
  --orangeDark: #994721;
  --blueLight: #099FFF;
  --fullWhite:#FFFFFF;
  --white:#EEEEEE;
  --whiteDark:#CCCCCC;
  --correct:rgb(19, 132, 150);
  --correctDark:#005577;
  --default:#4a4a4a;
  --defaultDark:#252525;
  --comment:orange;
  --commentDark:orangered;
  --error:rgb(255, 0, 0);
  --errorDark:#c82333;
  font-family: 'fedrasansbook';

  --verde:#5cb85c;

}

  .fontError{
    color:var(--error);
  }

  .fontCorrect{
    color:var(--correct);
  }

  .fontBlueDark{
    color:var(--blueDark);
  }

  .fontBlue{
    color:var(--blue);
  }

  .fontWhite{
    color:var(--white);
  }
  .fontBlack{
    color:black;
  }

  .blueOriginal{
    background-color: var(--blueOriginal);
    color: white;
  }

  .blueDark{
    background-color: var(--blueDark);
    color: white;
  }
  .blue{
    background-color: var(--blue);
    color: white;
  }
  .orange{
    background-color: var(--orange);
    color: black;
  }
  .gray{
    background-color: var(--gray);
    color: black;
  }
  .orangeDark{
    background-color: var(--orangeDark);
    color: black;
  }
  .blueLight{
    background-color: var(--blueLight);
    color: black;
  }
  .fullWhite{
    background-color: white;
    color: black;
  }
  .white{
    background-color: var(--white);
    color: black;
  }
  .whiteDark{
    background-color: var(--whiteDark);
    color: black;
  }

  .whiteDark:hover{
    background-color: var(--defaultDark);
    color:white;
  }

  .correct{
    background-color: var(--correct);
    color: white;
  }
  .correctDark{
    background-color: var(--correctDark);
    color: white;
  }
  .default{
    background-color: var(--default);
    color: white;
  }
  .defaultDark{
    background-color: var(--defaultDark);
    color: white;
  }
  .comment{
    background-color: var(--comment);
    color: black;
  }
  .commentDark{
    background-color: var(--commentDark);
    color: black;
  }
  .error{
    background-color: var(--error);
    color: white;
  }
  .errorDark{
    background-color: var(--errorDark);
    color: white;
  }


/*FONTS*/
@font-face{
  font-family: 'fedrasansbook';
  src: url(../fonts/fedrasansbook.ttf);
}

@font-face{
  font-family: 'fedrasansbookitalic';
  src: url(../fonts/fedrasansbookitalic.ttf);
}

@font-face{
  font-family: 'fedrasanslight';
  src: url(../fonts/fedrasanslight.ttf);
}


@font-face{
  font-family: 'fedrasanslightitalic';
  src: url(../fonts/fedrasanslightitalic.ttf);
}

@font-face{
  font-family: 'fedraserif';
  src: url(../fonts/FedraSerifPro\ A\ Bold.otf);
}

@font-face{
  font-family: 'reey';
  src: url(../fonts/Reey-Regular.otf);
}

@font-face{
  font-family: 'town';
  src: url(../fonts/town-10-display-black.otf);
}


.fedra{
  font-family: fedrasansbook;
}

.fedraItalic{
  font-family: fedrasansbookitalic;
}

.fedralight{
  font-family: fedrasanslight;
}

.fedraLightItalic{
  font-family: fedrasanslightitalic;
}

::-webkit-scrollbar {
  width: 10px;
}

/*SCROLLBAR*/
/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #888; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}

/*Borders*/

.rBorder{
  border-radius: 5px;
}



/*BUTTONS*/

.btn{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btn:hover{
  background-color: #025BAD;
}


.btnWhite{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:black;

}

.btnWhite:hover{
  background-color: #025BAD;
  color:white;
}


.btnVerde{
 
  background-color: #5cb85c;
  color:white;
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  
}

.btnVerde:hover{
  background-color: var(--blue);
}


.grayOverlay{  
  background-color: rgba(90,90,90,0.2);  
  
}

.grayOverlay:hover{  
  background-color: rgba(70,70,70,0.8);  
  
}


.btnBlue{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--blue);
  
}

.btnBlue:hover{
  background-color: var(--blueDark);
}


.btnBlueDark{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--blueDark);
  
}

.btnBlueDark:hover{
  background-color: var(--comment);
}


.btnOrange{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--orange);
  
}

.btnOrange:hover{
  background-color: var(--orangeDark);
}


.btnDefault{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  color:white;
  background-color: var(--default);
  
}

.btnDefault:hover{
  background-color: var(--defaultDark);
}


.btnDefaultSmall{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 20px;
  cursor: pointer;
  color:white;
  background-color: var(--default);
  
}

.btnDefaultSmall:hover{
  background-color: var(--defaultDark);
}




.btnWhiteSmall{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 15px;
  cursor: pointer;
  color:black;
  background-color: var(--whiteDark);
  
}

.btnWhiteSmall:hover{
  color:white;
  background-color: var(--defaultDark);
}

.btnClose{
  color: var(--error);
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  margin:3px;
}

.btnClose :hover{
  background-color: transparent;
  border: none;
  color:var(--defaultDark);
  cursor: pointer;
  font-size: 1.5rem;
}

.btnError{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  background-color: var(--error);
  color:white;
  
}

.btnError:hover{
  
  background-color: var(--errorDark);
}


.btnErrorDark{
  
  font-family: fedrasanslight;
  border-radius: 5px;
  border:none;
  line-height: 32px;
  cursor: pointer;
  background-color: var(--errorDark);
  color:white;
  
}

.btnErrorDark:hover{
  
  background-color: var(--error);
}

.btnWide{
  display: block;
  margin:0 auto;
  border-radius: 5px;
  border:none;
  width:100%;
  line-height: 32px;
}


.primaryBg{

  background-color: #025BAD;
  color:white;

}

.orangeBg{
  background-color: var(--orange);
  color: black;
}

.primary{

  background-color: #025BAD;
  color:white;

}

.primary:hover{
  transition: 0.4s;
  background-color: #099FFF;
  color:white;
}

.secondary{
  background-color: var(--orange);
  color:white;
}

.secondary:hover{
  transition: 0.4s;
  background-color: #994721;
  color:white;
}


/*GradientBackground*/



.gradientColor1{
  background-color: #08AEEA;
  background-image: linear-gradient(315deg, #2AF598 0%, #08AEEA 100%);
}

.gradientColor2{
  background-color: #2AF598;
  background-image: linear-gradient(135deg, #2AF598 25%, #FFE32C 100%);
}

.gradientColor3{
  background-color: #FFE53B;
  background-image: linear-gradient(135deg, #FFE53B 0%, #FF2525 74%);
}

.gradientColor4{
  background-color: #ff1919;
  background-image: linear-gradient(135deg, #ff1919 0%, #B721FF 100%);
}

.gradientColor5{
  background-color: #b721ff;
  background-image: linear-gradient(135deg, #b721ff 0%, #b5fffc 100%);
}

.gradientColor6{
  background-color: #b5fffc;
  background-image: linear-gradient(135deg, #b5fffc 0%, #08AEEA 100%);

}



.lightModePageBackground{
  /*background-color: white;*/
  background: #8e9eab;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to bottom, #eef2f3, #ccd0d1);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to bottom, #eef2f3, #ccd0d1); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  /*
  background: #8e9eab;
  background: -webkit-linear-gradient(to bottom, #eef2f3, #8e9eab);
  background: linear-gradient(to bottom, #eef2f3, #8e9eab);
  */



  
  color: black;
}

/*DIRECTION*/

.center{
  /*text-align:center;*/
  display:block;
  margin:0 auto;
}

.tCenter{
  /*text-align:center;*/
  text-align:center;
}

.tLeft{
  text-align:left;
}
.tRight{
  text-align:right;
}
/*COLS*/


.col5{
  box-sizing: border-box;
  width:5%;  
  vertical-align: top;
}

.col10{
  box-sizing: border-box;
  width:10%;  
  vertical-align: top;
}

.col15{
  box-sizing: border-box;
  width:15%;  
  vertical-align: top;
}

.col18{
  box-sizing: border-box;
  width:18%;  
  vertical-align: top;
}

.col20{
  box-sizing: border-box;
  width:20%;  
  vertical-align: top;
}

.col225{
  box-sizing: border-box;
  width:22.5%;  
  vertical-align: top;
}

.col25{
  box-sizing: border-box;
  width:25%;  
  vertical-align: top;
}

.col27{
  box-sizing: border-box;
  width:27%;  
  vertical-align: top;
}

.col30{
  box-sizing: border-box;
  width:30%;  
  vertical-align: top;
}

.col33{
  box-sizing: border-box;
  width:33%;
  vertical-align: top;
}

.col34{
  box-sizing: border-box;
  width:34%;
  vertical-align: top;
}

.col35{
  box-sizing: border-box;
  width:35%;  
  vertical-align: top;
}

.col38{
  box-sizing: border-box;
  width:38%;  
  vertical-align: top;
}

.col40{
  box-sizing: border-box;
  width:40%;
  max-width:40%;  
  vertical-align: top;
}    


.col43{
  box-sizing: border-box;
  width:43%;
  max-width:43%;  
  vertical-align: top;
}    


.col45{
  box-sizing: border-box;
  width:45%;  
  vertical-align: top;
}

.col48{
  box-sizing: border-box;
  width:48%;  
  vertical-align: top;  
}

.col49{
  box-sizing: border-box;
  width:49%;
  vertical-align: top;  
}

.col50{
  box-sizing: border-box;
  width:50%;
  max-width:50%;  
  vertical-align: top;
}

.col60{
  box-sizing: border-box;
  width:60%;
  vertical-align: top;
}


.col70{
  box-sizing: border-box;
  width:70%;
  vertical-align: top;
}

.col75{
  box-sizing: border-box;
  width:75%;  
  vertical-align: top;
}


.col80{
  box-sizing: border-box;
  width:80%;  
  vertical-align: top;
}

.col85{
  box-sizing: border-box;
  width:85%;  
  vertical-align: top;
}

.col858{
  box-sizing: border-box;
  width:85.89%;  
  vertical-align: top;
}

.col90{
  box-sizing: border-box;
  width:90%;  
  vertical-align: top;
}

.col93{
  box-sizing: border-box;
  width:93%;  
  vertical-align: top;
}


.col95{
  box-sizing: border-box;
  width:95%;  
  vertical-align: top;
}

.col98{
  box-sizing: border-box;
  width:98%;  
  vertical-align: top;
}

.fullWidth{
  box-sizing: border-box;
  width:100%;  
  vertical-align: top;
}

.leftSeparator{
  margin-left:2.5%;
}

.view{  
  box-sizing: border-box;
  width:84vw;
  vertical-align: top;
}



/*HEIGHTS*/

.h25{
  min-height: 25%;
  max-height: 25%;
}

.h50{
  min-height: 50%;
  max-height: 50%;
}

.h75{
  min-height: 75%;
  max-height: 75%;
}

.h100{
  height: 100%;
  max-height: 100%;
}

.midHeight{
  min-height: 70vh;
}


.fullHeight{

  min-height: 100vh;
  
}

/*DISPLAY*/

.block{
  display:block;
}

.row{
  display: inline-block;
}

/*FLOATS*/
.left{
  float:left;
}

.right{
  float:right;
}

/*Square*/

.square{
  margin-right:5px;
  font-size: 175%;
  vertical-align: top;
  color: var(--blue);

}

input[type="file"] {
  display: none;
}


/*GLASS*/
.glass{
    
  background: rgba(255,255,255,0.30);    
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  min-height: 50vh;
  margin: 0 auto;
  border-radius: 10px;
  padding:10px;    
  border: 1px solid rgba(255,255,255,0.18);

}

.glass1{
    
  background: rgba(255,255,255,0.30);
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  border-radius: 10px;
  padding:10px;
  border: 1px solid rgba(255,255,255,0.18);

}

/*ICONS*/
.iconContainer{
  width:90%;
  margin:10px auto;
  text-align:center;  
}

.iconBrand{
  width:15vw;  
  margin:5px;  
}
/*DIVIDERS*/

.divider10{

  padding-bottom:3px;  
  margin-top: 3px;
  margin-bottom: 3px;
  min-height:10px;

}

.dividerBlack{

  padding-bottom:3px;
  border-bottom: solid 3px var(--defaultDark);
  margin-top: 3px;
  margin-bottom: 3px;
  min-height:3px;

}

.dividerWhite{

  padding-bottom:3px;
  border-bottom: solid 3px var(--white);

}

.pageContainer{

  margin:0 auto;
  margin-top:5px;
  /*padding: 10px;*/
  overflow:hidden;
  border-radius: 5px;
  min-height:80vh;
  width:95%;
  border-radius: 10px;  
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.25);    
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);    
  
}

/*FREESPACES*/

.bottomSpace{
  margin-bottom:30px;
}

.separator{

  width:0%;
  display:none;
  min-height:30px;

}

.colSeparator{
  display:inline-block;
  width:2.5%;
  background:black;
  min-height: 2.5px;
}


.gradientBackground{
  background-image: url(../img/gradient2.png);
  background-size:100% 100%;
  max-height: 10vh;
}

.gradientBackground2{
  background-color: #0093E9;
  background-image: linear-gradient(160deg, #0093E9 0%, #80D0C7 100%);
  max-height: 10vh;

}

.whiteText{

  color:white;

}


.blueText{

  color:var(--blue);

}

.orangeText{

  color:var(--orange);

}

.title{

  font-family: 'fedrasansbook';
  font-size: 1.5rem;
  color:white;

}

.titleBlack{

  font-family: 'fedrasansbook';
  font-size: 1.5rem;
  color:black;

}


.subtitle{

  font-family: 'fedrasansbookitalic';
  font-size: 1.5rem;
  color:white;
  margin-top:5px;
  margin-bottom:5px;

}

.subtitleBlack{

  font-family: 'fedrasansbookitalic';
  font-size: 1.5rem;
  color:black;
  margin-top:5px;
  margin-bottom:5px;

}

.subtitleBlueDark{

  font-family: 'fedrasansbookitalic';
  font-size: 1.2rem;
  color:var(--blueDark);
  margin-top:5px;
  margin-bottom:5px;

}

.overflowHid{
  overflow:hidden;
}

/*
.formLabel{
  float: left;  
}
*/

.formLabel{
  text-align: left;  
  display:block;
  
}


.input{
  vertical-align: top;
  width:99%;
  line-height: 25px;
  font-size: 0.85rem;
  /*background-color: rgba(150,150,150,0.20);*/
  border:solid 1px rgb(220,220,220);
  border-radius: 5px;
  outline: none;
  margin-bottom: 3px;

}

.input:hover{
  outline: 1px solid var(--orange);
}


.inputCorrect{
  vertical-align: top;
  width:99%;
  line-height: 25px;
  font-size: 0.85rem;
  /*background-color: rgba(19, 132, 150,0.60);*/
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(19, 132, 150);
  border-radius: 5px;
  outline: none;
  margin-bottom: 3px;

}

.inputCorrect:hover{
  outline: 1px solid var(--orange);
}


.inputError{
  vertical-align: top;
  width:99%;
  line-height: 25px;
  font-size: 0.85rem;
  
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(255, 0, 0);
  border-radius: 5px;
  outline: none;
  margin-bottom: 3px;

}

.inputError:hover{
  outline: 1px solid var(--orange);
}




.input::placeholder {
  color: var(--default);
  font-size: 1rem;
}

.inputSelect{
  vertical-align: top;
  width:100%;
  /*min-height: 29px;*/
  min-height: 33px;
  font-size: 0.85rem;
  
  background:white;
  /*background-color: rgba(150,150,150,0.20);*/  
  border:solid 1px rgb(220,220,220);
  border-radius: 5px;
  outline: none;
  margin-right:0px;
  margin-bottom: 3px;

}


.inputSelect::placeholder {
  color: var(--default);
  font-size: 1rem;
}


.inputSelect:hover{
  outline: 1px solid var(--orange);
}



.inputSelectCorrect{
  background:white;
  vertical-align: top;
  width:100%;
  min-height: 33px;
  font-size: 0.85rem;
  
  /*background-color: rgba(19, 132, 150,0.60);*/
  
  border:solid 1px rgb(220,220,220);
  border-bottom:solid 5px rgb(19, 132, 150);
  border-radius: 5px;
  outline: none;
  margin-right:0px;
  margin-bottom:0px;
  

}


.inputSelectCorrect::placeholder {
  color: var(--correct);
  font-size: 1rem;
}


.inputSelectCorrect:hover{
  outline: 1px solid var(--orange);
}



.scrollPanel{

  max-height:50vh;
  overflow-x: hidden;
  overflow-y: auto;
  padding-top:20px;
  padding-left: 0px;
  padding-right: 0px;
  

}

.blockRow{
  width:100%;
  display:block;
  min-height:32px;
}

.formRow{

  display: block;
  margin:0 auto;
  width:95%;
  vertical-align:top;

}

.formCol{

  display: inline-block;
  margin:0 auto;  

}


.listCard{
  padding: 5px;
  display:block;
  width:95%;
  margin: 0 auto;
  margin-top:5px;  
  color:white;
  border-radius:5px;

}

.modal{
  display:block;
  margin:0 auto;
  position:fixed;
  top:0;
  left:0;
  z-index:200;
  width:80vw;
  min-height:80vh;
  background: rgba(255,255,255,0.80);    
  backdrop-filter: blur(2px);
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
  border-radius: 10px;
  border: solid 2px rgba(0,0,0,0.30);
  overflow: hidden;

}

/*Padding*/

.padd10{
  padding:10px;
}

/*Transitions*/
.transShort{
  transition: background-color 2s ease-out;
}



.slider{

 aspect-ratio: 10 / 16 ;
 /*width: 300px;*/
 /*
 position: relative;
 display: flex;
 overflow: scroll;
 */
 /*scroll-snap-type: x mandatory;*/

}
.slider img{

  
  left: 0;
  position: sticky;
  object-fit: cover;
  border-radius: 5px;
  /*scroll-snap-align: center;*/

}







.courseSlider{
  animation-name: courseSliderAnimation;
  animation-fill-mode: forwards;
  animation-duration: 10s;
  
}

@keyframes courseSliderAnimation {
  20%   {
    background: url('https://webdevworks.xyz/liceo/portalcursos/img/chica2.png') center;
    background-color: none; 
    color:transparent; 
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: all 0.5s ease;
  }

  50%{
    background: url('https://webdevworks.xyz/liceo/portalcursos/img/promo8.png') center;
    background-color: none; 
    color:transparent; 
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: all 0.5s ease;
    /*max-height:38vh;*/
  }
  
  100%{
    background: url('https://webdevworks.xyz/liceo/portalcursos/img/promo9.png') center;
    background-color: none; 
    color:transparent; 
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    transition: all 0.5s ease;
    /*max-height:38vh;*/
  }
}


.from0toFull70{
  animation-name: from0toFull70Animation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  
}

@keyframes from0toFull70Animation {
  0%   {
    height: 0vh;
  }
  
  100%{
    height: 70vh;
    /*max-height:38vh;*/
  }
}


.fromFullto070{
  animation-name: fromFullto070Animation;
  animation-fill-mode: forwards;
  animation-duration: 0.9s;
  
}

@keyframes fromFullto070Animation {
  0%   {
    height: 70vh;
  }
  
  100%{
    height: 0vh;
    
    display:none;
    
    /*max-height:38vh;*/
  }
}




.from0toFull{
  animation-name: from0toFullAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
  
  
}

@keyframes from0toFullAnimation {
  0%   {
    height: 0vh;
  }
  
  100%{
    height: 38vh;
    /*max-height:38vh;*/
  }
}


.fromFullto0{
  animation-name: fromFullto0Animation;
  animation-fill-mode: forwards;
  animation-duration: 0.9s;
  
}

@keyframes fromFullto0Animation {
  0%   {
    height: 38vh;
  }
  
  100%{
    height: 0vh;
    
    display:none;
    
    /*max-height:38vh;*/
  }
}



.fromMintoMax{
  animation-name: fromMintoMaxAnimation;
  animation-fill-mode: forwards;
  animation-duration: 1.2s;
}

@keyframes fromMintoMaxAnimation {
  0%   {
    height: 0vh;
    width: 0vw;
  }
  
  100%{
    height: 100vh;
    width: 99.2vw;
    /*max-height:38vh;*/
  }
}



.fromMaxtoMin{
  animation-name: fromMaxtoMinAnimation;
  animation-fill-mode: forwards;
  animation-duration: 0.7s;  
}

@keyframes fromMaxtoMinAnimation {
  0%{
    height: 100vh;
    width: 100vw;
  }

  100%{
    height: 0vh;
    width: 0vw;
  }
  
}



.homeBackground{
  animation-name: homeBackgroundAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes homeBackgroundAnimation {
  0%   {
    background-color: var(--white);
  }
  
  100%{

    /*
    padding:0;
    margin:0;

    background-size:106px 106px;    
    background-image: radial-gradient(
      transparent 46px,
      #fff 46px,
      #fff 64px,
      transparent 64px
    ),linear-gradient(120deg, var(--blueMedio) 0%, #80D0C7 100%);
    background-repeat:repeat,no-repeat;
*/

    background-color: rgba(165, 210, 255, .4);
  background-image:
    linear-gradient(90deg, rgba(165, 210, 255, .3) 50%, transparent 50%),
    linear-gradient(rgba(165, 210, 255, .3) 50%, transparent 50%);
  background-size: 40px 40px;
    
  }
}




.fromWhiteToBlueDark{
  animation-name: fromWhiteToBlueDarkAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}

@keyframes fromWhiteToBlueDarkAnimation {
  0%   {
    background-color: var(--white);
  }
  
  100%{    
    /*background-color: var(--blue);*/
    background-color: var(--blueMedio);
    background-image: linear-gradient(120deg, var(--blueMedio) 0%, #80D0C7 100%);
    
  }
}

.fromBlueDarkToWhite{
  animation-name: fromBlueDarkToWhiteAnimation;
  animation-fill-mode: forwards;
  animation-duration: 2s;
}


@keyframes fromBlueDarkToWhiteAnimation {
  0%{    
    background-color: var(--blue);
  }
  100%{
    background-color: white;
    
    /*
    background-color: var(--white);
    */
  }
}

.navBar{
  position:sticky;
  top:0;
  left:0;
  z-index:190;
  height:80px;
  box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
}

.navTitle{
  font-size:1.7rem;
  
}

.jumboText{
  font-size: 2.5rem;
}

.hideDesktop{
  display:none;
}

.hideScroll{
  overflow:unset;
}

.stickyDesktop{

  position:sticky;

}



.waves {
  position:relative;
  width: 100%;
  height:15vh;
  margin-bottom:-7px; /*Fix for safari gap*/
  min-height:100px;
  max-height:150px;
  
}

.content {
  position:relative;
  height:20vh;
  text-align:center;
  background-color: white;
}

/* Animation */

.parallax > use {
  animation-delay: 4s;
  animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}
.parallax > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}
.parallax > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}
.parallax > use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}
.parallax > use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}


@keyframes move-forever {
  0% {
   transform: translate3d(-90px,0,0);
  }
  100% { 
    transform: translate3d(85px,0,0);
  }
}


.titleSize{

  font-size: 1.8rem;

}

.subtitleSize{

  font-size: 1.3rem;

}

.scrollDesktop{
  overflow-y: auto;
}


@media (max-width: 800px) {
  
  .navBar{
    height:60px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 0px;
  }

  .iconBrand{
    margin:0;
    margin-top:3px;
    width:27vw;  
    
  }

  .colSeparator{
    display:none;
    max-width:0%;
    max-height:0%;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }



  .smRight{
    float:right;
  }

  .smLeft{
    float:left;
  }

  .smCenter{
    /*text-align:center;*/
    display:block;
    margin:0 auto;
  }
  
  .tSmCenter{
    /*text-align:center;*/
    text-align:center;
  }


  .tSmLeft{
    text-align: left;
  }

  .tSmRight{
    text-align: right;
  }

  .colSm10{
    min-width:10%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    min-width:30%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    min-width:50%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    min-width:80%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    min-width:90%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm94{
    min-width:94%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    min-width:95%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm99{
    min-width:99%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm100{
    min-width:100%;  
    display: block; 
    margin:0 auto;   
  }

  .navTitle{
    font-size:1rem;
    
  }

  .jumboText{
    font-size: 1.5rem;
  }
  
  .rowm{
    display:inline-block;
  }
  
  .from0toFull{
    animation-name: from0toFullAnimation;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    
  }
  
  @keyframes from0toFullAnimation {
    0%   {
      height: 0vh;
    }
    
    100%{
      height: 20vh;
      /*max-height:20vh;*/
    }
  }

  

  .hideMobile{
    display: none;
  }

  .scrollMobile{
    overflow-y: auto;
  }


  .titleSize{

    font-size: 1.3rem;
  
  }
  
  .subtitleSize{
  
    font-size: 1.1rem;
  
  }

  .hideStickyMobile{

    position:inherit;
  
  }

  /*Oferta cursos buttons*/
  


}


@media (max-width: 550px) {
  
  .navBar{
    height:60px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 0px;
  }

  .iconBrand{
    margin:0;
    margin-top:3px;
    width:27vw;  
    
  }

  .colSeparator{
    display:none;
    max-width:0%;
    max-height:0%;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }

  .smRight{
    float:right;
  }

  .smLeft{
    float:left;
  }

  .smCenter{
    /*text-align:center;*/
    display:block;
    margin:0 auto;
  }
  
  .tSmCenter{
    /*text-align:center;*/
    text-align:center;
  }


  .tSmLeft{
    text-align: left;
  }

  .tSmRight{
    text-align: right;
  }

  .colSm10{
    min-width:10%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    min-width:30%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    min-width:50%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    min-width:80%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    min-width:90%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm94{
    min-width:94%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    min-width:95%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm99{
    min-width:99%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm100{
    min-width:100%;  
    display: block; 
    margin:0 auto;   
  }

  .navTitle{
    font-size:1rem;
    
  }

  .jumboText{
    font-size: 1.5rem;
  }
  
  .rowm{
    display:inline-block;
  }
  
  .from0toFull{
    animation-name: from0toFullAnimation;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    
  }
  
  @keyframes from0toFullAnimation {
    0%   {
      height: 0vh;
    }
    
    100%{
      height: 25vh;
      /*max-height:25vh;*/
    }
  }

  

  .hideMobile{
    display: none;
  }

  .scrollMobile{
    overflow-y: auto;
  }

  .titleSize{

    font-size: 1.3rem;
  
  }
  
  .subtitleSize{
  
    font-size: 1.1rem;
  
  }

  .hideStickyMobile{

    position:inherit;
  
  }

  /*Oferta cursos buttons*/
  


}


@media (max-width: 350px) {
  
  .navBar{
    height:60px;
    box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37);
    padding: 0px;
  }

  .iconBrand{
    margin:0;
    margin-top:3px;
    width:27vw;  
    
  }

  .colSeparator{
    display:none;
    max-width:0%;
    max-height:0%;
  }

  .formRow{

    display: block;
    margin:0 auto;
    width:95%;
  
  }

  .smRight{
    float:right;
  }

  .smLeft{
    float:left;
  }

  .smCenter{
    /*text-align:center;*/
    display:block;
    margin:0 auto;
  }
  
  .tSmCenter{
    /*text-align:center;*/
    text-align:center;
  }


  .tSmLeft{
    text-align: left;
  }

  .tSmRight{
    text-align: right;
  }

  .colSm10{
    min-width:10%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm30{
    min-width:30%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm50{
    min-width:50%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm80{
    min-width:80%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm90{
    min-width:90%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm94{
    min-width:94%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm95{
    min-width:95%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm99{
    min-width:99%;
    display: block;    
    margin:0 auto;
    margin-top:10px;
  }

  .colSm100{
    min-width:100%;  
    display: block; 
    margin:0 auto;   
  }

  .navTitle{
    font-size:1rem;
    
  }

  .jumboText{
    font-size: 1.5rem;
  }
  
  .rowm{
    display:inline-block;
  }
  
  .from0toFull{
    animation-name: from0toFullAnimation;
    animation-fill-mode: forwards;
    animation-duration: 2s;
    
  }
  
  @keyframes from0toFullAnimation {
    0%   {
      height: 0vh;
    }
    
    100%{
      height: 25vh;
      /*max-height:25vh;*/
    }
  }

  

  .hideMobile{
    display: none;
  }

  .scrollMobile{
    overflow-y: auto;
  }

  .titleSize{

    font-size: 1.3rem;
  
  }
  
  .subtitleSize{
  
    font-size: 1.1rem;
  
  }

  .hideStickyMobile{

    position:inherit;
  
  }
  /*Oferta cursos buttons*/
  


}