@font-face {
    font-family: vag;
    src: url(https://20963257.fs1.hubspotusercontent-na1.net/hubfs/20963257/Linotype%20-%20VAG%20Rounded%20LT%20Pro%20Light.ttf);
}

@font-face {
    font-family: vag;
    src: url(https://20963257.fs1.hubspotusercontent-na1.net/hubfs/20963257/Linotype%20-%20VAG%20Rounded%20LT%20Pro%20Bold.ttf);
    font-weight: bold;
}

@font-face {
    font-family: mix;
    src: url(https://20963257.fs1.hubspotusercontent-na1.net/hubfs/20963257/TheMixB-W5Plain.otf);
}

@font-face {
    font-family: mix;
    src: url(https://20963257.fs1.hubspotusercontent-na1.net/hubfs/20963257/TheMixB-W7Bold.otf);
    font-weight: bold;
}

* {
    font-family: vag !important;
    color: #77787B;
    font-size: 16px;
}

.mix {
    font-family: mix !important;
}

html {
    overflow-x: hidden;
    color: #006CC9;
}

strong {
    color: #006CC9;
}

.blanco {
    color: white !important;
}

.azul {
    color: #006CC9 !important;
}

.bold {
    font-weight: bold;
}

.amarillo {
    color: #FFCD00 !important;
}

.rosa {
    color: #E81F76;
}

h2 {
    font-weight: bold !important;
}

h3 {
    font-weight: bold !important;

    font-size: 30px !important;
    color: #FFCD00;
}

.s30 {
    font-size: 30px;
}

.s12 {
    font-size: 12px;
}

body {
    margin: 0;
    overflow-x: hidden;
    font-size: 28px;
    color: #605E63;
    font-weight: 700;
    overflow-x: hidden;
}

/*header {
    background-color: #65B2E8;
    display: block;
    width: 100%;
    position: relative;
    text-align: center;
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/papa.png),  url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/cuadroblanco.png) ;
    background-position:  20% bottom, right top;
    background-repeat: no-repeat;
    background-size: auto 100%, auto 90%;
    min-height: 500px;
}*/
header {
    display: block;
    width: 100%;
    position: relative;
    text-align: center;
    min-height: 500px;
}

header.formulario {
    background-color: #65B2E8;
    display: block;
    width: 100%;
    position: relative;
    text-align: center;
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/cuadroblanco2.png);
    background-position: left top;
    background-repeat: no-repeat;
    background-size: auto 100%;
    min-height: 300px;
}

#triangulo {
    left: 10%;
    top: 50%;
    width: 50px;
}

#primer {
    left: 10px;
    top: 10px;
    width: 300px;
}

#papa {
    height: 75%;
}

.taller1,
.taller2,
.taller3 {
    border-radius: 40px;
    padding: 50px 10px;
    color: white;
    min-height: 300px;
    padding: 150px 30px 30px;
    height: 100%;
}

.taller1.formulario,
.taller2.formulario,
.taller3.formulario {
    padding: 30px;
}

.taller1 p,
.taller2 p,
.taller3 li,
.taller1 li,
.taller2 li,
.taller3 li,
.taller1 td,
.taller2 td,
.taller3 td {
    color: white;
    vertical-align: top;
}

.taller1 {
    background: #E81F76;
}

.taller2 {
    background: #006CC9;
}

.taller3 {
    background: #65B2E8
}

.imagencol {
    top: 0%;
    left: 50%;
    transform: translateX(-50%) translateY(-60%);
    max-width: 250px;
}

.form {
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/trianguloizq.png), url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/trianguloder.png);
    background-position: left bottom, right top;
    background-size: 200px auto;
    background-repeat: no-repeat;
}

.spacer {
    height: 200px;
}

.ideal {
    font-weight: bold;
    font-size: ;
}

.talleres {
    margin-bottom: 100px;
}

.talleresm {
    margin-bottom: 300px;
}

footer {
    border-top: solid thin lightgrey;
}

@media only screen and (min-width: 770px) {
    header {}

    #papa {
        position: absolute;
        right: 0;
        top: 20px;
    }

    .talleres,
    .talleresm {
        margin-bottom: unset !important;
    }

    #triangulo {
        right: 60%;
        left: unset;
        top: 30%;
        bottom: unset;
        width: 200px;
    }
}

.video-responsive {
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25%;
    padding-top: 30px;
    position: relative;
}

.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.lleno {
    color: red;
    font-weight: bold;
    position: absolute;
    left: 50%;
    top: 50%;
    padding: 10px;
    border-radius: 15px;
    transform: rotate(-12deg) translate(-50%, -100%);
    width: 130px;
    text-align: center;
    background: white;
}

h3 {
    position: relative;
    display: block;
}

.fondo1 {
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/fonlt.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left bottom;
}

.fondo2 {
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/fonrt.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right top;
}

.fondo3 {
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/fonbl.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
}

.fondo4 {
    background-image: url(https://papalote.org.mx/eventos/jugar-para-amar/imgs/fonrb.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right bottom;
}