style_interior.css
style_interior.css
— 7.5 KB
Continguts del fitxer
img { height: auto; max-width: 100%; } a { color: #29B6F6; text-decoration: none; } a:hover { text-decoration: underline; } .site__wrapper { width:100%; margin-left: auto; margin-right: auto; padding-top: 1.5em; padding-bottom: 1.5em; } .site__info { clear: both; position: absolute; bottom: -10%; padding: 3em; display: block; font-variant: small-caps; letter-spacing: 2px; left: 50%; transform: translate(-50%, -50%); } .grid { float: none; width: 100%; padding-left: 0.2em; padding-right: 0.2em; padding-bottom: 0.4em; } .card__image { height: 280px; } @media screen and (min-width: 40.063em) { .grid { float: left; width: 50%; } } .card__image { /* -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;*/ display: block; height: 210px; overflow: hidden; position: relative; } .card__image > img { display: block; margin-bottom: 0; width: 100%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -ms-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .card__image:hover > img { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2); } .card__title { color: white; display: inline-block; font-family: "Montserrat", Arial, Helvetica, sans-serif; font-size: 2em; font-weight: 700; line-height: 1.2; margin-bottom: 0.75em; text-decoration: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .card__title:hover { color: rgba(255, 255, 255, 0.7); text-decoration: none; } .card__overlay { content: ""; bottom: 0; display: block; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: 1; } .card__overlay--doct { background-image: linear-gradient(to bottom, rgba(194, 66, 146, 0.1), rgba(194, 66, 146, 0.5)); /*background-color:#D91F87; */ z-index: 2; } .card__overlay--indus { /*background-color:#0073B3;*/ background-image: linear-gradient(to bottom, rgba(0, 115, 179, 0.1), rgba(0, 115, 179, 0.6)); z-index: 2; } .card__overlay--aero { /*background-color:#0082C5;*/ background-image: linear-gradient(to bottom, rgba(0, 130, 197, 0.1), rgba(0, 130, 197, 0.6)); z-index: 2; } .card__overlay--telec { /*background-color:#00A7D2;*/ background-image: linear-gradient(to bottom, rgba(0, 167, 210, 0.1), rgba(0, 167, 210, 0.6)); z-index: 2; } .card__overlay-content { position: absolute; bottom: 0; padding: 1.5em; z-index: 3; } .card__meta { margin: 0; margin-right: -1em; margin-bottom: 0.75em; } .card__meta.card__meta--last { margin-bottom: 0; } .card__meta li { color: #f8f8f8; display: inline; list-style-type: none; margin-bottom: 0; padding-right: 1em; font-size: 1.3em; font-variant: small-caps; letter-spacing: 1px; } .card__meta li:not(:last-child):after { content: "\25cf"; font-style: normal; position: relative; color: rgba(255, 255, 255, 0.25); right: -0.6em; } .card__meta li > a { color: #f8f8f8; } .card { 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:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); } /*BOTONS*/ .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; }