#diadelpadre{background: #4c184c url(../img/bg.jpg) no-repeat center top; background-size: cover; font-family: "futura-pt",sans-serif; color: #fff;}

.barra{background: url(../img/barra-colores.jpg) no-repeat left center; background-size: cover; height: 20px;}
#barratop{ margin-top: -30px;}
#r{position: absolute; left: 40px; top: 120px;}
#logo-top{margin: 20px 0;}


.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; border: 1px solid #fff;} 
.embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

#btn-descubre{margin: 20px 0 80px; font-size: 24px;}
#btn-descubre span{font-weight: bold; font-style: normal;}
#btn-descubre2{display: none;}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle{
	color: #fff; font-style: italic; font-size: 20px; border-radius: 20px; border: none;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ed145b+0,bf104a+100 */
background: #ed145b; /* Old browsers */
background: -moz-linear-gradient(top, #ed145b 0%, #bf104a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #ed145b 0%,#bf104a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #ed145b 0%,#bf104a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed145b', endColorstr='#bf104a',GradientType=0 ); /* IE6-9 */}

.btn-outline-primary {
    color: #fff;
    background-color: transparent;
    background-image: none;
    border-color: #fff;
    border-radius: 20px;
    font-style: italic; font-size: 20px;
}

.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled).active, .btn-outline-primary:not(:disabled):not(.disabled):active, .show>.btn-outline-primary.dropdown-toggle {
    color: #fff;
    background-color: #ee2c39;
    border-color: #fff;
}

#logo-mid{margin-bottom: 20px;}
#btn-comenzar{text-transform: uppercase;}
#intruduccion{margin-bottom: 80px;}
#intruduccion h2{font-weight: bold; }
#intruduccion p{ font-size: 18px; font-style: italic;}
.tit{margin-bottom: 10px;}


#preguntas{height: 400px; margin-bottom: 20px;}
#cajapreguntas{height: 100%; background: #e22b52 url(../img/iconos.png) no-repeat 10px 10px; background-size: 60px;}
#cajapreguntas>.row{height: 100%}
.pregunta{width: 100%;}

.pregunta-titulo{margin-bottom: 40px;}

#pregunta1 p{text-align: center;}
#pregunta1 a{ text-align: center; margin: 0 auto; display: block; }

.corazon{width: 35px; height: 35px; background: url(../img/corazon-off.png) center center no-repeat; background-size: contain; display: block; transition: ease-in-out all 0.2s; margin: 0 auto;}
.corazon.on,
.corazon:hover{background: url(../img/corazon-on.png?v=2) center center no-repeat;background-size: contain;}


#preguntas h2{font-weight: bold;}
#preguntas h3{font-weight: 300; font-style: italic; font-size: 24px; padding: 0 50px;}

.boton{width: 268px; height: 64px; background: url(../img/boton-off.png) center center no-repeat; background-size: contain; display: inline-block; text-align: center; color: #fff; transition: ease-in-out all 0.2s;}
.boton span{position: absolute;    width: 100%; left: 0; top: 15%; font-weight: bold; font-size: 19px; }
.boton.on,
.boton:hover{background: url(../img/boton-on.png?v=2.1) center center no-repeat;background-size: contain; color: #fff;}

.flecha{transition: ease-in-out all 0.2s;}
.flecha:hover{opacity: 0.6;}

#respuestabox{ position: relative; margin-bottom: 20px;}
/* .respuesta{position: absolute; top: 30px; width: 80%; left: 10%;} */
#btn-respuestas{margin-bottom: 30px;}
#barrabottom{margin-top: 40px; margin-bottom: -40px;}
.respuesta h1{font-weight: bold;}
.respuesta p{font-size: 22px; padding: 0 80px;}

#cajacarousel{padding: 0;}
.carousel{display: block;}
.carousel h6{text-align: left; font-size: 28px; font-weight: 100; font-style: italic;margin-left: -30px; margin-bottom: 20px;}
.carousel h5{}
.carousel p{font-size: 24px; line-height: 120%;}

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    bottom: initial;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.icono{width: 40px; margin-top: 10px; margin-bottom: 30px;}
.btn-compartir{text-align: right;}
.comparticion{text-align: right;}

@media (max-width: 767px) {
	.barra {
	    height: 10px;
	}
	#r {
	    position: absolute;
	    left: 20px;
	    top: 40px;
	    width: 50px;
	}
	#btn-descubre{display: none;}
	#btn-descubre2{ display: block; margin: 20px 0 80px; font-size: 16px; border-radius: 30px; }
	#martin{margin-bottom: 30px;}
	#intruduccion p{text-align: center;}
	#btn-comenzar {font-size: 12px;}
	#btn-compartir{margin-bottom: 10px;}
	#pregunta1 p{font-size: 24px; text-align: left; font-weight: bold; font-style: italic;}
	#pregunta1 a{float: right;}
	#preguntas h2 { font-size: 20px; }
	#preguntas h3 { font-size: 18px; padding: 0;}
	.boton {width: 200px; height: 54px;}
	.respuesta h1{font-size: 20px; padding: 0 25px;}
	.respuesta p{line-height: 120%; font-size: 16px; padding: 0; }
	.btn-outline-primary{font-size: 12px;}
	#cajapreguntas{background-size: 40px;}
	.pregunta-titulo {  margin-bottom: 10px; }
	#intruduccion{margin-bottom: 40px;}
	.pregunta {padding-right: 15px; padding-left: 15px;}
	.carousel p {
	    font-size: 16px;
	    line-height: 130%;
	}
	.carousel h6{text-align: center; font-size: 18px; margin-left: 0;}
	.comparticion{text-align: center;}
	.no-mobile{display: none !important;}
}