@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
  
html, body {
    overflow-x: hidden;
    width: 100%;
}

 body{
    background-color: #19216E !important;
}

/*HEADER*/

.coderconf-header{
    display: flex;
    justify-content: space-around;
    position: fixed;
    box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.35);
    -webkit-box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.35);
    -moz-box-shadow: 0px 3px 8px 2px rgba(0,0,0,0.35);
    width: 100%;
    background-color: #19216E;
    padding: .75rem 0;
    z-index: 2;
}

.coderconf-header-title{
    font-family: 'DM Sans', sans-serif;
    font-size: 30px;
    font-weight: 400;
    color: #C7D027;
}

.coderconf-header-title-conf{
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
}

.coderconf-nav{
    font-family: 'DM Sans', sans-serif;
    font-size: 25px;
    font-weight: 500;
}

.coderconf-nav ul {
    list-style: none;
    display: flex;
    margin-top: .5rem;
}

.coderconf-nav-a{
    text-decoration: none;
    color: #C7D027;
    margin: 0 5rem;
}

.coderconf-nav-a-button{
    text-decoration: none;
    color: white;
    background-image: linear-gradient(90deg, #fee140 0%, #FA709A 100%);
    font-size: 25px;
    font-weight: bold;
    border: 0px black solid;
    border-radius: 80px;
    padding: 2px 45px;
    letter-spacing: 1px;
}

.coderconf-nav-a-button:hover{
    box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    -webkit-box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    -moz-box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    color: #FEE140 ;
    transition: 1.5s;
}

.fixed-mobile-btn {
    display: none;
}

/*MAIN*/
.coderconf-section-main{
    display: flex;
    justify-content: space-around;
    max-width: 60%;
    margin: 8rem auto 0 auto;
    position: relative;
}

.coderconf-section-main .logo-container {
    position: relative;
    width: 26rem;
    height: 26rem;
    margin-right: 8rem;
}

.coderconf-section-main .logo-triangle, .coderconf-section-main .logo-dalePlay, .coderconf-section-main .logo-aTuFuturo {
    position: absolute;
}

.coderconf-section-main .logo-triangle {
    animation: triangle-animation 3s ease infinite;
    width: 25rem;
}

@keyframes triangle-animation {
  50% {right: 4rem;}
  0% {right: -2rem;}
  100% {right: 4rem;}
}

.coderconf-section-main .logo-dalePlay {
    animation: dalePlay-animation 3s ease infinite;
    width: 20rem;
}

@keyframes dalePlay-animation {
    0% {top: -1.5rem;}
    50% {top: -5rem;}
    100% {top: -1.5rem;}
}

.coderconf-section-main .logo-aTuFuturo {
    animation: aTuFuturo-animation 3s ease infinite;
    width: 20rem;
}

@keyframes aTuFuturo-animation {
    0% {bottom: 3rem;}
    50% {bottom: -3rem;}
    100% {bottom: 3rem;}
}

.main-text{
    font-family: 'DM Sans', sans-serif;
    color: white;
    margin-top: 10%;
    font-size: 3.25rem;
}

.coderconf-section-main .triangle {
    position: absolute;
    transform: rotate(-90deg);
    right: -30rem;
    bottom: 0;
}

.coderconf-section-main .rejilla, .coderconf-section-main .rejilla2 {
    position: absolute;
    z-index: -1;
}

.coderconf-section-main .rejilla2 {
    left: -10.45rem;
}

/*FAQ*/
.section-faq{
    display: flex;
    justify-content: space-around;
    margin-top: 7%;
    position: relative;
}

.title-faq{
    color: #C7D027;
    font-family: 'DM Sans', sans-serif;
    font-size: 50px;
    font-weight: 100;
}

.letters-faq{
    font-family: 'DM Sans', sans-serif;
    color: white;
    font-size: 20px;
    font-weight: 100;
    letter-spacing: 1.5px;
}

.main-numbers{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    position: relative;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 3rem;
    font-weight: bold;
    margin-top: 10rem;
}

.main-numbers article {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: .5rem 0;
}

.main-numbers article .number {
    font-size: 8rem;
    line-height: 3rem;
}

.main-numbers .triangle {
    position: absolute;
    transform: rotate(235deg);
    width: 20rem;
    right: 6rem;
    bottom: 3rem;
    z-index: -1;
}

.section-faq .triangle {
    position: absolute;
    width: 10rem;
    left: -2rem;
    bottom: -9rem;
}


/*SPEAKER SECTION*/
.main-text-speaker{
    font-family: 'DM Sans', sans-serif;
    color: #C7D027;
    margin-top: 10%;
    font-size: 70px;
    letter-spacing: 2px;
}

.speaker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: .75rem auto;
}

