*
* This will cause the system to fill up from either the centre or the right
* hand side. Default behaviour is to fill up the layout system from the left.
*
* There are plenty more options available to us: explore them below.
*/
/* Default/mandatory classes
========================================================================== */
/**
* 1. Allows us to use the layout object on any type of element.
* 2. We need to defensively reset any box-model properties.
* 3. Use the negative margin trick for multi-row grids:
* http://csswizardry.com/2011/08/building-better-grid-systems/
*/
.o-layout {
display: block;
/* [1] */
margin: 0;
/* [2] */
padding: 0;
/* [2] */
list-style: none;
/* [1] */
margin-left: -24px;
/* [3] */
font-size: 0;
}
/**
* 1. Required in order to combine fluid widths with fixed gutters.
* 2. Allows us to manipulate grids vertically, with text-level properties,
* etc.
* 3. Default item alignment is with the tops of each other, like most
* traditional grid/layout systems.
* 4. By default, all layout items are full-width (mobile first).
* 5. Gutters provided by left padding:
* http://csswizardry.com/2011/08/building-better-grid-systems/
* 6. Fallback for old IEs not supporting `rem` values.
*/
.o-layout__item {
box-sizing: border-box;
/* [1] */
display: inline-block;
/* [2] */
vertical-align: top;
/* [3] */
width: 100%;
/* [4] */
padding-left: 24px;
/* [5] */
font-size: 18px;
/* [6] */
font-size: 1rem;
}
/* Gutter size modifiers
========================================================================== */
.o-layout--flush {
margin-left: 0;
}
.o-layout--flush > .o-layout__item {
padding-left: 0;
}
.o-layout--tiny {
margin-left: -6px;
}
.o-layout--tiny > .o-layout__item {
padding-left: 6px;
}
.o-layout--small {
margin-left: -12px;
}
.o-layout--small > .o-layout__item {
padding-left: 12px;
}
.o-layout--large {
margin-left: -48px;
}
.o-layout--large > .o-layout__item {
padding-left: 48px;
}
.o-layout--huge {
margin-left: -96px;
}
.o-layout--huge > .o-layout__item {
padding-left: 96px;
}
/* Vertical alignment modifiers
========================================================================== */
/**
* Align all grid items to the middles of each other.
*/
.o-layout--middle > .o-layout__item {
vertical-align: middle;
}
/**
* Align all grid items to the bottoms of each other.
*/
.o-layout--bottom > .o-layout__item {
vertical-align: bottom;
}
/**
* Stretch all grid items of each row to have an equal-height.
* Please be aware that this modifier class doesn’t take any effect in IE9 and
* below and other older browsers due to the lack of `display: flex` support.
*/
.o-layout--stretch {
display: flex;
flex-wrap: wrap;
}
.o-layout--stretch > .o-layout__item {
display: flex;
}
.o-layout--stretch.o-layout--center {
justify-content: center;
}
.o-layout--stretch.o-layout--right {
justify-content: flex-end;
}
.o-layout--stretch.o-layout--left {
justify-content: flex-start;
}
/* Fill order modifiers
========================================================================== */
/**
* Fill up the layout system from the centre.
*/
.o-layout--center {
text-align: center;
}
.o-layout--center > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the right-hand side.
*/
.o-layout--right {
text-align: right;
}
.o-layout--right > .o-layout__item {
text-align: left;
}
/**
* Fill up the layout system from the left-hand side. This will likely only be
* needed when using in conjunction with `.o-layout--reverse`.
*/
.o-layout--left {
text-align: left;
}
.o-layout--left > .o-layout__item {
text-align: left;
}
/**
* Reverse the rendered order of the grid system.
*/
.o-layout--reverse {
direction: rtl;
}
.o-layout--reverse > .o-layout__item {
direction: ltr;
}
/* Auto-widths modifier
========================================================================== */
/**
* Cause layout items to take up a non-explicit amount of width.
*/
.o-layout--auto > .o-layout__item {
width: auto;
}
/* ==========================================================================
#MEDIA
========================================================================== */
/**
* Place any image- and text-like content side-by-side, as per:
* http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
*/
.o-media {
display: block;
}
.o-media:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-media__img {
float: left;
margin-right: 24px;
}
.o-media__img > img {
display: block;
}
.o-media__body {
overflow: hidden;
display: block;
}
.o-media__body,
.o-media__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
/**
* Modify the amount of space between our image and our text. We also have
* reversible options for all available sizes.
*/
.o-media--flush > .o-media__img {
margin-right: 0;
margin-left: 0;
}
.o-media--tiny > .o-media__img {
margin-right: 6px;
}
.o-media--tiny.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 6px;
}
.o-media--small > .o-media__img {
margin-right: 12px;
}
.o-media--small.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 12px;
}
.o-media--large > .o-media__img {
margin-right: 48px;
}
.o-media--large.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 48px;
}
.o-media--huge > .o-media__img {
margin-right: 96px;
}
.o-media--huge.o-media--reverse > .o-media__img {
margin-right: 0;
margin-left: 96px;
}
/* Reversed media objects
========================================================================== */
.o-media--reverse > .o-media__img {
float: right;
margin-right: 0;
margin-left: 24px;
}
/* ==========================================================================
#FLAG
========================================================================== */
/**
* The flag object is a design pattern similar to the media object, however it
* utilises `display: table[-cell];` to give us control over the vertical
* alignments of the text and image.
*
* http://csswizardry.com/2013/05/the-flag-object/
*
* 1. Allows us to control vertical alignments.
* 2. Force the object to be the full width of its parent. Combined with [1],
* this makes the object behave in a quasi-`display: block;` manner.
* 3. Reset inherited `border-spacing` declarations.
*/
.o-flag {
display: table;
/* [1] */
width: 100%;
/* [2] */
border-spacing: 0;
/* [3] */
}
/**
* Items within a flag object. There should only ever be one of each.
*
* 1. Default to aligning content to their middles.
*/
.o-flag__img,
.o-flag__body {
display: table-cell;
vertical-align: middle;
/* [1] */
}
/**
* Flag images have a space between them and the body of the object.
*
* 1. Force `.flag__img` to take up as little space as possible:
* https://pixelsvsbytes.com/2012/02/this-css-layout-grid-is-no-holy-grail/
*/
.o-flag__img {
width: 1px;
/* [1] */
padding-right: 24px;
/**
* 1. Fixes problem with images disappearing.
*
* The direct child selector '>' needs to remain in order for nested flag
* objects to not inherit their parent’s formatting. In case the image tag
* is wrapped into another tag, e.g. an anchor for linking reasons, it will
* disappear. In that case try wrapping the whole o-flag__img object into
* an anchor tag.
*
* E.g.:
*
*
*
* 
*
*
*/
}
.o-flag__img > img {
max-width: none;
/* [1] */
}
/**
* The container for the main content of the flag object.
*
* 1. Forces the `.flag__body` to take up all remaining space.
*/
.o-flag__body {
width: auto;
/* [1] */
}
.o-flag__body,
.o-flag__body > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-flag--flush > .o-flag__img {
padding-right: 0;
padding-left: 0;
}
.o-flag--tiny > .o-flag__img {
padding-right: 6px;
}
.o-flag--tiny.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 6px;
}
.o-flag--small > .o-flag__img {
padding-right: 12px;
}
.o-flag--small.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 12px;
}
.o-flag--large > .o-flag__img {
padding-right: 48px;
}
.o-flag--large.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 48px;
}
.o-flag--huge > .o-flag__img {
padding-right: 96px;
}
.o-flag--huge.o-flag--reverse > .o-flag__img {
padding-right: 0;
padding-left: 96px;
}
/* Reversed flag
========================================================================== */
/**
* 1. Swap the rendered direction of the object…
* 2. …and reset it.
* 3. Reassign margins to the correct sides.
*/
.o-flag--reverse {
direction: rtl;
/* [1] */
}
.o-flag--reverse > .o-flag__img,
.o-flag--reverse > .o-flag__body {
direction: ltr;
/* [2] */
}
.o-flag--reverse > .o-flag__img {
padding-right: 0;
/* [3] */
padding-left: 24px;
/* [3] */
}
/* Alignment variants
========================================================================== */
/**
* Vertically align the image- and body-content differently. Defaults to middle.
*/
.o-flag--top > .o-flag__img,
.o-flag--top > .o-flag__body {
vertical-align: top;
}
.o-flag--bottom > .o-flag__img,
.o-flag--bottom > .o-flag__body {
vertical-align: bottom;
}
/* ==========================================================================
#LIST-BARE
========================================================================== */
/**
* Strip list-like appearance from lists by removing their bullets and any
* indentation.
*
* Note: Declaring the item class might not be necessary everywhere,
* but is for example in
* - lists for the
- children.
*/
.o-list-bare {
list-style: none;
margin-left: 0;
}
.o-list-bare__item {
margin-left: 0;
}
/* ==========================================================================
#LIST-INLINE
========================================================================== */
/**
* The list-inline object simply displays a list of items in one line.
*/
.o-list-inline {
margin-left: 0;
list-style: none;
}
.o-list-inline__item {
display: inline-block;
}
/* ==========================================================================
#BOX
========================================================================== */
/**
* The box object simply boxes off content. Extend with cosmetic styles in the
* Components layer.
*
* 1. So we can apply the `.o-box` class to naturally-inline elements.
*/
.o-box {
display: block;
/* [1] */
padding: 24px;
}
.o-box:after {
content: "" !important;
display: block !important;
clear: both !important;
}
.o-box > :last-child {
margin-bottom: 0;
}
/* Size variants
========================================================================== */
.o-box--flush {
padding: 0;
}
.o-box--tiny {
padding: 6px;
}
.o-box--small {
padding: 12px;
}
.o-box--large {
padding: 48px;
}
.o-box--huge {
padding: 96px;
}
/* ==========================================================================
#BLOCK
========================================================================== */
/**
* Stacked image-with-text object. A simple abstraction to cover a very commonly
* occurring design pattern.
*/
.o-block {
display: block;
text-align: center;
}
.o-block__img {
margin-bottom: 24px;
/* Size variants
====================================================================== */
}
.o-block--flush > .o-block__img {
margin-bottom: 0;
}
.o-block--tiny > .o-block__img {
margin-bottom: 6px;
}
.o-block--small > .o-block__img {
margin-bottom: 12px;
}
.o-block--large > .o-block__img {
margin-bottom: 48px;
}
.o-block--huge > .o-block__img {
margin-bottom: 96px;
}
.o-block__body {
display: block;
}
/* Alignment variants
========================================================================== */
.o-block--right {
text-align: right;
}
.o-block--left {
text-align: left;
}
/* ==========================================================================
#TABLE
========================================================================== */
/**
* A simple object for manipulating the structure of HTML `table`s.
*/
.o-table {
width: 100%;
}
/* Equal-width table cells
========================================================================== */
/**
* `table-layout: fixed` forces all cells within a table to occupy the same
* width as each other. This also has performance benefits: because the browser
* does not need to (re)calculate cell dimensions based on content it discovers,
* the table can be rendered very quickly. Further reading:
* https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout#Values
*/
.o-table--fixed {
table-layout: fixed;
}
/* Size variants
========================================================================== */
.o-table--tiny th,
.o-table--tiny td {
padding: 6px;
}
.o-table--small th,
.o-table--small td {
padding: 12px;
}
.o-table--large th,
.o-table--large td {
padding: 48px;
}
.o-table--huge th,
.o-table--huge td {
padding: 96px;
}
.o-layout > .o-layout__item {
margin-bottom: 24px;
}
.o-layout--large2 {
margin-left: -48px;
}
.o-layout--large2 > .o-layout__item {
margin-bottom: 48px;
padding-left: 48px;
}
.o-layout--large3 {
margin-left: -52px;
}
.o-layout--large3 > .o-layout__item {
margin-bottom: 52px;
padding-left: 52px;
}
.o-layout--flush > .o-layout__item {
margin-bottom: 0;
}
@media (min-width: 48.125em) {
.o-order--tablet {
display: flex;
}
}
@media (min-width: 48.125em) {
.o-order__1\@tablet {
order: 1;
}
}
@media (min-width: 48.125em) {
.o-order__2\@tablet {
order: 2;
}
}
@media (max-width: 48.115em) {
.o-order--mob-only {
display: flex;
flex-direction: column;
}
}
@media (max-width: 48.115em) {
.o-order__1\@mob-only {
order: 1;
}
}
@media (max-width: 48.115em) {
.o-order__2\@mob-only {
order: 2;
}
}
.o-wrapper {
max-width: 1320px;
margin: 0 auto;
padding: 10px 24px;
}
.o-wrapper:after {
content: "" !important;
display: block !important;
clear: both !important;
}
@media (min-width: 90em) {
.o-wrapper {
padding: 0 48px;
}
}
@media (min-width: 62.5em) {
.o-wrapper--950 {
max-width: 950px;
margin: 0 auto;
}
}
.o-wrapper--1200 {
max-width: 1200px;
}
.o-wrapper--750 {
max-width: 750px;
}
@media (max-width: 48.115em) {
.o-wrapper--nopadmobile {
padding: 0;
}
}
.o-btn, .mc-modal .content__button .button {
padding: 17px 25px 14px;
transition: 0.3s;
font-size: 16px;
font-size: 0.88889rem;
line-height: 1;
text-transform: uppercase;
display: inline-block;
text-decoration: none;
font-weight: normal;
border-radius: 4px;
border: 2px solid #658d95;
color: #658d95;
background-color: transparent;
position: relative;
padding-right: 48px;
}
.o-btn svg, .mc-modal .content__button .button svg {
width: 12px;
height: 12px;
margin-left: 12px;
transition: transform 0.2s;
position: absolute;
right: 24px;
top: 50%;
transform: translateY(-50%);
}
.o-btn:hover, .mc-modal .content__button .button:hover {
background-color: #658d95;
color: #fff;
}
.o-btn:hover svg, .mc-modal .content__button .button:hover svg {
transform: translate(1px, -50%);
}
.o-btn--alt, .c-home-marketing a, .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .o-btn, .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button, .mc-modal .content__button .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .button,
.home .c-services-list__card.ecom-section .c-services-list__btn .o-btn, .home .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button, .mc-modal .content__button .home .c-services-list__card.ecom-section .c-services-list__btn .button,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .o-btn, .page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button, .mc-modal .content__button .page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .button, .c-service-projects__list:first-of-type .o-btn, .c-service-projects__list:first-of-type .mc-modal .content__button .button, .mc-modal .content__button .c-service-projects__list:first-of-type .button, .c-service__related .c-services-list__card:first-of-type .o-btn, .c-service__related .c-services-list__card:first-of-type .mc-modal .content__button .button, .mc-modal .content__button .c-service__related .c-services-list__card:first-of-type .button {
border: 2px solid #fff;
color: #fff;
}
.o-btn--alt:hover, .c-home-marketing a:hover, .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .o-btn:hover, .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button:hover, .mc-modal .content__button .page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__btn .button:hover,
.home .c-services-list__card.ecom-section .c-services-list__btn .o-btn:hover, .home .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button:hover, .mc-modal .content__button .home .c-services-list__card.ecom-section .c-services-list__btn .button:hover,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .o-btn:hover, .page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .mc-modal .content__button .button:hover, .mc-modal .content__button .page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__btn .button:hover, .c-service-projects__list:first-of-type .o-btn:hover, .c-service-projects__list:first-of-type .mc-modal .content__button .button:hover, .mc-modal .content__button .c-service-projects__list:first-of-type .button:hover, .c-service__related .c-services-list__card:first-of-type .o-btn:hover, .c-service__related .c-services-list__card:first-of-type .mc-modal .content__button .button:hover, .mc-modal .content__button .c-service__related .c-services-list__card:first-of-type .button:hover {
background-color: #fff;
color: #658d95;
}
.o-btn__extend.down-arrow:hover svg,
.o-btn__extend.down-arrow svg {
transform: rotate(135deg);
margin-left: 10px;
transition: all 0.2s;
}
.o-btn__extend.down-arrow.active svg,
.o-btn__extend.down-arrow.active:hover svg {
transform: rotate(-45deg);
}
.o-btn--white, .home .c-home-success a {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
}
.o-btn--white:hover, .home .c-home-success a:hover {
background-color: #fff;
border: 2px solid transparent;
color: #658d95;
}
.o-btn--green-home {
background-color: #658d95;
border: 2px solid transparent;
color: #fff;
}
.o-btn--green-home:hover {
background-color: transparent;
color: #fff;
border: 2px solid #fff;
}
.o-btn--teal {
background-color: #658d95;
border: 2px solid transparent;
color: #fff;
}
.o-btn--teal:hover {
background-color: transparent;
color: #658d95;
border: 2px solid #658d95;
}
.flexbox .o-module {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
overflow: hidden;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.flexbox .o-module__item {
display: flex;
display: -webkit-flex;
display: -ms-flexbox;
}
.flexbox .o-module__content {
flex: 1;
}
.flexbox .o-module__content--bottom {
align-self: flex-end;
}
.o-aspect {
position: relative;
}
.o-aspect::before {
content: "";
float: left;
width: 0;
height: 0;
padding-bottom: 100%;
}
.o-aspect--69::before {
padding-bottom: 69%;
}
.o-aspect--4by3::before {
padding-bottom: 66.667%;
}
.o-aspect--16by9::before {
padding-bottom: 56.25%;
}
.o-aspect > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.o-fluid-object {
position: relative;
width: 100%;
margin-bottom: 24px;
padding-bottom: 69%;
}
.o-fluid-object iframe,
.o-fluid-object object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.o-fluid-object--69 {
padding-bottom: 69%;
}
.o-fluid-object--56 {
padding-bottom: 56%;
}
.o-fluid-object--4by3 {
padding-bottom: 66.667%;
}
.o-fluid-object--16by9 {
padding-bottom: 56.25%;
}
.c-svgicon--btn-arrow {
width: 13px;
height: 13px;
}
.c-svgicon--select-arrow {
width: 18px;
height: 11px;
}
.c-skip {
position: absolute;
top: -10px;
z-index: -999;
width: 1px;
height: 1px;
overflow: hidden;
}
.c-skip:hover, .c-skip:active, .c-skip:focus {
top: 12px;
left: 50%;
z-index: 999;
display: inline-block;
width: auto;
height: auto;
transform: translateX(-50%);
}
.c-site-nav {
display: inline-block;
width: 100%;
position: relative;
text-align: center;
}
@media (max-width: 62.49em) {
.c-site-nav {
display: none;
margin-top: 24px;
}
}
.c-nav {
margin-bottom: 0;
list-style: none;
display: grid;
}
@media (min-width: 62.5em) {
.c-nav {
display: inline-table;
justify-content: center;
}
.fixed .c-nav {
padding: 10px 0;
}
}
.c-nav-menu li {
margin: 0 22px !important;
}
.c-nav li {
/*transition: 0.3s;*/
border-bottom: 2px solid transparent;
position: relative;
display: inline;
list-style-position: inside;
}
.c-nav > li.menu-item-has-children{
padding-right: 20px;
}
.c-nav > li.menu-item-has-children:after{
position: absolute;
display: inline-block;
right: 0;
top: 50%;
transform: translate(0, -50%);
/*margin-left: 5px;*/
width: 12px;
height: 12px;
background-image: url(../img/select-arrow.png);
background-size: 12px 7px;
background-position: center right;
background-repeat: no-repeat;
content: "";
}
@media (min-width: 62.5em) {
.c-nav li:hover, .c-nav li.current-menu-item {
border-bottom: 2px solid #fff;
}
.c-top.fixed .c-nav li:hover, .c-top.fixed .c-nav li.current-menu-item {
border-color: #191919;
}
}
@media (min-width: 62.5em) {
.c-nav li {
display: inline-block;
}
.c-nav li:not(:last-child) {
margin-right: 30px;
}
}
.c-nav li a {
font-size: 16px;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
font-weight: normal;
}
@media (max-width: 62.49em) {
.c-nav li a {
font-size: 24px;
margin-bottom: 30px;
font-weight: bold;
}
}
@media (min-width: 62.5em) {
.c-nav-left {
float: left;
}
}
@media (min-width: 62.5em) {
.c-nav-right {
float: right;
}
}
@media (min-width: 62.5em) {
.c-nav .sub-menu {
display: none;
z-index: 500;
position: absolute;
left: 50%;
top: 60px;
width: 260px;
list-style: none;
background: white;
padding: 24px 12px;
border-radius: 3px;
transform: translateX(-50%);
text-align: center;
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
}
.c-nav .sub-menu:before {
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 20px;
height: 20px;
background-color: #fff;
transform: translateX(-50%) rotate(45deg);
}
}
.c-nav .sub-menu li {
display: block;
margin-right: 0;
border: 0;
transition: 0.2s;
}
@media (min-width: 62.5em) {
.c-nav .sub-menu li:not(:last-of-type) {
margin-bottom: 12px !important;
}
}
@media (min-width: 62.5em) {
.c-nav .sub-menu li a {
color: #191919;
}
}
@media (max-width: 62.49em) {
.c-nav .sub-menu li a {
opacity: 0.6;
}
}
@media (min-width: 62.5em) {
.c-nav .sub-menu li:hover, .c-nav .sub-menu li.current-menu-item {
border-bottom: 0;
opacity: 0.8;
}
}
/*.c-nav .sub-menu li .c-nav__subnav-toggle {
position: relative;
display: inline-block;
margin-left: 5px;
width: 12px;
height: 12px;
background-image: url(../img/select-arrow.png);
background-size: 12px 7px;
background-position: center;
background-repeat: no-repeat;
-webkit-transition: 0.25s;
-o-transition: 0.25s;
transition: 0.25s;
}*/
.c-top.fixed .c-nav__subnav-toggle {
background-image: url(../img/select-arrow.png);
}
@media (max-width: 62.49em) {
.c-nav__subnav-toggle {
display: none;
}
}
.c-page-nav {
margin-top: 36px;
padding-top: 12px;
border-top: 1px solid #191919;
text-align: center;
}
.c-page-nav .page-numbers {
display: inline-block;
padding: 4px 6px;
color: #191919;
text-decoration: none;
}
.c-page-nav .page-numbers:hover, .c-page-nav .page-numbers.current {
color: #121212;
}
.c-top {
padding: 20px 0;
position: relative;
z-index: 500;
position: fixed;
top: 0;
width: 100%;
z-index: 900;
transition: 0.3s;
}
.c-top.fixed {
background: #fff;
padding: 6px 0;
}
.c-top--spacer {
height: 100px;
}
.admin-bar .c-top--spacer {
height: calc(100px - 32px);
}
@media (max-width: 62.49em) {
.c-top.nav-open {
position: fixed;
width: 100%;
min-height: 100vh;
top: 0;
left: 0;
background: #191919;
z-index: 500;
transition: 0.3s;
padding: 20px 0;
}
.c-top.nav-open .c-header__toggle {
display: none;
}
.c-top.nav-open .c-header__close {
display: block;
}
.home .c-top.nav-open .c-header__logo {
opacity: 1;
color: #fff;
}
.c-top.nav-open .button-mobile {
display: none !important;
}
.c-top.nav-open .c-site-nav {
display: block;
position: absolute;
width: 100%;
text-align: center;
top: 50%;
left: 50%;
z-index: 500;
transform: translate(-50%, -50%);
}
.c-top.nav-open .menu-item a,
.c-top.nav-open .c-social a {
color: #fff !important;
}
.c-top.nav-open .c-top__headerbg {
display: none;
z-index: -1;
}
}
.c-top-headerbg {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
}
.c-top-headerbg video {
width: 100%;
height: auto;
width: 120%;
margin: 0 -5%;
}
.c-top-headerbg:after {
content: "";
position: absolute;
background: linear-gradient(180deg, rgba(239, 238, 238, 0) 70%, #f6f6f5 100%);
z-index: -1;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 62.5em) {
.c-header {
position: relative;
}
}
@media (min-width: 48.125em) {
.c-header a {
color: #fff;
}
.fixed .c-header a {
color: #191919;
}
}
.c-header .button-mobile {
display: none;
}
.c-header .c-logo-wrap {
display: inline-block;
line-height: 0;
cursor: pointer;
}
.c-header .c-logo-wrap .button-mobile {
display: block;
}
@media (min-width: 62.5em) {
.c-header .c-logo-wrap {
position: absolute;
top: 50%;
left: 10%;
transform: translate(-50%, -50%);
z-index: 1;
}
.c-header .c-logo-wrap .button-mobile {
display: none;
}
}
.c-header__logo {
width: 142px;
height: 45px;
transition: 0.3s;
color: #fff;
}
.c-top.fixed .c-header__logo {
width: 112px;
height: 45px;
color: #191919;
}
.c-top.fixed.nav-open .c-header__logo {
color: #fff;
}
@media (max-width: 62.49em) {
.c-header__logo {
width: 112px;
height: 18px;
}
.c-top.fixed.nav-open .c-header__logo {
color: #fff;
}
.home .c-header__logo {
opacity: 0;
display: none;
}
}
.c-header__button {
color: #191919 !important;
background-color: #fff !important;
border: 1px solid #191919 !important;
box-shadow: #D5D5D5 0px 0px 9px 0px;
padding: 13px 30px 10px 13px !important;
border: 0px solid #191919 !important;
}
@media (min-width: 62.5em) {
.c-header__button {
padding: 13px 32px 13px 17px !important;
position: absolute;
float: right;
top: 50%;
right: -5%;
transform: translate(-50%, -50%);
z-index: 1;
}
}
.c-header__button svg {
right: 10px !important;
width: 10px;
height: 10px;
}
.c-header__toggle {
display: block;
line-height: 0;
width: auto;
float: right;
color: #fff;
}
.c-top.fixed .c-header__toggle {
color: #191919;
}
.c-header__toggle-icon {
width: 25px;
height: 40px;
}
@media (min-width: 62.5em) {
.c-header__toggle {
display: none;
}
}
.c-header__close {
display: none;
width: auto;
float: right;
line-height: 0;
}
.c-header__close-icon {
width: 20px;
height: 20px;
}
.nav-open .c-header__close {
color: #fff;
}
@media (min-width: 62.5em) {
.c-header__close {
display: none;
}
}
.c-header__social-mobile {
display: none;
}
@media (max-width: 62.49em) {
.c-header__social-mobile {
display: block;
}
.c-header__social-mobile .c-social {
margin-top: 24px;
}
.c-header__social-mobile .c-social__icon {
display: inline-block;
}
.c-header__social-mobile .c-social__icon:not(:last-of-type) {
margin-right: 15px;
}
.c-header__social-mobile .c-social__icon svg {
width: 40px;
height: 40px;
}
.c-header__social-mobile .c-social__icon:hover {
opacity: 0.6;
}
}
.c-content {
position: relative;
z-index: 10;
padding-top: 40px;
}
.home .c-content {
padding-top: 0;
}
@media (min-width: 48.125em) {
.c-content {
padding-top: 200px;
}
}
.c-footer {
background-color: #658d95;
padding: 70px 0;
color: #fff;
overflow: hidden;
font-weight: normal;
}
@media (max-width: 62.49em) {
.c-footer {
text-align: center;
}
.c-footer__partner-logo img {
margin: 10px auto !important;
}
}
.c-footer-top {
display: flex;
}
@media (max-width: 62.49em) {
.c-footer-top {
flex-direction: column;
}
}
.c-footer-top__left {
display: flex;
}
@media (min-width: 62.5em) {
.c-footer-top__left {
flex: 75%;
}
}
@media (max-width: 62.49em) {
.c-footer-top__left {
flex-direction: column;
}
}
.c-footer-top__left .c-cols {
margin-bottom: 24px;
}
@media (min-width: 62.5em) {
.c-footer-top__left .c-cols {
flex: 20%;
padding: 0 12px;
margin-bottom: 0;
}
}
.c-footer-top__right {
flex: 25%;
}
.c-footer__logo {
width: 112px;
height: 18px;
}
.c-footer__partner-logo img {
margin: 10px 0;
}
.c-footer__partner-logo img:nth-child(1) {
width: 70px;
height: 70px;
}
.c-footer__partner-logo img:nth-child(2) {
width: 90px;
height: 50px;
}
.c-footer a {
color: #fff;
font-size: 14px;
line-height: 1.4;
text-decoration: none;
text-transform: uppercase;
margin-bottom: 12px;
transition: 0.3s;
font-weight: normal;
}
.c-footer a:hover {
opacity: 0.6;
}
.c-footer__links a {
display: block;
margin-bottom: 12px;
}
.c-footer__links-dm:not(:first-of-type) {
font-size: 12px;
margin-bottom: 5px;
color: #fff;
}
.c-footer__contact {
position: relative;
}
.c-footer__contact a {
display: block;
}
@media (min-width: 62.5em) {
.c-footer__contact:before {
content: "";
position: absolute;
border-left: 1px solid rgba(147, 147, 147, 0.3);
width: 1px;
height: 241%;
top: -70px;
left: 0;
}
}
@media (min-width: 62.5em) and (min-width: 62.5em) {
.c-footer__contact:before {
left: 20px;
}
}
.c-footer__contact-details {
display: inline-block;
}
@media (min-width: 62.5em) {
.c-footer__contact-details {
padding-left: 70px;
}
}
.c-footer__copy p,
.c-footer__copy a {
color: #fff;
font-size: 12px;
line-height: 1.6;
text-transform: uppercase;
margin-bottom: 4px;
}
.c-footer__copy .partner-link {
text-decoration: underline;
}
.c-footer .c-social {
margin-top: 24px;
}
.c-footer .c-social__icon {
display: inline-block;
}
.c-footer .c-social__icon:not(:last-of-type) {
margin-right: 8px;
}
@media (min-width: 62.5em) {
.c-footer .c-social__icon:not(:last-of-type) {
margin-right: 15px;
}
}
.c-footer .c-social__icon svg {
width: 30px;
height: 30px;
}
@media (min-width: 62.5em) {
.c-footer .c-social__icon svg {
width: 40px;
height: 40px;
}
}
.c-footer .c-social__icon:hover {
opacity: 0.6;
}
.instagram-pics {
margin: 0;
padding: 0;
line-height: 0;
}
.instagram-pics li {
display: inline-block;
width: 33.333%;
}
@media (min-width: 90em) {
.instagram-pics li {
width: 16.666%;
}
}
.alignleft,
.alignright,
.aligncenter,
.alignnone {
display: block;
width: 100%;
height: auto;
margin-bottom: 0.83333em;
overflow: hidden;
}
.alignleft img,
.alignright img,
.aligncenter img,
.alignnone img {
display: block;
width: 100%;
height: auto;
}
@media (min-width: 48.125em) {
.alignleft {
float: left;
width: 40%;
max-width: 40%;
margin-right: 1.66667em;
clear: left;
}
}
@media (min-width: 48.125em) {
.alignright {
float: right;
width: 40%;
max-width: 40%;
margin-left: 1.66667em;
clear: right;
}
}
.aligncenter {
margin-right: auto;
margin-left: auto;
}
.alignnone {
max-width: 100%;
min-width: 100%;
}
.wp-caption-text {
margin: 6px 12px;
font-size: 14px;
font-size: 0.77778rem;
line-height: 1.71429;
font-style: italic;
text-align: center;
}
.gallery {
overflow: hidden;
clear: both;
}
.gallery-item {
display: block;
float: left;
}
.gallery-icon a {
display: block;
padding: 6px;
background: #fff;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
}
.gallery-icon a:hover, .gallery-icon a:active, .gallery-icon a:focus {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.15);
}
.gallery img {
display: block;
width: 100%;
height: auto;
}
.gallery figcaption {
display: none;
}
.c-image-gallery--all {
margin: 24px 0;
}
.c-image-gallery--1left-2right_right img {
width: 100px;
}
.c-image-gallery--1left-2right_right img:first-of-type {
margin-bottom: 24px;
}
.c-image-gallery--2left-1right_left img {
width: 100px;
}
.c-image-gallery--2left-1right_left img:first-of-type {
margin-bottom: 24px;
}
.c-flex-content--all {
margin: 60px 0;
}
.c-flex-content--2-column-content {
column-gap: 40px;
column-count: 2;
}
.c-flex-content--repeater_block img {
width: 200px;
margin: 0 auto;
}
.c-flex-content--image-content_left img {
width: 200px;
margin: 0 auto;
}
.c-flex-content--content-image_right img {
width: 200px;
margin: 0 auto;
}
.c-home h2 {
margin-bottom: 12px;
line-height: 1;
}
.c-home-top {
margin-bottom: 60px;
position: relative;
}
@media (max-width: 48.115em) {
.c-home-top {
min-height: 70vh;
}
}
.c-home-top__mockup {
max-width: 350px;
max-width: 25%;
margin: auto;
text-align: center;
position: relative;
z-index: 1;
}
@media (min-width: 48.125em) {
.c-home-top__mockup {
margin-left: 40%;
margin-top: 50px;
}
}
@media (min-width: 100em) {
.c-home-top__mockup {
margin-left: 42%;
max-width: 20%;
}
}
@media (max-width: 48.115em) {
.c-home-top__mockup {
max-width: 200px;
}
}
.c-home-top__mockup img {
transition: 3s;
background-color: transparent;
border-width: 0;
border-radius: 0;
}
.c-home-top__mockup video {
transition: 3s;
width: 100%;
height: auto;
margin: 0 auto;
}
.c-home-top__mockup .js-rand-parallax {
position: relative;
transition: 3s;
}
.c-home-top__mockup .js-rand-parallax .gif-mockup {
/* position: absolute; */
top: 0;
left: 0;
}
.c-home-top__logo {
position: absolute;
top: 48%;
transform: translateY(-50%);
z-index: 10;
opacity: 0.95;
}
@media (max-width: 48.115em) {
.c-home-top__logo {
display: none;
}
}
.c-home-top__logo-mobile {
display: none;
}
@media (max-width: 48.115em) {
.c-home-top__logo-mobile {
display: block;
max-width: 130px;
max-height: 90vh;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 1;
margin-top: -80px;
}
}
.c-home-top__scroll {
position: relative;
}
.c-home-top__scroll .page-scroll {
top: -20px;
right: 20px;
}
.c-home-intro {
padding: 60px 0;
}
@media (min-width: 48.125em) {
.c-home-intro {
margin-top: 150px;
padding: 60px 0 0;
}
}
.c-home-intro .page-title {
color: #658d95;
max-width: 100%;
}
@media (min-width: 48.125em) {
.c-home-intro .page-title {
margin-bottom: 60px;
}
}
.c-home-intro .intro-para {
margin-bottom: 30px;
}
.c-home-services {
padding: 50px 0;
}
@media (min-width: 48.125em) {
.c-home-services {
padding: 0px 0 100px;
}
}
.c-home-services__each {
text-align: center;
}
.c-home-services__each img {
max-height: 140px;
max-width: 170px;
width: auto;
height: auto;
margin: 0 auto 30px;
}
.c-home-services__each-title {
text-transform: uppercase;
font-size: 18px;
font-weight: bold;
margin-bottom: 12px;
display: block;
}
.c-home-services__each p {
max-width: 360px;
margin: 0 auto 30px;
}
.c-home-services__each-link {
vertical-align: middle;
text-transform: uppercase;
transition: 0.3s;
font-weight: normal;
}
.c-home-services__each-link svg {
margin-left: 15px;
}
.c-home-services__each-link:hover {
color: #191919;
}
.c-home .c-section {
margin-bottom: 15px;
padding: 55px 0 36px;
}
@media (max-width: 48.115em) {
.c-home .c-section {
padding: 48px 0 24px;
text-align: center;
}
}
.c-home .c-section .o-layout__item {
vertical-align: middle;
}
.c-home .c-section span {
text-transform: uppercase;
display: block;
color: #9c9c9c;
margin-bottom: 24px;
}
.c-home .c-section .cms-content {
padding: 0 24px;
max-width: 520px;
}
@media (min-width: 48.125em) {
.c-home .c-section .cms-content {
margin-top: 150px;
}
}
.c-home .c-section p {
max-width: 540px;
}
.c-home-success {
background-color: #191919;
}
.home .c-home-success {
background: linear-gradient(90deg, #7ed3cb 30%, #658d95 90%);
color: #fff;
border-radius: 5px;
}
.home .c-home-success__images {
position: relative;
}
.home .c-home-success .cms-content span {
color: #fff;
}
.c-home-success .skater-images {
position: relative;
width: 100%;
padding: 0 24px;
}
@media (min-width: 62.5em) {
.c-home-success .skater-images {
margin-left: 50px;
}
}
@media (max-width: 48.115em) {
.c-home-success .skater-images {
overflow: hidden;
display: none;
margin-left: 0;
}
}
.c-home-success .skater-images .mobile {
width: 160px;
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .mobile {
width: 300px;
}
}
.c-home-success .skater-images .skater {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .skater {
opacity: 0;
}
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .skater-1 {
width: 34%;
transform: translate(-65%, -125%);
}
}
.c-home-success .skater-images .skater-2 {
z-index: 1;
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .skater-2 {
width: 34%;
transform: translate(0%, -74%);
}
}
.c-home-success .skater-images .skater-3 {
z-index: 2;
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .skater-3 {
width: 34%;
transform: translate(25%, 18%);
}
}
.c-home-success .skater-images .skater-4 {
z-index: 4;
}
@media (min-width: 48.125em) {
.c-home-success .skater-images .skater-4 {
width: 38%;
transform: translate(21%, -52%);
}
}
.c-home-success .skater-mob-img {
display: none;
}
@media (max-width: 48.115em) {
.c-home-success .skater-mob-img {
display: block;
}
}
.c-home-recipe {
background: #fff;
border-radius: 5px;
}
@media (min-width: 62.5em) {
.c-home-recipe .cms-content {
max-width: 560px !important;
padding-left: 100px !important;
}
}
.c-home-recipe__video-wrap {
position: relative;
top: 0;
display: block;
width: 100%;
overflow: hidden;
}
.c-home-recipe__video {
display: block;
position: relative;
background-clip: border-box;
float: left;
z-index: 2;
height: auto;
width: 100%;
padding: 0;
text-align: center;
}
@media (min-width: 48.125em) {
.c-home-recipe__video {
width: auto;
height: 400px;
}
}
.c-home-marketing {
background: linear-gradient(90deg, #f1c9b6 30%, #ec8085 90%);
color: #fff;
border-radius: 5px;
}
.c-home-marketing .cms-content span {
color: #fff;
}
.c-home-marketing .weight-images {
position: relative;
width: 100%;
overflow: hidden;
}
@media (min-width: 62.5em) {
.c-home-marketing .weight-images {
margin-left: 60px;
}
}
@media (max-width: 48.115em) {
.c-home-marketing .weight-images {
display: none;
}
}
.c-home-marketing .weight-images .main-img {
width: 310px;
}
.c-home-marketing .weight-images .weight {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 48.125em) {
.c-home-marketing .weight-images .weight {
opacity: 0;
}
}
.c-home-marketing .weight-images .weight-1 {
width: 42%;
transform: translate(-71%, -87%);
}
.c-home-marketing .weight-images .weight-2 {
z-index: 1;
width: 54%;
transform: translate(-44%, -52%);
}
.c-home-marketing .weight-images .weight-3 {
z-index: 2;
width: 70%;
transform: translate(-24%, -28%);
}
.c-home-marketing .weight-mob-img {
display: none;
}
@media (max-width: 48.115em) {
.c-home-marketing .weight-mob-img {
display: block;
}
}
@media (min-width: 48.125em) {
.c-home-marketing .cms-content {
margin-top: 150px !important;
}
}
.c-home-about {
padding: 50px 0;
}
@media (min-width: 48.125em) {
.c-home-about__top {
padding-top: 50px;
}
}
.c-home-about__top img {
border-radius: 5px;
margin-bottom: 24px;
}
@media (min-width: 48.125em) {
.c-home-about__top img {
max-width: 360px;
margin-bottom: 0;
}
}
.c-home-about__top-content {
margin-bottom: 24px;
max-width: 650px;
}
@media (min-width: 48.125em) {
.c-home-about__top-content {
margin-top: 80px;
}
}
.c-home-about__slider {
margin-bottom: 50px;
}
.c-home-about__slider .bgimg {
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
border-radius: 5px;
padding-bottom: 60%;
}
@media (min-width: 48.125em) {
.c-home-about__slider .bgimg {
padding-bottom: 34%;
}
}
.c-home-about__list {
text-align: center;
}
@media (min-width: 48.125em) {
.c-home-about__list {
margin-top: 100px;
}
}
.c-home-about__list img {
margin: 0 auto 38px;
max-height: 80px;
width: auto;
}
@media (min-width: 48.125em) {
.c-home-about__list img {
margin-bottom: 90px;
}
}
.c-home-about__metric {
font-size: 50px;
line-height: 0.9;
margin-bottom: 8px;
font-weight: bold;
display: block;
}
.c-home-about .intro-para-extended {
/*display: none;*/
max-width: 830px;
margin-bottom: 24px;
line-height: 1.25;
}
.c-home-clients {
padding: 60px 0 40px;
background-color: #fff;
}
@media (min-width: 48.125em) {
.c-home-clients {
padding: 60px 0;
}
}
@media (min-width: 48.125em) {
.c-home-clients__top {
margin-top: 150px;
}
}
.c-home-clients__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
@media (min-width: 48.125em) {
.c-home-clients__list {
margin-top: 60px;
}
}
@media (min-width: 48.125em) {
.c-home-clients__each {
max-width: 20%;
flex: 20%;
}
}
.c-home-clients__each img {
width: auto;
margin: auto;
max-height: 110px;
filter: brightness(0.1);
}
@media (min-width: 48.125em) {
.c-home-clients__each img {
max-height: 150px;
}
}
@media (max-width: 29.99em) {
.c-home-clients__each img {
max-height: 75px;
}
}
.c-home-contact {
background-color: #fff;
}
.c-contact__top {
position: relative;
}
.c-contact__top .page-scroll {
top: 0;
}
.c-contact__top .cms-content {
max-width: 450px;
padding-right: 24px;
}
.c-contact__top .page-title {
margin-top: 0px;
}
@media (min-width: 48.125em) {
.c-contact__details {
margin-bottom: 100px;
margin-top: 50px;
}
}
.c-contact__details span {
display: block;
margin-bottom: 8px;
}
.c-contact__details a {
font-size: 30px;
font-weight: bold;
margin-bottom: 24px;
display: inline-block;
}
@media (max-width: 37.49em) {
.c-contact__details a {
font-size: 24px;
}
}
.c-contact h2 {
margin-bottom: 24px;
}
.c-contact__bottom {
display: flex;
}
.c-contact__image {
flex: 30%;
}
@media (max-width: 48.115em) {
.c-contact__image {
display: none;
}
}
.c-contact__walkthrough {
max-width: 400px;
}
.c-contact__walkthrough a:first-child {
display: block;
margin-bottom: 30px;
border-radius: 5px;
overflow: hidden;
}
.c-contact__form {
padding: 48px;
flex: 70%;
padding-left: 100px;
}
@media (min-width: 48.125em) {
.c-contact__form {
margin-top: 50px;
}
}
@media (min-width: 100em) {
.c-contact__form {
padding-left: 120px;
}
}
@media (max-width: 48.115em) {
.c-contact__form {
padding: 24px;
}
}
.c-contact__form .wpcf7 {
max-width: 780px;
}
.c-contact .c-images-layout {
padding: 50px 0;
}
@media (min-width: 48.125em) {
.c-contact .c-images-layout {
padding: 100px 0;
}
}
.c-about-top {
margin-bottom: 60px;
position: relative;
}
.c-about-top .page-scroll {
right: 20px;
}
@media (min-width: 48.125em) {
.c-about-top .page-scroll {
right: 0;
}
}
@media (min-width: 48.125em) {
.c-about-top {
display: flex;
justify-content: center;
}
}
@media (min-width: 48.125em) and (min-width: 100em) {
.c-about-top {
max-width: 1320px;
margin: 0 auto;
}
}
@media (max-width: 48.115em) {
.c-about-top {
padding: 0 24px 24px;
margin-bottom: 0;
}
}
@media (min-width: 48.125em) {
.c-about-top__content {
align-self: flex-start;
padding-right: 60px;
flex: 70%;
}
}
@media (min-width: 100em) {
.c-about-top__content {
padding-right: 80px;
max-width: 820px;
}
}
@media (max-width: 48.115em) {
.c-about-top__content {
padding: 0;
padding-right: 30px;
}
}
.c-about-top__content .cms-content {
max-width: 600px;
}
@media (min-width: 48.125em) {
.c-about-top__content .cms-content p:last-of-type {
margin-bottom: 0;
}
}
.c-about-top__image {
background-size: cover;
width: 100%;
height: 100%;
padding-bottom: 100%;
background-position: center;
}
@media (min-width: 48.125em) {
.c-about-top__image {
padding-bottom: 50%;
flex: 30%;
}
}
@media (min-width: 100em) {
.c-about-top__image {
max-width: 500px;
flex: auto;
}
}
.c-about-team {
padding: 50px 0 24px;
}
@media (min-width: 48.125em) {
.c-about-team {
padding: 100px 0 0;
}
}
.c-about-team h2 {
font-weight: normal;
margin-bottom: 36px;
}
.c-about-team__types {
position: relative;
z-index: 10;
margin-bottom: 12px;
}
@media (min-width: 48.125em) {
.c-about-team__types {
margin-bottom: 80px;
}
}
.c-about-team__types a {
opacity: 0.5;
display: inline-block;
transition: 0.3s;
margin-bottom: 18px;
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
}
.c-about-team__types a:not(:last-of-type) {
margin-right: 24px;
}
.c-about-team__types a:hover, .c-about-team__types a.active {
opacity: 1;
}
.c-about-team__list {
display: flex;
flex-wrap: wrap;
align-self: baseline;
animation: fade-in-fwd 0.5s ease-in;
text-align: center;
}
@media (min-width: 48.125em) {
.c-about-team__list {
margin-bottom: 100px;
}
}
.c-about-team__each {
flex: 100%;
padding: 12px;
max-width: 250px;
position: relative;
}
@media (min-width: 62.5em) {
.c-about-team__each {
display: flex;
}
}
@media (min-width: 37.5em) {
.c-about-team__each {
flex: 50%;
max-width: 315px;
width: 100%;
}
}
@media (min-width: 62.5em) {
.c-about-team__each {
flex: 50%;
max-width: 50%;
}
}
@media (min-width: 62.5em) {
.c-about-team__each:nth-child(4n + 1) {
align-self: baseline;
}
}
.c-about-team__each:nth-child(4n + 1).animate {
animation-delay: 0.2s;
}
@media (min-width: 37.5em) {
.c-about-team__each:nth-child(4n + 2) {
margin-top: 15%;
}
}
@media (min-width: 62.5em) {
.c-about-team__each:nth-child(4n + 2) {
align-self: flex-end;
justify-content: flex-end;
}
}
@media (max-width: 62.49em) {
.c-about-team__each:nth-child(4n + 2) {
margin-left: auto;
}
}
.c-about-team__each:nth-child(4n + 2).animate {
animation-delay: 0.3s;
}
@media (min-width: 62.5em) and (max-width: 48.115em) {
.c-about-team__each:nth-child(4n + 2) {
margin-left: 24px;
}
}
@media (min-width: 62.5em) {
.c-about-team__each:nth-child(4n + 3) {
align-self: flex-end;
justify-content: flex-end;
}
.c-about-team__each:nth-child(4n + 3):not(:last-of-type) {
margin-bottom: 100px;
}
}
.c-about-team__each:nth-child(4n + 3).animate {
animation-delay: 0.4s;
}
@media (min-width: 37.5em) {
.c-about-team__each:nth-child(4n + 4) {
margin-top: 10%;
align-self: flex-end;
justify-content: flex-end;
}
}
.c-about-team__each:nth-child(4n + 4).animate {
animation-delay: 0.5s;
}
@media (max-width: 62.49em) {
.c-about-team__each:nth-child(4n + 4) {
margin-left: auto;
}
}
.c-about-team__info {
padding: 24px 0;
text-align: left;
}
@media (min-width: 62.5em) {
.c-about-team__info {
flex: 50%;
align-self: flex-end;
padding-left: 48px;
margin-bottom: 60px;
max-width: 100%;
}
}
.c-about-team__info span {
display: block;
}
.c-about-team__info span.name {
font-size: 30px;
line-height: 1.2;
font-weight: bold;
}
@media (max-width: 62.49em) {
.c-about-team__info span.name {
display: inline-block;
font-size: 24px;
}
.c-about-team__info span.name:not(:last-of-type) {
margin-right: 5px;
}
}
.c-about-team__img {
background-size: cover;
max-width: 270px;
width: 100%;
padding-bottom: 81.7%;
background-position: top center;
flex: 50%;
}
@media (max-width: 62.49em) {
.c-about-team__img {
padding-bottom: 150%;
max-width: 100%;
}
}
.c-about-team__btn {
font-size: 16px;
text-transform: uppercase;
margin-top: 18px;
display: inline-block;
font-weight: normal;
}
.c-about-team__btn svg {
width: 11px;
height: 11px;
margin-left: 10px;
}
.c-about-team__bio {
display: none;
background-color: #fff;
position: absolute;
height: 95%;
overflow: scroll;
top: 12px;
padding: 20px;
left: 50%;
margin-left: 10px;
animation: fade-in-fwd 0.5s ease-in;
}
.c-about-team__bio .js-about-bio__close {
margin-top: 0;
}
@media (max-width: 62.49em) {
.c-about-team__bio {
top: 0;
left: 0;
width: 95%;
font-size: 16px;
}
}
.c-about-values {
background-color: #f1c9b6;
color: #fff;
line-height: 1.4;
padding: 60px 0 20px;
margin-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-about-values {
padding: 100px 0 80px;
}
}
@media (min-width: 48.125em) {
.c-about-values .page-title-alt {
font-size: 78px;
}
}
.c-about-values .o-module__item {
align-items: center;
}
@media (min-width: 48.125em) {
.c-about-values .o-module__item:nth-child(1) {
order: 1;
}
.c-about-values .o-module__item:nth-child(2) {
order: 0;
}
.c-about-values .o-module__item:nth-child(n + 3) {
order: 2;
}
}
.c-about-values__section {
max-width: 530px;
margin-bottom: 20px;
}
@media (min-width: 48.125em) {
.c-about-values__section {
margin-bottom: 50px;
}
}
.c-about-values__section-label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
.c-about-values__section p {
margin-bottom: 0;
}
.c-about-history {
padding: 0 0 50px;
}
@media (min-width: 48.125em) {
.c-about-history {
padding: 50px 0px;
}
}
.c-about-history h2 {
margin-bottom: 50px;
}
@media (max-width: 48.115em) {
.c-about-history__years {
display: flex;
flex-wrap: wrap;
}
}
.c-about-history__years a {
display: inline-block;
flex: 1 0 20%;
width: 100%;
font-size: 22px;
font-weight: 500;
opacity: 0.5;
transition: 0.3s;
margin-bottom: 24px;
padding-right: 12px;
line-height: 1;
font-weight: bold;
}
@media (min-width: 48.125em) {
.c-about-history__years a {
text-align: left;
max-width: 100%;
width: auto;
margin-bottom: 42px;
margin-right: 0;
}
}
@media (max-width: 37.49em) {
.c-about-history__years a {
flex: calc(50% - 24px);
}
}
@media (min-width: 62.5em) {
.c-about-history__years a {
font-size: 30px;
}
}
.c-about-history__years a:hover {
opacity: 1;
}
.c-about-history__years a.year-active {
opacity: 1;
animation: fade-in 1s;
}
.c-about-history__events {
height: 600px;
overflow-y: hidden;
position: relative;
padding-right: 30px;
}
@media (min-width: 62.5em) {
.c-about-history__events {
padding-right: 130px;
}
}
.c-about-history__events:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(0deg, #f6f6f5 0%, rgba(246, 246, 245, 0) 102.41%);
}
.c-about-history__events-nav {
position: absolute;
top: 15px;
right: 40px;
width: 30px;
height: auto;
text-align: center;
}
@media (max-width: 62.49em) {
.c-about-history__events-nav {
right: 0px;
}
}
.c-about-history__events-nav a {
display: inline-block;
color: #191919;
transition: 0.3s;
}
.c-about-history__events-nav a.disabled {
pointer-events: none;
opacity: 0.5;
}
.c-about-history__events-nav a:hover {
transform: translateY(3px);
}
.c-about-history__events-nav a.prev svg {
transform: rotate(180deg);
}
.c-about-history__events-nav a svg {
width: 25px;
height: 25px;
}
.c-about-history__events-nav a:not(:last-of-type) {
margin-bottom: 12px;
}
.c-about-history__events-each {
width: 100% !important;
border-bottom: 2px solid #191919;
margin-bottom: 20px;
}
@media (min-width: 48.125em) {
.c-about-history__events-each {
margin-bottom: 40px;
}
}
.c-about-history__events-each h6 {
margin-bottom: 10px;
color: #191919;
}
.c-about-history__events-each p {
margin-bottom: 20px;
}
.c-about-history__events-each.event-active {
opacity: 1;
}
.c-about-history__events-each.event-active ~ .c-about-history__events-each {
display: block;
opacity: 0.6;
}
.c-about-history__image img.js-event-img {
border-radius: 5px;
}
@media (min-width: 62.5em) {
.c-about-history__image img.js-event-img {
max-width: 450px;
max-height: 500px;
width: auto;
height: auto;
}
}
.c-about-images {
margin: 0 -10px;
}
.c-about .cycle-next {
position: absolute;
right: 0px;
top: 30px;
z-index: 999;
width: 20px;
height: 20px;
cursor: pointer;
}
@media (min-width: 48.125em) {
.c-about .cycle-next {
right: 90px;
}
}
.c-about .cycle-next svg {
width: 15px;
height: 15px;
}
.c-about-career {
padding: 50px 0 24px;
}
@media (min-width: 48.125em) {
.c-about-career {
padding: 100px 0 0;
}
}
.c-about-career__testimonial {
padding: 0 !important;
display: inline-block;
width: 100%;
position: relative;
color: #7ed3cb;
margin-bottom: 48px;
margin-top: 24px;
}
@media (min-width: 48.125em) {
.c-about-career__testimonial .center-content .c-quotes__list-eachinner {
top: 0 !important;
transform: none;
}
}
@media (max-width: 48.115em) {
.c-about-career__testimonial .c-quotes__list-each {
text-align: left;
}
}
.c-about-middle-section {
width: 100%;
position: relative;
margin-bottom: 48px;
}
@media (min-width: 48.125em) {
.c-about-middle-section {
display: flex;
}
}
.c-about-middle-section h3 {
position: relative;
z-index: 10;
}
.c-about-middle-section__slider {
width: 100%;
margin-bottom: 30px;
}
@media (min-width: 48.125em) {
.c-about-middle-section__slider {
flex: 40%;
width: 100%;
max-width: 460px;
margin-left: 30px;
}
}
.c-about-middle-section__content {
position: relative;
z-index: 10;
}
@media (min-width: 48.125em) {
.c-about-middle-section__content {
flex: 60%;
max-width: 100%;
width: 730px;
padding: 48px 24px;
}
}
.c-about-middle-section__content p {
max-width: 500px;
}
.c-about-middle-section__images {
width: 100% !important;
position: relative;
padding-bottom: 30px;
height: 400px;
}
@media (min-width: 48.125em) {
.c-about-middle-section__images {
flex: 50%;
max-width: 100%;
}
}
.c-about-middle-section__images .c-slide {
padding-right: 30px;
}
@media (min-width: 62.5em) {
.c-about-middle-section__images .c-slide {
padding-right: 100px;
}
}
.c-about-middle-section__images img {
max-height: 380px;
max-width: 340px;
height: auto;
width: auto;
border-radius: 5px;
}
.c-about-middle-section__images .cycle-next {
top: 50%;
transform: translateY(-50%);
color: #fff;
}
.c-about-middle-section__images .cycle-pager {
position: absolute;
bottom: 0;
margin-top: 48px;
max-width: 340px;
display: flex;
text-align: left;
}
.c-about-middle-section__images .cycle-pager span {
height: 2px;
width: 100%;
background: #7ed3cb;
padding: 0px 32px;
line-height: 0;
color: transparent;
font-size: 2px;
border-radius: 7px;
}
.c-about-middle-section__images .cycle-pager span.cycle-pager-active {
background-color: #191919;
}
@media (min-width: 48.125em) {
.c-about-positions {
margin-bottom: 24px;
margin-top: 100px;
}
}
.c-about-positions h2 {
text-align: center;
}
.c-about-positions__list {
padding-top: 24px;
}
.c-about-positions__list-item {
display: inline-block;
}
@media (min-width: 48.125em) {
.c-about-positions__list-item {
margin-bottom: 18px;
}
}
@media (max-width: 48.115em) {
.c-about-positions__list-item {
padding: 0;
}
}
@media (min-width: 48.125em) {
.c-about-positions__list .swiper-controls {
display: none;
}
}
.c-about-positions .bgimg {
background-size: cover;
padding-bottom: 70%;
display: inline-block;
width: 100%;
background-position: center;
position: relative;
border-radius: 5px;
color: #fff;
}
@media (max-width: 48.115em) {
.c-about-positions .bgimg {
padding-bottom: 55%;
}
}
.c-about-positions .bgimg:after {
content: "";
top: 0;
left: 0;
background: linear-gradient(360deg, #191919 0%, rgba(25, 25, 25, 0) 100%);
width: 100%;
height: 100%;
position: absolute;
border-radius: 5px;
}
.c-about-positions .bgimg h5 {
position: absolute;
bottom: 0;
padding: 24px;
z-index: 10;
text-align: left;
margin-bottom: 0;
}
@media (max-width: 71.865em) {
.c-about-positions .bgimg h5 {
font-size: 24px;
}
}
.c-about-positions__seeall {
color: #191919 !important;
border: 1px solid #191919;
background-color: transparent;
}
.c-about-positions__seeall:after {
display: none;
}
.c-about-bottom {
text-align: center;
}
@media (max-width: 48.115em) {
.c-about-bottom h2 {
font-size: 26px;
}
}
.c-blogs__header {
position: relative;
padding-bottom: 30px;
}
.c-blogs__header .page-scroll {
top: 0;
}
.c-blogs__header .cms-content {
max-width: 650px;
}
.c-blogs-top {
background-color: #f1c9b6;
display: flex;
align-items: center;
margin: 50px 0 15px;
border-radius: 5px;
}
@media (max-width: 48.115em) {
.c-blogs-top {
margin: 0px 0 24px;
flex-direction: column;
}
}
.c-blogs-top__img {
max-width: 450px;
background-size: cover;
background-position: center;
height: 100%;
width: 100%;
padding-bottom: 40%;
border-radius: 5px 0 0 5px;
}
@media (max-width: 62.49em) {
.c-blogs-top__img {
padding-bottom: 50%;
}
}
@media (max-width: 48.115em) {
.c-blogs-top__img {
max-width: 100%;
border-radius: 5px 5px 0 0;
}
}
.c-blogs-top__content {
padding: 24px;
color: #fff;
}
@media (min-width: 48.125em) {
.c-blogs-top__content {
padding: 24px;
padding-left: 80px;
max-width: 650px;
margin-top: 100px;
}
}
.c-blogs-top__content-tag {
text-transform: uppercase;
font-weight: normal;
font-size: 16px;
margin-bottom: 20px;
}
.c-blogs .o-layout {
margin-left: -15px;
}
.c-blogs .o-layout__item {
padding-left: 15px;
}
.c-blogs__top-stories {
background: #fff;
padding: 24px 12px;
border-radius: 5px;
}
.c-blogs__top-stories--title {
font-size: 14px;
font-weight: normal;
text-transform: uppercase;
margin-bottom: 24px;
padding: 0 12px;
}
.c-blogs__top-stories--list {
display: flex;
flex-wrap: wrap;
}
.c-blogs__top-stories--list .c-blogs-list__inner {
display: inline-block;
height: 100%;
flex: 100%;
overflow: hidden;
padding: 6px;
}
@media (min-width: 37.5em) {
.c-blogs__top-stories--list .c-blogs-list__inner {
flex: 50%;
max-width: 50%;
padding: 12px;
}
}
.c-blogs__top-stories--list .c-blogs-list__inner .c-blogs-list__img {
padding-bottom: 41.6%;
margin-bottom: 12px;
}
.c-blogs__top-stories--list .c-blogs-list__inner:hover h4 {
opacity: 0.75;
}
.c-blogs__top-stories--list .c-blogs-list__inner:hover .c-blogs-list__img {
transform: scale(1.03);
}
.c-blogs h4 {
margin-bottom: 6px;
font-weight: normal;
font-weight: normal;
line-height: 1.15;
transition: 0.3s;
}
@media (max-width: 48.115em) {
.c-blogs h4 {
font-size: 18px;
}
}
.c-blogs__featured-posts .c-blogs-list__inner {
background: #fff;
border-radius: 5px;
display: flex;
font-size: 0;
margin-bottom: 15px;
}
.c-blogs__featured-posts .c-blogs-list__img {
border-radius: 0 5px 5px 0;
margin-bottom: 0;
padding-bottom: 41.6%;
flex: 0;
}
@media (min-width: 37.5em) {
.c-blogs__featured-posts .c-blogs-list__img {
flex: 50%;
}
}
.c-blogs__featured-posts .c-blogs-list__content {
align-self: center;
padding: 24px;
max-width: 360px;
flex: 50%;
}
.c-blogs__categories {
padding-top: 20px;
}
.c-blogs__categories a {
opacity: 0.5;
display: inline-block;
transition: 0.3s;
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
margin-bottom: 12px;
}
.c-blogs__categories a:not(:last-of-type) {
margin-right: 24px;
}
.c-blogs__categories a:hover, .c-blogs__categories a.active {
opacity: 1;
}
.c-blogs__listing {
padding: 50px 0;
}
@media (min-width: 48.125em) {
.c-blogs__listing {
padding: 100px 0;
}
}
.c-blogs .new-tag {
background-color: #ec8085;
color: #fff;
padding: 6px 9px;
line-height: 0.85;
text-align: center;
border-radius: 5px;
}
.c-blogs-list {
padding-top: 36px;
}
.c-blogs-list__img {
background-color: #cccccc;
background-position: center;
background-size: cover;
padding-bottom: 54%;
border-radius: 5px;
width: 100%;
height: 100%;
margin-bottom: 20px;
transition: 0.3s;
overflow: hidden;
}
.c-blogs-list__cate {
text-transform: uppercase;
font-weight: normal;
font-size: 16px;
line-height: 1;
margin-bottom: 20px;
}
.c-blogs-list h4, .c-blogs-list__heading {
margin-bottom: 6px;
font-weight: normal;
font-weight: normal;
line-height: 1.15;
transition: 0.3s;
font-size: 20px;
}
.c-blogs-list__container {
position: relative;
overflow: hidden;
}
.c-blogs-list__container:hover h6 {
opacity: 0.75;
}
.c-blogs-list__container:hover .c-blogs-list__img {
transform: scale(1.03);
}
.c-blogs__pagination {
text-align: center;
display: inline-block;
width: 100%;
margin: 50px 0 0px;
}
@media (min-width: 48.125em) {
.c-blogs__pagination {
margin: 60px 0;
}
}
.c-blogs__pagination-pages {
display: inline-block;
padding: 0 60px;
}
.c-blogs__pagination-pages a {
font-size: 16px;
color: #9c9c9c;
line-height: 1;
transition: 0.3s;
}
.c-blogs__pagination-pages a:not(:last-of-type) {
margin-right: 24px;
}
.c-blogs__pagination-pages a.is-active {
color: #191919;
}
.c-blogs__pagination-pages span {
margin-right: 24px;
color: #9c9c9c;
}
.c-blogs__pagination-arrows {
display: inline-block;
transition: 0.3s;
}
.c-blogs__pagination-arrows svg {
width: 15px;
height: 15px;
}
.c-blogs__pagination-arrows:hover {
opacity: 0.75;
transform: scale(1.08);
}
.c-quotes {
padding: 20px 0;
background-color: #f6f6f5;
color: #7ed3cb;
}
@media (min-width: 48.125em) {
.c-quotes {
padding: 120px 0;
}
}
.c-quotes__name {
font-weight: 700;
margin-bottom: 0;
}
.c-quotes__list {
display: inline-block;
width: 100%;
position: relative;
}
.c-quotes__list-each {
width: 100%;
text-align: center;
}
.c-quotes__list-each h2 {
line-height: 1.25;
max-width: 95%;
font-weight: bold;
margin-bottom: 24px;
}
@media (max-width: 71.865em) {
.c-quotes__list-each h2 {
font-size: 24px;
}
}
@media (min-width: 48.125em) {
.c-quotes__list-each {
text-align: left;
padding-right: 100px;
}
}
.center-content .c-quotes__list-eachinner {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
width: 100%;
}
@media (min-width: 48.125em) {
.center-content .c-quotes__list-eachinner {
width: calc(100% - 100px);
}
}
.c-quotes__list .cycle-next {
position: absolute;
right: 0px;
top: 50%;
transform: translateY(-50%);
z-index: 999;
width: 20px;
height: 20px;
cursor: pointer;
}
@media (min-width: 48.125em) {
.c-quotes__list .cycle-next {
right: 90px;
}
}
.c-quotes__list .cycle-next svg {
width: 15px;
height: 15px;
}
@media (max-width: 48.115em) {
.c-quotes__list .cycle-next {
display: none;
}
}
.c-blog {
position: relative;
}
.c-blog__sidelinks {
display: block;
position: relative;
font-size: 16px;
font-weight: normal;
text-transform: uppercase;
line-height: 1;
}
@media (max-width: 62.49em) {
.c-blog__sidelinks {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 36px;
}
}
@media (max-width: 62.49em) {
.c-blog__sidelinks-sharelinks {
text-align: right;
flex: auto;
}
}
@media (min-width: 62.5em) {
.c-blog__sidelinks-sharelinks {
text-align: center;
position: absolute;
top: 0px;
right: 20px;
}
}
@media (min-width: 62.5em) and (min-width: 71.875em) {
.c-blog__sidelinks-sharelinks {
right: 60px;
}
}
.c-blog__sidelinks-sharelinks a {
display: inline-block;
line-height: 0;
vertical-align: middle;
margin-right: 6px;
}
@media (min-width: 62.5em) {
.c-blog__sidelinks-sharelinks a {
display: block;
margin-bottom: 12px;
margin-right: 0;
}
}
.c-blog__sidelinks-sharelinks a svg {
width: 18px;
height: 18px;
transition: 0.3s;
}
.c-blog__sidelinks-sharelinks a:hover svg {
opacity: 0.75;
transform: scale(1.1);
}
.c-blog__sidelinks-sharelinks span {
display: inline-block;
}
@media (min-width: 62.5em) {
.c-blog__sidelinks-sharelinks span {
margin-top: 28px;
transform: rotate(-90deg);
transform-origin: center;
}
}
.c-blog__sidelinks-back {
display: inline-block;
}
@media (min-width: 62.5em) {
.c-blog__sidelinks-back {
position: absolute;
top: 100px;
left: 35px;
}
}
@media (min-width: 62.5em) and (min-width: 71.875em) {
.c-blog__sidelinks-back {
left: 65px;
}
}
.c-blog__sidelinks-back a {
display: inline-block;
text-align: center;
margin: 0;
transition: 0.3s;
}
@media (min-width: 62.5em) {
.c-blog__sidelinks-back a {
transform: rotate(-90deg);
transform-origin: 0 0;
}
}
.c-blog__sidelinks-back a:hover {
opacity: 0.75;
}
.c-blog__top {
text-align: center;
position: relative;
margin-bottom: 36px;
}
@media (min-width: 48.125em) {
.c-blog__top {
margin-bottom: 100px;
}
}
.c-blog__top h1 {
line-height: 1.1;
margin-bottom: 24px;
font-size: 32px;
}
@media (min-width: 48.125em) {
.c-blog__top h1 {
font-size: 48px;
margin-bottom: 80px;
}
}
.c-blog__banner {
background-position: center;
background-size: cover;
padding-bottom: 42.78%;
}
.c-blog .c-cms-content {
margin-bottom: 36px;
}
@media (min-width: 48.125em) {
.c-blog .c-cms-content {
margin-bottom: 80px;
}
}
.c-blog .c-cms-content p:first-child::first-letter {
font-size: 60px;
font-weight: bold;
color: #7ed3cb;
text-transform: uppercase;
vertical-align: top;
line-height: 0.75;
float: left;
margin-top: 8px;
margin-bottom: 0;
margin-right: 6px;
}
.is-firefox .c-blog .c-cms-content p:first-child::first-letter {
margin-top: 6px;
}
.c-blog .c-cms-content h2,
.c-blog .c-cms-content h3,
.c-blog .c-cms-content h3,
.c-blog .c-cms-content h4,
.c-blog .c-cms-content h5,
.c-blog .c-cms-content h6 {
margin-bottom: 24px;
}
.c-blog .c-cms-content h5 {
font-size: 20px;
}
@media (min-width: 48.125em) {
.c-blog .c-cms-content h5 {
font-size: 24px;
}
}
.c-blog .c-cms-content h2,
.c-blog .c-cms-content h3,
.c-blog .c-cms-content h4 {
font-size: 30px;
}
@media (min-width: 48.125em) {
.c-blog .c-cms-content h2,
.c-blog .c-cms-content h3,
.c-blog .c-cms-content h4 {
font-size: 36px;
}
}
.c-blog .c-cms-content a {
color: #ec8085;
}
.c-blog .c-cms-content img {
width: 100%;
height: auto;
}
.c-blog__nextpost {
position: relative;
background-image: url("../img/postnextbg.jpg");
background-size: cover;
background-position: center;
padding: 48px 24px;
border-radius: 5px;
color: #fff;
z-index: 1;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-blog__nextpost {
margin-bottom: 100px;
}
}
.c-blog__nextpost:after {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, #191919 15%, rgba(244, 244, 244, 0) 100%);
border-radius: 5px;
z-index: -1;
}
.c-blog__nextpost-info {
max-width: 950px;
margin: auto;
}
.c-blog__nextpost-info h3 {
max-width: 365px;
margin-bottom: 24px;
font-size: 24px;
}
@media (min-width: 48.125em) {
.c-blog__nextpost-info h3 {
font-size: 36px;
}
}
.c-blog__nextpost-info a {
text-transform: uppercase;
color: #fff;
font-weight: normal;
}
.c-blog__nextpost-info a svg {
width: 13px;
height: 13px;
margin-left: 6px;
}
.c-project p {
margin-bottom: 24px;
}
.c-project-top {
position: relative;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-project-top {
margin-bottom: 80px;
}
}
.c-project-top__prevnext {
position: relative;
display: block;
}
@media (max-width: 48.115em) {
.c-project-top__prevnext {
display: none;
}
}
.c-project-top__prevnext a {
position: absolute;
text-transform: uppercase;
transform: rotate(-90deg);
color: #658d95;
display: block;
font-weight: normal;
}
.c-project-top__prevnext .prev {
top: 180px;
left: 20px;
transform-origin: left;
}
.c-project-top__prevnext .next {
right: 20px;
top: 0;
transform-origin: right;
}
.c-project-top__content {
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-project-top__content {
margin: auto;
max-width: 75%;
margin-bottom: 80px;
}
}
.c-project-top__content .label {
text-transform: uppercase;
margin-bottom: 12px;
font-weight: normal;
}
.c-project-top__name {
font-weight: bold;
padding: 0 5px;
}
.c-project-top__cate {
padding: 0 5px;
}
.c-project-top .bgimg {
width: 100%;
background-size: cover;
background-position: center;
border-radius: 5px;
padding-bottom: 46.6%;
}
@media (min-width: 48.125em) {
.c-project-top .bgimg {
padding-bottom: 32.5%;
}
}
.c-project .bgimg-max {
max-width: 100%;
}
.c-project__contents {
position: relative;
z-index: 10;
}
@media (min-width: 48.125em) {
.c-project__two-column-content-bg .c-project__contents,
.c-project__content-image .c-project__contents {
margin-top: 0px;
}
}
.c-project__intro-content {
max-width: 935px;
margin: auto;
}
.c-project__intro-content p:first-child::first-letter {
font-size: 60px;
font-weight: bold;
color: #7ed3cb;
text-transform: uppercase;
vertical-align: top;
line-height: 0.75;
float: left;
margin-top: 8px;
margin-bottom: 0;
margin-right: 6px;
}
.is-firefox .c-project__intro-content p:first-child::first-letter {
margin-top: 6px;
}
.c-project__intro-content img {
max-width: 100% !important;
max-height: 100% !important;
height: auto;
border-radius: 0 !important;
}
.c-project__content-image-bg {
width: 100%;
background-color: #ddd;
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
color: #fff;
}
.c-project__content-image-bg:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-project__content-image-bg--content {
margin-top: 24px;
}
.c-project__content-image-bg--content .o-layout__item {
margin-bottom: 0;
}
.c-project__content-image-bg.black .cms-content,
.c-project__content-image-bg.black h2 {
color: #fff;
}
.c-project__content-image-bg.white .cms-content,
.c-project__content-image-bg.white h2 {
color: #000;
}
.c-project__two-column-content-bg .two_column_content {
background: rgba(255, 255, 255, 0.04);
margin-bottom: 0;
}
.c-project__two-column-content-bg .two_column_content p:last-child {
margin-bottom: 0;
}
@media (max-width: 48.115em) {
.c-project__two-column-content-bg .two_column_content .cms-content {
margin-left: auto;
margin-right: auto;
}
}
.c-project__two-column-content-bg .two_column_content h2 {
max-width: 460px;
}
@media (max-width: 48.115em) {
.c-project__two-column-content-bg .two_column_content h2 {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.c-project__two-column-content-bg.black .two-column-metrics {
color: #fff;
}
.c-project__two-column-content-bg.white .two-column-metrics {
color: #000;
}
.c-project__two-column-content-bg .two-column-metrics {
padding-left: 48px;
}
@media (max-width: 48.115em) {
.c-project__two-column-content-bg .two-column-metrics {
padding-left: 0;
}
}
.c-project__content-bg, .c-project__two-column-content-bg {
width: 100%;
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
background-color: #ddd;
}
.c-project__content-bg:after, .c-project__two-column-content-bg:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.c-project__content-bg.black .cms-content,
.c-project__content-bg.black h2, .c-project__two-column-content-bg.black .cms-content,
.c-project__two-column-content-bg.black h2 {
color: #fff;
}
.c-project__content-bg--content img, .c-project__two-column-content-bg--content img {
max-width: 365px;
margin: auto;
}
.c-project__content-bg--content:after, .c-project__two-column-content-bg--content:after {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width: 48.125em) {
.c-project__content-bg--content .c-project__contents, .c-project__two-column-content-bg--content .c-project__contents {
padding-left: 48px;
}
}
.c-project__content-image-left {
position: relative;
}
@media (min-width: 48.125em) {
.c-project__content-image-left--content .c-project__contents {
padding-left: 48px;
}
}
.c-project__content-image-left .overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.c-project__content-image-left.white * {
color: #fff;
}
.c-project__content-image {
position: relative;
}
.c-project__content-image div.o-layout__item {
margin-bottom: 0;
}
.c-project__content-image p:last-child {
margin-bottom: 0;
}
.c-project__content-image .c-project__contents h2 {
margin-top: 36px;
}
@media (min-width: 48.125em) {
.c-project__content-image .c-project__contents h2 {
margin-top: 0px;
}
}
.c-project__content-image .overlay {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
.c-project__content-image.white * {
color: #fff;
}
.c-project__nextpost {
position: relative;
background-image: url("../img/postnextbg.jpg");
background-size: cover;
background-position: center;
padding: 48px 24px;
border-radius: 5px;
color: #fff;
z-index: 1;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-project__nextpost {
margin-bottom: 100px;
}
}
.c-project__nextpost:after {
content: "";
top: 0;
left: 0;
position: absolute;
width: 100%;
height: 100%;
background: linear-gradient(90deg, rgba(40, 84, 92, 0.95) 40%, rgba(246, 246, 245, 0) 100%);
border-radius: 5px;
z-index: -1;
}
.c-project__nextpost-info {
max-width: 950px;
margin: auto;
}
.c-project__nextpost-info h3 {
max-width: 365px;
margin-bottom: 24px;
font-size: 24px;
font-weight: bold;
}
@media (min-width: 48.125em) {
.c-project__nextpost-info h3 {
font-size: 36px;
}
}
.c-project__nextpost-info h4 {
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
}
.c-project__nextpost-info a {
text-transform: uppercase;
color: #fff;
font-weight: normal;
}
.c-project__nextpost-info a svg {
width: 13px;
height: 13px;
margin-left: 6px;
}
.c-project .c-section {
margin-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-project .c-section {
margin-bottom: 80px;
}
}
.c-project .c-section .o-wrapper {
position: relative;
z-index: 10;
}
.c-project .c-section .o-layout__item {
vertical-align: middle;
}
.c-project .c-section ul {
margin-left: 20px;
}
@media (min-width: 48.125em) {
.c-project .c-section .cms-content {
max-width: 460px;
}
}
.c-project .c-section .cms-content ul {
margin-bottom: 36px;
}
@media (min-width: 48.125em) {
.c-project .c-section .cms-content ul {
margin-bottom: 0;
}
}
.c-project .c-section .cms-content ul li {
margin-bottom: 10px;
}
.c-project .c-section .cms-content ul li:last-child {
margin-bottom: 0;
}
.c-project .c-section.c-project__content-image {
margin-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-project .c-section.c-project__content-image {
margin-bottom: 100px;
}
}
.c-project .c-section .c-metrics {
display: flex;
flex-direction: column;
flex-wrap: wrap;
padding-top: 24px;
}
.c-project .c-section .c-metrics__each:not(:last-of-type) {
margin-right: 36px;
}
@media (max-width: 48.115em) {
.c-project .c-section .c-metrics__each {
max-width: auto;
}
.c-project .c-section .c-metrics__each:not(:last-of-type) {
margin-right: 12px;
}
}
.c-project .c-section .c-metrics h4 {
font-weight: bold;
color: #7ed3cb;
line-height: 0.9;
margin-bottom: 5px;
}
.c-project .c-section .c-metrics p {
padding: 0;
margin-bottom: 24px;
}
.c-project .c-section img {
border-radius: 5px;
}
@media (min-width: 37.5em) {
.c-project .c-section img {
max-height: 592px;
max-width: 100%;
width: auto;
height: auto;
margin: auto;
}
}
.c-project .c-quotes {
padding: 0;
}
.c-project .c-quotes__list-each {
text-align: left;
padding-right: 0px;
}
.c-project .c-quotes__list-each h2 {
max-width: 100%;
}
.c-project .c-quotes__list-each blockquote {
font-family: inherit;
font-style: normal;
margin-bottom: 24px;
}
.c-project .c-quotes__list-each blockquote:before {
display: none;
}
.c-project .c-quotes__list-each blockquote:after {
display: none;
}
.c-project .page-contact-bottom {
margin-bottom: 0;
}
.c-project .beforeAfterHolder {
padding-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-project .beforeAfterHolder {
padding-bottom: 80px;
}
}
.c-project .c-compare-slider {
position: relative;
overflow: hidden;
}
.c-project .c-compare-slider img {
width: 100%;
display: block;
max-width: initial !important;
}
.c-project .c-compare-slider .resize {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 50%;
overflow: hidden;
}
.c-project .c-compare-slider .handle {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
margin-left: -2px;
background: rgba(0, 0, 0, 0.7);
cursor: ew-resize;
}
.c-project .c-compare-slider .handle__prompt {
width: 120px;
margin-left: -140px;
margin-top: 30px;
}
@media (max-width: 79.99em) {
.c-project .c-compare-slider .handle__prompt {
margin-top: 10px;
}
}
.c-project .c-compare-slider .handle__prompt:after {
content: "";
height: 50px;
width: 75px;
}
.c-project .c-compare-slider .handle:after {
position: absolute;
top: 50%;
width: 30px;
height: 30px;
margin: -15px 0 0 -15px;
background-image: url("../img/compare-arrows.png");
content: "";
color: white;
font-weight: bold;
font-size: 36px;
text-align: center;
line-height: 30px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
border-radius: 50%;
transition: all 0.3s ease;
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.25);
}
@media (min-width: 48.125em) {
.c-project .c-compare-slider .handle:after {
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
}
}
.c-project .c-compare-slider .handle.draggable:after {
width: 48px;
height: 48px;
margin: -24px 0 0 -24px;
line-height: 50px;
font-size: 30px;
}
.mainImage {
position: relative;
}
.mainImage .subimage {
max-width: 70px;
position: absolute;
right: 0;
}
.mainImage.social-icons .sub1 {
top: 80%;
right: -80px;
}
@media (max-width: 37.49em) {
.mainImage.social-icons .sub1 {
right: 0;
}
}
.mainImage.social-icons .sub2 {
top: 70%;
right: -34px;
}
@media (max-width: 37.49em) {
.mainImage.social-icons .sub2 {
right: 60px;
}
}
.mainImage.social-icons .sub3 {
top: 62%;
right: -120px;
}
@media (max-width: 37.49em) {
.mainImage.social-icons .sub3 {
right: -10px;
}
}
.mainImage.fb-icons .subimage {
max-width: 90px;
}
@media (max-width: 37.49em) {
.mainImage.fb-icons .subimage {
max-width: 70px;
}
}
.mainImage.fb-icons .sub1 {
top: 30%;
right: 0;
left: 45px;
}
@media (max-width: 37.49em) {
.mainImage.fb-icons .sub1 {
left: 60px;
}
}
.mainImage.fb-icons .sub2 {
top: 40%;
right: auto;
left: -75px;
}
@media (max-width: 37.49em) {
.mainImage.fb-icons .sub2 {
left: 30px;
top: 44%;
}
}
.mainImage.fb-icons .sub3 {
top: 52%;
right: auto;
left: -60px;
max-width: 130px;
}
@media (max-width: 37.49em) {
.mainImage.fb-icons .sub3 {
left: 0;
top: 61%;
}
}
.overlayBg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.c-work-top {
position: relative;
margin-bottom: 50px;
}
.c-work-top .cms-content {
max-width: 650px;
padding-right: 24px;
}
@media (min-width: 48.125em) {
.c-work-top {
margin-bottom: 100px;
}
}
.c-work-middle {
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-work-middle {
margin-bottom: 100px;
}
}
.c-work .c-section {
margin-bottom: 15px;
}
@media (max-width: 48.115em) {
.c-work .c-section {
text-align: center;
}
}
.c-work .c-section .o-layout__item {
vertical-align: middle;
}
.c-work .c-section span {
text-transform: uppercase;
display: block;
color: #9c9c9c;
font-size: 16px;
margin-bottom: 24px;
}
.c-work .c-section .cms-content {
padding: 0;
max-width: 565px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 48.125em) {
.c-work .c-section .cms-content {
margin-top: 50px;
}
}
.c-work .c-section h2 {
margin-bottom: 6px;
line-height: 1;
font-weight: bold;
}
.c-work .c-section p {
max-width: 540px;
}
.c-work .c-section .o-layout {
margin-left: -15px;
}
.c-work .c-section .o-layout__item {
padding-left: 15px;
margin-bottom: 15px;
}
.c-work .c-section-success {
padding: 40px 30px 24px;
border-radius: 5px;
background: linear-gradient(90deg, #f1c9b6 30%, #ec8085 80%);
color: #fff;
}
@media (min-width: 48.125em) {
.c-work .c-section-success {
padding: 55px 30px;
}
}
.c-work .c-section-success span {
color: #fff;
}
.c-work .c-section-success video {
max-width: 100%;
}
@media (min-width: 48.125em) {
.c-work .c-section-success video {
padding-left: 30px;
}
}
.c-work .c-section-success .weight-images {
position: relative;
width: 100%;
overflow: hidden;
}
@media (min-width: 62.5em) {
.c-work .c-section-success .weight-images {
margin-left: 20px;
}
}
@media (max-width: 48.115em) {
.c-work .c-section-success .weight-images {
display: none;
}
}
.c-work .c-section-success .weight-images .mobile {
width: 250px;
}
@media (min-width: 48.125em) {
.c-work .c-section-success .weight-images .mobile {
width: 310px;
}
}
.c-work .c-section-success .weight-images .weight {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 48.125em) {
.c-work .c-section-success .weight-images .weight {
opacity: 0;
}
}
.c-work .c-section-success .weight-images .weight-1 {
width: 42%;
transform: translate(-71%, -87%);
}
.c-work .c-section-success .weight-images .weight-2 {
z-index: 1;
width: 54%;
transform: translate(-44%, -52%);
}
.c-work .c-section-success .weight-images .weight-3 {
z-index: 2;
width: 70%;
transform: translate(-24%, -28%);
}
.c-work .c-section-success .weight-mob-img {
display: none;
}
@media (max-width: 48.115em) {
.c-work .c-section-success .weight-mob-img {
display: block;
}
}
.c-work .c-section-marketing {
background: #191919;
color: #fff;
border-radius: 5px;
}
.c-work .c-section-marketing .skater-images {
position: relative;
width: 100%;
padding: 0 24px;
}
@media (min-width: 62.5em) {
.c-work .c-section-marketing .skater-images {
margin-left: 50px;
}
}
@media (max-width: 48.115em) {
.c-work .c-section-marketing .skater-images {
overflow: hidden;
display: none;
margin-left: 0;
}
}
.c-work .c-section-marketing .skater-images .mobile {
width: 160px;
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .mobile {
width: 260px !important;
margin: 0;
}
}
.c-work .c-section-marketing .skater-images .skater {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .skater {
opacity: 0;
}
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .skater-1 {
width: 30%;
transform: translate(-82%, -125%);
}
}
.c-work .c-section-marketing .skater-images .skater-2 {
z-index: 1;
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .skater-2 {
width: 31%;
transform: translate(-20%, -74%);
}
}
.c-work .c-section-marketing .skater-images .skater-3 {
z-index: 2;
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .skater-3 {
width: 30%;
transform: translate(2%, 18%);
}
}
.c-work .c-section-marketing .skater-images .skater-4 {
z-index: 4;
}
@media (min-width: 48.125em) {
.c-work .c-section-marketing .skater-images .skater-4 {
width: 38%;
transform: translate(21%, -52%);
}
}
.c-work .c-section-marketing .skater-mob-img {
display: none;
}
@media (max-width: 48.115em) {
.c-work .c-section-marketing .skater-mob-img {
display: block;
}
}
.c-work .c-section-recipe {
background: #fff;
border-radius: 5px;
}
.c-work .c-section-recipe, .c-work .c-section-marketing {
text-align: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-end;
padding: 50px 12px;
}
@media (min-width: 48.125em) {
.c-work .c-section-recipe, .c-work .c-section-marketing {
padding: 60px 12px;
}
}
.c-work .c-section-recipe img, .c-work .c-section-marketing img {
max-width: 460px;
margin: auto;
margin-bottom: 60px;
}
.c-work .c-section-recipe video, .c-work .c-section-marketing video {
max-width: 100%;
margin: auto;
margin-bottom: 60px;
}
.c-work__categories {
text-align: center;
margin-bottom: 48px;
}
.c-work__categories a {
opacity: 0.5;
display: inline-block;
transition: 0.3s;
font-weight: normal;
text-transform: uppercase;
font-size: 16px;
}
.c-work__categories a:not(:last-of-type) {
margin-right: 24px;
}
.c-work__categories a:hover, .c-work__categories a.active {
opacity: 1;
}
.c-work__list {
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-work__list {
margin-bottom: 80px;
}
}
.c-work__list .o-layout__item {
font-size: 0;
transition: 0.3s;
}
.c-work__list .o-layout__item.animatein {
animation: fade-in-fwd 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.c-work__list-wrap {
color: #fff;
position: relative;
display: inline-block;
width: 100%;
overflow: hidden;
border-radius: 5px;
}
.c-work__list-wrap:hover .c-work__list-inner {
transform: scale(1.08);
}
.c-work__list-wrap:hover h3 {
opacity: 1;
}
.c-work__list-inner {
background-size: cover;
background-position: center;
padding-bottom: 100%;
border-radius: 5px;
width: 100%;
position: relative;
z-index: 1;
transition: 0.5s;
}
@media (max-width: 37.49em) {
.c-work__list-inner {
padding-bottom: 65%;
}
}
.c-work__list-inner:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(126, 211, 203, 0) 50%, #28545c 100%);
border-radius: 5px;
z-index: -1;
transition: 0.5s;
}
.c-work__list-info {
padding: 0 24px;
position: absolute;
bottom: 15px;
z-index: 1;
}
.c-work__list-info h3 {
margin-bottom: 10px;
font-size: 24px;
line-height: 1;
}
.c-work__list-info span {
text-transform: uppercase;
font-size: 16px;
}
.c-work__loadmore {
text-align: center;
font-weight: normal;
text-transform: uppercase;
line-height: 1;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-work__loadmore {
margin-bottom: 100px;
}
}
.c-work__loadmore svg {
width: 15px;
height: 15px;
vertical-align: middle;
margin-left: 6px;
}
.c-work__loadmore a {
transition: all 0.3s;
display: inline-block;
}
.c-work__loadmore a:hover {
opacity: 0.75;
transform: translateY(3px);
}
.c-404 {
margin-bottom: 100px;
}
.c-services-top {
position: relative;
margin-bottom: 50px;
}
.c-services-top .cms-content {
max-width: 650px;
padding-right: 24px;
}
@media (min-width: 48.125em) {
.c-services-top {
margin-bottom: 100px;
}
}
.c-services .w-950 {
max-width: 950px;
}
.c-services-list__wrap {
display: flex;
margin-bottom: 48px !important;
flex-direction: column;
}
@media (min-width: 48.125em) {
.c-services-list__wrap {
margin-bottom: 100px !important;
}
}
.c-services-list h2 {
color: #658d95;
opacity: 0.3;
max-width: 100%;
margin-bottom: 24px;
line-height: 1.1;
font-weight: normal;
}
@media (min-width: 48.125em) {
.c-services-list h2 {
align-self: flex-start;
margin-top: 60px;
}
}
.c-services-list__each {
width: 100%;
display: flex;
align-items: center;
}
@media (max-width: 48.115em) {
.c-services-list__each {
flex-direction: column;
}
}
.page-template-tmpl-services .c-services-list__card.ecom-section,
.home .c-services-list__card.ecom-section,
.page-template-tmpl-single-service .c-services-list__card.ecom-section {
background-color: #7ed3cb;
color: #fff;
margin-bottom: 100px;
}
@media (max-width: 48.115em) {
.page-template-tmpl-services .c-services-list__card.ecom-section,
.home .c-services-list__card.ecom-section,
.page-template-tmpl-single-service .c-services-list__card.ecom-section {
padding: 50px 0 24px;
margin-bottom: 50px;
}
}
.page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__wrap,
.home .c-services-list__card.ecom-section .c-services-list__wrap,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__wrap {
margin-bottom: 24px;
}
@media (min-width: 48.125em) {
.page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__wrap,
.home .c-services-list__card.ecom-section .c-services-list__wrap,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__wrap {
margin-bottom: 40px;
}
}
@media (min-width: 48.125em) {
.page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__img,
.home .c-services-list__card.ecom-section .c-services-list__img,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__img {
margin-bottom: -50px;
}
}
@media (min-width: 48.125em) {
.page-template-tmpl-services .c-services-list__card.ecom-section .c-services-list__info,
.home .c-services-list__card.ecom-section .c-services-list__info,
.page-template-tmpl-single-service .c-services-list__card.ecom-section .c-services-list__info {
margin-top: 0;
}
}
.page-template-tmpl-services .c-services-list__card.ecom-section h2,
.home .c-services-list__card.ecom-section h2,
.page-template-tmpl-single-service .c-services-list__card.ecom-section h2 {
color: #fff;
opacity: 0.5;
}
.page-template-tmpl-services .c-services-list__card:last-of-type {
background: #fff;
margin-top: -100px;
padding-top: 50px;
}
@media (max-width: 48.115em) {
.page-template-tmpl-services .c-services-list__card:last-of-type {
padding: 50px 0 10px;
margin-top: -50px;
}
}
@media (min-width: 48.125em) {
.page-template-tmpl-services .c-services-list__card:last-of-type .c-services-list__img {
margin-bottom: -50px;
}
}
@media (min-width: 48.125em) {
.c-services-list__card:nth-of-type(odd) .c-services-list__img {
order: 2;
}
.c-services-list__card:nth-of-type(odd) .c-services-list__info {
padding-left: 0;
order: 1;
padding-right: 60px;
}
.c-services-list__card:nth-of-type(odd) h2 {
align-self: flex-end;
}
}
.c-services-list__img {
background-size: cover;
background-position: top center;
width: 100%;
height: 100%;
color: #fff;
position: relative;
margin-bottom: 24px;
padding-bottom: 45%;
}
@media (min-width: 48.125em) {
.c-services-list__img {
max-width: 55%;
padding-bottom: 33.3%;
flex: 55%;
margin-bottom: 0;
}
}
@media (min-width: 48.125em) {
.c-services-list__info {
max-width: 45%;
flex: 45%;
padding-left: 90px;
margin-top: 80px;
}
}
.c-services-list__info h3 {
margin-bottom: 50px;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: flex;
transition-property: transform;
box-sizing: content-box;
}
@media (min-width: 37.5em) {
.swiper-wrapper {
box-sizing: border-box;
}
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
flex-wrap: wrap;
flex-direction: column;
}
.swiper-container-free-mode > .swiper-wrapper {
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
transition-property: transform;
}
.swiper-slide-invisible-blank {
visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
align-items: flex-start;
transition-property: transform, height;
}
/* 3D Effects */
.swiper-container-3d {
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
}
/* CSS Mode */
.swiper-container-css-mode > .swiper-wrapper {
overflow: auto;
scrollbar-width: none;
/* For Firefox */
-ms-overflow-style: none;
/* For Internet Explorer and Edge */
}
.swiper-container-css-mode > .swiper-wrapper::-webkit-scrollbar {
display: none;
}
.swiper-container-css-mode > .swiper-wrapper > .swiper-slide {
scroll-snap-align: start start;
}
.swiper-container-horizontal.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: x mandatory;
}
.swiper-container-vertical.swiper-container-css-mode > .swiper-wrapper {
scroll-snap-type: y mandatory;
}
:root {
--swiper-navigation-size: 44px;
/*
--swiper-navigation-color: var(--swiper-theme-color);
*/
}
.swiper-button-prev,
.swiper-button-next {
position: relative;
display: inline-block;
z-index: 10;
cursor: pointer;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev.swiper-button-white,
.swiper-button-next.swiper-button-white {
--swiper-navigation-color: #ffffff;
}
.swiper-button-prev.swiper-button-black,
.swiper-button-next.swiper-button-black {
--swiper-navigation-color: #000000;
}
.swiper-button-lock {
display: none;
}
:root {
/*
--swiper-pagination-color: var(--swiper-theme-color);
*/
}
.swiper-pagination {
position: absolute;
text-align: center;
transition: 300ms opacity;
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
bottom: 10px;
left: 0;
width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
overflow: hidden;
font-size: 0;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transform: scale(0.33);
position: relative;
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main {
transform: scale(1);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev {
transform: scale(0.33);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next {
transform: scale(0.66);
}
.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next {
transform: scale(0.33);
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-bullet-active {
opacity: 1;
background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-container-vertical > .swiper-pagination-bullets {
right: 10px;
top: 50%;
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 6px 0;
display: block;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
top: 50%;
transform: translateY(-50%);
width: 8px;
}
.swiper-container-vertical > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
display: inline-block;
transition: 200ms transform, 200ms top;
}
.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 4px;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
}
.swiper-container-horizontal > .swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms left;
}
.swiper-container-horizontal.swiper-container-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
transition: 200ms transform, 200ms right;
}
/* Progress */
.swiper-pagination-progressbar {
background: rgba(0, 0, 0, 0.25);
position: absolute;
}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
background: var(--swiper-pagination-color, var(--swiper-theme-color));
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(0);
transform-origin: left top;
}
.swiper-container-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
transform-origin: right top;
}
.swiper-container-horizontal > .swiper-pagination-progressbar,
.swiper-container-vertical > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 100%;
height: 4px;
left: 0;
top: 0;
}
.swiper-container-vertical > .swiper-pagination-progressbar,
.swiper-container-horizontal > .swiper-pagination-progressbar.swiper-pagination-progressbar-opposite {
width: 4px;
height: 100%;
left: 0;
top: 0;
}
.swiper-pagination-white {
--swiper-pagination-color: #ffffff;
}
.swiper-pagination-black {
--swiper-pagination-color: #000000;
}
.swiper-pagination-lock {
display: none;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
.swiper-scrollbar-lock {
display: none;
}
.swiper-zoom-container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.swiper-zoom-container > img,
.swiper-zoom-container > svg,
.swiper-zoom-container > canvas {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.swiper-slide-zoomed {
cursor: move;
}
/* Preloader */
:root {
/*
--swiper-preloader-color: var(--swiper-theme-color);
*/
}
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
transform-origin: 50%;
animation: swiper-preloader-spin 1s infinite linear;
box-sizing: border-box;
border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
border-radius: 50%;
border-top-color: transparent;
}
.swiper-lazy-preloader-white {
--swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
--swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
visibility: hidden;
transform-origin: 0 0;
width: 100%;
height: 100%;
}
.swiper-container-cube .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
.swiper-container-flip {
overflow: visible;
}
.swiper-container-flip .swiper-slide {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 1;
}
.swiper-container-flip .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-flip .swiper-slide-active,
.swiper-container-flip .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
.swiper-container-flip .swiper-slide-shadow-top,
.swiper-container-flip .swiper-slide-shadow-bottom,
.swiper-container-flip .swiper-slide-shadow-left,
.swiper-container-flip .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-controls {
margin-top: 30px;
text-align: right;
padding: 0 24px;
}
.swiper-button-next svg,
.swiper-button-prev svg {
width: 15px;
height: 15px;
}
.swiper-button-prev {
margin-right: 60px;
}
@media (max-width: 48.115em) {
.swiper-mob-only {
overflow: visible;
}
.swiper-mob-only .swiper-button-next,
.swiper-mob-only .swiper-button-prev {
top: 50%;
transform: translateY(-50%);
position: absolute;
right: -20px;
outline: none;
background: #fff;
border-radius: 50px;
text-align: center;
vertical-align: middle;
display: inline-block;
transition: 0.3s;
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.15);
width: 35px;
height: 35px;
z-index: 100;
font-size: 0;
}
}
@media (max-width: 48.115em) and (min-width: 48.125em) {
.swiper-mob-only .swiper-button-next,
.swiper-mob-only .swiper-button-prev {
width: 50px;
height: 50px;
}
}
@media (max-width: 48.115em) {
.swiper-mob-only .swiper-button-next:hover,
.swiper-mob-only .swiper-button-prev:hover {
box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.25);
}
.swiper-mob-only .swiper-button-next:hover svg,
.swiper-mob-only .swiper-button-prev:hover svg {
transform: scale(1.08);
}
.swiper-mob-only .swiper-button-next svg,
.swiper-mob-only .swiper-button-prev svg {
vertical-align: middle;
width: 13px;
height: 13px;
margin-top: 11px;
transition: 0.5s;
}
}
@media (max-width: 48.115em) and (min-width: 48.125em) {
.swiper-mob-only .swiper-button-next svg,
.swiper-mob-only .swiper-button-prev svg {
margin-top: 11px;
width: 15px;
height: 15px;
}
}
@media (max-width: 48.115em) {
.swiper-mob-only .swiper-button-prev {
left: -20px;
right: unset;
}
.swiper-mob-only .swiper-controls {
margin-top: 0px;
text-align: right;
padding: 0;
}
}
@media (min-width: 48.125em) {
.c-images-layout .o-module__item:nth-child(1) {
order: 2;
}
}
@media (min-width: 48.125em) {
.c-images-layout .o-module__item:nth-child(3) {
order: 3;
}
}
.c-images-layout .o-layout {
margin-left: -15px;
}
.c-images-layout .o-layout__item {
margin-bottom: 15px;
padding-left: 15px;
}
.c-images-layout .bgimg {
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
padding-bottom: 82.19%;
border-radius: 5px;
}
@media (min-width: 100em) {
.c-images-layout .bgimg {
padding-bottom: 70%;
}
}
.c-images-layout .bgimg--1 {
order: 2;
padding-bottom: 39.4%;
}
.single.single-ra-project .c-images-layout .bgimg--1 {
padding-bottom: 50%;
}
.c-images-layout .bgimg--3 {
order: 3;
}
.single.single-ra-project .c-images-layout .bgimg--3 {
padding-bottom: 50%;
}
.c-images-layout .bgimg--2 {
order: 2;
}
.single.single-ra-project .c-images-layout .bgimg--2 {
padding-bottom: 50%;
}
@media (max-width: 37.49em) {
.c-service .page-title {
font-size: 45px;
}
}
.c-service .no-padd {
margin-bottom: 0 !important;
}
.c-service-h1 {
font-weight: 500;
line-height: 1.1;
margin-bottom: 24px;
}
.c-service .page-scroll {
right: 15px;
bottom: 0;
top: unset;
}
@media (min-width: 48.125em) {
.c-service .page-scroll {
top: 0;
right: 30px;
}
}
.c-service .c-cms-content p {
margin-bottom: 18px;
}
@media (min-width: 48.125em) {
.c-service .c-cms-content.content-two-col div {
column-count: 2;
column-gap: 18px;
}
}
.c-service .w-950 {
max-width: 950px;
}
@media (min-width: 48.125em) {
.c-service .swiper-controls {
display: none;
}
}
.c-service__top {
margin-bottom: 24px;
position: relative;
}
@media (min-width: 48.125em) {
.c-service__top {
margin-bottom: 80px;
display: flex;
}
}
@media (min-width: 48.125em) {
.c-service__top h1 {
max-width: 720px;
flex: 1;
}
}
@media (max-width: 48.115em) {
.c-service__top-content {
padding-right: 20px;
}
}
@media (min-width: 48.125em) {
.c-service__top-content {
max-width: 480px;
padding: 0 40px;
}
}
.c-service__banner {
background-position: top center;
background-size: cover;
border-radius: 5px;
margin-bottom: 50px;
padding-bottom: 48%;
}
@media (min-width: 48.125em) {
.c-service__banner {
padding-bottom: 33%;
margin-bottom: 100px;
}
}
.c-service .c-cms-content {
margin-bottom: 36px;
}
@media (min-width: 48.125em) {
.c-service .c-cms-content {
margin-bottom: 80px;
}
}
.c-service .c-cms-content h2,
.c-service .c-cms-content h3,
.c-service .c-cms-content h3,
.c-service .c-cms-content h4,
.c-service .c-cms-content h5,
.c-service .c-cms-content h6 {
margin-bottom: 24px;
}
.c-service .c-cms-content h5 {
font-size: 20px;
}
@media (min-width: 48.125em) {
.c-service .c-cms-content h5 {
font-size: 24px;
}
}
.c-service .c-cms-content h2,
.c-service .c-cms-content h3,
.c-service .c-cms-content h4 {
font-size: 30px;
}
@media (min-width: 48.125em) {
.c-service .c-cms-content h2,
.c-service .c-cms-content h3,
.c-service .c-cms-content h4 {
font-size: 36px;
}
}
.c-service .c-cms-content a {
color: #ec8085;
}
.c-service .c-cms-content img {
width: 100%;
height: auto;
max-width: 400px;
min-width: auto;
margin: auto;
}
.c-service__video-wrap {
position: relative;
top: 0;
display: block;
width: 100%;
overflow: hidden;
}
@media (min-width: 48.125em) {
.c-service__video-wrap {
right: -12px;
}
}
.c-service__video {
display: block;
position: relative;
background-clip: border-box;
float: left;
z-index: 2;
height: auto;
width: 100%;
padding: 0;
text-align: center;
}
@media (min-width: 62.5em) {
.c-service__video {
width: auto;
height: 400px;
}
}
.c-service-sections .c-section {
margin-bottom: 48px;
}
@media (min-width: 48.125em) {
.c-service-sections .c-section {
margin-bottom: 80px;
}
}
.c-service-sections .c-section ul {
margin-bottom: 0;
}
.c-service-sections .c-section .c-metrics {
display: flex;
padding-top: 24px;
}
@media (max-width: 48.115em) {
.c-service-sections .c-section .c-metrics {
flex-wrap: wrap;
justify-content: center;
}
}
.c-service-sections .c-section .c-metrics__each:not(:last-of-type) {
margin-right: 24px;
}
@media (max-width: 48.115em) {
.c-service-sections .c-section .c-metrics__each {
flex: 100%;
text-align: center;
max-width: auto;
}
.c-service-sections .c-section .c-metrics__each:not(:last-of-type) {
margin-right: 12px;
}
}
.c-service-sections .c-section .c-metrics h3 {
font-weight: bold;
color: #7ed3cb;
line-height: 0.9;
margin-bottom: 6px;
}
@media (max-width: 48.115em) {
.c-service-sections .c-section .c-metrics h3 {
display: flex;
justify-content: center;
}
}
@media (min-width: 48.125em) {
.c-service-sections .c-section .c-metrics h3 {
display: flex;
}
}
@media (max-width: 48.115em) {
.c-service-sections .c-section .o-layout__item:last-of-type {
margin-bottom: 0;
}
}
.c-service-features__img {
vertical-align: baseline;
}
.c-service-features__img img {
max-width: 150px;
max-height: 150px;
width: auto;
height: auto;
}
@media (min-width: 48.125em) {
.c-service-features__content {
margin-bottom: 80px;
}
}
@media (max-width: 48.115em) {
.c-service-features__content p {
margin-bottom: 0;
}
}
@media (min-width: 48.125em) {
.c-service-heading-content__contents {
padding-left: 30px;
}
}
.c-service-heading-content__contents ul {
margin-left: 20px;
}
.c-service-heading-content__contents ul li {
padding-left: 6px;
margin-bottom: 12px;
}
@media (min-width: 48.125em) {
.c-service-heading-content__contents ul li {
margin-bottom: 24px;
}
}
.c-service-benifits {
background-color: #658d95;
margin-bottom: 50px;
margin-top: 0;
padding-bottom: 50px;
padding-top: 50px;
}
@media (min-width: 48.125em) {
.c-service-benifits {
padding-bottom: 80px;
padding-top: 80px;
margin-bottom: 80px;
}
}
.c-service-benifits .c-service-h1 {
margin-bottom: 50px;
color: #fff;
text-align: center;
}
@media (max-width: 48.115em) {
.c-service-benifits__list .o-layout {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
margin-left: 0;
overflow: visible;
}
.c-service-benifits__list .o-layout .o-layout__item {
margin-bottom: 0;
padding-left: 0;
}
}
.c-service-benifits__list.swiper-container {
overflow: visible;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.c-service-benifits__list.swiper-container::-webkit-scrollbar {
display: none;
}
.c-service-benifits__item {
width: 100%;
padding: 20px;
color: #fff;
position: relative;
border-radius: 5px;
padding: 30px 20px;
border: 1px solid rgba(255, 255, 255, 0.4);
}
@media (min-width: 48.125em) {
.c-service-benifits__item {
padding: 50px 20px;
}
}
@media (max-width: 48.115em) {
.c-service-benifits__item {
display: flex;
flex-direction: column;
justify-content: center;
}
}
.c-service-benifits__item-content {
text-align: center;
padding-top: 20px;
}
.c-service-benifits__item-content p {
margin-bottom: 0;
}
@media (min-width: 48.125em) {
.c-service-benifits__item-content {
position: absolute;
top: 0;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
width: 100%;
opacity: 0;
transition: 0.5s;
padding: 20px;
text-overflow: ellipsis;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
padding: 50px 20px 20px;
}
}
.c-service-benifits__item-title {
transition: 0.2s;
text-align: center;
}
@media (min-width: 48.125em) {
.c-service-benifits__item-title {
margin-top: auto;
display: flex;
flex-direction: column;
justify-content: center;
}
}
.c-service-benifits__item-title img {
max-width: 100px;
max-height: 80px;
width: auto;
height: auto;
margin: 0 auto;
margin-bottom: 34px;
}
.c-service-benifits__item-title h2 {
line-height: 0.9;
margin-bottom: 0;
}
.c-service-benifits__item-img {
flex-grow: 1;
}
@media (min-width: 48.125em) {
.c-service-benifits__item:hover .c-service-benifits__item-content {
opacity: 1;
}
.c-service-benifits__item:hover .c-service-benifits__item-title {
opacity: 0;
}
}
.c-service-services__content {
position: relative;
display: flex;
margin-top: 50px;
}
@media (max-width: 48.115em) {
.c-service-services__content {
flex-direction: column;
color: #191919;
margin-top: 0;
}
}
.c-service-services__list {
animation: fade-in-fwd 0.8s ease-in;
transition: 0.5s;
}
@media (min-width: 48.125em) {
.c-service-services__list {
max-width: 600px;
width: 60%;
align-self: center;
}
}
@media (min-width: 48.125em) and (min-width: 62.5em) {
.c-service-services__list {
padding-right: 100px;
}
}
.c-service-services__list a {
color: rgba(101, 141, 149, 0.7);
transition: 0.3s;
}
.c-service-services__list a.active, .c-service-services__list a:hover {
color: #191919;
}
@media (max-width: 48.115em) {
.c-service-services__list a:not(:last-of-type) {
margin-right: 30px;
}
}
@media (max-width: 48.115em) {
.c-service-services__list {
display: flex;
overflow: auto;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
}
.c-service-services__list::-webkit-scrollbar {
width: 0px;
background: transparent;
/* Chrome/Safari/Webkit */
}
}
.c-service-services__container {
text-align: center;
}
.c-service-services__container .cms-content {
animation: fade-in-fwd 0.8s ease-in;
transition: 0.5s;
}
.c-service-services__container .cms-content img {
max-width: 110px;
max-height: 100px;
width: auto;
height: auto;
margin: 0 auto;
margin-bottom: 30px;
}
@media (min-width: 48.125em) {
.c-service-services__container {
align-self: center;
padding-left: 50px;
max-width: 400px;
width: 40%;
}
}
.c-service-tc-content-image {
background-color: #f1c9b6;
margin-bottom: 0 !important;
color: #fff;
padding: 50px 0;
}
@media (min-width: 48.125em) {
.c-service-tc-content-image {
padding: 100px 0 50px;
}
}
.c-service-tc-content-image img {
border-radius: 5px;
}
.c-service-tc-content-image__content p {
max-width: 580px;
margin-bottom: 12px;
}
@media (min-width: 62.5em) {
.c-service-tc-content-image__content {
padding-right: 40px;
}
}
.c-service-tc-image-content {
background-color: #f1c9b6;
color: #fff;
margin-bottom: 0 !important;
padding-bottom: 50px;
}
.c-service-tc-image-content img {
border-radius: 5px;
}
@media (min-width: 71.875em) {
.c-service-tc-image-content__content {
padding-left: 15%;
}
}
.c-service-tc-image-content__content p {
max-width: 580px;
}
.c-service-tc-content-image-alt {
position: relative;
display: inline-block;
width: 100%;
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt.img-left .c-service-tc-content-image-alt__img {
order: 1;
}
.c-service-tc-content-image-alt.img-left .c-service-tc-content-image-alt__content {
order: 2;
padding-left: 48px;
padding-right: 0;
}
}
.c-service-tc-content-image-alt__wrap {
display: flex;
flex-flow: row wrap;
}
.c-service-tc-content-image-alt__heading {
width: 100%;
flex: 1 1 auto;
margin-bottom: 50px;
}
.c-service-tc-content-image-alt__content {
margin-bottom: 24px;
}
.c-service-tc-content-image-alt__content p {
margin-bottom: 12px;
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt__content p {
margin-bottom: 18px;
}
}
.c-service-tc-content-image-alt__content ul li,
.c-service-tc-content-image-alt__content ol li {
margin-bottom: 12px;
margin-left: 12px;
padding-left: 10px;
}
.c-service-tc-content-image-alt__content h2,
.c-service-tc-content-image-alt__content h3 {
font-size: 30px;
font-weight: 600;
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt__content h2,
.c-service-tc-content-image-alt__content h3 {
padding-top: 18px;
font-size: 36px;
}
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt__content {
max-width: 50%;
padding-right: 36px;
margin-bottom: 0;
}
}
.c-service-tc-content-image-alt__img img {
border-radius: 5px;
max-width: 100%;
max-height: 550px;
width: auto;
height: auto;
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt__img img {
max-height: 100%;
}
}
@media (min-width: 48.125em) {
.c-service-tc-content-image-alt__img {
display: block;
max-width: 50%;
}
}
.c-service-tc-contents {
background: linear-gradient(356.93deg, #e8afc3 4.32%, #e8afc3 20.06%, #6e97ce 52.96%, #7ed3cb 94.89%, #f6f6f5 94.9%, #7ed3cb 94.91%);
padding: 60px 0;
color: #fff;
}
@media (min-width: 48.125em) {
.c-service-tc-contents {
padding: 100px 0;
}
}
.c-service-tc-contents .c-service-h1 {
margin-bottom: 50px;
}
.c-service-tc-contents .o-module {
overflow: visible;
}
.c-service-tc-contents .o-module__item {
align-items: center;
}
.c-service-tc-contents .o-module:not(:last-of-type) {
margin-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-service-tc-contents .o-module:nth-child(odd) .c-service-tc-contents__img {
order: -1;
}
.c-service-tc-contents .o-module:nth-child(odd) .c-service-tc-contents__img img {
margin-left: 0;
}
}
.c-service-tc-contents__img-wrap {
width: 100%;
}
.c-service-tc-contents__img-wrap img {
max-width: 250px;
max-height: 250px;
width: auto;
height: auto;
}
@media (min-width: 48.125em) {
.c-service-tc-contents__img-wrap img {
margin-left: auto;
}
}
.c-service-tc-contents__content {
color: #fff;
}
.c-service-tc-contents__content p {
margin-bottom: 18px;
}
.c-service-tc-contents__content ul li,
.c-service-tc-contents__content ol li {
margin-bottom: 12px;
margin-left: 12px;
padding-left: 10px;
}
.c-service-results {
background-color: rgba(255, 255, 255, 0.5);
padding: 50px 0 40px;
}
@media (min-width: 48.125em) {
.c-service-results {
padding: 100px 0 80px;
}
}
.c-service-results__heading {
margin-bottom: 50px;
font-weight: normal;
}
.c-service-results .o-layout > .o-layout__item {
align-items: center;
}
.c-service-results__sections:not(:last-of-type) {
margin-bottom: 40px;
}
@media (min-width: 48.125em) {
.c-service-results__sections:not(:last-of-type) {
margin-bottom: 80px;
}
}
.c-service-results__sections.o-module {
overflow: visible;
}
@media (min-width: 48.125em) {
.c-service-results__sections:nth-child(even) .c-service-results__img {
order: 2;
}
.c-service-results__sections:nth-child(even) .c-service-results__content {
padding-left: 0;
}
}
@media (min-width: 48.125em) and (min-width: 62.5em) {
.c-service-results__sections:nth-child(even) .c-service-results__content {
padding-right: 20px;
}
}
.c-service-results__img {
padding: 0 24px;
}
@media (min-width: 80em) {
.c-service-results__img {
max-width: 50%;
}
}
.c-service-results__img.o-layout__item.Top {
align-items: flex-start;
}
.c-service-results__img.o-layout__item.Center {
align-items: center;
}
.c-service-results__img.o-layout__item.Bottom {
align-items: flex-end;
}
.c-service-results__img video {
max-width: 100%;
max-height: 400px;
}
.c-service-results__img img {
border-radius: 5px;
}
@media (min-width: 80em) {
.c-service-results__img img {
max-width: 100%;
}
}
.c-service-results__content {
max-width: 575px;
}
@media (min-width: 62.5em) {
.c-service-results__content {
padding-left: 80px;
}
}
.c-service-results__content h2 {
margin-bottom: 12px;
}
.c-service-partners {
position: relative;
}
.c-service-partners img {
max-width: 280px;
margin-left: auto;
}
@media (max-width: 48.115em) {
.c-service-partners img {
margin-left: 0;
margin-bottom: 24px;
}
}
.c-service-partners__content {
max-width: 750px;
}
.c-service-partners__content p:last-of-type {
margin-bottom: 0;
}
.c-service-partners .o-layout > .o-layout__item {
vertical-align: middle;
}
.c-service-partners .o-layout > .o-layout__item:first-of-type {
margin-bottom: 0;
}
.c-service-partners2 {
position: relative;
}
.c-service-partners2 img {
max-width: 320px;
}
@media (max-width: 48.115em) {
.c-service-partners2 img {
margin-bottom: 24px;
}
}
.c-service-partners2__content {
max-width: 750px;
}
.c-service-partners2__features {
position: relative;
}
.c-service-partners2__features.o-layout > .o-layout__item {
vertical-align: top;
}
.c-service-partners2__features-copy {
margin-bottom: 10px;
animation: fade-in-fwd 0.8s ease-in;
display: none;
}
.c-service-partners2__features h5 {
position: relative;
display: inline-block;
padding-right: 20px;
}
.c-service-partners2__features .c-svgicon--select-arrow {
margin-left: 8px;
position: absolute;
right: 2px;
top: 6px;
}
.c-service-projects__content {
max-width: 580px;
}
.c-service-projects__img {
align-items: center;
}
.c-service-projects__list {
margin-bottom: 40px;
}
.c-service-projects__list:first-of-type {
background-color: #ec8085;
padding: 60px 0 40px;
color: #fff;
}
.c-service-projects__list:first-of-type span {
color: #fff;
}
.c-service-projects__list .o-layout__item {
vertical-align: middle;
align-items: center;
}
@media (min-width: 48.125em) {
.c-service-projects__list {
margin-bottom: 80px;
}
}
.c-service-projects__list img {
border-radius: 5px;
}
@media (min-width: 80em) {
.c-service-projects__list img {
max-height: 450px;
max-width: 410px;
width: auto;
height: auto;
}
}
@media (min-width: 48.125em) {
.c-service-projects__list:nth-child(even) .c-service-projects__img {
order: -1;
}
}
@media (min-width: 48.125em) and (min-width: 80em) {
.c-service-projects__list:nth-child(even) .c-service-projects__img {
margin-right: -60px;
}
}
@media (min-width: 62.5em) {
.c-service-projects__list:nth-child(even) .c-service-projects__content {
padding-left: 100px;
}
}
.c-service-projects__list span {
text-transform: uppercase;
display: block;
color: #9c9c9c;
font-size: 16px;
}
.c-service-projects__list h4 {
margin-bottom: 6px;
line-height: 1;
}
.c-service-logos__content {
max-width: 700px;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-service-logos__content {
margin-bottom: 80px;
}
}
.c-service-logos__content p {
margin-bottom: 10px;
}
.c-service-logos__list img {
max-width: 190px;
}
.c-service .swiper-container {
width: 100%;
height: 100%;
overflow: visible;
-ms-overflow-style: none;
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
.c-service .swiper-container::-webkit-scrollbar {
display: none;
}
@media (max-width: 48.115em) {
.c-service-support .o-layout {
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
margin-left: 0;
overflow: visible;
}
.c-service-support .o-layout .o-layout__item {
margin-bottom: 0;
padding-left: 0;
}
}
.c-service-support__copy {
max-width: 700px;
}
.c-service-support img {
max-width: 150px;
margin: 0 auto 24px;
}
.c-service-support__list h5 {
font-weight: normal;
}
.c-service-support__list p {
max-width: 480px;
margin: auto;
}
.c-service-support__item {
background-color: #fff;
border-radius: 5px;
text-align: center;
transition: 0.3s;
position: relative;
height: auto;
border-radius: 5px;
padding: 30px 24px;
width: 100%;
display: inline-block;
}
@media (min-width: 48.125em) {
.c-service-support__item {
padding: 50px 24px;
}
}
.c-service-testimonial {
display: inline-block;
width: 100%;
position: relative;
color: #7ed3cb;
}
.c-service-ecom img {
max-width: 220px;
}
@media (min-width: 48.125em) {
.c-service-ecom img {
margin: 0 auto;
}
}
.c-service-ecom .o-layout > .o-layout__item {
vertical-align: middle;
}
.c-service-process {
background: linear-gradient(180deg, #9198e5 28%, #ff9499 100%);
padding-top: 60px;
padding-bottom: 60px;
}
@media (min-width: 48.125em) {
.c-service-process {
padding-bottom: 50px;
padding-bottom: 20px;
}
}
.c-service-process h3.c-service-h1,
.c-service-process p {
color: #fff;
}
.c-service-process__next, .c-service-process__prev {
display: none;
}
@media (max-width: 48.115em) {
.c-service-process__next, .c-service-process__prev {
display: none;
position: absolute;
right: -10px;
top: -15px;
z-index: 999;
width: 20px;
height: 20px;
cursor: pointer;
}
.c-service-process__next svg, .c-service-process__prev svg {
width: 15px;
height: 15px;
color: #fff;
}
}
.c-service-process__prev {
right: unset;
left: -10px;
transform: rotate(180deg);
display: none;
}
.c-service-process__content {
position: relative;
display: flex;
margin-top: 60px;
}
@media (max-width: 48.115em) {
.c-service-process__content {
flex-direction: column;
color: #191919;
margin-top: 0;
}
}
.c-service-process__list {
position: relative;
min-width: 230px;
animation: fade-in-fwd 0.8s ease-in;
transition: 0.5s;
}
@media (max-width: 48.115em) {
.c-service-process__list {
display: flex;
overflow: auto;
margin-top: 20px;
margin-bottom: 12px;
margin-right: 0px;
scrollbar-width: none;
/* Firefox */
-ms-overflow-style: none;
/* IE 10+ */
display: none;
}
.c-service-process__list::-webkit-scrollbar {
width: 0px;
background: transparent;
/* Chrome/Safari/Webkit */
}
}
@media (min-width: 48.125em) {
.c-service-process__list {
flex: 0 0 25%;
}
}
@media (min-width: 62.5em) {
.c-service-process__list {
max-width: 380px;
min-width: 250px;
flex: 0 0 15%;
}
}
.c-service-process__list a {
color: rgba(255, 255, 255, 0.6);
transition: all 0.3s ease;
}
.c-service-process__list a.active, .c-service-process__list a:hover {
color: #fff;
}
.c-service-process__list a.active svg, .c-service-process__list a:hover svg {
opacity: 1;
}
.c-service-process__list a.active h5 > span, .c-service-process__list a:hover h5 > span {
opacity: 1;
}
@media (max-width: 48.115em) {
.c-service-process__list a {
min-width: 100px;
}
.c-service-process__list a:not(:last-of-type) {
margin-right: 30px;
}
}
@media (max-width: 48.115em) {
.c-service-process__list a:nth-child(5) {
min-width: 130px;
}
}
.c-service-process__list h5 {
margin-bottom: 0;
display: flex;
flex-flow: row wrap;
align-items: center;
font-size: 1.1rem;
}
@media (max-width: 48.115em) {
.c-service-process__list h5 {
display: inline-block;
}
}
.c-service-process__list h5 > span {
max-width: 53px;
padding-right: 12px;
opacity: 0.5;
min-height: 53px;
}
@media (min-width: 48.125em) {
.c-service-process__list h5 > span {
min-height: 40px;
}
}
@media (min-width: 48.125em) {
.c-service-process__list h5 {
margin-bottom: 24px;
font-size: 26px;
}
}
.c-service-process__container {
padding-right: 40px;
}
.c-service-process__container .cms-content {
animation: fade-in-fwd 0.8s ease-in;
transition: 0.5s;
}
.c-service-process__container .cms-content * {
color: #fff;
}
.c-service-process__container .cms-content strong {
font-weight: bold;
}
.c-service-process__container .cms-content ul {
margin-left: 20px;
}
.c-service-process__container .cms-content ul li {
margin-bottom: 5px;
padding-left: 6px;
}
.c-service-process__container .cms-content .titleAbove {
border-bottom: solid 2px #fff;
display: flex;
flex-flow: row wrap;
align-items: center;
margin-bottom: 30px;
padding-bottom: 20px;
}
@media (min-width: 48.125em) {
.c-service-process__container .cms-content .titleAbove {
padding-bottom: 0;
}
}
.c-service-process__container .cms-content .titleAbove span.icon {
padding-right: 10px;
max-width: 130px;
}
.c-service-process__container .cms-content .titleAbove span.icon img {
min-width: 52px;
}
@media (min-width: 48.125em) {
.c-service-process__container .cms-content .titleAbove span.icon img {
min-width: 120px;
}
}
.c-service-process__container .cms-content .titleAbove span.titleBlock {
font-size: 24px;
font-weight: 700;
}
@media (min-width: 48.125em) {
.c-service-process__container {
flex: 0 0 75%;
}
}
@media (min-width: 62.5em) {
.c-service-process__container {
padding-left: 50px;
flex: 0 0 85%;
}
}
.c-service-process__container .directionalArrows {
position: absolute;
right: -10px;
display: flex;
flex-flow: column wrap;
}
@media (min-width: 80em) {
.c-service-process__container .directionalArrows {
right: -50px;
}
}
@media (min-width: 90em) {
.c-service-process__container .directionalArrows {
right: -100px;
}
}
.c-service-process__container .directionalArrows span {
margin: 5px 0;
}
.c-service .Project {
background-color: #f1c9b6;
padding: 50px 0 15px;
}
@media (min-width: 48.125em) {
.c-service .Project {
padding: 80px 0 15px;
}
}
.c-service .Project h3,
.c-service .Project p {
color: #fff;
}
.c-service .Project p:first-of-type {
margin-bottom: 10px;
}
.c-service .Project .c-service-additional-services__list {
padding-top: 0;
}
.c-service .Project .c-service-additional-services__list p {
margin-bottom: 20px;
}
.c-service .Project .c-service-additional-services__list-inner {
padding-top: 0;
}
.c-service-success-story {
background-color: #7ed3cb;
position: relative;
display: inline-block;
width: 100%;
}
.c-service-success-story__image {
width: 100%;
}
.c-service-success-story__image .bgimg {
width: 100%;
background-color: rgba(156, 156, 156, 0.3);
background-size: cover;
background-position: center;
border-radius: 0 0 5px 5px;
margin-bottom: 36px;
padding-bottom: 48%;
}
@media (min-width: 48.125em) {
.c-service-success-story__image .bgimg {
margin-bottom: 50px;
padding-bottom: 33%;
}
}
.c-service-success-story__content {
max-width: 720px;
margin: auto;
color: #fff;
text-align: center;
margin-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-service-success-story__content {
margin-bottom: 80px;
}
}
.c-service-success-story__content h3 {
margin-bottom: 20px;
}
@media (min-width: 48.125em) {
.c-service-additional-services__list {
display: flex;
margin-left: -15px;
flex-wrap: wrap;
padding-top: 36px;
}
}
.c-service-additional-services__list-wrap {
padding: 0 0 15px 15px;
max-width: 100%;
margin-top: 15px;
}
@media (max-width: 48.115em) {
.c-service-additional-services__list-wrap {
margin-bottom: 40px;
}
}
@media (min-width: 48.125em) {
.c-service-additional-services__list-wrap {
flex: 50%;
max-width: 50%;
}
}
@media (min-width: 62.5em) {
.c-service-additional-services__list-wrap {
flex: 33.33%;
max-width: 33.33%;
}
}
@media (max-width: 48.115em) {
.c-service-additional-services__list-wrap {
padding: 0;
margin-right: 24px;
display: flex;
}
}
.c-service-additional-services__list-inner {
display: inline-block;
width: 100%;
background-color: #fff;
border-radius: 5px;
text-align: center;
padding: 30px 12px;
transition: 0.3s;
border: solid 1px rgba(255, 255, 255, 0.4);
}
@media (min-width: 48.125em) {
.c-service-additional-services__list-inner {
height: 100%;
padding: 50px 12px;
}
}
.Project .c-service-additional-services__list-inner {
background-color: #f1c9b6;
color: #fff;
}
.c-service-additional-services__list-inner img {
max-width: 150px;
max-height: 140px;
width: auto;
height: auto;
margin: 0 auto 30px;
transition: 0.5s;
}
.c-service-additional-services__list-inner h6 {
font-weight: normal;
}
.c-service-additional-services__list-inner p {
margin-top: -18px;
}
.c-service-additional-services__list-inner span {
color: #658d95;
text-transform: uppercase;
transition: 0.3s;
}
.c-service-additional-services__list-inner span svg {
color: #191919;
margin-left: 15px;
transition: 0.3s;
}
.Project .c-service-additional-services__list-inner span {
font-weight: 500;
color: #ec8085;
}
.Project .c-service-additional-services__list-inner span svg {
color: #ec8085;
}
.c-service-additional-services__list-inner:hover {
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.Project .c-service-additional-services__list-inner:hover {
box-shadow: none;
}
.Project .c-service-additional-services__list-inner:hover span {
color: #fff;
}
.Project .c-service-additional-services__list-inner:hover span svg {
color: #fff;
}
.c-service-additional-services__list-inner:hover img {
transform: scale(1.04);
}
.c-service-additional-services__list-inner:hover span {
color: #191919;
}
.c-service-additional-services__list-inner:hover span svg {
transform: translate(1px);
}
.c-service-marketing {
margin-bottom: 24px !important;
}
@media (min-width: 48.125em) {
.c-service-marketing {
margin-bottom: 20px !important;
}
}
.c-service-marketing__heading {
margin-bottom: 40px;
}
.c-service-marketing__content {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
}
.c-service-marketing__content .content {
max-width: 100%;
}
@media (min-width: 62.5em) {
.c-service-marketing__content .content {
margin-bottom: 20px;
max-width: 560px;
}
}
.c-service-marketing__content img {
max-width: 50%;
max-height: 65px;
width: auto;
height: auto;
padding-left: 36px;
align-self: center;
}
.c-service-marketing__content img:first-of-type {
padding-left: 0px;
}
@media (max-width: 62.49em) {
.c-service-marketing__content img {
max-height: 55px;
margin-bottom: 12px;
}
}
@media (min-width: 80em) {
.c-service-marketing__content img {
padding-left: 55px;
}
}
.c-service-marketing__logos-all {
display: flex;
flex-flow: row wrap;
align-items: flex-start;
margin-top: 45px;
margin-left: -30px;
}
@media (max-width: 62.49em) {
.c-service-marketing__logos-all {
margin-left: -24px;
margin-top: 0;
}
}
.c-service-marketing__logos-each {
padding-left: 24px;
margin-bottom: 24px;
align-self: center;
flex: 33.33%;
}
@media (min-width: 48.125em) {
.c-service-marketing__logos-each {
margin-bottom: 60px;
}
}
@media (min-width: 71.875em) {
.c-service-marketing__logos-each {
padding-left: 60px;
}
}
.c-service-marketing__logos-each img {
width: auto;
height: auto;
margin: 0 auto;
max-width: 100%;
max-height: 55px;
}
@media (min-width: 30em) {
.c-service-marketing__logos-each img {
max-width: 110px;
}
}
@media (min-width: 71.875em) {
.c-service-marketing__logos-each img {
max-width: 130px;
}
}
@media (min-width: 62.5em) {
.c-service-marketing__logos-each img {
max-height: 60px;
}
}
.c-service__projects-each {
background-color: #fff;
margin-bottom: 18px;
padding: 40px 12px;
border-radius: 5px;
}
.c-service__projects-each:nth-child(odd) {
background-color: #191919;
}
.c-service__projects-each:nth-child(odd) .cms-content {
max-width: 520px;
}
@media (min-width: 48.125em) {
.c-service__projects-each {
padding: 80px 12px;
}
}
.c-service__projects-each .c-video {
max-width: 100%;
}
.c-service__projects-each .weight-images {
position: relative;
width: 100%;
overflow: hidden;
}
@media (min-width: 62.5em) {
.c-service__projects-each .weight-images {
margin-left: 60px;
}
}
@media (max-width: 48.115em) {
.c-service__projects-each .weight-images {
display: none;
}
}
.c-service__projects-each .weight-images .main-img {
width: 310px;
}
.c-service__projects-each .weight-images .weight {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@media (min-width: 48.125em) {
.c-service__projects-each .weight-images .weight {
opacity: 0;
}
}
.c-service__projects-each .weight-images .weight-1 {
width: 42%;
transform: translate(-71%, -87%);
}
.c-service__projects-each .weight-images .weight-2 {
z-index: 1;
width: 54%;
transform: translate(-44%, -52%);
}
.c-service__projects-each .weight-images .weight-3 {
z-index: 2;
width: 70%;
transform: translate(-24%, -28%);
}
.c-service__projects-each .weight-mob-img {
display: none;
}
@media (max-width: 48.115em) {
.c-service__projects-each .weight-mob-img {
display: block;
}
}
.c-service__projects-each span {
text-transform: uppercase;
display: block;
color: #9c9c9c;
font-size: 16px;
margin-bottom: 24px;
}
.c-service__projects-each h2 {
margin-bottom: 6px;
line-height: 1;
}
.c-service__projects-each .cms-content {
padding: 0 24px;
max-width: 560px;
}
@media (min-width: 48.125em) {
.c-service__projects-each .cms-content {
margin-top: 100px;
}
}
.c-service__projects-each .o-layout__item {
vertical-align: middle;
}
.c-service__related {
padding-bottom: 0px;
}
.c-service__related-title {
text-align: center;
background-color: #f1c9b6;
color: #fff;
padding-top: 50px;
padding-bottom: 48px;
margin-bottom: 0;
}
@media (min-width: 48.125em) {
.c-service__related-title {
padding-bottom: 90px;
padding-top: 80px;
}
}
.c-service__related .c-services-list__card {
padding-bottom: 50px;
}
@media (min-width: 48.125em) {
.c-service__related .c-services-list__card {
padding-bottom: 100px;
}
}
@media (min-width: 48.125em) and (min-width: 48.125em) {
.c-service__related .c-services-list__card h2 {
margin-top: 80px;
}
}
.c-service__related .c-services-list__card .c-services-list__wrap {
margin-bottom: 0 !important;
}
.c-service__related .c-services-list__card:last-of-type {
margin-bottom: 0;
}
.c-service__related .c-services-list__card:last-of-type .c-services-list__wrap {
margin-bottom: 0;
}
.c-service__related .c-services-list__card:first-of-type {
background-color: #f1c9b6;
color: #fff;
}
.c-service__related .c-services-list__card:first-of-type .c-services-list__wrap {
margin-bottom: 0;
}
.c-service__related .c-services-list__card:first-of-type h2 {
margin-top: 0;
color: #fff;
opacity: 0.7;
}
@media (max-width: 48.115em) {
.c-service__related .c-services-list__card.ecom-section {
padding: 50px 0;
}
}
@media (min-width: 48.125em) {
.c-service__related .c-services-list__card.ecom-section .c-services-list__img {
margin-bottom: 0;
}
}
.c-service__related .c-services-list__info {
margin-top: 0;
}
.c-service__related .c-services-list h2 {
margin-bottom: 24px;
}
@media (min-width: 48.125em) {
.c-service__related .c-services-list h2 {
margin-bottom: 48px;
}
}
.c-service .page-contact-bottom p {
max-width: 100%;
}
@media (max-width: 48.115em) {
.buttonLink {
text-align: center;
}
}
.c-career-top {
margin-bottom: 60px;
position: relative;
}
.c-career-top .page-scroll {
right: 20px;
}
@media (min-width: 48.125em) {
.c-career-top .page-scroll {
right: 0;
}
}
@media (min-width: 48.125em) {
.c-career-top {
display: flex;
justify-content: center;
}
}
@media (min-width: 48.125em) and (min-width: 100em) {
.c-career-top {
max-width: 1320px;
margin: 0 auto;
}
}
@media (max-width: 48.115em) {
.c-career-top {
padding: 0 24px 24px;
margin-bottom: 0;
}
}
@media (min-width: 48.125em) {
.c-career-top__content {
align-self: flex-start;
padding-right: 60px;
flex: 70%;
}
}
@media (min-width: 100em) {
.c-career-top__content {
padding-right: 80px;
max-width: 100%;
}
}
@media (max-width: 48.115em) {
.c-career-top__content {
padding: 0;
padding-right: 30px;
}
}
.c-career-top__content .cms-content {
max-width: 600px;
}
@media (min-width: 48.125em) {
.c-career-top__content .cms-content p:last-of-type {
margin-bottom: 0;
}
}
.c-career-openPositions {
padding-bottom: 3rem;
}
.c-career-openPositions .row {
margin: 0 -8px;
position: relative;
display: flex;
flex-flow: row wrap;
}
.c-career-openPositions .row .col {
flex: 0 0 100%;
padding: 0 8px;
margin-bottom: 16px;
}
@media (min-width: 48.125em) {
.c-career-openPositions .row .col {
flex: 0 0 50%;
}
}
.c-career-openPositions .row .col .positionWrapper {
background: #fff;
border-radius: 10px;
overflow: hidden;
display: flex;
}
@media (min-width: 48.125em) {
.c-career-openPositions .row .col .positionWrapper {
height: 100%;
}
}
@media (max-width: 520px) {
.c-career-openPositions .row .col .positionWrapper {
flex-flow: column wrap;
flex-direction: column-reverse;
}
}
.c-career-openPositions .row .col .positionWrapper .jobDtl {
display: flex;
flex: 0 0 48%;
flex-flow: column;
justify-content: space-between;
padding: 15px 20px;
}
@media (max-width: 520px) {
.c-career-openPositions .row .col .positionWrapper .jobDtl {
flex: 0 0 100%;
}
}
.c-career-openPositions .row .col .positionWrapper .jobDtl .info ul {
list-style: none;
margin: 20px 0 5px;
}
.c-career-openPositions .row .col .positionWrapper .jobDtl .info ul li {
color: #ec8085;
display: inline-block;
margin-right: 6px;
}
.c-career-openPositions .row .col .positionWrapper .jobDtl .info ul li:after {
content: ",";
}
.c-career-openPositions .row .col .positionWrapper .jobDtl .info ul li:last-child:after {
content: "";
}
.c-career-openPositions .row .col .positionWrapper .jobDtl .applyButton {
margin: 20px 0;
}
.c-career-openPositions .row .col .positionWrapper .thumbImg {
flex: 0 0 52%;
max-height: 300px;
}
@media (max-width: 520px) {
.c-career-openPositions .row .col .positionWrapper .thumbImg {
flex: 0 0 100%;
min-height: 200px;
}
}
@media (min-width: 48.125em) {
.c-career-openPositions .row .col .positionWrapper .thumbImg {
max-height: 325px;
}
}
.noPosts {
color: #7ed3cb;
font-size: 24px;
font-weight: 700;
line-height: 28px;
padding: 0 8px;
}
.careerForm {
background: #fff;
border-radius: 5px;
padding: 30px;
text-align: left;
}
@media (min-width: 48.125em) {
.careerForm {
padding: 50px;
}
}
@media (min-width: 80em) {
.careerForm {
padding: 100px 90px;
}
}
.careerForm h4 {
margin-bottom: 10px;
}
.careerForm .applyingFor {
color: #7ed3cb;
font-weight: bold;
font-size: 24px;
line-height: 120%;
padding-bottom: 40px;
}
a.shareTxt:hover {
cursor: default;
}
a.shareTxt:hover svg {
transform: scale(1, 1);
opacity: 1;
}
a.shareTxt svg {
height: auto;
}
.careerForm button.nf-fu-fileinput-button {
position: relative;
background: #fff;
width: 100% !important;
border: solid 1px #ccc;
height: 40px;
border-radius: 5px;
text-align: right;
}
.careerForm button.nf-fu-fileinput-button:after {
content: "choose file...";
background: #658d95;
color: #fff;
position: absolute;
right: 0;
top: 0;
height: 100%;
border-radius: 5px;
padding: 0 20px;
line-height: 2;
}
.careerForm .nf-fu-progress {
display: none;
}
.careerForm .files_uploaded {
position: absolute;
top: 7px;
left: 15px;
}
.careerForm .files_uploaded a {
color: red;
font-size: 14px;
}
.c-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
z-index: 9999;
overflow: auto;
opacity: 1;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
background: rgba(0, 0, 0, 0.8);
}
.c-modal * {
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-backface-visibility: hidden;
}
.c-modal [tabindex="0"] {
outline: none !important;
}
.c-modal__outer-wrapper {
display: table;
position: relative;
width: 100%;
height: 100%;
}
.c-modal__inner-wrapper {
padding-top: 60px;
padding-bottom: 60px;
display: table-cell;
width: 100%;
height: 100%;
position: relative;
vertical-align: middle;
text-align: center;
padding: 80px 25px;
}
.c-modal__video-wrap {
margin: auto 0;
position: relative;
}
.c-modal__video-container {
max-width: 1020px;
max-height: 578px;
position: relative;
padding-bottom: 56.25%;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
margin-left: auto;
margin-right: auto;
}
@media screen and (max-height: 900px) {
.c-modal__video-container {
max-width: 900px;
max-height: 510px;
}
}
@media (min-width: 62.5em) {
.c-modal__video-container {
height: 710px;
padding-bottom: 0;
}
}
.c-modal__video-container embed,
.c-modal__video-container iframe,
.c-modal__video-container object,
.c-modal__video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.c-modal__close {
position: fixed;
z-index: 99999;
right: 10px;
top: 10px;
color: #fff;
cursor: pointer;
opacity: 1;
width: 50px;
height: 50px;
background: transparent;
border-radius: 100%;
transition: all 0.2s ease-in-out;
border: none;
background: transparent;
padding: 0;
-webkit-appearance: none;
}
.c-modal__close span {
position: absolute !important;
clip: rect(1px 1px 1px 1px);
clip: rect(1px, 1px, 1px, 1px);
padding: 0 !important;
border: 0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}
.c-modal__close:hover, .c-modal__close:focus {
outline: none;
}
.c-modal__close:focus:after, .c-modal__close:focus:before, .c-modal__close:hover:after, .c-modal__close:hover:before {
background: #658d95;
}
.c-modal__close:after, .c-modal__close:before {
content: "";
display: block;
position: absolute;
top: 14px;
left: 23px;
width: 3px;
height: 22px;
border-radius: 4px;
background: #fff;
transition: background 0.2s ease-in-out;
}
.c-modal__close:before {
transform: rotate(-45deg);
}
.c-modal__close:after {
transform: rotate(45deg);
}
@media (max-width: 399px) {
.c-home-top {
min-height: 36vh;
}
.c-home-top__logo-mobile {
display: block;
max-height: 90vh;
width: 16vw;
height: auto;
position: absolute;
top: 95px;
left: 43%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
transform: rotate(90deg);
z-index: 1;
margin-top: -80px;
}
.c-home-top__mockup img {
transition: 3s;
left: 50px;
width: 38vw;
background-color: transparent;
border-width: 0;
border-radius: 0;
position: absolute;
top: 23vw;
}
}
@media (min-width: 400px) and (max-width: 500px) {
.c-home-top {
min-height: 40vh;
}
.c-home-top__logo-mobile {
display: block;
max-height: 90vh;
width: 16vw;
height: auto;
position: absolute;
top: 95px;
left: 43%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
transform: rotate(90deg);
z-index: 1;
margin-top: -80px;
}
.c-home-top__mockup img {
transition: 3s;
left: 28px;
width: 38vw;
background-color: transparent;
border-width: 0;
border-radius: 0;
position: absolute;
top: 23vw;
}
}
@media (min-width: 500px) and (max-width: 604px) {
.c-home-top {
min-height: 43vh;
}
.c-home-top__logo-mobile {
display: none;
}
.c-home-top__logo {
display: block;
}
.c-home-top__mockup img {
transition: 3s;
left: 18px;
width: 38vw;
background-color: transparent;
border-width: 0;
border-radius: 0;
position: absolute;
top: 5vw;
}
}
@media (min-width: 604px) and (max-width: 771px) {
.c-home-top {
min-height: 40vh;
}
.c-home-top__logo-mobile {
display: none;
}
.c-home-top__logo {
display: block;
}
.c-home-top__mockup img {
transition: 3s;
left: 14px;
width: 38vw;
background-color: transparent;
border-width: 0;
border-radius: 0;
position: absolute;
top: 7vw;
}
}
/* ==========================================================================
#WIDTHS
========================================================================== */
/**
* inuitcss generates a series of utility classes that give a fluid width to
* whichever element they’re applied, e.g.:
*
*
* * These classes are most commonly used in conjunction with our layout system, * e.g.: * *
* * By default, inuitcss will also generate responsive variants of each of these * classes by using your Sass MQ configuration, e.g.: * ** * Optionally, inuitcss can generate offset classes which can push and pull * elements left and right by a specified amount, e.g.: * ** * This is useful for making very granular changes to the rendered order of * items in a layout. * * N.B. This option is turned off by default. */ /** * A series of width helper classes that you can use to size things like grid * systems. Classes take a fraction-like format (e.g. `.u-2/3`). Use these in * your markup: * ** * The following will generate widths helper classes based on the fractions * defined in the `$inuit-fractions` list. */ .u-1\/1 { width: 100% !important; } .u-1\/2 { width: 50% !important; } .u-2\/2 { width: 100% !important; } .u-1\/3 { width: 33.33333% !important; } .u-2\/3 { width: 66.66667% !important; } .u-3\/3 { width: 100% !important; } .u-1\/4 { width: 25% !important; } .u-2\/4 { width: 50% !important; } .u-3\/4 { width: 75% !important; } .u-4\/4 { width: 100% !important; } .u-1\/5 { width: 20% !important; } .u-2\/5 { width: 40% !important; } .u-3\/5 { width: 60% !important; } .u-4\/5 { width: 80% !important; } .u-5\/5 { width: 100% !important; } .u-1\/6 { width: 16.66667% !important; } .u-2\/6 { width: 33.33333% !important; } .u-3\/6 { width: 50% !important; } .u-4\/6 { width: 66.66667% !important; } .u-5\/6 { width: 83.33333% !important; } .u-6\/6 { width: 100% !important; } .u-1\/7 { width: 14.28571% !important; } .u-2\/7 { width: 28.57143% !important; } .u-3\/7 { width: 42.85714% !important; } .u-4\/7 { width: 57.14286% !important; } .u-5\/7 { width: 71.42857% !important; } .u-6\/7 { width: 85.71429% !important; } .u-7\/7 { width: 100% !important; } .u-1\/8 { width: 12.5% !important; } .u-2\/8 { width: 25% !important; } .u-3\/8 { width: 37.5% !important; } .u-4\/8 { width: 50% !important; } .u-5\/8 { width: 62.5% !important; } .u-6\/8 { width: 75% !important; } .u-7\/8 { width: 87.5% !important; } .u-8\/8 { width: 100% !important; } /** * If we’re using Sass-MQ, automatically generate grid system(s) for each of our * defined breakpoints, and give them a Responsive Suffix, e.g.: * **/ @media (min-width: 23.4375em) { .u-1\/1\@mobile { width: 100% !important; } .u-1\/2\@mobile { width: 50% !important; } .u-2\/2\@mobile { width: 100% !important; } .u-1\/3\@mobile { width: 33.33333% !important; } .u-2\/3\@mobile { width: 66.66667% !important; } .u-3\/3\@mobile { width: 100% !important; } .u-1\/4\@mobile { width: 25% !important; } .u-2\/4\@mobile { width: 50% !important; } .u-3\/4\@mobile { width: 75% !important; } .u-4\/4\@mobile { width: 100% !important; } .u-1\/5\@mobile { width: 20% !important; } .u-2\/5\@mobile { width: 40% !important; } .u-3\/5\@mobile { width: 60% !important; } .u-4\/5\@mobile { width: 80% !important; } .u-5\/5\@mobile { width: 100% !important; } .u-1\/6\@mobile { width: 16.66667% !important; } .u-2\/6\@mobile { width: 33.33333% !important; } .u-3\/6\@mobile { width: 50% !important; } .u-4\/6\@mobile { width: 66.66667% !important; } .u-5\/6\@mobile { width: 83.33333% !important; } .u-6\/6\@mobile { width: 100% !important; } .u-1\/7\@mobile { width: 14.28571% !important; } .u-2\/7\@mobile { width: 28.57143% !important; } .u-3\/7\@mobile { width: 42.85714% !important; } .u-4\/7\@mobile { width: 57.14286% !important; } .u-5\/7\@mobile { width: 71.42857% !important; } .u-6\/7\@mobile { width: 85.71429% !important; } .u-7\/7\@mobile { width: 100% !important; } .u-1\/8\@mobile { width: 12.5% !important; } .u-2\/8\@mobile { width: 25% !important; } .u-3\/8\@mobile { width: 37.5% !important; } .u-4\/8\@mobile { width: 50% !important; } .u-5\/8\@mobile { width: 62.5% !important; } .u-6\/8\@mobile { width: 75% !important; } .u-7\/8\@mobile { width: 87.5% !important; } .u-8\/8\@mobile { width: 100% !important; } } @media (min-width: 30em) { .u-1\/1\@mobileM { width: 100% !important; } .u-1\/2\@mobileM { width: 50% !important; } .u-2\/2\@mobileM { width: 100% !important; } .u-1\/3\@mobileM { width: 33.33333% !important; } .u-2\/3\@mobileM { width: 66.66667% !important; } .u-3\/3\@mobileM { width: 100% !important; } .u-1\/4\@mobileM { width: 25% !important; } .u-2\/4\@mobileM { width: 50% !important; } .u-3\/4\@mobileM { width: 75% !important; } .u-4\/4\@mobileM { width: 100% !important; } .u-1\/5\@mobileM { width: 20% !important; } .u-2\/5\@mobileM { width: 40% !important; } .u-3\/5\@mobileM { width: 60% !important; } .u-4\/5\@mobileM { width: 80% !important; } .u-5\/5\@mobileM { width: 100% !important; } .u-1\/6\@mobileM { width: 16.66667% !important; } .u-2\/6\@mobileM { width: 33.33333% !important; } .u-3\/6\@mobileM { width: 50% !important; } .u-4\/6\@mobileM { width: 66.66667% !important; } .u-5\/6\@mobileM { width: 83.33333% !important; } .u-6\/6\@mobileM { width: 100% !important; } .u-1\/7\@mobileM { width: 14.28571% !important; } .u-2\/7\@mobileM { width: 28.57143% !important; } .u-3\/7\@mobileM { width: 42.85714% !important; } .u-4\/7\@mobileM { width: 57.14286% !important; } .u-5\/7\@mobileM { width: 71.42857% !important; } .u-6\/7\@mobileM { width: 85.71429% !important; } .u-7\/7\@mobileM { width: 100% !important; } .u-1\/8\@mobileM { width: 12.5% !important; } .u-2\/8\@mobileM { width: 25% !important; } .u-3\/8\@mobileM { width: 37.5% !important; } .u-4\/8\@mobileM { width: 50% !important; } .u-5\/8\@mobileM { width: 62.5% !important; } .u-6\/8\@mobileM { width: 75% !important; } .u-7\/8\@mobileM { width: 87.5% !important; } .u-8\/8\@mobileM { width: 100% !important; } } @media (min-width: 37.5em) { .u-1\/1\@mobileLandscape { width: 100% !important; } .u-1\/2\@mobileLandscape { width: 50% !important; } .u-2\/2\@mobileLandscape { width: 100% !important; } .u-1\/3\@mobileLandscape { width: 33.33333% !important; } .u-2\/3\@mobileLandscape { width: 66.66667% !important; } .u-3\/3\@mobileLandscape { width: 100% !important; } .u-1\/4\@mobileLandscape { width: 25% !important; } .u-2\/4\@mobileLandscape { width: 50% !important; } .u-3\/4\@mobileLandscape { width: 75% !important; } .u-4\/4\@mobileLandscape { width: 100% !important; } .u-1\/5\@mobileLandscape { width: 20% !important; } .u-2\/5\@mobileLandscape { width: 40% !important; } .u-3\/5\@mobileLandscape { width: 60% !important; } .u-4\/5\@mobileLandscape { width: 80% !important; } .u-5\/5\@mobileLandscape { width: 100% !important; } .u-1\/6\@mobileLandscape { width: 16.66667% !important; } .u-2\/6\@mobileLandscape { width: 33.33333% !important; } .u-3\/6\@mobileLandscape { width: 50% !important; } .u-4\/6\@mobileLandscape { width: 66.66667% !important; } .u-5\/6\@mobileLandscape { width: 83.33333% !important; } .u-6\/6\@mobileLandscape { width: 100% !important; } .u-1\/7\@mobileLandscape { width: 14.28571% !important; } .u-2\/7\@mobileLandscape { width: 28.57143% !important; } .u-3\/7\@mobileLandscape { width: 42.85714% !important; } .u-4\/7\@mobileLandscape { width: 57.14286% !important; } .u-5\/7\@mobileLandscape { width: 71.42857% !important; } .u-6\/7\@mobileLandscape { width: 85.71429% !important; } .u-7\/7\@mobileLandscape { width: 100% !important; } .u-1\/8\@mobileLandscape { width: 12.5% !important; } .u-2\/8\@mobileLandscape { width: 25% !important; } .u-3\/8\@mobileLandscape { width: 37.5% !important; } .u-4\/8\@mobileLandscape { width: 50% !important; } .u-5\/8\@mobileLandscape { width: 62.5% !important; } .u-6\/8\@mobileLandscape { width: 75% !important; } .u-7\/8\@mobileLandscape { width: 87.5% !important; } .u-8\/8\@mobileLandscape { width: 100% !important; } } @media (min-width: 48.125em) { .u-1\/1\@tablet { width: 100% !important; } .u-1\/2\@tablet { width: 50% !important; } .u-2\/2\@tablet { width: 100% !important; } .u-1\/3\@tablet { width: 33.33333% !important; } .u-2\/3\@tablet { width: 66.66667% !important; } .u-3\/3\@tablet { width: 100% !important; } .u-1\/4\@tablet { width: 25% !important; } .u-2\/4\@tablet { width: 50% !important; } .u-3\/4\@tablet { width: 75% !important; } .u-4\/4\@tablet { width: 100% !important; } .u-1\/5\@tablet { width: 20% !important; } .u-2\/5\@tablet { width: 40% !important; } .u-3\/5\@tablet { width: 60% !important; } .u-4\/5\@tablet { width: 80% !important; } .u-5\/5\@tablet { width: 100% !important; } .u-1\/6\@tablet { width: 16.66667% !important; } .u-2\/6\@tablet { width: 33.33333% !important; } .u-3\/6\@tablet { width: 50% !important; } .u-4\/6\@tablet { width: 66.66667% !important; } .u-5\/6\@tablet { width: 83.33333% !important; } .u-6\/6\@tablet { width: 100% !important; } .u-1\/7\@tablet { width: 14.28571% !important; } .u-2\/7\@tablet { width: 28.57143% !important; } .u-3\/7\@tablet { width: 42.85714% !important; } .u-4\/7\@tablet { width: 57.14286% !important; } .u-5\/7\@tablet { width: 71.42857% !important; } .u-6\/7\@tablet { width: 85.71429% !important; } .u-7\/7\@tablet { width: 100% !important; } .u-1\/8\@tablet { width: 12.5% !important; } .u-2\/8\@tablet { width: 25% !important; } .u-3\/8\@tablet { width: 37.5% !important; } .u-4\/8\@tablet { width: 50% !important; } .u-5\/8\@tablet { width: 62.5% !important; } .u-6\/8\@tablet { width: 75% !important; } .u-7\/8\@tablet { width: 87.5% !important; } .u-8\/8\@tablet { width: 100% !important; } } @media (min-width: 62.5em) { .u-1\/1\@tabletWide { width: 100% !important; } .u-1\/2\@tabletWide { width: 50% !important; } .u-2\/2\@tabletWide { width: 100% !important; } .u-1\/3\@tabletWide { width: 33.33333% !important; } .u-2\/3\@tabletWide { width: 66.66667% !important; } .u-3\/3\@tabletWide { width: 100% !important; } .u-1\/4\@tabletWide { width: 25% !important; } .u-2\/4\@tabletWide { width: 50% !important; } .u-3\/4\@tabletWide { width: 75% !important; } .u-4\/4\@tabletWide { width: 100% !important; } .u-1\/5\@tabletWide { width: 20% !important; } .u-2\/5\@tabletWide { width: 40% !important; } .u-3\/5\@tabletWide { width: 60% !important; } .u-4\/5\@tabletWide { width: 80% !important; } .u-5\/5\@tabletWide { width: 100% !important; } .u-1\/6\@tabletWide { width: 16.66667% !important; } .u-2\/6\@tabletWide { width: 33.33333% !important; } .u-3\/6\@tabletWide { width: 50% !important; } .u-4\/6\@tabletWide { width: 66.66667% !important; } .u-5\/6\@tabletWide { width: 83.33333% !important; } .u-6\/6\@tabletWide { width: 100% !important; } .u-1\/7\@tabletWide { width: 14.28571% !important; } .u-2\/7\@tabletWide { width: 28.57143% !important; } .u-3\/7\@tabletWide { width: 42.85714% !important; } .u-4\/7\@tabletWide { width: 57.14286% !important; } .u-5\/7\@tabletWide { width: 71.42857% !important; } .u-6\/7\@tabletWide { width: 85.71429% !important; } .u-7\/7\@tabletWide { width: 100% !important; } .u-1\/8\@tabletWide { width: 12.5% !important; } .u-2\/8\@tabletWide { width: 25% !important; } .u-3\/8\@tabletWide { width: 37.5% !important; } .u-4\/8\@tabletWide { width: 50% !important; } .u-5\/8\@tabletWide { width: 62.5% !important; } .u-6\/8\@tabletWide { width: 75% !important; } .u-7\/8\@tabletWide { width: 87.5% !important; } .u-8\/8\@tabletWide { width: 100% !important; } } @media (min-width: 71.875em) { .u-1\/1\@laptopMed { width: 100% !important; } .u-1\/2\@laptopMed { width: 50% !important; } .u-2\/2\@laptopMed { width: 100% !important; } .u-1\/3\@laptopMed { width: 33.33333% !important; } .u-2\/3\@laptopMed { width: 66.66667% !important; } .u-3\/3\@laptopMed { width: 100% !important; } .u-1\/4\@laptopMed { width: 25% !important; } .u-2\/4\@laptopMed { width: 50% !important; } .u-3\/4\@laptopMed { width: 75% !important; } .u-4\/4\@laptopMed { width: 100% !important; } .u-1\/5\@laptopMed { width: 20% !important; } .u-2\/5\@laptopMed { width: 40% !important; } .u-3\/5\@laptopMed { width: 60% !important; } .u-4\/5\@laptopMed { width: 80% !important; } .u-5\/5\@laptopMed { width: 100% !important; } .u-1\/6\@laptopMed { width: 16.66667% !important; } .u-2\/6\@laptopMed { width: 33.33333% !important; } .u-3\/6\@laptopMed { width: 50% !important; } .u-4\/6\@laptopMed { width: 66.66667% !important; } .u-5\/6\@laptopMed { width: 83.33333% !important; } .u-6\/6\@laptopMed { width: 100% !important; } .u-1\/7\@laptopMed { width: 14.28571% !important; } .u-2\/7\@laptopMed { width: 28.57143% !important; } .u-3\/7\@laptopMed { width: 42.85714% !important; } .u-4\/7\@laptopMed { width: 57.14286% !important; } .u-5\/7\@laptopMed { width: 71.42857% !important; } .u-6\/7\@laptopMed { width: 85.71429% !important; } .u-7\/7\@laptopMed { width: 100% !important; } .u-1\/8\@laptopMed { width: 12.5% !important; } .u-2\/8\@laptopMed { width: 25% !important; } .u-3\/8\@laptopMed { width: 37.5% !important; } .u-4\/8\@laptopMed { width: 50% !important; } .u-5\/8\@laptopMed { width: 62.5% !important; } .u-6\/8\@laptopMed { width: 75% !important; } .u-7\/8\@laptopMed { width: 87.5% !important; } .u-8\/8\@laptopMed { width: 100% !important; } } @media (min-width: 80em) { .u-1\/1\@laptop { width: 100% !important; } .u-1\/2\@laptop { width: 50% !important; } .u-2\/2\@laptop { width: 100% !important; } .u-1\/3\@laptop { width: 33.33333% !important; } .u-2\/3\@laptop { width: 66.66667% !important; } .u-3\/3\@laptop { width: 100% !important; } .u-1\/4\@laptop { width: 25% !important; } .u-2\/4\@laptop { width: 50% !important; } .u-3\/4\@laptop { width: 75% !important; } .u-4\/4\@laptop { width: 100% !important; } .u-1\/5\@laptop { width: 20% !important; } .u-2\/5\@laptop { width: 40% !important; } .u-3\/5\@laptop { width: 60% !important; } .u-4\/5\@laptop { width: 80% !important; } .u-5\/5\@laptop { width: 100% !important; } .u-1\/6\@laptop { width: 16.66667% !important; } .u-2\/6\@laptop { width: 33.33333% !important; } .u-3\/6\@laptop { width: 50% !important; } .u-4\/6\@laptop { width: 66.66667% !important; } .u-5\/6\@laptop { width: 83.33333% !important; } .u-6\/6\@laptop { width: 100% !important; } .u-1\/7\@laptop { width: 14.28571% !important; } .u-2\/7\@laptop { width: 28.57143% !important; } .u-3\/7\@laptop { width: 42.85714% !important; } .u-4\/7\@laptop { width: 57.14286% !important; } .u-5\/7\@laptop { width: 71.42857% !important; } .u-6\/7\@laptop { width: 85.71429% !important; } .u-7\/7\@laptop { width: 100% !important; } .u-1\/8\@laptop { width: 12.5% !important; } .u-2\/8\@laptop { width: 25% !important; } .u-3\/8\@laptop { width: 37.5% !important; } .u-4\/8\@laptop { width: 50% !important; } .u-5\/8\@laptop { width: 62.5% !important; } .u-6\/8\@laptop { width: 75% !important; } .u-7\/8\@laptop { width: 87.5% !important; } .u-8\/8\@laptop { width: 100% !important; } } @media (min-width: 90em) { .u-1\/1\@desktop { width: 100% !important; } .u-1\/2\@desktop { width: 50% !important; } .u-2\/2\@desktop { width: 100% !important; } .u-1\/3\@desktop { width: 33.33333% !important; } .u-2\/3\@desktop { width: 66.66667% !important; } .u-3\/3\@desktop { width: 100% !important; } .u-1\/4\@desktop { width: 25% !important; } .u-2\/4\@desktop { width: 50% !important; } .u-3\/4\@desktop { width: 75% !important; } .u-4\/4\@desktop { width: 100% !important; } .u-1\/5\@desktop { width: 20% !important; } .u-2\/5\@desktop { width: 40% !important; } .u-3\/5\@desktop { width: 60% !important; } .u-4\/5\@desktop { width: 80% !important; } .u-5\/5\@desktop { width: 100% !important; } .u-1\/6\@desktop { width: 16.66667% !important; } .u-2\/6\@desktop { width: 33.33333% !important; } .u-3\/6\@desktop { width: 50% !important; } .u-4\/6\@desktop { width: 66.66667% !important; } .u-5\/6\@desktop { width: 83.33333% !important; } .u-6\/6\@desktop { width: 100% !important; } .u-1\/7\@desktop { width: 14.28571% !important; } .u-2\/7\@desktop { width: 28.57143% !important; } .u-3\/7\@desktop { width: 42.85714% !important; } .u-4\/7\@desktop { width: 57.14286% !important; } .u-5\/7\@desktop { width: 71.42857% !important; } .u-6\/7\@desktop { width: 85.71429% !important; } .u-7\/7\@desktop { width: 100% !important; } .u-1\/8\@desktop { width: 12.5% !important; } .u-2\/8\@desktop { width: 25% !important; } .u-3\/8\@desktop { width: 37.5% !important; } .u-4\/8\@desktop { width: 50% !important; } .u-5\/8\@desktop { width: 62.5% !important; } .u-6\/8\@desktop { width: 75% !important; } .u-7\/8\@desktop { width: 87.5% !important; } .u-8\/8\@desktop { width: 100% !important; } } @media (min-width: 100em) { .u-1\/1\@wideScreen { width: 100% !important; } .u-1\/2\@wideScreen { width: 50% !important; } .u-2\/2\@wideScreen { width: 100% !important; } .u-1\/3\@wideScreen { width: 33.33333% !important; } .u-2\/3\@wideScreen { width: 66.66667% !important; } .u-3\/3\@wideScreen { width: 100% !important; } .u-1\/4\@wideScreen { width: 25% !important; } .u-2\/4\@wideScreen { width: 50% !important; } .u-3\/4\@wideScreen { width: 75% !important; } .u-4\/4\@wideScreen { width: 100% !important; } .u-1\/5\@wideScreen { width: 20% !important; } .u-2\/5\@wideScreen { width: 40% !important; } .u-3\/5\@wideScreen { width: 60% !important; } .u-4\/5\@wideScreen { width: 80% !important; } .u-5\/5\@wideScreen { width: 100% !important; } .u-1\/6\@wideScreen { width: 16.66667% !important; } .u-2\/6\@wideScreen { width: 33.33333% !important; } .u-3\/6\@wideScreen { width: 50% !important; } .u-4\/6\@wideScreen { width: 66.66667% !important; } .u-5\/6\@wideScreen { width: 83.33333% !important; } .u-6\/6\@wideScreen { width: 100% !important; } .u-1\/7\@wideScreen { width: 14.28571% !important; } .u-2\/7\@wideScreen { width: 28.57143% !important; } .u-3\/7\@wideScreen { width: 42.85714% !important; } .u-4\/7\@wideScreen { width: 57.14286% !important; } .u-5\/7\@wideScreen { width: 71.42857% !important; } .u-6\/7\@wideScreen { width: 85.71429% !important; } .u-7\/7\@wideScreen { width: 100% !important; } .u-1\/8\@wideScreen { width: 12.5% !important; } .u-2\/8\@wideScreen { width: 25% !important; } .u-3\/8\@wideScreen { width: 37.5% !important; } .u-4\/8\@wideScreen { width: 50% !important; } .u-5\/8\@wideScreen { width: 62.5% !important; } .u-6\/8\@wideScreen { width: 75% !important; } .u-7\/8\@wideScreen { width: 87.5% !important; } .u-8\/8\@wideScreen { width: 100% !important; } } @media (min-width: 120em) { .u-1\/1\@widerScreen { width: 100% !important; } .u-1\/2\@widerScreen { width: 50% !important; } .u-2\/2\@widerScreen { width: 100% !important; } .u-1\/3\@widerScreen { width: 33.33333% !important; } .u-2\/3\@widerScreen { width: 66.66667% !important; } .u-3\/3\@widerScreen { width: 100% !important; } .u-1\/4\@widerScreen { width: 25% !important; } .u-2\/4\@widerScreen { width: 50% !important; } .u-3\/4\@widerScreen { width: 75% !important; } .u-4\/4\@widerScreen { width: 100% !important; } .u-1\/5\@widerScreen { width: 20% !important; } .u-2\/5\@widerScreen { width: 40% !important; } .u-3\/5\@widerScreen { width: 60% !important; } .u-4\/5\@widerScreen { width: 80% !important; } .u-5\/5\@widerScreen { width: 100% !important; } .u-1\/6\@widerScreen { width: 16.66667% !important; } .u-2\/6\@widerScreen { width: 33.33333% !important; } .u-3\/6\@widerScreen { width: 50% !important; } .u-4\/6\@widerScreen { width: 66.66667% !important; } .u-5\/6\@widerScreen { width: 83.33333% !important; } .u-6\/6\@widerScreen { width: 100% !important; } .u-1\/7\@widerScreen { width: 14.28571% !important; } .u-2\/7\@widerScreen { width: 28.57143% !important; } .u-3\/7\@widerScreen { width: 42.85714% !important; } .u-4\/7\@widerScreen { width: 57.14286% !important; } .u-5\/7\@widerScreen { width: 71.42857% !important; } .u-6\/7\@widerScreen { width: 85.71429% !important; } .u-7\/7\@widerScreen { width: 100% !important; } .u-1\/8\@widerScreen { width: 12.5% !important; } .u-2\/8\@widerScreen { width: 25% !important; } .u-3\/8\@widerScreen { width: 37.5% !important; } .u-4\/8\@widerScreen { width: 50% !important; } .u-5\/8\@widerScreen { width: 62.5% !important; } .u-6\/8\@widerScreen { width: 75% !important; } .u-7\/8\@widerScreen { width: 87.5% !important; } .u-8\/8\@widerScreen { width: 100% !important; } } /* ========================================================================== #HEADINGS ========================================================================== */ /** * Redefine all of our basic heading styles against utility classes so as to * allow for double stranded heading hierarchy, e.g. we semantically need an H2, * but we want it to be sized like an H1: * * * */ .u-h1 { font-size: 36px !important; font-size: 2rem !important; line-height: 1.16667 !important; } .u-h2 { font-size: 28px !important; font-size: 1.55556rem !important; line-height: 1.28571 !important; } .u-h3 { font-size: 24px !important; font-size: 1.33333rem !important; line-height: 1.25 !important; } .u-h4 { font-size: 20px !important; font-size: 1.11111rem !important; line-height: 1.5 !important; } .u-h5 { font-size: 18px !important; font-size: 1rem !important; line-height: 1.33333 !important; } .u-h6 { font-size: 16px !important; font-size: 0.88889rem !important; line-height: 1.5 !important; } /* ========================================================================== #SPACINGS ========================================================================== */ /** * Utility classes to put specific spacing values onto elements. The below loop * will generate us a suite of classes like: * * .u-margin-top {} * .u-padding-left-large {} * .u-margin-right-small {} * .u-padding {} * .u-padding-right-none {} * .u-padding-horizontal {} * .u-padding-vertical-small {} */ .u-padding { padding: 24px !important; } .u-padding-tiny { padding: 6px !important; } .u-padding-small { padding: 12px !important; } .u-padding-large { padding: 48px !important; } .u-padding-huge { padding: 96px !important; } .u-padding-none { padding: 0 !important; } .u-padding-top { padding-top: 24px !important; } .u-padding-top-tiny { padding-top: 6px !important; } .u-padding-top-small { padding-top: 12px !important; } .u-padding-top-large { padding-top: 48px !important; } .u-padding-top-huge { padding-top: 96px !important; } .u-padding-top-none { padding-top: 0 !important; } .u-padding-right { padding-right: 24px !important; } .u-padding-right-tiny { padding-right: 6px !important; } .u-padding-right-small { padding-right: 12px !important; } .u-padding-right-large { padding-right: 48px !important; } .u-padding-right-huge { padding-right: 96px !important; } .u-padding-right-none { padding-right: 0 !important; } .u-padding-bottom { padding-bottom: 24px !important; } .u-padding-bottom-tiny { padding-bottom: 6px !important; } .u-padding-bottom-small { padding-bottom: 12px !important; } .u-padding-bottom-large { padding-bottom: 48px !important; } .u-padding-bottom-huge { padding-bottom: 96px !important; } .u-padding-bottom-none { padding-bottom: 0 !important; } .u-padding-left { padding-left: 24px !important; } .u-padding-left-tiny { padding-left: 6px !important; } .u-padding-left-small { padding-left: 12px !important; } .u-padding-left-large { padding-left: 48px !important; } .u-padding-left-huge { padding-left: 96px !important; } .u-padding-left-none { padding-left: 0 !important; } .u-padding-horizontal { padding-left: 24px !important; padding-right: 24px !important; } .u-padding-horizontal-tiny { padding-left: 6px !important; padding-right: 6px !important; } .u-padding-horizontal-small { padding-left: 12px !important; padding-right: 12px !important; } .u-padding-horizontal-large { padding-left: 48px !important; padding-right: 48px !important; } .u-padding-horizontal-huge { padding-left: 96px !important; padding-right: 96px !important; } .u-padding-horizontal-none { padding-left: 0 !important; padding-right: 0 !important; } .u-padding-vertical { padding-top: 24px !important; padding-bottom: 24px !important; } .u-padding-vertical-tiny { padding-top: 6px !important; padding-bottom: 6px !important; } .u-padding-vertical-small { padding-top: 12px !important; padding-bottom: 12px !important; } .u-padding-vertical-large { padding-top: 48px !important; padding-bottom: 48px !important; } .u-padding-vertical-huge { padding-top: 96px !important; padding-bottom: 96px !important; } .u-padding-vertical-none { padding-top: 0 !important; padding-bottom: 0 !important; } .u-margin { margin: 24px !important; } .u-margin-tiny { margin: 6px !important; } .u-margin-small { margin: 12px !important; } .u-margin-large { margin: 48px !important; } .u-margin-huge { margin: 96px !important; } .u-margin-none { margin: 0 !important; } .u-margin-top { margin-top: 24px !important; } .u-margin-top-tiny { margin-top: 6px !important; } .u-margin-top-small { margin-top: 12px !important; } .u-margin-top-large { margin-top: 48px !important; } .u-margin-top-huge { margin-top: 96px !important; } .u-margin-top-none { margin-top: 0 !important; } .u-margin-right { margin-right: 24px !important; } .u-margin-right-tiny { margin-right: 6px !important; } .u-margin-right-small { margin-right: 12px !important; } .u-margin-right-large { margin-right: 48px !important; } .u-margin-right-huge { margin-right: 96px !important; } .u-margin-right-none { margin-right: 0 !important; } .u-margin-bottom { margin-bottom: 24px !important; } .u-margin-bottom-tiny { margin-bottom: 6px !important; } .u-margin-bottom-small { margin-bottom: 12px !important; } .u-margin-bottom-large { margin-bottom: 48px !important; } .u-margin-bottom-huge { margin-bottom: 96px !important; } .u-margin-bottom-none { margin-bottom: 0 !important; } .u-margin-left { margin-left: 24px !important; } .u-margin-left-tiny { margin-left: 6px !important; } .u-margin-left-small { margin-left: 12px !important; } .u-margin-left-large { margin-left: 48px !important; } .u-margin-left-huge { margin-left: 96px !important; } .u-margin-left-none { margin-left: 0 !important; } .u-margin-horizontal { margin-left: 24px !important; margin-right: 24px !important; } .u-margin-horizontal-tiny { margin-left: 6px !important; margin-right: 6px !important; } .u-margin-horizontal-small { margin-left: 12px !important; margin-right: 12px !important; } .u-margin-horizontal-large { margin-left: 48px !important; margin-right: 48px !important; } .u-margin-horizontal-huge { margin-left: 96px !important; margin-right: 96px !important; } .u-margin-horizontal-none { margin-left: 0 !important; margin-right: 0 !important; } .u-margin-vertical { margin-top: 24px !important; margin-bottom: 24px !important; } .u-margin-vertical-tiny { margin-top: 6px !important; margin-bottom: 6px !important; } .u-margin-vertical-small { margin-top: 12px !important; margin-bottom: 12px !important; } .u-margin-vertical-large { margin-top: 48px !important; margin-bottom: 48px !important; } .u-margin-vertical-huge { margin-top: 96px !important; margin-bottom: 96px !important; } .u-margin-vertical-none { margin-top: 0 !important; margin-bottom: 0 !important; } .clearfix::after { content: ""; display: table; clear: both; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); } .screen-reader-text:focus { top: 5px; left: 5px; z-index: 100000; display: block; width: auto; height: auto; padding: 15px 23px 14px; border-radius: 3px; clip: auto !important; font-size: 0.875rem; font-weight: bold; line-height: normal; color: #21759b; text-decoration: none; background-color: #f1f1f1; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); } .cover { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .t-align-center { text-align: center; } .t-align-left { text-align: left; } .t-align-right { text-align: right; } pre { background-color: #000; font-family: "Courier New", Courier, monospace; font-size: 16px; color: #fff; width: 100%; overflow: scroll; } .animated { opacity: 1; animation: fadeInUp 0.75s; animation-fill-mode: both; } .imgrotate { opacity: 1; animation: rotation 1s; animation-delay: 0.1s; animation-fill-mode: both; } .imgrtl { opacity: 1; animation: roll-in-right 1s ease-out both; animation-delay: 0.3s; } .pre-animate { opacity: 0; } .visible { opacity: 1 !important; } .animate-delay-0 { animation-delay: 0s; } .animate-delay-1 { animation-delay: 0.2s; } .animate-delay-2 { animation-delay: 0.4s; } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: translate3d(0, 0, 0); } } @keyframes imganimate { 0% { opacity: 0; transform: scale(1.1) translate3d(-10px, 0, 0); } 100% { opacity: 1; transform: scale(1) translate3d(0, 0, 0); } } @keyframes fade-in-fwd { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scale-in-center { 0% { -webkit-transform: scale(0.5); transform: scale(0.5); opacity: 1; } 100% { -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes rotation { from { transform: rotate(-45deg); } to { transform: rotate(0deg); } } @keyframes roll-in-right { 0% { transform: translateX(-100px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } }