body, html { height: 100%; min-height: 250px; } body { background: #fff; color: #505050; font-family: "Open Sans", sans-serif; font-size: 16px; margin: 0; padding: 0; } h1, h2, h3 { font-family: "Montserrat", sans-serif; font-weight: 400; margin-top: 0; } h1.subtitle, h2.subtitle, h3.subtitle { color: #fff; } h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 2em; margin-top: 0px; } img { max-width: 100%; width: auto; } a { color: #CE5F15; text-decoration: none; } a:hover { color: #F36321; } .icon-space-l { margin-left: .5em; } .container { margin: 0 auto; max-width: 1200px; padding: 0 8px; } .button { border: 1px solid #fff; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; color: #fff; display: inline-block; font-weight: 700; margin-top: 25px; padding: 5px 25px 8px; position: relative; } .button:hover { background: #fff; color: #384859; } .button.orange { color: #F3852A; border-color: #F3852A; } .button.orange:hover { background: #F3852A; color: #fff; } .button.clay { color: #ED7277; border-color: #EF6669; padding-bottom: 10px; margin-bottom: 2.5%} .button.clay:hover { background: #EF6669; color: #fff; } .button.blue { color: #194774; border-color: #194774; } .button.blue:hover { background: #194774; color: #fff; } .banner { background: #384859; background: url("coderit_background.png") center center fixed; box-sizing: border-box; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; width: 100%} .banner .inner { left: 0; right: 0; } .banner.welcome { background: url("coderit_background.png") center center fixed; font-size: 1.25em; height: 100%; min-height: 350px; padding: 60px 0 80px; text-align: center; } .banner.welcome .inner.container { position: absolute; left: 50%; top: 50%; min-width: 320px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .banner.welcome .logo { margin-bottom: 25px; } .banner.welcome #learn-more:after { border-color: #fff transparent transparent transparent; border-style: solid; border-width: 12px; content: ""; display: block; height: 0; left: 50%; position: absolute; top: 150%; transform: translateX(-50%); width: 0; } .banner-clayhack { background: clay; background: url("clayhack_background.png") center center fixed; box-sizing: border-box; color: #fff; display: block; margin: 0 auto; padding: 10px 0; position: relative; width: 100%} .banner-clayhack .inner { left: 0; right: 0; } .banner-clayhack.welcome { background: url("clayhack_background.png") center center fixed; font-size: 1.25em; height: 100%; min-height: 350px; padding: 60px 0 80px; text-align: center; } .banner-clayhack.welcome .inner.container { position: absolute; left: 50%; top: 50%; min-width: 320px; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); } .banner-clayhack.welcome .logo { margin-bottom: 25px; } .banner-clayhack.welcome #learn-more:after { border-color: #fff transparent transparent transparent; border-style: solid; border-width: 12px; content: ""; display: block; height: 0; left: 50%; position: absolute; top: 150%; transform: translateX(-50%); width: 0; } .text-large { font-size: 2em; } .underline { text-decoration: underline; } .grid-cta .col { box-sizing: border-box; float: left; padding-right: 35px; } .grid-cta .col:last-child { padding-right: 0; } .grid-cta.two .col { width: 50%} .grid-cta.three .col { width: 33.3333%} .grid-cta:after { content: ""; display: table; clear: both; } .center { text-align: center; } .foot-pusher { min-height: 100%; height: auto !important; height: 100%; margin-bottom: -90px; } .title { color: #F3852A; text-align: center; } .title-clayhack { color: #ED7277; text-align: center; } .title-clayhack-contact { color: #fff; text-align: center; } .loader { max-width: 80px; margin-top: 50%; opacity: .6; tranform: translateY(-50%); } .section { padding-bottom: 90px; padding-top: 90px; } .section .title { margin-bottom: 110px; } #about .title { margin-bottom: 110px; } #about .badge-cta .badge-icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; border: 1px solid; box-sizing: border-box; color: #194774; height: 150px; padding: 30px; width: 150px; } #about .badge-cta .badge-name { margin-top: 30px; } #about .clayhack_badge-cta .badge-icon { -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; border: 1px solid; box-sizing: border-box; color: #EF6669; height: 150px; padding: 30px; width: 150px; } #about .clayhack_badge-cta .badge-name { margin-top: 30px; } #about hr { background: #444; border-color: #444; color: #444; margin: 75px auto; width: 50%} #about #mission { font-size: 1.125em; margin-left: 10%; text-align: center; padding-bottom: 10px; width: 80%} #events { background: url("coderit_background_light.png") center center fixed; color: #505050; padding-bottom: 100px; padding-top: 100px; } #events .inner { background: #fff; margin: 10px; padding: 50px; } #events h3 { color: #F3852A; } #events p { margin: 0 auto; text-align: center; width: 50%} #events-clayhack { background: url("clayhack_background_light.png") center center fixed; color: #505050; padding-bottom: 100px; padding-top: 100px; } #events-clayhack .inner { background: #fff; margin: 10px; padding: 50px; } #events-clayhack h3 { color: #F3852A; } #events-clayhack p { margin: 0 auto; text-align: center; width: 50%} #event-list-cta { margin: 0 auto 15px; width: 65%} #event-list { list-style: none; padding-left: 0; } #event-list .event-page { display: none; } #event-list .event { color: #194774; margin-bottom: 10px; } #event-list .event-title { font-size: 1.125em; margin: 0 0 5px; } #event-list .event-info { font-size: .875em; list-style: none; padding: 0; } #event-list .event-info .fa { margin-right: 10px; } .event-page-nav { background: #888; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; cursor: pointer; display: inline-block; height: 15px; margin-right: 10px; width: 15px; } .event-page-nav:hover { background: #384859; } .event-page-nav.active { background: #F3852A; } #committees .committee { box-sizing: border-box; display: inline-block; margin-bottom: 10px; margin-left: -2px; width: 49%} #committees .committee .committee-img { -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; border-radius: 100%; display: inline-block; vertical-align: top; width: 25%} #committees .committee .committee-info { display: inline-block; margin-left: 1%; vertical-align: top; width: 70%} #committees .committee .committee-desc { text-align: justify; } #committees .committee .committee-name { color: #F3852A; margin: 0; } #committees .committee.middle { text-align: center; transform: translateX(50%); } #committees .committee.middle .committee-img { display: block; margin: 0 auto; } #committees .committee.right { text-align: right; } #committees .committee.right .committee-info { margin-left: 0; margin-right: 1%} #contact { padding: 20px 0; } #contact .fa { margin-right: 10px; vertical-align: middle; } #contact .grid-cta { margin: 0 auto; width: 50%} #contact .grid-cta .col { display: inline-block; float: none; vertical-align: middle; width: 48%} #contact-links a { color: #CE5F15; display: block; margin-bottom: 10px; } #contact-links-clayhack a { color: #fff; display: block; margin-bottom: 10px; } #footer { background: #242f3a; color: #fff; padding: 3px 0; text-align: center; } #footer-clayhack { background: #e7454b; color: #fff; padding: 3px 0; text-align: center; } #error-page h1 { margin-top: 0; padding-top: 25px; } #clayhack-page h3 { font-size: 2em; margin-top: 0px; color: #fff; } @media screen and (max-width: 768px) { body { font-size: 14px; } .grid-cta .col { clear: both; float: none !important; margin-top: 8px; padding-right: 0; width: 100% !important; } .section { padding-bottom: 15px; padding-top: 15px; } .section .title { margin-bottom: 25px; } #about .badge-cta { margin-bottom: 40px; } #about .badge-cta .badge-icon { font-size: 3em; height: 100px; width: 100px; } #about .badge-cta .badge-name { margin: 0; } #events { padding-bottom: 20px; padding-top: 20px; } #events .inner { padding: 20px 10px; } #events p { width: auto; } #event-list { width: 100%} #committees .committee { display: block !important; margin-left: 0; text-align: left !important; transform: none !important; width: 100% !important; } #committees .committee-info { margin-left: 0 !important; width: 100% !important; } }@media screen and (max-width: 400px) { #contact .grid-cta { width: auto; } #events .container { background: #fff; } #events .inner { padding: 10px 3px; } #event-list-cta { width: auto; } }