/****************************************************************** @ Item Gravity // Coming Soon WordPress @ Author Avanzare @ Website http://themeforest.net/user/avanzare ******************************************************************/ /****************************************************************** ------------------------ -- TABLE OF CONTENTS -- ------------------------ -- 1. TYPOGRAPHY -- 2. LOADING -- 3. CONTENT -- 4. BACKGROUND -- 5. ERROR-404 ******************************************************************/ /** 1. TYPOGRAPHY *******************************************************************/ html, body { width: 100%; height: 100% !important; overflow-x: hidden; } body { font-size: 1.37vh; font-weight: 300; font-style: normal; overflow-x: hidden; color: #fff; background: #111; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: normal; margin-top: 0; margin-bottom: 0; color: #fff; } h1 { font-size: 41px; letter-spacing: 1px; } h2 { font-size: 35px; letter-spacing: 1px; } h2 { font-size: 35px; letter-spacing: 1px; } h3 { font-size: 25px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { font-family: 'Open Sans', sans-serif; font-size: 15px; margin-top: 0; margin-bottom: 0; } .grcs_subline p { color: #fff; letter-spacing: 2px; font-weight: 400; font-size: 17px; font-family: 'Raleway', sans-serif; } a { font-family: 'Open Sans', sans-serif; cursor: pointer; transition: all 300ms ease; text-decoration: none; } a:hover, a:focus { text-decoration: none; } /** MEDIA QUERIES **/ @media only screen and (min-width: 2100px), only screen and (min-height: 1100px) { body { font-size: 14px; } } @media only screen and (max-width: 768px), only screen and (max-height: 630px) { .grcs_subline p { font-size: 14px; } } @media only screen and (max-width: 600px), only screen and (max-height: 500px) { .grcs_subline p { font-size: 12px; } } @media only screen and (max-width: 480px), only screen and (max-height: 410px) { .grcs_subline p { font-weight: 300; font-size: 11px; } } @media only screen and (max-width: 400px), only screen and (max-height: 310px) { .grcs_subline p { font-size: 10px; } } @media only screen and (max-width: 355px) ,only screen and (max-height: 280px) { .grcs_subline p { font-size: 9px; } } /** 2. LOADING *****************************************************************/ #page-loader { position: fixed; z-index: 99999; left: 0; width: 100%; height: 100%; transition: all 800ms cubic-bezier(.540, .086, .000, .980); background: #111; } #page-loader .container-mid { overflow: hidden; } #page-loader.slideUp { bottom: 0; } #page-loader.slideUp.hide-this { bottom: 100%; } #page-loader.slideDown { top: 0; } #page-loader.slideDown.hide-this { top: 100%; } #page-loader.fade { top: 0; opacity: 1; } #page-loader.fade.hide-this { pointer-events: none; opacity: 0; } #page-loader img { margin: 0 auto; margin-bottom: 24px; transition: all .4s cubic-bezier(.19, 1, .22, 1); opacity: 1; } #page-loader.hide-this img { opacity: 0; } #page-loader .spinner-container { position: fixed; z-index: 2000; left: 50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); } #page-loader .spinner-container .css-spinner { display: block; transition: all .4s cubic-bezier(.19, 1, .22, 1); opacity: 1; } #page-loader.hide-this .spinner-container .css-spinner { opacity: 0; } #page-loader .spinner-container .css-spinner.indicator-1 { width: 34px; height: 34px; -webkit-animation: spinner 400ms linear infinite; animation: spinner 400ms linear infinite; border: solid 2px transparent; border-top-color: #1fb8b2; border-left-color: #1fb8b2; border-radius: 100%; } #page-loader .spinner-container .css-spinner.indicator-2 { width: 38px; height: 38px; -webkit-animation: sk-scaleout 1.0s infinite ease-in-out; animation: sk-scaleout 1.0s infinite ease-in-out; border-radius: 100%; background-color: #1fb8b2; } #page-loader .spinner-container .css-spinner.indicator-3 { height: 50px; margin-top: -5px; } #page-loader .spinner-container .css-spinner.indicator-3 > div { display: inline-block; width: 4px; height: 100%; margin-right: 2px; margin-left: 2px; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; background-color: #1fb8b2; } #page-loader .spinner-container .css-spinner.indicator-3 .rect2 { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; } #page-loader .spinner-container .css-spinner.indicator-3 .rect3 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; } #page-loader .spinner-container .css-spinner.indicator-3 .rect4 { -webkit-animation-delay: -.9s; animation-delay: -.9s; } #page-loader .spinner-container .css-spinner.indicator-3 .rect5 { -webkit-animation-delay: -.8s; animation-delay: -.8s; } #page-loader .spinner-container .css-spinner.indicator-4 { position: relative; width: 40px; height: 40px; -webkit-transform: rotateZ(45deg); -ms-transform: rotateZ(45deg); transform: rotateZ(45deg); } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube { position: relative; float: left; width: 50%; height: 50%; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; background-color: #1fb8b2; } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); -ms-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); -ms-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); -ms-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube2 span { -webkit-animation-delay: .3s; animation-delay: .3s; } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube3 span { -webkit-animation-delay: .6s; animation-delay: .6s; } #page-loader .spinner-container .css-spinner.indicator-4 .sk-cube4 span { -webkit-animation-delay: .9s; animation-delay: .9s; } #page-loader .spinner-container .css-spinner.indicator-5 > div { display: block; width: 10px; height: 10px; margin-bottom: 16px; -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; border-radius: 100%; background-color: #1fb8b2; } #page-loader .spinner-container .css-spinner.indicator-5 .bounce1 { -webkit-animation-delay: -.32s; animation-delay: -.32s; } #page-loader .spinner-container .css-spinner.indicator-5 .bounce2 { -webkit-animation-delay: -.16s; animation-delay: -.16s; } #page-loader .spinner-container .css-spinner.indicator-6 { position: relative; top: 50%; display: inline-block; width: 34px; height: 34px; -webkit-animation: loader 2s infinite ease; animation: loader 2s infinite ease; border: 3px solid #1fb8b2; } #page-loader .spinner-container .css-spinner.indicator-6 .loader-inner { display: inline-block; width: 100%; -webkit-animation: loader-inner 2s infinite ease-in; animation: loader-inner 2s infinite ease-in; vertical-align: top; background-color: #1fb8b2; } @-webkit-keyframes loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes loader { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 50% { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 75% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes loader-inner { 0% { height: 0; } 25% { height: 0; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0; } } @keyframes loader-inner { 0% { height: 0; } 25% { height: 0; } 50% { height: 100%; } 75% { height: 100%; } 100% { height: 0; } } @-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); } 40% { -webkit-transform: scale(1.0); } } @keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1.0); transform: scale(1.0); } } @-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } } @-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1.0); } } @keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(.4); transform: scaleY(.4); } 20% { -webkit-transform: scaleY(1.0); transform: scaleY(1.0); } } @-webkit-keyframes sk-scaleout { 0% { -webkit-transform: scale(0); } 100% { -webkit-transform: scale(1.0); opacity: 0; } } @keyframes sk-scaleout { 0% { -webkit-transform: scale(0); transform: scale(0); } 100% { -webkit-transform: scale(1.0); transform: scale(1.0); opacity: 0; } } @-webkit-keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /** 3. CONTENT *****************************************************************/ #main { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } #main-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; -webkit-transition: all 200ms linear; transition: all 200ms linear; } .container-mid { position: absolute; z-index: 2; top: 50%; left: 0; display: block; overflow: auto; width: 100%; padding: 60px 30px; max-height: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .container-mid.block-overflow, .movement-in-progress .container-mid { overflow: hidden; } .grcs_page_wrapper { transition: .6s ease; right: 0; position: relative; z-index: 10; } .grcs_audio_player, .grcs_soundcloud_player { position: fixed; z-index: -9999999; opacity: 0; pointer-events: none; } .grcs_audio_player_toggle { position: fixed; bottom: -50px; left: 26px; z-index: 40; font-size: 20px; cursor: pointer; -webkit-transition: 200ms ease; transition: 200ms ease; } .grcs_audio_player_toggle.show { bottom: 22px; -webkit-transition: 800ms ease; transition: 800ms ease; } .vc_empty-placeholder { margin-bottom: 0px !important; } .vc_grcs_vc_overlay_container > .vc_controls-container, vc_grcs_vc_hero_container > .vc_controls-container { display: none !important; } /** 4. BACKGROUND *******************************************************************/ .grcs_background_content { position: fixed; z-index: -10; overflow: hidden; width: 100%; height: 100%; } .grcs_background_content .level-1, .grcs_background_content .level-2 { position: absolute; width: 100%; height: 100%; } .grcs_background_content .level-1 { top: 50%; left: 50%; z-index: 2; width: 110%; height: 110%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .grcs_background_content .level-2 { z-index: 1; -webkit-transform: scale(1.02); transform: scale(1.02); } .grcs_background_content .bg-overlay, .grcs_background_content .bg-pattern, .grcs_background_content .bg-image, .grcs_background_content .bg-video, .grcs_background_content .bg-color, .grcs_background_content .glitch-img, .grcs_background_content #canvas { position: absolute !important; width: 100%; height: 100% !important; } .grcs_background_content .bg-video { position: absolute !important; width: 100vw !important; height: calc(100vw / 1.778) !important; left: 50% !important; top: 50% !important; transform: translate(-50%,-50%) !important; } @media (max-aspect-ratio: 16 / 9) { .grcs_background_content .bg-video { width: calc(100vh * 1.778) !important; height: 100vh !important; } } .grcs_background_content .glitch-img { background-size: cover; } .grcs_background_content .bg-color { z-index: -1; background: rgb(175,153,127); opacity: 0; } .grcs_background_content #canvas canvas { position: absolute !important; width: 100%; height: 100%; } .grcs_background_content #canvas { top: 100% !important; -webkit-transition: all 800ms ease; transition: all 800ms ease; } .grcs_background_content #canvas.init { top: 0 !important; } .grcs_background_content .bg-overlay { position: absolute !important; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,1.00); opacity: .52; } .grcs_background_content .bg-pattern { background: url(../images/pattern.png); background-repeat: repeat; opacity: .5; } .grcs_youtube_controls { position: fixed; bottom: 0; left: 0; z-index: 90; } .grcs_youtube_controls .volume-button, .grcs_youtube_controls .pause-button { font-size: 20px; position: absolute; z-index: 101; bottom: -50px; width: 20px; cursor: pointer; color: #fff; -webkit-transition: 200ms ease; transition: 200ms ease; } .grcs_youtube_controls.show .volume-button, .grcs_youtube_controls.show .pause-button { bottom: 22px; -webkit-transition: 800ms ease; transition: 800ms ease; } .grcs_youtube_controls .volume-button { left: 66px; } .grcs_youtube_controls .pause-button { left: 26px; } /** 5. ERROR-404 *******************************************************************/ .error-404 .front-content h1 { font-family: 'Raleway', sans-serif; font-size: 80px; font-weight: 600; margin: 0 auto; text-align: center; color: #fff; } .error-404 .front-content h1 span { font-family: 'Open Sans', sans-serif; line-height: 140px; position: relative; padding: 0 20px; color: #fff; margin-right: 6px; } .error-404 .front-content h1 span:before { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: .3s ease; transition: .3s ease; background: #1fb8b2; } .error-404 .front-content p { font-family: 'Raleway', sans-serif; font-size: 17px; font-weight: 400; line-height: 36px; display: block; margin: 22px 0 38px; padding: 0; letter-spacing: 2px; color: #fff; } .error-404 .front-content a { font-family: 'Raleway', sans-serif; font-size: 16px; font-weight: 400; line-height: 36px; display: inline-block; overflow: hidden; margin: 0; padding: 9px 30px; -webkit-transition: .1s ease; transition: .1s ease; letter-spacing: 2px; color: #fff; border: 3px solid #fff; } @media only screen and (max-width: 768px), only screen and (max-height: 630px) { .error-404 .front-content h1 { font-size: 60px; margin-bottom: 40px; } .error-404 .front-content h1 span { font-size: 70px; line-height: 120px; padding: 0 14px; } .error-404 .front-content p { font-size: 16px; line-height: 20px; } } @media only screen and (max-width: 600px), only screen and (max-height: 500px) { .error-404 .front-content h1 { font-size: 45px; margin-bottom: 32px; } .error-404 .front-content h1 span { font-size: 55px; line-height: 100px; padding: 0 14px; } .error-404 .front-content p { font-size: 12px; } } @media only screen and (max-width: 480px), only screen and (max-height: 410px) { .error-404 .front-content h1 { font-size: 40px; margin-bottom: 25px; } .error-404 .front-content h1 span { font-size: 38px; line-height: 70px; padding: 0 10px; } .error-404 .front-content p { font-size: 11px; font-weight: 300; line-height: 20px; letter-spacing: 2px; } .error-404 .front-content a { font-size: 14px; font-weight: 400; line-height: 30px; padding: 7px 24px; letter-spacing: 2px; border: 2px solid #fff; } } @media only screen and (max-width: 400px), only screen and (max-height: 310px) { .error-404 .front-content h1 { font-size: 35px; margin-bottom: 23px; } .error-404 .front-content h1 span { font-size: 34px; line-height: 60px; padding: 0 6px; } .error-404 .front-content p { font-size: 10px; } } @media only screen and (max-width: 355px) ,only screen and (max-height: 280px) { .error-404 .front-content h1 { font-size: 30px; margin-bottom: 20px; } .error-404 .front-content p { font-size: 10px; } }