@import url(http://fonts.googleapis.com/css?family=Playfair+Display+SC); @import url(http://fonts.googleapis.com/css?family=Playfair+Display); body{ margin:0; padding:0; overflow-x:hidden; -webkit-font-smoothing: antialiased; background-color: black; } a:hover{text-decoration: none; cursor:pointer;} button{outline: none!important;} /* Prevent ugly blue glow on chrome and safari */ li { list-style-type: none; } /* Globals type styling */ h1, h2, h3, h4, h5, h6 { font-family:PlayFair Display SC; } li, p, label, .btn, a{ font-family:PlayFair Display; } /* Site container width */ .container{ max-width:1170px; } nav { height: 20px; width: 100%; background-color: rgba(255, 255, 255, 0.8); } nav ul { margin-bottom: -3px; position: absolute; right: 5px; } nav li { padding: 0 5px; display: inline-block; } nav a{ color: black; } /* = blocs -------------------------------------------------------------- */ .bloc{ width:100%; clear:both; background: 50% 50% no-repeat; padding:0 50px; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .bloc .container{ padding-left:0; padding-right:0; } /* Sizes */ .bloc-xl{ padding:200px 50px; } .bloc-lg{ padding:100px 50px; } .bloc-sm{ padding:20px 50px; } /* Dark theme */ .d-bloc{ color:rgba(255,255,255,.7); } .d-bloc button:hover{ color:rgba(255,255,255,.9); } .d-bloc h1, .d-bloc h2, .d-bloc h3, .d-bloc h4,.d-bloc h5, .d-bloc h6, .d-bloc .ico{ color:rgba(255,255,255,.9); } .d-bloc .icon-round,.d-bloc .icon-square,.d-bloc .icon-rounded,.d-bloc .icon-semi-rounded-a,.d-bloc .icon-semi-rounded-b{ border-color:rgba(255,255,255,.9); } .d-bloc .divider-h span{ border-color:rgba(255,255,255,.2); } .d-bloc a{ color:rgba(255,255,255,.6); } .d-bloc a:hover{ color:rgba(255,255,255,1); } .d-bloc .navbar-toggle .icon-bar{ background:rgba(255,255,255,1); } .d-bloc .btn-wire,.d-bloc .btn-wire:hover{ color:rgba(255,255,255,1); border-color:rgba(255,255,255,1); } /* Light theme */ .l-bloc{ color:rgba(0,0,0,.5); } .l-bloc button:hover{ color:rgba(0,0,0,.7); } .l-bloc h1,.l-bloc h2,.l-bloc h3,.l-bloc h4,.l-bloc h5, .l-bloc h6, .l-bloc .ico{ color:rgba(0,0,0,.7); } .l-bloc .icon-round,.l-bloc .icon-square,.l-bloc .icon-rounded,.l-bloc .icon-semi-rounded-a,.l-bloc .icon-semi-rounded-b{ border-color:rgba(0,0,0,.7); } .l-bloc .divider-h span{ border-color:rgba(0,0,0,.1); } .l-bloc a{ color:rgba(0,0,0,.6); } .l-bloc a:hover{ color:rgba(0,0,0,1); } .l-bloc .navbar-toggle .icon-bar{ color:rgba(0,0,0,.6); } .l-bloc .btn-wire, .l-bloc .btn-wire:hover{ color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.3); } /* Row Margin Offsets */ .voffset{ margin-top:30px; } /* Custom bloc styling */ #bloc-0,#bloc-1,#bloc-2,#bloc-b,#bloc-3,#bloc-4,#bloc-5,#bloc-6{ background-color:#FFF !important; } .intro { max-width: 740px; text-align: center; margin: 0 auto; } #bloc-0 { margin-bottom: 0 !important; } #audience { margin: 0 0 0 0; width: 100%; background-color: black; padding: 15px 0 30px 0; } #audience ul { -webkit-padding-start: 0px !important; -moz-padding-start: 0px !important; -o-padding-start: 0px !important; padding-start: 0px !important; } .aud { margin: 0 -2px; width: 33.33%; list-style-type: none; display: inline-block; padding-left: 0; } .aud a { color: white; } .aud h3 { padding-top: 20px; font-size: 1.5em; } #bloc-0 h3{ font-size: 52px; } #bloc-3 h2 { text-align: center; padding-bottom: 40px; } #bloc-5 h3{ line-height: 32px; } #bloc-6 { background-color: white; background-color: rgba(255, 255, 255, 0.8) !important; margin-top: -10px; } #bloc-6 img { border-radius: 10px; } #bloc-b { margin-top: -120px; } .story { margin-top: -20px; } /* Bloc image backgrounds */ .bg-seafood { background-image: linear-gradient( rgba(255,255,255, 0.2), rgba(0, 0, 0, 0.4) ),url('img/seafood.jpg'); } /* = NavBar -------------------------------------------------------------- */ .navbar{ margin-bottom: 0; } .navbar-brand{ height:auto; padding:15px 15px; font-size:25px!important; font-weight:normal; font-weight:600; } .navbar-brand img{ max-height: 200px; margin: 0 5px 0 0; display:inline; } .navbar-brand{ padding: 15px 15px; } .navbar .nav{ padding-top: 2px; margin-right: -16px; float:right; } .nav > li{ float:left; margin-top:4px; font-size:16px; } .nav > li a:hover, .nav > li a:focus{ background:transparent; } .navbar-toggle{ margin: 10px 10px 0 0; border: 0px; } .navbar-toggle:hover{ background:transparent!important; } .navbar-toggle .icon-bar{ background-color: rgba(0,0,0,.5); width: 26px; } /* Inverted navbar */ .nav-invert .navbar .nav{ float:left; } .nav-invert .navbar-header, .nav-invert .navbar-brand{ float:right; } /* Hover Effect on homepage -------------------------------------------------------------- */ .box { cursor: pointer; position: relative; overflow: hidden; width: 100%; height: 100%; } /*.box img { position: absolute; left: 0; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; }*/ .box .overbox { background-color: rgba(0,0,0,.8); position: absolute; top: 0; left: 0; color: #fff; z-index: 100; -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; opacity: 0; width: 100%; height: 100%; } .box:hover .overbox { opacity: .9; } .box .overtext { -webkit-transition: all 300ms ease-out; -moz-transition: all 300ms ease-out; -o-transition: all 300ms ease-out; -ms-transition: all 300ms ease-out; transition: all 300ms ease-out; transform: translateY(300px); -webkit-transform: translateY(300px); text-align: center; } .box .title { font-size: 1.5em; font-family: playfair display; opacity: 0; transition-delay: 0.1s; transition-duration: 0.2s; } .title { padding-top: 100px; } .text { padding-top: 10px; } .box:hover .title, .box:focus .title { opacity: 1; transform: translateY(0px); -webkit-transform: translateY(0px); } .box .text { font-size: 1.2em; opacity: 0; transition-delay: 0.2s; transition-duration: 0.2s; } .box:hover .text, .box:focus .text { opacity: 1; transform: translateX(0px); -webkit-transform: translateX(0px); } /* end hover gallery */ @media (min-width: 768px){ .site-navigation{ position:absolute; top:50%; right:20px; transform:translate(0, -50%); -webkit-transform:translateY(-50%); } .nav-invert .site-navigation{ left:20px; right:0; } } /* = Bric adjustment margins -------------------------------------------------------------- */ .mg-md{ margin-top:20; margin-bottom:20px; } .mg-lg{ margin-top:4; margin-bottom:40px; } /* = Buttons -------------------------------------------------------------- */ .btn{ margin: 0 5px 5px 0; } .btn.pull-right{ margin: 0 0 5px 5px; } .btn-d,.btn-d:hover,.btn-d:focus{ color:#FFF!important; background:rgba(0,0,0,.3); } /* Prevent ugly blue glow on chrome and safari */ button{ outline: none!important; } /* = Icons -------------------------------------------------------------- */ .icon-md{ font-size:30px!important; } .icon-round{ margin:0 auto; border:2px solid transparent; border-radius: 50%; padding: 32px 30px 26px 30px; min-width:80px; } .icon-round,.icon-md,.icon-square.icon-md,.icon-rounded.icon-md{ min-width: 92px; } .icon-round.icon-lg,.icon-square.icon-lg,.icon-rounded.icon-lg{ min-width: 122px; } .icon-round.icon-xl,.icon-square.icon-xl,.icon-rounded.icon-xl{ min-width: 162px; } /* City Toggle -------------------------------------------------------------- */ /* iFrame */ iframe{ border:0; } /* = Mobile adjustments -------------------------------------------------------------- */ @media (max-width: 768px) { .container{width:100%;} .b-parallax{background-attachment:scroll;} .page-container, #hero-bloc{overflow-x: hidden;position: relative;} /* Prevent unwanted side scroll on mobile */ } @media (max-width: 767px) { .page-container{ overflow-x: hidden; position:relative; } h1,h2,h3,h4,h5,h6,p{ padding-left:10px!important; padding-right:10px!important; } #hero-bloc h1{ font-size:40px; } #hero-bloc h2{ font-size:34px; } #hero-bloc h3{ font-size:25px; } .aud h3 { font-size: 0.8em; } .bloc{ padding-left: 0; padding-right: 0; -webkit-background-size: auto 200%; -moz-background-size: auto 200%; -o-background-size: auto 200%; background-size: auto 200%; } .bloc, .bloc .text-right{ text-align: center!important; } .b-parallax{ background-attachment:scroll; } .navbar .nav{ padding-top: 0; border-top:1px solid rgba(0,0,0,.2); float:none!important; } .navbar.row{ margin-left: 0; margin-right: 0; } .site-navigation{ position:inherit; transform:none; -webkit-transform:none; -ms-transform:none; } .nav > li{ margin-top: 0; border-bottom:1px solid rgba(0,0,0,.1); background:rgba(0,0,0,.05); text-align: left; width:100%; } .nav > li:hover{ background:rgba(0,0,0,.08); } #hero-bloc .navbar .nav{ background:rgba(0,0,0,.8); } #hero-bloc .navbar .nav a{ color:rgba(255,255,255,.6); } .hero-nav{ left:-1px; right:-1px; } .navbar-collapse{ padding:0; overflow-x: hidden; -webkit-box-shadow: none; box-shadow: none; } .navbar-brand img{ max-height: 40px; width:auto; margin: -10px 10px 0 0; } .nav-invert .navbar-header{ float: none; width:100%; } .nav-invert .navbar-toggle{ float:left; } .btn.pull-left, .btn.pull-right{ float:none!important; } .bloc-group .bloc{ display:block; width:100%; } .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{ padding-left: 10px; padding-right: 10px; } .bloc-xl,.bloc-lg{ padding: 40px 0; } .bloc-sm,.bloc-md{ padding-left: 0; padding-right: 0; } .a-block{ text-align: center; } .btn-dwn{ display:none; } form{ padding:5px; } .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 { margin-top: 50px; margin-bottom: 50px; } }