/* ========================================================================== HTML5 Boilerplate styles - h5bp.com (generated via initializr.com) ========================================================================== */ html, button, input, select, textarea { color: #222; } body { font-size: 1em; line-height: 1.4; } ::-moz-selection { background: #b3d4fc; text-shadow: none; } ::selection { background: #b3d4fc; text-shadow: none; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } img { vertical-align: middle; } fieldset { border: 0; margin: 0; padding: 0; } textarea { resize: vertical; } .chromeframe { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; } /* ============================================================================= Custom Fonts ========================================================================== */ @font-face { font-family: 'Helvetica'; src: url('../fonts/helr45w-webfont.eot'); src: local('☺'), url('../fonts/helr45w-webfont.woff') format('woff'), url('../fonts/helr45w-webfont.ttf') format('truetype'), url('../fonts/helr45w-webfont.svg#webfont30G9S4nm') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'HelveticaNueLightConds'; src: url('../fonts/hllc___-webfont.eot'); src: local('☺'), url('../fonts/hllc___-webfont.woff') format('woff'), url('../fonts/hllc___-webfont.ttf') format('truetype'), url('../fonts/hllc___-webfont.svg#webfont30G9S4nm') format('svg'); font-weight: normal; font-style: normal; } /* Generated by Font Squirrel (http://www.fontsquirrel.com) on November 13, 2013 */ @font-face { font-family: 'arvil_sansregular'; src: url('../fonts/arvil_sans-webfont.eot'); src: url('../fonts/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/arvil_sans-webfont.woff') format('woff'), url('../fonts/arvil_sans-webfont.ttf') format('truetype'), url('../fonts/arvil_sans-webfont.svg#arvil_sansregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'channel_left-slantedregular'; src: url('../fonts/channel_left-slanted-webfont.eot'); src: url('../fonts/channel_left-slanted-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/channel_left-slanted-webfont.woff') format('woff'), url('../fonts/channel_left-slanted-webfont.ttf') format('truetype'), url('../fonts/channel_left-slanted-webfont.svg#channel_left-slantedregular') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'din-condensed-bold'; src: url('../fonts/din-condensed-bold.ttf') format('truetype'); } .font-ChannelLeftSslanted{ font-family:'channel_left-slantedregular', Arial, Helvetica, sans-serif;} .font-AvrilSans{ font-family:'arvil_sansregular', Arial, Helvetica, sans-serif;} /* ===== Bubblefish Child Styles ================================================== Author: Endra Modja Indriyanto ========================================================================== */ body { overflow-x:hidden; font: normal normal 'Helvetica',Arial, Helvetica, sans-serif; color:#858055; font-size:100%; padding-top:180px;} body.mobile{ padding-top:60px;} a, a:visited{color:#858055; text-decoration:none; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} a:focus{outline:none} h1,h2,h3,h4,h5{ font-weight:normal; margin:1rem 0;} h1{ font-size:3rem;} h2{ font-size:2.5rem;} h3{ font-size:2rem;} h4{ font-size:1.5rem;} /* =================== COLOURS =================== */ .font-gold {color:#858055;} .font-red {color:#C84A3C;} .font-200{ font-weight:200;} .font-400{ font-weight:400;} .font-600{ font-weight:500;} .font-700{ font-weight:700;} /* ==========================================================================c WRAPPER/CONTAINER ========================================================================== */ #header-container{ z-index:999999; position:fixed; top:0; width:100%; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #header-container.red{ background-color: rgba(200, 74, 60, 1);} #header-container.black{ background-color: rgba(39, 39, 39, 0.95);} #main-container{} #main-container .wrapper{} #footer-container{} .wrapper {width:1000px; margin: 0 auto; } .stuck{ position:fixed; top:0;} #waypoint-up{ position:absolute; top:130px; left:0;} #waypoint-down{ position:absolute; top:50px; left:0;} .button-links{ width:100%; text-align:center;} .button-links a{ display:inline-block; line-height:44px; margin:10px 15px; font-size:1.7rem; font-family: 'arvil_sansregular'; color:#C84A3C; } .button-links a:hover{color:#858055;} .button-links a .ic{ display:block; float:left; width:44px; height:44px; margin-right:7px; background-color:#C84A3C; background-position:center; background-repeat:no-repeat; -webkit-border-radius: 50%; border-radius: 50%; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .button-links a .ic img{ opcity:1; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; } .button-links a.btn-donate .ic{ background-image: url(../img/ic-cube.svg); } .button-links a.btn-register .ic{ background-image: url(../img/ic-edit.svg);} .button-links a.btn-facebook .ic{ background-image: url(../img/ic-facebook.svg); } .button-links a.btn-youtube .ic{ background-image: url(../img/ic-youtube.svg);} .button-links a:hover .ic{ background-color:#858055;} .button-links.big a{ display:block; margin:0 auto; font-size:3rem; font-family: 'arvil_sansregular'; color:#C84A3C; } .button-links.big a .ic{ position:relative; float:none; width:auto; height:auto; padding:7%; margin-bottom:7%;} .button-links.big a .ic img{ width:100%;} .button-links.big a .ic .text{ display:none; position:absolute; top:50%; left:0; margin-top:-25%; width:100%; color:#fff; font-size:100%; line-height:100%;} .button-links.big a.btn-donate .ic{ background-image:none} .button-links.big a.btn-register .ic{ background-image: url(../img/ic-cube.svg);} .button-links.big a:hover .ic{ background-color:#858055;} .button-links.big a:hover .ic img{ opacity:0.1;} .button-links.big a:hover .ic .text{ display:block;} /* ========================================================================== HEADER ========================================================================== */ header{ position:relative; width:100%; height:180px; margin:0 auto;} header #logo-sep-white{ position:absolute; top:20px; left:50%; margin-left:-200px;} header #logo-sep-red{ position:absolute; top:20px; left:50px;} header .button-links{ float:right; text-align:right; margin-top:15px; margin-right:40px;} header .button-links a{color:#fff; margin:10px; } header .button-links a:hover{color:#fff;} header .button-links a .ic{ } header .button-links a.btn-donate .ic{ background-image:url(../img/ic-edit-black.svg); } header .button-links a.btn-register .ic{ background-image:url(../img/ic-cube-black.svg);} header .button-links a.btn-facebook .ic{ background-image: url(../img/ic-facebook-black.svg); } header .button-links a.btn-youtube .ic{ background-image: url(../img/ic-youtube-black.svg);} header .button-links a:hover .ic{ background-color:#fff;} /* ========================================================================== NAV ========================================================================== */ nav{ position:absolute; bottom:0; width:100%; text-align:center; font-size:1.5rem; font-family: 'arvil_sansregular'; letter-spacing:2px;} nav ul{ margin:0; padding:0; list-style:none;} nav ul li{ display:inline-block; padding:0 10px; margin:0 3px; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} nav.red ul li{ background:#B54139;} nav.red ul li.selected, nav.red ul li:hover{ background:#EBEBEB;} nav.red ul li.selected a, nav.red ul li:hover a{ color:#C84A3C;} nav.red ul li a{ color:#fff;} nav.black ul li{ background:#000; } nav.black ul li.selected, nav.black ul li:hover{ background:#C84A3C;} nav.black ul li.selected a, nav.black ul li:hover a{ color:#fff;} nav.black ul li a{ color:#fff;} /* ========================================================================== HEADER MOBILE ========================================================================== */ .mobile header{ position:relative; width:100%; height:60px; margin:0 auto;} .mobile header #logo-sep-white{ top:9px; left:17px; margin-left:0;} .mobile header #logo-sep-white img{ width:170px;} .mobile header #logo-sep-red{ position:absolute; top:20px; left:50px;} .btn-menu-mobile{ position:absolute; top:13px; right:20px; } .btn-menu-mobile a{ display:block; } .btn-menu-mobile span{ display:block; width:24px; height:4px; background:#fff; margin:5px 0; } .mobile header .button-links{ float:right; text-align:right; margin-top:15px; margin-right:40px;} .mobile header .button-links a{color:#fff; margin:10px 15px; } .mobile header .button-links a:hover{color:#fff;} .mobile header .button-links a .ic{ } .mobile header .button-links a.btn-donate .ic{ background-image:url(../img/ic-edit-black.svg); } .mobile header .button-links a.btn-register .ic{ background-image:url(../img/ic-cube-black.svg);} .mobile header .button-links a:hover .ic{ background-color:#fff;} .mobile header nav{ position:absolute; top:60px; left:0; } .mobile header nav ul{ margin:0; padding:0; list-style:none;} .mobile header nav ul li{ display:block; padding:2px 10px; margin:0;} .mobile header nav ul li{ background:#B54139;} .mobile header nav ul li.selected, .mobile header nav ul li:hover{ background:#EBEBEB;} .mobile header nav ul li.selected a, .mobile header nav ul li:hover a{ color:#C84A3C;} .mobile header nav ul li a{ color:#fff;} /* ========================================================================== BANNER ========================================================================== */ .banner{ position:relative; width:100%; height:440px; text-align:center; overflow:hidden; background-position:center; background-size:auto 100%; } .banner img{} .banner .caption{ position:absolute; top:0; left:0; width:100%; color:#fff; font-size:100%; font-family: 'arvil_sansregular'; line-height:440px; background: rgba(200, 74, 60, 0.80);} /* ========================================================================== ARTICLE ========================================================================== */ article{ } article .col{ float:left; width:25%; height:auto; background:#DFEAEE;} article .col.stamp{ position:absolute; top:0; right:0; } article .col.video iframe{ display: block;} article.col.one{ width:75%; float:left;} article .post { padding:2% 0 2% 5%;} article .post .title{ color:#C84A3C; font-family: 'arvil_sansregular';} article .post .title h1{ line-height:100%; } article .post .content{ font-size:1rem;} article .post .content p{ margin:0 0 1em; line-height:170%;} .col .inner{ display:block; overflow:auto;} #support{ position:relative;} #support .pic{} #support .label{ z-index:999; position:absolute; bottom:0; left:0; width:100%; color:#fff; text-align:center; font-size:2rem; font-family: 'arvil_sansregular'; background-color: rgba(172, 172, 172, 0.80);} #quotes{ width:100%; color:#C84A3C; line-height:100%; text-align:center; font-size:2.7rem; font-family: 'arvil_sansregular'; background:#DFEAEE;} #quotes div.font-AvrilSans{ padding:20px 30px 30px; } #quotes div.font-ChannelLeftSslanted{ font-size:1rem; padding:0 30px 100px 30px;} /* ========================================================================== ASIDE ========================================================================== */ aside{ width:25%; float:left; padding-top:5%;} aside section { padding:10%;} /* ========================================================================== HOME ========================================================================== */ #slides-sponsor { position:relative; text-align:center; color:#C84A3C; background:#DFEAEE;} #slides-sponsor .slidesjs-slide{ width:100%;} #slides-sponsor .slidesjs-navigation { z-index:99;position:absolute; top:50%; margin-top:-15px; width:30px; height:30px; -webkit-border-radius: 50%; border-radius: 50%; } #slides-sponsor .slidesjs-previous { left:10px; background:#F7F7F7 url(../img/ic-arrow-left.svg) no-repeat center; } #slides-sponsor .slidesjs-next { right:10px; background:#F7F7F7 url(../img/ic-arrow-right.svg) no-repeat center;} .slidesjs-play, .slidesjs-stop{ visibility:hidden;} .sideblock{ overflow:hidden;} /* ========================================================================== ABOUT ========================================================================== */ #about{ padding-bottom:75px; } input,textarea{ display:block; padding:13px 10px; margin:0 auto 30px; color:#858055; border:none;-webkit-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 2px 0px 0px #EBEBEB; box-shadow: 0px 2px 0px 0px #EBEBEB;} .input-example{color:#858055;} .input-not-example{color:#C5C5C5;} /* ========================================================================== PARTICIPANT ========================================================================== */ #participant{ overflow:hidden; background:#DFEAEE;} #participant .post{ float:left; width:33%; padding:0; background:#DFEAEE;} #participant .post .wrapp{ padding:2% 7%;} #participant .participant-form{ float:left; width:33%; background:url(../img/bg-texture-red.png)} #participant .participant-form form{ padding:2% 5%;} #participant .participant-form form .title{ color:#C84A3C; font-size:2.4rem; font-family: 'arvil_sansregular'; margin-bottom:20px;/* padding-left:50px; background:url(../img/ic-edit-red.svg) no-repeat 0 6px; background-size:5%;*/ } #participant .participant-form form fieldset.col1{ float:left; width:50%;} #participant .participant-form form fieldset.col2{ float:left; width:50%;} #participant .participant-form form input[type="text"]{ width:90%; margin:0 0 20px;} #participant .participant-form form textarea{ float:right; width:90%; height:143px; margin:0 0 20px;} #participant .participant-form form input[type="submit"]{ float:right; letter-spacing:0px; color:#fff; width:35%; margin:0 0 30px; padding:7px 10px; background-color:#C84A3C; background-color: rgba(200, 74, 60, 1); font-size:1.7rem; font-family: 'arvil_sansregular'; -webkit-box-shadow: 0px 2px 0px 0px #B54139; box-shadow: 0px 2px 0px 0px #B54139; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #participant .participant-form form input[type="submit"]:hover{ letter-spacing:3px; background-color:#858055; -webkit-box-shadow: 0px 2px 0px 0px #68613E; box-shadow: 0px 2px 0px 0px #68613E;} #participant .participant-form form .col1 ul{ width:90%; margin:0 0 20px 0; padding:0 0 0 0} #participant .participant-form form .col2 ul{ width:90%; margin:0 0 20px 0; padding:0 0 0 22px} #participant .participant-form form ul li{ width:100%; display:block; clear:both; border: medium none; border-radius: 3px; box-shadow: 0 2px 0 0 #EBEBEB; color: #858055; display: block; margin: 0; padding: 13px 10px 7px; background:#fff; } #participant .participant-form form ul li input[type="radio"]{ width:30px; float:left; margin-bottom:18px;} #participant .participant-form form ul li span{} #participant .participant-form form .label-radio, #participant .participant-form form .label-select{margin-left:25px; margin-bottom:5px;} #participant .participant-form form .col1 .label-radio{ margin-left:10px; margin-bottom:5px;} span.customSelect { border: medium none; border-radius: 3px; box-shadow: 0 2px 0 0 #EBEBEB; color: #858055; display: block; margin: 0 auto 30px; padding: 10px 10px; width:90%; background:#fff url(../img/arrow-select) no-repeat center right; } span.customSelect.changed { background-color: #f0dea4; } .customSelectInner { } #slides-testi-participant { position:relative; text-align:center; color:#C84A3C; background:#DFEAEE;} #slides-testi-participant .font-AvrilSans{ display:block; font-size:3rem; line-height:100%; padding:50px 50px 20px 50px;} #slides-testi-participant .font-ChannelLeftSslanted{ display:block; font-size:1rem;} #slides-testi-participant .slidesjs-slide{ width:100%;} #slides-testi-participant .slidesjs-navigation { z-index:99;position:absolute; top:50%; margin-top:-15px; width:30px; height:30px; -webkit-border-radius: 50%; border-radius: 50%; } #slides-testi-participant .slidesjs-previous { left:10px; background:#F7F7F7 url(../img/ic-arrow-left.svg) no-repeat center; } #slides-testi-participant .slidesjs-next { right:10px; background:#F7F7F7 url(../img/ic-arrow-right.svg) no-repeat center;} /* ========================================================================== VOLUNTEER ========================================================================== */ #volunteer{ overflow:hidden; background:#F7F7F7;} #volunteer .post{ float:left; width:33%; padding:0; background:#F7F7F7;} #volunteer .post .wrapp{ padding:2% 7%;} #volunteer .volunteer-form{ float:left; width:67%; background:url(../img/bg-texture-blue.png)} #volunteer .volunteer-form form{ padding:2% 5%;} #volunteer .volunteer-form form .title{ color:#C84A3C; font-size:2.4rem; font-family: 'arvil_sansregular'; margin-bottom:20px;/* padding-left:50px; background:url(../img/ic-edit-red.svg) no-repeat 0 6px; background-size:5%;*/ } #volunteer .volunteer-form form fieldset.col1{ float:left; width:50%;} #volunteer .volunteer-form form fieldset.col2{ float:left; width:50%;} #volunteer .volunteer-form form fieldset.col2 input{ float:right;} #volunteer .volunteer-form form input[type="text"]{ width:90%; margin:0 0 20px;} #volunteer .volunteer-form form textarea{ float:right; width:90%; height:143px; margin:0 0 20px;} #volunteer .volunteer-form form input[type="submit"]{ float:right; letter-spacing:0px; color:#fff; width:35%; margin:0 0 30px; padding:7px 10px; background-color:#C84A3C; background-color: rgba(200, 74, 60, 1); font-size:1.7rem; font-family: 'arvil_sansregular'; -webkit-box-shadow: 0px 2px 0px 0px #B54139; box-shadow: 0px 2px 0px 0px #B54139; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} #volunteer .volunteer-form form input[type="submit"]:hover{ letter-spacing:3px; background-color:#858055; -webkit-box-shadow: 0px 2px 0px 0px #68613E; box-shadow: 0px 2px 0px 0px #68613E;} #slides-testi-volunteer { position:relative; text-align:center; color:#C84A3C; background:#F7F7F7;} #slides-testi-volunteer .font-AvrilSans{ display:block; font-size:3rem; line-height:100%; padding:50px 50px 20px 50px;} #slides-testi-volunteer .font-ChannelLeftSslanted{ display:block; font-size:1rem;} #slides-testi-volunteer .slidesjs-slide{ width:100%;} #slides-testi-volunteer .slidesjs-navigation { z-index:99;position:absolute; top:50%; margin-top:-15px; width:30px; height:30px; -webkit-border-radius: 50%; border-radius: 50%; } #slides-testi-volunteer .slidesjs-previous { left:10px; background:#DFEAEE url(../img/ic-arrow-left.svg) no-repeat center; } #slides-testi-volunteer .slidesjs-next { right:10px; background:#DFEAEE url(../img/ic-arrow-right.svg) no-repeat center;} /* ========================================================================== SPONSOR ========================================================================== */ .sponsor-list{ text-align:center; clear:both;} .sponsor-list ul{ margin:0 auto; padding:0; list-style:none;} .sponsor-list ul li{ display:inline-block; width:12%; margin:10px; background:#F7F7F7;} .sponsor-list ul li a{ display:block;} .sponsor-list ul li a img{ display:block;} .sponsor-form{ margin-top:20px; padding:20px 0; background:url(../img/bg-texture-black.png);} .sponsor-form .title{ text-align:center; color:#fff; font-size:2.4rem; font-family: 'arvil_sansregular'; margin-bottom:20px;} .sponsor-form form{ text-align:center;} .sponsor-form form input[type="text"]{ width:30%;} .sponsor-form form input[type="submit"]{ letter-spacing:0px; color:#fff; width:15%; padding:7px 10px; background:#858055; font-size:1.7rem; font-family: 'arvil_sansregular'; -webkit-box-shadow: 0px 2px 0px 0px #68613E; box-shadow: 0px 2px 0px 0px #68613E; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all .3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;} .sponsor-form form input[type="submit"]:hover{ letter-spacing:3px; background-color:#C84A3C; background-color: rgba(200, 74, 60, 1); -webkit-box-shadow: 0px 2px 0px 0px #B54139; box-shadow: 0px 2px 0px 0px #B54139;} .sponsor-form form .radio{ width:30%; margin:0 auto; text-align:left;} .sponsor-form form .radio label{ display:block; margin-bottom:5px;;} .sponsor-form form ul{ margin:0; padding:0} .sponsor-form form ul li{ width:100%; display:block; clear:both; border: medium none; border-radius: 3px; box-shadow: 0 2px 0 0 #EBEBEB; color: #858055; display: block; margin:0 0 0 -10px; padding: 13px 10px 7px; background:#fff; } .sponsor-form form ul li input[type="radio"]{ width:30px; float:left; margin:4px 0 17px 0;} .sponsor-form form ul li span{ text-align:left;} /* ========================================================================== FOOTER ========================================================================== */ #footer-container{ clear:both; width:100%;background:#C84A3C; color:#fff;} footer{ overflow:hidden; padding:20px;} footer .left, footer .right{ padding:10px;} footer a, footer a:visited{ color:#fff;} footer a:hover{ text-decoration:underline;} /* ========================================================================== Media Queries ========================================================================== */ @media (min-width: 320px) { .button-links a{ margin:10px 15px;} .banner{ height:200px; } .banner .caption{ line-height:200px;} article .col, article .col.slide{ width:100%;} article.col.one{ width:100%; float:none;} #about .post { padding:0 5%;} #about .post .content{ -moz-column-count:1; /* Firefox */ -webkit-column-count:1; /* Safari and Chrome */ column-count:1;} aside{ width:100%; float:none; padding-top:0;} aside section { padding:5% 10%;} /*.button-links.big a .ic .text{ font-size:4rem;} #about .post .title h1{ font-size: 3rem;}*/ #about .post .content{ font-size:1rem;} .sponsor-list ul li{ width:40%;} .sponsor-form form input[type="text"], .sponsor-form form .radio{ width:80%;} .sponsor-form form input[type="submit"]{ width:50%; } #participant .post, #volunteer .post{ width:100%;} #participant .participant-form, #volunteer .volunteer-form{ width:100%;} #participant .participant-form form .title, #volunteer .volunteer-form form .title{ text-align:center; margin-top:10px;} #participant .participant-form form fieldset.col1, #volunteer .volunteer-form form fieldset.col1{ width:100%;} #participant .participant-form form fieldset.col2, #volunteer .volunteer-form form fieldset.col2{ width:100%;} #participant .participant-form form input[type="text"], #volunteer .volunteer-form form input[type="text"]{ margin:0 auto 20px} #participant .participant-form form textarea, #volunteer .volunteer-form form textarea, #volunteer .volunteer-form form fieldset.col2 input, #participant .participant-form form fieldset.col2 input{ float:none; margin:0 auto 20px} #participant .participant-form form .label-radio, #participant .participant-form form .label-select{margin-left:15px;} #participant .participant-form form span.customSelect{ margin-left:3px;} #participant .participant-form form ul{ padding-left:5px;} #participant .participant-form form input[type="submit"], #volunteer .volunteer-form form input[type="submit"]{ float:none; width:50%; margin:0 auto 30px} footer{ text-align:center;} footer .left, footer .right{ float:none;} } @media (min-width: 480px) { .button-links a{ margin:10px 15px;} article .col, article .col.slide { width: 50%; } article.col.one{ width:70%; float:left;} #about .post { padding:0 0 0 5%;} aside{ width:30%; float:left; padding-top:5%;} aside section { padding:5%;} /*.button-links.big a .ic .text{ font-size:2.5rem;}*/ #slides-testi-participant .font-AvrilSans, #slides-testi-volunteer .font-AvrilSans{font-size:2rem; } #slides-testi-participant .font-ChannelLeftSslanted, #slides-testi-volunteer .font-ChannelLeftSslanted{font-size:0.7rem;} } @media (min-width: 640px) { header #logo-sep-red { top:10px; left:20px;} header #logo-sep-red img{ width:170px;} header .button-links{ margin:0;} #slides-testi-participant .font-AvrilSans, #slides-testi-volunteer .font-AvrilSans{font-size:3rem; } #slides-testi-participant .font-ChannelLeftSslanted, #slides-testi-volunteer .font-ChannelLeftSslanted{font-size:1rem;} footer{ text-align:left;} footer .left{ float:left;} footer .right{ float:right;} } @media (min-width: 768px) { .banner{ height:300px; } .banner .caption{ line-height:300px;} article .col { width: 33.33%; } article .col.slide { width: 100%; } article.col.one{ width:75%;} aside{ width:25%;} aside section { padding:10%;} /*.button-links.big a .ic .text{ font-size:2.8rem;}*/ .sponsor-list ul li{ width:20%;} .sponsor-form form input[type="text"], .sponsor-form form .radio{ width:40%;} .sponsor-form form input[type="submit"]{ width:20%; } #slides-testi-participant .font-AvrilSans, #slides-testi-volunteer .font-AvrilSans{font-size:4rem; } #participant .post, #volunteer .post{ width:50%;} #participant .participant-form, #volunteer .volunteer-form{ width:50%;} #participant .participant-form form .col1 .label-radio{margin-left:20px;} #participant .participant-form form .col2 .label-radio{margin-left:20px;} #participant .participant-form form .label-select{margin-left:15px;} #participant .participant-form form span.customSelect{ margin-left:3px;} #participant .participant-form form .col1 ul{ margin:0 0 20px 10px;} #participant .participant-form form .col2 ul{ margin:0 0 20px 0; padding-left:10px;} } @media (min-width: 960px) { header #logo-sep-red img{ width:200px;} .banner{ height:380px; } .banner .caption{ line-height:380px;} /*.button-links.big a .ic .text{ font-size:3rem;}*/ #about .post .content{-moz-column-count:2; /* Firefox */ -webkit-column-count:2; /* Safari and Chrome */ column-count:2;} .sponsor-list ul li{ width:17%;} .sponsor-form form input[type="text"], .sponsor-form form .radio{ width:30%;} .sponsor-form form input[type="submit"]{ width:15%; } #slides-testi-participant .font-AvrilSans, #slides-testi-volunteer .font-AvrilSans{font-size:5rem; } #slides-testi-participant .font-ChannelLeftSslanted, #slides-testi-volunteer .font-ChannelLeftSslanted{font-size:1.5rem;} #slides-testi-participant .slidesjs-previous, #slides-testi-volunteer .slidesjs-previous { left:30px;} #slides-testi-participant .slidesjs-next, #slides-testi-volunteer .slidesjs-next { right:30px;} #participant .post, #volunteer .post{ width:100%;} #participant .post .content, #volunteer .post .content{ font-size:1.2rem;} #participant .participant-form, #volunteer .volunteer-form{ width:100%;} #participant .participant-form form .title, #volunteer .volunteer-form form .title{ text-align:left; margin-top:10px;} #participant .participant-form form fieldset.col1, #volunteer .volunteer-form form fieldset.col1{ width:50%;} #participant .participant-form form fieldset.col2, #volunteer .volunteer-form form fieldset.col2{ width:50%;} #participant .participant-form form input[type="text"], #volunteer .volunteer-form form input[type="text"]{ margin:0 0 20px} #participant .participant-form form textarea, #volunteer .volunteer-form form textarea{ float:right; margin:0 0 20px} #participant .participant-form form input[type="submit"], #volunteer .volunteer-form form input[type="submit"]{ float:right; width:50%; margin:0 auto 30px} #volunteer .volunteer-form form fieldset.col2 input, #participant .participant-form form fieldset.col2 input{ float:right;} #participant .participant-form form .col1 ul{ margin:0 0 20px 0;} #participant .participant-form form .col2 ul{ margin:0 0 20px 0; padding-left:23px;} #participant .participant-form form .col2 .label-radio{ margin-left:35px;} } @media (min-width: 1280px) { header #logo-sep-red { top:20px; left:50px;} header #logo-sep-red img{ width:227px;} header .button-links{ margin-top:15px; margin-right:40px;} .banner{ height:440px; } .banner .caption{ line-height:440px;} article .col, article .col.slide { width: 25%; } /*.button-links.big a .ic .text{ font-size:4.5rem;} #about .post .title h1{ font-size: 4rem;}*/ #about .post .content{ font-size:1.2rem;} .sponsor-list ul li{ width:17%;} #slides-testi-participant .font-AvrilSans, #slides-testi-volunteer .font-AvrilSans{font-size:3rem; } #slides-testi-participant .font-ChannelLeftSslanted, #slides-testi-volunteer .font-ChannelLeftSslanted{font-size:1rem;} #slides-testi-participant .slidesjs-previous, #slides-testi-volunteer .slidesjs-previous { left:10px;} #slides-testi-participant .slidesjs-next, #slides-testi-volunteer .slidesjs-next { right:10px;} #participant .post, #volunteer .post{ width:33%;} #participant .post .content, #volunteer .post .content{ font-size:1rem;} #participant .participant-form, #volunteer .volunteer-form{ width:33%;} #participant .participant-form form .title, #volunteer .volunteer-form form .title{ text-align:left; margin-top:0;} #participant .participant-form form .col2 ul{ padding-left:22px;} #participant .participant-form form .col1 .label-radio{ margin-left:10px;} #participant .participant-form form .col2 .label-radio{ margin-left:30px;} #participant .participant-form form .col2 .label-radio{ margin-left:35px;} } @media (min-width: 1440px) { /*.button-links.big a .ic .text{ font-size:5rem;}*/ .sponsor-list ul li{ width:12%;} #participant .participant-form form .col2 ul{ padding-left:22px;} } @media only screen and (-webkit-min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min--moz-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( -o-min-device-pixel-ratio: 2/1) and (min-width: 320px), only screen and ( min-device-pixel-ratio: 2) and (min-width: 320px), only screen and ( min-resolution: 192dpi) and (min-width: 320px), only screen and ( min-resolution: 2dppx) and (min-width: 320px) { /* Small screen, retina, stuff to override above media query */ } @media only screen and (min-width: 35em) { } @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { } .h1-red, .caption-header { font-family: 'arvil_sansregular'; font-weight: normal; text-transform: uppercase; } .h1-red { margin: 0; line-height: 100%; color: #c84a3c; } .caption-header { display: table; position: absolute; top: 0; width: 100%; background-color: rgba(200, 73, 60, 0.8); font-size: 100px; line-height: 1; color: #fff; } .caption-header p { display: table-cell; vertical-align: middle; margin: 0; } @media (min-width: 320px) { .caption-header { height: 200px; font-size: 36px; } } @media (min-width: 768px) { .caption-header { height: 300px; font-size: 55px; } } @media (min-width: 960px) { .caption-header { height: 380px; font-size: 65px; } } @media (min-width: 1280px) { .caption-header { height: 440px; font-size: 80px; } } .box__title, .box--left, .box--right, .box--half { -webkit-box-sizing: border-box; box-sizing: border-box; } .box__title { padding-bottom: 25px; width: 100%; } .box--left, .box--right, .box--half { float: left; } .box--left, .box--right { padding: 50px; } .box--left p, .box--right p { margin: 0; } .box--left { width: 66.66666666666666%; } .box--right { width: 33.33333333333333%; background-image: url('../img/bg-texture-red.png'); } #volunteer .box--right { background-image: url('../img/bg-texture-blue.png'); } .box--half { padding-right: 50px; width: 50%; } @media (max-width: 1280px) { .box--left, .box--right { width: 100%; } .box--right { height: 200px; } } @media (max-width: 768px) { .box--half { width: 100%; } .box--half:last-child { padding-top: 25px; } } @media (max-width: 480px) { .box--left, .box--right { padding: 20px; } .box--left { padding-top: 0; } } a.btn-2015 { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-right: auto; margin-left: auto; width: 50%; border: 2px solid #c84a3c; -webkit-border-radius: 5px; border-radius: 5px; padding: 20px 15px; font-size: 20px; letter-spacing: 1px; text-align: center; text-transform: uppercase; color: #c85a3c; } .box--right a.btn-2015 { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } a.btn-2015:hover { background-color: #c85a3c; color: #fff; } @media (max-width: 560px) { a.btn-2015 { width: 100%; font-size: 14px; } } #main-container .sideblock { background-color: #000; } .choosehope-link { display: table; text-align: center; } .choosehope-link a { display: table-cell; vertical-align: middle; } .choosehope-link img { width: 100%; } .slide-content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } /* ========================================================================== Helper classes ========================================================================== */ .ir { background-color: transparent; border: 0; overflow: hidden; *text-indent: -9999px; } .ir:before { content: ""; display: block; width: 0; height: 150%; } .hidden { display: none !important; visibility: hidden; } .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; } .invisible { visibility: hidden; } .clearfix:before, .clearfix:after { content: " "; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .left{ float:left;} .right{ float:right;} /* ========================================================================== Print styles ========================================================================== */ @media print { * { background: transparent !important; color: #000 !important; /* Black prints faster: h5bp.com/s */ box-shadow: none !important; text-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } /* * Don't show links for images, or javascript/internal links */ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; /* h5bp.com/t */ } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; } }