@font-face {
    font-family: 'Tabardo';
    src: url('fonts/Tabardo.eot');
    src: url('fonts/Tabardo.eot?#iefix') format('embedded-opentype'),
        url('fonts/Tabardo.woff2') format('woff2'),
        url('fonts/Tabardo.woff') format('woff'),
        url('fonts/Tabardo.ttf') format('truetype'),
        url('fonts/Tabardo.svg#Tabardo') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}



body{color:white;font-family: 'Raleway', Arial, sans-serif;margin:0;padding:0;font-size: 26px;opacity:1;transition: opacity 1s;}
#site {overflow-x: hidden;position: relative;}
.row{width:100%;max-width: 1100px;margin:auto;position: relative;z-index: 2;}
.row-full{width:100%;max-width: 1600px;margin:auto;position: relative;z-index: 2;}
section{padding:70px 0 0px 0;position: relative;}
h2 {color: #fce300;font-family: 'Tabardo';font-weight: 100; font-size: 80px; margin: 0;}
a{text-decoration: none;}

.path-pentagono{width: 180px;height: 180px;}
.path-circulo{width: 140px;height: 140px;}
.path-triangulo{width: 130px;height: 130px;}
div[class*="path-"]{position:absolute;}
.path-pentagono::after, .path-pentagono::before {-webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);background:red;}
.path-circulo::after, .path-circulo::before{-webkit-clip-path: circle(50% at 50% 50%);clip-path: circle(50% at 50% 50%);background:red;}
.path-triangulo::after, .path-triangulo::before{-webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);clip-path: polygon(50% 0%, 0% 100%, 100% 100%);background:red;}
div[class*="path-"]::before{content:"";display:block;position:absolute;width: 100%;height:100%;z-index:2;}
div[class*="path-"]::after{content:"";display:block;background:black;position:absolute;width: 100%;height:100%;opacity:.1;margin: 17px 0 0 24px;z-index:1;}

.ad-Path {fill: none;stroke: white;stroke-width: 4px;stroke-linecap: square;stroke-dasharray: 20;}

.section-even::before {content: " ";display: block; height: 48px;position: absolute;width: 100%;z-index: 1;right: 0;-webkit-clip-path: polygon(0 98%, 100% 0, 100% 100%, 0% 100%);clip-path: polygon(0 98%, 100% 0, 100% 100%, 0% 100%);height: 103px;top: -100px;}
.section-odd::before{content: " ";display: block; height: 48px;position: absolute;width: 100%;z-index: 1;right: 0;-webkit-clip-path: polygon(0% 0%, 100% 98%, 100% 100%, 0% 100%);clip-path: polygon(0% 0%, 100% 98%, 100% 100%, 0% 100%);height: 103px;top: -100px;}
.section-odd .row {display: grid;grid-template-columns: 1fr 1fr;align-items: center;}
.section-odd .row img {grid-column: 1;}
.section-even .row {display: grid;grid-template-columns: 1fr 1fr;}
.section-even .row img {grid-column: 2;justify-self: flex-end;}
.section-info{display:flex;flex-direction: column;justify-content: center;}
.section-even .section-info{grid-row: 1;}
section img{margin-bottom:-50px;}

