:root {
    --main-color: #11A6AC;
    --main-color-opacity: #E1FBFE;
    --secondary-color: #70577D;
}

@font-face { font-family: Poppins-Light; src: url('../fonts/Poppins-Light.ttf') }
@font-face { font-family: Poppins-Regular; src: url('../fonts/Poppins-Regular.ttf') }
@font-face { font-family: Poppins-Medium; src: url('../fonts/Poppins-Medium.ttf') }
@font-face { font-family: Poppins-SemiBold; src: url('../fonts/Poppins-SemiBold.ttf') }
@font-face { font-family: Poppins-Bold; src: url('../fonts/Poppins-Bold.ttf') }
@font-face { font-family: OpenSans-Regular; src: url('../fonts/OpenSans-Regular.ttf') }
@font-face { font-family: OpenSans-SemiBold; src: url('../fonts/OpenSans-SemiBold.ttf') }
@font-face { font-family: OpenSans-Bold; src: url('../fonts/OpenSans-Bold.ttf') }
@font-face { font-family: Lora-Regular; src: url('../fonts/Lora-Regular.ttf') }
@font-face { font-family: Lora-Medium; src: url('../fonts/Lora-Medium.ttf') }
@font-face { font-family: Lora-SemiBold; src: url('../fonts/Lora-SemiBold.ttf') }
@font-face { font-family: Lora-Bold; src: url('../fonts/Lora-Bold.ttf') }


a:active,
a:active *,
button:active {
    outline: none !important;
    -moz-outline-style: none !important;
}

a:focus,
a:focus *,
button:focus {
    outline: none !important;
    -moz-outline-style: none !important;
}

html, body {
    height: 100%;
}

body {
    font-family: "Poppins-Regular", sans-serif;
    font-weight: 300;
    font-size: 15px;
    color: #161615;
    margin: 0;
    background-color: #FFFFFF;
    overflow-y: scroll;
}
strong{
    font-family: "Poppins-SemiBold", sans-serif;
}
a,
a:hover {
    text-decoration: none;
    color: inherit;
}

button:active,
a:active,
a:active * {
    outline: none !important;
    -moz-outline-style: none !important;
}

button:focus,
a:focus,
a:focus * {
    outline: none !important;
    -moz-outline-style: none !important;
}
ul{
    margin: 0;
    padding: 0;
}
ul li {
    list-style: none;
    display: inline-block;
}

header {
    padding-top: 34px;
    padding-bottom: 70px;
}
#area-logo{
    width: 200px;
}
#area-logo #logo{
    width: 180px;
}
#area-logo #gila{
    width: 130px;
    margin-top: 14px;
}

#menu_sup ul li {
    list-style: none;
    display: inline-block;
    position: relative;
}
#menu_sup ul li a::after{
    display: inline-block;
    content: ' ';
    width: 8px;
    height: 8px;
    background-color: var(--main-color);
    border-radius: 4px;
    position: absolute;
    right: -4px;
    top: 29px;
    opacity: 0.7;
}
#menu_sup ul li:last-child a::after{
    display: none !important;
}
#menu_sup li a {
    padding: 20px 25px;
    display: block;
    text-align: center;
    font-size: 15px;
    color: var(--secondary-color);
}

#menu_sup li.active a,
#menu_sup li a:hover {
    color: #161615;
}

#menu_sup li .btn {
    background-color: #17354d;
    border: none;
    color: #fff;
    border-radius: 20px;
    padding: 8px 12px;
    font-size: 14px !important;
}

.wave-container{
    width: 100%;
    height: 100px;
    overflow: hidden;
}
.wave-container #wave{
    display: block;
    position: relative;
    height: 40px;
}
.wave-container #wave:before {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100%;
    width: 100%;
    height: 300px;
    right: -25%;
    top: 20px
}
.wave-container #wave:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100%;
    width: 100%;
    height: 300px;
    left: -25%;
    top: -240px;
}

#wave-container, #wave-container #wave:before  {
    background-color: var(--main-color);
}
#wave-container #wave, #wave-container #wave:after {
    background: #fff;
}

