/*
* HTML5 Boilerplate
*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html,
button,
input,
select,
textarea {
color: #00d2ff;
}
body {
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight: h5bp.com/i
* These selection rule sets have to be separate.
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/
img {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Chrome Frame prompt
========================================================================== */
.chromeframe {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
a, span{
-webkit-transition: all 0.3s ease-out 0s;
-moz-transition: all 0.3s ease-out 0s;
-ms-transition: all 0.3s ease-out 0s;
-o-transition: all 0.3s ease-out 0s;
transition: all 0.3s ease-out 0s;
}
a,a:hover, a:active, a:focus {
outline: 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* --- FONTS --- */
@font-face {
font-family: 'LibreBaskervilleItalic';
src: url('../fonts/LibreBaskerville-Italic-webfont.eot');
src: url('../fonts/LibreBaskerville-Italic-webfont-.eot#iefix') format('embedded-opentype'),
url('../fonts/LibreBaskerville-Italic-webfont.woff') format('woff'),
url('../fonts/LibreBaskerville-Italic-webfont.ttf') format('truetype'),
url('../fonts/LibreBaskerville-Italic-webfont.svg#LibreBaskervilleItalic') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_nova_rgbold';
src: url('../fonts/proximanova-bold-webfont.eot');
src: url('../fonts/proximanova-bold-webfont-.eot#iefix') format('embedded-opentype'),
url('../fonts/proximanova-bold-webfont.woff') format('woff'),
url('../fonts/proximanova-bold-webfont.ttf') format('truetype'),
url('../fonts/proximanova-bold-webfont.svg#proxima_novasemibold') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'proxima_novalight';
src: url('../fonts/proximanova-light-webfont.eot');
src: url('../fonts/proximanova-light-webfont-.eot#iefix') format('embedded-opentype'),
url('../fonts/proximanova-light-webfont.woff') format('woff'),
url('../fonts/proximanova-light-webfont.ttf') format('truetype'),
url('../fonts/proximanova-light-webfont.svg#proxima_novalight') format('svg');
font-weight:normal;
font-style: normal;
}
.proximaBold{font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif;}
.proximaLite{font-family: 'proxima_novalight',Arial, Helvetica, sans-serif;}
.proximaLite>a:hover{ color:#00d2ff;}
.baskervilleItalic{font-family: 'LibreBaskervilleItalic', Serif;}
letterSpacing120{letter-spacing:0.120em;}
.alpha0{opacity:0;}
.loader{ position:fixed; height:60px; width:60px; margin-top:-30px; margin-left:-30px; top:50%; left:50%; background:url("../img/loader.gif") center no-repeat; background-size:40px;}
/* --- ! --- */
/* --- GLOBAL --- */
body{font-family: 'LibreBaskervilleItalic', Serif; font-size:14px; letter-spacing:0.12em; text-align:center; -webkit-font-smoothing: antialiased;}
#main{min-width:1005px; background:url("../img/bg-redline.png") repeat-y center; background-size:1px; background-color: #09678d;}
#main>header>.video>.layer>.description>.logo{height:222px; width:506px; background:url("../img/logo-saillavie@2x.png") no-repeat; background-size:contain; margin:15px auto 15px auto;}
#main>.scroll1{ width:3x94px; height:90px; margin:15px auto 15px auto; padding:30px auto 30px auto; background:#09678d;}
#main>.scroll1>.next>a{ display:block; height:30px; width:30px; background:url("../img/down@2x.png") center bottom no-repeat; background-size:30px; margin:auto; border:solid 1px #00d2ff;}
#main>.scroll1>.next>a:hover{background:url("../img/down@2x.png") center top no-repeat; background-size:30px; border:solid 1px #09678d;}
#main>.scroll{ width:194px; height:60px; margin:0px auto 20px auto; color:#fff; font-size:12px; background:#09678d;}
#main>.scroll>.next>a{ display:block; height:30px; width:30px; background:url("../img/down@2x.png") center bottom no-repeat; background-size:30px; margin:auto; border:solid 1px #00d2ff;}
#main>.scroll>.next>a:hover{background:url("../img/down@2x.png") center top no-repeat; background-size:30px; border:solid 1px #09678d;}
#main>.number>div{ margin:250px auto 0px auto; width:42px; height:41px; background:url("../img/bg-numbers.png") no-repeat; font-size:12px; line-height:41px; overflow:hidden; padding-left:1px; text-align:center; color:#fff; }
#main>section strong{ color:#fff; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>section>h1{font-size:60px; line-height:60px; margin:0px auto 0px auto; text-transform:uppercase;}
.mainWidth{ width:1005px;}
.scrollText{color:#fff; font-size:25px; margin:12px 0px 12px 0px; line-height:25px; text-transform:uppercase;}
.sectionPadding{padding-top:50px; padding-bottom:30px;}
/* --- ! --- */
/* --- NAV --- */
#main>.pagination{ position:fixed; right:6px; top:35%; margin-top:-150px; z-index:1;}
#main>.pagination>ul>li>a{display:block; height:10px; padding:12px 4px 12px 12px; text-decoration:none;}
#main>.pagination>ul>li>a>span{opacity:0.5;display:block; height:10px; color:#fff; font-family: 'Trebuchet MS','Times New Roman',Arial, Helvetica, sans-serif; text-align:right;}
#main>.pagination>ul>li>a:hover>span{opacity:1;}
#main>.pagination>ul>li>a>.navSelect{opacity:1;}
/* --- ! --- */
/* --- VIDEO --- */
#main>header>.video>.layer>#youtube{opacity:0; background:rgba(0, 0, 0, 0.6);}
#main>header>.video>.layer>#youtube>.close{width:40px; height:40px; top:40px; right:0px;}
#main>header>.video>.layer>#youtube>.close>a{display:block; opacity:1; width:40px; height:40px; background:url("../img/close@2x.png") no-repeat center; background-color:#09678d; background-size:40px;}
//#main>header>.video{width:100%; height:600px; background:url("../img/bg-video.jpg") no-repeat center top; background-size:cover; color:#FFF; }
#main>header>.video>.layer{background-color: rgba(0,0,0,0.3); top: 0; left: 0; width: 100%; min-height: 100%}
#main>header>.video>.layer>.description{width:700px; margin-top:-185px; margin-left:-350px; text-align:center;}
#main>header>.video>.layer>.description>h1{font-size:118px; line-height:118px; margin:0px 0px 0px 0px; letter-spacing:0.12em;}
#main>header>.video>.layer>.description>h2{font-size:36px;line-height:35px; margin:15px 0px 0px 0px; letter-spacing:0.12em; -webkit-font-smoothing: antialiased;}
#main>header>.video>.layer>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:650px; margin:40px auto 40px auto; background-color: rgba(9,103,141,0.8);}
#main>header>.video>.layer>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url("../img/play-ico.png") center no-repeat; border-left:solid 1px #00d2ff;}
#main>header>.video>.layer>.description>.play>.cta{ width:578px; font-size:16px; text-transform:uppercase; line-height:72px; letter-spacing:0.25em;-webkit-font-smoothing: antialiased;}
#main>header>.video>.layer>.description>.share{ width:140px; margin:auto;}
#main>header>.video>.layer>.description>.share>h3{width:136px; font-size:12px; line-height:16px; margin:auto; text-align:center; letter-spacing:0.3em;}
#main>header>.video>.layer>.description>.share>h3>.title{ margin:auto 18px auto 18px;}
#main>header>.video>.layer>.description>.share>h3>.line{ display:block; width:20px; height:1px; margin-top:5%; border-top:solid 1px #FFF;}
#main>header>.video>.layer>.description>.share>ul{ margin-left:-8px; margin-bottom:0px;}
#main>header>.video>.layer>.description>.share>ul>li{width:25%;}
#main>header>.video>.layer>.description>.share>ul>li>a{ display:block; width:30px; height:30px; border-radius:15px; background-color: rgba(9,103,141,0.8);}
#main>header>.video>.layer>.description>.share>ul>li>a:hover{ background-color:rgba(255,255,255,0.3);}
#main>header>.video>.layer>.description>.share>ul>li>a>img{ margin-top:6px; text-align:center;}
/* --- ! --- */
/* --- 01 DISCOVER --- */
#main>#discover{margin:auto; background:#09678d;}
#main>#discover>a>figure{ margin-top:40px; width:100%; height:178px; background:url("../img/greek-archipelago.png") no-repeat bottom; background-size:965px;}
#main>#discover>p{ font-size:23px; margin:40px auto 0px auto;}
#main>#discover>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
/* --- ! --- */
/* --- 02 PLAN --- */
#main>#plan{margin:auto; background:#09678d;}
#main>#plan>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#plan>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#plan>.clearfix>.cul>a>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#plan>.clearfix>.cul>a>.img01{ background: url("../icons/sail-la-vie_icons/koumpaso.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#plan>.clearfix>.cul>a>.img02{ background: url("../icons/sail-la-vie_icons/map.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#plan>.clearfix>.cul>a>.img03{ background: url("../img/s02-cul03-socialnetwork.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#plan>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:40px;}
#main>#plan>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#plan>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 03 BOOK --- */
#main>#book{margin:auto; background:#09678d;}
#main>#book>.clearfix>.cul{ width:25%; margin-top:60px;}
#main>#book>.clearfix>.cul .img01{ background:url("../icons/sail-la-vie_icons/fleet.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#book>.clearfix>.cul .img02{ background:url("../icons/sail-la-vie_icons/special2.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#book>.clearfix>.cul .img03{ background:url("../icons/sail-la-vie_icons/captain_hostess.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#book>.clearfix>.cul .img04{ background:url("../icons/sail-la-vie_icons/lifebuoy.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#book>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:40px;}
#main>#book>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#book>.clearfix>.cul>figure{ width:200px; height:200px; margin:auto; border-radius:0px;}
#main>#book>.clearfix>.cul>a>figure{ width:200px; height:200px; margin:auto; border-radius:0px;}
#main>#book>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 04 GET READY --- */
#main>#getready{margin:auto; background:#09678d;}
#main>#getready>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#getready>.clearfix>.cul .img01{ background:url("../icons/sail-la-vie_icons/weather.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#getready>.clearfix>.cul .img02{ background:url("../icons/sail-la-vie_icons/apps.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#getready>.clearfix>.cul .img03{ background:url("../icons/sail-la-vie_icons/tips.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#getready>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:40px;}
#main>#getready>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#getready>.clearfix>.cul>figure{ width:200px; height:200px; margin:auto; border-radius:10px;}
#main>#getready>.clearfix>.cul>a>figure{ width:200px; height:200px; margin:auto; border-radius:10px;}
#main>#getready>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 05 ENJOY --- */
#main>#enjoy{margin:auto; background:#09678d;}
#main>#enjoy>.clearfix>.cul{ width:25%; margin-top:60px;}
#main>#enjoy>.clearfix>.cul>a>.img01{ background: url("../img/s02-cul01-smartphoneswithgps.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#enjoy>.clearfix>.cul> .img02{ background: url("../icons/sail-la-vie_icons/theater.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#enjoy>.clearfix>.cul> .img03{ background: url("../icons/sail-la-vie_icons/call_center.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#enjoy>.clearfix>.cul>a>.img04{ background: url("../icons/sail-la-vie_icons/social.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#enjoy>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:40px;}
#main>#enjoy>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#enjoy>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#enjoy>.clearfix>.cul>a>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#enjoy>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 06 REVIEW --- */
#main>#review{margin:auto; background:#09678d;}
#main>#review>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#review>.clearfix>.cul>a>.img01{ background: url("../icons/sail-la-vie_icons/review.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#review>.clearfix>.cul>a>.img02{ background: url("../icons/sail-la-vie_icons/yacht_check.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#review>.clearfix>.cul>a>.img03{ background: url("../icons/sail-la-vie_icons/thumbs.png") center no-repeat, url("../img/bg-grey-noise.png");}
#main>#review>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:40px;}
#main>#review>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#review>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:0%; }
#main>#review>.clearfix>.cul>a>figure{ width:230px; height:230px; margin:auto; border-radius:0%; }
#main>#review>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 07 REMEMBER --- */
#main>#remember{margin:auto; padding-top:80px; padding-bottom:80px; background:#09678d;}
#main>#remember>h1{ line-height:70px;}
#main>#remember>.clearfix>.cul{ width:33%;}
#main>#remember>.clearfix>.cul>.verticalLine{background:url("../img/bg-redline.png") repeat-y center; background-size:1px; height:100px;}
#main>#remember>.clearfix>.center>.verticalLine{height:250px; margin-top:100px;}
#main>#remember .diamond{ background:#09678d; overflow:hidden; height:200px; width:200px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin:auto;}
#main>#remember .diamond>img{transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin-top:-78%; margin-left:-78%; width:160%; height:160%;}
#main>#remember>.clearfix>.cul>.space{ height:20px;}
#main>#remember>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:60px;}
#main>#remember>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#remember>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
footer { margin:-635px auto 0px auto; height:400px; padding-top:204px; padding-left:45%;}
footer>.cont{ position:absolute; width:600px; margin:auto; margin-left:100px; margin-top:-50px; height:500px; z-index:50;}
footer>.cont>.line{ height:1px; width:120px; margin:50px auto 50px auto; background:#09678d; opacity:0.5;}
footer>.trinagle { height:800px; width:800px; background:url("../img/bg-grey-noise.png"); transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg);}
footer>.cont>p{ color:#FFF; font-size:18px;}
footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:25px;}
footer>.cont>.button>p>a{ background: #606060; padding:5px; color: #fff !important; display: inline-block; position: relative; border: none; font-size: 36px; line-height: 1.6875; font-weight: bold; text-align: center; letter-spacing: .04em; text-decoration: none; padding: 0.57143em 1.42857em; max-width: 100%; -webkit-font-smoothing: antialiased; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -o-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; transition: all 0.2s ease;}
footer>.cont>.button>p>a:hover{ background:#696969;}
footer>.cont>.social{width:271px; margin:auto;}
footer>.cont>.social>.fb{ overflow:hidden; width:84px; padding-right:20px;}
footer>.cont>.social>.tw{ overflow:hidden; width:87px; padding-right:20px;}
footer>.cont>.social>.g{ overflow:hidden; width:60px;}
.bigTwitter{ height:28px; width:42px; background:url("../img/big-tw@2x.png") no-repeat center; background-size:42px; margin:auto;}
iframe{ overflow:hidden;}
#debug{position:fixed; bottom: 0px; width:100%; background-color:#333333; color:#FFFFFF; font-size:0.750em; opacity:0.5; z-index:200; text-align:center; font-family:Arial, Helvetica, sans-serif;}
#debug p{margin: 10px 10px 10px 10px;}
/* --- Awwwards Ribbons --- */
#awwwards {position:absolute; top:25px; z-index:9999;}
#awwwards.left {left:0;}
#awwwards.right {right:0;}
#awwwards a {display:block;width:70px;height:105px;text-indent:-8000px;background-repeat:no-repeat;background-position: 0 0;overflow:hidden;}
#awwwards.left.black a {background-image:url('../ribbons/awwwards_sotd_black_left.png');}
#awwwards.right.black a {background-image:url('../ribbons/awwwards_sotd_black_right.png');}
#awwwards.left.white a {background-image:url('../ribbons/awwwards_sotd_white_left.png');}
#awwwards.right.white a {background-image:url('../ribbons/ribbon_white_right.png');}
#awwwards.left.green a {background-image:url('../ribbons/awwwards_sotd_green_left.png');}
#awwwards.right.green a {background-image:url('../ribbons/awwwards_sotd_green_right.png');}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Image replacement
*/
.ir {
background-color: transparent;
border: 0;
overflow: hidden;
/* IE 6/7 fallback */
*text-indent: -9999px;
}
.ir:before {
content: "";
display: block;
width: 0;
height: 150%;
}
/*
* Hide from both screenreaders and browsers: h5bp.com/u
*/
.hidden {
display: none !important;
visibility: hidden;
}
/*
* Hide only visually, but have it available for screenreaders: h5bp.com/v
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
/*
* Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
}
/*
* Hide visually and from screenreaders, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/*
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.clearfix {
*zoom: 1;
}
.ul-nostyle{ padding:0px 0px 0px 0px; list-style:none;}
.maxWidth { width:100%;}
.maxHeight { height:100%; margin:0 auto;}
.floatL{ float:left; }
.floatR{ float:right; }
.relative{ position:relative;}
.fixed{ position:fixed;}
.absolute{position:absolute;}
.centerAbsolute{position:absolute; top:50%; left:50%;}
.collapsfix{overflow:hidden;}
/*--------------------------- search starts --------------------------------*/
@font-face {
font-family: 'Conv_HelveticaNeue-ExtBlackCond';
src: url('../fonts/HelveticaNeue-ExtBlackCond.eot');
src: local('@'), url('../fonts/HelveticaNeue-ExtBlackCond.woff') format('woff'),
url('../fonts/HelveticaNeue-ExtBlackCond.ttf') format('truetype'),
url('../fonts/HelveticaNeue-ExtBlackCond.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Conv_HelveticaNeueLTPro-Cn';
src: url('../fonts/HelveticaNeueLTPro-Cn.eot');
src: local('@'), url('../fonts/HelveticaNeueLTPro-Cn.woff') format('woff'),
url('../fonts/HelveticaNeueLTPro-Cn.ttf') format('truetype'),
url('../fonts/HelveticaNeueLTPro-Cn.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Conv_HelveticaNeue-BoldCond';
src: url('../fonts/HelveticaNeue-BoldCond.eot');
src: local('@'), url('../fonts/HelveticaNeue-BoldCond.woff') format('woff'),
url('fonts/HelveticaNeue-BoldCond.ttf') format('truetype'),
url('../fonts/HelveticaNeue-BoldCond.svg') format('svg');
font-weight: normal;
font-style: normal;
}
.search_main{
float: left;
font-family: Conv_HelveticaNeueLTPro-Cn;
left: -67%;
letter-spacing: 0;
position: absolute;
text-align: left;
top: -18%;
width: 330px;
z-index: 1;
}
.search_main_inside{
width:auto;
margin-bottom:20px;
padding:20px;
background:rgb(9,97,139);
background: transparent\9;
background:rgba(9,97,139,0.8);
overflow:hidden;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc09618b,endColorstr=#cc09618b);
zoom: 1;
behavior: url(PIE.htc);
}
.search_main_inside:nth-child(n){
filter: none;
}
.search_main_inside h1{
color:#fff;
font-weight:normal;
display:block;
margin-bottom: 15px;
width:auto;
font-size:15px;
}
.search_main_inside ul{
margin:0;
padding:0;
float:left;
width:100%;
}
.search_main_inside li{
list-style:none;
float:left;
width:100%;
}
.search_main_inside li+li{
margin-top:10px;
}
.search_main_inside li p{
float:left;
margin:0;
width:47.5%;
}
.search_main_inside li p+p{
float:right;
}
.search_main_inside li p label{
float:left;
width:100%;
margin-bottom:5px;
font-size:13px;
color:#fff;
}
.search_main_inside li p label cite{
color:#ff1e00;
font-style:normal;
}
.search_main_inside li p span{
padding:5px;
overflow:hidden;
width:auto;
display:block;
background:rgb(241,242,247);
background: transparent\9;
background:rgba(241,242,247,0.85);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#d8f1f2f7,endColorstr=#d8f1f2f7);
zoom: 1;
}
.search_main_inside li p span:nth-child(n) {
filter: none;
}
.search_main_inside li p span input{
width:auto;
float:left;
margin-right:5px;
border:none;
background:none;
width:82%;
}
.search_main_inside li p span a{
width:auto;
float:right;
text-decoration:none;
margin-top:1px;
line-height: 11px;
}
.search_main_inside li p span a img{
vertical-align:middle;
}
.search_main_inside_chkbx{
width:auto !important;
margin:0 !important;
}
.search_main_inside li p input[type="checkbox"]{
float: right;
margin-top: 2px;
}
.search_main_inside li strong{
float: right;
width:auto;
margin-top: 4px;
}
.search_main_inside li strong a{
float: right;
width:auto;
text-decoration:none;
font-family: 'Conv_HelveticaNeue-BoldCond';
letter-spacing: 1px;
padding: 7px 15px 9px;
background:rgb(0,210,255);
background: transparent\9;
color:#fff;
font-size:15px;
background:rgba(0,210,255,0.35);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#5900d2ff,endColorstr=#5900d2ff);
zoom: 1;
}
.search_main_inside li strong a:hover{
background:rgba(100,210,255,0.35);
}
.search_main_inside li strong a:nth-child(n){
filter: none;
}
.search_main_offers{
width:auto;
margin-bottom:20px;
padding:15px 20px;
font-size:14px;
color:#fff;
background:rgb(9,97,139);
background: transparent\9;
background:rgba(9,97,139,0.8);
overflow:hidden;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#cc09618b,endColorstr=#cc09618b);
zoom: 1;
behavior: url(PIE.htc);
}
.formDisplay
{
display:none;
}
/*--------------------------- search ends --------------------------------*/
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (max-width : 1444px) {
.sf2
{
display:none !important;
}
.search_main_inside li p
{
width: 100%;
}
.search_main {
left: -57%;
top: -21%;
width: 54%;
}
.search_main_inside h1 {
margin-top: 0;
}
#main>header>.video>.layer>.description>.logo{height:222px; width:506px; background:url("../img/logo-saillavie@2x.png") no-repeat; background-size:contain; margin:15px auto 15px auto;}
#main{min-width:100%;}
.mainWidth{width:85%;}
}
@media only screen and (max-width : 1024px) {
.sf2
{
display:none !important;
}
.search_main_inside li p
{
width: 100%;
}
.search_main {
left: -51%;
top: -21%;
width: 47%;
}
.search_main_inside h1 {
margin-top: 0;
}
#main>header>.video>.layer>.description>.logo{height:222px; width:506px; background:url("../img/logo-saillavie@2x.png") no-repeat; background-size:contain; margin:15px auto 15px auto;}
#main{min-width:100%;}
.mainWidth{width:85%;}
}
@media only screen and (max-height : 802px) {
#main > header > .video > .layer > .description {
left: 29%;
margin-left: 0;
margin-top: -150px;
text-align: center;
width: 520px;
}
#main > header > .video > .layer > .description {
left: 31%;
margin-left: 0;
margin-top: -150px;
text-align: center;
width: 520px;
}
#main>header>.video>.layer>.description>h1{font-size:90px; line-height:90px; margin:0px 0px 0px 0px; letter-spacing:0.12em;}
#main>header>.video>.layer>.description>h2{font-size:29px;line-height:29px; margin:0px 0px 0px 0px; letter-spacing:0.08em}
#main>header>.video>.layer>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:480px; margin:20px auto 20px auto;}
#main>header>.video>.layer>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url("../img/play-ico.png") center no-repeat; border-right:solid 1px #00d2ff;}
#main>header>.video>.layer>.description>.play>.cta{ width:408px; font-size:12px;}
}
@media only screen and (max-width : 970px) {
.search_main {
left: -82%;
top: -21%;
width: 76%;
}
.mainWidth{ width:80%;}
#main>header>.video>.layer>.description>.logo{height:120px; width:300px; background:url("../img/logo-saillavie@2x.png") no-repeat; background-size:contain; margin:15px auto 15px auto;}
/* --- VIDEO --- */
//#main>header>.video{width:100%; height:360px;}
#main>header>.video>.layer>.description{width:300px; height:300px; margin-top:-115px; margin-left:-150px; text-align:center;}
#main>header>.video>.layer{background-color: rgba(0,0,0,0.3); top: 0; left: 0; width: 100%; min-height: 100%}
#main>header>.video>.layer>.description>h1{font-size:50px; line-height:50px;}
#main>header>.video>.layer>.description>h2{font-size:16px;line-height:16px; margin:8px 0px 0px 0px; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>header>.video>.layer>.description>h3{ margin:0px 0px 0px 0px; overflow:hidden; height:20px;}
#main>header>.video>.layer>.description>.play{ width:70px; margin:20px auto 0px auto; border-radius:70px;}
#main>header>.video>.layer>.description>.play>.playIco{ display:block; width:69x; height:70px; border-radius:70px; background:url("../img/play-ico.png") center no-repeat; border:solid 0px;}
#main>header>.video>.layer>.description>.play>.cta{ visibility:hidden; display:none;}
#main>header>.video>.layer>.description>.share{ width:100%; position:absolute; bottom:0px; left:2%;}
#main>header>.video>.layer>.description>.share>h3{ display:block; width:100px; margin:auto; float:left; border-left:solid 1px #FFF;}
#main>header>.video>.layer>.description>.share>h3>.title{font-size:12px; letter-spacing:0.4em; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif; text-transform:uppercase;}
#main>header>.video>.layer>.description>.share>h3>.line{visibility:hidden;}
#main>header>.video>.layer>.description>.share>ul{ width:180px; float:left; margin-top:0px; border-left:solid 1px #FFF; border-right:solid 1px #FFF;}
#main>header>.video>.layer>.description>.share>ul>li{width:24%;}
#main>header>.video>.layer>.description>.share>ul>li>a{margin:auto;}
/* --- ! --- */
#awwwards {display: none;}
#main>section>h1{font-size:45px; line-height:45px; margin:0px auto 0px auto; text-transform:uppercase;}
#main>header>.video>.layer{background-color: rgba(0,0,0,0.3); top: 0; left: 0; width: 100%; min-height: 100%}
#main > header > .video > .layer > .description {
left: 37%;
margin-left: 0;
margin-top: -150px;
text-align: center;
width: 276px;
}
#main>header>.video>.layer>.description>h1{font-size:90px; line-height:90px; margin:0px 0px 0px 0px; letter-spacing:0.12em;}
#main>header>.video>.layer>.description>h2{font-size:29px;line-height:29px; margin:0px 0px 0px 0px; letter-spacing:0.08em}
#main>header>.video>.layer>.description>.play{text-decoration:none; color:#FFF; display:block; height:70px; width:70px; margin:20px auto 20px auto;}
#main>header>.video>.layer>.description>.play>.playIco{ display:block; width:70px; height:70px; background:url("../img/play-ico.png") center no-repeat;}
#main>header>.video>.layer>.description>.play>.cta{ width:408px; font-size:12px;}
#main>#plan>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#plan>.clearfix>.cul>figure{ width:180px; height:180px; margin:auto; border-radius:50%; }
#main>#book>.clearfix>.cul{ width:50%; margin-top:50px; height:300px;}
#main>#getready>.clearfix>.cul{ width:50%; margin-top:50px; height:370px;}
#main>#enjoy>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#enjoy>.clearfix>.cul>figure{ width:180px; height:180px; margin:auto; border-radius:50%; }
#main>#review>.clearfix>.cul{ width:33%; margin-top:60px;}
#main>#review>.clearfix>.cul>figure{ width:180px; height:180px; margin:auto; border-radius:50%; }
#main>#remember>.clearfix>.cul{ width:33%;}
#main>#remember>h1{font-size:35px; line-height:38px;}
footer { margin:0px auto 0px auto; padding-top:50px; height:300px; padding-left:0px; background:url("../img/bg-grey-noise.png");}
footer>.cont{width:100%; margin:auto; height:auto; margin-left:0px; margin-top:0px;}
footer>.cont>.line, .br1{display:none;}
footer>.trinagle {display:none;}
// footer>.cont>p{ color:#FFF; font-size:25px;}
// footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:45px;}
footer>.cont>.social{width:271px; margin:auto;}
footer>.cont>.social>.fb{ overflow:hidden; width:84px; padding-right:20px;}
footer>.cont>.social>.tw{ overflow:hidden; width:87px; padding-right:20px;}
footer>.cont>.social>.g{ overflow:hidden; width:60px;}
.sectionPadding{padding-top:40px; padding-bottom:30px;}
#main>#remember{padding-top:40px;}
#main>#remember>.clearfix>.cul{ width:50%;}
#main>#remember>.clearfix>.center{ height:484px;}
#main>#remember>.clearfix>.cul .verticalLine{ visibility:hidden; display:none;}
#main>#remember .diamond{background:#09678d; overflow:hidden; height:150px; width:150px; transform:rotate(45deg); -ms-transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin:60px auto 0px auto;}
#main>#remember .diamond>img{transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin-top:-78%; margin-left:-78%; width:160%; height:160%;}
#main>#remember>.clearfix>.cul>.space{ height:20px;}
#main>#remember>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:60px;}
#main>#remember>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#remember>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:235px; margin:20px auto 0px auto;}
}
@media only screen and (max-width : 650px) {
.search_main_inside li p {
margin: 0 0 5px !important;
width: 100% !important;
}
.search_main {
left: 10%;
top: 50%;
width: 77% !important;
}
.searchForm
{
display:none;
}
.formDisplay
{
display:block !important;
cursor: pointer;
float: right;
margin-top: 6px;
}
.search_main_inside{
padding:10px;
margin-bottom: 10px;
cursor:pointer;
}
.search_main_inside h1 {
float: left;
margin: 0 !important;
}
.search_main_inside ul {
margin-top: 15px;
}
.search_main_offers {
font-size: 13px;
margin-bottom: 0;
padding:10px;
}
.sf2
{
display:none !important;
}
/* --- GLOBAL --- */
.mainWidth{ width:80%;}
#main>header>.video>.layer>.description>.logo{height:120px; width:300px; background:url("../img/logo-saillavie@2x.png") no-repeat; background-size:contain; margin:15px auto 15px auto;}
/* --- ! --- */
#main>.number>div{ margin:250px auto 0px auto; width:42px; height:41px; background:url("../img/bg-numbers.png") no-repeat; font-size:12px; line-height:41px; overflow:hidden; padding-left:1px; text-align:center; color:#fff; }
#main>section strong{ color:#fff; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>section>h1{font-size:30px; line-height:30px; margin:0px auto 10px auto; text-transform:uppercase;}
#main>.scroll1{ width:294px; height:120px; margin:8px auto 8px auto; padding:30px auto 30px auto; background:#09678d;}
.scrollText{ font-size:20px; line-height:25px;}
/* --- VIDEO --- */
//#main>header>.video{width:100%; height:360px;}
#main > header > .video > .layer > .description {
height: 300px;
left: 13%;
margin-left: 0;
margin-top: 0;
text-align: center;
top: 5%;
width: 72%;
}
#main>header>.video>.layer{background-color: rgba(0,0,0,0.3); top: 0; left: 0; width: 100%; min-height: 100%}
#main>header>.video>.layer>.description>h1{font-size:50px; line-height:50px;}
#main>header>.video>.layer>.description>h2{font-size:16px;line-height:16px; margin:8px 0px 0px 0px; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif;}
#main>header>.video>.layer>.description>h3{ margin:0px 0px 0px 0px; overflow:hidden; height:20px;}
#main > header > .video > .layer > .description > .play {
border-radius: 70px;
height: 60px;
margin: 31% auto 0;
width: 60px;
}
#main > header > .video > .layer > .description > .play > .playIco {
background-color:none;
background: url("../img/play-ico.png") no-repeat scroll center center;
border-radius: 70px;
display: block;
height: 60px;
width: 63px;
}
#main>header>.video>.layer>.description>.play>.cta{ visibility:hidden; display:none;}
#main > header > .video > .layer > .description > .share {
bottom: 0;
left: 10%;
position: absolute;
top: 106%;
width: 77%;
}
#main>header>.video>.layer>.description>.share>h3{ display:block; width:100px; margin:auto; float:left; border-left:solid 1px #FFF;}
#main>header>.video>.layer>.description>.share>h3>.title{font-size:12px; letter-spacing:0.4em; font-family: 'proxima_nova_rgbold','Times New Roman',Arial, Helvetica, sans-serif; text-transform:uppercase;}
#main>header>.video>.layer>.description>.share>h3>.line{visibility:hidden;}
#main>header>.video>.layer>.description>.share>ul{ width:180px; float:left; margin-top:0px; border-left:solid 1px #FFF; border-right:solid 1px #FFF;}
#main>header>.video>.layer>.description>.share>ul>li{width:24%;}
#main>header>.video>.layer>.description>.share>ul>li>a{margin:auto;}
/* --- ! --- */
/* --- 01 DISCOVER --- */
#main>#discover{ width:90%; margin:auto; padding-top:30px; padding-bottom:15px; background:#09678d;}
#main>#discover>p{ font-size:18px; margin:20px auto 0px auto;}
#main>#discover br{display:none;}
/* --- ! --- */
/* --- 02 PLAN --- */
#main>#plan{margin:auto; padding-top:30px; padding-bottom:30px; background:#09678d;}
#main>#plan br{display:none;}
#main>#plan>.clearfix>.cul{ width:100%; margin-top:20px;}
#main>#plan>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#plan>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:20px;}
#main>#plan>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#plan>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 03 BOOK --- */
#main>#book{margin:auto; padding-top:30px; padding-bottom:30px; background:#09678d;}
#main>#book>.clearfix>.cul{ width:100%; margin-top:30px; height:auto;}
#main>#book>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:20px;}
#main>#book>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#book>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 04 GET READY --- */
#main>#getready{margin:auto; padding-top:30px; padding-bottom:30px; background:#09678d;}
#main>#getready>.clearfix>.cul{ width:100%; margin-top:0px; height:auto;}
#main>#getready>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:20px;}
#main>#getready>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#getready>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 0px auto;}
/* --- ! --- */
/* --- 05 ENJOY --- */
#main>#enjoy{margin:auto; padding-top:30px; padding-bottom:30px; background:#09678d;}
#main>#enjoy br{display:none;}
#main>#enjoy>.clearfix>.cul{ width:100%; margin-top:20px;}
#main>#enjoy>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:50%; }
#main>#enjoy>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:20px;}
#main>#enjoy>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#enjoy>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 06 REVIEW --- */
#main>#review{margin:auto; padding-top:30px; padding-bottom:30px; background:#09678d;}
#main>#review br{display:none;}
#main>#review>.clearfix>.cul{ width:100%; margin-top:20px;}
#main>#review>.clearfix>.cul>figure{ width:230px; height:230px; margin:auto; border-radius:0%; }
#main>#review>.clearfix>.cul>h2{ font-size:14px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:20px;}
#main>#review>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#review>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:auto;}
/* --- ! --- */
/* --- 07 REMEMBER --- */
#main>#remember{margin:auto; padding-top:30px; padding-bottom:0px; background:#09678d;}
#main>#remember>h1{ font-size:20px; line-height:26px; margin-bottom:60px;}
#main>#remember br{display:none;}
#main>#remember>.clearfix>.cul{ width:100%; height:auto;}
#main>#remember>.clearfix>.cul>.verticalLine{display:none; visibility:hidden;}
#main>#remember>.clearfix>.center>.verticalLine{display:none; visibility:hidden;}
#main>#remember>.clearfix>.center{ height:auto;}
#main>#remember .diamond>img{transform:rotate(-45deg); -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin-top:-78%; margin-left:-78%;}
#main>#remember>.clearfix>.cul>.space{ height:0px;}
#main>#remember>.clearfix>.cul>h2{ font-size:16px; text-transform:uppercase; color:#fff; letter-spacing:0.2em; margin-top:60px;}
#main>#remember>.clearfix>.cul>.line{ margin:20px auto 20px auto; width:50px; height:1px; background:#09678d url("../img/bg-redline.png");}
#main>#remember>.clearfix>.cul>p{ font-size:14px; line-height:22px; width:80%; margin:20px auto 60px auto;}
#main>#remember .diamond{ margin:0px auto 0px auto;}
/* --- ! --- */
footer>.cont>p{ width:85%; margin-left:auto; margin-right:auto;}
footer>.cont>p{ font-size:14px;}
footer>.cont>p>a{ font-size:18px;}
footer>.cont>.button>p>a{ font-size: 30px; }
}
@media only screen and (max-width : 500px) {
.search_main_inside li p {
margin: 0 0 5px !important;
width: 100% !important;
}
.search_main {
left: 6%;
top: 36%;
width: 90% !important;
}
.searchForm
{
display:none;
}
.formDisplay
{
display:block !important;
cursor: pointer;
float: right;
margin-top: 6px;
}
.search_main_inside{
padding:10px;
margin-bottom: 10px;
cursor:pointer;
}
.search_main_inside h1 {
float: left;
margin: 0 !important;
}
.search_main_inside ul {
margin-top: 15px;
}
.search_main_offers {
font-size: 13px;
margin-bottom: 0;
padding:10px;
}
#main > header > .video > .layer > .description > .logo {
float: left;
margin-top:-6%;
}
#main > header > .video > .layer > .description > .play {
top: 39%;
}
.sf2
{
display:none !important;
}
#main > header > .video > .layer > .description > .share {
bottom: 0;
left: 8%;
position: absolute;
top: 99%;
width: 99%;
}
.playIco.floatL {
float: none;
}
// footer>.cont>p>a{ color:#FFF; text-decoration:none; font-size:36px;}
}
@media only screen and (max-width : 430px) {
#main > header > .video > .layer > .description > .play {
top: 49%;
}
}
@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
//#main>.number>div{background:url("../img/bg-numbers@2x.png") no-repeat right; width:42px; background-size:42px;}
//#main>#plan>.clearfix>.cul>.img01{ background: url("../img/s02-cul01-smartphoneswithgps@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#plan>.clearfix>.cul>.img02{ background: url("../img/s02-cul02-aerialsensors@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#plan>.clearfix>.cul>.img03{ background: url("../img/s02-cul03-socialnetwork@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#enjoy>.clearfix>.cul>.img01{ background: url("../img/s02-cul01-smartphoneswithgps@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#enjoy>.clearfix>.cul>.img02{ background: url("../img/s02-cul02-aerialsensors@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#enjoy>.clearfix>.cul>.img03{ background: url("../img/s02-cul03-socialnetwork@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#review>.clearfix>.cul>.img01{ background: url("../img/s02-cul01-smartphoneswithgps@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#review>.clearfix>.cul>.img02{ background: url("../img/s02-cul02-aerialsensors@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#main>#review>.clearfix>.cul>.img03{ background: url("../img/s02-cul03-socialnetwork@2x.png") center no-repeat, url("../img/bg-grey-noise.png"); background-size:contain;}
//#awwwards a {-moz-background-size: 70px 105px;-ie-background-size:70px 105px;-o-background-size:70px 105px;-webkit-background-size:70px 105px;background-size:70px 105px;}
//#awwwards.left.black a {background-image:url('../ribbons/awwwards_sotd_black_left2x.png');}
//#awwwards.right.black a {background-image:url('../ribbons/awwwards_sotd_black_right2x.png');}
//#awwwards.left.white a {background-image:url('../ribbons/awwwards_sotd_white_left2x.png');}
//#awwwards.right.white a {background-image:url('../ribbons/awwwards_sotd_white_right2x.png');}
//#awwwards.left.green a {background-image:url('../ribbons/awwwards_sotd_green_left2x.png');}
//#awwwards.right.green a {background-image:url('../ribbons/awwwards_sotd_green_right2x.png');}
#main > header > .video > .layer > .description > .logo {
float: left;
margin-top: 0;
background-size: 75% auto;
}
}
/* ==========================================================================
Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */
@media print {
* {
background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */
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) ")";
}
/*
* Don't show links for images, or javascript/internal links
*/
.ir a:after,
a[href^="javascript:"]:after,
a[href^="#"]:after {
content: "";
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
thead {
display: table-header-group; /* h5bp.com/t */
}
tr,
img {
page-break-inside: avoid;
}
img {
max-width: 100% !important;
}
@page {
margin: 0.5cm;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}
@media screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2){
#main > header > .video > .layer > .description {
left: 5%;
top: 42%;
width: 82%;
}
#main > header > .video > .layer > .description > .share > ul {
width: 54%;
}
#main > header > .video > .layer > .description > .share > ul > li {
width: 24%;
}
#main > header > .video > .layer > .description > .play {
margin-top: 42%;
width:50px;
height:50px;
}
.playIco.floatL {
float: left;
}
#main > header > .video > .layer > .description > .play > .playIco {
height: 50px;
width: 50px;
margin-top:-50%;
}
}
.customDropDown
{
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: black -moz-use-text-color -moz-use-text-color;
border-image: none;
border-right: medium none;
border-style: solid none none;
border-width: 1px medium medium;
color: black;
float: left;
margin-left: -5px;
padding: 5px !important;
/*width: 100% !important;*/
max-height: 100px !important;
overflow-y: scroll !important;
/*background: none repeat scroll 0 0 white !important;*/
float: left;
margin-top: 23px;
position: absolute;
width: 128px !important;
background-color:#D0DCE6 !important;
}
.customLabelHeader
{
color: black !important;
float: none !important;
font-size: auto !important;
margin-bottom: 0px !important;
width: auto !important;
background: none !important;
}
.customLabel
{
color: black !important;
float: none !important;
font-size: auto !important;
margin-bottom: 0px !important;
width: auto !important;
background: none !important;
}
.customLabel:hover
{
color: black !important;
float: none !important;
font-size: auto !important;
margin-bottom: 0px !important;
width: auto !important;
cursor: pointer !important;
background: none repeat scroll 0 0 rgba(9, 97, 139, 0.8) !important;
}