.speaker p {
    margin: 0;
}

.speaker .user-img{
    width: 25rem;
    margin-bottom: -2rem;
}

.speaker .user-name{
    font-family: 'DM Sans', sans-serif;
    color: #C7D027;
    font-size: 1.25rem;
}

.user-description{
    font-family: 'DM Sans', sans-serif;
    color: white;
    font-size: 1.2rem;
}

.user-description-profesion{
    font-family: 'DM Sans', sans-serif;
    color: white;
    font-size: 1rem;
    font-weight: 600;
}

.bg-rejillas2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 2rem;
}

.bg-rejillas2 .rejilla1, .bg-rejillas2 .rejilla2, .bg-rejillas2 .rejilla3, .bg-rejillas2 .rejilla4 {
    position: absolute;
    z-index: -1;
}

.bg-rejillas2 .rejilla1 {
    top: 0;
    right: 4rem;
}

.bg-rejillas2 .rejilla2 {
    top: 29rem;
    right: 4rem;
}

.bg-rejillas2 .rejilla3 {
    top: 0;
    right: 33.4rem;
}

.bg-rejillas2 .rejilla4 {
    top: 29rem;
    right: 33.4rem;
}

.triangle-3{
    margin-top: 7%;
    width: 30%;

}

/*AGENDA*/
.cards-agenda{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    position: relative;
    margin-top: 1%;
    color: rgb(53, 53, 53);
}

.cards-agenda .triangle1, .cards-agenda .triangle2 {
    position: absolute;
    z-index: -1;
}

.cards-agenda .triangle1 {
    right: -3rem;
    bottom: -5rem;
}

.cards-agenda .triangle2 {
    left: 0;
    width: 10rem;
    transform: rotate(60deg);
}


.card-speaker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 1px white solid;
    border-radius: 15px;
    background-color: white;
    width: 25rem;
    padding: 1rem;
    box-shadow: 8px 8px 10px -4px rgba(0,0,0,0.53);
    -webkit-box-shadow: 8px 8px 10px -4px rgba(0,0,0,0.53);
    -moz-box-shadow: 8px 8px 10px -4px rgba(0,0,0,0.53);
    margin: .5rem 0;
}

.card-hour{
    font-family: 'DM Sans', sans-serif;
    color: black;
    font-weight: bold;
    background-color: #C7D027;
    font-size: 15px;
    border: 0px black solid;
    padding: 4px 15px;
    border-radius: 4px;
    letter-spacing: 1px;
    width: 19%;
}

.card-img{
    width: auto;
    height: auto;
    margin: -2rem 0;
}

.card-main-text{
    font-family: 'DM Sans', sans-serif;
    font-weight: bold;
    text-align: center;
    font-size: 20px;
    letter-spacing: 1.5px;
}

.card-name{
    font-family: 'DM Sans', sans-serif;
    text-align: center;
    font-size: 15px;
}

.card-button{
    text-align: center;
    text-decoration: none;
    color: black;
    background-color: #C7D027;
    font-size: 15px;
    font-weight: bold;
    border: 0px black solid;
    border-radius: 15px;
    padding: 10px 45px;
    letter-spacing: 1px;
    margin-bottom: .5rem;
}

