@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }
/**
* Custom Elements
*/
/**
* WRAPPER
*/
.background-wrapper {
zoom: 1;
position: relative;
clear: both;
background: 50% 50% no-repeat;
background-size: cover;
overflow: hidden;
&:before {
content: "";
display: table;
}
&:after {
content: "";
display: table;
clear: both;
}
&.-alt-color,
&.-alt-color2 {
color: $color-text-invert;
h1,h2,h3,h4,h5,h6 {
color: $color-headline-invert;
}
}
&.-alt-color {
background-color: $color-bg-secondary;
a {
color: $color-bg-tertiary;
&:hover {
color: mix($color-bg-tertiary,#fff,70%);
}
}
.ce_text {
a[target="_blank"]:not(.button):not(.-ico-dl) {
&:before {
background: $color-bg-tertiary;
}
&:hover {
&:before {
background: mix($color-bg-tertiary, #fff, 80%);
}
}
}
}
}
&.-alt-color2 {
background-color: $color-bg-tertiary;
}
&.-alt-color3 {
background-color: $color-bg-lightgrey;
}
&.-small > .background-wrapper-helper > .background-wrapper-inner {
min-height: 250px;
}
@media screen and (max-width: 599px) {
&.-small > .background-wrapper-helper > .background-wrapper-inner {
min-height: 150px;
}
}
&.-medium > .background-wrapper-helper > .background-wrapper-inner {
min-height: 450px;
}
@media screen and (max-width: 599px) {
&.-medium > .background-wrapper-helper > .background-wrapper-inner {
min-height: 300px;
}
}
&.-large > .background-wrapper-helper > .background-wrapper-inner {
min-height: 750px;
}
@media screen and (max-width: 599px) {
&.-large > .background-wrapper-helper > .background-wrapper-inner {
min-height: 450px;
}
}
&.-background-mousemove,
&.-background-mousemove-inverted,
&.-background-parallax {
overflow: hidden;
}
&.-full-vh > .background-wrapper-helper {
min-height: 100vh;
display: flex;
flex-direction: column;
//justify-content: center;
> .background-wrapper-inner {
flex: 0 0 auto;
width: 100%;
}
.-va-top& {
justify-content: flex-start;
}
.-va-middle& {
justify-content: center;
}
.-va-bottom& {
justify-content: flex-end;
}
/*min-height: 100vh;
display: flex;
align-items: stretch;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
> .background-wrapper-inner {
width: 100%;
//height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
> * {
flex: 1 0 auto;
}
.client-showcase & {
> *:last-child {
flex: 0 0 auto;
}
}
}*/
}
&.-full-vh-header > .background-wrapper-helper {
height: 90vh;
//height: calc(100vh - #{$header-height});
//height: 100%;
display: table;
table-layout: fixed;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
> .background-wrapper-inner {
width: 100%;
height: 100%;
display: table-cell;
}
}
/*&.-valign-center {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
> .background-wrapper-helper {
display: flex;
align-items: center;
height: 100%;
width: 100%;
> .background-wrapper-inner {
flex: 0 0 auto;
width: 100%;
}
}
}*/
&.-shadow {
-webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
-moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
}
&.-invert {
color: $color-text-invert;
h1, h2, h3, h4, h5, h6 {
color: $color-text-invert;
}
}
&.-text-shadow {
text-shadow: 0 0 5px #fff;
&.-invert {
text-shadow: 0 0 5px #000;
}
}
&.-bg-restraint,
.background-wrapper-helper {
@include centered-1200;
/*padding-left: $gutter-default/2;
padding-right: $gutter-default/2;*/
}
&.-width-expand > .background-wrapper-helper {
max-width: none;
/*padding-left: 15px;
padding-right: 15px;*/
.background-wrapper-inner {
> .rs-columns {
margin-top: -30px;
> .rs-column {
margin-top: 30px;
}
}
}
}
}
.background-wrapper-background {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
background: 50% 50% no-repeat;
background-size: cover;
video {
/* Change this to `object-fit: cover;` once all browsers support it, */
/* see http://stackoverflow.com/a/20851590 */
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.-background-mousemove > &, .-background-mousemove-inverted > & {
right: -12%;
}
}
.background-wrapper-inner {
position: relative;
/*& {
@include centered-1200;
}*/
&.-padding {
padding: $gutter-default*1.5 0;
}
&.-medium-padding {
padding: 50px 0;
}
&.-large-padding {
padding: 100px 0;
}
&.-padding-top {
padding: $gutter-default*1.5 0 0;
}
&.-medium-padding-top {
padding: 50px 0 0;
}
&.-large-padding-top {
padding: 100px 0 0;
}
&.-padding-bottom {
padding: 0 0 $gutter-default*1.5;
}
&.-medium-padding-bottom {
padding: 0 0 50px;
}
&.-large-padding-bottom {
padding: 0 0 100px;
}
}
/**
* Reference cards
*/
.ref-cards {
.rs-columns {
align-items: stretch;
justify-content: space-between;
margin: 0;
}
.rs-column {
margin: 0;
@include column-classes(0, 6, large);
@include for-tablet {
@include column-classes(0, 6, medium);
}
@include for-mobile {
@include column-classes(0, 6, small);
}
}
.ref-card {
display: flex;
flex-direction: row;
align-items: stretch;
min-height: 115px;
position: relative;
@include aspect-ratio(1,1,true);
&:nth-child(even) {
.ref-card-helper {
background-color: $color-bg-tertiary;
}
}
.image-wrapper {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
z-index: 1;
}
.ref-card-helper {
position: relative;
flex: 1 1 0;
display: flex;
flex-direction: row;
background-color: $color-bg-secondary;
@include transition(all 1.5s cubic-bezier(0.19, 1, 0.22, 1));
}
.ref-card-content {
padding: 15px;
flex: 1 1 0;
align-self: center;
color: $color-text-invert;
p:last-child {
margin-bottom: 0;
}
}
.ref-card-headline {
@include headline(font-size(30px));
text-transform: uppercase;
}
.ref-card-headline,
.ref-card-text {
color: $color-text-invert;
@include transition(all 1.5s cubic-bezier(0.19, 1, 0.22, 1));
}
.ref-card-content {
text-align: center;
}
&.-align-center {
.ref-card-content {
text-align: center;
}
}
.-align-left&,
&.-align-left {
.ref-card-content {
text-align: left;
}
}
.-align-right&,
&.-align-right {
.ref-card-content {
text-align: right;
}
}
&.-align-middle {
.ref-card-content {
align-self: center;
}
}
.-align-top&,
&.-align-top {
.ref-card-content {
align-self: flex-start;
}
}
.-align-bottom&,
&.-align-bottom {
.ref-card-content {
align-self: flex-end;
}
}
&.-has-image {
.image-wrapper {
img {
position: absolute;
left: 50%;
top: 50%;
@include transform(translate(-50%,-50%));
vertical-align: middle;
}
.normal {
visibility: visible;
opacity: 1;
@include transition(all 0.5s 0.25s cubic-bezier(0.19, 1, 0.22, 1));
}
.invert {
visibility: hidden;
opacity: 0;
@include transition(all 0.5s cubic-bezier(0.19, 1, 0.22, 1));
}
}
.ref-card-link {
overflow: hidden;
z-index: 1;
&:before {
content: '';
background: $color-bg-secondary;
@include transform(translate(0,-100%));
@include transition(all 0.25s);
@include transition(all 1.25s cubic-bezier(0.19, 1, 0.22, 1));
}
&,
&:before,
a {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
}
}
&.-link {
&.-has-image {
.ref-card-link {
a {
span {
position: absolute;
bottom: 15px;
right: 15px;
color: $color-text-invert;
font-size: font-size(20px);
visibility: hidden;
opacity: 0;
@include transition(all 0.25s);
&:after {
margin-left: 10px;
@include icon('\e99f', 75%);
}
}
}
}
.image-wrapper {
overflow: hidden;
img {
//@include transition(all 2.5s cubic-bezier(0.19, 1, 0.22, 1));
@include transition(all 1.25s cubic-bezier(0.19, 1, 0.22, 1));
}
}
&:hover {
.ref-card-helper {
background-color: $color-bg-primary;
}
.ref-card-link {
/*&:before {
@include transform(translate(0, 0));
}*/
/*a {
span {
opacity: 1;
visibility: visible;
@include transition(all 1.25s 0.25s);
}
}*/
}
.image-wrapper {
.normal {
opacity: 0;
visibility: hidden;
}
.invert {
opacity: 1;
visibility: visible;
filter: grayscale(1);
}
}
.ref-card-headline,
.ref-card-text {
color: $color-text;
}
}
}
&:not(.-has-image) {
padding-bottom: 55px;
.ref-card-link {
position: absolute;
bottom: 15px;
right: 15px;
a {
//@include button($border-color: mix($color-bg-blue, #000, 60%), $background-color: $color-bg-blue, $border-color-hover: mix($color-bg-blue, #000, 50%), $background-color-hover: mix($color-bg-blue, #fff, 90%));
//@include button-no-icon;
font-weight: 700;
&:before {
margin-right: 5px;
@include icon('\e99f', 75%);
}
}
}
}
}
}
}
/**
* Feature Text
*/
$shadow-color: #fff;
.feature-text {
//@include clearfix;
position: relative;
overflow: hidden;
&.-image-centered {
text-align: center;
}
&.-vertical-centered {
display: table;
table-layout: fixed;
/* Fixes IE bug */
width: 100%;
@include for-mobile {
//display: block;
}
}
&.-small {
min-height: 300px;
&.-vertical-centered {
height: 300px;
}
@include for-mobile {
min-height: 200px;
&.-vertical-centered {
height: auto;
}
}
}
&.-medium {
min-height: 600px;
&.-vertical-centered {
height: 600px;
}
@include for-mobile {
min-height: 400px;
&.-vertical-centered {
height: auto;
}
}
}
&.-large {
min-height: 900px;
&.-vertical-centered {
height: 900px;
}
@include for-mobile {
min-height: 600px;
&.-vertical-centered {
height: auto;
}
}
}
&.-headline-dropshadow {
h1, h2, h3, h4, h5, h6 {
color: $color-text-invert;
text-shadow: $text-shadow-image;
}
}
&.-alternate-text {
.feature-text-text {
color: $color-text;
}
&.-headline-dropshadow {
h1, h2, h3, h4, h5, h6 {
color: $color-headline;
}
}
}
}
.feature-text-text {
margin: font-size(100px) col(12, 25) font-size(100px) 0;
color: $color-text-invert;
@include for-tablet {
margin-right: col(6, 16);
}
@include for-mobile {
margin: font-size(36px) 0;
}
.-image-left > & {
margin-right: 0;
margin-left: col(12, 25);
@include for-tablet {
margin-left: col(6, 16);
}
@include for-mobile {
margin-left: 0;
}
}
.-image-centered > & {
margin-right: col(4, 25);
margin-left: col(4, 25);
@include for-tablet {
margin-right: 0;
margin-left: 0;
}
+ .feature-text-image {
margin-top: font-size(-36px);
@include for-mobile {
margin-top: 0;
}
}
}
.-vertical-centered > & {
display: table-cell;
vertical-align: middle;
width: col(14, 25);
margin: 0;
padding: font-size(72px) col(1, 25) font-size(72px) 0;
@include for-tablet {
width: col(11, 16);
}
@include for-mobile {
//display: block;
width: auto;
padding-right: 0;
}
}
.-vertical-centered.-image-left > & {
padding-right: 0;
padding-left: col(1, 25);
@include for-mobile {
padding-left: 0;
}
}
.-vertical-centered.-image-centered > & {
width: 100%;
padding-right: col(5, 25);
padding-left: col(5, 25);
@include for-tablet {
padding-right: 0;
padding-left: 0;
}
}
.-no-image > & {
width: 100%;
}
.-color-inverted & {
color: $color-text-invert;
}
.no-margin & {
margin: 0;
padding: 0;
}
.no-margin-top & {
margin-top: 0;
padding-top: 0;
}
.no-margin-bottom & {
margin-bottom: 0;
padding-bottom: 0;
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
color: $color-headline;
font-size: font-size(32px);
font-weight: bold;
@include for-mobile {
font-size: font-size(22px);
}
& + a {
margin-top: font-size(24px);
}
.-color-inverted & {
color: $color-text-invert;
}
&.-small {
font-size: font-size(21px);
}
&.-medium {
font-size: font-size(38px);
@include for-mobile {
font-size: font-size(30px);
}
}
&.-large {
font-size: font-size(46px);
@include for-mobile {
font-size: font-size(32px);
}
}
&.-super-size {
font-size: font-size(58px);
@include for-mobile {
font-size: font-size(36px);
}
}
}
p {
font-size: font-size(18px);
}
}
.feature-text-link {
@include button($border-color: mix($color-bg-secondary, #000, 60%), $background-color: $color-bg-secondary, $border-color-hover: mix($color-bg-secondary, #000, 50%), $background-color-hover: mix($color-bg-secondary, #fff, 90%));
@include button-no-icon;
}
.feature-text-image {
display: block;
float: right;
width: col(11, 25);
margin: font-size(48px) 0 font-size(48px) col(1, 25);
@include for-tablet {
width: col(5, 16);
}
@include for-mobile {
width: 100%;
}
.-image-left > & {
float: left;
margin-right: col(1, 25);
margin-left: 0;
@include for-mobile {
float: none;
margin-right: 0;
}
}
.-image-centered > & {
float: none;
width: col(16, 25);
margin-right: auto;
margin-left: auto;
@include for-tablet {
width: 100%;
}
+ .feature-text-text {
margin-top: font-size(48px);
}
}
.-image-top > & {
margin-top: 0;
}
.-image-bottom > & {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
@include for-mobile {
position: static;
margin-bottom: font-size(48px);
}
}
.-image-bottom.-image-left > & {
right: auto;
left: 0;
}
.-vertical-centered > & {
display: table-cell;
vertical-align: middle;
float: none;
margin: 0;
padding: font-size(48px) 0;
@include for-mobile {
display: block;
padding-top: font-size(24px);
padding-bottom: font-size(24px);
}
}
.-image-rounded > & img {
border-radius: 99em;
}
}
.feature-text-text, .feature-text-image {
.in-view > & {
@include transition(opacity 0.6s linear, transform 0.6s ease-out);
}
.not-in-view > &.-fade {
opacity: 0;
}
.in-view > &.-fade {
opacity: 1;
}
.not-in-view > &.-move {
@include transform(translate(100%, 0));
}
.not-in-view > &.-move-right {
@include transform(translate(-100%, 0));
}
.not-in-view > &.-move-top {
@include transform(translate(0, 100%));
}
.not-in-view > &.-move-bottom {
@include transform(translate(0, -100%));
}
.in-view > &.-move {
@include transform(translate(0, 0));
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
}
.hero-wrapper {
position: relative;
height: 100%;
&:not(.-full-vh) {
@include aspect-ratio(1920, 500, true);
}
&.-alt-color {
background-color: $color-bg-senary;
}
.hero-background {
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
/*&:not(.video_container) {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}*/
video {
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
}
.-full-vh& {
min-height: 100vh;
display: flex;
align-items: stretch;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.hero-content {
height: 100%;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
display: flex;
align-items: center;
justify-content: center;
}
.hero-text {
display: inline-block;
max-width: 100%;
text-align: left;
margin: 0;
line-height: 1.3;
font-family: $font-family-alternate;
font-size: font-size(40px);
//text-shadow: $text-shadow-image;
letter-spacing: 0.15em;
font-weight: 700;
text-transform: uppercase;
color: $color-text-invert;
> * {
display: inline;
position: relative;
&:last-child {
padding-bottom: 0.3em;
&:after {
position:absolute;
left:0;
bottom: -0.15em;
width:100%;
height:0;
@include border-radius(99em);
border-bottom:10px solid $color-white;
content:""
}
}
}
}
.-arrow& svg.arrow {
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
fill: #fff;
border-bottom: 2px #fff solid;
margin-bottom: -2px;
.-arrow-alternate& {
fill: #000;
border-bottom-color: #000;
}
}
}
/**
* PHOTO / TEXT COMBI
*/
.arrow-wrapper {
position: relative;
.arrow-background {
z-index: 1;
background-color: $color-bg-tertiary;
color: $color-text-invert;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 50%;
&:before {
position: absolute;
top:0;
bottom: 0;
left: 100%;
width: 50px;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
.text-wall-background {
position: absolute;
left: 50%;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
background: 50% 50% no-repeat;
background-size: cover;
}
.arrow-inside {
@include centered-1200;
display: flex;
align-items: stretch;
padding: 100px 0;
z-index: 1;
> * {
flex: 0 0 50%;
}
p,
h1,h2,h3,h4,h5,h6 {
&:last-child {
margin-bottom: 0;
}
}
}
.arrow-wall,
.text-wall {
display: flex;
align-items: center;
}
.text-wall {
&-content {
position: relative;
@include box-sizing(border-box);
padding: $gutter-default*1.5 0 $gutter-default*1.5 100px;
}
.cta {
@include button($border-color: mix($color-bg-secondary, #000, 60%), $background-color: $color-bg-secondary, $border-color-hover: mix($color-bg-secondary, #000, 50%), $background-color-hover: mix($color-bg-secondary, #fff, 90%));
@include transform(translate(-50%,-50%));
position: absolute;
left: 50%;
top: 50%;
}
}
.arrow-wall {
z-index: 1;
em, i {
font-style: normal;
color: $color-text-alt;
}
& {
color: $color-text-invert;
}
h1,h2,h3,h4,h5,h6 {
text-align: left;
color: $color-text-alt;
em,i {
color: $color-text-invert;
}
}
&-content {
@include box-sizing(border-box);
padding: $gutter-default*1.5 50px $gutter-default*1.5 0;
}
}
&.-alt-color {
.arrow-background {
background-color: $color-bg-secondary;
&:before {
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23BA0C2F%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
.arrow-wall {
em, i {
font-style: normal;
color: $color-headline-invert;
}
& {
color: $color-text;
}
h1,h2,h3,h4,h5,h6 {
color: $color-headline-invert;
em, i {
color: $color-text;
}
}
}
}
&.-arrow-left {
.arrow-background {
left: 50%;
right: 0;
&:before {
left: auto;
right: 100%;
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
.-alt-color& {
background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23BA0C2F%22%20viewBox%3D%220%200%2010%20100%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M10%2C0%20L10%2C100%20L0%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 0 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
}
.text-wall-background {
right: 50%;
left: 0;
}
.arrow-inside {
flex-direction: row-reverse;
}
.text-wall {
&-content {
padding-right: 100px;
padding-left: 0;
}
}
.arrow-wall {
&-content {
padding-left: 50px;
padding-right: 0;
}
}
}
@include for-tablet {
.arrow-inside {
flex-direction: column;
padding: 0;
}
.arrow-background {
display: none;
}
.text-wall-background {
left: 0;
}
.arrow-wall {
position: relative;
padding: 50px 30px;
background: #000;
justify-content: center;
&-content {
padding: 0;
&,
h1,h2,h3,h4,h5,h6 {
text-align: center;
}
}
&:before {
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 50px;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="100" fill="%23000000" viewBox="0 0 432 47" preserveAspectRatio="none" %3E%3Cpath d="M217.187,46.446L0,0L431.98,0L217.187,46.446Z"%3E%3C/path%3E%3C/svg%3E') no-repeat 100% 50%;
//background: url('data:image/svg+xml; charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2210%22%20height%3D%22100%22%20fill%3D%22%23000000%22%20viewBox%3D%220%200%20432%2047%22%20preserveAspectRatio%3D%22none%22%20%3E%3Cpath%20d%3D%22M0%2C0%20L0%2C100%20L10%2C50z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
.text-wall {
padding: 100px 30px 50px;
&-content {
padding: 0;
}
}
}
}
/**
* Icon cards
*/
.icon-cards-item {
position: relative;
outline: none;
text-align: left;
margin-bottom: 30px;
.icon-cards-item-wrapper {
height: 100%;
position: relative;
> {
h1, h2, h3, h4 {
text-transform: uppercase;
font-size: font-size(30px);
line-height: 1.3;
margin: 0;
@include for-mobile {
font-size: font-size(25px);
}
+ .icon-cards-item-text {
margin-top: 30px;
}
}
}
}
.icon-cards-item-icon {
font-size: 100px;
line-height: 0;
text-align: center;e
&,
svg {
@include transition(all 0.25s cubic-bezier(.2, .38, .51, .99));
}
+ h3 {
@include for-mobile {
font-size: font-size(25px);
}
}
+ h3,
+ .icon-cards-item-text {
margin-top: 15px;
}
}
.background-wrapper & {
.-alt-color& {
color: $color-text-invert;
.icon-cards-item-icon {
color: $color-text;
}
}
.-alt-color2& {
color: $color-text-invert;
.icon-cards-item-icon {
color: $color-bg-secondary;
}
}
}
&.-align-center {
text-align: center;
}
&.-align-right {
text-align: right;
}
.-side-padding & {
.icon-cards-item-wrapper {
padding: 0 30px;
}
}
.icon-cards-item-text {
font-weight: 300;
font-size: font-size(17px);
line-height: 1.2;
}
.icon-cards-item-link {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
}
&.-has-link{
&:hover {
.icon-cards-item-icon {
@include transform(scale(1.15, 1.15));
}
}
&:active {
.icon-cards-item-icon {
@include transition(all 0.05s cubic-bezier(.2, .38, .51, .99));
@include transform(scale3d(1, 1, 1));
}
}
}
}
.zoom-hotspots {
.zoom-hotspots-wrapper {
display: inline-block;
position: relative;
> img {
vertical-align: middle;
}
}
.hotspot-trigger {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
background-color: #76B82A;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
border: 2px #fff solid;
-webkit-box-shadow: 0 0 5px rgba(#000,50%);
-moz-box-shadow: 0 0 5px rgba(#000,50%);
box-shadow: 0 0 5px rgba(#000,50%);
-webkit-transition: all 0.25s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
&:hover {
background-color: #fff;
-webkit-transform: translate(-50%,-50%) scale(1.1,1.1);
-moz-transform: translate(-50%,-50%) scale(1.1,1.1);
-ms-transform: translate(-50%,-50%) scale(1.1,1.1);
-o-transform: translate(-50%,-50%) scale(1.1,1.1);
transform: translate(-50%,-50%) scale(1.1,1.1);
&:before,
&:after {
//background: #76B82A;
color: #76B82A;
}
}
/*&:before,*/
&:after {
position: absolute;
left: 50%;
top: 50%;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
//background: #fff;
color: #fff;
content: '\e0cb';
}
/*&:before {
width: 2px;
height: 15px;
}*/
&:after {
/*height: 2px;
width: 15px;*/
font: 100%/1 "RockSolid Icons";
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
text-rendering: geometricPrecision;
text-indent: 0;
margin-right: 0.26667em;
}
}
.hotspot-modal {
display: none;
}
@media screen and (max-width: 599px) {
.hotspot-trigger {
width: 25px;
height: 25px;
border-width: 1px;
&:after {
font-size: 0.7em;
}
}
}
}
.hotspot-modal {
.image_container {
display: block;
text-align: center;
img {
max-width: 100%;
width: auto;
display: inline;
}
}
}
.pricing-table {
&.-valign-stretch {
.rs-columns {
align-items: stretch;
}
}
.pricing-table-item {
padding: 1em 0;
position: relative;
&.-featured {
padding: 0;
.pricing-table-item-content {
padding: 2.75em 2em 8em;
border-top: 0.25em solid $color-bg-secondary;
.main-content {
margin-top: -2.75em;
padding-top: 2.75em;
}
.link {
//bottom: 4.25em;
}
}
/*&:before {
z-index: 1;
position: absolute;
top: 0.2em;
left: 0;
right: 0;
height: 1.75em;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="10" fill="%23BA0C2F" viewBox="0 0 100 10" preserveAspectRatio="none" %3E%3Cpath d="M0,0 L50,10 L100,0z"%3E%3C/path%3E%3C/svg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
&:after {
z-index: 1;
content: attr(data-feature-label);
position: absolute;
top: 0.55em;
left: 50%;
@include transform(translateX(-50%));
color: $color-text-invert;
font-size: font-size(12px);
}*/
}
.pricing-table-item-content {
background-color: $color-bg-lightgrey;
height: 100%;
color: $color-text;
padding: 2em 2em 6em;
text-align: center;
position: relative;
@include box-sizing(border-box);
@include transition(all 0.5s cubic-bezier(0.25, 1, 0.5, 1));
@include transform(scale3d(1,1,1));
&:hover,
&:focus {
@include box-shadow(0 0 10px 5px rgba(255,79,115,.9));
@include transform(scale3d(1.01,1.01,1));
}
.main-content {
background-color: #fff;
margin: -2em -2em 2.75em;
padding: 2em 2em 0.5em;
position: relative;
&:before {
z-index: 1;
position: absolute;
top: 100%;
left: 0;
right: 0;
height: 1.75em;
margin-top: -1px;
content: '';
background: url('data:image/svg+xml; charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="100" height="10" fill="%23FFFFFF" viewBox="0 0 100 10" preserveAspectRatio="none" %3E%3Cpath d="M0,0 L50,10 L100,0z"%3E%3C/path%3E%3C/svg%3E') no-repeat 100% 50%;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
}
}
.title-wrapper {
min-height: 6em;
margin-bottom: #{font-size(19px)};
}
.title {
color: $color-bg-secondary;
font-size: font-size(38px);
}
.subtitle {
font-weight: 600;
margin-top: -#{font-size(19px)};
}
.price-wrapper {
color: $color-bg-secondary;
position: relative;
margin-bottom: #{font-size(19px)};
}
.price {
font-weight: 500;
font-size: 2.5em;
.unit {
font-size: 0.5em;
vertical-align: super;
}
}
.period {
font-weight: 400;
font-size: 1.25em;
display: inline-block;
padding: 0 0 0 0.5em;
color: #777;
}
.text {
font-weight: 400;
}
.features {
font-size: font-size(15px);
text-align: left;
li {
line-height: 1.3;
padding: 0.25em 0 0.25em 1.75em;
position: relative;
&:before {
position: absolute;
top: 0.25em;
left: 0;
width: 1.25em;
height: 1.25em;
background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 16 16' fill='%23BA0C2F'%3E%3Cpath d='M6 10.781l7.063-7.063 0.938 0.938-8 8-3.719-3.719 0.938-0.938z'%3E%3C/path%3E%3C/svg%3E") no-repeat 50% 50%;
content: '';
}
}
}
.link {
@include button($button-height: 50px, $button-padding-horizontal: 40px, $background-color: $color-bg-secondary, $border-color: $color-bg-secondary, $background-color-hover: $color-bg-tertiary, $border-color-hover: $color-bg-tertiary);
//margin-top: 1.5rem;
position: absolute;
bottom: 2em;
left: 2em;
right: 2em;
display: block;
}
}
}
}