/* ============================================================================= RESET ========================================================================== */ * { margin: 0; padding: 0; list-style: none; border: 0; text-decoration: none; } img, input, label { vertical-align: middle; } h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 1em; } article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; } audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; } audio:not([controls]) { display: none; } [hidden] { display: none; } html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } html, button, input, select, textarea { font-family: sans-serif; } body { margin: 0; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } blockquote { margin: 1em 40px; } dfn { font-style: italic; } hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; } ins { background: #ff9; color: #000; text-decoration: none; } mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; } pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em; } pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; } q { quotes: none; } q:before, q:after { content: ""; content: none; } small { font-size: 85%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } dd { margin: 0 0 0 40px; } nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; } img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; } svg:not(:root) { overflow: hidden; } figure { margin: 0; } form { margin: 0; } fieldset { border: 0; margin: 0; padding: 0; } legend { border: 0; *margin-left: -7px; padding: 0; white-space: normal; } button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; } button, input { line-height: normal; } button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow: visible; } button[disabled], input[disabled] { cursor: default; } input[type="checkbox"], input[type="radio"] { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; *width: 13px; *height: 13px; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -ms-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } textarea { overflow: auto; vertical-align: top; resize: vertical; } input:invalid, textarea:invalid { background-color: #f0dddd; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } td { vertical-align: middle; } .chromeframe { margin: 0.2em 0; background: #ccc; color: black; padding: 0.2em 0; } header:after, footer:after, section:after, hgroup:after, aside:after, figure:after, div:after, ol:after, li:after, form:after, ul:after, dl:after { content: "."; display: block; clear: both; visibility: hidden; height: 0; overflow: hidden; } hr { display: none; } .clear { clear: both; } /* ============================================================================= MAIN LAYOUT ========================================================================== */ .wrapper { margin: 0 auto; width: 960px; position: relative; } .content { padding: 50px 0; } .content section { padding-top: 50px; } /* ============================================================================= BASIC STYLES ========================================================================== */ h2, h3, h4 { font-size: 5em; font-weight: normal; margin-bottom: .4em; letter-spacing: -0.02em; } h3 { font-size: 4em; } h4 { font-size: 3em; } p { font-size: 1.6em; line-height: 1.6em; margin-bottom: 1.4em; } .photo { max-width: 100%; position: relative; top: -1px; } /* ============================================================================= NAVIGATION ========================================================================== */ nav { padding: 15px 0; position: fixed; width: 100%; z-index: 10; } .nav-item { display: inline-block; margin-right: 15px; } .nav-link { font-size: 1.4em; } /* ============================================================================= HEADER ========================================================================== */ .header { padding: 100px 0 100px; text-align: center; } .logo-name { margin-bottom: 0; font-size: 10em; letter-spacing: -0.04em; } .tagline { margin-bottom: 50px; font-size: 2em; letter-spacing: -0.02em; } .call-action-area .price { font-size: 4em; vertical-align: center; margin-right: 20px; } .call-action-area .call-action-link, .btn { position: relative; top: -5px; cursor: pointer; display: inline-block; padding: 15px 30px; font-size: 2em; line-height: 1em; vertical-align: center; letter-spacing: -0.02em; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .call-action-area .call-action-link:hover, .call-action-area .call-action-link:focus, .btn:hover, .btn:focus { top: 0; } /* ============================================================================= ABOUT ========================================================================== */ .about { padding: 19px; margin: 0 -20px 0; } /* ============================================================================= SPEAKER ========================================================================== */ .speakers-item { position: relative; min-height: 180px; padding-left: 180px; margin-bottom: 30px; border-bottom: 1px dashed #e7e7e7; } .speaker-photo { position: absolute; top: 0; left: 0; display: block; width: 120px; height: 120px; } .speech-title { padding-top: 10px; font-size: 2em; margin-bottom: 1em; } .speech-time { font-size: 18px; padding: 10px 15px; letter-spacing: -0.03em; } .speakers-name { font-size: 1.6em; } .speakers-item p { font-size: 1.4em; } /* ============================================================================= ORGANIZER ========================================================================== */ .organizers-item { position: relative; min-height: 180px; padding-left: 180px; margin-bottom: 30px; border-bottom: 1px dashed #e7e7e7; } .organizer-photo { position: absolute; top: 0; left: 0; display: block; width: 120px; height: 120px; } .organizers-name { font-size: 1.6em; } .organizers-item p { font-size: 1.4em; } /* ============================================================================= SCHEDULE ========================================================================== */ .schedule-tbl { padding: 20px; } .schedule-tbl table { border-collapse: collapse; font-size: 1em; } .schedule-tbl td, .schedule-tbl th { position: relative; padding: 20px 30px; font-size: 1.4em; line-height: 1.4em; text-align: left; } .schedule-tbl th { padding: 5px 30px; color: #2b2b2b; font-size: 2em; font-weight: bolder; } .schedule-tbl .speaker-photo { position: relative; width: 40px; height: 40px; float: left; margin-right: 20px; } .schedule-tbl .schedule-time { text-align: center; } .schedule-slot { width: 250px; font-size: 16px; } .speakers-company { display: block; font-size: 12px; } /* ============================================================================= SPONSORS and PARTNERS ========================================================================== */ .sponsor-item, .partner-item { display: inline-block; margin: 0 30px 30px 0; } .sponsor--link, .partner-link { display: block; width: 150px; height: 150px; text-align: center; vertical-align: middle; line-height: 150px; } /* ============================================================================= CONTATO ========================================================================== */ .form label { font-size: 16px; display: block; margin-bottom: .5em; } .control-group { height: auto; clear: both; margin-bottom: 20px; } .control-group-name, .control-group-email { clear: none; width: 467px; float: left; margin-right: 25px; } .control-group-email { margin-right: 0; } .form input[type=text], .form input[type=email], .form textarea { -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: block; width: 100%; min-height: 15px; padding: 10px; font-size: 14px; } .form textarea { height: 300px; } .form .btn { float: right; } /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (max-width: 1024px) { .wrapper { width: 100%; padding: 0 20px; -moz-box-sizing: border-box; -ms-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .about { margin: 0; } } @media only screen and (min-width: 320px) and (max-width: 800px) { /* schedule */ .schedule-tbl { padding: 1px; } .schedule-tbl td, .schedule-tbl th { padding: 10px; } .schedule-tbl th { padding: 10px; font-size: 1.8em; } .schedule-tbl .speaker-photo { width: 40px; height: 40px; margin-right: 5px; } .schedule-tbl .schedule-slot { width: 120px; } .schedule-tbl td.schedule-slot { font-size: 14px; line-height: 1.2em; } .schedule-tbl .schedule-time { width: 60px; padding: 10px 0 10px 5px; text-align: left; } .schedule-tbl td.schedule-description { font-size: 12px; } /* partners */ .sponsor-item, .partner-item { margin: 0 5px 10px 0; } .sponsor--link, .partner-link { width: 95px; height: 95px; line-height: 95px; } /* contact */ .control-group-name, .control-group-email { clear: both; width: 100%; float: none; margin-right: 0; } .form .btn { margin-bottom: 50px; } } @media only screen and (max-width: 480px) { /* nav */ nav { display: none; } .header { padding: 20px 0; } .logo-name { font-size: 4em; } .tagline { margin-bottom: 15px; font-size: 1.4em; } .call-action-area .price { font-size: 2em; margin: 0 0 15px; display: block; } .call-action-area .call-action-link, .btn { top: 0; } h2, h3, h4 { font-size: 3em; } h3 { font-size: 2em; } h4 { font-size: 1.8em; } p { font-size: 1.4em; } /* content */ .content { padding: 0; } .content section { padding-top: 50px; } /* speakers */ .speakers-item { min-height: 70px; padding-left: 70px; } .speaker-photo { width: 50px; height: 50px; } .speech-title { padding-top: 0; font-size: 16px; margin-bottom: .3em; } .speech-time { font-size: 16px; padding: 0; } .speakers-bio { display: none; } /* organizers */ .organizers-item { min-height: 70px; padding-left: 70px; } .organizer-photo { width: 50px; height: 50px; } .organizers-bio { display: none; } } @media only screen and (max-width: 321px) { .logo-name { font-size: 4em; margin-bottom: .4em; } .schedule-tbl .schedule-description { display: none; } .schedule-tbl .schedule-slot { width: auto; } /* partners */ .sponsor-item, .partner-item { margin: 0 12px 15px 0; } .sponsor--link, .partner-link { width: 115px; height: 115px; line-height: 115px; } } /* ============================================================================= MAIN LAYOUT ========================================================================== */ html { background: #F6F6F6; font: normal normal 10px/1.2em helvetica, arial, sans-serif; color: #777; } /* ============================================================================= BASIC STYLES ========================================================================== */ h1, h2, h3, h4, h5, h6 { color: #2b2b2b; } /* ============================================================================= NAVIGATION ========================================================================== */ nav { background: #2b2b2b; } .nav-link { color: #e7e7e7; } .nav-link:active, .nav-link:hover, .nav-link:focus, .nav-link.current { color: #fff; } /* ============================================================================= HEADER ========================================================================== */ .header { background-image: url('../img/cover5.png'); background-color: #2b2b2b; background-repeat: no-repeat; background-position: center bottom; background-size: 100% auto; } .logo-link, .tagline, .call-action-area .price { color: #fff; text-shadow: 1px 2px 1px rgba(0, 0, 0, 0.3); } .tagline { font-weight: normal; } .call-action-area .price { color: #fddd52; } .call-action-area .call-action-link, .btn { background-color: #fddd52; background-image: -moz-linear-gradient(top, #fddd52 30%, #f0a303 150%); background-image: -webkit-linear-gradient(top, #fddd52 30%, #f0a303 150%); filter: progid:dximagetransform.microsoft.gradient(startColorstr='#fddd52', endColorstr='#f0a303'); background-image: linear-gradient(top, #fddd52 30%, #f0a303 150%); color: #2b2b2b; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.4), inset 0 -2px 3px 0 #cc7f0a, inset 0 1px 0 0 #fff9b1; border-radius: 40px; } .github-link { position: fixed; top: 0; right: 0; z-index: 11; } .github-link img { border: 0; } /* ============================================================================= CONTENT ========================================================================== */ .content a { color: #f0a303; } .content a:hover, .content a:focus { color: #fddd52; text-decoration: underline; } /* ============================================================================= ABOUT ========================================================================== */ .about { border: 1px solid #e7e7e7; background: #fff; border-radius: 4px; } /* ============================================================================= LOCATION ========================================================================== */ .location-area { background: #e7e7e7; border: 1px solid #ccc; border-radius: 4px; height: 300px; } /* ============================================================================= SPEAKER ========================================================================== */ .speaker-photo .photo { border-radius: 50%; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.07); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .speakers-item:hover .speaker-photo .photo { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3); } .speech-time { color: #fff; background: #2b2b2b; border-radius: 8px; } /* ============================================================================= SCHEDULE ========================================================================== */ .schedule-tbl { background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); } .schedule-tbl table { background: #fff; } .schedule-tbl td, .schedule-tbl th { border-bottom: 1px solid #e7e7e7; } .schedule-tbl tbody tr:nth-child(2n+1) { background: #f6f6f6; } .schedule-tbl th { color: #2b2b2b; } .schedule-tbl .speaker-photo .photo { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); } .speakers-company { color: #999; } .schedule-slot { color: #2b2b2b; } .schedule-tbl tbody tr:hover { background: #fffde1; } .schedule-coffee, .schedule-closing, .schedule-lunch, .schedule-other { color: #214f87; } /* ============================================================================= SPONSORS ========================================================================== */ .sponsor--link, .partner-link { background: #fff; border: 1px solid #ccc; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15); } .sponsor--link:hover, .sponsor--link:focus, .partner-link:hover, .partner-link:focus { border-color: #f0a303; } /* ============================================================================= ORGANIZER ========================================================================== */ .organizer-photo .photo { border-radius: 50%; box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.07); -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .organizers-item:hover .organizer-photo .photo { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.3); } /* ============================================================================= CONTACT ========================================================================== */ .form input[type=text], .form input[type=email], .form textarea { color: #777; border: 1px solid #e7e7e7; background: #fff; border-radius: 4px; } .form input[type=text]:focus, .form input[type=email]:focus, .form textarea:focus { border-color: #aaa; outline: 0; } /* ============================================================================= Media Queries ========================================================================== */ @media only screen and (max-width: 1024px) { .header { background-size: auto 100%; } } @media only screen and (max-width: 480px) { /* speakers */ .speaker-photo .photo { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.07); } .speech-title { font-weight: bolder; } .speech-time { color: #2b2b2b; background: transparent; font-weight: bolder; } .github-link { display: none; } }