﻿@charset "UTF-8";

*{
    font-family: 'helvetica', 'Arial', sans-serif;
}

html, body{
    width: 100% !important;
    max-width: 100%;
  /*overflow-x: hidden;*/
}

body, .container-fluid{
	overflow-x: hidden !important;
}

div[class*="seccion-"] {
	padding: 160px 0px;
}

p{
	font-size: 25px;
}

h3 {
	font-size: 45px;
	color: #FE782D;
	font-weight: bolder;
}

.pc-hide{
	display: none;
}

div[class*="logo-container"] img.logo{
        width: 100%;
    }

.max-h-90{
	max-height: 90px;
}

/*
****************************** MENÚ **********************************************************************
*/


.navbar {
    background-color: #fff !important;
}

.navbar-brand{
        text-align: center;
    }

.border-bottom{
    border-bottom: 1px solid #c4c4c4;
}

.logo-barnahus-nav {
    width: 70px;
	display: block;
	margin: 0 auto;
}

.logo-pasapas-nav{
    width: 70px;
}

.navbar .idiomas-btns{
	position: absolute;
	color: #c4c4c4;
	right: 20px;
	font-size: 15px;
}

.idiomas-btns a{
	color: #c4c4c4;
	font-weight: bold;

}

.idiomas-btns a:hover{
	color: #942A84;
	text-decoration: none

}

/*
****************************** PORTADA **********************************************************************
*/

.portada .portada-img-pc{
	padding: 0px !important;
	z-index: -100;
	background-image: url(../images/PortadaPc.jpg);
	background-size: cover;
	height: 850px;
}

.portada .portada-img .imagen-portada{
	display: none;
}

.console-container {
	font-family: 'Open Sans', sans-serif;
    font-size: 80px;
    line-height: 116px;
    font-weight: bold;
    position: absolute;
    top: 450px;
    left: 40%;
    transform: translate(-50%, -50%);
    width: 62%;
    height: 600px;
    display: flex;
}

.console-underscore {
	display: inline-block;
	position: relative;
	color: white;
}

.portada .recurso-portada{
    position: absolute;
    top: -130px;
    right: 50px;
    width: 330px;
}

.portada .portada-txt{
	margin-top: 70px;
}

.portada .portada-txt h1{
	font-size: 30px;
	margin-top: 20px;
	font-weight: 100;
	text-align: center;
	color: #942A84;
}

.portada .portada-txt .etiqueta p{
	margin: 0px;
	color: #942A84;
	font-weight: bold;
	font-size: 40px;
}

.portada .portada-txt .etiqueta{
	width: fit-content;
	padding: 5px 10px;
	margin: 0 auto;
}

/*
****************************** PARALLAX 1 **********************************************************************
*/

div.img1 {
	margin-top: 180px;
}