.card-button:hover{
    background-color: #FEE140;
    color: black;
    cursor: pointer;
}

/* DALE PLAY */
.dale-play-a-tu-futuro{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5%;
    max-width: 55rem !important;
}

.dale-play-a-tu-futuro .logo-container {
    position: relative;
    width: 30rem;
    height: 22rem;
    margin-right: 5rem;
}

.dale-play-a-tu-futuro .logo-container .logo-triangle, .dale-play-a-tu-futuro .logo-container .logo-dalePlay, .dale-play-a-tu-futuro .logo-container .logo-aTuFuturo {
    position: absolute;
}

.dale-play-a-tu-futuro .logo-container {
    margin: 2rem auto 2rem 2rem;
}

.dale-play-a-tu-futuro .logo-triangle {
    animation: triangle-animation 3s infinite;
}

@keyframes triangle-animation {
  0% {right: -3rem;}
  50% {right: 15rem;}
  100% {right: -3rem;}
}

.dale-play-a-tu-futuro .logo-dalePlay {
    animation: dalePlay-animation 3s ease infinite;
}

@keyframes dalePlay-animation {
    0% {top: -5rem;}
    50% {top: -1.5rem;}
    100% {top: -5rem;}
}

.dale-play-a-tu-futuro .logo-aTuFuturo {
    animation: aTuFuturo-animation 3s ease infinite;
}

@keyframes aTuFuturo-animation {
    0% {bottom: -2rem;}
    50% {bottom: 2rem;}
    100% {bottom: -2rem;}
}

/*SECTION LOGO Y PARRAFO*/
.btn-register{
    text-decoration: none;
    color: white;
    background-image: linear-gradient(90deg, #fee140 0%, #FA709A 100%);
    font-size: 30px;
    font-weight: bold;
    border: 0px black solid;
    border-radius: 40px;
    padding: 6px 45px;
    letter-spacing: 1px;
    cursor: pointer;
    margin-bottom: 2rem;
}

.btn-register:hover{
    box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    -webkit-box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    -moz-box-shadow: 2px 0px 73px 2px rgba(248,247,0,0.35);
    color: #FEE140 ;
    transition: 1s;
}

.coderconf-event{
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    margin-top: 5%;
    margin-bottom: 8%;
}

.coderconf-event .triangle {
    position: absolute;
    z-index: -1;
    left: -10rem;
    top: -3rem;
}

.coderconf-event-box{
    padding: 1rem;
    max-width: 40rem;
}

.coderconf-event-box img {
    width: 10rem;
}

.coderconf-event-boxletter{
    font-family: 'DM Sans', sans-serif;
    color: white;
    font-size: 25px;
    letter-spacing: 1.5px;
}

.coderconf-event-letter2{
    font-family: 'DM Sans', sans-serif;
    color: white;
    font-size: 25px;
}

.coderconf-marcas img {
    width: 25rem;
}

/* FORM DE REGISTRO */
#register {
    height: 2rem;
    width: 2rem;
    margin-bottom: 5rem;
}

#registrate, .registerForm {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#registrate {
    background-color: #080b2b;
    color: white;
    padding: 1.5rem;
    margin: 2rem auto;
    border-radius: 1rem;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
    width: 45rem;
}

#registrate h2 {
    text-align: center;
}

.registerForm {
    margin: 1.5rem auto;
}

.registerForm .inputContainer {
    display: flex;
    flex-direction: column;
    margin: .5rem auto;
}

.registerForm .inputContainer .formLabel {
    display: flex;
    align-items: center;
}

.registerForm .inputContainer .formLabel label {
    color: #C7D027;
    font-size: 1.25rem;
}
.registerForm .inputContainer .formLabel img {
    width: .75rem;
    transform: rotate(15deg);
    margin-right: .5rem;
}

.registerForm .inputContainer input {
    width: 25rem;
    height: 2rem;
    padding: .25rem;
}

.registerForm .comunidad {
    margin: 1.5rem auto;
}

