/*--General--*/
:root {
  scroll-behavior: smooth;
}

*:focus {
    outline: none;
}
}
body {
  color: #25282A;
}
html, body {
width:100%;
overflow-x: hidden;
font-size: 18px;
font-family: "Kanit", sans-serif;
font-weight: 500;
} 
a {
text-decoration: none;
color:#fff;
transition:.3s;
}
a:hover {
text-decoration: none;
color:#fff;
}
h1 {font-weight:600;}
h5, h6 {font-weight:300;}
p{font-family: "Open Sans", sans-serif;font-size: 1rem;}
/*-----------------------------------------
# back to top
-------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 10px;
  bottom: 10px;
  z-index: 1000;
  background:linear-gradient(180deg, #9B26B6 0%, #8631AD 100%) #9B26B6;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.2s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #8631AD;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}
.filterbtnbig {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  background:linear-gradient(180deg, #9B26B6 0%, #8631AD 100%) #9B26B6;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  color:#fff;	
  transition: all 0.2s;
  cursor:pointer;
  display:block;
}
.filterbtnbig i {
  font-size: 1rem;
  color: #fff;
  line-height: 0;
}
@media (max-width: 991px) {
.filterbtnbig{display:none;visibility: hidden;}
}

.filterbtn{
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 100;
  background:linear-gradient(180deg, #9B26B6 0%, #8631AD 100%) #9B26B6;
  padding:10px;	
  border-radius: 4px;
  color:#fff;	
  cursor:pointer;
  display:none;
  }
.filterbtn i {
  font-size: 1rem;
  color: #fff;
  line-height: 0;
}
@media (max-width: 991px) {
.filterbtn{display:flex;}
}
/*checkbox*/
.checksquare {
display: block;
position: relative;
cursor: pointer;
padding-left:30px;
margin: 0px;
margin-top:10px;
font-size: .8rem;
font-weight:300;
color: #fff;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* hide checkbox*/
.checksquare input {
  position: absolute; 
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {  
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background: none;
}
.cmborderwhite{border: 2px #fff solid;}
.cmborderblack{border: 2px #25282A solid;}
.checksquare:hover input ~ .cmborderwhite {
  background-color: #BD2BDF;
}
.checksquare:hover input ~ .cmborderblack {
  background-color: #C1B7CD;
}
.checksquare input:checked ~ .checkmark {
  background-color: #25282A;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}
/* Show the checkmark when checked */
.checksquare input:checked ~ .checkmark:after {
  display: block;
}
/* Style the checkmark/indicator */
.checksquare .checkmark:after {
  left: 5px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
/* input */
.inputall{
border: none;
font-size:.8em; 
}
select {
font-size:.8em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
@media (min-width: 411px){.inputall, select{font-size:.9rem;}}

.inputwhite{background-color:#fff;border-bottom: 2px solid #25282A;color: #25282A;}
.inputwhite::placeholder {color: #25282A; opacity: 1;}
.inputwhite:-ms-input-placeholder {color: #25282A;}
.inputpurple{background-color:#9B26B6;border-bottom: 2px solid #fff;color: #fff;}
.inputpurple::placeholder {background-color:none;color: #fff; opacity: 1;}
.inputpurple:-ms-input-placeholder {background-color:none;color: #fff;}

/* customize scrollbar*/
/* width */
::-webkit-scrollbar {width: 15px;}
::-webkit-scrollbar-track {background: #F7EFFF;}
::-webkit-scrollbar-thumb {background: #EFC7FF;}
::-webkit-scrollbar-thumb:hover {background: #9B26B6;}

/* --- buttons --*/
.btn{
border: none;
font-weight:500px;
font-size: 1em;
cursor: pointer;
border-radius: 7px;
transition:0.3s;
}
.btnn{padding: 8px 18px;}
.btni{padding: 2px 18px 8px 18px;}
.btni i{margin-right:5px;vertical-align:12%;}
.btnblack{background:#25282A; color:#fff;}
.btnblack:hover{background: #393E41; color:#fff;}
.btnpurple{background:#9B26B6; color:#fff;}
.btnpurple:hover{background: #B12AD0; color:#fff;}

/*Disable aos animation delay on mobile devices*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}
/*-----------------------------------------
# Header/Navbar
-------------------------------------------*/
.header {
  z-index: 200;
  padding: 10px 0;
  height:80px;
  background: #fff;
  transition:0.3s;
  box-shadow: 0px 4px 8px rgba(37, 40, 42, 0.25);
}

.header.header-scrolled {
  background: #fff;
  padding: 8px 0;
  height:70px;
}

.header .logo img {
  max-height: 3em;
  margin-right: 6px;
}
/*--Navigation Menu--*/
/*Desktop*/
.navbar {
padding: 0;
}
.navbar ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}

.navbar li {
position: relative;
}

.navbar a {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 30px;
font-size: 1rem;
color: #25282A;
white-space: nowrap;
}

.navbar a:hover, .navbar .active, .navbar li:hover > a {
color: #9B26B6;
}

.navbar .navbtn {
background: linear-gradient(180deg, #9B26B6 0%, #BF25E2 100%), #9B26B6;
padding: 8px 16px;
border-radius: 7px;
color: #fff;
}
.navbar .navbtn:hover {
color: #fff;
background: #9B26B6;
}
.navinsta{/* instagram*/
color:#9B26B6;
font-size:1.5rem; 
line-height: 0; 
margin-left:30px;
cursor: pointer;
}
.navinsta:hover{color:#BF25E2;}
.hide991{display:block;}
.hide991big{display:none;}

@media (min-width: 991px){
	.hide991{display:none;}
	.hide991big{display:block;}
}
.hideon288{display:none;}
@media screen and (max-width: 991px) and (min-width: 288px){.hideon288{display:block;}}	
	
/* Mobile Navigation */
/*hambuguer*/
.mobile-nav-toggle { 
color: #9B26B6;
font-size: 1.8rem;
cursor: pointer;
display: none;
line-height: 0;
}

.mobile-nav-toggle.bi-x {
color: #fff;
font-size: 1.8rem;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }
  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #9B26B6;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}
.navbar-mobile i {color:#fff; font-size:1.1rem;}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  padding: 10px 0;
  background-color: #9B26B6;
  color #fff;
  overflow-y: auto;
  transition: 0.1s;
}

.navbar-mobile a {
  padding: 20px;
  font-size: 1.2em;
  color: #fff;
  text-align: center;
}
.navbar-mobile a:hover, .navbar-mobile .active, .navbar-mobile li:hover > a {
  color: #fff;
}

.navbar-mobile .navbtn {
  margin: 0px;
  padding-top:20px;
  width: 150px;
  background: none;
}

/*--- MAIN --- */
/*-----------------------------------------
# Hero
-------------------------------------------*/
.cta-header{background:#25282A; padding:8px;position:absolute; top:80px; left:0;color:#EFC7FF; text-align:center;}
.cta-header h5{padding:0; margin:0; font-size:1em;}
.cta-header a{color:#fff;}

#hero{background: #fff;margin-top:100px;}
#hero h1{font-size:2rem; margin-bottom:75px;}
#hero h5{font-size:1rem;}

@media (max-width: 1024px) {
	#hero h1{font-size:1.4rem; margin-bottom:40px;}
	}
@media (max-width: 411px) {
	#hero h1{font-size:1rem;}
	#hero h5{font-size:.85rem;}
	#hero{padding: 10%;}
	}

/*Vertical Sliding*/
.slidingVertical{
	display: inline;
}
.slidingVertical span{
animation: topToBottom 12.5s linear infinite 0s;
-ms-animation: topToBottom 12.5s linear infinite 0s;
-webkit-animation: topToBottom 12.5s linear infinite 0s;
color: #9B26B6;
opacity: 0;
overflow: hidden;
position: absolute;
}
.slidingVertical span:nth-child(2){
animation-delay: 2.5s;
-ms-animation-delay: 2.5s;
-webkit-animation-delay: 2.5s;
}
.slidingVertical span:nth-child(3){
animation-delay: 5s;
-ms-animation-delay: 5s;
-webkit-animation-delay: 5s;
}
.slidingVertical span:nth-child(4){
animation-delay: 7.5s;
-ms-animation-delay: 7.5s;
-webkit-animation-delay: 7.5s;
}
.slidingVertical span:nth-child(5){
animation-delay: 10s;
-ms-animation-delay: 10s;
-webkit-animation-delay: 10s;
}

/*topToBottom Animation*/
@-moz-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -moz-transform: translateY(-50px); }
10% { opacity: 1; -moz-transform: translateY(0px); }
25% { opacity: 1; -moz-transform: translateY(0px); }
30% { opacity: 0; -moz-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-webkit-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -webkit-transform: translateY(-50px); }
10% { opacity: 1; -webkit-transform: translateY(0px); }
25% { opacity: 1; -webkit-transform: translateY(0px); }
30% { opacity: 0; -webkit-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}
@-ms-keyframes topToBottom{
0% { opacity: 0; }
5% { opacity: 0; -ms-transform: translateY(-50px); }
10% { opacity: 1; -ms-transform: translateY(0px); }
25% { opacity: 1; -ms-transform: translateY(0px); }
30% { opacity: 0; -ms-transform: translateY(50px); }
80% { opacity: 0; }
100% { opacity: 0; }
}

.inputhero{
width:80%;
margin:0;
}
.btn-search{
padding:6px 12px;
background:#25282A;
border-bottom: 2px solid #25282A;
}
.btn-search:hover{background:#9B26B6;transition: .3s;}
.btn-search i{color:#fff;}
/*-----------------------------------------
# Email alert section
-------------------------------------------*/
#emailalert{background:#9B26B6; color:#fff; padding:80px 0px 120px 0px;}
#emailalert h4,h6{text-align:left;}
.formmargtop{margin-top:220px;}
@media (max-width: 1024px) {
	#emailalert{padding:80px 0px;}
	.formmargtop{margin-top:0px;}
	#emailalert h4,h6{text-align:center;}
}
.spinimg {
position: relative; width:150px; top:75px; left:225px;
animation-name: spin;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: linear; 
}
@keyframes spin {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@media (max-width: 1400px){
.spinimg {width:100px; top:50px; left:200px;}
}
.inputmail{
width:100%;
padding-bottom: 5px;
margin-bottom:40px;
}

.imgsty2{height:120px;width:auto; margin-bottom:30px;}
@media (min-width: 991px){.imgsty2{margin:0px;}}
/*-----------------------------------------
# vagas section
-------------------------------------------*/
#vagas{padding:60px 0px; background: #F7EFFF;}
.ornjobs{width:150px; height:8px; background: #9B26B6; margin-bottom:20px;}
#vagas a{cursor: pointer; color:#25282A;}
.cvagah{background: #FFF;
border-radius: 7px;
padding:28px; 
margin-right:10px;
margin-left:10px;
margin-bottom:30px;
position: relative;
min-width: 0;
word-wrap: break-word;
transition:0.5s;}
@media (min-width: 350px){.cvagah{padding:18px 20px;}}
.cvagah:hover{box-shadow: 0px 0px 18px rgba(237, 191, 255, 0.4);}
.cvagah h4{color: #9B26B6;font-size: .9rem; letter-spacing: 0.06em;
text-transform: uppercase;}
.cvagah h3{font-size: 1.1rem;letter-spacing: -0.025em; font-weight:400;}
.cvagah p{margin:2px 0px;font-size: .8rem;}
.cvagah i{color: #9B26B6; font-size: 20px;}
.remoto{font-family: "Open Sans", sans-serif;font-size: 0.7rem;
padding:3px;
position: absolute;
top:18px;
right:20px;
font-weight: 600;
display: inline-flex;
align-items: center;
text-align: center;
height: 25px;
letter-spacing: -0.02em;
color: #CB9BD6;
border: 2px solid #CB9BD6;
box-sizing: border-box;
border-radius: 2px;}
@media (max-width: 350px){.remoto{font-size: 0.6rem; border:none;top:10px;right:10px;}}
.tec{
font-family: "Open Sans", sans-serif;
font-size: 0.8em;
text-transform: uppercase;
margin-right:10px;
font-weight: 600;
display: flex;
align-items: center;
text-align: center;
box-sizing: border-box;
border-radius: 2px;
margin-bottom: 5px;
}

.tec1{
padding: 4px 10px;
color: #fff;
background:#9B26B6;
border: none;
}

.tec2{
padding: 0px 6px;
color: #9B26B6;
border: #9B26B6 2px solid;
}
.ver-vaga{
color:#25282A;
font-size:0.6rem;
letter-spacing: 0.02em;
text-transform: uppercase;
margin:0px;text-align:center;
margin-top: 8px;
}
/*-- cursos --*/
#datatechschoo{}
.imgsty1{height:80%;width:80%;}
.cardcurso{
border: 2px solid #25282A;
border-radius: 7px;
margin-top:20px;
margin-bottom:20px;}
.cardcurso img{ max-width: 100%; height: auto;}

@media (max-width: 768px) {
.cardcurso{margin:12px; text-align:center;}
.cardcurso img{height:80px;width:auto;}	
}
.cardcurso a{color:#25282A;}	
.cardcurso h4 {font-size:1em; margin:0;color:#25282A;}
.cardcurso p {margin:0; color:#25282A;}
.cashimg{background: url(../img/dts3.png) center left no-repeat;background-color:#25282A;}
/*-------------------------------------------
# footer
-------------------------------------------*/  
#footer{background: #9B26B6; padding-top:80px; color:#fff;}
#footer h4{font-size:1.1rem;}
#footer h5{font-size:.9rem;}
.footer-logo {max-width:250px;margin-left:50%;transform:translateX(-125px);}
.social-icons{width:42px; margin-right: 20px;}
.fotcol3{margin-bottom:60px; padding-top:20px;} 
.fotcol2{text-align:center;padding-top:20px;}

@media (min-width: 768px){
.footer-logo {max-width:250px;}
.fotcol2{text-align:left;}
.fotcol3{margin-bottom:0px;}
}
/*-------------------------------------------
# Hero vagas
-------------------------------------------*/
#hero-vagas{width:100%;background-color:#fff;margin-top:80px;background:none;}
 @media (min-width: 911px){ 
	#hero-vagas{
	background: url(../img/fundovagas.png) center no-repeat;background-color:#fff;
	}
}
#hero-vagas h5{font-size:1rem;}
@media (max-width: 411px) {#hero-vagas h5{font-size:.85rem;}}
.vagafiltro{font-size:.95rem;color:#25282A; margin-right: 10px;}

.divfiltro{position: fixed; z-index:200; top:0; left:0; overflow-y:scroll; margin:0;width:100%; height:100%; display:none;}
.fechafiltro{position: absolute;top:2px;right:10px; display:block;}
@media (min-width: 991px) {
.divfiltro{display:block; position: relative; overflow-y:hidden;margin-right:10px; margin-left:10px;width:auto;height:auto;z-index:0;}
.fechafiltro{display:none;}}