html,body,.carousel {height: auto;margin: 0;font-family: arial, sans-serif;background-color: #ffffff;overflow-x: hidden;}
.carousel {overflow: hidden;position: relative;width: 100%;}

a {	text-decoration: none;}
.intro {	position: relative;width: 100%;height: 100vh;}
.left {float: left;height: 100%;width: 60%;padding: 3rem;	display: table;}
.left > div {	display: table-cell;	vertical-align: middle;}
span {  color: #02a1ee;font-size: 15px;font-weight: bold; letter-spacing: 2px; display: inline-block; text-transform: uppercase; font-family: sans-serif; margin-bottom: 4rem;}

.slider {	float: right;	position: relative;	width: 40%;	height: 100%;}
.slider li {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-repeat: no-repeat;background-position: 50% 50%;transition: clip .7s ease-in-out, z-index 0s .7s;clip: rect(0, 100vw, 100vh, 100vw);display: table;}
.center-y {display: table-cell;vertical-align: middle;text-align: center;color: #fff;}

li.current h3, li.current h3 + a {opacity: 1;transition-delay: 1s;transform: translate3d(0, 0, 0);}
li.current {z-index: 1;clip: rect(0, 100vw, 100vh, 0);}
li.prev {clip: rect(0, 0, 100vh, 0);}
.slider nav {position: absolute;bottom: 5%;left: 0;right: 0;text-align: center;z-index: 10;}
nav a {	display: inline-block;	border-radius: 50%;	width: 1.2rem;	height: 1.2rem;  min-width: 12px;  min-height: 12px;	background: #fff;	margin: 0 1rem;transition: transform .3s;}
a.current_dot {transform: scale(1.4);}
.title_conectados{color: #02a1ee;font-size: 65px;font-weight: bold;}
.title_de_todos{font-size: 40px;}
.carousel-images {position: absolute;top: 0;left: 0;z-index: 1;display: flex; width: auto; height: 100%; transition: 0.5s;display: flex;justify-content: center;}
.carousel img {width: 100%;  object-fit: cover;display: flex;justify-content: center;min-width: 640px;}
.dots {position: absolute;z-index: 2;left: 0;bottom: 0;width: 100%;height: 400px;display: flex;gap: 12px;align-items: flex-end;justify-content: center;padding-bottom: 50px;font-size: 8vw;color: #02a1ee;font-weight: bold;text-shadow: 3px 5px 8px #0000008f;}
.container { width:100%; float:left; position:relative; }
.bg-1      { background-color:#f4f4f4; padding:5em 0em;}
.header {background-color: #fff;box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);position: fixed;top:0;left:0;width: 100%; z-index:3;float:left;max-height: 55px;}
.header ul {margin: 0;padding: 0;list-style: none;overflow: hidden;background-color: #fff;}
.header li a {display: block;padding: 0.7em 0.5em;text-decoration: none;transition:.3s;border-bottom: 1px #f7f7f7 solid;color:#242424;}
.header li a:hover,.header .btn-mobile:hover {background-color: #02a1ee;color:#fff;}
.header .logo {display: block;float: left;}
.header .nav {clear: both;max-height: 0;transition: max-height .2s ease-out;}
/* menu icon */
.header .mobile-icon {cursor: pointer;display: inline-block;float: right;padding: 28px; position: relative;user-select: none;}
.header .mobile-icon .hamburguer {background: #333;display: block;height: 2px;position: relative;transition: background .2s ease-out;width: 18px;}
.header .mobile-icon .hamburguer:before,.header .mobile-icon .hamburguer:after {background: #333;content: '';display: block;height: 100%;position: absolute;transition: all .2s ease-out;width: 100%;}
.header .mobile-icon .hamburguer:before {top: 5px;}
.header .mobile-icon .hamburguer:after {top: -5px;}
/* menu btn */
.header .mobile-btn {display: none;}
.header .mobile-btn:checked ~ .nav {max-height: 240px;}
.header .mobile-btn:checked ~ .mobile-icon .hamburguer {background: transparent;}
.header .mobile-btn:checked ~ .mobile-icon .hamburguer:before {transform: rotate(-45deg);}
.header .mobile-btn:checked ~ .mobile-icon .hamburguer:after {transform: rotate(45deg);}
.header .mobile-btn:checked ~ .mobile-icon:not(.steps) .hamburguer:before,.header .mobile-btn:checked ~ .mobile-icon:not(.steps) .hamburguer:after {top: 0;}
.container_what {display: flex;flex-wrap: wrap-reverse;background-color: #02a1ee12;width: 100%;}
.container_who {display: flex;flex-wrap: wrap;margin-top:70px}
.box_about {width: 50%; box-sizing: border-box; padding: 20px; margin-top: 50px;display: flex;justify-content: center;flex-direction: column;}
* {box-sizing:border-box}
.slideshow-container {position: relative;margin: auto;margin-top: 70px;}
.mySlides {display: none;}
.prev, .next {cursor: pointer;position: absolute;top: 50%;width: auto;margin-top: -22px;padding: 16px;color: white;font-weight: bold;font-size: 18px;transition: 0.6s ease;border-radius: 0 3px 3px 0;user-select: none;}
.next {right: 0;border-radius: 3px 0 0 3px;}
.prev:hover, .next:hover {background-color:#02a1ee;}
.text {color: #02a1ee;font-size:35px;font-weight:bold;padding: 8px 12px;width: 100%;text-align:center;margin-bottom:30px;}
.text_about{color: #180085;font-size:65px;font-weight:bold;padding: 8px 12px;width: 100%;text-align:center}
.text_about_1{color: #000000;font-size:40px;padding: 8px 12px;width: 100%;text-align:center}
.dot {cursor: pointer;  height: 15px;width: 15px;margin: 0 2px;background-color: #029fee34;border-radius: 50%;display: inline-block;transition: background-color 0.6s ease;}
.active, .dot:hover {background-color: #02a1ee;}
.fade { animation-name: fade;animation-duration: 1.5s;}
.box_img{display: flex;justify-content: center;}
.img_about {width: 90%;filter: drop-shadow(30px 30px  #180085);}
.container_goals {margin-top:70px;display: flex;flex-wrap: wrap;justify-content: center;}
.box_goals{width: 22%;padding: 20px;text-align: center;margin: 10px;height: 550px;min-width: 450px;background-color: #edf8fe;border-radius: 70px 10px 70px 0px;}
.title_goals{font-size: 55px;font-weight: bold;margin-bottom: 20px;color: #02a1ee;display: flex;justify-content: center;align-items: center;height: 140px;}
.text_goals{color: #000000;font-size:40px;margin-bottom: 40px;width: 100%;text-align:initial}
.container_how {display: flex;flex-wrap: wrap-reverse;margin-top:70px;}
.card-container {display: flex; flex-wrap: wrap;justify-content: space-around;padding-bottom: 70px;}
.card {border-radius: 10px;margin: 10px;padding: 10px;width: calc(33.33% - 20px); box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);background-color: #ffffffa3;}
.card img {width: 100%;min-height: 200px;object-fit: cover;border-radius: 10px 10px 0 0;}
.card h1 {margin: 10px 0;display: flex;justify-content: center;color: #02a1ee;}
.text_about_2{color: #180085;font-size:65px;font-weight:bold;padding: 8px 12px;width: 100%;text-align:center;display: flex;justify-content: center;}
.text_necess{color: #000000;font-size:40px;margin-bottom: 40px;width: 100%;text-align:initial; padding:20px}
.footer{background-color:#02a1ee;position: absolute;left:0;width: 100%; z-index:3;float:left;}
.end{font-size:65px;font-weight:bold;padding: 8px 12px;width: 100%;text-align:center;display: flex;justify-content: center;padding: 30px;}

.video-container { position: relative;padding-bottom: 20%;padding-top: 30px; height: 0; overflow: hidden;}
.responsive-video {position: absolute;top: 0; left: 0; width: 100%;height: 100%;}

@media screen and (max-width: 700px) {
	.left {
		width: 100%;
		height: 30%;
	}
	.slider {
		width: 100%;
		height: 70%;
	}
}

@keyframes fade {from {opacity: .4}to {opacity: 1}}
/* 48em = 768px */
@media (min-width: 1112px) {
  .header li { float:left; }
  .header li a {padding: 15px 30px;margin-top: 10px;border-radius: 6px;}
  .header .nav {clear: none;float: right;max-height: none;}
  .header .mobile-icon { display:none; }.header li a {transition:.3s;border-bottom:0;}
}

@media (max-width: 768px) {
  .img_about  {filter: drop-shadow(10px 10px  #180085); margin-top: -80px;}.box_about {width: 100%;}
  .text_about{ margin-top:-60px;}
  .text_about_1{margin-bottom: 35px;}
  .container_who {margin-top: 30px;}
  .box_goals{width: 70%;}
  .card { width: 100% }
  .w3-section {width: 100%;}
  .end {font-size: 20px;}
}

@media (max-width: 500px){
  .text_about{font-size: 25px}
  .title_conectados{margin-top:90px;font-size: 35px;font-weight: bold;margin-bottom: 15px;}
  .title_goals{font-size: 25px;margin-bottom: 0;}
  .text_about_1{font-size:15px;font-weight: bold;}
  .text_goals{font-size:15px;display: flex;font-weight: bold}
  .text_about_2{font-size: 25px;font-weight: bold}
  .text_necess{font-size:15px;font-weight: bold;margin-bottom: 0;}
  .box_goals{height: 70%;min-width: 0;}
  .title_de_todos{font-size: 15px;font-weight: bold;text-align: justify;}
}


* {
  box-sizing: border-box;
}