@charset "utf-8";
html, body { height: 100%; }
body { font-family: 'Roboto', sans-serif; font-weight: 400; text-align: center; color: #959595; font-size: 16px; }
/********** Arreglos Bootstrap, tema propio ********/
/*
Magenta: #e6007e
Blau: #37a9e9
*/
h1,h2,h3,h4,h5,h6{ font-family: 'Roboto Condensed', sans-serif; font-weight: 400; text-transform: uppercase; color: black; }
h1 { font-size: 72px; line-height: 64px; margin: 20px 0; font-weight: 700; }
h2 { font-size: 36px; }
h3 { }
h4 { font-size: 24px; }
h5 { font-size: 18px; line-height: 18px; }
/*h6{ font-size: 18px; line-height: 18px; }*/
a { color: #c0001e; }
a:hover, a:focus { color: #a30019; text-decoration: none}
.btn { text-transform: uppercase; font-family: 'Roboto Condensed', sans-serif; font-size: 18px; font-weight: 700; padding: 20px 80px; border-radius: 0; }
.btn-danger { background-color: #e6007e; }
.btn-ghost { border: 1px solid white; color: white; }
.btn-ghost:hover, .btn-ghost:active, .btn-ghost:focus { background-color: #37a9e9; color: white;}
.btn-primary { background-color: white; border-color: #37a9e9; color: #37a9e9; }
.form-control, .form-group-lg .form-control{ border-radius: 0; color: #222222; }
.form-control::-webkit-input-placeholder,.form-control:-ms-input-placeholder { color: #626262; font-style: italic; }
.form-control:-moz-placeholder,.form-control::-moz-placeholder { color: #626262; opacity: 1; font-style: italic; }
.form-control:focus{ border-color: #0070b8; box-shadow: none; }
.has-error .form-control:focus{ box-shadow: none; }
.checkbox.has-error small{ color: #3a3a3a; }
.blank{ color: #999; }
.white { color: white; }
.fa.icon { padding: 15px; border-radius: 500px; border: solid 3px white; height: 70px; width: 70px;}
.panel { box-shadow: none; }
/********** Arreglos genéricos, mejor no tocar ********/
a:hover i{ text-decoration: none; }
.sinmargin{ margin: 0;}
.nopadding { padding: 0 !important; margin: 0 !important; }
.nopadding.col-sm-offset-6{ margin-left: 50% !important; width: 49%;}
.click_a{ cursor: pointer; }
.relative{ position: relative; }
.text-justify{ text-align: justify; }
.text-center img, .text-center .img{ margin: 0 auto; }
.blank{ padding: 0 20px 20px;} /* Estilo para la página en blanco */
.relative{ position: relative; }
.navbar-toggle .icon-bar { background-color: #37a9e9; }
p img.pull-right{ margin-left: 30px;}
p img.pull-left{ margin-right: 30px;}
.btn i.pull-left{ margin-right: 10px; margin-top: 3px;}
.btn-disabled{ cursor: auto;}
.text-lg{ font-size: 120%; }
strong{ font-weight: 700 }
/* css dels Tinys */
.linkupload { padding: 2px 5px 0px 50px; color: #454545 }
.link-pdf { background:url(../images/ico/ico-pdf-red.png) no-repeat left 2px; }
.link-docx { background:url(../images/ico/ico-word.png) no-repeat left 2px; }
/********** Hasta aquí arreglos genéricos ********/
/* Cover para img sin usar background */
/**************************************/
.wrap-img-cover {
height: 160px;
overflow: hidden;
position: relative;
width: 100%;
}
.wrap-img-cover .img-cover {
height: 100%;
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: all 2s ease 0s;
max-width: none;
width: auto;
}
.wrap-img-cover.active {
opacity: 0.4;
}
.wrap-img-cover:hover .img-cover {
height: 110%;
}
.wrap-img-cover img.portrait {
height: auto;
width: 100%;
}
.wrap-img-cover:hover .img-cover.portrait {
width: 110%;
height: auto;
}
/*per a les galeries cargades per bbcode */
.wrap-img-cover.bbcode {
height: 150px;
margin: 12px 0;
}
/**********hasta aquí cover hack***************/
.wrap-img.equal:after{ position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.4); content: ""; opacity: 0; transition: all 0.4s;}
.wrap-img{ background-position: 50% 50%; background-size: cover; height: 100%; background-repeat: no-repeat; }
p img{ max-width: 100%; }
/* Layout */
#header { background-color: #000 /*#00ECDF #06BDA1 #37a9e9 #e04b4d*/; }
#header .wrap-logo { }
#header .logo { margin-top:15px; max-height:70px; }
#wrap-content-header { background-position: top center; background-repeat: no-repeat; background-color: #eeeeee; position: relative; }
#header .social_media { padding: 20px; }
#header .social_media .fa.icon { font-size: 24px; padding: 9px; border-radius: 500px; border: solid 3px white; height: 50px; width: 50px;}
#wrap-contenido { padding: 30px; }
#social { background-color: #000; padding: 50px 0; color: white; }
.social_media a { color:#fff; }
.social_media a:hover { color:#befff5; }
/* Menú principal */
#wrap-menu-principal.navbar{ min-height: inherit; margin-bottom: 0; border: 0; border-radius: 0; border-top: 1px solid white; }
#menu-principal a { color: #FFF; text-transform: uppercase; transition: all 0.4s; line-height: 20px; padding-top: 10px; padding-bottom: 10px;}
#menu-principal .nav > li > a{ /*color: #FFFFFF*/ }
#menu-principal .nav > li.active > a, #menu-principal .nav > li > a:hover, #menu-principal .nav > li > a:active, #menu-principal .nav > li > a:focus{ color: #0070b8; background-color: #fff; }
#menu-principal .submenu a { color: #37a9e9; }
/* Idiomas */
#idioma { margin-left: 20px; text-align: right; }
#idioma a { color: #333; text-decoration: none; }
/* 201605230 Sergio R - menu idioma quitamos 'a' en paginas sin traduccion, para q los robots no accedan. maquetar el span con los mismos atributos q bootstrap tiene para las a */
#idioma li.disabled span { display: block; padding: 3px 20px; clear: both; font-weight: normal; line-height: 1.42857143; color: #333; white-space: nowrap; }
.caja_idiomas .btn{ padding: 5px 10px; }
.caja_idiomas .btn.btn-link{ color: #FFF; }
/* Home */
#wrap-video {
border-bottom: 5px solid #37a9e9;
}
/*#wrap-video::after {
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
content:'';
background-color: rgba(55, 169, 233, 0.8);
z-index: -1;
}*/
.title-home { color: white; margin-top: 150px; font-family: 'Roboto Condensed', sans-serif; font-size: 30px; font-weight: 700; }
.hero-video {
position: relative;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
#wrap-countdown { background: url('../images/general/bg-countdown.jpg') center center white; background-size: cover; }
.panel-countdown { margin-top: -50px; background-color: white; margin-bottom: 15px; border-bottom: 4px solid #989898; }
#main-content {
padding: 100px 0;
}
#submain { background: url('../images/general/bg-submain.jpg') center left #37a9e9; color: white; }
#submain .submain-text { padding: 20px 0; }
#featured { padding: 30px; }
#featured.modules { color: white; }
.modules h3 { font-size: 18px; font-weight: 700;}
#news .new-title { font-size: 24px; text-transform: none; font-family: 'Roboto', sans-serif; font-weight: 400; margin-top: 0; }
#news .new-title a { color: #37a9e9 }
#news .panel-new { border-left: 3px solid #37a9e9; margin-bottom: 10px; padding-left: 15px; }
#news .media-left { color: #b3b3b3; padding-right: 15px; }
#news .media-left h3 { color: #b3b3b3; }
#news .media-left .fa { border-color: #b3b3b3; }
#news .btn { margin-top: 30px; }
#news { padding-top: 30px; padding-bottom: 30px;}
.row-news { display: flex; -ms-flex-align: center!important; align-items: center!important; }
.carousel-inner .wrap-img-cover-object {
height: 100vh;
min-height: 840px;
}
.carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next, .carousel-control .icon-prev{
font-size: 55px;
}
#logos-patro img { max-height: 68px; max-width: 184px;}
/* INTERIORES */
/* Page */
/* List */
/* Contact */
/* Share */
#share_zone > div{ float:left; margin-left:5px; margin-right: 5px; }
/* WhatsApp Button */
.wa_btn {
background-image: url('../images/ico/whatsapp-button.svg');
border: 1px solid rgba(0, 0, 0, 0.1);
display: inline-block !important;
position: relative;
font-family: Arial, sans-serif;
letter-spacing: .4px;
cursor: pointer;
font-weight: 400;
text-transform: none;
color: #fff;
border-radius: 2px;
background-color: #5cbe4a;
background-repeat: no-repeat;
line-height: 1.2;
text-decoration: none;
text-align: left;
}
.wa_btn_s { font-size: 12px; background-size: 16px; background-position: 5px 2px; padding: 3px 6px 3px 25px;}
.wa_btn_m { font-size: 16px; background-size: 20px; background-position: 4px 2px; padding: 4px 6px 4px 30px;}
.wa_btn_l { font-size: 16px; background-size: 20px; background-position: 5px 5px; padding: 8px 6px 8px 30px;}
.wa_btn:hover {color: #f7ecb5}
/* Footer */
#footer { background-color: #000; padding-top: 30px; position: relative; z-index: 1; color: #FFF; }
#footer strong{ font-weight: bold; font-size: 16px }
#footer a{ color: #fff }
#footer a:hover{ color: #fff; text-decoration: underline; }
/* Social Media */
.social_media {font-size: 36px;border-radius: 10px 10px 0 0;}
#footer .social_media a{ color: #0070b8 ; padding: 0 6px;}
#footer .social_media a:hover{ color: #fff }
/*.social_media a.facebook:hover {color:#3A5795}
.social_media a.twitter:hover {color:#55ACEE}
.social_media a.google:hover {color:#D73D32}
.social_media a.youtube:hover {color:#D73D32}
.social_media a.pinterest:hover {color:#D73D32}
.social_media a.flickr:hover {color:#e5af00}*/
/* Arreglo barra Ajuntament Barcelona */
#brand.v2015 header.navbar{ width: auto; }
/* Actualización de estilos con BS4 para Multimedia */
/* Estilos de BS4 para Multimedia */
.align-items-stretch {
-ms-flex-align: stretch !important;
align-items: stretch !important;
}
.d-flex {
display: -ms-flexbox !important;
display: flex !important;
}
.card {
position: relative;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
min-width: 0;
word-wrap: break-word;
background-color: #fff;
background-clip: border-box;
border: 1px solid rgba(0,0,0,.125);
border-radius: .25rem;
}
.mb-4, .my-4 { margin-bottom: 1.5rem !important; }
.pl-lg-5, .px-lg-5 {
padding-left: 3rem !important;
}
.pr-lg-5, .px-lg-5 {
padding-right: 3rem !important;
}
.pl-md-4, .px-md-4 {
padding-left: 1.5rem !important;
}
.pr-md-4, .px-md-4 {
padding-right: 1.5rem !important;
}
.pb-4, .py-4 {
padding-bottom: 1.5rem !important;
}
.pt-4, .py-4 {
padding-top: 1.5rem !important;
}
.pl-2, .px-2 {
padding-left: .5rem !important;
}
.pr-2, .px-2 {
padding-right: .5rem !important;
}
.text-white {
color: #fff !important;
}
.w-100 { width: 100% !important; }
.border-0 { border: 0 !important; }
.bg-cover::after {
content: " ";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(84, 132, 195, .65);
}
.multimedia .card .wrap-img-cover-object {
height: 250px;
}
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter: gray;
-webkit-filter: grayscale(100%);
}
.grayscale {
-moz-filter: url("data:image/svg+xml;utf8,#grayscale");
-o-filter: url("data:image/svg+xml;utf8,#grayscale");
-webkit-filter: grayscale(100%);
filter: gray;
filter: url("data:image/svg+xml;utf8,#grayscale");
}
.card:hover img.grayscale { filter: none; }
.wrap-img-cover-object {
position: relative;
width: 100%;
height: 150px;
}
.wrap-img-cover-object img {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover; object-position: 50% 50%;';
object-position: 50% 50%;
transition: all 0.5s;
}
.align-items-center {
-ms-flex-align: center !important;
align-items: center !important;
}
.card-img-overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 1.25rem;
}
#modal-video .close { position:absolute; right:-30px; top:0; z-index:999; font-size:2rem; font-weight: normal; color:#fff; opacity:1; }
#modal-video .modal-body { position:relative; padding:0px; }
#footer .firma { background: #000000; margin-top: 40px; padding: 7px; border-top: 1px solid #000; box-shadow: 0px 5px 20px rgba(0,0,0,0.5) inset; }
#footer .firma a.ico-ladeus {opacity: 0.4; background: url("http://www.ladeus.com/imatges/ico-color-bn-ladeus.png") no-repeat; background-position: left top; font-style: normal; font-weight: normal; color: #ccc; display: block; font-size: 11px; height: 18px; line-height: 3px; padding: 7px 0 5px 24px; transition: all 0.15s; }
#footer .firma a.ico-ladeus:hover {opacity:1; background-position: left bottom; color: #999; text-decoration: none; }
/* Cookies */
#cookiesdirective{position: fixed; left: 0; right: 0; background: #323232; opacity: 0.9; color: #FFFFFF; font-size: 13px; text-align: center; z-index: 1000; padding:10px;}
#cookiesdirective a{ color: #f6a21d; font-weight:bold;}
#cookiesdirective a.btn:hover {color: #FFF; text-decoration: none;}
/* desplegar sense clic els menus*/
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.img-background { background-size: cover; min-height: 200px;margin-bottom: 20px; }
.main-text { position: absolute; left: 0;right: 0;margin-left: auto;margin-right: auto; }
/* desplegar sense clic els menus*/
/* Large desktop */
@media (min-width: 768px) {
.carousel-indicators{ bottom: 40px; }
}
@media (max-width: 1200px) {
/*#wrap-menu-principal .navbar-brand img{ max-width: 30px;}*/
#wrap-menu-full .navbar-header {
float: none;
}
#wrap-menu-full .navbar-toggle {
display: block;
background-color: #fdf6ee;
float: left;
}
#wrap-menu-full .navbar-inverse .navbar-toggle .icon-bar {
background: #c10d24;
}
#wrap-menu-full .navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
#wrap-menu-full .navbar-collapse.collapse {
display: none!important;
}
#wrap-menu-full .navbar-collapse.collapse.in {
display: block!important;
min-height: 530px;
}
#wrap-menu-full .navbar-nav {
float: none!important;
margin: 7.5px -15px;
}
#wrap-menu-full .nav>li {
float: none;
display: block;
width: 100%;
}
#menu-principal .nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
#wrap-menu-principal #slidingMenu.navbar-nav {
position: relative;
text-align: right;
margin: auto;
}
}
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) {
#wrap-video { min-height: 0; }
}
/* Landscape phone to portrait tablet */
@media (max-width: 767px) {
#header .logo { margin: 15px auto; }
h1 { font-size: 36px; line-height: 38px;}
.title-home { margin-top: 30px; }
#wrap-video { min-height: 0; }
.panel-countdown { margin-top: auto; }
.btn { padding: 10px 30px; }
/* .affix {
position: static;
width: auto;
top: 0;
}*/
.row-news { display: block; }
}
/* Landscape phones and down */
@media (max-width: 480px) {
.carousel-inner .wrap-img-cover-object { min-height: 300px; height: 40vh }
}