/* Author : Talhah Mahomedy * Home Page styles for Brand Gurus * Copyright 2014 */ /* ============================================================================= HOME PAGE SPECIFIC STYLES ========================================================================== */ div.general-select-style { margin:0 0.5rem 0.5rem 0; border:1px solid #E6E6E6; width:100%; overflow:hidden; background:#FFFFFF url("../img/arrow-reports-grey.svg") no-repeat 95% 50%; } div.general-select-style.disabled { background:#EAEAEA; } div.general-select-style > select { font-family:GothamLight; font-size:0.8rem; color:#2C3339; margin:0; padding:8px; width:130%; border:none; box-shadow:none; background:transparent; background-image:none; -webkit-appearance:none; } div.reveal-modal#sign-in-modal, div.reveal-modal#sign-up-modal {border:0px; } div.reveal-modal#sign-in-modal .close-reveal-modal, div.reveal-modal#sign-up-modal .close-reveal-modal { color:#2C3339; } div.reveal-modal#sign-in-modal > form > img.loader, div.reveal-modal#sign-up-modal > form > img.loader { display:none; } div.reveal-modal#sign-in-modal > form > input, div.reveal-modal#sign-up-modal > form > input, /* BG Updates Start */ div.reveal-modal#sign-in-modal > form > div.hideShowPassword-wrapper > input { font-family:GothamBook; border:1px solid #E6E6E6; box-shadow:none; transition:none; margin:0 0 0.5rem; } div.reveal-modal#sign-in-modal > form > div.hideShowPassword-wrapper { width: auto; } div.reveal-modal#sign-in-modal > form > div.hideShowPassword-wrapper > span.hideShowPassword-toggle { top:20% !important; right:15px !important; font-family:GothamBook; font-size:12px; color:#FF5C21; } /* BG Updates End */ div.reveal-modal#sign-in-modal > form > .button, div.reveal-modal#sign-up-modal > form > .button { font-family:GothamLight; padding:0.5rem 1rem; color:#E6E6E6; font-size:80%; margin:0 0.5rem 0.5rem 0; } div.reveal-modal#sign-in-modal > form > .button:hover, div.reveal-modal#sign-up-modal > form > .button:hover { background-color:#FF5C21; color:#E6E6E6; } div.reveal-modal#sign-in-modal > form > .button.large-forgot, div.reveal-modal#sign-in-modal > form > .button.large-remember-me { background:none; padding:0.5rem 0 1rem 0; color:#2C3339;} div.reveal-modal#sign-in-modal > form > .button.large-forgot:hover, div.reveal-modal#sign-in-modal > form > .button.large-remember-me:hover { transition:350ms ease; color:#FF5C21; } div.reveal-modal#sign-in-modal > form > hr, div.reveal-modal#sign-up-modal > form > hr { border-top:1px dashed #2C3339; margin:0.5rem 0; } div.reveal-modal#sign-in-modal > form > .button.not-member { background:none; padding:0.5rem 0 0 0; color:#FF5C21;} div.reveal-modal#sign-in-modal > form > .button.not-member:hover { transition:350ms ease; color:#2C3339; } div.reveal-modal#sign-up-modal > form > p { color:#2C3339; cursor:pointer; } div.reveal-modal#sign-up-modal > form > p:hover { transition:350ms; opacity:0.50; } div.reveal-modal#sign-up-modal > form > p.error { display:none; color:#FF5C21; margin:0.5rem 0; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 { z-index: 5; background-color:rgba(255,255,255,0.65); position:absolute; right:5%; top:35%; color:#2E2E30; text-align:right; padding:1rem; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > h2 { } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > h2:nth-of-type(1) { font-family:GothamLight; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > p { font-family:GothamBook; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > div.button { font-family:GothamBold; padding:0.5rem 1rem; margin:1rem 0 0 0; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > div.button:hover { background-color:#000000; } div.row.home-1 > div.columns.home-1 > div.home-message { padding:1rem; } div.row.home-1 > div.columns.home-1 > div.home-message > ul { margin:0; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li { padding:1rem 0; position:relative; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li > h5 { font-family:GothamLight; color:#E6E6E6; text-align:center; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li > h5 > small { display:block; font-family:GothamBold; color:#E6E6E6; font-size:100%; letter-spacing:0; line-height:100%; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li > img { position:absolute; right:0; top:1.5rem; } div.row.home-2 > div.columns.home-2 > img { padding:1rem; } div.row.home-2 > div.columns.home-2 > h2 { font-family:GothamXLight; color:#FF5C21; padding-left:1rem; } div.row.home-2 > div.columns.home-2 > p { font-family:GothamLight; color:#47515B; margin-top:1rem; padding-left:1rem;} div.row.home-3 > div.columns.home-3 > div.blurb-container-3 { background-color:rgba(255,255,255,0.65); position:absolute; left:5%; top:5%; color:#2E2E30; padding:1rem; } div.row.home-3 > div.columns.home-3 > div.blurb-container-3 > h2 { font-family:GothamLight; } div.row.home-3 > div.columns.home-3 > div.blurb-container-3 > p { width:14rem; font-family:GothamLight; margin-top:1rem; } div.row.home-4 { } div.row.home-4 > div.columns.home-4 { position:relative; height:325px; padding:2rem 1rem 0.5rem; } div.row.home-4 > div.columns.home-4 > h2 { font-family:GothamXLight; font-size:1.5rem; } div.row.home-4 > div.columns.home-4 > h2 > small { display:block; font-family:GothamMedium; font-size:125%; line-height:100%; } div.row.home-4 > div.columns.home-4 > p { font-family:GothamLight; color:#47515B; margin-top:1rem; } div.row.home-4 > div.columns.home-4 > div.button { font-family:GothamMedium; font-size:0.9rem; padding:0.5rem; margin:0; } div.row.home-4 > div.columns.home-4.intro-1 > h2 { color:#1FBF31; } div.row.home-4 > div.columns.home-4.intro-1 > h2 > small { color:#1FBF31; } div.row.home-4 > div.columns.home-4.intro-1 > div.button:hover { background-color:rgba(76,191,106,0.5); } div.row.home-4 > div.columns.home-4.intro-2 > h2 { color:#0098ED; } div.row.home-4 > div.columns.home-4.intro-2 > h2 > small { color:#0098ED; } div.row.home-4 > div.columns.home-4.intro-2 > div.button:hover { background-color:rgba(0,166,239,0.5); } div.row.home-4 > div.columns.home-4.intro-3 > h2 { color:#FF5C21; } div.row.home-4 > div.columns.home-4.intro-3 > h2 > small { color:#FF5C21; } div.row.home-4 > div.columns.home-4.intro-3 > div.button:hover { background-color:rgba(255,92,33,0.5); } div.row.home-5 { background-color:#8496A4; padding: 3rem 3rem 1rem 3rem; } div.row.home-5 div.columns.home-5 { padding:2rem; } div.row.home-5 > div.columns.home-5 > h2 { font-family:GothamXLight; color:#FFFFFF; } div.row.home-5 > div.columns.home-5 > p { font-family:GothamLight; color:#FFFFFF; margin-top:2rem; } div.row.home-6 > div.columns.home-6 > div.blurb-container-6 { position:absolute; left:5%; top:50%; padding:1rem; } div.row.home-6 > div.columns.home-6 > div.blurb-container-6 > h2 { font-family:GothamXLight; color:#FFFFFF; } div.row.home-6 > div.columns.home-6 > div.blurb-container-6 > p { width:25rem; font-family:GothamLight; margin-top:1rem; } div.row.home-6 > div.columns.home-6.show-for-small-only { background-color:#2C3339; padding:1rem;} div.row.home-6 > div.columns.home-6.show-for-small-only > h2 { font-family:GothamXLight; color:#FFFFFF; } div.row.home-6 > div.columns.home-6.show-for-small-only > p { font-family:GothamLight; margin-top:1rem; } div.row.home-7 > div.columns.home-7 { height: 219px; } div.row.home-7 > div.columns.home-7 > h3 { font-family:GothamXLight; color:#000000; text-align:center; margin-bottom:0rem; } div.row.home-7 > div.columns.home-7 > div.orbit-container > ul, div.row.home-7 > div.columns.home-7 > div.orbit-container > ul > li > ul { margin:0; position:relative; } div.row.home-7 > div.columns.home-7 > div.orbit-container > ul > li ul > li > img.client { margin:auto; display:block; } /* SALES PRO SPECIFIC STYLES */ div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 { width:20rem; position:absolute; right:5%; top:10%; color:#2E2E30; padding:1.5rem; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 > h2 { font-family:GothamXLight; color:#FFFFFF; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 > h4 { font-family:GothamMedium; color:#FFFFFF; margin-top:1rem; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 > p { font-family:GothamBook; color:#FFFFFF; margin-top:0.5rem; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 > div.button { font-family:GothamBold; padding:0.5rem 1rem; margin:1rem 0 0 0; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 > div.button:hover { background-color:#000000; } div.row.sales-pros-2 > div.columns.sales-pros-2 { padding:0 1rem; text-align:center; } div.row.sales-pros-2 > div.columns.sales-pros-2 > div.blurb-container-1 { width:20rem; position:absolute; right:5%; top:10%; color:#2E2E30; padding:1rem; } div.row.sales-pros-2 > div.columns.sales-pros-2 > h2 { font-family:GothamMedium; color:#1FBF31; } div.row.sales-pros-2 > div.columns.sales-pros-2 > h1 { font-family:GothamLight; } div.row.sales-pros-2 > div.columns.sales-pros-2 > p { color:#47515B; } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul { } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li { } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li > div { padding:1.5rem; margin:0 0.5rem 0 1rem; } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li > div:nth-of-type(2) { margin:0 0.5rem; } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li > div:nth-of-type(3) { margin:0 1rem 0 0.5rem; } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li > div > h4 { font-family:GothamMedium; color:#1FBF31; } div.row.sales-pros-3 > div.columns.sales-pros-3 > ul > li > div > p { color:#47515B; margin-top:1rem; } div.row.sales-pros-4 > div.columns.sales-pros-4 > div.blurb-container-2 { position:absolute; left:5%; top:10%; padding:2rem; text-align:center; } div.row.sales-pros-4 > div.columns.sales-pros-4 > div.blurb-container-2 > h3 { font-family:GothamXLight; color:#FFFFFF; } div.row.sales-pros-4 > div.columns.sales-pros-4 > div.blurb-container-2 > div.button { font-family:GothamMedium; font-size:1.5rem; background-color:#FFFFFF; color:#000000; padding:0.5rem 2rem; margin:1rem 0 0 0;} div.row.sales-pros-4 > div.columns.sales-pros-4 > div.blurb-container-2 > div.button:hover { transition:350ms ease; background-color:#000000; color:#FFFFFF; } /* SALES PRO SPECIFIC STYLES END */ /* RETAILER SPECIFIC STYLES */ div.row.retailer-1 > div.columns.retailer-1 > div.blurb-container-1 { width:20rem; position:absolute; left:5%; top:10%; padding:2rem; } div.row.retailer-1 > div.columns.retailer-1 > div.blurb-container-1 > div.button { font-family:GothamMedium; font-size:1.2rem; color:#FFFFFF; padding:0.5rem 1.8rem; margin:1rem 0 0 0; } div.row.retailer-1 > div.columns.retailer-1 > div.blurb-container-1 > div.button:hover { background-color:#000000; } div.row.retailer-1 > div.columns.retailer-1 > div.blurb-container-1 > h4 { font-family:GothamBook; font-size:1.2rem; color:#FFFFFF; margin:1rem 0 0 0; } div.row.retailer-2 > div.columns.retailer-2 { text-align:center; } div.row.retailer-2 > div.columns.retailer-2 > h2 { font-family:GothamMedium; color:#3FA9F5; } div.row.retailer-2 > div.columns.retailer-2 > h1 { font-family:GothamLight; color:#000000; } div.row.retailer-2 > div.columns.retailer-2 > ul { margin:2rem 0 0 0; } div.row.retailer-2 > div.columns.retailer-2 > ul > li { padding:0; } div.row.retailer-2 > div.columns.retailer-2 > ul > li > div { padding:1.5rem 3rem; } div.row.retailer-2 > div.columns.retailer-2 > ul > li > div > h3 { font-family:GothamLight; margin-top:0.5rem; } div.row.retailer-2 > div.columns.retailer-2 > ul > li > div > p { color:#5C6871; margin-top:0.5rem; } div.row.retailer-3 { background-color:#8496A4; padding:2rem; } div.row.retailer-3 > div.columns.retailer-3:nth-of-type(1) { padding-right:3.5rem; } div.row.retailer-3 > div.columns.retailer-3 > h2 { font-family:GothamXLight; color:#FFFFFF; margin-bottom:1rem; } div.row.retailer-3 > div.columns.retailer-3 > p { font-family:GothamXLight; color:#FFFFFF; } div.row.retailer-3 > div.columns.retailer-3 > p:nth-of-type(2) { margin-top:1rem; } div.row.retailer-4 > div.columns.retailer-4 > div.blurb-container-1 { width:25rem; position:absolute; right:5%; bottom:10%; padding:2rem; } div.row.retailer-4 > div.columns.retailer-4 > div.blurb-container-1 > p { font-family:GothamLight; font-style:italic; font-size:1rem; color:#FFFFFF; } /* RETAILER SPECIFIC STYLES END */ /* BRAND SPECIFIC STYLES */ div.row.brand-1 > div.columns.brand-1 > img.message { position:absolute; top:30%; left:35%; } div.row.brand-1 > div.columns.brand-1 > div.blurb-container-1 > h2 { font-family:GothamXLight; color:#FFFFFF; text-align:center; } div.row.brand-2 > div.columns.brand-2 { text-align:center; } div.row.brand-2 > div.columns.brand-2 > h2 { font-family:GothamMedium; color:#FF5C21; } div.row.brand-2 > div.columns.brand-2 > h1 { font-family:GothamLight; color:#000000; } div.row.brand-2 > div.columns.brand-2 > ul { margin:2rem 0 0 0; } div.row.brand-2 > div.columns.brand-2 > ul > li { padding:0; } div.row.brand-2 > div.columns.brand-2 > ul > li > div { padding:1.5rem 3rem; } div.row.brand-2 > div.columns.brand-2 > ul > li > div > h3 { font-family:GothamLight; margin-top:0.5rem; } div.row.brand-2 > div.columns.brand-2 > ul > li > div > p { color:#5C6871; margin-top:0.5rem; } div.row.brand-3 > div.columns.brand-3 > div.blurb-container-1 { background-color:#066188; position:absolute; right:10%; bottom:20%; padding:2rem; } div.row.brand-3 > div.columns.brand-3 > div.blurb-container-1 > h4 { font-family:GothamXLight; color:#FFFFFF; } div.row.brand-3 > div.columns.brand-3 > div.blurb-container-1 > div.button { font-family:GothamMedium; font-size:1.5rem; background-color:#FFFFFF; color:#000000; padding:0.5rem 1rem; margin:1rem 0 0 0;} div.row.brand-3 > div.columns.brand-3 > div.blurb-container-1 > div.button:hover { transition:350ms ease; background-color:#000000; color:#FFFFFF; } div.row.brand-4 > div.columns.brand-4 { padding:2rem; } div.row.brand-4 > div.columns.brand-4 > h2 { font-family:GothamXLight; color:#000000; margin-bottom:2rem; } div.row.brand-4 > div.columns.brand-4 > p { color:#000000; margin-bottom:1rem; } div.row.brand-4 > div.columns.brand-4 > p.brand-message { font-family:GothamBook; color:#FF5C21; font-size:110%; line-height:1.5rem; } div.row.brand-5 > div.columns.brand-5 { } div.row.brand-5 > div.columns.brand-5 > p { font-family:GothamLight; color:#FFFFFF; font-size:1rem; text-align:center; line-height:1.5rem; padding:2rem; } /* BRAND SPECIFIC STYLES END */ /* CONTACT SPECIFIC STYLES */ div.row.contact > div.columns.contact { } div.row.contact > div.columns.contact > h3 { font-family:GothamLight; margin:1rem 0 0 1rem; } div.row.contact > div.columns.contact > p { font-family:GothamBook; color:#222222; margin:0.5rem 0 1.5rem 1rem; } div.row.contact > div.columns.contact > input, div.row.contact > div.columns.contact > textarea { font-family:GothamBook; border:1px solid #E6E6E6; width:85%; box-shadow:none; transition:none; margin:0 0 0.5rem 1rem; } div.row.contact > div.columns.contact > textarea { height:10rem; } div.row.contact > div.columns.contact > div.button.contact-submit { margin:1rem 0 0 1rem; color:#E6E6E6; font-family:GothamLight; padding: 0.5rem 1rem; } div.row.contact > div.columns.contact > div.button.contact-submit:hover { background-color:#FF5C21; } div.row.contact > div.columns.contact > img.loader { display:none; margin-left:2rem; } div.row.contact > div.columns.contact > p.error { display:none; color:#FF5C21; margin:1rem; } /* ============================================================================= SMALL SCREENS SPECIFIC STYLES ========================================================================== */ @media only screen and (max-width: 40em) { div.row.home-1 > div.columns.home-1 > div.blurb-container-1 { top:10%; color:#2E2E30; padding:0.5rem; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > h2 { font-size:100%; } div.row.home-1 > div.columns.home-1 > div.blurb-container-1 > p { font-size:75%; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li { padding:0.5rem 0; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li > h5 { font-size:50%; } div.row.home-1 > div.columns.home-1 > div.home-message > ul > li > img { width:auto; height:25%; top:0.8rem; } div.row.home-5 { padding:1rem; } div.row.sales-pros-1 > div.columns.sales-pros-1 > div.blurb-container-1 { position:relative; top:0; left:0; color:#2E2E30; padding:1rem; width:100%; } div.row.retailer-1 > div.columns.retailer-1 > div.blurb-container-1 { position:relative; top:0; left:0; padding:1rem; width:100%; } div.row.sales-pros-4 > div.columns.sales-pros-4 > div.blurb-container-2 { position:relative; top:0; left:0; padding:1rem; width:100%; } div.row.retailer-3 { padding:1rem; } div.row.retailer-4 > div.columns.retailer-4 > div.blurb-container-1 { width:auto; position:relative; top:0; left:0; padding:1.5rem; margin-bottom:1rem; } div.row.brand-1 > div.columns.brand-1 > img.message { max-width:35%; left:33%; } div.row.brand-1 > div.columns.brand-1 > div.blurb-container-1 { position:absolute; top:5%; left:25.5%; padding:1.5rem; } div.row.brand-3 > div.columns.brand-3 > div.blurb-container-1 { position:relative; top:0; left:0; padding:1.5rem; margin-bottom:1rem } } /* max-width 640px, mobile-only styles, use when QAing mobile issues */ /* ============================================================================= MEDIUM SCREENS SPECIFIC STYLES ========================================================================== */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { div.row.home-6 > div.columns.home-6 > div.blurb-container-6 { left:5%; top:35%; } } /* min-width 641px and max-width 1024px, use when QAing tablet-only issues */