#wave-container2, #wave-container2 #wave:before  {
    background-color: #fff;
}
#wave-container2 #wave, #wave-container2 #wave:after {
    background: var(--main-color);
}

.sections {
    padding: 80px 0;
    min-height: 450px;
}
.sections .title1{
    color: #11A6AC;
    font-size: 22px;
    margin-top: 15px;   
}
.sections .title2{
    color: #70577D;
    font-size: 18px;
    margin-top: 15px;
}
.sections .text{
    line-height: 26px;
}
.footer{
    font-size: 16px;
    color: white !important;
    font-family: "Poppins-Regular", sans-serif;
}
.footer .title2{
    font-family: "Poppins-Bold", sans-serif;
    font-size: 23px;
    margin-top: 70px;
    margin-bottom: 40px;
}
.footer img{
    width: 80px;
}
#energia .bg-black{
    position: relative;
    margin-top: -20px;
    background-color: black;
    padding-bottom: 20px;
}
.container-img {
    width: 100%;
    overflow-x: hidden;
}
.container-img img{
    width: calc(100% + 159px);
    margin-left: -80px;
}
#energia .title{
    color: #AAD9DD !important;
}
#energia .text{
    color: #ABABAB !important;
    font-size: 15px !important;
}
#eductor{
    margin-top: -230px;
}
#eductor .icon,
#servicios .icon,
#testimonios .icon,
#videos .icon,
#contacto .icon{
    width: 140px;
}
#eductor #ventajas{
    margin-top: 30px;
}
#eductor #ventajas .eductor{
    text-align: center;
}
#eductor #ventajas .icons .ventaja{
    text-align: center;
    width: 115px;
    display: inline-block;
    font-size: 13px;
    color: #333333;
    height: 120px;
    margin-bottom: 15px;
}
#eductor #ventajas .icons .ventaja img{
    margin-bottom: 6px;
    width: 70px;
}
#eductor #ventajas .icons > div{
    text-align: center;
}
#eductor #ventajas .icons .v1,
#eductor #ventajas .icons .v3{
    text-align: right;
}
#eductor #ventajas .icons .v4,
#eductor #ventajas .icons .v6{
    text-align: left;
}
#eductor #ventajas .eductor img{
    width: 420px;
}
#contacto{
    background-color: var(--main-color);
    color: #AAD9DD !important;
}
#contacto .title2{
    color: #AAD9DD !important;
}
#contacto #shape{
    width: 100%;
    position: relative;
    text-align: center;
    overflow-x: hidden;
}
#contacto #shape img{
    width: calc(100% + 200px);
    margin-left: -100px;
    display: block;
}
#contacto .dir{
    margin-bottom: 25px;
    margin-left: 10px;
}
#contacto .dir > div{
    display: inline-block;
}
#contacto .dir .icon{
    width: 30px;
    vertical-align: top;
    text-align: center;
    font-size: 18px;
    margin-right: 20px;
}
#contacto .dir .text{
    width: calc(100% - 65px);
}
#servicios .title{
    color: #745A82 !important;
    font-size: 34px;
}
#servicios{
    margin-top: -400px;
    padding-top: 0;
}
.sections .title,
header .title {
    font-family: "Lora-Regular";
    font-size: 42px;
    margin-bottom: 6px;
    line-height: 60px;
}
header{
    color: #1F1F1F;
}
header .title {
    font-size: 58px;
}
header .text{
    opacity: 0.5;
}
header .redes{
    margin-top: 28px;
}
header .redes li{
    display: inline-block;
    margin-right: 20px;
    font-size: 18px;
}
header .text-footer{
    color: #ABABAB;
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid;
    font-size: 14px;
}
.btn {
    border-radius: 4px;
    padding: 10px 30px;
    display: inline-block;
    cursor: pointer;
    font-size: 15px !important;
    font-weight: normal !important;
    text-align: center;
    border: none;
    font-family: 'Poppins-Light';
}

