| /* |
| * Author: Carlos Alvarez |
| * URL: http://alvarez.is |
| * |
| * Project Name: FLATTY - Free Bootstrap 3 Theme |
| * Version: 1.0 |
| * URL: http://blacktie.co |
| */ |
| |
| body { |
| background-color: #f2f2f2; |
| font-family: 'Roboto', sans-serif; |
| font-weight: 300; |
| font-size: 16px; |
| color: #555; |
| |
| -webkit-font-smoothing: antialiased; |
| -webkit-overflow-scrolling: touch; |
| } |
| |
| /* Titles */ |
| h1, h2, h3, h4, h5, h6 { |
| font-family: 'Roboto', sans-serif; |
| font-weight: 300; |
| color: #333; |
| } |
| |
| h1 { |
| font-size: 40px; |
| } |
| |
| h3 { |
| color: #95a5a6; |
| font-weight: 400; |
| } |
| |
| h4 { |
| color: #95a5a6; |
| font-weight: 400; |
| font-size: 20px; |
| } |
| |
| .ellipsis p { |
| margin-bottom:10px; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| |
| .centered { |
| text-align: center; |
| } |
| |
| /* Links */ |
| a { |
| color: #3498db; |
| 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: #7b7b7b; |
| 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; |
| } |
| |
| hr { |
| display: block; |
| height: 1px; |
| border: 0; |
| border-top: 1px solid #ccc; |
| margin: 1em 0; |
| padding: 0; |
| } |
| |
| .navbar-default { |
| background-color: #3498db; |
| border-color: transparent; |
| } |
| |
| .navbar-default .navbar-brand { |
| color: white; |
| } |
| |
| .navbar-default .navbar-nav > li > a { |
| color: white; |
| } |
| |
| /* Helpers */ |
| |
| .mt { |
| margin-top: 40px; |
| margin-bottom: 40px; |
| } |
| |
| .nh { |
| margin-top: 80px; |
| margin-bottom: 40px; |
| } |
| |
| .form-control { |
| height: 42px; |
| font-size: 18px; |
| width: 280px; |
| } |
| |
| i { |
| margin: 8px; |
| color: #3498db; |
| } |
| |
| |
| /* HeaderWrap */ |
| #headerwrap { |
| /* background: url(../img/bg01.jpg) no-repeat center top; */ |
| background-color: #3498db; |
| margin-top: -20px; |
| padding-top:120px; |
| background-attachment: relative; |
| background-position: center center; |
| min-height: 400px; |
| max-height: 800px; |
| 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; |
| } |
| |
| #headerwrap h1 { |
| color: white; |
| font-size: 60px; |
| font-weight: bold; |
| letter-spacing: 1px; |
| } |
| |
| #menubutton { |
| max-height: 50px; |
| margin-top: 6px; |
| padding-top: 15px; |
| margin-left: 10px; |
| } |
| |
| .panel-sponsor { |
| min-height: 350px; |
| text-align: justify; |
| text-justify: inter-word; |
| } |
| |
| @media (min-width: 768px) and (max-width: 991px) { |
| .navbar-collapse.collapse { |
| display: none !important; |
| } |
| .navbar-collapse.collapse.in { |
| display: block !important; |
| } |
| .navbar-header .collapse, .navbar-toggle { |
| display:block !important; |
| } |
| .navbar-header { |
| float:none; |
| } |
| .navbar-collapse { |
| overflow:hidden; |
| } |
| #menubutton { |
| margin-right: 40px; |
| width: 45px; |
| } |
| .text-shrink { |
| visibility: hidden; |
| } |
| } |
| |
| @media (max-width:767px) { |
| #menubutton { |
| max-height: 50px; |
| margin-top: 6px; |
| padding-top: 15px; |
| margin-left: 15px; |
| margin-right: 15px; |
| } |
| } |
| |
| /* entire container, keeps perspective */ |
| .flip-container { |
| perspective: 1000; |
| } |
| /* flip the pane when hovered */ |
| .flip-container:hover .flipper, .flip-container.hover .flipper { |
| transform: rotateY(180deg); |
| } |
| |
| .flip-container, .front, .back { |
| width: 180px; |
| height: 180px; |
| } |
| |
| /* flip speed goes here */ |
| .flipper { |
| transition: 0.6s; |
| transform-style: preserve-3d; |
| |
| position: relative; |
| } |
| |
| /* hide back of pane during swap */ |
| .front, .back { |
| backface-visibility: hidden; |
| |
| position: absolute; |
| top: 0; |
| left: 0; |
| } |
| |
| /* front pane, placed above back */ |
| .front { |
| z-index: 2; |
| /* for firefox 31 */ |
| transform: rotateY(0deg); |
| } |
| |
| /* back, initially hidden pane */ |
| .back { |
| transform: rotateY(180deg); |
| } |
| |
| .back img { |
| -moz-transform: scaleX(-1); |
| -o-transform: scaleX(-1); |
| -webkit-transform: scaleX(-1); |
| transform: scaleX(-1); |
| filter: FlipH; |
| -ms-filter: "FlipH"; |
| } |
| |
| .panel-box p { |
| height: 1.5em; |
| } |