styles-portada.css
styles-portada.css
— 16 KB
Continguts del fitxer
@import url('//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'); /*INICI botons portada*/ .slide-button { display: inline-block; height: 30px; width: 100%; color: #0082C5; border: 2px solid #0082C5; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .first, .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; color: #FFF; } .first { background-color: #0082C5; color: #fff; } .slide-button:hover .first { margin-top: -30px; z-index: 1300; } .slide-button2 { display: inline-block; height: 30px; width: 100%; color: #00A7D2; border: 2px solid #00A7D2; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button2 .first, .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; } .slide-button2 .first { background-color: #00A7D2; color: #fff; z-index: 1300; } .slide-button2:hover .first { margin-top: -30px; } .slide-button3 { display: inline-block; height: 30px; width: 100%; color: #7BC7DF; border: 2px solid #7BC7DF; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button3 .first, .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; } .slide-button3 .first { background-color: #7BC7DF; color: #fff; } .slide-button3:hover .first { margin-top: -30px; z-index: 1300; } .slide-button4 { display: inline-block; height: 30px; width: 100%; color: #C7017D; border: 2px solid #C7017D; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button4 .first, .slide-button4 .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; color: #C7017D; } .slide-button4 .first { background-color: #C7017D; color: #fff; } .slide-button4:hover .first { margin-top: -30px; z-index: 1300; } .slide-button5 { display: inline-block; height: 30px; width: 100%; color: #D91F87; border: 2px solid #D91F87; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button5 .first, .slide-button5 .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; color: #D91F87; } .slide-button5 .first { background-color: #D91F87; color: #fff; } .slide-button5:hover .first { margin-top: -30px; z-index: 1300; } .slide-button6 { display: inline-block; height: 30px; width: 100%; color: #C24292; border: 2px solid #C24292; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button6 .first, .slide-button6 .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; color: #C24292; } .slide-button6 .first { background-color: #C24292; color: #fff; } .slide-button6:hover .first { margin-top: -30px; z-index: 1300; } .slide-button7 { display: inline-block; height: 30px; width: 100%; color: #DF97C0; border: 2px solid #DF97C0; text-decoration: none; overflow: hidden; font-size: 1.4em; text-align: center; z-index: 1300; position: relative; } .slide-button7 .first, .slide-button7 .second { padding: 0 10px; line-height: 30px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 1300; color: #DF97C0; } .slide-button7 .first { background-color: #DF97C0; color: #fff; } .slide-button7:hover .first { margin-top: -30px; z-index: 1300; } /*FINAL botons PORTADA*/ /* INICI DESTACAT SLIDER PORTADA*/ .destacat_slider { margin-top:-10px; margin-left:30px; z-index: 1400; display: block; float: left; position: absolute; } /* FI DESTACAT SLIDER PORTADA*/ /*INICI MENÚ PORTADA*/ /* ============================ */ /* menu2 */ /* ============================ */ .menu2, .menu2 > li > ul, .menu2 > li > ul > li { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; list-style: none; margin: 0; padding: 5px; z-index: 1500; } .menu2 { text-align: left; height: 28px; border-bottom: 2px solid #2196F3; background-color: #7BC7DF; z-index: 1500; } .menu2 > li { display: block; float: left; position: relative;/* Top-level links */ /* Submenu2 */ /* when hovering top-level, show submenu2 */ } .menu2 > li > a { display: block; height: 28px; line-height: 28px; padding: 5px 15px; text-decoration: none; text-transform: uppercase; color: #FFF; font-size: 1.5em; } .menu2 > li > ul { position: absolute; top: 26px; left: 5px; -webkit-columns: 2 2px; -moz-columns: 2 2px; columns: 2 2px; border: 2px solid #2196F3; border-top: none; background-color: white; width: 500px; padding: 10px 15px 25px; display: none;/* Submenu2 links */ } .menu2 > li > ul > li { display: block; } .menu2 > li > ul > li > a { padding: 2px; text-decoration: none; color: #666666; display: block; position: relative; } .menu2 > li > ul > li > a > i { position: absolute; -webkit-transition: all 0.1s ease-in-out; -moz-transition: all 0.1s ease-in-out; transition: all 0.1s ease-in-out; color: #2196F3; font-size: 3em; width: 70px; text-align: center; } .menu2 > li > ul > li > a > span { display: block; margin-left: 10px; } .menu2 > li > ul > li > a > span.title { /*font-weight: bold;*/ } .menu2 > li > ul > li > a > span.descr { font-size: 0.8em; color: #b3b3b3; } .menu2 > li > ul > li > a:hover > i { -webkit-transform: translateX(-3px) translateZ(0px); -moz-transform: translateX(-3px) translateZ(0px); -ms-transform: translateX(-3px) translateZ(0px); -o-transform: translateX(-3px) translateZ(0px); transform: translateX(-3px) translateZ(0px); color: #1791f2; } .menu2 > li > ul > li > a:hover > span.title { color: #2196F3; } .menu2 > li > ul > li > a:hover > span.descr { color: #8c8c8c; } .menu2 > li:hover > a { color: #2196F3; } .menu2 > li:hover > ul { display: block; } /* ============================ */ /* RESPONSIVESS */ /* ============================ */ @media (max-width: 900px) { .menu2 > li > ul { -webkit-columns: 1; -moz-columns: 1; columns: 1; width: 270px; z-index: 1500; } } @media (max-width: 600px) { .menu2 { height: auto; padding-top: 50px; position: relative; cursor: pointer; color: #FFF; z-index: 1500; } .menu2:before { position: absolute; top: 0px; right: 0px; font-family: Verdana, Geneva, sans-serif; font-weight: normal; font-style: normal; display: block; text-decoration: none; font-size: 1.5em; padding: 12px; content: "Perfils"; } .menu2 > li { display: block; float: none; display: none; border-bottom: 1px solid #eee; } .menu2 > li > ul { position: static; width: 100%; padding: 10px 0px 10px; border: 0; } .menu2 > li > ul > li { padding-bottom: 20px; } .menu2:hover > li { display: block; } } /* ============================ */ /* MENÚ SOCIAL */ /* ============================ */ .socialbtns, .socialbtns ul, .socialbtns li { margin: 0; padding: 1px; z-index: 1300; } .socialbtns li { list-style: none outside none; display: inline-block; } .socialbtns .fa { width: 40px; height: 28px; color: #FFF; background-color: #2196F3; padding-top: 12px; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -o-transition: all ease 0.5s; } .socialbtns .fa:hover { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; -o-border-radius: 20px; transition: all ease 0.5s; -moz-transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -o-transition: all ease 0.5s; } .fa-lg { font-size: 1.8em; } /* ============================ */ /* SLIDER PANTALLA COMPLETA */ /* ============================ */ @keyframes carousely { 0% { left: 0%; } 20% { left: 0%; } 25% { left: -100%; } 45% { left: -100%; } 50% { left: -100%; } 55% { left: -200%; } 75% { left: -200%; } 80% { left: -200%; } 85% { left: -300%; } 100% { left: -300%; } } .slider { max-width:977px; position: absolute; display: inline-block; overflow: hidden; } .slider .carousel { position: relative; width: 500%; /* Don't touch this */ margin: 0; top:inherit; left: 0; animation: 30s carousely infinite; } .carousel .slide { width: 20%; /* Don't touch this */ float: left; height: 552px; /* Change this if you want a bigger slideshow */ display: flex; justify-content: center; align-items: center; } .slide h2{ position: relative; font-size: 3.125rem; /* 50px */ color: #fff; display: inline-block; } .fig1{ background: url(img/imatge_slider1.jpg); background-size: cover; background-position: center center; } .fig2{ background: url(img/imatge_slider2.jpg); background-size: cover; background-position: center center; } .fig3{ background: url(img/imatge_slider3.jpg); background-size: cover; background-position: center center; } .fig4{ background: url(img/imatge_slider4.jpg); background-size: cover; background-position: center center; } @media (max-width: 780px) { .slide h2{ font-size: 2rem; } } @media (max-width: 640px) { .slide h2{ z-index:-150; } } /* ============================ */ /* CAPSES */ /* ============================ */ .card { background: #fff; border-radius: 2px; display: inline-block; margin: 0.1rem; position: relative; width: 100%; } .card_lema a { color:#FFF; } .card_lema a:hover { color:#FFF; text-decoration:none; } .card_ind a { color:#FFF; } .card_ind a:hover { color:#FFF; text-decoration:none; } .card_aero a { color:#FFF; } .card_aero a:hover { color:#FFF; text-decoration:none; } .card_tele a { color:#FFF; } .card_tele a:hover { color:#FFF; text-decoration:none; } .card_masters a { color:#FFF; } .card_masters a:hover { color:#FFF; text-decoration:none; } .card_video { background: #fff; border-radius: 2px; display: inline-block; height: 315px; margin: 0.1rem; position: relative; width: 100%; z-index: 1300; } .card_noticies { background: #fff; border-radius: 2px; display: inline-block; height: 315px; margin: 0.1rem; position: relative; width: 100%; z-index: 1300; } .card_imatge { background: #0073B3; border-radius: 2px; display: inline-block; height: 315px; margin: 0.1rem; position: relative; width: 100%; z-index: 1300; } .card_lema{ background: #0073B3; z-index: 1300; position: relative; height:315px; text-decoration:none; } .card_lema h2 { padding:20px; color:#FFF; font-stretch:expanded; line-height: 1.5em; font-size:2em; margin:2px 2px 2px 2px; text-align:center; text-decoration:none; } .card-1 { box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); transition: all 0.3s cubic-bezier(.25,.8,.25,1); } .card-1:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } .card_ind { background: #0073B3; z-index: 1300; position: relative; } .card_ind h2 { padding:20px 15px 5px 15px; color:#FFF; font-stretch:expanded; line-height: 1.5em; font-size:1.6em; margin:2px 2px 2px 2px; text-align:center; height: 92px; } .card_aero { background: #0082C5; z-index: 1300; position: relative; } .card_aero h2 { padding:20px 5px 5px 5px; color:#FFF; font-stretch:expanded; /*line-height: 1.5em;*/ font-size:1.6em; margin:2px 2px 2px 2px; text-align:center; height: 92px; } .card_tele { background: #00A7D2; z-index: 1300; position: relative; } .card_tele h2 { padding:20px 5px 5px 5px; color:#FFF; font-stretch:expanded; line-height: 1.5em; font-size:1.6em; margin:2px 2px 2px 2px; text-align:center; height: 92px; } .card_masters { background: #7BC7DF; z-index: 1300; position: relative; } .card_masters h2 { padding:25px 15px 0px 15px; color:#FFF; font-stretch:expanded; line-height: 1.5em; font-size:1.6em; margin:2px 2px 2px 2px; text-align:center; height: 92px; } @media (max-width: 1200px) { .card_lema h2 { line-height: 1.2em; font-size:1.7em; } } @media (max-width: 980px) { .card_ind h2, .card_aero h2, .card_tele h2, .card_masters h2 { font-size:1.1em; line-height: 1.5em; padding:30px 5px 10px 5px; height: 90px; } } @media (max-width: 885px) { .card_lema h2 { line-height: 1.1em; font-size:1.4em; } } @media (max-width: 785px) { .card_ind h2, .card_aero h2, .card_tele h2, .card_masters h2 { font-size:1.1em; line-height: 1.3em; padding:15px 5px 10px 5px; height: 75px; } .card_lema h2 { line-height: 1.1em; font-size:1.3em; margin:1px 1px 1px 1px; } } @media (max-width: 639px) { .card_ind h2,.card_tele h2, .card_aero h2, .card_masters h2 { font-size:1.5em; padding-top:20px; height: 40px; } .card_lema h2 { line-height: 1em; font-size:1em; } } @media (max-width: 415px) { .card_ind h2,.card_tele h2, .card_aero h2, .card_masters h2 { font-size:1em; padding-top:25px; } .card_lema h2 { line-height: 1em; font-size:2em; } } /* ============================ */ /* Banner llarg */ /* ============================ */ .banner h1 { font-size: 3em; font-family: 'Merriweather Sans', sans-serif; color: #FFFFFF; } .banner { position: relative; background-color: #C24292; width: 100%; height: 70px; margin-top: 1px; } .banner .text { position: absolute; margin-top: 20px; margin-left: 40px; } .diamond { position: absolute; background-color: rgba(0,0,0,.1); width: 60%; height: 70px; right: 0; -moz-transition: width 2s; -o-transition: width 2s; -webkit-transition: width 2s; transition: width 2s; } .diamond:before { content: ""; position: absolute; } .diamond div:before { content: ""; position: absolute; } .banner:hover .diamond { width: 25%; } @media (max-width: 975px) { .banner h1{ font-size: 1.8em; } } @media (max-width: 640px) { .banner h1{ font-size: 1.5em; } .banner { height: 50px; } .diamond { height: 50px; } .banner .text { margin-top: 15px; } } /* ============================ */ /* span mobile */ /* ============================ */ @media (max-width: 640px) { .slide-button4,.slide-button5, .slide-button6, .slide-button7 { width: 70%; } .slide-button,.slide-button2, .slide-button3 { width: 70%; } } /* ============================ */ /* form */ /* ============================ */ #portal-breadcrumbs { display:none; } .portlet-esdeveniments ul a { display: block; padding-left:2px !important; } @import "compass/css3"; .flex-container { padding: 0; margin: 0; list-style: none; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .flex-item { align-items: baseline; background: #007bc0; padding: 5px; width: 200px; height: 150px; margin-top: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 2em; text-align: center; }