.registerForm .comunidad label {
    font-size: 1.15rem;
    margin: .25rem 0 .25rem 1rem;
}

.registerForm .comunidad input {
    font-size: 1.15rem;
    margin-left: 6rem;
}

.registerForm .btn-register {
    margin-top: 1.5rem;
}

#registrate .formSubmitted .innerBorder {
    border: 2px solid; 
    border-image: linear-gradient(to right, #fee140 0%, #FA709A 100%) 1;
    width: 40rem;
    padding: 2rem 8rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#registrate .formSubmitted .innerBorder img {
    margin: 1.5rem auto .5rem auto;
}

#captcha {
    width: 300px;
    height: 74px;
    border: black solid 1px;
}

/*FOOTER*/
.footer-coderconf{
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #080b2b;
    padding: 1rem 0;
}

footer p {
    margin: 0;
}

footer img {
margin: 0;
padding: 0;
}

.footer-by{
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 25px;
    font-weight: 100;
}

.footer-by-mobile {
    display: none;
}

footer .footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

footer .footer-links div {
    display: flex;
}

footer .footer-links p {
    padding: 0 1rem;
    color: white;
    font-family: 'DM Sans', sans-serif;
    font-size: 25px;
}

footer .footer-links .iconify {
    font-size: 2rem;
    margin: 0 1rem;
    cursor: pointer;
}

/* MEDIA QUERIES */

.hamburguer-icon {
    display: none;
}

