body { font-size: 1em; line-height: 1.4; } /* * Remove text-shadow in selection highlight: h5bp.com/i * These selection rule sets have to be separate. * Customize the background color to match your design. */ ::-moz-selection { background: #f2c2c9; color: #a4003a; text-shadow: none; } ::selection { background: #16a085; color: #a4003a; text-shadow: none; } /* * A better looking default horizontal rule */ hr { display: block; height: 2px; border: 0; margin: 10px 0px; padding: 0; background-image: -webkit-linear-gradient(left, #fff, #EAE014, #fff); background-image: -moz-linear-gradient(left, #fff, #EAE014, #fff); background-image: -ms-linear-gradient(left, #fff, #EAE014, #fff); background-image: -o-linear-gradient(left, #fff, #EAE014, #fff); width: 50%; left: 25%; position: relative; border: none; } img { vertical-align: middle; } /* * Allow only vertical resizing of textareas. */ /* ========================================================================== General styles ========================================================================== */ html, body { height: 100%; } body { font-family: "Lato"; font-weight: 450; font-size: 16px; color: #176386; -webkit-font-smoothing: antialiased; -webkit-overflow-scrolling: touch; } .col-md-4 { padding-bottom: 20px; } .row { margin-right: 0px; margin-left: -15px; } .modal-header { background: #ffbf00; } .modal-header h4 { color: white; font-weight: 700; letter-spacing: 1px; } .modal-footer { background: #2b2b2b; } .navbar-default { border-color: transparent; background-color: #dadada; } .navbar-inverse .navbar-brand { font-weight: 500; font-size: 20px; } .navbar-toggle { border-color: transparent; border: 0px solid transparent; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { background-color: #16a085; color: white; } a img { background: white; } .odd a img { background: #f5f5f5; } /* Titles */ h1, h2, h3, h4, h5, h6 { font-family: "Raleway"; font-weight: 700; color: #3676ab; } h2 { font-size: 36px; color: #3676ab; } h3 { font-size: 23px; } /* Paragraph & Typographic */ p { line-height: 28px; margin-bottom: 20px; font-size: 16px; } p.large { font-size: 20px; margin-bottom: 50px; } .centered { text-align: center; font-size: 30px; } strong { font-weight: 700; } em { font-weight: 300; } pre { background: #ebebeb; border: none; font-family: "Monaco"; font-size: 16px; color: #666; padding: 20px; line-height: 28px; } small { font-size: 12px; } blockquote, blockquote p { line-height: 28px; color: #999; font-weight: 300; font-style: italic; } blockquote { position: relative; margin: 0 0 40px -30px; padding-left: 30px; border-left: 5px solid #3498db; } blockquote cite { position: absolute; bottom: -25px; right: 0; font-size: 12px; font-style: italic; color: #333; font-weight: 300; } blockquote cite:before { content: "-- " } /* Images */ .overflow-image { margin-top: -65px; } /* Links */ a { color: #3676ab; word-wrap: break-word; -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; transition: color 0.1s ease-in, background 0.1s ease-in; } a:hover, a:focus { color: #ffca39; text-decoration: none; outline: 0; } a:before, a:after { -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; -moz-transition: color 0.1s ease-in, background 0.1s ease-in; -ms-transition: color 0.1s ease-in, background 0.1s ease-in; -o-transition: color 0.1s ease-in, background 0.1s ease-in; transition: color 0.1s ease-in, background 0.1s ease-in; } /* ========================================================================== Wrap Sections ========================================================================== */ #headerwrap { margin-top: -50px; padding-top: 120px; text-align: center; background-attachment: relative; background-position: center center; min-height: 650px; width: 100%; -webkit-background-size: 100%; -moz-background-size: 100%; -o-background-size: 100%; background-size: 100%; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; padding-bottom: 100px; } #headerwrap h1 { color: #3676ab; font-size: 50px; font-weight: 500; text-align: center; letter-spacing: 5px; } #headerwrap p { color: #3676ab; font-size: 22px; font-weight: 300; text-align: center; letter-spacing: 1px; } #headerwrap .icon { color: #ffffff; margin-top: 90px; padding-bottom: 30px; letter-spacing: 8px; font-size: 100px; font-weight: bold; text-shadow: 0px 20px 7px #3da8ae; } #about { background: #fff; padding: 60px 0; } #about img { margin-top: 65px; } #cfp { background: #f5f5f5; padding: 60px 0; text-align: center; } #cfp .fa { color: #ffbf00; } #cfp p { text-align: center; } #speakers { background: #f5f5f5; padding: 60px 0; } #speakers H4 { padding-top: 10px; } #speakers p.large { margin-top: 60px; margin-bottom: 40px; } #speakers .fa { width: 30px; height: 30px; margin: 0 3px; border-radius: 100%; font-size: 15px; line-height: 30px; outline: 0; color: #fff; background-color: #c4c4c4; -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s; } #speakers .fa:hover { background-color: #ffbf00; } #venue { background: #fff; padding: 60px 0; } #venue .btn-default { border: 0; } #contact { background: #fff; padding: 60px 0; text-align: center; } #login { background: #fff; padding: 60px 0; text-align: center; } #contact .form { padding: 30px 0; } .proposal-form { width: 20px; height: 10px; } #contact .fa { color: #ffbf00; margin-bottom: 10px; } #contact .btn { font-weight: 500; font-size: 18px; margin-top: 50px; background-color: #ffca39; color: #3676ab; border: 0; } #contact .btn:hover, #contact .btn:focus { background-color: #e9af03; outline: 0px; } #greywrap { background: #f5f5f5; margin-top: 0px; padding: 50px 0; border-bottom: 1px solid #eee; text-align: center; } #greywrap .btn { font-family: "Raleway"; font-weight: 300; font-size: 20px; margin: 0 25px; background-color: #fff; border-color: #e2e2e2; color: #888; border-bottom: 0; letter-spacing: 1px; } #greywrap .btn:hover, #greywrap .btn:focus { margin: 0 25px; background-color: #fff; border-color: #a5cdd5; border-bottom: 0; outline: 0px; color: #a5cdd5; } #greywrap h2 { font-size: 30px; } #greywrap .callout { margin-bottom: 20px; } #greywrap p { font-size: 30px; } #greywrap .fa { font-size: 18px; margin-right: 4px; } #footerwrap { padding: 25px 0 15px 0; border-bottom: 1px solid #ddd; text-align: center; } #footerwrap span.copyright { line-height: 40px; color: #888; font-weight: 400; } #footerwrap span.copyright a { color: #888; border-bottom: 1px dotted; } #footerwrap span.copyright a:hover { color: #ffbf00; text-decoration: none; } #footerwrap h4 { color: white; } ul.social-buttons { margin: 0; } ul.social-buttons li a { font-size: 24px; outline: 0; color: #999; } ul.social-buttons li a:hover, ul.social-buttons li a:focus, ul.social-buttons li a:active { color: #ffbf00; } /* ========================================================================== Box Sections ========================================================================== */ .white h1 { color: #999; } /* ========================================================================== Image Mask ========================================================================== */ .grid figure { margin: 0; position: relative; border: 1px solid #eee; } .grid figure img { width: 100%; display: block; position: relative; } .grid figcaption { position: absolute; top: 0; left: 0; padding: 20px; color: #fff; background-color: #ffbf00; } .grid figcaption h5 { margin: 0; padding-top: 0px; padding-left: 20px; padding-bottom: 5px; color: #fff; font-weight: 700; text-align: left; letter-spacing: 1px; } .grid figcaption a { text-align: left; padding: 5px 10px; margin-left: 20px; display: inline-block; background: #2f2f2f; color: #fff; font-size: 13px; } /* Caption Style */ .mask figure { overflow: hidden; } .mask figure img { -webkit-transition: -webkit-transform 0.4s; -moz-transition: -moz-transform 0.4s; transition: transform 0.4s; } .no-touch .mask figure:hover img, .mask figure.cs-hover img { -webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } .mask figcaption { height: 50px; width: 100%; top: auto; bottom: 0; opacity: 0; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s 0.3s; -moz-transition: -moz-transform 0.4s, opacity 0.1s 0.3s; transition: transform 0.4s, opacity 0.1s 0.3s; } .no-touch .mask figure:hover figcaption, .mask figure.cs-hover figcaption { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); -webkit-transition: -webkit-transform 0.4s, opacity 0.1s; -moz-transition: -moz-transform 0.4s, opacity 0.1s; transition: transform 0.4s, opacity 0.1s; } .mask figcaption a { position: absolute; top: 10px; bottom: 10px; right: 30px; } /* ========================================================================== MEDIA QUERIES ========================================================================== */ @media screen and (max-width:1050px), screen and (max-device-width:1050px) { body .header { background-attachment: scroll; } } /*ipad portrait*/ @media only screen and (min-device-width:768px) and (max-device-width : 1024px) and (orientation : portrait) { .header { background-attachment: scroll; } } @media screen and (max-width:769px) { #headerwrap h1 { font-size: 80px; } #headerwrap p { font-size: 30px; line-height: 38px; } } .row1 { width:80%; margin-left: 5%; } .row1 textarea { height: 150px; width: 350px; } .row1 label { display: inline-block; margin-bottom: 5px; font-weight: bold; min-width: 300px; float: left; } .row1 input { width: 350px; } .alert { padding: 8px 35px 8px 14px; margin-bottom: 20px; margin-top: 10px; text-shadow: 0 1px 0 rgba(255,255,255,0.5); background-color: #ffca39; color: #3676ab; border: 1px solid transparent; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } .col-md-9 form span { display: block; } .col-md-9 form input { width: 350px; margin-right: 150px; } .col-md-9 form label{ min-width: 175px; text-align: right; } .col-md-9 form li { font-size: 15px; list-style-type: none; color: red; } .pwd-recovery-email { height: 45px; width: 350px; margin-right: 5px; border-radius: 4px; } .pwd-recovery-btn { height:45px; } #sponsors { background: #fff; padding: 60px 0; } #sponsors .col-md-4 { margin-left: 10%; margin-top: 3%; margin-right: 2%; width: 20%; } #sponsors a { text-decoration: underline; } #about img { margin-top: 10%; }