.btn-main {
    background-color: var(--main-color) !important;
    color: white;
}

.btn-sec {
    background-color: #dbdbdb !important;
    color: black;
}

.btn:hover {
    transform: rotate(3deg);
}

.btn-black {
    background-color: #1F1F1F;
    color: #fff !important;
}
.btn-green{
    background-color: #67C6B3;
    color: #fff !important;
}
.video-btn{
    position: relative;
    text-align: center;
    cursor: pointer;
}
.video-btn i{
    font-size: 40px;
    color: white;
    opacity: 0.5;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -20px;
    margin-left: -10px;
}
.video-btn:hover i{
    opacity: 0.8;
}
.video-btn img{
    border-radius: 7px;
    overflow: hidden;
}
.color-main {
    color: var(--main-color) !important;
}

.content-img {
    position: relative;
    width: 500px;
    height: 460px;
    margin: 0 auto;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.content-img .elements {
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.flex-center{
    align-items: center;
    display: flex;
}
.testimonio .texto{
    font-size: 14px;
    color: gray;
}
.testimonio .perfil{
    margin-top: 10px;
}
#content-img1 .element1 {
    width: 300px;
    height: 480px;
    top: -30px;
    left: 90px;
}
.page-link{
    color: var(--main-color);
    cursor: pointer;
}
.page-item.active .page-link{
    background-color: var(--main-color);
    border-color: var(--main-color);
}
.pointer{
    cursor: pointer;
}
.footer {
    font-family: "Poppins-Light";
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -36px;
    padding: 60px 0px 100px;
    background-color: #581f51;
}
footer .pie{
    background-color: #581f51;
    padding: 23px 0px 20px;
    text-align: center;
    color: white;
    font-family: "Poppins-Light", sans-serif;
}




@media (max-width: 1280px) {
    
}

/* LG */
@media (max-width: 1199px) {
    #menu_sup li a{
        font-size: 14px;
    }
    #eductor #ventajas .eductor img {
        width: 320px;
        margin-top: 50px;
    }
    #eductor{
        margin-top: -130px;
    }
    #servicios {
        margin-top: -360px;
    }
}

/* MD */
@media (max-width: 991px) {
    #area-logo{
        width: 140px;
        margin: 0 auto 15px;
    }
    #area-logo #logo{
        width: 120px;
    }
    #area-logo #gila{
        width: 80px;
        margin-top: 14px;
    }
    #contacto .dir{
        margin-left: -2em;
    }
    #menu_sup{
        float: none !important;
        text-align: center;
    }
    header #content-img1{
        margin-top: 0px !important;
    }
    #servicios {
        margin-top: -280px;
    }
    #eductor{
        margin-top: -105px;
    }
    #eductor #ventajas .eductor img {
        width: 260px;
        margin-top: 85px;
    }
}

/* SM */
@media (max-width: 767px) {
    #contacto .btn-green{
        width: 100%;
        margin-top: 15px;
    }
    #menu_sup li a {
        padding: 9px 16px;
    }
    #menu_sup ul li a::after{
        top: 16px;
    }
    header{
        text-align: center;
    }
    header .title{
        font-size: 45px;
    }
    header #content-img1{
        display: none !important;
    }
    .nomobile{
        display: none;
    }
    #eductor{
        margin-top: -80px;
    }
    #servicios {
        margin-top: -180px;
    }
    #eductor #ventajas .eductor {
        display: none;
    }
    #eductor #ventajas .icons .v1, #eductor #ventajas .icons .v3{
        text-align: center;
    }
    #eductor #ventajas .icons .v4, #eductor #ventajas .icons .v6 {
        text-align: center;
    }
    .sections {
        padding: 40px 0;
    }
    .testimonio{
        margin-bottom: 40px;
    }
    #wave-container{
        display: none;
    }
}

/* XS */
@media (max-width: 575px) {
    #eductor{
        margin-top: -40px;
    }
    #servicios {
        margin-top: -90px;
    }

}

/* XS */
@media (max-width: 330px) {

}