/****************************************************************** @ Item Gravity // Coming Soon WordPress @ Author Avanzare @ Website http://themeforest.net/user/avanzare ******************************************************************/ /****************************************************************** ------------------------ -- TABLE OF CONTENTS -- ------------------------ -- 1. VC STRUCTURE > HERO CONTAINER + ANIMATION CONTAINER -- 2. VC STRUCTURE > OVERLAY CONTAINER + OVERLAY SECTION -- 3. VC ELEMENT > TEXT SLIDER -- 4. VC ELEMENT > BUTTON ( OPEN OVERLAY ) -- 5. VC ELEMENT > SUBSCRIBE FORM -- 6. VC ELEMENT > SOCIAL ICONS -- 7. VC ELEMENT > CONTACT FORM ******************************************************************/ /** 1. VC STRUCTURE > HERO CONTAINER + ANIMATION CONTAINER *****************************************************************/ .grcs_hero_container { position: relative; z-index: 1; overflow: hidden; width: 100vw; height: 100vh; } .grcs_hero_container .front-content { position: absolute; top: 0; z-index: 5; overflow: hidden; width: 100%; height: 100%; transition: all 600ms ease; } .grcs_hero_container .front-content.overlay-active { top: 50%; height: 0; } .grcs_hero_container .front-content .container-mid { text-align: center; -webkit-perspective: 1000px; perspective: 1000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .grcs_hero_container .front-content .controls { position: fixed; bottom: 0; left: 0; transition: 200ms ease; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); } .grcs_hero_container .front-content .controls.show { transition: 800ms ease; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } .grcs_hero_container .front-content .controls .volume-button, .grcs_hero_container .front-content .controls .pause-button { position: absolute; bottom: 20px; z-index: 101; width: 20px; color: #fff; font-size: 20px; cursor: pointer; } .grcs_hero_container .front-content .controls .volume-button { left: 66px; } .grcs_hero_container .front-content .controls .pause-button { left: 26px; } .grcs_hero_container .front-content .enter-animation { transition: all 1s; } /** Fade **/ .grcs_hero_container .front-content .enter-animation[data-animation="fadeIn"].ivis { opacity: 0 !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeIn"] { opacity: 1 !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInUp"].ivis { opacity: 0 !important; -webkit-transform: translateY(14vh) !important; -ms-transform: translateY(14vh) !important; transform: translateY(14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInUp"] { opacity: 1 !important; -webkit-transform: translateY(0vh) !important; -ms-transform: translateY(0vh) !important; transform: translateY(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInDown"].ivis { opacity: 0 !important; -webkit-transform: translateY(-14vh) !important; -ms-transform: translateY(-14vh) !important; transform: translateY(-14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInDown"] { opacity: 1 !important; -webkit-transform: translateY(0vh) !important; -ms-transform: translateY(0vh) !important; transform: translateY(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInRight"].ivis { opacity: 0 !important; -webkit-transform: translateX(-14vh) !important; -ms-transform: translateX(-14vh) !important; transform: translateX(-14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInRight"] { opacity: 1 !important; -webkit-transform: translateX(0vh) !important; -ms-transform: translateX(0vh) !important; transform: translateX(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInLeft"].ivis { opacity: 0 !important; -webkit-transform: translateX(14vh) !important; -ms-transform: translateX(14vh) !important; transform: translateX(14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInLeft"] { opacity: 1 !important; -webkit-transform: translateX(0vh) !important; -ms-transform: translateX(0vh) !important; transform: translateX(0vh) !important; } /** Zoom **/ .grcs_hero_container .front-content .enter-animation[data-animation="zoomIn"].ivis { opacity: 0 !important; -webkit-transform: scale3d(.3,.3,.3) !important; -ms-transform: scale3d(.3,.3,.3) !important; transform: scale3d(.3,.3,.3) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomIn"] { opacity: 1 !important; -webkit-transform: scale3d(1,1,1) !important; -ms-transform: scale3d(1,1,1) !important; transform: scale3d(1,1,1) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInUp"].ivis { opacity: 0 !important; -webkit-transform: scale3d(.3,.3,.3) translateY(14vh) !important; -ms-transform: scale3d(.3,.3,.3) translateY(14vh) !important; transform: scale3d(.3,.3,.3) translateY(14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInUp"] { opacity: 1 !important; -webkit-transform: scale3d(1,1,1) translateY(0vh) !important; -ms-transform: scale3d(1,1,1) translateY(0vh) !important; transform: scale3d(1,1,1) translateY(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInDown"].ivis { opacity: 0 !important; -webkit-transform: scale3d(.3,.3,.3) translateY(-14vh) !important; -ms-transform: scale3d(.3,.3,.3) translateY(-14vh) !important; transform: scale3d(.3,.3,.3) translateY(-14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInDown"] { opacity: 1 !important; -webkit-transform: scale3d(1,1,1) translateY(0vh) !important; -ms-transform: scale3d(1,1,1) translateY(0vh) !important; transform: scale3d(1,1,1) translateY(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInRight"].ivis { opacity: 0 !important; -webkit-transform: scale3d(.3,.3,.3) translateX(-14vh) !important; -ms-transform: scale3d(.3,.3,.3) translateX(-14vh) !important; transform: scale3d(.3,.3,.3) translateX(-14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInRight"] { opacity: 1 !important; -webkit-transform: scale3d(1,1,1) translateX(0vh) !important; -ms-transform: scale3d(1,1,1) translateX(0vh) !important; transform: scale3d(1,1,1) translateX(0vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInLeft"].ivis { opacity: 0 !important; -webkit-transform: scale3d(.3,.3,.3) translateX(14vh) !important; -ms-transform: scale3d(.3,.3,.3) translateX(14vh) !important; transform: scale3d(.3,.3,.3) translateX(14vh) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInLeft"] { opacity: 1 !important; -webkit-transform: scale3d(1,1,1) translateX(0vh) !important; -ms-transform: scale3d(1,1,1) translateX(0vh) !important; transform: scale3d(1,1,1) translateX(0vh) !important; } /* FOR IE 10+ */ @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .grcs_hero_container .front-content .enter-animation[data-animation="fadeInUp"].ivis { -webkit-transform: translateY(120px) !important; -ms-transform: translateY(120px) !important; transform: translateY(120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInUp"] { -webkit-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; transform: translateY(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInDown"].ivis { -webkit-transform: translateY(-120px) !important; -ms-transform: translateY(-120px) !important; transform: translateY(-120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInDown"] { -webkit-transform: translateY(0px) !important; -ms-transform: translateY(0px) !important; transform: translateY(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInRight"].ivis { -webkit-transform: translateX(-120px) !important; -ms-transform: translateX(-120px) !important; transform: translateX(-120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInRight"] { -webkit-transform: translateX(0px) !important; -ms-transform: translateX(0px) !important; transform: translateX(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInLeft"].ivis { -webkit-transform: translateX(120px) !important; -ms-transform: translateX(120px) !important; transform: translateX(120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="fadeInLeft"] { -webkit-transform: translateX(0px) !important; -ms-transform: translateX(0px) !important; transform: translateX(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomIn"].ivis { -webkit-transform: scale3d(.3,.3,.3) !important; -ms-transform: scale3d(.3,.3,.3) !important; transform: scale3d(.3,.3,.3) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomIn"] { -webkit-transform: scale3d(1,1,1) !important; -ms-transform: scale3d(1,1,1) !important; transform: scale3d(1,1,1) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInUp"].ivis { -webkit-transform: scale3d(.3,.3,.3) translateY(120px) !important; -ms-transform: scale3d(.3,.3,.3) translateY(120px) !important; transform: scale3d(.3,.3,.3) translateY(120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInUp"] { -webkit-transform: scale3d(1,1,1) translateY(0px) !important; -ms-transform: scale3d(1,1,1) translateY(0px) !important; transform: scale3d(1,1,1) translateY(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInDown"].ivis { -webkit-transform: scale3d(.3,.3,.3) translateY(-120px) !important; -ms-transform: scale3d(.3,.3,.3) translateY(-120px) !important; transform: scale3d(.3,.3,.3) translateY(-120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInDown"] { -webkit-transform: scale3d(1,1,1) translateY(0px) !important; -ms-transform: scale3d(1,1,1) translateY(0px) !important; transform: scale3d(1,1,1) translateY(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInRight"].ivis { -webkit-transform: scale3d(.3,.3,.3) translateX(-120px) !important; -ms-transform: scale3d(.3,.3,.3) translateX(-120px) !important; transform: scale3d(.3,.3,.3) translateX(-120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInRight"] { -webkit-transform: scale3d(1,1,1) translateX(0px) !important; -ms-transform: scale3d(1,1,1) translateX(0px) !important; transform: scale3d(1,1,1) translateX(0px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInLeft"].ivis { -webkit-transform: scale3d(.3,.3,.3) translateX(120px) !important; -ms-transform: scale3d(.3,.3,.3) translateX(120px) !important; transform: scale3d(.3,.3,.3) translateX(120px) !important; } .grcs_hero_container .front-content .enter-animation[data-animation="zoomInLeft"] { -webkit-transform: scale3d(1,1,1) translateX(0px) !important; -ms-transform: scale3d(1,1,1) translateX(0px) !important; transform: scale3d(1,1,1) translateX(0px) !important; } } /** 2. VC STRUCTURE > OVERLAY CONTAINER + OVERLAY SECTION *****************************************************************/ .grcs_overlay { position: fixed; z-index: -2; top: 0; overflow: hidden; width: 100vw; height: 100vh; transition: all 800ms ease; pointer-events: none; background: none; } body.is-mobile .grcs_overlay { background: rgba(10, 10, 10, .8); } .grcs_overlay:after { content: ""; position: absolute; z-index: -2; top: 0; left: 0; width: 100%; height: 100%; background: rgba(10, 10, 10, .8); } body.is-mobile .grcs_overlay:after { display: none; opacity: 0; } .grcs_overlay.open { pointer-events: auto; z-index: 40; } .grcs_overlay.overlay-fade-in { opacity: 0; } .grcs_overlay.overlay-slide-from-top { bottom: 100vh; } .grcs_overlay.overlay-slide-from-bottom { top: 100vh; } .grcs_overlay.overlay-slide-from-left { right: 100vw; } .grcs_overlay.overlay-slide-from-right { left: 100vw; } .grcs_overlay.open.overlay-fade-in { opacity: 1; } .grcs_overlay.open.overlay-slide-from-top { bottom: 0vh; } .grcs_overlay.open.overlay-slide-from-bottom { top: 0vh; } .grcs_overlay.open.overlay-slide-from-left { right: 0vw; } .grcs_overlay.open.overlay-slide-from-right { left: 0vw; } body.is-mobile .grcs_overlay.open { overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .grcs_overlay_section { position: absolute; z-index: 1; width: 100vw; height: 100vh; transition: all 800ms ease; pointer-events: none; } body.is-mobile .grcs_overlay_section { 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 .grcs_overlay_section .container-mid { position: relative; top: 0; height: auto; -webkit-transform: translateY(0%); transform: translateY(0%); } .grcs_overlay_section .container-mid:after { content: ""; display: block; padding-bottom: 50px !important; } .grcs_overlay_section.active { pointer-events: auto; } .grcs_overlay.section-fade-in .grcs_overlay_section { opacity: 0; } .grcs_overlay.section-slide-from-top .grcs_overlay_section { bottom: 100vh; } .grcs_overlay.section-slide-from-bottom .grcs_overlay_section { top: 100vh; } .grcs_overlay.section-slide-from-left .grcs_overlay_section { right: 100vw; } .grcs_overlay.section-slide-from-right .grcs_overlay_section { left: 100vw; } .grcs_overlay.open.section-fade-in .grcs_overlay_section.active { opacity: 1; } .grcs_overlay.open.section-slide-from-top .grcs_overlay_section.active { bottom: 0vh; } .grcs_overlay.open.section-slide-from-bottom .grcs_overlay_section.active { top: 0vh; } .grcs_overlay.open.section-slide-from-left .grcs_overlay_section.active { right: 0vw; } .grcs_overlay.open.section-slide-from-right .grcs_overlay_section.active { left: 0vw; } .grcs_overlay_section h1, .grcs_overlay_section h2, .grcs_overlay_section h3, .grcs_overlay_section h4, .grcs_overlay_section h5, .grcs_overlay_section h6 { color: #fff; } .grcs_overlay_section p { color: #d6d6d6; text-align: justify; } .grcs_overlay .up-button { position: absolute; z-index: 120; top: 0; left: 50%; overflow: hidden; width: 70px; height: 0; cursor: pointer; transition: all 400ms ease; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(255,255,255,1.00); } .grcs_overlay .up-button.active { height: 70px; } .grcs_overlay .up-button i { font-size: 16px; font-weight: normal; line-height: 70px; position: absolute; width: inherit; height: inherit; transition: none; text-align: center; color: #000; } .grcs_overlay .up-button:hover i { transition: all 200ms cubic-bezier(1, 0, 0, 1); } .grcs_overlay .up-button i:first-child { -webkit-transform: translateY(200%); -ms-transform: translateY(200%); transform: translateY(200%); } .grcs_overlay .up-button:hover i:first-child { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .grcs_overlay .up-button i:last-child { -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); } .grcs_overlay .up-button:hover i:last-child { -webkit-transform: translateY(-200%); -ms-transform: translateY(-200%); transform: translateY(-200%); } .grcs_bullet_nav { position: fixed; right: -200px; top: 50%; z-index: 80; transition: all .8s ease; -webkit-transform: translateY(-50%); -ms-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%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); } .grcs_bullet_nav .tooltip.left .tooltip-arrow { top: 50%; right: 0; margin-top: -10px; border-width: 10px 0 10px 10px; border-left-color: #fff; } .grcs_bullet_nav .tooltip-inner { letter-spacing: 0.02em; font-weight: 400; font-family: 'Open Sans',sans-serif; padding: 6px 14px; color: #111; font-size: 13px; text-align: center; background-color: #fff; border-radius: 4px; white-space:nowrap; max-width:none; } .grcs_bullet_nav .tooltip.in { filter: alpha(opacity=100); opacity: 1; } /* MEDIA QUERIES */ @media screen and (max-width: 1400px), screen and (max-height: 720px) { .grcs_overlay .up-button { width: 60px; } .grcs_overlay .up-button.active { height: 60px; } .grcs_overlay .up-button i { font-size: 14px; line-height: 60px; } .grcs_overlay_section .container-mid { padding: 40px 40px; } } @media screen and (max-width: 830px) { .grcs_bullet_nav { display: none; pointer-events: none; opacity: 0; } } @media screen and (max-width: 420px), screen and (max-height: 720px) { .grcs_overlay_section .container-mid { padding: 55px 40px; } .grcs_overlay .up-button { width: 50px; } .grcs_overlay .up-button.active { height: 50px; } .grcs_overlay .up-button i { font-size: 11px; line-height: 50px; } } /** 3. VC ELEMENT > TEXT SLIDER *****************************************************************/ .grcs_text_slider { overflow: hidden !important; } .grcs_text_slider .slide { margin: 0 auto; width: 100%; text-align: center; } .grcs_text_slider.co-center .slide { text-align: center; } .grcs_text_slider.co-left .slide { text-align: left; } .grcs_text_slider.co-right .slide { text-align: right; } .grcs_text_slider .slide h1 { color: #fff; font-weight: 600; font-size: 80px; display: inline-block; font-family: 'Open Sans', sans-serif; } .grcs_text_slider.te-center .slide h1 { text-align: center; } .grcs_text_slider.te-left .slide h1 { text-align: left; } .grcs_text_slider.te-right .slide h1 { text-align: right; } /* MEDIA QUERIES */ @media only screen and (max-width: 768px), only screen and (max-height: 630px) { .grcs_text_slider .slide h1 { font-size: 60px; } } @media only screen and (max-width: 600px), only screen and (max-height: 500px) { .grcs_text_slider .slide h1 { font-size: 45px; } } @media only screen and (max-width: 480px), only screen and (max-height: 410px) { .grcs_text_slider .slide h1 { font-size: 40px; } } @media only screen and (max-width: 400px), only screen and (max-height: 310px) { .grcs_text_slider .slide h1 { font-size: 35px; } } @media only screen and (max-width: 355px) ,only screen and (max-height: 280px) { .grcs_text_slider .slide h1 { font-size: 30px; } } /** 4. VC ELEMENT > BUTTON ( OPEN OVERLAY ) *****************************************************************/ .grcs_button_open_overlay { position: relative; display: block; margin: 0 auto; overflow: hidden; width: 74px; height: 74px; border: solid 4px #fff; color: #fff; text-align: center; cursor: pointer; } .grcs_button_open_overlay.al-center { margin: 0 auto; } .grcs_button_open_overlay.al-left { margin-left: 0; } .grcs_button_open_overlay.al-right { margin-right: 0; } .grcs_button_open_overlay i { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; margin: 0 auto; background: rgba(255,255,255,.0); color: inherit; font-size: 16px; line-height: 66px; cursor: inherit; text-align: center; } .grcs_button_open_overlay:hover i { transition: all 150ms cubic-bezier(1, 0, 0, 1); } .grcs_button_open_overlay i:first-child { top: -200%; } .grcs_button_open_overlay:hover i:first-child { top: 0; } .grcs_button_open_overlay i:last-child { top: 0; } .grcs_button_open_overlay:hover i:last-child { top: 200%; } /* MEDIA QUERIES */ @media only screen and (max-width: 768px), only screen and (max-height: 630px) { .grcs_button_open_overlay i { font-size: 14px; line-height: 58px; } .grcs_button_open_overlay { width: 64px; height: 64px; border: solid 3px #fff; } } @media only screen and (max-width: 600px), only screen and (max-height: 500px) { .grcs_button_open_overlay i { font-size: 13px; line-height: 46px; } .grcs_button_open_overlay { width: 50px; height: 50px; border: solid 2px #fff; } } @media only screen and (max-width: 480px), only screen and (max-height: 410px) { .grcs_button_open_overlay i { font-size: 11px; line-height: 38px; } .grcs_button_open_overlay { width: 42px; height: 42px; } } @media only screen and (max-width: 400px), only screen and (max-height: 310px) { .grcs_button_open_overlay i { font-size: 9px; line-height: 32px; } .grcs_button_open_overlay { width: 36px; height: 36px; } } @media only screen and (max-width: 355px) ,only screen and (max-height: 280px) { .grcs_button_open_overlay i { font-size: 8px; line-height: 30px; } .grcs_button_open_overlay { width: 34px; height: 34px; } } /** 5. VC ELEMENT > SUBSCRIBE FORM *****************************************************************/ .grcs_subscribe_form { display: block; margin: 0 auto; background: rgba(255, 255, 255, .0); } .grcs_subscribe_form .form-generate-unique { display: none; opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none; } .grcs_subscribe_form.al-center { margin: 0 auto; } .grcs_subscribe_form.al-left { margin-left: 0; } .grcs_subscribe_form.al-right { margin-right: 0; } .grcs_subscribe_form .hpc { display: none; opacity: 0; pointer-events: none; } .grcs_subscribe_form input { font-family: 'Raleway', sans-serif; font-size: 11px !important; font-weight: 300; 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; } .grcs_subscribe_form.success .input-group { cursor: not-allowed; } .grcs_subscribe_form.error input { border-color: rgba(251, 9, 9, 1) !important; } .grcs_subscribe_form.success input { border-color: rgba(95, 234, 110, 1)!important; background: rgba(255,255,255,.00) !important; } .grcs_subscribe_form input::-webkit-input-placeholder { color: #d6d6d6; } .grcs_subscribe_form input::-moz-placeholder { color: #d6d6d6; } .grcs_subscribe_form input:focus, .grcs_subscribe_form input:active { color: #ccc; border-color: #d6d6d6; outline: none; background: rgba(255,255,255,.04); box-shadow: none; } .grcs_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; 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; } .grcs_subscribe_form.success button { cursor: not-allowed; border-color: rgba(95, 234, 110, 1) !important; background: rgba(95, 234, 110, 1) !important; } .grcs_subscribe_form.error button { border-color: rgba(251, 9, 9, 1) !important; background: rgba(251, 9, 9, 1) !important; } .grcs_subscribe_form button:hover, .grcs_subscribe_form button:focus, .grcs_subscribe_form button:active { color: #000; border-color: #d6d6d6; outline: none !important; background: rgba(255,255,255,.00); } .grcs_subscribe_form button:hover { background: rgba(255,255,255,.00) !important; } .grcs_subscribe_form button:focus, .grcs_subscribe_form button:active { background: rgba(255,255,255,1); } .grcs_subscribe_form .btn-primary[disabled] { opacity: 1; color: #fff; border: 1px solid #fff ; outline: none ; background: rgba(255,255,255,1); } .grcs_subscribe_form.error button:hover, .grcs_subscribe_form.error button:focus, .grcs_subscribe_form.error button:active { border-color: rgba(251, 9, 9, 1); } .grcs_subscribe_form button::before { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; content: ''; transition: all .2s ease 0s; background: rgba(255,255,255,1); } .grcs_subscribe_form.success button::before { background: rgba(95, 234, 110, 1) !important; } .grcs_subscribe_form.error button::before { background: rgba(251, 9, 9, 1) !important; } .grcs_subscribe_form.succes button::before { background: rgba(255,255,255,1); } .grcs_subscribe_form button:hover::before { right: 0; left: auto; width: 0; } .grcs_subscribe_form.success button:hover::before { right: auto !important; left: 0 !important; width: 100% !important; } .grcs_subscribe_form button i { font-weight: normal; position: absolute; top: 50%; left: 0; width: 100%; height: auto; transition: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .grcs_subscribe_form button:hover i { transition: all .2s ease 0s; } .grcs_subscribe_form button i.first { left: -200%; color: #fff; } .grcs_subscribe_form button i.second { left: 0; } .grcs_subscribe_form button:hover i.first { left: 0; } .grcs_subscribe_form button:hover i.second { left: 200%; } .grcs_subscribe_form.error button i.second:before { content: '\e646'; color: #fff; } .grcs_subscribe_form.success button i.second:before { content: '\e64c'; color: #fff; } .grcs_subscribe_form.success button:hover i.first { left: -200%; } .grcs_subscribe_form.success button:hover i.second { left: 0; } /* MEDIA QUERIES */ @media screen and (max-width: 420px), screen and (max-height: 720px) { .grcs_subscribe_form button { font-size: 9px !important; padding: 0 34px !important; } .grcs_subscribe_form input { font-size: 9px !important; } .grcs_subscribe_form .form-control, .grcs_subscribe_form .input-group-addon, .grcs_subscribe_form .input-group-btn > .btn { height: 37px; } .grcs_subscribe_form input { font-size: 7px !important; } } @media screen and (max-width: 329px) { .grcs_subscribe_form .form-control, .grcs_subscribe_form .input-group-addon, .grcs_subscribe_form .input-group-btn > .btn { padding: 10px 12px; } } @media screen and (max-width: 318px) { .grcs_subscribe_form .input-group { display: block; } .grcs_subscribe_form input { display: block; text-align: center; border-right: 1px solid #d6d6d6 !important; } } /** 6. VC ELEMENT > SOCIAL ICONS *****************************************************************/ .grcs_social_icons { margin: 0; padding: 0; list-style: none; text-align: center; } .grcs_social_icons.al-center { text-align: center; } .grcs_social_icons.al-left { text-align: left; } .grcs_social_icons.al-right { text-align: right; } .grcs_social_icons li { display: inline-block; margin: 0 16px; } .grcs_social_icons li:first-child { margin-left: 0; } .grcs_social_icons li:last-child { margin-right: 0; } .grcs_social_icons li a, .grcs_social_icons li div.go-down { font-size: 12px; line-height: 40px; position: relative; cursor: pointer; display: block; overflow: hidden; text-align: center; width: 40px; height: 40px; transition: all .2s ease 0s; color: #000; border-radius: 0; background: rgba(255,255,255,.06); } .grcs_social_icons li a .icon-base, .grcs_social_icons li div.go-down .icon-base { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; transition: all .2s ease 0s; background: rgba(255,255,255,1); } .grcs_social_icons li a:hover .icon-base, .grcs_social_icons li div.go-down:hover .icon-base { right: 0; left: auto; width: 0; } .grcs_social_icons li a:hover, .grcs_social_icons li div.go-down:hover { color: #fff; background: rgba(255,255,255,.06); } .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); } /* MEDIA QUERIES */ @media screen and (max-width: 1400px), screen and (max-height: 720px) { .tooltip.bottom .tooltip-inner { font-size: 10px; } } @media screen and (max-width: 420px), screen and (max-height: 720px) { .tooltip.bottom .tooltip-inner { font-size: 8px; } .grcs_social_icons li { display: inline-block; margin: 0 14px; } .grcs_social_icons li a, .grcs_social_icons li div.go-down { font-size: 9px; line-height: 30px; width: 31px; height: 31px; } } @media screen and (max-width: 329px) { .grcs_social_icons li { margin: 0 10px; } } @media screen and (max-width: 318px) { .grcs_social_icons li { margin: 0 8px; } } /** 7. VC ELEMENT > CONTACT FORM *****************************************************************/ .grcs_contact_form { font-size: 18px; margin: 0 auto; text-align: center; } .grcs_contact_form .form-responses { display: none; opacity: 0; position: absolute; width: 0; height: 0; pointer-events: none; } .grcs_contact_form.al-center { margin: 0 auto; } .grcs_contact_form.al-left { margin-left: 0; } .grcs_contact_form.al-right { margin-right: 0; } .grcs_contact_form .control-group { margin-right: auto; margin-left: auto; } .grcs_contact_form .control-group.hpc { display: none; opacity: 0; pointer-events: none; } .grcs_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; } .grcs_contact_form input, .grcs_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; } .grcs_contact_form input::-webkit-input-placeholder, .grcs_contact_form textarea::-webkit-input-placeholder { color: #d6d6d6; } .grcs_contact_form input::-moz-placeholder, .grcs_contact_form textarea::-moz-placeholder { color: #d6d6d6; } .grcs_contact_form.error input.active, .grcs_contact_form.error textarea.active { border-color: rgba(251, 9, 9, 1) !important; } .grcs_contact_form.success input, .grcs_contact_form.success textarea { background: rgba(255,255,255,0) !important; } .grcs_contact_form textarea { height: 110px; padding-top: 10px; resize: none !important; } .grcs_contact_form input:focus, .grcs_contact_form input:active { border: 1px solid #d6d6d6; outline: none; background: rgba(255,255,255,.04); } .grcs_contact_form textarea:focus, .grcs_contact_form textarea:active { border: 1px solid #fff; outline: none; background: rgba(255,255,255,.04); } .grcs_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; 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); } .grcs_contact_form.success button { border-color: rgba(95, 234, 110, 1) !important; background: rgba(95, 234, 110, 1) !important; } .grcs_contact_form.error button { border-color: rgba(251, 9, 9, 1) !important; background: rgba(251, 9, 9, 1) !important; } .grcs_contact_form button:hover, .grcs_contact_form button:focus, .grcs_contact_form button:active { color: #000; border-color: #d6d6d6; outline: none !important; background: rgba(255,255,255,.00); box-shadow: none; } .grcs_contact_form button:hover { background: rgba(255,255,255,.00) !important; } .grcs_contact_form button:focus, .grcs_contact_form button:active { background: rgba(255,255,255,1); } .grcs_contact_form .btn-primary[disabled] { opacity: 1; color: #fff; border: 1px solid #fff; outline: none; background: rgba(255,255,255,1); } .grcs_contact_form.error button:hover, .grcs_contact_form.error button:focus, .grcs_contact_form.error button:active { border-color: rgba(251, 9, 9, 1); } .grcs_contact_form.error button:focus { background: rgba(251, 9, 9, 1); } .grcs_contact_form.success button:hover, .grcs_contact_form.success button:focus, .grcs_contact_form.success button:active { border-color: rgba(95, 234, 110, 1); } .grcs_contact_form.success button:hover, .grcs_contact_form.success button:focus { background: rgba(95, 234, 110, 1) !important; } .grcs_contact_form button::before { position: absolute; z-index: -1; top: 0; right: auto; left: 0; width: 100%; height: 100%; content: ''; transition: all .2s ease 0s; background: rgba(255,255,255,1); } .grcs_contact_form.success button::before { background: rgba(95, 234, 110, 1) !important; } .grcs_contact_form.error button::before { background: rgba(251, 9, 9, 1) !important; } .grcs_contact_form.success button::before { background: rgba(255,255,255,1); } .grcs_contact_form button:hover::before { right: 0; left: auto; width: 0; } .grcs_contact_form.success button:hover::before { right: 0; left: 0; width: 100%; } .grcs_contact_form button i { position: absolute; top: 50%; left: 0; width: 100%; height: auto; transition: none; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); text-align: center; } .grcs_contact_form button:hover i { transition: all .2s ease 0s; } .grcs_contact_form button i.first { left: -200%; color: #fff; } .grcs_contact_form button i.second { left: 0; } .grcs_contact_form button:hover i.first { left: 0; } .grcs_contact_form button:hover i.second { left: 200%; } .grcs_contact_form.error button i.second:before { content: '\e646'; color: #fff; } .grcs_contact_form.success button i.second:before { content: '\e64c'; color: #fff; } .grcs_contact_form.success button:hover i.first { left: -200%; } .grcs_contact_form.success button:hover i.second { left: 0; } /* MEDIA QUERIES */ @media screen and (max-width: 420px), screen and (max-height: 720px) { .grcs_contact_form label { font-size: 12px; margin-bottom: 8px; } .grcs_contact_form input, .grcs_contact_form textarea { font-size: 9px; height: 40px; margin-bottom: 14px; } .grcs_contact_form textarea { height: 90px; } .grcs_contact_form button { font-size: 9px; line-height: 40px; width: 104px; height: 40px; margin: 24px auto 0 auto; } }