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