Enter your page name

/****************************************/ /* Nav */ /****************************************/ @media only screen and (max-width: 1200px) { #mainNav { display: none; } #trigger-overlay { display: block } } /****************************************/ /* Hero */ /****************************************/ @media only screen and (max-width: 1200px) { img.hero { display: none; } img.heroMedium { display: block; } } @media only screen and (max-width: 1024px) { .hero video { display: none; } } @media only screen and (max-width: 770px) { div.hero { height: 400px; } img.heroMedium { display: none; } img.heroSmall { display: block; } .heroText { margin-top: 200px; } h1.heroTitle { font-size: 35px; font-size: 3.5rem; line-height: 40px; line-height: 4rem; margin-bottom: 15px; } .heroText hr { width: 125px;} p.heroDesc { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 500px) { a.logo-codesigned { display: none; } a.logo-codesigned-donut { display: block; } a.logo-codesigned-donut { left: 12%; } .heroText { width: 100%; margin-left: 22%; } h1.heroTitle { font-size: 28px; font-size: 2.8rem; line-height: 33px; line-height: 3.3rem; margin-bottom: 15px; } } /****************************************/ /* Small Banners */ /****************************************/ @media only screen and (max-width: 1400px) { img.banner { margin-left: -250px; } } @media only screen and (max-width: 1200px) { img.banner { margin-left: -500px } } @media only screen and (max-width: 1024px) { img.banner { margin-left: -700px; } } @media only screen and (max-width: 420px) { img.banner { display: none; } img.bannerSmall { display: block; } } /****************************************/ /* Footer */ /****************************************/ @media only screen and (max-width: 1200px) { .footerInfo p, .footerInfo a { font-size: 1.2rem; } .icon-social { width: 25px; height: 25px; margin-right: 15px; margin-top: 62px; } .footerSocial a:nth-child(3) { margin-right: 15px; } .btn-contact { padding-left: 40px; } .icon-contact { width: 40px; height: 30px; } } @media only screen and (max-width: 1024px) { footer { height: 75px; } .footerLeft { margin: 0 0 0 25px; } .logo-partner { display: none; } .footerInfo { margin: 0; margin-top: 28px; bottom: 0; } .footerInfo p, .footerInfo a { font-size: 12px; font-size: 1.2rem; } .footerRight { margin: 0 30px 0 0; } .footerSocial { margin-top: -8px; } .icon-social { margin-top: 0; } .btn-contact { margin-top: 30px; padding-left: 20px } } @media only screen and (max-width: 770px) { .footerInfo a[href^="mailto"] { display: none; } .footerInfo p:nth-of-type(2) { display: none; } } @media only screen and (max-width: 500px) { .footerInfo { display: none; } .icon-phone { display: inline-block; } } /****************************************/ /* 404 */ /****************************************/ @media only screen and (max-width: 1024px) { .fourText { width: 350px; margin-left: -175px; } .four h2 { font-size: 34px; font-size: 3.4rem; } .four p { font-size: 18px; font-size: 1.8rem; } } @media only screen and (max-width: 900px) { .four h2 { font-size: 30px; font-size: 3rem; } .four p { font-size: 14px; font-size: 1.4rem; } .fourButton div { width: 125px; height: 45px; font-size: 14px; font-size: 1.4rem; line-height: 45px; } .fourButton div:hover { line-height: 42px; } } @media only screen and (max-width: 500px) { .four h2 { font-size: 26px; font-size: 2.6rem; } .four p { font-size: 12px; font-size: 1.2rem; } } /****************************************/ /* Home */ /****************************************/ @media only screen and (max-width: 1600px) { .homeIntranet img { width: 750px; top: 85px; right: 65px; } } @media only screen and (max-width: 1500px) { .homeIntranet img { right: -5%; } } @media only screen and (max-width: 1400px) { .homeIntranet { height: 600px; } .homeIntranetText.column.half { width: 40%; padding: 125px 0 0 100px; } .homeIntranet img { top: 40px; right: -7%; } .homeAboutText.column.half { width: 40%; } .homeAboutText { padding: 200px 75px 0 75px; } } @media only screen and (max-width: 1300px) { .homeIntranet { height: 500px; } .homeIntranetText.column.half { width: 45%; padding: 100px 0 0 75px; } .homeIntranetText h2 { font-size: 32px; font-size: 3.2rem; line-height: 34px; line-height: 3.4rem; } .homeIntranet img { width: 600px; right: -5%; } .clientLogos img:nth-child(2) { margin-left: 19%; } .clientLogos img:nth-child(3) { margin-left: 19%; } } @media only screen and (max-width: 1200px) { .icon-intro { width: 80px; height: 80px; } p.introDesc { font-size: 16px; font-size: 1.6rem; line-height: 22px; line-height: 2.2rem; } .homeAbout { margin-left: -175px; } .homeAboutText.column.half { width: 35%; } .homeAboutText { padding: 200px 50px 0 0; } .clientLogos { line-height: 150px; } .clientLogos { margin-left: 10%; } .logo-clients { width: 18%; } } @media only screen and (max-width: 1100px) { .homeIntranetText h2 { font-size: 32px; font-size: 3.2rem; line-height: 34px; line-height: 3.4rem; } .homeIntranet img { width: 550px; top: 65px; right: -7%; } } @media only screen and (max-width: 1024px) { .homeIntro .inner-container { width: 80%; } .homeAbout { height: 500px; margin-left: 0; background-image: none !important; background: #fff; } .homeAboutText.column.half { width: 70%; margin: 0 auto;} .homeAboutText { padding: 0; padding-top: 125px; float: none; max-width: 100%; } h2.homeAboutTitle { font-size: 30px; font-size: 3rem; } p.homeAboutDesc { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } a.aboutLink { font-size: 14px; font-size: 1.4rem; } .homeClientsTitle { font-size: 30px; font-size: 3rem; } .homeClients .introTitle { font-size: 24px; font-size: 2.4rem; line-height: 34px; line-height: 3.4rem; } .clientLogos { margin-left: 4%; } .logo-clients { width: 19%; } } @media only screen and (max-width: 900px) { .homeIntranetText.column.half { width: 80%; margin: 0 auto; padding: 0; float: none; margin-top: 150px; } .homeIntranet img { display: none; } .homeBlog .inner-container { width: 80%; } .homeBlogText { max-width: 80%; } } @media only screen and (max-width: 770px) { a.logo-codesigned { width: 18%; min-width: 200px;} h3.introTitle { font-size: 24px; font-size: 2.4rem; line-height: 36px; line-height: 3.6rem; padding: 90px 0 90px 0; } .homeAbout { height: 400px; } .homeAboutText.column.half { width: 78%; } .homeAboutText { padding-top: 75px; } .homeClients .introTitle { font-size: 22px; font-size: 2.2rem; line-height: 32px; line-height: 3.2rem; padding: 0 60px 60px 60px; } .clientLogos .logo-wellstar, .clientLogos .logo-mckenna { margin-left: 10%; } .logo-clients { width: 25%; } .homeProduct { margin-left: -250px; } .homeProductLink { margin-left: 61%; } } @media only screen and (max-width: 700px) { .homeIntranetText.column.half { margin-top: 115px; } .homeIntro { height: 650px; } h3.introTitle { padding: 50px 0 60px 0; } .homeIntro .column.fourth { width: 50%; } .icon-intro { margin-top: 25px;} p.introDesc { margin-bottom: 35px; } .homeClients .column.fifth { width: 33.33%; } .homeClients .inner-container { width: 85%; } h3.homeBlogTitle { font-size: 20px; font-size: 2rem; line-height: 28px; line-height: 2.8rem; } h4.homeBlogSub { font-size: 16px; font-size: 1.6rem; line-height: 28px; line-height: 2.8rem; } .homeBlogDate { font-size: 12px; font-size: 1.2rem; line-height: 18px; line-height: 1.8rem; } p.homeBlogDesc { font-size: 14px; font-size: 1.4rem; line-height: 28px; line-height: 2.8rem; } .homeBlog a { font-size: 12px; font-size: 1.2rem;} } @media only screen and (max-width: 500px) { .homeIntranetText.column.half { width: 85%; margin-top: 95px; } .homeIntro { height: 700px; } p.introDesc { font-size: 12px; font-size: 1.2rem; } .homeAboutText.column.half { width: 90%; } .homeAboutText { padding-top: 35px; } .homeClients .introTitle { padding: 0 20px 60px 20px; } .homeBlog .inner-container { width: 90%; } .homeBlogText { padding: 150px 0 150px 0; } } /****************************************/ /* About */ /****************************************/ @media only screen and (max-width: 1250px) { .team.column.fourth:nth-of-type(4n+1) { clear:none;} .team.column.fourth:nth-of-type(3n+1) {margin:0; clear:left;} .team.column.fourth { width:32.95%; } .leadership .inner-container,.aboutStory .inner-container { width:80%; } } @media only screen and (max-width: 900px) { .leadership .inner-container,.aboutStory .inner-container { width:80%; } .team .inner-container { width: 80%; } .employeeBio { display: none; } } @media only screen and (max-width: 950px) { .aboutStory .inner-container { width:80%; } .aboutTitle p { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 700px) { .team.column.fourth:nth-of-type(3n+1) { clear:none;} .team.column.fourth:nth-of-type(2n+1) {margin:0; clear:left;} .team.column.fourth { width:50%; } .team.inner-container { width:85%; } } @media only screen and (max-width: 550px) { .leadership.column.half { width:100%; float:none; } .aboutStory .inner-container { width:95%; } .aboutTitle p { font-size:14px; font-size:1.4rem; } #aboutLink p { font-size: 13px; font-size: 1.3rem; margin: 35px 20px 0 0; } } @media only screen and (max-width: 500px) { p.teamTitle {font-size:10px; font-size:1.0rem; margin: 0;} .team.inner-container { width:85%; } } /****************************************/ /* Services */ /****************************************/ @media only screen and (max-width: 1600px) { .servicesDesign .inner-container { width: 90%; } .processImage { background-position: 95%; } } @media only screen and (max-width: 1500px) { div.hostingText { padding: 150px 0 150px 0; max-width: 85%;} .servicesHosting .inner-container { width: 75%; } } @media only screen and (max-width: 1300px){ p.servicesDesc { font-size: 16px; font-size: 1.6rem; margin-left: 15px; } .servicesDesign hr { height: 300px; } div.developmentText { margin-top: 40%; } div.processText { margin-top: 40%; } div.nintexText { margin-top: 40%; } } @media only screen and (max-width: 1200px) { .servicesOverview { margin-left: 10%;} .servicesDesign hr { } .hostingIcon { width: 12%; } } @media only screen and (max-width: 1024px) { .servicesOverview { margin-left: 10%;} .servicesTitle hr { width: 300px; } .servicesDesign { height: 1400px; } h2.designWireframes, h2.designWeb { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.designWireframes, p.designWeb { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .servicesDevelopment { height: 700px; } h2.developmentText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.developmentText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .developmentLink { margin-top: 275px; } .servicesHosting .inner-container { width: 80%; } div.hostingText { padding: 100px 0 100px 0; } h2.hostingText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.hostingText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .hostingLink { font-size: 14px; font-size: 1.4rem; } .hostingOptions a:nth-child(2), .hostingOptions a:nth-child(3) { margin-left: 8%; } .servicesProcess { height: 700px; } h2.processText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.processText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .processLink { margin-top: 275px; } .servicesNintex { height: 700px; } h2.nintexText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.nintexText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .nintexLink { margin-top: 275px; } } @media only screen and (max-width: 900px) { div.servicesTitle { margin-top: 75px; } .servicesOverview { text-align: center; margin-top: 80px; margin-left: 0; } .servicesOverview div { margin-bottom: 20px; } img.icon-services { display: block; float: none; clear: none; margin: 0 auto; } p.servicesDesc { font-size: 14px; font-size: 1.4rem; margin-left: 0; display: block; } .servicesDesign hr { height: 270px; } .developmentDesc.column.half{ width: 100%; } .developmentImage { display: none; } div.developmentText { margin-top: 25%; } div.developmentText a { display: block; } div.hostingText { max-width: 100%; } .processDesc.column.half{ width: 100%; } .processImage { display: none; } div.processText { margin-top: 25%; } .processText a { display: block; } .nintexDesc.column.half{ width: 100%; } .nintexImage { display: none; } div.nintexText { margin-top: 25%; } .nintexText a { display: block; } } @media only screen and (max-width: 770px) { .servicesDesign { height: 950px; } .designText { margin: 50px 0 50px 0; } .designWireframes.column.half, .designWeb.column.half { width: 100%; } div.designWireframes, div.designWeb { max-width: 100%; float: none; margin: 0 auto; } div.designWireframes { margin-bottom: 50px; } .servicesDesign hr { display: none !important; } .twentytwenty-wrapper { top: 50px;} div.developmentText { width: 75%; margin-top: 31%; } .hostingIcon { width: 14%; } a.logo-hosting img { max-width: 300px; margin: 0 auto; margin-top: 7%; display: block; } div.processText { width: 75%; margin-top: 31%; } div.nintexText { width: 75%; margin-top: 31%; } } @media only screen and (max-width: 500px) { .servicesTitle hr { width: 200px; } h1.servicesTitle { font-size: 28px; font-size: 2.8rem; line-height: 36px; line-height: 3.6rem; } p.servicesDesc { font-size: 12px; font-size: 1.2rem; } div.developmentText { margin-top: 41%; } .hostingIcon { width: 16%; } a.logo-hosting img { margin-top: 5%; } div.processText { margin-top: 41%; } div.nintexText { margin-top: 41%; } } /****************************************/ /* Work */ /****************************************/ @media only screen and (max-width: 1300px){ #workClients .inner-container, #workVideos .inner-container { width: 75%; } } @media only screen and (max-width: 1100px){ .workIntro .inner-container { width: 90%; } div.workIntroText { padding: 125px 0 50px; } h2.workIntroText { font-size: 32px; font-size: 3.2rem; line-height: 32px; line-height: 3.2rem; } p.workIntroText { font-size: 22px; font-size: 2.2rem; line-height: 26px; line-height: 2.6rem; } } @media only screen and (max-width: 1024px) { #workVideos { margin: 100px 0 100px 0; } .videoContainer { margin-bottom: 50px; } h2.videoInfo { font-size: 34px; font-size: 3.4rem; line-height: 38px; line-height: 3.8rem; } p.videoInfo { font-size: 16px; font-size: 1.6rem; line-height: 28px; line-height: 2.8rem; } .clients { margin: 50px 0 75px 0 } h3.clientName{ font-size: 16px; font-size: 1.6rem; } p.clientDesc { font-size: 14px; font-size: 1.4rem; } } @media only screen and (max-width: 900px) { .videoContainer { max-width: 100%; } div.videoInfo { max-width: 100%; } } @media only screen and (max-width: 770px) { div.workIntroText { padding: 100px 0 30px; } p.workIntroText { font-size: 18px; font-size: 1.8rem; line-height: 22px; line-height: 2.2rem; } } @media only screen and (max-width: 780px) { #workVideos { margin: 75px 0 50px 0; } #workClients hr { margin-bottom: 50px; } .clients { margin: 0 0 25px 0; } img.logo-clients { padding-right: 3%;} h3.clientName, p.clientDesc { display: none; } } @media only screen and (max-width: 600px) { #workClients .inner-container, #workVideos .inner-container { width: 90%; } #workVideos { margin: 50px 0 50px 0; } } @media only screen and (max-width: 500px) { h2.workIntroText { font-size: 26px; font-size: 2.6rem; line-height: 30px; line-height: 3rem; margin-bottom: 10px; } p.workIntroText { font-size: 16px; font-size: 1.6rem; line-height: 18px; line-height: 1.8rem; } #workClients hr { margin-bottom: 25px; } .clients { margin: 0 0 5px 0; } } /****************************************/ /* Products */ /****************************************/ @media only screen and (max-width: 1024px) { .listCollabLogo { margin-top: 180px; } .listCollab img { width: 200px; height: 200px; } .listCollab h2 { font-size: 34px; font-size: 3.4rem; margin-top: 15px; } .listCollab hr { margin-top: -172px } .listHostingLogo { margin-top: 180px; } .listHostingLogo img { width: 200px; height: 200px; } .listHostingLogo h2 { font-size: 34px; font-size: 3.4rem; margin-top: 15px; } .listHostingLogo hr { margin-top: -172px } .listSeperator { left: 48%; } } @media only screen and (max-width: 900px) { .productList { height: 400px; } .listCollab.column.half { width: 100%; } .listCollabLogo { margin-top: 75px; } .listCollab hr { display: none; } .listHosting.column.half { width: 100%; } .listHostingLogo { margin-top: 75px; } .listHosting hr { display: none; } .listSeperator { top: 1022px; } } @media only screen and (max-width: 770px) { .listSeperator { top: 772px; left: 46%; } } @media only screen and (max-width: 600px) { .listCollabLogo { margin-top: 115px; } .listCollab img { width: 150px; height: 150px; } .listCollab h2 { font-size: 30px; font-size: 3rem; margin-top: 10px; } .listHostingLogo { margin-top: 115px; } .listHostingLogo img { width: 150px; height: 150px; } .listHostingLogo h2 { font-size: 30px; font-size: 3rem; margin-top: 10px; } .listSeperator { left: 43.5%; } } /****************************************/ /* Collaboration */ /****************************************/ @media only screen and (max-width: 1600px){ .productText.column.third { width: 40%; } div.productText { padding: 450px 0 300px 0; } .productImage img { top: 50%; } .collabSlider .inner-container { margin-left: 6%; } .collabSlide img { width: 40%; } .sliderText { margin-top: 0; } .collabSlide h2 { font-size: 32px; font-size: 3.2rem; } .collabSlide p { font-size: 16px; font-size: 1.6rem; } } @media only screen and (max-width: 1500px){ .collabProduct .inner-container { width: 80%; } h2.productText { font-size: 34px; font-size: 3.4rem; } p.productText { font-size: 16px; font-size: 1.6rem; } .collabLaptop img { width: 69%; top: 31%; left: 16%; } } @media only screen and (max-width: 1400px){ h2.productText { font-size: 34px; font-size: 3.4rem; } p.productText { font-size: 16px; font-size: 1.6rem; } .productImage img { width: 86%; top: 46%; left: 34%; } } @media only screen and (max-width: 1320px){ .collabProduct .inner-container { width: 90%; } .collabSlide img { width: 45%; } .collabSlide h2 { font-size: 28px; font-size: 2.8rem; } .collabSlide p { font-size: 14px; font-size: 1.4rem; } .collabContact .inner-container { width: 90%; } h2.contactText { font-size: 32px; font-size: 3.2rem; line-height: 32px; line-height: 3.2rem; } p.contactText { font-size: 22px; font-size: 2.2rem; line-height: 28px; line-height: 2.8rem; } .contactButtons div { width: 175px; height: 50px; font-size: 16px; font-size: 1.6rem; line-height: 50px; } .contactButtons div:hover { line-height: 47px; } } @media only screen and (max-width: 1200px){ .introButtons { padding-bottom: 250px; } .collabLaptop img { width: 70%; top: 31%; left: 15%; } .productText.column.third { width: 45%; } .productImage img { top: 46%; } .collabSlide { padding-left: 8%; } } @media only screen and (max-width: 1100px){ .collabIntro .inner-container { width: 90%; } div.introText { padding: 125px 0 50px; } h2.introText { font-size: 30px; font-size: 3rem; line-height: 32px; line-height: 3.2rem; } p.introText { font-size: 20px; font-size: 2rem; line-height: 26px; line-height: 2.6rem; } div.introText h2 + p { font-size: 22px; font-size: 2.2rem; } .collabLaptop img { width: 70%; top: 30%; left: 15%; } div.productText { padding: 450px 0 300px 0;} .productImage img { top: 47%; } .collabSlide { padding-left: 5%; } } @media only screen and (max-width: 1024px){ .productImage img { width: 88%; top: 50%; left: 40%; } div.productText { padding: 400px 0 300px 0;} .collabLaptop img { width: 70%; top: 31%; left: 15%; } .collabSlide img { display: none; } .sliderText { margin-left: 9%; width: 80%; } .collabLink { height: 75px; } .collabLink p { font-size: 14px; font-size: 1.4rem; margin: 25px 25px 0 0; } } @media only screen and (max-width: 900px) { .collabLaptop img { width: 78%; top: 31%; left: 12%; } .collabProduct .inner-container { width: 80%; } .productText.column.third { width: 100%; } div.productText { padding: 250px 0 500px 0; } .productImage img { width: 88%; top: 52%; left: 6%; } #collabSlides { width: 88%; } .sliderText { margin-left: 7%; width: 80%; } } @media only screen and (max-width: 770px) { div.introText { padding: 100px 0 30px; } p.introText { font-size: 16px; font-size: 1.6rem; line-height: 22px; line-height: 2.2rem; } div.introText h2 + p { font-size: 20px; font-size: 2rem; } .introButtons { padding-bottom: 250px; } .introButtons div { width: 150px; height: 45px; font-size: 14px; font-size: 1.4rem; line-height: 45px; } .introButtons div:hover { line-height: 41px; } .collabLaptop img { width: 78%; top: 33%; left: 11%; } div.productText { padding: 150px 0 350px 0; } .productImage img { width: 66%; top: 61%; left: 15%; } .collabSlider { display: none; } div.contactText { padding-top: 90px; } h2.contactText { font-size: 30px; font-size: 3rem; } p.contactText { font-size: 20px; font-size: 2rem; line-height: 26px; line-height: 2.6rem; } .contactButtons { padding-bottom: 80px; } } @media only screen and (max-width: 600px) { .collabLaptop img { top: 34%; } .productImage img { width: 75%; top: 62%; } } @media only screen and (max-width: 500px) { .introButtons { padding-bottom: 150px; } .introButtons div { width: 140px; height: 45px; font-size: 14px; font-size: 1.4rem; line-height: 45px; } .collabLaptop img { width: 82%; top: 37%; left: 8%; } div.productText { padding: 200px 0 100px 0; } .productImage img { display: none; } } /****************************************/ /* Hosting */ /****************************************/ @media only screen and (max-width: 1600px){ .premisesImage img { margin-top: 17%; } div.cloudText { margin-top: 30%; } .cloudImage img { margin-top: 37%; } div.hybridText { margin-top: 40%; } .hybridImage img { margin-top: 29%; } } @media only screen and (max-width: 1300px){ .premisesImage img { margin-top: 26%; } div.premisesText { margin-top: 40%; } .cloudImage img { margin-top: 48%; } div.cloudText { margin-top: 40%; } .hybridImage img { margin-top: 35%; } div.hybridText { margin-top: 47%; } } @media only screen and (max-width: 1200px){ .premisesImage img { margin-top: 26%; width: 85%; } div.premisesText { margin-top: 40%; } .cloudImage img { margin-top: 50%; } div.cloudText { margin-top: 33%; } .hybridImage img { margin-top: 44%; } div.hybridText { margin-top: 50%; } } @media only screen and (max-width: 1100px){ .hostingIntro .inner-container { width: 90%; } div.hostingIntroText { padding: 125px 0 50px; } h2.hostingIntroText { font-size: 30px; font-size: 3rem; line-height: 32px; line-height: 3.2rem; } p.hostingIntroText { font-size: 20px; font-size: 2rem; line-height: 26px; line-height: 2.6rem; } div.hostingIntroText h2 + p { font-size: 22px; font-size: 2.2rem; } .premisesImage img { margin-top: 26%; width: 85%; } div.premisesText { margin-top: 40%; } .cloudImage img { margin-top: 48%; } div.cloudText { margin-top: 35%; } .hybridImage img { margin-top: 44%; } div.hybridText { margin-top: 51%; } } @media only screen and (max-width: 1024px){ .hostingContact .inner-container { width: 90%; } h2.hostingContactText { font-size: 32px; font-size: 3.2rem; line-height: 32px; line-height: 3.2rem; } p.hostingContactText { font-size: 22px; font-size: 2.2rem; line-height: 28px; line-height: 2.8rem; } .hostingContacttButtons div { width: 175px; height: 50px; font-size: 16px; font-size: 1.6rem; line-height: 50px; } .hostingContactButtons div:hover { line-height: 47px; } .premisesImage img { margin-top: 25%; width: 85%; } div.premisesText { margin-top: 37%; } .cloudImage img { margin-top: 49%; } div.cloudText { margin-top: 30%; } .hybridImage img { margin-top: 44%; } div.hybridText { margin-top: 52%; } .hostingPremises { height: 700px; } h2.premisesText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.premisesText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .hostingCloud { height: 700px; } h2.cloudText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.cloudText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } .hostingHybrid { height: 700px; } h2.hybridText { font-size: 30px; font-size: 3rem; line-height: 34px; line-height: 3.4rem; } p.hybridText { font-size: 14px; font-size: 1.4rem; line-height: 26px; line-height: 2.6rem; } } @media only screen and (max-width: 1024px){ .hostingLink { height: 75px; } .hostingLink p { font-size: 14px; font-size: 1.4rem; margin: 25px 25px 0 0; } } @media only screen and (max-width: 900px) { .hostingPremises { height: 600px; } .premisesDesc.column.half{ width: 100%; } .premisesImage { display: none; } div.premisesText { margin-top: 25%; } .hostingCloud { height: 600px; } .cloudDesc.column.half{ width: 100%; } .cloudImage { display: none; } div.cloudText { margin-top: 22%; } .hostingHybrid { height: 600px; } .hybridDesc.column.half{ width: 100%; } .hybridImage { display: none; } div.hybridText { margin-top: 28%; } } @media only screen and (max-width: 770px) { div.hostingIntroText { padding: 100px 0 30px; } p.hostingIntroText { font-size: 16px; font-size: 1.6rem; line-height: 22px; line-height: 2.2rem; } div.hostingIntroText h2 + p { font-size: 20px; font-size: 2rem; } .hostingIntroButtons { padding-bottom: 100px; } .hostingIntroButtons div { width: 150px; height: 45px; font-size: 14px; font-size: 1.4rem; line-height: 45px; } .hostingIntroButtons div:hover { line-height: 41px; } div.premisesText { width: 75%; margin-top: 28%; } div.cloudText { width: 75%; margin-top: 26%; } div.hybridText { width: 75%; margin-top: 31%; } div.hostingContactText { padding-top: 90px; } h2.hostingContactText { font-size: 30px; font-size: 3rem; } p.hostingContactText { font-size: 20px; font-size: 2rem; line-height: 26px; line-height: 2.6rem; } .hostingContacButtons { padding-bottom: 80px; } } @media only screen and (max-width: 500px) { .hostinIntroButtons div { width: 140px; height: 45px; font-size: 14px; font-size: 1.4rem; line-height: 45px; } div.premisesText { margin-top: 31%; } div.cloudText { margin-top: 21%; } div.hybridText { margin-top: 41%; } } /****************************************/ /* Blog List */ /****************************************/ @media only screen and (max-width: 1024px) { img.authorImage { display: none; } .blogInfo p { margin-top: 0; } } @media only screen and (max-width: 900px) { #blogList .inner-container { width: 80%; } } @media only screen and (max-width: 600px) { p.blogDate { display: none; } } @media only screen and (max-width: 500px){ #blogList { margin-top: 50px; } h3.blogTitle { font-size: 20px; font-size: 2rem; line-height: 28px; line-height: 2.8rem; text-align: left; } h4.blogSub { text-align: left; } p.blogLead { font-size: 14px; font-size: 1.4rem; line-height: 22px; line-height: 2.2rem; text-align: justify; margin-bottom: 15px; } .blogInfo { margin-bottom: 100px; } .blogInfo p { font-size: 12px; font-size: 1.2rem; margin-top: -8px; } } /****************************************/ /* Blog Posts */ /****************************************/ @media only screen and (max-width: 1700px) { .authorPhoto.column.fourth { width: 15%; } p.authorBio { max-width: 60%; } } @media only screen and (max-width: 1300px) { #blogPost .inner-container { width: 60%; } #blogPost p { text-align: justify; } #blogPostAuthor .inner-container { width: 60%; } .authorPhoto.column.fourth { width: 17%; } p.authorBio { max-width: 70%; } } @media only screen and (max-width: 1100px) { .authorPhoto.column.fourth { width: 19%; } p.authorBio { max-width: 80%; } } @media only screen and (max-width: 900px) { .blogHero .inner-container { width: 90%; left: -4%;} #blogPost .inner-container { width: 80%; } #blogPostAuthor .inner-container { width: 80%; } .authorPhoto.column.fourth { width: 20%; } p.authorBio { max-width: 90%; } } @media only screen and (max-width: 770px) { .blogHero { height: 400px; } .postText { margin-top: 200px; } h1.postTitle { font-size: 28px; font-size: 2.8rem; line-height: 32px; line-height: 3.2rem; margin-bottom: 15px; } h2.postSub { font-size: 18px; font-size: 1.8rem; line-height: 20px; line-height: 2rem; } .postText hr { width: 125px;} #blogPrevious, #blogNext { top: 200px; } #blogPrevious, #blogNext, img.previousArrow, img.nextArrow { width: 60px; height: 50px;} .postInfo { margin-top: 0px; } #blogPost { margin: 75px 0 75px 0; } #blogPost h2 { font-size: 24px; font-size: 2.4rem; line-height: 30px; line-height: 3rem; } #blogPost p { font-size: 16px; font-size: 1.6rem; line-height: 28px; line-height: 2.8rem; } #blogPost ul, #blogPost ol { margin-left: 40px; } .authorPhoto.column.fourth { width: 22%; } p.authorBio { max-width: 100%; } } @media only screen and (max-width: 600px) { .blogHero .inner-container { width: 80%; left: -4%;} .postText { width: 100%; margin-left: 22%; } img.authorImage { display: none; } .postInfo p { margin-top: 5px; } #blogPrevious, #blogNext { display: none !important; } .authorPhoto.column.fourth { width: 25%; } .authorBio { margin: 50px 0 50px 15px;} } @media only screen and (max-width: 500px) { h1.postTitle { font-size: 24px; font-size: 2.4rem; line-height: 28px; line-height: 2.8rem; margin-bottom: 10px; } h2.postSub { font-size: 14px; font-size: 1.4rem; line-height: 16px; line-height: 1.6rem; } #blogPost { margin: 30px 0 30px 0; } #blogPost .inner-container { width: 90%; } #blogPostAuthor .inner-container { width: 90%; } #blogPost ul, #blogPost ol { margin-left: 20px; } .authorPhoto.column.fourth { width: 28%; } p.authorBio { font-size: 12px; font-size: 1.2rem; } } /****************************************/ /* Careers */ /****************************************/ @media only screen and (max-width: 1650px) { #careersInfo .inner-container { width: 68%; } } @media only screen and (max-width: 1600px) { .cultureQuote { max-width: 85%; } } @media only screen and (max-width: 1450px) { #careersInfo .inner-container { width: 73%; } } @media only screen and (max-width: 1400px) { .cultureQuote { margin-top: 50px; padding-bottom: 100px; } p.quoteQuote { margin-top: 50px; } #careersInfo .inner-container { width: 75%; } p.careerDesc { font-size: 12px; font-size: 1.2rem; } #contact .inner-container { width: 70%; } div.contactTitle { margin-top: 100px; } #form { padding-bottom: 650px; } } @media only screen and (max-width: 1024px) { #careersCulture .inner-container, #aboutCulture .inner-container { width: 75%; } #careersInfo .inner-container { width: 85%; } #contact .inner-container { width: 80%; } div.contactTitle { margin-top: 100px; } #form { padding-bottom: 650px; } } @media only screen and (max-width: 900px) { .careers.column.fourth { width: 50%; } img.icon-careers { width: 85%; } p.careerDesc { height: 50px; } } @media only screen and (max-width: 800px) { div.cultureTitle { padding-top: 50px; margin-bottom: 50px } #form .column.half { width: 100%; padding: 0 !important; } #contact input { height: 50px; margin-bottom: 15px; } #contact input[placeholder] { font-size: 14px; font-size: 1.4rem; } #contact textarea[placeholder] { font-size: 14px; font-size: 1.4rem; } .remodal { width: 100%; height: 100%; max-width: none; margin: 0; } } @media only screen and (max-width: 700px) { #careersCulture .inner-container, #aboutCulture .inner-container { width: 90%; } h1.cultureTitle { font-size: 36px; font-size: 3.6rem; } .cultureQuote { max-width: 90%; padding-bottom: 75px; } #contact .inner-container { width: 90%; } div.contactTitle { margin-top: 50px; } } @media only screen and (max-width: 600px) { div.cultureTitle { margin-bottom: 25px } h1.cultureTitle { text-align: left; margin-bottom: 5px; } #careersCulture hr, #aboutCulture hr { margin: 0; width: 50px; } .cultureQuote { max-width: 100%; text-align: justify; margin-top: 25px; } p.quoteQuote { margin-top: 25px; } h3.quoteName { margin-top: 25px; } #careersInfo .inner-container { width: 90%; } img.icon-careers { width: 95% } h3.careerTitle { font-weight: 200; color: #2d2d2d; text-align: center; margin-left: -5px; margin-bottom: 40px; margin-top: 5px; } p.careerDesc { display: none; } #careersInfo hr { display: none; } h1.contactTitle { font-size: 36px; font-size: 3.6rem; line-height: 40px; line-height: 4rem; text-align: left; } #contact hr { width: 50px; margin: 0; margin-bottom: 50px; } #careersLink p { margin: 35px 33px 0 0; } }