/* ----------------------------------------- FONTS ----------------------------------------- */ .DinStencil-Light { font-family:"Din Stencil Light", Verdana, sans-serif; font-size-adjust:0.5; font-weight:200; font-style:normal; } .DinPro-Light { font-family:"Din Text Pro Light", Verdana, sans-serif; font-size-adjust:0.5; font-weight:200; font-style:normal; } .DinStencil-Medium { font-family:"Din Stencil Medium", Verdana, sans-serif; font-size-adjust:0.5; font-weight:200; font-style:normal; } .DinStencil-Bold { font-family:"Din Stencil Bold", Verdana, sans-serif; font-size-adjust:0.5; font-weight:500; font-style:normal; } .DinPro-Bold { font-family:"Din Text Pro Bold", Verdana, sans-serif; font-size-adjust:0.5; font-weight:bold; font-style:normal; } /* ----------------------------------------- UTILS ----------------------------------------- */ P { letter-spacing: 0.05em; font-family: "Din Text Pro Light", Helvetica, san-serif; } P.LargeText { font-weight: 100; letter-spacing: 0.02em; font-family: Georgia, Times, serif; font-size; font-size: 25px; color: #666666; line-height: 1.45em; } P.SmallText { line-height: 1.25em; font-size: 12px; } A { color: #CC0000; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease; } A:HOVER { color: #FF0000; } .Wrapper { width: 100%; overflow-x: hidden; } .Shadow { -moz-box-shadow: 0 0 5px #333; -webkit-box-shadow: 0 0 5px #333; box-shadow: 0 0 5px #333; } .BlackTapeText P { font-family: "Din Stencil Medium", Verdana, sans-serif; font-size-adjust:0.5; font-weight:bold; font-style:normal; font-weight: 300; text-transform: uppercase; line-height: 1.15em; font-size: 45px; display: inline-block; padding: 8px 18px; background: url(../images/bg-black_trans.png); color: #FFF; margin: 0 auto; } .BlackTapeText { text-align: left; padding: 50px 9px 50px 0; } .BGWhite { background-color: #FFF; } .Left { float: left; } .Right { float: right; } .Center { text-align: center; margin: 0 auto; display: block; } .Center IMG { display: inline; } .GrayLine { border-top: 1px solid #999; margin: 30px 0; } .Social Li { list-style: none; display: inline; float: left; margin: 0 4px 0 0; } .Social Li .fb-like { display: inline; float: right; margin: 2px 0 0 5px; } .Redtext, P.RedText, SPAN.RedText { color: #cc0000; } .BlackText, P.BlackText, SPAN.BlackText { color: #000; } H1 { font-family:"Din Stencil Bold", Verdana, sans-serif; } H2 { font-family:"Din Stencil Bold", Verdana, sans-serif; } H2.IntroHeader { font-weight: 100; letter-spacing: 0.08em; min-width: 235px; max-width: 270px; text-align: left; margin-top: 0px; font-size: 30px; text-transform: uppercase; float: left; padding: 80px 20px 20px 20px; color: #FFF; background: #CC0000 url(../images/header-bg_stripes.jpg) left top; } H3 { clear: both; display: block; font-family: "Din Stencil Medium","Din Stencil Bold", Verdana, sans-serif; font-weight: 200; } /* ----------------------------------------- CASE STUDIES ----------------------------------------- */ .CaseStudy { padding-top: 72px; position: relative; margin: 0 auto; max-width: 250px; } .CaseStudy H4 { border-top: none !important; width: 100%; position: absolute; top: 0; z-index: 1000; background: url(../images/icon-marker.png) no-repeat center top; padding: 40px 0 0 0; } .CaseStudy H4 SPAN { letter-spacing: 0.08em; display: block; font-weight: 100; text-transform: uppercase; text-align: center; font-family:"Din Stencil Bold", Verdana, sans-serif; color: #FFF; padding: 4px 5px !important; border-radius: 18px; background-color: #CC0000; font-size: 15px; -moz-box-shadow: 0 5px 7px #555; -webkit-box-shadow: 0 5px 7px #555; box-shadow: 0 5px 7px #555; } .CaseStudy .Case-Heading { font-size: 16px; color: #666666; text-transform: uppercase; font-family: "Din Stencil Medium", Verdana, sans-serif; margin: 5px 0 0; padding: 8px 0 0px; border-top: 3px solid #CC0000; } .CaseStudy .Case-Info DT { margin: 0; padding: 0; font-family:"Din Stencil Medium","Din Text Pro Light",Verdana, sans-serif !Important; font-size: 20px !Important; line-height: 1.25em; padding: 2px 0; font-weight: 300; } .CaseStudy .Case-Info DD { margin: 3px 0 0 0; font-family: "Din Text Pro Light", Helvetica, Verdana, sans-serif; font-weight: 300; font-size: 12px; color: #666; line-height: 1.35em; } /* ----------------------------------------- NAVIGATION ----------------------------------------- */ #Navigation { width: 100%; font-family:"Din Text Pro Light", Helvetica, sans-serif; font-size-adjust:0.5; font-weight:200; font-style:normal; z-index: 100000; position: fixed; top: 0; padding: 15px 0 12px; background-color: #313131; display: block; clear: both; border-top: 2px solid #ad0101; } #Navigation .row { position: relative; } #Navigation #Logo { float: left; margin-left: 20px; } #Navigation #Logo IMG { display: block; height: 45px; width: 130px; } #Navigation #Nav { float: right; margin: 12px 0 0 0px; position: absolute; left: 190px; top: 0px; } #Navigation #Nav LI { float: left; display: inline; } #Navigation #Nav LI A { color: #FFF; font-size: 12px; font-weight: 400; text-transform: uppercase; padding: 0 10px; border-left: 1px solid #666; } #Navigation #Nav LI A:HOVER { color: #cc0000; } #Navigation #Nav LI:first-child A { border-left: none; } #Navigation .MobileNav { position: absolute; z-index: 10000; top: 4px; right: 12px; display: none; } /* ----------------------------------------- INTRO ----------------------------------------- */ #Intro { padding: 190px 0 20px; background: url(../images/intro-bg.jpg) no-repeat center fixed; background-size: cover; } #Intro #SlidesWrapper { width: 100%; background: #ad0101 url(../images/bg-pattern_red.jpg); } #Intro #SlidesWrapper #Slides { margin: 0 auto; padding: 0; } #Intro #SlidesWrapper #Slides .Slide { float: left; display: none; } #Intro #SlidesWrapper #Slides.orbit .Slide { display: block; } #Intro #SlidesWrapper #Slides .Slide IMG {} #Intro #SlidesWrapper #Slides IMG { display: none; } #Intro #SlidesWrapper #Slides.orbit IMG { display: block; } #Intro #SlidesWrapper #Slides IMG:first-child { display: block; } #Intro .ContactInfo { font-family: Helvetica, Arial, san-serif; color: #FFF; font-size: 12px; margin-top: 180px; } #Intro .orbit-wrapper { } #Intro .orbit-bullets { bottom: -27px; } #Intro #PagerWrapper { height: 35px; background: url(../images/bg-pattern_gray.jpg); } #Intro #SlidesWrapper { position: relative;} .PopUp { position: absolute; bottom: 20px; left: 55px; background-color: #ad0101; } .PopUp:HOVER { background: #333 url(../images/bg-pattern_gray.jpg); } /* ----------------------------------------- AGENCY ----------------------------------------- */ #Agency { background: url(../images/agency-bg.jpg) no-repeat center bottom fixed; background-size: cover; } #Agency #AgencyWrapper { background: #FFF url(../images/agency-wrapper_bg.jpg) top center no-repeat; border-bottom: 20px solid #e5e5e5; } #Agency H2.IntroHeader { margin-bottom: 120px; } /* ----------------------------------------- PROCESS ----------------------------------------- */ #Process { background: url('../images/process-bg.jpg') no-repeat center bottom fixed; background-size: cover; } #Process #ProcessWrapper { background: #FFF url(../images/bg-wrapper_bg.gif) top center no-repeat; } #Process H1 { font-size: 85px; font-family:"Din Stencil Bold", Verdana, sans-serif; line-height: 1.15em; margin: 0; padding: 0 0 15px 0; color: #CC0000; } #Process H3.Headline { font-family:"Din Stencil Bold", Verdana, sans-serif; clear: line-height: 1.15em; both; display: block; text-transform: uppercase; font-size: 40px; margin: 20px 0 0 0; padding: 0; } #Process #Pillars H4 { margin: 0; padding: 20px 0 15px 0; letter-spacing: 0.09em; font-size: 21px; line-height: 1.35em; text-transform: uppercase; color: #CC0000; font-family: "Din Stencil Medium", Verdana, sans-serif; } #Process #Pillars .Pillars-Item H5 { letter-spacing: 0.09em; line-height: 1.35em; padding: 15px 0 20px 0; border-top: 2px solid #CCC; font-size: 21px; font-family: "Din Stencil Medium", Verdana, sans-serif; text-transform: uppercase; } #Process #Pillars .Pillars-Item H5 SPAN { font-weight: 300; font-family: Georgia, Times, serif; color: #CC0000; } #Process #Pillars .Pillars-Item P { font-size: 13px; font-family: "Din Text Pro Light", Helvetica, sans-serif; line-height: 1.25em;} /* ----------------------------------------- EXPERTISE ----------------------------------------- */ #Expertise { background: url(../images/expertise-bg.jpg) no-repeat center bottom fixed; background-size: cover; } #Expertise UL { margin: 0 0 20px 25px; color: #666666; font-family: Georgia, serif; } #Expertise UL LI { font-size: 18px; } #Expertise #ExpertiseWrapper { background: #FFF url(../images/expertise-wrapper_bg.gif) top center no-repeat; } #Expertise H3 { font-size: 30px; text-transform: uppercase; } #Expertise #ToolsWrapper { background: url(../images/expertise-toolswrapper_bg.jpg) 0 80px no-repeat; background-size: cover; } #Expertise #ToolsWrapper P { color: #666666; font-family:"Din Text Pro Light", Helvetica, sans-serif; font-size: 18px; } #Expertise #ToolsWrapper .Tool-Icon { display: table-cell; height: 100px; vertical-align: bottom; } #Expertise #ToolsWrapper .Tool-Icon IMG { display: inline; } #Expertise #ToolsWrapper .Tool-Item DT { font-size: 18px; margin: 10px 0 0px 0; color: #cc0000; font-family:"Din Text Pro Bold", Helvetica, sans-serif; } #Expertise #ToolsWrapper .Tool-Item DD { font-size: 16px; line-height: 1.35em; color: #333333; margin: 0; font-family:"Din Text Pro Light", Helvetica, sans-serif; } #Expertise #ToolsWrapper .CaseStudy H4 { top: 260px; } #Expertise #ToolsWrapper .CaseStudy {} #Expertise H4 { text-transform: uppercase; padding: 35px 0 25px; font-family: "Din Stencil Medium", Helvetica, sans-serif; font-size: 20px; border-top: 3px solid #cccccc; } /* ----------------------------------------- CASE STUDIES ----------------------------------------- */ #CaseStudies { background: url(../images/casestudies-bg.jpg) no-repeat center bottom fixed; background-size: cover; } #CaseStudies H1 { text-transform: uppercase; background: url(../images/bg-header_magnify_grass.png) left top no-repeat; font-family:"Din Stencil Bold", Verdana, sans-serif; color: #FFF; padding: 20px 0 0 50px; font-weight: 600; border-top: 5px solid #990000; margin-top: 115px; } #CaseStudies H1 SPAN { text-transform: none; font-family: Georgia, serif; font-weight: normal; } #CaseStudyIntro DL, #CaseStudies DL { margin: 0 0 35px 0; height: 82px; float: left; width: 100%; } #CaseStudyIntro DT, #CaseStudies DT { border-top: 1px solid #990000; padding: 15px 0px 0px 70px; color: #FFF; font-family:"Din Text Pro Bold","Din Text Pro Light", Helvetica, sans-serif; font-size: 15px; line-height: 1.25em; font-weight: normal; } #CaseStudyIntro DT A IMG, #CaseStudies DT A IMG { opacity: 0.9; position: absolute; left: 15px; border-radius: 5px; } #CaseStudyIntro DT A:HOVER IMG, #CaseStudies DT A:HOVER IMG { opacity: 1; } #CaseStudyIntro DL.TopRow DT, #CaseStudies DL.TopRow DT { border-top: 5px solid #990000; } #CaseStudyIntro DD, #CaseStudies DD { padding: 3px 0px 15px 70px; color: #000; font-family:"Din Text Pro Bold","Din Text Pro Light", Helvetica, sans-serif; font-size: 14px; line-height: 1.25em; } #CaseStudies DT A, #CaseStudyIntro DD A, #CaseStudies DD A { color: #FFF; padding-top: 4px; } #CaseStudies DT A:HOVER, #CaseStudyIntro DD A:HOVER, #CaseStudies DD A:HOVER { color: #FF0000; } #CaseStudies .Promo { padding-left: 50px; background: url(../images/icon-red_dart.gif) 25px 1px no-repeat; } #CaseStudies .Promo H5 { font-family:"Din Text Pro Bold", Helvetica, sans-serif; color: #666; } #CaseStudies .Promo P { font-family:"Din Text Pro Light", Helvetica, sans-serif; line-height: 1.25em; color: #666; } #CaseStudyIntro { background: #000 url(../images/casestudies-intro_bg.jpg) no-repeat center top fixed; } #CaseStudyIntro H1 { font-weight: 300; background: url(../images/icon-magnify_h1.png) left no-repeat; padding: 0 0 0 60px; font-size: 50px; line-height: 1.35em; font-family:"Din Stencil Medium", Verdana, sans-serif; text-transform: uppercase; margin: 140px 0 0px 0; color: #b80000; } #CaseStudyIntro H2 { font-weight: 300; padding: 0 0 0 60px; font-size: 45px; line-height: 1.35em; font-family: Georgia, Times, serif; margin: 0 0 40px 0; font-weight: normal; color: #FFF; } #CaseStudyIntro P { color: #999; padding: 0 0 0 60px; font-size: 11px; margin: 60px 0 60px; } #CaseStudyIntro #CaseStudyListing { background: #FFF url(../images/casestudies-intro_listing.jpg) no-repeat center bottom; padding: 30px 0; } #CaseStudyIntro #CaseStudyListing DT, #CaseStudyIntro #CaseStudyListing DD A { color: #990000; } #CaseStudyIntro #CaseStudyListing DT { border-color: #cccccc; } .CaseDetail {} .CaseDetail .CaseHeaderWrap { -moz-box-shadow: 0 5px 7px #555; -webkit-box-shadow: 0 5px 7px #555; box-shadow: 0 5px 7px #555; background: #b00000 url(../images/bg-red_banner.jpg) top repeat-x; position: relative; } .CaseDetail .CaseHeaderWrap H1 { font-weight: 300; background: url(../images/icon-magnify_h2.png) left no-repeat; letter-spacing: 0.09em; color: #FFF; text-transform: uppercase; font-family:"Din Stencil Medium", Verdana, sans-serif; padding: 15px 0 15px 50px; } .CaseDetail .CaseHeaderWrap .BacktoTop { background: url(../images/icon-arrowup.png) right no-repeat; padding: 0 18px 2px 0; position: absolute; color: #FFF; top: 50px; right: 10px; font-size: 11px; } .CaseDetail .CaseBanner { background-color: #999; height: 285px; } .CaseDetail .CaseInfo { padding: 85px 0 30px 0; background-color: #FFF; } /* ----------------------------------------- NEWS ----------------------------------------- */ #News { background: url(../images/news-bg.jpg) no-repeat center bottom fixed; background-size: cover; padding: 100px 0 150px; } #News #NewsWrapper { background: #FFF url(../images/bg-wrapper_bg.gif) top center no-repeat; border-top: 3px solid #cc0000; } #News #TwitterFeed { position: relative; float: right; width: 90%; float: right; margin: 35px 20px; } #News #FacebookFeed { position: relative; float: right; width: 90%;float: right; margin: 35px 20px; } .fb-like-box, .fb-like-box span, .fb-like-box span iframe[style] { width: 100% !important; max-width: 520px; } /* ----------------------------------------- TEAM ----------------------------------------- */ #Team { background-color: #FFF; } #Team #TeamWrapper { background: #FFF url(../images/bg-wrapper_bg.gif) top center no-repeat; } #Team H1.RedText { font-size: 50px; clear: both; display: block; padding: 30px 0; color: #CC0000; } #Team .LargeText { font-size: 23px; } #Team .CaseStudy { margin-top: 60px; } #Team .CaseStudy H4 { top: 160px; } #Team .CaseStudy IMG { width: 100%; height: auto !important; } /* ----------------------------------------- CONTACT ----------------------------------------- */ #Contact { background-color: #e3dede; } #Contact #ContactWrapper { background: #efefef url(../images/bg-wrapper_bg.gif) top center no-repeat; } #Contact .Content { padding: 0 0px 20px 20px; } #Contact H1 { font-size: 42px; clear: both; display: block; padding: 50px 0 15px; margin: 10px 0 25px 0; border-bottom: 5px solid #CCC; } #Contact P { color: #666; } #Contact .Map { border-top: 5px solid #CCC; margin: 30px 0; } #Contact H3 { font-family:"Din Stencil Bold", Verdana, sans-serif; text-transform: uppercase; color: #999999; font-size: 35px; } #Contact #Form { margin: 0 20px; } #Contact #Form P { margin: 0; padding: 0; } #Contact #Form UL { padding: 0 0 20px 0; } #Contact #Form LI { list-style: none; display: inline; float: right; width: 49%; } #Contact #Form LI:first-child { float: left; } #Contact #Form LABEL { font-family:"Din Stencil Medium", Verdana, sans-serif; clear: both; margin: 15px 0 5px; padding-bottom: 5px; font-size: 16px; } #Contact #Form .SelectBox { padding: 5px 0; } #Contact #Form .SubmitForm { margin: 50px 0 0 0; } #Contact #Form .SubmitForm LI { width: auto !important; float: left; } #Contact #Form .SubmitForm P { float: left; text-align: right; font-size: 20px; color: #666; font-family: "Din Text Pro Light", Verdana, sans-serif; text-transform: uppercase; } #Contact #Form .SubmitForm INPUT { cursor: pointer; margin: -12px 0 0 20px; } #Contact #Form INPUT { color: #999; } #Contact #Form TEXTAREA { width: 100%; height: 100px; } /* ----------------------------------------- FOOTER ----------------------------------------- */ #Footer { background: url(../images/footer-bg.jpg); padding: 15px 0px; } #Footer #FooterWrapper UL { margin: 15px 0 5px 0; padding: 0; } #Footer #FooterWrapper LI { list-style: none; display: inline; } #Footer #FooterWrapper LI A { font-size: 13px; color: #FFF; font-family:"Din Text Pro Light", Helvetica, sans-serif; padding: 0 10px; border-left: 1px solid #999; } #Footer #FooterWrapper LI:first-child A { padding-left: 0; border-left: none; } #Footer #FooterWrapper P { font-size: 13px; color: #FFF; font-family:"Din Text Pro Light", Helvetica, sans-serif; } /* ----------------------------------------- RESPONSIVE ----------------------------------------- */ @media screen and (max-width: 950px) { #Navigation { padding: 10px; } #Navigation #Logo { margin-left: 10px; } #Navigation #Logo IMG { height: 35px; width: 101px; !impotant; } #Navigation .MobileNav { display: block; height: 35px; width: 46px; } #Navigation #Nav { display: none; } #Navigation #Nav.Open { display: block; } #Navigation #Nav { left: auto; right: 0; top: 34px; } #Navigation #Nav LI { padding: 0; display: block; float: none; background-color: #333; } #Navigation #Nav LI A { font-size: 16px; display: block; padding: 5px 15px; margin: 0; border: none; } #Navigation #Nav LI A:HOVER { background: #111; } #Navigation #Nav UL { padding: 10px 0; background: #333; } .BlackTapeText P { font-size: 30px; } .IntroHeader { font-size: 18px; padding-top: 50px; } .Content { padding: 10px; } } @media screen and (max-width: 768px) { #Intro { padding: 190px 0 20px; background: url(../images/intro-bg.jpg) no-repeat center scroll; background-size: cover; } } @media screen and (max-width: 740px) { .CaseDetail .CaseHeaderWrap H1 { font-size: 30px; } .CaseDetail .CaseBanner .row { padding-top: 275px; } .CaseDetail .CaseBanner .row H5 { font-size: 18px !important; padding-bottom: 5px !important; margin-bottom: 0 !important; color: #CC0000 !important; } .CaseDetail .CaseBanner .row P { font-size: 16px !important; color: #666 !Important; } .CaseDetail .CaseInfo { padding: 200px 0 30px 0; } .CaseDetail .CaseHeaderWrap .BacktoTop { top: 40px; } } .clearfix { display: block; clear: both; }