li:last-child:after {
display: none;
}
.nav--side {
height: 100%;
max-height: 100%;
border-top: 1px solid #ededed;
border-right: 1px solid #ededed;
}
.nav--side > li {
border-bottom: 1px solid #ededed;
color: #262626;
}
.nav--side > li a {
padding: 15px 0 15px 15px;
text-transform: uppercase;
color: inherit;
display: block;
-webkit-transition: all 120ms linear;
-moz-transition: all 120ms linear;
-o-transition: all 120ms linear;
-ms-transition: all 120ms linear;
transition: all 120ms linear;
}
.nav--side > li a .lush {
margin-right: 15px;
}
.nav--side > li a:hover {
background-color: #ededed;
}
.nav--side .isSelected a {
background-color: #9fe0f3;
}
@media (max-width: 767px) {
.nav--side {
display: none;
}
}
.navHeader {
padding: 90px 0 30px 0;
}
.strip--magic {
background: #f2f2f2;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmMmYyZjIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI1MCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left, #f2f2f2 50%, #ffffff 50%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(50%, #f2f2f2), color-stop(50%, #ffffff));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #f2f2f2 50%, #ffffff 50%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #f2f2f2 50%, #ffffff 50%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #f2f2f2 50%, #ffffff 50%);
/* IE10+ */
background: linear-gradient(to right, #f2f2f2 50%, #ffffff 50%);
/* W3C */
}
/**!
* Flag object
*
* Very similar to the `.media` object, only the flag object allows for
* vertical alignment.
* stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
* http://csswizardry.com/2013/05/the-flag-object/
*
*
* =========================================================================== */
.flag {
display: table;
width: 100%;
}
.flag-media,
.flag-body {
display: table-cell;
}
.flag--top .flag-media,
.flag--top .flag-body {
vertical-align: top;
}
.flag--bottom .flag-media,
.flag--bottom .flag-body {
vertical-align: bottom;
}
.flag--middle .flag-media,
.flag--middle .flag-body {
vertical-align: middle;
}
.flag-body {
padding-right: 30px;
}
.flag--rev .flag-body {
padding-right: 0;
padding-left: 30px;
}
.flag-media {
padding-right: 30px;
}
.flag-media > img {
display: block;
max-width: none;
}
.flag--rev .flag-media {
padding-right: 0;
padding-left: 30px;
}
.flag-body {
width: 100%;
}
/**!
* Island object
*
* Simple, boxed off content, as per: csswizardry.com/2011/10/the-island-object
* E.g.:
*
I am boxed off.
*
* Demo: jsfiddle.net/inuitcss/u8pV3
*
* ========================================================================== */
.island {
display: block;
}
.island {
padding: 30px;
}
.island > :last-child {
margin-bottom: 0;
}
/**
* Various `.island` sizes.
*/
.island--small {
padding: 15px;
}
.island--large {
padding: 60px;
}
/**
* Controlling `.island` padding to allow for just
* top and bottom or just left and right padding.
*/
.island--vertical {
padding-left: 0;
padding-right: 0;
}
.island--horizontal {
padding-top: 0;
padding-bottom: 0;
}
.island--top {
padding-left: 0;
padding-right: 0;
padding-bottom: 0;
}
.island--bottom {
padding-left: 0;
padding-right: 0;
padding-top: 0;
}
/**
* Various `.island` colors
*/
.island--frost {
background-color: #f6f6f6;
border: 1px solid #dddddd;
}
/**!
* featurette
*
* featurette object
*
Title goes here
Lorem ipsum blah blah blah
Learn More
*
* =========================================================================== */
.featurette {
margin-bottom: 60px;
margin-bottom: 3.75rem;
}
.featurette:before,
.featurette:after {
content: " ";
display: table;
}
.featurette:after {
clear: both;
}
.featurette ul {
margin: 0 0 30px 20px;
padding: 0;
}
.featurette li {
font-size: 14px;
margin: 0;
}
.featurette .featurette-media {
text-align: center;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.featurette .featurette-media img,
.featurette .featurette-media video,
.featurette .featurette-media iframe {
width: 100%;
max-width: 100%;
}
.featurette .featurette-title {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.featurette .featurette-blurb {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.no-js .featurette-media {
display: none;
}
/* ==========================================================================
Intrinsic ratio embed - http://j.mp/GIHbnu
========================================================================== */
/**
* Flexible media embeds
*
* For use with media embeds – such as videos, slideshows, or even images –
* that need to retain a specific aspect ratio but adapt to the width of their
* containing element.
*
* Example HTML:
*
*
*
*
*
*
* [iframe|object|embed|img]
*
*/
.flexEmbed {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 0;
padding-top: 0;
}
/**
* The use of an explicit descendant class makes this component more flexible.
* However, it will work automatically for iframes, embeds, and objects to
* account for times when you cannot modify the attributes for 3rd party widget
* code.
*/
.flexEmbed-item,
.flexEmbed iframe,
.flexEmbed embed,
.flexEmbed object,
.flexEmbed video {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
/**
* Modifier: 16:9 aspect ratio
*/
.flexEmbed--16by9 {
padding-bottom: 56.20%;
}
/**
* Modifier: 4:3 aspect ratio
*/
.flexEmbed--4by3 {
padding-bottom: 75%;
}
/**
* Hero Unit
*/
.flexEmbed--hero {
padding-bottom: 32.2%;
}
.flexEmbed--feature {
padding-bottom: 51%;
}
.flexEmbed--person {
padding-bottom: 100%;
}
/**!
* (mt) CSS Grid System
*
* Custom CSS grid solution built with LESS
* ========================================================================== */
/* ==========================================================================
Mixins that build columns and rows
Note: Grid variables located in ~/variables.less
========================================================================== */
/**
* Make grid columns
*/
/**
* Make push columns
*/
/**
* Make row inside grid container
*/
/**
* Grid/Columns based on `display: inline-block;` divs
*/
/**
* Grid/Columns based on `float: left;` divs
*/
/**
* Stacked grid columns for mobile view
*/
/* ==========================================================================
Grid system classes
========================================================================== */
/**
* The grid container
* Anytime you use the grid there should be a grid container.
[...]
*/
.grid {
margin: 0 auto;
max-width: 1240px;
padding-left: 20px;
padding-right: 20px;
}
.grid:before,
.grid:after {
content: " ";
display: table;
}
.grid:after {
clear: both;
}
.grid:before,
.grid:after {
content: " ";
display: table;
}
.grid:after {
clear: both;
}
/**
* Use a row inside of a grid or grid column.
*/
.grid-row {
clear: both;
}
.grid-row:before,
.grid-row:after {
content: " ";
display: table;
}
.grid-row:after {
clear: both;
}
/**
* I think you know how columns work.
* Each grid column should have a class of `grid-col`.
* Note: You __DONT__ need to add a class of `last` or anything to the last column.
*/
.grid-col {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
}
.grid-col:before,
.grid-col:after {
content: " ";
display: table;
}
.grid-col:after {
clear: both;
}
.grid-col .grid,
.grid-col .grid-row {
margin-left: -0.83335%;
margin-right: -0.83335%;
}
@media (max-width: 767px) {
.grid-col--spaced {
margin-bottom: 30px;
}
.grid-col--spaced--sm {
margin-bottom: 15px;
}
.grid-col--spaced--lg {
margin-bottom: 60px;
}
}
/* Grid Modifiers
-------------------------------------------------------------------------- */
/**
* Grid that spans the length of the browser.
*/
.grid--wide {
max-width: 100%;
}
.grid--split {
max-width: 100%;
width: 100%;
}
.grid--split > .grid-col {
width: 50%;
margin: 0;
}
/* Grid column widths
-------------------------------------------------------------------------- */
.span1 {
width: 6.667%;
}
.span2 {
width: 15%;
}
.span3 {
width: 23.333%;
}
.oneFourth {
width: 23.333%;
}
.span4 {
width: 31.667%;
}
.oneThird {
width: 31.667%;
}
.span5 {
width: 40%;
}
.span6 {
width: 48.333%;
}
.oneHalf {
width: 48.333%;
}
.span7 {
width: 56.667%;
}
.span8 {
width: 65%;
}
.span9 {
width: 73.333%;
}
.span10 {
width: 81.667%;
}
.span11 {
width: 90%;
}
.span12 {
float: none;
clear: both;
display: block;
width: 98.333%;
}
.push1 {
margin-left: 9.1667%;
}
.push1--half {
margin-left: 13.1667%;
}
.push2 {
margin-left: 17.5%;
}
.push3 {
margin-left: 25.8333%;
}
.push4 {
margin-left: 34.1667%;
}
.push5 {
margin-left: 42.5%;
}
.push6 {
margin-left: 50.8333%;
}
.push7 {
margin-left: 59.1667%;
}
.push8 {
margin-left: 67.5%;
}
.push9 {
margin-left: 75.8333%;
}
.push10 {
margin-left: 84.1667%;
}
.push11 {
margin-left: 92.5%;
}
.push12 {
margin-left: 100.8333%;
}
.pull1 {
margin-right: 9.1667%;
float: right;
}
.pull1--half {
margin-right: 13.1667%;
}
.pull2 {
margin-right: 17.5%;
float: right;
}
.pull3 {
margin-right: 25.8333%;
float: right;
}
.pull4 {
margin-right: 34.1667%;
float: right;
}
.pull5 {
margin-right: 42.5%;
float: right;
}
.pull6 {
margin-right: 50.8333%;
float: right;
}
.pull7 {
margin-right: 59.1667%;
float: right;
}
.pull8 {
margin-right: 67.5%;
float: right;
}
.pull9 {
margin-right: 75.8333%;
float: right;
}
.pull10 {
margin-right: 84.1667%;
float: right;
}
.pull11 {
margin-right: 92.5%;
float: right;
}
.pull12 {
margin-right: 100.8333%;
float: right;
}
/* ==========================================================================
Grid system media query adjustments.
========================================================================== */
@media (min-width: 768px) and (max-width: 1199px) {
html {
font-size: 95%;
}
.med-span1 {
width: 6.667%;
}
.medium-span1 {
width: 6.667%;
}
.med-span2 {
width: 15%;
}
.medium-span2 {
width: 15%;
}
.med-span3 {
width: 23.333%;
}
.medium-span3 {
width: 23.333%;
}
.med-oneFourth {
width: 23.333%;
}
.medium-oneFourth {
width: 23.333%;
}
.med-span4 {
width: 31.667%;
}
.medium-span4 {
width: 31.667%;
}
.med-oneThird {
width: 31.667%;
}
.medium-oneThird {
width: 31.667%;
}
.med-span5 {
width: 40%;
}
.medium-span5 {
width: 40%;
}
.med-span6 {
width: 48.333%;
}
.medium-span6 {
width: 48.333%;
}
.med-oneHalf {
width: 48.333%;
}
.medium-oneHalf {
width: 48.333%;
}
.med-span7 {
width: 56.667%;
}
.medium-span7 {
width: 56.667%;
}
.med-span8 {
width: 65%;
}
.medium-span8 {
width: 65%;
}
.med-span9 {
width: 73.333%;
}
.medium-span9 {
width: 73.333%;
}
.med-span10 {
width: 81.667%;
}
.medium-span10 {
width: 81.667%;
}
.med-span11 {
width: 90%;
}
.medium-span11 {
width: 90%;
}
.med-span12,
.medium-span12 {
float: none;
clear: both;
display: block;
width: 98.333%;
}
.med-push1 {
margin-left: 9.1667%;
}
.medium-push1 {
margin-left: 9.1667%;
}
.med-push1--half {
margin-left: 13.1667%;
}
.medium-push1--half {
margin-left: 13.1667%;
}
.med-push2 {
margin-left: 17.5%;
}
.medium-push2 {
margin-left: 17.5%;
}
.med-push3 {
margin-left: 25.8333%;
}
.medium-push3 {
margin-left: 25.8333%;
}
.med-push4 {
margin-left: 34.1667%;
}
.medium-push4 {
margin-left: 34.1667%;
}
.med-push5 {
margin-left: 42.5%;
}
.medium-push5 {
margin-left: 42.5%;
}
.med-push6 {
margin-left: 50.8333%;
}
.medium-push6 {
margin-left: 50.8333%;
}
.med-push7 {
margin-left: 59.1667%;
}
.medium-push7 {
margin-left: 59.1667%;
}
.med-push8 {
margin-left: 67.5%;
}
.medium-push8 {
margin-left: 67.5%;
}
.med-push9 {
margin-left: 75.8333%;
}
.medium-push9 {
margin-left: 75.8333%;
}
.med-push10 {
margin-left: 84.1667%;
}
.medium-push10 {
margin-left: 84.1667%;
}
.med-push11 {
margin-left: 92.5%;
}
.medium-push11 {
margin-left: 92.5%;
}
.med-push12 {
margin-left: 100.8333%;
}
.medium-push12 {
margin-left: 100.8333%;
}
}
@media (max-width: 767px) {
html {
font-size: 90%;
}
.grid-col {
display: block;
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
.small-span1 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 6.667%;
}
.small-span1:before,
.small-span1:after {
content: " ";
display: table;
}
.small-span1:after {
clear: both;
}
.sm-span1 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 6.667%;
}
.sm-span1:before,
.sm-span1:after {
content: " ";
display: table;
}
.sm-span1:after {
clear: both;
}
.small-span2 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 15%;
}
.small-span2:before,
.small-span2:after {
content: " ";
display: table;
}
.small-span2:after {
clear: both;
}
.sm-span2 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 15%;
}
.sm-span2:before,
.sm-span2:after {
content: " ";
display: table;
}
.sm-span2:after {
clear: both;
}
.small-span3 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 23.333%;
}
.small-span3:before,
.small-span3:after {
content: " ";
display: table;
}
.small-span3:after {
clear: both;
}
.sm-span3 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 23.333%;
}
.sm-span3:before,
.sm-span3:after {
content: " ";
display: table;
}
.sm-span3:after {
clear: both;
}
.small-oneFourth {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 23.333%;
}
.small-oneFourth:before,
.small-oneFourth:after {
content: " ";
display: table;
}
.small-oneFourth:after {
clear: both;
}
.sm-oneFourth {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 23.333%;
}
.sm-oneFourth:before,
.sm-oneFourth:after {
content: " ";
display: table;
}
.sm-oneFourth:after {
clear: both;
}
.small-span4 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 31.667%;
}
.small-span4:before,
.small-span4:after {
content: " ";
display: table;
}
.small-span4:after {
clear: both;
}
.sm-span4 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 31.667%;
}
.sm-span4:before,
.sm-span4:after {
content: " ";
display: table;
}
.sm-span4:after {
clear: both;
}
.small-oneThird {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 31.667%;
}
.small-oneThird:before,
.small-oneThird:after {
content: " ";
display: table;
}
.small-oneThird:after {
clear: both;
}
.sm-oneThird {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 31.667%;
}
.sm-oneThird:before,
.sm-oneThird:after {
content: " ";
display: table;
}
.sm-oneThird:after {
clear: both;
}
.small-span5 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 40%;
}
.small-span5:before,
.small-span5:after {
content: " ";
display: table;
}
.small-span5:after {
clear: both;
}
.sm-span5 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 40%;
}
.sm-span5:before,
.sm-span5:after {
content: " ";
display: table;
}
.sm-span5:after {
clear: both;
}
.small-span6 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 48.333%;
}
.small-span6:before,
.small-span6:after {
content: " ";
display: table;
}
.small-span6:after {
clear: both;
}
.sm-span6 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 48.333%;
}
.sm-span6:before,
.sm-span6:after {
content: " ";
display: table;
}
.sm-span6:after {
clear: both;
}
.small-oneHalf {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 48.333%;
}
.small-oneHalf:before,
.small-oneHalf:after {
content: " ";
display: table;
}
.small-oneHalf:after {
clear: both;
}
.sm-oneHalf {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 48.333%;
}
.sm-oneHalf:before,
.sm-oneHalf:after {
content: " ";
display: table;
}
.sm-oneHalf:after {
clear: both;
}
.small-span7 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 56.667%;
}
.small-span7:before,
.small-span7:after {
content: " ";
display: table;
}
.small-span7:after {
clear: both;
}
.sm-span7 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 56.667%;
}
.sm-span7:before,
.sm-span7:after {
content: " ";
display: table;
}
.sm-span7:after {
clear: both;
}
.small-span8 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 65%;
}
.small-span8:before,
.small-span8:after {
content: " ";
display: table;
}
.small-span8:after {
clear: both;
}
.sm-span8 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 65%;
}
.sm-span8:before,
.sm-span8:after {
content: " ";
display: table;
}
.sm-span8:after {
clear: both;
}
.small-span9 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 73.333%;
}
.small-span9:before,
.small-span9:after {
content: " ";
display: table;
}
.small-span9:after {
clear: both;
}
.sm-span9 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 73.333%;
}
.sm-span9:before,
.sm-span9:after {
content: " ";
display: table;
}
.sm-span9:after {
clear: both;
}
.small-span10 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 81.667%;
}
.small-span10:before,
.small-span10:after {
content: " ";
display: table;
}
.small-span10:after {
clear: both;
}
.sm-span10 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 81.667%;
}
.sm-span10:before,
.sm-span10:after {
content: " ";
display: table;
}
.sm-span10:after {
clear: both;
}
.small-span11 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 90%;
}
.small-span11:before,
.small-span11:after {
content: " ";
display: table;
}
.small-span11:after {
clear: both;
}
.sm-span11 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 90%;
}
.sm-span11:before,
.sm-span11:after {
content: " ";
display: table;
}
.sm-span11:after {
clear: both;
}
.small-span12,
.sm-span12 {
float: none;
clear: both;
display: block;
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
width: 98.333%;
}
.small-span12:before,
.sm-span12:before,
.small-span12:after,
.sm-span12:after {
content: " ";
display: table;
}
.small-span12:after,
.sm-span12:after {
clear: both;
}
.small-push1 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 9.1667%;
}
.small-push1:before,
.small-push1:after {
content: " ";
display: table;
}
.small-push1:after {
clear: both;
}
.sm-push1 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 9.1667%;
}
.sm-push1:before,
.sm-push1:after {
content: " ";
display: table;
}
.sm-push1:after {
clear: both;
}
.small-push1--half {
margin-left: 13.1667%;
}
.sm-push1--half {
margin-left: 13.1667%;
}
.small-push2 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 17.5%;
}
.small-push2:before,
.small-push2:after {
content: " ";
display: table;
}
.small-push2:after {
clear: both;
}
.sm-push2 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 17.5%;
}
.sm-push2:before,
.sm-push2:after {
content: " ";
display: table;
}
.sm-push2:after {
clear: both;
}
.small-push3 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 25.8333%;
}
.small-push3:before,
.small-push3:after {
content: " ";
display: table;
}
.small-push3:after {
clear: both;
}
.sm-push3 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 25.8333%;
}
.sm-push3:before,
.sm-push3:after {
content: " ";
display: table;
}
.sm-push3:after {
clear: both;
}
.small-push4 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 34.1667%;
}
.small-push4:before,
.small-push4:after {
content: " ";
display: table;
}
.small-push4:after {
clear: both;
}
.sm-push4 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 34.1667%;
}
.sm-push4:before,
.sm-push4:after {
content: " ";
display: table;
}
.sm-push4:after {
clear: both;
}
.small-push5 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 42.5%;
}
.small-push5:before,
.small-push5:after {
content: " ";
display: table;
}
.small-push5:after {
clear: both;
}
.sm-push5 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 42.5%;
}
.sm-push5:before,
.sm-push5:after {
content: " ";
display: table;
}
.sm-push5:after {
clear: both;
}
.small-push6 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 50.8333%;
}
.small-push6:before,
.small-push6:after {
content: " ";
display: table;
}
.small-push6:after {
clear: both;
}
.sm-push6 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 50.8333%;
}
.sm-push6:before,
.sm-push6:after {
content: " ";
display: table;
}
.sm-push6:after {
clear: both;
}
.small-push7 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 59.1667%;
}
.small-push7:before,
.small-push7:after {
content: " ";
display: table;
}
.small-push7:after {
clear: both;
}
.sm-push7 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 59.1667%;
}
.sm-push7:before,
.sm-push7:after {
content: " ";
display: table;
}
.sm-push7:after {
clear: both;
}
.small-push8 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 67.5%;
}
.small-push8:before,
.small-push8:after {
content: " ";
display: table;
}
.small-push8:after {
clear: both;
}
.sm-push8 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 67.5%;
}
.sm-push8:before,
.sm-push8:after {
content: " ";
display: table;
}
.sm-push8:after {
clear: both;
}
.small-push9 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 75.8333%;
}
.small-push9:before,
.small-push9:after {
content: " ";
display: table;
}
.small-push9:after {
clear: both;
}
.sm-push9 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 75.8333%;
}
.sm-push9:before,
.sm-push9:after {
content: " ";
display: table;
}
.sm-push9:after {
clear: both;
}
.small-push10 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 84.1667%;
}
.small-push10:before,
.small-push10:after {
content: " ";
display: table;
}
.small-push10:after {
clear: both;
}
.sm-push10 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 84.1667%;
}
.sm-push10:before,
.sm-push10:after {
content: " ";
display: table;
}
.sm-push10:after {
clear: both;
}
.small-push11 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 92.5%;
}
.small-push11:before,
.small-push11:after {
content: " ";
display: table;
}
.small-push11:after {
clear: both;
}
.sm-push11 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 92.5%;
}
.sm-push11:before,
.sm-push11:after {
content: " ";
display: table;
}
.sm-push11:after {
clear: both;
}
.small-push12 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 100.8333%;
}
.small-push12:before,
.small-push12:after {
content: " ";
display: table;
}
.small-push12:after {
clear: both;
}
.sm-push12 {
float: left;
display: inline;
margin-left: 0.83335%;
margin-right: 0.83335%;
margin-left: 100.8333%;
}
.sm-push12:before,
.sm-push12:after {
content: " ";
display: table;
}
.sm-push12:after {
clear: both;
}
}
@media (max-width: 480px) {
.grid .grid-col {
display: block;
float: none;
width: 100%;
margin-left: auto;
margin-right: auto;
}
}
/**!
* Alerts
*
* Alerts and feedback boxes
* =========================================================================== */
.alert {
border: 1px solid #48e0a4;
margin-bottom: 30px;
padding: 15px 30px;
position: relative;
color: #000000;
}
.alert a {
color: #f4f4f4;
}
.alert a:hover {
text-decoration: underline;
}
.alert h2 {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.alert p:last-child {
margin: 0;
}
.alert--warning {
background-color: #f0ad4e;
border-color: #ec971f;
}
.alert--error {
background-color: #d9534f;
border-color: #c9302c;
}
.alert--success {
background-color: #e1f1e1;
border-color: #bee1be;
}
.alert--info {
background-color: #5bc0de;
border-color: #31b0d5;
}
.alert-text {
margin: 5px 0;
}
.alert-close {
position: absolute;
right: 15px;
top: 15px;
}
.alert--short {
max-width: 800px;
}
/**!
* Dividers
*
* Various hr divider styles
* ========================================================================== */
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0;
}
hr {
margin-top: 30px;
margin-bottom: 30px;
border: 0;
border-top: 1px solid #f4f4f4;
}
.hr--thin {
margin-top: 15px;
margin-bottom: 15px;
}
.hr--spacer {
border: none;
height: 1px;
}
.strip--graphite hr {
border-color: #1c1c1e;
}
.strip--darkGraphite hr {
border-color: #282b2d;
}
.strip--light hr {
border-color: #f6f6f6;
}
.strip--frost hr {
border-color: #ededed;
}
.strip--gray hr {
border-color: #f4f4f4;
}
/**!
* Containers
*
* Various wrappers and containers to help with layout.
* ========================================================================== */
/**
* Strip
*
* A strip is useful when you want a background color, image,
* or content to span the entire width of the viewport.
*/
.strip {
width: 100%;
max-width: 100%;
}
/**
* Various versions of a strip.
*/
.strip--graphite {
background-color: #282b2d;
color: #f4f4f4;
}
.strip--graphite h1,
.strip--graphite h2,
.strip--graphite h3,
.strip--graphite h4,
.strip--graphite h5,
.strip--graphite h6,
.strip--graphite .h1,
.strip--graphite .h2,
.strip--graphite .h3,
.strip--graphite .h4,
.strip--graphite .h5,
.strip--graphite .h6,
.strip--graphite .heading,
.strip--graphite .cta,
.strip--graphite span.cta,
.strip--graphite strong {
color: #f4f4f4;
}
.strip--darkGraphite {
background-color: #1c1c1e;
color: #f4f4f4;
}
.strip--darkGraphite h1,
.strip--darkGraphite h2,
.strip--darkGraphite h3,
.strip--darkGraphite h4,
.strip--darkGraphite h5,
.strip--darkGraphite h6,
.strip--darkGraphite .h1,
.strip--darkGraphite .h2,
.strip--darkGraphite .h3,
.strip--darkGraphite .h4,
.strip--darkGraphite .h5,
.strip--darkGraphite .h6,
.strip--darkGraphite .heading,
.strip--darkGraphite .cta,
.strip--darkGraphite span.cta,
.strip--darkGraphite strong {
color: #f4f4f4;
}
.strip--light {
background-color: #ffffff;
color: #666666;
}
.strip--light h1,
.strip--light h2,
.strip--light h3,
.strip--light h4,
.strip--light h5,
.strip--light h6,
.strip--light .h1,
.strip--light .h2,
.strip--light .h3,
.strip--light .h4,
.strip--light .h5,
.strip--light .h6,
.strip--light .heading,
.strip--light .cta,
.strip--light span.cta,
.strip--light strong {
color: #191919;
}
.strip--gray {
background-color: #cccccc;
color: #666666;
}
.strip--gray h1,
.strip--gray h2,
.strip--gray h3,
.strip--gray h4,
.strip--gray h5,
.strip--gray h6,
.strip--gray .h1,
.strip--gray .h2,
.strip--gray .h3,
.strip--gray .h4,
.strip--gray .h5,
.strip--gray .h6,
.strip--gray .heading,
.strip--gray .cta,
.strip--gray span.cta,
.strip--gray strong {
color: #191919;
}
.strip--frost {
background-color: #f6f6f6;
color: #666666;
}
.strip--frost h1,
.strip--frost h2,
.strip--frost h3,
.strip--frost h4,
.strip--frost h5,
.strip--frost h6,
.strip--frost .h1,
.strip--frost .h2,
.strip--frost .h3,
.strip--frost .h4,
.strip--frost .h5,
.strip--frost .h6,
.strip--frost .heading,
.strip--frost .cta,
.strip--frost span.cta,
.strip--frost strong {
color: #191919;
}
.strip--silver {
background-color: #f4f4f4;
color: #666666;
}
.strip--silver h1,
.strip--silver h2,
.strip--silver h3,
.strip--silver h4,
.strip--silver h5,
.strip--silver h6,
.strip--silver .h1,
.strip--silver .h2,
.strip--silver .h3,
.strip--silver .h4,
.strip--silver .h5,
.strip--silver .h6,
.strip--silver .heading,
.strip--silver .cta,
.strip--silver span.cta,
.strip--silver strong {
color: #191919;
}
.strip--gray {
background-color: #ededed;
color: #4d4d4d;
}
.strip--gray h1,
.strip--gray h2,
.strip--gray h3,
.strip--gray h4,
.strip--gray h5,
.strip--gray h6,
.strip--gray .h1,
.strip--gray .h2,
.strip--gray .h3,
.strip--gray .h4,
.strip--gray .h5,
.strip--gray .h6,
.strip--gray .heading,
.strip--gray .cta,
.strip--gray span.cta,
.strip--gray strong {
color: #191919;
}
.strip--darkGray {
background-color: #cccccc;
color: #4d4d4d;
}
.strip--darkGray h1,
.strip--darkGray h2,
.strip--darkGray h3,
.strip--darkGray h4,
.strip--darkGray h5,
.strip--darkGray h6,
.strip--darkGray .h1,
.strip--darkGray .h2,
.strip--darkGray .h3,
.strip--darkGray .h4,
.strip--darkGray .h5,
.strip--darkGray .h6,
.strip--darkGray .heading,
.strip--darkGray .cta,
.strip--darkGray span.cta,
.strip--darkGray strong {
color: #191919;
}
.strip--ac {
background-color: #9fe0f3;
color: #4d4d4d;
}
.strip--ac h1,
.strip--ac h2,
.strip--ac h3,
.strip--ac h4,
.strip--ac h5,
.strip--ac h6,
.strip--ac .h1,
.strip--ac .h2,
.strip--ac .h3,
.strip--ac .h4,
.strip--ac .h5,
.strip--ac .h6,
.strip--ac .heading,
.strip--ac .cta,
.strip--ac span.cta,
.strip--ac strong {
color: #191919;
}
.strip--ac .promoUnit-body:before {
display: none !important;
}
/**
* Wrapper
*
* A wrapper provides a max-width for the content within it,
* and centers the content.
*/
.wrapper {
max-width: 1220px;
padding-left: 20px;
padding-right: 20px;
margin: 0 auto;
}
.wrapper:before,
.wrapper:after {
content: " ";
display: table;
}
.wrapper:after {
clear: both;
}
/**
* Modules
* Shared styels for page sections/modules
*/
.module {
padding-top: 90px;
padding-top: 5.625rem;
padding-bottom: 90px;
padding-bottom: 5.625rem;
}
@media (max-width: 767px) {
.module {
padding-top: 60px;
padding-top: 3.75rem;
padding-bottom: 60px;
padding-bottom: 3.75rem;
}
}
.module--large {
padding-top: 120px;
padding-top: 7.5rem;
padding-bottom: 120px;
padding-bottom: 7.5rem;
}
@media (max-width: 767px) {
.module--large {
padding-top: 75px;
padding-top: 4.6875rem;
padding-bottom: 75px;
padding-bottom: 4.6875rem;
}
}
.module--small {
padding-top: 60px;
padding-top: 3.75rem;
padding-bottom: 60px;
padding-bottom: 3.75rem;
}
@media (max-width: 767px) {
.module--small {
padding-top: 30px;
padding-top: 1.875rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
}
.module--xSmall {
padding-top: 30px;
padding-top: 1.875rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
.module--xxSmall {
padding-top: 15px;
padding-top: 0.9375rem;
padding-bottom: 15px;
padding-bottom: 0.9375rem;
}
.module--balanced {
padding-top: 90px;
padding-top: 5.625rem;
padding-bottom: 60px;
padding-bottom: 3.75rem;
}
.module--balanced.module--small {
padding-top: 60px;
padding-top: 3.75rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
.module--shifted {
padding-left: 60px;
}
.module-header h1,
.module-header h2,
.module-header .module-title {
text-transform: uppercase;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.module-footer {
position: relative;
text-align: right;
padding: 15px 0 0;
}
/**
* Module with a bg image
*/
.module--bgImg {
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
.module--bgImg--fixed {
background-attachment: fixed;
}
/* ==========================================================================
Buttons
========================================================================== */
/**
* The btn classes are best applied to links, buttons, and submit inputs.
* These components can be used in forms, as calls to action, or as part of the
* general UI of the site/app.
*
* Recommended use:
*
btn text
btn text
Home About The Board Directors
*
* Demo: jsfiddle.net/inuitcss/rkAY9
*
*/
.breadcrumb > li + li:before {
content: "\00BB" "\00A0";
margin: 0 5px;
}
/**
* For denoting a path-like structure, GitHub style, e.g.:
*
inuit.css inuit.css partials objects
*
*/
.breadcrumb--path > li + li:before {
content: "\002F" "\00A0";
}
/**
* Assign a delimiter on the fly through a data attribute, e.g.:
*
Home About The Board Directors
*
*/
.breadcrumb > li + li[data-breadcrumb]:before {
content: attr(data-breadcrumb) "\00A0";
}
/**
* Denote the root of the tree.
*/
.breadcrumb--root {
font-weight: 600;
}
/**!
* Accordions
*
* Accordion objects
* ========================================================================== */
/* ==========================================================================
General structure
========================================================================== */
.accordion .panel {
border-bottom: 1px solid;
}
.accordion .accordion-toggle {
display: block;
padding-top: 30px;
padding-top: 1.875rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
font-size: 18px;
font-size: 1.125rem;
-webkit-transition: background-color 0.2s linear;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-ms-transition: background-color 0.2s linear;
transition: background-color 0.2s linear;
}
.accordion .accordion-toggle:before {
font-family: 'mt-icons';
content: "\e010";
display: inline-block;
width: 10px;
height: 16px;
margin: 0 20px 0 10px;
position: relative;
color: #48e0a4;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
.accordion .accordion-toggle:hover {
text-decoration: none;
}
.accordion .accordion-toggle.isActive:before {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
.accordion .panel-content {
display: none;
}
/* ==========================================================================
Accordion variations and modifiers
========================================================================== */
/* Default
-------------------------------------------------------------------------- */
/* (dark) Inverted
-------------------------------------------------------------------------- */
.accordion--dark .panel {
border-color: #282b2d;
}
.accordion--dark .accordion-toggle {
color: #f4f4f4;
}
.accordion--dark .accordion-toggle:hover {
background-color: #191919;
}
.accordion--dark .accordion-toggle.isActive:before {
color: #ffffff;
}
/**!
* Hero Unit
*
* Styles for global hero unit modules
* =========================================================================== */
/* Base styles
-------------------------------------------------------------------------- */
.heroUnit {
height: 600px;
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
-webkit-transition: height 400ms linear;
-moz-transition: height 400ms linear;
-o-transition: height 400ms linear;
-ms-transition: height 400ms linear;
transition: height 400ms linear;
}
@media (max-width: 767px) {
.heroUnit {
height: 400px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.heroUnit {
height: 500px;
}
}
@media (min-width: 1900px) {
.heroUnit {
height: 700px;
}
}
/**
* Hero image is set as background image of this div
*/
/**
* Load in all styled for hero images
*/
/**!
* Hero Unit images
*
* This file contains all images for every single hero on the site.
* Brace yourself. It's about to go down.
* =========================================================================== */
/*
* Hero image sizes
* ============================
* hero-large.jpg -- 1665 x 705
* hero-md.jpg -- 1180 x 500
* hero-sm.jpg -- 755 x 400
* hero-xsm.jpg -- 465 400
*/
/* ==========================================================================
Error pages
========================================================================== */
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--404 .heroUnit {
background-image: url(../_img/errors/404/hero-lg.jpg);
}
}
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--wpbeta .heroUnit {
background-image: url(../_img/wpbeta/hero-lg.jpg);
}
}
/* ==========================================================================
Homepage - /
========================================================================== */
.page--home .heroUnit {
background-image: url(../_img/homepage/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--home .heroUnit {
/* HIDDEN FOR PROMO */
/* background-image: url(../_img/homepage/hero-lg.jpg); */
background-image: url(../_img/promo/grid-ssd/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--home .heroUnit {
/* HIDDEN FOR PROMO */
/* background-image: url(../_img/homepage/hero-md.jpg); */
background-image: url(../_img/promo/grid-ssd/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--home .heroUnit {
/* HIDDEN FOR PROMO */
/* background-image: url(../_img/homepage/hero-sm.jpg); */
background-image: url(../_img/promo/grid-ssd/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--home .heroUnit {
/* HIDDEN FOR PROMO */
/* background-image: url(../_img/homepage/hero-xsm.jpg); */
background-image: url(../_img/promo/grid-ssd/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--home .heroUnit {
/* HIDDEN FOR PROMO */
/* background-image: url(../_img/homepage/hero-lg.jpg); */
background-image: url(../_img/promo/grid-ssd/hero-lg.jpg);
}
}
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--home2 .heroUnit {
background-image: url(../_img/help-center/hero-lg.jpg);
}
}
/* ==========================================================================
Webhosting - /webhosting/
========================================================================== */
/* ==========================================================================
Wordpress - /webhosting/wordpress
========================================================================== */
.page--wordpress .heroUnit {
background-image: url(../_img/webhosting/wordpress/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--wordpress .heroUnit {
background-image: url(../_img/webhosting/wordpress/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--wordpress .heroUnit {
background-image: url(../_img/webhosting/wordpress/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--wordpress .heroUnit {
background-image: url(../_img/webhosting/wordpress/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--wordpress .heroUnit {
background-image: url(../_img/webhosting/wordpress/hero-lg.jpg);
}
}
/* ==========================================================================
DV Compare - /webhosting/vps/
========================================================================== */
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--vps .heroUnit {
background-image: url(../_img/webhosting/vps/hero-lg.jpg);
}
}
/* ==========================================================================
Grid - /webhosting/shared/
========================================================================== */
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--grid .heroUnit {
background-image: url(../_img/webhosting/shared/hero-lg.jpg);
}
}
/* ==========================================================================
DV Managed - /webhosting/vps/managed/
========================================================================== */
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--dvManaged .heroUnit {
background-image: url(../_img/webhosting/vps/managed/hero-lg.jpg);
}
}
/* ==========================================================================
DV Dev - /webhosting/vps/developer/
========================================================================== */
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--dvDeveloper .heroUnit {
background-image: url(../_img/webhosting/vps/developer/hero-lg.jpg);
}
}
/* ==========================================================================
DV Enterprise - /webhosting/vps/enterprise/
========================================================================== */
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--dvEnterprise .heroUnit {
background-image: url(../_img/webhosting/vps/enterprise/hero-lg.jpg);
}
}
/* ==========================================================================
Helix - /webhosting/helix/
========================================================================== */
.page--helix .heroUnit {
background-image: url(../_img/webhosting/helix/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--helix .heroUnit {
background-image: url(../_img/webhosting/helix/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--helix .heroUnit {
background-image: url(../_img/webhosting/helix/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--helix .heroUnit {
background-image: url(../_img/webhosting/helix/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--helix .heroUnit {
background-image: url(../_img/webhosting/helix/hero-lg.jpg);
}
}
/* ==========================================================================
Cloudflare - /services/cloudflare/
========================================================================== */
.page--cloudflare .heroUnit {
background-image: url(../_img/cloudflare/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--cloudflare .heroUnit {
background-image: url(../_img/cloudflare/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--cloudflare .heroUnit {
background-image: url(../_img/cloudflare/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--cloudflare .heroUnit {
background-image: url(../_img/cloudflare/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--cloudflare .heroUnit {
background-image: url(../_img/cloudflare/hero-lg.jpg);
}
}
/* ==========================================================================
ProDevAPI - /services/api/
========================================================================== */
.page--prodev-api .heroUnit {
background-image: url(../_img/prodevapi/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--prodev-api .heroUnit {
background-image: url(../_img/prodevapi/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--prodev-api .heroUnit {
background-image: url(../_img/prodevapi/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--prodev-api .heroUnit {
background-image: url(../_img/prodevapi/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--prodev-api .heroUnit {
background-image: url(../_img/prodevapi/hero-lg.jpg);
}
}
/* ==========================================================================
Procdn - /services/procdn/
========================================================================== */
.page--procdn .heroUnit {
background-image: url(../_img/procdn/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--procdn .heroUnit {
background-image: url(../_img/procdn/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--procdn .heroUnit {
background-image: url(../_img/procdn/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--procdn .heroUnit {
background-image: url(../_img/procdn/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--procdn .heroUnit {
background-image: url(../_img/procdn/hero-lg.jpg);
}
}
/* ==========================================================================
SSL - /services/ssl/
========================================================================== */
.page--ssl .heroUnit {
background-image: url(../_img/ssl/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--ssl .heroUnit {
background-image: url(../_img/ssl/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--ssl .heroUnit {
background-image: url(../_img/ssl/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--ssl .heroUnit {
background-image: url(../_img/ssl/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--ssl .heroUnit {
background-image: url(../_img/ssl/hero-lg.jpg);
}
}
/* ==========================================================================
Move - /services/site-mover/
========================================================================== */
.page--site-mover .heroUnit {
background-image: url(../_img/site-mover/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--site-mover .heroUnit {
background-image: url(../_img/site-mover/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--site-mover .heroUnit {
background-image: url(../_img/site-mover/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--site-mover .heroUnit {
background-image: url(../_img/site-mover/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--site-mover .heroUnit {
background-image: url(../_img/site-mover/hero-lg.jpg);
}
}
/* ==========================================================================
referrals - /partners/referrals
========================================================================== */
.page--referrals .heroUnit {
background-image: url(../_img/referrals/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--referrals .heroUnit {
background-image: url(../_img/referrals/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--referrals .heroUnit {
background-image: url(../_img/referrals/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--referrals .heroUnit {
background-image: url(../_img/referrals/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--referrals .heroUnit {
background-image: url(../_img/referrals/hero-lg.jpg);
}
}
/* ==========================================================================
affiliates - /partners/affiliates
========================================================================== */
.page--affiliates .heroUnit {
background-image: url(../_img/affiliate/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--affiliates .heroUnit {
background-image: url(../_img/affiliate/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--affiliates .heroUnit {
background-image: url(../_img/affiliate/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--affiliates .heroUnit {
background-image: url(../_img/affiliate/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliates .heroUnit {
background-image: url(../_img/affiliate/hero-lg.jpg);
}
}
/* ==========================================================================
Help center - /help
========================================================================== */
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--help .heroUnit {
background-image: url(../_img/help-center/hero-lg.jpg);
}
}
/* ==========================================================================
About - /about-us/
========================================================================== */
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--about .heroUnit {
background-image: url(../_img/about-us/hero-lg.jpg);
}
}
/* ==========================================================================
Our Team - /about-us/our-team
========================================================================== */
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-lg.jpg);
}
}
@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-sm.jpg);
}
}
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--ourTeam .heroUnit {
background-image: url(../_img/our-team/hero-md.jpg);
}
}
/* ==========================================================================
About technology - /about-us/technology/
========================================================================== */
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-lg.jpg);
}
}
@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-sm.jpg);
}
}
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--technology .heroUnit {
background-image: url(../_img/about-us/technology/hero-md.jpg);
}
}
/* ==========================================================================
Cloudtech - /cloudtech/
========================================================================== */
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--cloudtech .heroUnit {
background-image: url(../_img/cloudtech/hero-lg.jpg);
}
}
/* ==========================================================================
cloudtechSecurity - /cloudtech/security/
========================================================================== */
.page--cloudtechSecurity .heroUnit {
background-image: url(../_img/cloudtech/security/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--cloudtechSecurity .heroUnit {
background-image: url(../_img/cloudtech/security/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--cloudtechSecurity .heroUnit {
background-image: url(../_img/cloudtech/security/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--cloudtechSecurity .heroUnit {
background-image: url(../_img/cloudtech/security/hero-sm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--cloudtechSecurity .heroUnit {
background-image: url(../_img/cloudtech/security/hero-lg.jpg);
}
}
/* ==========================================================================
onDemand - /cloudtech/on-demand/
========================================================================== */
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--onDemand .heroUnit {
background-image: url(../_img/cloudtech/on-demand/hero-lg.jpg);
}
}
/* ==========================================================================
always on - /cloudtech/always-on/
========================================================================== */
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-xsm.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--alwaysOn .heroUnit {
background-image: url(../_img/cloudtech/always-on/hero-lg.jpg);
}
}
.heroUnit-credits {
color: #ffffff;
position: absolute;
bottom: 10px;
right: 5px;
}
@media (max-width: 767px) {
.heroUnit-credits {
display: none;
}
}
.heroUnit-credits-client {
font-weight: 500;
margin-right: 4px;
font-size: 18px;
font-size: 1.125rem;
}
.heroUnit-credits-author {
font-style: italic;
font-size: 10px;
font-size: 0.625rem;
}
/* Hero video
-------------------------------------------------------------------------- */
.heroUnit-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: none;
}
.heroUnit-media-inner {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 0;
padding-top: 0;
padding-bottom: 32.2%;
}
@media (max-width: 727px) {
.heroUnit-media-inner {
height: 300px !important;
padding: 0 !important;
}
}
.heroUnit-media-item {
max-width: 100%;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
/* Hero content
-------------------------------------------------------------------------- */
.heroUnit-content {
height: 100%;
position: relative;
}
.heroUnit-content .cta--play {
position: absolute;
top: 20px;
right: 20px;
-webkit-opacity: 0.8;
-moz-opacity: 0.8;
opacity: 0.8;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;
}
.heroUnit-content .cta--play .icon {
margin: 0;
text-shadow: 0 0 2px #e6e6e6;
font-size: 54px;
font-size: 3.375rem;
}
.heroUnit-content .cta--play:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
@media (max-width: 767px) {
.heroUnit-content .cta--play {
display: none;
}
}
.heroUnit-content .cta--close {
position: absolute;
top: 27px;
right: 20px;
display: none;
z-index: 100000;
-webkit-opacity: 0.2;
-moz-opacity: 0.2;
opacity: 0.2;
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
.heroUnit-content .cta--close .lush {
margin: 0;
color: #ffffff;
text-shadow: 0 0 2px #e6e6e6;
font-size: 54px;
font-size: 3.375rem;
}
.heroUnit-content .cta--close:hover {
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
@media (max-width: 767px) {
.heroUnit-content .cta--close {
display: none;
}
}
/**
* Hero text container
*/
.heroUnit-content-text {
position: absolute;
bottom: 70px;
max-width: 680px;
-webkit-transition: bottom .3s linear;
-moz-transition: bottom .3s linear;
-o-transition: bottom .3s linear;
-ms-transition: bottom .3s linear;
transition: bottom .3s linear;
}
.heroUnit-content-text:before,
.heroUnit-content-text:after {
content: " ";
display: table;
}
.heroUnit-content-text:after {
clear: both;
}
.heroUnit-content-text .btn {
float: right;
}
@media (max-width: 767px) {
.heroUnit-content-text .btn {
font-size: 16px;
font-size: 1rem;
padding-top: 10px;
padding-top: 0.625rem;
padding-bottom: 10px;
padding-bottom: 0.625rem;
padding-right: 16px;
padding-right: 1rem;
padding-left: 16px;
padding-left: 1rem;
}
}
@media (max-width: 767px) {
.heroUnit-content-text {
max-width: 72%;
bottom: 30px;
}
}
@media (max-width: 480px) {
.heroUnit-content-text {
max-width: 80%;
bottom: 20px;
}
}
/**
* Headings inside hero
*/
.heroUnit-title {
background-color: #ffffff;
color: #1c1c1e;
padding: 16px 20px;
max-width: 100%;
margin: 0 0 20px 0;
display: inline-block;
*display: inline;
zoom: 1;
}
@media (min-width: 1500px) {
.heroUnit-title {
font-size: 36px;
line-height: 38px;
}
}
@media (min-width: 1200px) {
.heroUnit-title {
font-size: 30px;
line-height: 32px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.heroUnit-title {
font-size: 24px;
line-height: 26px;
letter-spacing: 1px;
}
}
@media (max-width: 767px) {
.heroUnit-title {
font-size: 22px;
line-height: 22px;
letter-spacing: 1px;
margin-bottom: 10px;
padding: 12px 20px;
max-width: 90%;
}
}
.heroUnit-subtitle {
display: block;
color: #1c1c1e;
margin: 0;
font-size: 30px;
letter-spacing: 0;
}
.heroUnit-subtitle .heroUnit-subtitle-link,
.heroUnit-subtitle .heroUnit-subtitle-text {
background-color: #282b2d;
color: #ffffff;
text-transform: none;
margin: 0;
font-weight: 300;
padding: 10px 20px;
display: inline-block;
*display: inline;
zoom: 1;
}
.heroUnit-subtitle .heroUnit-subtitle-link:hover,
.heroUnit-subtitle .heroUnit-subtitle-text:hover {
text-decoration: none;
color: #ffffff;
}
.heroUnit-subtitle .heroUnit-subtitle-link strong,
.heroUnit-subtitle .heroUnit-subtitle-text strong {
font-weight: 500;
}
@media (min-width: 1500px) {
.heroUnit-subtitle {
font-size: 28px;
}
}
@media (min-width: 1200px) {
.heroUnit-subtitle {
font-size: 24px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.heroUnit-subtitle {
font-size: 20px;
line-height: 24px;
letter-spacing: 1px;
}
}
@media (max-width: 767px) {
.heroUnit-subtitle {
font-size: 14px;
line-height: 18px;
max-width: 100%;
}
}
/* ==========================================================================
Variations
========================================================================== */
/* Mini hero modules
-------------------------------------------------------------------------- */
.heroUnit.heroUnit--mini {
float: left;
width: 33.333%;
padding-bottom: 24.11%;
}
.heroUnit.heroUnit--mini .heroUnit-content-text {
bottom: 10%;
width: 80%;
left: 10%;
}
.heroUnit.heroUnit--mini .heroUnit-title {
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
.heroUnit.heroUnit--mini .heroUnit-subtitle {
font-size: 18px;
font-size: 1.125rem;
}
.heroUnit.heroUnit--mini .heroUnit-subtitle .heroUnit-subtitle-link {
padding: 8px 15px;
padding: 0.5rem 15px;
padding: 8px 0.9375rem;
padding: 0.5rem 0.9375rem;
}
@media (max-width: 767px) {
.heroUnit.heroUnit--mini {
float: none;
width: 100%;
margin: 0;
padding-bottom: 56.20%;
}
.heroUnit.heroUnit--mini .heroUnit-title {
margin-bottom: 10px;
}
}
/**!
* Promo unit
*
* Used in various pages for promos with images or video.
* =========================================================================== */
/* ==========================================================================
General promo unit styles
========================================================================== */
/* General structure
-------------------------------------------------------------------------- */
.promoUnit:before,
.promoUnit:after {
content: " ";
display: table;
}
.promoUnit:after {
clear: both;
}
.promoUnit-media,
.promoUnit-body {
width: 50%;
margin: 0;
}
.promoUnit-media {
float: left;
}
.promoUnit-media .content {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 0;
padding-top: 0;
padding-bottom: 56.20%;
}
.promoUnit-media .content img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.promoUnit-body {
float: right;
}
/**
* Responsive adjustments
*/
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.promoUnit .promoUnit-media,
.promoUnit .promoUnit-body {
float: none;
width: 100%;
}
}
/* Promo body section
-------------------------------------------------------------------------- */
.promoUnit-body {
/**
* Add little triangle arrow on mobile and tablet views.
*/
/**
* Adjust the padding of the text section on mobile
*/
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.promoUnit-body {
position: relative;
}
.promoUnit-body:before {
content: " ";
display: block;
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 25px 30px 25px;
border-color: transparent transparent #1c1c1e transparent;
position: absolute;
top: -28px;
right: 10%;
z-index: 100;
}
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.promoUnit-body .content {
padding: 60px 20px;
height: auto;
}
}
.promoUnit-body .promoText {
max-width: 490px;
width: 100%;
position: absolute;
top: 50%;
left: 10%;
margin-top: -103px;
}
@media (min-width: 768px) and (max-width: 1095px) {
.promoUnit-body .promoText {
max-width: 600px;
position: static;
margin: 0;
top: 0;
}
}
@media (max-width: 767px) {
.promoUnit-body .promoText {
position: static;
margin: 0;
top: 0;
max-width: none;
}
}
.promoUnit-body .promoTitle,
.promoUnit-body .promoText-title {
text-transform: uppercase;
letter-spacing: 2px;
letter-spacing: 0.125rem;
padding-right: 20px;
padding-right: 1.25rem;
/**
* Adjust font sizing on mobile.
*/
}
.promoUnit-body .promoTitle em,
.promoUnit-body .promoText-title em {
display: block;
text-transform: uppercase;
font-style: normal;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
.promoUnit-body .promoTitle .cta,
.promoUnit-body .promoText-title .cta {
font-weight: normal;
}
.promoUnit-body .promoTitle .cta .icon,
.promoUnit-body .promoText-title .cta .icon {
vertical-align: 2px;
vertical-align: 0.125rem;
}
@media (max-width: 1224px) {
.promoUnit-body .promoTitle,
.promoUnit-body .promoText-title {
margin-bottom: 20px;
margin-bottom: 1.25rem;
font-size: 28px;
font-size: 1.75rem;
line-height: 34px;
line-height: 2.125rem;
}
}
@media (max-width: 767px) {
.promoUnit-body .promoTitle,
.promoUnit-body .promoText-title {
margin-bottom: 20px;
margin-bottom: 1.25rem;
font-size: 28px;
font-size: 1.75rem;
line-height: 34px;
line-height: 2.125rem;
}
}
.promoUnit-body .promoSubTitle,
.promoUnit-body .promoText-subTitle {
font-weight: 500;
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 18px;
font-size: 1.125rem;
}
.promoUnit-body .promoBlurb,
.promoUnit-body .promoText-blurb {
font-size: 18px;
font-size: 1.125rem;
}
/* Media/video section
-------------------------------------------------------------------------- */
/**
* Play button for video elements.
*/
.promoUnit .videoPlayBtn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: block;
text-indent: -9999px;
overflow: hidden;
z-index: 10;
background: url(../_img/video-play-button.svg) no-repeat;
background-color: rgba(0, 0, 0, 0.1);
background-size: 35% 35%;
background-position: center center;
-webkit-transition: background-color .2s ease-in-out;
-moz-transition: background-color .2s ease-in-out;
-o-transition: background-color .2s ease-in-out;
-ms-transition: background-color .2s ease-in-out;
transition: background-color .2s ease-in-out;
}
.promoUnit .videoPlayBtn:hover {
background-color: #000000;
background-color: rgba(0, 0, 0, 0.3);
}
/* Modifiers
-------------------------------------------------------------------------- */
/**
* Flipped version
*/
.promoUnit--flipped .promoUnit-media {
float: right;
}
.promoUnit--flipped .promoUnit-body {
float: left;
}
@media (min-width: 768px) and (max-width: 1199px), (max-width: 767px) {
.promoUnit--flipped .promoUnit-body {
position: relative;
}
.promoUnit--flipped .promoUnit-body:before {
border-width: 30px 25px 0 25px;
top: auto;
bottom: -28px;
}
}
.promoUnit--flipped .promoText {
left: auto;
right: 100px;
}
@media (max-width: 1255px) {
.promoUnit--flipped .promoText {
padding-left: 10px;
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.promoUnit--flipped .promoText {
right: auto;
left: 7%;
}
}
@media (max-width: 767px) {
.promoUnit--flipped .promoText {
right: auto;
left: 10%;
padding-left: 0;
}
}
.strip--light .promoUnit .promoUnit-body:before {
border-color: transparent transparent #ffffff transparent;
}
.strip--frost .promoUnit .promoUnit-body:before {
border-color: transparent transparent #f4f4f4 transparent;
}
.strip--gray .promoUnit .promoUnit-body:before {
border-color: transparent transparent #ededed transparent;
}
.strip--graphite .promoUnit .promoUnit-body:before {
border-color: transparent transparent #282b2d transparent;
}
.strip--darkGraphite .promoUnit .promoUnit-body:before {
border-color: transparent transparent #1c1c1e transparent;
}
.strip--light .promoUnit--flipped .promoUnit-body:before {
border-color: #ffffff transparent transparent transparent;
}
.strip--frost .promoUnit--flipped .promoUnit-body:before {
border-color: #f6f6f6 transparent transparent transparent;
}
.strip--gray .promoUnit--flipped .promoUnit-body:before {
border-color: #ededed transparent transparent transparent;
}
.strip--graphite .promoUnit--flipped .promoUnit-body:before {
border-color: #282b2d transparent transparent transparent;
}
.strip--darkGraphite .promoUnit--flipped .promoUnit-body:before {
border-color: #1c1c1e transparent transparent transparent;
}
.productWordmark {
background-image: url('../_img/products/sprite-product-wordmarks.png');
background-repeat: no-repeat;
background-position: 0 0;
display: inline-block;
text-indent: -999px;
overflow: hidden;
float: none;
clear: both;
height: 46px;
}
@media (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.productWordmark {
background-image: url('../_img/products/sprite-product-wordmarks@2x.png');
background-size: 667px 95px;
}
}
.productWordmark--grid {
background-position: -161px 0;
width: 147px;
}
.productWordmark--grid.productWordmark--inverted {
background-position: -161px -50px;
}
.productWordmark--dvManaged {
background-position: -326px 0;
width: 152px;
}
.productWordmark--dvManaged.productWordmark--inverted {
background-position: -326px -50px;
}
.productWordmark--dvDeveloper {
background-position: -501px 0;
width: 166px;
}
.productWordmark--dvDeveloper.productWordmark--inverted {
background-position: -501px -50px;
}
.productWordmark--helix {
width: 150px;
}
.productWordmark--helix.productWordmark--inverted {
background-position: 0 -50px;
}
/**!
* Action callout
*
* A pricing/call to action module that positions on the top
* right part of a module.
*
*
* =========================================================================== */
.actionCallout {
float: right;
}
.actionCallout .tip {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #808080;
padding: 10px 0;
}
.actionCallout .actionCallout-tip {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #808080;
padding: 10px 0;
display: block;
}
@media (min-width: 481px) and (max-width: 767px) {
.actionCallout {
float: none;
margin-bottom: 30px;
margin-bottom: 1.875rem;
text-align: left;
}
}
@media (max-width: 480px) {
.actionCallout {
position: static;
float: none;
clear: both;
text-align: left;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
.actionCallout .priceUnit {
display: block;
margin-bottom: 10px;
font-size: 34px;
font-size: 2.125rem;
line-height: 34px;
line-height: 2.125rem;
}
.actionCallout .priceUnit sub {
vertical-align: middle;
font-size: 18px;
font-size: 1.125rem;
}
.actionCallout .priceUnit-tip {
font-size: 11px;
text-transform: uppercase;
color: #cccccc;
letter-spacing: 2px;
display: block;
}
/* ==========================================================================
None floating/pinning version
========================================================================== */
/**
*
*
*/
.actionCalloutAlt {
float: none;
}
.actionCalloutAlt .actionCalloutAlt-tip {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #808080;
padding: 0;
display: block;
}
.actionCalloutAlt .actionCalloutAlt-price {
display: block;
margin-bottom: 10px;
font-weight: normal;
font-size: 22px;
font-size: 1.375rem;
line-height: 26px;
line-height: 1.625rem;
}
.actionCalloutAlt .actionCalloutAlt-price sub {
vertical-align: middle;
bottom: 0;
font-size: 18px;
font-size: 1.125rem;
}
/**!
* Search module
*
* Used for big find a domain search and kb search
* =========================================================================== */
.searchBox {
width: 100%;
max-width: 925px;
position: relative;
overflow: hidden;
}
.searchBox .icon--search--alt {
position: relative;
}
.searchBox .searchBox-submit {
position: relative;
vertical-align: middle;
margin-left: 10px;
}
@media (max-width: 767px) {
.searchBox .searchBox-submit {
margin: 0;
float: right;
}
}
@media (max-width: 1224px) {
.searchBox {
float: none;
clear: both;
top: 0;
max-width: 100%;
padding-top: 20px;
}
}
.searchBox .searchBox-input {
width: 100%;
max-width: 83%;
}
@media (max-width: 767px) {
.searchBox .searchBox-input {
margin: 0;
width: 100%;
max-width: 100%;
}
}
.searchBox.searchBox--tiny {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.searchBox.searchBox--tiny .searchBox-input {
padding: 5px 5px 5px 10px;
font-size: 12px;
width: auto !important;
}
.searchBox.searchBox--tiny .searchBox-input::-webkit-input-placeholder {
color: #f4f4f4;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.searchBox.searchBox--tiny .searchBox-input:-moz-placeholder {
color: #f4f4f4;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.searchBox.searchBox--tiny .searchBox-input::-moz-placeholder {
color: #f4f4f4;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.searchBox.searchBox--tiny .searchBox-input:-ms-input-placeholder {
color: #f4f4f4;
text-transform: uppercase;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.searchBox.searchBox--tiny .searchBox-submit {
float: none;
margin-left: 4px;
}
.preloader {
text-align: center;
}
.preloader-spinner {
color: #48e0a4 !important;
display: inline-block;
-webkit-animation-name: spin;
-webkit-animation-duration: 2500ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 2500ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 2500ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 2500ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from {
-ms-transform: rotate(0deg);
}
to {
-ms-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/**!
* Tags
*
* Used as an "arrow" to point out features on a page
* =========================================================================== */
.tag {
background: #67a8da;
border-radius: 3px 0 0 3px;
color: #191919;
font-weight: 700;
display: inline-block;
height: 20px;
font-size: 12px;
letter-spacing: 1px;
line-height: 20px;
padding: 0 12px 0 17px;
text-decoration: none;
position: relative;
}
.tag--left {
margin-left: .5rem;
}
.tag--left:after {
border: none;
}
.tag--left:before {
background: #fff;
border-bottom: 10px solid #f9f9f9;
border-right: 10px solid #67a8da;
border-top: 10px solid #f9f9f9;
content: '';
position: absolute;
left: 0;
top: 0;
}
.tag--right {
margin-right: .5rem;
}
.tag--right:after {
border: none;
}
.tag--right:before {
background: #fff;
border-bottom: 10px solid #f9f9f9;
border-left: 10px solid #67a8da;
border-top: 10px solid #f9f9f9;
content: '';
position: absolute;
right: 0;
top: 0;
}
.tag--brandColorGrid {
background: #f26767;
}
.tag--brandColorDvManaged {
background: #67a8da;
}
.tag--brandColorDvDev {
background: #29cbcf;
}
.tag--brandColorDvEnterprise {
background: #ffd02b;
}
.tag--brandColorHelix {
background: #9e7fb9;
}
.tag--brandColorCloudTechd {
background: #80abc8;
}
.tag--brandColorAC {
background: #9fe0f3;
}
@keyframes vex-fadein {
/* line 9, ../sass/_keyframes.sass */
0% {
opacity: 0;
}
/* line 11, ../sass/_keyframes.sass */
100% {
opacity: 1;
}
}
@-webkit-keyframes vex-fadein {
/* line 9, ../sass/_keyframes.sass */
0% {
opacity: 0;
}
/* line 11, ../sass/_keyframes.sass */
100% {
opacity: 1;
}
}
@-moz-keyframes vex-fadein {
/* line 9, ../sass/_keyframes.sass */
0% {
opacity: 0;
}
/* line 11, ../sass/_keyframes.sass */
100% {
opacity: 1;
}
}
@-ms-keyframes vex-fadein {
/* line 9, ../sass/_keyframes.sass */
0% {
opacity: 0;
}
/* line 11, ../sass/_keyframes.sass */
100% {
opacity: 1;
}
}
@-o-keyframes vex-fadein {
/* line 9, ../sass/_keyframes.sass */
0% {
opacity: 0;
}
/* line 11, ../sass/_keyframes.sass */
100% {
opacity: 1;
}
}
@keyframes vex-fadeout {
/* line 16, ../sass/_keyframes.sass */
0% {
opacity: 1;
}
/* line 18, ../sass/_keyframes.sass */
100% {
opacity: 0;
}
}
@-webkit-keyframes vex-fadeout {
/* line 16, ../sass/_keyframes.sass */
0% {
opacity: 1;
}
/* line 18, ../sass/_keyframes.sass */
100% {
opacity: 0;
}
}
@-moz-keyframes vex-fadeout {
/* line 16, ../sass/_keyframes.sass */
0% {
opacity: 1;
}
/* line 18, ../sass/_keyframes.sass */
100% {
opacity: 0;
}
}
@-ms-keyframes vex-fadeout {
/* line 16, ../sass/_keyframes.sass */
0% {
opacity: 1;
}
/* line 18, ../sass/_keyframes.sass */
100% {
opacity: 0;
}
}
@-o-keyframes vex-fadeout {
/* line 16, ../sass/_keyframes.sass */
0% {
opacity: 1;
}
/* line 18, ../sass/_keyframes.sass */
100% {
opacity: 0;
}
}
@keyframes vex-rotation {
/* line 95, ../sass/_keyframes.sass */
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/* line 97, ../sass/_keyframes.sass */
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
}
}
@-webkit-keyframes vex-rotation {
/* line 95, ../sass/_keyframes.sass */
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/* line 97, ../sass/_keyframes.sass */
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
}
}
@-moz-keyframes vex-rotation {
/* line 95, ../sass/_keyframes.sass */
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/* line 97, ../sass/_keyframes.sass */
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
}
}
@-ms-keyframes vex-rotation {
/* line 95, ../sass/_keyframes.sass */
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/* line 97, ../sass/_keyframes.sass */
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
}
}
@-o-keyframes vex-rotation {
/* line 95, ../sass/_keyframes.sass */
0% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
}
/* line 97, ../sass/_keyframes.sass */
100% {
transform: rotate(359deg);
-webkit-transform: rotate(359deg);
-moz-transform: rotate(359deg);
-ms-transform: rotate(359deg);
-o-transform: rotate(359deg);
}
}
/* line 11, ../sass/vex.sass */
.vex,
.vex *,
.vex *:before,
.vex *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* line 14, ../sass/vex.sass */
.vex {
position: fixed;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 1111111;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* line 25, ../sass/vex.sass */
.vex-overlay {
background: black;
filter: alpha(opacity=40);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
}
/* line 30, ../sass/vex.sass */
.vex-overlay {
animation: vex-fadein 0.5s;
-webkit-animation: vex-fadein 0.5s;
-moz-animation: vex-fadein 0.5s;
-ms-animation: vex-fadein 0.5s;
-o-animation: vex-fadein 0.5s;
-webkit-backface-visibility: hidden;
position: fixed;
background: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* line 39, ../sass/vex.sass */
.vex.vex-closing .vex-overlay {
animation: vex-fadeout 0.5s;
-webkit-animation: vex-fadeout 0.5s;
-moz-animation: vex-fadeout 0.5s;
-ms-animation: vex-fadeout 0.5s;
-o-animation: vex-fadeout 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 42, ../sass/vex.sass */
.vex-content {
animation: vex-fadein 0.5s;
-webkit-animation: vex-fadein 0.5s;
-moz-animation: vex-fadein 0.5s;
-ms-animation: vex-fadein 0.5s;
-o-animation: vex-fadein 0.5s;
-webkit-backface-visibility: hidden;
background: white;
}
/* line 46, ../sass/vex.sass */
.vex.vex-closing .vex-content {
animation: vex-fadeout 0.5s;
-webkit-animation: vex-fadeout 0.5s;
-moz-animation: vex-fadeout 0.5s;
-ms-animation: vex-fadeout 0.5s;
-o-animation: vex-fadeout 0.5s;
-webkit-backface-visibility: hidden;
}
/* line 49, ../sass/vex.sass */
.vex-close:before {
font-family: Arial, sans-serif;
content: "\00D7";
}
/* line 53, ../sass/vex.sass */
.vex-dialog-form {
margin: 0;
}
/* line 56, ../sass/vex.sass */
.vex-dialog-button {
-webkit-appearance: none;
/* 1 */
background: transparent;
border: 1px solid;
color: inherit;
/* 3 */
cursor: pointer;
display: inline-block;
font: inherit;
/* 4 */
line-height: normal;
/* 5 */
margin: 0;
position: relative;
text-align: center;
text-decoration: none;
-moz-user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
user-select: none;
/* 6 */
vertical-align: middle;
white-space: nowrap;
/* 7 */
border-color: transparent;
background-color: #cccccc;
text-transform: uppercase;
font-weight: 600;
font-size: 18px;
font-size: 1.125rem;
padding-top: 14px;
padding-top: 0.875rem;
padding-bottom: 14px;
padding-bottom: 0.875rem;
padding-right: 20px;
padding-right: 1.25rem;
padding-left: 20px;
padding-left: 1.25rem;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-o-transition: all 100ms linear;
-ms-transition: all 100ms linear;
transition: all 100ms linear;
font-size: 16px;
font-size: 1rem;
padding-top: 10px;
padding-top: 0.625rem;
padding-bottom: 10px;
padding-bottom: 0.625rem;
padding-right: 16px;
padding-right: 1rem;
padding-left: 16px;
padding-left: 1rem;
}
.vex-dialog-button:hover {
background-color: #d9d9d9;
border-color: #bfbfbf;
}
.vex-dialog-button span,
.vex-dialog-button i {
margin-left: 5px;
}
/* line 60, ../sass/vex.sass */
.vex-loading-spinner {
animation: vex-rotation 0.7s linear infinite;
-webkit-animation: vex-rotation 0.7s linear infinite;
-moz-animation: vex-rotation 0.7s linear infinite;
-ms-animation: vex-rotation 0.7s linear infinite;
-o-animation: vex-rotation 0.7s linear infinite;
-webkit-backface-visibility: hidden;
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.1);
position: fixed;
z-index: 1112;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 2em;
width: 2em;
background: white;
}
/* line 76, ../sass/vex.sass */
body.vex-open {
overflow: hidden;
}
/* ==========================================================================
Wireframe theme
========================================================================== */
/* line 9, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe {
padding-top: 160px;
padding-bottom: 160px;
}
/* line 13, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-overlay {
background: rgba(255, 255, 255, 0.8);
}
/* line 16, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-content {
background: #ffffff;
border: 2px solid #000000;
padding: 2em;
position: relative;
margin: 0 auto;
max-width: 100%;
width: 400px;
font-size: 1.1em;
line-height: 1.5em;
}
.vex.vex-theme-wireframe .vex-video {
border: 2px solid black;
outline: 5px solid black;
outline-offset: -5px;
padding: 0;
width: auto;
max-width: 80%;
}
/* line 29, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-content h1,
.vex.vex-theme-wireframe .vex-content h2,
.vex.vex-theme-wireframe .vex-content h3,
.vex.vex-theme-wireframe .vex-content h4,
.vex.vex-theme-wireframe .vex-content h5,
.vex.vex-theme-wireframe .vex-content h6,
.vex.vex-theme-wireframe .vex-content p,
.vex.vex-theme-wireframe .vex-content ul,
.vex.vex-theme-wireframe .vex-content li {
color: inherit;
}
/* line 32, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-close {
position: absolute;
right: -35px;
top: -65px;
cursor: pointer;
z-index: 10000000;
height: 50px;
width: 50px;
}
/* line 38, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-close:before {
font-family: 'LushIcons';
content: "\F163";
font-size: 38px;
font-weight: normal;
line-height: 80px;
height: 30px;
width: 30px;
text-align: center;
color: #000000;
-webkit-transition: color 150ms linear;
-moz-transition: color 150ms linear;
-o-transition: color 150ms linear;
-ms-transition: color 150ms linear;
transition: color 150ms linear;
}
.vex.vex-theme-wireframe .vex-video .vex-close:hover:before,
.vex.vex-theme-wireframe .vex-video .vex-close:active:before {
color: #1ca670;
}
/* line 51, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-close:hover:before,
.vex.vex-theme-wireframe .vex-close:active:before {
color: black;
}
/* line 56, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-message {
margin-bottom: 0.5em;
}
/* line 59, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input {
margin-bottom: 1em;
}
/* line 62, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea,
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"],
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"],
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"],
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"] {
background: white;
width: 100%;
padding: 0.25em 0.67em;
font-family: inherit;
font-weight: inherit;
font-size: inherit;
min-height: 2.5em;
margin: 0 0 0.25em;
border: 2px solid black;
}
/* line 73, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input textarea:focus,
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="text"]:focus,
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="password"]:focus,
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="email"]:focus,
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-input input[type="url"]:focus {
border-style: dashed;
outline: none;
}
/* line 77, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons {
*zoom: 1;
}
/* line 38, ../../../../../.rvm/gems/ruby-1.9.3-p194/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.vex.vex-theme-wireframe .vex-dialog-form .vex-dialog-buttons:after {
content: "";
display: table;
clear: both;
}
/* line 80, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-button {
float: right;
margin: 0 0 0 5px;
}
/* line 91, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-button.vex-last {
margin-left: 0;
}
/* line 94, ../sass/vex-theme-wireframe.sass */
/* line 103, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary {
background-color: #9fe0f3;
color: #282b2d;
border-color: #9fe0f3;
}
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary:hover,
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary:focus,
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-primary:active {
background-color: #72d1ed;
border-color: #e3f6fb;
color: #282b2d;
}
/* line 108, ../sass/vex-theme-wireframe.sass */
.vex.vex-theme-wireframe .vex-dialog-button.vex-dialog-button-secondary {
background-color: transparent;
border: none;
}
/* line 113, ../sass/vex-theme-wireframe.sass */
.vex-loading-spinner.vex-theme-wireframe {
height: 2.5em;
width: 2.5em;
}
/**!
* Site header
*
* Global site header
* =========================================================================== */
/* ==========================================================================
General Header Styles
========================================================================== */
.siteHeader {
min-height: 76px;
height: 76px;
overflow: visible;
background-color: #282b2d;
color: #f4f4f4;
position: relative;
z-index: 10000;
/**
* Light version of header
*/
}
.siteHeader:before,
.siteHeader:after {
content: " ";
display: table;
}
.siteHeader:after {
clear: both;
}
.siteHeader .wrapper {
max-width: 1220px;
padding-left: 20px;
background-color: #282b2d;
}
.siteHeader .wrapper:before,
.siteHeader .wrapper:after {
content: " ";
display: table;
}
.siteHeader .wrapper:after {
clear: both;
}
.siteHeader.siteHeader--light {
background-color: #ffffff;
color: #1c1c1e;
}
.siteHeader.siteHeader--light .wrapper {
background-color: #ffffff;
}
.siteHeader .supportNumber {
font-weight: 700;
display: block;
text-align: left;
font-size: 12px;
color: #b3b3b3;
text-decoration: none;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
.siteHeader a {
outline: none;
}
/* ==========================================================================
Email/Subscribe Styles
========================================================================== */
.emailSubscribe {
background: #C6F2E0;
line-height: 80px;
}
/* ==========================================================================
Branding/Logo Styles
========================================================================== */
.branding {
float: left;
display: inline-block;
margin: 24px 0 0 0;
}
/* ==========================================================================
Secondary nav/helper items
========================================================================== */
.headerNav {
margin: 0;
}
@media only screen and (max-width: 985px) {
.headerNav {
display: none;
}
}
.headerNav li {
margin-left: 20px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
line-height: 75px;
}
.headerNav a {
color: #ffffff;
}
/**
* TODO:
* Revisit this module. Header content changed and this
* should be refactored or removed.
*/
.headerUtils {
list-style: none;
float: right;
display: inline-block;
text-align: center;
margin-top: 15px;
margin-left: 35px;
padding: 0;
line-height: 28px;
}
.headerUtils.last {
width: auto;
margin-right: 0;
}
.headerUtils .loginBtn {
color: #f4f4f4;
display: block;
font-weight: bold;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 2px;
margin-top: 4px;
}
.headerUtils .shoppingCartBtn {
color: #f4f4f4;
display: block;
text-align: left;
position: relative;
top: -5px;
}
.headerUtils a:hover {
color: #1ca670;
}
.siteHeader--light .headerUtils .loginBtn,
.siteHeader--light .headerUtils .shoppingCartBtn {
color: #1c1c1e;
}
.siteHeader--light .headerUtils a:hover {
color: #1ca670;
}
/**!
* Site nav
*
* Primary site navigation
* =========================================================================== */
/* ==========================================================================
Mobile menu button to toggle navigation.
========================================================================== */
.hamburger {
position: absolute;
top: 20px;
right: 20px;
display: none;
margin: 0;
padding-top: 10px;
height: 35px;
width: 40px;
background: #111;
color: #fff;
border-radius: 5px;
text-indent: -60px;
line-height: 23px;
font-size: 14px;
overflow: hidden;
}
.hamburger .hamburger-bun,
.hamburger .hamburger-patty {
display: block;
width: 20px;
height: 3px;
background: #ffffff;
margin: 0 auto 3px;
-webkit-transition: all 100ms linear;
-moz-transition: all 100ms linear;
-o-transition: all 100ms linear;
-ms-transition: all 100ms linear;
transition: all 100ms linear;
}
.hamburger.isActive .hamburger-bun,
.hamburger.isActive .hamburger-patty {
background-color: #48e0a4;
position: relative;
}
.hamburger.isActive .hamburger-bun--top {
top: 6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.hamburger.isActive .hamburger-patty {
top: -1px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.hamburger.isActive .hamburger-bun--btm {
bottom: 6px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
@media (max-width: 985px) {
.hamburger {
display: block;
}
}
/* ==========================================================================
Main site navigation.
========================================================================== */
.primaryNav {
float: left;
margin-top: 0;
margin-left: 45px;
}
.primaryNav-list {
margin: 0;
padding: 0;
height: 75px;
}
.primaryNav-list:before,
.primaryNav-list:after {
content: " ";
display: table;
}
.primaryNav-list:after {
clear: both;
}
.primaryNav .navItem {
float: left;
text-align: left;
display: inline-block;
vertical-align: bottom;
position: relative;
}
.primaryNav .navItem:last-child {
margin-right: 0;
}
.navItem a {
color: #f4f4f4;
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none;
display: inline-block;
vertical-align: middle;
text-align: left;
line-height: 75px;
padding: 0 30px 0 20px;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;
}
.navItem a:hover,
.navItem a.isActive {
color: #48e0a4;
}
.navItem a.isActive {
background-color: #1c1c1e;
}
.loginLink {
position: relative;
padding-right: 6px;
}
.loginLink:hover {
color: #48e0a4;
text-decoration: none;
}
.loginLink:after {
content: "▶";
font-family: Helvetica, Arial, sans-serif;
font-weight: 300px;
position: absolute;
top: 1px;
left: 48px;
display: block;
font-size: 7px;
color: #48e0a4;
}
@media (max-width: 985px) {
.loginLink:after {
left: 55px;
}
}
/**
* Add sign next to items with a dropdown.
*/
.hasDropdown > a {
position: relative;
}
.hasDropdown > a:after {
content: "▼";
font-family: Helvetica, Arial, sans-serif;
font-weight: 300px;
position: absolute;
top: 1px;
right: 17px;
display: block;
font-size: 7px;
color: #808080;
}
.hasDropdown > a.isActive:after {
content: "▲";
}
.navItem--supportNumber {
letter-spacing: 3px;
font-size: 14px;
font-size: 0.875rem;
}
/**
* Hide the extra login and support number items.
*/
.primaryNav .navItem--supportNumber,
.primaryNav .navItem--login {
display: none;
}
/* navDropdown menus
-------------------------------------------------------------------------- */
/**
* No JS support no problem.
*/
.no-js .navDropdown {
display: block;
height: 0;
-webkit-transition: opacity .3s linear;
-moz-transition: opacity .3s linear;
-o-transition: opacity .3s linear;
-ms-transition: opacity .3s linear;
transition: opacity .3s linear;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.no-js .primaryNav li:hover .navDropdown {
height: auto;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
/**
* navDropdown styles
*/
.navDropdown {
overflow: hidden;
position: absolute;
z-index: 100;
top: 75px;
left: 0;
width: 250px;
margin: 0;
background-color: #1c1c1e;
height: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
-ms-transition: opacity .2s linear;
transition: opacity .2s linear;
}
.navDropdown.isActive {
height: auto;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
}
.navDropdown .nav {
padding: 10px 0;
}
.navDropdown li {
margin: 0;
}
.navDropdown li:last-child {
margin-right: 0;
}
.navDropdown a {
line-height: 40px;
color: #f4f4f4;
text-align: left;
padding: 0 0 0 20px;
}
.navDropdown a:hover {
color: #000000;
background-color: #48e0a4;
}
@media (max-width: 767px) {
.navDropdown {
position: static;
}
}
.navDropdown-header {
border-bottom: 1px solid #333333;
margin-bottom: 20px;
}
@media (max-width: 985px) {
.navDropdown-header {
margin: 0;
border: none;
}
}
.navDropdown--wide {
width: 780px;
left: -150%;
}
.navDropdown--wide .navDropdown-column {
float: left;
width: 260px;
padding: 0;
border-left: 1px solid #333333;
margin-bottom: 20px;
}
.navDropdown--wide .navDropdown-column a {
text-transform: none;
font-size: 12px;
font-weight: normal;
}
@media (max-width: 985px) {
.navDropdown--wide .navDropdown-column {
display: none;
float: none;
margin: 0;
border: none;
}
}
/* Light version of primary nav
-------------------------------------------------------------------------- */
.siteHeader--light .primaryNav .primaryNav-list:hover a {
color: #b3b3b3;
}
.siteHeader--light .primaryNav .navDropdown {
background-color: #f6f6f6;
}
.siteHeader--light .primaryNav .navItem a {
color: #333333;
}
.siteHeader--light .primaryNav .navItem a:hover {
color: #1c1c1e;
}
.siteHeader--light .primaryNav .navItem a:hover .tag--left:before {
border-bottom: 10px solid #48e0a4;
border-top: 10px solid #48e0a4;
}
.siteHeader--light .primaryNav .navItem a.isActive {
background-color: #f6f6f6;
color: #000000;
}
/* ==========================================================================
Responsive styles
========================================================================== */
/**
* Restyle Navigation for mobile view.
* Stacks items in two columns.
*/
@media (max-width: 985px) {
.primaryNav {
float: none;
clear: both;
margin: 0;
overflow: hidden;
height: 0;
-webkit-transition: opacity .2s linear;
-moz-transition: opacity .2s linear;
-o-transition: opacity .2s linear;
-ms-transition: opacity .2s linear;
transition: opacity .2s linear;
-webkit-opacity: 0;
-moz-opacity: 0;
opacity: 0;
}
.primaryNav .navItem--supportNumber,
.primaryNav .navItem--login {
display: block;
}
.primaryNav.isActive {
height: auto;
-webkit-opacity: 1;
-moz-opacity: 1;
opacity: 1;
margin-top: 74px;
}
.primaryNav .primaryNav-list {
width: 100%;
height: auto;
padding-top: 0;
padding-bottom: 20px;
}
.primaryNav .navItem {
display: block;
float: none;
margin: 0;
text-align: left;
border-top: 1px solid #34383b;
}
.primaryNav .navItem a,
.primaryNav .navItem > span {
line-height: 60px;
display: block;
text-align: left;
padding-left: 10px;
}
.primaryNav .navItem.isActive {
background-color: #1c1c1e;
}
.hasDropdown > a {
position: relative;
}
.hasDropdown > a:after {
top: 0;
right: 10px;
font-size: 10px;
}
.navDropdown {
width: 100%;
position: static;
background-color: transparent;
}
.navDropdown .nav {
padding: 0;
}
.navDropdown.isActive {
height: auto;
}
.navDropdown li {
margin: 0;
border-top: 1px solid #2f3335;
}
.navDropdown li a {
line-height: 50px;
color: #f4f4f4;
padding-left: 30px;
}
.siteHeader--light .primaryNav .primaryNav-list:hover a {
color: #000000;
}
.siteHeader--light .primaryNav .navDropdown {
background-color: #cccccc;
}
.siteHeader--light .primaryNav .navItem a.isActive {
background-color: #cccccc;
}
.siteHeader--light .primaryNav .tag--left:before {
border-bottom: 10px solid #cccccc;
border-top: 10px solid #cccccc;
}
}
/**!
* Global site footer
*
* Contains all styles for the global footer at the bottom of all pages.
* =========================================================================== */
.siteFooter {
overflow: hidden;
color: #f4f4f4;
/**
* Support info
*/
/**
* Social contact info.
*/
/**
* Footer link lists sections.
*/
/**
* Titles for each footer section.
*/
/**
* List of links for each section.
*/
}
.siteFooter .supportNumber,
.siteFooter .supportPromise {
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
display: block;
}
.siteFooter .supportNumber {
color: #b3b3b3;
margin-bottom: 10px;
}
.siteFooter .supportPromise {
margin-bottom: 25px;
color: #f4f4f4;
}
.siteFooter .socialShareBtns {
margin-bottom: 8px;
}
.siteFooter .socialShareBtns-btn {
display: block;
margin-bottom: 5px;
}
.siteFooter .socialShareBtns-btn iframe {
max-width: 90px;
}
.siteFooter .socialContact {
list-style: none;
padding: 0;
}
.siteFooter .socialContact {
margin: 16px 0 24px;
}
.siteFooter .socialContact li {
display: inline-block;
margin: 0 20px 0 0;
}
.siteFooter .socialContact li:last-child {
margin: 0;
}
.siteFooter .sitemapGroup-title {
font-weight: bold;
color: #ffffff;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
}
.siteFooter .sitemapGroup-list {
margin: 0;
padding: 0;
list-style: none;
}
.siteFooter .sitemapGroup-list li {
margin: 0 0 10px;
}
.siteFooter .sitemapGroup-list li a {
display: block;
color: #b3b3b3;
font-size: 14px;
font-size: 0.875rem;
}
.siteFooter .sitemapGroup-list li a:hover {
color: #ffffff;
}
/**
* Copyright
*/
.copyright {
font-size: 12px;
padding: 15px 0;
}
.copyright p {
margin: 0;
padding: 0;
line-height: 18px;
color: #cccccc;
}
.copyright p a {
color: #999999;
}
.copyright p a:hover {
color: #e6e6e6;
}
/* Light colored footer
-------------------------------------------------------------------------- */
.siteFooter.siteFooter--light {
background-color: #ffffff;
color: #1c1c1e;
}
.siteFooter.siteFooter--light h4,
.siteFooter.siteFooter--light .h4,
.siteFooter.siteFooter--light .supportPromise,
.siteFooter.siteFooter--light .socialContact a {
color: #1c1c1e;
}
.siteFooter.siteFooter--light a {
color: #1c1c1e;
}
.siteFooter.siteFooter--light a:hover {
color: #1ca670;
}
.siteFooter.siteFooter--light .sitemapGroup-list li a {
color: #999999;
}
.siteFooter.siteFooter--light .sitemapGroup-list li a:hover {
color: #000000;
}
/* ==========================================================================
Responsive Goodness
========================================================================== */
@media (max-width: 767px) {
.siteFooter .grid-col {
width: 90%;
text-align: center;
}
.socialContact {
margin-bottom: 26px !important;
}
.siteFooter .quickSearch {
margin-bottom: 20px;
}
}
/**!
* About Us
*
* About us section on the company about page.
* =========================================================================== */
/* ==========================================================================
About Us
========================================================================== */
/**!
* Contact us module
*
* /_less/modules/contact-us.less
* =========================================================================== */
.contactUs .contactMethods-section {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.contactUs .contactMethods-section dl {
font-size: 12px;
line-height: 22px;
}
.contactUs .contactMethods-section dl:before,
.contactUs .contactMethods-section dl:after {
content: " ";
display: table;
}
.contactUs .contactMethods-section dl:after {
clear: both;
}
.contactUs .contactMethods-section dl dt {
float: left;
clear: left;
display: inline-block;
color: #666666;
font-weight: 500;
}
.contactUs .contactMethods-section dl dd {
float: right;
color: #808080;
}
/**!
* Details
*
* Details/faq module on bottom of product pages
*
Title goes here Copy goes here.
Title goes here Copy goes here.
*
* =========================================================================== */
.details .details-item {
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
.details .details-item:before,
.details .details-item:after {
content: " ";
display: table;
}
.details .details-item:after {
clear: both;
}
/**!
* Features
*
* Features list that displays feature items side by side in 2 columns
* and multiple rows.
* =========================================================================== */
/* ==========================================================================
Features
========================================================================== */
.features .featureIcon {
float: left;
width: 15%;
}
.features .featureBox {
float: left;
width: 85%;
margin-bottom: 80px;
margin-bottom: 5rem;
}
.features .featureBox:before,
.features .featureBox:after {
content: " ";
display: table;
}
.features .featureBox:after {
clear: both;
}
.features .featureBox--desc {
font-size: 18px;
font-size: 1.125rem;
}
/**
* Get started module at the bottom of page
*/
.getStarted {
margin-top: 60px;
margin-top: 3.75rem;
}
.getStarted .btn {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.getStarted p {
margin-bottom: 5px;
}
.interceptor header {
position: relative;
}
.interceptor header:before,
.interceptor header:after {
content: " ";
display: table;
}
.interceptor header:after {
clear: both;
}
.interceptor h2 {
float: left;
text-transform: uppercase;
margin-right: 60px;
}
@media (max-width: 1224px) {
.interceptor h2 {
float: none;
}
}
.interceptor p.h3 {
float: left;
color: #cccccc;
}
@media (max-width: 1224px) {
.interceptor p.h3 {
float: none;
}
}
.interceptor-actions {
position: absolute;
right: 0;
top: 0;
}
@media (min-width: 481px) and (max-width: 767px) {
.interceptor-actions {
position: static;
float: right;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
@media (max-width: 480px) {
.interceptor-actions {
position: static;
float: none;
clear: both;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
/**!
* Jobs
*
* Jobs module tht puls in info from jobvite
* =========================================================================== */
/* ==========================================================================
Jobs
========================================================================== */
.jobs .module-header {
margin-bottom: 60px;
margin-bottom: 3.75rem;
}
.jobs .module-heading {
margin-bottom: 20px;
}
.jobs .module-subHeading {
margin-bottom: 0;
}
.jobs .job {
display: none;
}
.jobs .job:first-child {
display: block;
}
@media (max-width: 767px) {
.jobs .job {
margin-bottom: 60px;
display: block;
}
}
.jobs .job-content h3 {
text-transform: uppercase;
margin-bottom: 40px;
margin-bottom: 2.5rem;
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
.jobs .job-footer {
padding: 20px 0 0 0;
}
.jobs .job-details {
display: none;
font-size: 14px;
}
.jobs .job-details ul {
margin-left: 20px;
margin-top: 5px;
}
.jobs .jobList {
list-style: none;
list-style-position: inside;
margin: 0;
min-height: 300px;
}
.jobs .jobList a {
color: #4d4d4d;
position: relative;
font-size: 18px;
font-size: 1.125rem;
line-height: 18px;
line-height: 1.125rem;
}
.jobs .jobList a:before {
content: " ";
position: absolute;
left: -20px;
top: 30%;
display: block;
height: 10px;
width: 10px;
background: #f4f4f4;
-webkit-border-radius: 150px;
-webkit-background-clip: padding-box;
-moz-border-radius: 150px;
-moz-background-clip: padding;
border-radius: 150px;
background-clip: padding-box;
-webkit-transition: background 0.2s ease-in;
-moz-transition: background 0.2s ease-in;
-o-transition: background 0.2s ease-in;
-ms-transition: background 0.2s ease-in;
transition: background 0.2s ease-in;
}
.jobs .jobList a:hover {
color: #48e0a4;
}
.jobs .jobList a.activeJob:before {
background: #48e0a4;
}
.jobs .jobList li {
margin-bottom: 5px;
}
/**!
* Livechat Widget Module
*
* Livechat module has two versions, website/mt.net and AC. This controls which one is visible
* =========================================================================== */
.livechat-container--website {
display: block !important;
}
.livechat-container--ac {
display: none !important;
}
/**!
* Not a customer
*
* Not a customer widget
* ========================================================================== */
.notACustomer .notACustomer--text {
font-weight: normal;
font-size: 18px;
font-size: 1.125rem;
}
.notACustomer .notACustomer--text .cta {
margin-left: 5px;
}
@media (max-width: 767px) {
.notACustomer .notACustomer--text {
font-size: 16px;
font-size: 1rem;
}
}
/**!
* Our Clients
*
* Our clients module. Can be used all over the website.
* =========================================================================== */
.clientList img {
max-width: 100%;
width: 180px;
}
@media (max-width: 767px) {
.clientList img {
margin: 0 auto;
display: block;
}
}
@media (max-width: 480px) {
.clientList img {
width: 50%;
height: auto;
}
}
@media (min-width: 768px) and (max-width: 1095px) {
.clientList .grid-col {
margin-bottom: 40px;
}
}
@media (max-width: 767px) {
.clientList .grid-col {
margin-bottom: 40px;
}
.clientList .grid-col:nth-child(6) {
margin-bottom: 0;
}
}
/*
* Product page module
* This only applies to the Our Clients modules on product pages, where logos are stacked and accompany a client quote
*/
@media (max-width: 767px) {
.productClients .grid-col:first-child {
margin-bottom: 30px;
}
}
.productClients .clientList .grid-col {
margin-bottom: 40px;
}
/**!
* Our Team
*
* Our team module as used on about page
* =========================================================================== */
.ourTeam .person {
overflow: hidden;
margin-bottom: 65px;
margin-bottom: 4.0625rem;
}
.ourTeam .person-media {
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 0;
padding-top: 0;
padding-bottom: 100%;
}
.ourTeam .person-media img {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
.ourTeam .person-info {
background: #282b2d;
color: #f4f4f4;
font-size: 14px;
padding: 20px 10px 0 20px;
max-height: 100px;
height: 100px;
}
.ourTeam .person-info p {
margin: 0;
}
.ourTeam.ourTeam--small .person-info {
max-height: 80px;
height: 80px;
}
.ourTeam .person-name {
margin-bottom: 10px;
color: #b3b3b3;
text-transform: capitalize;
}
.ourTeam .person-role {
color: #808080;
}
.ourTeam--small {
padding-bottom: 0;
padding-top: 30px;
padding-top: 1.875rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
.ourTeam--small .person-role {
font-size: 12px;
}
.page--ourTeam .ourTeam--small:first-of-type {
padding-top: 90px;
padding-top: 5.625rem;
}
.page--ourTeam .ourTeam--small:last-of-type {
padding-bottom: 135px;
padding-bottom: 8.4375rem;
}
/**!
* hosting-plans.less
*
* Web hosting plans module.
* =========================================================================== */
[data-mtlinkify] {
cursor: pointer;
}
.hostingPlans {
/**
* Skills
*/
/**
* List
*/
/**
* product action
*/
}
.hostingPlans .module-footer {
margin-top: 30px;
margin-top: 1.875rem;
}
.hostingPlans .product {
overflow: hidden;
position: relative;
background-color: #f9f9f9;
width: 100%;
padding: 30px;
padding: 1.875rem;
display: inline-block;
*display: inline;
zoom: 1;
}
.hostingPlans .product .thumbnail {
width: 100%;
max-width: 100%;
}
@media (max-width: 767px) {
.hostingPlans .product {
min-height: 0;
padding: 30px;
background-color: #f7f7f7;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
.hostingPlans .product--grid .thumbnail {
color: #f26767;
}
.hostingPlans .product--grid .thumbnail:hover {
color: #f69696;
}
.hostingPlans .product--dvManaged {
background-color: #f0f0f0;
}
.hostingPlans .product--dvManaged .thumbnail {
color: #67a8da;
}
.hostingPlans .product--dvManaged .thumbnail:hover {
color: #90c0e4;
}
.hostingPlans .product--dvDeveloper .thumbnail {
color: #29cbcf;
}
.hostingPlans .product--dvDeveloper .thumbnail:hover {
color: #4fd9dc;
}
.hostingPlans .productWordmark {
margin-bottom: 7.5px;
margin-bottom: 0.4375rem;
}
.hostingPlans .product-title {
text-transform: uppercase;
}
.hostingPlans .product-media {
outline: 1px solid #ddd;
margin-top: 30px;
margin-top: 1.875rem;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
@media (max-width: 767px) {
.hostingPlans .product-media {
display: none;
}
}
.hostingPlans .product-uses strong {
display: block;
}
.hostingPlans .skills {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.hostingPlans .skills .skill {
overflow: hidden;
}
.hostingPlans .skills .skill-title {
color: #333333;
text-transform: uppercase;
font-size: 14px;
width: 125px;
display: inline-block;
*display: inline;
zoom: 1;
}
.hostingPlans .skills .skill-meter {
width: 100%;
max-width: 150px;
background-color: #cccccc;
top: -1px;
position: relative;
display: inline-block;
*display: inline;
zoom: 1;
}
.hostingPlans .skills .skill-meter-fill {
background-color: #48e0a4;
display: block;
}
.hostingPlans .skills .skill-meter,
.hostingPlans .skills .skill-meter-fill {
height: 10px;
}
.hostingPlans .product-bullets {
margin-bottom: 60px;
margin-bottom: 3.75rem;
}
.hostingPlans .product-bullets li {
color: #666666;
font-size: 15px;
}
@media (min-width: 768px) and (max-width: 1199px), (max-width: 767px) {
.hostingPlans .product-bullets {
display: none;
}
}
.hostingPlans .product-price {
margin-bottom: 10px;
margin-bottom: 0.625rem;
font-size: 32px;
font-size: 2rem;
line-height: 26px;
line-height: 1.625rem;
}
.hostingPlans .product-price span {
font-size: 14px;
}
.strip--graphite .product,
.strip--darkGraphite .product {
background-color: #262626;
-webkit-transition: background 250ms linear;
-moz-transition: background 250ms linear;
-o-transition: background 250ms linear;
-ms-transition: background 250ms linear;
transition: background 250ms linear;
}
.strip--graphite .product:hover,
.strip--darkGraphite .product:hover {
background-color: #191919;
}
.strip--graphite .product--dvManaged,
.strip--darkGraphite .product--dvManaged {
background-color: #222;
}
.strip--graphite .product-media,
.strip--darkGraphite .product-media {
outline: none;
}
.strip--graphite .product-desc,
.strip--darkGraphite .product-desc {
color: #cccccc;
}
.strip--graphite .product-uses,
.strip--darkGraphite .product-uses {
color: #cccccc;
font-size: 15px;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.strip--graphite .product-uses strong,
.strip--darkGraphite .product-uses strong {
color: #ffffff;
}
.strip--graphite .skills .skill-title,
.strip--darkGraphite .skills .skill-title {
color: #e6e6e6;
}
.strip--graphite .skills .skill-meter,
.strip--darkGraphite .skills .skill-meter {
background-color: #e6e6e6;
}
.strip--graphite .product-bullets li,
.strip--darkGraphite .product-bullets li {
color: #b3b3b3;
}
/**!
* Product Overview
*
* Product overview module on all product pages
* =========================================================================== */
.prodOverview header {
position: relative;
}
.prodOverview header:before,
.prodOverview header:after {
content: " ";
display: table;
}
.prodOverview header:after {
clear: both;
}
.prodOverview h2 {
float: left;
text-transform: uppercase;
}
.prodOverview-intro {
margin-bottom: 60px;
margin-bottom: 3.75rem;
}
@media (max-width: 767px) {
.prodOverview-specs ul {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
}
.prodOverview-specs li {
margin-bottom: 40px;
margin-bottom: 2.5rem;
}
.prodOverview-specs li .icon {
margin-right: 20px;
margin-right: 1.25rem;
}
.prodOverview-specs li .lush {
margin-right: 20px;
margin-right: 1.25rem;
}
@media (max-width: 767px) {
.prodOverview-specs li {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
}
.prodOverview-actions {
position: absolute;
right: 0;
top: 0;
}
.prodOverview-actions .tip {
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
color: #808080;
padding: 10px 0;
}
@media (min-width: 481px) and (max-width: 767px) {
.prodOverview-actions {
position: static;
float: right;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
@media (max-width: 480px) {
.prodOverview-actions {
position: static;
float: none;
clear: both;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
.priceUnit {
display: block;
margin-bottom: 10px;
font-size: 34px;
font-size: 2.125rem;
line-height: 34px;
line-height: 2.125rem;
}
.priceUnit sub {
vertical-align: middle;
font-size: 18px;
font-size: 1.125rem;
}
.priceUnit-tip {
font-size: 11px;
line-height: 12px;
margin-bottom: 4px;
text-transform: uppercase;
color: #cccccc;
letter-spacing: 2px;
display: block;
}
/**!
* Product Specs
*
* Specs section on each product page.
* =========================================================================== */
@media (max-width: 767px) {
.productSpecs .list--specs {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
}
/**!
* Product Carousel
*
* Product carousel module on product pages
* =========================================================================== */
.prodOverview-carousel,
.carousel {
position: relative;
}
.prodOverview-carousel .carousel-content,
.carousel .carousel-content {
overflow: hidden;
white-space: nowrap;
width: 88%;
margin: 0 auto;
float: none;
}
@media (max-width: 767px) {
.prodOverview-carousel .carousel-content,
.carousel .carousel-content {
width: auto;
}
}
.prodOverview-carousel .carousel-content--small,
.carousel .carousel-content--small {
width: 85%;
}
.carousel-col {
width: 30%;
padding: 30px;
position: relative;
vertical-align: top;
background-color: #f9f9f9;
-webkit-transition: all 250ms ease-in-out;
-moz-transition: all 250ms ease-in-out;
-o-transition: all 250ms ease-in-out;
-ms-transition: all 250ms ease-in-out;
transition: all 250ms ease-in-out;
display: inline-block;
*display: inline;
zoom: 1;
}
.carousel-col sub {
bottom: 0;
}
.carousel-col:nth-child(1) {
margin-right: 5%;
}
@media (max-width: 767px) {
.carousel-col:nth-child(1) {
margin-right: 0;
}
}
.carousel-col:nth-child(2) {
background-color: #f0f0f0;
}
.carousel-col:nth-child(2) a {
margin-top: 16px;
margin-top: 1rem;
}
.carousel-col:nth-child(3) {
margin-left: 5%;
}
@media (max-width: 767px) {
.carousel-col:nth-child(3) {
margin-left: 0;
}
}
.carousel-col:nth-child(4) {
margin-right: 5%;
}
@media (max-width: 767px) {
.carousel-col:nth-child(4) {
margin-right: 0;
}
}
.carousel-col:nth-child(6) {
margin-left: 5%;
}
@media (max-width: 767px) {
.carousel-col:nth-child(6) {
margin-left: 0;
}
}
.carousel-col.carousel-col--full {
width: 100%;
margin: 0;
background: transparent;
padding: 0;
}
@media (max-width: 767px) {
.carousel-col.carousel-col--full {
margin-bottom: 30px;
}
}
@media (max-width: 767px) {
.carousel-col {
width: 100%;
display: block;
margin-bottom: 15px;
}
.carousel-col:nth-child(1n+4) {
display: none;
}
}
.carousel-col p:first-child {
border-bottom: 1px solid #cccccc;
padding: 0 0 15px 0;
margin: 0 0 15px 0;
margin-bottom: 30px;
margin-bottom: 1.875rem;
font-family: inherit;
font-weight: normal;
margin-top: 0;
margin-left: 0;
margin-right: 0;
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 0;
}
.carousel-col p:first-child.heading--tight {
margin-bottom: 15px !important;
}
.carousel-col p:first-child a {
font-size: inherit;
}
.carousel-col p:first-child strong {
font-weight: 600;
}
.carousel-col p:first-child.u-textAllcaps {
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
@media (min-width: 481px) and (max-width: 767px) {
.carousel-col p:first-child {
font-size: 22px;
font-size: 1.375rem;
}
}
@media (max-width: 480px) {
.carousel-col p:first-child {
font-size: 20px;
font-size: 1.25rem;
}
}
.carousel-col a {
margin: 30px 0 0 0;
display: inline-block;
}
.carousel-col-media,
.carousel-col-body {
vertical-align: top;
max-width: 480px;
display: inline-block;
*display: inline;
zoom: 1;
}
@media (max-width: 480px) {
.carousel-col-media,
.carousel-col-body {
display: block;
width: 95% !important;
}
}
.carousel-col-media {
width: 52%;
}
.carousel-col-media img {
max-width: 100%;
}
.carousel-col-body {
width: 48%;
padding: 30px;
white-space: normal;
}
.carousel-col-body .title {
text-transform: uppercase;
}
@media (max-width: 767px) {
.carousel-col-body {
padding: 0 15px;
}
.carousel-col-body .title {
margin-bottom: 15px;
}
}
@media (max-width: 480px) {
.carousel-col-body {
padding: 15px 0;
}
}
/* DV Enterprise style
* =========================================================================== */
.carousel-col--enterprise {
margin: 0 0 0 20%;
width: 60%;
}
.carousel-col--enterprise .enterprise-marketing {
width: 60%;
white-space: normal;
float: left;
padding-right: 30px;
}
.carousel-col--enterprise .enterprise-marketing p:first-child {
border-bottom: none;
padding-bottom: 0;
}
@media (max-width: 767px) {
.carousel-col--enterprise .enterprise-marketing p:last-child {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
}
@media (max-width: 767px) {
.carousel-col--enterprise .enterprise-marketing {
float: none;
padding-right: 0;
width: 100%;
}
}
.carousel-col--enterprise .enterprise-specs {
width: 40%;
float: right;
padding-left: 30px;
border-left: 1px solid #cccccc;
}
@media (max-width: 767px) {
.carousel-col--enterprise .enterprise-specs {
float: none;
padding-left: 0;
border-left: 0;
width: 100%;
}
}
@media (max-width: 767px) {
.carousel-col--enterprise {
margin: 0 0 15px 0;
width: 100%;
}
}
.carousel-col--enterprise a {
margin-top: 16px;
margin-top: 1rem;
}
.carousel-col.js-carousel--visible {
display: inline-block;
}
@media (max-width: 767px) {
.carousel-col.js-carousel--visible {
display: block;
}
}
/* Carousel controls: left, right, mobile reveal/hide
* =========================================================================== */
.carousel-control {
position: absolute;
top: 28%;
padding: 40px 10px;
}
.carousel-control:hover {
text-decoration: none;
}
@media (max-width: 767px) {
.carousel-control {
display: none;
}
}
.carousel-control--left {
left: 0;
}
.carousel-control--right {
right: 0;
}
.carousel-more {
display: none;
border: 0;
margin: 0 auto;
text-align: center;
}
@media (max-width: 767px) {
.carousel-more.js-morebutton--active {
display: block;
}
}
/* Position-based styles
*
* Here we set which controls are visible depending on the carousel's position.
* =========================================================================== */
.position-1 .carousel-col {
left: 0;
}
.position-1 .carousel-control--left {
cursor: default;
color: #cccccc;
}
.position-1 .carousel-control--left:hover {
color: #cccccc;
}
.position-1 .carousel-control--right {
display: block;
}
.position-2 .carousel-col {
left: -100%;
}
.position-2 .carousel-control--left {
display: block;
}
.position-2 .carousel-control--right {
display: block;
}
.position-3 .carousel-col {
left: -200%;
}
.position-3 .carousel-control--left {
display: block;
}
.position-3 .carousel-control--right {
cursor: default;
color: #cccccc;
}
.position-3 .carousel-control--right:hover {
color: #cccccc;
}
/* The carousel columns need to return to the original position on mobile.
* We don't want the carousel left/right arrows visible on mobile in any position. */
@media (max-width: 767px) {
div[class^="position-"] .carousel-col,
div[class*=" position-"] .carousel-col {
left: 0;
}
}
@media (max-width: 767px) {
div[class^="position-"] .carousel-control,
div[class*=" position-"] .carousel-control {
display: none;
}
}
/**!
* Promo element styles
*
* Here we includes stuff like styles for promotional banners, flags, timers, etc.
* =========================================================================== */
.promo--hero-flag {
position: absolute;
right: 0;
top: 0;
}
.promo--hero-flag img {
position: relative;
z-index: 201;
}
.promo--hero-flag .promo--hero-flag--callout {
position: absolute;
z-index: 202;
top: 25px;
width: 100%;
text-align: center;
color: #ffffff;
font-size: 15px;
font-size: 0.9375rem;
}
.promo--hero-flag .promo--hero-flag--callout span {
/* text-transform:uppercase; */
font-weight: bold;
line-height: 20px;
/* .font-size(16px); */
}
.promo--hero-flag .promo--hero-flag--callout .cta,
.promo--hero-flag .promo--hero-flag--callout .cta--go {
color: #333333;
line-height: 1.25;
font-size: 16px;
font-size: 1rem;
}
.promo--hero-flag .promo--hero-flag--callout .cta .icon,
.promo--hero-flag .promo--hero-flag--callout .cta--go .icon {
color: #333333;
}
.promo--hero-flag .promo--hero-flag--callout .cta:hover,
.promo--hero-flag .promo--hero-flag--callout .cta--go:hover {
color: #ffffff;
}
.promo--hero-flag .promo--hero-flag--callout .cta:hover .icon,
.promo--hero-flag .promo--hero-flag--callout .cta--go:hover .icon {
color: #ffffff;
}
@media (max-width: 1224px) {
.promo--hero-flag {
right: 30px;
}
}
/* Grid SSD Promo module */
.promo--grid-ssd img {
margin: 0 auto;
}
.promo--grid-ssd .illustrations {
text-align: center;
}
.promo--grid-ssd .illustrations--caption .h4 {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.promo--grid-ssd .illustrations--labels .h4 {
margin-top: 20px;
margin-top: 1.25rem;
margin-bottom: 0;
}
@media (max-width: 767px) {
.promo--grid-ssd .illustrations--labels .grid-col:first-child .h4 {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
}
.page--home .flag--grid {
display: none;
}
.page--grid .promo--hero-flag--callout {
top: 38px;
}
.page--grid .flag--home {
display: none;
}
.page--grid .flag--grid {
display: none;
}
/**!
* Referral link builder
* =========================================================================== */
.referralLinkBuilder .domainInput {
width: 100%;
max-width: 800px;
}
.referralLinkBuilder .domainInput,
.referralLinkBuilder .domainSubmit {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.referralLinkBuilder .linkBuilder-results,
.referralLinkBuilder .socialSharing {
display: none;
}
.referralLinkBuilder .validationMessage {
display: none;
padding: 0 0 20px 0;
}
.referralLinkBuilder .validationMessage.error {
color: #d9534f;
}
.referralLinkBuilder .validationMessage.warning {
color: #f0ad4e;
}
/**!
* Subnav
*
* Subnav used on product pages
* =========================================================================== */
.subNav {
height: 62px;
overflow: hidden;
top: -65px;
}
.subNav .nav {
margin: 0 auto;
padding: 0;
max-width: 1220px;
padding-left: 20px;
padding-right: 20px;
text-align: left;
}
.subNav .nav .nav-item {
line-height: 60px;
text-align: left !important;
margin-right: 90px;
}
.subNav .nav .nav-item:last-child {
margin: 0;
}
.subNav .nav .nav-action {
margin-top: 8px;
display: none;
}
.subNav .nav .nav-link {
line-height: 60px;
text-transform: uppercase;
letter-spacing: 1px;
text-align: left;
color: #f4f4f4;
font-size: 15px;
font-size: 0.9375rem;
display: inline-block;
*display: inline;
zoom: 1;
}
.subNav .nav .nav-link:hover {
color: #ffffff;
text-decoration: none;
}
.subNav .nav .nav-link span {
border-bottom: 0px solid transparent;
padding-bottom: 6px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
.subNav .nav li.active span {
border-bottom: 2px solid #48e0a4;
padding-bottom: 2px;
}
@media (max-width: 767px), (min-width: 768px) and (max-width: 1199px) {
.subNav {
display: none;
}
}
.subNav-outerWrap {
text-align: center;
height: 60px;
}
.stuck {
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
}
.stuck .nav .nav-item {
line-height: 60px;
}
.stuck .nav .nav-link {
line-height: 30px;
}
/* ==========================================================================
Subnav Dark
========================================================================== */
/**
* shared
*/
.strip--graphite.subNav ul li .nav-link,
.strip--darkGraphite.subNav ul li .nav-link {
color: #f4f4f4;
}
.strip--graphite.subNav ul li .nav-link:hover,
.strip--darkGraphite.subNav ul li .nav-link:hover {
color: #ffffff;
}
.strip--graphite.subNav .subNav-innerWrap,
.strip--darkGraphite.subNav .subNav-innerWrap {
border-bottom: 1px solid #333333;
}
/**
* graphite
*/
.strip--graphite.subNav ul span {
border-color: #282b2d;
}
.strip--graphite.subNav .stuck {
background: #1c1c1e;
}
/**
* dark graphite
*/
.strip--darkGraphite.subNav ul span {
border-color: #1c1c1e;
}
.strip--darkGraphite.subNav .stuck {
background: #1c1c1e;
}
/* ==========================================================================
Subnav Light
========================================================================== */
/**
* shared
*/
.strip--light.subNav .nav-link,
.strip--frost.subNav .nav-link {
color: #282b2d;
}
.strip--light.subNav .nav-link:hover,
.strip--frost.subNav .nav-link:hover {
color: #000000;
}
.strip--light.subNav .subNav-innerWrap,
.strip--frost.subNav .subNav-innerWrap {
border-bottom: 1px solid #e6e6e6;
}
/**
* light
*/
.strip--light.subNav ul span {
border-color: #ffffff;
}
.strip--light.subNav .stuck {
background: #ffffff;
}
/**
* dark graphite
*/
.strip--frost.subNav ul span {
border-color: #f4f4f4;
}
.strip--frost.subNav .stuck {
background: #f4f4f4;
}
/* ==========================================================================
Active states
========================================================================== */
.page--grid .subNav ul li.active span {
border-color: #f26767;
}
.page--dvManaged .subNav ul li.active span {
border-color: #67a8da;
}
.page--dvDeveloper .subNav ul li.active span {
border-color: #29cbcf;
}
.page--dvEnterprise .subNav ul li.active span {
border-color: #ffd02b;
}
.page--helix .subNav ul li.active span {
border-color: #9e7fb9;
}
.welcomeIntro .lead {
font-size: 18px;
color: #cccccc;
}
@media (max-width: 767px) {
.welcomeIntro .lead {
font-size: 14px;
}
}
.welcomeIntro .learnMoreLink {
color: #808080;
font-size: 14px;
}
.welcomeIntro .learnMoreLink:hover {
color: #b3b3b3;
}
.welcomeIntro .hostingContent {
display: none;
color: #cccccc;
}
.welcomeIntro .hostingContent .h5 {
margin-bottom: 7.5px;
}
.welcomeIntro .hostingContent p,
.welcomeIntro .hostingContent li {
font-size: 14px;
}
.welcomeIntro .hostingContent a {
color: #999999;
text-decoration: underline;
}
.welcomeIntro .hostingContent a:hover {
}@black 20;
/**!
* Twitter Widget Module
*
* Twitter module that displays and cycles through tweets.
* =========================================================================== */
.twitterWidget .twitterIcon {
position: relative;
top: -25px;
}
.twitterWidget .twitterIcon .icon {
color: #55acee;
font-size: 90px;
font-size: 5.625rem;
}
@media (max-width: 767px) {
.twitterWidget .twitterIcon {
display: none;
}
}
.twitterWidget.strip--graphite .twitterIcon .icon,
.twitterWidget.strip--darkGraphite .twitterIcon .icon {
color: #ffffff;
}
.twitterWidget .tweetList-tweet {
display: none;
}
.twitterWidget .tweetList-tweet:first-child {
display: block;
}
.twitterWidget .tweetList-tweet-text {
font-weight: 300;
font-size: 24px;
font-size: 1.5rem;
}
.twitterWidget .tweetList-tweet-author {
text-align: right;
font-size: 16px;
font-size: 1rem;
}
/**!
* about-page.less
*
* About page stules ~/company
* =========================================================================== */
/* ==========================================================================
About page specific overrides and styles
========================================================================== */
.page--about {
/**
* Highlight current nav item
*/
/**
* Subnav overrides
*/
/* ==========================================================================
Our clients section
========================================================================== */
/* ==========================================================================
Press section
========================================================================== */
}
.page--about .sectionSlide {
overflow: hidden;
}
.page--about .sectionSlide--2 {
display: none;
}
.page--about .ourClients .module-header h2,
.page--about .ourClients .module-header p {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.page--about .pressInquiries address {
font-size: 14px;
}
.page--about .pressInquiries abbr {
margin-right: 4px;
}
.page--about .promoText {
top: 45%;
}
.page--about .promoText p {
margin-bottom: 15px;
}
@media (max-width: 1224px) {
.page--about .promoText p {
font-size: 15px;
font-size: 0.9375rem;
}
}
/**!
* Affiliate Landing
*
* LESS: /_less/pages/cloudtech-landing.less
* CSS: /_css/cloudtech-landing.css
* PAGE: /cloudtech/
* =========================================================================== */
/* ==========================================================================
Cloudtech specific overrides and styles
========================================================================== */
.page--affiliates {
/*
.subNav {
border-bottom: 1px solid @silver;
}
.subNav li {
width: 18%;
}
*/
/**
* Perks
*/
/**
* Banners
*/
/**
* Sign up form
*/
}
.page--affiliates .getStarted {
margin-top: 0;
}
@media (max-width: 767px) {
.page--affiliates .affiliatePerks {
display: none;
}
}
.page--affiliates .perksTable td {
padding: 35px 10px;
font-size: 18px;
}
.page--affiliates .perksTable th {
font-weight: 600;
color: #4d4d4d;
vertical-align: top;
font-size: 24px;
font-size: 1.5rem;
letter-spacing: 2px;
letter-spacing: 0.125rem;
}
.page--affiliates .perksTable th span {
display: block;
font-weight: normal;
letter-spacing: 0px;
color: #666666;
padding-top: 4px;
font-size: 16px;
font-size: 1rem;
}
.page--affiliates .perksTable .planName {
color: #4d4d4d;
padding-right: 0;
}
.page--affiliates .perksTable .planName span {
display: block;
font-size: 14px;
color: #666666;
}
.page--affiliates .bannerList {
padding-top: 60px;
}
.page--affiliates .bannerList img {
margin: 5px;
}
@media (max-width: 767px) {
.page--affiliates .bannerList img {
max-width: 100%;
}
}
.page--affiliates .banner-warning {
margin-top: 10px;
margin-top: 0.625rem;
}
.page--affiliates .affiliate-form .textInput {
background-color: #f4f4f4;
}
.page--affiliates .affiliate-form .textInput::-webkit-input-placeholder {
color: #cccccc;
text-transform: normal;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.page--affiliates .affiliate-form .textInput:-moz-placeholder {
color: #cccccc;
text-transform: normal;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.page--affiliates .affiliate-form .textInput::-moz-placeholder {
color: #cccccc;
text-transform: normal;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.page--affiliates .affiliate-form .textInput:-ms-input-placeholder {
color: #cccccc;
text-transform: normal;
font-weight: normal;
letter-spacing: 1px;
letter-spacing: 0.0625rem;
}
.page--affiliates table thead {
background-color: #f4f4f4;
}
.page--affiliates table tfoot {
background-color: #f4f4f4;
}
.page--affiliates table tfoot td {
font-weight: bold;
}
/**!
* Affiliate landing page
*
* LESS: /_less/pages/affiliate-landing.less
* CSS: /_css/affiliate-landing.css
* PAGE: /landing/*
* =========================================================================== */
.page--affiliate-landing .heroUnit {
position: relative;
}
.page--affiliate-landing h1,
.page--affiliate-landing .h1 {
font-weight: bold;
}
.page--affiliate-landing .strikethrough {
position: relative;
}
.page--affiliate-landing .strikethrough:after {
border-bottom: 5px solid #f26767;
content: "";
left: 0;
position: absolute;
right: 0;
top: 50%;
}
/* General affiliate banner styling */
.affiliate-landing--banner {
position: absolute;
/* top:-@move-up; */
right: 30px;
overflow: hidden;
}
.affiliate-landing--banner .banner-background {
z-index: 200;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.affiliate-landing--banner .banner-background {
width: 200px;
}
}
.affiliate-landing--banner .banner-callout {
position: absolute;
width: 100%;
z-index: 201;
/* .margin-top(@move-up + 45px); */
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.affiliate-landing--banner .banner-callout {
/* .margin-top(@move-up + 20px); */
}
}
.affiliate-landing--banner .banner-callout p {
color: #ffffff;
text-align: center;
line-height: 1;
}
.affiliate-landing--banner .banner-callout p:first-child span {
display: block;
}
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(1) {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(2) {
text-transform: uppercase;
font-size: 45px;
font-size: 2.8125rem;
margin-bottom: 5px;
margin-bottom: 0.3125rem;
}
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(3) {
font-size: 22px;
font-size: 1.375rem;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(1) {
font-size: 20px;
font-size: 1.25rem;
}
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(2) {
font-size: 20px;
font-size: 1.25rem;
}
.affiliate-landing--banner .banner-callout p:first-child span:nth-child(3) {
font-size: 20px;
font-size: 1.25rem;
}
}
.affiliate-landing--banner .banner-callout p:nth-child(2) {
font-size: 22px;
font-size: 1.375rem;
}
.affiliate-landing--banner .banner-callout p:nth-child(2) span {
padding: 5px 7px;
background-color: #955858;
}
.affiliate-landing--banner .banner-logo {
position: absolute;
z-index: 202;
}
@media (max-width: 767px) {
.affiliate-landing--banner {
right: 50%;
margin-right: -100px;
margin-right: -6.25rem;
}
}
/* VPS Comparison pages */
.page--affiliate-vps .heroUnit {
max-height: 400px;
background-image: url(../_img/affiliate-landing/vps/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-md.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-xsm.jpg);
}
}
@media (min-width: 1900px) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-lg.jpg);
}
}
@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-vps .heroUnit {
background-image: url(../_img/affiliate-landing/vps/hero-lg.jpg);
}
}
.page--affiliate-vps .affiliate-landing--banner {
top: -70px;
}
.page--affiliate-vps .affiliate-landing--banner .banner-callout {
margin-top: 115px;
margin-top: 7.1875rem;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.page--affiliate-vps .affiliate-landing--banner .banner-callout {
margin-top: 90px;
margin-top: 5.625rem;
}
}
.page--affiliate-vps header p {
margin-top: 30px;
margin-top: 1.875rem;
}
.page--affiliate-vps .product {
background-color: #ffffff;
}
.page--affiliate-vps .specs .island {
background-color: #282b2d;
}
.page--affiliate-vps .specs .island .productWordmark {
height: 30px;
width: 32px;
}
.page--affiliate-vps .specs .island .productWordmark--dvManaged {
background-position: -385px 0;
}
.page--affiliate-vps .specs .island .productWordmark--dvDeveloper {
background-position: -560px 0;
}
.page--affiliate-vps .hostingPlans .product-action {
float: left;
margin-right: 30px;
margin-right: 1.875rem;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.page--affiliate-vps .hostingPlans .actionCalloutAlt {
float: left;
}
.page--affiliate-vps .hostingPlans .actionCalloutAlt-price:first-child {
margin-bottom: 0;
}
.page--affiliate-vps .hostingPlans .actionCalloutAlt-price:last-child {
color: #1c1c1e;
}
.page--affiliate-vps .compare h2 {
margin-bottom: 0;
}
.page--affiliate-vps .compare .productWordmark {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--affiliate-vps .compare .vpsOption p {
float: left;
}
.page--affiliate-vps .compare .actionCalloutAlt {
float: left;
margin-right: 30px;
margin-right: 1.875rem;
}
.page--affiliate-vps .compare .actionCalloutAlt-price:first-child {
margin-bottom: 0;
}
.page--affiliate-vps .compare .actionCalloutAlt-price:last-child {
color: #1c1c1e;
}
.page--affiliate-cnet .heroUnit {
height: 465px;
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-xsm.jpg);
}
}
@media (min-width: 1900px) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-cnet .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
.page--affiliate-cnet .affiliate-landing--banner .banner-callout {
margin-top: 120px;
margin-top: 7.5rem;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.page--affiliate-cnet .affiliate-landing--banner .banner-callout {
margin-top: 80px;
margin-top: 5rem;
}
}
.page--affiliate-cnet .affiliate-landing--banner .banner-logo {
width: 80px;
height: 80px;
left: 50%;
margin: 30px 0 0 -40px;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.page--affiliate-cnet .affiliate-landing--banner .banner-logo {
width: 40px;
height: 40px;
margin: 15px 0 0 -20px;
}
}
.page--affiliate-cnet .productSpecs {
background-color: #f6f6f6;
color: #666666;
}
.page--affiliate-cnet .productSpecs h1,
.page--affiliate-cnet .productSpecs h2,
.page--affiliate-cnet .productSpecs h3,
.page--affiliate-cnet .productSpecs h4,
.page--affiliate-cnet .productSpecs h5,
.page--affiliate-cnet .productSpecs h6,
.page--affiliate-cnet .productSpecs .h1,
.page--affiliate-cnet .productSpecs .h2,
.page--affiliate-cnet .productSpecs .h3,
.page--affiliate-cnet .productSpecs .h4,
.page--affiliate-cnet .productSpecs .h5,
.page--affiliate-cnet .productSpecs .h6,
.page--affiliate-cnet .productSpecs .heading,
.page--affiliate-cnet .productSpecs .cta,
.page--affiliate-cnet .productSpecs span.cta,
.page--affiliate-cnet .productSpecs strong {
color: #191919;
}
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
height: 400px;
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
@media (min-width: 1200px) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-md.jpg);
}
}
@media (max-width: 767px) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-sm.jpg);
}
}
@media (max-width: 480px) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-xsm.jpg);
}
}
@media (min-width: 1900px) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
@media (min-width: 1200px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
@media (min-width: 768px) and (max-width: 1199px) and (-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-device-pixel-ratio: 1.5) {
.page--affiliate-grid .heroUnit,
.page--affiliate-1-dollar-grid .heroUnit {
background-image: url(../_img/affiliate-landing/cnet/hero-lg.jpg);
}
}
.page--affiliate-grid .affiliate-landing--banner,
.page--affiliate-1-dollar-grid .affiliate-landing--banner {
top: -70px;
}
.page--affiliate-grid .affiliate-landing--banner .banner-callout,
.page--affiliate-1-dollar-grid .affiliate-landing--banner .banner-callout {
margin-top: 115px;
margin-top: 7.1875rem;
}
@media (min-width: 768px) and (max-width: 1095px), (max-width: 767px) {
.page--affiliate-grid .affiliate-landing--banner .banner-callout,
.page--affiliate-1-dollar-grid .affiliate-landing--banner .banner-callout {
margin-top: 90px;
margin-top: 5.625rem;
}
}
.page--affiliate-grid .productSpecs,
.page--affiliate-1-dollar-grid .productSpecs {
background-color: #f6f6f6;
color: #666666;
}
.page--affiliate-grid .productSpecs h1,
.page--affiliate-1-dollar-grid .productSpecs h1,
.page--affiliate-grid .productSpecs h2,
.page--affiliate-1-dollar-grid .productSpecs h2,
.page--affiliate-grid .productSpecs h3,
.page--affiliate-1-dollar-grid .productSpecs h3,
.page--affiliate-grid .productSpecs h4,
.page--affiliate-1-dollar-grid .productSpecs h4,
.page--affiliate-grid .productSpecs h5,
.page--affiliate-1-dollar-grid .productSpecs h5,
.page--affiliate-grid .productSpecs h6,
.page--affiliate-1-dollar-grid .productSpecs h6,
.page--affiliate-grid .productSpecs .h1,
.page--affiliate-1-dollar-grid .productSpecs .h1,
.page--affiliate-grid .productSpecs .h2,
.page--affiliate-1-dollar-grid .productSpecs .h2,
.page--affiliate-grid .productSpecs .h3,
.page--affiliate-1-dollar-grid .productSpecs .h3,
.page--affiliate-grid .productSpecs .h4,
.page--affiliate-1-dollar-grid .productSpecs .h4,
.page--affiliate-grid .productSpecs .h5,
.page--affiliate-1-dollar-grid .productSpecs .h5,
.page--affiliate-grid .productSpecs .h6,
.page--affiliate-1-dollar-grid .productSpecs .h6,
.page--affiliate-grid .productSpecs .heading,
.page--affiliate-1-dollar-grid .productSpecs .heading,
.page--affiliate-grid .productSpecs .cta,
.page--affiliate-1-dollar-grid .productSpecs .cta,
.page--affiliate-grid .productSpecs span.cta,
.page--affiliate-1-dollar-grid .productSpecs span.cta,
.page--affiliate-grid .productSpecs strong,
.page--affiliate-1-dollar-grid .productSpecs strong {
color: #191919;
}
/**!
* CloudTech On-demand
*
* LESS: /_less/pages/cloudtech-on-demand.less
* CSS: /_css/cloudtech-on-demand.css
* PAGE: /cloudtech/on-demand/
* =========================================================================== */
/* ==========================================================================
Cloudtech specific overrides and styles
========================================================================== */
.page--onDemand {
/**
* Get started module at the bottom of page
*/
/**
* Tabs
*/
/**
* accordion content
*/
}
.page--onDemand .getStarted {
margin-top: 60px;
margin-top: 3.75rem;
}
.page--onDemand .getStarted .btn {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--onDemand .tabs {
max-width: 300px;
margin: 0;
margin-top: 90px;
margin-top: 5.625rem;
}
.page--onDemand .tabs a {
background-color: #cccccc;
color: #000000;
padding-top: 20px;
padding-top: 1.25rem;
padding-bottom: 20px;
padding-bottom: 1.25rem;
}
.page--onDemand .tabs a.isActive {
background-color: #1c1c1e;
color: #ffffff;
}
@media (max-width: 767px) {
.page--onDemand .tabs {
margin: 0 auto;
}
}
.page--onDemand .tabContent-tab {
display: block;
}
.page--onDemand .tab--isClosed {
display: none;
}
.page--onDemand .accordion {
margin-bottom: 50px;
}
.page--onDemand .service {
border-left: 2px solid #282b2d;
font-size: 14px;
padding-left: 15px;
max-width: 900px;
color: #ededed;
margin-bottom: 95px;
margin-bottom: 5.9375rem;
margin-left: 40px;
margin-left: 2.5rem;
}
.page--onDemand .service:first-child {
margin-top: 35px;
margin-top: 2.1875rem;
}
.page--onDemand .service-title {
display: block;
padding-bottom: 2px;
}
/**!
* domains.less
*
* Domain page specific modules and styles
* =========================================================================== */
/* ==========================================================================
Domain specific overrides and styles
========================================================================== */
.page--domains {
background-color: #282b2d;
}
.page--domains .domainResultsWrapper {
padding: 30px 0px;
padding: 1.875rem 0px;
padding: 30px 0rem;
padding: 1.875rem 0rem;
margin-bottom: 135px;
margin-bottom: 8.4375rem;
text-align: center;
}
.page--domains .domainSearchContent {
width: 80%;
margin-top: 20px;
margin-top: 1.25rem;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.page--domains .availableTLDs {
font-size: 18px;
font-size: 1.125rem;
}
.page--domains .about {
font-size: 13px;
font-size: 0.8125rem;
}
.page--domains .domainResultList {
text-align: left;
}
.page--domains .searchedDomain {
margin-top: 20px;
margin-top: 1.25rem;
margin-bottom: 20px;
margin-bottom: 1.25rem;
font-size: 26px;
font-size: 1.625rem;
}
.page--domains .resultsDomain {
font-weight: bold;
}
.page--domains .domainResultList {
display: inline-block;
}
.page--domains .domainStatusIcon {
width: 58px;
height: 46px;
}
.page--domains .domainStatusIcon.lush-check-sign {
color: #48e0a4;
}
.page--domains .domainStatusIcon.lush-close {
color: #dc1e16;
}
.page--domains .domainStatusIcon--large {
font-size: 40px;
font-size: 2.5rem;
}
.page--domains .findaDomain--results {
text-align: center;
}
.page--domains .domainResult {
padding: 10px 60px;
padding: 0.625rem 60px;
padding: 10px 3.75rem;
padding: 0.625rem 3.75rem;
border-bottom: 1px solid #999999;
}
.page--domains .domainResult:first-of-type {
border-top: 1px solid #999999;
}
.page--domains .domainResult label {
display: inline;
}
.page--domains .domainResult .domainRadio,
.page--domains .domainResult .domainStatusIcon {
margin-right: 10px;
margin-right: 0.625rem;
}
.page--domains .findaDomain {
overflow: hidden;
padding-top: 60px;
padding-top: 3.75rem;
padding-bottom: 60px;
padding-bottom: 3.75rem;
}
@media (max-width: 1224px) {
.page--domains .findaDomain {
padding-top: 70px;
padding-top: 4.375rem;
padding-bottom: 70px;
padding-bottom: 4.375rem;
}
}
.page--domains .findaDomain .domainSearchBox {
float: none;
width: 100%;
max-width: 900px;
position: relative;
top: -8px;
}
.page--domains .findaDomain .domainSearchBox .icon--search--alt {
position: relative;
top: 10px;
}
.page--domains .findaDomain .domainSearchBox .domainSearch-submit {
position: relative;
vertical-align: middle;
top: -2px;
}
@media (min-width: 1200px) {
.page--domains .findaDomain .domainSearchBox {
float: none;
clear: both;
top: 0;
max-width: 100%;
padding-top: 20px;
}
.page--domains .findaDomain .domainSearchBox .domainSearch-submit .icon {
font-size: 34px;
top: 2px;
}
}
@media (max-width: 767px) {
.page--domains .findaDomain .domainSearchBox .icon--search--alt {
display: none;
}
.page--domains .findaDomain .domainSearchBox .domainSearch-input {
margin: 0;
}
}
.page--domains .findaDomain .domainSearch-input {
display: inline-block;
width: 75%;
max-width: 900px;
color: #1c1c1e;
background-color: #ffffff;
border: 1px solid #b3b3b3;
margin: 0 0 0 10px;
-webkit-transition: all .2s ease-in;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-ms-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.page--domains .findaDomain .domainSearch-input:focus {
border: 1px solid #808080;
}
.page--domains .findaDomain .domainSearch-input:focus::-webkit-input-placeholder {
color: #666666;
text-transform: none;
font-weight: normal;
letter-spacing: 0px;
letter-spacing: 0rem;
}
.page--domains .findaDomain .domainSearch-input:focus:-moz-placeholder {
color: #666666;
text-transform: none;
font-weight: normal;
letter-spacing: 0px;
letter-spacing: 0rem;
}
.page--domains .findaDomain .domainSearch-input:focus::-moz-placeholder {
color: #666666;
text-transform: none;
font-weight: normal;
letter-spacing: 0px;
letter-spacing: 0rem;
}
.page--domains .findaDomain .domainSearch-input:focus:-ms-input-placeholder {
color: #666666;
text-transform: none;
font-weight: normal;
letter-spacing: 0px;
letter-spacing: 0rem;
}
.page--domains .findaDomain .module-title {
float: none;
margin-bottom: 60px;
}
/**!
* Webhosting.less
*
* Webhosting specific modules and styles
* =========================================================================== */
/* ==========================================================================
Webhosting specific overrides and styles
========================================================================== */
.page--webhosting .specs .island {
background-color: #262626;
}
@media (max-width: 767px) {
.page--webhosting .specs .island {
margin-bottom: 30px;
}
}
/**!
* VPS Page
*
* VPS page specific modules and styles
* =========================================================================== */
.page--vps .vpsImg {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.page--vps .vpsOption .vpsOption-heading {
text-transform: uppercase;
font-size: 28px;
font-size: 1.75rem;
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.page--vps .vpsOption .vpsOption-subHeading {
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
/**!
* Help center
*
* LESS: /_less/pages/help-center.less
* CSS: /_css/help-center.css
* PAGE: /help/
* =========================================================================== */
/* ==========================================================================
Cloudtech specific overrides and styles
========================================================================== */
.page--help {
/**
* Help links in right rail.
*/
/**
* Solution center
*/
}
.page--help .helpLinks .heading {
margin: 10px 0 40px;
}
.page--help .helpLinks ul {
margin-left: 35px;
}
.page--help .helpLinks li {
margin: 0;
margin-bottom: 30px;
margin-bottom: 1.875rem;
font-size: 18px;
font-size: 1.125rem;
}
.page--help .helpLinks li:before,
.page--help .helpLinks li:after {
content: " ";
display: table;
}
.page--help .helpLinks li:after {
clear: both;
}
.page--help .helpLinks li span {
margin-right: 15px;
display: inline-block;
width: 45px;
vertical-align: middle;
}
@media (max-width: 767px) {
.page--help .helpLinks {
padding: 30px 0 0;
border-top: 1px solid #e6e6e6;
margin-top: 40px;
}
}
.page--help .solution {
display: block;
position: relative;
margin-bottom: 65px;
margin-bottom: 4.0625rem;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;
}
.page--help .solution:before,
.page--help .solution:after {
content: " ";
display: table;
}
.page--help .solution:after {
clear: both;
}
.page--help .solution:hover {
text-decoration: none;
}
.page--help .solution:hover .solution-media {
outline-color: #a6a6a6;
}
.page--help .solution:before {
content: "\e009";
font-family: 'mt-icons';
position: absolute;
top: 2px;
right: 8px;
font-size: 30px;
font-size: 1.875rem;
}
.page--help .solution-media {
background-color: #ffffff;
color: #191919;
overflow: hidden;
outline: 1px solid #cccccc;
outline-offset: -1px;
display: block;
-webkit-transition: all .1s linear;
-moz-transition: all .1s linear;
-o-transition: all .1s linear;
-ms-transition: all .1s linear;
transition: all .1s linear;
}
.page--help .solution-media img {
width: 100%;
max-width: 100%;
}
.page--help .solution-info {
display: block;
background: #282b2d;
color: #e6e6e6;
font-size: 18px;
padding: 20px;
max-height: 210px;
min-height: 110px;
position: relative;
}
.page--help .solution-info p {
margin: 0;
}
.page--help .solution-desc {
margin-bottom: 10px;
width: 85%;
display: block;
}
/**!
* Our Team page
*
* Our team page styles
* =========================================================================== */
/* ==========================================================================
Our team page specific overrides and styles
========================================================================== */
.page--ourTeam .aboutOurTeam {
padding-top: 90px;
padding-top: 5.625rem;
padding-bottom: 30px;
padding-bottom: 1.875rem;
}
/**!
* Referrals Landing
*
* LESS: /_less/pages/referrals.less
* CSS: /_css/referrals.css
* PAGE: /referalls/
* =========================================================================== */
/* ==========================================================================
Cloudtech specific overrides and styles
========================================================================== */
.page--referrals {
/**
* Banners
*/
}
.page--referrals .subNav {
border-bottom: 1px solid #f4f4f4;
}
.page--referrals .subNav li {
width: 18%;
}
.page--referrals .bannerList {
padding-top: 60px;
}
.page--referrals .bannerList img {
margin: 5px;
}
@media (max-width: 767px) {
.page--referrals .bannerList img {
max-width: 100%;
}
}
.page--referrals .banner-warning {
margin-top: 10px;
margin-top: 0.625rem;
}
.page--referrals .result-link {
display: inline-block;
background: #f2f2f2;
max-width: 100%;
-ms-word-break: break-all;
word-break: break-all;
/* Non standard for webkit */
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding: 10px;
padding: 0.625rem;
font-size: 32px;
font-size: 2rem;
margin-bottom: 30px;
margin-bottom: 1.875rem;
}
.page--referrals .socialSharing li {
margin-right: 30px;
}
/**!
* Product FAQ
*
* FAQ associated with every product page
* =========================================================================== */
@media (max-width: 767px) {
.page--faq .faq-content {
margin-bottom: 40px;
margin-bottom: 2.5rem;
}
}
.page--faq .faq-panel {
display: none;
}
.page--faq .faq-panel.isActive {
display: block;
}
.page--faq .nav--aside span {
text-decoration: none;
display: block;
padding: 5px;
cursor: hand;
cursor: pointer;
-webkit-transition: color 150ms linear;
-moz-transition: color 150ms linear;
-o-transition: color 150ms linear;
-ms-transition: color 150ms linear;
transition: color 150ms linear;
}
.page--faq .nav--aside span:hover {
text-decoration: none;
}
.page--faq .nav--aside span.isActive {
background-color: #e6e6e6;
}
/**!
* Page-specific link colors
*
* =========================================================================== */
.page--faq.page--grid .nav--aside span {
color: #f26767;
}
.page--faq.page--grid .nav--aside span:hover {
color: #ee3838;
}
.page--faq.page--grid .nav--aside span.isActive {
color: #000000;
}
.page--faq.page--dvManaged .nav--aside span {
color: #67a8da;
}
.page--faq.page--dvManaged .nav--aside span:hover {
color: #3e91d0;
}
.page--faq.page--dvManaged .nav--aside span.isActive {
color: #000000;
}
.page--faq.page--dvDeveloper .nav--aside span {
color: #29cbcf;
}
.page--faq.page--dvDeveloper .nav--aside span:hover {
color: #20a1a4;
}
.page--faq.page--dvDeveloper .nav--aside span.isActive {
color: #000000;
}
.page--faq.page--dvEnterprise .nav--aside span {
color: #ffd02b;
}
.page--faq.page--dvEnterprise .nav--aside span:hover {
color: #f7c000;
}
.page--faq.page--dvEnterprise .nav--aside span.isActive {
color: #000000;
}
/**!
* Product legal
*
* legal associated with every product page
* =========================================================================== */
@media (max-width: 767px) {
.page--legal .legal-content {
margin-bottom: 40px;
margin-bottom: 2.5rem;
}
}
.page--legal .legal-content table .eol-info {
background-color: #f4f4f4;
}
.page--legal .legal-content table .eol-info p {
margin-bottom: 0;
}
.page--legal .legal-content table.support thead th {
text-align: center;
}
.page--legal .legal-content table.support thead th:first-child {
text-align: left;
}
.page--legal .legal-content table.support thead th:nth-child(2) {
background-color: #f6fefb;
}
.page--legal .legal-content table.support thead th:last-child {
background-color: #fef4f4;
}
.page--legal .legal-content table.support tr td {
text-align: center;
}
.page--legal .legal-content table.support tr td:first-child {
text-align: left;
}
.page--legal .legal-content table.support tr td:nth-child(2) {
color: #48e0a4;
background-color: #f6fefb;
}
.page--legal .legal-content table.support tr td:last-child {
color: #f26767;
background-color: #fef4f4;
}
.page--legal .legal-content ul.no-bullets {
list-style-type: none;
}
.page--legal .legal-content .list ol {
margin-bottom: 15px;
margin-bottom: 0.9375rem;
}
.page--legal .nav--aside span {
color: #20bc7e;
text-decoration: none;
display: block;
padding: 5px;
cursor: hand;
cursor: pointer;
-webkit-transition: color 150ms linear;
-moz-transition: color 150ms linear;
-o-transition: color 150ms linear;
-ms-transition: color 150ms linear;
transition: color 150ms linear;
}
.page--legal .nav--aside span:hover {
color: #189061;
text-decoration: none;
}
.page--legal .nav--aside span.isActive {
background-color: #e6e6e6;
color: #000000;
}
.page--legal .nav--aside a {
position: relative;
}
.page--legal .nav--aside a i {
position: absolute;
color: #cccccc;
left: -15px;
zoom: 1;
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 150ms linear;
-moz-transition: all 150ms linear;
-o-transition: all 150ms linear;
-ms-transition: all 150ms linear;
transition: all 150ms linear;
}
.page--legal .nav--aside a:hover i {
filter: alpha(opacity=100);
opacity: 1;
}
/* control which nav li is active depending on which legal page the user's on
* =========================================================================== */
.legalLinks .isActive {
background-color: #e6e6e6;
color: #000000;
}
.page--copyright .nav--internal-legal li:first-child a {
background-color: #e6e6e6;
color: #000000;
}
.page--terms-of-service .nav--internal-legal li:nth-child(2) a {
background-color: #e6e6e6;
color: #000000;
}
.page--statement-of-support .nav--internal-legal li:nth-child(4) a {
background-color: #e6e6e6;
color: #000000;
}
.page--privacy-policy .nav--internal-legal li:nth-child(5) a {
background-color: #e6e6e6;
color: #000000;
}
.page--form-guide .nav--internal-legal li:nth-child(7) a {
background-color: #e6e6e6;
color: #000000;
}
.page--end-of-life .nav--internal-legal li:nth-child(9) a {
background-color: #e6e6e6;
color: #000000;
}
.page--legal-transfers .nav--internal-legal-forms li:nth-child(1) a {
background-color: #e6e6e6;
color: #000000;
}
.page--legal-complaint .nav--internal-legal-forms li:nth-child(2) a {
background-color: #e6e6e6;
color: #000000;
}
/**!
* Legal form styling
*
* /legal/complaint/ and /legal/transfers/
*
* The legal complaint form is a modular app
* that requires seperate targeted styling since the markup is significantly
* different than the rest of the legal pages
* =========================================================================== */
.page--legal-form .form-app-container ul {
list-style-type: none;
}
.page--legal-form .form-app-container ul:last-child {
margin: 0;
}
.page--legal-form .form-app-container li {
position: relative;
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--legal-form .form-app-container li:last-child {
margin-bottom: 0;
}
.page--legal-form .form-app-container li input {
/* .margin-right(10px); */
position: absolute;
top: 5px;
left: 0;
}
.page--legal-form .form-app-container li label {
padding-left: 30px;
padding-left: 1.875rem;
width: 100%;
}
.page--legal-form .form-app-container .cta {
margin-top: 30px;
margin-top: 1.875rem;
}
.page--legal-form .form-app-container .btn {
margin-top: 30px;
margin-top: 1.875rem;
}
.page--legal-form .form-app-container .dmca-notice {
margin-top: 30px;
margin-top: 1.875rem;
margin-bottom: 0;
}
.page--legal-form .form-app-container .notice {
color: #f26767;
}
.page--legal-form .form-app-container .notice strong {
color: #f26767;
}
.page--legal-form .form-app-container form p {
/* dirrrrrty */
}
.page--legal-form .form-app-container form p:last-of-type:not(.h3):not(.h4):not(.ignore-layout) {
margin-bottom: 0;
}
.page--legal-form .form-app-container .input-align {
margin-left: 0;
}
.page--legal-form .form-app-container .input-align div,
.page--legal-form .form-app-container .input-align li {
position: relative;
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--legal-form .form-app-container .input-align div:last-child:not(.ignore-layout),
.page--legal-form .form-app-container .input-align li:last-child:not(.ignore-layout) {
margin-bottom: 0;
}
.page--legal-form .form-app-container .input-align div input,
.page--legal-form .form-app-container .input-align li input {
/* .margin-right(10px); */
position: absolute;
top: 5px;
left: 0;
}
.page--legal-form .form-app-container .input-align div label,
.page--legal-form .form-app-container .input-align li label {
padding-left: 30px;
padding-left: 1.875rem;
width: 100%;
}
.page--legal-form .form-app-container .input-align div .ignore-input-align,
.page--legal-form .form-app-container .input-align li .ignore-input-align {
position: static;
margin-top: 10px;
margin-top: 0.625rem;
}
.page--legal-form .form-app-container .error {
margin-bottom: 0;
}
.page--legal-form .form-app-container .signature {
margin-top: 20px;
margin-top: 1.25rem;
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--legal-form .form-app-container iframe {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--legal-form .form-app-container .pre-populate {
margin-bottom: 20px;
margin-bottom: 1.25rem;
}
.page--legal-form .form-app-container .required:after {
content: ' *';
color: #f26767;
font-weight: bold;
font-size: 18px;
font-size: 1.125rem;
}
.page--legal-form .form-app-container .repeat-organize .h4:last-of-type {
margin-top: 20px;
margin-top: 1.25rem;
}
/**!
* Mail Page
*
* Mail page specific modules and styles
* =========================================================================== */
.page--helpMail {
background-color: #282b2d;
}
/**!
* Error pages
*
* LESS: /_less/pages/error-pages.less
* =========================================================================== */
.page--error {
background-color: #282b2d;
}
/**!
* Layout utilities
*
* https://github.com/suitcss/utils-layout/
* ========================================================================== */
/* ==========================================================================
Contain floats
========================================================================== */
/**
* Make an element expand to contain floated children.
* Uses pseudo-elements (micro clearfix).
*
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of the
* element.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.u-clearfix:before,
.u-clearfix:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.u-clearfix:after {
clear: both;
}
/* ==========================================================================
Positioning helpers
========================================================================== */
/**
* Floats
*/
.u-pullLeft {
float: left !important;
}
.u-pullRight {
float: right !important;
}
/**
* Object position helpers.
*
* Float an object left or right, and include some space between the object and
* proceeding objects.
*/
/**
* 1. Remove excess space below images
* 2. Guard against `img {max-width:100%}` hiding this utility's images in
* IE 8.
*/
/* ==========================================================================
Vertical alignment utilities
========================================================================== */
/**
* Depends on an appropriate `display` value.
*/
/* ==========================================================================
Spacing
========================================================================== */
/**
* Depends on an appropriate `display` value.
*/
.u-noMargin {
margin: 0 !important;
}
.u-noMarginBottom {
margin-bottom: 0 !important;
}
.u-noPaddingBottom {
padding-bottom: 0 !important;
}
.u-baseSpacing {
margin-bottom: 30px !important;
}
.u-halfSpacing {
margin-bottom: 15px !important;
}
.u-doubleSpacing {
margin-bottom: 60px !important;
}
.u-isRelative {
position: relative !important;
}
/**!
* Text Utitlities
*
* Helper classes for text effects.
* https://github.com/suitcss/utils-text
* ========================================================================== */
/**
* Word breaking
*
* Break strings when their length exceeds the width of their container.
*/
/**
* Horizontal text alignment
*/
.u-textRight {
text-align: right !important;
}
.u-textLeft {
text-align: left !important;
}
.u-textCenter {
text-align: center !important;
}
/**
* Text transform
*/
.u-textAllcaps {
text-transform: uppercase !important;
}
.u-textNormal {
text-transform: none !important;
}
.u-textLowercase {
text-transform: lowercase !important;
}
.u-textNoSpacing {
letter-spacing: 0 !important;
}
/**!
* Link-specific utilities
* https://github.com/suitcss/utils-link/blob/master/link.css
* =========================================================================== */
/**
* Pseudo-link
*
* Another interactive element, e.g., `button`, styled to look like an anchor.
* Relies on the use of a placeholder anchor (and ideally ARIA).
*
* Example HTML:
*
*
* Button content
*
*/
.u-linkPseudo {
display: inline;
padding: 0;
border: 0;
margin: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
}
.u-linkPseudo:hover,
.u-linkPseudo:focus,
.u-linkPseudo:active {
background: transparent;
color: inherit;
}
/**!
* State Utitlities
*
* Helper classes for various states.
* https://github.com/suitcss/utils-state/
* ========================================================================== */
/**
* Global states.
* JavaScript may add/remove/toggle these classes.
* All other states are component-scoped and use the `is-` prefix.
*/
/**
* Completely remove from the flow and screen readers.
*/
.u-isHidden {
display: none !important;
visibility: hidden !important;
}
/**
* Completely remove from the flow but leave available to screen readers.
*/
.u-isHiddenVisually {
position: absolute !important;
overflow: hidden;
width: 1px;
height: 1px;
padding: 0;
border: 0;
clip: rect(1px, 1px, 1px, 1px);
}
/**
* Control visibility without affecting flow.
*/
.u-isVisible {
visibility: visible !important;
}
.u-isInvisible {
visibility: hidden !important;
}
/**
* Indicate that interaction will result in an (in)action.
*/
/**
* Colors
*/
/**
* Background colors
*/
.u-brandBackground {
background-color: #48e0a4 !important;
}
.u-brandBackground--grid {
background-color: #f26767 !important;
}
.u-brandBackground--dvDeveloper {
background-color: #29cbcf !important;
}
.u-brandBackground--dvManaged {
background-color: #67a8da !important;
}
.u-brandBackground--dvEnterprise {
background-color: #ffd02b !important;
}
@-ms-viewport {
width: device-width;
}
@media screen and (max-width: 400px) {
@-ms-viewport {
width: 320px;
}
}
.u-visible--sm {
display: none !important;
}
tr.u-visible--sm {
display: none !important;
}
th.u-visible--sm,
td.u-visible--sm {
display: none !important;
}
.u-visible--md {
display: none !important;
}
tr.u-visible--md {
display: none !important;
}
th.u-visible--md,
td.u-visible--md {
display: none !important;
}
.u-visible--lg {
display: block !important;
}
tr.u-visible--lg {
display: table-row !important;
}
th.u-visible--lg,
td.u-visible--lg {
display: table-cell !important;
}
.u-hidden--sm {
display: block !important;
}
tr.u-hidden--sm {
display: table-row !important;
}
th.u-hidden--sm,
td.u-hidden--sm {
display: table-cell !important;
}
.u-hidden--md {
display: block !important;
}
tr.u-hidden--md {
display: table-row !important;
}
th.u-hidden--md,
td.u-hidden--md {
display: table-cell !important;
}
.u-hidden--lg {
display: none !important;
}
tr.u-hidden--lg {
display: none !important;
}
th.u-hidden--lg,
td.u-hidden--lg {
display: none !important;
}
@media (min-width: 768px) and (max-width: 1199px) {
.u-visible--sm {
display: none !important;
}
tr.u-visible--sm {
display: none !important;
}
th.u-visible--sm,
td.u-visible--sm {
display: none !important;
}
.u-visible--md {
display: block !important;
}
tr.u-visible--md {
display: table-row !important;
}
th.u-visible--md,
td.u-visible--md {
display: table-cell !important;
}
.u-visible--lg {
display: none !important;
}
tr.u-visible--lg {
display: none !important;
}
th.u-visible--lg,
td.u-visible--lg {
display: none !important;
}
.u-hidden--sm {
display: block !important;
}
tr.u-hidden--sm {
display: table-row !important;
}
th.u-hidden--sm,
td.u-hidden--sm {
display: table-cell !important;
}
.u-hidden--md {
display: none !important;
}
tr.u-hidden--md {
display: none !important;
}
th.u-hidden--md,
td.u-hidden--md {
display: none !important;
}
.u-hidden--lg {
display: block !important;
}
tr.u-hidden--lg {
display: table-row !important;
}
th.u-hidden--lg,
td.u-hidden--lg {
display: table-cell !important;
}
}
@media (max-width: 767px) {
.u-visible--sm {
display: block !important;
}
tr.u-visible--sm {
display: table-row !important;
}
th.u-visible--sm,
td.u-visible--sm {
display: table-cell !important;
}
.u-visible--md {
display: none !important;
}
tr.u-visible--md {
display: none !important;
}
th.u-visible--md,
td.u-visible--md {
display: none !important;
}
.u-visible--lg {
display: none !important;
}
tr.u-visible--lg {
display: none !important;
}
th.u-visible--lg,
td.u-visible--lg {
display: none !important;
}
.u-hidden--sm {
display: none !important;
}
tr.u-hidden--sm {
display: none !important;
}
th.u-hidden--sm,
td.u-hidden--sm {
display: none !important;
}
.u-hidden--md {
display: block !important;
}
tr.u-hidden--md {
display: table-row !important;
}
th.u-hidden--md,
td.u-hidden--md {
display: table-cell !important;
}
.u-hidden--lg {
display: block !important;
}
tr.u-hidden--lg {
display: table-row !important;
}
th.u-hidden--lg,
td.u-hidden--lg {
display: table-cell !important;
}
}