header{padding: 30px 0;background:#32d9c3;}
header .path-circulo {top: -190px;left: -190px;width: 300px; height: 300px;}
header .path-circulo::before {background: #fce300;}
header #logo img{width:220px;}
header .row {display: flex;align-items: center; max-width: 950px;}
header .row ul {margin: 0 0 0 auto;list-style:none;}
header .row ul li{display:inline-block;text-align: center;margin:0 15px;}
header .row ul li a {color:#222222;font-size: 18px;position:relative;display:block;}
header .row ul li a > div {margin: 0 auto 10px auto;width: 65px;height:65px;position: relative;font-size: 40px;color: white;font-family: Tabardo;font-weight: 300;display: flex;align-items: center;justify-content: center;}
header .row ul li a > div::before {content: ""; width: 100%; height: 100%; display: block; border-radius: 50%; margin-bottom: 20px;position: absolute;}
header .row ul li a > div::after {content: ""; width: 75%; height: 76%;display: block;border-radius: 41% 95% 0;position: absolute;bottom: -3px;left: 2%;}
header .row ul li a > div span {position: relative;z-index: 4; padding-top: 8px;display:block;}
header .row ul li a[data-section="section-somos"] > div::before,header .row ul li a[data-section="section-somos"] > div::after{background:#7e57c6;}
header .row ul li a[data-section="section-despierta"] > div::before,header .row ul li a[data-section="section-despierta"] > div::after{background:#fe6b00;}
header .row ul li a[data-section="section-descubre"] > div::before,header .row ul li a[data-section="section-descubre"] > div::after{background:#257ce1;}
header .row ul li a[data-section="section-crea"] > div::before,header .row ul li a[data-section="section-crea"] > div::after{background:#e81d75;}
header .row ul li a[data-section="section-diviertete"] > div::before,header .row ul li a[data-section="section-diviertete"] > div::after{background:#fce300;}
header .row ul li a[data-section="section-sintoniza"] > div::before,header .row ul li a[data-section="section-sintoniza"] > div::after{background:#7e57c6;}

footer{background:white;text-align: center;padding:80px 0;}
footer img{margin:0 10px;}
footer img:first-child{margin-bottom:50px;}

#section-player {position: relative;background:#32d9c3;}
#section-player::after {width: 100%;height: 39%;bottom: 0;left: 0;content: "";display: block;position: absolute;background: #7e57c6;z-index: 1;border-radius: 155% 155% 0 0;width: 125%;left: -12%;}
#section-player #player{width:100%!important;padding-top:56%;height:0!important;background:#222222;position:relative;}
#section-player #player > iframe{position:absolute;top:0;left:0;width: 100%;height: 100%;}
#player-wrapper{width:100%;max-width: 950px;margin:auto;}
#player-wrapper::after{width:80%;height:40px;background:#000000;border-radius: 50%;display:block;margin:25px auto 0 auto;opacity:.15;content:"";}
#section-player .path-pentagono {right: -30px;top: 20%;transform: rotate(-17deg);}
#section-player .path-pentagono::before {background: #e81d75;}
#section-player .path-triangulo {bottom: 35%;left: -85px;transform: rotate(27deg);}
#section-player .path-triangulo::before {background: #257ce1;}

#section-somos{background:#7e57c6;padding-bottom:200px;}
#section-somos img{margin:0;}
#section-somos .path-circulo {top: -60px;right: 0%;}
#section-somos .path-circulo::before {background: #fe6b00;}
section#section-somos svg {position:absolute; top: -520px;z-index: 1;right: calc(50% + 120px);}

#section-despierta{background:#fe6b00;text-align: right;}
#section-despierta::before {background: #fe6b00;}
#section-despierta .path-triangulo {top: -345px;right: -50px;transform: rotate(60deg);z-index: 10;}
#section-despierta .path-triangulo::before {background: #fce300;}
#section-despierta .path-pentagono {left: -60px;top: -230px; transform: rotate(34deg); z-index: 10; width: 250px; height: 250px;}
#section-despierta .path-pentagono::before {background: #32d9c3;}
#section-despierta .path-circulo {top: 15%;right: -200px;transform: rotate(27deg);width:330px;height:330px;}
#section-despierta .path-circulo::before {background: #257ce1;}
#section-despierta img{z-index: 5;position: relative;}
#section-despierta svg{position: absolute; top: -235px;left: calc(50% - 243px); z-index: 2;}

#section-descubre{background:#257ce1;}
#section-descubre::before {background: #257ce1;}
#section-descubre .path-triangulo {top: -180px;left: 29%;transform: rotate(10deg);z-index: 10;}
#section-descubre .path-triangulo::before {background: #ed3268;}
#section-descubre svg {position: absolute;top: -254px;left: calc(50% - 275px);}

#section-crea{background:#e81d75;text-align: right;}
#section-crea::before {background: #e81d75;}
#section-crea .path-pentagono {right: -60px;top: -220px; transform: rotate(34deg); z-index: 10; width: 230px; height: 230px;}
#section-crea .path-pentagono::before {background: #32d9c3;}
#section-crea svg { position: absolute;top: -75px;right: -164px;z-index: -1;}

#section-diviertete{background:#fce300;color:#257ce1;}
#section-diviertete h2{color:#257ce1}
#section-diviertete::before {background: #fce300;}
#section-diviertete .path-circulo {top: -330px;left: -200px;transform: rotate(27deg);width:330px;height:330px;z-index: 10;}
#section-diviertete .path-circulo::before {background: #7e57c6;}
#section-diviertete svg { position: absolute; bottom: -210px; left: -228px; z-index: -1;}


#section-sintoniza{background:#7e57c6;text-align: center;padding-bottom:120px;}
#section-sintoniza .row{display:flex;flex-direction: column;}
#section-sintoniza::before {background: #7e57c6;}
#section-sintoniza .path-triangulo {top: -220px;right: -5%;transform: rotate(-20deg);z-index: 10;}
#section-sintoniza .path-triangulo::before {background: #ed3268;}
#section-sintoniza .path-circulo {top: 15%;right: -230px;transform: rotate(27deg);width:330px;height:330px;}
#section-sintoniza .path-circulo::before {background: #fce300;}
#section-sintoniza .path-pentagono {left: -100px;bottom: 30px; transform: rotate(34deg); z-index: 10; width: 250px; height: 250px;}
#section-sintoniza .path-pentagono::before {background: #32d9c3;}
#section-sintoniza-player {width: 100%;padding-top: 56%;position: relative;background: #333333;}
#section-sintoniza #player-wrapper {margin-bottom:70px;}
#section-sintoniza-player > *{position: absolute;width:100%;height:100%;top:0;left:0;}
#section-sintoniza .section-info {max-width: 600px;margin: auto;}

@media screen and (max-width: 1120px) {

    body{font-size: 16px;}
    .row{width:90%;}
    section[class*="section-"] .row img[src*=".png"] {max-width: 55%;justify-self: center;}
    svg{display:none;}
    h2 {font-size:38px;}
    div[class*="path-"]::before,div[class*="path-"]::after{transform:scale(0.2);}
    div[class*="path-"]::after {margin: 5px 0 0 1px;}
    section {padding: 35px 0 }

    header .row {flex-direction: column;width: 100%;}
    header .row ul {width: 100%; margin: 0;padding: 0;text-align: center;padding: 20px 0;}
}

@media screen and (max-width: 720px) {
    body {font-size: 14px;text-align: left;}
    h2 {font-size: 22px;text-align: left;}
    svg {display: none;}
    .row {width: 80%;}
    img{max-width: 100%;}

    section[class*="section-"] .row img[src*=".png"] {max-width: 55%;justify-self: center!important;grid-row: 1;margin: -40px 0 15px 0;}   
    .section-even .section-info {grid-row: 2;}
    section {padding: 0 0 50px 0;}
    section img {margin: 0;}
    .section-odd .row {grid-template-columns: 1fr;}
    .section-even .row {grid-template-columns: 1fr;}
    .section-even .row img {grid-column: initial;grid-row: 2;}
    .section-odd::before {height: 50px;top: -49px;}
    .section-even::before { height: 50px;top: -48px;}
     
    
    header #logo img {width: 115px;}
    header .row ul li a > div {font-size: 21px; width: 30px;height: 31px;}
    header .row ul li a {font-size: 10px;}
    header .row ul li {margin: 0 2px;}
    header {padding: 10px;}
    header .path-circulo {top: -171px;left: -140px;}

    #section-player{overflow:initial;}
    #section-player::after { bottom: -5px; height: 65%;}
    #player-wrapper::after {margin: 10px auto; height: 17px;}
    #section-player .path-pentagono {right: -71px;top: -195px;}
    #section-player .path-triangulo {bottom: -52%;left: -10%;transform: rotate(27deg);}

    #section-somos{padding-bottom:50px;} 
    #section-somos img{max-width: 40%;}

    #section-despierta {text-align: left;}
    header .path-circulo {top: -171px;left: -140px;}
    #section-player .path-pentagono {right: -71px;top: -195px;  }
    #section-despierta .path-triangulo {top: -28%;right: -28px;}
    #section-somos .path-circulo {top: -95px;right: -114px;}
    
    #section-somos .path-circulo::before,#section-somos .path-circulo::after {transform: scale(0.4);}

    #section-sintoniza {padding-top: 30px;}
    #section-sintoniza h2{text-align: center;}
    #section-sintoniza #player-wrapper{margin-bottom:20px;}

    footer img {margin-bottom: 25px;}  


    #section-despierta .path-pentagono {left: -119px;top: -140px;}
    #section-descubre .path-triangulo {left: -100px;}
    #section-crea .path-pentagono {right: -112px;}
    
}