/* ==========================================================================
Reset
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
fieldset {
border: 0;
margin: 0;
padding: 0;
}
textarea {
resize: vertical;
}
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Variables
========================================================================== */
/* ==========================================================================
Mixins
========================================================================== */
/*
.animation (@name, @duration: 300ms, @delay: 0, @ease: ease) {
-webkit-animation: @name @duration @delay @ease;
-moz-animation: @name @duration @delay @ease;
-ms-animation: @name @duration @delay @ease;
}
*/
/* Micro ClearFix Mixin */
.clearfix {
zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
Fonts
========================================================================== */
body {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.fontExtraLight {
font-family: 'Gotham Narrow SSm 2r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 200;
font-style: normal;
}
.fontLight {
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
}
.fontBook {
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
}
.fontMedium {
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
}
.fontBold {
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
}
.fontBlack {
font-family: 'Gotham Narrow SSm 8r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 800;
font-style: normal;
}
.fontWeightNormal {
font-weight: normal !important;
font-style: normal !important;
}
/* ==========================================================================
Icons
========================================================================== */
.svg-icon {
display: inline-block;
width: 1em;
height: 1em;
fill: #ffffff;
}
/* ==========================================================================
General
========================================================================== */
html {
height: 100%;
}
body {
background: #f8f8f8;
min-height: 100%;
overflow-x: hidden;
box-sizing: border-box;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
line-height: 1;
font-size: 1rem;
}
body.bg {
background: url(../img/bg.jpg) no-repeat center center fixed;
background-size: cover;
}
a {
border-bottom: 1px solid #e9eaea;
color: #118e9b;
text-decoration: none;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
a:hover,
a:focus {
border-bottom: 3px solid #e9eaea;
color: #007c85;
text-decoration: none;
}
a:active {
color: #283135;
}
a:visited {
color: #ad7a4f;
}
a:focus {
outline-color: #49f3ff;
}
/* ==========================================================================
Forms
========================================================================== */
form.swanky-form {
position: relative;
}
form.swanky-form p.small {
font-size: 14px;
line-height: 1.2em;
margin: 2em 0;
}
form.swanky-form h4 {
color: #b8bcbd;
font-size: 18px;
font-weight: 700;
padding: 20px 0 0px;
margin-bottom: 14px;
}
form.swanky-form .pin-right {
bottom: 12px;
position: absolute;
right: 0;
}
form.swanky-form .tooltip {
position: relative;
}
form.swanky-form .tooltip span.why-hover {
color: #b8bcbd;
display: inline-block;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 12px;
position: absolute;
right: 5px;
}
form.swanky-form .tooltip span.svg-icon {
display: inline-block;
height: 14px;
padding: 0 0 0 6px;
position: relative;
width: 14px;
top: 1px;
}
form.swanky-form .tooltip span.svg-icon svg {
height: 14px;
width: 14px;
}
form.swanky-form .tooltip span.svg-icon svg path {
fill: #23d48f;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.swanky-form .tooltip:hover span.svg-icon svg path {
fill: #1ba871;
}
form.swanky-form label.txt {
color: #b8bcbd;
display: block;
font-size: 18px;
font-weight: 700;
padding: 20px 0 8px;
}
form.swanky-form .info {
display: block;
font-size: 24px;
margin-right: 20px;
}
form.swanky-form button.btn {
border: none;
cursor: pointer;
font-size: 18px;
font-weight: 700;
overflow: hidden;
margin-top: 20px;
padding: 12px 50px 12px 62px;
position: relative;
text-transform: uppercase;
}
form.swanky-form button.btn svg {
position: absolute;
height: 20px;
width: 20px;
left: 26px;
top: 12px;
}
form.swanky-form button.btn span.button-error {
background: #8b5349;
display: block;
height: 100%;
left: 0;
line-height: 2.5em;
position: absolute;
top: -100px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
width: 100%;
z-index: 1;
}
form.swanky-form button.btn.clicked span.button-error {
top: 0;
}
form.swanky-form button.btn.clicked:focus {
outline: none;
}
form.swanky-form button.btn.clicked:hover {
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.35);
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
form.swanky-form input[type=number]::-webkit-inner-spin-button,
form.swanky-form input[type=number]::-webkit-outer-spin-button {
margin: 0;
-webkit-appearance: none;
}
form.swanky-form input[type=number] {
-moz-appearance: textfield;
}
form.swanky-form div.checkbox-group {
padding: 1px 0 6px;
}
form.swanky-form div.radio-group {
padding: 1px 0 6px;
}
form.swanky-form div.radio-holder {
margin: 20px 0;
padding-left: 40px;
position: relative;
}
form.swanky-form div.radio-holder input[type="radio"] {
display: none;
}
form.swanky-form div.radio-holder label {
color: #b8bcbd;
display: inline-block;
}
form.swanky-form div.radio-holder a.toggle {
background: rgba(0, 0, 0, 0.075);
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
border-radius: 42px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
cursor: pointer;
display: block;
height: 26px;
left: 0;
margin-right: 6px;
position: absolute;
top: -5px;
width: 26px;
}
form.swanky-form div.radio-holder a.toggle span.svg {
background: #1ba871;
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
border-radius: 42px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
height: 26px;
opacity: 0;
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
-o-transform: scale(0.5);
transform: scale(0.5);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 26px;
}
form.swanky-form div.radio-holder a.toggle span.svg svg {
height: 10px;
margin: 8px 0 0 8px;
width: 10px;
}
form.swanky-form div.radio-holder a.toggle span.svg svg polygon {
fill: #fff;
}
form.swanky-form div.radio-holder a.toggle.on span.svg {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
form.swanky-form div.radio-holder a.toggle:hover,
form.swanky-form div.radio-holder a.toggle:focus {
box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.075);
outline: none;
}
form.swanky-form div.radio-holder a.toggle:focus {
-webkit-box-shadow: 0 0 3px #49f3ff;
-moz-box-shadow: 0 0 3px #49f3ff;
box-shadow: 0 0 3px #49f3ff;
}
form.swanky-form div.checkbox-holder {
margin: 20px 0;
padding-left: 60px;
position: relative;
}
form.swanky-form div.checkbox-holder input[type="checkbox"] {
display: none;
}
form.swanky-form div.checkbox-holder label {
color: #b8bcbd;
display: inline-block;
}
form.swanky-form div.checkbox-holder label a {
border-bottom: 2px solid transparent;
}
form.swanky-form div.checkbox-holder.invalid-input label {
color: #8b5349;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
}
form.swanky-form div.checkbox-holder.invalid-input label a {
border-bottom: 2px solid #aa695d;
}
form.swanky-form div.checkbox-holder a.toggle {
background: #aa695d;
-webkit-border-radius: 42px;
-moz-border-radius: 42px;
border-radius: 42px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
cursor: pointer;
display: block;
height: 20px;
left: 0;
margin-right: 6px;
position: absolute;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
top: 0;
width: 42px;
}
form.swanky-form div.checkbox-holder a.toggle span.indicator {
background: #8b5349;
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
height: 26px;
left: -4px;
position: absolute;
top: -3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 26px;
}
form.swanky-form div.checkbox-holder a.toggle span.indicator span {
background: #ffffff;
display: block;
position: absolute;
-webkit-transition: all 0.3s 0s ease-in;
-moz-transition: all 0.3s 0s ease-in;
-ms-transition: all 0.3s 0s ease-in;
-o-transition: all 0.3s 0s ease-in;
transition: all 0.3s 0s ease-in;
}
form.swanky-form div.checkbox-holder a.toggle span.indicator span.row1 {
height: 2px;
left: 8px;
width: 10px;
top: 12px;
}
form.swanky-form div.checkbox-holder a.toggle span.indicator span.row2 {
height: 10px;
left: 12px;
width: 2px;
top: 8px;
}
form.swanky-form div.checkbox-holder a.toggle.on {
background: #23d48f;
}
form.swanky-form div.checkbox-holder a.toggle.on span.indicator {
left: 20px;
background: #1ba871;
}
form.swanky-form div.checkbox-holder a.toggle.on span.indicator span.row1 {
left: 9px;
top: 14px;
width: 5px;
}
form.swanky-form div.checkbox-holder a.toggle.on span.indicator span.row2 {
left: 13px;
top: 6px;
}
form.swanky-form div.checkbox-holder a.toggle:hover,
form.swanky-form div.checkbox-holder a.toggle:focus {
box-shadow: inset 0 2px 0 0 rgba(0, 0, 0, 0.075);
outline: none;
}
form.swanky-form div.checkbox-holder a.toggle:focus span.indicator {
-webkit-box-shadow: 0 0 3px #49f3ff;
-moz-box-shadow: 0 0 3px #49f3ff;
box-shadow: 0 0 3px #49f3ff;
}
form.swanky-form div.input-group label.txt {
font-size: 14px;
padding: 0px 0 8px;
}
form.swanky-form div.input-group div.input-group-item {
display: inline-block;
}
form.swanky-form div.input-group div.input-day {
margin-right: 10px;
width: 50px;
}
form.swanky-form div.input-group div.input-day label.txt {
padding-bottom: 10px;
}
form.swanky-form div.input-group div.input-day input {
text-align: center;
}
form.swanky-form div.input-group div.input-month {
margin-right: 10px;
width: 240px;
}
form.swanky-form div.input-group div.input-month div.input-holder {
-webkit-transform: translateY(-1px);
-moz-transform: translateY(-1px);
-ms-transform: translateY(-1px);
-o-transform: translateY(-1px);
transform: translateY(-1px);
}
form.swanky-form div.input-group div.input-year {
width: 80px;
}
form.swanky-form div.input-group div.input-year input {
text-align: center;
}
form.swanky-form div.input-holder {
background: #ffffff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
height: 46px;
margin-bottom: 24px;
padding: 6px 12px 6px 64px;
position: relative;
-webkit-transition: all 0.075s 0s ease-in;
-moz-transition: all 0.075s 0s ease-in;
-ms-transition: all 0.075s 0s ease-in;
-o-transition: all 0.075s 0s ease-in;
transition: all 0.075s 0s ease-in;
}
form.swanky-form div.input-holder.password1-holder {
margin-bottom: 50px;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
form.swanky-form div.input-holder.no-icon {
padding-left: 12px;
}
form.swanky-form div.input-holder.dropdown select {
background: url(../img/dropdown.svg) no-repeat right;
border: 0;
color: #b8bcbd;
cursor: pointer;
font-size: 24px;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
height: auto;
margin-top: 4px;
width: 100%;
-moz-appearance: none;
-webkit-appearance: none;
}
form.swanky-form div.input-holder.dropdown select:focus {
outline: none;
}
form.swanky-form div.input-holder.dropdown select.default-selected {
color: #0ebac7;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
}
form.swanky-form div.input-holder path,
form.swanky-form div.input-holder polygon,
form.swanky-form div.input-holder circle {
-webkit-transition: all 0.15s 0s ease-in;
-moz-transition: all 0.15s 0s ease-in;
-ms-transition: all 0.15s 0s ease-in;
-o-transition: all 0.15s 0s ease-in;
transition: all 0.15s 0s ease-in;
}
form.swanky-form div.input-holder.unlocked {
box-shadow: 0 0 0 2px #aa695d;
}
form.swanky-form div.input-holder.unlocked label svg path,
form.swanky-form div.input-holder.unlocked label svg polygon,
form.swanky-form div.input-holder.unlocked label svg cirlce {
fill: #aa695d;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.swanky-form div.input-holder.unlocked input::-webkit-input-placeholder {
color: #aa695d;
}
form.swanky-form div.input-holder.unlocked input:-moz-placeholder {
color: #aa695d;
}
form.swanky-form div.input-holder.unlocked input::-moz-placeholder {
color: #aa695d;
}
form.swanky-form div.input-holder.unlocked input:-ms-input-placeholder {
color: #aa695d;
}
form.swanky-form div.input-holder.locked {
box-shadow: 0 0 0 2px #23d48f;
}
form.swanky-form div.input-holder.locked label svg path,
form.swanky-form div.input-holder.locked label svg polygon,
form.swanky-form div.input-holder.locked label svg circle {
fill: #23d48f;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.swanky-form div.input-holder.locked label svg path.clasp {
-webkit-transform: translateX(-5px);
-moz-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
form.swanky-form div.input-holder.locked input::-webkit-input-placeholder {
color: #23d48f;
}
form.swanky-form div.input-holder.locked input:-moz-placeholder {
color: #23d48f;
}
form.swanky-form div.input-holder.locked input::-moz-placeholder {
color: #23d48f;
}
form.swanky-form div.input-holder.locked input:-ms-input-placeholder {
color: #23d48f;
}
form.swanky-form div.input-holder.invalid-input {
box-shadow: 0 0 0 2px #aa695d;
}
form.swanky-form div.input-holder.invalid-input label svg path,
form.swanky-form div.input-holder.invalid-input label svg polygon,
form.swanky-form div.input-holder.invalid-input label svg circle {
fill: #aa695d;
}
form.swanky-form div.input-holder.valid-input {
box-shadow: 0 0 0 2px #23d48f;
}
form.swanky-form div.input-holder.valid-input label svg path,
form.swanky-form div.input-holder.valid-input label svg polygon,
form.swanky-form div.input-holder.valid-input label svg circle {
fill: #23d48f;
}
form.swanky-form div.input-holder.focus {
box-shadow: 0 0 0 2px #118e9b;
}
form.swanky-form div.input-holder.focus.invalid-input {
box-shadow: 0 0 0 2px #8b5349;
}
form.swanky-form div.input-holder.focus.invalid-input label svg path,
form.swanky-form div.input-holder.focus.invalid-input label svg polygon,
form.swanky-form div.input-holder.focus.invalid-input label svg circle {
fill: #8b5349;
}
form.swanky-form div.input-holder.focus.valid-input {
box-shadow: 0 0 0 2px #1ba871;
}
form.swanky-form div.input-holder.focus.valid-input label svg path,
form.swanky-form div.input-holder.focus.valid-input label svg polygon,
form.swanky-form div.input-holder.focus.valid-input label svg circle {
fill: #1ba871;
}
form.swanky-form div.input-holder.focus.unlocked {
box-shadow: 0 0 0 2px #8b5349;
}
form.swanky-form div.input-holder.focus.unlocked label svg path,
form.swanky-form div.input-holder.focus.unlocked label svg polygon,
form.swanky-form div.input-holder.focus.unlocked label svg circle {
fill: #8b5349;
}
form.swanky-form div.input-holder.focus.unlocked input::-webkit-input-placeholder {
color: #8b5349;
}
form.swanky-form div.input-holder.focus.unlocked input:-moz-placeholder {
color: #8b5349;
}
form.swanky-form div.input-holder.focus.unlocked input::-moz-placeholder {
color: #8b5349;
}
form.swanky-form div.input-holder.focus.unlocked input:-ms-input-placeholder {
color: #8b5349;
}
form.swanky-form div.input-holder.focus.locked {
box-shadow: 0 0 0 2px #1ba871;
}
form.swanky-form div.input-holder.focus.locked label svg path,
form.swanky-form div.input-holder.focus.locked label svg polygon,
form.swanky-form div.input-holder.focus.locked label svg circle {
fill: #1ba871;
}
form.swanky-form div.input-holder.focus.locked input::-webkit-input-placeholder {
color: #1ba871;
}
form.swanky-form div.input-holder.focus.locked input:-moz-placeholder {
color: #1ba871;
}
form.swanky-form div.input-holder.focus.locked input::-moz-placeholder {
color: #1ba871;
}
form.swanky-form div.input-holder.focus.locked input:-ms-input-placeholder {
color: #1ba871;
}
form.swanky-form div.input-holder label {
display: block;
left: 10px;
position: absolute;
height: 14px;
top: 5px;
width: 14px;
}
form.swanky-form div.input-holder label svg {
height: 22px;
margin: 12px 0 0 14px;
width: 22px;
}
form.swanky-form div.input-holder label svg path,
form.swanky-form div.input-holder label svg polygon,
form.swanky-form div.input-holder label svg circle {
fill: #0ebac7;
}
form.swanky-form div.input-holder input {
border: 0;
border-color: #49f3ff;
color: #b8bcbd;
display: inline-block;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 24px;
margin-top: 4px;
padding: 4px 0 2px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 100%;
}
form.swanky-form div.input-holder input::-webkit-input-placeholder {
color: #0ebac7;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 24px;
}
form.swanky-form div.input-holder input:-moz-placeholder {
color: #0ebac7;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 24px;
}
form.swanky-form div.input-holder input::-moz-placeholder {
color: #0ebac7;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 24px;
}
form.swanky-form div.input-holder input:-ms-input-placeholder {
color: #0ebac7;
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 24px;
}
input:focus {
outline: 0;
}
form.swanky-form.on-teal label.txt {
color: #ffffff;
}
form.swanky-form.on-teal .tooltip span.why-hover {
color: #ffffff;
}
form.swanky-form.on-teal div.input-holder input {
color: #323b40;
}
form.swanky-form.on-teal div.input-holder.focus {
box-shadow: 0 0 0 2px #49f3ff;
}
form.swanky-form.on-teal div.input-holder.invalid-input {
box-shadow: 0 0 0 2px #e4634d;
}
form.swanky-form.on-teal div.checkbox-holder label {
color: #ffffff;
}
form.swanky-form.on-teal div.checkbox-holder label a {
color: #ffffff;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
form.swanky-form.on-teal div.checkbox-holder label a:hover,
form.swanky-form.on-teal div.checkbox-holder label a:focus {
border-bottom: 3px solid rgba(255, 255, 255, 0.6);
}
form.swanky-form.on-teal div.checkbox-holder.invalid-input label {
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
}
form.swanky-form.on-teal div.checkbox-holder.invalid-input label a {
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
border-bottom: 3px solid rgba(139, 83, 73, 0.5);
}
form.swanky-form.on-teal div.checkbox-holder.invalid-input label a:hover,
form.swanky-form.on-teal div.checkbox-holder.invalid-input label a:focus {
border-bottom: 3px solid rgba(255, 255, 255, 0.6);
}
form.swanky-form.on-teal div.checkbox-holder a.toggle {
background: rgba(255, 255, 255, 0.2);
border: none;
}
.comp-site .contact {
padding: 10px 20px;
}
.comp-site h2 {
color: #414141;
}
.comp-site input[type=submit] {
padding-top: 5px 10px;
margin-top: 10px;
}
.comp-site form {
margin: 0;
}
.comp-site form input,
.comp-site form textarea {
color: #414141;
resize: none;
}
/* ==========================================================================
Buttons
========================================================================== */
a.s4c-flat-btn,
.s4c-flat-btn {
background: rgba(0, 0, 0, 0.035);
border: 0;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #118e9b;
display: inline-block;
padding: 0.5em 1em;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
a.s4c-flat-btn:hover,
.s4c-flat-btn:hover,
a.s4c-flat-btn:focus,
.s4c-flat-btn:focus {
background: rgba(0, 0, 0, 0);
color: #0ebac7;
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 5px 6px rgba(0, 0, 0, 0.15);
-moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 5px 6px rgba(0, 0, 0, 0.15);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 5px 6px rgba(0, 0, 0, 0.15);
-webkit-transform: translate3d(0, -2px, 0);
-moz-transform: translate3d(0, -2px, 0);
-ms-transform: translate3d(0, -2px, 0);
-o-transform: translate3d(0, -2px, 0);
transform: translate3d(0, -2px, 0);
}
a.s4c-btn,
.s4c-btn,
div.s4c-toggle-menu a.s4c-toggle-btn,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
background: #118e9b;
border: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2);
color: #ffffff;
font-size: 16px;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
display: inline-block;
padding: 8px 26px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
vertical-align: top;
z-index: 1;
}
a.s4c-btn.s4c-drop-down-nav,
.s4c-btn.s4c-drop-down-nav,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav {
padding-right: 40px;
}
a.s4c-btn.s4c-drop-down-nav span.arrow,
.s4c-btn.s4c-drop-down-nav span.arrow,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav span.arrow,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow {
height: 8px;
position: absolute;
right: 12px;
top: 12px;
transform: rotate(45deg);
transition: all 0.1s ease-in;
width: 8px;
z-index: 20;
}
a.s4c-btn.s4c-drop-down-nav span.arrow:before,
.s4c-btn.s4c-drop-down-nav span.arrow:before,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav span.arrow:before,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow:before {
background: #fff;
bottom: 0;
content: "";
display: block;
height: 2px;
position: absolute;
transition: all 0.1s ease-in;
width: 100%;
}
a.s4c-btn.s4c-drop-down-nav span.arrow:after,
.s4c-btn.s4c-drop-down-nav span.arrow:after,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav span.arrow:after,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow:after {
background: #fff;
content: "";
display: block;
height: 100%;
position: absolute;
right: 0;
transition: all 0.1s ease-in;
width: 2px;
}
a.s4c-btn.s4c-drop-down-nav.show span.arrow,
.s4c-btn.s4c-drop-down-nav.show span.arrow,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav.show span.arrow,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav.show span.arrow {
top: 16px;
}
a.s4c-btn.s4c-drop-down-nav.show span.arrow:before,
.s4c-btn.s4c-drop-down-nav.show span.arrow:before,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav.show span.arrow:before,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav.show span.arrow:before {
bottom: 6px;
}
a.s4c-btn.s4c-drop-down-nav.show span.arrow:after,
.s4c-btn.s4c-drop-down-nav.show span.arrow:after,
div.s4c-toggle-menu a.s4c-toggle-btn.s4c-drop-down-nav.show span.arrow:after,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav.show span.arrow:after {
right: 6px;
}
a.s4c-btn:hover,
.s4c-btn:hover,
a.s4c-btn:focus,
.s4c-btn:focus,
div.s4c-toggle-menu a.s4c-toggle-btn:hover,
div.s4c-toggle-menu a.s4c-toggle-btn:focus,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:hover,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:focus {
background: #1296a4;
/*
.box-shadow(inset 0 -1px 0 0 rgba(0,0,0,0.2), 0 10px 12px rgba(0,0,0,0.2););
.transform(translate3d(0,-2px,0));
*/
-webkit-box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -1px, 0);
-moz-transform: translate3d(0, -1px, 0);
-ms-transform: translate3d(0, -1px, 0);
-o-transform: translate3d(0, -1px, 0);
transform: translate3d(0, -1px, 0);
}
a.s4c-btn:active,
.s4c-btn:active,
a.s4c-btn.show,
.s4c-btn.show,
div.s4c-toggle-menu a.s4c-toggle-btn:active,
div.s4c-toggle-menu a.s4c-toggle-btn.show,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:active,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.show {
background: #108692;
-webkit-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.2);
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: 0s linear;
-moz-transition: 0s linear;
-ms-transition: 0s linear;
-o-transition: 0s linear;
transition: 0s linear;
}
a.s4c-btn-outline {
background: transparent;
-webkit-box-shadow: inset 0 0 0 1px #118e9b;
-moz-box-shadow: inset 0 0 0 1px #118e9b;
box-shadow: inset 0 0 0 1px #118e9b;
color: #118e9b;
}
a.s4c-btn-outline i.material-icons {
float: left;
margin: -2px 6px 0 -6px;
}
a.s4c-btn-outline i.material-icons svg.svg-icon {
fill: #118e9b;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
a.s4c-btn-outline:hover,
a.s4c-btn-outline:focus {
background: rgba(255, 255, 255, 0.5);
color: #0ebac7;
}
a.s4c-btn-outline:hover i.material-icons svg.svg-icon,
a.s4c-btn-outline:focus i.material-icons svg.svg-icon {
fill: #0ebac7;
}
a.s4c-btn-outline-reversed {
background: transparent;
-webkit-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
-moz-box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
color: #ffffff;
}
a.s4c-btn-outline-reversed i.material-icons {
float: left;
margin: -2px 6px 0 -6px;
}
a.s4c-btn-outline-reversed i.material-icons svg.svg-icon {
fill: #ffffff;
-webkit-transition: 0.2s ease;
-moz-transition: 0.2s ease;
-ms-transition: 0.2s ease;
-o-transition: 0.2s ease;
transition: 0.2s ease;
}
a.s4c-btn-outline-reversed:hover,
a.s4c-btn-outline-reversed:focus {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
a.s4c-btn-outline-reversed:hover i.material-icons svg.svg-icon,
a.s4c-btn-outline-reversed:focus i.material-icons svg.svg-icon {
fill: #ffffff;
}
a.s4c-btn-small {
font-size: 12px;
padding: 7px 20px;
}
a.s4c-btn-icon,
div.s4c-toggle-menu a.s4c-toggle-btn,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
background: #0f818d;
overflow: hidden;
padding-left: 42px;
position: relative;
}
a.s4c-btn-icon:after,
div.s4c-toggle-menu a.s4c-toggle-btn:after,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:after {
background: #118e9b;
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), -2px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), -2px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), -2px 0 0 rgba(0, 0, 0, 0.1);
content: "";
display: block;
height: 100%;
left: 30px;
position: absolute;
top: 0;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-ms-transform: skew(-12deg);
-o-transform: skew(-12deg);
transform: skew(-12deg);
width: 100%;
z-index: 10;
}
a.s4c-btn-icon i.material-icons,
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link i.material-icons {
float: left;
font-size: 20px;
margin-left: -27px;
margin-top: -6px;
position: relative;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
z-index: 5;
}
a.s4c-btn-icon span.label,
div.s4c-toggle-menu a.s4c-toggle-btn span.label,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link span.label {
position: relative;
z-index: 15;
}
a.s4c-btn-icon:hover,
a.s4c-btn-icon:focus,
div.s4c-toggle-menu a.s4c-toggle-btn:hover,
div.s4c-toggle-menu a.s4c-toggle-btn:focus,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:hover,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:focus {
background: #0f818d;
}
a.s4c-btn-icon:hover:after,
a.s4c-btn-icon:focus:after,
div.s4c-toggle-menu a.s4c-toggle-btn:hover:after,
div.s4c-toggle-menu a.s4c-toggle-btn:focus:after,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:hover:after,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:focus:after {
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(0, 0, 0, 0.1);
left: 34px;
}
a.s4c-btn-icon:hover i.material-icons,
a.s4c-btn-icon:focus i.material-icons,
div.s4c-toggle-menu a.s4c-toggle-btn:hover i.material-icons,
div.s4c-toggle-menu a.s4c-toggle-btn:focus i.material-icons,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:hover i.material-icons,
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link:focus i.material-icons {
margin-left: -31px;
}
a.s4c-btn-red {
background: #9c5d52;
}
a.s4c-btn-red:hover,
a.s4c-btn-red:focus {
background: #a36156;
}
a.s4c-btn-red:active {
background: #95594e;
}
a.s4c-btn-icon-red {
background: #92574d;
}
a.s4c-btn-icon-red:hover {
background: #92574d;
}
a.s4c-btn-icon-red:after {
background: #9c5d52;
}
a.s4c-btn-orange {
background: #ad7a4f;
}
a.s4c-btn-orange:hover,
a.s4c-btn-orange:focus {
background: #b17f55;
}
a.s4c-btn-orange:active {
background: #a6754c;
}
a.s4c-btn-icon-orange {
background: #a2734a;
}
a.s4c-btn-icon-orange:hover {
background: #a2734a;
}
a.s4c-btn-icon-orange:after {
background: #ad7a4f;
}
a.s4c-btn-green {
background: #1fbe80;
}
a.s4c-btn-green:hover,
a.s4c-btn-green:focus {
background: #20c786;
}
a.s4c-btn-green:active {
background: #1eb57a;
}
a.s4c-btn-icon-green {
background: #1db177;
}
a.s4c-btn-icon-green:hover {
background: #1db177;
}
a.s4c-btn-icon-green:after {
background: #1fbe80;
}
a.s4c-btn-blue {
background: #1d8ebd;
}
a.s4c-btn-blue:hover,
a.s4c-btn-blue:focus {
background: #1e95c6;
}
a.s4c-btn-blue:active {
background: #1c87b4;
}
a.s4c-btn-icon-blue {
background: #1b84b0;
}
a.s4c-btn-icon-blue:hover {
background: #1b84b0;
}
a.s4c-btn-icon-blue:after {
background: #1d8ebd;
}
a.s4c-btn-dark {
background: #4f585e;
}
a.s4c-btn-dark:hover,
a.s4c-btn-dark:focus {
background: #545d64;
}
a.s4c-btn-dark:active {
background: #4a5358;
}
a.s4c-btn-icon-dark {
background: #485056;
}
a.s4c-btn-icon-dark:hover {
background: #485056;
}
a.s4c-btn-icon-dark:after {
background: #4f585e;
}
a.s4c-icon-link {
color: #118e9b;
font-size: 16px;
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
}
a.s4c-icon-link i.material-icons {
font-size: 18px;
position: relative;
top: 2px;
}
a.s4c-icon-link i.material-icons svg {
fill: #118e9b;
}
a.s4c-icon-link-red {
color: #9c5d52;
}
a.s4c-icon-link-orange {
color: #ad7a4f;
}
a.s4c-icon-link-green {
color: #1fbe80;
}
a.s4c-icon-link-blue {
color: #1d8ebd;
}
a.s4c-icon-link-dark {
color: #4f585e;
}
/* ==========================================================================
Tabs
========================================================================== */
div.tab-container {
*zoom: 1;
zoom: 1;
border-bottom: 1px solid #e9eaea;
margin: 4em 0 0;
}
div.tab-container:before,
div.tab-container:after {
content: "";
display: table;
}
div.tab-container:after {
clear: both;
}
div.tab-container:before,
div.tab-container:after {
content: "";
display: table;
}
div.tab-container:after {
clear: both;
}
div.tab-container div.tab-group {
padding: 0 10px;
}
div.tab-container div.tab-group ul.tabs {
*zoom: 1;
zoom: 1;
margin: 0;
padding: 0;
}
div.tab-container div.tab-group ul.tabs:before,
div.tab-container div.tab-group ul.tabs:after {
content: "";
display: table;
}
div.tab-container div.tab-group ul.tabs:after {
clear: both;
}
div.tab-container div.tab-group ul.tabs:before,
div.tab-container div.tab-group ul.tabs:after {
content: "";
display: table;
}
div.tab-container div.tab-group ul.tabs:after {
clear: both;
}
div.tab-container div.tab-group ul.tabs li.tab {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
div.tab-container div.tab-group ul.tabs li.tab > a {
background: rgba(0, 0, 0, 0.05);
border-bottom: none;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #4f585e;
display: block;
margin: 0 10px 10px 0;
overflow: hidden;
padding: 10px 18px 8px;
position: relative;
text-decoration: none;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
div.tab-container div.tab-group ul.tabs li.tab > a span {
background: #f8f8f8;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #e9eaea;
color: #0ebac7;
display: block;
padding: 9px 17px 9px;
position: absolute;
left: 0;
top: 100%;
}
div.tab-container div.tab-group ul.tabs li.tab > a.on {
background: none;
overflow: visible;
}
div.tab-container div.tab-group ul.tabs li.tab > a.on span {
top: 0;
}
div.tab-container div.tab-group ul.tabs li.tab > a:hover {
background: rgba(0, 0, 0, 0.15);
}
div.tab-container ul.tab-contents-list {
margin: 40px auto 60px;
overflow: hidden;
padding: 0 10px 10px;
}
div.tab-container ul.tab-contents-list li.tab-contents {
list-style: none;
margin: 0;
padding: 10px 0;
}
@media only screen and (min-width: 1000px) {
div.tab-container div.tab-group {
border-bottom: 1px solid #e9eaea;
}
div.tab-container div.tab-group ul.tabs li.tab > a {
background: 0;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
margin: 0 0 -1px 0;
padding: 10px 18px 8px;
}
div.tab-container div.tab-group ul.tabs li.tab > a.on {
overflow: hidden;
}
div.tab-container div.tab-group ul.tabs li.tab > a:hover {
background: none;
box-shadow: inset 0 -1px 0 0 #49f3ff;
}
div.tab-container div.tab-group ul.tabs li.tab > a span {
border-bottom: none;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 0;
-webkit-border-bottom-left-radius: 0;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 0;
-moz-border-radius-bottomleft: 0;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
left: 0;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
}
@media only screen and (min-width: 670px) {
div.tab-container div.tab-group {
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
width: 650px;
}
div.tab-container ul.tab-contents-list {
padding: 0 0 10px 10px;
width: 660px;
}
}
@media only screen and (min-width: 1000px) {
div.tab-container div.tab-group {
width: 980px;
}
div.tab-container ul.tab-contents-list {
width: 990px;
}
}
@media only screen and (min-width: 1330px) {
div.tab-container div.tab-group {
width: 1310px;
}
div.tab-container ul.tab-contents-list {
width: 1320px;
}
}
@media only screen and (min-width: 1660px) {
div.tab-container {
padding-bottom: 2em;
}
div.tab-container div.tab-group {
width: 1640px;
}
div.tab-container ul.tab-contents-list {
width: 1650px;
}
}
@media only screen and (min-width: 1990px) {
div.tab-container {
padding-bottom: 4em;
}
div.tab-container div.tab-group {
width: 1970px;
}
div.tab-container ul.tab-contents-list {
width: 1980px;
}
}
/*
@media only screen and (min-width: 2320px) {
div.tab-container {
div.tab-group {
width: 2300px;
}
ul.tab-contents-list {
width: 2310px;
}
}
}
*/
/* ==========================================================================
Header
========================================================================== */
div.nav-now-next {
display: none;
}
a.s4c-logo-toggle {
border: 0;
display: none;
height: 85px;
left: 0;
position: absolute;
top: 0;
width: 101px;
z-index: 10;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
a.s4c-logo-toggle img {
height: 85px;
width: 101px;
}
body.show-nav {
overflow: hidden;
}
body.show-nav div.s4c-toggle-menu {
position: fixed;
}
body.show-nav .s4c-logo-toggle {
-moz-filter: opacity(0.9) brightness(0.4);
-webkit-filter: opacity(0.9) brightness(0.4);
filter: opacity(0.9) brightness(0.4);
}
.no-ad {
margin-top: 0 !important;
top: 0 !important;
}
div.s4c-toggle-menu {
display: none;
min-height: 60px;
position: absolute;
right: 0;
top: 0;
width: 60px;
z-index: 100100;
}
div.s4c-toggle-menu a {
border: none;
}
div.s4c-toggle-menu a.s4c-toggle-btn {
position: absolute;
right: 20px;
top: 12px;
-webkit-transition: 0.2s linear;
-moz-transition: 0.2s linear;
-ms-transition: 0.2s linear;
-o-transition: 0.2s linear;
transition: 0.2s linear;
}
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons {
display: block;
height: 12px;
margin: 4px 0 0 -25px;
position: relative;
top: -2px;
width: 14px;
}
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row {
background: #fff;
display: block;
height: 2px;
position: absolute;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 14px;
}
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row1 {
top: 0;
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
}
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row2 {
top: 5px;
}
div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row3 {
top: 10px;
-webkit-transform-origin: left;
-moz-transform-origin: left;
-ms-transform-origin: left;
-o-transform-origin: left;
transform-origin: left;
}
div.s4c-toggle-menu a.s4c-toggle-btn:hover i.material-icons {
margin-left: -29px;
}
div.s4c-toggle-menu a.s4c-toggle-btn span.label {
display: block;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.s4c-toggle-menu.sticky {
position: fixed;
/*
ul.s4c-main-menu {
left: 60px;
}
*/
}
div.s4c-toggle-menu.sticky a.s4c-toggle-btn {
padding: 7px 1px 7px 39px;
width: 1px;
}
div.s4c-toggle-menu.sticky a.s4c-toggle-btn:after {
-webkit-transform: translate3d(100px, 0, 0);
-moz-transform: translate3d(100px, 0, 0);
-ms-transform: translate3d(100px, 0, 0);
-o-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
div.s4c-toggle-menu.sticky a.s4c-toggle-btn span.label {
-webkit-transform: translate3d(200px, 0, 0);
-moz-transform: translate3d(200px, 0, 0);
-ms-transform: translate3d(200px, 0, 0);
-o-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
}
div.s4c-toggle-menu.sticky a.s4c-toggle-btn:hover i.material-icons,
div.s4c-toggle-menu.sticky a.s4c-toggle-btn:focus i.material-icons {
margin-left: -25px;
}
/*html:lang(en) {*/
header.s4c-header ul.s4c-main-menu li.s4c-menu-item5 {
right: 130px;
}
/*}*/
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
display: none;
}
input[type="search"]::-webkit-search-decoration::-webkit-input-placeholder,
input[type="search"]::-webkit-search-cancel-button::-webkit-input-placeholder,
input[type="search"]::-webkit-search-results-button::-webkit-input-placeholder,
input[type="search"]::-webkit-search-results-decoration::-webkit-input-placeholder {
font-size: 16px;
}
header.s4c-header {
position: absolute;
width: 100%;
z-index: 1000;
}
header.s4c-header h3.s4c-nav-title {
display: none;
}
header.s4c-header a {
border: none;
}
header.s4c-header a.s4c-logo img {
height: 100px;
width: 119px;
/*max-width: 119px;*/
}
header.s4c-header ul.s4c-main-menu {
margin: 0;
padding: 0;
position: absolute;
left: 140px;
right: 20px;
top: 34px;
}
header.s4c-header ul.s4c-main-menu li {
display: inline;
float: left;
list-style: none;
margin: 0 0 0 6px;
padding: 0;
line-height: 1.3;
position: relative;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item5 {
padding-right: 12px;
position: absolute;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item5:after {
background: rgba(255, 255, 255, 0.25);
bottom: -4px;
content: "";
position: absolute;
right: 0;
top: -1px;
width: 1px;
height: 44px;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item6 {
position: absolute;
right: 0;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link {
/*background: fadeout(@red, 40);*/
/*background: rgba(156, 93, 82, 0.75);*/
background: #283135;
color: #ffffff;
padding-left: 26px;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link:after {
display: none;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link:hover,
header.s4c-header ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link:focus {
background: #323b40;
}
header.s4c-header form.s4c-search {
background: #ffffff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #e9eaea;
box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.05);
display: inline-block;
height: 34px;
padding: 0 4px 0 12px;
position: relative;
}
header.s4c-header form.s4c-search > button {
background: none;
border: 0;
padding: 7px 6px 5px;
}
header.s4c-header form.s4c-search .svg-icon {
font-size: 18px;
fill: #118e9b;
/*margin-top: 6px;*/
}
header.s4c-header form.s4c-search.focus {
border: 1px solid #0ebac7;
box-shadow: 0 2px 0 0 rgba(0, 124, 133, 0.1);
}
header.s4c-header form.s4c-search label {
display: block;
left: 9px;
position: absolute;
height: 14px;
top: 6px;
width: 14px;
}
header.s4c-header form.s4c-search label i.material-icons {
color: #118e9b;
font-size: 20px;
}
header.s4c-header form.s4c-search input {
border: 0;
border-color: #49f3ff;
color: #323b40;
display: inline-block;
vertical-align: top;
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
font-size: 16px;
margin-top: 6px;
padding: 1px 0 2px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 120px;
-webkit-appearance: none;
}
header.s4c-header form.s4c-search input::-webkit-input-placeholder {
color: #118e9b;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
header.s4c-header form.s4c-search input:-moz-placeholder {
color: #118e9b;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
header.s4c-header form.s4c-search input::-moz-placeholder {
color: #118e9b;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
header.s4c-header form.s4c-search input:-ms-input-placeholder {
color: #118e9b;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
font-size: 16px;
}
header.s4c-header form.s4c-search input:focus {
outline: 0;
width: 200px;
}
@media only screen and (min-width: 1075px) {
header.s4c-header.sticky {
-webkit-animation: fly-down 0.2s 0.3s 1 forwards;
-moz-animation: fly-down 0.2s 0.3s 1 forwards;
-o-animation: fly-down 0.2s 0.3s 1 forwards;
animation: fly-down 0.2s 0.3s 1 forwards;
background: rgba(248, 248, 248, 0.95);
-webkit-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
position: fixed;
top: 0;
-webkit-transform: translate3d(0, -100%, 0);
-moz-transform: translate3d(0, -100%, 0);
-ms-transform: translate3d(0, -100%, 0);
-o-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
width: 100%;
}
header.s4c-header.sticky svg.svg-icon {
fill: #118e9b;
}
header.s4c-header.sticky a.s4c-logo img {
height: 60px;
width: 71px;
/*max-width: 71px;*/
}
header.s4c-header.sticky nav ul.s4c-main-menu {
top: 18px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li {
margin-left: 24px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link {
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
color: #118e9b;
padding: 0;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link i.material-icons {
margin: -7px 6px 0 0;
top: 1px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link:after {
display: none;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav {
padding-right: 18px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow {
right: 5px;
top: 5px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow:before,
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow:after {
background: #118e9b;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav.show:after {
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.2) !important;
opacity: .2;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link.s4c-drop-down-nav.show span.arrow {
right: 2px;
top: 10px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link:focus,
header.s4c-header.sticky nav ul.s4c-main-menu > li a.s4c-menu-item-link:hover {
background: transparent;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item5 a.s4c-menu-item-link {
color: #9c5d52;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item5 a.s4c-menu-item-link svg.svg-icon {
fill: #9c5d52;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item5 {
padding-right: 17px;
right: 86px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item5:after {
background: rgba(0, 0, 0, 0.1);
top: -11px;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item6 a.s4c-menu-item-link {
color: #283135;
font-weight: bold;
}
header.s4c-header.sticky nav ul.s4c-main-menu > li.s4c-menu-item6 a.s4c-menu-item-link:hover {
color: #323b40;
}
header.s4c-header.sticky form.s4c-search {
height: 30px;
top: -4px;
}
header.s4c-header.sticky form.s4c-search label i.material-icons {
font-size: 18px;
}
header.s4c-header.sticky form.s4c-search input {
margin-top: 4px;
}
}
div.context-menu {
position: absolute;
top: 50px;
left: 0;
background: #f8f8f8;
border-radius: 4px;
-webkit-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 0 10px 12px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 0 10px 12px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 0 10px 12px rgba(0, 0, 0, 0.2);
display: none;
font-weight: 400;
font-size: 14px;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
width: 200px;
}
div.context-menu:after {
/*
bottom: 100%;
border: solid transparent;
border-bottom-color: @offWhite;
border-color: rgba(0, 0, 0, 0);
border-width: 8px;
content: " ";
height: 0;
left: 28px;
margin-left: -8px;
pointer-events: none;
position: absolute;
width: 0;
*/
background: #f8f8f8;
-webkit-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 10px 10px 12px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 10px 10px 12px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1), 10px 10px 12px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
content: "";
display: block;
height: 18px;
left: 18px;
position: absolute;
top: -6px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
width: 18px;
}
div.context-menu > ul {
border-radius: 4px;
margin: 0;
overflow: hidden;
padding: 0;
}
div.context-menu > ul > li {
list-style: none;
margin: 0 0 2px 0;
padding: 0;
}
div.context-menu > ul > li > a:hover span {
opacity: 1;
}
div.context-menu > ul > li > a:hover span.arrow {
margin-left: -26px;
}
div.context-menu > ul > li > a {
background: #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.025);
color: #118e9b;
display: block;
margin-bottom: 1px;
padding: 12px 20px 11px 48px;
position: relative;
text-decoration: none;
width: 100%;
font-size: 14px;
}
div.context-menu > ul > li > a span {
opacity: 0.8;
position: relative;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
z-index: 10;
}
div.context-menu > ul > li > a:after {
background: #008a93;
box-shadow: inset 220px 0 0 rgba(0, 0, 0, 0.25);
content: "";
height: 100%;
left: 220px;
position: absolute;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-ms-transform: skew(-12deg);
-o-transform: skew(-12deg);
transform: skew(-12deg);
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
top: 0;
width: 100%;
z-index: 5;
}
div.context-menu > ul > li > a span.arrow {
border-right: 1px solid rgba(0, 0, 0, 0.25);
border-top: 1px solid rgba(0, 0, 0, 0.25);
display: block;
float: left;
height: 8px;
margin: 2px 0 0 -32px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
width: 8px;
}
div.context-menu > ul > li:first-child a {
padding-top: 14px;
}
div.context-menu > ul > li:last-child a {
margin-bottom: 0;
padding-bottom: 14px;
}
div.context-menu > ul li:nth-child(1) a {
z-index: 20;
}
div.context-menu > ul li:nth-child(2) a {
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-ms-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
z-index: 19;
}
div.context-menu > ul li:nth-child(3) a {
-webkit-transition: all 0.1s 0.025s ease-in;
-moz-transition: all 0.1s 0.025s ease-in;
-ms-transition: all 0.1s 0.025s ease-in;
-o-transition: all 0.1s 0.025s ease-in;
transition: all 0.1s 0.025s ease-in;
z-index: 18;
}
div.context-menu > ul li:nth-child(4) a {
-webkit-transition: all 0.1s 0.05s ease-in;
-moz-transition: all 0.1s 0.05s ease-in;
-ms-transition: all 0.1s 0.05s ease-in;
-o-transition: all 0.1s 0.05s ease-in;
transition: all 0.1s 0.05s ease-in;
z-index: 17;
}
div.context-menu > ul li:nth-child(5) a {
-webkit-transition: all 0.1s 0.075s ease-in;
-moz-transition: all 0.1s 0.075s ease-in;
-ms-transition: all 0.1s 0.075s ease-in;
-o-transition: all 0.1s 0.075s ease-in;
transition: all 0.1s 0.075s ease-in;
z-index: 16;
}
div.context-menu.hide {
box-shadow: 0 1px 0px 0 rgba(0, 0, 0, 0.1);
opacity: 0;
-webkit-transform: translateY(-24px);
-moz-transform: translateY(-24px);
-ms-transform: translateY(-24px);
-o-transform: translateY(-24px);
transform: translateY(-24px);
}
div.context-menu.hide ul li:nth-child(2) a {
margin-top: -52px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-ms-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
div.context-menu.hide ul li:nth-child(3) a {
margin-top: -52px;
-webkit-transition: all 0.3s 0.1s ease-in;
-moz-transition: all 0.3s 0.1s ease-in;
-ms-transition: all 0.3s 0.1s ease-in;
-o-transition: all 0.3s 0.1s ease-in;
transition: all 0.3s 0.1s ease-in;
}
div.context-menu.hide ul li:nth-child(4) a {
margin-top: -52px;
-webkit-transition: all 0.3s 0.2s ease-in;
-moz-transition: all 0.3s 0.2s ease-in;
-ms-transition: all 0.3s 0.2s ease-in;
-o-transition: all 0.3s 0.2s ease-in;
transition: all 0.3s 0.2s ease-in;
}
div.context-menu.hide ul li:nth-child(5) a {
margin-top: -56px;
-webkit-transition: all 0.3s 0.3s ease-in;
-moz-transition: all 0.3s 0.3s ease-in;
-ms-transition: all 0.3s 0.3s ease-in;
-o-transition: all 0.3s 0.3s ease-in;
transition: all 0.3s 0.3s ease-in;
}
div.s4c-main-overlay {
background: #323b40;
display: none;
height: 100%;
min-width: 400px;
position: fixed;
width: 150%;
top: 0;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-ms-transition: 0.4s ease;
-o-transition: 0.4s ease;
transition: 0.4s ease;
-webkit-transform: skew(-12deg) translate3d(100%, 0, 0);
-moz-transform: skew(-12deg) translate3d(100%, 0, 0);
-ms-transform: skew(-12deg) translate3d(100%, 0, 0);
-o-transform: skew(-12deg) translate3d(100%, 0, 0);
transform: skew(-12deg) translate3d(100%, 0, 0);
z-index: 88888;
}
@media only screen and (max-width: 1074px) {
header.s4c-header ul.s4c-main-menu li.s4c-menu-item5 {
right: 0;
}
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav span.arrow {
top: 19px;
}
header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link.s4c-drop-down-nav.show span.arrow {
top: 20px;
}
.show-nav div.s4c-toggle-menu a.s4c-toggle-btn {
background: #2fa7b0;
}
body {
padding-top: 0 !important;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item2 {
-webkit-transition: all 0.1s 0s ease-in;
-moz-transition: all 0.1s 0s ease-in;
-ms-transition: all 0.1s 0s ease-in;
-o-transition: all 0.1s 0s ease-in;
transition: all 0.1s 0s ease-in;
}
header.s4c-header ul.s4c-main-menu li.s4c-menu-item2.show {
margin: 0 0 24px;
}
header.s4c-header {
position: fixed;
min-height: 100%;
right: 0;
top: 0;
-webkit-transform: translate3d(200%, 0, 0);
-moz-transform: translate3d(200%, 0, 0);
-ms-transform: translate3d(200%, 0, 0);
-o-transform: translate3d(200%, 0, 0);
transform: translate3d(200%, 0, 0);
-webkit-transition: 0.3s 0.15s ease;
-moz-transition: 0.3s 0.15s ease;
-ms-transition: 0.3s 0.15s ease;
-o-transition: 0.3s 0.15s ease;
transition: 0.3s 0.15s ease;
width: 280px;
z-index: 100003;
}
header.s4c-header:after {
background: #e9eaea;
-webkit-box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);
-moz-box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);
box-shadow: -8px 0 20px rgba(0, 0, 0, 0.25);
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
transform-origin: top;
-webkit-transform: skew(-12deg) translate3d(10%, 0, 0);
-moz-transform: skew(-12deg) translate3d(10%, 0, 0);
-ms-transform: skew(-12deg) translate3d(10%, 0, 0);
-o-transform: skew(-12deg) translate3d(10%, 0, 0);
transform: skew(-12deg) translate3d(10%, 0, 0);
-webkit-transition: 0.3s 0.15s ease;
-moz-transition: 0.3s 0.15s ease;
-ms-transition: 0.3s 0.15s ease;
-o-transition: 0.3s 0.15s ease;
transition: 0.3s 0.15s ease;
top: 0;
width: 250%;
z-index: 10;
}
header.s4c-header nav {
min-height: 100%;
overflow-y: scroll;
position: absolute;
right: 0;
top: 0;
-webkit-transform: translate3d(100%, 0, 0);
-moz-transform: translate3d(100%, 0, 0);
-ms-transform: translate3d(100%, 0, 0);
-o-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0);
-webkit-transition: 0.3s 0s ease;
-moz-transition: 0.3s 0s ease;
-ms-transition: 0.3s 0s ease;
-o-transition: 0.3s 0s ease;
transition: 0.3s 0s ease;
width: 280px;
z-index: 20;
}
header.s4c-header nav div.nav-now-next {
display: block;
position: absolute;
right: 20px;
top: 400px;
width: 225px;
-webkit-transition: all 0.2s 0.2s ease-in;
-moz-transition: all 0.2s 0.2s ease-in;
-ms-transition: all 0.2s 0.2s ease-in;
-o-transition: all 0.2s 0.2s ease-in;
transition: all 0.2s 0.2s ease-in;
}
header.s4c-header nav div.nav-now-next.hide {
opacity: 0;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
header.s4c-header nav div.nav-now-next > div {
font-weight: 800;
line-height: 1em;
padding-left: 120px;
}
header.s4c-header nav div.nav-now-next > div:first-child {
margin: 30px 0 40px;
}
header.s4c-header nav div.nav-now-next > div img {
float: left;
margin-left: -120px;
width: 110px;
}
header.s4c-header nav div.nav-now-next > div h3 {
color: #118e9b;
font-size: 11px;
margin: 0;
padding: 0;
}
header.s4c-header nav div.nav-now-next > div h4 {
color: #323b40;
letter-spacing: -0.05em;
margin: 0;
padding: 0;
font-size: 20px;
}
header.s4c-header nav div.nav-now-next > div span {
color: #94989b;
font-size: 11px;
}
header.s4c-header nav div.nav-now-next div:last-child {
opacity: 0.6;
}
header.s4c-header nav a.s4c-logo {
display: none;
}
header.s4c-header nav ul.s4c-main-menu {
left: auto;
padding-top: 142px;
right: 21px;
width: 225px;
top: 0;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 {
padding-right: 0;
top: 64px;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item6 {
right: 63px;
text-align: right;
top: 14px;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item6:after {
background: #dcdede;
bottom: 0;
content: "";
position: absolute;
top: -2px;
width: 1px;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link {
background: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
font-weight: 500;
display: inline-block;
font-weight: 600;
padding: 6px 14px;
top: 0;
width: auto;
color: #283135;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item6 a.s4c-menu-item-link:hover {
color: #fff;
}
header.s4c-header nav ul.s4c-main-menu > li {
display: block;
float: none;
margin-bottom: 4px;
margin-left: 0;
}
header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link {
background: #1c969f;
font-weight: 500;
padding: 14px 26px 14px 42px;
width: 157px;
}
header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link:after {
background: #2fa7b0;
}
header.s4c-header nav ul.s4c-main-menu > li a.s4c-drop-down-nav {
width: 143px;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 a.s4c-menu-item-link {
background: transparent;
color: #9c5d52;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 a.s4c-menu-item-link:hover {
background: transparent;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 a.s4c-menu-item-link:active {
background: transparent;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 a.s4c-menu-item-link i.material-icons {
border-color: #9c5d52;
}
header.s4c-header nav ul.s4c-main-menu li.s4c-menu-item5 a.s4c-menu-item-link i.material-icons svg.svg-icon {
fill: #9c5d52;
}
header.s4c-header nav form.s4c-search {
border: none;
-webkit-box-shadow: 0 0 0 1px #dcdede;
-moz-box-shadow: 0 0 0 1px #dcdede;
box-shadow: 0 0 0 1px #dcdede;
height: auto;
margin-top: 8px;
padding: 0 3px 4px 8px;
width: 225px;
box-sizing: border-box;
}
header.s4c-header nav form.s4c-search input {
padding: 10px 0 7px 6px;
width: 168px;
margin: 0 auto;
color: #111;
}
header.s4c-header nav form.s4c-search input ::-webkit-input-placeholder {
font-size: 16px;
}
header.s4c-header nav form.s4c-search input:focus {
width: 168px;
}
header.s4c-header nav form.s4c-search i.material-icons {
position: relative;
top: 2px;
}
header.s4c-header div.context-menu {
background: #e9eaea;
-webkit-box-shadow: 0 0 0 2px #dcdede;
-moz-box-shadow: 0 0 0 2px #dcdede;
box-shadow: 0 0 0 2px #dcdede;
left: 0;
padding: 0;
position: relative;
top: 12px;
width: 100%;
}
header.s4c-header div.context-menu:after,
header.s4c-header div.context-menu:before {
bottom: 100%;
left: 22px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
header.s4c-header div.context-menu:after {
border-color: rgba(233, 234, 234, 0);
border-bottom-color: #e9eaea;
border-width: 8px;
margin-left: -8px;
background: transparent;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
top: auto;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
header.s4c-header div.context-menu:before {
border-color: rgba(219, 221, 221, 0);
border-bottom-color: #dbdddd;
border-width: 11px;
margin-left: -11px;
}
header.s4c-header div.context-menu > ul {
/*
margin: 12px 0 24px;
padding: 10px 0;
*/
margin: 0;
padding: 0;
}
header.s4c-header div.context-menu > ul > li {
display: block;
float: none;
}
header.s4c-header div.context-menu > ul > li:first-child {
padding-top: 8px;
}
header.s4c-header div.context-menu > ul > li:last-child {
padding-bottom: 8px;
}
header.s4c-header div.context-menu > ul > li > a {
background: transparent;
border: none;
padding: 4% 20% 4% 2%;
width: 78%;
}
header.s4c-header div.context-menu > ul > li > a:after {
display: none;
}
header.s4c-header div.context-menu > ul > li > a span {
font-size: 14px;
}
header.s4c-header div.context-menu > ul > li > a span.arrow {
position: absolute;
right: 19px;
top: 11px;
}
header.s4c-header div.context-menu > ul > li:hover span.arrow {
right: 15px;
}
header.s4c-header div.context-menu.hide {
top: 0;
}
header.s4c-header div.context-menu.hide > ul {
/*
margin: 0;
padding: 0;
*/
}
a.s4c-logo-toggle {
display: block;
}
div.s4c-toggle-menu {
display: block;
}
div.s4c-main-overlay {
display: block;
}
body.show-nav {
/*
a.s4c-logo-toggle,
a.s4c-logo-toggle.sticky {
top: 0 !important;
.transform(translate3d(-100%, 0, 0));
}
*/
}
body.show-nav header.s4c-header {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: 0.3s 0s ease;
-moz-transition: 0.3s 0s ease;
-ms-transition: 0.3s 0s ease;
-o-transition: 0.3s 0s ease;
transition: 0.3s 0s ease;
/*
nav ul.s4c-main-menu {
.transform(translate3d(0,0,0));
}
*/
}
body.show-nav header.s4c-header:after {
-webkit-transform: skew(-12deg) translate3d(0, 0, 0);
-moz-transform: skew(-12deg) translate3d(0, 0, 0);
-ms-transform: skew(-12deg) translate3d(0, 0, 0);
-o-transform: skew(-12deg) translate3d(0, 0, 0);
transform: skew(-12deg) translate3d(0, 0, 0);
-webkit-transition: 0.3s 0s ease;
-moz-transition: 0.3s 0s ease;
-ms-transition: 0.3s 0s ease;
-o-transition: 0.3s 0s ease;
transition: 0.3s 0s ease;
}
body.show-nav header.s4c-header nav {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: 0.3s 0.2s ease;
-moz-transition: 0.3s 0.2s ease;
-ms-transition: 0.3s 0.2s ease;
-o-transition: 0.3s 0.2s ease;
transition: 0.3s 0.2s ease;
}
body.show-nav div.s4c-main-overlay {
background: rgba(50, 59, 64, 0.9);
-webkit-transform: skew(-12deg) translate3d(-25%, 0, 0);
-moz-transform: skew(-12deg) translate3d(-25%, 0, 0);
-ms-transform: skew(-12deg) translate3d(-25%, 0, 0);
-o-transform: skew(-12deg) translate3d(-25%, 0, 0);
transform: skew(-12deg) translate3d(-25%, 0, 0);
}
body.show-nav div.s4c-main-container {
height: 100% !important;
overflow: hidden;
z-index: 0;
position: fixed;
top: 0 !important;
width: 100%;
}
body.show-nav div.s4c-toggle-menu {
top: 0 !important;
position: fixed;
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn {
padding: 8px 1px 8px 39px;
width: 1px;
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn:after {
-webkit-transform: translate3d(100px, 0, 0);
-moz-transform: translate3d(100px, 0, 0);
-ms-transform: translate3d(100px, 0, 0);
-o-transform: translate3d(100px, 0, 0);
transform: translate3d(100px, 0, 0);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn span.label {
-webkit-transform: translate3d(200px, 0, 0);
-moz-transform: translate3d(200px, 0, 0);
-ms-transform: translate3d(200px, 0, 0);
-o-transform: translate3d(200px, 0, 0);
transform: translate3d(200px, 0, 0);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons {
-webkit-transform: translate3d(2px, 0, 0);
-moz-transform: translate3d(2px, 0, 0);
-ms-transform: translate3d(2px, 0, 0);
-o-transform: translate3d(2px, 0, 0);
transform: translate3d(2px, 0, 0);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row {
background: #ffffff;
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row1 {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row2 {
-webkit-transform: scale3d(0, 1, 0);
-moz-transform: scale3d(0, 1, 0);
-ms-transform: scale3d(0, 1, 0);
-o-transform: scale3d(0, 1, 0);
transform: scale3d(0, 1, 0);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row3 {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn:hover i.material-icons,
body.show-nav div.s4c-toggle-menu a.s4c-toggle-btn:focus i.material-icons {
margin-left: -25px;
}
}
/*@media only screen and (max-width: 782px) {
a.s4c-logo-toggle {
margin-top: 0 !important;
}
.s4c-toggle-menu{
top: 0 !important;
}*/
@media only screen and (max-width: 525px) {
a.s4c-logo-toggle img {
height: 60px;
width: 71px;
}
}
@-webkit-keyframes fly-down {
0% {
-webkit-transform: translate3d(0, -100%, 0);
}
100% {
-webkit-transform: translate3d(0, 0, 0);
}
}
@-moz-keyframes fly-down {
0% {
-moz-transform: translate3d(0, -100%, 0);
}
100% {
-moz-transform: translate3d(0, 0, 0);
}
}
@-o-keyframes fly-down {
0% {
-o-transform: translate3d(0, -100%, 0);
}
100% {
-o-transform: translate3d(0, 0, 0);
}
}
@keyframes fly-down {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
.s4cNavToggle {
display: none !important;
}
.s4cSection4 header.s4c-header form.s4c-search {
margin-bottom: 0;
}
.s4cSection4 header.s4c-header form.s4c-search > button {
float: right;
padding: 2px 8px 5px;
}
.s4cSection4 header.s4c-header form.s4c-search .svg-icon {
/*margin-top: -10px;*/
}
/* ==========================================================================
Large Slider
========================================================================== */
div.s4c-large-slider {
background: #283135;
height: 75%;
overflow: hidden;
position: relative;
}
div.s4c-large-slider div.s4c-large-slider-controls {
bottom: 50px;
position: absolute;
left: 100px;
z-index: 30;
}
div.s4c-large-slider div.s4c-large-slider-controls a.control {
line-height: 1em;
padding: 18px;
}
div.s4c-large-slider div.s4c-large-slider-controls a.control i.play-icon {
display: none;
}
div.s4c-large-slider div.s4c-large-slider-controls a.control svg {
height: 28px;
width: 28px;
}
div.s4c-large-slider div.s4c-large-slider-controls a.control.paused i.play-icon {
display: block;
}
div.s4c-large-slider div.s4c-large-slider-controls a.control.paused i.pause-icon {
display: none;
}
div.s4c-large-slider ul.s4c-pips {
bottom: 10px;
left: 50%;
margin: 0;
padding: 0;
position: absolute;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
-o-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 30;
}
div.s4c-large-slider ul.s4c-pips li.s4c-pip {
display: inline-block;
margin: 10px;
padding: 0;
}
div.s4c-large-slider ul.s4c-pips li.s4c-pip a {
background: #118e9b;
border-bottom: none;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: block;
height: 20px;
padding: 0;
width: 20px;
}
div.s4c-large-slider ul.s4c-pips li.s4c-pip.on a {
background: #49f3ff;
}
div.s4c-large-slider div.big-swipe {
background: #118e9b;
height: 100%;
position: absolute;
right: -135%;
top: 0;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-ms-transform: skew(-12deg);
-o-transform: skew(-12deg);
transform: skew(-12deg);
width: 110%;
z-index: 10;
}
div.s4c-large-slider div.big-swipe.left {
-webkit-animation: left-big-swipe 1.4s 1 forwards;
-moz-animation: left-big-swipe 1.4s 1 forwards;
-o-animation: left-big-swipe 1.4s 1 forwards;
animation: left-big-swipe 1.4s 1 forwards;
}
div.s4c-large-slider div.big-swipe.right {
-webkit-animation: right-big-swipe 1.4s 1 forwards;
-moz-animation: right-big-swipe 1.4s 1 forwards;
-o-animation: right-big-swipe 1.4s 1 forwards;
animation: right-big-swipe 1.4s 1 forwards;
}
div.s4c-large-slider ul.s4c-large-slider-container {
height: 100%;
left: 0;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 5;
}
div.s4c-large-slider ul.s4c-large-slider-container.left li.s4c-large-slide div.slide-content {
-webkit-animation: left-slide 0.8s 1 forwards;
-moz-animation: left-slide 0.8s 1 forwards;
-o-animation: left-slide 0.8s 1 forwards;
animation: left-slide 0.8s 1 forwards;
}
div.s4c-large-slider ul.s4c-large-slider-container.left li.s4c-large-slide:before {
-webkit-animation: left-slide-slash 0.8s 1 forwards;
-moz-animation: left-slide-slash 0.8s 1 forwards;
-o-animation: left-slide-slash 0.8s 1 forwards;
animation: left-slide-slash 0.8s 1 forwards;
}
div.s4c-large-slider ul.s4c-large-slider-container.right li.s4c-large-slide div.slide-content {
-webkit-animation: right-slide 0.8s 1 alternate backwards;
-moz-animation: right-slide 0.8s 1 alternate backwards;
-o-animation: right-slide 0.8s 1 alternate backwards;
animation: right-slide 0.8s 1 alternate backwards;
}
div.s4c-large-slider ul.s4c-large-slider-container.right li.s4c-large-slide:before {
-webkit-animation: right-slide-slash 0.8s 1 alternate backwards;
-moz-animation: right-slide-slash 0.8s 1 alternate backwards;
-o-animation: right-slide-slash 0.8s 1 alternate backwards;
animation: right-slide-slash 0.8s 1 alternate backwards;
}
div.s4c-large-slider li.s4c-large-slide {
height: 100%;
float: left;
overflow: hidden;
position: relative;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
width: 100%;
/*
div.big-icon {
top: 50%;
left: 50%;
margin: -300px 0 0 -300px;
position: absolute;
z-index: 10;
i.material-icons {
svg.svg-icon {
height: 600px;
width: 600px;
}
}
}
*/
}
div.s4c-large-slider li.s4c-large-slide:after {
background: url(../img/large-slide-gradient.png) repeat-y right;
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.s4c-large-slider li.s4c-large-slide:before {
background: rgba(255, 255, 255, 0.1);
content: "";
display: block;
right: 640px;
position: absolute;
height: 100%;
-webkit-transform-origin: bottom;
-moz-transform-origin: bottom;
-ms-transform-origin: bottom;
-o-transform-origin: bottom;
transform-origin: bottom;
-webkit-transform: skew(-12deg);
-moz-transform: skew(-12deg);
-ms-transform: skew(-12deg);
-o-transform: skew(-12deg);
transform: skew(-12deg);
width: 1px;
z-index: 15;
}
div.s4c-large-slider li.s4c-large-slide div.image-background {
background-position: top center;
background-size: cover;
height: 100%;
opacity: 0.9;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content {
bottom: 50px;
color: #fff;
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
right: 100px;
position: absolute;
width: 320px;
z-index: 20;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 {
font-size: 36px;
letter-spacing: -0.05em;
line-height: 38px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 span.sub {
display: block;
font-size: 24px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content p {
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
/*font-size: 18px;*/
line-height: 1.3;
margin-bottom: 0.25em;
max-width: 21em;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content div.actions {
padding-top: 1em;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content div.actions a.s4c-btn,
div.s4c-large-slider li.s4c-large-slide div.slide-content div.actions div.s4c-toggle-menu a.s4c-toggle-btn,
div.s4c-large-slider li.s4c-large-slide div.slide-content div.actions header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
margin-bottom: 4px;
padding: 10px 26px 10px 42px;
}
.show-nav div.s4c-large-slider {
z-index: -1;
}
@media (max-width: 1310px) {
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 {
font-size: 30px;
line-height: 1.2;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 span.sub {
font-size: 18px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content p {
font-size: 14px;
line-height: 1.2;
}
div.s4c-large-slider li.s4c-large-slide:before {
right: 600px;
}
}
@media (max-width: 1074px) {
div.s4c-large-slider ul.s4c-pips li.s4c-pip a {
height: 16px;
width: 16px;
}
div.s4c-large-slider div.s4c-large-slider-controls {
left: 40px;
}
div.s4c-large-slider li.s4c-large-slide:before {
right: 500px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content {
right: 40px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 {
font-size: 30px;
line-height: 36px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content h2 span.sub {
font-size: 20px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content p {
font-size: 16px;
}
}
@media (max-width: 768px) {
div.s4c-large-slider ul.s4c-pips li.s4c-pip a {
height: 12px;
width: 12px;
}
}
@media (max-width: 580px) {
div.s4c-large-slider div.s4c-large-slider-controls {
bottom: 24px;
left: 50%;
margin-left: -160px;
width: 320px;
}
div.s4c-large-slider ul.s4c-pips {
display: none;
}
div.s4c-large-slider li.s4c-large-slide:before {
left: -60px;
right: auto;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content {
bottom: 108px;
left: 50%;
margin-left: -160px;
right: auto;
}
}
@media (max-width: 360px) {
div.s4c-large-slider {
padding-top: 60px;
}
div.s4c-large-slider div.s4c-large-slider-controls {
left: 0;
margin: 0 20px;
width: 280px;
}
div.s4c-large-slider li.s4c-large-slide {
/*padding-top: 80px;*/
}
div.s4c-large-slider li.s4c-large-slide div.slide-content {
left: 0;
margin: 0 20px;
width: 280px;
}
div.s4c-large-slider li.s4c-large-slide div.slide-content p {
display: none;
}
}
@media (max-height: 500px) {
div.s4c-large-slider div.slide-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* go left */
@-webkit-keyframes left-slide {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
25% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
75% {
opacity: 0;
-webkit-transform: translateX(100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes left-slide {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
25% {
opacity: 0;
-moz-transform: translateX(-100%);
}
75% {
opacity: 0;
-moz-transform: translateX(100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes left-slide {
0% {
opacity: 1;
-o-transform: translateX(0);
}
25% {
opacity: 0;
-o-transform: translateX(-100%);
}
75% {
opacity: 0;
-o-transform: translateX(100%);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes left-slide {
0% {
opacity: 1;
transform: translateX(0);
}
25% {
opacity: 0;
transform: translateX(-100%);
}
75% {
opacity: 0;
transform: translateX(100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes left-slide-slash {
0% {
opacity: 1;
-webkit-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-webkit-transform: translateX(-900px) skew(-12deg);
}
75% {
opacity: 0;
-webkit-transform: translateX(900px) skew(-12deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0) skew(-12deg);
}
}
@-moz-keyframes left-slide-slash {
0% {
opacity: 1;
-moz-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-moz-transform: translateX(-900px) skew(-12deg);
}
75% {
opacity: 0;
-moz-transform: translateX(900px) skew(-12deg);
}
100% {
opacity: 1;
-moz-transform: translateX(0) skew(-12deg);
}
}
@-o-keyframes left-slide-slash {
0% {
opacity: 1;
-o-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-o-transform: translateX(-900px) skew(-12deg);
}
75% {
opacity: 0;
-o-transform: translateX(900px) skew(-12deg);
}
100% {
opacity: 1;
-o-transform: translateX(0) skew(-12deg);
}
}
@keyframes left-slide-slash {
0% {
opacity: 1;
transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
transform: translateX(-900px) skew(-12deg);
}
75% {
opacity: 0;
transform: translateX(900px) skew(-12deg);
}
100% {
opacity: 1;
transform: translateX(0) skew(-12deg);
}
}
@-webkit-keyframes left-big-swipe {
0% {
-webkit-box-shadow: none;
right: -60%;
width: 50%;
}
100% {
-webkit-box-shadow: none;
right: 120%;
-webkit-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@-moz-keyframes left-big-swipe {
0% {
-moz-box-shadow: none;
right: -60%;
width: 50%;
}
100% {
-moz-box-shadow: none;
right: 120%;
-moz-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@-o-keyframes left-big-swipe {
0% {
-o-box-shadow: none;
right: -60%;
width: 50%;
}
100% {
-o-box-shadow: none;
right: 120%;
-o-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@keyframes left-big-swipe {
0% {
box-shadow: none;
right: -60%;
width: 50%;
}
100% {
box-shadow: none;
right: 120%;
transform: translateX(0) skew(-12deg);
width: 100%;
}
}
/* go right */
@-webkit-keyframes right-slide {
0% {
opacity: 1;
-webkit-transform: translateX(0);
}
25% {
opacity: 0;
-webkit-transform: translateX(100%);
}
75% {
opacity: 0;
-webkit-transform: translateX(-100%);
}
100% {
opacity: 1;
-webkit-transform: translateX(0);
}
}
@-moz-keyframes right-slide {
0% {
opacity: 1;
-moz-transform: translateX(0);
}
25% {
opacity: 0;
-moz-transform: translateX(100%);
}
75% {
opacity: 0;
-moz-transform: translateX(-100%);
}
100% {
opacity: 1;
-moz-transform: translateX(0);
}
}
@-o-keyframes right-slide {
0% {
opacity: 1;
-o-transform: translateX(0);
}
25% {
opacity: 0;
-o-transform: translateX(100%);
}
75% {
opacity: 0;
-o-transform: translateX(-100%);
}
100% {
opacity: 1;
-o-transform: translateX(0);
}
}
@keyframes right-slide {
0% {
opacity: 1;
transform: translateX(0);
}
25% {
opacity: 0;
transform: translateX(100%);
}
75% {
opacity: 0;
transform: translateX(-100%);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@-webkit-keyframes right-slide-slash {
0% {
opacity: 1;
-webkit-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-webkit-transform: translateX(900px) skew(-12deg);
}
75% {
opacity: 0;
-webkit-transform: translateX(-900px) skew(-12deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0) skew(-12deg);
}
}
@-moz-keyframes right-slide-slash {
0% {
opacity: 1;
-moz-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-moz-transform: translateX(900px) skew(-12deg);
}
75% {
opacity: 0;
-moz-transform: translateX(-900px) skew(-12deg);
}
100% {
opacity: 1;
-moz-transform: translateX(0) skew(-12deg);
}
}
@-o-keyframes right-slide-slash {
0% {
opacity: 1;
-o-transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
-o-transform: translateX(900px) skew(-12deg);
}
75% {
opacity: 0;
-o-transform: translateX(-900px) skew(-12deg);
}
100% {
opacity: 1;
-o-transform: translateX(0) skew(-12deg);
}
}
@keyframes right-slide-slash {
0% {
opacity: 1;
transform: translateX(0) skew(-12deg);
}
25% {
opacity: 0;
transform: translateX(900px) skew(-12deg);
}
75% {
opacity: 0;
transform: translateX(-900px) skew(-12deg);
}
100% {
opacity: 1;
transform: translateX(0) skew(-12deg);
}
}
@-webkit-keyframes right-big-swipe {
0% {
-webkit-box-shadow: none;
left: -60%;
width: 50%;
}
100% {
-webkit-box-shadow: none;
left: 120%;
-webkit-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@-moz-keyframes right-big-swipe {
0% {
-moz-box-shadow: none;
left: -60%;
width: 50%;
}
100% {
-moz-box-shadow: none;
left: 120%;
-moz-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@-o-keyframes right-big-swipe {
0% {
-o-box-shadow: none;
left: -60%;
width: 50%;
}
100% {
-o-box-shadow: none;
left: 120%;
-o-transform: translateX(0) skew(-12deg);
width: 100%;
}
}
@keyframes right-big-swipe {
0% {
box-shadow: none;
left: -60%;
width: 50%;
}
100% {
box-shadow: none;
left: 120%;
transform: translateX(0) skew(-12deg);
width: 100%;
}
}
/* ==========================================================================
Card styles
========================================================================== */
.card-grid div.card {
*zoom: 1;
zoom: 1;
max-width: none;
}
.card-grid div.card:before,
.card-grid div.card:after {
content: "";
display: table;
}
.card-grid div.card:after {
clear: both;
}
.card-grid div.card:before,
.card-grid div.card:after {
content: "";
display: table;
}
.card-grid div.card:after {
clear: both;
}
.card-grid div.card h2.title {
font-size: 18px;
max-width: 88%;
padding: 10px 0 0 10px;
color: #4f585e;
}
.card-grid div.card h2.title:hover {
color: #323b40;
}
.card-grid div.card span.sub-title {
font-size: 14px;
max-width: 88%;
padding-left: 10px;
}
.card-grid div.card img {
box-shadow: 1px 0 0 rgba(0, 0, 0, 0.05);
float: left;
max-width: 40%;
position: relative;
z-index: 0;
}
.card-grid div.card div.content {
float: left;
padding: 0;
width: 60%;
}
.card-grid div.card div.content div.title {
bottom: 10px;
padding-left: 0;
position: absolute;
width: 60%;
}
.card-grid div.card div.content div.title i.material-icons {
display: none;
}
div.card {
background: #fff;
float: left;
letter-spacing: -0.1em;
margin: 0 10px 10px 0;
max-width: 320px;
position: relative;
width: 100%;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.card.w2 div.content {
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.card.w2:hover div.content {
-webkit-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
}
div.card div.content {
padding: 15px;
}
div.card div.copy {
color: #b8bcbd;
font-size: 16px;
padding: 1em 0;
}
div.card div.copy p {
font-size: 16px;
}
div.card div.vertical-list span {
color: #e9eaea;
}
div.card.watch div.copy {
padding-left: 34px;
}
div.card.watch div.title {
padding-left: 34px;
}
div.card.watch div.title i.material-icons {
display: block;
float: left;
height: 30px;
margin: -3px 0 0 -36px;
width: 30px;
}
div.card.watch div.title i.material-icons svg {
fill: #118e9b;
height: 30px;
width: 30px;
}
div.card.more {
background: rgba(0, 0, 0, 0.025);
}
div.card.more div.content {
color: #4f585e;
font-weight: 400;
font-size: 18px;
line-height: 1.4em;
padding: 15px;
}
div.card.more div.content strong {
font-weight: 600;
}
div.card.more div.content i.material-icons {
bottom: 15px;
position: absolute;
right: 15px;
}
div.card.more div.content i.material-icons svg {
fill: #0ebac7;
height: 36px;
width: 36px;
}
div.card.mpu > div {
padding: 10px;
}
div.card.link-list div.title {
padding-bottom: 15px;
}
div.card.link-list ul.links {
margin: 0;
padding: 0;
}
div.card.link-list ul.links li {
border: 1px solid rgba(0, 0, 0, 0.035);
list-style: none;
margin: 0 0 10px;
height: 66px;
overflow: hidden;
padding: 0;
position: relative;
}
div.card.link-list ul.links li a {
color: #4f585e;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.card.link-list ul.links li a:hover {
color: #118e9b;
}
div.card.link-list ul.links li h3 {
max-width: 98%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.card.link-list ul.links li img {
float: left;
margin-right: 15px;
width: 118px;
}
div.card.link-list ul.links li.loading {
height: 300px;
border: 0;
}
div.card h2.title {
color: #118e9b;
font-size: 26px;
font-weight: 700;
line-height: 1em;
margin: 0;
max-width: 98%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.card span.sub-title {
color: #94989b;
display: block;
font-size: 18px;
font-weight: 700;
line-height: 1em;
padding-top: 0.25em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
div.card img {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
max-width: 100%;
}
.one-link .card-inner a {
float: left;
width: 100%;
height: 370px;
border-bottom: 0;
}
@media (max-width: 669px) {
.one-link .card-inner a {
width: 100%;
height: 21.25vw;
}
}
.one-link.more .card-inner a {
height: auto;
}
div.card:hover {
-webkit-box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
box-shadow: inset 0 -1px 0 -4px rgba(0, 0, 0, 0.2), 0 10px 12px -4px rgba(0, 0, 0, 0.2), inset 0 -1px 0 0 rgba(0, 0, 0, 0.05), inset 0 -2px 0 0 rgba(0, 0, 0, 0.1);
-webkit-transform: translate3d(0, -1px, 0);
-moz-transform: translate3d(0, -1px, 0);
-ms-transform: translate3d(0, -1px, 0);
-o-transform: translate3d(0, -1px, 0);
transform: translate3d(0, -1px, 0);
}
@media only screen and (max-width: 669px) {
.card-grid div.sgorio-news div.content {
width: 100%;
}
}
@media only screen and (min-width: 560px) {
.card-grid div.card h2.title {
font-size: 20px;
}
.card-grid div.card span.sub-title {
font-size: 16px;
}
.card-grid div.card div.content div.title i.material-icons {
display: block;
margin: -30px 0 0 6px;
}
.card-grid div.card.more div.content {
font-size: 24px;
font-weight: 200;
}
.card-grid div.card.more div.content strong {
font-weight: 400;
}
}
@media only screen and (min-width: 670px) {
.card-grid div.card {
max-width: 320px;
}
.card-grid div.card h2.title {
/*font-size: 26px;*/
max-width: 98%;
padding: 0;
min-height: 24px;
}
.card-grid div.card span.sub-title {
font-size: 18px;
max-width: 98%;
padding: 0;
}
.card-grid div.card img {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
float: none;
max-width: 100%;
width: 100%;
}
.card-grid div.card div.content {
float: none;
padding: 15px;
width: auto;
}
.card-grid div.card div.content div.title {
bottom: auto;
position: static;
width: auto;
}
.card-grid div.card div.content div.title i.material-icons {
display: block;
margin: -3px 0 0 -36px;
}
.card-grid div.card.watch div.content div.title {
padding-left: 34px;
}
.card-grid div.card.more div.content {
padding-right: 72px;
}
.card-grid div.card.more div.content i.material-icons svg {
fill: #0ebac7;
height: 42px;
width: 42px;
}
div.card div.card-inner {
height: 0;
padding-bottom: 115.625%;
position: relative;
}
div.card.w2 {
max-width: 650px;
}
div.card.w2 div.card-inner {
padding-bottom: 56.923%;
}
div.card.w2 div.content {
background: #fff;
bottom: 0;
left: 0;
min-height: 80px;
position: absolute;
right: 0;
}
}
/*
// card ish
div.card-watch {
border-radius: 4px;
cursor: pointer;
display: block;
height: 0;
max-width: 440px;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
.transition;
z-index: 1;
&:hover {
.box-shadow(inset 0 -1px 0 0 rgba(0,0,0,0.2), 0 10px 12px rgba(0,0,0,0.2););
.transform(translate3d(0,-2px,0));
&:after {
// background: rgba(255,255,255,0.05);
}
div.watch-label span.on {
.transform(skew(-12deg) translateX(0px));
.transition;
em.text {
.transform(skew(12deg) translateX(0px));
.transition;
}
}
}
&:active {
.box-shadow(0 0 0 rgba(0,0,0,0));
.transition;
&:after {
box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.35);
}
}
div.watch-label {
left: -5px;
position: absolute;
z-index: 5;
span {
display: block;
font-size: 16px;
font-weight: 700;
letter-spacing: -0.0em;
margin-top: 12px;
padding: 6px 14px;
position: absolute;
white-space: nowrap;
&.off {
color: rgba(255,255,255,0.3);
}
&.on {
background: @white;
color: @teal;
content: "";
display: block;
overflow: hidden;
position: absolute;
top: 0;
.transform(skew(-12deg) translateX(-140px));
.transition;
z-index: -1;
em.text {
display: inline-block;
font-style: normal;
.transform(skew(12deg) translateX(140px));
.transition;
}
}
}
}
div.title {
bottom: 8px;
color: @white;
left: 80px;
letter-spacing: -0.0em;
position: absolute;
right: 15px;
z-index: 10;
span.icon {
display: block;
height: 60px;
float: left;
margin-left: -70px;
margin-top: -18px;
width: 60px;
i.material-icons {
font-size: 60px;
}
}
span.series {
display: block;
font-size: 24px;
font-weight: 700;
line-height: 1em;
margin-top: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span.episode {
font-size: 18px;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
img {
border-radius: 4px;
left: 0;
max-width: 100%;
position: absolute;
top: 0;
z-index: 0;
}
&:after {
background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.45) 100%);
background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.45) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.45) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#73000000',GradientType=0 );
.box-shadow(inset 0 -1px 0 0 rgba(0,0,0,0.3));
content: "";
display: block;
height: 100%;
position: absolute;
.transition;
width: 100%;
z-index: 1;
}
}
// card grid
.card-grid {
.clearfix;
.card {
float: left;
margin: 10px 0 0 0;
width: 320px;
}
}
//.home-container .card-grid .card {
// margin: auto;
//}
@media (min-width: 810px) {
.home-container .card-grid .card {
margin: 0 10px 10px 0;
width: 315px;
}
.home-container .card-grid .card:nth-child(even) {
margin-right: 0;
}
}
@media (min-width: 1075px) {
.home-container .card-grid .card {
width: 313px;
}
.home-container .card-grid .card:nth-child(even) {
margin-right: 10px;
}
.home-container .card-grid .card:nth-child(3n+3) {
margin-right: 0;
}
}
@media (min-width: 1468px) {
.home-container .card-grid .card {
width: 322px;
}
.home-container .card-grid .card:nth-child(3n+3) {
margin-right: 10px;
}
.home-container .card-grid .card:nth-child(4n+4) {
margin-right: 0;
}
}
*/
/* ==========================================================================
iOS Slider
========================================================================== */
/* ==========================================================================
Listings / Homepage
========================================================================== */
/*
@tealMid: #0ebac7;
@white: #ffffff;
*/
.now-next {
position: relative;
height: 400px;
background-position: center 25%;
background-size: cover;
background-repeat: no-repeat;
background: #000;
}
.now-next .now-wrapper,
.now-next .next-wrapper {
position: relative;
height: 400px;
background-position: 0 25%;
background-size: cover;
background-repeat: no-repeat;
transition: 1s ease-in;
}
.now-next .next-wrapper {
position: absolute;
top: 0;
opacity: 0;
transition: 0.8s ease-out;
transform: translateX(1800px);
}
.now-next .fadeIn {
position: relative;
opacity: 1;
transform: translateX(0);
}
.now-next .fadeOut {
transition: 0.8s ease-out;
transform: translateX(-1800px);
opacity: 0;
animation: abs 1s forwards;
}
@keyframes abs {
100% {
position: absolute;
}
}
.now-next .feature-overlay {
background: rgba(255, 255, 255, 0.95);
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
width: 100%;
height: 400px;
position: absolute;
top: 0;
z-index: 1;
}
.now-next .now,
.now-next .next {
position: absolute;
bottom: 0;
color: #fff;
padding: 40px 15px;
z-index: 2;
}
.now-next .now a,
.now-next .next a {
color: #49f3ff;
border-bottom: none;
font-weight: bold;
font-size: 24px;
transition: 0.25s ease-in-out;
}
.now-next .now a:hover,
.now-next .next a:hover {
color: #00a3af;
cursor: pointer;
}
.now-next .now a:hover svg,
.now-next .next a:hover svg {
fill: #00a3af;
}
.now-next .now a svg,
.now-next .next a svg {
fill: #49f3ff;
margin-top: -3px;
margin-right: 3px;
transition: 0.25s ease-in-out;
}
.now-next .now a svg:hover,
.now-next .next a svg:hover {
color: #00a3af;
cursor: pointer;
}
.now-next .now h2,
.now-next .next h2,
.now-next .now p,
.now-next .next p {
margin: 0;
}
.now-next .now .progress,
.now-next .next .progress {
width: 100%;
background: rgba(255, 255, 255, 0.5);
height: 4px;
overflow: hidden;
margin: 10px 0;
}
.now-next .now .progress .progress-overlay,
.now-next .next .progress .progress-overlay {
width: 0%;
height: 4px;
background: #fff;
transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.listings-wrapper {
font-size: 0;
background: #f5f5f5;
}
#listings {
font-size: 16px;
background: #f8f8f8;
width: 75%;
padding-left: 25%;
padding-top: 30px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
@media only screen and (max-width: 1000px) {
#listings {
padding-left: 20px;
}
}
@media only screen and (max-width: 768px) {
#listings {
padding: 0 20px;
width: 100%;
}
}
#listings h4 {
padding: 5px 35px 5px 20px;
cursor: pointer;
background: #fff;
margin: 0;
}
#listings h4:after {
content: "";
position: absolute;
right: 16px;
margin-top: 12px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #0ebac7;
border-top: none;
}
#listings h4 a {
border-bottom: none;
color: #0ebac7;
}
#listings #listings-nav,
#listings .listingdetails {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 4px solid #f8f8f8;
}
#listings #listings-nav ul,
#listings .listingdetails ul {
padding: 0;
}
#listings #listings-nav li,
#listings .listingdetails li {
display: inline-block;
vertical-align: top;
text-transform: capitalize;
padding: 5px;
}
#listings #listings-nav li a,
#listings .listingdetails li a,
#listings #listings-nav li abbr[title],
#listings .listingdetails li abbr[title] {
border-bottom: none;
color: #4f585e;
transition: 0.25s ease-in-out;
}
#listings #listings-nav li a:hover,
#listings .listingdetails li a:hover,
#listings #listings-nav li abbr[title]:hover,
#listings .listingdetails li abbr[title]:hover {
color: #0ebac7;
cursor: pointer;
}
#listings #listings-nav li .active,
#listings .listingdetails li .active {
border: 2px solid #e9eaea;
border-bottom: 5px solid #f8f8f8;
border-radius: 5px 5px 0 0;
padding: 5px 10px;
}
#listings #listings-nav li .active abbr,
#listings .listingdetails li .active abbr {
color: #0ebac7;
}
#listings #listings-nav {
margin-bottom: 30px;
border-bottom: 2px solid #e9eaea;
}
#listings .listingdetails {
max-height: 2000px;
transition: 0.8s cubic-bezier(0.59, 0.04, 0.57, 0.96);
overflow: hidden;
background: #fff;
padding: 0 20px 0 70px;
font-size: 14px;
}
#listings .listingdetails img {
padding-top: 20px;
max-width: 180px;
padding-bottom: 100px;
float: left;
clear: both;
}
#listings .listingdetails .listing-text {
float: left;
width: 60%;
padding-left: 15px;
box-sizing: border-box;
}
#listings .listingdetails h5 {
margin: 0;
float: left;
padding-top: 15px;
font-size: 16px;
width: 100%;
}
#listings .listingdetails ul {
margin: 0;
float: left;
}
#listings .listingdetails ul li {
padding: 0;
color: #b8bcbd;
}
#listings .listingdetails ul li a {
color: #0ebac7;
}
#listings .listingdetails .access li {
color: #b8bcbd;
}
#listings input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 32px;
z-index: 1;
opacity: 0;
top: 0;
}
#listings input[type=checkbox]:checked ~ .listingdetails {
margin-top: 0;
max-height: 1px;
}
#listings input[type=checkbox]:checked ~ h4 a {
color: #323b40;
}
#listings input[type=checkbox]:checked ~ h4 .time {
color: #4f585e;
}
#listings input[type=checkbox]:checked ~ h4:after {
border-top: 4px solid #0ebac7;
border-bottom: none;
}
#listings .listing {
position: relative;
}
#listings .listing .time {
min-width: 50px;
display: inline-block;
color: #0ebac7;
float: left;
margin-bottom: 5px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
#listings .listing:hover a,
#listings .listing:hover .time {
transition: 0.25s ease-in-out;
}
#listings .listing:hover a:hover,
#listings .listing:hover .time:hover {
color: #0ebac7;
cursor: pointer;
}
#listings .listing-block {
padding-bottom: 40px;
}
#listings .listing-block h3 {
color: #94989b;
margin: 0 0 10px;
font-size: 16px;
}
.related-sidebar {
font-size: 16px;
background: #f5f5f5;
display: inline-block;
width: 25%;
padding-left: 75px;
padding-top: 30px;
box-sizing: border-box;
vertical-align: top;
}
@media only screen and (max-width: 1000px) {
.related-sidebar {
padding-left: 30px;
}
}
@media only screen and (max-width: 768px) {
.related-sidebar {
padding: 0 20px;
width: 100%;
}
}
.related-sidebar p {
line-height: 1.7;
font-weight: 600;
}
.related-sidebar ul {
list-style: none;
padding: 0;
line-height: 1.7;
font-weight: 600;
}
.related-sidebar ul li a {
color: #0ebac7;
border-bottom: none;
transition: 0.25s ease-in-out;
}
.related-sidebar ul li a:hover {
color: #0b8d97;
cursor: pointer;
}
div.listings-holder {
background: #ffffff;
border-bottom: #ffffff solid 2px;
padding: 1px 1px 0;
position: relative;
}
div.listings-holder > h3 {
/*background: rgba(0,0,0,0.0125);*/
/*border-bottom: 1px solid lighten(@lightBorder, 10);*/
background: transparent;
color: #4f585e;
font-family: 'Gotham Narrow SSm 5r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 500;
font-style: normal;
font-size: 24px;
font-weight: bold;
margin: 0;
padding: 18px 8px 44px;
position: relative;
}
div.listings-holder > h3 .svg-icon {
fill: #118e9b;
}
div.listings-holder > h3 i.material-icons {
position: relative;
top: -1px;
}
div.listings-holder > h3 a {
font-size: 12px;
z-index: 1;
position: absolute;
bottom: 12px;
left: 28px;
}
div.listings-holder a.toggle {
border-bottom: 0;
color: #118e9b;
font-size: 14px;
font-weight: 500;
height: 1em;
overflow: hidden;
/*position: absolute;*/
/*right: 20px;*/
top: -25px;
position: relative;
margin: 0 auto;
display: block;
background: transparent;
}
@media (max-width: 560px) {
div.listings-holder a.toggle {
top: -65px;
}
}
div.listings-holder a.toggle i.material-icons svg {
fill: #118e9b;
}
div.listings-holder a.toggle span {
display: block;
position: relative;
text-align: right;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.listings-holder a.toggle span.on {
color: #9c5d52;
}
div.listings-holder a.toggle span.on svg {
fill: #9c5d52;
}
@media only screen and (min-width: 670px) {
div.listings-holder a.toggle {
max-width: 650px;
padding: 0;
}
}
@media only screen and (min-width: 1000px) {
div.listings-holder a.toggle {
max-width: 980px;
}
}
@media (min-width: 1330px) {
div.listings-holder a.toggle {
max-width: 1310px;
}
}
@media (min-width: 1660px) {
div.listings-holder a.toggle {
max-width: 1640px;
}
}
@media only screen and (min-width: 1990px) {
div.listings-holder a.toggle {
max-width: 1970px;
}
}
div.listings-holder div.listings {
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
width: 100%;
}
div.listings-holder div.listings:before,
div.listings-holder div.listings:after {
background: rgba(255, 255, 255, 0.25);
content: "";
display: block;
height: 100%;
position: absolute;
top: 0;
width: 5px;
}
div.listings-holder div.listings:before {
left: 0;
}
div.listings-holder div.listings:after {
right: 0;
}
div.listings-holder div.listings div.current {
background: #0ebac7;
top: 0;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
left: 0;
position: absolute;
height: 2px;
z-index: 20;
/*
&:after {
bottom: 100%;
left: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: @tealMid;
border-width: 4px;
margin-left: -5px;
}
*/
}
div.listings-holder div.listings div.times {
font-size: 0;
height: 38px;
position: relative;
white-space: nowrap;
}
div.listings-holder div.listings div.times span.time {
border-bottom: 2px solid #e9eaea;
color: #4f585e;
display: inline-block;
font-size: 12px;
position: relative;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
width: 15%;
}
div.listings-holder div.listings div.times span.time:after {
background: #e9eaea;
bottom: 0;
content: "";
display: block;
left: -1px;
position: absolute;
height: 8px;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
width: 2px;
}
div.listings-holder div.listings div.times span.time em {
display: inline-block;
font-style: normal;
padding: 10px 0;
}
div.listings-holder div.listings div.programmes {
background: #eaedec;
min-height: 60px;
position: relative;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 100%;
}
div.listings-holder div.listings div.programmes div.programme {
background: #f8f8f8;
box-shadow: inset 1px 0 0 0 #ffffff, inset -1px 0 0 0 #ffffff;
display: block;
overflow: hidden;
position: absolute;
top: 0;
text-decoration: none;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content {
background: #fff;
box-shadow: 2px 0 0 #f8f8f8, inset 0 -2px 0 #f8f8f8;
margin: 25px 8px 33px;
min-height: 370px;
position: relative;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 304px;
white-space: normal;
padding-top: 10px;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content p {
color: #b8bcbd;
/*font-size: 18px;*/
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
padding: 18px 12px 8px;
line-height: 1.4;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content img {
box-shadow: 0 2px 0 #f8f8f8;
max-width: 100%;
width: 318px;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions {
bottom: 8px;
left: 8px;
position: absolute;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions a {
border: 0;
color: #0ebac7;
display: inline-block;
font-weight: 700;
margin: 6px;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions a i.material-icons svg {
fill: #0ebac7;
height: 20px;
position: relative;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
top: -2px;
width: 20px;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions a.reminder i.material-icons svg {
height: 18px;
width: 18px;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions a:hover {
color: #118e9b;
}
div.listings-holder div.listings div.programmes div.programme div.programme-content div.actions a:hover i.material-icons svg {
fill: #118e9b;
}
div.listings-holder div.listings div.programmes div.programme h3 {
font-size: 18px;
font-weight: 600;
letter-spacing: -0.025em;
margin: 0;
padding: 13px 8px 0;
position: relative;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
white-space: nowrap;
width: 100%;
z-index: 10;
color: #4f585e;
}
div.listings-holder div.listings div.programmes div.programme h3:hover {
color: #323b40;
}
div.listings-holder div.listings div.programmes div.programme span {
color: #94989b;
font-size: 12px;
font-weight: 600;
padding: 0 8px;
position: relative;
-webkit-transition: all 0.2s ease-in;
-moz-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
-o-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
white-space: nowrap;
width: 100%;
z-index: 10;
}
div.listings-holder div.listings div.programmes div.programme:hover {
background: #f8f9f8;
}
div.listings-holder div.listings div.programmes div.programme:hover span {
color: #4f585e;
}
div.listings-holder div.listings div.programmes div.programme.on {
background: #ffffff;
}
div.listings-holder div.listings div.programmes div.programme.on h3,
div.listings-holder div.listings div.programmes div.programme.on span {
color: #4f585e;
}
div.listings-holder.open {
border: none;
}
div.listings-holder.open a.toggle span {
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
}
div.listings-holder.open div.listings div.times {
height: 0;
}
div.listings-holder.open div.listings div.times span.time {
color: rgba(0, 0, 0, 0);
}
div.listings-holder.open div.listings div.times span.time:after {
height: 0;
}
div.listings-holder.open div.listings div.programmes {
min-height: 485px;
}
div.listings-holder.open div.listings div.programmes div.programme {
box-shadow: none;
}
div.listings-holder > h3 {
padding: 18px 8px 2px !important;
}
@media (max-width: 560px) {
div.listings-holder > h3 {
padding: 18px 8px 44px !important;
}
}
@media (min-width: 560px) {
div.listings-holder > h3 {
position: static;
}
div.listings-holder > h3 a {
margin-left: 1em;
position: relative;
top: -2px;
bottom: auto;
left: auto;
}
}
/* ==========================================================================
Listings page
========================================================================== */
body {
line-height: 1;
}
.now-next {
position: relative;
height: 400px;
background-position: center 25%;
background-size: cover;
background-repeat: no-repeat;
background: #323b40;
}
@media (min-width: 1330px) {
.now-next {
height: 600px;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
50% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
50% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
.now-next .now-wrapper,
.now-next .next-wrapper {
position: relative;
height: 400px;
background-position: 0 25%;
background-size: cover;
background-repeat: no-repeat;
opacity: 1;
animation: 2s ease-in fadeIn;
}
@media (min-width: 1330px) {
.now-next .now-wrapper,
.now-next .next-wrapper {
height: 600px;
}
}
.now-next .next-wrapper {
position: absolute;
top: 0;
opacity: 0;
transition: 0.8s ease-out;
transform: translateX(1800px);
}
@keyframes abs {
100% {
position: absolute;
}
}
.now-next .feature-overlay {
background: rgba(255, 255, 255, 0.95);
background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.44) 0%, rgba(0, 0, 0, 0.44) 59%, rgba(0, 0, 0, 0.44) 100%);
width: 100%;
height: 400px;
position: absolute;
top: 0;
z-index: 3;
}
@media (min-width: 1330px) {
.now-next .feature-overlay {
height: 600px;
}
}
.now-next .now,
.now-next .next {
position: absolute;
bottom: 0;
color: #fff;
padding: 40px 15px;
z-index: 4;
line-height: 1.2;
min-width: 30%;
transition: 1s ease-in;
}
.now-next .now a,
.now-next .next a {
color: #49f3ff;
border-bottom: none;
font-weight: bold;
font-size: 30px;
transition: 1s ease-in;
transition: 0.25s ease-in-out;
}
.now-next .now a:hover,
.now-next .next a:hover {
color: #00a3af;
cursor: pointer;
}
.now-next .now a:hover svg,
.now-next .next a:hover svg {
fill: #00a3af;
}
.now-next .now a svg,
.now-next .next a svg {
fill: #49f3ff;
margin-top: -3px;
margin-right: 3px;
transition: 0.25s ease-in-out;
}
.now-next .now a svg:hover,
.now-next .next a svg:hover {
color: #00a3af;
cursor: pointer;
}
.now-next .now h2,
.now-next .next h2,
.now-next .now p,
.now-next .next p {
margin: 0;
transition: 1s ease-in;
font-size: 18px;
font-weight: 700;
}
.now-next .now h2,
.now-next .next h2 {
font-size: 36px;
font-weight: 700;
}
.now-next .now .progress,
.now-next .next .progress {
width: 100%;
max-width: 330px;
background: rgba(255, 255, 255, 0.5);
height: 4px;
overflow: hidden;
margin: 10px 0;
}
.now-next .now .progress .progress-overlay,
.now-next .next .progress .progress-overlay {
width: 0%;
height: 4px;
background: #fff;
transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.now-next .finished {
position: absolute;
top: 0;
width: 100%;
z-index: 2;
opacity: 1;
animation: 2s ease-in fadeOut forwards;
}
.listings-wrapper {
font-size: 0;
background: #f5f5f5;
}
#listings {
font-size: 16px;
background: #f8f8f8;
width: 75%;
padding: 70px 6.25% 40px 25%;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
}
@media only screen and (max-width: 1000px) {
#listings {
padding-left: 20px;
}
}
@media only screen and (max-width: 768px) {
#listings {
padding: 0 20px;
width: 100%;
}
}
#listings h1 {
font-weight: 600;
font-size: 36px;
color: #323b40;
}
#listings h4 {
padding: 12px 35px 8px 20px;
cursor: pointer;
background: #fff;
margin: 0;
font-size: 18px;
font-weight: 600;
color: #323b40;
letter-spacing: -0.05em;
}
#listings h4:after {
content: "";
position: absolute;
right: 16px;
margin-top: 9px;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #0ebac7;
border-top: none;
}
#listings h4 a {
border-bottom: none;
color: #0ebac7;
}
#listings #listings-nav,
#listings .listingdetails {
list-style: none;
margin: 0;
padding: 0;
border-bottom: 4px solid #f8f8f8;
}
#listings #listings-nav ul,
#listings .listingdetails ul {
padding: 0;
}
#listings #listings-nav li,
#listings .listingdetails li {
display: inline-block;
vertical-align: top;
text-transform: capitalize;
padding: 5px;
}
#listings #listings-nav li a,
#listings .listingdetails li a,
#listings #listings-nav li abbr[title],
#listings .listingdetails li abbr[title] {
border-bottom: none;
font-size: 16px;
color: #4f585e;
transition: 0.25s ease-in-out;
text-decoration: none;
}
#listings #listings-nav li a:hover,
#listings .listingdetails li a:hover,
#listings #listings-nav li abbr[title]:hover,
#listings .listingdetails li abbr[title]:hover {
color: #0ebac7;
cursor: pointer;
}
#listings #listings-nav li .active,
#listings .listingdetails li .active {
border: 2px solid #e9eaea;
border-bottom: 2px solid #f8f8f8;
border-radius: 4px 4px 0 0;
padding: 8px 12px 5px;
background: #f8f8f8;
}
#listings #listings-nav li .active abbr,
#listings .listingdetails li .active abbr {
color: #0ebac7;
}
#listings #listings-nav {
border-bottom: 2px solid #e9eaea;
}
@media (max-width: 1170px) {
#listings #listings-nav a {
background: rgba(0, 0, 0, 0.05);
border-bottom: none;
-webkit-border-top-right-radius: 4px;
-webkit-border-bottom-right-radius: 4px;
-webkit-border-bottom-left-radius: 4px;
-webkit-border-top-left-radius: 4px;
-moz-border-radius-topright: 4px;
-moz-border-radius-bottomright: 4px;
-moz-border-radius-bottomleft: 4px;
-moz-border-radius-topleft: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top-left-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #4f585e;
display: block;
margin: 0;
overflow: hidden;
padding: 12px 18px 10px;
position: relative;
text-decoration: none;
-webkit-transition: 0.2s ease-in;
-moz-transition: 0.2s ease-in;
-ms-transition: 0.2s ease-in;
-o-transition: 0.2s ease-in;
transition: 0.2s ease-in;
}
#listings #listings-nav li .active {
border-bottom: 2px solid #e9eaea;
border-radius: 4px;
padding: 10px 18px 8px;
}
}
#listings .listingdetails {
max-height: 5000px;
transition: 0.8s cubic-bezier(0.59, 0.04, 0.57, 0.96);
overflow: hidden;
background: #fff;
padding: 0 20px 0 90px;
font-size: 14px;
}
#listings .listingdetails img {
padding-top: 20px;
max-width: 150px;
width: 35%;
padding-bottom: 20px;
float: left;
clear: both;
/*padding-left: 25px;*/
}
#listings .listingdetails .listing-text {
float: left;
width: 60%;
padding-left: 20px;
padding-bottom: 20px;
box-sizing: border-box;
}
@media only screen and (max-width: 768px) {
#listings .listingdetails {
padding: 0 20px;
}
#listings .listingdetails .listing-text {
width: 100%;
padding-left: 0;
}
#listings .listingdetails img {
width: 100%;
max-width: 180px;
padding: 10px 0 0;
}
}
#listings .listingdetails h5 {
margin: 0 0 0.5em;
float: left;
padding-top: 15px;
font-size: 18px;
width: 100%;
font-weight: 600;
color: #323b40;
letter-spacing: -0.05em;
}
#listings .listingdetails .sublisting {
clear: both;
margin-bottom: 20px;
float: left;
width: 100%;
}
#listings .listingdetails .sublisting h5 {
width: 40%;
max-width: 150px;
float: left;
padding-top: 0;
}
#listings .listingdetails .sublisting h5 span.time {
/*width: 40%;*/
color: #b8bcbd;
font-size: 14px;
min-width: 40px;
padding-right: 0;
}
#listings .listingdetails .sublisting h5 img {
/*width: 60%;*/
width: 95px;
float: right;
clear: none;
padding: 0;
}
@media only screen and (max-width: 768px) {
#listings .listingdetails .sublisting h5 img {
width: 140px;
padding: 0 0 10px;
float: left;
clear: none;
}
}
#listings .listingdetails .sublisting h6 {
font-size: 18px;
margin: 0;
text-transform: capitalize;
letter-spacing: -0.05em;
font-weight: bold;
color: #323b40;
}
#listings .listingdetails .sublisting .listing-text {
padding-bottom: 0;
}
#listings .listingdetails p {
line-height: 1.2;
font-size: 16px;
margin: 1em 0;
color: #323b40;
font-weight: 400;
}
#listings .listingdetails ul {
margin: 0;
float: none;
}
#listings .listingdetails ul li {
padding: 0;
color: #b8bcbd;
}
#listings .listingdetails ul li a {
color: #0ebac7;
}
#listings .listingdetails .access {
margin-top: 10px;
}
#listings .listingdetails .access li {
color: #b8bcbd;
margin-bottom: 20px;
font-size: 12px;
}
#listings input[type=checkbox] {
position: absolute;
cursor: pointer;
width: 100%;
height: 32px;
z-index: 1;
opacity: 0;
top: 0;
}
#listings input[type=checkbox]:checked ~ .listingdetails {
margin-top: 0;
max-height: 1px;
}
#listings input[type=checkbox]:checked ~ h4 a {
color: #323b40;
}
#listings input[type=checkbox]:checked ~ h4 .time {
color: #4f585e;
}
#listings input[type=checkbox]:checked ~ h4:after {
border-top: 4px solid #0ebac7;
border-bottom: none;
}
#listings .listing {
position: relative;
}
#listings .listing .time {
min-width: 53px;
padding-right: 15px;
display: inline-block;
color: #0ebac7;
float: left;
margin-bottom: 5px;
letter-spacing: normal;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
#listings .listing:hover a,
#listings .listing:hover .time {
transition: 0.25s ease-in-out;
}
#listings .listing:hover a:hover,
#listings .listing:hover .time:hover {
color: #0ebac7;
cursor: pointer;
}
#listings .listing-block {
padding: 30px 0 0;
}
#listings .listing-block h3 {
color: #94989b;
margin: 0 0 10px;
font-size: 15px;
font-weight: bold;
}
.related-sidebar {
font-size: 16px;
background: #f5f5f5;
display: inline-block;
width: 25%;
padding-left: 75px;
padding-top: 70px;
box-sizing: border-box;
vertical-align: top;
}
@media only screen and (max-width: 1000px) {
.related-sidebar {
padding-left: 30px;
}
}
@media only screen and (max-width: 768px) {
.related-sidebar {
padding: 30px 20px 0;
width: 100%;
}
}
.related-sidebar p {
line-height: 1.7;
font-weight: 600;
font-size: 18px;
}
.related-sidebar ul {
list-style: none;
padding: 0;
line-height: 2.2;
font-weight: 600;
}
.related-sidebar ul li a {
color: #0ebac7;
border-bottom: none;
font-size: 18px;
transition: 0.25s ease-in-out;
}
.related-sidebar ul li a:hover {
color: #0b8d97;
cursor: pointer;
}
/* ==========================================================================
marketing banner
========================================================================== */
div.marketing-banner {
background: #f2f2f2;
border-bottom: 1px solid #e9eaea;
}
div.marketing-banner div.marketing-banner-inner {
color: #4f585e;
padding: 0 20px 2em;
position: relative;
}
div.marketing-banner div.marketing-banner-inner h2 {
color: #323b40;
font-size: 36px;
margin-top: 0;
padding-top: 0.75em;
}
div.marketing-banner div.marketing-banner-inner p.intro {
color: #323b40;
font-weight: bold;
font-size: 24px;
letter-spacing: -0.05em;
}
div.marketing-banner div.marketing-banner-inner p {
max-width: 20em;
line-height: 1.3;
}
div.marketing-banner div.marketing-banner-inner a.s4c-btn,
div.marketing-banner div.marketing-banner-inner div.s4c-toggle-menu a.s4c-toggle-btn,
div.marketing-banner div.marketing-banner-inner header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
font-weight: bold;
margin: 1.5em 0;
background: #118e9b;
}
@media only screen and (min-width: 670px) {
div.marketing-banner {
background: url(../img/comp-bg.jpg) no-repeat 50% 0 #f2f2f2;
}
div.marketing-banner div.marketing-banner-inner {
margin-left: 50%;
max-width: 600px;
padding: 1em 0 3em;
width: 40%;
}
}
@media only screen and (min-width: 1330px) {
div.marketing-banner div.marketing-banner-inner {
padding: 1em 0 4em;
}
}
@media only screen and (min-width: 1468px) {
div.marketing-banner div.marketing-banner-inner {
padding: 2em 0 5em;
}
}
@media only screen and (min-width: 1660px) {
div.marketing-banner {
background: url(../img/comp-bg.jpg) no-repeat 0 0 #f2f2f2;
background-size: 103%;
}
div.marketing-banner div.marketing-banner-inner {
padding: 2em 0 5em;
}
div.marketing-banner div.marketing-banner-inner h2 {
font-size: 48px;
margin-bottom: 0.5em;
}
div.marketing-banner div.marketing-banner-inner a.s4c-btn,
div.marketing-banner div.marketing-banner-inner div.s4c-toggle-menu a.s4c-toggle-btn,
div.marketing-banner div.marketing-banner-inner header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
bottom: 4em;
font-size: 24px;
margin: 0;
padding: 12px 32px;
position: absolute;
right: 0;
}
}
@media only screen and (min-width: 1990px) {
div.marketing-banner div.marketing-banner-inner {
max-width: 652px;
padding: 3em 0 7em;
}
div.marketing-banner div.marketing-banner-inner a.s4c-btn,
div.marketing-banner div.marketing-banner-inner div.s4c-toggle-menu a.s4c-toggle-btn,
div.marketing-banner div.marketing-banner-inner header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
bottom: 5.5em;
}
}
/* ==========================================================================
search banner
========================================================================== */
div.search-banner {
background: #f2f2f2;
border-top: 1px solid #e9eaea;
float: left;
width: 100%;
}
div.search-banner div.search-banner-inner {
color: #4f585e;
font-size: 24px;
letter-spacing: -0.05em;
padding: 2em 6px 2em;
position: relative;
text-align: center;
}
div.search-banner div.search-banner-inner form.search-banner-form {
display: block;
margin: 0;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input {
background: none;
border: none;
border-bottom: 2px solid #0ebac7;
color: #118e9b;
letter-spacing: -0.05em;
width: 8.8em;
text-align: center;
font-size: 36px;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input::-webkit-input-placeholder {
color: #0ebac7;
font-weight: 500;
font-size: 35px;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input::-moz-placeholder {
color: #0ebac7;
font-weight: 500;
font-size: 35px;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input:-ms-input-placeholder {
color: #0ebac7;
font-weight: 500;
font-size: 35px;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input:focus::-webkit-input-placeholder {
color: rgba(14, 186, 199, 0.5);
font-weight: 200;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input:focus::-moz-placeholder {
color: rgba(14, 186, 199, 0.5);
font-weight: 200;
}
div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input:focus:-ms-input-placeholder {
color: rgba(14, 186, 199, 0.5);
font-weight: 200;
}
div.search-banner div.search-banner-inner form.search-banner-form button {
color: #9c5d52;
background: none;
border: none;
padding-left: 0;
font-size: 36px;
}
div.search-banner div.search-banner-inner form.search-banner-form button svg {
fill: #0ebac7;
}
@media only screen and (min-width: 670px) {
div.search-banner div.search-banner-inner {
font-size: 36px;
}
}
/* ==========================================================================
Home / styles only apply to homepage
========================================================================== */
.home-2016 .pageSubTitle,
.hafan-2016 .pageSubTitle {
padding-top: 2em;
}
div.corporate {
background: #fff;
*zoom: 1;
zoom: 1;
margin: auto;
}
div.corporate:before,
div.corporate:after {
content: "";
display: table;
}
div.corporate:after {
clear: both;
}
div.corporate:before,
div.corporate:after {
content: "";
display: table;
}
div.corporate:after {
clear: both;
}
div.corporate div.links h2,
div.corporate div.links h3 {
border-bottom: 1px solid #e9eaea;
margin: 0;
padding: 0.75em 20px;
font-size: 16px;
font-weight: 200;
position: relative;
color: #222;
-webkit-transition: border 0.2s 0.3s ease-in;
-moz-transition: border 0.2s 0.3s ease-in;
-ms-transition: border 0.2s 0.3s ease-in;
-o-transition: border 0.2s 0.3s ease-in;
transition: border 0.2s 0.3s ease-in;
}
div.corporate div.links h2 i.material-icons,
div.corporate div.links h3 i.material-icons {
position: absolute;
right: 10px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.corporate div.links h2 i.material-icons svg,
div.corporate div.links h3 i.material-icons svg {
fill: #118e9b;
}
div.corporate div.links h3.show {
border-bottom: rgba(0, 0, 0, 0);
-webkit-transition: border 0s 0s ease-in;
-moz-transition: border 0s 0s ease-in;
-ms-transition: border 0s 0s ease-in;
-o-transition: border 0s 0s ease-in;
transition: border 0s 0s ease-in;
}
div.corporate div.links h3.show i.material-icons {
-webkit-transform: rotate(180deg) translateY(-2px);
-moz-transform: rotate(180deg) translateY(-2px);
-ms-transform: rotate(180deg) translateY(-2px);
-o-transform: rotate(180deg) translateY(-2px);
transform: rotate(180deg) translateY(-2px);
}
div.corporate div.links:first-child h3 {
border-top: none;
}
div.corporate div.links div.links-content,
div.corporate div.links div.card-inner {
border-bottom: 1px solid #e9eaea;
display: none;
}
div.corporate div.links div.links-content > ul,
div.corporate div.links div.card-inner > ul {
margin: 0;
padding: 10px 20px 0;
}
div.corporate div.links div.links-content > ul > li,
div.corporate div.links div.card-inner > ul > li {
font-size: 14px;
list-style: none;
margin: 0;
padding: 0 0 1.5em;
}
div.corporate div.links div.links-content > ul > li a,
div.corporate div.links div.card-inner > ul > li a {
border: none;
color: #4f585e;
font-weight: 700;
display: block;
letter-spacing: -0.025em;
max-width: 85%;
}
div.corporate div.links div.links-content > ul > li a:hover,
div.corporate div.links div.card-inner > ul > li a:hover {
color: #118e9b;
}
div.corporate div.links div.links-content a.s4c-icon-link,
div.corporate div.links div.card-inner a.s4c-icon-link {
border: none;
display: inline-block;
font-size: 14px;
margin-bottom: 1em;
padding: 10px 20px;
color: #4f585e;
}
div.corporate div.links div.links-content a.s4c-icon-link:hover,
div.corporate div.links div.card-inner a.s4c-icon-link:hover {
color: #283135;
}
div.corporate div.links div.links-content a.s4c-icon-link i.material-icons,
div.corporate div.links div.card-inner a.s4c-icon-link i.material-icons {
top: -1px;
}
div.corporate div.links div.links-content a.s4c-icon-link i.material-icons svg,
div.corporate div.links div.card-inner a.s4c-icon-link i.material-icons svg {
fill: #118e9b;
height: 16px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 16px;
}
div.corporate div.links div.links-content a.s4c-icon-link:hover,
div.corporate div.links div.card-inner a.s4c-icon-link:hover {
color: #323b40;
}
div.corporate div.links div.links-content a.s4c-icon-link:hover i.material-icons svg,
div.corporate div.links div.card-inner a.s4c-icon-link:hover i.material-icons svg {
fill: #0ebac7;
}
div.corporate div.links div.card-inner {
display: block;
/*a.s4c-icon-link {
padding: 10px 0;
}*/
}
div.corporate div.links div.card-inner ul,
div.corporate div.links div.card-inner a.s4c-icon-link {
list-style: none;
padding: 10px 20px;
margin: 0;
display: none;
}
div.corporate div.links div.card-inner li {
padding: 0 0 1.5em;
}
div.corporate div.links div.card-inner li a {
color: #4f585e;
font-size: 14px;
font-weight: 700;
border-bottom: 0;
}
div.corporate div.links div.card-inner li a:hover {
color: #118e9b;
border-bottom: 0;
}
div.corporate div.links div.card-inner h2:after {
content: "";
position: absolute;
right: 15px;
top: 20px;
border-top: 4px solid #118e9b;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
transition: 0.2s ease-in;
}
div.corporate div.links div.card-inner h2.show:after {
-webkit-transform: rotate(180deg) translateY(-2px);
-moz-transform: rotate(180deg) translateY(-2px);
-ms-transform: rotate(180deg) translateY(-2px);
-o-transform: rotate(180deg) translateY(-2px);
transform: rotate(180deg) translateY(-2px);
}
div.corporate div.links div.card-inner img.lazyloaded {
display: none;
}
div.home-container {
margin: 8em auto 0;
max-width: 320px;
}
@media (min-width: 670px) {
div.corporate div.corporate-inner {
*zoom: 1;
zoom: 1;
margin: 4em auto;
max-width: 660px;
padding-left: 10px;
}
div.corporate div.corporate-inner:before,
div.corporate div.corporate-inner:after {
content: "";
display: table;
}
div.corporate div.corporate-inner:after {
clear: both;
}
div.corporate div.corporate-inner:before,
div.corporate div.corporate-inner:after {
content: "";
display: table;
}
div.corporate div.corporate-inner:after {
clear: both;
}
div.corporate div.links {
float: left;
margin: 0 10px 10px 0;
width: 315px;
}
div.corporate div.links div.links-content,
div.corporate div.links div.card-inner {
border: none;
display: block !important;
}
div.corporate div.links div.links-content ul,
div.corporate div.links div.card-inner ul {
padding-left: 0;
}
div.corporate div.links div.links-content ul li,
div.corporate div.links div.card-inner ul li {
display: none;
padding-bottom: 0.5em;
}
div.corporate div.links div.links-content ul li:first-of-type,
div.corporate div.links div.card-inner ul li:first-of-type {
display: block;
}
div.corporate div.links div.links-content a.s4c-icon-link,
div.corporate div.links div.card-inner a.s4c-icon-link {
margin-left: 0;
padding: 10px 0;
}
div.corporate div.links h3,
div.corporate div.links h2 {
padding-left: 0;
}
div.corporate div.links h3 i.material-icons,
div.corporate div.links h2 i.material-icons {
display: none;
}
div.corporate div.links h2:after {
display: none;
}
div.corporate div.links h3.show {
border-bottom: 1px solid #e9eaea;
}
div.corporate div.links:nth-child(odd) {
clear: left;
}
div.corporate div.links div.card-inner ul,
div.corporate div.links div.card-inner a.s4c-icon-link {
padding: 5px 0;
display: block !important;
}
div.corporate div.links div.card-inner ul li,
div.corporate div.links div.card-inner a.s4c-icon-link li {
padding-bottom: 0.5em;
}
}
@media (min-width: 1000px) {
div.corporate div.corporate-inner {
max-width: 990px;
}
div.corporate div.corporate-inner div.links:nth-child(odd) {
clear: none;
}
div.corporate div.corporate-inner div.links:nth-child(4) {
clear: left;
}
}
@media (min-width: 1075px) {
div.home-container {
max-width: 960px;
}
}
@media (min-width: 1330px) {
div.corporate div.corporate-inner {
max-width: 1320px;
}
div.corporate div.corporate-inner div.links:nth-child(4) {
clear: none;
}
div.corporate div.corporate-inner div.links {
margin: 5px 0 30px 0;
width: 25%;
}
div.corporate div.corporate-inner div.links h2,
div.corporate div.corporate-inner div.links h3 {
font-size: 16px;
line-height: 1.1em;
width: 90%;
}
div.corporate div.corporate-inner div.links div.links-content ul,
div.corporate div.corporate-inner div.links div.card-inner ul {
padding: 20px 0 0;
}
div.corporate div.corporate-inner div.links div.links-content ul li,
div.corporate div.corporate-inner div.links div.card-inner ul li {
display: block;
font-size: 14px;
padding-bottom: 1.2em;
line-height: 1.4;
}
div.corporate div.corporate-inner div.links div.links-content ul li a,
div.corporate div.corporate-inner div.links div.card-inner ul li a {
max-width: 95%;
font-size: 14px;
font-weight: 700;
}
div.corporate div.corporate-inner div.links div.links-content a.s4c-icon-link,
div.corporate div.corporate-inner div.links div.card-inner a.s4c-icon-link {
font-size: 14px;
}
div.corporate div.corporate-inner .links:nth-of-type(-n+2) {
margin-top: 0;
}
div.corporate div.corporate-inner .links:nth-of-type(-n+2) h3 {
font-size: 18px;
}
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.links-content ul li:first-child a,
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.card-inner ul li:first-child a {
font-size: 23px;
margin: 0 0 15px;
}
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.links-content ul li a,
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.card-inner ul li a {
font-size: 16px;
}
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.links-content a.s4c-icon-link,
div.corporate div.corporate-inner .links:nth-of-type(-n+2) div.card-inner a.s4c-icon-link {
font-size: 16px;
}
}
@media (min-width: 1468px) {
div.home-container {
max-width: 1320px;
}
}
@media (min-width: 1660px) {
div.corporate div.corporate-inner {
padding: 2em 0;
max-width: 1650px;
}
div.corporate div.corporate-inner div.links.w2 {
/*width: 485px;*/
/*max-width: 24%;*/
/*width: 22.5vw;*/
font-size: 0;
/*float: none;
display: inline-block;
vertical-align: top;*/
}
div.corporate div.corporate-inner div.links.w2 div.links-content > ul li:first-child,
div.corporate div.corporate-inner div.links.w2 div.card-inner > ul li:first-child {
/*font-size: 24px;*/
}
div.corporate div.corporate-inner div.links.w2 div.links-content > ul li a,
div.corporate div.corporate-inner div.links.w2 div.card-inner > ul li a {
max-width: 85%;
}
}
@media (min-width: 1990px) {
div.corporate div.corporate-inner {
padding: 4em 0;
max-width: 1980px;
}
div.corporate div.corporate-inner div.links.w2 {
/*margin-right: 100px;
width: 515px;*/
}
div.corporate div.corporate-inner div.links.w2 div.links-content > ul li:first-child,
div.corporate div.corporate-inner div.links.w2 div.card-inner > ul li:first-child {
font-size: 24px;
}
div.corporate div.corporate-inner div.links.w2 div.links-content > ul li a,
div.corporate div.corporate-inner div.links.w2 div.card-inner > ul li a {
max-width: 93%;
}
}
.pageSubTitle,
div.listings-holder > h3 {
width: 100%;
margin: 0 auto;
padding: 0 10px;
box-sizing: border-box;
}
@media only screen and (min-width: 670px) {
.pageSubTitle,
div.listings-holder > h3 {
max-width: 650px;
padding: 0;
}
}
@media only screen and (min-width: 1000px) {
.pageSubTitle,
div.listings-holder > h3 {
max-width: 980px;
}
}
@media (min-width: 1330px) {
.pageSubTitle,
div.listings-holder > h3 {
max-width: 1310px;
}
}
@media (min-width: 1660px) {
.pageSubTitle,
div.listings-holder > h3 {
max-width: 1640px;
}
}
@media only screen and (min-width: 1990px) {
.pageSubTitle,
div.listings-holder > h3 {
max-width: 1970px;
}
}
/*.r(@key, @inital, @s, @m, @l, @xl){
@key: @inital;
@media only screen and (min-width: 670px){
@key: @s;
}
@media only screen and (min-width: 1000px){
@key: @m;
}
@media (min-width: 1330px) {
@key: @l;
}
@media (min-width: 1660px) {
@key: @xl;
}
}
*/
/* Modal pop
-----------------------------------------------------------------------------------------------
===============================================================================================*/
div.s4cModulOverlay {
background: #323b40;
color: #ebebeb;
cursor: pointer;
height: 100%;
overflow-y: scroll;
position: fixed;
width: 100%;
z-index: 50000;
}
div.s4cModulOverlay span.icon {
font-size: 28px;
position: absolute;
right: 1em;
top: 1em;
}
div.s4cModulOverlay span.icon:hover {
color: #7dbeff;
}
div.s4cModulContainer {
margin: 10% auto 0;
max-width: 760px;
}
.videoContainer {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.icon-close {
width: 30px;
height: 30px;
}
.icon-close:before {
content: "";
background: url(../img/close.png) no-repeat;
width: 30px;
height: 30px;
font-size: 28px;
position: absolute;
}
.centreVideo {
margin: 0 auto;
max-width: 800px;
}
.fullWidthVideo {
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin-bottom: 2.5%;
}
.fullWidthVideo iframe,
.fullWidthVideo object,
.fullWidthVideo embed {
height: 99%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.fullWidthVideo img {
width: 100%;
}
.fullWidthVideo a.play span.icon {
color: rgba(255, 255, 255, 0.4);
font-size: 7.2rem;
left: 50%;
letter-spacing: -0.05em;
line-height: 1.2em;
margin: -0.5em 0 0 -0.5em;
position: absolute;
top: 50%;
transition: all 0.8s ease-in-out 0s;
z-index: 10;
}
.fullWidthVideo a.play:hover span.icon {
color: #ffffff;
}
.vidCenteredImg {
margin: 0 auto;
max-width: 800px;
}
.home .s4cContent,
.hafan .s4cContent {
background: #dce1df;
}
.home #s4cMainContent,
.hafan #s4cMainContent {
padding-top: 5px;
}
/* ==========================================================================
Footer
========================================================================== */
footer.s4c-footer {
background: #118e9b;
color: #ffffff;
padding: 4% 0 0;
}
footer.s4c-footer h2 {
font-size: 24px;
font-weight: 700;
margin: 0.83em 0;
color: #fff;
}
footer.s4c-footer h3 {
font-size: 18px;
font-weight: 700;
margin: 1em 0;
}
footer.s4c-footer a {
color: #fff;
}
footer.s4c-footer ul {
margin: 0;
padding: 0;
}
footer.s4c-footer ul li {
list-style: none;
margin: 0;
padding: 0;
}
footer.s4c-footer p.intro {
font-family: 'Gotham Narrow SSm 3r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 300;
font-style: normal;
font-size: 18px;
line-height: 1.3em;
max-width: 30em;
}
footer.s4c-footer p.small {
font-size: 14px;
}
footer.s4c-footer label.txt {
padding-bottom: 14px;
}
footer.s4c-footer div.s4c-footer-inner {
*zoom: 1;
zoom: 1;
margin: auto;
max-width: 680px;
padding: 10px 20px 4%;
}
footer.s4c-footer div.s4c-footer-inner:before,
footer.s4c-footer div.s4c-footer-inner:after {
content: "";
display: table;
}
footer.s4c-footer div.s4c-footer-inner:after {
clear: both;
}
footer.s4c-footer div.s4c-footer-inner:before,
footer.s4c-footer div.s4c-footer-inner:after {
content: "";
display: table;
}
footer.s4c-footer div.s4c-footer-inner:after {
clear: both;
}
footer.s4c-footer div.s4c-footer-inner div.s4c-footer-signup div.s4c-footer-signup-form {
max-width: 26em;
}
footer.s4c-footer div.s4c-footer-inner:last-child {
padding-top: 0;
}
footer.s4c-footer button.s4c-btn {
background: #007c85;
padding-left: 50px;
outline: none;
}
footer.s4c-footer div.checkbox-holder {
margin-bottom: 2px;
}
footer.s4c-footer div.checkbox-holder label {
font-size: 12px;
}
footer.s4c-footer div.s4c-footer-other-links {
*zoom: 1;
zoom: 1;
clear: both;
text-align: left;
padding-top: 4%;
}
footer.s4c-footer div.s4c-footer-other-links:before,
footer.s4c-footer div.s4c-footer-other-links:after {
content: "";
display: table;
}
footer.s4c-footer div.s4c-footer-other-links:after {
clear: both;
}
footer.s4c-footer div.s4c-footer-other-links:before,
footer.s4c-footer div.s4c-footer-other-links:after {
content: "";
display: table;
}
footer.s4c-footer div.s4c-footer-other-links:after {
clear: both;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col {
float: left;
max-width: 320px;
width: 50%;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col:nth-child(even) {
clear: left;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul {
margin-bottom: 2em;
padding-right: 10px;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li {
margin: 0 0 18px;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li > a {
border-color: rgba(255, 255, 255, 0.6);
font-size: 14px;
border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li > a:hover {
border-bottom: 3px solid #e9eaea;
}
footer.s4c-footer div.social-media-links {
background: #323b40;
overflow: hidden;
padding-bottom: 4px;
text-align: center;
}
footer.s4c-footer div.social-media-links ul {
margin: 0;
padding: 0;
}
footer.s4c-footer div.social-media-links li {
display: inline;
margin: 0;
padding: 0;
}
footer.s4c-footer div.social-media-links a {
border-bottom: 0px solid rgba(0, 0, 0, 0.95);
border-radius: 4px;
-webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0), 0 6px 8px rgba(0, 0, 0, 0), 0 44px 24px rgba(0, 0, 0, 0), 0 64px 34px rgba(0, 0, 0, 0);
-moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0), 0 6px 8px rgba(0, 0, 0, 0), 0 44px 24px rgba(0, 0, 0, 0), 0 64px 34px rgba(0, 0, 0, 0);
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0), 0 6px 8px rgba(0, 0, 0, 0), 0 44px 24px rgba(0, 0, 0, 0), 0 64px 34px rgba(0, 0, 0, 0);
display: inline-block;
padding: 20px;
position: relative;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
footer.s4c-footer div.social-media-links a svg {
height: 30px;
width: 30px;
}
footer.s4c-footer div.social-media-links a svg path,
footer.s4c-footer div.social-media-links a svg circle {
/*fill: @teal;*/
fill: rgba(255, 255, 255, 0.9);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
footer.s4c-footer div.social-media-links a:hover {
-webkit-transform: translateY(-4px);
-moz-transform: translateY(-4px);
-ms-transform: translateY(-4px);
-o-transform: translateY(-4px);
transform: translateY(-4px);
-webkit-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.35), 0 6px 8px rgba(0, 0, 0, 0.15), 0 24px 24px rgba(0, 0, 0, 0.25), 0 36px 36px rgba(0, 0, 0, 0.25), 0 64px 64px rgba(0, 0, 0, 0.25), 0 64px 128px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.35), 0 6px 8px rgba(0, 0, 0, 0.15), 0 24px 24px rgba(0, 0, 0, 0.25), 0 36px 36px rgba(0, 0, 0, 0.25), 0 64px 64px rgba(0, 0, 0, 0.25), 0 64px 128px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 -2px 0 0 rgba(0, 0, 0, 0.35), 0 6px 8px rgba(0, 0, 0, 0.15), 0 24px 24px rgba(0, 0, 0, 0.25), 0 36px 36px rgba(0, 0, 0, 0.25), 0 64px 64px rgba(0, 0, 0, 0.25), 0 64px 128px rgba(0, 0, 0, 0.25);
}
footer.s4c-footer div.social-media-links a:hover svg path,
footer.s4c-footer div.social-media-links a:hover svg circle {
/*fill: @tealMid;*/
fill: #fff;
}
@media (min-width: 560px) {
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col {
max-width: 320px;
}
}
@media (min-width: 670px) {
footer.s4c-footer div.s4c-footer-inner {
margin: auto;
max-width: 660px;
padding-left: 10px;
}
}
@media (min-width: 1000px) {
footer.s4c-footer div.s4c-footer-inner {
max-width: 990px;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col {
width: 25%;
}
footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col:nth-child(even) {
clear: none;
}
}
/* ==========================================================================
Popup alert
========================================================================== */
.popup-alert {
bottom: 0;
color: #fff;
display: inline-block;
font-size: 18px;
font-weight: 700;
left: 0;
max-height: 0;
opacity: 0;
padding: 2%;
position: fixed;
-webkit-transform: translateY(100px);
-moz-transform: translateY(100px);
-ms-transform: translateY(100px);
-o-transform: translateY(100px);
transform: translateY(100px);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
width: 96%;
z-index: 1000000;
}
.popup-alert div.copy {
display: inline-block;
padding: 12px 32px 32px;
}
.popup-alert#error {
background: rgba(139, 83, 73, 0.95);
}
.popup-alert#error div.copy {
background: url(../img/warning.svg) no-repeat 10px 10px;
background-size: 24px;
padding: 12px 32px 32px 60px;
}
.popup-alert#message {
background: rgba(27, 168, 113, 0.95);
}
.popup-alert#message:after {
background: #74e8bb;
content: "";
display: block;
height: 4px;
left: 0;
position: absolute;
-webkit-transition: all 0s 0s linear;
-moz-transition: all 0s 0s linear;
-ms-transition: all 0s 0s linear;
-o-transition: all 0s 0s linear;
transition: all 0s 0s linear;
top: 0;
width: 0;
}
.popup-alert a {
border: 0;
color: #fff;
text-decoration: underline;
}
.popup-alert a.close {
background: rgba(0, 0, 0, 0.1);
display: block;
padding: 20px 0;
text-align: center;
text-decoration: none;
}
.popup-alert a.close span {
text-align: center;
text-decoration: underline;
}
.popup-alert a.close svg {
height: 16px;
margin-left: 6px;
position: relative;
top: 3px;
width: 16px;
}
.popup-alert a.close svg polygon {
fill: #fff;
}
.popup-alert.visible {
max-height: 600px;
opacity: 1;
-webkit-transform: translateY(0);
-moz-transform: translateY(0);
-ms-transform: translateY(0);
-o-transform: translateY(0);
transform: translateY(0);
}
.popup-alert.visible#message:after {
-webkit-transition: all 5s 0s linear;
-moz-transition: all 5s 0s linear;
-ms-transition: all 5s 0s linear;
-o-transition: all 5s 0s linear;
transition: all 5s 0s linear;
width: 100%;
}
@media only screen and (min-width: 900px) {
div.popup-alert#error div.copy {
padding: 12px 32px 12px 60px;
}
div.popup-alert div.copy {
padding: 12px 32px;
}
div.popup-alert a.close {
display: inline-block;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
width: 180px;
}
div.popup-alert a.close div.close-inner {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
width: 100%;
}
}
/* ==========================================================================
Loader
========================================================================== */
.loader {
margin: 60px auto;
font-size: 10px;
position: relative;
text-indent: -9999em;
border-top: 2em solid rgba(0, 0, 0, 0.025);
border-right: 2em solid rgba(0, 0, 0, 0.025);
border-bottom: 2em solid rgba(0, 0, 0, 0.025);
border-left: 2em solid rgba(0, 0, 0, 0.1);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation: load8 1.6s infinite linear;
animation: load8 1.6s infinite linear;
}
.loader,
.loader:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* ==========================================================================
Ads
========================================================================== */
.bannerAd {
/*margin-bottom: 2px;*/
text-align: center;
}
/*.show-nav .bannerAd, .show-nav .advert-banner{
visibility: hidden;
z-index: -1;
position: fixed;
}*/
/* ==========================================================================
CMS
========================================================================== */
/* ==========================================================================
CMS / Static / 3rd Party / Legacy Sites tweaks for new header & footer
========================================================================== */
h1.largeHeading {
font-size: 72px;
margin-top: 50px;
}
.fullBackgroundInline {
height: auto;
}
.masonryGridItemContent > h2,
.masonryItemInfo h2,
#content-2col-col2 div#press h2 {
font-size: 24px;
}
.masonryItemInfo,
.masonryItemInfo p {
font-size: 14px;
}
li.sideCard h2,
ul.morenews li h4,
div#sideNav > div:nth-child(1) a,
#sideNav .sideNav-feeds ul li.none a,
div#sideNav > div:nth-child(2) a,
#sideNav .sideNav-orange-dk ul li a,
#sideNav .sideNav-feeds ul li a,
#content-2col-col2 #authorityIntro ul li,
#content-2col-col2 #authorityIntro p {
font-size: 18px;
}
div.s4cContent,
.s4c-static #s4c-main-wrapper {
padding-top: 100px;
}
@media (max-width: 1074px) {
div.s4cContent,
.s4c-static #s4c-main-wrapper {
padding-top: 85px;
}
}
@media (max-width: 525px) {
div.s4cContent,
.s4c-static #s4c-main-wrapper {
padding-top: 60px;
}
}
.s4c-static #s4c-main-wrapper h2 {
font-size: 16px;
}
.s4c-static #sideNav ul li a {
font-size: 14px;
}
.sportSection .subSectionMenu {
margin-top: 100px;
}
@media (max-width: 1019px) {
.sportSection .subSectionMenu {
margin-top: 0;
}
}
.sportSection a,
.s4cSection0 a,
.s4c-corp-blue a {
border-bottom: 0;
}
.s4cSection0 #s4c-content-wrapper {
background: #f5f5f5;
margin-bottom: 0;
}
.s4cSection0 div#s4c-wrap {
margin-top: 100px;
}
.s4cSection0 h2 {
border: 0;
}
.s4cSection0 #authorityIntro h3 {
font-size: 33px;
}
.s4cSection0 #authorityIntro span {
font-size: 28px;
}
a.s4c-logo-toggle {
margin-top: 0;
}
@media (max-width: 1074px) {
a.s4c-logo-toggle {
/*background: #f8f8f8;*/
/*width: 100%;*/
}
}
@media (max-width: 525px) {
a.s4c-logo-toggle {
height: 60px;
}
}
.buttonIconInner,
.buttonInner {
font-size: 14px;
line-height: 1.1;
}
.greenUI a.button,
.greenUI a.buttonIcon,
.buttonIconInner,
.buttonInner,
.buttonIconInner,
.buttonInner,
[class*='stwnsh'] .buttonIcon .buttonIconInner,
[class*='stwnsh'] li a.button,
[class*='stwnsh'] li a.button div.buttonInner,
[class*='stwnsh'] .actionsItem a.buttonIcon {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #fff;
}
.greenUI a.button:hover,
.greenUI a.buttonIcon:hover,
.buttonIconInner:hover,
.buttonInner:hover,
.buttonIconInner:hover,
.buttonInner:hover,
[class*='stwnsh'] .buttonIcon .buttonIconInner:hover,
[class*='stwnsh'] li a.button:hover,
[class*='stwnsh'] li a.button div.buttonInner:hover,
[class*='stwnsh'] .actionsItem a.buttonIcon:hover {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
.greenUI a.button:hover span.icon,
.greenUI a.buttonIcon:hover span.icon,
.buttonIconInner:hover span.icon,
.buttonInner:hover span.icon,
.buttonIconInner:hover span.icon,
.buttonInner:hover span.icon,
[class*='stwnsh'] .buttonIcon .buttonIconInner:hover span.icon,
[class*='stwnsh'] li a.button:hover span.icon,
[class*='stwnsh'] li a.button div.buttonInner:hover span.icon,
[class*='stwnsh'] .actionsItem a.buttonIcon:hover span.icon {
color: #ffad58;
}
.sport .s4cContent a.button:hover span.icon,
.sport .s4cContent a.buttonIcon:hover span.icon,
.education .s4cContent a.button,
.education .s4cContent a.buttonIcon {
color: #fff !important;
}
.sport .s4cContent a.button:hover span.icon:hover span.icon,
.sport .s4cContent a.buttonIcon:hover span.icon:hover span.icon,
.education .s4cContent a.button:hover span.icon,
.education .s4cContent a.buttonIcon:hover span.icon {
color: #fff !important;
}
body.subSection1 li.subSectionLink1 a.button .label,
.sgorio .subSectionLink2 .label {
color: #111;
}
/*Stwnsh*/
.stwnsh-orange .s4cContent {
padding-top: 0;
}
.navigation-toggle {
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
.m-top {
margin-top: 100px;
}
@media (min-width: 1074px) {
.s4c-toggle-menu {
display: none !important;
}
}
.textBlock {
line-height: 1.4;
font-size: 18px;
}
.tagsSection li.sideCard {
background: #f3f4f4;
}
.tagsSection li.sideCard h2 {
color: #111;
font-weight: 700;
}
.tagsMain a.button span.icon {
padding-right: 0;
}
#learners h2,
#learners p,
#content-2col-col2 p {
font-size: 18px;
line-height: 1.3;
}
.s4c-static #content-2col-col2 a,
.s4c-static #content-2col-col2 p,
.s4c-static #content-2col-col2 ol,
.s4c-static #content-2col-col2 ul,
.s4c-static #content-2col-col2 h3 {
font-size: 14px;
line-height: 1.5;
padding: 0 !important;
}
.s4c-static #content-2col-col2 blockquote {
font-size: 15px;
}
.s4c-static #content-2col-col2 strong {
font-weight: bold;
}
.s4c-static #s4c-main-wrapper h3 {
padding: 0 !important;
}
#content-2col-col2 > h1 {
font-size: 32px;
}
div#press a {
border: 0;
}
.s4cSection0 footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li {
line-height: 1;
margin: 0 0 6px;
}
.s4cSection0 .s4c-drop-down-nav.hide {
display: block !important;
}
.s4cSection0 header.s4c-header form.s4c-search button .svg-icon {
margin-top: 5px;
}
.s4cSection0 header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link span.label {
font-weight: 400;
font-size: 100%;
padding: 0;
white-space: normal;
}
.s4cSection0 header.sticky ul.s4c-main-menu li a.s4c-menu-item-link span.label {
color: #118e9b;
}
.s4cSection0 .visible-md.visible-lg {
font-weight: 400;
}
.s4cSection0 div.s4c-toggle-menu a.s4c-toggle-btn i.material-icons span.row {
margin: 0;
}
@media only screen and (max-width: 1074px) {
.s4cSection0 header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link,
.s4cSection0 header.s4c-header div.context-menu > ul > li > a {
width: 100%;
}
}
div#sideNav li {
line-height: 1.6;
}
#s4c-main-wrapper {
overflow: auto;
}
#s4c-main-wrapper #authorityIntro h2,
#s4c-wrap #learners h2,
#s4c-wrap #learners h3 {
font-size: 42px;
}
#s4c-main-wrapper #websites-archive h2 {
font-family: Helvetica, Verdana, Arial, Helvetica, sans-serif;
padding: 0 0 0.4em 0;
color: #1b6e8b;
margin: 1em 9px 1em 9px;
font-weight: normal;
border-bottom: 1px solid #e7e7e7;
font-size: 24px;
}
#s4c-main-wrapper .websites-holder h3 {
font-size: 21px;
}
#s4c-main-wrapper div.websites-column ul li a {
color: #1b6e8b;
border-bottom: 1px solid #e7e7e7;
text-decoration: none;
padding: 0 0 0.1em 0;
margin: 0;
font-size: 18px;
}
.websites-column {
display: inline-block;
vertical-align: top;
margin: 0 10px 10px 10px;
width: 30%;
}
.websites-column ul {
margin: 0;
}
@media (max-width: 600px) {
.websites-column {
width: 44%;
}
}
.cbHide {
clear: both;
margin: 0;
padding: 0 !important;
line-height: 0 !important;
}
.blue > h2 {
margin-top: 40px;
}
#picbox-content-blue h2 {
color: #fff;
}
.category-grid h3 {
font-size: 21px;
}
.s4cSection0 header.s4c-header form.s4c-search .svg-icon {
margin-top: -13px;
}
div.s4c-toggle-menu {
line-height: 1;
}
.sub-nav a {
font-size: 17px;
border-bottom: 0;
}
.sub-nav a:visited {
color: #182c5c;
}
.sub-nav a:hover,
.sub-nav a:focus {
border-bottom: 0;
}
.sub-nav a span {
font-size: 26px;
}
.s4c-blue .competitions h2,
.s4c-blue .download-app h2,
.s4c-blue .social h2,
.s4c-blue .choices h2 {
font-size: 26px;
font-weight: 400;
}
.s4c-blue .competitions h2 + p,
.s4c-blue .download-app h2 + p,
.s4c-blue .social h2 + p,
.s4c-blue .choices h2 + p,
.s4c-blue .competitions h3,
.s4c-blue .download-app h3,
.s4c-blue .social h3,
.s4c-blue .choices h3 {
font-size: 18px;
}
.s4c-blue .competitions a,
.s4c-blue .download-app a,
.s4c-blue .social a,
.s4c-blue .choices a {
border-bottom: 0;
}
.s4c-blue .competitions a:hover,
.s4c-blue .download-app a:hover,
.s4c-blue .social a:hover,
.s4c-blue .choices a:hover,
.s4c-blue .competitions a:focus,
.s4c-blue .download-app a:focus,
.s4c-blue .social a:focus,
.s4c-blue .choices a:focus {
border-bottom: 0;
}
.s4c-blue .competitions ul li a,
.s4c-blue .download-app ul li a,
.s4c-blue .social ul li a,
.s4c-blue .choices ul li a {
font-size: 19px;
}
.s4c-blue .competitions ul li span,
.s4c-blue .download-app ul li span,
.s4c-blue .social ul li span,
.s4c-blue .choices ul li span {
font-size: 30px;
}
.s4c-blue .competitions ul.tab-links li a,
.s4c-blue .download-app ul.tab-links li a,
.s4c-blue .social ul.tab-links li a,
.s4c-blue .choices ul.tab-links li a,
.s4c-blue .competitions .s input[type="text"],
.s4c-blue .download-app .s input[type="text"],
.s4c-blue .social .s input[type="text"],
.s4c-blue .choices .s input[type="text"],
.s4c-blue .competitions .info .tab-content table th,
.s4c-blue .download-app .info .tab-content table th,
.s4c-blue .social .info .tab-content table th,
.s4c-blue .choices .info .tab-content table th,
.s4c-blue .competitions .info .tab-content table td,
.s4c-blue .download-app .info .tab-content table td,
.s4c-blue .social .info .tab-content table td,
.s4c-blue .choices .info .tab-content table td,
.s4c-blue .competitions .info .tab-content table td span strong,
.s4c-blue .download-app .info .tab-content table td span strong,
.s4c-blue .social .info .tab-content table td span strong,
.s4c-blue .choices .info .tab-content table td span strong {
font-size: 16px;
}
.s4c-blue .competitions .info .tab-content table td span,
.s4c-blue .download-app .info .tab-content table td span,
.s4c-blue .social .info .tab-content table td span,
.s4c-blue .choices .info .tab-content table td span {
font-size: 13px;
}
.s4c-blue .competitions .icon-blank-triangle,
.s4c-blue .download-app .icon-blank-triangle,
.s4c-blue .social .icon-blank-triangle,
.s4c-blue .choices .icon-blank-triangle {
font-size: 110px;
}
.s4c-blue .competitions .info .tab-content table td .details.with-podium .podium span,
.s4c-blue .download-app .info .tab-content table td .details.with-podium .podium span,
.s4c-blue .social .info .tab-content table td .details.with-podium .podium span,
.s4c-blue .choices .info .tab-content table td .details.with-podium .podium span,
.s4c-blue .competitions .info .tab-content table td .video-link span.icon-video,
.s4c-blue .download-app .info .tab-content table td .video-link span.icon-video,
.s4c-blue .social .info .tab-content table td .video-link span.icon-video,
.s4c-blue .choices .info .tab-content table td .video-link span.icon-video {
font-size: 35px;
}
.s4c-blue .competitions ul.tab-links,
.s4c-blue .download-app ul.tab-links,
.s4c-blue .social ul.tab-links,
.s4c-blue .choices ul.tab-links {
line-height: 1.5;
}
.s4c-blue .competitions .info .tab-content table thead th,
.s4c-blue .download-app .info .tab-content table thead th,
.s4c-blue .social .info .tab-content table thead th,
.s4c-blue .choices .info .tab-content table thead th {
line-height: 1.2;
}
.s4c-blue .competitions .backtotop,
.s4c-blue .download-app .backtotop,
.s4c-blue .social .backtotop,
.s4c-blue .choices .backtotop {
font-size: 16px;
line-height: 1.3;
}
.bbc-link-section p,
.day-holder a.day-linker {
font-size: 16px;
}
.bbc-link-section p a,
.day-holder a.day-linker a,
.bbc-link-section p a:hover,
.day-holder a.day-linker a:hover,
.bbc-link-section p a:focus,
.day-holder a.day-linker a:focus {
border: 0;
}
.day-holder a.day-linker span {
font-size: 30px;
}
.day-holder {
line-height: 1;
}
.blue h2 {
font-size: 47px;
}
.blue h4,
.blue h5 {
font-size: 37px;
margin-bottom: 5px;
}
.s4c-corp-blue #pen {
/*padding: 7em 0;*/
/*top: 0;*/
background: none;
}
.s4c-corp-blue #pen form.s4c-search .svg-icon {
margin-top: 5px;
}
.s4c-corp-blue .sticky#pen {
background: rgba(248, 248, 248, 0.95);
padding: 1.87em 0;
}
.s4c-corp-blue header.s4c-header .s4c-logo {
top: 0;
position: absolute;
}
.rownd {
padding-top: 140px;
padding-bottom: 75px;
/*z-index: 1000;*/
background: url(http://s4c.cymru/rowndarownd/rw/themes/rownd/pont.jpg) 50% 40%;
background-size: cover;
}
.rownd #rownd3 {
top: 42%;
}
.zilla header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link {
line-height: 1.3;
}
.zilla #header {
padding-top: 100px;
}
.zilla div.context-menu > ul > li > a {
line-height: 1.1;
font-weight: 400;
}
.zilla header.s4c-header form.s4c-search input {
box-shadow: none;
}
.zilla #primary-nav ul a {
color: #222;
}
.zilla #primary-nav ul a:hover {
color: #888;
}
@media only screen and (max-width: 1000px) {
.zilla #primary-nav ul a {
color: #fff;
}
}
.zilla footer h2,
.zilla footer h3,
.zilla footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li > a {
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana !important;
color: #fff;
}
.zilla footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li > a {
font-weight: 400;
}
.zilla div.search-banner div.search-banner-inner form.search-banner-form input.search-banner-input {
font-size: 40px;
}
#content {
overflow: auto;
}
#content #rightcolumn {
width: 180px;
}
#s4c-head2 {
border-bottom: 1px solid #4f4f4f;
margin: 0 auto 1em auto;
padding: 120px 0 0;
}
#s4c-section4 {
background: #fff;
}
#s4c-section4 nav,
#s4c-section4 .s4c-logo-toggle {
text-align: left;
}
#s4c-section4 footer.s4c-footer h3 {
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana !important;
color: #fff;
text-shadow: none;
}
#s4c-section4 h2 {
text-shadow: none;
}
#s4c-section4 .hide {
width: auto;
max-width: 142px;
position: relative;
left: 0;
}
#s4c-section4 header.s4c-header ul.s4c-main-menu li a.s4c-menu-item-link i.material-icons {
margin-top: 0;
}
#s4c-section4 header.s4c-header form.s4c-search .svg-icon {
margin-top: 6px;
}
#s4c-section4 footer.s4c-footer div.s4c-footer-other-links div.s4c-footer-other-links-col > ul li {
line-height: 1.8;
}
.s4c-blue header.s4c-header form.s4c-search > button {
float: right;
}
.s4c-blue header.s4c-header form.s4c-search .svg-icon {
margin-top: -4px;
}
@media only screen and (max-width: 1074px) {
.s4c-blue header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link,
.s4c-blue header.s4c-header div.context-menu > ul > li > a {
width: 100%;
}
}
.s4cSection3 header.s4c-header form.s4c-search > button {
padding: 3px 6px 5px;
}
@media only screen and (max-width: 1074px) {
.rasus#s4c-section4 header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link,
.weather header.s4c-header nav ul.s4c-main-menu > li a.s4c-menu-item-link,
.rasus#s4c-section4 header.s4c-header div.context-menu > ul > li > a,
.weather header.s4c-header div.context-menu > ul > li > a,
.rasus#s4c-section4 .hide,
.weather .hide {
width: 225px;
max-width: none;
box-sizing: border-box;
}
}
body.weather {
background: #000000 url('http://tywydd.s4c.cymru/media/1015/dail_yr_hydref-min-min.jpg') center top no-repeat;
}
body.weather .navigation {
padding-top: 100px;
}
body.weather a {
border: 0;
}
.home-137 div.search-banner {
z-index: 1;
position: relative;
}
.home-137 footer.s4c-footer {
position: relative;
}
/* ==========================================================================
Media Queries
========================================================================== */
/* ==========================================================================
Helper classes
========================================================================== */
.hidden {
display: none !important;
visibility: hidden;
}
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
.invisible {
visibility: hidden;
}
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
/* ==========================================================================
Print styles
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
/*////////////////////////////////////////////////////////*/
/*/////////////////////// OLD LESS ///////////////////////*/
/*////////////////////////////////////////////////////////*/
span.todo {
font-size: .75em;
}
/* Micro ClearFix Mixin */
.center {
text-align: center;
}
/* =========================================
INDEX
- General
-- Styled Forms
- Sub Nav
-- Browse Nav
- Feature Grid
- One Size Grid
- Small Grid
- Level 2
-- Player Area
-- Parental Control
-- Two Step
-- Programme Details
-- More Episodes
-- More Like This
-- Feedback Nag
- Live
- Overlay
-- Feedback Overlay
- Cyw Banner
- Main Content
- Schedule
- Footer
- Animations
- Player
========================================= */
/* =========================================
- General
========================================= */
body {
color: #4f585e;
}
a,
a:active,
a:focus {
outline: none;
}
/* -----------------------------------------
-- Styled Forms
----------------------------------------- */
form.styledForm {
font-size: 24px;
font-weight: 300;
}
form.styledForm label {
color: #fff;
display: block;
font-size: 18px;
font-weight: 500;
margin: 0 0 10px;
}
form.styledForm span.icon {
color: #30838f;
font-size: 18px;
margin: 0 10px 0 6px;
}
form.styledForm div.textInput,
form.styledForm div.textArea {
background: #3f4b51;
margin: 0 0 44px;
padding: 16px 10px 18px;
}
form.styledForm div.textInput textarea,
form.styledForm div.textArea textarea,
form.styledForm div.textInput input,
form.styledForm div.textArea input {
background: #445057;
border: 1px solid #3b464b;
color: #58dfed;
display: inline-block;
font-size: 18px;
margin: 0;
padding: 10px;
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
font-family: 'Gotham Narrow SSm 4r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 400;
font-style: normal;
}
form.styledForm div.textInput textarea::-webkit-input-placeholder,
form.styledForm div.textArea textarea::-webkit-input-placeholder,
form.styledForm div.textInput input::-webkit-input-placeholder,
form.styledForm div.textArea input::-webkit-input-placeholder {
font-size: 24px;
color: #30838f;
}
form.styledForm div.textInput textarea:-moz-placeholder,
form.styledForm div.textArea textarea:-moz-placeholder,
form.styledForm div.textInput input:-moz-placeholder,
form.styledForm div.textArea input:-moz-placeholder {
/* Firefox 18- */
font-size: 24px;
color: #30838f;
}
form.styledForm div.textInput textarea::-moz-placeholder,
form.styledForm div.textArea textarea::-moz-placeholder,
form.styledForm div.textInput input::-moz-placeholder,
form.styledForm div.textArea input::-moz-placeholder {
/* Firefox 19+ */
font-size: 24px;
color: #30838f;
}
form.styledForm div.textInput textarea:-ms-input-placeholder,
form.styledForm div.textArea textarea:-ms-input-placeholder,
form.styledForm div.textInput input:-ms-input-placeholder,
form.styledForm div.textArea input:-ms-input-placeholder {
font-size: 24px;
color: #30838f;
}
form.styledForm div.textInput textArea,
form.styledForm div.textArea textArea {
height: 180px;
}
form.styledForm div.textArea span.icon {
position: relative;
top: 4px;
}
form.styledForm div.submit {
text-align: center;
}
form.styledForm div.submit button.submit {
background: #19cde0;
border: 0;
color: #323b40;
cursor: pointer;
display: inline-block;
font-size: 24px;
font-weight: 600;
padding: 20px 50px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.styledForm div.submit button.submit span.text {
display: inline-block;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.styledForm div.submit button.submit span.icon {
color: #323b40;
display: inline-block;
margin: 0;
overflow: hidden;
text-align: right;
width: 0;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
form.styledForm div.submit button.submit:hover,
form.styledForm div.submit button.submit:focus {
padding: 20px 25px 20px 45px !important;
}
form.styledForm div.submit button.submit:hover span.icon,
form.styledForm div.submit button.submit:focus span.icon {
width: 30px !important;
}
/* =========================================
- Sub Nav
========================================= */
nav.subNav {
*zoom: 1;
zoom: 1;
width: 100%;
padding-top: 100px;
}
nav.subNav:before,
nav.subNav:after {
content: "";
display: table;
}
nav.subNav:after {
clear: both;
}
nav.subNav:before,
nav.subNav:after {
content: "";
display: table;
}
nav.subNav:after {
clear: both;
}
nav.subNav ul {
*zoom: 1;
zoom: 1;
margin: 0;
padding: 40px 0;
}
nav.subNav ul:before,
nav.subNav ul:after {
content: "";
display: table;
}
nav.subNav ul:after {
clear: both;
}
nav.subNav ul:before,
nav.subNav ul:after {
content: "";
display: table;
}
nav.subNav ul:after {
clear: both;
}
nav.subNav ul li {
display: inline-block;
margin: 10px 0 0 10px;
}
nav.subNav ul li form,
nav.subNav ul li a {
background: #fff;
color: #236069;
display: inline-block;
font-size: 16px;
font-weight: 700;
padding: 12px 30px 12px 20px;
position: relative;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
nav.subNav ul li form::before,
nav.subNav ul li a::before {
background: #fff;
content: "";
height: 16px;
position: absolute;
width: 16px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transform: rotate(45deg) translate3D(1px, 1px, 0);
-moz-transform: rotate(45deg) translate3D(1px, 1px, 0);
-ms-transform: rotate(45deg) translate3D(1px, 1px, 0);
-o-transform: rotate(45deg) translate3D(1px, 1px, 0);
transform: rotate(45deg) translate3D(1px, 1px, 0);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
nav.subNav ul li form:hover,
nav.subNav ul li a:hover,
nav.subNav ul li form:focus,
nav.subNav ul li a:focus {
border-bottom-width: 1px;
}
nav.subNav ul li form:hover::before,
nav.subNav ul li a:hover::before,
nav.subNav ul li form:focus::before,
nav.subNav ul li a:focus::before {
-webkit-transform: rotate(45deg) translate3D(12px, 12px, 0);
-moz-transform: rotate(45deg) translate3D(12px, 12px, 0);
-ms-transform: rotate(45deg) translate3D(12px, 12px, 0);
-o-transform: rotate(45deg) translate3D(12px, 12px, 0);
transform: rotate(45deg) translate3D(12px, 12px, 0);
}
nav.subNav ul li form span,
nav.subNav ul li a span {
color: #cb7777;
font-size: 14px;
margin-right: 4px;
position: relative;
}
nav.subNav ul li form em,
nav.subNav ul li a em {
font-size: 12px;
}
nav.subNav ul li.subNav1 a span {
font-size: 16px;
top: 0;
}
nav.subNav ul li.subNav5 {
cursor: pointer;
position: relative;
}
nav.subNav ul li.subNav5 form::before,
nav.subNav ul li.subNav5 a::before {
display: none;
}
form#programmeSearchForm {
margin: 0;
padding: 8px 12px 1px;
}
input#programmeSearch {
background: transparent;
border: 0;
border-bottom: 1px solid transparent;
color: #cb7777;
font-size: 16px;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
display: inline-block;
width: 200px;
-webkit-appearance: none;
-webkit-border-radius: 0px;
-webkit-font-smoothing: antialiased;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
input#programmeSearch:focus {
border-bottom: 1px solid #dce1df;
}
input#programmeSearch::-webkit-input-placeholder {
color: #236069;
font-size: 16px;
letter-spacing: -0.025em;
line-height: 22px;
}
input#programmeSearch:focus::-webkit-input-placeholder {
color: #dce1df;
}
input#programmeSearch:-moz-placeholder {
color: #236069;
font-size: 16px;
letter-spacing: -0.025em;
line-height: 22px;
}
input#programmeSearch:focus:-moz-placeholder {
color: #dce1df;
}
input#programmeSearch::-moz-placeholder {
color: #236069;
font-size: 16px;
letter-spacing: -0.025em;
line-height: 22px;
}
input#programmeSearch:focus::-moz-placeholder {
color: #dce1df;
}
input#programmeSearch:-ms-input-placeholder {
color: #236069;
font-size: 16px;
letter-spacing: -0.025em;
line-height: 22px;
}
input#programmeSearch:focus:-ms-input-placeholder {
color: #dce1df;
}
input#programmeSearch::-webkit-search-decoration,
input#programmeSearch::-webkit-search-cancel-button,
input#programmeSearch::-webkit-search-results-button,
input#programmeSearch::-webkit-search-results-decoration {
display: none;
}
span.noResults {
font-size: 30px;
}
div.liveResults {
background: #fff;
display: none;
left: 0;
max-height: 300px;
overflow: scroll;
position: absolute;
top: 36px;
width: 246px;
z-index: 10;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
div.liveResults.show {
display: block;
}
div.liveResults ul {
display: none;
margin: 0;
padding: 0;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.liveResults ul.show {
display: block;
}
div.liveResults ul.offFocus {
display: none !important;
}
div.liveResults ul li {
display: block;
margin: 0 0 0 2px;
padding: 0 10px;
}
div.liveResults ul li:first-child {
padding: 10px 10px 0;
}
div.liveResults ul li:last-child {
padding: 0 10px 10px;
}
.subSection1 nav.subNav ul li.subNav1 a {
background: #236069;
color: #fff;
}
.subSection1 nav.subNav ul li.subNav1 a span {
color: #fff;
}
.subSection1 nav.subNav ul li.subNav1 a::before {
background: #236069;
-webkit-transform: rotate(45deg) translate3D(12px, 12px, 0);
-moz-transform: rotate(45deg) translate3D(12px, 12px, 0);
-ms-transform: rotate(45deg) translate3D(12px, 12px, 0);
-o-transform: rotate(45deg) translate3D(12px, 12px, 0);
transform: rotate(45deg) translate3D(12px, 12px, 0);
}
.subSection1 nav.subNav ul li.subNav1 a,
.subSection2 nav.subNav ul li.subNav2 a,
.subSection3 nav.subNav ul li.subNav3 a,
.subSection4 nav.subNav ul li.subNav4 a,
.subSection5 nav.subNav ul li.subNav5 a,
.subSection6 nav.subNav ul li.subNav6 a,
.subSection7 nav.subNav ul li.subNav7 a,
.subSection8 nav.subNav ul li.subNav8 a,
.subSection9 nav.subNav ul li.subNav9 a,
.subSection10 nav.subNav ul li.subNav10 a {
background: #236069;
color: #fff;
}
.subSection1 nav.subNav ul li.subNav1 a span,
.subSection2 nav.subNav ul li.subNav2 a span,
.subSection3 nav.subNav ul li.subNav3 a span,
.subSection4 nav.subNav ul li.subNav4 a span,
.subSection5 nav.subNav ul li.subNav5 a span,
.subSection6 nav.subNav ul li.subNav6 a span,
.subSection7 nav.subNav ul li.subNav7 a span,
.subSection8 nav.subNav ul li.subNav8 a span,
.subSection9 nav.subNav ul li.subNav9 a span,
.subSection10 nav.subNav ul li.subNav10 a span {
color: #fff;
}
.subSection1 nav.subNav ul li.subNav1 a::before,
.subSection2 nav.subNav ul li.subNav2 a::before,
.subSection3 nav.subNav ul li.subNav3 a::before,
.subSection4 nav.subNav ul li.subNav4 a::before,
.subSection5 nav.subNav ul li.subNav5 a::before,
.subSection6 nav.subNav ul li.subNav6 a::before,
.subSection7 nav.subNav ul li.subNav7 a::before,
.subSection8 nav.subNav ul li.subNav8 a::before,
.subSection9 nav.subNav ul li.subNav9 a::before,
.subSection10 nav.subNav ul li.subNav10 a::before {
background: #236069;
-webkit-transform: rotate(45deg) translate3D(12px, 12px, 0);
-moz-transform: rotate(45deg) translate3D(12px, 12px, 0);
-ms-transform: rotate(45deg) translate3D(12px, 12px, 0);
-o-transform: rotate(45deg) translate3D(12px, 12px, 0);
transform: rotate(45deg) translate3D(12px, 12px, 0);
}
.subSection1 nav.subNav.browseDrop ul li.subNav1 a::before,
.subSection2 nav.subNav.browseDrop ul li.subNav2 a::before,
.subSection3 nav.subNav.browseDrop ul li.subNav3 a::before,
.subSection4 nav.subNav.browseDrop ul li.subNav4 a::before,
.subSection5 nav.subNav.browseDrop ul li.subNav5 a::before,
.subSection6 nav.subNav.browseDrop ul li.subNav6 a::before,
.subSection7 nav.subNav.browseDrop ul li.subNav7 a::before,
.subSection8 nav.subNav.browseDrop ul li.subNav8 a::before,
.subSection9 nav.subNav.browseDrop ul li.subNav9 a::before,
.subSection10 nav.subNav.browseDrop ul li.subNav10 a::before {
-webkit-transform: rotate(0) translate3D(0, 0, 0);
-moz-transform: rotate(0) translate3D(0, 0, 0);
-ms-transform: rotate(0) translate3D(0, 0, 0);
-o-transform: rotate(0) translate3D(0, 0, 0);
transform: rotate(0) translate3D(0, 0, 0);
}
.subSection5 div.liveResults {
background: #236069;
}
.subSection5 nav.subNav ul li.subNav5 form {
background: #236069;
}
.subSection5 nav.subNav ul li.subNav5 form span.icon {
color: #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch {
color: #cb7777;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:focus {
border-bottom: 1px solid #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-webkit-input-placeholder {
color: #dce1df;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:focus::-webkit-input-placeholder {
color: #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:-moz-placeholder {
color: #dce1df;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:focus:-moz-placeholder {
color: #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-moz-placeholder {
color: #dce1df;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:focus::-moz-placeholder {
color: #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:-ms-input-placeholder {
color: #dce1df;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch:focus:-ms-input-placeholder {
color: #fff;
}
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-webkit-search-decoration,
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-webkit-search-cancel-button,
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-webkit-search-results-button,
.subSection5 nav.subNav ul li.subNav5 form input#programmeSearch::-webkit-search-results-decoration {
display: none;
}
/* -----------------------------------------
-- Browse Nav
----------------------------------------- */
nav.browseNav ul {
margin: 0;
padding: 10px;
*zoom: 1;
zoom: 1;
}
nav.browseNav ul:before,
nav.browseNav ul:after {
content: "";
display: table;
}
nav.browseNav ul:after {
clear: both;
}
nav.browseNav ul:before,
nav.browseNav ul:after {
content: "";
display: table;
}
nav.browseNav ul:after {
clear: both;
}
nav.browseNav ul li {
float: left;
}
nav.browseNav ul li a {
background: #e0e4e2;
border: 1px solid #d3d8d6;
color: #236069;
display: block;
font-size: 14px;
font-weight: 700;
margin: 0 10px 10px 0;
padding: 8px 14px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.1s 0 ease-in;
-moz-transition: all 0.1s 0 ease-in;
-ms-transition: all 0.1s 0 ease-in;
-o-transition: all 0.1s 0 ease-in;
transition: all 0.1s 0 ease-in;
}
nav.browseNav ul li a span {
background: #cb7777;
color: #e0e4e2;
display: inline-block;
font-size: 10px;
height: 20px;
margin-left: 40px;
text-align: center;
width: 20px;
line-height: 1.9;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
nav.browseNav ul li a:hover,
nav.browseNav ul li a:focus {
background: rgba(255, 255, 255, 0.75);
border-bottom-width: 1px;
}
nav li.browseDrop a {
padding-right: 40px !important;
position: relative;
}
nav li.browseDrop em {
position: absolute;
right: 16px;
top: 16px;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
nav.browseDrop li.browseDrop a::before {
-webkit-transform: rotate(45deg) translate3D(12px, 12px, 0);
-moz-transform: rotate(45deg) translate3D(12px, 12px, 0);
-ms-transform: rotate(45deg) translate3D(12px, 12px, 0);
-o-transform: rotate(45deg) translate3D(12px, 12px, 0);
transform: rotate(45deg) translate3D(12px, 12px, 0);
}
nav.browseDrop li.browseDrop em {
top: 14px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
nav.browseNav {
height: auto;
max-height: 0;
overflow: hidden;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
nav.browseNav.browseDrop {
max-height: 620px;
}
/* -----------------------------------------
-- No Javascript Alert
----------------------------------------- */
html.no-js div.javascriptRequired {
background: #333;
color: #85daff;
font-size: 48px;
font-weight: 400;
padding: 120px 40px;
text-align: center;
}
/* =========================================
- Feature Grid
========================================= */
ul.featureGrid {
*zoom: 1;
zoom: 1;
margin: 1px;
font-size: 0;
}
ul.featureGrid:before,
ul.featureGrid:after {
content: "";
display: table;
}
ul.featureGrid:after {
clear: both;
}
ul.featureGrid:before,
ul.featureGrid:after {
content: "";
display: table;
}
ul.featureGrid:after {
clear: both;
}
ul.featureGrid > li {
/*float: left;*/
display: inline-block;
vertical-align: top;
}
a.featureFrame {
background: #323b40;
display: block;
margin: 1px;
overflow: hidden;
position: relative;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
border-bottom: 0;
}
a.featureFrame:hover {
border-bottom: 0;
}
div.featureBillingHolder {
background: #323b40;
height: 100%;
position: absolute;
width: 100%;
z-index: 2;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
-webkit-transform: translate3D(0, 100%, 0);
-moz-transform: translate3D(0, 100%, 0);
-ms-transform: translate3D(0, 100%, 0);
-o-transform: translate3D(0, 100%, 0);
transform: translate3D(0, 100%, 0);
}
.no-csstransforms3d div.featureBillingHolder {
top: 100%;
}
div.featureBilling {
opacity: 0;
padding: 100% 0 0;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-ms-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
div.featureBilling > span.icon {
color: #fff;
float: left;
font-size: 60px;
display: block;
padding-left: 10%;
position: relative;
top: -8px;
width: 20%;
}
div.featureMetaHolder {
color: #fff;
float: left;
margin: 0 5%;
width: 90%;
}
div.featureMetaHolder h2 {
font-size: 18px;
line-height: 1.2em;
font-weight: 700;
}
div.featureMetaHolder h2 span.tagline {
font-size: 14px;
display: block;
}
ul.featureMeta {
font-size: 14px;
line-height: 18px;
padding-right: 20px;
}
ul.featureMeta li {
margin-bottom: .25em;
padding-left: 1.8em;
}
ul.featureMeta li span.icon {
float: left;
font-size: 12px;
margin-left: -1.8em;
position: relative;
top: 2px;
}
a.featureFrame > img {
min-width: 100%;
opacity: .55;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
-webkit-transform: translate3D(0, 0, 0) scale(1.15);
-moz-transform: translate3D(0, 0, 0) scale(1.15);
-ms-transform: translate3D(0, 0, 0) scale(1.15);
-o-transform: translate3D(0, 0, 0) scale(1.15);
transform: translate3D(0, 0, 0) scale(1.15);
}
a.featureFrame:hover > div.featureBillingHolder,
a.featureFrame:focus > div.featureBillingHolder {
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
.no-csstransforms3d a.featureFrame:hover > div.featureBillingHolder,
.no-csstransforms3d a.featureFrame:focus > div.featureBillingHolder {
top: 0;
}
a.featureFrame:hover > img,
a.featureFrame:focus > img {
opacity: .15;
-webkit-transform: translate3D(0, -15%, 0) scale(1);
-moz-transform: translate3D(0, -15%, 0) scale(1);
-ms-transform: translate3D(0, -15%, 0) scale(1);
-o-transform: translate3D(0, -15%, 0) scale(1);
transform: translate3D(0, -15%, 0) scale(1);
}
a.featureFrame:hover div.featureBilling,
a.featureFrame:focus div.featureBilling {
opacity: 1;
padding: 10%;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
div.featureInfo {
bottom: 0;
left: 10px;
position: absolute;
-webkit-transition: all 0.4s ease-in;
-moz-transition: all 0.4s ease-in;
-ms-transition: all 0.4s ease-in;
-o-transition: all 0.4s ease-in;
transition: all 0.4s ease-in;
z-index: 1;
}
div.featureInfo h2 {
color: #fff;
font-size: 24px;
font-weight: 700;
padding: 0 20px 0 58px;
text-shadow: 0 0 3px #000;
}
div.featureInfo span.icon {
float: left;
font-size: 48px;
margin-left: -58px;
}
div.featureInfo span.tagline {
display: block;
font-size: 18px;
font-weight: 500;
}
@media only screen and (min-width: 600px) {
ul.featureGrid > li {
width: 50%;
}
ul.featureGrid > li div.featureInfo h2 {
font-size: 18px;
padding-left: 46px;
}
ul.featureGrid > li div.featureInfo span.icon {
font-size: 36px;
margin-left: -46px;
}
ul.featureGrid > li div.featureInfo span.tagline {
font-size: 16px;
}
}
@media only screen and (min-width: 760px) {
ul.featureGrid > li div.featureInfo h2 {
font-size: 24px;
padding-left: 58px;
}
ul.featureGrid > li div.featureInfo span.icon {
font-size: 48px;
margin-left: -58px;
}
ul.featureGrid > li div.featureInfo span.tagline {
font-size: 18px;
}
}
@media only screen and (min-width: 880px) {
ul.featureGrid li.feature1 div.featureBilling > span.icon,
ul.featureGrid li.feature2 div.featureBilling > span.icon,
ul.featureGrid li.feature6 div.featureBilling > span.icon,
ul.featureGrid li.feature7 div.featureBilling > span.icon,
ul.featureGrid li.feature11 div.featureBilling > span.icon,
ul.featureGrid li.feature12 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2,
ul.featureGrid li.feature2 div.featureMetaHolder h2,
ul.featureGrid li.feature6 div.featureMetaHolder h2,
ul.featureGrid li.feature7 div.featureMetaHolder h2,
ul.featureGrid li.feature11 div.featureMetaHolder h2,
ul.featureGrid li.feature12 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature2 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature6 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature7 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature11 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature12 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature1 ul.featureMeta,
ul.featureGrid li.feature2 ul.featureMeta,
ul.featureGrid li.feature6 ul.featureMeta,
ul.featureGrid li.feature7 ul.featureMeta,
ul.featureGrid li.feature11 ul.featureMeta,
ul.featureGrid li.feature12 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature1 ul.featureMeta span.icon,
ul.featureGrid li.feature2 ul.featureMeta span.icon,
ul.featureGrid li.feature6 ul.featureMeta span.icon,
ul.featureGrid li.feature7 ul.featureMeta span.icon,
ul.featureGrid li.feature11 ul.featureMeta span.icon,
ul.featureGrid li.feature12 ul.featureMeta span.icon {
font-size: 14px;
}
ul.featureGrid li.feature3,
ul.featureGrid li.feature4,
ul.featureGrid li.feature5,
ul.featureGrid li.feature8,
ul.featureGrid li.feature9,
ul.featureGrid li.feature10 {
width: 33.33333333%;
}
ul.featureGrid li.feature3 div.featureInfo h2,
ul.featureGrid li.feature4 div.featureInfo h2,
ul.featureGrid li.feature5 div.featureInfo h2,
ul.featureGrid li.feature8 div.featureInfo h2,
ul.featureGrid li.feature9 div.featureInfo h2,
ul.featureGrid li.feature10 div.featureInfo h2 {
font-size: 18px;
padding-left: 46px;
}
ul.featureGrid li.feature3 div.featureInfo span.icon,
ul.featureGrid li.feature4 div.featureInfo span.icon,
ul.featureGrid li.feature5 div.featureInfo span.icon,
ul.featureGrid li.feature8 div.featureInfo span.icon,
ul.featureGrid li.feature9 div.featureInfo span.icon,
ul.featureGrid li.feature10 div.featureInfo span.icon {
font-size: 36px;
margin-left: -46px;
}
ul.featureGrid li.feature3 div.featureInfo span.tagline,
ul.featureGrid li.feature4 div.featureInfo span.tagline,
ul.featureGrid li.feature5 div.featureInfo span.tagline,
ul.featureGrid li.feature8 div.featureInfo span.tagline,
ul.featureGrid li.feature9 div.featureInfo span.tagline,
ul.featureGrid li.feature10 div.featureInfo span.tagline {
font-size: 16px;
}
}
@media only screen and (min-width: 1180px) {
ul.featureGrid > li {
width: 50%;
}
ul.featureGrid li.feature1 div.featureBilling > span.icon,
ul.featureGrid li.feature2 div.featureBilling > span.icon {
font-size: 72px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2,
ul.featureGrid li.feature2 div.featureMetaHolder h2 {
font-size: 30px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature2 div.featureMetaHolder h2 span.tagline {
font-size: 24px;
}
ul.featureGrid li.feature1 ul.featureMeta,
ul.featureGrid li.feature2 ul.featureMeta {
font-size: 24px;
line-height: 30px;
}
ul.featureGrid li.feature1 ul.featureMeta span.icon,
ul.featureGrid li.feature2 ul.featureMeta span.icon {
font-size: 18px;
}
ul.featureGrid li.feature3,
ul.featureGrid li.feature4,
ul.featureGrid li.feature5,
ul.featureGrid li.feature10,
ul.featureGrid li.feature11,
ul.featureGrid li.feature12 {
width: 33.33333333%;
}
ul.featureGrid li.feature3 div.featureBilling > span.icon,
ul.featureGrid li.feature4 div.featureBilling > span.icon,
ul.featureGrid li.feature5 div.featureBilling > span.icon,
ul.featureGrid li.feature10 div.featureBilling > span.icon,
ul.featureGrid li.feature11 div.featureBilling > span.icon,
ul.featureGrid li.feature12 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature3 div.featureMetaHolder h2,
ul.featureGrid li.feature4 div.featureMetaHolder h2,
ul.featureGrid li.feature5 div.featureMetaHolder h2,
ul.featureGrid li.feature10 div.featureMetaHolder h2,
ul.featureGrid li.feature11 div.featureMetaHolder h2,
ul.featureGrid li.feature12 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature3 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature4 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature5 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature10 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature11 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature12 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature3 ul.featureMeta,
ul.featureGrid li.feature4 ul.featureMeta,
ul.featureGrid li.feature5 ul.featureMeta,
ul.featureGrid li.feature10 ul.featureMeta,
ul.featureGrid li.feature11 ul.featureMeta,
ul.featureGrid li.feature12 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature3 ul.featureMeta span.icon,
ul.featureGrid li.feature4 ul.featureMeta span.icon,
ul.featureGrid li.feature5 ul.featureMeta span.icon,
ul.featureGrid li.feature10 ul.featureMeta span.icon,
ul.featureGrid li.feature11 ul.featureMeta span.icon,
ul.featureGrid li.feature12 ul.featureMeta span.icon {
font-size: 14px;
}
ul.featureGrid li.feature3 div.featureInfo h2,
ul.featureGrid li.feature4 div.featureInfo h2,
ul.featureGrid li.feature5 div.featureInfo h2,
ul.featureGrid li.feature10 div.featureInfo h2,
ul.featureGrid li.feature11 div.featureInfo h2,
ul.featureGrid li.feature12 div.featureInfo h2 {
font-size: 24px;
padding-left: 58px;
}
ul.featureGrid li.feature3 div.featureInfo span.icon,
ul.featureGrid li.feature4 div.featureInfo span.icon,
ul.featureGrid li.feature5 div.featureInfo span.icon,
ul.featureGrid li.feature10 div.featureInfo span.icon,
ul.featureGrid li.feature11 div.featureInfo span.icon,
ul.featureGrid li.feature12 div.featureInfo span.icon {
font-size: 48px;
margin-left: -58px;
}
ul.featureGrid li.feature3 div.featureInfo span.tagline,
ul.featureGrid li.feature4 div.featureInfo span.tagline,
ul.featureGrid li.feature5 div.featureInfo span.tagline,
ul.featureGrid li.feature10 div.featureInfo span.tagline,
ul.featureGrid li.feature11 div.featureInfo span.tagline,
ul.featureGrid li.feature12 div.featureInfo span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature6,
ul.featureGrid li.feature7,
ul.featureGrid li.feature8,
ul.featureGrid li.feature9 {
width: 25%;
}
ul.featureGrid li.feature6 div.featureBilling > span.icon,
ul.featureGrid li.feature7 div.featureBilling > span.icon,
ul.featureGrid li.feature8 div.featureBilling > span.icon,
ul.featureGrid li.feature9 div.featureBilling > span.icon {
font-size: 48px;
}
ul.featureGrid li.feature6 div.featureMetaHolder h2,
ul.featureGrid li.feature7 div.featureMetaHolder h2,
ul.featureGrid li.feature8 div.featureMetaHolder h2,
ul.featureGrid li.feature9 div.featureMetaHolder h2 {
font-size: 18px;
}
ul.featureGrid li.feature6 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature7 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature8 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature9 div.featureMetaHolder h2 span.tagline {
font-size: 14px;
}
ul.featureGrid li.feature6 ul.featureMeta,
ul.featureGrid li.feature7 ul.featureMeta,
ul.featureGrid li.feature8 ul.featureMeta,
ul.featureGrid li.feature9 ul.featureMeta {
font-size: 14px;
line-height: 18px;
}
ul.featureGrid li.feature6 ul.featureMeta span.icon,
ul.featureGrid li.feature7 ul.featureMeta span.icon,
ul.featureGrid li.feature8 ul.featureMeta span.icon,
ul.featureGrid li.feature9 ul.featureMeta span.icon {
font-size: 12px;
}
ul.featureGrid li.feature6 div.featureInfo h2,
ul.featureGrid li.feature7 div.featureInfo h2,
ul.featureGrid li.feature8 div.featureInfo h2,
ul.featureGrid li.feature9 div.featureInfo h2 {
font-size: 18px;
padding-left: 46px;
}
ul.featureGrid li.feature6 div.featureInfo span.icon,
ul.featureGrid li.feature7 div.featureInfo span.icon,
ul.featureGrid li.feature8 div.featureInfo span.icon,
ul.featureGrid li.feature9 div.featureInfo span.icon {
font-size: 36px;
margin-left: -46px;
}
ul.featureGrid li.feature6 div.featureInfo span.tagline,
ul.featureGrid li.feature7 div.featureInfo span.tagline,
ul.featureGrid li.feature8 div.featureInfo span.tagline,
ul.featureGrid li.feature9 div.featureInfo span.tagline {
font-size: 16px;
}
}
@media only screen and (min-width: 1500px) {
ul.featureGrid > li {
width: 33.33333333%;
}
ul.featureGrid li.feature1 div.featureBilling > span.icon,
ul.featureGrid li.feature2 div.featureBilling > span.icon,
ul.featureGrid li.feature3 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2,
ul.featureGrid li.feature2 div.featureMetaHolder h2,
ul.featureGrid li.feature3 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature2 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature3 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature1 ul.featureMeta,
ul.featureGrid li.feature2 ul.featureMeta,
ul.featureGrid li.feature3 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature1 ul.featureMeta span.icon,
ul.featureGrid li.feature2 ul.featureMeta span.icon,
ul.featureGrid li.feature3 ul.featureMeta span.icon {
font-size: 14px;
}
ul.featureGrid li.feature4,
ul.featureGrid li.feature5,
ul.featureGrid li.feature6,
ul.featureGrid li.feature7 {
width: 25%;
}
ul.featureGrid li.feature4 div.featureInfo h2,
ul.featureGrid li.feature5 div.featureInfo h2,
ul.featureGrid li.feature6 div.featureInfo h2,
ul.featureGrid li.feature7 div.featureInfo h2 {
font-size: 24px;
padding-left: 58px;
}
ul.featureGrid li.feature4 div.featureInfo span.icon,
ul.featureGrid li.feature5 div.featureInfo span.icon,
ul.featureGrid li.feature6 div.featureInfo span.icon,
ul.featureGrid li.feature7 div.featureInfo span.icon {
font-size: 48px;
margin-left: -58px;
}
ul.featureGrid li.feature4 div.featureInfo span.tagline,
ul.featureGrid li.feature5 div.featureInfo span.tagline,
ul.featureGrid li.feature6 div.featureInfo span.tagline,
ul.featureGrid li.feature7 div.featureInfo span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature4 div.featureBilling > span.icon,
ul.featureGrid li.feature5 div.featureBilling > span.icon,
ul.featureGrid li.feature6 div.featureBilling > span.icon,
ul.featureGrid li.feature7 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature4 div.featureMetaHolder h2,
ul.featureGrid li.feature5 div.featureMetaHolder h2,
ul.featureGrid li.feature6 div.featureMetaHolder h2,
ul.featureGrid li.feature7 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature4 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature5 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature6 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature7 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature4 ul.featureMeta,
ul.featureGrid li.feature5 ul.featureMeta,
ul.featureGrid li.feature6 ul.featureMeta,
ul.featureGrid li.feature7 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature4 ul.featureMeta span.icon,
ul.featureGrid li.feature5 ul.featureMeta span.icon,
ul.featureGrid li.feature6 ul.featureMeta span.icon,
ul.featureGrid li.feature7 ul.featureMeta span.icon {
font-size: 14px;
}
ul.featureGrid li.feature8,
ul.featureGrid li.feature9,
ul.featureGrid li.feature10,
ul.featureGrid li.feature11,
ul.featureGrid li.feature12 {
width: 20%;
}
ul.featureGrid li.feature8 div.featureInfo h2,
ul.featureGrid li.feature9 div.featureInfo h2,
ul.featureGrid li.feature10 div.featureInfo h2,
ul.featureGrid li.feature11 div.featureInfo h2,
ul.featureGrid li.feature12 div.featureInfo h2 {
font-size: 18px;
padding-left: 46px;
}
ul.featureGrid li.feature8 div.featureInfo span.icon,
ul.featureGrid li.feature9 div.featureInfo span.icon,
ul.featureGrid li.feature10 div.featureInfo span.icon,
ul.featureGrid li.feature11 div.featureInfo span.icon,
ul.featureGrid li.feature12 div.featureInfo span.icon {
font-size: 36px;
margin-left: -46px;
}
ul.featureGrid li.feature8 div.featureInfo span.tagline,
ul.featureGrid li.feature9 div.featureInfo span.tagline,
ul.featureGrid li.feature10 div.featureInfo span.tagline,
ul.featureGrid li.feature11 div.featureInfo span.tagline,
ul.featureGrid li.feature12 div.featureInfo span.tagline {
font-size: 16px;
}
ul.featureGrid li.feature8 div.featureBilling > span.icon,
ul.featureGrid li.feature9 div.featureBilling > span.icon,
ul.featureGrid li.feature10 div.featureBilling > span.icon,
ul.featureGrid li.feature11 div.featureBilling > span.icon,
ul.featureGrid li.feature12 div.featureBilling > span.icon {
font-size: 48px;
}
ul.featureGrid li.feature8 div.featureMetaHolder h2,
ul.featureGrid li.feature9 div.featureMetaHolder h2,
ul.featureGrid li.feature10 div.featureMetaHolder h2,
ul.featureGrid li.feature11 div.featureMetaHolder h2,
ul.featureGrid li.feature12 div.featureMetaHolder h2 {
font-size: 18px;
}
ul.featureGrid li.feature8 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature9 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature10 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature11 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature12 div.featureMetaHolder h2 span.tagline {
font-size: 14px;
}
ul.featureGrid li.feature8 ul.featureMeta,
ul.featureGrid li.feature9 ul.featureMeta,
ul.featureGrid li.feature10 ul.featureMeta,
ul.featureGrid li.feature11 ul.featureMeta,
ul.featureGrid li.feature12 ul.featureMeta {
font-size: 14px;
line-height: 18px;
}
ul.featureGrid li.feature8 ul.featureMeta span.icon,
ul.featureGrid li.feature9 ul.featureMeta span.icon,
ul.featureGrid li.feature10 ul.featureMeta span.icon,
ul.featureGrid li.feature11 ul.featureMeta span.icon,
ul.featureGrid li.feature12 ul.featureMeta span.icon {
font-size: 12px;
}
}
@media only screen and (min-width: 2270px) {
ul.featureGrid li.feature1 div.featureBilling > span.icon,
ul.featureGrid li.feature2 div.featureBilling > span.icon,
ul.featureGrid li.feature3 div.featureBilling > span.icon {
font-size: 72px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2,
ul.featureGrid li.feature2 div.featureMetaHolder h2,
ul.featureGrid li.feature3 div.featureMetaHolder h2 {
font-size: 30px;
}
ul.featureGrid li.feature1 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature2 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature3 div.featureMetaHolder h2 span.tagline {
font-size: 24px;
}
ul.featureGrid li.feature1 ul.featureMeta,
ul.featureGrid li.feature2 ul.featureMeta,
ul.featureGrid li.feature3 ul.featureMeta {
font-size: 24px;
line-height: 30px;
}
ul.featureGrid li.feature1 ul.featureMeta span.icon,
ul.featureGrid li.feature2 ul.featureMeta span.icon,
ul.featureGrid li.feature3 ul.featureMeta span.icon {
font-size: 18px;
}
ul.featureGrid li.feature4 div.featureInfo h2,
ul.featureGrid li.feature5 div.featureInfo h2,
ul.featureGrid li.feature6 div.featureInfo h2,
ul.featureGrid li.feature7 div.featureInfo h2 {
font-size: 24px;
padding-left: 58px;
}
ul.featureGrid li.feature4 div.featureInfo span.icon,
ul.featureGrid li.feature5 div.featureInfo span.icon,
ul.featureGrid li.feature6 div.featureInfo span.icon,
ul.featureGrid li.feature7 div.featureInfo span.icon {
font-size: 48px;
margin-left: -58px;
}
ul.featureGrid li.feature4 div.featureInfo span.tagline,
ul.featureGrid li.feature5 div.featureInfo span.tagline,
ul.featureGrid li.feature6 div.featureInfo span.tagline,
ul.featureGrid li.feature7 div.featureInfo span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature4 div.featureBilling > span.icon,
ul.featureGrid li.feature5 div.featureBilling > span.icon,
ul.featureGrid li.feature6 div.featureBilling > span.icon,
ul.featureGrid li.feature7 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature4 div.featureMetaHolder h2,
ul.featureGrid li.feature5 div.featureMetaHolder h2,
ul.featureGrid li.feature6 div.featureMetaHolder h2,
ul.featureGrid li.feature7 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature4 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature5 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature6 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature7 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature4 ul.featureMeta,
ul.featureGrid li.feature5 ul.featureMeta,
ul.featureGrid li.feature6 ul.featureMeta,
ul.featureGrid li.feature7 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature4 ul.featureMeta span.icon,
ul.featureGrid li.feature5 ul.featureMeta span.icon,
ul.featureGrid li.feature6 ul.featureMeta span.icon,
ul.featureGrid li.feature7 ul.featureMeta span.icon {
font-size: 14px;
}
ul.featureGrid li.feature8 div.featureInfo h2,
ul.featureGrid li.feature9 div.featureInfo h2,
ul.featureGrid li.feature10 div.featureInfo h2,
ul.featureGrid li.feature11 div.featureInfo h2,
ul.featureGrid li.feature12 div.featureInfo h2 {
font-size: 24px;
padding-left: 58px;
}
ul.featureGrid li.feature8 div.featureInfo span.icon,
ul.featureGrid li.feature9 div.featureInfo span.icon,
ul.featureGrid li.feature10 div.featureInfo span.icon,
ul.featureGrid li.feature11 div.featureInfo span.icon,
ul.featureGrid li.feature12 div.featureInfo span.icon {
font-size: 48px;
margin-left: -58px;
}
ul.featureGrid li.feature8 div.featureInfo span.tagline,
ul.featureGrid li.feature9 div.featureInfo span.tagline,
ul.featureGrid li.feature10 div.featureInfo span.tagline,
ul.featureGrid li.feature11 div.featureInfo span.tagline,
ul.featureGrid li.feature12 div.featureInfo span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature8 div.featureBilling > span.icon,
ul.featureGrid li.feature9 div.featureBilling > span.icon,
ul.featureGrid li.feature10 div.featureBilling > span.icon,
ul.featureGrid li.feature11 div.featureBilling > span.icon,
ul.featureGrid li.feature12 div.featureBilling > span.icon {
font-size: 60px;
}
ul.featureGrid li.feature8 div.featureMetaHolder h2,
ul.featureGrid li.feature9 div.featureMetaHolder h2,
ul.featureGrid li.feature10 div.featureMetaHolder h2,
ul.featureGrid li.feature11 div.featureMetaHolder h2,
ul.featureGrid li.feature12 div.featureMetaHolder h2 {
font-size: 24px;
}
ul.featureGrid li.feature8 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature9 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature10 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature11 div.featureMetaHolder h2 span.tagline,
ul.featureGrid li.feature12 div.featureMetaHolder h2 span.tagline {
font-size: 18px;
}
ul.featureGrid li.feature8 ul.featureMeta,
ul.featureGrid li.feature9 ul.featureMeta,
ul.featureGrid li.feature10 ul.featureMeta,
ul.featureGrid li.feature11 ul.featureMeta,
ul.featureGrid li.feature12 ul.featureMeta {
font-size: 18px;
line-height: 24px;
}
ul.featureGrid li.feature8 ul.featureMeta span.icon,
ul.featureGrid li.feature9 ul.featureMeta span.icon,
ul.featureGrid li.feature10 ul.featureMeta span.icon,
ul.featureGrid li.feature11 ul.featureMeta span.icon,
ul.featureGrid li.feature12 ul.featureMeta span.icon {
font-size: 14px;
}
}
/* =========================================
- One Size Grid
========================================= */
ul.oneSizeGrid {
text-align: center;
}
ul.oneSizeGrid li {
display: inline-block;
max-width: 464px;
text-align: left;
}
/* =========================================
- Small Grid
========================================= */
ul.smallGrid {
text-align: center;
}
ul.smallGrid li {
display: inline-block;
max-width: 300px;
text-align: left;
}
/* =========================================
- Level 2
========================================= */
img.hideForPinterest {
left: 0;
opacity: 0;
position: absolute;
top: 0;
z-index: -100;
}
/* -----------------------------------------
-- Player Area
----------------------------------------- */
section.playerSection {
color: #fff;
/*.fullBackgroundInline;*/
padding: 0 20px 100px;
position: relative;
}
section.playerSection::before {
content: "";
background: #323b40;
height: 100%;
left: 0;
opacity: .5;
position: absolute;
top: 0;
z-index: 0;
width: 100%;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
section.playerSection.fadeIt div.player {
-webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
}
section.playerSection.fadeIt::before {
opacity: .9;
}
section.playerSection.live::before {
background: #4f585e;
}
div.playerHead {
margin: auto;
max-width: 1408px;
padding: 100px 0 50px;
position: relative;
text-shadow: 0 0 6px #000;
z-index: 10;
}
div.playerHead h1 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0;
}
div.playerHead span.tagline {
font-size: 24px;
font-weight: 400;
display: block;
}
div.playerHead div.share h2 {
display: none;
font-size: 24px;
font-weight: 700;
padding: 0;
}
div.playerHead div.share a {
color: #323b40;
display: inline-block;
line-height: 1;
margin: 10px 8px 0 0;
padding: 6px;
text-shadow: none;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 6px #000;
-moz-box-shadow: 0 0 6px #000;
box-shadow: 0 0 6px #000;
}
div.playerHead div.share span.icon {
font-size: 16px;
}
section.live div.playerHead {
text-shadow: none;
}
section.live div.playerHead div.share a {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
div.playerHead::before {
bottom: 0;
content: "";
background: #fff;
background: rgba(255, 255, 255, 0.8);
display: block;
height: 2px;
left: 0;
position: absolute;
width: 100%;
-webkit-transition: all 0.3s 0.2s ease-in;
-moz-transition: all 0.3s 0.2s ease-in;
-ms-transition: all 0.3s 0.2s ease-in;
-o-transition: all 0.3s 0.2s ease-in;
transition: all 0.3s 0.2s ease-in;
}
div.playerHolder {
margin: auto;
max-width: 1408px;
}
div.playerHolderInner {
height: 0;
padding-bottom: 56.25%;
position: relative;
width: 100%;
}
div.playerHolderInner a.videoPlay {
color: #fff;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.1s 0 ease-in;
-moz-transition: all 0.1s 0 ease-in;
-ms-transition: all 0.1s 0 ease-in;
-o-transition: all 0.1s 0 ease-in;
transition: all 0.1s 0 ease-in;
z-index: 10000000;
}
div.playerHolderInner a.videoPlay span.icon {
font-size: 100px;
height: 100px;
left: 50%;
margin: -50px 0 0 -50px;
position: absolute;
text-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
top: 50%;
width: 100px;
-webkit-transition: all 0.1s 0 ease-in;
-moz-transition: all 0.1s 0 ease-in;
-ms-transition: all 0.1s 0 ease-in;
-o-transition: all 0.1s 0 ease-in;
transition: all 0.1s 0 ease-in;
}
div.playerHolderInner a.videoPlay:hover,
div.playerHolderInner a.videoPlay:focus {
-webkit-transform: scale(1.01);
-moz-transform: scale(1.01);
-ms-transform: scale(1.01);
-o-transform: scale(1.01);
transform: scale(1.01);
}
div.playerHolderInner a.videoPlay:hover span.icon,
div.playerHolderInner a.videoPlay:focus span.icon {
text-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
}
div.playerHolderInner a.videoPlay:active {
-webkit-transform: scale(1.025);
-moz-transform: scale(1.025);
-ms-transform: scale(1.025);
-o-transform: scale(1.025);
transform: scale(1.025);
}
div.playerHolderInner a.videoPlay:active span.icon {
text-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}
div.playerHolderInner div.player {
background: #fff;
background: rgba(255, 255, 255, 0.8);
height: 0;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
-webkit-transition: all 0.3s 0.75s ease-in;
-moz-transition: all 0.3s 0.75s ease-in;
-ms-transition: all 0.3s 0.75s ease-in;
-o-transition: all 0.3s 0.75s ease-in;
transition: all 0.3s 0.75s ease-in;
}
div.playerHolderInner div.player span.icon {
color: #323b40;
font-size: 300px;
height: 300px;
left: 50%;
margin: -150px 0 0 -150px;
opacity: 0;
position: absolute;
text-shadow: 0 0 30px #fff;
top: 50%;
width: 300px;
/*.animation(spin, 1.2s, 0, linear, infinite, forwards);*/
-webkit-transition: all 0.3s 0.75s ease-in;
-moz-transition: all 0.3s 0.75s ease-in;
-ms-transition: all 0.3s 0.75s ease-in;
-o-transition: all 0.3s 0.75s ease-in;
transition: all 0.3s 0.75s ease-in;
-webkit-transform: scale(1.6);
-moz-transform: scale(1.6);
-ms-transform: scale(1.6);
-o-transform: scale(1.6);
transform: scale(1.6);
}
section.playerSection.clicked div.playerHolderInner a.videoPlay {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.3s 0 ease-in;
-moz-transition: all 0.3s 0 ease-in;
-ms-transition: all 0.3s 0 ease-in;
-o-transition: all 0.3s 0 ease-in;
transition: all 0.3s 0 ease-in;
}
section.playerSection.clicked div.playerHolderInner div.player {
height: 100%;
}
section.playerSection.clicked div.playerHolderInner div.player span.icon {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
section.playerSection.clicked div.playerHead::before {
-webkit-transform: scaleX(0);
-moz-transform: scaleX(0);
-ms-transform: scaleX(0);
-o-transform: scaleX(0);
transform: scaleX(0);
}
/* -----------------------------------------
-- Parental Control
----------------------------------------- */
div.contentWarning {
background: rgba(255, 255, 255, 0.9);
color: #323b40;
font-size: 18px;
margin: 10% auto 0;
max-width: 400px;
padding: 40px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.contentWarning.adBlock {
display: none;
}
div.contentWarning.adBlock.show {
display: block !important;
}
div.contentWarning h1 {
font-weight: 700;
letter-spacing: -0.05em;
}
div.contentWarning h1 span.icon {
color: #cb7777;
}
div.contentWarning h2 {
clear: both;
font-size: 18px;
font-weight: 700;
}
div.contentWarning h2 a {
color: #cb7777;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.contentWarning h2 a:hover,
div.contentWarning h2 a:focus {
color: #000;
}
div.contentWarning h2.margTop {
margin-top: 1em;
}
div.contentWarning a.button,
div.contentWarning input.submit {
background: #cb7777;
border: 0;
color: #fff;
display: inline-block;
float: none;
font-size: 14px;
font-weight: 700;
padding: 10px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.contentWarning a.button:hover,
div.contentWarning input.submit:hover,
div.contentWarning a.button:focus,
div.contentWarning input.submit:focus {
background: #323b40;
}
div.contentWarning a.button span.icon,
div.contentWarning input.submit span.icon {
color: #fff;
}
div.contentWarning label {
font-weight: 700;
}
div.contentWarning label.radio-label {
display: inline;
padding-left: 1em;
}
div.contentWarning label.radio-label.unlocked span {
color: #91cb77;
}
div.contentWarning label.radio-label.locked span {
color: #cb7777;
}
div.contentWarning span.error {
color: #cb7777;
font-weight: 700;
}
div.contentWarning form {
margin: 0;
}
div.contentWarning input.text {
background: #fff;
border: 1px solid #efefef;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
padding: 10px;
}
div.ageCheck label {
display: inline;
}
div.offerSetPass {
font-size: 14px;
}
div.offerSetPass h2 {
padding-top: 2em;
}
.fadeIt div.contentWarning {
margin-top: 0;
opacity: 0;
}
div.controlStep {
display: none;
}
a.forgot {
color: #cb7777;
}
a.forgot:hover,
a.forgot:focus {
color: #000;
}
div.toggleThis1,
div.toggleThis2,
div.toggleThis3,
div.toggleThis {
display: none;
font-size: 14px;
}
div.unlocked {
font-size: 14px;
}
div.unlocked h2 {
padding-top: 2em;
}
/* -----------------------------------------
-- Content Alert
----------------------------------------- */
section.contentAlert {
background: #e7eae9;
padding: 50px;
}
section.contentAlert.wide {
padding: 10px;
}
section.contentAlert.wide div.contentAlertInner {
max-width: none;
}
section.contentAlert div.contentAlertInner {
margin: auto;
max-width: 1100px;
*zoom: 1;
zoom: 1;
}
section.contentAlert div.contentAlertInner:before,
section.contentAlert div.contentAlertInner:after {
content: "";
display: table;
}
section.contentAlert div.contentAlertInner:after {
clear: both;
}
section.contentAlert div.contentAlertInner:before,
section.contentAlert div.contentAlertInner:after {
content: "";
display: table;
}
section.contentAlert div.contentAlertInner:after {
clear: both;
}
section.contentAlert div.contentAlertInner h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.05em;
margin: 0 0 10px;
}
section.contentAlert div.contentAlertInner h2 span.date {
display: block;
font-size: 18px;
font-weight: 400;
margin-top: 4px;
}
section.contentAlert div.contentAlertInner a.button {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
display: inline-block;
font-size: 14px;
padding: 12px 24px 12px 18px;
}
section.contentAlert div.contentAlertInner div.row {
*zoom: 1;
zoom: 1;
padding: 20px 0;
}
section.contentAlert div.contentAlertInner div.row:before,
section.contentAlert div.contentAlertInner div.row:after {
content: "";
display: table;
}
section.contentAlert div.contentAlertInner div.row:after {
clear: both;
}
section.contentAlert div.contentAlertInner div.row:before,
section.contentAlert div.contentAlertInner div.row:after {
content: "";
display: table;
}
section.contentAlert div.contentAlertInner div.row:after {
clear: both;
}
/* -----------------------------------------
-- Two Step
----------------------------------------- */
section.twoStep {
padding: 100px 50px;
}
section.twoStep div.twoStepInner {
margin: auto;
max-width: 1100px;
*zoom: 1;
zoom: 1;
}
section.twoStep div.twoStepInner:before,
section.twoStep div.twoStepInner:after {
content: "";
display: table;
}
section.twoStep div.twoStepInner:after {
clear: both;
}
section.twoStep div.twoStepInner:before,
section.twoStep div.twoStepInner:after {
content: "";
display: table;
}
section.twoStep div.twoStepInner:after {
clear: both;
}
section.twoStep div.twoStepInner div.twoStepLeft {
background: #e1e6e4;
float: left;
position: relative;
width: 100%;
}
section.twoStep div.twoStepInner div.twoStepRight {
background: #d7dcda;
float: left;
position: relative;
width: 100%;
}
section.twoStep div.twoStepInner div.twoStepRight::after {
top: 0;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
margin: 0 0 0 -30px;
position: absolute;
pointer-events: none;
border-color: rgba(205, 210, 208, 0);
border-top-color: #e1e6e4;
border-width: 30px;
width: 0;
}
section.twoStep div.twoStepInner h1 {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.05em;
margin: 40px 50px 20px 50px;
}
section.twoStep div.twoStepInner h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.05em;
margin: 0 50px 20px;
}
section.twoStep div.twoStepInner h2 span.date {
display: block;
font-size: 18px;
font-weight: 400;
margin-top: 4px;
}
section.twoStep div.twoStepInner p {
font-size: 18px;
line-height: 24px;
margin: 0 50px 50px;
}
/* -----------------------------------------
-- Programme Details
----------------------------------------- */
section.programmeDetails {
padding: 100px 50px;
}
section.programmeDetails div.programmeDetailsInner {
margin: auto;
max-width: 1100px;
*zoom: 1;
zoom: 1;
}
section.programmeDetails div.programmeDetailsInner:before,
section.programmeDetails div.programmeDetailsInner:after {
content: "";
display: table;
}
section.programmeDetails div.programmeDetailsInner:after {
clear: both;
}
section.programmeDetails div.programmeDetailsInner:before,
section.programmeDetails div.programmeDetailsInner:after {
content: "";
display: table;
}
section.programmeDetails div.programmeDetailsInner:after {
clear: both;
}
section.programmeDetails div.programmeDetailsInner h1 {
font-size: 36px;
font-weight: 700;
letter-spacing: -0.05em;
padding-bottom: 1em;
text-align: center;
}
section.programmeDetails div.programmeDetailsInner div.billing {
font-size: 20px;
line-height: 36px;
padding-bottom: 2em;
}
section.programmeDetails div.programmeDetailsInner div.infoList li {
display: block;
font-size: 18px;
line-height: 24px;
margin-bottom: 8px;
padding-left: 30px;
}
section.programmeDetails div.programmeDetailsInner div.infoList li span.icon {
float: left;
font-size: 14px;
margin: 4px 0 0 -30px;
position: relative;
}
section.programmeDetails div.programmeDetailsInner div.infoList li a {
color: #2a5057;
font-weight: 700;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
section.programmeDetails div.programmeDetailsInner div.infoList li a span.icon {
color: #4f585e;
}
section.programmeDetails div.programmeDetailsInner div.infoList li a:hover {
color: #000;
}
/* -----------------------------------------
-- More Episodes
----------------------------------------- */
section.moreEpisodes {
background: #ced3d2;
background: -moz-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ced3d2), color-stop(100%, #dce1df));
background: -webkit-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -o-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -ms-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: linear-gradient(to bottom, #ced3d2 0%, #dce1df 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ced3d2', endColorstr='#dce1df', GradientType=0);
padding: 70px 50px 100px;
}
section.moreEpisodes div.moreEpisodesInner {
margin: 0 auto;
}
section.moreEpisodes div.moreEpisodesInner > h2 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.05em;
padding-bottom: 40px;
text-align: center;
}
/* -----------------------------------------
-- More Like This
----------------------------------------- */
section.mayAlsoLike {
background: #ced3d2;
background: -moz-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, #ced3d2), color-stop(100%, #dce1df));
background: -webkit-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -o-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: -ms-linear-gradient(top, #ced3d2 0%, #dce1df 100%);
background: linear-gradient(to bottom, #ced3d2 0%, #dce1df 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ced3d2', endColorstr='#dce1df', GradientType=0);
padding: 70px 50px 100px;
}
section.mayAlsoLike div.mayAlsoLikeInner {
margin: 0 auto;
}
section.mayAlsoLike div.mayAlsoLikeInner > h2 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.05em;
padding-bottom: 40px;
text-align: center;
}
/* -----------------------------------------
-- Feedback Nag
----------------------------------------- */
div.feedbackNag {
background: #cdd2d0;
padding: 150px 50px 150px;
position: relative;
text-align: center;
}
div.feedbackNag div.feedbackNagInner {
font-weight: 200;
font-size: 36px;
line-height: 48px;
}
div.feedbackNag a.overlayButton {
background: #dce1df;
color: #323b40;
display: inline-block;
font-size: 24px;
font-weight: 700;
margin: 4em 20px;
padding: 18px 36px 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.feedbackNag a.overlayButton span.icon {
margin-right: 10px;
}
div.feedbackNag a.overlayButton:hover,
div.feedbackNag a.overlayButton:focus {
background: #eaedec;
}
div.feedbackNag a.overlayButton:active {
-webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.15);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
}
div.feedbackNag::after {
top: 0;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(205, 210, 208, 0);
border-top-color: #dbe0de;
border-width: 30px;
margin-left: -30px;
}
/* =========================================
- Live
========================================= */
span#liveTitle {
display: block;
}
span#liveTitle span {
display: inline-block;
position: relative;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
span#liveTitle span.dropOut {
opacity: 0;
-webkit-transform: translate3D(0, 100%, 0);
-moz-transform: translate3D(0, 100%, 0);
-ms-transform: translate3D(0, 100%, 0);
-o-transform: translate3D(0, 100%, 0);
transform: translate3D(0, 100%, 0);
}
span#liveTitle span.dropIn {
opacity: 0;
-webkit-transform: translate3D(0, -100%, 0);
-moz-transform: translate3D(0, -100%, 0);
-ms-transform: translate3D(0, -100%, 0);
-o-transform: translate3D(0, -100%, 0);
transform: translate3D(0, -100%, 0);
}
/* =========================================
- Overlay
========================================= */
div.s4cMasterContainer {
-webkit-transition: all 0.6s 0 ease-in;
-moz-transition: all 0.6s 0 ease-in;
-ms-transition: all 0.6s 0 ease-in;
-o-transition: all 0.6s 0 ease-in;
transition: all 0.6s 0 ease-in;
}
body.openOverlay {
height: 100%;
max-height: 100%;
position: fixed;
overflow: hidden;
width: 100%;
}
body.openOverlay div.s4cMasterContainer {
opacity: .5;
-webkit-transform: translateY(-10%);
-moz-transform: translateY(-10%);
-ms-transform: translateY(-10%);
-o-transform: translateY(-10%);
transform: translateY(-10%);
}
div.overlay {
background: #4f585e;
opacity: 0;
height: 100%;
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
-webkit-transition: all 0.6s 0 ease-in;
-moz-transition: all 0.6s 0 ease-in;
-ms-transition: all 0.6s 0 ease-in;
-o-transition: all 0.6s 0 ease-in;
transition: all 0.6s 0 ease-in;
-webkit-transform: translate3D(0, 100%, 0);
-moz-transform: translate3D(0, 100%, 0);
-ms-transform: translate3D(0, 100%, 0);
-o-transform: translate3D(0, 100%, 0);
transform: translate3D(0, 100%, 0);
}
div.overlay div.overlayInner {
color: #fff;
color: rgba(255, 255, 255, 0.8);
max-height: 100%;
overflow: auto;
position: relative;
}
div.overlay div.overlayInner a.closeOverlay {
color: #fff;
display: block;
font-size: 24px;
height: 2em;
position: absolute;
right: 40px;
text-align: right;
top: 40px;
width: 2em;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.overlay div.overlayInner a.closeOverlay:hover,
div.overlay div.overlayInner a.closeOverlay:focus {
color: #58dfed;
}
div.overlay div.overlayInner a.closeOverlay:active {
text-shadow: 0 -2px 0 rgba(0, 0, 0, 0.85);
-webkit-transform: translateY(2px);
-moz-transform: translateY(2px);
-ms-transform: translateY(2px);
-o-transform: translateY(2px);
transform: translateY(2px);
}
div.overlay div.overlayInner div.overlayContent {
margin: auto;
max-height: 100%;
max-width: 700px;
padding: 80px;
position: relative;
}
div.overlay div.overlayInner h2 {
color: #fff;
font-size: 60px;
font-weight: 700;
letter-spacing: -0.05em;
line-height: 72px;
margin: 1em 0;
text-align: center;
}
div.overlay div.overlayInner p {
font-size: 36px;
font-weight: 300;
letter-spacing: -0.05em;
line-height: 48px;
text-align: center;
}
div.overlay div.overlayInner div#name_trp {
left: -20000px;
position: absolute;
}
body.openOverlay div.overlay {
background: #323b40;
opacity: 1;
-webkit-transform: translate3D(0, 0, 0);
-moz-transform: translate3D(0, 0, 0);
-ms-transform: translate3D(0, 0, 0);
-o-transform: translate3D(0, 0, 0);
transform: translate3D(0, 0, 0);
}
html.no-csstransforms3d div.overlay {
display: none;
}
html.no-csstransforms3d body.openOverlay div.overlay {
display: block;
}
/* -----------------------------------------
-- Feedback Overlay
----------------------------------------- */
/* =========================================
- Cyw Banner
========================================= */
div.cywBanner {
background-color: #abdcee;
color: #fff;
font-family: 'S4CSansBold' arial;
padding: 5% 20px;
}
div.cywBanner.animated {
-moz-animation: animatedBackground 60s linear infinite;
-webkit-animation: animatedBackground 60s linear infinite;
-ms-animation: animatedBackground 60s linear infinite;
-o-animation: animatedBackground 60s linear infinite;
animation: animatedBackground 60s linear infinite;
background-image: url(http://beta.s4c.cymru/cywtiwb/img/clouds.png);
background-position: 0 0;
background-repeat: repeat-x;
}
div.cywBanner div.bannerContent {
text-align: center;
}
div.cywBanner div.bannerContent h2 {
font-size: 36px;
margin: 0;
}
div.cywBanner div.bannerContent h2 img {
max-width: 100%;
}
div.cywBanner div.bannerContent h3 {
font-size: 36px;
line-height: 1em;
margin: 20px 0 .45em;
}
div.cywBanner div.bannerContent p {
font-family: 'S4CSansMedium' arial;
font-size: 24px;
line-height: 1.25em;
}
div.cywBanner div.bannerContent p.button a {
background: rgba(171, 220, 238, 0.8);
border: 3px solid #fff;
color: #fff;
display: inline-block;
font-family: 'S4CSansBold' arial;
padding: 8px 32px 10px;
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
}
div.cywBanner div.bannerContent p.button a:hover,
div.cywBanner div.bannerContent p.button a:focus {
color: #abdcee;
-webkit-box-shadow: inset 0 0 0 30px #fff;
-moz-box-shadow: inset 0 0 0 30px #fff;
box-shadow: inset 0 0 0 30px #fff;
}
@media only screen and (min-width: 830px) {
div.cywBanner {
padding: 76px 20px;
}
div.cywBanner div.bannerContent {
margin: auto;
max-width: 310px;
padding-left: 520px;
text-align: left;
}
div.cywBanner div.bannerContent h2 {
float: left;
margin-left: -520px;
width: 450px;
}
div.cywBanner div.bannerContent h3 {
margin: 20px 0 .05em;
padding-top: 20px;
}
div.cywBanner div.bannerContent p {
margin-bottom: 1.0em;
}
}
/* =========================================
- Main Content
========================================= */
div.mainContent {
background: #4f585e;
padding: 5% 0;
}
div.mainContent div.mainContentInner {
color: #fff;
margin: auto;
max-width: 1400px;
position: relative;
width: 100%;
}
div.mainContent div.mainContentInner h1 {
font-size: 30px;
font-weight: 700;
letter-spacing: -0.025em;
margin: 0;
padding-bottom: .5em;
text-align: center;
}
p.intro {
font-size: 24px;
line-height: 30px;
/*margin: auto;*/
max-width: 30em;
}
/* =========================================
- Schedule
========================================= */
/*
div.schedule {
div.scheduleInner {
background: @teal6;
border: 2px solid @teal6;
border-bottom: 1px solid @teal6;
div.scheduleDays {
background: @teal6;
background: rgba(55,60,64,0.9);
left: 0;
padding-top: 44px;
position: absolute;
top: 0;
width: 100px;
z-index: 10;
span {
color: #0fd2e6;
display: block;
font-size: 18px;
font-weight: 700;
height: 107px;
line-height: 5.4em;
position: relative;
text-align: center;
text-transform: uppercase;
width: 100%;
&::after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(55,60,64,0);
border-left-color: @teal6;
border-left-color: rgba(55,60,64,0.9);
border-width: 10px;
margin-top: -10px;
}
}
}
div.scheduleGrid {
overflow: scroll;
width: 100%;
div.scheduleGridInner {
padding-left: 100px;
width: 8000px;
// Our schedule runs from 7am - 1am
// 18 x hours
// 100/18 = 5.555555556% per hour
div.time {
background: #494f54;
margin-bottom: 1px;
overflow: hidden;
.clearfix();
.border-radius(2px);
ul {
margin: 0;
li {
display: block;
float: left;
margin: 0;
position: relative;
width: 5.555555556%;
.clearfix();
span {
color: #a1a4a6;
display: block;
float: left;
font-size: 12px;
font-weight: 700;
margin-left: -50%;
padding: 12px 0;
text-align: center;
width: 100%;
}
&::after {
background: @teal6;
content:"";
display: block;
height: 6px;
position: absolute;
right: -1px;
top: 0;
width: 2px;
}
&::before {
background: @teal6;
bottom: 0;
content:"";
display: block;
height: 6px;
position: absolute;
right: -1px;
width: 2px;
}
}
}
}
div.scheduleRow {
clear: both;
ul.scheduleProgrammes {
line-height: 24px;
margin: 1px 0;
li {
display: block;
float: left;
width: 400px;
div {
background: #53595d;
color: #fff;
height: 105px;
margin: 1px;
overflow: hidden;
.border-radius(2px);
h2 {
font-size: 18px;
font-weight: 500;
margin: 20px 0 0 30px;
white-space: nowrap;
}
h3 {
font-size: 18px;
font-weight: 400;
margin: 0 0 0 30px;
white-space: nowrap;
}
span {
color: #0fd2e6;
display: block;
font-size: 14px;
font-weight: 700;
margin: 0 0 0 30px;
}
}
}
li:first-child {
div {
margin-left: 0;
}
}
li:last-child {
div {
margin-right: 0;
}
}
}
}
}
}
}
}
*/
div.scheduleList div.dayNav ul.full {
margin: 30px 0;
text-align: center;
}
div.scheduleList div.dayNav ul.full li {
display: inline-block;
margin: 2px 1px 3px;
}
div.scheduleList div.dayNav ul.full li a {
background: #c5cace;
display: inline-block;
color: #9f3d3d;
padding: 8px 16px;
font-size: 16px;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border-bottom: 0;
}
div.scheduleList div.dayNav ul.full li a:hover,
div.scheduleList div.dayNav ul.full li a:focus {
background: #ffffff;
border-bottom: 0;
}
div.scheduleList div.dayNav ul.full li a.selected {
background: #323b40;
color: #fff;
}
div.scheduleList div.scheduleProgrammes h2.period {
font-size: 30px;
margin: 80px 0 30px;
text-align: center;
font-family: 'Gotham Narrow SSm 7r', 'Gotham Narrow SSm A', 'Gotham Narrow SSm B', verdana;
font-weight: 700;
font-style: normal;
}
/* =========================================
- Footer
========================================= */
div.azMenu {
background: #e7eae9;
border-top: 1px solid #c4c4c4;
}
div.azMenu div.azMenuInner {
padding: 20px 20px 1px;
}
div.azMenu div.azMenuInner ul {
text-align: center;
}
div.azMenu div.azMenuInner ul li {
display: inline;
}
div.azMenu div.azMenuInner ul li a {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
color: #118e9b;
display: inline-block;
font-size: 18px;
font-weight: 700;
padding: 4px 4px;
text-align: center;
width: 2.2em;
-webkit-transition: all 0.2s 0s ease-in;
-moz-transition: all 0.2s 0s ease-in;
-ms-transition: all 0.2s 0s ease-in;
-o-transition: all 0.2s 0s ease-in;
transition: all 0.2s 0s ease-in;
border-bottom: 0;
}
div.azMenu div.azMenuInner ul li a:hover,
div.azMenu div.azMenuInner ul li a:focus {
background: rgba(255, 255, 255, 0.6);
color: #2d474e;
border-bottom: 0;
}
div.azMenu div.azMenuInner ul li.on a {
background: #118e9b;
color: #fff;
}
div.azMenu div.azMenuResults {
min-height: 160px;
}
div.azMenu div.azMenuResults span.azFooterNoResults {
color: #dce1df;
display: block;
font-size: 36px;
font-weight: 700;
line-height: 1.2em;
text-align: center;
}
div.azMenu div.azMenuResults span.azFooterLoading {
position: relative;
display: none;
height: 100px;
}
div.azMenu div.azMenuResults span.azFooterLoading span.icon {
color: #118e9b;
display: block;
font-size: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
position: relative;
width: 100px;
/*.animation(spin, .6s, 0, linear, infinite, forwards);*/
}
div.azMenu div.azMenuResults ul.azMenuResultsList {
display: none;
margin: 0;
padding-bottom: 20px;
}
div.azMenu div.azMenuResults ul.azMenuResultsList li {
/*// .animation(fadeIn, .1s, 0, linear, 1, forwards);*/
}
@media only screen and (min-width: 800px) {
section.programmeDetails div.programmeDetailsInner div.billing {
float: left;
margin-right: 19.5%;
width: 50%;
}
section.programmeDetails div.programmeDetailsInner div.infoList {
float: left;
width: 30%;
}
div.azMenu div.azMenuResults span.azFooterNoResults {
font-size: 72px;
}
div.mainContent div.mainContentInner h1 {
font-size: 60px;
}
section.twoStep div.twoStepInner div.twoStepLeft {
float: left;
width: 50%;
}
section.twoStep div.twoStepInner div.twoStepRight {
float: left;
width: 50%;
}
section.twoStep div.twoStepInner div.twoStepRight::after {
top: 12%;
left: 0;
border: solid transparent;
content: " ";
height: 0;
width: 0;
margin: 0;
position: absolute;
pointer-events: none;
border-color: rgba(205, 210, 208, 0);
border-left-color: #e1e6e4;
border-width: 30px;
}
div.playerHead h1 {
font-size: 60px;
margin: 0 320px 0 0;
}
div.playerHead span.tagline {
font-size: 48px;
}
div.playerHead div.share {
bottom: 62px;
position: absolute;
right: 0;
text-align: right;
width: 320px;
}
div.playerHead div.share h2 {
display: block;
}
div.playerHead div.share a {
margin: 0 0 0 8px;
}
div.playerHolderInner a.videoPlay span.icon {
font-size: 300px;
height: 300px;
margin: -150px 0 0 -150px;
text-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
width: 300px;
}
div.playerHolderInner a.videoPlay:hover,
div.playerHolderInner a.videoPlay:focus {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
div.playerHolderInner a.videoPlay:hover span.icon,
div.playerHolderInner a.videoPlay:focus span.icon {
text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
}
/* =========================================
- Animations
========================================= */
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-moz-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-o-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes spin {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(360deg);
}
}
@-moz-keyframes spin {
from {
-moz-transform: rotate(0deg);
}
to {
-moz-transform: rotate(360deg);
}
}
@-o-keyframes spin {
from {
-o-transform: rotate(0deg);
}
to {
-o-transform: rotate(360deg);
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* /-/-/-/-/-/-/-/-/-/-/ Rugby/CMS New Header /-/-/-/-/-/-/-/-/-/-/ */
.darkBG {
height: auto;
}
.darkBG a {
border-bottom: 0;
}
div.pageTitle > h1 {
font-size: 36px;
}
div.pageTitle > h1 a {
color: #fff;
}
.masonryGridItemContent > h2,
.masonryItemInfo h2 {
font-size: 24px;
}
ul.feedLinks h3 {
font-size: 18px;
}
.masonryItemInfo,
.masonryItemInfo p,
.explore ul.feedLinks p {
font-size: 14px;
line-height: 1.4;
}
@media only screen and (min-width: 640px) {
div.pageTitle > h1 {
font-size: 72px;
}
}
/*@media only screen and (min-width: 960px){
div.layoutBlock2Sidebars, div.layoutBlockSidebarRight, div.layoutBlockSidebarLeft {
width: 100%;
}
}*/
/*# sourceMappingURL=main.css.map */