/****************************************************************** @ Item Gravity // Coming Soon - Under Construction @ Version 3.6 @ Author Avanzare @ Website http://themeforest.net/user/avanzare ******************************************************************/ /****************************************************************** ------------------------ -- TABLE OF CONTENTS -- ------------------------ -- 1. Typography -- 2. Loading -- 3. Content -- 4. Overlay -- 5. Overlay-Content-About -- 6. Overlay-Content-Contact -- 7. Overlay Skins -- 8. Media Queries ******************************************************************/ /** 1. TYPOGRAPHY *******************************************************************/ html, body { width: 100%; height: 100% !important; } body { font-weight: 300; font-style: normal; overflow: hidden; color: #fff; background: #111; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { font-family: 'Raleway', sans-serif; font-weight: normal; line-height: auto; color: #fff; } h1 { font-size: 45px; } h2 { font-size: 35px; } h3 { font-size: 30px; } h4 { font-size: 24px; } h5 { font-size: 18px; } h6 { font-size: 16px; } p { font-family: 'Open Sans', sans-serif; font-size: 14px; } a, a:hover, a:focus { cursor: pointer; -webkit-transition: all 300ms ease; transition: all 300ms ease; text-decoration: none; } /** 2. LOADING *****************************************************************/ #page-loader { position: fixed; z-index: 99999; bottom: 0; left: 0; width: 100%; height: 100%; background: #111; } #page-loader.hide-this { bottom: 100%; -webkit-transition: all 800ms cubic-bezier(.540, .086, .000, .980) .2s; transition: all 800ms cubic-bezier(.540, .086, .000, .980) .2s; } #page-loader .spinner-container { position: absolute; z-index: 200; left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } #page-loader .spinner-container .css-spinner { display: block; width: 36px; height: 36px; -webkit-transition: all .4s cubic-bezier(.19, 1, .22, 1); transition: all .4s cubic-bezier(.19, 1, .22, 1); -webkit-animation: spinner 400ms linear infinite; animation: spinner 400ms linear infinite; opacity: 1; border: solid 2px transparent; border-top-color: #1fb8b2; border-left-color: #1fb8b2; border-radius: 100%; } #page-loader.hide-this .spinner-container .css-spinner { 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%; } #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; width: 100%; height: auto; max-height: 100%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .hero .container-mid { overflow: auto; padding: 60px 30px; } .tooltip.bottom { margin-top: 6px; } .tooltip.bottom .tooltip-arrow { border-bottom-color: rgba(255,255,255,.06); } .tooltip.bottom .tooltip-inner { font-family: 'Raleway', sans-serif; font-size: 11px; padding: 4px 8px; letter-spacing: .4px; color: #fff; border-radius: 0; background: rgba(255,255,255,.06); } .fhp-input { display: none !important; opacity: 0 !important; pointer-events: none !important; } .container-mid.block-overflow, .movement-in-progress .container-mid { overflow: hidden; } /** 4. OVERLAY *****************************************************************/ #overlay { position: absolute; z-index: -2; top: 0; overflow: hidden; width: 100%; height: 100%; -webkit-transition: all 800ms ease; transition: all 800ms ease; pointer-events: none; background: rgba(0, 0, 0, .8); } #overlay.open { pointer-events: auto; z-index: 40; } #overlay.fade-In { opacity: 0; } #overlay.open.fade-In { opacity: 1; } #overlay.slide-from-top { bottom: 100%; } #overlay.open.slide-from-top { bottom: 0; } #overlay.slide-from-bottom { top: 100%; } #overlay.open.slide-from-bottom { top: 0; } #overlay.slide-from-left { right: 100%; } #overlay.open.slide-from-left { right: 0; } #overlay.slide-from-right { left: 100%; } #overlay.open.slide-from-right { left: 0; } .overlay { position: absolute; z-index: 1; overflow: auto; width: 100%; height: 100%; -webkit-transition: all 800ms ease; transition: all 800ms ease; pointer-events: none; } .overlay.active { pointer-events: auto; } .overlay.fade-In { opacity: 0; } .overlay.slide-from-top { bottom: 100%; } .overlay.slide-from-bottom { top: 100%; } .overlay.slide-from-left { right: 100%; } .overlay.slide-from-right { left: 100%; } #overlay.open .overlay.active.fade-In { opacity: 1; } #overlay.open .overlay.active.slide-from-top { bottom: 0; } #overlay.open .overlay.active.slide-from-bottom { top: 0; } #overlay.open .overlay.active.slide-from-left { right: 0; } #overlay.open .overlay.active.slide-from-right { left: 0; } .up-button { position: absolute; z-index: 120; top: 0; left: 50%; overflow: hidden; width: 70px; height: 0; cursor: pointer; -webkit-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: rgba(255,255,255,1.00); } .up-button.active { height: 70px; } .up-button i { font-size: 16px; font-weight: normal; line-height: 70px; position: absolute; width: inherit; height: inherit; -webkit-transition: none; transition: none; text-align: center; color: #000; } .up-button:hover i { -webkit-transition: all 200ms cubic-bezier(1, 0, 0, 1); transition: all 200ms cubic-bezier(1, 0, 0, 1); } .up-button i:first-child { -webkit-transform: translateY(200%); transform: translateY(200%); } .up-button:hover i:first-child { -webkit-transform: translateY(0%); transform: translateY(0%); } .up-button i:last-child { -webkit-transform: translateY(0%); transform: translateY(0%); } .up-button:hover i:last-child { -webkit-transform: translateY(-200%); transform: translateY(-200%); } .grcs_bullet_nav { position: fixed; right: -200px; top: 50%; z-index: 150; -webkit-transition: all 1s ease; transition: all 1s ease; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .grcs_bullet_nav.init { right: 34px; } .grcs_bullet_nav .nav_dots { width: 18px; height: 18px; border: 2px solid #fff; display: block; cursor: pointer; margin: 16px 0; border-radius: 100%; position: relative; } .grcs_bullet_nav .nav_dots.active:before { content: ""; background: #fff; width: 50%; height: 50%; position: absolute; left: 50%; margin: 0; padding: 0; top: 50%; border-radius: 100%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } body.is-mobile.merge-true #overlay.open { overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } body.is-mobile.merge-true .overlay { position: relative; z-index: 1; width: 100vw; height: auto; min-height: 100vh; pointer-events: auto; top: 0 !important; left: 0 !important; bottom: 0 !important; right: 0 !important; } body.is-mobile.merge-true .overlay .content { display: flex; align-items: center; min-height: 100vh; } body.is-mobile.merge-true .overlay .container-mid { position: relative; top: 0; height: auto; -webkit-transform: translateY(0%); transform: translateY(0%); } @media screen and (max-width: 740px) { .grcs_bullet_nav.init { right: 14px; } } @media screen and (max-width: 540px) { .grcs_bullet_nav { display: none; } } /** 5. OVERLAY-CONTENT-ABOUT *****************************************************************/ #about h1 { font-family: 'Raleway', sans-serif; font-size: 41px; font-weight: 400; margin-top: 0; margin-bottom: 30px; letter-spacing: 1px; text-transform: uppercase; color: #fff; } #about p { font-size: 13px; max-width: 610px; line-height: 1.5em; letter-spacing: 0.01em; margin: 0 auto 38px auto; text-align: justify; color: #ccc; } .subscribe-form { display: block; max-width: 470px; margin: 0 auto 34px auto; background: rgba(255, 255, 255, .0); } .subscribe-form.success .input-group { cursor: not-allowed; } .subscribe-form input { font-family: 'Raleway', sans-serif; font-size: 11px !important; font-weight: 300; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; letter-spacing: 1px; color: #d6d6d6; border: none; border: 1px solid #d6d6d6; border-right: none !important; border-radius: 0 !important; background: rgba(255,255,255,0); box-shadow: none; } .subscribe-form.error input { border-color: rgba(251, 9, 9, 1) !important; } .subscribe-form.success input { border-color: rgba(95, 234, 110, 1)!important; background: rgba(255,255,255,.00) !important; } .subscribe-form input::-webkit-input-placeholder { color: #d6d6d6; } .subscribe-form input::-moz-placeholder { color: #d6d6d6; } .subscribe-form input:focus, .subscribe-form input:active { color: #ccc; border-color: #d6d6d6; outline: none; background: rgba(255,255,255,.04); box-shadow: none; } .subscribe-form button { font-family: 'Raleway', sans-serif; font-size: 12px !important; font-weight: 300; overflow: hidden; margin-left: 0 !important; padding: 0 40px !important; -webkit-transition: all .3s ease 0s; transition: all .3s ease 0s; text-align: center; letter-spacing: 2px; text-transform: uppercase; color: #000; border: 0; border: 1px solid #d6d6d6; border-radius: 0 !important; background: rgba(255,255,255,1); box-shadow: none; } .subscribe-form.success button { cursor: not-allowed; border-color: rgba(95, 234, 110, 1) !important; background: rgba(95, 234, 110, 1) !important; } .subscribe-form.error button { border-color: rgba(251, 9, 9, 1) !important; background: rgba(251, 9, 9, 1) !important; } .subscribe-form button:hover, .subscribe-form button:focus, .subscribe-form button:active { color: #000; border-color: #d6d6d6; outline: none !important; background: rgba(255,255,255,.00); } .subscribe-form button:hover { background: rgba(255,255,255,.00) !important; } .subscribe-form button:focus, .subscribe-form button:active { background: rgba(255,255,255,1); } .subscribe-form .btn-primary[disabled] { opacity: 1; color: #fff; border: 1px solid #fff ; outline: none ; background: rgba(255,255,255,1); } .subscribe-form.error button:hover, .subscribe-form.error button:focus, .subscribe-form.error button:active { border-color: rgba(251, 9, 9, 1); } .subscribe-form button::before { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; background: rgba(255,255,255,1); } .subscribe-form.success button::before { background: rgba(95, 234, 110, 1) !important; } .subscribe-form.error button::before { background: rgba(251, 9, 9, 1) !important; } .subscribe-form.succes button::before { background: rgba(255,255,255,1); } .subscribe-form button:hover::before { right: 0; left: auto; width: 0; } .subscribe-form.success button:hover::before { right: auto !important; left: 0 !important; width: 100% !important; } .subscribe-form button i { font-weight: normal; position: absolute; top: 50%; left: 0; width: 100%; height: auto; -webkit-transition: none; transition: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .subscribe-form button:hover i { -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; } .subscribe-form button i.first { left: -200%; color: #fff; } .subscribe-form button i.second { left: 0; } .subscribe-form button:hover i.first { left: 0; } .subscribe-form button:hover i.second { left: 200%; } .subscribe-form.error button i.second:before { content: "\e646"; color: #fff; } .subscribe-form.error-final button i.second:before { content: "\e628"; } .subscribe-form.success button i.second:before { content: "\e628"; color: #fff; } .subscribe-form.success button:hover i.first { left: -200%; } .subscribe-form.success button:hover i.second { left: 0; } #about .social-icons { margin: 10px 0 0 0; padding: 0; list-style: none; text-align: center; } #about .social-icons li { display: inline-block; margin: 0 15px; } #about .social-icons li a { font-size: 12px; line-height: 40px; position: relative; display: block; overflow: hidden; width: 40px; height: 40px; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; color: #000; border-radius: 0; background: rgba(255,255,255,.06); } #about .social-icons li a .overlay { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; background: rgba(255,255,255,1); } #about .social-icons li a:hover .overlay { right: 0; left: auto; width: 0; } #about .social-icons li a:hover { color: #fff; background: rgba(255,255,255,.06); } /** 6. OVERLAY-CONTENT-CONTACT *****************************************************************/ #contact h1 { font-family: 'Raleway', sans-serif; font-size: 41px; font-weight: 400; margin-bottom: 28px; text-align: center; letter-spacing: 1px; text-transform: uppercase; color: #fff; } #contact p { font-size: 13px; max-width: 355px; margin: 0 auto; margin-bottom: 30px; padding: 0 20px; text-align: justify; color: #d6d6d6; line-height: 1.5em; letter-spacing: 0.01em; } #contact-form { font-size: 18px; margin-top: 20px; text-align: center; } #contact-form { font-size: 18px; margin-top: 20px; text-align: center; } #contact-form .control-group { max-width: 346px; margin-right: auto; margin-left: auto; } #contact-form label { font-family: 'Raleway', sans-serif; font-size: 14px; font-weight: normal; width: 100%; margin-bottom: 10px; text-align: left; text-transform: uppercase; color: #b1b1b1; } #contact-form input, #contact-form textarea { font-family: 'Raleway', sans-serif; font-size: 11px; font-weight: 300; overflow: hidden; width: 100%; height: 50px; margin-bottom: 24px; padding-left: 10px; -webkit-transition: all .2s ease; transition: all .2s ease; letter-spacing: 1px; color: #d6d6d6; border: none; border: 1px solid #d6d6d6 !important; border-radius: 0; outline: none; background: rgba(255,255,255,0); box-shadow: none; } #contact-form input::-webkit-input-placeholder, #contact-form textarea::-webkit-input-placeholder { color: #d6d6d6; } #contact-form input::-moz-placeholder, #contact-form textarea::-moz-placeholder { color: #d6d6d6; } #contact-form.error input.active, #contact-form.error textarea.active { border-color: rgba(251, 9, 9, 1) !important; } #contact-form.success input, #contact-form.success textarea { background: rgba(255,255,255,0) !important; } #contact-form textarea { height: 110px; padding-top: 10px; resize: none !important; } #contact-form input:focus, #contact-form input:active { border: 1px solid #d6d6d6; outline: none; background: rgba(255,255,255,.04); } #contact-form textarea:focus, #contact-form textarea:active { border: 1px solid #fff; outline: none; background: rgba(255,255,255,.04); } #contact-form button { font-family: 'Raleway', sans-serif; font-size: 12px; font-weight: 400; line-height: 50px; position: relative; display: block; overflow: hidden; width: 144px; height: 50px; margin: 38px auto 0 auto; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; text-align: center; letter-spacing: 1px; text-transform: uppercase; color: #000; border: 1px solid #d6d6d6; border-radius: 0; background: rgba(255,255,255,1); } #contact-form.success button { border-color: rgba(95, 234, 110, 1) !important; background: rgba(95, 234, 110, 1) !important; } #contact-form.error button { border-color: rgba(251, 9, 9, 1) !important; background: rgba(251, 9, 9, 1) !important; } #contact-form button:hover, #contact-form button:focus, #contact-form button:active { color: #000; border-color: #d6d6d6; outline: none !important; background: rgba(255,255,255,.00); box-shadow: none; } #contact-form button:hover { background: rgba(255,255,255,.00) !important; } #contact-form button:focus, #contact-form button:active { background: rgba(255,255,255,1); } #contact-form .btn-primary[disabled] { opacity: 1; color: #fff; border: 1px solid #fff; outline: none; background: rgba(255,255,255,1); } #contact-form.error button:hover, #contact-form.error button:focus, #contact-form.error button:active { border-color: rgba(251, 9, 9, 1); } #contact-form.error button:focus { background: rgba(251, 9, 9, 1); } #contact-form.success button:hover, #contact-form.success button:focus, #contact-form.success button:active { border-color: rgba(95, 234, 110, 1); } #contact-form.success button:hover, #contact-form.success button:focus { background: rgba(95, 234, 110, 1) !important; } #contact-form button::before { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; background: rgba(255,255,255,1); } #contact-form.success button::before { background: rgba(95, 234, 110, 1) !important; } #contact-form.error button::before { background: rgba(251, 9, 9, 1) !important; } #contact-form.success button::before { background: rgba(255,255,255,1); } #contact-form button:hover::before { right: 0; left: auto; width: 0; } #contact-form.success button:hover::before { right: 0; left: 0; width: 100%; } #contact-form button i { position: absolute; top: 50%; left: 0; width: 100%; height: auto; -webkit-transition: none; transition: none; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } #contact-form button:hover i { -webkit-transition: all .2s ease 0s; transition: all .2s ease 0s; } #contact-form button i.first { left: -200%; color: #fff; } #contact-form button i.second { left: 0; } #contact-form button:hover i.first { left: 0; } #contact-form button:hover i.second { left: 200%; } #contact-form.error button i.second:before { content: '\e646'; color: #fff; } #contact-form.success button i.second:before { content: '\e64c'; color: #fff; } #contact-form.success button:hover i.first { left: -200%; } #contact-form.success button:hover i.second { left: 0; } /** 7. OVERLAY SKINS *****************************************************************/ .white .tooltip.bottom .tooltip-arrow { border-bottom-color: rgba(0,0,0,.02); } .white .tooltip.bottom .tooltip-inner { color: #000; background: rgba(0,0,0,.02); } .white .grcs_bullet_nav .nav_dots { border-color: #ccc !important; } .white .grcs_bullet_nav .nav_dots.active:before { background: #ccc !important; } .white #overlay { background: rgba(245, 245, 245, .92); } .white .up-button { background: rgba(0,0,0,1.00); } .white .up-button i { color: #fff; } .white #about h1 { color: #000; } .white #about p { color: #2c2b2b; } .white .subscribe-form input { color: #2c2b2b; border: 1px solid #2c2b2b; background: rgba(0,0,0,0); } .white .subscribe-form input::-webkit-input-placeholder { color: #2c2b2b; } .white .subscribe-form input::-moz-placeholder { color: #2c2b2b; } .white .subscribe-form input:focus, .white .subscribe-form input:active { color: #2c2b2b; border-color: #2c2b2b; outline: none; background: rgba(0,0,0,.02); box-shadow: none; } .white .subscribe-form button { color: #fff; border: 1px solid #2c2b2b; background: rgba(0,0,0,1); } .white .subscribe-form button:hover, .white .subscribe-form button:focus, .white .subscribe-form button:active { color: #fff; border-color: #333; outline: none !important; background: rgba(0,0,0,.00); } .white .subscribe-form button:hover { background: rgba(0,0,0,.00) !important; } .white .subscribe-form button:focus, .white .subscribe-form button:active { background: rgba(0,0,0,1); } .white .subscribe-form .btn-primary[disabled] { color: #000; border: 1px solid #000; background: rgba(0,0,0,1); } .white .subscribe-form button::before { background: rgba(0,0,0,1); } .white .subscribe-form button i.first { color: #000; } .white .subscribe-form.error button i.second:before { color: #000; } .white .subscribe-form.success button i.second:before { color: #000; } .white #about .social-icons li a { color: #fff; background: rgba(0,0,0,.02); } .white #about .social-icons li a .overlay { background: rgba(0,0,0,1); } .white #about .social-icons li a:hover { color: #000; background: rgba(0,0,0,.02); } .white #contact h1 { color: #000; } .white #contact p { color: #2c2b2b; } .white #contact-form label { color: #414141; } .white #contact-form input, .white #contact-form textarea { color: #2c2b2b; border: 1px solid #2c2b2b !important; background: rgba(0,0,0,0); } .white #contact-form input::-webkit-input-placeholder, .white #contact-form textarea::-webkit-input-placeholder { color: #2c2b2b; } .white #contact-form input::-moz-placeholder, .white #contact-form textarea::-moz-placeholder { color: #2c2b2b; } .white #contact-form.success input, .white #contact-form.success textarea { background: rgba(0,0,0,0) !important; } .white #contact-form input:focus, .white #contact-form input:active { border: 1px solid #2c2b2b; background: rgba(0,0,0,.02); } .white #contact-form textarea:focus, .white #contact-form textarea:active { border: 1px solid #000; background: rgba(0,0,0,.02); } .white #contact-form button { color: #fff; border: 1px solid #2c2b2b; background: rgba(0,0,0,1); } .white #contact-form button:hover, .white #contact-form button:focus, .white #contact-form button:active { color: #fff; border-color: #2c2b2b; background: rgba(0,0,0,.00); } .white #contact-form button:hover { background: rgba(0,0,0,.00) !important; } .white #contact-form button:focus, .white #contact-form button:active { background: rgba(0,0,0,1); } .white #contact-form .btn-primary[disabled] { color: #000; border: 1px solid #000; background: rgba(0,0,0,1); } .white #contact-form button .overlay { background: rgba(0,0,0,1); } .white #contact-form.success button::before { background: rgba(0,0,0,1); } .white #contact-form button i.first { color: #000; } .white #contact-form.error button i.second:before { color: #000; } .white #contact-form.success button i.second:before { color: #000; } /** 8. MEDIA QUERIES *****************************************************************/ @media screen and (max-width: 1400px), screen and (max-height: 720px) { .tooltip.bottom .tooltip-inner { font-size: 10px; } .up-button { width: 60px; } .up-button.active { height: 60px; } .up-button i { font-size: 14px; line-height: 60px; } #overlay .container-mid .container { padding: 40px 40px; } #about h1 { font-size: 31px; margin-bottom: 20px; letter-spacing: 1px; } #about p { font-size: 10px; max-width: 460px; margin: 0 auto 28px auto; } .subscribe-form { max-width: 390px; margin: 0 auto 27px auto; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: 37px; } #about .social-icons li { display: inline-block; margin: 0 10px; } #about .social-icons li a { font-size: 9px; line-height: 30px; width: 31px; height: 31px; } .subscribe-form button { font-size: 9px !important; padding: 0 34px !important; } .subscribe-form input { font-size: 9px !important; } #contact h1 { font-size: 31px; margin-bottom: 16px; } #contact p { font-size: 10px; max-width: 280px; margin-bottom: 0; padding: 0 20px; } #contact-form { margin-top: 14px; } #contact-form .control-group { max-width: 280px; } #contact-form label { font-size: 12px; margin-bottom: 8px; } #contact-form input, #contact-form textarea { font-size: 9px; height: 40px; margin-bottom: 14px; } #contact-form textarea { height: 90px; } #contact-form button { font-size: 9px; line-height: 40px; width: 104px; height: 40px; margin: 24px auto 0 auto; } } @media screen and (max-width: 420px), screen and (max-height: 720px) { .spinner { width: 100px; } .tooltip.bottom .tooltip-inner { font-size: 8px; } #overlay .container-mid .container { padding: 55px 40px; } .up-button { width: 50px; } .up-button.active { height: 50px; } .up-button i { font-size: 11px; line-height: 50px; } #about h1 { font-size: 30px; } .subscribe-form input { font-size: 7px !important; } #about .social-icons li { margin: 0 14px; } #contact h1 { font-size: 30px; margin-bottom: 16px; } #contact p { font-size: 10px; max-width: 280px; margin-bottom: 0; padding: 0 20px; } #contact-form { margin-top: 14px; } #contact-form .control-group { max-width: 280px; } #contact-form label { font-size: 12px; margin-bottom: 8px; } #contact-form input, #contact-form textarea { font-size: 9px; height: 40px; margin-bottom: 14px; } #contact-form textarea { height: 90px; } #contact-form button { font-size: 9px; line-height: 40px; width: 104px; height: 40px; margin: 24px auto 0 auto; } } @media screen and (max-width: 329px) { #about .social-icons li { margin: 0 10px; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { padding: 10px 12px; } } @media screen and (max-width: 318px) { #about .social-icons li { margin: 0 8px; } .subscribe-form .input-group { display: block; } .subscribe-form input { display: block; text-align: center; border-right: 1px solid #d6d6d6 !important; } } @media screen and (min-width: 3000px) { .stop-button, .volume-button { font-size: 32px; position: fixed; z-index: 101; bottom: 40px; cursor: pointer; color: #fff; } .stop-button { left: 110px; } .volume-button { left: 40px; } .spinner { width: 240px; } .up-button { width: 100px; } .up-button.active { height: 100px; } .up-button i { font-size: 20px; line-height: 100px; } #overlay .container-mid .container { padding: 120px 40px; } #about h1 { font-size: 51px; margin-bottom: 40px; letter-spacing: 3px; } #about p { font-size: 17px; max-width: 790px; margin: 0 auto 50px auto; } .subscribe-form { max-width: 630px; margin: 0 auto 44px auto; } .input-group-lg > .form-control, .input-group-lg > .input-group-addon, .input-group-lg > .input-group-btn > .btn { height: 56px; } #about .social-icons li { display: inline-block; margin: 0 20px; } #about .social-icons li a { font-size: 14px; line-height: 46px; width: 46px; height: 46px; } .subscribe-form button { font-size: 13px !important; padding: 0 50px !important; } .subscribe-form input { font-size: 13px !important; } #contact h1 { font-size: 51px; margin-bottom: 38px; } #contact p { font-size: 17px; max-width: 450px; margin-bottom: 0; padding: 0 20px; } #contact-form { margin-top: 40px; } #contact-form .control-group { max-width: 470px; } #contact-form label { font-size: 18px; margin-bottom: 14px; } #contact-form input, #contact-form textarea { font-size: 13px; height: 64px; margin-bottom: 35px; padding: 12px 12px; } #contact-form textarea { height: 180px; } #contact-form button { font-size: 15px; line-height: 64px; width: 190px; height: 64px; margin: 50px auto 0 auto; } }