/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ header, section, footer, aside, nav, article, figure { display:block; } body { height:100%; text-align:left; background:#f4f1f2 } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:Cambria, Georgia, serif; line-height:1.4em; color:#000; } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:Arial, Helvetica, sans-serif } h1 { font-size:2.4em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } h2 { font-size:1.8em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } h3 { font-size:1.4em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } h6 { font-size:1.2em; color:#000; margin:0 0 12px 0; font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; } p { font-size: 1.6em; color:#000; margin:0 0 12px 0; font-style:italic; line-height:150% } a { transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -ms-transition:all 0.3s linear } a:hover { } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.2em; } ol { margin:0 0 12px 0; font-size:1.2em; } dl { margin:0 0 12px 0; font-size:1.2em; } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockquote { } table { } th, td { } fieldset { } legend { } label { font-size:1.1em } textarea, input[type='text'], select { } ::-moz-selection { background:#e0521a; color:#fff } ::selection { background:#e0521a; color:#fff } .wf-loading h1,.wf-loading h2,.wf-loading h3,.wf-loading p,.wf-loading ul, .wf-loading a,.wf-loading table, .wf-loading dl, .wf-loading form, .wf-loading #call-us-cta { opacity:0; } .ie.wf-loading h1,.ie.wf-loading h2,.ie.wf-loading h3,.ie.wf-loading p,.ie.wf-loading ul,.ie.wf-loading a, .ie.wf-loading table, .ie.wf-loading dl, .ie.wf-loading form, .ie.wf-loading #call-us-cta { visibility:hidden; } h1,h2,h3,p,ul,a,dl,form,#call-us-cta { opacity:1; visibility:visible; -webkit-transition:all .4s linear; -moz-transition:all .4s linear; transition:all .4s linear; } /* 2.1 - buttons */ .generic-btn { font-size:1.8em; font-style:italic; background:#e0521a url(../images/global/play-btn.png) 93% center no-repeat; border-bottom:solid 4px #9d2f03; color:#fff; padding:13px 46px 16px 20px; display:inline-block } .generic-btn:hover { background-color:#004f83; border-bottom:solid 4px #003354 } .alt-btn { background-color:#004f83; border-bottom:solid 4px #003354 } .alt-btn:hover { background-color:#e0521a; border-bottom:solid 4px #9d2f03 } /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container {} /* 3.3 - header */ header {} /* 3.4 - content */ #content { } /* 3.5 - primary content */ #primary-content { border-bottom:solid 6px #004476; border-top:solid 6px #004476; background:#004f83; padding:44px 0; } #primary-content p { color:#fff; text-align:center; font-size:2.0em; line-height:150%; } #primary-content div { padding:32px 40px; width:900px; position:relative } #primary-content div:before { content:""; position:absolute; background:url(../images/background/divider.png) top center no-repeat; width:980px; height:10px; top:0; left:0 } #primary-content div:after { content:""; position:absolute; background:url(../images/background/divider.png) top center no-repeat; width:980px; height:10px; bottom:0; left:0 } /* 3.6 - secondary content */ #secondary-content {} /* 3.7 - tertiary content */ #tertiary-content { border-bottom:solid 6px #004476; border-top:solid 6px #004476; background:#004f83; padding:44px 0; } #tertiary-content .wrapper { -moz-column-count:2 } #tertiary-content p { color:#fff; font-size:2.0em; line-height:150%; } #tertiary-content div { padding:32px 40px; width:900px; position:relative } #tertiary-content div:before { content:""; position:absolute; background:url(../images/background/divider.png) top center no-repeat; width:980px; height:10px; top:0; left:0 } #tertiary-content div:after { content:""; position:absolute; background:url(../images/background/divider.png) top center no-repeat; width:980px; height:10px; bottom:0; left:0 } /* 3.8 - footer */ footer { background:#4a4a4a; padding:60px 0 } footer dl { border-left:solid 1px #686868; color:#fff; font-size:1.0em; padding:20px 50px; float:left; margin:0 0 50px 0 } footer dl:first-of-type { border:0; padding-left:0 } footer dl dt { font-family:"museo-sans-n3","museo-sans",sans-serif; font-style:normal; font-weight:300; font-size:1.8em; line-height:100%; margin:0 0 15px 0 } footer dl dd { font-size:1.4em; line-height:170%; font-style:italic } footer dl dd a { color:#fff; background:url(../images/global/play-btn-alt.png) left center no-repeat; padding-left:25px; display:block } footer dl dd a:hover { text-decoration:underline } footer .contact-details a { padding:0; background:none } footer p { clear:both; color:#fff; font-size:1.2em } /* 3.9 - Internet Explorer Update Alert */ #ie-alert-overlay { width:100%; height:100%; background-image:url(../images/ie-alert/bg.png); position:fixed; top:0; left:0; z-index:999999 } * html #ie-alert-overlay { position:absolute } #ie-alert-panel { width:600px; height:auto; top:200px; left:50%; position:fixed; z-index:1000001; margin:0 0 0 -300px; _position:absolute; _top:expression(200+((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px'); font-family:Arial,"Helvetica Neue",Helvetica,sans-serif } .ie-p { font-size:15px; color:#565656; line-height:1.6em; text-align:left } #ie-alert-panel a { text-decoration:none } .ie-span { font-size:18px; color:#464646; display:block; font-weight:bold; line-height:1.6em; margin:0 0 15px 0; } .ie-r-b-c,.ie-r-t-c,.ie-l-t-c,.ie-l-b-c{ background:url(../images/ie-alert/iesprites.png) no-repeat } .ie-l-t-c{ width:47px; height:47px; background-position:-18px -9px; float:left } .ie-l{ height:100%; width:47px; float:left; clear:both; background:url(../images/ie-alert/left.png) } .ie-l-b-c{ width:47px; height:46px; background-position:-17px -66px; float:left; clear:both } .ie-b{ height:46px; width:506px; float:left; background:url(../images/ie-alert/bottom.png) } .ie-r-t-c{ width:47px; height:47px; background-position:-83px -10px; float:right; cursor:pointer } .ie-r-t-c:hover{ background-position:-143px -9px } .ie-r{ height:100%; width:47px; float:right; background:url(../images/ie-alert/right.png) } .ie-c{ width:506px; height:100%; background:#f6f6f6; float:left } .ie-r-b-c{ width:47px; height:46px; background-position:-83px -65px; float:right } .ie-t{ height:47px; width:506px; float:left; background:url(../images/ie-alert/top.png) } .ie-u{ width:auto; height:43px; margin:30px auto 0 -66px; position:relative; left:50% } .ie-u-l{ width:14px; height:43px; background:url(../images/ie-alert/u-left.png); float:left } .ie-u-c{ width:auto; height:33px; background:url(../images/ie-alert/u-center.png); float:left; padding:11px 0 0 0; cursor:pointer } .ie-u-s{ margin:5px 25px 5px 25px; color:#fff; font-size:14px; font-weight:bold; line-height:1.3em; } .ie-u-r{w idth:14px; height:43px; background:url(../images/ie-alert/u-right.png); float:left } #ie-alert-panel.ie6-style .ie-r-b-c{ background:url(../images/ie-alert/6_r_b_c.png) no-repeat } #ie-alert-panel.ie6-style .ie-r-t-c{ background:url(../images/ie-alert/6_r_t_c.png) no-repeat } #ie-alert-panel.ie6-style .ie-r-t-c:hover{ background:url(../images/ie-alert/6_r_t_c_h.png) no-repeat } #ie-alert-panel.ie6-style .ie-l-t-c{ background:url(../images/ie-alert/6_l_t_c.png) no-repeat } #ie-alert-panel.ie6-style .ie-l-b-c{ background:url(../images/ie-alert/6_l_b_c.png) no-repeat } #ie-alert-panel.ie6-style .ie-l{ background:url(../images/ie-alert/6_left.png) } #ie-alert-panel.ie6-style .ie-r{ background:url(../images/ie-alert/6_right.png) } #ie-alert-panel.ie6-style .ie-b{ background:url(../images/ie-alert/6_bottom.png) } #ie-alert-panel.ie6-style .ie-t{ background:url(../images/ie-alert/6_top.png) } /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } /* 4.2 - header elements */ header #top-bar { background:#4a4a4a } header #top-bar dl { list-style:none; float:right; margin:7px 0; color:#a7a7a7; font-size:1.3em; font-family:"open-sans-n4", "open-sans", sans-serif; font-style:normal; font-weight:400; } header #top-bar dl dt { float:left; text-transform:uppercase; padding-top:4px } header #top-bar dl dd { float:left; margin:0 0 0 9px; text-indent:-9000px; } header #top-bar dl dd a { height:23px; width:23px; background-color:#8b8b8b; background-position:center center; background-repeat:no-repeat; border-radius:20px; display:block; position:relative; transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in } header #top-bar dl dd a:after { content:""; position:absolute; top:0; left:0; width:23px; height:23px; opacity:0; transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in } header #top-bar dl dd a:hover:after { opacity:1 } #facebook { background-image:url(../images/icons/facebook-fade.png) } #facebook:hover { background-color:#3b5998 } #facebook:after { background:url(../images/icons/facebook-normal.png) center center no-repeat; } #twitter { background-image:url(../images/icons/twitter-fade.png) } #twitter:hover { background-color:#44ccf6 } #twitter:after { background:url(../images/icons/twitter-normal.png) center center no-repeat; } #flickr { background-image:url(../images/icons/flickr-fade.png) } #flickr:hover { background-color:#fff } #flickr:after { background:url(../images/icons/flickr-normal.png) center center no-repeat; } #you-tube { background-image:url(../images/icons/you-tube-fade.png) } #you-tube:hover { background-color:#ce332d } #you-tube:after { background:url(../images/icons/you-tube-normal.png) center center no-repeat; } #logo { float:left; margin-right:54px; margin-top:29px } #logo a { font-size:2.4em; text-align:center; font-family:"open-sans-n8","open-sans",sans-serif; font-style:normal; font-weight:800; color:#004f83; line-height:100%; letter-spacing:-1px } #logo a span { display:block; color:#e0521a } #logo a:hover { color:#e0521a } #primary-navigation { padding:21px 0 22px 0; float:left } #primary-navigation ul { list-style:none; font-size:1.4em; line-height:100%; text-transform:uppercase; font-family:"open-sans-n7","open-sans",sans-serif; font-style:normal; font-weight:700; float:left } #primary-navigation ul li { width:170px; float:left; margin:0 20px 0 0; } #primary-navigation ul li:nth-of-type(3n) { margin-right:0 } #primary-navigation ul li:nth-of-type(3n+1) { clear:left } #primary-navigation ul li a { padding:10px 0 5px 0; color:#636f6f; border-bottom:solid 1px #d3d3d3; display:block; } #primary-navigation ul .current a { color:#004f83 } #primary-navigation ul li a:hover { color:#e0521a } #call-us-cta { float:right; background:url(../images/icons/phone.png) right center no-repeat; color:#004f83; font-size:1.4em; text-transform:uppercase; font-family:"open-sans-n8","open-sans",sans-serif; font-style:normal; font-weight:800; letter-spacing:0.8px; line-height:120%; padding:5px 34px 5px 0; margin-top:33px } #call-us-cta span { display:block; color:#e0521a; font-size:1.6em; letter-spacing:-1px } /* 4.3 - banners */ #sequence { height:509px; background:#000; width:100%; position:relative; overflow:hidden } #sequence > .sequence-canvas li > * { position:absolute; } #sequence > .sequence-canvas { height:100%; list-style:none; font-size:1.0em; width:980px; } #sequence > .sequence-canvas > li { position:absolute; width:100%; height:100%; z-index:1; } #sequence .sequence-canvas li:after { content:"."; position:absolute; background:url(../images/background/overlay.png) top left repeat; width:110%; height:100%; top:0; left:-470px; z-index:20; opacity:0.25 } #sequence img { opacity:0; position:absolute; top:0; left:-470px; z-index:10 } #sequence h1 { font-size:2.7em; color:#fff; font-family:"museo-sans-n1","museo-sans",sans-serif; font-style:normal; font-weight:100; text-align:center; width:900px; margin:0 40px; text-transform:uppercase; z-index:30; letter-spacing:-2px; line-height:180%; text-shadow:2px 2px rgba(0,0,0,0.75); top:-300px; } #sequence h1 span { display:block; font-family: "museo-sans-n9","museo-sans",sans-serif; font-style: normal; font-weight: 900; font-size:1.8em; line-height:90% } #sequence .generic-btn { font-size:2.2em; z-index:30; top:600px; padding:18px 46px 21px 20px; width:200px; left:490px; margin-left:-125px } #btn-next { background:url(../images/global/right-arrow.png) top left no-repeat; width:32px; height:56px; top:224px; right:42px; position:absolute; z-index:100; cursor:pointer } #btn-prev { background:url(../images/global/left-arrow.png) top left no-repeat; width:32px; height:56px; top:224px; left:42px; position:absolute; z-index:100; cursor:pointer } .sequence-pagination { text-indent:-9000px; z-index:1000; list-style:none; position:relative; z-index:100; float:right; width:98px; margin-top:479px } .sequence-pagination li { width:41px; height:4px; background:#4a4a4a; margin-left:8px; float:left; cursor:pointer } .sequence-pagination li.current { background:#e0521a } .sequence-pagination li:hover { background:#fff } /* banner animation */ #sequence .animate-in img { opacity:0.5; transition:all 1s ease-out; -moz-transition:all 1s ease-out; -webkit-transition:all 1s ease-out; -ms-transition:all 1s ease-out; } #sequence .animate-out img { transition:all 1s ease-in; -moz-transition:all 1s ease-in; -webkit-transition:all 1s ease-in; -ms-transition:all 1s ease-in; } #sequence .animate-in h1 { transition:all 0.4s linear; -moz-transition:all 0.4s linear; -webkit-transition:all 0.4s linear; -ms-transition:all 0.4s linear; top:128px; } #sequence .animate-out h1 { transition:all 0.4s ease-in!important; -moz-transition:all 0.4s ease-in!important; -webkit-transition:all 0.4s ease-in!important; -ms-transition:all 0.4s ease-in!important; } #sequence .animate-in .generic-btn { top:314px; -webkit-transition-duration:.3s; -moz-transition-duration:.3s; -o-transition-duration:.3s; -ms-transition-duration:.3s; transition-duration:.3s; -webkit-transition-delay:0.1s; -moz-transition-delay:0.2s; -o-transition-delay:0.1s; -ms-transition-delay:0.1s; transition-delay:0.2s } #sequence .animate-out .generic-btn { transition:all 0.4s ease-in; -moz-transition:all 0.4s ease-in; -webkit-transition:all 0.4s ease-in; -ms-transition:all 0.4s ease-in; } /* 4.3.2 - sub page */ #banner { background:#000; height:200px; overflow:hidden; position:relative } #banner .wrapper { position:relative } #banner img { top:-0px; opacity:0.5; position:absolute; left:-470px } #banner:after { content:""; position:absolute; background:url(../images/background/overlay.png) top left repeat; width:110%; height:100%; top:0; left:0; z-index:20; opacity:0.25 } #banner h1 { position:relative; z-index:100; color:#fff; font-size:6.4em; font-family: "museo-sans-n9","museo-sans",sans-serif; font-style: normal; font-weight: 900; letter-spacing:-2px; line-height:180%; text-shadow:2px 2px rgba(0,0,0,0.75); text-transform:uppercase; padding-top:50px; text-align:center } /* 4.4 - lists */ /* 4.4.1 - services list */ #services { list-style:none; margin:0; font-size:1.0em } #services li { height:300px; background:#000; overflow:hidden; position:relative; } #services li:after { content:""; position:absolute; background:url(../images/background/overlay.png) top left repeat; width:110%; height:100%; top:0; left:0; z-index:15; opacity:0.25 } #services li article { position:relative; display:table; height:300px } #services li article div { display:table-cell; vertical-align:middle } #services li img { position:absolute; top:0; left:-470px; opacity:0.5; z-index:10 } #services li h2, #services li p { position:relative; z-index:20; width:625px; float:left; text-align:center; color:#fff } #services li:nth-of-type(even) h2, #services li:nth-of-type(even) p { float:right } #services li h2 { font-size:3.4em; line-height:100% } #services li p { line-height:150%; } /* 4.4.2 - bullet list */ .bullet-list { font-size:1.6em; line-height:150%; font-style:italic; padding-left:50px } /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ /* 5.1 - index call to actions */ #ctas { list-style:none; font-size:1.0em; min-width:980px; margin:0 } #ctas li { width:25%; float:left; background:#000; position:relative; cursor:pointer; overflow:hidden; display:block; height:auto } #ctas li:after { content:""; background:url(../images/background/overlay.png) top left repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; opacity:0.3; pointer-events:none; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -ms-transition:all 0.5s ease } #ctas li a { display:block; width:100%; height:100%; margin-bottom:-3px } #ctas li img { height:auto; width:100%; opacity:0.5; position:relative; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; top:0; display:block } #ctas li h1 { position:absolute; bottom:35px; font-size:3.4em; color:#fff; margin:0; text-align:center; width:100%; line-height:100%; z-index:20; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease } #ctas li article { position:absolute; bottom:-100%; height:100%; background:#e0521a; padding:0 40px; text-align:center; border-top:solid 6px #2b2b2b; margin-bottom:-6px; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease } #ctas li article p { color:#fff; line-height:150%; padding:75px 0 30px 0 } #ctas li article .generic-btn:hover { background-color:#004f83; border-bottom:solid 4px #003354 } #ctas li:hover:after, #ctas li.active:after { opacity:0 } #ctas li:hover img, #ctas li.active img { opacity:1; top:-50px } #ctas li:hover article, #ctas li.active article { bottom:-50%; margin-bottom:0 } #ctas li:hover h1, #ctas li.active h1 { bottom:50%; margin-bottom:-60px } @media screen and (max-width: 1827px) { #ctas li article p { font-size:1.5em } #ctas li article .generic-btn { font-size:1.5em } } @media screen and (max-width: 1716px) { #ctas li h1 { font-size:2.8em } #ctas li:hover h1, #ctas li.active h1 { bottom:50%; margin-bottom:-45px } #ctas li article p { padding:55px 0 20px 0 } } @media screen and (max-width: 1555px) { #ctas li article { padding:0 20px } } @media screen and (max-width: 1444px) { #ctas li article p { font-size:1.4em } #ctas li article .generic-btn { font-size:1.4em } #ctas li article { padding:0 10px } } @media screen and (max-width: 1361px) { #ctas li h1 { font-size:2.4em } #ctas li:hover h1, #ctas li.active h1 { bottom:50%; margin-bottom:-35px } #ctas li article p { padding:45px 0 12px 0 } } @media screen and (max-width: 1231px) { #ctas li article .generic-btn { display:none } } /* 5.2 - got a question */ #got-a-question { background:url(../images/background/got-a-question.jpg) top center no-repeat; height:571px } #got-a-question article { padding-top:214px; width:480px; text-align:center } #got-a-question article h1 { color:#292b2b; font-size:3.4em; line-height:100% } #got-a-question article p { color:#292b2b; line-height:150% } /* 5.3 - products */ #products { list-style:none; font-size:1.0em; min-width:980px; margin:0; padding-top:35px } #products li { width:326px; float:left; background:#000; position:relative; cursor:pointer; overflow:hidden; display:block; margin:0 1px 35px 0; height:auto } #products li:nth-of-type(3n) { margin-right:0 } #products li:after { content:""; background:url(../images/background/overlay.png) top left repeat; width:100%; height:100%; position:absolute; top:0; left:0; z-index:10; opacity:0.3; pointer-events:none; transition:all 0.5s ease; -moz-transition:all 0.5s ease; -webkit-transition:all 0.5s ease; -ms-transition:all 0.5s ease } #products li a { display:block; width:100%; height:100%; margin-bottom:-3px } #products li img { height:auto; width:100%; opacity:0.5; position:relative; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; top:0; display:block; z-index:5 } #products li h2 { position:absolute; top:240px; font-size:2.2em; padding:0 10px; color:#fff; margin:0; text-align:center; width:306px; line-height:110%; z-index:20; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease } #products li article { position:absolute; bottom:-100%; height:100%; background:#e0521a; padding:0 10px; width:306px; text-align:center; border-top:solid 6px #2b2b2b; margin-bottom:-6px; transition:all 0.3s ease; -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; -ms-transition:all 0.3s ease; z-index:15 } #products li article .generic-btn { margin-top:70px; font-size:1.6em; padding:10px 40px 12px 14px } #products li article .generic-btn:hover { background-color:#004f83; border-bottom:solid 4px #003354 } #products li:hover:after, #products li.active:after { opacity:0 } #products li:hover img, #products li.active img { opacity:1; top:-50px } #products li:hover article, #products li.active article { bottom:-60%; margin-bottom:0 } #products li:hover h2, #products li.active h2 { top:203px; margin-bottom:-60px } #flb-lightbox-text { background-color:#e0521a!important; opacity:1!important; text-align:center } #flb-lightbox-text p { color:#fff; text-align:center } #flb-close { cursor:pointer } /* 5.4 - contact page */ #map, #map-canvas { height:400px; width:100%; position:relative } #map { } /*#map:after { content:""; position:absolute; height:115px; width:100%; background:#004f82; border-top:solid 6px #004476; border-bottom:solid 6px #004476; top:-127px; }*/ #contact-form { } #contact-form h2 { color:#1d1d1d; font-size:2.6em; padding:0 0 0 10px; margin:0 0 36px 0 } #contact-form fieldset { float:left; width:400px; margin-left:30px } #contact-form ol { list-style:none; font-size:1.0em; font-family:Cambria, Georgia, serif; } #contact-form ol li { margin:6px 0 26px 0; position:relative } #contact-form ol li input, #contact-form ol li textarea { -moz-transition:all 0.2s ease-in; -webkit-transition:all 0.2s ease-in; -ms-transition:all 0.2s ease-in; transition:all 0.2s ease-in; border:solid 1px #D3D3D3; padding:10px 10px; font-size:1.6em; color:#000; display:block; width:400px; background:#fff; font-style:normal; font-weight:400; font-family:Cambria, Georgia, serif; font-style:italic } #contact-form ol li textarea { line-height:160%; height:87px} #contact-form button { border-top:none; border-left:none; border-right:none; cursor:pointer; font-size:1.6em; } ::-webkit-input-placeholder { color:#000; } :-moz-placeholder { color:#000; } ::-moz-placeholder { color:#000; } :-ms-input-placeholder { color:#000; } #contact-form ol li input:focus, #contact-form ol li textarea:focus { border:solid 1px #004476 } #contact-form ol li div.input-error { text-indent:-9000px; background:url(../images/global/cross.png) top left no-repeat; width:20px; height:20px; position:absolute; right:10px; top:10px } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left; } .fr { float:right } .center { margin: 0 auto; margin-top: 20px; margin-bottom: 15px; } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none } .wrapper { width:980px; margin:0 auto; } .hidden { display:none } .normal-text { padding:35px 0;} .two-columns { column-count:2; -moz-column-count:2; -webkit-column-count:2; -ms-column-count:2; column-gap:40px; -moz-column-gap:40px; -webkit-column-gap:40px; -ms-column-gap:40px; } @media screen and (max-width:780px) { #sequence .wrapper {width: 100%!important; margin: 0;} .wrapper {width: 96%!important; margin: 0 2%;} #ctas {min-width: 0; width: 100%;} #got-a-question article {width: 100%;} #primary-content div {padding: 0;} #primary-content div::before {width: 100%;} #sequence h1 {margin: 0; width: 100%; font-size: 20px;} #sequence .sequence-canvas li::after {width: 100%!important; left: 0;} #btn-prev, #btn-next, .sequence-pagination li {display: none!important;} #ctas li {width: 100%;} #got-a-question {background: #999; height: auto; padding: 50px 0;} #got-a-question article {padding: 0;} footer dl:nth-child(1),footer dl:nth-child(2),footer dl:nth-child(3), footer p, #services li img {display: none;} footer dl {padding: 0; border: 0; margin: 0;} footer {padding: 20px 0;} #primary-content div::before, #primary-content div::after {background: none; width: 100%;} #banner h1 {font-size: 40px; line-height: 100%;} .two-columns, #tertiary-content .wrapper {column-count:1; -moz-column-count:1; -webkit-column-count:1; -ms-column-count:1;} #tertiary-content div {width: 100%; padding: 0;} #contact-form fieldset {width: 100%; margin: 0;} #contact-form ol li input, #contact-form ol li textarea {width: 90%; padding: 10px 5%;} #logo {margin-top: 15px; position: absolute; z-index: 999999;} #services li h2, #services li p {width: 100%;} #services li, #services li article {height: auto; margin: 20px 0;} #services li {background: #004F83;} #call-us-cta {margin: 63px 0 20px 0;} #mobmenu { width:100%; display: block; font-size:30px; text-align: right; margin: 0 20px 0 0; color: #004F86!important; z-index: 999; } #menu {width: 97%; text-align: right; margin: 10px 0 20px; position: absolute;} #primary-navigation.js { display: none; position: absolute; z-index: 99999; width: 100%; padding: 60px 0 0; } #mobmenu ul { width:100%; } #mobmenu nav#primary-navigation ul li { width:100%; border-right:none; background: #FFF; border-bottom: 1px #999 solid; font-size: 16px; text-align: center; margin: 0!important; background-image: none; } #mobmenu nav#primary-navigation ul li a {background-image: none; height: auto; padding: 20px 0; color: #004F86;} #primary-navigation-container {display: none;} #ctas li article {width: 100%;} } @media screen and (min-width:1024px) { #mobmenu .fa { display: none; } } @media screen and (min-width: 780px) and (max-width: 1024px) { #sequence .wrapper {width: 100%!important; margin: 0;} .wrapper {width: 96%!important; margin: 0 2%;} #ctas {min-width: 0; width: 100%;} #got-a-question article {width: 100%;} #primary-content div {padding: 0;} #primary-content div::before {width: 100%;} #sequence h1 {margin: 0; width: 100%; font-size: 20px;} #sequence .sequence-canvas li::after {width: 100%!important; left: 0;} #btn-prev, #btn-next, .sequence-pagination li {display: none!important;} #ctas li {width: 50%;} #got-a-question {background: #999; height: auto; padding: 50px 0;} #got-a-question article {padding: 0;} footer dl:nth-child(1),footer dl:nth-child(2),footer dl:nth-child(3), footer p, #services li img {display: none;} footer dl {padding: 0; border: 0; margin: 0;} footer {padding: 20px 0;} #primary-content div::before, #primary-content div::after {background: none; width: 100%;} #banner h1 {font-size: 40px; line-height: 100%;} .two-columns, #tertiary-content .wrapper {column-count:1; -moz-column-count:1; -webkit-column-count:1; -ms-column-count:1;} #tertiary-content div {width: 100%; padding: 0;} #contact-form fieldset {width: 100%; margin: 0;} #contact-form ol li input, #contact-form ol li textarea {width: 90%; padding: 10px 5%;} #logo {margin-top: 15px; position: absolute; z-index: 999999;} #services li h2, #services li p {width: 100%;} #services li, #services li article {height: auto; margin: 20px 0;} #services li {background: #004F83;} #call-us-cta {margin: 63px 0 20px 0;} #ctas li article {width: 100%;} #mobmenu { width:100%; display: block; font-size:30px; text-align: right; margin: 0 20px 0 0; color: #004F86!important; z-index: 999; } #menu {width: 97%; text-align: right; margin: 10px 0 20px; position: absolute;} #primary-navigation.js { display: none; position: absolute; z-index: 99999; width: 100%; padding: 60px 0 0; } #mobmenu ul { width:100%; } #mobmenu nav#primary-navigation ul li { width:100%; border-right:none; background: #FFF; border-bottom: 1px #999 solid; font-size: 16px; text-align: center; margin: 0!important; background-image: none; } #mobmenu nav#primary-navigation ul li a {background-image: none; height: auto; padding: 20px 0; color: #004F86;} #primary-navigation-container {display: none;} }