/* Theme Name: BMS-THEMES-0917722285 Theme URI: 0917722285 Contact: 0917722285 Description: CHUYÊN GIA CÔNG WEBSITE, PHẦN MỀM, CUNG CẤP HOSTING, THIẾT BỊ IOT, VÀ CÁC DỊCH VỤ KỸ THUẬT Author: MINH MỌI Author URI: http://nguyenanhminh.bms.vn License: GNU GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html Version: 1.2 Tags: loc yen company, yen sao, website chim yen, website animation, website chuyen nghiep. Text Domain: BMS Domain Path: /languages/ BMS Theme, (C) 2019 Loc Yen Themes */ html { margin:0 !important; padding:0 !important; } body { height:100%; min-height: 100%; margin:0 !important; padding:0 !important; color: #000; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; font-weight: 300; line-height: 185%; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; background: #414141; } h1 { font-size: 36px; color: #000; margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-weight: 800; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } h2 { color: #000; margin:0; padding:0; margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-size: 32px; font-weight: 800; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } h3 { color: #000; margin:0; padding:0; margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-size: 30px; font-weight: 800; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } h4 { color: #000; margin:0; padding:0; margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-size: 26px; font-weight: 800; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } h5 { color: #000; margin:0; padding:0; margin-top: 20px; margin-bottom: 20px; text-transform: uppercase; font-size: 22px; font-weight: 800; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } p { margin-top: 10px; } img { border: none; padding:0; } img a { border:none; } img.left { float: left; border: none; padding: 6px 0 0 0; } img.right { float: right; border: none; padding: 0 0 0 6px; } blockquote { border-left:1px solid #000; margin:15px; padding:0 12px 0 12px; font-style: italic; } code { font-family:"Courier New", Courier, monospace; } /* links */ a { color: #000; text-decoration: underline; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } a:hover { text-decoration: none; } /* container */ #container { width: 100%; float: left; clear: left; overflow: hidden; } #wrapper { width: 100%; float: left; clear: left; } /* header */ #header { width: 100%; margin: 0; float: left; clear: left; padding-top: 40px; padding-bottom: 80px; position: relative; } #headerbg { position: fixed; z-index: -1; width: 100%; top: 0; left: 0; bottom: 0; margin: 0; display: none; } #headerin { width: 100%; float: left; clear: left; padding-top: 20px; padding-bottom: 0; } #headerline { max-width: 1050px; margin: 0 auto; padding-left: 25px; padding-right: 25px; display: block; position: relative; } #logo { width: 50%; float:left; margin-left: 10%; margin-top: 0; text-align: center; } #logo img { display: inline-block; max-width: 100%; min-width: 50px; line-height: 70%; } #logo a { color: #000; text-decoration: none; display: block; } h1.site-title { font-size: 32px; color: #000; text-transform: uppercase; line-height: 100%; margin: 0; padding: 5px; display: inline-block; font-weight:800; clear: both; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; } h2.site-description { font-size: 14px !important; text-transform: uppercase; margin: 0; margin-top: 10px; color: #000; font-weight: 600; line-height: 120%; clear: both; font-family: 'Open Sans', arial, helvetica, sans-serif; } #headerimage { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; left: 0; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; } @keyframes headerfade { from { opacity: 0; } to { opacity: 1; } } /* search */ #searchform { padding:0; margin:0; float: left; width: 170px; margin-top: 10px; margin-right: 8px; } #searchform input#s { margin:0; padding:2px; width: 157px; padding-left: 3px; background: none; border: solid 1px #000; height:20px; font-size:11px; padding-top:2px; color: #000; } #searchform input#searchsubmit { display: none; } .error404 #searchform { width: 100%; } .error404 #searchform input#s { width: 100%; border: solid 1px #666; } /* Main Menu */ /*overlay*/ body.sm-activate { overflow: hidden; } .sm-menu { position: fixed; visibility: hidden; opacity: 0; width: 1024px; height: 600px; left: 50%; top: 150%; margin-left: -512px; margin-top: -300px; z-index: 1001; } .menusection { display: none; } .sm-menu.animated { -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .sm-menu.sm-bottom-left { -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); top: 150%; left: -150%; } .sm-menu.sm-bottom-right { -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); transform: rotate(135deg); top: 150%; left: 150%; } .sm-menu.sm-top { top: -150%; } .sm-menu.sm-top-left { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: -150%; left: -150%; } .sm-menu.sm-top-right { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: -150%; left: 150%; } .sm-menu.sm-left { top: 50%; left: -150%; } .sm-menu.sm-right { top: 50%; left: 150%; } .sm-menu.re-rotate { -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0); } .sm-menu.ff-hack { opacity: 1; visibility: visible; top: 50%; left: 50%; } .sm-menu .sm-nav { -webkit-transform: translate3d(50%, 0, 0) scale(0.002, 1); -moz-transform: translate3d(50%, 0, 0) scale(0.002, 1); -ms-transform: translate3d(50%, 0, 0) scale(0.002, 1); -o-transform: translate3d(50%, 0, 0) scale(0.002, 1); transform: translate3d(50%, 0, 0) scale(0.002, 1); -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; width: 50%; height: 100%; position: absolute; top: 0; background: rgba(0,0,0,.6); } .sm-menu .left { background: #000; } .sm-menu.sm-horizontal .sm-nav { -webkit-transform: translate3d(25%, 0, 0) scale(0.5, 0.002); -moz-transform: translate3d(25%, 0, 0) scale(0.5, 0.002); -ms-transform: translate3d(25%, 0, 0) scale(0.5, 0.002); -o-transform: translate3d(25%, 0, 0) scale(0.5, 0.002); } .sm-menu.sm-horizontal .sm-nav:nth-child(2) { -webkit-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002); -moz-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002); -ms-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002); -o-transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002); transform: translate3d(-25%, 0, 0) scaleX(0.5) scaleY(0.002); right: 0; } .sm-menu .sm-nav .nav-inner{ display: none; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; vertical-align: middle; white-space: normal; text-align: left; } .sm-menu .sm-nav .nav-inner.animated{ display: inline-block; width: 60%; margin-left: 20%; } .sm-menu .sm-nav:nth-child(2) { -webkit-transform: translate3d(-50%, 0, 0) scaleX(0.002); -moz-transform: translate3d(-50%, 0, 0) scaleX(0.002); -ms-transform: translate3d(-50%, 0, 0) scaleX(0.002); -o-transform: translate3d(-50%, 0, 0) scaleX(0.002); transform: translate3d(-50%, 0, 0) scaleX(0.002); right: 0; } .sm-menu .sm-nav.animated, .sm-menu.sm-horizontal .sm-nav.animated { -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } .sm-menu .sm-nav:after { content: ""; position: relative; height: 100%; display: inline-block; vertical-align: middle; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: inline-block; } .sm-menu .sm-close { position: absolute; top: 0; right: 0; z-index: 100; padding: 10px 15px; font-size: 30px; font-weight: 100; line-height: 100%; text-decoration: none; } .sm-menu .sm-close:hover { color: #ccc; } .sm-menu .sm-nav .nav-inner > a{ font-size: 36px; line-height: 40px; margin-bottom: 32px; font-weight: 300; display: block; color: white; } .sm-menu .sm-nav .nav-inner > a:hover{ color: #2E3B4E; } .sm-menu .sm-close { color: white; } .sm-overlay { cursor: pointer; height: 100%; width: 100%; background: rgba(255,255,255,.4); position: fixed; left: 0; right: 0; top: 0; z-index: 999; overflow: hidden; visibility: hidden; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .sm-button { position: absolute; width: 30px; padding: 2px 8px; color: white; font-weight: bold; z-index: 102; left: 25px; top: 10px; background: rgba(0,0,0,.6); border-radius: 2px; } .sm-button:hover { opacity: .7; } .bar1, .bar2, .bar3 { width: 30px; height: 2px; background-color: #fff; margin: 7px 0; transition: 0.4s; opacity: .7; } .sm-button:hover { color: white; } body.sm-activate .sm-overlay { opacity: 1; visibility: visible; } @-webkit-keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .flyInRight { -webkit-animation-name: flyInRight; animation-name: flyInRight; } .flyInLeft { -webkit-animation-name: flyInLeft; animation-name: flyInLeft; } .sm-menu, .sm-menu a { color: #fff; } .sm-menu ul li { list-style: none; margin-top: 15px; margin-bottom: 15px; } #rightbar .nav-inner { width: 100%; float: left; margin-bottom: 30px; } #rightbar .nav-inner ul li ul, .sm-menu ul li ul { display: none; } #rightbar .nav-inner ul li a, .sm-menu ul li a { font-size: 14px; text-transform: uppercase; text-decoration: none; font-family: 'Raleway', arial, helvetica; font-weight: 800; } .sm-menu h2.widget-title { color: #fff; font-size: 18px; } #rightbar .nav-inner ul li a:hover, .sm-menu ul li a:hover, .sm-menu ul li.current-menu-item a { color: #666; } /* Side Panel */ #slider { background: rgba(0,0,0,.7); display: none; overflow: auto; } #trigger { width: 46px; height: 38px; position: absolute; right: 25px; top: 10px; color: #fff; background: rgba(0,0,0,.6); border-radius: 2px; opacity:.7; font-size: 54px; text-align: center; line-height: 32px; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } #trigger:hover { opacity: .5; } .scrollbar { margin-left: 20px; float: left; width: 100%; height: 550px; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; } /* * STYLE 4 */ #style-4::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5; } #style-4::-webkit-scrollbar { width: 10px; background-color: #F5F5F5; } #style-4::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } /* Content Section */ #contentwrapper { width: 60%; margin: 0 auto; border-radius: 2px; padding: 0px 15px; margin-bottom: 120px; position: relative; background: linear-gradient(990deg, white, transparent); opacity: 0; float: right; z-index: 3; -webkit-overflow-scrolling: touch; } #searchresult, #content { width: 100%; display: inline-block; padding: 0; margin: 0; margin-top: 20px; } .bg-img { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; z-index: 0; } /* Search Results */ .search-results #searchresult { text-align: left; } .search-results .type-product, .search-results .type-page, .search-results .type-portfolio { width: 100%; float: left; clear: left; background: none; margin-bottom: 40px; } .search-results .pagination { display: block !important; } /* content */ .post { margin:0; padding:0; width: 100%; float: left; clear: left; margin-bottom: 0px; } .singular .post { margin-bottom: 0; } .entry { } /* Content Titles */ h1.page-title, h1.entry-title { font-size: 28px !important; text-transform: uppercase; margin: 0; margin-top: 40px; color: #000; font-weight: 800; line-height: 120%; text-align: center; } h2.entry-title { font-size: 22px; color: #000; margin-top: 0; margin-bottom: 0; text-transform: none; line-height: 110%; margin-top: 10px; letter-spacing: 1px; text-align: left; font-weight: 400; } .term-description, .archive .taxonomy-description { text-align: center; clear: left; } h2.entry-title a { text-decoration: none; font-size: 22px; line-height: 110%; font-weight: 500; text-transform: uppercase; } .attachment-melograno-blogthumb { left: 50px; top: 50px; position: absolute; z-index: 1; width:200px; } .archive .entry, .blog .entry { width: calc(100% - 32px); min-height: 0px; margin-top: 30px; position: relative; z-index: 2; border: solid 1px #666; } .innerentry { max-width: 480px; margin: 0px; float: right; } .archive #content .post, .blog #content .post { padding-bottom: 0px; position: relative; } .blog #content h2.entry-title, .blog #content h2.entry-title a { } .post ul { } .post li { margin-left: 15px; } .entry p { margin: 8px 0; } .postcat span { font-size: 12px; font-weight: 400; text-transform: none; text-decoration: none; border-radius: 15px; color: #999; margin-right: 10px; } .postcat { width: 100%; float: left; margin-top: 0; margin-bottom: 10px; } .postcat a { font-size: 12px; font-weight: 400; text-transform: none; text-decoration: none; border-radius: 15px; color: #666; } .postcat a:hover { color: #333; } /* Blog More Link */ a.more-link { clear: left; font-weight:600; text-decoration: none; font-size: 13px; text-transform: none; letter-spacing: 1px; display: block; margin-top: 30px; height: 14px; width: 90%; } a.more-link:hover { opacity: .6; } /* Blog Page Navigation */ .navigation { bottom: 0; height:52px; position: fixed; right:0px; width:165px; z-index:100; text-align: center; } .navigation .alignright a, .navigation .alignleft a { width: 82px; background: #212121; height: 52px; display: inline-block; } .navigation .alignright a:hover, .navigation .alignleft a:hover { opacity: .7; } .navigation .alignright { float: right; margin-left: 1px; } .navigation .alignleft { float: right; } .navigation .alignleft a span.arrowleft { width: 16px; height: 16px; display: block; border-left: solid 2px #000; border-bottom: solid 2px #000; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); margin: 0 auto; margin-top: 18px; } .navigation .alignright a span.arrowright { width: 16px; height: 16px; display: block; border-right: solid 2px #000; border-bottom: solid 2px #000; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); margin: 0 auto; margin-top: 18px; } /* Post Navigation */ .navigation h1 { display: none; } .post-navigation { bottom: 0; height:52px; position: absolute; width:165px; z-index:9999; text-align: center; } .post-navigation a { width: 82px; background: #20332e; height: 52px; display: inline-block; } .post-navigation a:hover { opacity: .7; } .post-navigation .nav-previous { float: right; } .post-navigation .nav-next { float: right; margin-left: 1px; } .post-navigation .nav-previous a span.arrowleft { width: 16px; height: 16px; display: block; border-left: solid 2px #fff; border-bottom: solid 2px #fff; transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -o-transform: rotate(45deg); margin: 0 auto; margin-top: 18px; } .post-navigation .nav-next a span.arrowright { width: 16px; height: 16px; display: block; border-right: solid 2px #fff; border-bottom: solid 2px #fff; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg); margin: 0 auto; margin-top: 18px; } /* Post Tags */ p.singletags { line-height: 30px; margin-top: 40px; } p.singletags a { text-decoration: none; font-size: 14px; margin-left: 8px; margin-bottom: 3px; padding: 0 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; border: solid 1px #666; } p.singletags a:hover { color: #999; } p.singletags:before { display: inline-block; -webkit-font-smoothing: antialiased; font: normal 24px/1 'Genericons'; vertical-align: middle; content: '\f302'; color: #ccc; text-align: center; margin-top: 0; } ol { margin: 10px; } ul { margin: 5px; } /* Right Sidebar*/ #rightbar { width: 250px; float: left; margin: 0; margin-left: 50px; margin-top: 70px; } #rightbar .widget { width: 100%; margin-bottom: 30px; float: left; clear: left; } #rightbar h2.widget-title { font-size: 18px; margin-top: 0; margin-bottom: 10px; text-transform: none; letter-spacing: 1px; font-weight: 800; text-transform: uppercase; } #rightbar ul { padding: 0; margin: 0; width: 100%; float: left; clear: left; } #rightbar ul li { padding-top: 5px; padding-bottom: 5px; list-style: none; width: 100%; margin-top: 2px; } #rightbar ul li ul li { border: none; list-style: none; margin-left: 0; margin-top: 2px; float: left; clear: left; width: 100%; } #rightbar ul li a { border: none; text-decoration: underline; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 0; } #rightbar ul li a:hover { text-decoration: none; } #rightbar a { text-decoration: underline; } #rightbar a:hover { border: none; text-decoration: none; } #rightbar #searchform { padding: 0; float: left; width: 100%; margin-top: 10px; margin-right: 0; } #rightbar .widget_search { width: 100%; } #rightbar #searchform input#s{ float: left; width: 96%; border: solid 1px #eaeaea; color: #000; } #rightbar select { max-width: 100%; } .widget_author_grid ul { list-style: none; margin: 0 0 25px !important; } .widget_author_grid ul li { width: auto !important; padding: 0 !important; margin: 0 !important; float: none !important; display: inline-block !important; position: relative !important; } .widget_author_grid .avatar { border: solid 1px #eaeaea; padding: 2px; margin-right: 5px; } .widget_authors ul li strong { font-weight: 600; text-transform: uppercase; width: 100%; clear: left; float: left; } .widget_authors ul li strong:hover { text-decoration: underline; } .widget_authors .avatar { border: solid 1px #eaeaea; margin: 0 auto !important; padding: 2px; float: none; margin-top: 20px !important; } /* calendar widget */ .widget_calendar { float: left; } #wp-calendar, #calendar_wrap { width: 100%; } #wp-calendar caption { text-align: right; color: #333; font-size: 13px; margin-top: 10px; margin-bottom: 15px; text-transform: uppercase; } #wp-calendar thead { font-size: 10px; } #wp-calendar thead th { padding-bottom: 10px; } #wp-calendar tbody { color: #333; } #wp-calendar tbody td { background: #eaeaea; border:none; text-align: center; padding:5px; } #wp-calendar tbody td:hover { background: #ccc; } #wp-calendar tbody td a { color:#cc0000; } #wp-calendar tbody .pad { background: none; } #wp-calendar tfoot #next { font-size: 13px; text-transform: uppercase; text-align: right; color: #333; padding-top: 10px; } #wp-calendar tfoot #prev { font-size: 13px; text-transform: uppercase; padding-top: 10px; color: #333; text-align: left; } #wp-calendar tfoot #next a, #wp-calendar tfoot #prev a { color: #333; } /* comments */ #commentform { margin:0; padding:0; } #commentform p { clear: left; float: left; width: 100%; } #commentform a { text-decoration: none; line-height: 14pt; } #commentform h3 { font-size: 10pt; font-weight: 400; font-size: 14px; text-transform: uppercase; margin:0; padding:0; } #comments { width:100%; clear: both; float: left; margin-top: 30px; } #comments label { float: left; clear: left; margin-top: 15px; } #author, #email, #url, #comment { font-size: 11px; padding:12px 16px; border: solid 1px #666; float: left; clear: left; margin-top: 0; background: none; color: #000; width: 60%; } #author, #email, #url { height:16px; } #submit { cursor:pointer; padding: 12px 16px; border: none; float: left; clear: left; margin-top: 20px; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; background: rgba(0,0,0,.6); border: none; border-radius: 2px; color: #000; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; font-family: 'Open Sans', arial, helvetica, sans-serif !important; } #submit:hover { color: #ccc; } #respond h3, #comments h2 { color: #000; font-size: 18px; font-weight: 500; } .reply a.comment-reply-link { border: none; -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; padding: 0 6px; margin-top: 5px; float: left; clear: left; font-size: 13px; text-transform: uppercase; background: none; color: #000; font-weight: 500; letter-spacing: 1px; border: solid 1px #666; } .reply a.comment-reply-link:hover { color: #999; } a#cancel-comment-reply-link { text-decoration: underline; } .comment-respond { clear: left; } ol.commentlist { list-style-type: none; margin:0; padding:0; float:left; margin-top: 15px; width: 100%; } .avatar { float:left; margin: 10px 20px 0 0; width: 30px; height: 30px; } ol.commentlist li.comment { margin: 0; padding: 30px 0; list-style-type:none; float: left; width: 80%; margin-bottom: 20px; } ol.commentlist li.comment.odd { background: rgba(0,0,0,.5); border-radius: 2px; padding: 20px; } ol.commentlist li ul.children { width: 80%; } ol.commentlist li ul.children li { width: 100%; border: none; margin-bottom: 0; margin-top: 10px; } ol.commentlist li.alt { } ol.commentlist li p { margin: 6px 0 6px 0; padding: 0 12px 0 0; } ol.commentlist a { text-decoration: none; } cite { font-family: arial, verdana, tahoma; font-size: 12px; } cite a { color: #000; text-decoration: none; border-bottom: solid 1px #eaeaea; } .post-subscription-form, .comment-subscription-form { float: left !important; clear: left !important; } input#wp-comment-cookies-consent { float: left; margin-top: 6px !important; margin-right: 6px; } p.comment-form-cookies-consent label { float: left; clear: none !important; margin-top: 0 !important; } label#subscribe-label, label#subscribe-blog-label { float: none; color: #000 !important; } #footer { width: 100%; height: 52px; background: #000; bottom: 0; left: 0; position: fixed; } /* Social Media Menu */ #socialicons { float: left; width: auto; } #menu-social .screen-reader-text { position: absolute; top: -9999em; left: -9999em; } #menu-social { margin-top: 0; margin-bottom: 10px; float: right; margin-right: 12px; } #menu-social ul { list-style: none; margin: 0; } #menu-social ul li { display: inline-block; position: relative; float: left; margin-right: 1px; } #menu-social ul li a { display: inline-block; width: 52px; height: 52px; background: #212121; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease; text-align: center; border: none; margin: 0; padding: 0; } #menu-social ul li a:hover { text-decoration: none; opacity: .7; } #menu-social li a::before { content: '\f408'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 16px/1 'Genericons'; line-height: 52px; color: #f6f6f6; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } #menu-social li a[href*="wordpress.org"]::before, #menu-social li a[href*="wordpress.com"]::before { content: '\f205'; } #menu-social li a[href*="facebook.com"]::before { content: '\f204'; } #menu-social li a[href*="twitter.com"]::before { content: '\f202'; } #menu-social li a[href*="dribbble.com"]::before { content: '\f201'; } #menu-social li a[href*="plus.google.com"]::before { content: '\f218'; } #menu-social li a[href*="pinterest.com"]::before { content: '\f209'; } #menu-social li a[href*="github.com"]::before { content: '\f200'; } #menu-social li a[href*="tumblr.com"]::before { content: '\f214'; } #menu-social li a[href*="youtube.com"]::before { content: '\f213'; } #menu-social li a[href*="flickr.com"]::before { content: '\f211'; } #menu-social li a[href*="vimeo.com"]::before { content: '\f212'; } #menu-social li a[href*="instagram.com"]::before { content: '\f215'; } #menu-social li a[href*="codepen.io"]::before { content: '\f216'; } #menu-social li a[href*="linkedin.com"]::before { content: '\f207'; } #menu-social li a[href*="foursquare.com"]::before { content: '\f226'; } #menu-social li a[href*="reddit.com"]::before { content: '\f222'; } #menu-social li a[href*="digg.com"]::before { content: '\f221'; } #menu-social li a[href*="getpocket.com"]::before { content: '\f224'; } #menu-social li a[href*="path.com"]::before { content: '\f219'; } #menu-social li a[href*="stumbleupon.com"]::before { content: '\f223'; } #menu-social li a[href*="spotify.com"]::before { content: '\f515'; } #menu-social li a[href*="twitch.tv"]::before { content: '\f516'; } #menu-social li a[href*="dropbox.com"]::before { content: '\f225'; } #menu-social li a[href*="/feed.com"]::before { content: '\f413'; } #menu-social li a[href*="skype"]::before { content: '\f220'; } #menu-social li a[href*="mailto"]::before { content: '\f410'; } #copyinfo { width: 80%; position: absolute; left: 10%; top: 15px; text-align: center; font-size: 13px; font-weight: 600; color: #ccc; text-transform: uppercase; } #copyinfo a { color: #ccc; text-decoration: none; } #copyinfo a:hover { text-decoration: underline; } /* Contact Form 7 Style */ .wpcf7 { margin-top: 10px; float: left; clear: left; width: 70%; } .wpcf7 textarea, .wpcf7 input { padding: 5px 8px; margin-bottom: 15px; margin-top: 3px; width: 100%; border: solid 1px #666; height: 20px; background: none; border-radius: 3px; color: #000; } .wpcf7 textarea { height: auto; } .wpcf7 select { height: 32px; background: none; border: solid 1px #666; border-radius: 3px; color: #000; } .wpcf7 input.wpcf7-submit { width: auto; cursor: pointer; border: none; text-transform: uppercase; font-weight: 400; color: #000; opacity: .8; border-radius: 3px; padding: 10px 30px; -webkit-transition: all 0.7s ease; -moz-transition: all 0.7s ease; -ms-transition: all 0.7s ease; -o-transition: all 0.7s ease; height: auto; background: rgba(0,0,0,.6); clear: both; float: left; } .wpcf7 input.wpcf7-submit:hover { opacity: .6; } .wpcf7 p { text-align: left; font-size: 16px; margin: 0; margin-bottom: 6px; text-transform: none; } /* misc */ .entry-content img, .comment-content img, .widget img { max-width: 100%; /* Fluid images for posts, comments, and widgets */ } img[class*="align"], img[class*="wp-image-"], img[class*="attachment-"] { height: auto; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ max-width: 100%; } img.size-full, img.size-large, img.header-image, img.wp-post-image, #contentwrapper img, img { max-width: 100%; height: auto; z-index: 9; /* Make sure images with WordPress-added height and width attributes are scaled correctly */ } .entry-content .twitter-tweet-rendered { max-width: 100% !important; /* Override the Twitter embed fixed width */ } /* Images */ img .alignleft { float: left; margin-right: 10px; margin-top: 10px; } img .alignright { float: right; margin-left: 10px; margin-top: 10px; } img .aligncenter { display: block; margin-left: auto; margin-right: auto; } .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image { } .wp-caption { max-width: 100%; /* Keep wide captions from overflowing their container. */ padding: 4px; background: none; text-align: center; border: none; background: #eaeaea; } .wp-caption .wp-caption-text, .gallery-caption, .entry-caption { font-size: 12px; } img.wp-smiley, .rsswidget img { border: 0; border-radius: 0; box-shadow: none; margin-bottom: 0; margin-top: 0; padding: 0; } .gallery { margin: 0 auto; } .gallery .gallery-item { float: left; margin: 0; padding: 0; } .gallery-columns-2 .gallery-item { width: 30%; } .gallery-columns-4 .gallery-item { width: 25%; } .gallery img { padding: 5px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .gallery img:hover { border: none !important; } .gallery-columns-2 .attachment-medium { max-width: 100%; height: auto; } .gallery-columns-4 .attachment-thumbnail { max-width: 100%; height: auto; } .gallery .gallery-caption { color: #000; font-size: 12px; margin: 0 0 12px; } .gallery dl, .gallery dt { margin: 0; padding: 0; } .gallery br+br { display: none; } .size-auto, .size-full, .size-large, .size-medium, .size-thumbnail { max-width: 100%; height: auto; } a.post-edit-link { display: block; clear: both; } .entry pre { border: solid 1px #666; color: #000; font-size: 12px; font-size: 0.857142857rem; line-height: 1.714285714; margin: 24px 0; margin: 1.714285714rem 0; overflow: auto; padding: 24px; padding: 1.714285714rem; } .entry table { border: solid 1px #666; color: #000; font-size: 12px; font-size: 0.857142857rem; line-height: 2; margin: 0 0 24px; margin: 0 0 1.714285714rem; width: 100%; } .entry dl { margin: 0 24px; margin: 0 1.714285714rem; } .entry dt { font-weight: bold; line-height: 1.714285714; } .entry dd { line-height: 1.714285714; margin-bottom: 24px; margin-bottom: 1.714285714rem; } .entry table caption { font-size: 16px; font-size: 1.142857143rem; margin: 24px 0; margin: 1.714285714rem 0; } .entry td { border-top: solid 1px #eaeaea; padding: 6px 10px 6px 0; } p { margin-top: 6px; } #archivelist { float:left; margin-right: 0; } #archivelist ul li { list-style: none; line-height: 35px; } #archivelist ul { height: auto; margin-bottom: 30px; } #archivelist ul li a { color: #666; text-transform: uppercase; } #archivelist ul li a:hover { text-decoration: none; } ol { margin: 10px; padding: 0; } ul { margin: 5px; padding: 0; } .sticky { } .bypostauthor { } p.form-allowed-tags { display: none; } .tagstring { display: none; } .mmenu { display: none; } @media screen and (max-width: 890px) { #footer { height: 104px; background: none; } #copyinfo { width: 100%; left: 0; top: 52px; height: 52px; background: #000; line-height: 52px; } #arrow_left, #arrow_right, .navigation, .post-navigation { bottom: 52px; } a.sm-button { display: none; } .sm-menu { width: 512px; height: 1200px; margin-left: -256px; margin-top: -400px; } .sm-menu .sm-nav { width: 100%; height: auto; } .menusection.right.sm-nav.animated { top: 300px; } } @media screen and (max-width: 768px) { html { -webkit-text-size-adjust: none; } #copyinfo { line-height: 26px; } } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } *:focus { outline: none; } /* remove dotted outline from links, button and input element */ a:focus, a:active, button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { border: 0; outline: 0; } /* layout */ body { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; background: linear-gradient(45deg, #648b9c, transparent); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; width: 100%; height: 100%; min-height: 100%; overflow: hidden; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 500ms ease 0ms; -moz-transition: all 500ms ease 0ms; -o-transition: all 500ms ease 0ms; transition: all 500ms ease 0ms; } a { text-decoration: none; outline: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a:hover { color: #000; text-decoration: none; } p { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p a { text-decoration: none; outline: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } p a:hover { color: #000; text-decoration: none; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } ::-moz-selection { background: #000; color: #000; } ::selection { background: #000; color: #000; } h1, h2, h3, h4, h5, h6 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .slides h3 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 40px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; margin: 0 auto; text-align: center; text-transform: uppercase; position: relative; } h4 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 75px; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: -0.04em; color: #000; text-transform: uppercase; text-align: center; margin: 0; padding: 10px; } h5 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; text-align: center; text-transform: uppercase; } .sections { position: relative; width: 100%; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; margin: 0px auto 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* intro TIME style start */ .container-time { white-space: nowrap; background: none; height: 40px; } .time-column-1, .time-column-2, .time-column-4 { white-space: normal; background: none; width: 50%; display: inline-block; } .time-column-3 { white-space: normal; background: none; width: 50%; display: inline-block; position: relative; bottom: 11px; } .unveil-time { position: relative; width: 100%; height: auto; margin: 0 auto 30px auto; } .flexslider-time h3 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 23px; line-height: 40px; font-style: normal; text-transform: uppercase; text-align: left; font-weight: 400; letter-spacing: normal; color: #000; margin: 0 0 0 15px; } .line-top-time { margin-top: 200px; z-index: 999; position: relative; } .title-bottom-time { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 23px; line-height: 40px; font-style: normal; text-transform: uppercase; text-align: right; font-weight: 400; letter-spacing: normal; color: #000; margin: 0 15px 0 0; } .title-intro-time { font-family: 'Arial', serif; font-size: 160px; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: 2px; text-transform: uppercase; text-align: center; margin: -100px auto -1px auto; padding: 0; } .line-bottom-time { background: url(../img/line-bottom-time-dark.png) no-repeat left; height: 40px; } /* intro TIME style end */ /* intro THE SEA style start */ .unveil-the-sea { position: relative; width: 100%; height: auto; margin: 47px auto -17px auto; } .divider-the-sea { position: relative; width: 100%; height: 1px; } .flexslider-the-sea h3 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 23px; line-height: 1; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; letter-spacing: normal; color: #000; } .wrap-the-sea { position: relative; width: 100%; text-align: center; margin: 40px auto; } .line-top-the-sea { margin: 0 auto; width: 298px; border-bottom: 1px solid #000; padding: 0 0 13px 0; } .title-intro-the-sea { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 140px; font-weight: 400; font-style: normal; text-transform: uppercase; letter-spacing: normal; line-height: 1; margin: 18px 0 13px 0; } .description-intro-the-sea { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 18px; line-height: 1.5; font-style: normal; text-transform: uppercase; font-weight: 500; letter-spacing: 1px; color: #000; } .description-intro-the-sea span { display: inline-block; } .line-bottom-the-sea { width: 80px; height: 1px; background: #000; margin: 6px 14px; text-align: center; } /* intro THE SEA style end */ /* post */ .divider-post { position: relative; width: 100%; height: 95px; } .divider-post-bottom { position: relative; width: 100%; height: 50px; } .divider-post-bottom-services { visibility: hidden; display: none; } .divider-post-mobile { visibility: hidden; display: none; } .awesome { color: #000; margin: 0 auto; text-align: left; display: block; } .divider-awesome-top { position: relative; width: 100%; height: 20px; } .divider-awesome-bottom { position: relative; width: 100%; height: 40px; } .head { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; text-transform: uppercase; padding: 0 0 15px 0; display: block; } .head p { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; padding: 0 0 15px 0; } .head-2 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 19px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; text-transform: uppercase; padding: 15px 0 15px 0; display: block; } .head-2 p { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; padding: 15px 0 15px 0; } .last { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; padding: 0; } .last p { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: left; color: #000; padding: 15px 0 0 0; } .line-left { position: absolute; width: 5px; height: 100%; left: 0; top: 0; } .quotations { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 12px; line-height: 1.5; font-style: italic; font-weight: normal; text-align: left; color: #000; } .quote-mark-l { padding: 0 10px 0 0; } .quote-mark-r { padding: 0 0 0 10px; } .line-right { position: absolute; width: 5px; height: 100%; background: #000; left: 0; top: 0; } /* launch time */ .launch-time { visibility: visible; position: absolute; width: 45px; height: 45px; right: 66px; bottom: 20px; z-index: 1015; } .launch-time-mobile { visibility: hidden; position: absolute; width: 45px; height: 45px; right: 15px; top: 15px; z-index: 1015; } .launch-time-icon { font-size: 40px; margin: -3px 0 0 9px; } .launch-time-icon-mobile { font-size: 40px; margin: -13px 0 0 9px; } .launch-time-icon a { padding: 0; color: #000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-time-icon a:hover { padding: 0; color: #000; text-decoration: none; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-time-icon-mobile a { padding: 0; color: #000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-time-icon-mobile a:hover { padding: 0; color: #000; text-decoration: none; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-time, .launch-time.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .launch-time.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .launch-time-frame { width: 45px; height: 45px; } /* countdown */ .knob { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #countdown-wrapper { position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; left: -20px; } #countdown-wrapper h6 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; text-align: center; text-transform: uppercase; margin: 0 auto 40px auto; } #countdown li { display: inline-block; width: 100px; } #countdown span { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 20px; line-height: 1; letter-spacing: -0.04em; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; color: #000; text-align: center; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; margin-left: 38px; } #countdown input { font-family: 'Oswald', sans-serif!important; font-weight: 400!important; font-size: 30px!important; } #countdown li div { display: block!important; } /* countdown */ .countdown-wrap { position: absolute; overflow: hidden; width: -webkit-calc(50% - 60px); width: -moz-calc(50% - 60px); width: calc(50% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: 30px; margin-left: 50%; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; filter: alpha(opacity=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; background: none; z-index: 1004; } .countdown { position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .countdown.show { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: none; } /* launch social */ .launch-social { visibility: visible; position: absolute; width: 45px; height: 45px; right: 20px; bottom: 20px; z-index: 1015; } .launch-social-icon { font-size: 35px; margin: 3px 0 0 14px; } .launch-social-icon a { padding: 0; color: #000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-social-icon a:hover { padding: 0; color: #000; text-decoration: none; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } .launch-social, .launch-social.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .launch-social.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .launch-social-frame { width: 45px; height: 45px; } /* social */ .social-wrap { position: absolute; overflow: hidden; width: -webkit-calc(50% - 60px); width: -moz-calc(50% - 60px); width: calc(50% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: 30px; margin-left: 50%; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; filter: alpha(opacity=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; background: none; z-index: 1004; } .social { position: absolute; width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .social.show { width: 100%; height: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); background: none; } /* social icons */ .social-icons-wrapper { visibility: visible; position: relative; margin: 0 auto; text-align: center; } .social-icons-wrapper h6 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; text-align: center; text-transform: uppercase; margin: 0 auto 40px auto; } .social-icons-wrapper ul { margin: 0 auto; padding: 0; list-style-type: none; } .social-icons-wrapper ul li { display: inline-block; margin: 0 auto; padding: 0 0 0 5px; } ul.social-icons { font-size: 25px; line-height: 1; color: #000; margin: 0 auto; padding: 0; position: relative; } ul.social-icons a { padding: 0; color: #000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } ul.social-icons a:hover { padding: 0; color: #000; text-decoration: none; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } /* social icons mobile */ .social-icons-wrapper-2 { visibility: hidden; display: none; position: relative; margin: 50px auto 0 auto; text-align: center; } .social-icons-wrapper-2 h6 { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 20px; font-weight: 400; line-height: 1; letter-spacing: -0.04em; color: #000; text-align: center; text-transform: uppercase; margin: 0 auto 20px auto; } .lead-icon { font-size: 30px; line-height: 1; text-align: left; } .social-icons-wrapper-2 ul { margin: 0 auto; padding: 0; list-style-type: none; } .social-icons-wrapper-2 ul li { display: inline-block; margin: 0 auto; padding: 0 0 0 5px; } ul.social-icons-2 { font-size: 15px; line-height: 1; color: #000; margin: 0 auto; padding: 0; position: relative; } ul.social-icons-2 a { padding: 0; color: #000; text-decoration: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } ul.social-icons-2 a:hover { padding: 0; color: #000; text-decoration: none; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear; } /* navigation */ .hide-menu-mobile { visibility: hidden; display: none; } .hide-menu { visibility: visible; display: block; } .menu-toggle { visibility: visible; position: absolute; display: block; top: 22px; left: 34px; width: 80px; height: 80px; padding: 0; background: none; line-height: 1; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; border: none; z-index: 1010; } .menu-toggle, .menu-toggle.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .menu-toggle.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #menu-wrapper { position: absolute; /* position: fixed; */ overflow: hidden; width: -webkit-calc(50% - 60px); width: -moz-calc(50% - 60px); width: calc(50% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: 30px; margin-left: 0; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; background: none; z-index: 1005; visibility: visible; } #main-menu { position: fixed; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-style: normal; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; line-height: 1; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; width: -webkit-calc(50% - 60px); width: -moz-calc(50% - 60px); width: calc(50% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: -100%; margin-left: 30px; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 100; -moz-opacity: 100; -webkit-opacity: 100; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: none; z-index: 1005; } #main-menu { visibility: visible; display: block; } #main-menu-mobile { visibility: hidden; display: none; } #main-menu.activated { left: 0; } #main-menu ul { width: 326px; list-style: none outside none; padding: 0; margin: 0 0 0 -3px; } #main-menu ul li { width: 326px; text-align: left; line-height: .75; } #main-menu .credits { font-size: 14px; line-height: 1; margin: 15px 0 0 9px; } #main-menu .credits a { color: #000; text-decoration: none; } #main-menu a { display: none; min-width: 10px; color: #777; text-decoration: none; -webkit-transition: color .8s ease-in-out; -moz-transition: color .8s ease-in-out; -ms-transition: color .8s ease-in-out; -o-transition: color .8s ease-in-out; transition: color .8s ease-in-out; } #main-menu li .active { color: #000; } .menu-nav-wrapper { display: table; width: 100%; height: 100%; } .menu-nav { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } /* link style */ .link { position: relative; outline: none; text-decoration: none; font-size: 50px; line-height: 1; display: inline-block; width: 326px; } /* brackets */ .brackets a::before, .brackets a::after { display: inline-block; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: -webkit-transform 0.3s, opacity 0.2s; -moz-transition: -moz-transform 0.3s, opacity 0.2s; -ms-transition: -ms-transform 0.3s, opacity 0.2s; -o-transition: -o-transform 0.3s, opacity 0.2s; transition: transform 0.3s, opacity 0.2s; } .brackets a::before { content: '\00b7'; margin-right: 10px; -webkit-transform: translateX(20px); -moz-transform: translateX(20px); -ms-transform: translateX(20px); -o-transform: translateX(20px); transform: translateX(20px); } .brackets a::after { content: '\00b7'; margin-left: 10px; -webkit-transform: translateX(-20px); -moz-transform: translateX(-20px); -ms-transform: translateX(-20px); -o-transform: translateX(-20px); transform: translateX(-20px); } .brackets a:hover::before, .brackets a:hover::after, .brackets a:focus::before, .brackets a:focus::after { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: translateX(0px); -moz-transform: translateX(0px); -ms-transform: translateX(0px); -o-transform: translateX(0px); transform: translateX(0px); } .brackets ul, li { list-style: none; } .brackets a { text-decoration: none; } .brackets a:hover { text-decoration: none; } .brackets a:visited { text-decoration: none; } /* lines */ .lines-button{padding:2rem 1rem;transition:.3s;cursor:pointer;user-select:none;}.lines-button:hover{opacity:1}.lines-button:active{transition:0}.lines{display:inline-block;width:3rem;height:.3rem;background:#000;transition:.3s;position:relative}.lines:after,.lines:before{display:inline-block;width:3rem;height:.3rem;background:#000;transition:.3s;position:absolute;left:0;content:'';-webkit-transform-origin:.28571rem center;transform-origin:.28571rem center}.lines:before{top:0.8rem}.lines:after{top:-0.8rem}.lines-button.arrow.lines-close .lines:after,.lines-button.arrow.lines-close .lines:before{top:0;width:2.22222rem}.lines-button.arrow.lines-close .lines:before{-webkit-transform:rotate3d(0,0,1,40deg);transform:rotate3d(0,0,1,40deg)}.lines-button.arrow.lines-close .lines:after{-webkit-transform:rotate3d(0,0,1,-40deg);transform:rotate3d(0,0,1,-40deg)}.lines-button.arrow-up.lines-close{-webkit-transform:scale3d(0.8,.8,.8) rotate3d(0,0,1,90deg);transform:scale3d(0.8,.8,.8) rotate3d(0,0,1,90deg)}.lines-button.minus.lines-close .lines:after,.lines-button.minus.lines-close .lines:before{-webkit-transform:none;transform:none;top:0;width:3rem}.lines-button.x.lines-close .lines{background:0 0}.lines-button.x.lines-close .lines:after,.lines-button.x.lines-close .lines:before{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:3rem}.lines-button.x.lines-close .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}.lines-button.x.lines-close .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}.lines-button.x2 .lines{transition:background .3s .5s ease}.lines-button.x2 .lines:after,.lines-button.x2 .lines:before{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition:top .3s .6s ease,-webkit-transform .3s ease;transition:top .3s .6s ease,transform .3s ease}.lines-button.x2.lines-close .lines{transition:background .3s 0s ease;background:0 0}.lines-button.x2.lines-close .lines:after,.lines-button.x2.lines-close .lines:before{transition:top .3s ease,-webkit-transform .3s .5s ease;transition:top .3s ease,transform .3s .5s ease;top:0;width:3rem}.lines-button.x2.lines-close .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}.lines-button.x2.lines-close .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)} /* borders */ .borders-left { visibility: visible; position: absolute; width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); width: calc(50% - 40px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; bottom: 20px; right: 20px; margin-right: 50%; border-bottom: 1px solid rgba(0,0,0, 1); border-left: 1px solid rgba(0,0,0, 1); border-right: none; border-top: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; filter: alpha(opacity=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; z-index: 1; } .borders-left, .borders-left:after, .borders-left:before { width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); width: calc(50% - 40px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; bottom: 20px; right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .borders-right { visibility: visible; position: absolute; width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); width: calc(50% - 40px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; bottom: 20px; right: 20px; margin-left: 50%; border-bottom: none; border-left: none; border-right: 1px solid rgba(0,0,0, 1); border-top: 1px solid rgba(0,0,0, 1); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; opacity: 0.85; -moz-opacity: 0.85; -webkit-opacity: 0.85; filter: alpha(opacity=85); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; z-index: 1; } .borders-right, .borders-right:after, .borders-right:before { width: -webkit-calc(50% - 40px); width: -moz-calc(50% - 40px); width: calc(50% - 40px); height: -webkit-calc(100% - 40px); height: -moz-calc(100% - 40px); height: calc(100% - 40px); top: 20px; left: 20px; bottom: 20px; right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* kenburnsy */ .kenburnsy { position: relative; width: 100%; height: auto; overflow: hidden; } .kenburnsy.fullscreen { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; } .kenburnsy img { display: none; } .kenburnsy .slide { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center center; -webkit-background-size: cover; background-size: cover; background-repeat: no-repeat; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; } #kenburnsy-bg { overflow: hidden; } /* YouTube video containment */ #videoContainment { position: fixed; width: 100%!important; height: 100%!important; left: 0; top: 0; overflow: hidden; } /* HTML5 video containment */ #video-bg { position: fixed; width: 100%!important; height: 100%!important; left: 0; top: 0; overflow: hidden; } /* services extras */ .hi-icon-wrap { text-align: center; margin: 0; padding: 0 0 0 10px; } .hi-icon { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 0; width: 90px; height: 90px; border-radius: 50%; text-align: center; position: relative; z-index: 1; } .hi-icon:after { pointer-events: none; position: absolute; width: 100%; height: 100%; border-radius: 50%; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .hi-icon:before { font-family: 'FontAwesome'; speak: none; font-size: 40px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: #fff; } .hi-icon-services-1:before { content: "\f21b"; } .hi-icon-services-2:before { content: "\f005"; } .hi-icon-services-3:before { content: "\f219"; } .hi-icon-services-4:before { content: "\f19c"; } /* services effect */ .set-8 { background: none; margin: 23px 0 21px 0; } .hi-icon-effect-8 .hi-icon { background: rgba(0,0,0, .5); -webkit-transition: -webkit-transform ease-out 0.1s, background 0.2s; -moz-transition: -moz-transform ease-out 0.1s, background 0.2s; transition: transform ease-out 0.1s, background 0.2s; } .hi-icon-effect-8 .hi-icon:after { top: 0; left: 0; padding: 0; box-shadow: 0 0 0 2px rgba(0,0,0, .1); opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); transform: scale(0.9); z-index: -1; } .no-touch .hi-icon-effect-8 .hi-icon:hover { background: rgba(0,0,0, .05); -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); } .hi-icon-effect-8 .hi-icon:hover:after { -webkit-animation: sonarEffect 1.3s ease-out 75ms; -moz-animation: sonarEffect 1.3s ease-out 75ms; animation: sonarEffect 1.3s ease-out 75ms; } @-webkit-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); } 100% { box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); -webkit-transform: scale(1.5); opacity: 0; } } @-moz-keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); } 100% { box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); -moz-transform: scale(1.5); opacity: 0; } } @keyframes sonarEffect { 0% { opacity: 0.3; } 40% { opacity: 0.5; box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); } 100% { box-shadow: 0 0 0 2px rgba(0,0,0, .1), 0 0 10px 10px #000, 0 0 0 10px rgba(0,0,0, .5); transform: scale(1.5); opacity: 0; } } /* contact form */ #contact-form { width: 100%; margin: 0 auto; text-align: center; } form { margin: 0; padding: 0; } #form input { position: relative; width: 100%; height: 40px; border-bottom: 1px solid #000; border-left: none; border-right: none; border-top: none; padding: 5px 5px; background: none; margin: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: center; } #form input { margin: 10px 0 10px 0; } textarea { position: relative; width: 100%; height: 100px; border-bottom: 1px solid #000; border-left: none; border-right: none; border-top: none; padding: 5px 5px; background: none; margin: 5px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; transition: all 0.3s; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: center; } #form textarea { margin: 10px 0 10px 0; } #form input:hover, #form textarea:hover { border-color: rgba(0,0,0, .5); } #form input:focus, #form textarea:focus { -webkit-animation: glow 900ms ease-out infinite alternate; -moz-animation: glow 900ms ease-out infinite alternate; -ms-animation: glow 900ms ease-out infinite alternate; -o-animation: glow 900ms ease-out infinite alternate; animation: glow 900ms ease-out infinite alternate; } .success { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 15px; line-height: 1.5; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; letter-spacing: normal; color: #000; margin: 0 auto; padding: 20px 0 0 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #form .error { position: absolute; font-size: 10px; text-transform: uppercase; text-align: left; color: #000; display: block; margin: -8px 0 0 1px; padding: 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::-webkit-input-placeholder { font-style: italic; color: #000; } ::-moz-placeholder { font-style: italic; color: #000; } :-ms-input-placeholder { font-style: italic; color: #000; } input:-moz-placeholder { font-style: italic; color: #000; } .submit-button { position: relative; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 15px; line-height: 1.5; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; letter-spacing: normal; color: #fff; display: inline-block; outline: none; margin: 15px auto 0 auto; width: 225px; padding: 1px 0 0 0; height: 35px; border: none; overflow: hidden; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .submit-button::before { position: absolute; content: ''; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; right: -100%; bottom: 0%; width: 200%; height: 200%; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -ms-transform: skewX(-60deg); -o-transform: skewX(-60deg); transform: skewX(-60deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; z-index: -1; } .submit-button::before { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .submit-button:hover { color: #fff; } .submit-button:hover::before { bottom: -100%; right: -200%; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } /* newsletter form */ #subscribe-wrapper { position: relative; margin: 0 auto; background: none; width: auto; height: 170px; text-align: center; } .newsletter { position: relative; clear: both; width: auto; border: none; background: none; margin: 0 auto; padding: 0; overflow: hidden; } .submit-button-2 { position: relative; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 15px; line-height: 1.5; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; color: #fff; letter-spacing: normal; display: inline-block; outline: none; margin: 10px auto 0 auto; width: 225px; padding: 1px 0 0 0; height: 35px; border: none; -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; cursor: pointer; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform: translate(0,0); -moz-transform: translate(0,0); -ms-transform: translate(0,0); -o-transform: translate(0,0); transform: translate(0,0); } .submit-button-2::before { position: absolute; content: ''; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; right: -100%; bottom: 0%; width: 200%; height: 200%; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: skewX(-60deg); -moz-transform: skewX(-60deg); -ms-transform: skewX(-60deg); -o-transform: skewX(-60deg); transform: skewX(-60deg); -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; z-index: -1; } .submit-button-2::before { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .submit-button-2:hover { color: #fff; } .submit-button-2:hover::before { bottom: -100%; right: -200%; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .subscribe-success { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 15px; line-height: 1.5; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; letter-spacing: normal; color: #000; /* text-shadow: 1px 1px 2px #000; */ margin: 0 auto; padding: 20px 0 0 0; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } #subscribe .subscribe-error { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 10px; text-transform: uppercase; text-align: center; color: #000; display: block; margin: 6px auto 0 auto; padding: 0; letter-spacing: 1px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* newsletter field effect */ /* normalize */ button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; } /* input */ .input { position: relative; display: inline-block; margin: 1em; max-width: 270px; width: calc(100% - 2em); vertical-align: top; padding: 0; margin: 20px 0 0 0; text-align: center; z-index: 1; } .input__field { position: relative; display: block; float: right; padding: 0; width: 60%; border: none; border-radius: 0; background: none; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; font-weight: 400; font-style: normal; text-transform: none; text-align: center; line-height: 3.9; -webkit-appearance: none; } .input__field:focus { outline: none; } .input__label { display: inline-block; float: right; width: 40%; height: 55px; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 10px; font-style: normal; text-transform: uppercase; text-align: center; letter-spacing: 1px; line-height: 1; margin: 0; padding: 4px 0 0 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .input__label-content { position: relative; display: block; padding: 20px 0 20px 0; width: 100%; } .input--kuro { max-width: 225px; margin-bottom: 0; } .input__field--kuro { width: 100%; background: none; color: #000; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; font-weight: normal; text-align: center; padding: 0; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; } .input__label--kuro { position: absolute; left: 0; width: 100%; color: #000; pointer-events: none; } .input__label--kuro::before, .input__label--kuro::after { position: absolute; content: ''; top: 0; left: 0; width: 50%; height: 100%; border-bottom: 1px solid #000; border-top: none; /* border-top: 1px solid #000; */ border-left: none; border-right: none; -webkit-transition: -webkit-transform 0.3s; transition: transform 0.3s; } .input__label--kuro::before { border-right: none; } .input__label--kuro::after { left: 50%; border-left: none; } .input__field--kuro:focus, .input--filled .input__field--kuro { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition-delay: 0.3s; transition-delay: 0.3s; } .input__field--kuro:focus + .input__label--kuro::before, .input--filled .input__label--kuro::before { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); } .input__field--kuro:focus + .input__label--kuro::after, .input--filled .input__label--kuro::after { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); } .input__field--kuro:focus + .input__label--kuro .input__label-content--kuro, .input--filled .input__label-content--kuro { -webkit-animation: anim-2 0.3s forwards; animation: anim-2 0.3s forwards; } @-webkit-keyframes anim-2 { 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 51% { opacity: 0; -webkit-transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1); transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1); } 100% { opacity: 1; -webkit-transform: translate3d(0, -3.7em, 0); transform: translate3d(0, -3.7em, 0); } } @keyframes anim-2 { 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 1); transform: scale3d(0.3, 0.3, 1); } 51% { opacity: 0; -webkit-transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1); transform: translate3d(0, -3.7em, 0) scale3d(0.3, 0.3, 1); } 100% { opacity: 1; -webkit-transform: translate3d(0, -3.7em, 0); transform: translate3d(0, -3.7em, 0); } } /* upper - lower */ .upper-page { min-height: 100%; margin: 0; padding: 0; } .upper-content { margin: 0 auto; padding: 0; } .lower-page { min-height: 100%; margin: 0; padding: 0; } .lower-content { margin: 0 auto; padding: 0; } /* center container */ .center-container { position: absolute; display: table; overflow: hidden; /* display: block; */ height: 100%; width: 100%; left: 0; top: 0; background: none; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .center-block { display: table-cell; /* display: block; */ vertical-align: middle; } /* fireOT */ #fireOT-wrap { position: absolute; overflow: hidden; width: 100%; height: 100%; background: url(https://www.mfp.com/sites/default/files/styles/full_width/public/2017-10/trees-compressed.png?itok=ycI4-36A); background-position: center; background-repeat: no-repeat; background-size: cover; } .fireOT-inner { position: absolute; overflow: hidden; width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: 30px; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: none; } /* pages */ #page-0 { position: absolute; overflow: hidden; width: 50%; height: 100%; top: 0; left: 0; margin-left: 0; bottom: 0; right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; background: none; z-index: 1; } #page-0, #page-0.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #page-0.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #page-1, #page-2, #page-3, #page-4 { position: absolute; overflow: auto; top: 0; right: -200%; width: 50%; height: 100%; background: rgba(255,255,255, .55); -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; z-index: 1005; } #page-1.open, #page-2.open, #page-3.open, #page-4.open { right: 0; } #page-1.close, #page-2.close, #page-3.close, #page-4.close { right: -200%; -webkit-transition: all .8s ease-in-out; -moz-transition: all .8s ease-in-out; -ms-transition: all .8s ease-in-out; -o-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } /* page closers */ .page-closer { position: absolute; width: 45px; height: 45px; right: 20px; top: 20px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; visibility: visible; } .page-closer-mobile { position: absolute; width: 45px; height: 45px; right: 15px; top: 15px; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; visibility: hidden; } .page-closer-btn { width: 25px; height: 25px; margin: 9px auto 0 auto; } .page-closer-frame { width: 45px; height: 45px; border: 1px solid #000; } /* photos */ .photos-section .photos-container { position: relative; display: block; width: 100%; float: left; margin: 0 auto 10px auto; -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; -webkit-column-gap: 5px; -moz-column-gap: 5px; column-gap: 5px; } .photos-container .photo-gallery { position: relative; display: inline-block; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .photos-container .photo-gallery.portrait { height: 465px; filter: grayscale(100%); -webkit-filter: grayscale(100%); /* Webkit browsers */ filter: gray; /* IE 6 - 9 */ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ } .photos-container .photo-gallery.portrait:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); } .photos-container .photo-gallery.landscape { height: 230px; filter: grayscale(100%); -webkit-filter: grayscale(100%); /* Webkit browsers */ filter: gray; /* IE 6 - 9 */ filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ } .photos-container .photo-gallery.landscape:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); filter: url("data:image/svg+xml;utf8,#grayscale"); } .photo-gallery .photo-container { position: relative; float: left; display: block; width: 100%; height: 100%; overflow: hidden; } .photo-gallery .photo-container::before { position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; } .photo-gallery .photo-container::before { content:''; } .photo-gallery .photo-container img { position: absolute; display: block; width: 100%; height: auto; left: 0; top: 0; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); } .photo-gallery .button-container { position: absolute; display: block; width: 100%; height: 50px; text-align: center; z-index: 2; } .photo-gallery .button-zoom { display: inline-block; font-size: 32px; line-height: 50px; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0,0); -moz-transform: scale(0,0); -ms-transform: scale(0,0); -o-transform: scale(0,0); transform: scale(0,0); z-index: 2; } .photo-gallery .button-zoom::before { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .photo-gallery .button-zoom:hover { color: inherit; } .photo-gallery:hover .button-zoom { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1); } .button-square { position: relative; display: inline-block; width: 50px; height: 50px; line-height: 45px; font-size: 25px; text-align: center; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .button-square::before { position: absolute; content: ''; width: 100%; height: 100%; left: 0; top: 0; -webkit-box-shadow: inset 0 0 0 25px #fff; -moz-box-shadow: inset 0 0 0 25px #fff; -ms-box-shadow: inset 0 0 0 25px #fff; -o-box-shadow: inset 0 0 0 25px #fff; box-shadow: inset 0 0 0 25px #fff; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); z-index: -1; } .button-square:hover::before { -webkit-box-shadow: inset 0 0 0 2px #fff; -moz-box-shadow: inset 0 0 0 2px #fff; -ms-box-shadow: inset 0 0 0 2px #fff; -o-box-shadow: inset 0 0 0 2px #fff; box-shadow: inset 0 0 0 2px #fff; -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); } .photo-gallery .photo-container::before { background: none; } .photo-gallery .button-zoom { color: #000; } .photo-gallery .button-zoom:hover { color: #fff; } .photo-gallery:hover .photo-container::before { background: rgba(0,0,0, .3); } .button-square, .button-square::before, .photo-gallery .photo-container::before, .photo-gallery .photo-container img { -webkit-transition: all 0.4s ease; -moz-transition: all 0.4s ease; -ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease; } .centering-y { position: absolute; top: 50%; display: inline-block; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } /* flexSlider */ .flexslider { background: none; border: none; } /* flexSlider quotes */ .flexslider-quotes-wrap { position: relative; width: 50%; height: 100%; overflow: hidden; left: 50%; } .flexslider-quotes { visibility: visible; background: none; border: none; width: 100%; margin: 0 auto; position: relative; } .flexslider-quotes, .flexslider-quotes.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .flexslider-quotes.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .quote-text { position: relative; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 30px; line-height: 1; letter-spacing: -0.04em; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; color: #000; text-align: center; /* text-shadow: 1px 1px 2px #000; */ text-transform: uppercase; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .quote-signature { position: relative; display: block; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 20px; line-height: 1; letter-spacing: -0.04em; font-style: normal; text-transform: uppercase; text-align: center; font-weight: 400; color: #000; text-align: center; /* text-shadow: 1px 1px 2px #000; */ text-transform: uppercase; margin: 25px auto 0 auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* screen loader */ .screen-loader { position: absolute; width: 100%; height: 100%; overflow: hidden; background: #fff; z-index: 10000; } /* preload */ #preload { position: fixed; width: 100%; height: 100%; overflow: hidden; right: 0; bottom: 0; background: #fff; display: none; z-index: 10000; } #preload-status { position: absolute; width: 40px; height: 40px; margin: auto; padding: 0; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #000; border-radius: 100%; -webkit-animation: scaleout 1.0s infinite ease-in-out; -moz-animation: scaleout 1.0s infinite ease-in-out; -ms-animation: scaleout 1.0s infinite ease-in-out; -o-animation: scaleout 1.0s infinite ease-in-out; animation: scaleout 1.0s infinite ease-in-out; } @-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes scaleout { 0% { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); -ms-transform: scale(1.0); transform: scale(1.0); opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } #preload-status { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* preload content - BG OPACITY CONTROL */ .preload-content { position: fixed; width: auto; height: auto; margin: 0; padding: 0; top: 0; right: 0; bottom: 0; left: 0; /* BG OPACITY CONTROL start */ background: rgba(255,255,255, .75); /* BG OPACITY CONTROL end */ z-index: 0; } .preload-content-YT { position: fixed; width: auto; height: auto; margin: 0; padding: 0; top: 0; right: 0; bottom: 0; left: 0; /* BG OPACITY CONTROL start */ background: rgba(255,255,255, .65); /* BG OPACITY CONTROL end */ z-index: 0; } /* supersized */ img { border: none; } #supersized-loader { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; text-indent: -999em; background: none; z-index: -1; } #supersized { display: block; position: fixed; left: 0; top: 0; overflow: hidden; height: 100%; width: 100%; z-index: -999; } #supersized img { width: auto; height: auto; position: relative; display: none; outline: none; border: none; } #supersized.speed img { -ms-interpolation-mode: nearest-neighbor; image-rendering: -moz-crisp-edges; } /* Speed */ #supersized.quality img { -ms-interpolation-mode: bicubic; image-rendering: optimizeQuality; } /* Quality */ #supersized li { display: block; list-style: none; position: fixed; overflow: hidden; top: 0; left: 0; width: 100%; height: 100%; background: none; z-index: -30; } #supersized a { width: 100%; height: 100%; display: block; } #supersized li.prevslide { z-index: -20; } #supersized li.activeslide { z-index: -10; } #supersized li.image-loading { background: none; width: 100%; height: 100%; } #supersized li.image-loading img { visibility: hidden; } #supersized li.prevslide img, #supersized li.activeslide img { display: inline; } /* owlCarousel */ .owl-carousel { overflow: hidden; } .owl-buttons { position: static; } .owl-prev, .owl-next { position: absolute; display: block; top: 50%; margin-top: -50px; width: 105px; height: 105px; line-height: 105px; font-size: 30px; text-align: center; color: #000; -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 6; } .owl-prev { left: -50px; } .owl-next { right: -50px; } .owl-prev:before, .owl-next:before { content: ""; display: block; width: 66%; height: 66%; position: absolute; left: 0; top: 17px; background: none; /* -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; -webkit-box-shadow: 1px 1px 0px rgba(0,0,0, .1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0, .1); box-shadow: 1px 1px 0px rgba(0,0,0, .1); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); */ -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); } .owl-next:before { left: auto; right: 0; } .owl-prev .fa, .owl-next .fa { position: relative; } .owl-prev:hover, .owl-next:hover { -webkit-transition: 0 none !important; -moz-transition: 0 none !important; -ms-transition: 0 none !important; -o-transition: 0 none !important; transition: 0 none !important; } .owl-prev:hover:before, .owl-next:hover:before { opacity: 0.8; -moz-opacity: 0.8; -webkit-opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .owl-prev:active:before, .owl-next:active:before { opacity: 0.6; -moz-opacity: 0.6; -webkit-opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; } .owl-carousel:hover .owl-prev { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; left: -35px; } .owl-carousel:hover .owl-next { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; right: -35px; } .owl-pagination { display: block; width: 100%; height: auto; position: relative; bottom: 0; left: 0; padding: 30px 0 0 0; text-align: center; } .owl-page { position: relative; display: inline-block; padding: 6px 4px; } .owl-page span { width: 15px; height: 2px; display: block; background: rgba(0,0,0, .7); position: relative; /* -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; */ -webkit-box-shadow: 1px 1px 0px rgba(0,0,0, .1); -moz-box-shadow: 1px 1px 0px rgba(0,0,0, .1); box-shadow: 1px 1px 0px rgba(0,0,0, .1); -webkit-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -moz-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -ms-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); -o-transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); transition: all 0.27s cubic-bezier(0.000, 0.000, 0.580, 1.000); z-index: 1000 !important; } .owl-page:hover span { background: rgba(0,0,0, 1); } .owl-page.active span { -webkit-transform: scale(1.3333333); -moz-transform: scale(1.3333333); -ms-transform: scale(1.3333333); -o-transform: scale(1.3333333); transform: scale(1.3333333); } .services-gallery { margin: 0 auto; } .services-gallery img { max-width: 100%; height: auto; } /* core owlCarousel */ /* Core Owl Carousel CSS File v1.3.3 */ /* clearfix */ .owl-carousel .owl-wrapper:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } /* display none until init */ .owl-carousel-FIX { position: relative; width: 100%; height: 250px; text-align: center; } .owl-carousel { position: absolute; display: none; width: 100%; height: auto; -ms-touch-action: pan-y; } .owl-carousel .owl-wrapper { display: none; position: relative; -webkit-transform: translate3d(0px, 0px, 0px); -moz-transform: translate3d(0px, 0px, 0px); -ms-transform: translate3d(0px, 0px, 0px); -o-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px); } .owl-carousel .owl-wrapper-outer { overflow: hidden; position: relative; width: 100%; } .owl-carousel .owl-wrapper-outer.autoHeight { -webkit-transition: height 500ms ease-in-out; -moz-transition: height 500ms ease-in-out; -ms-transition: height 500ms ease-in-out; -o-transition: height 500ms ease-in-out; transition: height 500ms ease-in-out; } .owl-carousel .owl-item { float: left; } .owl-controls .owl-page, .owl-controls .owl-buttons div { cursor: pointer; } .owl-controls { -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-tap-highlight-color: rgba(0,0,0, 0); } /* mouse grab icon */ .grabbing { cursor: url(../img/grabbing.png) 8 8, move; } /* fix */ .owl-carousel .owl-wrapper, .owl-carousel .owl-item { -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -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-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; } /* core magnificPopup */ /* Magnific Popup CSS */ .mfp-bg,.mfp-wrap{left:0;top:0;position:fixed}.mfp-bg,.mfp-container,.mfp-wrap{width:100%;height:100%}.mfp-bg{z-index:1042;overflow:hidden;background:#0b0b0b;opacity:.9;filter:alpha(opacity=90)}.mfp-wrap{z-index:1043;outline:0!important;-webkit-backface-visibility:hidden}.mfp-container{text-align:center;position:absolute;left:0;top:0;padding:0 8px;box-sizing:border-box}.mfp-container,img.mfp-img{-webkit-box-sizing:border-box;-moz-box-sizing:border-box}.mfp-container:before{content:'';display:inline-block;height:100%;vertical-align:middle}.mfp-align-top .mfp-container:before{display:none}.mfp-content{position:relative;display:inline-block;vertical-align:middle;margin:0 auto;text-align:left;z-index:1045}.mfp-ajax-holder .mfp-content,.mfp-inline-holder .mfp-content{width:100%;cursor:auto}.mfp-ajax-cur{cursor:progress}.mfp-zoom-out-cur,.mfp-zoom-out-cur .mfp-image-holder{cursor:crosshair}.mfp-close,.mfp-zoom{cursor:pointer}.mfp-zoom{cursor:-webkit-zoom-in;cursor:-moz-zoom-in;cursor:zoom-in}.mfp-auto-cursor .mfp-content{cursor:auto}.mfp-arrow,.mfp-close,.mfp-counter,.mfp-preloader{-webkit-user-select:none;-moz-user-select:none;user-select:none}.mfp-loading.mfp-figure{display:none}.mfp-hide{display:none!important}.mfp-preloader{color:#CCC;position:absolute;top:50%;width:auto;text-align:center;margin-top:-.8em;left:8px;right:8px;z-index:1044}.mfp-preloader a{color:#CCC}.mfp-preloader a:hover{color:#FFF}.mfp-close,.mfp-close-btn-in .mfp-close{color:#fff}.mfp-s-error .mfp-content,.mfp-s-ready .mfp-preloader{display:none}button.mfp-arrow,button.mfp-close{overflow:visible;cursor:pointer;border:0;-webkit-appearance:none;display:block;outline:0;padding:0;z-index:1046;-webkit-box-shadow:none;box-shadow:none}button::-moz-focus-inner{padding:0;border:0}.mfp-close{width:60px!important;height:60px!important;display:block;position:absolute;right:-60px;top:40px;text-decoration:none;text-align:center!important;padding:0;font-style:normal;font-size:24px;font-weight:300;background:#000;line-height:54px}button.mfp-close{background:#000;line-height:10px;opacity:.8}.mfp-close:hover{opacity:1}.mfp-iframe-holder .mfp-close{color:#FFF;right:-6px;text-align:right;padding-right:6px;width:100%}.mfp-arrow,.mfp-counter{background:#000;opacity:.5;bottom:4px;width:60px;height:60px;text-align:center}.mfp-arrow:before,.mfp-counter{position:absolute;display:block;color:#fff}.mfp-counter{right:60px;font-size:12px;line-height:60px;white-space:nowrap;left:60px}.mfp-figure,img.mfp-img{line-height:0}.mfp-arrow{position:absolute;margin:0;padding:0;-webkit-tap-highlight-color:transparent}.mfp-arrow:focus,.mfp-arrow:hover{opacity:1}.mfp-arrow:before{font-family:FontAwesome;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:30px;margin-left:-1px;margin-top:-1px;left:50%;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-o-transform:translateX(-50%);transform:translateX(-50%)}.mfp-arrow-left{left:0;top:-64px;position:absolute}.mfp-arrow-left::before{content:"\f104"}.mfp-arrow-right{left:120px;top:-64px;position:absolute}.mfp-arrow-right::before{content:"\f105"}.mfp-iframe-holder{padding-top:40px;padding-bottom:40px}.mfp-iframe-holder .mfp-content{line-height:0;width:100%;max-width:900px}.mfp-image-holder .mfp-content,img.mfp-img{max-width:100%}.mfp-iframe-holder .mfp-close{top:-40px}.mfp-iframe-scaler{width:100%;height:0;overflow:hidden;padding-top:56.25%}.mfp-iframe-scaler iframe{position:absolute;display:block;top:0;left:0;width:100%;height:100%;box-shadow:0 0 8px rgba(0,0,0,.6);background:#000}.mfp-figure:after,img.mfp-img{display:block;width:auto;height:auto}img.mfp-img{box-sizing:border-box;padding:40px 0;margin:0 auto}.mfp-figure:after{content:'';position:absolute;left:0;top:40px;bottom:40px;right:0;z-index:-1;box-shadow:0 0 8px rgba(0,0,0,.6);background:#444}.mfp-figure small{color:#BDBDBD;display:block;font-size:12px;line-height:14px}.mfp-figure figure{margin:0}.mfp-bottom-bar{margin-top:-36px;position:absolute;top:100%;left:0;width:100%;cursor:auto}.mfp-title{text-align:left;line-height:18px;color:#F3F3F3;word-wrap:break-word;padding-right:36px}.mfp-gallery .mfp-image-holder .mfp-figure{cursor:pointer}@media screen and (max-width:800px) and (orientation:landscape),screen and (max-height:300px){.mfp-img-mobile .mfp-image-holder{padding-left:0;padding-right:0}.mfp-img-mobile img.mfp-img{padding:0}.mfp-img-mobile .mfp-figure:after{top:0;bottom:0}.mfp-img-mobile .mfp-figure small{display:inline;margin-left:5px}.mfp-img-mobile .mfp-bottom-bar{background:rgba(0,0,0,.6);bottom:0;margin:0;top:auto;padding:3px 5px;position:fixed;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.mfp-img-mobile .mfp-bottom-bar:empty{padding:0}.mfp-img-mobile .mfp-counter{right:5px;top:3px}.mfp-img-mobile .mfp-close{top:0;right:0;width:35px;height:35px;line-height:35px;background:rgba(0,0,0,.6);position:fixed;text-align:center;padding:0}}.mfp-ie7 .mfp-img{padding:0}.mfp-ie7 .mfp-bottom-bar{width:600px;left:50%;margin-left:-300px;margin-top:5px;padding-bottom:5px}.mfp-ie7 .mfp-container{padding:0}.mfp-ie7 .mfp-content{padding-top:44px}.mfp-ie7 .mfp-close{top:0;right:0;padding-top:0}.mfp-with-zoom .mfp-container,.mfp-with-zoom.mfp-bg{opacity:0;-webkit-backface-visibility:hidden;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out}.mfp-with-zoom.mfp-ready .mfp-container{opacity:1}.mfp-with-zoom.mfp-ready.mfp-bg{opacity:.9}.mfp-with-zoom.mfp-removing .mfp-container,.mfp-with-zoom.mfp-removing.mfp-bg{opacity:0}.mfp-fade.mfp-bg{opacity:0;transition:all .3s ease-out}.mfp-fade.mfp-bg,.mfp-fade.mfp-wrap .mfp-content{-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out}.mfp-fade.mfp-bg.mfp-ready{opacity:.9}.mfp-fade.mfp-bg.mfp-removing{opacity:0}.mfp-fade.mfp-wrap .mfp-content{opacity:0;transition:all .3s ease-out}.mfp-fade.mfp-wrap.mfp-ready .mfp-content{opacity:1}.mfp-fade.mfp-wrap.mfp-removing .mfp-content{opacity:0}@media all and (max-width:1199px){.mfp-close{right:0;top:40px}} /* clouds */ .clouds { position: fixed; width: 100%; height: 100%; overflow: hidden; background: none; top: 0; } .cloud-1 { position: absolute; left: 0; top: 0; width: 300%; height: 100%; background-image: url(https://locyen.com/wp-content/themes/melograno-lite/images/cloud-1.png); background-repeat: repeat-x; -webkit-animation: cloud-1 50s linear infinite; -moz-animation: cloud-1 50s linear infinite; -ms-animation: cloud-1 50s linear infinite; -o-animation: cloud-1 50s linear infinite; animation: cloud-1 50s linear infinite; -webkit-transform: scale(1,1) translate3d(0,0,0); -moz-transform: scale(1,1) translate3d(0,0,0); -ms-transform: scale(1,1) translate3d(0,0,0); -o-transform: scale(1,1) translate3d(0,0,0); transform: scale(1,1) translate3d(0,0,0); } .cloud-2 { position: absolute; left: 0; top: 0; width: 300%; height: 100%; background-image: url(https://locyen.com/wp-content/themes/melograno-lite/images/cloud-2.png); background-repeat: repeat-x; -webkit-animation: cloud-2 90s linear infinite; -moz-animation: cloud-2 90s linear infinite; -ms-animation: cloud-2 90s linear infinite; -o-animation: cloud-2 90s linear infinite; animation: cloud-2 90s linear infinite; -webkit-transform: scale(1,1) translate3d(0,0,0); -moz-transform: scale(1,1) translate3d(0,0,0); -ms-transform: scale(1,1) translate3d(0,0,0); -o-transform: scale(1,1) translate3d(0,0,0); transform: scale(1,1) translate3d(0,0,0); } .cloud-3 { position: absolute; left: 0; top: 0; width: 300%; height: 100%; background-image: url(https://locyen.com/wp-content/themes/melograno-lite/images/cloud-3.png); background-repeat: repeat-x; -webkit-animation: cloud-3 70s linear infinite; -moz-animation: cloud-3 70s linear infinite; -ms-animation: cloud-3 70s linear infinite; -o-animation: cloud-3 70s linear infinite; animation: cloud-3 70s linear infinite; -webkit-transform: scale(1,1) translate3d(0,0,0); -moz-transform: scale(1,1) translate3d(0,0,0); -ms-transform: scale(1,1) translate3d(0,0,0); -o-transform: scale(1,1) translate3d(0,0,0); transform: scale(1,1) translate3d(0,0,0); } @-webkit-keyframes cloud-1 { 0% { left: 0; } 100% { left: -200%; } } @-moz-keyframes cloud-1 { 0% { left: 0; } 100% { left: -200%; } } @keyframes cloud-1 { 0% { left: 0; } 100% { left: -200%; } } @-webkit-keyframes cloud-2 { 0% { left: 0; } 100% { left: -200%; } } @-moz-keyframes cloud-2 { 0% { left: 0; } 100% { left: -200%; } } @keyframes cloud-2 { 0% { left: 0; } 100% { left: -200%; } } @-webkit-keyframes cloud-3 { 0% { left: 0; } 100% { left: -200%; } } @-moz-keyframes cloud-3 { 0% { left: 0; } 100% { left: -200%; } } @keyframes cloud-3 { 0% { left: 0; } 100% { left: -200%; } } /* film grain */ .film-grain { position: fixed; height: 100%; width: 100%; overflow: hidden; background: url(../img/film-grain.gif) repeat top left; opacity: 0.1; -moz-opacity: 0.1; -webkit-opacity: 0.1; filter: alpha(opacity=10); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; z-index: 0; } /* weather */ /* main element */ .weather { position: fixed; height: 100%; width: 100%; overflow: hidden; z-index: 5; } /* pseudo elements: positioning and setup */ .weather:before, .weather:after { content: ""; position: absolute; left: -60%; top: -60%; right: -60%; bottom: -60%; pointer-events: none; background: transparent repeat; -webkit-transform: rotate(-40deg); -moz-transform: rotate(-40deg); -ms-transform: rotate(-40deg); -o-transform: rotate(-40deg); transform: rotate(-40deg); -webkit-transform-origin: center; -moz-transform-origin: center; -ms-transform-origin: center; -o-transform-origin: center; transform-origin: center; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-name: weather; animation-name: weather; animation-timing-function: linear; animation-iteration-count: infinite; z-index: 1; } .weather:after { -webkit-animation-name: weather2; animation-name: weather2; } /* rain */ .weather.rain:before, .weather.rain:after { background: url(../img/rain.png) left top; opacity: 0.6; -moz-opacity: 0.6; -webkit-opacity: 0.6; filter: alpha(opacity=60); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; -webkit-animation-duration: 2s; animation-duration: 2s; } .weather.rain:after { -webkit-animation-duration: 1.5s; animation-duration: 1.5s; } /* animation keyframes */ @-webkit-keyframes weather { from { background-position: 0 0px; } to { background-position: 0 1024px; } } @keyframes weather { from { background-position: 0 0px; } to { background-position: 0 1024px; } } @-webkit-keyframes weather2 { from { background-position: 64px 64px; } to { background-position: 64px 1088px; } } @keyframes weather2 { from { background-position: 64px 64px; } to { background-position: 64px 1088px; } } /* snow */ #snow { position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 0; } /* particles */ #particles-holder { position: absolute; top: 0; left: 0; width: 100%; height: 100%!important; overflow: hidden; z-index: 0; } /* particles 2 */ #particles-holder-2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%!important; overflow: hidden; z-index: 0; } #particles-js { width: 100%; height: 100%; overflow: hidden; background: none; } #particles-js .particles-js-canvas-el { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-animation: appear 2.4s 1; -moz-animation: appear 2.4s 1; -ms-animation: appear 2.4s 1; -o-animation: appear 2.4s 1; animation: appear 2.4s 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes appear { from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } @keyframes appear { from { -ms-transform: scale(0); -webkit-transform: scale(0); transform: scale(0); opacity: 0; } to { -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); opacity: 1; } } /* google maps */ #map-wrapper { position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 0; } #map { position: absolute; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; z-index: 0; } /* birds */ #birdman-container { display: none; visibility: hidden; } #birdman-holder { position: fixed; top: 0; left: 0; width: 100%; height: 100%!important; overflow: hidden; z-index: 0; } canvas { position: relative; } /* media queries */ /* 1024px */ @media only screen and (max-width: 1200px) { /* layout */ h4 { margin: 50px auto 0 auto; } /* photos */ .photos-section .photos-container { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } } /* 880px */ @media only screen and (max-width: 880px) { /* layout */ h4 { font-size: 65px; margin: 50px auto 0 auto; } /* intro TIME style */ .flexslider-time h3 { font-size: 18px; margin: 0 0 0 15px; } .title-bottom-time { font-size: 18px; margin: 0 15px 0 0; } .title-intro-time { font-size: 120px; letter-spacing: 1px; margin: 14px auto 10px auto; } /* intro TIME style end */ /* intro THE SEA style start */ .unveil-the-sea { margin: -8px auto -17px auto; } .flexslider-the-sea h3 { font-size: 18px; } .line-top-the-sea { width: 259px; padding: 0 0 13px 0; } .title-intro-the-sea { font-size: 120px; margin: 11px 0 6px 0; } .description-intro-the-sea { font-size: 18px; } .line-bottom-the-sea { width: 60px; margin: 6px 14px; } /* intro THE SEA style end */ /* post */ .divider-post-bottom-services { visibility: visible; display: inline-block; position: relative; width: 100%; height: 100px; } .divider-post-mobile { visibility: visible; display: inline-block; position: relative; width: 100%; height: 50px; } /* countdown */ #countdown-wrapper h6 { font-size: 20px; } #countdown span { font-size: 15px; margin-left: 38px; } /* social icons */ .social-icons-wrapper h6 { font-size: 20px; margin: 0 auto 20px auto; } ul.social-icons { font-size: 15px; } #main-menu .credits { margin: 12px 0 0 9px; } /* link style */ .link { font-size: 40px; } /* photos */ .photos-section .photos-container { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } /* flexSlider quotes */ .quote-text { font-size: 25px; } .quote-signature { font-size: 15px; } /* clouds */ .clouds { height: 200%; top: -250px; } .cloud-1 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } .cloud-2 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } .cloud-3 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } } /* 640px */ @media only screen and (max-width: 640px) { .wp-block-button__link { background-color: #32373c; border: none; border-radius: 28px; box-shadow: none; color: inherit; cursor: pointer; display: inline-block; font-size: 12px; margin: 0; padding: 5px 10px; text-align: center; text-decoration: none; overflow-wrap: break-word; } .scrollbar { overflow-y: scroll; margin-left: 0px; height: 450px; -webkit-overflow-scrolling: touch; } .sfm-menu-text { display: none; } #logo { width: 40%; display: contents; } #logo img { display: inline-block; max-width: 30%; min-width: 50px; line-height: 70%; } #contentwrapper { width: 100%; margin: 0 auto; border-radius: 2px; padding: 10px 0px; text-align: justify; margin-bottom: 0px; position: relative; /*background: linear-gradient(45deg, white, transparent);*/ opacity: 0; float: right; z-index: 3; margin-top: 100px; overflow-y: hidden; height: 450px; max-height: 480px; -webkit-overflow-scrolling: touch; } /* layout */ h4 { font-size: 55px; margin: 0px auto 0 auto; } /* intro TIME */ .unveil-time { margin: 0 auto 20px auto; } #time-col-1 { display: none; } #time-col-2 { position: relative; display: block; width: 100%; overflow: hidden; } #time-col-3 { position: relative; display: block; width: 100%; overflow: hidden; } #time-col-4 { display: none; } .flexslider-time h3 { margin: 0 0 0 5px; } .line-top-time { background: url(../img/line-top-time-mobile-dark.png) no-repeat right; } .title-bottom-time { margin: 0 5px 0 0; } .title-intro-time { font-size: 90px; letter-spacing: 1px; text-align: center; margin: -380px auto 5px auto; } .line-bottom-time { background: url(../img/line-bottom-time-mobile-dark.png) no-repeat left; } /* intro TIME style end */ /* intro THE SEA style start */ .unveil-the-sea { margin: -18px auto -27px auto; } .flexslider-the-sea h3 { font-size: 18px; } .line-top-the-sea { width: 219px; padding: 0 0 13px 0; } .title-intro-the-sea { font-size: 90px; margin: 6px 0 0 0; } .description-intro-the-sea { font-size: 18px; } .line-bottom-the-sea { width: 40px; margin: 6px 14px; } /* intro THE SEA style end */ /* post */ .divider-post-bottom-services { visibility: visible; display: inline-block; position: relative; width: 100%; height: 100px; } .divider-post-mobile { visibility: visible; display: inline-block; position: relative; width: 100%; height: 50px; } /* launch time */ .launch-time { visibility: hidden; } .launch-time-mobile { visibility: visible; } .launch-time-mobile, .launch-time-mobile.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .launch-time-mobile.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transform: scale(0.75); -moz-transform: scale(0.75); -ms-transform: scale(0.75); -o-transform: scale(0.75); transform: scale(0.75); -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } /* countdown */ #countdown-wrapper h6 { visibility: hidden; display: none; } .countdown-wrap { width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); margin-left: 0; } /* launch social */ .launch-social { visibility: hidden; } /* social */ .social-wrap { width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); margin-left: 0; } /* social icons */ .social-icons-wrapper { visibility: hidden; } /* social icons mobile */ .social-icons-wrapper-2 { visibility: visible; display: block; } /* navigation */ .hide-menu-mobile { visibility: visible; display: block; } .hide-menu { visibility: hidden; display: none; } .menu-toggle-mobile { visibility: visible; position: absolute; display: block; top: -13px; left: 0; width: 80px; height: 80px; padding: 0; background: none; line-height: 1; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; border: none; z-index: 1010; } .menu-toggle-mobile, .menu-toggle-mobile.show { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } .menu-toggle-mobile.hide { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } #menu-wrapper-mobile { position: absolute; /* position: fixed; */ overflow: hidden; width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: 30px; margin-left: 0; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; background: none; z-index: 1005; visibility: visible; } #main-menu-mobile { position: fixed; font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-style: normal; text-transform: uppercase; font-weight: 400; letter-spacing: 1px; line-height: 1; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; width: -webkit-calc(100% - 60px); width: -moz-calc(100% - 60px); width: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: calc(100% - 60px); top: 30px; left: -100%; margin-left: 30px; bottom: 30px; right: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; visibility: visible; opacity: 100; -moz-opacity: 100; -webkit-opacity: 100; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: none; z-index: 1005; } #main-menu { visibility: hidden; display: none; } #main-menu-mobile { visibility: visible; display: block; } #main-menu-mobile.activated { left: 0; } #main-menu-mobile ul { width: 326px; list-style: none outside none; padding: 0; margin: -250px 0 0 -3px; } #main-menu-mobile ul li { width: 326px; text-align: left; line-height: .75; } #main-menu-mobile .credits { font-size: 14px; line-height: 1; margin: 12px 0 0 9px; } #main-menu-mobile .credits a { color: #000; text-decoration: none; } #main-menu-mobile a { display: none; min-width: 10px; color: #999; text-decoration: none; -webkit-transition: color .8s ease-in-out; -moz-transition: color .8s ease-in-out; -ms-transition: color .8s ease-in-out; -o-transition: color .8s ease-in-out; transition: color .8s ease-in-out; } #main-menu-mobile li .active { color: #000; } .menu-nav-wrapper { display: table; width: 100%; height: 100%; } .menu-nav { display: table-cell; width: 100%; height: 100%; vertical-align: middle; } /* link style */ .link { font-size: 40px; } /* borders */ .borders-left { visibility: hidden; display: none; } .borders-right { visibility: hidden; display: none; } /* fireOT */ .fireOT-inner { position: absolute; overflow: hidden; width: 100%; height: 100%; top: 0; left: 0; bottom: 0; right: 0; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; background: none; } /* pages */ #page-0 { width: 100%; overflow: auto; } #page-1, #page-2, #page-3, #page-4 { width: 100%; } /* page closers */ .page-closer { visibility: hidden; } .page-closer-mobile { visibility: visible; } /* photos */ .photos-section .photos-container { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; } .flexslider-quotes-wrap { /* width: 100%; left: 0; */ visibility: hidden; display: none; } /* clouds */ .clouds { height: 200%; top: -50px; } .cloud-1 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } .cloud-2 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } .cloud-3 { width: 400%; -webkit-transform: scale(0.5,0.5) translate3d(0,0,0); -moz-transform: scale(0.5,0.5) translate3d(0,0,0); -ms-transform: scale(0.5,0.5) translate3d(0,0,0); -o-transform: scale(0.5,0.5) translate3d(0,0,0); transform: scale(0.5,0.5) translate3d(0,0,0); } } /* landscape */ @media only screen and (max-width: 640px) and (orientation: landscape) { /* clouds */ .clouds { height: 300%; } } /* styleswitch [for demonstration purposes only] */ #customizer { position: fixed; top: 25%; z-index: 999999; } .corner { display: block; cursor: pointer; width: 50px; height: 50px; background: #fff url(../img/corner.png); position: absolute; top: 50px; left: -50px; } .s-close { right: -206px !important; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .s-open { right: 0 !important; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .corner.expanded { background: #fff url(../img/corner.png); } #options { width: 206px; height: 260px; background: #fff; padding: 0; position: relative; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; transition: all .4s ease-in-out; } .options-head { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; font-weight: 400; color: #fff; text-shadow: 1px 1px 2px #000; text-align: center; text-transform: uppercase; line-height: 50px; } .options-segment { margin-bottom: 20px; } .color-head { font-family: 'Open Sans', arial, helvetica, tahoma, sans-serif; font-size: 14px; font-weight: 400; text-transform: uppercase; color: #000; line-height: 1; /* new */ display: none; visibility: hidden; } .color-scheme { padding: 10px 0 0 1px; } .color-scheme li { float: left; list-style: none; } .color-scheme a { display: block; height: 30px; width: 30px; margin: 0 4.25px 10px; } .colors-sel { padding: 20px 25px 15px; margin-bottom: 0; } .red a { background: #db0018; } .red-2 a { background: #ff0000; } .green a { background: #00cc66; } .green-2 a { background: #009966; } .blue a { background: #00bfff; } .blue-2 a { background: #0099ff; } .yellow a { background: #ead22d; } .yellow-2 a { background: #ffc200; } .orange a { background: #ff6900; } .gold a { background: #996600; } .pink a { background: #ff3e91; } .purple a { background: #9b59b6; } .violet a { background: #7369b9; } .turquoise a { background: #34c5ba; } .brick a { background: #ff9966; } .white a { background: #fff; border: 1px solid #000; } .black a { background: #000; } .sfm-menu-text { position: absolute; top: 34%; left: 60%; width: 60%; font-size: 50px; transition: all .3s ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; margin: -1px 20%; color: black; } .langposition{ float : right; padding-right: 20px; letter-spacing: 2px; z-index: 9; position: inherit; }