@media screen and (max-width: 767px) {
    /* NAVBAR */
    nav {
        position: fixed;
            left: -100%;
            top: 0;
        width: 100%;
        height: 100vh;
        overflow-y: hidden !important;
        transition: left 0.5s;
        z-index: 3;
        background-color: #19216E;
    }

    nav ul {
        width: 100%;
        height: 100%;
        overflow-y: hidden;
        display: flex;
        flex-direction: column;
        text-align: center !important;
        justify-content: center !important;
        align-items: center !important;
    }

    nav ul li {
        margin: 1rem 0;
        margin-left: -3rem;
        list-style: none;
    }

    .coderconf-nav-a{
        margin-left: 0;
    }

    nav ul a {
        margin: 0 !important;
        font-size: 2.75rem;
        font-weight: bold;
        color: white;
        text-decoration: none;
    }

    nav ul .coderconf-nav-a-button {
        font-size: 2.75rem;
        margin-top: 1rem !important;
        margin-left: 1rem !important;
    }

    .menu-active {
        left: 0;
        transition: left .5s;
    }

    .hamburguer-icon {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem !important;
        margin: auto;
        z-index: 4;
    }

    .hamburguer-icon .line {
        background: #C7D027;
        border-radius: .5rem;
        width: 40px;
        height: 6px;
        margin-bottom: 8px;
        transition: .5s;
    }

    .hamburguer-icon .top {
        -ms-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
        top: 18px;
        position: relative;
    }

    .hamburguer-icon .center {
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s 0,3s, opacity 2s linear;
    }
        
    .hamburguer-icon .bottom {
        -ms-transform: rotate(140deg);
        -webkit-transform: rotate(140deg);
        transform: rotate(45deg);
        top: -10px;
        position: relative;
    }

    .fixed-mobile-btn {
        display: flex;
        justify-content: center;
        position: fixed;
        top: 6rem;
        right: 1rem;
        font-size: 1.25rem;
        width: 8rem;
        z-index: 1;
    }

    /* SECCION 1 - HERO */
    .coderconf-section-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    .coderconf-section-main .main-image1 {
        width: 80%;
    }

    .coderconf-section-main .main-text {
        font-size: 2rem;
        text-align: center;
    }

    .coderconf-section-main .rejilla {
        right: -17rem;
        top: -8rem;
    }
    .coderconf-section-main .rejilla2 {
        display: none;
    }

    .coderconf-section-main .logo-triangle {
        animation: triangle-animation 3s ease infinite;
        width: 15rem;
    }
    
    @keyframes triangle-animation {
      0% {right: 1rem;}
      50% {right: 5rem;}
      100% {right: 1rem;}
    }
    
    .coderconf-section-main .logo-dalePlay {
        animation: dalePlay-animation 3s ease infinite;
        width: 20rem;
        right: -3.5rem;
    }
    
    @keyframes dalePlay-animation {
        0% {top: -5rem;}
        50% {top: -8rem;}
        100% {top: -5rem;}
    }
    
    .coderconf-section-main .logo-aTuFuturo {
        animation: aTuFuturo-animation 3s ease infinite;
        width: 20rem;
        right: -3.5rem;
    }
    
    @keyframes aTuFuturo-animation {
        0% {bottom: 6rem;}
        50% {bottom: 0rem;}
        100% {bottom: 6rem;}
    }

    /* SECCION 2 - FAQ */
    .section-faq {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 1rem;
        text-align: center;
    }

    /* SECCION 3 - NUMEROS */
    .main-numbers{
        flex-direction: column;
        margin-top: 5rem;
        font-size: 2rem;
    }

    .main-numbers article {
        margin: 1.5rem 0;
    }
    
    .main-numbers article .number {
        font-size: 5rem;
        line-height: 3rem;
    }

    /* SECCION 4 - SPEAKERS */
    .main-text-speaker{
        font-size: 3rem;
    }
    
    .speaker .user-img{
        width: 18rem;
    }

    /* SECCION 5 - AGENDA */
    .card-speaker {
        width: 19rem;
    }
    
    .card-hour{
        width: auto;
    }
    
    .card-img{
        width: 15rem !important;
    }

    /* SECCION 6 - DALE PLAY A TU FUTURO */
    .dale-play-a-tu-futuro{
        flex-direction: column;
        margin-bottom: 6rem;
        max-width: auto;
    }

    .dale-play-a-tu-futuro .logo-triangle {
        animation: none;
    }
    
    .dale-play-a-tu-futuro .logo-dalePlay {
        animation: none;
    }

    .dale-play-a-tu-futuro .logo-aTuFuturo {
        animation: none;
    }

    /* SECCION 7 - EVENTO Y MARCAS */
    .coderconf-event {
        flex-direction: column;
        text-align: center;
    }

    .coderconf-event-box{
        padding: .25rem;
        max-width: 19rem;
    }

    .coderconf-marcas img {
        width: 18rem;
    }

    /* SECCION 8 - FORM DE REGISTRO */
    #registrate {
        width: 20rem;
    }

    .registerForm {
        margin: .5rem auto;
    }

    .registerForm .inputContainer input {
        width: 16rem;
    }

    .registerForm .comunidad {
        margin: 1.5rem auto;
    }

    .registerForm .comunidad input {
        margin-left: .25rem;
    }

    .registerForm .comunidad label {
        margin: .25rem 0 .25rem .25rem;
    }

    .registerForm .btn-register {
        margin-top: 1rem;
    }

    #registrate .formSubmitted .innerBorder {
        width: 18rem;
        padding: 2rem 8rem;
    }

    #registrate .formSubmitted .innerBorder h2 {
        width: 16rem;
    }
    
    #registrate .formSubmitted .innerBorder img {
        margin: 0;
        margin-top: 1.5rem;
    }

    /* FOOTER */
    .footer-coderconf {
        flex-direction: column;
        padding: 1rem 0;   
    }
    
    footer p {
        margin: 0;
    }
    
    footer img {
    margin: 0;
    padding: 0;
    }

    .footer-by{
        display: none;
    }
    
    .footer-by-mobile{
        display: block;
        color: white;
        font-family: 'DM Sans', sans-serif;
        font-size: 1.25rem;
        font-weight: 100;
    }
    
    footer .footer-links {
        margin: 1rem 0;
        flex-direction: column;
    }

    footer .footer-links div {
        margin: .5rem;
    }

    footer .footer-links .iconify {
        margin: 0 5rem;
    }
    
    footer .footer-links p {
        font-size: 1.25rem;
    }
}