div.parallax-1{
	width: 100%;
	height: 380px;
	background-image: url(../images/imagen2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-attachment: fixed;
	overflow: hidden;
}

p.modelo-b {
	text-align: center;
	font-size: 80px;
	font-weight: bold;
	color: #e5eff5;
	line-height: 80px;
	margin-top: 7%;      
}

/*
****************************** SECCIÓN 1 **********************************************************************
*/

.seccion-1 {
	padding: 173px 0px;
	margin-top: 0px;
	background-color: #E5EFF5;
}

.seccion-1 .img-1-container{
	width: 80%;
	position: relative;
	top: -35px;
	left: 17%;
}

.seccion-1 .img-1-container img.imagen-1{
	width: 120%;
}

.seccion-1 h2{
	font-size: 30px;
	font-weight: bold;
}

.seccion-1 p.cita{
	text-align: right;
	margin-bottom: 5px;
}

.seccion-1 img.recurso-1{
	width: 50px;
	float: right;
	margin-right: 110px;
}

.seccion-1 .p-2 {
	display: inline-block;
	margin-top: 20px;
}

.seccion-1 .rec-1-container {
    width: 30%;
    position: absolute;
    top: 20%;
    left: 90%;
}

.seccion-1 .rec-1-container img.recurso-2{
	width: 100%;
}

 /*
****************************** SECCIÓN 2 **********************************************************************
*/

.seccion-2 {
	margin-top: 40px;
	min-height: 760px;
}

.seccion-2 .img-2-container{
	width: 80%;
    position: relative;
    top: -35px;
    left: 14%;
}

.seccion-2 .img-2-container img.imagen-2{
	width: 100%;
}

.seccion-2 .rec-2-container{
	width: 50%;
    position: absolute;
    top: 550px;
    z-index: 0;
    right: -260px;
	margin: 0px;
}

.seccion-2 .rec-2-container img.recurso-3{
	width: 100%;
}

.seccion-2 .rec-3-container{
	width: 50%;
	margin: 30px 40px 30px 0px;
	float: right;

}

.seccion-2 .rec-3-container img.recurso-4{
	width: 100%;
}

.seccion-2 div.col-12.img-full{
	padding: 0px;
}

/*
****************************** SECCIÓN 3 **********************************************************************
*/

.seccion-3{
	min-height: 860px;
	background-color: #E5EFF5;
}

h3.azul {
    color: #005B9F;
}

.seccion-3 .circulos{
    margin-top: 50px;
    background-image: url(../images/lline-bubbles.png);
    background-position: center;
    background-size: 25.2%; 
    background-repeat: no-repeat;
	background-position: 60%;
}


.seccion-3 div[class*="circulo"]{
	text-align: center;
	color: white;
    position: relative;
}

.seccion-3 div[class*="circulo"] p{
	font-size: 20px;
    line-height: 23px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding: 0px 25px;
}

.seccion-3 div.circulo-1 {
	background-image: url(../images/circle1.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: center;
	height: 22vw;
}

/*.seccion-3 div.circulo-1 p{
	margin-top: 28%;
	padding: 0px 20px;
}*/

.seccion-3 div.circulo-2 {
	background-image: url(../images/circle2.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: center;
	height: 21vw;
	margin-top: 10vw;
}

/*
.seccion-3 div.circulo-2 p{
	margin-top: 30%;
	padding: 0px 10px;
}
*/

.seccion-3 div.circulo-3 {
	background-image: url(../images/circle3.png);
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-origin: content-box;
	background-position: center;
	height: 24vw;
}

/*
.seccion-3 div.circulo-3 p{
	margin-top: 25%;
	padding: 0px 85px;
}
*/

.seccion-3 .parte-2 {
	margin-top: 20px;        
}

img.ninio-1{
	width: 100%;
}

/*
****************************** SECCIÓN 4 **********************************************************************
*/

.seccion-4 {
	min-height: 970px;
	padding-bottom: 0px !important;
}

.seccion4 h3{
	margin-top: 20px;
}

.seccion-4 .SbS-container img.stepBystep-big{
    width: 40%;
    margin-left: 10%;
}

h3.rojo{
    color: #FA222B;    
}

.seccion-4 div[class*="paso-"] {
	margin-top: 80px;
}

.seccion-4 div[class*="paso-"] .h4{
	display: inline-block;
	position: relative;
	top: 20px;
	width: 65%;
}

.seccion-4 div[class*="paso-"] .h4 h4{
	font-weight: bold;
	font-size: 25px;
}

.seccion-4 .h4.right h4{
	text-align: right;
}

.seccion-4 div[class*="paso-"] p{
	margin-top: 15px;
}

.seccion-4 .pasos{
	display: inline-block;
	width: 30%;
}

.seccion-4 .pasos img{
	width: 100%;
}

.seccion-4 .pasos2{
	display: inline-block;
	width: 30%;
}

.seccion-4 .pasos2 img{
	width: 100%;
}

.float-mvl-right{
	float: right;
}

.seccion-4 .imagen-pasos{
	margin: 30px 0px 50px;
}

.seccion-4 .img-3-container{
	width: 65%;
	margin-left: 10%;
}

.seccion-4 .img-3-container img{
	width: 100%;
}

.seccion-4 .rec-3-container{
	width: 50%;
	position: absolute;
	top: 152px;
	right: 50px;
}

.seccion-4 .rec-3-container img{
	width: 100%;
}

.seccion-4 .paso-2{
	margin-top: 250px;
}

.seccion-4 .paso-2 p{
	display: inline-block;
	text-align: right;
}

.seccion-4 .rec-4-container{
	width: 55%;
	position: relative;
	top: 0px;
}

.seccion-4 .rec-4-container img{
	width: 30%;
}

/*
****************************** SECCIÓN V **********************************************************************
*/
.seccion-v{
	background-color: #fff;
}

.seccion-v .video-container{
	min-height: 520px;
}

.seccion-v iframe{
	width: 100%;
	height: 99.7%;
}

.seccion-v video{
	width: 100%;
	height: 74.1%;
}

/*
****************************** SECCIÓN DOCUMENTOS **********************************************************************
*/

.seccion-docs{
	background-color: #E5EFF5;
	margin-bottom: 160px;
}

.divDocs {
    opacity: 0.8;
    background-color: #659DC4;
    color: #fff;
    border-radius: 5px;
    padding: 20px;
    margin-top: 20px;

}

.divDocs:hover {
    opacity: 1;
	color: #fff;
	text-decoration: none;
}

.divDocs i{
	font-size: 28px;
    /*opacity: 0.6;*/
}

    .divDocs span {
        font-size: 28px;
        /*opacity: 0.6;*/
        padding-left:20px;
    }


/*
****************************** SECCIÓN 5 **********************************************************************
*/

.seccion-5{
	background-image: url(../images/fondo_1.png);
	background-color: #fff;
	padding: 390px 0px 100px 0px !important;
	min-height: 380px;
	background-size: cover;
}

.seccion-5 .logo-container-G{
	width: 70%;
	margin: 62px auto;
}

.seccion-5 .logo-container-SJD{
	width: 85%;
	margin: 40px auto;
}

.seccion-5 .logo-container{
    width: 45%;
	margin: 40px auto;
}

.seccion-5 div[class*="logo-container"] img.logo{
	width: 100%;
}

/*
****************************** SECCIÓN 6 **********************************************************************
*/

.seccion-6 {
	background-color: #EDEDED;
	padding: 30px 0px;
	padding-top: 0px !important;
}

/*
****************************** FOOTER **********************************************************************
*/

.footer{
	background-color: #282828;
	min-height: 150px;
	padding: 40px 0px;
}

.footer p, .footer span{
	color: #fff;
	font-size: 16px;
}

    .footer p.f-title {
        font-size: 18px;
        font-weight: bold;
        /*text-decoration: underline;*/
        text-transform: uppercase;
    }

.footer p.legal{
	font-size: 12px;

}

.footer span.links{
	font-size: 12px;
	text-decoration: underline;
    color: #fff;
}

.footer span.links a{
    color: #fff;
}

.footer div.botonera-f {
	padding-top: 30px;
}

.footer a {
    font-size:16px;
    color:#fff;
    text-decoration: none;
}

    .footer a:hover {
        text-decoration:underline;
    }


/*
***********************************************************************************************************
****************************** MEDIA **********************************************************************
***********************************************************************************************************
*/

/*
***********************************************************************************************************
********************************** AJUSTES ********* AJUSTES ********* AJUSTES ***************************
***********************************************************************************************************
*/

@media (max-width: 1650px) {
	
}


/*
***********************************************************************************************************
********************************** TABLET ********* TABLET ********* TABLET *******************************
***********************************************************************************************************
*/



@media (max-width: 1200px) {
	
	p.width-f {
		width: 220%;
	}
    
    [data-aos-delay] {
        transition-delay: 0 !important;
      }
	
	/*
    ****************************** SECCIÓN 1 **********************************************************************
    */
	
	.seccion-1 .img-1-container img.imagen-1 {
		width: 140%;
		margin-top: 30px;
	}
	
	p.width-f {
		width: 220%;
	}
    
    /*
    ****************************** SECCIÓN 3 **********************************************************************
    */
    
    .seccion-3 .circulos {
        background-position: 60% 40%;
        background-size: 30.2%;
    }
    
    .seccion-3 div[class*="circulo"] p{
        font-size: 1.6vw;
        line-height: 2vw;
	}
}

@media (max-width: 992px){
    
    .seccion-3 div.circulo-1{
        height: 43vw;
    }
    
    .seccion-3 div.circulo-2{
        height: 46vw;
        margin-top: 32vw;
    }
    
    .seccion-3 div.circulo-3{
        height: 62vw;
    }
    
    .seccion-3 div[class*="circulo"] p{
		font-size: 2vw;
		line-height: 3vw;
	}
	
	.seccion-3 .circulos {
		background-position: 50% 40%;
		background-size: 41.2%;
	}
}


/*
***********************************************************************************************************
********************************** MOVIL ********* MOVIL ********* MOVIL **********************************
***********************************************************************************************************
*/

@media (max-width: 769px) {
    
	div[class*="seccion-"] {
		padding: 0px 0px;
	}
	
    p{
        font-size: 20px;
    }
    
    h3 {
        font-size: 40px;
        color: #FD211F;
        font-weight: bolder;
    }
    
    .mvl-hide {
        display: none;
    }
	
	.pc-hide{
		display: block;
	}
    
	p.width-f {
		width: 100%;
	}
    /*
    ****************************** MENÚ *******************************************************************
    */
    
    .navbar .bg-light{
        background-color: #fff;
    }
    
    .navbar-brand{
		margin: 0px;
        text-align: center;
    }
    
    .navbar-brand img{
        display: block;
        margin: 0 auto;
    }
	
	.logo-barnahus-nav{ 
    	width: 70px;
	}
	
	.logo-pasapas-nav{
    	width: 70px;
	}
	
	.navbar .idiomas-btns{
		font-size: 15px;
	}
	
    
    /*
    ****************************** PORTADA *******************************************************************
    */
	
	.console-container {
            font-family: 'Open Sans', sans-serif;
            font-size:45px;
			line-height: 43px;
			font-weight: bold;
            position: absolute;
            top: 470px;
            left: 50%;
            transform: translate(-50%, -50%);
		    width: 80%;
        }

	.console-underscore {
		display: inline-block;
		position: relative;
		color: white;
	}
	
	.portada .portada-img-pc{
		background: none;
		height: auto;
	}
    
    .portada {
        padding-top: 20px;
        min-height: 775px;
    }
    
    .portada .portada-img{
        padding: 0px !important;
		z-index: -150;
    }

    
    .portada .imagen-portada {
		display: block !important;
        width: 100%;
    }
    
    .portada .recurso-portada{
        position: absolute;
        top: 390px;
        right: 10px;
        z-index: -10;
		width: auto;
    }
    
    .portada .portada-txt{
        margin-top: 50px;
    }
    
    .portada .portada-txt h1{
        font-size: 22px;
        margin-top: 20px;
		font-weight: 100;
    	text-align: center;
    	color: #942A84;
    }
    
    .portada .portada-txt .etiqueta p{
        margin: 0px;
        color: #942A84;
        font-weight: bold;
		font-size: 40px;
    }
    
    .portada .portada-txt .etiqueta{
        width: fit-content;
        padding: 5px 10px;
		margin: 0 auto;
    }
    
    /*
    ****************************** PARALLAX 1 **********************************************************************
    */
    
    div.img1 {
        margin-top: 40px;
    }
    
    div.parallax-1{
        width: 100%;
        height: 280px;
        background-image: url(../images/imagen2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        background-attachment: fixed;
        overflow: hidden;
    }
    
    p.modelo-b {
        text-align: center;
        font-size: 50px;
        font-weight: bold;
        color: #e5eff5;
        line-height: 50px;
        margin-top: 15%;
        height: 0px;
        /*position: fixed;
        top: 345px;
        left: 0; 
        right: 0; 
        margin-left: auto; 
        margin-right: auto; */      
    }
    
    /*
    ****************************** SECCIÓN 1 **********************************************************************
    */
    
    .seccion-1 {
        padding: 60px 0px !important;
        margin-top: 0px;
        min-height: 400px;
        max-height: 630px;
    }
    
    .seccion-1 .img-1-container{
        width: 80%;
        position: relative;
        top: -35px;
        left: 17%;
    }
    
    .seccion-1 .img-1-container img.imagen-1{
        width: 100%;
    }
    
    .seccion-1 h2{
        font-size: 22px;
        font-weight: bold;
    }
    
    .seccion-1 p.cita{
        text-align: right;
        margin-bottom: 5px;
    }
    
    .seccion-1 img.recurso-1{
        width: 50px;
        float: right;
        margin-right: 110px;
    }
    
    .seccion-1 .p-2 {
        display: inline-block;
        margin-top: 20px;
    }
    
    .seccion-1 .rec-1-container{
        width: 40%;
        float: right;
        position: relative;
        top: 15px;
        
    }
    
    .seccion-1 .rec-1-container img.recurso-2{
        width: 100%;
    }
    
     /*
    ****************************** SECCIÓN 2 **********************************************************************
    */
    
    .seccion-2 {
        margin-top: 40px;
        min-height: 760px;
    }
    
    .seccion-2 .img-2-container{
        width: 100%;
		position: initial;
    }
    
    .seccion-2 .img-2-container img.imagen-2{
        width: 100%;
    }
    
    .seccion-2 .rec-2-container{
        width: 50%;
        float: right;
        position: relative;
        top: -22px;
        z-index: 0; 
		right: 0px;
    }
    
    .seccion-2 .rec-2-container img.recurso-3{
        width: 100%;
    }
    
    .seccion-2 .rec-3-container{
        width: 50%;
        margin: 30px 40px 30px 0px;
        float: right;
        
    }
    
    .seccion-2 .rec-3-container img.recurso-4{
        width: 100%;
    }
	
	.seccion-2 div.col-12.img-full{
		padding: 0px;
	}
    
     /*
    ****************************** SECCIÓN 3 **********************************************************************
    */
    
    .seccion-3{
        min-height: 860px;
		padding: 40px 0px !important;
    }
    
    .seccion-3 div[class*="circulo"]{
        text-align: center;
        color: white;
        position: relative;
    }
	
	.seccion-3 div[class*="circulo"] p{
		font-size: 5vw;
		line-height: 5vw;
        margin: 0;
        position: absolute;
        top: 50%;
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
	}
    
    .seccion-3 .circulos{
        background-position: 37px 80px;
        background-size: 71.2%;
    }
    
    .seccion-3 div.circulo-1 {
        background-image: url(../images/circle1.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-origin: content-box;
        background-position: center;
        height: 41vw;
    }
    
    /*.seccion-3 div.circulo-1 p{
        margin-top: 20%;
        padding: 0px 20px;
    }*/
    
    .seccion-3 div.circulo-2 {
        background-image: url(../images/circle2.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-origin: content-box;
        background-position: center;
        height: 39vw;
        margin-top: 30vw;
    }
    
    /*.seccion-3 div.circulo-2 p{
        margin-top: 35%;
        padding: 0px 10px;
    }*/
    
    .seccion-3 div.circulo-3 {
        background-image: url(../images/circle3.png);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-origin: content-box;
        background-position: center;
        height: 52vh;
    }
    
   /* .seccion-3 div.circulo-3 p{
        margin-top: 14vw;
        padding: 0px 15px;
    }*/
    
    .seccion-3 .parte-2 {
        margin-top: 20px;        
    }
	
	.seccion-3 div[class*="circulo"] p{
		font-size: 3vw;
		line-height: 5vw;
	}
    
    img.ninio-1{
        width: 12vw;
    }
	
    
     /*
    ****************************** SECCIÓN 4 **********************************************************************
    */
    
    .seccion-4 {
        margin-top: 40px;
        min-height: 1250px;
    }
    
    .seccion-4 .SbS-container{
        margin-top: 15px;
    }
    
    .seccion-4 .SbS-container img.stepBystep-big{
        width: 80%;
        margin: 0 auto;
        display: block;
    }
    
    .seccion-4 div[class*="paso-"] {
        margin-top: 30px;
    }
    
    .seccion-4 div[class*="paso-"] .h4{
        display: inline-block;
        position: relative;
        top: 20px;
		width: 65%;
	}
    
    .seccion-4 div[class*="paso-"] .h4 h4{
        font-weight: bold;
        font-size: 25px;
    }
	
	.seccion-4 .h4.right h4{
		text-align: right;
	}
    
    .seccion-4 div[class*="paso-"] p{
        margin-top: 15px;
    }
    
    .seccion-4 .pasos{
        display: inline-block;
        width: 30%;
    }
    
    .seccion-4 .pasos img{
        width: 100%;
    }
    
    .seccion-4 .pasos2{
        display: inline-block;
        width: 30%;
    }
    
    .seccion-4 .pasos2 img{
        width: 100%;
    }
    
    .float-mvl-right{
        float: right;
    }
    
    .seccion-4 .imagen-pasos{
        margin: 30px 0px 50px;
    }
    
    .seccion-4 .img-3-container{
        width: 65%;
        margin-left: 10%;
    }
    
    .seccion-4 .img-3-container img{
        width: 100%;
    }
    
    .seccion-4 .rec-3-container{
        width: 76%;
        position: absolute;
        top: 95px;
        right: 50px;
    }
    
    .seccion-4 .rec-3-container img{
        width: 100%;
    }
    
    .seccion-4 .paso-2 p{
        display: inline-block;
        text-align: left;
    }
    
    .seccion-4 .rec-4-container{
        width: 35%;
		position: relative;
		top: 0px;
		margin-bottom: 20px;
    }
    
    .seccion-4 .rec-4-container img{
        width: 100%;
    }
	
	 /*
    ****************************** SECCIÓN DOCUMENTOS **********************************************************************
    */
	
	.seccion-docs{
	margin-bottom: 0px;
	padding: 40px 0px!important;
}

    
    
    /*
    ****************************** SECCIÓN 5 **********************************************************************
    */
    
    .seccion-5{
        background-image: url(../images/fondo_1.png);
        padding-top: 150px !important;
        min-height: 580px;
		margin-top: 40px;
		background-size: cover;
		padding-bottom: 0px !important;
    }
	
	.seccion-5 .logo-container-G{
        width: 70%;
        margin: 40px auto;
    }
	
	.seccion-5 .logo-container-SJD{
        width: 85%;
        margin: 40px auto;
    }
    
    .seccion-5 .logo-container{
        width: 50%;
        margin: 40px auto;
    }
	
	/*
    ****************************** SECCIÓN 6 **********************************************************************
    */
    
	
	.seccion-6 {
		background-color:;
		padding: 0px;
	}
	
	.seccion-6 .logo-container-EU{
		width: 40%;
		margin: 40px auto;
		
	}
	
	.seccion-6 p{
		margin-bottom: 40px;
	}
	
    
    /*
    ****************************** FOOTER **********************************************************************
    */
   
    .footer{
        background-color: #282828;
        min-height: 150px;
		padding: 40px 0px;
    }
	
	.footer p, .footer span{
		color: #fff;
		font-size: 18px;
	}
    
	.footer p.f-title{
		font-size: 20px;
		font-weight: bold;
		text-decoration: underline;
	}
	
	.footer p.legal{
		font-size: 12px;
		font-style: italic;
		
	}
	
	.footer span.links{
		font-size: 12px;
		text-decoration: underline;
	}
	
	.footer div.botonera-f {
		padding-top: 30px;
		border-top: 1px solid #fff;
	}
    
}

@media (max-width: 400px) {
	.seccion-3 div[class*="circulo"] p {
		font-size: 4vw;
		line-height: 5vw;
	}
}