/* Indice 0. Reset Generic CSS 1. General 2. Header 3. Intro 4. Business 5. Latest Work 6. Reviews 7. Get a Quote 8. Contacts /*----------------------------------------------------------------------------------*/ /* 0. Reset Generic CSS /*-----------------------------------------------------------------------------------*/ 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, font, 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 { margin:0; padding:0; border:0; outline:0; font-size:100%; background:transparent; } ol, ul {list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:''; content:none;} :focus {outline:0;} a {outline:0;} a img {outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;} .clear { clear: both; display: block; overflow: hidden; visibility: hidden; width:0px; line-height:0px; font-size:0px;} /*-----------------------------------------------------------------------------------*/ /* 1. General /*-----------------------------------------------------------------------------------*/ @font-face { font-family: 'Neris-Black'; src: url('../fonts/Neris-Black/Neris-Black.eot?#iefix') format('embedded-opentype'), url('../fonts/Neris-Black/Neris-Black.otf') format('opentype'), url('../fonts/Neris-Black/Neris-Black.woff') format('woff'), url('../fonts/Neris-Black/Neris-Black.ttf') format('truetype'), url('../fonts/Neris-BlackNeris-Black.svg#Neris-Black') format('svg'); font-weight: normal; font-style: normal;} @font-face { font-family: 'Neris-SemiBold'; src: url('../fonts/Neris-SemiBold/Neris-SemiBold.eot?#iefix') format('embedded-opentype'), url('../fonts/Neris-SemiBold/Neris-SemiBold.otf') format('opentype'), url('../fonts/Neris-SemiBold/Neris-SemiBold.woff') format('woff'), url('../fonts/Neris-SemiBold/Neris-SemiBold.ttf') format('truetype'), url('../fonts/Neris-SemiBold/Neris-SemiBold.svg#Neris-SemiBold') format('svg'); font-weight: normal; font-style: normal;} @font-face { font-family: 'Neris-SemiBold-Italic'; src: url('../fonts/Neris-SemiBold-Italic/Neris-SemiBoldItalic.eot?#iefix') format('embedded-opentype'), url('../fonts/Neris-SemiBold-Italic/Neris-SemiBoldItalic.otf') format('opentype'), url('../fonts/Neris-SemiBold-Italic/Neris-SemiBoldItalic.woff') format('woff'), url('../fonts/Neris-SemiBold-Italic/Neris-SemiBoldItalic.ttf') format('truetype'), url('../fonts/Neris-SemiBold-Italic/Neris-SemiBoldItalic.svg#Neris-SemiBoldItalic') format('svg'); font-weight: 600; font-style: italic;} @font-face { font-family: 'Neris-Light'; src: url('../fonts/Neris-Light/Neris-Light.eot?#iefix') format('embedded-opentype'), url('../fonts/Neris-Light/Neris-Light.otf') format('opentype'), url('../fonts/Neris-Light/Neris-Light.woff') format('woff'), url('../fonts/Neris-Light/Neris-Light.ttf') format('truetype'), url('../fonts/Neris-Light/Neris-Light.svg#Neris-Light') format('svg'); font-weight: normal; font-style: normal;} @font-face { font-family: 'FFADMatro'; src: url('../fonts/FFAD_Matro/FFADMatro.eot?#iefix') format('embedded-opentype'), url('../fonts/FFAD_Matro/FFADMatro.woff') format('woff'), url('../fonts/FFAD_Matro/FFADMatro.ttf') format('truetype'), url('../fonts/FFAD_Matro/FFADMatro.svg#FFADMatro') format('svg'); font-weight: normal; font-style: normal; } body{color:#12171d; font-family:'Neris-Black', sans-serif;} .modal-open {overflow: hidden !important; margin-left:auto; margin-right:auto;} .section{text-align:center;} h1 {font-size: 90px; letter-spacing:0;} h2 {font-size: 54px; position:absolute; text-align:left; padding-left:90px; top:100px; z-index: 10; text-transform: uppercase; letter-spacing:-1px;} h3 {letter-spacing:0px;} h4 {font-size: 30px; letter-spacing:0px;} h5 {letter-spacing:0px;} h6 {letter-spacing:0px;} .headings {position:fixed; margin-left:-4000px;} ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color:#fff;} :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#fff; opacity: 1;} ::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#fff;opacity: 1;} :-ms-input-placeholder { /* Internet Explorer 10-11 */ color:#fff;} .arrow-down {width:44px; height:44px; bottom: 20px; left: 50%; margin-left:-22px; position:absolute; z-index:5; background: url(../assets/2.Business/arrow-down.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor:pointer;} .arrow-down-grey {width:44px; height:44px; bottom: 20px; left: 50%; margin-left:-22px; position:absolute; z-index:5; background: url(../assets/2.Business/arrow-down-grey.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor:pointer;} .arrow-down:hover {bottom:8px;} .arrow-down-grey:hover {bottom:8px; background: url(../assets/2.Business/arrow-down.svg) no-repeat;} .adjust-arrow {height: 46px !important;} .hide-content {display: none;} .show-content {display: block;} .green {color: #26af5f !important;} .header-modal .active {color:; font-family:'Neris-Black';} .floating-y {animation-name: floating-y; -webkit-animation-name: floating-y; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;} @keyframes floating-y {0% {transform: translateY(0%);} 50% {transform: translateY(20%);} 100% {transform: translateY(0%);}} @-webkit-keyframes floating-y {0% {-webkit-transform: translatex(0%);} 50% {-webkit-transform: translateY(20%);} 100% {-webkit-transform: translateY(0%);}} .floating-x {animation-name: floating-x; -webkit-animation-name: floating-x; animation-duration: 1.5s; -webkit-animation-duration: 1.5s; animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;} @keyframes floating-x {0% {transform: translateX(0%);} 50% {transform: translateX(15%);} 100% {transform: translateX(0%);}} @-webkit-keyframes floating-x {0% {-webkit-transform: translateX(0%);} 50% {-webkit-transform: translateX(15%);} 100% {-webkit-transform: translateX(0%);}} @media screen and (max-width: 991px) { h4 {font-size: 26px;} h2 {font-size: 50px;} } @media screen and (max-width: 767px) { h2 {font-size: 44px;} } @media screen and (max-width: 639px) { h2 {font-size: 34px; top:76px; margin-left: -270px; width: 540px; padding:0; text-align:center;} h2.left-work {left:50%; color: white !important;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { h2 {font-size: 28px; top: 60px; margin-left: -160px; width: 320px;} h4 {font-size: 20px;} .arrow-down {bottom: 8px; width: 38px; height: 38px; margin-left: -19px;} .arrow-down-grey {bottom: 8px; width: 38px; height: 38px; margin-left: -19px;} .adjust-arrow {height: 24px !important;} #fp-nav.right {right: 0px !important;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { .arrow-down {width: 38px; height: 38px; margin-left: -19px; bottom: 0;} h2 {font-size: 26px; top: 10px; text-align: center; margin-left: -180px !important; left: 50%; width: 360px; padding-left:0;} h2.left-work {left:50%; color: white !important;} h4 {font-size: 20px;} #fp-nav.right {right: 0px !important;} .arrow-down {bottom: 0px; width: 38px; height: 38px;} .arrow-down-grey {bottom: 0px; width: 38px; height: 38px;} } /*-- iPhone 6 --*/ @media screen and (max-width: 400px) { .arrow-down-grey:hover {bottom:0px;} h2 {font-size: 26px;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { .arrow-down {width: 38px; height: 38px; margin-left: -19px; bottom: 0;} h2 {font-size: 24px; top: 14px; text-align: center; margin-left: -180px; width: 360px; padding-left:0;} h2.left-work {left:50%; color: white !important;} h4 {font-size: 17px;} #fp-nav.right {right: 0px !important;} .arrow-down {bottom: 0px; width: 38px; height: 38px;} .arrow-down-grey {bottom: 0px; width: 38px; height: 38px;} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { h2 {font-size: 23px; top: 62px;} h4 {font-size: 18px; margin-top:10px;} .arrow-down {bottom: 0px;} .arrow-down-grey {bottom: 0px;} #fp-nav {display: none;} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { h4 {font-size: 14px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { .arrow-down {width: 38px; height: 38px; margin-left: -19px; bottom: 0;} h2 {font-size: 23px; top: 9px; text-align: center; margin-left: -180px; width: 360px; padding-left:0;} h2.left-work {left:50%; color: white !important;} h4 {font-size: 15px;} #fp-nav {display: none;} .arrow-down {bottom: 0px; width: 38px; height: 38px;} .arrow-down-grey {bottom: 0px; width: 38px; height: 38px;} } /*----- SPECIAL QUERIES --*/ /*----- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 825px) { h2 {top:126px; font-size: 40px;} h4 {font-size: 28px; margin-top: 18px} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { h2 {font-size: 40px; top: 100px;} h4 {font-size: 20px;} .arrow-down {bottom: 6px;} .arrow-down-grey {bottom: 6px;} } /*----- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { h2 {top:118px;} h4 {font-size: 32px; margin-top: 18px;} } /*----- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { h2 {top:200px;} h4 {font-size: 40px; margin-top: 40px;} .arrow-down {width: 66px; height: 66px; margin-left: -32px;} .arrow-down-grey {width: 66px; height: 66px; margin-left: -32px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { .arrow-down {width: 66px; height: 66px; margin-left: -32px;} .arrow-down-grey {width: 66px; height: 66px; margin-left: -32px;} } /*-----------------------------------------------------------------------------------*/ /* 2. Header /*-----------------------------------------------------------------------------------*/ #header {position:absolute; height:60px; width:100%; font-size:18px; color:#fff;} #header #home {display:none; width:40px; height:40px; left:30px; top:13px; z-index:2; position:absolute; background:url(../assets/0.Header/logo-icon-green.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header #home:hover {background:url(../assets/0.Header/logo-icon-green-dark.svg) no-repeat; cursor:pointer;} #header #header-menu {width:auto; position:absolute; right:90px; top:10px; z-index:2; display:inline-block;} #header #header-menu li {float:right; position:relative; margin-left: 20px; margin-top: 6px; font-family: 'Neris-SemiBold';} #header #header-menu li:first-child {margin-top:0px;} #header #header-menu li a {text-decoration: none; color: white; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header #header-menu li a:hover {color: #26af5f; text-decoration: line-through;} #header #header-menu li a.btn-quote {padding: 8px 27px; text-decoration: none; color: #26af5f; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header #header-menu li span {top: 5px; position: relative; font-family: 'Neris-SemiBold'; padding:5px 0; font-size:16px; background:transparent; border:3px solid #26af5f; color:#26af5f; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #header #header-menu li span:hover {background:#26af5f; cursor: pointer;} #header #header-menu li span:hover a.btn-quote {color:#fff;} #header .btn-hamburguer {display: none; width:40px; height:40px; right:30px; top:10px; z-index:2; position: absolute; border:none; background: url(../assets/0.Header/menu-green.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header .btn-hamburguer #trigger-overlay-mobile {width:40px; height:40px; border:none; background-color:transparent;} #header .btn-hamburguer:hover {background: url(../assets/0.Header/menu-green-dark.svg) no-repeat;} #header .btn-language {width:40px; height:35px; padding-top:5px; right:30px; top:10px; z-index:2; position:absolute; color:#26af5f; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header .btn-language:hover {color:#1d8747;} #header .btn-language #trigger-overlay-desktop {border:none; background-color:transparent; color: #26af5f; font-size: 18px; font-family: 'Neris-Black'; cursor: pointer; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header .btn-language #trigger-overlay-desktop:hover {color: #1d8747;} #header .btn-language a button {border:none; background-color:transparent; color: #26af5f; font-size: 18px; font-family: 'Neris-Black'; cursor: pointer; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} #header .btn-language a button:hover {color: #1d8747; cursor:pointer;} /* Menu */ .overlay {position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(18, 23, 29, 1);} .overlay #logo-menu {width: 190px; height: 150px; position: absolute;} .overlay #logo-menu img {width: 352px; height: 260px;} .overlay #logo-menu img a {width: 352px; height: 260px;} .overlay #logo-simple-menu {display: none;} .overlay .overlay-close {width: 60px; height:60px; position: fixed; right: 28px; top: 28px; overflow: hidden; border: none; color:transparent; outline:none; background: url(../assets/0.Header/cross-thin-green.svg) no-repeat center center; text-indent:200%; color:transparent; z-index:100002; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} .overlay .overlay-close:hover {background:url(../assets/0.Header/cross-thin.svg) no-repeat center center;} .overlay #mobile-menu {display: none; top: 50%; margin-top: -25%; position: relative; text-align: center; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 100;} .overlay ul {list-style: none; padding: 0; margin: 0 auto; display: inline-block; height: 100%; position: relative;} .overlay ul li { display: block; height: 54px; margin: 20px auto 0; text-transform: uppercase;} .overlay ul li:last-child {padding-top: 6px; height:50px;} .overlay ul li a {font-weight: 700; font-size: 28px; display: block; color: #fff; text-decoration:none; -webkit-transition: color 0.3s; transition: color 0.3s;} .overlay ul li a:hover,.overlay ul li a:focus {color:#26af5f;} .overlay ul li a.active {color:#21af5f;} .overlay ul li.menu-four a {width:140px; font-family: 'Neris-SemiBold'; text-transform: none; margin-left: auto; margin-right: auto; padding:7px 6px 8px; font-size:16px; background:transparent; border:3px solid #26af5f; color:#26af5f; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .overlay ul li.menu-four a:hover {background:#26af5f; color: white; text-decoration: none; cursor:pointer;} .overlay .language {width:100%; height:80px; bottom:-50%; margin-top:-40px; position:relative; font-size:50px; text-align:center; color:#fff; font-family: 'Neris-SemiBold';} .overlay .language span {-webkit-transition: color 0.3s; transition: color 0.3s; margin:0 20px;} .overlay .language span:hover {cursor: pointer;} .overlay .language span a {text-decoration: none; color: #fff; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .overlay .language span a:hover {color: #21af5f;} .overlay .language span a.active {color:#21af5f !important;} .overlay .copyright-mobile {width:100%; height:60px; font-size: 22px; bottom:0; color: white; position:absolute; text-align:center; color:white; font-family: 'Neris-Light';} /* open/close effect */ .overlay-hugeinc {opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s; z-index: 100001;} .overlay-hugeinc.open {opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;} .overlay-hugeinc #mobile-menu {-webkit-perspective: 1200px; perspective: 1200px;} .overlay-hugeinc #mobile-menu {opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg); -webkit-transition: -webkit-transform 0.5s, opacity 0.5s; transition: transform 0.5s, opacity 0.5s;} .overlay-hugeinc.open #mobile-menu {opacity: 1; -webkit-transform: rotateX(0deg); transform: rotateX(0deg);} .overlay-hugeinc.close #mobile-menu {-webkit-transform: translateY(25%) rotateX(-35deg);transform: translateY(25%) rotateX(-35deg);} .green-pathf {color: #26af5f;} .green-pathf:hover {color: #fff;} .dark-blue {color: #12171d !important;} .dark-blue:hover {color: #26af5f !important;} .icon-white {background:url(../assets/0.Header/logo-icon-white.svg) no-repeat !important;} .icon-white:hover {background:url(../assets/0.Header/logo-icon-green-dark.svg) no-repeat !important;} .menu-white {background: url(../assets/0.Header/menu-white.svg) no-repeat !important;} .menu-white:hover {background: url(../assets/0.Header/menu-green-dark.svg) no-repeat !important;} .blue-color-border {border:3px solid #12171d !important; color: #12171d !important;} .white-border {border:3px solid white !important;} .white-border:hover {background-color:white !important;} .white-border:hover a.white-text {color:#26af5f !important;} .white-text {color: white !important;} .white-text:hover {color:#26af5f !important; cursor: pointer;} .bgwhite-colorgreen {background-color: white !important; color: #26af5f !important;} .hide {display:none;} .show {display:block !important;} .hover-green:hover {color:#26af5f !important;} .white-text {color: #fff !important;} .white-text:hover {color: #26af5f !important;} .line-through {text-decoration: line-through !important;} @media screen and (max-width: 767px) { #header #header-menu {display:none;} #header .btn-language {display: none;} #header .btn-hamburguer {display:block} .overlay .overlay-close {width: 40px; height:40px; right: 28px; top: 8px;} .overlay #mobile-menu {display: block;} .overlay #logo-menu img {width: 202px; height: 140px;} .overlay #logo-menu img a {width: 202px; height: 140px;} .overlay-hugeinc.close #mobile-menu ul li.menu-four a {width:152px; height:32px; padding-top:5px; text-decoration:none; top: 240px; z-index: 10; position:relative; left:50%; margin:0 0 0 -76px; float:left; font-size:17px; border: 3px solid #26af5f; color:#26af5f; border-radius:0; display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: pointer;} .overlay-hugeinc.close #mobile-menu ul li.menu-four a:hover {background:#26af5f; color: white;} .overlay .language {font-size: 20px; bottom:60px; position: absolute;} .overlay .language span {-webkit-transition: color 0.3s; transition: color 0.3s;} .overlay .language span:hover {color:#26af5f;cursor: pointer;} .overlay .copyright-mobile {font-size: 12px;} } /*-- iPhone 6 Plus--*/ @media screen and (max-width: 479px) { #header {height:54px;} #header #home {width: 30px; height: 30px; left:10px; top:14px;} #header .btn-hamburguer {right:12px; width: 30px; height: 30px; top: 12px;} #header .btn-hamburguer #trigger-overlay-mobile {width: 30px; height: 30px; left: 10px; top: 13px;} /* Menu */ .overlay #logo-menu {width: 174px; height: 136px; position: absolute;} .overlay .overlay-close {width: 36px; height:36px; right: 9px; top: 10px;} .overlay ul li {height:44px; margin: 0 auto 18px;} .overlay ul li a {font-size: 26px;} .overlay .language {font-size: 16px; bottom: 40px;} .overlay .copyright-mobile {height:46px; font-size: 14px;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { .overlay #mobile-menu {margin-top: 0; top: 0;} .overlay ul li {height:44px; margin:0;} .overlay ul li:first-child {margin-top:40px;} .overlay ul li a {font-size: 22px;} .overlay .language {font-size:16px; bottom:56px; height:24px;} .overlay .copyright-mobile {height:24px;} .overlay #logo-menu {display: none;} .overlay #logo-simple-menu {display: block; width:70px; height:70px; left:30px; top:13px; z-index:101; position:absolute; background:url(../assets/0.Header/logo-icon-green.svg) no-repeat;} .overlay #logo-simple-menu:hover {background:url(../assets/0.Header/logo-icon-white.svg) no-repeat; cursor:pointer;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { .overlay #mobile-menu {margin-top: 0; top: 0;} .overlay ul li {height:44px; margin:0;} .overlay ul li:first-child {margin-top:24px;} .overlay ul li a {font-size: 22px;} .overlay .language {font-size:16px; bottom:40px; height:24px;} .overlay .copyright-mobile {height:24px;} .overlay #logo-menu {display: none;} .overlay #logo-simple-menu {display: block; width:60px; height:60px; left:30px; top:13px; z-index:101; position:absolute; background:url(../assets/0.Header/logo-icon-green.svg) no-repeat;} .overlay #logo-simple-menu:hover {background:url(../assets/0.Header/logo-icon-white.svg) no-repeat; cursor:pointer;} } /*-- iPhone 5--*/ @media screen and (max-width: 359px) and (max-height: 568px) { .overlay #logo-menu {width: 144px; height: 122px;} .overlay #logo-menu img {width: 188px; height: 128px;} .overlay ul li {height: 29px; margin:20px auto 0;} .overlay ul li:first-child {margin-top:12px;} .overlay ul li a {font-size:22px;} .overlay .language {bottom: 26px;} .overlay .copyright-mobile {height:46px; font-size: 14px;} } /*-- iPhone 4--*/ @media screen and (max-width: 359px) and (max-height: 445px) { .overlay ul li {margin:10px auto 0;} .overlay ul li a {font-size:20px;} .overlay #logo-menu img {width: 165px; height: 108px;} .overlay .language {bottom: 16px;} .overlay .copyright-mobile {height:30px; font-size: 14px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { #header {height: 48px;} #header #home {width: 36px; height: 30px; top: 9px;} #header .btn-hamburguer {width: 36px; height: 36px; top: 6px;} .overlay #mobile-menu {margin-top: 0; top: 0;} .overlay ul li {height:34px; margin:0;} .overlay ul li:first-child {margin-top:24px;} .overlay ul li.menu-four a {padding: 2px 0 4px;} .overlay ul li a {font-size: 18px;} .overlay .language {font-size:16px; bottom:34px; height:24px;} .overlay .copyright-mobile {height:24px;} .overlay #logo-menu {display: none;} .overlay #logo-simple-menu {display: block; width:60px; height:60px; left:30px; top:13px; z-index:101; position:absolute; background:url(../assets/0.Header/logo-icon-green.svg) no-repeat;} .overlay #logo-simple-menu:hover {background:url(../assets/0.Header/logo-icon-white.svg) no-repeat; cursor:pointer;} } /*-----------------------------------------------------------------------------------*/ /* 3. Intro /*-----------------------------------------------------------------------------------*/ .flexslider {background-repeat:no-repeat; background-size:cover; background-position:center center; background-image:url(../assets/1.Intro/foto-intro4-big.jpg);} .bg {width: 100%; height: 100%; position: absolute; top: 0; left: 0; background:repeating-linear-gradient(-40deg, #12171d, #12051D 1px, #12051D 1px, #12171d 4px); opacity:0.5;} #logo {width: 352px; height: 264px; background-color: #12171d; position: relative; z-index: 2} #logo .logo-main {width: 300px; height: 100%; margin-left: 26px; background-image: url('../assets/1.Intro/logo.svg'); background-repeat: no-repeat;} h1 {top:236px; position: absolute; left:16%; color: white; font-size: 60px; line-height: 64px; text-align: left; z-index: 3;} .flexslider h1 span {color: #26af5f;} /*.promo-video {left:16%; top:478px; z-index:10; font-family:Neris-SemiBold; font-size:28px; color:white; text-decoration: none; position:absolute; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: pointer;} #play {width: 36px; height: 36px; margin-top: 2px; margin-left: 6px; float: right; background: url('../assets/1.Intro/play.svg') no-repeat; border: none; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .promo-video:hover {color:#26af5f;} .promo-video:hover #play {background: url('../assets/1.Intro/play-green.svg')}*/ #section1 #submit {display: none;} #section1 form {position:absolute; z-index:100; top:540px; width:100%; height:42px;} #section1 .form-container {width: 980px; height: 42px; margin: auto;} #section1 .form-content {height:42px; color:#fff;} #section1 .form-content p {float:left; margin-top: 15px; font: 15px 'FFADMatro';} #section1 .form-content input {float:left; width: 147px; height:32px; margin: 0 8px; border-radius:0; border: 4px solid #26af5f; color:#fff; background-color: transparent; font: 15px 'Neris-SemiBold'; padding: 0 10px 2px;} #section1 .form-content select {float:left; width:167px; margin: 0 8px; background-color:transparent; font: 15px 'Neris-SemiBold'; color:#fff; height:42px; border: 4px solid #26af5f; border-radius:0px; padding: 0 10px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none;} /* #section1 .form-content input[type="submit"] {width:152px; height:42px; margin: 0 0 0 12px; float:left; font-size:17px; background:#26af5f; border: 3px solid #26af5f; color:#FFF; border-radius:0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: pointer;} #section1 .form-content input[type="submit"]:hover {background:#1d8747; border: 3px solid #1d8747;} */ li.quote-intro {position:absolute; top:466px; left:16%; z-index:9; font-family: 'Neris-SemiBold'; list-style:none;} li.quote-intro:first-child {margin-top:0px;} li.quote-intro a {text-decoration: none; color: white; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} li.quote-intro a:hover {color: #26af5f; text-decoration: line-through;} li.quote-intro a.btn-quote {padding: 8px 27px; text-decoration: none; color: #26af5f; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} li.quote-intro span {top: 5px; position: relative; font-family: 'Neris-SemiBold'; padding:10px 0; font-size:16px; background:transparent; border:3px solid #26af5f; color:#26af5f; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} li.quote-intro span:hover {background:#26af5f; cursor: pointer;} li.quote-intro span:hover a.btn-quote {color:#fff;} select.combo-one { background-image: linear-gradient(45deg, transparent 50%, #fff 50%), linear-gradient(135deg, #fff 50%, transparent 50%), linear-gradient(to right, transparent, transparent); background-size:9px 8px, 9px 8px, 5px 28px; background-repeat: no-repeat; background-position: calc(100% - 20px) calc(12px + 2px), calc(100% - 11px) calc(12px + 2px), calc(100% - 40px) 8px; background-position: -webkit-calc(100% - 20px) -webkit-calc(12px + 2px), -webkit-calc(100% - 11px) -webkit-calc(12px + 2px), -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 20px) -moz-calc(12px + 2px), -moz-calc(100% - 11px) -moz-calc(12px + 2px), -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 20px) -o-calc(12px + 2px), -o-calc(100% - 11px) -o-calc(12px + 2px), -o-calc(100% - 40px) 8px;} select.combo-one:focus { background-image:linear-gradient(45deg, #fff 50%, transparent 50%), linear-gradient(135deg, transparent 50%, #fff 50%), linear-gradient(to right, transparent, transparent); background-size: 8px 9px, 8px 9px, 5px 28px; background-repeat: no-repeat; border-color: #26af5f; outline: 0; background-position: calc(100% - 11px) 12px, calc(100% - 19px) 12px, calc(100% - 40px) 8px; background-position: -webkit-calc(100% - 11px) 12px, -webkit-calc(100% - 19px) 12px, -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 11px) 12px, -moz-calc(100% - 19px) 12px, -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 11px) 12px, -o-calc(100% - 19px) 12px, -o-calc(100% - 40px) 8px;} #your-email {width:100%; height:100%; background-color: red; display: none; position: absolute; z-index: 2000;} @media screen and (min-width: 1500px) { .flexslider {background-position:center center;} } @media screen and (min-height: 901px) { .flexslider {background-position:center center;} } @media screen and (max-width: 1199px) { .flexslider {background-position:center center;} } @media screen and (max-width: 991px) { .flexslider {background-position:center right;} h1 {font-size:46px; line-height:60px;} #section1 form {position:relative; top:222px; width:634px; margin:auto;} #section1 .form-container {width: 634px; height: 120px;} #section1 .form-content {height:120px;} #section1 .form-content p {margin-top: 30px;} #section1 .form-content input[type="text"] {width:212px; margin: 15px 18px 0;} #section1 .form-content select {width:240px; margin: 15px 18px 0;} /*#section1 .form-content input[type="submit"] {margin: 15px 0 0 16px;} .promo-video {top:460px;}*/ li.quote-intro {top:566px;} } @media screen and (max-width: 767px) { .bg {opacity:0.6;} #logo {width: 320px; height: 240px; background-color: #12171d;} #logo .logo-main {width: 280px; height: 100%; margin-left: 20px;} h1 {font-size: 40px; line-height: 50px; left:13%; width:76%; top: 218px;} #section1 form {position:relative; top:222px; width:634px; margin:auto;} #section1 .form-container {width: 604px; position: absolute; left: 50%; margin-left: -293px;} #section1 .form-content input[type="text"] {width:212px;} #section1 .form-content select {width:210px;} /*.promo-video {top:400px; left: 50%; margin-left: -161px; font-size: 23px;}*/ #section1 #submit {width:152px; height:31px; padding-top:5px; text-decoration:none; top: 240px; z-index: 10; position:relative; left:50%; margin:0 0 0 -76px; float:left; font-size:17px; border: 3px solid #26af5f; color:#26af5f; border-radius:0; display: block; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; cursor: pointer;} #section1 #submit:hover {background:#26af5f; color: white;} #play {width: 34px; height: 34px; margin-top: 0px;} #section1 #submit {display: block;} li.quote-intro {top:408px; left:13%;} li.quote-intro span {padding:5px 0;} } @media screen and (max-width: 639px) { #logo {width: 280px; height: 204px;} #logo .logo-main {width: 240px; height: 100%; margin-left: 20px;} h1 {font-size: 30px; line-height: 42px; top:184px;} #section1 form {width:100%; top:initial; bottom: 80px; position: absolute;} #section1 .form-container {width: 100%; height: 42px; left:0; margin-left:0px;} #section1 .form-content {height:42px;} #section1 .form-content p {display:none;} #section1 .form-content input[type="text"] {display:none;} #section1 .form-content select {display:none;} /*#section1 .form-content input[type="submit"] {position:relative; left:50%; margin:0 0 0 -76px;} .promo-video {top:340px; margin-left: -145px; font-size: 20px;} .promo-video #play {width: 26px; height: 26px;}*/ #section1 #submit {top: 210px;} li.quote-intro {top:340px;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { #logo {width: 100%; height: 160px; background-color: #12171d;} #logo .logo-main {width: 232px; height: 140px; left: 0px; position: absolute;} h1 {font-size: 36px; line-height: 42px; left:0; top:-16px; width:300px; position: relative; margin: 0 auto 0;} #section1 form {bottom: 62px;} /*.promo-video {font-size: 16px; margin-left: -119px; top:322px;} .promo-video #play {margin-top: 0;}*/ #section1 #submit {top: 80px;} li.quote-intro {top:428px; left:50%; transform:translateX(-50%);} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { #logo {width: 180px; height: 130px;} #logo .logo-main {width: 140px;} h1 {font-size: 40px; line-height: 50px; top: 80px; left: 170px} /*.promo-video {top: 162px; font-size: 20px; margin-left: -150px;}*/ #play {width: 28px; height: 28px;} #section1 #submit {top: 90px;} li.quote-intro {top:250px; left:50%; transform:translateX(-50%);} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { #logo {width: 160px; height: 114px;} #logo .logo-main {width: 132px;} h1 {font-size: 35px; line-height: 40px; top: 74px; left: 150px} /*.promo-video {top: 128px; font-size: 18px; margin-left: -132px;}*/ #play {width: 20px; height: 20px; margin-top: 2px;} #section1 #submit {top: 60px;} li.quote-intro {top:204px; left:50%; transform:translateX(-50%);} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { #logo {height: 148px !important; width: 100% !important;} #logo .logo-main {width: 202px; height: 128px; left: 0px; position: absolute;} h1 {font-size: 30px; line-height: 32px; top:-14px; width:260px; position: relative; margin: auto;} #section1 form {bottom: 50px;} /*.promo-video {font-size: 15px; top: 290px; margin-left: -112px;} */ #section1 #submit {top: 58px; height: 30px; padding-top: 4px;} select.combo-one { background-position: calc(100% - 20px) calc(12px + 0px), calc(100% - 11px) calc(12px + 0px), calc(100% - 40px) 8px; background-position: -webkit-calc(100% - 20px) -webkit-calc(12px + 0px), -webkit-calc(100% - 11px) -webkit-calc(12px + 0px), -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 20px) -moz-calc(12px + -0px), -moz-calc(100% - 11px) -moz-calc(12px + 0px), -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 20px) -o-calc(12px + 0px), -o-calc(100% - 11px) -o-calc(12px + 0px), -o-calc(100% - 40px) 8px;} select.combo-one:focus { background-position: calc(100% - 11px) 10px, calc(100% - 19px) 8px, calc(100% - 40px) 10px; background-position: -webkit-calc(100% - 11px) 10px, -webkit-calc(100% - 19px) 10px, -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 11px) 10px, -moz-calc(100% - 19px) 10px, -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 11px) 10px, -o-calc(100% - 19px) 10px, -o-calc(100% - 40px) 8px;} li.quote-intro {top:360px;} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { h1 {top:-14px;} #logo {height: 118px !important; width: 100% !important;} #logo .logo-main {width: 214px; height: 108px; left: 0px; position: absolute;} /*.promo-video {top:232px;}*/ #section1 #submit {top: 48px;} select.combo-one { background-position: calc(100% - 20px) calc(12px + -3px), calc(100% - 11px) calc(12px + -3px), calc(100% - 40px) 8px; background-position: -webkit-calc(100% - 20px) -webkit-calc(12px + -3px), -webkit-calc(100% - 11px) -webkit-calc(12px + -3px), -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 20px) -moz-calc(12px + -3px), -moz-calc(100% - 11px) -moz-calc(12px + -3px), -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 20px) -o-calc(12px + -3px), -o-calc(100% - 11px) -o-calc(12px + -3px), -o-calc(100% - 40px) 8px;} select.combo-one:focus { background-position: calc(100% - 11px) 8px, calc(100% - 19px) 8px, calc(100% - 40px) 8px; background-position: -webkit-calc(100% - 11px) 8px, -webkit-calc(100% - 19px) 8px, -webkit-calc(100% - 40px) 8px; background-position: -moz-calc(100% - 11px) 8px, -moz-calc(100% - 19px) 8px, -moz-calc(100% - 40px) 8px; background-position: -o-calc(100% - 11px) 8px, -o-calc(100% - 19px) 8px, -o-calc(100% - 40px) 8px;} li.quote-intro {top:324px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { #logo {width: 140px; height: 96px;} #logo .logo-main {width: 1w0px;} h1 {font-size: 22px; line-height: 26px; top: 20px; left: 132px} /*.promo-video {top: 110px; font-size: 16px; margin-left: -119px;}*/ #play {width: 28px; height: 28px;} #section1 #submit {top: 50px; width:140px; height:27px; padding-top:1px;} li.quote-intro {top:140px; left:50%; transform:translateX(-50%);} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 825px) { h1 {font-size: 46px; line-height: 54px; width: 480px; top: 206px;} #section1 form {top:612px;} /*.promo-video {top:520px; margin-left: -170px; font-size: 24px;}*/ #section1 #submit {top: 390px;} #logo {width: 240px; height: 230px;} #logo .logo-main {height: 84%;} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { #logo {width:252px; height:182px;} h1 {font-size: 40px; line-height: 46px; top: 164px;} /*.promo-video {top:330px;}*/ } /*-- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { h1 {font-size: 50px; line-height: 58px; width: 530px; top: 234px;} #section1 form {top:412px;} /*.promo-video {top:620px;}*/ } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { #logo {width:352px; height:264px;} h1 {font-size: 52px; line-height: 60px; top: 238px;} /*.promo-video {top:478px;}*/ } /*-- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { #logo {width: 412px; height: 334px;} #logo .logo-main {width: 360px;} h1 {font-size: 74px; line-height: 80px; top: 300px; width: 570px;} /*.promo-video {top:840px; font-size: 42px;}*/ #section1 form {position:relative; top:540px; width:634px; margin:auto;} #section1 .form-container {width: 634px; height: 120px;} #section1 .form-content {height:120px;} #section1 .form-content p {margin-top: 30px;} #section1 .form-content input[type="text"] {width:212px; margin: 15px 18px 0;} #section1 .form-content select {width:240px; margin: 15px 18px 0;} /*#section1 .form-content input[type="submit"] {margin: 15px 0 0 16px;}*/ #section1 #submit {margin: 15px 0 0 16px;} li.quote-intro {top:866px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { h1 {font-size: 66px; line-height: 80px; top: 230px;} /*.promo-video {top: 578px; font-size: 42px;}*/ #play {width: 42px; height: 42px; margin-top: 6px; margin-left: 14px;} li.quote-intro {top:566px;} } /*-----------------------------------------------------------------------------------*/ /* 4. Business /*-----------------------------------------------------------------------------------*/ .fp-controlArrow.fp-prev {left: 20px; top: 155px; border:0; width: 44px; height: 44px; background: url(../assets/2.Business/arrow-left-grey.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} .fp-controlArrow.fp-prev:hover {left: 14px; background: url(../assets/2.Business/arrow-left.svg) no-repeat;} .fp-controlArrow.fp-next{right: 20px; top: 155px; border:0; width: 44px; height: 44px; background: url(../assets/2.Business/arrow-right.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} .fp-controlArrow.fp-next:hover{right: 14px;} .btn-down {display: none; width:44px; height:74px; padding-top:0px; position:absolute; bottom:22px; left:50%; margin-left:-19px; color: #bfbfbf; text-decoration:none; font-size:18px; line-height:8px; z-index: 6; cursor:pointer;} .btn-down:hover {color: #26af5f;} .btn-down:hover + .arrow-down {bottom: 14px;} .btn-down:hover + .arrow-down-grey {bottom: 14px; background: url('../assets/2.Business/arrow-down.svg') no-repeat;} .latest {-ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg);/* Firefox */ -moz-transform: rotate(90deg); /* Chrome, Safari */ -o-transform: rotate(90deg);} /* Opera */ /*--- tabs ---*/ #menu-tabs {left:90px; position:absolute; top:96px; z-index:2; width:calc(100% - 180px); width:-webkit-calc(100% - 180px); width:-moz-calc(100% - 180px); width:-o-calc(100% - 180px);} #menu-tabs li {width: 33.333%; float: left;} #menu-tabs li h2 {top:initial; padding:initial; position:initial; width:initial; text-align: center; font-size:40px; padding-top:12px;} /*#menu-tabs li h2.text-left {text-align:left;} #menu-tabs li h2.text-right {text-align:right;}*/ #menu-tabs li h2 a {text-decoration: none; font-family:'Neris-Black'; color: #8d8d8e; transition: 0.3s; -webkit-transition: 0.3s; -o-transition: 0.3s;} #menu-tabs li h2 a:hover {color: #26af5f;} .active-tab {font-size:54px !important; color:#26af5f !important; padding-top:0px !important; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .no-padding-top {padding-top:0 !important; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} /*--- first ---*/ #gon {width: 50%; height:100%; margin-left: 0; float: left; background-color: #eeefef;} #edu {width: 50%; height:100%; margin-left: 0; float: right; background-color: #dedfdf;} #gon h4, #edu h4 {color:#12171d;} .gon-left {position:relative; top:50%; transform:translateY(-42%);} .edu-right {position:relative; top:50%; transform:translateY(-42%);} #gon-photo, #edu-photo {position: relative; width: 150px; height: 150px; border-radius: 50%; margin:auto;} #gon-photo img {width: 150px; height: 150px; display: block; border-radius: 75px;} #edu-photo img {width: 150px; height: 150px; display: block; border-radius: 75px;} #section2 .line {margin: auto; height:5px; width: 60px; background-color:#26af5f; margin-top:10px;} #section2 a.foundersmail {font-size: 18px; font-family: Neris-SemiBold; text-decoration: none; color: #12171d; position: relative; top:10px;} #section2 a.foundersmail:hover {color: #26af5f; text-decoration: line-through; } #section2 a.foundersmail br {display: none;} #section2 ul.social-list {margin-top: 30px; display: inline-flex; position: relative;} #section2 ul.social-list li {margin: 0 10px 0 10px; width: 40px; height: 40px;} #section2 .social-list li a.fb {background-image: url('../assets/2.Business/facebook.svg'); width: 40px; height: 40px; display: block;} #section2 .social-list li a.fb:hover {background-image: url('../assets/2.Business/facebook1.svg'); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section2 .social-list li a.be {background-image: url('../assets/2.Business/behance.svg'); width: 40px; height: 40px; display: block;} #section2 .social-list li a.be:hover {background-image: url('../assets/2.Business/behance1.svg'); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section2 .social-list li a.in {background-image: url('../assets/2.Business/linkedin.svg'); width: 40px; height: 40px; display: block;} #section2 .social-list li a.in:hover {background-image: url('../assets/2.Business/linkedin1.svg'); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section2 .social-list li a.pin {background-image: url('../assets/2.Business/pinterest.svg'); width: 40px; height: 40px; display: block;} #section2 .social-list li a.pin:hover {background-image: url('../assets/2.Business/pinterest1.svg'); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} h4.top {position: relative;} /*--- second ---*/ #section2 h5 {position:relative; width:754px; text-align:left; font-size:36px; margin:auto;} #section2 h5:last-child {top:20px;} #section2 span {font-size:44px; color:white; background-color:#26af5f; text-transform:uppercase; line-height: 70px; padding: 0 16px 4px;} /*--- third ---*/ #section2 ul.service-list {width: 100%; height:254px; position: absolute; top:50%; transform:translateY(-42%);} #section2 ul.service-list li {width:calc(8.33% - 20px); width:-webkit-calc(8.33% - 20px); height:100%; float:left; margin:0 10px; transition:0.3s; -webkit-transition:0.3s;} /*#section2 ul.service-list li:hover {background-color:white; cursor:pointer;}*/ #section2 ul.service-list li h4 {color:#12171d;} #section2 ul.service-list li .icon {width: 120px; height: 120px; position: relative; margin: auto; top:0px;} #section2 ul.service-list li .icon-websites {width: 140px; height: 120px; position: relative; margin: auto; top:0px;} #section2 ul.service-list li .line {width: 80px; height: 5px; background-color: #26af5f; position: relative; margin: auto; margin:10px auto; top:0px;} #section2 ul.service-list li .service {width: 100%; height:auto; position: relative; top:0px;} #section2 ul.service-list li p {color:#8d8d8e; margin:auto; font-family: 'Neris-light'; padding-top: 10px;} .websites {width: 236px;} .mobile-apps {width: 180px;} .branding {width: 194px;} .graphic {width: 176px;} .multimedia {width: 176px;} .adjust-service {margin-top: 0px;} .adjust-service-two {margin-top: 0px;} .service-text {position: relative; width:80%; left:10%; top: 166px;} @media screen and (max-width: 1199px) { /*--- tabs ---*/ #menu-tabs {top:102px;} #menu-tabs li h2 {font-size: 30px;} .active-tab {font-size:44px !important;} /*--- second ---*/ #section2 h5 {font-size:30px; width:684px;} #section2 h5:last-child {} #section2 span {font-size:38px; line-height: 66px;} } @media screen and (max-width: 991px) { .fp-controlArrow.fp-prev:hover{left: 20px;} .fp-controlArrow.fp-next:hover{right: 20px;} .btn-down:hover + .arrow-down {bottom: 20px;} /*--- tabs ---*/ #menu-tabs {top:115px;} #menu-tabs li h2 {font-size: 24px; padding-top:7px;} .active-tab {font-size:33px !important;} /*--- first ---*/ #section2 p {padding: 0;} /*--- second ---*/ #section2 h5 {font-size:26px; width:540px; line-height: 48px;} #section2 h5:last-child {} #section2 span {font-size:30px; line-height: 78px; padding: 8px 16px 12px;} /*--- third ---*/ #section2 ul.service-list {position: relative; height:478px; transform:initial; top:22px;} #section2 ul.service-list li {width:calc(50% - 20px); width:-webkit-calc(50% - 20px); height:246px;} #section2 ul.service-list li .icon {width: 100px; height: 100px; top: 0px;} #section2 ul.service-list li .icon-websites {width: 120px; height: 100px; top: 0;} #section2 ul.service-list li .line {top: 14px;} #section2 ul.service-list li .service {top: 22px;} #section2 ul.service-list li p {padding-top: 4px;} .adjust-service {margin-top: 220px;} } @media screen and (max-width: 767px) { .fp-controlArrow.fp-prev {top: 145px; display: none;} .fp-controlArrow.fp-next{top: 145px; display: none;} /*--- tabs ---*/ #menu-tabs {top:106px;} #menu-tabs li h2 {font-size: 22px; padding-top:9px;} .active-tab {font-size:30px !important;} /*--- second ---*/ #section2 h5 {font-size:24px; width:500px; line-height: 46px;} #section2 h5:last-child {} #section2 span {font-size:30px; line-height: 68px; padding: 6px 16px 10px;} /*--- third ---*/ #section2 ul.service-list {position: relative;} #section2 ul.service-list li {height:180px;} #section2 ul.service-list li .icon {width: 80px; height: 80px; top: 0px;} #section2 ul.service-list li .icon-websites {width: 100px; height: 80px; top: 0px;} #section2 ul.service-list li .icon-media {width: 86px;} #section2 ul.service-list li p {padding-top: 0px;} .adjust-service {margin-top: 206px;} .adjust-service-two {margin-top: 24px !important;} } @media screen and (max-width: 639px) { .fp-controlArrow.fp-prev {top:115px;} .fp-controlArrow.fp-next{top:115px;} /*--- tabs ---*/ #menu-tabs {top:80px; left:50px; width:calc(100% - 100px); width:-webkit-calc(100% - 100px); width:-moz-calc(100% - 100px); width:-o-calc(100% - 100px);} #menu-tabs li h2 {font-size: 20px; padding-top:5px; margin-left:initial;} .active-tab {font-size:26px !important;} /*--- first ---*/ #gon-photo, #edu-photo {height: 130px; width: 130px;} #gon-photo img {width: 130px; height: 130px;} #edu-photo img {width: 130px; height: 130px;} #section2 a.foundersmail {font-size: 15px; padding: 0;} #section2 a.foundersmail br {display: block;} #section2 .line {} #section2 ul.social-list {display: block; margin: auto; width: 140px; margin-top: 16px; height:110px;} #section2 ul.social-list li {float: left; margin: 10px 15px 10px 15px;} h4.top {position: relative;} /*--- second ---*/ #section2 h5 {font-size:20px; width:406px; margin: auto; line-height: 46px;} #section2 h5:last-child {} #section2 span {font-size:23px; line-height: 68px; padding: 9px 16px 13px;} /*--- third ---*/ #section2 ul.service-list li .service {top: 22px;} .adjust-service {margin-top: 160px;} .adjust-service-two {margin-top: 30px !important;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { .fp-controlArrow.fp-prev {top: 93px; left: 0px; width: 38px; height: 38px;} .fp-controlArrow.fp-prev:hover{left: 0px;} .fp-controlArrow.fp-next {top: 93px; right: 0px; width: 38px; height: 38px;} .fp-controlArrow.fp-next:hover{right: 8px;} .btn-down {font-size: 16px; height: 52px;} /*--- tabs ---*/ #menu-tabs {top:60px; left:20px; width:calc(100% - 40px); width:-webkit-calc(100% - 40px); width:-moz-calc(100% - 40px); width:-o-calc(100% - 40px);} #menu-tabs li h2 {font-size: 13px;} .active-tab {font-size:18px !important;} .text-left {text-align:center !important;} .text-right {text-align:center !important;} /*--- first ---*/ #gon-photo, #edu-photo {} #gon-photo img {width: 116px; height: 116px; margin-left: 7px;} #edu-photo img {width: 116px; height: 116px; margin-left: 7px;} #section2 a.foundersmail {font-size: 12px; padding: 0; margin-top: 16px;} #section2 .line {height: 3px} #section2 a.foundersmail {font-size: 14px;} #section2 a.foundersmail br {display: block;} #section2 ul.social-list {height:110px;} #section2 ul.social-list li {margin: 8px 15px 8px 15px;} h4.top {} /*--- second ---*/ #section2 h5 {font-size:20px; width:320px; line-height: 38px; top:14px;} #section2 h5:last-child {} #section2 span {font-size:19px; line-height: 66px; padding: 12px 12px 14px;} /*--- third ---*/ #section2 ul.service-list {height:372px; top:34px;} #section2 ul.service-list li {height:180px;} #section2 ul.service-list li .line {width: 80px; line-height: 14px; height: 3px;} #section2 ul.service-list li .service {top: 18px;} .websites {width: 160px; font-size: 12px;} .mobile-apps {width: 136px; font-size: 12px;} .branding {width: 146px; font-size: 12px;} .graphic {width: 130px; font-size: 12px;} .multimedia {width: 140px; font-size: 12px;} .adjust-service {margin-top: 114px;} .adjust-service-two {margin-top: 16px !important;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { .fp-controlArrow.fp-prev {top: 50px; left: 80px !important; width: 38px; height: 38px; z-index: 20;} .fp-controlArrow.fp-next{top: 50px; right: 80px !important; width: 38px; height: 38px; z-index: 20;} .btn-down {display: none !important;} /*--- tabs ---*/ #menu-tabs {top:15px; left:90px; width:calc(100% - 180px); width:-webkit-calc(100% - 180px); width:-moz-calc(100% - 180px); width:-o-calc(100% - 180px);} #menu-tabs li h2 {font-size: 17px; margin-left: initial !important; padding-top:5px;} .active-tab {font-size:23px !important;} /*--- first ---*/ #gon-photo, #edu-photo {width: 98px; height: 98px;} #gon-photo img {width: 98px; height: 98px; margin-left: 0px;} #edu-photo img {width: 98px; height: 98px; margin-left: 0px;} h4.top {} #section2 ul.service-list li .line {top: 13px;} #section2 .line {height: 3px; width: 60px;} #section2 a.foundersmail {font-size: 12px;} #section2 a.foundersmail br {display: none;} #section2 ul.social-list {margin-top: 18px;} #section2 ul.social-list li {width: 30px; height: 30px; margin:10px 6px 0px 6px;} #section2 ul.social-list li a.in {width: 30px; height: 30px;} #section2 ul.social-list li a.fb {width: 30px; height: 30px;} #section2 ul.social-list li a.be {width: 30px; height: 30px;} #section2 ul.social-list li a.pin {width: 30px; height: 30px;} /*--- second ---*/ #section2 h5 {font-size: 18px; line-height: 30px;} #section2 h5:last-child {} #section2 span {font-size:24px; line-height: 43px; padding: 0px 12px 6px;} /*--- third ---*/ #section2 ul.service-list {position:absolute; height:164px;} #section2 ul.service-list li {width:calc(8.33% - 20px); width:-webkit-calc(8.33% - 20px); height:100%;} #section2 ul.service-list li .icon {width: 60px; height: 60px;} #section2 ul.service-list li .icon-websites {width: 80px; height: 60px;} #section2 ul.service-list li .line {width:40px; height:3px;} #section2 ul.service-list li .service {} #section2 ul.service-list li p {padding-top: 0px;} .websites {width: 164px; font-size: 12px;} .mobile-apps {width: 130px; font-size: 12px;} .branding {width: 150px; font-size: 12px;} .graphic {width: 126px; font-size: 12px;} .multimedia {width: 134px; font-size: 12px;} .adjust-service {margin-top: 0px;} .adjust-service-two {margin-top: 0px !important;} } /*-- iPhone 6 Height special --*/ @media screen and (max-width: 450px) and (max-height: 565px) { .btn-down {display: none !important;} } /*-- iPhone 6 --*/ @media screen and (max-width: 400px) { #section2 ul.service-list {top:20px;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { .fp-controlArrow.fp-prev {top: 50px; left: 80px !important; width: 38px; height: 38px; z-index: 20;} .fp-controlArrow.fp-next{top: 50px; right: 80px !important; width: 38px; height: 38px; z-index: 20;} .btn-down {display: none !important;} /*--- tabs ---*/ #menu-tabs {top:15px; left:100px; width:calc(100% - 200px); width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); width:-o-calc(100% - 200px);} #menu-tabs li h2 {font-size: 15px; margin-left: initial !important; padding-top:5px;} .active-tab {font-size:22px !important;} /*--- first ---*/ #gon-photo, #edu-photo {width: 70px; height: 70px;} #gon-photo img {width: 70px; height: 70px; margin-left: 0px;} #edu-photo img {width: 70px; height: 70px; margin-left: 0px;} h4.top {} #section2 ul.service-list li .line {top: 13px;} #section2 .line {height: 3px; width: 40px;} #section2 a.foundersmail {font-size: 12px;} #section2 a.foundersmail br {display: none;} #section2 ul.social-list {margin-top: 8px; width: 168px;} #section2 ul.social-list li {width: 30px; height: 30px; margin:10px 6px 0px 6px;} #section2 ul.social-list li a.in {width: 30px; height: 30px;} #section2 ul.social-list li a.fb {width: 30px; height: 30px;} #section2 ul.social-list li a.be {width: 30px; height: 30px;} #section2 ul.social-list li a.pin {width: 30px; height: 30px;} /*--- second ---*/ #section2 h5 {font-size: 15px; width: 392px; line-height: 21px;} #section2 h5:last-child {} #section2 span {font-size:22px; line-height: 38px; padding: 0px 12px 4px;} /*--- third ---*/ #section2 ul.service-list {height:164px;} #section2 ul.service-list {position:absolute;} #section2 ul.service-list li {width:calc(8.33% - 20px); width:-webkit-calc(8.33% - 20px); height:100%;} #section2 ul.service-list li .icon {width: 60px; height: 60px;} #section2 ul.service-list li .icon-websites {width: 80px; height: 60px;} #section2 ul.service-list li .line {width:40px; height:3px;} #section2 ul.service-list li .service {} #section2 ul.service-list li p {padding-top: 0px;} .websites {width: 140px; font-size: 11px;} .mobile-apps {width: 124px; font-size: 11px;} .branding {width: 138px; font-size: 11px;} .graphic {width: 124px; font-size: 11px;} .multimedia {width: 130px; font-size: 11px;} .adjust-service {margin-top: 0px;} .adjust-service-two {margin-top: 0px !important;} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { /*--- tabs ---*/ #menu-tabs {top: 62px;} #menu-tabs li h2 {font-size: 13px; padding-top: 3px;} .active-tab {font-size:17px !important;} .text-left {text-align:center !important;} .text-right {text-align:center !important;} /*--- first ---*/ #gon-photo, #edu-photo {height: 104px;} #gon-photo img {width: 104px; height: 104px; margin-left: 13px;} #edu-photo img {width: 104px; height: 104px; margin-left: 13px;} h4.top {} #section2 .line {} #section2 a.foundersmail {font-size: 12px;} #section2 a.foundersmail br {display: block;} #section2 ul.social-list {} #section2 ul.social-list li {margin: 10px 4px 0px 24px; width: 34px; height: 34px;} #section2 .social-list li a.fb {width: 34px; height: 34px;} #section2 .social-list li a.be {width: 34px; height: 34px;} #section2 .social-list li a.in {width: 34px; height: 34px;} #section2 .social-list li a.pin {width: 34px; height: 34px;} #section2 ul.social-list {height:90px;} /*--- second ---*/ #section2 h5 {font-size:18px; width:290px; line-height: 34px; top:14px;} #section2 h5:last-child {} #section2 span {font-size:17px; line-height: 54px; padding: 9px 12px 10px;} /*--- third ---*/ #section2 ul.service-list {height:316px; top:38px;} #section2 ul.service-list li {height:166px;} #section2 ul.service-list li .icon {width: 60px; height: 56px;} #section2 ul.service-list li .icon-websites {width: 72px; height: 56px; top:-3px;} #section2 ul.service-list li .icon-media {width: 66px;} #section2 ul.service-list li p {padding-top:0;} .adjust-service {margin-top: 110px;} .adjust-service-two {margin-top: 0px !important;} } /*-- iPhone 5 Landscape --*/ @media screen and (min-width: 500px) and (max-height: 250px) { .websites {width: 134px !important;} /*--- tabs ---*/ #menu-tabs {top:10px; left:100px; width:calc(100% - 200px); width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); width:-o-calc(100% - 200px);} #menu-tabs li h2 {font-size: 14px; margin-left: initial !important; padding-top:5px;} .active-tab {font-size:19px !important;} } /*-- iPhone 4--*/ @media screen and (max-width: 359px) and (max-height: 445px) { /*--- first ---*/ #gon-photo, #edu-photo {width: 98px; height: 98px;} #gon-photo img {width: 98px; height: 98px; margin-left: 0px;} #edu-photo img {width: 98px; height: 98px; margin-left: 0px;} h4.top {} #section2 ul.service-list li .line {top: 13px;} #section2 .line {} #section2 a.foundersmail {font-size: 12px;} #section2 a.foundersmail br {display: block;} #section2 ul.social-list {height:46px;} #section2 ul.social-list li {margin: 10px 6px 0px 6px;} #section2 ul.social-list li a.pin {display: none;} /*--- second ---*/ #section2 h5 {line-height: 29px;} #section2 h5:last-child {} #section2 span {line-height: 46px;} /*--- third ---*/ #section2 ul.service-list {height:315px;} #section2 ul.service-list li {height:150px;} #section2 ul.service-list li .icon {width: 50px; height:48px;} #section2 ul.service-list li .icon-websites {width: 64px; height: 48px;} #section2 ul.service-list li .icon-media {width: 60px;} #section2 ul.service-list li p {padding-top:0;} .adjust-service {margin-top: 94px;} .adjust-service-two {margin-top: 0px;} .websites {width: 154px; font-size: 11px;} .mobile-apps {width: 122px; font-size: 11px;} .branding {width: 132px; font-size: 11px;} .graphic {width: 114px; font-size: 11px;} .multimedia {width: 130px; font-size: 11px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { .fp-controlArrow.fp-prev {top: 43px; left: 80px !important; width: 38px; height: 38px; z-index: 20;} .fp-controlArrow.fp-next{top: 43px; right: 80px !important; width: 38px; height: 38px; z-index: 20;} .btn-down {display: none !important;} /*--- tabs ---*/ #menu-tabs {top:10px; left:100px; width:calc(100% - 200px); width:-webkit-calc(100% - 200px); width:-moz-calc(100% - 200px); width:-o-calc(100% - 200px);} #menu-tabs li h2 {font-size: 12px; margin-left: initial !important; padding-top:5px;} .active-tab {font-size:16px !important;} /*--- first ---*/ #gon-photo, #edu-photo {width: 60px; height: 60px;} #gon-photo img {width: 60px; height: 60px; margin-left: 0px;} #edu-photo img {width: 60px; height: 60px; margin-left: 0px;} h4.top {} #section2 ul.service-list li .line {top: 13px;} #section2 .line {height: 3px; width: 40px;} #section2 a.foundersmail {font-size: 12px;} #section2 a.foundersmail br {display: none;} #section2 ul.social-list {margin-top: 4px; width: 168px;} #section2 ul.social-list li {width: 30px; height: 30px; margin:10px 6px 0px 6px;} #section2 ul.social-list li a.in {width: 30px; height: 30px;} #section2 ul.social-list li a.fb {width: 30px; height: 30px;} #section2 ul.social-list li a.be {width: 30px; height: 30px;} #section2 ul.social-list li a.pin {width: 30px; height: 30px;} /*--- second ---*/ #section2 h5 {font-size: 14px; width: 320px; line-height: 21px;} #section2 h5:last-child {} #section2 span {font-size:18px; line-height: 31px; padding: 0px 12px 3px;} /*--- third ---*/ #section2 ul.service-list {height:164px;} #section2 ul.service-list {position:absolute;} #section2 ul.service-list li {width:calc(8.33% - 20px); width:-webkit-calc(8.33% - 20px); height:100%;} #section2 ul.service-list li .icon {width: 50px; height: 50px;} #section2 ul.service-list li .icon-websites {width: 62px; height: 50px;} #section2 ul.service-list li .line {width:40px; height:3px;} #section2 ul.service-list li .service {} #section2 ul.service-list li p {padding-top: 0px;} .websites {width: 120px; font-size: 11px;} .mobile-apps {width: 114px; font-size: 11px;} .branding {width: 120px; font-size: 11px;} .graphic {width: 100px; font-size: 11px;} .multimedia {width: 120px; font-size: 11px;} .adjust-service {margin-top: 0px;} .adjust-service-two {margin-top: 0px !important;} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 825px) { .fp-controlArrow.fp-prev {top: 167px;} .fp-controlArrow.fp-next{top: 167px;} /*--- tabs ---*/ #menu-tabs {top:132px;} /*--- first ---*/ #gon-photo, #edu-photo {} #section2 #gon p, #section2 #edu p {margin-top: 66px; font-size: 18px;} #section2 .line {margin-bottom: 18px;} #section2 a.foundersmail {font-size: 18px;} #section2 ul.social-list {margin-top: 40px;} #section2 ul.social-list li {margin: 10px 15px;} h4.top {} /*--- second ---*/ #section2 h5 {line-height: 58px; width: 464px; font-size: 22px;} #section2 h5:last-child {} #section2 span {line-height: 92px; padding: 16px 16px 20px; font-size: 27px;} /*--- third ---*/ #section2 ul.service-list li {height:230px;} #section2 ul.service-list li .icon {width: 100px; height: 94px;} #section2 ul.service-list li .icon-websites {width: 120px; height: 94px;} #section2 ul.service-list li .line {top: 26px;} #section2 ul.service-list li .service {top: 22px;} .adjust-service {margin-top: 230px;} .adjust-service-two {margin-top: 80px;} .websites {width: 230px; font-size: 18px;} .mobile-apps {width: 200px; font-size: 18px;} .branding {width: 200px; font-size: 18px;} .graphic {width: 190px; font-size: 18px;} .multimedia {width: 170px; font-size: 18px;} .adjust-service-two {margin-top: 40px;} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { .fp-controlArrow.fp-prev {top: 116px;} .fp-controlArrow.fp-next{top: 116px;} /*--- tabs ---*/ #menu-tabs {top:76px;} /*--- first ---*/ #gon-photo, #edu-photo {width: 120px; height: 120px;} #gon-photo img {width: 120px; height: 120px; border-radius: 60px;} #edu-photo img {width: 120px; height: 120px; border-radius: 60px;} #section2 .line {height:3px;} #section2 a.foundersmail {font-size: 16px;} #section2 ul.social-list {} h4.top {} /*--- second ---*/ #section2 h5 {font-size: 26px; line-height: 36px;} #section2 h5:last-child {} #section2 span {line-height:57px; padding:3px 16px 7px;} /*--- third ---*/ #section2 ul.service-list {position:relative; height:226px;} #section2 ul.service-list li {width:calc(25% - 20px); width:-webkit-calc(25% - 20px); height:100%;} #section2 ul.service-list li .icon {width: 90px; height: 90px;} #section2 ul.service-list li .icon-websites {width: 110px; height: 90px;} #section2 ul.service-list li .line {width:60px; height:3px;} #section2 ul.service-list li .service {} #section2 ul.service-list li p {padding-top: 10px;} .adjust-service {margin-top: 0px;} .adjust-service-two {margin-top: 0px;} } /*-- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { .fp-controlArrow.fp-prev {top: 171px;} .fp-controlArrow.fp-next{top: 171px;} /*--- tabs ---*/ #menu-tabs {top:132px;} /*--- first ---*/ #gon-photo, #edu-photo {} #section2 #gon p, #section2 #edu p {margin-top: 70px; font-size: 22px;} #section2 .line {margin-bottom: 0px;} #section2 a.foundersmail {font-size: 20px;} #section2 ul.social-list {margin-top: 90px;} #section2 ul.social-list li {margin: 10px 15px;} h4.top {} /*--- second ---*/ #section2 h5 {line-height: 64px; width: 566px; font-size: 26px;} #section2 h5:last-child {} #section2 span {line-height:90px; padding: 16px 16px 20px;} /*--- third ---*/ #section2 ul.service-list {height:572px} #section2 ul.service-list li {height:260px;} #section2 ul.service-list li .icon {width: 110px; height: 110px;} #section2 ul.service-list li .icon-websites {width: 130px; height: 110px;} #section2 ul.service-list li .line {top: 22px;} .adjust-service {margin-top: 228px;} .adjust-service-two {margin-top: 46px !important;} .websites {width: 240px; font-size: 18px;} .mobile-apps {width: 204px; font-size: 18px;} .branding {width: 220px; font-size: 18px;} .graphic {width: 200px; font-size: 18px;} .multimedia {width: 200px; font-size: 18px;} } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { .fp-controlArrow.fp-prev {top: 126px;} .fp-controlArrow.fp-next{top: 126px;} /*--- first ---*/ #gon-photo, #edu-photo {width: 140px; height: 140px;} #gon-photo img {width: 140px; height: 140px; border-radius: 70px;} #edu-photo img {width: 140px; height: 140px; border-radius: 70px;} #section2 .line {height:5px;} #section2 a.foundersmail {font-size: 18px;} #section2 ul.social-list {margin-top: 40px;} h4.top {} /*--- second ---*/ #section2 h5 {font-size:32px; width:690px; line-height: 44px;} #section2 h5:last-child {} #section2 span {line-height:66px; padding:0px 16px 4px; font-size: 40px;} /*--- third ---*/ #section2 ul.service-list li .icon {width: 120px; height: 120px;} #section2 ul.service-list li .icon-websites {width: 140px; height: 120px;} #section2 ul.service-list li .line {width:80px; height:5px;} #section2 ul.service-list li .service {} .websites {width: 206px;} .branding {width: 194px;} .multimedia {width: 176px;} } /*----- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { .fp-controlArrow.fp-prev {top: 248px; width: 64px; height: 64px;} .fp-controlArrow.fp-next{top: 248px; width: 64px; height: 64px;} .btn-down {padding-top: 26px; line-height: 12px; font-size: 28px; bottom: 76px;} /*--- tabs ---*/ #menu-tabs {top:210px;} /*--- first ---*/ #gon-photo, #edu-photo {width: 200px; height: 200px;} #gon-photo img {width: 200px; height: 200px; border-radius: 100px;} #edu-photo img {width: 200px; height: 200px; border-radius: 100px;} #section2 #gon p, #section2 #edu p {margin-top: 82px; font-size: 24px;} #section2 .line {} #section2 a.foundersmail {font-size: 28px;} #section2 ul.social-list {margin-top: 60px !important;} #section2 ul.social-list li {width: 60px; height: 60px;} #section2 .social-list li a.fb {width:60px; height:60px; display: block;} #section2 .social-list li a.be {width:60px; height:60px; display: block;} #section2 .social-list li a.in {width:60px; height:60px; display: block;} #section2 .social-list li a.pin {width:60px; height:60px; display: block;} h4.top {} /*--- second ---*/ #section2 h5 {line-height: 94px; width:780px; font-size: 36px;} #section2 h5:last-child {} #section2 span {line-height: 120px; padding: 16px 16px 20px; font-size:42px;} /*--- third ---*/ #section2 ul.service-list {position: relative; height:710px;} #section2 ul.service-list li {width:calc(50% - 20px); width:-webkit-calc(50% - 20px); height:350px;} #section2 ul.service-list li .icon {width: 140px; height: 120px; top: 0px;} #section2 ul.service-list li .icon-websites {width: 160px; height: 120px; top: 0;} #section2 ul.service-list li .line {top: 40px;} #section2 ul.service-list li .service {top: 32px;} .websites {width: 320px; font-size: 25px;} .mobile-apps {width: 280px; font-size: 25px;} .branding {width: 300px; font-size: 25px;} .graphic {width: 280px; font-size: 25px;} .multimedia {width: 300px; font-size: 25px;} .adjust-service {margin-top: 350px;} .adjust-service-two {margin-top: 40px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { .fp-controlArrow.fp-prev {top: 145px; width: 64px; height: 64px;} .fp-controlArrow.fp-next{top: 145px; width: 64px; height: 64px;} .btn-down {padding-top: 26px; line-height: 12px; font-size: 28px; bottom: 76px;} /*--- first ---*/ #gon-photo, #edu-photo {width: 180px; height: 180px;} #gon-photo img {width: 180px; height: 180px; display: block; border-radius: 90px;} #edu-photo img {width: 180px; height: 180px; display: block; border-radius: 90px;} #section2 #gon p, #section2 #edu p {margin-top: 82px; font-size: 24px;} #section2 .line {} #section2 a.foundersmail {font-size: 28px;} #section2 ul.social-list {margin-top: 30px !important;} #section2 ul.social-list li {margin: 20px 10px; float:left; width: 50px; height: 50px;} #section2 .social-list li a.fb {width:50px; height:50px; display: block;} #section2 .social-list li a.be {width:50px; height:50px; display: block;} #section2 .social-list li a.in {width:50px; height:50px; display: block;} #section2 .social-list li a.pin {width:50px; height:50px; display: block;} h4.top {} /*--- second ---*/ #section2 h5 { font-size:36px; line-height: 56px;} #section2 h5:last-child {} #section2 span {font-size:44px;line-height: 88px; padding: 6px 16px 10px;} /*--- third ---*/ #section2 ul.service-list li .icon {width: 140px; height: 140px;} #section2 ul.service-list li .icon-websites {width: 160px; height: 140px;} #section2 ul.service-list li .line {} #section2 ul.service-list li .service {} } /*-- Correction 1 for 13in and 15in PC with short height --*/ @media screen and (min-width: 1200px) and (max-height: 699px) { .fp-controlArrow.fp-prev {top: 154px;} .fp-controlArrow.fp-next{top: 154px;} } /*-- Correction 2 for 13in and 15in PC with super short height --*/ @media screen and (min-width: 1200px) and (max-height: 640px) { .fp-controlArrow.fp-prev {top: 134px;} .fp-controlArrow.fp-next{top: 134px;} } /*-----------------------------------------------------------------------------------*/ /* 5. Latest Work /*-----------------------------------------------------------------------------------*/ .white-bg {position: absolute; width: 100%; height: 60px; background-color: white;} .bottom-white-bg {position: absolute; width: 100%; height: 164px; bottom:0; background-color: white; z-index: 2;} .bottom-white-bg span {width:140px; top: 40px; font-family: 'Neris-SemiBold'; text-align:center; position: relative; padding:4px 0 6px; font-size:16px; background:transparent; border:3px solid #26af5f; color:#26af5f; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .bottom-white-bg span:hover {background:#26af5f; color: #fff; cursor: pointer;} #section3 h2 {color: white;} .bottom-white-bg span a {text-decoration:none; width:120px; padding:7px 42px; color:#26af5f; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .bottom-white-bg span a:hover {color: #fff;} #project-one {overflow: hidden; top:60px; left:0; position:absolute; width:50%; height: calc(100% - 224px); height: -webkit-calc(100% - 224px); height: -moz-calc(100% - 224px); height: -o-calc(100% - 224px);} .prj-one {width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../assets/3.Latestwork/project1.jpg'); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-two {overflow: hidden; top:60px; right:0; position:absolute; width:50%; height: calc(50% - 112px); height: -webkit-calc(50% - 112px); height: -moz-calc(50% - 112px); height: -o-calc(50% - 112px);} .prj-two {width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../assets/3.Latestwork/project2.jpg'); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-three {overflow: hidden; right:0; position:absolute; width:50%; height: calc(50% - 112px); top: calc(50% - 52px); height: -webkit-calc(50% - 112px); top: -webkit-calc(50% - 52px); height: -moz-calc(50% - 112px); top: -moz-calc(50% - 52px); height: -o-calc(50% - 112px); top: -o-calc(50% - 52px);} .prj-three {width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../assets/3.Latestwork/project3.jpg'); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-one:hover .prj-one {transform: scale(1.2); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-two:hover .prj-two {transform: scale(1.2); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-three:hover .prj-three {transform: scale(1.2); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #project-one:hover, #project-two:hover, #project-three:hover {cursor:pointer;} #section3 .bg-hide {width: 100%; height: 100%; position: absolute; top: 0; z-index: 9;} #section3 .bg-hide h3 {font-size: 30px; text-align: left; position: absolute; bottom: -76px; left: 40px; text-transform: uppercase;} #section3 .bg-hide:hover h3 {padding: 0px 15px 4px 15px; bottom: 80px; background-color: #12171d; color: #fff; opacity: 1; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section3 .bg-hide p {font-size: 22px; font-family: Neris-SemiBold; position: absolute; bottom: -76px; left: 40px;} #section3 .bg-hide:hover p {padding: 0px 15px 6px 15px; bottom: 32px; background-color: #12171d; color: #fff; opacity: 1; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section3 .bg-hide .bg {width: 100%; height: 100%; position: absolute; top: 0; background:repeating-linear-gradient(-40deg, #12171d, #12051D 1px, #12051D 1px, #12171d 4px); opacity:0.3;} #section3 .bg-hide .bg:hover {background: transparent; opacity: 1;} #section3 li span {color:#26af5f;} /*--- Modal --*/ .overlay-modal {background-color: #fff; height:100%; position: fixed; top: 0; right: 0; left: 0;} [aria-hidden="true"] { display: none; } [aria-hidden="false"] { display: block; z-index: 10;} .overlay-modal h2 {margin-left:0; position:relative;} .modal-content {border:none;} div#modal {display:none; height: 100%; position:fixed; right:0; left:0; background: rgba(0,0,0,0.8); z-index: 10001;} div#modal form {display: none; width: 100%; height: 100%; background:white; position: relative; overflow-y: scroll;} .header-modal {width: 100%; height: 104px; background: rgba(255,255,255,0.9); position: fixed !important; z-index: 2; top:0;} .header-modal .logo-modal {width:40px; height:40px; left:30px; top:13px; margin-top: 24px; position:absolute; background:url(../assets/0.Header/logo-icon-black.svg) no-repeat; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} ul.form-close {position:fixed; top:0; right:0; z-index:999;} ul.form-close li {width: 60px; height: 60px; margin: 20px; float: right; position: relative; cursor:pointer;} ul.form-close li button {width: 60px; height: 60px; background-image: url('../assets/0.Header/cross-thin-green.svg'); background-color:transparent; border:0px #fff; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} ul.form-close li button:hover {background:url('../assets/0.Header/cross-thin-green-dark.svg') no-repeat; cursor:pointer;} ul.form-close li .share {width: 44px; height: 44px; background-image: url('../assets/0.Header/share2.svg'); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} ul.form-close li .share:hover {background:url('../assets/0.Header/share2-dark.svg') no-repeat; cursor:pointer;} ul.form-close li .be-icon {width: 44px; height: 44px; display: block; background-image: url('../assets/0.Header/be.svg'); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} ul.form-close li .be-icon:hover {background:url('../assets/0.Heder/be-dark.svg') no-repeat; cursor:pointer;} .header-modal h5 {font-size: 30px; width:calc(100% - 196px); overflow:hidden; width:-webkit-calc(100% - 196px); max-height:40px; float:left; margin-left:100px; margin-top:15px; font-family:'Neris-Black';} .project-type {font-size:24px;} .header-modal h6 {font-size: 24px; width:calc(100% - 196px); width:-webkit-calc(100% - 196px); float:left; margin-left:100px; margin-top:8px; font-family:'Neris-Black';} .project-type {font-family:'Neris-SemiBold'; color:#12171d;} .project-year {font-family:'Neris-SemiBold'; color:#12171d;} .project-location {font-family:'Neris-SemiBold';} .modal-content {margin-top: 104px; background-color: white; padding-bottom:120px;} .modal-content-scroll { -webkit-overflow-scrolling: touch; /*iphone scroll*/ height:100vh; overflow-y:scroll;} .project-image-desktop {width: 100%; height:auto;} .project-image-desktop img {width:100%; background-size: cover; background-repeat: no-repeat; background-position: center center;} .project-image-mobile {display: none;} .app-icon-over a {width:300px; height:98px; width:300px; margin:120px auto 0; display:block; background-repeat: no-repeat; background-size:cover; background-image: url('../assets/4.Work/mobile-apps/convee/10-desktop.png'); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out;} .app-icon-over a:hover {background-image: url('../assets/4.Work/mobile-apps/convee/10-desktop-hover.png');} #section5 { -webkit-overflow-scrolling: touch; /*iphone scroll*/ height:100vh; overflow-y:scroll;}} /*--- Credits --*/ .modal-content .project-title {font-size:40px; text-align: center; width: 100%; margin: 170px 0 0 0;} .modal-content .project-text-bg {width: 100%; float: left;}/*--- REPLACE --*/ .modal-content .project-text {font-size:18px; font-family:'Neris-Light'; text-align: center; width: 60%; float: left; margin:0 20% 0 20%;}/*--- REPLACE --*/ .modal-content .project-text span {font-family:'Neris-SemiBold';} .modal-content .project-title-credits {font-size:24px; text-align: center; width: 100%; margin: 80px 0 0 0;} .modal-content .project-title-credits a {text-decoration: none;} .modal-content .project-title-credits a:hover {text-decoration: line-through;} .modal-content .project-credits {font-size:18px; font-family:'Neris-Light'; text-align: center; width: 100%; margin:20px 0 0 0; padding-bottom:0px;} .modal-content .project-credits a {color: #26af5f; text-decoration:none;} .modal-content .project-credits a:hover {text-decoration:line-through;} .modal-content .project-credits span {font-family:'Neris-SemiBold';} .modal-content .logo-credits-bg {width: 100%; height: 68px; top:26px; position:relative; margin: 16px 0;} .modal-content .logo-credits {width:80px; height:68px; position:relative; margin-left: 50%; left: -40px; top:0; background:url(../assets/0.Header/logo-icon-green.svg) no-repeat;} @media screen and (max-width: 1099px) { #section3 .bg-hide .bg {opacity: 0.2;} #section3 .bg-hide h3 {font-size: 22px; bottom: 55px; padding: 4px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section3 .bg-hide:hover h3 {font-size: 22px; bottom: 55px; padding: 4px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section3 .bg-hide p {font-size: 14px; bottom: 22px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section3 .bg-hide:hover p {font-size: 14px; bottom: 22px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} } @media only screen and (max-width: 991px) { .header-modal h5 {font-size: 24px; margin-top: 20px; max-height:32px;} .project-type {font-size:20px;} .header-modal h6 {font-size: 20px;} .project-image-desktop {display: none;} .project-image-mobile {display:block; width: 100%; height:auto;} .project-image-mobile img {width:100%; position:relative; background-size: cover; background-repeat: no-repeat; background-position: center center;} .app-icon-over a {width:245px; height:80px; margin:120px auto 0;} #section3 .bg-hide h3 {font-size: 21px; bottom: 55px; padding: 4px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover h3 {font-size: 21px; bottom: 55px; padding: 4px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9; max-width: 300px;} #section3 .bg-hide p {font-size: 14px; bottom: 23px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover p {font-size: 14px; bottom: 23px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9; max-width: 300px;} } @media screen and (max-width: 767px) { #section3 .bg-hide h3 {font-size: 18px; max-width: 250px;} #section3 .bg-hide:hover h3 {font-size: 18px; max-width: 250px;} .header-modal h5 {font-size: 20px; margin-top: 27px; max-height:27px;} .project-type {font-size:17px;} .header-modal h6 {font-size: 17px;} } @media screen and (max-width: 639px) { .bottom-white-bg {height: 134px;} .bottom-white-bg span {top: 30px;} #project-one {position:absolute; width:100%; top:60px; left:0; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px);} #project-two {position:absolute; width:50%; left:0; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} #project-three {position:absolute; width:50%; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} #section3 .bg-hide h3 {left:20px; font-size: 15px; bottom:46px; max-width:198px; padding:4px 8px 6px 8px;} #section3 .bg-hide:hover h3 {left:20px; font-size:15px; bottom:46px; max-width:198px; padding:4px 8px 6px 8px;} #section3 .bg-hide p {left:20px; font-size: 11px; bottom:20px; padding: 2px 8px 4px 8px;} #section3 .bg-hide:hover p {left:20px; font-size: 11px; bottom:20px; padding: 2px 8px 4px 8px;} .header-modal {height:80px;} ul.form-close li {width: 34px; height: 34px; margin:23px 10px; float: right; position: relative; cursor:pointer;} ul.form-close li button {width: 34px; height: 34px;} ul.form-close li .share {width: 34px; height: 34px;} ul.form-close li .be-icon {width: 34px; height: 34px;} .header-modal .logo-modal {display:none; top: 0px; margin-top:12px; width:30px; height:30px; left: 10px;} .header-modal .logo-modal a {height: 30px;} .header-modal h5 {font-size: 19px; margin-left:24px; width:calc(100% - 74px); width:-webkit-calc(100% - 74px); margin-top:14px; max-height:26px;} .project-type {font-size:17px;} .header-modal h6 {margin-left:24px; width:calc(100% - 74px); width:-webkit-calc(100% - 74px);} .project-image img {width:300px; height:auto;} .modal-content {margin-top:80px;} .modal-content .project-text {width: 80%; margin:20px 10% 170px 10%;} .prj-two {background-image: url('../assets/3.Latestwork/project2-mobile.jpg');} .prj-three {background-image: url('../assets/3.Latestwork/project3-mobile.jpg');} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { .bottom-white-bg {height: 88px;} .bottom-white-bg span {top: 18px;} #project-one {position:absolute; width:100%; top:54px; left:0; height: calc(50% - 71px); height: -webkit-calc(50% - 71px); height: -moz-calc(50% - 71px); height: -o-calc(50% - 71px);} #project-two {position:absolute; width:50%; left:0; height: calc(50% - 71px); height: -webkit-calc(50% - 71px); height: -moz-calc(50% - 71px); height: -o-calc(50% - 71px); top: calc(50% - 17px); top: -webkit-calc(50% - 17px); top: -moz-calc(50% - 17px); top: -o-calc(50% - 17px);} #project-three {position:absolute; width:50%; height: calc(50% - 71px); height: -webkit-calc(50% - 71px); height: -moz-calc(50% - 71px); height: -o-calc(50% - 71px); top: calc(50% - 17px); top: -webkit-calc(50% - 17px); top: -moz-calc(50% - 17px); top: -o-calc(50% - 17px);} #section3 .bg-hide h3 {left: 10px; font-size: 15px; max-width: 180px; bottom: 35px; padding: 3px 8px 5px 8px;} #section3 .bg-hide:hover h3 {left: 10px; font-size: 15px; max-width: 180px; bottom: 35px; padding: 3px 8px 5px 8px;} #section3 .bg-hide p {left: 10px; max-width: 180px; bottom: 8px; font-size: 13px; padding: 1px 8px 3px 8px;} #section3 .bg-hide:hover p {left: 10px; max-width: 180px; bottom: 8px; font-size: 13px; padding: 1px 8px 3px 8px;} .header-modal h5 {font-size: 16px; margin-left:16px; width:calc(100% - 32px); width:-webkit-calc(100% - 32px); max-height:20px;} .project-type {font-size:14px;} .header-modal h6 {font-size: 14px; margin-left:16px; width:calc(100% - 32px); width:-webkit-calc(100% - 32px);} .header-modal {height:70px;} ul.form-close li {margin:18px 10px;} .modal-content {margin-top:70px;} .modal-content .project-title {font-size:22px; margin: 80px 0 0 0;} .modal-content .project-text-bg {margin-bottom: -40px; margin-top: 0px;} .modal-content .project-text {font-size:16px; width: 80%; margin:20px 10% 80px 10%;} .modal-content .project-title-credits {font-size:22px; margin: 56px 0 0 0;} .modal-content .project-credits {font-size:15px; margin:20px 0 0 0; padding-bottom:0px;} .modal-content .logo-credits-bg {height: 48px; margin:0} .modal-content .logo-credits {width:60px; height:48px; left: -30px;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { #section3 h2 {color: #12171d !important;} #section3 .arrow-down {background-image:url(../assets/2.Business/arrow-down-white.svg); z-index: 10;} .bottom-white-bg {height: 38px; background-color: transparent;} .bottom-white-bg span {display:none; top:-258px; right: 100px; padding: 5px 0px; width: 134px; position: absolute;} #project-one {height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: -o-calc(100% - 60px);} #project-two {height: calc(50% - 30px); height: -webkit-calc(50% - 30px); height: -moz-calc(50% - 30px); height: -o-calc(50% - 30px);} #project-three {height: calc(50% - 30px); height: -webkit-calc(50% - 30px); height: -moz-calc(50% - 30px); height: -o-calc(50% - 30px); top: calc(50% - -30px); top: -webkit-calc(50% - -30px); top: -moz-calc(50% - -30px); top: -o-calc(50% - -30px);} #section3 .bg-hide h3 {font-size: 16px; bottom: 14px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover h3 {font-size: 16px; bottom: 14px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { #section3 h2 {color: #12171d !important;} #section3 .arrow-down {background-image:url(../assets/2.Business/arrow-down-white.svg); z-index: 10;} .bottom-white-bg {height: 38px; background-color: transparent;} .bottom-white-bg span {display: none; top:-204px; right: 100px; padding: 5px 0px; width: 134px; position: absolute;} #project-one {width:50%; height: calc(100% - 60px); height: -webkit-calc(100% - 60px); height: -moz-calc(100% - 60px); height: -o-calc(100% - 60px);} #project-two {right: 0; left: initial; top: 60px; height: calc(50% - 30px); height: -webkit-calc(50% - 30px); height: -moz-calc(50% - 30px); height: -o-calc(50% - 30px);} #project-three {height: calc(50% - 30px); height: -webkit-calc(50% - 30px); height: -moz-calc(50% - 30px); height: -o-calc(50% - 30px); top: calc(50% - -30px); top: -webkit-calc(50% - -30px); top: -moz-calc(50% - -30px); top: -o-calc(50% - -30px);} #section3 .bg-hide h3 {font-size: 15px; bottom: 10px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover h3 {font-size: 15px; bottom: 10px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} } /*-- iPhone 6 --*/ @media screen and (max-width: 400px) { .modal-content .project-title {font-size:20px; margin: 80px 0 0 0;} .modal-content .project-text {font-size:15px; width: 84%; margin:20px 8% 80px 8%;} .modal-content .project-title-credits {font-size:20px;} .modal-content .project-credits {font-size:15px;} #section3 .bg-hide h3 {max-width: 160px;} #section3 .bg-hide:hover h3 {max-width: 160px;} #section3 .bg-hide p {max-width: 160px;} #section3 .bg-hide:hover p {max-width: 160px;} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { #section3 .bg-hide h3 {font-size: 13px; max-width: 140px; padding: 6px 6px 6px 6px;} #section3 .bg-hide:hover h3 {font-size: 13px; max-width: 140px; padding: 6px 6px 6px 6px;} #section3 .bg-hide p {padding: 2px 4px 4px 4px; bottom: 8px; font-size: 12px;} #section3 .bg-hide:hover p {padding: 2px 4px 4px 4px; bottom: 8px; font-size: 12px;} .modal-content .project-title {font-size:20px; margin: 60px 0 0 0;} .modal-content .project-text {font-size:14px; width: 90%; margin:20px 5% 60px 5%;} .modal-content .project-title-credits {font-size:18px;} .modal-content .project-credits {font-size:14px;} #section3 .bg-hide h3 {max-width: 142px;} #section3 .bg-hide:hover h3 {max-width: 142px;} #section3 .bg-hide p {max-width: 142px;} #section3 .bg-hide:hover p {max-width: 142px;} .header-modal h5 {margin-left:12px; width:calc(100% - 58px); width:-webkit-calc(100% - 58px);} .project-type {font-size:13px;} .header-modal h6 {margin-left:12px; width:calc(100% - 58px); width:-webkit-calc(100% - 58px);} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { #project-one {height: calc(50% - 66px); height: -webkit-calc(50% - 66px); height: -moz-calc(50% - 66px); height: -o-calc(50% - 66px);} #project-two {height: calc(50% - 66px); height: -webkit-calc(50% - 66px); height: -moz-calc(50% - 66px); height: -o-calc(50% - 66px); top: calc(50% - 12px); top: -webkit-calc(50% - 12px); top: -moz-calc(50% - 12px); top: -o-calc(50% - 12px);} #project-three {height: calc(50% - 66px); height: -webkit-calc(50% - 66px); height: -moz-calc(50% - 66px); height: -o-calc(50% - 66px); top: calc(50% - 12px); top: -webkit-calc(50% - 12px); top: -moz-calc(50% - 12px); top: -o-calc(50% - 12px);} #section3 .bg-hide h3 {bottom: 10px;} #section3 .bg-hide:hover h3 {bottom: 10px;} #section3 .bg-hide p {display: none;} .bottom-white-bg span {padding:3px 39px 5px; top: 14px;} .bottom-white-bg {height: 78px; margin-top: 8px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { #section3 h2 {color: #12171d !important;} #section3 .arrow-down {background-image:url(../assets/2.Business/arrow-down-white.svg); z-index: 10;} .white-bg {height: 48px;} .bottom-white-bg {height: 38px; background-color: transparent;} .bottom-white-bg span {display: none; top:-204px; right: 100px; padding: 5px 0px; width: 134px; position: absolute;} #project-one {width:50%; top: 48px; height: calc(100% - 48px); height: -webkit-calc(100% - 48px); height: -moz-calc(100% - 48px); height: -o-calc(100% - 48px);} #project-two {right: 0; top: 48px; left: initial; height: calc(50% - 24px); height: -webkit-calc(50% - 24px); height: -moz-calc(50% - 24px); height: -o-calc(50% - 24px);} #project-three {height: calc(50% - 30px); height: -webkit-calc(50% - 24px); height: -moz-calc(50% - 24px); height: -o-calc(50% - 24px); top: calc(50% - -24px); top: -webkit-calc(50% - -24px); top: -moz-calc(50% - -24px); top: -o-calc(50% - -24px);} #section3 .bg-hide h3 {font-size: 14px; bottom: 10px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover h3 {font-size: 14px; bottom: 10px; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} #section3 .bg-hide:hover p {display:none; font-size: 12px; bottom: 14px; padding: 2px 15px 5px 15px; background-color: #12171d; color: #fff; left: 16px; z-index: 9; max-width: 300px;} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 813px) { .bottom-white-bg {height: 134px;} .bottom-white-bg span {top: 30px;} #project-one {height: calc(50% - 97px); width: 100%; height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px);} #project-two {height: calc(50% - 97px); left:0; height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} #project-three {height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { .bottom-white-bg {height: 100px;} .bottom-white-bg span {top:20px;} #project-one {top:60px; left:0; height: calc(100% - 160px); height: -webkit-calc(100% - 160px); height: -moz-calc(100% - 160px); height: -o-calc(100% - 160px);} #project-two {top:60px; height: calc(50% - 80px); height: -webkit-calc(50% - 80px); height: -moz-calc(50% - 80px); height: -o-calc(50% - 80px);} #project-three {height: calc(50% - 80px); height: -webkit-calc(50% - 80px); height: -moz-calc(50% - 80px); height: -o-calc(50% - 80px); top: calc(50% - 25px); top: -webkit-calc(50% - 20px); top: -moz-calc(50% - 20px); top: -o-calc(50% - 20px);} } /*-- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { .bottom-white-bg {height: 134px;} .bottom-white-bg span {top: 30px;} #project-one {position:absolute; width:100%; top:60px; left:0; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px);} #project-two {position:absolute; width:50%; left:0; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} #project-three {position:absolute; width:50%; height: calc(50% - 97px); height: -webkit-calc(50% - 97px); height: -moz-calc(50% - 97px); height: -o-calc(50% - 97px); top: calc(50% - 37px); top: -webkit-calc(50% - 37px); top: -moz-calc(50% - 37px); top: -o-calc(50% - 37px);} } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { .bottom-white-bg {height: 130px;} .bottom-white-bg span {top:40px;} #project-one {overflow: hidden; top:60px; left:0; position:absolute; width:50%; height: calc(100% - 190px); height: -webkit-calc(100% - 190px); height: -moz-calc(100% - 190px); height: -o-calc(100% - 190px);} #project-two {overflow: hidden; top:60px; right:0; position:absolute; width:50%; height: calc(50% - 95px); height: -webkit-calc(50% - 95px); height: -moz-calc(50% - 95px); height: -o-calc(50% - 95px);} #project-three {overflow: hidden; right:0; position:absolute; width:50%; height: calc(50% - 95px); top: calc(50% - 35px); height: -webkit-calc(50% - 95px); top: -webkit-calc(50% - 35px); height: -moz-calc(50% - 95px); top: -moz-calc(50% - 35px); height: -o-calc(50% - 95px); top: -o-calc(50% - 35px);} } /*-- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { .bottom-white-bg {height: 180px;} .bottom-white-bg span {top: 44px;} #project-one {position:absolute; width:100%; top:60px; left:0; height: calc(50% - 120px); height: -webkit-calc(50% - 120px); height: -moz-calc(50% - 120px); height: -o-calc(50% - 120px);} #project-two {position:absolute; width:50%; left:0; height: calc(50% - 120px); height: -webkit-calc(50% - 120px); height: -moz-calc(50% - 120px); height: -o-calc(50% - 120px); top: calc(50% - 60px); top: -webkit-calc(50% - 60px); top: -moz-calc(50% - 60px); top: -o-calc(50% - 60px);} #project-three {position:absolute; width:50%; height: calc(50% - 120px); height: -webkit-calc(50% - 120px); height: -moz-calc(50% - 120px); height: -o-calc(50% - 120px); top: calc(50% - 60px); top: -webkit-calc(50% - 60px); top: -moz-calc(50% - 60px); top: -o-calc(50% - 60px);} #section3 .bg-hide h3 {font-size: 26px; bottom: 68px;} #section3 .bg-hide p {font-size: 20px;} #section3 .bg-hide:hover h3 {font-size: 26px; bottom: 68px;} #section3 .bg-hide:hover p {font-size: 20px;} } /*-----------------------------------------------------------------------------------*/ /* 6. Reviews /*-----------------------------------------------------------------------------------*/ #section4 {background-repeat:no-repeat; width: 100%; background-position: center center; background-image:url(../assets/8.Reviews/work-map.svg);} #section4 h2 {color: #12171d !important;} #section4 .cd-testimonials-wrapper {position: relative; width: 90%; max-width: 768px; border: solid; border-width: 6px; border-color: #26af5f; margin: 90px auto 0; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding: 100px 80px 90px; z-index: 1;} #section4 .cd-testimonials {color: #12171d; text-align: center;} #section4 .cd-testimonials::after {clear: both; content: ""; display: table;} #section4 .cd-testimonials > li {position: absolute; opacity: 0;} #section4 .cd-testimonials > li:first-child {position: relative; opacity: 1;} #section4 .cd-testimonials p {font-family: "Neris-SemiBold-Italic"; font-style:italic; line-height: 1.4; margin-bottom: 1em; padding: 0 64px; font-size: 25px;} #section4 .cd-testimonials a {font-size: 20px; text-decoration: none; color: #26af5f;} #section4 .cd-testimonials a:hover {text-decoration: line-through; color: #26af5f;} #section4 .cd-author img, .cd-author .cd-author-info {display: inline-block; vertical-align: middle;} #section4 .cd-author img {width: 50px; height: 50px; border-radius: 50%; margin-right: 5px; /*box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);*/} #section4 .cd-author .cd-author-info {text-align: left; line-height: 1.2;} #section4 .cd-author .cd-author-info li:first-child {font-size: 14px; font-size: 0.875rem; text-transform: uppercase; font-family: "Neris-SemiBold";} #section4 .cd-author .cd-author-info li:last-child {font-size: 12px; font-size: 0.75rem; color: #6b6b70; font-family: "Neris-SemiBold";} #section4 .flex-direction-nav li {position: absolute; height: 100%; width: 40px; top: 0;} #section4 .flex-direction-nav li:first-child {left: 1.2%; background-image:url(../assets/2.Business/arrow-left-dark.svg); background-repeat: no-repeat; background-position: 50%;} #section4 .flex-direction-nav li:last-child {right: 1.2%; background-image:url(../assets/2.Business/arrow-right-dark.svg); background-repeat: no-repeat; background-position: 50%;} #section4 .flex-direction-nav li a {display: block; height: 100%; width: 100%; /* image replacement */ overflow: hidden; text-indent: 100%; white-space: nowrap; -webkit-transition: background-color 0.2s; -moz-transition: background-color 0.2s; transition: background-color 0.2s;} #section4 .no-touch .flex-direction-nav li a:hover {background-color: #323234;} #section4 .flex-direction-nav li:first-child:hover {left: 1.2%; background-image:url(../assets/2.Business/arrow-left.svg); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section4 .flex-direction-nav li:last-child:hover {right: 1.2%; background-image:url(../assets/2.Business/arrow-right.svg); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section4 .flex-direction-nav li a::before, .flex-direction-nav li a::after {/* left and right arrows in css only */ /*content: '';*/ position: absolute; left: 50%; top: 50%; width: 2px; height: 13px; background-color: #ffffff;} #section4 .flex-direction-nav li a::before {-webkit-transform: translateY(-35px) rotate(45deg); -moz-transform: translateY(-35px) rotate(45deg); -ms-transform: translateY(-35px) rotate(45deg); -o-transform: translateY(-35px) rotate(45deg); transform: translateY(-35px) rotate(45deg);} #section4 .flex-direction-nav li a::after {-webkit-transform: translateY(-27px) rotate(-45deg); -moz-transform: translateY(-27px) rotate(-45deg); -ms-transform: translateY(-27px) rotate(-45deg); -o-transform: translateY(-27px) rotate(-45deg); transform: translateY(-27px) rotate(-45deg);} #section4 .flex-direction-nav li:last-child a::before {-webkit-transform: translateY(-35px) rotate(-45deg); -moz-transform: translateY(-35px) rotate(-45deg); -ms-transform: translateY(-35px) rotate(-45deg); -o-transform: translateY(-35px) rotate(-45deg); transform: translateY(-35px) rotate(-45deg);} #section4 .flex-direction-nav li:last-child a::after {-webkit-transform: translateY(-27px) rotate(45deg); -moz-transform: translateY(-27px) rotate(45deg); -ms-transform: translateY(-27px) rotate(45deg); -o-transform: translateY(-27px) rotate(45deg); transform: translateY(-27px) rotate(45deg);} #section4 .cd-see-all {position: absolute; z-index: 1; left: 0; bottom: 0; width: 100%; height: 22px; line-height: 50px; text-align: center; text-transform: uppercase; -webkit-transition: color, 0.2s; -moz-transition: color, 0.2s; transition: color, 0.2s; background-image:url(../assets/8.Reviews/logo-trustpilot.svg); background-position: center center; background-repeat:no-repeat; display: inline-block; margin-bottom: 6px;} #section4 .cd-see-all:hover {background-image:url(../assets/8.Reviews/logo-trustpilot-green.svg); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section4 .no-touch .cd-see-all:hover {color: #26af5f;} .flex-viewport {} @media only screen and (max-width: 1139px) { #section4 .cd-testimonials-wrapper { padding: 100px 40px 80px;} } @media only screen and (max-width: 1099px) { #section4 .cd-testimonials-wrapper { padding: 100px 0px 80px; max-width: 718px;} #section4 .cd-testimonials p {padding: 0 74px; font-size: 22px;} } @media only screen and (max-width: 991px) { #section4 .cd-testimonials-wrapper {padding: 110px 0px 80px; max-width: 518px;} #section4 .cd-testimonials p {font-size: 20px;} } @media only screen and (max-width: 768px) { #section4 .cd-testimonials-wrapper {padding: 110px 0px 80px; margin: 125px auto 0;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { #section4 h2 {top: 58px;} #section4 .cd-testimonials-wrapper {padding: 60px 0px 70px; margin: 30px auto 0; max-width: 330px;} #section4 .cd-testimonials p {padding: 0 44px; font-size: 18px;} #section4 .flex-direction-nav li:first-child {left: 0;} #section4 .flex-direction-nav li:last-child {right: 0;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { #section4 .cd-testimonials-wrapper {padding: 20px 0px 40px; margin: 60px auto 0; max-width: 598px;} #section4 .cd-testimonials p {font-size: 14px; padding: 0 44px;} #section4 .cd-testimonials a {font-size: 12px;} #section4 .cd-author img {width: 30px; height: 30px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 12px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 12px;} #section4 .cd-see-all {height: 12px;} #section4 .flex-direction-nav li {width: 30px;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 550px) and (max-height: 300px) { #section4 .cd-testimonials-wrapper {padding: 10px 0px 30px; margin: 60px auto 0; max-width: 598px; border-width: 4px;} #section4 .cd-testimonials p {font-size: 12px; padding: 0 36px; margin-bottom: 4px;} #section4 .cd-testimonials a {font-size: 10px;} #section4 .cd-author img {width: 30px; height: 30px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 10px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 10px;} #section4 .cd-see-all {height: 12px;} #section4 .flex-direction-nav li {width: 30px;} #section4 .flex-direction-nav li:first-child {left: 0;} #section4 .flex-direction-nav li:last-child {right: 0;} } /*-- iPhone 6 --*/ @media screen and (max-width: 400px) { #section4 .cd-testimonials-wrapper {padding: 30px 0px 40px; margin: 24px auto 0; max-width: 280px; border-width: 4px;} #section4 .cd-testimonials p {padding: 0 34px; font-size: 16px; line-height: 1.6;} #section4 .cd-testimonials a {font-size: 14px;} #section4 .flex-direction-nav li {width: 30px;} #section4 .cd-author img {width: 40px; height: 40px;} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { #section4 .cd-testimonials-wrapper {padding: 20px 0px 30px; max-width: 260px;} #section4 .cd-see-all {height: 18px;} #section4 .cd-testimonials p {line-height: 1.4; font-size: 15px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 12px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 12px;} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { #section4 .cd-testimonials-wrapper {padding: 20px 0px 32px; margin: 0px auto;} #section4 .cd-testimonials p {font-size: 12px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 245px) { #section4 .cd-testimonials-wrapper {padding: 6px 0px 24px; margin: 60px auto; max-width: 598px; border-width: 4px;} #section4 .cd-testimonials p {font-size: 12px; padding: 0 36px; margin-bottom: 4px;} #section4 .cd-testimonials a {font-size: 10px;} #section4 .cd-author img {width: 30px; height: 30px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 10px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 10px;} #section4 .cd-see-all {height: 12px;} #section4 .flex-direction-nav li {width: 30px;} #section4 .flex-direction-nav li:first-child {left: 0;} #section4 .flex-direction-nav li:last-child {right: 0;} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 825px) { #section4 .cd-testimonials-wrapper {margin: 150px auto; padding: 70px 0px 70px; max-width: 460px; } #section4 .cd-testimonials p {font-size: 24px; padding: 0 56px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 16px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 14px;} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { #section4 .cd-testimonials-wrapper {padding: 80px 0px 40px; max-width: 688px;} #section4 .cd-testimonials p {font-size: 18px;} #section4 .cd-testimonials a {font-size: 16px; } #section4 .cd-author img {width: 40px; height: 40px; margin-right: 10px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 12px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 12px;} #section4 .cd-see-all {height: 16px;} } /*-- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { #section4 .cd-testimonials p {font-size: 26px; padding: 0 74px;} #section4 .cd-testimonials a {font-size: 20px; } #section4 .cd-author img {width: 60px; height: 60px; margin-right: 10px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 18px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 16px;} } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { #section4 .cd-testimonials-wrapper {max-width: 754px; padding: 100px 0px 80px; } #section4 .cd-testimonials p {font-size: 22px;} #section4 .cd-see-all {height: 20px;} } /*-- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { #section4 .cd-testimonials-wrapper {margin: 190px auto; padding: 140px 0px 140px;} #section4 .cd-testimonials p {font-size: 36px; padding: 0 74px;} #section4 .cd-testimonials a {font-size: 28px; } #section4 .cd-author img {width: 80px; height: 80px; margin-right: 14px;} #section4 .cd-see-all {height: 30px; margin-bottom: 14px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 22px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 20px;} #section4 .flex-direction-nav li {width: 60px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { #section4 .cd-testimonials-wrapper {max-width: 828px; padding: 140px 120px 140px;} #section4 .cd-testimonials p {font-size: 32px; line-height: 1.6;} #section4 .cd-testimonials a {font-size: 28px; } #section4 .cd-author img {width: 80px; height: 80px; margin-right: 14px;} #section4 .cd-author .cd-author-info li:first-child {font-size: 22px;} #section4 .cd-author .cd-author-info li:last-child {font-size: 20px;} #section4 .flex-direction-nav li {width: 60px;} } /*-----------------------------------------------------------------------------------*/ /* 7. Get a Quote /*-----------------------------------------------------------------------------------*/ #section5 h2 {color: white;} #section5 form {position:relative; z-index:100; top:230px; width:100%; height:100%;} #section5 .form-container .form-content p {float:left; margin-top: 15px; font-family: 'FFADMatro'; font-size: 18px;} #section5 .form-container.container1 {max-width: 800px; height: 42px; margin: auto;} #section5 .form-container.container1 .form-content {height:42px; color:#fff;} #section5 .form-container.container1 .form-content input {float:left; width: 328px; height:42px; margin: 0 20px; border-radius:0; border: 4px solid #26af5f; color:#fff; background-color: transparent; font: 18px 'Neris-SemiBold'; padding: 0 10px 2px;} #section5 .form-container.container1 .form-content select {float:left; width:266px; margin: 0 0 0 20px; background-color:transparent; font: 18px 'Neris-SemiBold'; color:#fff; height:42px; border: 4px solid #26af5f; border-radius:0px; padding: 0 10px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none;} #section5 .form-container.container1 .form-content select option {background-color: #26af5f !important;} #section5 .form-container.container2 {max-width: 800px; height: 42px; margin: auto; margin-top: 30px;} #section5 .form-container.container2 .form-content {height: 84px; color:#fff;} #section5 .form-container.container2 .form-content select {float:left; width:369px; margin: 0 20px; background-color:transparent; font: 18px 'Neris-SemiBold'; color:#fff; height:42px; border: 4px solid #26af5f; border-radius:0px; padding: 0 10px 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none;} #section5 .form-container.container2 .form-content select option {background-color: #26af5f !important;} #section5 .form-container.container3 {max-width: 800px; height: 84px; margin: auto; margin-top: 30px;} #section5 .form-container.container3 .form-content {height: 84px; top: 52px; color:#fff;} #section5 .form-container.container3 .form-content textarea {float:left; width: 100%; height: 84px; background-color:transparent; font: 18px 'Neris-SemiBold'; color:#fff; border: 4px solid #26af5f; border-radius:0px; padding: 0 10px 2px;} #section5 .form-container.container4 {max-width: 800px; height: 42px; margin: auto; margin-top: 30px; position:relative;} #section5 .form-container.container4 .form-content {height: 42px; top: 52px; color:#fff;} #section5 .form-container.container4 .form-content input[type="email"] {float:left; width: 691px; height:42px; margin: 0 0 0 20px; border-radius:0; border: 4px solid #26af5f; color:#fff; background-color: transparent; font: 18px 'Neris-SemiBold'; padding: 0 10px 2px;} #section5 .form-container.container4 .form-content input.submit-btn {width:120px; height:42px; margin-top:32px; margin-bottom:100px; float:right; background:#26af5f; border: 0px #12171d; color:#FFF; padding-bottom: 9px; font: 17px 'Neris-SemiBold'; border-radius:0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -webkit-appearance: none; -webkit-border-radius:0;} #section5 .form-container.container4 .form-content input.submit-btn:hover {background:#1d8747; border: 0px #12171d;} .bg-blue {background-color: #12171d !important;} .mandatory {color: white; margin: 30px auto 0 auto; text-align: left; font-family: 'Neris-Light'; width:800px;} .msg-error {color:red; float:left; margin:28px 0 0 10px; width:104px;} .g-recaptcha.error {border:solid 2px red; padding:0; width:307px;} .rc-anchor-dark.rc-anchor-normal {border:none !important;} .rc-anchor-dark {background-color:#12171d;} .g-recaptcha {position:relative; left:0; width:302px; top:16px; float:left;} .g-recaptcha > div > div {float:left; top:0; position:absolute;} @media screen and (max-width: 991px) { #section5 h2 {margin-left:0; left:0;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {max-width: 700px;} #section5 .form-container.container1 .form-content input {width: 250px; margin: 0 14px;} #section5 .form-container.container1 .form-content select {width:263px; margin: 0 0 0 14px;} #section5 .form-container.container2 .form-content select {width:269px; margin: 0 11px;} #section5 .form-container.container4 .form-content input[type="email"] {width: 600px; margin:0 0 0 11px;} /*#section5 .form-container.container4 .form-content input.submit-btn {float: left;}*/ } @media screen and (max-width: 767px) { #section5 .form-container .form-content p {float:left; margin-top: 15px; font-size: 16px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {max-width: 540px;} #section5 .form-container.container1 .form-content input {width: 188px; margin: 0 15px;} #section5 .form-container.container1 .form-content select {width:178px; margin: 0 0 0 15px;} #section5 .form-container.container2 .form-content select {width:162px; margin: 0 15px;} #section5 .form-container.container4 .form-content input[type="email"] {width: 446px; margin: 0 0 0 15px;} #section5 .form-container.container4 .form-content input.submit-btn {width: 100px;} .bot a {width: 126px;} .bot span {font-size: 11px;} } @media screen and (max-width: 639px) { #section5 h2 {width: 100%;} #section5 form {margin: 0; padding: 0; top: 190px;} #section5 .form-container .form-content p {display: none;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {width: 440px;} #section5 .form-container.container1 .form-content input[type="text"] {width: 100%; margin: 0;} #section5 .form-container.container1 .form-content select {width: 100%; margin: 20px 0 0 0;} #section5 .form-container.container2 .form-content select {width: 100%; margin: 20px 0 0 0;} #section5 .form-container.container3 .form-content textarea {margin-top: 20px;} #section5 .form-container.container4 .form-content input[type="email"] {width: 100%; margin: 20px 0 10px 0;} #section5 .form-container.container4 .form-content input.submit-btn {margin: 104px auto 100px; padding-top:5px; position:relative; right:50%; margin-right:-50px;} .form-group {float:left;} .alert-warning {width:440px; margin:auto; font-size:14px; text-align:left;} .msg-error {margin: 160px 0 0 -95px; position:absolute; left:50%; width:initial;} .g-recaptcha {top:0; left:50%; margin-left:-152px;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { #section5 h2 {top: 60px;} #section5 form {top: 110px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {width: 92%;} #section5 .form-container.container1 .form-content input[type="text"] { margin: 0;} #section5 .form-container.container1 .form-content select { margin: 10px 0 0 0;} #section5 .form-container.container2 .form-content select {margin: 10px 0 0 0;} #section5 .form-container.container3 .form-content textarea {margin-top: 10px;} #section5 .form-container.container4 .form-content input[type="email"] { margin: -5px 0 10px 0;} .g-recaptcha {} .msg-error {margin: 125px 0 0 -95px;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { #section5 h2 {left: 50%} #section5 form {top:100px} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 550px) and (max-height: 300px) { } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { #section5 h2 {top: 60px;} #section5 form {top: 110px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {} #section5 .form-container.container1 .form-content input[type="text"] {margin: 0;} #section5 .form-container.container1 .form-content select {margin: 10px 0 0 0;} #section5 .form-container.container2 .form-content select {margin: 10px 0 0 0;} #section5 .form-container.container3 .form-content textarea { margin-top: 10px;} #section5 .form-container.container4 .form-content input[type="email"] {margin: -10px 0 10px 0;} #section5 .form-container.container1 {height: 38px;} #section5 .form-container.container1 .form-content {height:38px;} #section5 .form-container.container1 .form-content input {height:38px;} #section5 .form-container.container1 .form-content select {height:38px;} #section5 .form-container.container2 {height: 38px;} #section5 .form-container.container2 .form-content {height: 76px; color:#fff;} #section5 .form-container.container2 .form-content select {height:38px;} #section5 .form-container.container3 {max-width: 800px; height: 66px; margin-top:16px;} #section5 .form-container.container3 .form-content {height: 76px;} #section5 .form-container.container3 .form-content textarea {height: 54px;} #section5 .form-container.container4 {max-width: 800px; height: 38px;} #section5 .form-container.container4 .form-content {height: 38px;} #section5 .form-container.container4 .form-content input[type="email"] {height:38px;} #section5 .form-container.container4 .form-content input.submit-btn {height:38px; padding-top:5px;} .msg-error {margin: 117px 0 0 -95px;} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { #section5 h2 {top: 60px;} #section5 form {top: 102px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {} #section5 .form-container.container1 .form-content input[type="text"] {margin: 0;} #section5 .form-container.container1 .form-content select {margin:8px 0 0 0;} #section5 .form-container.container2 .form-content select {margin:8px 0 0 0;} #section5 .form-container.container3 .form-content textarea { margin-top: 9px;} #section5 .form-container.container4 .form-content input[type="email"] {margin: -10px 0 8px 0;} #section5 .form-container.container1 {height: 32px;} #section5 .form-container.container1 .form-content {height:32px;} #section5 .form-container.container1 .form-content input {height:30px; border:3px solid #26af5f; font-size:15px;} #section5 .form-container.container1 .form-content select {height:30px; border:3px solid #26af5f; font-size:15px;} #section5 .form-container.container2 {height: 30px;} #section5 .form-container.container2 .form-content {height: 64px; color:#fff;} #section5 .form-container.container2 .form-content select {height:30px; border:3px solid #26af5f; font-size:15px;} #section5 .form-container.container3 {max-width: 800px; height: 30px; margin-top: 22px;} #section5 .form-container.container3 .form-content {height: 30px;} #section5 .form-container.container3 .form-content textarea {height:30px; border:3px solid #26af5f; font-size:15px; margin-top: 0;} #section5 .form-container.container4 {max-width: 800px; height: 30px; margin-top:17px;} #section5 .form-container.container4 .form-content {height: 30px;} #section5 .form-container.container4 .form-content input[type="email"] {height:30px; border:3px solid #26af5f; font-size:15px;} #section5 .form-container.container4 .form-content input.submit-btn {height:38px; padding:0 0 3px; padding-top:5px;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 245px) { #section5 form {top:20px;} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S --*/ @media screen and (max-width: 700px) and (min-height: 825px) { #section5 form {top: 260px;} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { #section5 form {top:150px;} #section5 .form-container.container2 {margin-top:24px;} #section5 .form-container.container3 {margin-top:24px;} #section5 .form-container.container4 {margin-top: 24px;} } /*-- Tablet M --*/ @media screen and (max-width: 800px) and (min-height: 890px) { #section5 h2 {width: 100%;} #section5 form {margin: 0; padding: 0; top: 260px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {margin-top: 54px;} } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { #section5 form {top:200px;} #section5 .form-container.container2 {margin-top:30px;} #section5 .form-container.container3 {margin-top:30px;} #section5 .form-container.container4 {margin-top: 30px;} } /*-- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { #section5 form {top:360px;} #section5 .form-container.container1, #section5 .form-container.container2, #section5 .form-container.container3, #section5 .form-container.container4 {margin-top: 64px;} #section5 .form-container.container2 {margin-top: 60px;} #section5 .form-container.container3 {margin-top: 60px;} #section5 .form-container.container4 {margin-top: 60px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { #section5 form {top: 330px;} } /*-----------------------------------------------------------------------------------*/ /* 8. Contacts /*-----------------------------------------------------------------------------------*/ #section6 {height: 60%; width: 100%; margin: 0;} #section6 h4 {text-align: left; font-size:22px; position: absolute; margin-left: 16.666%; top: 220px; line-height: 32px; color: #ffffff; font-family: Neris-Semibold;} #section6 a.mail {z-index: 30; left: 16.666%; text-decoration: none; font-size:42px; top: 296px; position: absolute; background-color: #12171d; color: #ffffff; padding: 8px 16px 8px 16px; cursor: pointer;} #section6 a.mail:hover {color: #26af5f; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} #section6 #map {width: 33.333%; position: absolute; top: 0; right: 0; height: 60%; overflow: hidden;} #section6 #map .map-img {width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../assets/5.Followus/map-cover-2.jpg'); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 #map:hover .map-img {transform: scale(1.2); transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 #video {width: 33.333%; height: 40%; position: absolute; left: 33.333%; bottom: 0; overflow: hidden;} #section6 #video .video-img {width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; background-image: url('../assets/5.Followus/promo-video.jpg'); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 #video:hover .video-img {transform: scale(1.2); overflow: hidden; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 .bg-hide {width: 100%; height: 100%; position: absolute; top: 0; z-index: 9;} #section6 .bg-hide .bg {width: 100%; height: 100%; position: absolute; top: 0; background:repeating-linear-gradient(-40deg, #12171d, #12051D 1px, #12051D 1px, #12171d 4px); opacity:0.4;} #section6 .bg-hide h3 {font-size: 28px; text-align: left; position: absolute; bottom: -50px; left: 30px; text-transform: uppercase;} #section6 .bg-hide p {font-size: 22px; text-align: left; font-family: Neris-SemiBold; position: absolute; bottom: -50px; left: 30px;} #section6 .bg-hide:hover h3 {padding: 0px 15px 4px 15px; bottom: 30px; background-color: #12171d; color: #fff; opacity: 1; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 .bg-hide:hover p {padding: 0px 15px 6px 15px; bottom: 30px; background-color: #12171d; color: #fff; opacity: 1; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #section6 .bg-hide .bg:hover {background:none; opacity: 1;} #section6 p span {color:#26af5f;} #section6 #social {position: absolute; width: 100%; height: 100%; bottom: 0; left: 0; background-color: transparent;} #section6 #social ul.social-left {position: absolute; left: 0; width: 33.333%; bottom: 0; height: 40%} #section6 #social ul.social-right {position: absolute; right: 0; width: 33.333%; bottom: 0; height: 40%} #section6 #social ul li a {background-color: #22a858; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} #section6 #social ul li:hover a {background-color: #209951;} #section6 #social ul li.press-kit a {background-color: transparent; text-decoration:none;} #section6 #social ul li.press-kit a:hover {background-color: transparent; text-decoration: line-through;} /*INSTAGRAM*/ #section6 #social ul.social-insta {height: 100%; width: 16.666%; right: 33.333%; position: absolute; top: 0;} #section6 #social ul.social-insta li.insta a {top: 0; left: 0; width: 100%; height: 20%; position: absolute; background-image:url(../assets/5.Followus/insta.svg); background-position:center center; background-repeat: no-repeat; background-size:24%;} #section6 #social ul.social-insta li.insta:hover a {background-image:url(../assets/5.Followus/insta-hov.svg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} /* PRESSKIT #section6 #social ul.social-left li.press-kit {position: absolute; width: 50%; height: 50%; right: 0; bottom: 0; background-color: transparent;} #section6 #social ul.social-left li.press-kit a {font-size: 14px; top:37%; position: relative; font-family: 'Neris-Black'; color: #1d8747; transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} #section6 #social ul.social-left li.press-kit a:hover {color: white;}*/ /*LINKEDIN*/ #section6 #social ul.social-left li.linkedin a {bottom: 0; left: 0; width: 50%; height: 50%; position: absolute; background-image:url(../assets/5.Followus/in.svg); background-position:center center; background-repeat: no-repeat; background-size:24%;} #section6 #social ul.social-left li.linkedin:hover a {background-image:url(../assets/5.Followus/in-hov.svg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} /*BEHANCE*/ #section6 #social ul.social-left li.behance a {top: 0; right: 0; width: 50%; height: 50%; position: absolute; background-image:url(../assets/5.Followus/be.svg); background-position:center center; background-repeat: no-repeat; background-size:24%;} #section6 #social ul.social-left li.behance:hover a {background-image:url(../assets/5.Followus/be-hov.svg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} /*COPYRIGHT*/ #section6 #social ul.social-right li.copyright {position: absolute; text-align: left; width: 50%; height: 50%; left: 6px; bottom: 0; background-color: transparent;} #section6 #social ul.social-right li.copyright p {font-size: 16px; bottom:10px; position: absolute; width: 150px; font-family: 'Neris-Black'; color: #1d8747;} /*FACEBOOK*/ #section6 #social ul.social-right li.facebook a {top: 0; left: 0; width: 50%; height: 50%; position: absolute; background-image:url(../assets/5.Followus/fb.svg); background-position:center center; background-repeat: no-repeat; background-size:24%;} #section6 #social ul.social-right li.facebook:hover a {background-image:url(../assets/5.Followus/fb-hov.svg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} /*YOUTUBE*/ #section6 #social ul.social-right li.youtube a {bottom: 0; right: 0; width: 50%; height: 50%; position: absolute; background-image:url(../assets/5.Followus/tube.svg); background-position:center center; background-repeat: no-repeat; background-size:24%;} #section6 #social ul.social-right li.youtube:hover a {background-image:url(../assets/5.Followus/tube-hov.svg); transition:all 0.3s ease-in-out; -webkit-transition:all 0.3s ease-in-out; cursor: pointer;} @media screen and (max-width: 1199px) { #section6 a.mail {font-size:34px; padding: 10px 16px 14px;} } @media screen and (max-width: 1099px) { #section6 .bg-hide h3 {font-size: 25px; text-align: left; bottom: 22px; max-width: 70%; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section6 .bg-hide p {font-size: 16px; text-align: left; bottom: 22px; padding: 0px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section6 .bg-hide:hover h3 {font-size: 25px; text-align: left; bottom: 22px; max-width: 70%; padding: 0px 15px 4px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} #section6 .bg-hide:hover p {font-size: 16px; text-align: left; bottom: 22px; padding: 0px 15px 6px 15px; background-color: #12171d; color: #fff; left: 30px; z-index: 9;} } @media screen and (max-width: 991px) { #section6 h4 {font-size:20px; top: 180px;} #section6 .bg-hide .bg {opacity: 0.2;} #section6 a.mail {font-size:28px; top: 255px; padding: 6px 16px 10px 16px;} #section6 #social ul.social-left {left: 16.7%;} #section6 #map {top:50%; width: 50%; height: 30%;} #section6 #video {width: 50%; height: 30%; bottom: 20%; left: 0;} #section6 #social ul.social-left, #section6 #social ul.social-right {width: 40%;} #section6 #social ul.social-insta {width: 20%; right: 40%;} #section6 #social ul.social-left {left:0;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top: 50%;} #section6 #social ul.social-insta li.insta a {top: 80%;} #section6 #social ul.social-right li.copyright {left: -50%; height: 6%; bottom: 3px;} #section6 #social ul.social-right li.copyright p {display: none;} #section6 #social ul.social-left li.press-kit {display: none;} /*6 COLLUM AT BOTTOM #section6 #social ul.social-left, #section6 #social ul.social-right {width: 33.333%;} #section6 #social ul.social-insta {width: 16.666%;} #section6 #social ul.social-left li.press-kit {left: -50%; background-color: #22a858;}*/ } @media screen and (max-width: 639px) { #section6 h2 {width:100%; margin-left:0; left:0;} #section6 {height: 50%;} #section6 h4 {font-size:19px; top: 160px; margin-left: 8.333%;} #section6 a.mail {font-size:28px; top: 250px; left: 8.333%; padding: 10px 16px 10px 16px;} #section6 .bg-hide h3 {bottom: 22px; padding: 2px 10px 4px 10px;} #section6 .bg-hide p {font-size: 13px; max-width: 180px; padding: 2px 10px 5px 10px;} #section6 .bg-hide:hover h3 {bottom: 22px; padding: 2px 10px 4px 10px;} #section6 .bg-hide:hover p {font-size: 13px; max-width: 180px; padding: 2px 10px 5px 10px;} } /*-- iPhone 6 Plus --*/ @media screen and (max-width: 479px) { #section6 h4 {font-size:18px; width:302px; top: 120px; line-height: 1.5;} #section6 a.mail {font-size:20px; top: 212px; padding: 4px 12px 6px;} #section6 .bg-hide h3 {font-size: 17px; bottom: 12px; left: 10px; max-width: 140px;} #section6 .bg-hide h3.adjust {font-size: 19px; bottom: 12px; max-width: 64%;} #section6 .bg-hide p {font-size: 11px; bottom: 12px; left:10px; max-width: 78%;} #section6 .bg-hide:hover h3 {font-size: 14px; bottom: 12px; left:10px; max-width: 64%;} #section6 .bg-hide:hover h3.adjust {font-size: 14px; bottom: 38px; left:10px; max-width: 64%;} #section6 .bg-hide:hover p {font-size: 11px; bottom: 12px; left:10px; max-width: 78%;} #section6 #social ul.social-left {height: 28%} #section6 #social ul.social-right {height: 28%} #section6 #social ul.social-insta li.insta a {top: 86%; height:14%;} #section6 br {display: none;} #section6 #map {height: 36%; top: 50%} #section6 #video {height: 36%; top:50%;} /*INSTAGRAM*/ #section6 #social ul.social-insta li.insta a {background-size: 32%;} /*LINKEDIN*/ #section6 #social ul.social-left li.linkedin a {background-size:32%;} /*BEHANCE*/ #section6 #social ul.social-left li.behance a {background-size:36%;} /*FACEBOOK*/ #section6 #social ul.social-right li.facebook a {background-size:36%;} /*YOUTUBE*/ #section6 #social ul.social-right li.youtube a {background-size:32%;} } /*-- iPhone 6 Plus Landscape --*/ @media screen and (min-width: 680px) and (max-height: 450px) { #section6 h4 {display: none;} #section6 a.mail {top:66px; font-size: 20px; left: 50%; margin-left: -144px;} #section6 #video {height:44%; bottom: 17%;} #section6 #map {height:44%; top:39%;} #section6 .bg-hide h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 #social ul.social-insta li.insta a {top: 83%; height: 17%; background-size:22%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top: 58%;} #section6 #social ul.social-left li.linkedin a {height: 42%; background-size:23%;} #section6 #social ul.social-right li.facebook a {height: 42%; background-size:23%;} #section6 #social ul.social-left li.behance a {height: 42%; background-size:24%;} #section6 #social ul.social-right li.youtube a {height: 42%; background-size:24%;} } /*-- iPhone 6 Landscape --*/ @media screen and (min-width: 560px) and (max-height: 375px) { #section6 h2 {width: 100%; margin-left: 0;} #section6 h4 {display: none;} #section6 a.mail {top:60px; font-size: 18px; left: 50%; margin-left: -131px; padding:4px 16px 6px 16px;} #section6 #video {height:42%; bottom: 17%;} #section6 #map {height:42%; top:41%;} #section6 .bg-hide h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 #social ul.social-insta li.insta a {top: 83%; height: 17%; background-size:22%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top: 58%;} #section6 #social ul.social-left li.linkedin a {height: 42%; background-size:23%;} #section6 #social ul.social-right li.facebook a {height: 42%; background-size:23%;} #section6 #social ul.social-left li.behance a {height: 42%; background-size:24%;} #section6 #social ul.social-right li.youtube a {height: 42%; background-size:24%;} } /*-- iPhone 5 --*/ @media screen and (max-width: 359px) and (max-height: 568px) { #section6 h4 {line-height: 1.5; font-size: 15px; top: 94px; width: 258px;} #section6 br {display: none;} #section6 a.mail {font-size:18px;} #section6 a.mail {top: 186px;} #section6 .bg-hide h3 {font-size: 11px; max-width: 123px; left:7px;} #section6 .bg-hide:hover h3 {font-size: 11px; max-width: 123px; left:7px;} #section6 #social ul.social-left {height: 26%;} #section6 #social ul.social-right {height: 26%;} #section6 #social ul.social-insta li.insta a {top: 87%; height:13%;} #section6 #map {height: 34%; top:53%;} #section6 #video {height: 34%; top:53%;} } /*-- iPhone 4 --*/ @media screen and (max-width: 359px) and (max-height: 445px) { #section6 h4 {top: 94px;} #section6 a.mail {top: 155px;} #section6 #map {height: 32%; top: 55%} #section6 #video {height: 32%; top:55%;} } /*-- iPhone 4 & 5 Landscape --*/ @media screen and (min-width: 480px) and (max-height: 250px) { #section6 h2 {width: 100%; margin-left: 0;} #section6 h4 {display: none;} #section6 a.mail {top:48px; font-size: 18px; left: 50%; margin-left: -131px; padding:4px 16px 6px 16px;} #section6 #video {height:42%; bottom: 17%;} #section6 #map {height:42%; top:41%;} #section6 .bg-hide h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover h3 {font-size: 16px; text-align:left; bottom: 14px; max-width: 70%; padding: 0px 10px 4px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 .bg-hide:hover p {font-size: 12px; text-align:left; bottom: 14px; padding: 2px 10px 5px 10px; background-color: #12171d; color: #fff; left: 16px; z-index: 9;} #section6 #social ul.social-insta li.insta a {top: 83%; height: 17%; background-size:22%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top: 58%;} #section6 #social ul.social-left li.linkedin a {height: 42%; background-size:23%;} #section6 #social ul.social-right li.facebook a {height: 42%; background-size:23%;} #section6 #social ul.social-left li.behance a {height: 42%; background-size:24%;} #section6 #social ul.social-right li.youtube a {height: 42%; background-size:24%;} } /*----- SPECIAL QUERIES --*/ /*-- Tablet S--*/ @media screen and (max-width: 700px) and (min-height: 825px) { #section6 h4 {top: 180px; margin-left: 10%;} #section6 a.mail {top: 300px; left: 10%;} } /*-- Tablet S Landscape --*/ @media screen and (min-width: 900px) and (max-height: 640px) { #section6 h4 {top: 140px; line-height: 26px;} #section6 a.mail {top:210px;} #section6 #video {bottom:0; height: 40%; width: 33.333%; left: 33.333%;} #section6 #map {top: 0; height: 60%; width: 33.333%} #section6 .bg-hide .bg {opacity: 0.4;} #section6 #social ul.social-left {width: 33.333%;} #section6 #social ul.social-insta {width: 16.666%; right: 33.333%;} #section6 #social ul.social-right {width: 33.333%;} #section6 #social ul.social-insta li.insta a {top:0; height: 20%; background-size: 20%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top:0; height:50%; background-size: 24%;} #section6 #social ul.social-left li.linkedin a {top:initial; height: 50%; background-size: 24%;} #section6 #social ul.social-right li.youtube a {top: initial; height: 50%; background-size: 24%;} } /*-- Tablet M--*/ @media screen and (max-width: 800px) and (min-height: 890px) { #section6 h4 {font-size:24px; top: 160px; margin-top: 62px;} #section6 a.mail {font-size:38px; top: 310px; padding: 10px 16px 18px;} #section6 #map {top:50%; width: 50%;} #section6 #map a {height: 30%;} #section6 #video {width: 50%; height: 30%; bottom: 20%; left: 0;} #section6 #social ul.social-left, #section6 #social ul.social-right {width: 40%;} #section6 #social ul.social-insta {width: 20%; right: 40%;} #section6 #social ul.social-left li.behance, #section6 #social ul.social-right li.facebook {top: 50%;} #section6 #social ul.social-insta li.insta {top: 80%;} #section6 #social ul.social-right li.copyright {left: -55%;} } /*-- Tablet M Landscape --*/ @media screen and (min-width: 1000px) and (max-height: 699px) { #section6 h4 {top: 190px; line-height: 32px;} #section6 a.mail {top:280px;} #section6 #video {bottom:0; height: 40%;} #section6 #map {top: 0; height: 60%;} #section6 .bg-hide .bg {opacity: 0.4;} #section6 #social ul.social-insta li.insta a {top:0; height: 20%; background-size: 20%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top:0; height:50%; background-size: 24%;} #section6 #social ul.social-left li.linkedin a {top:initial; height: 50%; background-size: 24%;} #section6 #social ul.social-right li.youtube a {top: initial; height: 50%; background-size: 24%;} } /*-- Tablet L --*/ @media screen and (max-width: 1080px) and (min-height: 1160px) { #section6 h4 {font-size:32px; top: 170px; margin-top: 130px; line-height: 42px;} #section6 a.mail {font-size:38px; top: 430px; padding: 10px 16px 18px;} #section6 #map {top:50%; width: 50%; height: 30%;} #section6 #map a {height: 30%;} #section6 #video {width: 50%; height: 30%; bottom: 20%; left: 0;} #section6 #social ul.social-left, #section6 #social ul.social-right {width: 40%;} #section6 #social ul.social-insta {width: 20%; right: 40%; top: 80%;} #section6 #social ul.social-left li.behance a, #section6 #social ul.social-right li.facebook a {top: 50%;} #section6 #social ul.social-insta li.insta {top: 80%;} #section6 #social ul.social-right li.copyright {left: -56%; height: 6%; width: 300px;} #section6 #social ul.social-right li.copyright p {font-size: 19px; padding:0; width: 300px;} } /*-- Tablet L Landscape & iMac's --*/ @media screen and (min-width: 1300px) and (min-height: 901px) { #section6 h4 {font-size: 26px; top: 280px;} #section6 a.mail {top: 386px;} #section6 #social ul.social-right li.copyright p {width: 200px; font-size: 20px;} } /* NO WEBSITE MOBILE LANDSCAPE * .no-content {display: none;} /*-- NO WEBSITE MOBILE --* @media screen and (min-width: 400px) and (max-height: 480px) { body {background-color:#12171d; color:#fff} .no-content {display:block; position:fixed; width:430px; height:130px; left:10%; top:0; margin-top:100px; z-index:3;} p.no-website {display:block; width:auto; position:relative; margin-top:0; font-size:26px; font-family:'Neris-Black'; color:white; float:left; text-transform:uppercase; line-height:34px; text-align:left;} p.no-website span {color:#26af5f;} .flexslider {background-image:none; background-color:#12171d;} #logo {width:160px; height:120px; background-color:transparent;} #logo .logo-main {width:120px; height:120px; background: url('../assets/1.Intro/logo2.svg') no-repeat;} #header {display:none;} #section1 h1 {display:none;} #section1 .promo-video {display:none;} #section1 form {display:none;} #section1 #submit {display:none;} #section1 .arrow-down {display:none;} #section1 .bg {display:none;} #section2 {display:none;} #section3 {display:none;} #section5 {display:none;} #section6 {display:none;} #fp-nav {display:none;} } /*-- NO WEBSITE small MOBILE --* @media screen and (min-width: 400px) and (max-height: 359px) { .no-content {height:120px; width:340px; margin-top:80px;} p.no-website {font-size:20px;} #logo {width:130px; height:100px;} #logo .logo-main {width:100px; height:100px;} } */