/*----------------------------------------------------------------------------------- myFFmpeg004 Built with Blocs -----------------------------------------------------------------------------------*/ body{ margin:0; padding:0; background:#FFF; overflow-x:hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:hover{text-decoration: none; cursor:pointer;} a,button{outline: none!important;} /* Prevent ugly blue glow on chrome and safari */ #page-loading-blocs-notifaction{position: fixed;top: 0;bottom: 0;width: 100%;z-index:100000;background:#FFFFFF url("img/pageload-spinner.gif") no-repeat center center;} /* = 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; position:relative; } .bloc .container{ padding-left:0; padding-right:0; } /* Sizes */ .bloc-xxl{ padding:200px 50px; } .bloc-xl{ padding:150px 50px; } .bloc-lg{ padding:100px 50px; } .bloc-md{ padding:50px; } .bloc-sm{ padding:20px 50px; } /* Group Styles */ .bloc-group{ display:flex; } .bloc-group .bloc{ flex: 1; } .bloc-tile-2{ width:50%; } .bloc-tile-3{ width:33.33333333%; } .bloc-tile-4{ width:25%; } .bloc-tile-2 .container, .bloc-tile-3 .container, .bloc-tile-4 .container{ width:100%; } /* Background Styles */ .bg-center,.bg-l-edge,.bg-r-edge,.bg-t-edge,.bg-b-edge,.bg-tl-edge,.bg-bl-edge,.bg-tr-edge,.bg-br-edge,.bg-repeat{ -webkit-background-size: auto!important; -moz-background-size: auto!important; -o-background-size: auto!important; background-size: auto!important; } .bg-repeat{ background:repeat; } /* Background Effects */ .b-parallax{ background-attachment:fixed; } /* Dark theme */ .d-bloc{ color:rgba(255,255,255,.7); } .d-bloc button:hover{ 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-btn,.d-bloc .navbar a,.d-bloc .navbar-brand, .d-bloc a .icon-sm, .d-bloc a .icon-md, .d-bloc a .icon-lg, .d-bloc a .icon-xl, .d-bloc h1 a, .d-bloc h2 a, .d-bloc h3 a, .d-bloc h4 a, .d-bloc h5 a, .d-bloc h6 a, .d-bloc p a{ color:rgba(255,255,255,.6); } .d-bloc .a-btn:hover,.d-bloc .navbar a:hover,.d-bloc .navbar-brand:hover,.d-bloc a:hover .icon-sm, .d-bloc a:hover .icon-md, .d-bloc a:hover .icon-lg, .d-bloc a:hover .icon-xl, .d-bloc h1 a:hover, .d-bloc h2 a:hover, .d-bloc h3 a:hover, .d-bloc h4 a:hover, .d-bloc h5 a:hover, .d-bloc h6 a:hover, .d-bloc p 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); } .d-bloc .panel{ color:rgba(0,0,0,.5); } .d-bloc .panel button:hover{ color:rgba(0,0,0,.7); } .d-bloc .panel icon{ border-color:rgba(0,0,0,.7); } .d-bloc .panel .divider-h span{ border-color:rgba(0,0,0,.1); } .d-bloc .panel .a-btn{ color:rgba(0,0,0,.6); } .d-bloc .panel .a-btn:hover{ color:rgba(0,0,0,1); } .d-bloc .panel .btn-wire, .d-bloc .panel .btn-wire:hover{ color:rgba(0,0,0,.7); border-color:rgba(0,0,0,.3); } /* Light theme */ .d-bloc .panel,.l-bloc{ color:rgba(0,0,0,.5); } .d-bloc .panel button:hover,.l-bloc button:hover{ 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); } .d-bloc .panel .divider-h span,.l-bloc .divider-h span{ border-color:rgba(0,0,0,.1); } .d-bloc .panel .a-btn,.l-bloc .a-btn,.l-bloc .navbar a,.l-bloc .navbar-brand,.l-bloc a .icon-sm, .l-bloc a .icon-md, .l-bloc a .icon-lg, .l-bloc a .icon-xl, .l-bloc h1 a, .l-bloc h2 a, .l-bloc h3 a, .l-bloc h4 a, .l-bloc h5 a, .l-bloc h6 a, .l-bloc p a{ color:rgba(0,0,0,.6); } .d-bloc .panel .a-btn:hover,.l-bloc .a-btn:hover,.l-bloc .navbar a:hover, .l-bloc .navbar-brand:hover, .l-bloc a:hover .icon-sm, .l-bloc a:hover .icon-md, .l-bloc a:hover .icon-lg, .l-bloc a:hover .icon-xl, .l-bloc h1 a:hover, .l-bloc h2 a:hover, .l-bloc h3 a:hover, .l-bloc h4 a:hover, .l-bloc h5 a:hover, .l-bloc h6 a:hover, .l-bloc p a:hover{ color:rgba(0,0,0,1); } .l-bloc .navbar-toggle .icon-bar{ color:rgba(0,0,0,.6); } .d-bloc .panel .btn-wire,.d-bloc .panel .btn-wire:hover,.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; } /* Bloc text custom styling */ #topscreen h3{ line-height: 20px; font-size: 26px; font-family: Lato; font-weight: 300; } #topscreen p{ font-size: 16px; font-family: Lato; font-weight: 300; } #midsection p{ font-family: Lato; font-weight: 300; font-size: 34px; } #slogansection h3{ font-family: Lato; font-weight: 300; font-size: 34px; } #slogansection p{ font-family: Lato; font-weight: 300; font-size: 30px; } #bloc-10 h3{ line-height: 50px; font-size: 36px; font-family: Lato; font-weight: 300; } #bloc-11 h3{ font-size: 34px; } #bloc-18 p{ font-size: 34px; font-family: Lato; font-weight: 300; } #bloc-19 h2{ font-family: Lato; font-weight: 300; } #bloc-19 h3{ font-size: 20px; font-family: Lato; font-weight: 300; } #bloc-19 p{ font-size: 16px; font-family: Lato; font-weight: 300; } #bloc-20 p{ font-size: 16px; font-family: Lato; font-weight: 300; } #bloc-22 p{ font-family: Lato; font-weight: 400; font-size: 28px; } #bloc-25 p{ font-size: 22px; font-family: Lato; font-weight: 300; } #bloc-26 h3{ font-size: 28px; font-family: Lato; font-weight: 300; } #bloc-26 p{ font-size: 18px; font-family: Lato; font-weight: 300; } #bloc-28 h3{ font-size: 36px; font-family: Lato; font-weight: 300; } #bloc-29 p{ line-height: 100px; } #bloc-30 h3{ font-size: 13px; line-height: 13px; } #bloc-30 p{ line-height: 16px; } #bloc-31 h3{ font-size: 26px; } #bloc-31 p{ font-size: 18px; } #bloc-33 h3{ line-height: 46px; font-size: 26px; font-family: Lato; font-weight: 300; } #bloc-33 p{ font-size: 16px; font-family: Lato; font-weight: 300; } #bloc-34 h3{ line-height: 46px; font-size: 26px; font-family: Lato; font-weight: 300; } #bloc-34 p{ font-size: 16px; font-family: Lato; font-weight: 300; } #bloc-35 h3{ line-height: 46px; font-size: 26px; font-family: Lato; font-weight: 300; } #bloc-35 p{ font-size: 16px; font-family: Lato; font-weight: 300; } /* = NavBar -------------------------------------------------------------- */ .navbar{ margin-bottom: 0; z-index:1; } .navbar-brand{ height:auto; padding:3px 15px; font-size:25px; font-weight:normal; font-weight:600; line-height:44px; } .navbar-brand img{ max-height: 200px; margin: 0 5px 0 0; display:inline; } .nav-center .navbar-brand img{ margin:0; } .navbar .nav{ padding-top: 2px; margin-right: -16px; float:right; z-index:1; } .nav > li{ float:left; margin-top:4px; font-size:16px; } .navbar-nav .open .dropdown-menu > li > a{ text-align: inherit; } .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; } @media (min-width: 768px){ .site-navigation{ position:absolute; top:50%; right:20px; transform:translate(0, -50%); -webkit-transform:translateY(-50%); } .nav > li .dropdown-menu a,.nav > li .dropdown-menu a:hover{ color:#484848; } .nav-invert .site-navigation{ left:0; right:0; } .nav-center{ text-align:center; } .nav-center .navbar-header{ width:100%; } .nav-center .navbar-header, .nav-center .navbar-brand, .nav-center .nav > li{ float: none; display:inline-block; } .nav-center .site-navigation{ position:relative; width:100%; margin-top:20px; } .nav-center.mini-nav .navbar-toggle{ float:none; margin: 10px auto 0; } } .nav > li > .dropdown a{ background: none!important; display: block; padding: 14px 15px; } nav .caret{ margin: 0 5px; } /* Dropdown Menus SubMenu */ .dropdown-menu .dropdown-menu{ top:-8px; left:100%; } .dropdown-menu .dropmenu-flow-right{ top:100%; left:0; margin-left: -1px; border-top-left-radius: 0; border-top-right-radius: 0; } .dropdown-menu .dropdown span{ border: 4px solid black; border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent; margin: 6px -5px 0 0!important; float: right; } /* = Bric adjustment margins -------------------------------------------------------------- */ .mg-clear{ margin:0; } .mg-sm{ margin-top:10px; margin-bottom:5px; } .mg-md{ margin-top:10px; margin-bottom:20px; } .mg-lg{ margin-top:10px; 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; background:rgba(0,0,0,.3); } /* Prevent ugly blue glow on chrome and safari */ button{ outline: none!important; } .btn-sq{ border-radius: 0px; } .btn-xl{ padding: 16px 40px; font-size: 28px; } .icon-spacer{ margin-right:5px; } .btn .caret{ margin:0 0 0 5px}.dropdown a .caret{ margin:0 0 0 5px}.btn-dropdown .dropdown-menu .dropdown{ padding: 3px 20px; } /* = 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; } .panel-sq, .panel-sq .panel-heading, .panel-sq .panel-footer{ border-radius:0; } .panel-rd{ border-radius:30px; } .panel-rd .panel-heading{ border-radius:29px 29px 0 0; } .panel-rd .panel-footer{ border-radius:0 0 29px 29px; } /* iFrame */ iframe{ border:0; } /* ScrollToTop button */ .scrollToTop{ width:40px; height:40px; position:fixed; bottom:20px; right:20px; opacity: 0; z-index: 500; transition: all .3s ease-in-out; } .scrollToTop span{ margin-top: 6px; } .showScrollTop{ font-size: 14px; opacity: 1; } /* = Custom Styling -------------------------------------------------------------- */ /* = Colour -------------------------------------------------------------- */ /* Background colour styles */ .bgc-white{ background-color:#ffffff; } .bgc-mountain-meadow{ background-color:#3CB89B; } .bgc-dark-cerulean{ background-color:#80E5FF; } .bgc-united-nations-blue{ background-color:#5099E3; } .bgc-medium-jungle-green{ background-color:#222C38; } .bgc-silver{ background-color:#C4C4C4; } /* Text colour styles */ .tc-black{ color:#000000!important; } .tc-white{ color:#ffffff!important; } /* Button colour styles */ .btn-blue-ryb{ background:#0649FF; color:#FFFFFF!important; } .btn-blue-ryb:hover{ background:#053acc; color:#FFFFFF!important; } /* Link colour styles */ .ltc-black{ color:#000000!important; } .ltc-black:hover{ color:#000000!important; } .ltc-blue-ryb{ color:#0649FF!important; } .ltc-blue-ryb:hover{ color:#053acc!important; } .ltc-silver{ color:#C4C4C4!important; } .ltc-silver:hover{ color:#9d9d9d!important; } /* Bloc image backgrounds */ .bg-map{ background-image:url("img/map.jpg"); } .bg-map-overlay{ background-image:url("img/map-overlay.png"); } .bg-map-overlay{ background-image:url("img/map-overlay.png"); } .bg-map-overlay{ background-image:url("img/map-overlay.png"); } .bg-map-overlay{ background-image:url("img/map-overlay.png"); } /* = Mobile adjustments -------------------------------------------------------------- */ @media (max-width: 1024px) { .bloc{ padding-left: 20px; padding-right: 20px; } .bloc.full-width-bloc, .bloc-tile-2.full-width-bloc .container, .bloc-tile-3.full-width-bloc .container, .bloc-tile-4.full-width-bloc .container{ padding-left: 0; padding-right: 0; } } @media (max-width: 992px) and (min-width: 768px) { .navbar .nav{ max-width:80% } .nav-center.navbar .nav{ max-width:100% } } @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {.b-parallax{background-attachment:scroll;}} @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 */ .bloc-group, .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;} } @media (max-width: 767px) { .page-container{ overflow-x: hidden; position:relative; } h1,h2,h3,h4,h5,h6,p,#disqus_thread{ 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; } .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; padding-left:15px; width:100%; } .nav > li:hover{ background:rgba(0,0,0,.08); } .dropdown .dropdown a .caret{ float: none; margin: 5px 0 0 10px!important; border: 4px solid black; border-bottom-color: transparent; border-right-color: transparent; border-left-color: transparent; } #hero-bloc .navbar .nav{ background:rgba(0,0,0,.8); } #hero-bloc .navbar .nav a{ color:rgba(255,255,255,.6); } .hero{ padding:50px 0; } .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; } .nav-invert .navbar-header{ float: none; width:100%; } .nav-invert .navbar-toggle{ float:left; } .bloc-xxl,.bloc-xl,.bloc-lg{ padding: 40px 0; } .bloc-sm,.bloc-md{ padding-left: 0; padding-right: 0; } .a-block{ padding:0 10px; } .btn-dwn{ display:none; } .voffset{ margin-top:5px; } .voffset-md{ margin-top:20px; } .voffset-lg{ margin-top:30px; } form{ padding:5px; } .close-lightbox{ display:inline-block; } .video-bg-container{ display:none; } .blocsapp-device-iphone5{ background-size: 216px 425px; padding-top:60px; width:216px; height:425px; } .blocsapp-device-iphone5 img{ width: 180px; height: 320px; } } @media (max-width: 400px) { .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%; } }