@charset "utf-8"; /* CSS Document */ /* twitter ticker [imported] fonts reset supersized layout borders curtains countdown menu menu mobile contact form newsletter form social icons closer dividers screen loader preload preload content slider top shade pace fade in extras effect 8 box effect */ /* twitter ticker */ @import url('../twitter/jquery.tweet.css'); /* fonts */ @font-face { font-family: 'BebasNeueRegular'; src: url('fonts/bebasneue-regular/bebasneue-webfont.eot'); src: url('fonts/bebasneue-regular/bebasneue-webfont-.eot#iefix') format('embedded-opentype'), url('fonts/bebasneue-regular/bebasneue-webfont.woff') format('woff'), url('fonts/bebasneue-regular/bebasneue-webfont.ttf') format('truetype'), url('fonts/bebasneue-regular/bebasneue-webfont.svg#BebasNeueRegular') format('svg'); font-style: normal; font-weight: normal; } /* reset */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } html, body { height: 100%; } body { line-height: 1; } 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; } /* supersized */ img { border: none; } /* layout */ body { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; line-height: 1.5; font-style: normal; font-weight: normal; text-align: center; color: #fff; background: #000; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; width: 100%; height: 100%; } #intro-wrapper { position: absolute; width: 100%; height: auto; top: 138px; margin: 0; padding: 0; } a { color: #00bfff; 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; } a:hover { color: #fff; 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; } p a { color: #00bfff; 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: #fff; 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: #555; color: #fff; /* Firefox */ } ::selection { background: #555; color: #fff; /* Safari */ } .upper-page { min-height: 100%; margin: 0; padding: 0; background: none; } .upper-content { margin: 0 auto; padding: 0; } .lower-page { min-height: 100%; margin: 0; padding: 0; background-image: url("../images/background.jpg"); background-repeat: no-repeat; background-size: cover; } .lower-content { margin: 0 auto; padding: 138px 0 0 0; color: #fff; } .lower-content p { margin: 0 auto; padding: 30px 0px; color: #fff; } .center { margin: 0 auto; } #about, #services, #contact { display: none; } .about-intro, .services-intro, .contact-intro { position: relative; width: auto; margin: 0; padding: 0 0 50px 0; } .contact-intro-bottom { margin: 0 auto; padding: 100px 0 0 0; } .contact-intro-bottom-title { font-family: 'BebasNeueRegular'; font-size: 35px; line-height: 35px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; text-shadow: 1px 1px 2px #555; margin: 0; padding: 0 0 50px 0; } .info-address strong { font-weight: bold; text-transform: uppercase; } .info-phone strong { font-weight: bold; text-transform: uppercase; } .info-email strong { font-weight: bold; text-transform: uppercase; } h1 { font-family: 'BebasNeueRegular'; font-size: 34px; line-height: 40px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: left; color: #00bfff; text-shadow: 1px 1px 2px #00bfff; margin: 0; /* padding: 20px 0 20px 0;*/ } h2 { font-family: 'BebasNeueRegular'; font-size: 35px; line-height: 35px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: left; color: #fff; text-shadow: 1px 1px 2px #555; margin: 0; padding: 0; } h3 { font-family: 'BebasNeueRegular'; font-size: 35px; line-height: 35px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: left; color: #fff; text-shadow: 1px 1px 2px #555; margin: 0; padding: 0; } h4 { font-family: 'BebasNeueRegular'; font-size: 90px; line-height: 90px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: center; color: #00bfff; text-shadow: 1px 1px 2px #00bfff; margin: 0; padding: 0; } h5 { font-family: 'BebasNeueRegular'; font-size: 35px; line-height: 35px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; color: #00bfff; text-shadow: 1px 1px 2px #555; margin: 0; padding: 30px 0 10px 0; text-align: left; } h6 { font-family: 'BebasNeueRegular'; font-size: 20px; line-height: 20px; /* font-style: italic;*/ font-weight: 500; letter-spacing: 4px; text-transform: none; text-align: right; color: #fff; text-shadow: 1px 1px 2px #555; margin: 0; padding: 0 0 10px 0; } /* borders */ .borders { position: fixed; width: 100%; height: 100%; background-image: url("../images/background.jpg"); z-index: 0; } .borders, .borders:after, .borders:before { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ } /* curtains */ #curtains { position: fixed; height: 100%; width: 100%; background: url("../images/curtains.png") repeat top left; z-index: -1; } /* countdown */ #countdown-wrapper { position: absolute; width: auto; height: auto; right: 10px; bottom: 95px; text-align: right; } #countdown { margin: 0 auto; padding: 0; } ul#countdown li { display: inline-block; width: 100px; } ul#countdown li span { font-family: 'BebasNeueRegular'; font-size: 55px; line-height: 55px; font-style: normal; font-weight: normal; text-transform: uppercase; color: #fff; text-shadow: 1px 1px 2px #555; height: 55px; margin: 0; padding: 0; position: relative; } ul#countdown li span.seconds { font-family: 'BebasNeueRegular'; font-size: 55px; line-height: 55px; font-style: normal; font-weight: normal; text-transform: uppercase; color: #00bfff; text-shadow: 1px 1px 2px #00bfff; height: 55px; margin: 0; padding: 0; position: relative; } ul#countdown li span::before { content: ''; width: 100%; height: 1px; position: absolute; } ul#countdown li p.timeRefDays, ul#countdown li p.timeRefHours, ul#countdown li p.timeRefMinutes, ul#countdown li p.timeRefSeconds { font-family: 'BebasNeueRegular'; color: #fff; text-shadow: 1px 1px 2px #555; text-transform: uppercase; font-size: 25px; margin: 0; padding: 0 0 5px 0; } /* menu */ .menu { position: absolute; font-family: 'BebasNeueRegular'; font-style: normal; font-weight: normal; top: 37px; right: 45px; width: auto; height: auto; text-align: right; z-index: 1000; } .menu a { color: #fff; font-weight: normal; text-decoration: none; } .menu a:hover { color: #00bfff; } .menu a.active { color: #00bfff; background: none; } .menu ul { height: auto; display: inline-block; } .menu ul li { position: relative; float: left; margin: 0; padding: 0; width: 90px; } .menu ul li a { font-size: 20px; color: #fff; text-shadow: 1px 1px 2px #000; display: block; height: auto; margin: 0; padding: 0; 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; } .menu ul li a:hover { -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; } .menu ul li a span { font-size: 17px; color: #fff; text-shadow: 1px 1px 2px #000; float: left; width: 100%; overflow: hidden; clear: both; } /* menu mobile */ .menu-mobile { display: none; visibility: hidden; } .menu-mobile a.menu-mobile-trigger { background: url("../images/menu-mobile-trigger.png"); background-position: 0 0; width: 50px; height: 25px; margin: 0; padding: 0; text-indent: -10000px; -webkit-transition: background-position 0.4s ease; -moz-transition: background-position 0.4s ease; -ms-transition: background-position 0.4s ease; -o-transition: background-position 0.4s ease; transition: background-position 0.4s ease; } .menu-mobile a.menu-mobile-trigger:hover { cursor: pointer; background-position: 50px 0; } .menu-mobile a { color: #fff; font-weight: normal; text-decoration: none; } .menu-mobile a:hover { color: #00bfff; } .menu-mobile a.active { color: #00bfff; background: none; } .menu-mobile ul, li { margin: 0; padding: 0; } .menu-mobile .lifting { margin: 8px 0 0 0; height: 20px; } .menu-mobile .lifting-first { margin: 11px 0 0 0; height: 20px; } .menu-mobile li { position: relative; margin: 7px 0 0 0; padding: 0 0 10px 0; background: none; float: right; text-transform: uppercase; height: 20px; } .menu-mobile li a { padding: 0 0 9px 7px; text-decoration: none; float: right; text-transform: uppercase; height: 20px; } .menu-mobile li ul { display: none; right: 0; position: absolute; top: 100%; background: none; } .menu-mobile li:hover ul { display: block; width: auto; } .menu-mobile li ul a { color: #fff; white-space: nowrap; background: 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; } .menu-mobile li ul a:hover { color: #00bfff; background: 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; } /* contact form */ #form-wrapper { width: 545px; margin: 0 auto; padding: 0; } #form { margin: 0 auto; padding: 20px 0 0 0; background: none; float: none; width: 545px; text-align: left; } #form div { float: left; width: 250px; position: relative; margin: 0; padding: 0; } #form div label { width: 225px; display: block; font-size: 10px; line-height: 11px; margin: 0 0 4px 0; color: #fff; } #form input { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; width: 225px; margin: 0 0 10px 0; padding: 10px 5px 10px 5px; background-color: #fff; border: 1px solid #fff; } #form .subject { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; width: 225px; margin-top: 0; margin-right: 0; margin-bottom: 5px; margin-left: 0; padding-top: 8px; padding-right: 5px; padding-bottom: 8px; padding-left: 5px; background-color: #fff; border: 1px solid #fff; } #form textarea { font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #000; width: 280px; height: 135px; margin: 0 0 10px 0; padding: 10px 5px 10px 5px; background-color: #fff; border: 1px solid #fff; } #form input:focus, #form textarea:focus { color: #000; background-color: #fff; } #form .submit { font-family: 'BebasNeueRegular'; font-size: 15px; font-style: normal; font-weight: normal; text-transform: uppercase; text-align: center; position: relative; width: 80px; height: 30px; line-height: 30px; float: right; margin-top: 13px; margin-right: -41px; padding: 0; color: #000; background: #fff; border: 1px solid #fff; cursor: pointer; } #form .submit:hover, #form .submit:focus { background-color: #fff; color: #000; } .success { font-family: 'BebasNeueRegular'; font-size: 15px; font-style: normal; font-weight: normal; text-transform: uppercase; text-align: center; color: #fff; margin: 15px auto 0 auto; padding: 0; width: 340px; } #form .error { color: #fff; font-size: 10px; line-height: 11px; position: absolute; top: 0; right: 15px; } /* newsletter form */ #subscribe-wrapper { position: absolute; width: 225px; height: auto; right: 8px; bottom: 0; } #newsletter { width: auto; height: 50px; padding: 2px 0 0 0; } .newsletter { position: relative; clear: both; width: auto; border: none; background: none; margin: 0; padding: 0; overflow: hidden; } #subscribe .mail { display: none; visibility: hidden; } #subscribe input#subscribeemail { width: 140px; height: 28px; padding: 0 5px 0 5px; border: 1px solid #fff; font-size: 12px; float: left; margin: 4px 0 5px 2px; } #subscribe input { color: #fff; text-align: left; border: 1px solid #fff; background: none; } #subscribe input:focus, #subscribe textarea:focus { color: #000; background: #fff; } #subscribe input#submit { font-family: 'BebasNeueRegular'; font-size: 15px; font-style: normal; font-weight: normal; text-transform: uppercase; text-align: center; position: relative; width: 65px; height: 30px; line-height: 30px; float: right; margin: 4px 2px 5px 0; padding: 0; color: #000; background: #fff; border: 1px solid #fff; cursor: pointer; } .subscribesuccess { font-family: 'BebasNeueRegular'; font-size: 15px; font-style: normal; font-weight: normal; text-transform: uppercase; text-align: right; color: #fff; margin: 17px 0 0 0; padding: 0; } #subscribe .subscribeerror { font-size: 10px; text-transform: uppercase; text-align: right; color: #fff; display: block; margin: 0; padding: 0; } /* social icons */ #social-icons-wrapper { position: relative; width: auto; margin: 0 0 0 -5px; padding: 0; } #social-icons-wrapper ul { float: left; margin: 0; padding: 0; list-style-type: none; } #social-icons-wrapper ul li { display: inline; padding: 0; } ul.social-icons { margin: 0; padding: 0; } ul.social-icons a img { width: 16px; height: 16px; padding: 5px; 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 img:hover { padding: 5px; 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; } /* closer */ .fire-closer { position: relative; } .fire-closer a { 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; border: none; outline: none; } .fire-closer a:hover { 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; } /* dividers */ .divider-blank { width: auto; height: 1px; margin: 20px 0 20px 0; background: none; } .divider-left-top { position: absolute; left: 5px; top: 0; width: 10px; height: 10px; margin: 0; padding: 0; background: url("../images/left-top.png") no-repeat; } .divider-right-top { position: absolute; right: 5px; top: 0; width: 10px; height: 10px; margin: 0; padding: 0; background: url("../images/right-top.png") no-repeat; } .divider-left-bottom { position: absolute; left: 5px; bottom: 0; width: 10px; height: 10px; margin: 0; padding: 0; background: url("../images/left-bottom.png") no-repeat; } .divider-right-bottom { position: absolute; right: 5px; bottom: 0; width: 10px; height: 10px; margin: 0; padding: 0; background: url("../images/right-bottom.png") no-repeat; } .divider-fin { width: auto; height: 50px; background: none; margin: 0 auto; padding: 0; } /* screen loader */ .screen-loader { position: absolute; width: 100%; height: 100%; overflow: hidden; background: #000; z-index: 10000; } /* preload */ #preload { position: fixed; width: 100%; height: 100%; overflow: hidden; right: 0; bottom: 0; background: #000; display: none; z-index: 10000; } #preload-status { position: absolute; width: 25px; height: 25px; margin: auto; padding: 0; top: 0; right: 0; bottom: 0; left: 0; display: block; background: #000 url("../images/preload.gif") no-repeat center center; } #preload-status { opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* preload content */ .preload-content { position: fixed; width: auto; height: auto; margin: 0; padding: 0; top: 0; right: 0; bottom: 0; left: 0; background: #000; opacity: 0.3; -moz-opacity: 0.3; -webkit-opacity: 0.3; filter: alpha(opacity=30); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; } /* slider */ .slide { margin: 0 0 40px 0; padding: 0; } /* top shade */ #top-shade { position: fixed; width: 100%; height: 100%; overflow: hidden; left: 0; top: 0; /* IE9 SVG, needs conditional override of 'filter' to 'none' */ background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjY1Ii8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMCIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.65)), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6000000', endColorstr='#00000000', GradientType=0); /* IE6-8 */ z-index: 0; } /* pace */ .pace .pace-progress { position: fixed; background: #fff; top: 0; left: 0; height: 4px; 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-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; z-index: 2000; } .pace-done .pace-progress { opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .pace-done .fade-in-1, .pace-done .fade-in-2, .pace-done .fade-in-3, .pace-done .fade-in-4 { top: 0; visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } .pace-done .fade-in-5, .pace-done .fade-in-6, .pace-done .fade-in-7 { visibility: visible; opacity: 1; -moz-opacity: 1; -webkit-opacity: 1; filter: alpha(opacity=100); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } /* fade in */ .fade-in-1, .fade-in-2, .fade-in-3, .fade-in-4 { position: relative; visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fade-in-5, .fade-in-6, .fade-in-7 { visibility: hidden; opacity: 0; -moz-opacity: 0; -webkit-opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .fade-in-1 { top: 200px; -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transition-delay: 1s; -moz-transition-delay: 1s; -ms-transition-delay: 1s; -o-transition-delay: 1s; transition-delay: 1s; } .fade-in-2 { top: 150px; -webkit-transition: all 1.5s ease-in-out; -moz-transition: all 1.5s ease-in-out; -ms-transition: all 1.5s ease-in-out; -o-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out; -webkit-transition-delay: 1.5s; -moz-transition-delay: 1.5s; -ms-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; } .fade-in-3 { top: 100px; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -webkit-transition-delay: 2s; -moz-transition-delay: 2s; -ms-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; } .fade-in-4 { top: 50px; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; -webkit-transition-delay: 2.5s; -moz-transition-delay: 2.5s; -ms-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s; } .fade-in-5 { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transition-delay: 3s; -moz-transition-delay: 3s; -ms-transition-delay: 3s; -o-transition-delay: 3s; transition-delay: 3s; } .fade-in-6 { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transition-delay: 4s; -moz-transition-delay: 4s; -ms-transition-delay: 4s; -o-transition-delay: 4s; transition-delay: 4s; } .fade-in-7 { -webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; transition: all 2s ease-in-out; -webkit-transition-delay: 5s; -moz-transition-delay: 5s; -ms-transition-delay: 5s; -o-transition-delay: 5s; transition-delay: 5s; } /* extras */ @font-face { font-family: 'ecoicon'; src: url('fonts/ecoicons/ecoicon.eot'); src: url('fonts/ecoicons/ecoicon-.eot#iefix') format('embedded-opentype'), url('fonts/ecoicons/ecoicon.woff') format('woff'), url('fonts/ecoicons/ecoicon.ttf') format('truetype'), url('fonts/ecoicons/ecoicon.svg#ecoicon') format('svg'); font-weight: normal; font-style: normal; } .hi-icon-wrap { text-align: center; margin: 0 auto; padding: 0; } .hi-icon { display: inline-block; font-size: 0px; cursor: pointer; margin: 15px 30px; width: 90px; height: 90px; border-radius: 50%; text-align: center; position: relative; color: #555; 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: 'ecoicon'; speak: none; font-size: 48px; line-height: 90px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .hi-icon-mobile:before { content: "\e009"; } .hi-icon-screen:before { content: "\e00a"; } .hi-icon-earth:before { content: "\e002"; } .hi-icon-support:before { content: "\e000"; } .hi-icon-locked:before { content: "\e001"; } .hi-icon-cog:before { content: "\e003"; } .hi-icon-clock:before { content: "\e004"; } .hi-icon-videos:before { content: "\e005"; } .hi-icon-list:before { content: "\e006"; } .hi-icon-refresh:before { content: "\e007"; } .hi-icon-images:before { content: "\e008"; } .hi-icon-pencil:before { content: "\e00b"; } .hi-icon-link:before { content: "\e00c"; } .hi-icon-mail:before { content: "\e00d"; } .hi-icon-location:before { content: "\e00e"; } .hi-icon-archive:before { content: "\e00f"; } .hi-icon-chat:before { content: "\e010"; } .hi-icon-bookmark:before { content: "\e011"; } .hi-icon-user:before { content: "\e012"; } .hi-icon-contract:before { content: "\e013"; } .hi-icon-star:before { content: "\e014"; } /* effect 8 */ .set-8 { background: none; margin: 40px 0 0 0; } .hi-icon-effect-8 .hi-icon { background: rgba(255, 255, 255, 0.1); -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; color: #fff; /* custom height */ line-height: 370px; } .hi-icon-effect-8 .hi-icon:after { top: 0; left: 0; padding: 0; box-shadow: 0 0 0 2px rgba(255, 255, 255, 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(255, 255, 255, 0.05); -webkit-transform: scale(0.93); -moz-transform: scale(0.93); -ms-transform: scale(0.93); transform: scale(0.93); color: #fff; } .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(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 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(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 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(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5); } 100% { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1), 0 0 10px 10px #ffffff, 0 0 0 10px rgba(255, 255, 255, 0.5); transform: scale(1.5); opacity: 0; } } /* box effect */ .box { width: 300px; height: 360px; position: relative; background: rgba(255, 255, 255, 1); display: inline-block; margin: 0 10px; /* cursor: pointer; color: #fff; box-shadow: inset 0 0 0 3px #fff; */ -webkit-transition: background 0.4s 0.5s; transition: background 0.4s 0.5s; margin: 20px 0 0 0; } .box-desc { font-family: 'BebasNeueRegular'; font-size: 20px; line-height: 20px; font-style: normal; font-weight: normal; letter-spacing: normal; text-transform: none; text-align: center; color: #fff; text-shadow: none; margin: -40px 0 0 0; padding: 5px; } .box:hover { background: rgba(255, 255, 255, 0); -webkit-transition-delay: 0s; transition-delay: 0s; } /* .box h3 { font-family: "Ruthie", cursive; font-size: 180px; line-height: 370px; margin: 0; font-weight: 400; width: 100%; } */ .box span { display: block; } .box h3, .box span { -webkit-transition: color 0.4s 0.5s; transition: color 0.4s 0.5s; } .box:hover h3, .box:hover span { color: #fff; -webkit-transition-delay: 0s; transition-delay: 0s; } .box svg { position: absolute; top: 0; left: 0; } .box svg line { stroke-width: 2; stroke: #fff; fill: none; -webkit-transition: all .8s ease-in-out; transition: all .8s ease-in-out; } .box:hover svg line { -webkit-transition-delay: 0.1s; transition-delay: 0.1s; } .box svg line.top, .box svg line.bottom { stroke-dasharray: 330 240; } .box svg line.left, .box svg line.right { stroke-dasharray: 390 300; } .box:hover svg line.top { -webkit-transform: translateX(-600px); transform: translateX(-600px); } .box:hover svg line.bottom { -webkit-transform: translateX(600px); transform: translateX(600px); } .box:hover svg line.left { -webkit-transform: translateY(920px); transform: translateY(920px); } .box:hover svg line.right { -webkit-transform: translateY(-920px); transform: translateY(-920px); } /* frame */ .demo-3 .box { background: rgba(0, 0, 0, 0); color: #fff; box-shadow: none; -webkit-transition: background 0.3s; transition: background 0.3s; /* custom */ margin: 40px 0 40px 0; } .demo-3 .box:hover { background: rgba(0, 0, 0, 0.4); } .demo-3 .box h3, .demo-3 .box span { -webkit-transition: none; transition: none; } .demo-3 .box svg line { -webkit-transition: all .5s; transition: all .5s; } .demo-3 .box:hover svg line { stroke-width: 10; -webkit-transition-delay: 0s; transition-delay: 0s; } .demo-3 .box:hover svg line.top { -webkit-transform: translateX(-300px); transform: translateX(-300px); } .demo-3 .box:hover svg line.bottom { -webkit-transform: translateX(300px); transform: translateX(300px); } .demo-3 .box:hover svg line.left { -webkit-transform: translateY(360px); transform: translateY(360px); } .demo-3 .box:hover svg line.right { -webkit-transform: translateY(-360px); transform: translateY(-360px); } .logo { text-align: left; } .logo img { border-radius: 130px; } .paragraph { text-align: left; font-size: 18px; } .title { padding: 20px 0px; } .service-list { text-align: left; color: #00bfff; }