/* Table of Content ================================================== #Typography (baseline corrections) #Helpers #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Typography Baseline Corrections ======================================== */ body { font: 14px/21px Helvetica, sans-serif; } h1, h2, h3, h4, h5, h6 { color: #7f7d78; font-family: Helvetica, sans-serif; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); } h1 { line-height: 49px; margin-bottom: 14px;} h2 { line-height: 42px; margin-bottom: 7px; } h3 { line-height: 35px; margin-bottom: 7px; } h4 { line-height: 28px; margin-bottom: 7px; } h5 { line-height: 21px; } p { margin: 0 0 21px 0; color: #666; text-shadow: 1px 1px 2px rgba(71,80,23,0.2); } p.lead { font-size: 28px; } p.small { font-size: 10px; } strong, b { font-weight: bold; color: #666; } a { color: #fbaf17; text-decoration: none; font-weight: 700; letter-spacing: 0.04em; } a:hover { color: #8cc63e; text-decoration: underline; } hr { margin: 14px 0 28px; } /* Blockquotes ---------------------*/ blockquote, blockquote p { line-height: 21px; color: #5a5d58; } blockquote { margin: 0 0 21px; padding: 7px 20px 0 19px; } cite { font-size: 21px; text-shadow: 1px 1px 1px rgba(0,0,0,0.2); color: #5a5d58; } /* Lists Baseline Corrections ---------------------*/ ul, ol { margin-bottom: 21px; } ul ul, ul ol, ol ol, ol ul { margin: 7px 0 7px 28px; } ul ul li, ul ol li, ol ol li, ol ul li { margin-bottom: 7px; } li { line-height: 21px; margin-bottom: 14px; } ul.iy { margin: 0 0 0 21px; } /* #Helpers ======================================== */ .ksgreenhtag { color: #8cc63e; font-weight: 800; letter-spacing: 0.02em; } .kswhitehtag { background: url(../img/what-if/wi-blond-locker-girl.jpg) no-repeat; height: 170px; width: 245px; float: left; margin-right: 2%; } .kswhitehtag h4 { color: #fff; font-weight: 800; letter-spacing: 0.02em; margin: 13.3% 0 0 5%; } .ksgreenhtag-2 { color: #8cc63e; font-size: 28px; font-weight: 800; letter-spacing: 0.02em; } .ksorangehtag { color: #fbaf17; font-weight:800; letter-spacing: 0.02em; } .ksbluehtag { color: #00b0f0; letter-spacing: 0.02em; font-weight: 800; } .fs17 { font-size: 17px; } .center { text-align: center; } .left { text-align: left; } .right { text-align: right; } .float-l { float: left; } .float-r { float: right; } .martp-14 { margin-top: 14px; } .marlft-14 { margin-left: 14px; } .martp-28 { margin-top: 28px; } .martp-28-slide { margin-top: 28px; } .marbtm-28 { margin-bottom: 28px; } .martp-minus { margin-top: -4.3%; } .ie7 #title{ padding-top: 20px; } .ks-imgbrd { padding: 7px; box-shadow: 0 1px 1px rgba(255,255,255,0.4), inset 0 1px 1px rgba(0,0,0,0.1), 0 0 0 2px rgba(255,255,255,0.5); } .ks3b { font-size: 20px; } .logo-bottom { max-width: 65%; } iframe, object, embed { max-width: 100%; } /* #Site Styles ================================================== */ * { box-sizing: border-box; } html, body { height: 100%; background: #faf9f9; } /*Clearfix ---------------------*/ .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } /*Keep Header on Top ---------------------*/ #header-wrap { position: fixed; height: 175px; top: 0; width: 100%; z-index: 175; } .content { margin: 210px 0 0; } /*Force Footer to Bottom ---------------------*/ .wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -150px; } #footer { height: 150px; } .push { height: 150px; } /* Bands ---------------------*/ .band.header { background: #fff; border-bottom: 20px solid #fbaf17; } .band.footer { background: #fff; border-top: 20px solid #fbaf17; } /* Header ---------------------*/ header.main { padding: 35px 35px; } header h1.logo { margin: 7px 0 0 35px; float: left; } header h1.logo a { width: 300px; height: 97px; display: block; background: url(../img/kindred-sun-300x97.png) no-repeat; font: 0/0 a; text-shadow: none; color: transparent; } #rh-h4 { float: right; margin: -4% 4.3% 0; } /* Navigation ---------------------*/ nav.ks-invest { font-size: 113%; margin-top: 0.2%; height: 28px; } nav.ks-invest:before, nav.ks-invest:after { content:""; display: table; } nav.ks-invest ul { list-style-type: none; margin: -0.5% 0 0 38%; overflow: hidden; padding: 0; } nav.ks-invest ul li { padding: 0; } nav.ks-invest li a:link, nav.ks-invest a:visited { background: #fbaf17; border: 2px solid #fbaf17; border-radius: 0 0 3px 3px; color: #fff; display: block; font-weight: bold; padding: 1%; text-decoration: none; width: 90px; } nav.ks-invest li a:hover { background: #fff; border: 2px solid #fbaf17; color: #fbaf17; } nav.ks-invest .selected a { background: #fff; border: 2px solid #fbaf17; color: #fbaf17; } nav.ks-invest IMG { position: absolute; top: 1.85%; left: 50%; } nav.ks-invest .rhubG { color: #8cc63e; font-size: 110%; } nav.ks-invest .rhubR { color: #dd4c49; font-size: 120%; } nav.ks-invest .rhubO { color: #fbaf17; font-size: 140%; } nav.ks-invest .arrow IMG { margin: 3.3% 0 0 -5%; } .fade-in { opacity:0; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -webkit-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1) */ -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-animation-duration:1s; animation-duration:1s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .fade-in.one { -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .fade-in.two { -webkit-animation-delay: 1.2s; animation-delay: 1.2s; } .fade-in.three { -webkit-animation-delay: 1.6s; animation-delay: 1.6s; } .fade-in.four { -webkit-animation-delay: 1.9s; animation-delay: 1.9s; } .blinker { -webkit-animation-name: blinker; animation-name: blinker; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes blinker { from { opacity:0; } to { opacity:1; } } @keyframes blinker { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } } #ks-one { margin: 0 0 0 -20%; } #ks-two { } #ks-three IMG { max-width: 10%; } .arrow IMG { top: 10px; } nav.ks-social { margin: 0 auto; font-size: 90%; } nav.ks-social ul { margin: 2% 13.91%; } nav.ks-social ul li { float: left; list-style:none; margin-left: 0; padding: 0.5%; } nav.ks-social li i:hover { color: #8cc63e; cursor: pointer; } #ks-mainnv { margin-top: -7%; } nav.ks-nav { font-size: 80%; height: 28px; margin: 0.3% 0; } nav.ks-nav:before, nav.ks-nav:after { content:""; display: table; } nav.ks-nav ul { list-style-type: none; margin: 0; overflow: hidden; padding: 0; } nav.ks-nav ul li { float: left; padding: 0.2%; } nav.ks-nav li a:link, nav.ks-nav a:visited { background: #fbaf17; border: 2px solid #fbaf17; border-radius: 3px 3px 0 0; color: #fff; display: block; font-weight: bold; padding: 1%; text-align: center; text-decoration: none; width: 90px; } nav.ks-nav li a:hover { background: #fff; border: 2px solid #fbaf17; color: #fbaf17; } nav.ks-nav a.selected { background: #fff; border: 2px solid #fbaf17; color: #fbaf17; } nav.ks-nav .ksgreen { border: 2px solide #8cc63e; color: #8cc63e; } /*Benefits Nav ---------------------*/ .benav { text-align: center; margin: -28px 0 0 56px; } .benav li { font-size: 14px; text-decoration: none; display: inline-block; text-align: center; margin: 20px 0; } /* Aside ---------------------*/ .main aside { border-top: 20px solid #fbaf17; } aside { background: #fff; box-shadow: 0 5px 10px #aaa; border-radius: 5px; } aside p.ksgreen-win { color: #8cc63e; font-size: 24px; font-weight: 800; letter-spacing: 0.02em; } aside b.ksorange { color: #fbaf17; } aside h4.ksgreen-win { color: #8cc63e; font-size: 21px; font-weight: 800; letter-spacing: 0.02em; border: solid #ddd; border-width: 0 0 1px; clear: both; } .ks-info { padding: 14px; } .ks-info a { color: #fbaf17; } .ks-info a:hover { color: #8cc63e; } /* Footer ---------------------*/ footer { background: #fff; } #footer { background: #fff; height: 220px; } footer a, a:visited { color: #666; text-shadow: none; } footer a:hover { color: #8cc63e; } footer .chm a { font-size: 10px; color: #666; } footer .chm a:hover { color: red; } #ksContact { font-size: 150%; } #ksContact p { padding: 2%; } #ksContact a { color: #fbaf17; } .ksCONNECT, .ksBEIN, .ksINV, .ksCONT { font-size: 80%; margin: 0; } .ksCONNECT p, .ksBEIN p, .ksINV p, .ksCONT p { line-height: 100%; margin: 0.5%; } .ksCONNECT i { margin-right: 2%; } .ksCONNECT a, .ksBEIN a, .ksINV a, .ksCONT a { margin: 0 1%; } .ksCONNECT a:hover, .ksBEIN a:hover, .ksINV a:hover, .ksCONT a:hover { color: #e52b28; text-decoration: underline; } .ksCONT strong, .ksBEIN strong, .ksINV strong, .ksCONNECT strong { color: #0b9ace; padding: 1%; line-height: 20px; } /* Social ---------------------*/ .facebook { color: #3b5699; } .twitter { color: #2ba8e2; } .google-plus { color: #dd4c39; } .linked-in { color: #0c76b4; } .instagram { color: #5381a5; } .youtube { color: #e52b28; } /* Portals ---------------------*/ .portals-aside { background: #eee; border: 1px solid #fbaf17; box-shadow: none; left: 75%; max-width: 255px; position: relative; top: -131px; } .portals-aside p { line-height: 105%; font-size: 80%; margin: 2% 0; padding: 0.5% 5%; text-align: right; } .portals-aside strong { color: #e52b28; font-size: 100%; font-style: italic; margin: 5% 0 0; vertical-align: bottom; } .portals-aside .button { background: #fbaf17; border: 1px solid #fff; border-radius: 2px; box-shadow: none; color: #fff; font-size: 75%; margin: -1% 0.8%; padding: 2%; text-align: center; text-shadow: none; width: 130px; } .portals-aside .button:hover { background-color: #fff !important; border: 1px solid #e52b28; color: #e52b28 !important; cursor: pointer; text-decoration: none; } /* #Page Styles ================================================== */ /* Home ---------------------*/ .band.main h3 { font-size: 180%; margin: -7px 0 21px; } .band.main h5 { font-size: 125%; line-height: 30px; } .band.main a { color: #fbaf17; } #ks-home-new { margin-top: -4%; } #ks-home-new h3 { font-size: 150%; margin-top: 0 auto; } #ks-home-new p { font-size: 120%; } .ks-home-new-one { padding: 1%; } .ks-home-new-two { padding: 1%; } #ks-home-foundation { padding-left: 1%; } #ks-home-gofundme { padding-left: 7%; } .what-if p { font-size: 124%; line-height: 150%; } .what-if IMG { padding: 0 7px; } #ks-aside-home h4 { padding: 14px 0; font-size: 170%; } #ks-aside-home p { font-size: 120%; padding: 14px 0px; } #ks-aside-home IMG { margin-top: 21px; padding: 0 6px; } #ksbubble { width: 0 auto; height: 0 auto; background: #8cc63e; position: relative; border-radius: 10px; margin-left: 112px; margin-top: -60px; } #ksbubble p { color: #fff; padding: 7px; text-align: center; } #ksbubble:before { content:""; position: absolute; right: 100%; top: 26px; width: 0; height: 0; border-top: 13px solid transparent; border-right: 26px solid #8cc63e; border-bottom: 13px solid transparent; } #ks-triangle-r { width: 0; height: 0; border-top: 14px solid transparent; border-left: 28px #8cc63e solid; border-bottom: 14px solid transparent; margin-top: 70px; } #what-if-home { margin-top: -70px; } .solar { max-width: 60%; margin: -14px 0; } /* Solution ---------------------*/ .solution h3 { color: #fbaf17; font-weight: 800; letter-spacing: 0.02em; } .solution p { color: #fbaf17; font-size: 137% } .sol-hero { font-size: 125%; } .up2us h3 { color: #ff2c3d; font-weight: 800; letter-spacing: 0.02em; } .up2us p { color: #ff2c3d; font-size: 137%; } /* Programs ---------------------*/ .ks-when { color: #fbaf17; font-size: 135%; padding-top: 28px; } .ks-when li { line-height: 31px; } .ksprog { border: none; font-style: normal; font-size: 180%; line-height: 35px; } #ks-programs-foundation { margin-left: 147px; } .ks-skylimit { padding: 1% 0 5%; } #h3-prog p { font-size: 270%; padding: 0 0 4%; } #h3-prog .ksp-orange { color: #fbaf17; } #h3-prog .ksp-blue { color: #00b0f0; } #h3-program-one p { font-size: 220%; line-height: 38px; padding: 0; } #h3-program-one .ksp-orange { color: #fbaf17; } #h3-program-one .ks-yes { color: #fbaf17; font-size: 375%; padding: 0% 15%; margin:; } #mar-ks-program { margin: 1.2% 0 1.5%; } #h3-program-one-italic { font-size: 124%; font-style: italic; } #h3-program-one-italic .ksp-green { color: #8cc63e; } .ks-thetipandiceberg { margin: -3% 0; } .ks-thetipandiceberg p { padding: 1%; font-size: 100%; margin: -3% 0; } .ks-thetip { margin: 5% 0 0; } .ks-thetip p { font-size: 100%; padding: 1%; margin: 0; } .ks-thetip .ksp-blue { color: #00b0f0; } .ks-thetip .ksp-orange { color: #fbaf17; } #ks-thetip-one h3 { margin-bottom: 0.7%; } #ks-thetip-one p { color: #aaa; font-size: 120%; margin-bottom: -3%; } #ks-thetip-one .ksp-grey { color: #aaa; } .ks-theiceberg { padding: 0 0 5%; } .ks-theiceberg .ksp-blue { color: #00b0f0; } .ks-theiceberg .ksp-orange { color: #fbaf17; } .ks-theiceberg p { padding: 1%; margin: -1% 0 0; } #ks-theiceberg-one h3 { margin-bottom: 0.7%; } #ks-theiceberg-one p { font-size: 100%; } #ks-theiceberg-two p { color: #00b0f0; font-size: 96%; font-weight: 800; } /* How ---------------------*/ #how-handshake { margin-left: 126px; } .ks-rmi { background: #faf9f9; border: 3px solid #fff; border-radius: 15px; } .ks-rmi p { font-size: 20px; line-height: 27px; background: #fbaf17; color: #fff; font-weight: 800; letter-spacing: 0.04em; border-radius: 15px 15px 0 0; } /* Benefits ---------------------*/ .ksb-sch, .ksb-hme, .ksb-env, .ksb-gov { background: #fff; padding: 21px 7px 7px; border-radius: 15px; } .ksb-sch IMG, .ksb-hme IMG, .ksb-env IMG, .ksb-gov IMG { } .ksb-sch i, .ksb-hme i, .ksb-env i, .ksb-gov i { margin-right: 7px; } .ksb-sch i, .ksb-env i { color: #8cc63e; font-size: 18px; line-height: 25px; } .ksb-hme i, .ksb-gov i { color: #fbaf17; font-size: 18px; line-height: 25px; } .ks-benes h4 { color: #fbaf17; font-size: 21px; line-height: 28px; } /* Impact ---------------------*/ #ks-impact-foundation { margin-left: 147px; } /* About ---------------------*/ .lavigne, .thatcher, .ksfteam, .hansen, .venor { background: #fff; padding: 14px; } .ksfteam { background-color: transparent; } .ksfteam a:link, .ksfteam a:visited { color: #fbaf17; } .lavigne IMG, .thatcher IMG, .ksfteam IMG, .hansen IMG, .venor IMG { padding: 5px; } .lavigne h3, .thatcher h3, .hansen h3, .venor h3 { line-height: 21px; margin-top: 5px; } .lavigne h4, .thatcher h4, .hansen h4, .venor h4 { line-height: 21px; margin-top: 5px; } .lavigne h5, .thatcher h5, .hansen h5, .venor h5 { line-height: 28px; } .lavigne p, .thatcher p, .ksfteam p, .hansen p, .venor p { font-size: 12px; line-height: 19px; } #ksfteam-left { margin-left: 77px; } .ks-disc li { line-height: 14px; padding: 0 auto; font-size: 14px; margin-left: -21px; } .ks-involved a { font-size: 28px; line-height: 35px; } /* Contact ---------------------*/ .ks-cont { margin-left: 89px; } .ks-cont ul li { margin: 0; padding: 0; } .ks-cont i { margin-right: 7px; } ul.resp-tabs-list, p { margin: 0px; padding: 0px; } .resp-tabs-list li { font-weight: 600; font-size: 95%; display: inline-block; padding: 13px 15px; margin: 0; list-style: none; cursor: pointer; float: left; } .resp-tabs-container { padding: 0px; background-color: #fff; clear: left; } .resp-tabs-container th { text-align: left; padding-left: 1%; border-bottom: 1px solid #dbdbdb; } .resp-tabs-container td { width: 30%; padding: 1%; } h2.resp-accordion { cursor: pointer; padding: 5px; display: none; } .resp-tab-content { display: none; padding: 15px; } .resp-tab-active { border: 1px solid #fbaf17; border-bottom: none; margin-bottom: -1px !important; padding: 12px 14px 14px 14px !important; } .resp-tab-active { border-bottom: none; background-color: #fff; } .resp-content-active, .resp-accordion-active { display: block; } .resp-tab-content { border: 1px solid #fbaf17; } h2.resp-accordion { font-size: 13px; border: 1px solid #fbaf17; border-top: 0px solid #fbaf17; margin: 0px; padding: 10px 15px; } h2.resp-tab-active { border-bottom: 0px solid #fbaf17 !important; margin-bottom: 0px !important; padding: 10px 15px !important; } h2.resp-tab-title:last-child { border-bottom: 12px solid #fbaf17 !important; background: blue; } /* Accordion styles ---------------------*/ h2.resp-tab-active { background: #eeefff !important; font-weight: 700; font-size: 110%; } .resp-easy-accordion h2.resp-accordion { display: block; } .resp-easy-accordion .resp-tab-content { border: 1px solid #fbaf17; } .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #fbaf17 !important; } .resp-jfit { width: 100%; margin: 0px; } .resp-tab-content-active { display: block; } h2.resp-accordion:first-child { border-top: 1px solid #fbaf17 !important; } @media only screen and (max-width: 768px) { ul.resp-tabs-list { display: none; } h2.resp-accordion { display: block; } .resp-vtabs .resp-tab-content { border: 1px solid #fbaf17; } .resp-vtabs .resp-tabs-container { border: none; float: none; width: 100%; min-height: initial; clear: none; } .resp-tabs-container table { font-size: 60%; } .resp-accordion-closed { display:none !important; } .resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #fbaf17 !important; } } /* Solar Application ---------------------*/ #ks-application { padding-top: 21px; } .thankyou-social p { font-size: 250%; color: #fbaf17; } .thankyou-social a:hover { color: #8cc63e; } /* Downloads ---------------------*/ .ksguides, .ksbrochures, .ksbranding { padding: 5%; } .ksguides IMG, .ksbrochures IMG, .ksbranding IMG { padding: 5%; height: 150px; } .ksguides ul, .ksbrochures ul, .ksbranding ul { padding: 5%; } /*jQuery FlexSlider v2.2.0 ======================================== */ .slider { margin: 0 0 10px!important; } /* Font-face Icons */ @font-face { font-family: 'flexslider-icon'; src:url('fonts/flexslider-icon.eot'); src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); font-weight: normal; font-style: normal; } /* FlexSlider Necessary Styles */ .flexslider { margin: 0; padding: 0; } .flexslider .slides > li { display: none; -webkit-backface-visibility: hidden; } .flexslider .slides img { display: block; } .flex-pauseplay span { text-transform: capitalize; } /* Clearfix for the .slides element */ .slides:after { content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } html[xmlns] .slides { display: block; } * html .slides { height: 1%; } /* No JavaScript Fallback */ .no-js .slides > li:first-child { display: block; } /* FlexSlider Default Theme */ .flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; border-radius: 4px; -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } .flex-viewport { max-height: 525px; -webkit-transition: all 1s ease; transition: all 1s ease; } .loading .flex-viewport { max-height: 300px; } .flexslider .slides { zoom: 1; } .carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav { *height: 0; } .flex-direction-nav a { text-decoration: none; display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 98%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; transition: all .3s ease; } .flex-direction-nav .flex-prev { left: 10px; } .flex-direction-nav .flex-next { right: 10px; text-align: right; } .flex-direction-nav .flex-prev { left: -50px; } .flex-direction-nav .flex-next { right: -50px; text-align: right; } .flexslider:hover .flex-prev { opacity: 0.7; left: 10px; } .flexslider:hover .flex-next { opacity: 0.7; right: 10px; } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } .flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } .flex-direction-nav a:before { font-family: 'FontAwesome'; font-size: 35px; line-height:1; display: inline-block; content: '\f053'; color: #7f7d78; } .flex-direction-nav a.flex-next:before { font-family: 'FontAwesome'; content: '\f054'; color: #7f7d78; } /* Pause/Play */ .flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } .flex-pauseplay a:before { font-family: 'FontAwesome'; font-size: 20px; display: inline-block; content: '\f004'; } .flex-pauseplay a:hover { opacity: 1; } .flex-pauseplay a.flex-play:before { font-family: 'FontAwesome'; content: '\f003'; } /* Control Nav */ .flex-control-nav { width: 95%; position: absolute; bottom: -20px; text-align: center; } .flex-control-nav li { margin: 0 6px; display: inline-block; zoom: 1; *display: inline; } .flex-control-paging li a { width: 11px; height: 11px; display: block; background: #fbaf17; background: rgba(140,198,62,0.5); cursor: pointer; text-indent: -9999px; border-radius: 20px; -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #fbaf17; background: rgba(251,175,23,0.9); } .flex-control-paging li a.flex-active { background: #8cc63e; background: rgba(140,198,62,0.9); cursor: default; } .flex-control-thumbs { margin: 5px 0 0; position: static; overflow: hidden; } .flex-control-thumbs li { width: 25%; float: left; margin: 0; } .flex-control-thumbs img { width: 100%; display: block; opacity: .7; cursor: pointer; } .flex-control-thumbs img:hover { opacity: 1; } .flex-control-thumbs .flex-active { opacity: 1; cursor: default; } @media screen and (max-width: 860px) { .flex-direction-nav .flex-prev { opacity: 1; left: 10px; font-size: 75%; } .flex-direction-nav .flex-next { opacity: 1; right: 10px; font-size: 75%; } } .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /* #More Information Form ================================================== */ .fs17b { font-size: 17px; } .minh { min-height: 400px; } .ksun-mif { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; } .ksun-mif a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mif:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } .ksun-mifh { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; margin: -28px 0 0 7px; } .ksun-mifh a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mifh:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } .ksun-mifp p { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; margin: -7px 0 0 484px; width: 300px; } .ksun-mifp p a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mifp p:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } .ksun-mifi { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; margin: -28px 0 14px; } .ksun-mifi a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mifi:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } .ksun-mifq { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; margin: 0 0 14px; width: 300px; } .ksun-mifq a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mifq:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } .ksun-mifa { background: #fbaf17; font-size: 16px; line-height: 26px; text-align: center; border-radius: 3px; -o-box-shadow: 0 3px 10px #aaa; box-shadow: 0 3px 10px #aaa; margin: 28px 0; } .ksun-mifa a { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; } .ksun-mifa:hover { color: #fff; text-shadow: 1px 1px 2px rgba(71,80,23,0.3); text-decoration: none; background: #f16529; } /* #Form by CoDrops ================================================== */ .iy-mc-form { position: relative; } /* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ .iy-mc-form:before, .iy-mc-form:after { content: " "; display: table; } .iy-mc-form:after { clear: both; } .iy-mc-column { width: 33%; padding: 10px 25px; float: left; } .iy-mc-column-home { width: 98%; padding: 7px 14px; float: left; } .iy-mc-column-home ul { display: inline-block; } .iy-mc-form label { display: block; padding: 1px 0 0; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; color: #7f7d78; font-weight: bold; } .iy-mc-form input, .iy-mc-form textarea, .iy-mc-form select { font-family: 'Open Sans', sans-serif; font-style:italic; color: #000; display: block; width: 100%; background: #fff; } .iy-mc-form input, .iy-mc-form textarea, .iy-mc-form select { border: 3px solid #fbaf17; } .iy-mc-form select { height: 34px; margin: 1px 0 19px; width: 108%} .iy-mc-form textarea { min-height: 200px; } .iy-mc-form input:focus, .iy-mc-form textarea:focus, .iy-mc-form label:active + input, .iy-mc-form label:active + textarea { outline: none; border: 3px solid #94c948; } .iy-mc-form select:focus { outline: none; } ::-webkit-input-placeholder { /* WebKit browsers */ color: #10689a; background: transparent; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #10689a; background: transparent; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #10689a; background: transparent; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #10689a; background: transparent; } .iy-mc-submit-wrap { text-align: center; clear: both; } .iy-mc-submit-wrap-2 { text-align: center; font-style: normal; clear: both; padding-top: 5%; } .iy-mc-form input.iy-mc-submit { background: #fbaf17; border: none; color: #fff; width: auto; cursor: pointer; text-transform: uppercase; display: inline-block; padding: 15px 30px; font-size: 1.1em; text-align: center; font-style: normal; border-radius: 2px; letter-spacing: 1px; } .iy-mc-form input.iy-mc-submit:hover { background: #8cc63e; } .iy-mc-column IMG { padding: 7px; margin: 65px 0; } @media screen and (max-width: 70em) { .iy-mc-column { width: 50%; } .iy-mc-column:nth-child(3) { width: 100%; } } @media screen and (max-width: 48em) { .iy-mc-column { width: 100%; padding: 10px; } } input[type=radio]:not(old) { width: 7px; margin: 0; padding: 0; font-size: 7px; opacity: 0; } input[type=radio]:not(old) + label { display: inline-block; margin-left: 0; line-height: 17px; } input[type=radio]:not(old) + label > span { display: inline-block; width: 14px; height: 14px; margin: 0.25em 0.5em 0.25em 0.25em; border: 1px solid #8cc63e; background: #fff; vertical-align: bottom; } input[type=radio]:not(old):checked + label > span { background-image : #fff; } input[type=radio]:not(old):checked + label > span > span {display: block; width: 14px; height: 14px; margin: 0; background: #8cc63e; } /* openModal ================================================== */ .modalDialog { display: none; margin-top: 0; overflow-y: auto; position: fixed; font-family: 'Myriad Pro', sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; pointer-events: none; } .modalDialog:target { opacity: 1; pointer-events: auto; display: block; } .modalDialog > div { max-height: none; overflow: hidden; overflow-y: auto; width: 480px; font-family: 'Myriad Pro', sans-serif; font-size: 15px; line-height: 20px; position: relative; margin: 14% auto; padding: 5px 20px 13px 20px; border: 4px solid #94c948; border-radius: 10px; background: #fff; background: -webkit-linear-gradient(#fff, #fff); box-shadow: 0 1px 2px #000; } .modalDialog IMG { float: left; } .modalDialog p { margin: 7px 7px; padding: 14px; } .modalDialog p a { font-size: 16px; margin-left: 0; } .modalDialog-2 { display: none; margin-top: 0; overflow-y: auto; position: fixed; font-family: 'Myriad Pro', sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity: 0; pointer-events: none; -webkit-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; } .modalDialog-2:target { opacity: 1; pointer-events: auto; display: block; } .modalDialog-2 > div { max-height: none; overflow: hidden; overflow-y: auto; width: 1100px; font-family: 'Myriad Pro', sans-serif; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border: 2px solid #fbaf17; border-radius: 10px; background: #fff; background: -webkit-linear-gradient(#fff, #fff); } .close { background: #94c948; color: #fff; line-height: 25px; position: absolute; right: -2px; text-align: center; top: -2px; width: 24px; text-decoration: none; font-weight: bold; border-radius: 12px; box-shadow: 1px 1px 3px #000; } .close:hover { background: #f89b1c; color: #fff; } #openModal-sapp, #openModal-info { background: url(../img/a0203-000017.jpg) 0 21%; opacity: 55%; } #openModal-sapp form, #openModal-info form { } /* #Media Queries ================================================== */ @media only screen and (min-width: 1040px) and (max-width: 1156px) { header h1.logo { margin: 10px 0 0 7px; } .flipHTML5 { width: 775px; height: 512px; } nav.ks-nav { font-size: 70%; } nav.ks-nav li { width: 80px; margin: 0.5%; } nav.ks-social { font-size: 65%; } #ks-three IMG { width: 60%; margin: 2% 0 0 2%; } } /* Smaller than standard 960 (devices and browsers) */ @media only screen and (min-width: 960px) and (max-width: 1040px) { #header-wrap { position: fixed; height: 154px; top: 0; width: 100%; z-index: 154; } .content { margin: 185px 0 0; } header h1.logo { margin: 1px 0 0 7px; } #rh-h4 h4 { font-size: 115%; margin-bottom: -90%; } nav.ks-social { font-size: 65%; } nav.ks-nav { font-size: 70%; position: relative; } nav.ks-nav ul { margin-right: -84px; width: 750px; } nav.ks-nav li { margin: 0; width: 80px; margin-right: 1px; text-align: left; } nav.ks-nav li a { padding: 0; margin: 0; } nav.ks-portals { font-size: 70%; } nav.ks-portals ul { margin-left: -584px; margin-top: 20%; width: 420px; } nav.ks-portals li a:link { margin: 0; border-radius: 3px; } .band.main h3 { padding-top: 49px; font-size: 180%; } aside { margin-top: 0; } .sol-hero h1 { font-size: 250%; } article h3 { font-size: 175%; } .ks-involved a { font-size: 139.25%; } .ksteam IMG { margin-left: 28px; padding: 28px; } .flipHTML5 { width: 573px; height: 379px; } .join-ks iframe { height: 643px; } } /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) { .band.main h3, .band.main h5 { text-align: center; } .band.main h3 { padding-top: 7px; } #ks-triangle-r { border-top: 5px solid transparent; border-left: 10px #8cc63e solid; border-bottom: 5px solid transparent; } .ksteam IMG { padding: 34px; } nav.ks-invest p { margin-left: 9%; } nav.ks-social { font-size: 50%; } #ks-three IMG { width: 15%; margin: 7% 0 0 25%; } nav.ks-nav { font-size: 80%; } nav.ks-nav ul { width: 112px; margin-top: 1.5%; } nav.ks-nav li { display: none; margin: 0; text-align: center; } nav.ks-nav .selected { display: block; background: #fff; } nav.ks-nav a {display: block; padding: 0; text-align: left; } nav.ks-nav ul:hover { background-image: none; } nav.ks-nav ul:hover li { display: block; margin: 0; } nav.ks-nav ul:hover .selected { } #ks-two .arrow { width: 7%; margin: 5.7% 0 0 -9%; } #ks-three IMG { max-width: 20%; margin: 3% 0 0 -1%; } .flex-control-nav { margin-left: 7px; } .flipHTML5 { width: 452px; height: 298px; } .portals-aside { left: 65%; top: -121px; } .join-ks iframe {height: 509px; } .ks-involved a { font-size: 100%; padding-left: 1%; } } /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { header h1.logo a { margin: 1% 0 0 -37%; } nav.ks-social { font-size: 50%; position: relative; } nav.ks-social ul { margin-left: 57%; margin-top: 2px; position: absolute; width: 100%; } nav.ks-nav { font-size: 80%; min-height: 35px; position: absolute; margin: 10% 0 0 -50%; } nav.ks-nav ul { background: #fff; border: 1px solid #fbaf17; padding: 0; position: absolute; width: 112px; } nav.ks-nav li { display: none; margin: 0; text-align: center; } nav.ks-nav .selected { display: block; background: #fff; } nav.ks-nav a {display: block; padding: 0; text-align: left; } nav.ks-nav ul:hover { background-image: none; } nav.ks-nav ul:hover li { display: block; margin: 0; } nav.ks-nav ul:hover .selected { } nav.ks-nav { padding: 0; border-radius: none; } nav.ks-nav ul { margin: -5.7% -35%; width: 92px; border-radius: none; } .portals-aside { font-size: 80%; width: 150px; margin: -6% 0 0 25%; } #ks-one { margin: -23% 0 0 45%; } #ks-two .arrow { margin: 10% 0 0 -7%; } #ks-three IMG { margin: 5%; } } /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { #header-wrap { position: relative; height: 155px; } .content { margin: 14px 0 0; } header h1.logo a { margin: 5px 0 0; } .band.header { border-bottom: 30px solid #fbaf17; } .ks-social li { display: none; } nav.ks-nav ul { margin: -3.7% 0 0 -5%; width: 92px; padding: 0; } .portals-aside { display: none; } #ks-one { font-size: 70%; margin: 0 0 0 20%; } #ks-two .arrow { max-width: 10%; margin: 25% 0 0 11%; } #ks-three IMG { max-width: 30%; margin: 7% 0 0 25%; } .band.main h3 { margin: 21px 0; text-align: center; padding-top: 31px; } .band.main h5 { text-align: center } #ks-home-foundation { margin: 0 auto; } #ks-triangle-r { margin: 77px 0 0 -14px; } #ks-triangle-r p { font-size: 100%; padding: 10px; } .flex-control-nav { width: 100%; position: absolute; bottom: -20px; text-align: center; margin-left: -7px; } .flex-direction-nav a:before { font-size: 32px; } .flipHTML5 { width: 411px; height: 274px; } #rhub-promo { padding: 3%; margin-top: -5%; } #rhub-promo h3 { font-size: 170%; } #rhub-promo IMG { max-width: 83%; } .join-ks iframe {width: 349px; } .ksCONNECT { padding-top: 14px; } .ksCONT h5 { padding-top: 14px; } article#program { padding-top: -110px; } #footer { height: 800px; } } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { .martp-28-slide { margin-top: 0; } #header-wrap { position: relative; height: 170px; } header h1.logo a { margin: 5px 0 0; } nav.ks-nav ul { margin: -3.1% 0 0; width: 92px; padding: 0; } #ks-home-h3, #ks-program-h3, #ks-solution-h3, #ks-how-h3, #ks-benefit-h3, #ks-impact-h3, #ks-about-h3, #ks-download-h3 { margin: -70% 0 auto; } .band.header { border-bottom: 30px solid #fbaf17; } .solar { margin: -14px 56px; } aside { padding: 7px; } #ks-one { font-size: 70%; margin: 0; } #ks-two .arrow { max-width: 20%; margin: 40% 0 0 -10%; } #ks-three IMG { max-width: 30%; margin: 25% 0 0 15%; } .portals-aside { display: none; } .ks-social li { display: none; } .band.main h3 { font-size: 200%; padding-top: 24px; text-align: center; } .band.main h5 { text-align: center; margin-top: 14px; } #ks-home-new { margin-top: -28px; } .ks-home-new-one, .ks-home-new-two { margin: -70px 0; } #ks-home-foundation { margin-left: 0; } #ks-triangle-r { margin: 70px 0 0 -28px; } #ks-triangle-r IMG { text-align: center; float: left; margin-left: 14px; max-width: 100%; } #ks-triangle-r p { text-align: center; font-size: 100%; margin-left: 14px; } #ks-home-new p { padding-top: 7px; } #ks-aside-home IMG { float: none; margin-left: 14px; padding: 0; } #ks-aside-home p { padding-top: 7px; } .slider { margin: 14px 0 10px!important; } .flex-control-nav { width: 100%; position: absolute; bottom: -20px; text-align: center; margin-left: 0; } .flex-direction-nav a:before { font-size: 32px; } .flipHTML5 { width: 291px; height: 194px; } #rhub-promo { padding: 3%; } #rhub-promo h3 { font-size: 130%; margin-top: -168px; text-align: center; } #rhub-promo IMG { max-width: 70%; margin-top: -42px; } .join-ks iframe {width: 250px; } .ksCONNECT { padding-top: 14px; } .ksCONT h5 { padding-top: 14px; } .ks-cont { margin-left: 0; } #footer { height: 700px; } } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */