style_portada.css
style_portada.css
— 11.1 KB
File contents
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); @import url('//fonts.googleapis.com/css?family=Roboto'); @import url('//fonts.googleapis.com/css?family=Coda'); /* ============================ */ /* SLIDER PANTALLA COMPLETA */ /* ============================ */ .carousel { position: relative; max-width:100%; margin-bottom: 10px; } .carousel-indicators { bottom: 15px; top: inherit; } .carousel-indicators .active, .carousel-indicators .selected, .carousel-indicators .contentViews .selected:hover, .contentViews .carousel-indicators .selected:hover { background-color: #2196F3; } .fa-arrow-left { font-size:10px; } .fa-arrow-right { font-size:10px; } .carousel-caption { position: absolute; text-align:left; padding: 15px; font-size:2.8em; left: 15px; right: 0; bottom: 0.2em; padding: 15px; background: none; -webkit-border-radius:none; -moz-border-radius:none; border-radius:none; border-top:none; -webkit-box-shadow:none; -moz-box-shadow:none; box-shadow:none; } .carousel-caption h3 { color:#FFF; line-height:1em; background-color: #007BC0; padding: 10px; font-family: 'Coda', sans-serif; } .carousel-caption h4, .carousel-caption p { color: #FFF; line-height:1em; text-shadow: 2px 2px 4px #000000; font-family: 'Coda', sans-serif; } .carousel-destacats { position: relative; line-height: 0.5em; font-size: 0.9em; } @media (max-width: 800px) { .carousel-caption h3 { font-size: 1em; line-height:1em; } .carousel-caption h4, .carousel-caption p { font-size: 0.5em; line-height:1em; } .carousel { max-width:100%; } } @media (max-width: 600px) { .carousel-caption h3 { font-size: 0.70em; line-height:0.9em; } .carousel-caption h4, .carousel-caption p { font-size: 0.5em; line-height:0.8em; } .carousel-indicators { display: none; } } /* Quote Container Box */ .quotebox { max-width: 100%; margin: 1px; margin-bottom: 0; padding: 13px 15px 1px 13px; color: #007BC0; border: 2px solid #007BC0; font-family: 'Roboto', sans-serif; } .quotebox h2 { color:#007BC0; font-size:2.1em; line-height:1.5em; text-align: center; } .quote { float: right; padding-right: 5px; padding-top: 2px; } /* Font-Awesome Icons Styles */ .right-quotation-mark { float: right; } .fa-quote-left { color: #007BC0; } .fa-quote-right { color: #007BC0; } /* ============================ */ /* MENÚ SOCIAL */ /* ============================ */ #social-test { display: table-cell; vertical-align: middle; text-align: center; padding-top: 5px; font-size: 30px; padding-left: 1px; } #social-test h2 { color: #fff; font-family: Futura, "Trebuchet MS", Arial, sans-serif; font-weight: 100; } #social-test li { color: rgb(255, 255, 255); display: inline-block; max-width: 2.1em; width: 3em; height: 27px; line-height: 10px; cursor: pointer; margin-top: 2px; margin-bottom: 8px; vertical-align: middle; text-align: center; font-size: 20px; padding: 3px; background: rgb(255, 255, 255); transition: 0.3s ease; } #social-test li:hover { color: #007BC0;/* border: 1px solid #0073B3;*/ } .social:hover > li { opacity: 0.5; } .social:hover > li:hover { opacity: 1; } #social-test a { color:#007BC0; } @media only screen and (max-width: 1212px){ #social-test li { max-width: 1.6em; } } @media only screen and (max-width: 960px) { #social-test li { max-width: 0.9em; } } @media only screen and (max-width: 783px){ #social-test li { max-width: 0.5em; } } @media only screen and (max-width: 639px) { #social-test li { height: 30px; line-height: 10px; padding: 3px; font-size: 30px; max-width: 1.6em; margin-bottom:15px; } } /*BOTONS PORTADA*/ .btnb-draw { position: relative; display: inline-block; color: #000; border-bottom: 2px solid #007BC0; cursor: pointer; overflow: hidden; transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out; font-size: 1.8em; line-height:1.3em; text-decoration:none; font-family: 'Roboto', sans-serif; font-weight: 500; width:100%; margin-top: 15px; } .btnb-draw:after { content: ''; position: absolute; right: 0; bottom: 0; height: 100%; width: 2px; background: #324577; transform: translateY(100%); transition: transform 0.2s ease-in-out; transition-delay: 0.6s; } .btnb-draw > span { position: relative; display: block; padding: 0.5em; color: inherit; } .btnb-draw > span:before, .btnb-draw > span:after { content: ''; position: absolute; left: 0; top: 0; background: #007BC0; transition: transform 0.2s ease-in-out; } .btnb-draw > span:before { height: 2px; width: 100%; transform: translateX(100%); transition-delay: 0.4s; } .btnb-draw > span:after { height: 100%; width: 2px; transform: translateY(-100%); transition-delay: 0.2s; } .btnb-draw:hover:after, .btnb-draw:hover > span:before, .btnb-draw:hover > span:after { transform: translate(0, 0); text-decoration:none; } .btnb-draw:hover:after { transition-delay: 0s; } .btnb-draw:hover > span:before { transition-delay: 0.2s; } .btnb-draw:hover > span:after { transition-delay: 0.4s; } .btnb-draw:hover { color: #007BC0; transition-delay: 0.6s; } .btnb-draw a { text-decoration:none; } @media only screen and (max-width: 1245px) { .btnb-draw { font-size: 1.7em; line-height:1.2em; } } @media only screen and (max-width: 1056px) { .btnb-draw { font-size: 1.3em; line-height:1.2em; } } @media only screen and (max-width: 844px) { .btnb-draw { font-size: 1.1em; line-height:1.1em; } } @media only screen and (max-width: 727px) { .btnb-draw { font-size: 0.9em; line-height:1em; } } @media only screen and (max-width: 639px) { .btnb-draw { font-size: 1.7em; line-height:1.2em; } } /*BOTONS GENERAL*/ .under { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 5px; padding: 10px; border: 2px solid #f7f7f7; text-align: center; text-transform: uppercase; position: relative; overflow: hidden; -webkit-transition: .3s; transition: .3s; font-family:'Roboto'; font-weight: 600; background-color:#DDF0FA; color:#000; } .under a:hover { text-decoration:none !important; } .under:after { position: absolute; -webkit-transition: .3s; transition: .3s; content: ''; width: 0; left: 50%; bottom: 0; height: 3px; background: #007BC0; } .under:hover { cursor: pointer; } .under:hover:after { width: 100%; left: 0; } .underd { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 5px; padding: 10px; border: 2px solid #f7f7f7; text-align: center; text-transform: uppercase; position: relative; overflow: hidden; -webkit-transition: .3s; transition: .3s; font-family:'Roboto'; color:#FFF; background-color:#007BC0; } .underd:after { position: absolute; -webkit-transition: .3s; transition: .3s; content: ''; width: 0; left: 50%; bottom: 0; height: 3px; background: #004672; } .underd:hover { cursor: pointer; } .underd:hover:after { width: 100%; left: 0; } .underm { padding: 3px; border: 2px solid #007BC0; text-align: center; text-transform: uppercase; position: relative; overflow: hidden; font-family:'Coda'; font-size: 150%; font-weight: 700; background: #FFF; color: #007BC0; display:block; } .underm:hover { background: #007BC0; color:#FFF; } /* ============================ */ /* menú general idiomes */ /* ============================ */ #primary_nav_wrap { margin-top:15px } #primary_nav_wrap ul { list-style:none; position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul a { display:block; color:#333; text-decoration:none; font-weight:700; font-size:1em; line-height:32px; padding:0 15px; font-family:Arial,sans-serif; } #primary_nav_wrap ul li { position:relative; float:left; margin:0; padding:0 } #primary_nav_wrap ul li.current-menu-item { background:#ddd } #primary_nav_wrap ul li:hover { background:#f6f6f6 } #primary_nav_wrap ul ul { display:none; position:absolute; top:100%; left:0; background:#C5C7D3; padding:0 } #primary_nav_wrap ul ul li { float:none; width:100%; } #primary_nav_wrap ul ul a { line-height:120%; padding:10px 15px; } #primary_nav_wrap ul ul ul { top:0; left:100%; } #primary_nav_wrap ul li:hover > ul { display:block; } /*cards*/ #sec { font-family: 'Roboto', sans-serif; background: #fff; text-align: center; word-wrap: break-word; } #sec h2 { font-weight: 200; font-size: 30px; color: #63B7E6; } #sec ul { margin: 0; display: flex; flex-flow: row wrap; justify-content: center; list-style: none; } #sec ul li { padding:30px 5px 30px 0px; width: 100%; transition: box-shadow .3s; } #sec ul a { text-decoration: none; } #sec ul li:hover { box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19); } #sec ul li:hover span { color: #007BC0; } #sec ul li:hover p { color: #555; } #sec ul li:hover h3 { color: #007BC0; } #sec ul li:hover h3:after { width: 25px; } #sec ul li span { font-size: 2.6em; transition: color .3s; color: #007BC0; display:block; } #sec ul li span:hover{ opacity: .5; } #sec ul li span img:hover{ opacity: .5; } #sec ul li span:before, #sec ul li span:after { position: static; } #sec ul li h3 { color: #6f6f6f; display: inline-block; font-size: 1.8em; font-weight: 100; transition: color .3s; line-height:1.2em; } #sec ul li h3:after { content: ''; position: relative; left: 50%; top: 20px; transform: translateX(-50%); display: block; width: 100%; height: 2px; background: #007BC0; transition: width .3s; } #sec ul li p { color: #A2A2A2; text-align: center; text-indent: 1em; font-size: 1.3em; line-height: 1.3em; transition: color .3s; margin: 30px 0 0 0; } /*CONTRA ESTILS GENWEB*/ #portal-breadcrumbs { display:none; } .portlet-esdeveniments ul a { display: block; padding-left:2px !important; font-size: 1.1em !important; } .portlet h2 { border-bottom: 2px solid #007BC0; font-size:1.8em!important; color:#000; font-family:'Roboto', sans-serif; } .portlet h2 a{ color:#000; } .portlet h2 a:hover{ color:#007BC0; text-decoration:none; } .portlet-ampliat h3 { line-height: 1.2em; font-size: 1.2em; font-family:'Coda', sans-serif; } .noticies-full { padding-top:0px !important; } .portlet-esdeveniments ul { font-family:'Coda', sans-serif; } .portlet-ampliat .list-portlet { font-family:'Coda', sans-serif; } img.link_blank, img.link_pdf { display:none !important }