1*4882a593Smuzhiyun/* 2*4882a593Smuzhiyun * Author: Carlos Alvarez 3*4882a593Smuzhiyun * URL: http://alvarez.is 4*4882a593Smuzhiyun * 5*4882a593Smuzhiyun * Project Name: FLATTY - Free Bootstrap 3 Theme 6*4882a593Smuzhiyun * Version: 1.0 7*4882a593Smuzhiyun * URL: http://blacktie.co 8*4882a593Smuzhiyun */ 9*4882a593Smuzhiyun 10*4882a593Smuzhiyunbody { 11*4882a593Smuzhiyun background-color: #f2f2f2; 12*4882a593Smuzhiyun font-family: 'Roboto', sans-serif; 13*4882a593Smuzhiyun font-weight: 300; 14*4882a593Smuzhiyun font-size: 16px; 15*4882a593Smuzhiyun color: #555; 16*4882a593Smuzhiyun 17*4882a593Smuzhiyun -webkit-font-smoothing: antialiased; 18*4882a593Smuzhiyun -webkit-overflow-scrolling: touch; 19*4882a593Smuzhiyun} 20*4882a593Smuzhiyun 21*4882a593Smuzhiyun/* Titles */ 22*4882a593Smuzhiyunh1, h2, h3, h4, h5, h6 { 23*4882a593Smuzhiyun font-family: 'Roboto', sans-serif; 24*4882a593Smuzhiyun font-weight: 300; 25*4882a593Smuzhiyun color: #333; 26*4882a593Smuzhiyun} 27*4882a593Smuzhiyun 28*4882a593Smuzhiyunh1 { 29*4882a593Smuzhiyun font-size: 40px; 30*4882a593Smuzhiyun} 31*4882a593Smuzhiyun 32*4882a593Smuzhiyunh3 { 33*4882a593Smuzhiyun color: #95a5a6; 34*4882a593Smuzhiyun font-weight: 400; 35*4882a593Smuzhiyun} 36*4882a593Smuzhiyun 37*4882a593Smuzhiyunh4 { 38*4882a593Smuzhiyun color: #95a5a6; 39*4882a593Smuzhiyun font-weight: 400; 40*4882a593Smuzhiyun font-size: 20px; 41*4882a593Smuzhiyun} 42*4882a593Smuzhiyun 43*4882a593Smuzhiyun.ellipsis p { 44*4882a593Smuzhiyun margin-bottom:10px; 45*4882a593Smuzhiyun white-space: nowrap; 46*4882a593Smuzhiyun overflow: hidden; 47*4882a593Smuzhiyun text-overflow: ellipsis; 48*4882a593Smuzhiyun} 49*4882a593Smuzhiyun 50*4882a593Smuzhiyun.centered { 51*4882a593Smuzhiyun text-align: center; 52*4882a593Smuzhiyun} 53*4882a593Smuzhiyun 54*4882a593Smuzhiyun/* Links */ 55*4882a593Smuzhiyuna { 56*4882a593Smuzhiyun color: #3498db; 57*4882a593Smuzhiyun word-wrap: break-word; 58*4882a593Smuzhiyun 59*4882a593Smuzhiyun -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; 60*4882a593Smuzhiyun -moz-transition: color 0.1s ease-in, background 0.1s ease-in; 61*4882a593Smuzhiyun -ms-transition: color 0.1s ease-in, background 0.1s ease-in; 62*4882a593Smuzhiyun -o-transition: color 0.1s ease-in, background 0.1s ease-in; 63*4882a593Smuzhiyun transition: color 0.1s ease-in, background 0.1s ease-in; 64*4882a593Smuzhiyun} 65*4882a593Smuzhiyun 66*4882a593Smuzhiyuna:hover, 67*4882a593Smuzhiyuna:focus { 68*4882a593Smuzhiyun color: #7b7b7b; 69*4882a593Smuzhiyun text-decoration: none; 70*4882a593Smuzhiyun outline: 0; 71*4882a593Smuzhiyun} 72*4882a593Smuzhiyun 73*4882a593Smuzhiyuna:before, 74*4882a593Smuzhiyuna:after { 75*4882a593Smuzhiyun -webkit-transition: color 0.1s ease-in, background 0.1s ease-in; 76*4882a593Smuzhiyun -moz-transition: color 0.1s ease-in, background 0.1s ease-in; 77*4882a593Smuzhiyun -ms-transition: color 0.1s ease-in, background 0.1s ease-in; 78*4882a593Smuzhiyun -o-transition: color 0.1s ease-in, background 0.1s ease-in; 79*4882a593Smuzhiyun transition: color 0.1s ease-in, background 0.1s ease-in; 80*4882a593Smuzhiyun} 81*4882a593Smuzhiyun 82*4882a593Smuzhiyun hr { 83*4882a593Smuzhiyun display: block; 84*4882a593Smuzhiyun height: 1px; 85*4882a593Smuzhiyun border: 0; 86*4882a593Smuzhiyun border-top: 1px solid #ccc; 87*4882a593Smuzhiyun margin: 1em 0; 88*4882a593Smuzhiyun padding: 0; 89*4882a593Smuzhiyun} 90*4882a593Smuzhiyun 91*4882a593Smuzhiyun.navbar-default { 92*4882a593Smuzhiyun background-color: #3498db; 93*4882a593Smuzhiyun border-color: transparent; 94*4882a593Smuzhiyun} 95*4882a593Smuzhiyun 96*4882a593Smuzhiyun.navbar-default .navbar-brand { 97*4882a593Smuzhiyun color: white; 98*4882a593Smuzhiyun} 99*4882a593Smuzhiyun 100*4882a593Smuzhiyun.navbar-default .navbar-nav > li > a { 101*4882a593Smuzhiyun color: white; 102*4882a593Smuzhiyun} 103*4882a593Smuzhiyun 104*4882a593Smuzhiyun/* Helpers */ 105*4882a593Smuzhiyun 106*4882a593Smuzhiyun.mt { 107*4882a593Smuzhiyun margin-top: 40px; 108*4882a593Smuzhiyun margin-bottom: 40px; 109*4882a593Smuzhiyun} 110*4882a593Smuzhiyun 111*4882a593Smuzhiyun.nh { 112*4882a593Smuzhiyun margin-top: 80px; 113*4882a593Smuzhiyun margin-bottom: 40px; 114*4882a593Smuzhiyun} 115*4882a593Smuzhiyun 116*4882a593Smuzhiyun.form-control { 117*4882a593Smuzhiyun height: 42px; 118*4882a593Smuzhiyun font-size: 18px; 119*4882a593Smuzhiyun width: 280px; 120*4882a593Smuzhiyun} 121*4882a593Smuzhiyun 122*4882a593Smuzhiyuni { 123*4882a593Smuzhiyun margin: 8px; 124*4882a593Smuzhiyun color: #3498db; 125*4882a593Smuzhiyun} 126*4882a593Smuzhiyun 127*4882a593Smuzhiyun 128*4882a593Smuzhiyun/* HeaderWrap */ 129*4882a593Smuzhiyun#headerwrap { 130*4882a593Smuzhiyun /* background: url(../img/bg01.jpg) no-repeat center top; */ 131*4882a593Smuzhiyun background-color: #3498db; 132*4882a593Smuzhiyun margin-top: -20px; 133*4882a593Smuzhiyun padding-top:120px; 134*4882a593Smuzhiyun background-attachment: relative; 135*4882a593Smuzhiyun background-position: center center; 136*4882a593Smuzhiyun min-height: 400px; 137*4882a593Smuzhiyun max-height: 800px; 138*4882a593Smuzhiyun width: 100%; 139*4882a593Smuzhiyun 140*4882a593Smuzhiyun -webkit-background-size: 100%; 141*4882a593Smuzhiyun -moz-background-size: 100%; 142*4882a593Smuzhiyun -o-background-size: 100%; 143*4882a593Smuzhiyun background-size: 100%; 144*4882a593Smuzhiyun 145*4882a593Smuzhiyun -webkit-background-size: cover; 146*4882a593Smuzhiyun -moz-background-size: cover; 147*4882a593Smuzhiyun -o-background-size: cover; 148*4882a593Smuzhiyun background-size: cover; 149*4882a593Smuzhiyun} 150*4882a593Smuzhiyun 151*4882a593Smuzhiyun#headerwrap h1 { 152*4882a593Smuzhiyun color: white; 153*4882a593Smuzhiyun font-size: 60px; 154*4882a593Smuzhiyun font-weight: bold; 155*4882a593Smuzhiyun letter-spacing: 1px; 156*4882a593Smuzhiyun} 157*4882a593Smuzhiyun 158*4882a593Smuzhiyun#menubutton { 159*4882a593Smuzhiyun max-height: 50px; 160*4882a593Smuzhiyun margin-top: 6px; 161*4882a593Smuzhiyun padding-top: 15px; 162*4882a593Smuzhiyun margin-left: 10px; 163*4882a593Smuzhiyun} 164*4882a593Smuzhiyun 165*4882a593Smuzhiyun.panel-sponsor { 166*4882a593Smuzhiyun min-height: 350px; 167*4882a593Smuzhiyun text-align: justify; 168*4882a593Smuzhiyun text-justify: inter-word; 169*4882a593Smuzhiyun} 170*4882a593Smuzhiyun 171*4882a593Smuzhiyun@media (min-width: 768px) and (max-width: 991px) { 172*4882a593Smuzhiyun .navbar-collapse.collapse { 173*4882a593Smuzhiyun display: none !important; 174*4882a593Smuzhiyun } 175*4882a593Smuzhiyun .navbar-collapse.collapse.in { 176*4882a593Smuzhiyun display: block !important; 177*4882a593Smuzhiyun } 178*4882a593Smuzhiyun .navbar-header .collapse, .navbar-toggle { 179*4882a593Smuzhiyun display:block !important; 180*4882a593Smuzhiyun } 181*4882a593Smuzhiyun .navbar-header { 182*4882a593Smuzhiyun float:none; 183*4882a593Smuzhiyun } 184*4882a593Smuzhiyun .navbar-collapse { 185*4882a593Smuzhiyun overflow:hidden; 186*4882a593Smuzhiyun } 187*4882a593Smuzhiyun #menubutton { 188*4882a593Smuzhiyun margin-right: 40px; 189*4882a593Smuzhiyun width: 45px; 190*4882a593Smuzhiyun } 191*4882a593Smuzhiyun .text-shrink { 192*4882a593Smuzhiyun visibility: hidden; 193*4882a593Smuzhiyun } 194*4882a593Smuzhiyun} 195*4882a593Smuzhiyun 196*4882a593Smuzhiyun@media (max-width:767px) { 197*4882a593Smuzhiyun #menubutton { 198*4882a593Smuzhiyun max-height: 50px; 199*4882a593Smuzhiyun margin-top: 6px; 200*4882a593Smuzhiyun padding-top: 15px; 201*4882a593Smuzhiyun margin-left: 15px; 202*4882a593Smuzhiyun margin-right: 15px; 203*4882a593Smuzhiyun } 204*4882a593Smuzhiyun} 205*4882a593Smuzhiyun 206*4882a593Smuzhiyun/* entire container, keeps perspective */ 207*4882a593Smuzhiyun.flip-container { 208*4882a593Smuzhiyun perspective: 1000; 209*4882a593Smuzhiyun} 210*4882a593Smuzhiyun /* flip the pane when hovered */ 211*4882a593Smuzhiyun .flip-container:hover .flipper, .flip-container.hover .flipper { 212*4882a593Smuzhiyun transform: rotateY(180deg); 213*4882a593Smuzhiyun } 214*4882a593Smuzhiyun 215*4882a593Smuzhiyun.flip-container, .front, .back { 216*4882a593Smuzhiyun width: 180px; 217*4882a593Smuzhiyun height: 180px; 218*4882a593Smuzhiyun} 219*4882a593Smuzhiyun 220*4882a593Smuzhiyun/* flip speed goes here */ 221*4882a593Smuzhiyun.flipper { 222*4882a593Smuzhiyun transition: 0.6s; 223*4882a593Smuzhiyun transform-style: preserve-3d; 224*4882a593Smuzhiyun 225*4882a593Smuzhiyun position: relative; 226*4882a593Smuzhiyun} 227*4882a593Smuzhiyun 228*4882a593Smuzhiyun/* hide back of pane during swap */ 229*4882a593Smuzhiyun.front, .back { 230*4882a593Smuzhiyun backface-visibility: hidden; 231*4882a593Smuzhiyun 232*4882a593Smuzhiyun position: absolute; 233*4882a593Smuzhiyun top: 0; 234*4882a593Smuzhiyun left: 0; 235*4882a593Smuzhiyun} 236*4882a593Smuzhiyun 237*4882a593Smuzhiyun/* front pane, placed above back */ 238*4882a593Smuzhiyun.front { 239*4882a593Smuzhiyun z-index: 2; 240*4882a593Smuzhiyun /* for firefox 31 */ 241*4882a593Smuzhiyun transform: rotateY(0deg); 242*4882a593Smuzhiyun} 243*4882a593Smuzhiyun 244*4882a593Smuzhiyun/* back, initially hidden pane */ 245*4882a593Smuzhiyun.back { 246*4882a593Smuzhiyun transform: rotateY(180deg); 247*4882a593Smuzhiyun} 248*4882a593Smuzhiyun 249*4882a593Smuzhiyun.back img { 250*4882a593Smuzhiyun -moz-transform: scaleX(-1); 251*4882a593Smuzhiyun -o-transform: scaleX(-1); 252*4882a593Smuzhiyun -webkit-transform: scaleX(-1); 253*4882a593Smuzhiyun transform: scaleX(-1); 254*4882a593Smuzhiyun filter: FlipH; 255*4882a593Smuzhiyun -ms-filter: "FlipH"; 256*4882a593Smuzhiyun} 257*4882a593Smuzhiyun 258*4882a593Smuzhiyun.panel-box p { 259*4882a593Smuzhiyun height: 1.5em; 260*4882a593Smuzhiyun} 261