1/* desbest edit */ 2 3 4@media screen and (max-width: 480px){ 5 6 .desktop { display: none; } .mobile { display: block; } 7 8 fieldset, 9 #mediamanager__page, 10 #mediamanager__page .filelist{ 11 max-width: 100%; min-width: unset; 12 } 13 #mediamanager__page .file, 14 #mediamanager__page .namespaces, 15 #mediamanager__page .panel { 16 width: 100%; clear: both; float: none; 17 } 18 li, dd { margin: 1.15em 0px !important; } 19 #config__manager tr { display: block; } 20 #config__manager td { display: block; padding: 1.15em 0px; max-width: 50%; } 21 #config__manager fieldset { margin: 1em 0px; } 22 #config__manager fieldset td.value { width: unset; } 23 24 #config__manager td .input, 25 #config__manager fieldset td.value, 26 #config__manager td input.edit { 27 max-width: 75%; 28 } 29 30 /* ravel specific */ 31 nav.menu li { margin: 0.85em 0px !important } 32 .entry-content { padding: 0px 1.15em; } 33 /* */ 34 35} 36 37 38 @media (max-width: 600px) { 39 .entry.error .entry-title { font-size: 72px; } 40 } 41 42 @media (max-width: 564px) { 43 .page-template-intro .col, 44 .page-template-intro .col { 45 width: 100%; 46 } 47 48 .page-template-intro .thumbnail.hero-image { 49 height: auto; 50 width: auto; 51 } 52 }/* end @media max-width 564 */ 53 54 55 @media (max-width: 768px) {.loop-entries-gallery li {width: 40%;}} 56 @media (max-width: 600px) {.loop-entries-gallery li {width: auto;}} 57 58 59 @media (max-width: 910px) { 60 .singular-portfolio_item .featured-media, 61 .singular-portfolio_item .entry { 62 width: 46%; 63 } 64}/* end @media max-width 910 */ 65 66@media (max-width: 728px) { 67 .singular-portfolio_item .featured-media, 68 .singular-portfolio_item .entry { 69 margin-left: 0; 70 margin-right: 0; 71 width: 100%; 72 } 73}/* end @media max-width 728 */ 74 75 76/* === Responsive Menu === */ 77@media only screen and (max-width: 782px) { 78 79 nav#menu-primary { 80 margin: 0; 81 padding: 0; 82 text-align: left; 83 } 84 85 /* menu toggle */ 86 .menu-toggle { 87 cursor: pointer; 88 display: block; 89 font-size: 0; 90 line-height: 0; 91 margin: 5px auto 15px; 92 padding: 0; 93 text-align: center; 94 } 95 96 /* menu toggle icon */ 97 .menu-toggle::before { 98 color: #e3f4ff; 99 content: '\f0c9'; 100 font-size: 28px; 101 line-height: 36px; 102 text-shadow: 2px 2px 0 rgba(0,0,0,.2); 103 } 104 .menu-toggle.active::before { 105 content: '\f057'; 106 } 107 108 .menu-toggle-link:hover::before {color: #fff;} 109 110 nav#menu-primary .wrap { 111 clear: both; 112 display: none; 113 margin-bottom: 12px; 114 float: left; 115 width: 100%; 116 } 117 118 /* Menu structure */ 119 120 nav#menu-primary ul ul { 121 background: transparent; 122 left: auto; 123 min-width: 0; 124 opacity: 1; 125 position: static; 126 top: auto; 127 visibility: visible; 128 } 129 nav#menu-primary li > ul::before {display: none;} 130 131 nav#menu-primary ul ul ul { 132 left: auto; 133 margin: 0; 134 top: auto; 135 } 136 nav#menu-primary li li > ul::before {display: none;} 137 138 nav#menu-primary li li:hover > ul { 139 margin: 0; 140 } 141 142 /* Menu content */ 143 144 nav#menu-primary li { 145 width: 100%; 146 word-spacing: 0; 147 } 148 149 /* links */ 150 nav#menu-primary li a, 151 nav#menu-primary li li a { 152 background: #101619; 153 border: 0; 154 border-bottom: 1px solid #1d2529; 155 font-size: 17px; 156 font-weight: 400; 157 line-height: 24px; 158 text-transform: none; 159 } 160 nav.menu li > a::after { 161 content: ''; 162 margin: 0; 163 } 164 165 /* link hovers */ 166 nav#menu-primary li a:hover, 167 nav#menu-primary li li a:hover { 168 background: #000; 169 } 170 nav.menu li li > a::after, 171 .rtl nav.menu li li > a::after { content: ''; } 172 173 /* === lower level links === */ 174 175 nav#menu-primary li li a { 176 padding-left: 35px; 177 } 178 179 nav.menu li li a::before { 180 color: rgba(255,255,255,.5); 181 content: '\f10c'; 182 font-size: 9px; 183 line-height: 24px; 184 margin-right: 15px; 185 vertical-align: top; 186 } 187 188 nav#menu-primary li li li a {padding-left: 75px; } 189 190 nav#menu-primary li li li li a {padding-left: 115px;} 191 192 /* current links */ 193 nav#menu-primary li.current-menu-item > a, 194 nav#menu-primary li li.current-menu-item > a { 195 color: #a0cfec; 196 } 197 198} /* end @media max-width 782 */ 199 200/* === Responsive Menu Reset === */ 201@media only screen and (min-width: 783px) { 202 203 .menu > .wrap { display: block !important; } 204 205} /* end @media min-width 783 */ 206 207 208 @media (max-width: 1199px) { 209 .entry-title { 210 padding-left: 0; 211 padding-right: 0; 212 text-align: left; 213 } 214 } 215 216 217 218 @media (max-width: 999px) { 219 .comment-list li li .comment-wrap, 220 .comment-list li li li .comment-wrap, 221 .comment-list li li li li .comment-wrap, 222 .comment-list li li li li li .comment-wrap, 223 .comment-list li li li li li li .comment-wrap{margin-left: 0;} 224 } 225 226 227/* === Responsive Sidebar === */ 228 @media (max-width: 1199px) { 229 230 #sidebar-primary { 231 background: #2d3a42; 232 box-shadow: 0 0 10px rgba(0,0,0,.5); 233 margin-left: -336px; 234 overflow-y: scroll; 235 padding: 84px 24px 24px; 236 position: fixed; 237 bottom: 0; 238 left: 0; 239 top: 0; 240 transition: all 0.4s ease-in-out; 241 -webkit-transition: all 0.4s ease-in-out; 242 -ms-transition: all 0.4s ease-in-out; 243 -moz-transition: all 0.4s ease-in-out; 244 -o-transition: all 0.4s ease-in-out; 245 width: 336px; 246 z-index: 99999; 247 } 248 249 #sidebar-primary.active { 250 margin-left: 0; 251 } 252 253 /* sidebar-toggle */ 254 .sidebar-toggle { 255 cursor: pointer; 256 display: block; 257 height: 36px; 258 margin: 24px; 259 position: fixed; 260 left: 0; 261 top: 0; 262 text-align: center; 263 width: 36px; 264 z-index: 99; 265 } 266 267 /* sidebar toggle icon */ 268 .sidebar-toggle::before { 269 color: #fff; 270 content: '\f054'; 271 font-size: 18px; 272 line-height: 36px; 273 min-width: 36px; 274 } 275 276 .sidebar-toggle:hover::before { 277 margin-left: 8px; 278 } 279 280 /* sidebar toggle active icon */ 281 .sidebar-toggle.active::before { 282 content: '\f053'; 283 margin-left: -3px; 284 } 285 286 .sidebar-toggle.active:hover::before { 287 margin-left: -11px; 288 } 289 290 /* sidebar icon background */ 291 .sidebar-toggle::after { 292 background: #f74037; 293 box-shadow: 6px 0 0 rgba(0,0,0,.2); 294 content: ''; 295 position: absolute; 296 bottom: 0; 297 left: 0; 298 right: 0; 299 top: 0; 300 transform: rotate(45deg); 301 -webkit-transform: rotate(45deg); 302 -moz-transform: rotate(45deg); 303 -ms-transform: rotate(45deg); 304 -o-transform: rotate(45deg); 305 z-index: -1; 306 } 307 308 /* === Sidebar relative to WP admin bar === */ 309 310 .admin-bar #sidebar-primary, 311 .admin-bar .sidebar-toggle { 312 top: 32px; 313 } 314 315 316 } 317 318 /* === Responsive Sidebar: Adjustment to 2nd version of WP admin bar === */ 319 @media (max-width: 782px) { 320 .admin-bar #sidebar-primary, 321 .admin-bar .sidebar-toggle { 322 top: 46px; 323 } 324 } 325 326 327/** 328 * Responsive CSS 329 * --------------------------------------------------------------------------- */ 330 331/* === 1st break point === */ 332 333@media (max-width: 1199px) { 334 335 .content {width: 92%;} 336 337} /* end @media max-width: 1199px */ 338 339/* === 2nd break point === */ 340 341@media (max-width: 600px) { 342 343/* Image Alignment */ 344 345.alignleft, 346.alignright { 347 float: none; 348 margin: 20px auto; 349 } 350 351 /* === Gallery === */ 352 353 /* .gallery-col-3 is the default one above */ 354 .gallery-col-4 .gallery-item, 355 .gallery-columns-4 .gallery-item, 356 .gallery-col-5 .gallery-item, 357 .gallery-columns-5 .gallery-item, 358 .gallery-col-6 .gallery-item, 359 .gallery-columns-6 .gallery-item, 360 .gallery-col-7 .gallery-item, 361 .gallery-columns-7 .gallery-item, 362 .gallery-col-8 .gallery-item, 363 .gallery-columns-8 .gallery-item, 364 .gallery-col-9 .gallery-item, 365 .gallery-columns-9 .gallery-item, 366 .gallery-col-10 .gallery-item, 367 .gallery-columns-10 .gallery-item, 368 .gallery-col-11 .gallery-item, 369 .gallery-columns-11 .gallery-item, 370 .gallery-col-12 .gallery-item, 371 .gallery-columns-12 .gallery-item, 372 .gallery-col-13 .gallery-item, 373 .gallery-columns-13 .gallery-item, 374 .gallery-col-14 .gallery-item, 375 .gallery-columns-14 .gallery-item, 376 .gallery-col-15 .gallery-item, 377 .gallery-columns-15 .gallery-item, 378 .gallery-col-16 .gallery-item, 379 .gallery-columns-16 .gallery-item, 380 .gallery-col-17 .gallery-item, 381 .gallery-columns-17 .gallery-item, 382 .gallery-col-18 .gallery-item, 383 .gallery-columns-18 .gallery-item, 384 .gallery-col-19 .gallery-item, 385 .gallery-columns-19 .gallery-item, 386 .gallery-col-20 .gallery-item, 387 .gallery-columns-20 .gallery-item, 388 .gallery-col-21 .gallery-item, 389 .gallery-columns-21 .gallery-item, 390 .gallery-col-22 .gallery-item, 391 .gallery-columns-22 .gallery-item, 392 .gallery-col-23 .gallery-item, 393 .gallery-columns-23 .gallery-item, 394 .gallery-col-24 .gallery-item, 395 .gallery-columns-24 .gallery-item, 396 .gallery-col-25 .gallery-item, 397 .gallery-columns-25 .gallery-item, 398 .gallery-col-26 .gallery-item, 399 .gallery-columns-26 .gallery-item, 400 .gallery-col-27 .gallery-item, 401 .gallery-columns-27 .gallery-item, 402 .gallery-col-28 .gallery-item, 403 .gallery-columns-28 .gallery-item, 404 .gallery-col-29 .gallery-item, 405 .gallery-columns-29 .gallery-item, 406 .gallery-col-30 .gallery-item, 407 .gallery-columns-30 .gallery-item{ width: 33.3%;} 408 409 /* === Layout === */ 410 411 /* micro layout grouping */ 412 .entry-byline, 413 .singular-page .entry-header, 414 #comments-header { 415 border-right: 0; 416 padding: 0 0 12px; 417 text-align: center; 418 width: 100%; 419 } 420 421 .entry-byline .entry-published, 422 .entry-byline .entry-author, /* didn't exist before */ 423 .entry-byline .comments-link, 424 .comments-nav a { 425 display: inline-block; 426 } 427 428 .entry-byline .entry-published, 429 .entry-byline .entry-author, 430 .comments-nav a:first-child { 431 border-right: 1px solid rgba(255,255,255,.1); 432 margin-right: 9px; 433 padding-right: 9px; 434 } 435 .entry-byline .post-edit-link { 436 margin-left: 9px; 437 } 438 439 .comments-nav .page-numbers + a { 440 border-left: 1px solid rgba(255,255,255,.1); 441 margin-left: 9px; 442 padding-left: 9px; 443 } 444 445 .singular-page .entry-header .entry-title { 446 font-size: 25px; 447 font-style: italic; 448 line-height: 36px; 449 text-align: center; 450 text-transform: none; 451 } 452 453 .entry-title, 454 .featured-media, 455 .entry-content, 456 .entry-summary, 457 .entry-footer, 458 .loop-pagination, 459 .comment-list, 460 .comment-respond, 461 .comments-closed { 462 width: 100%; 463 } 464 465 .loop-pagination {text-align: center;} 466 467 .entry-title { 468 font-size: 25px; 469 letter-spacing: 0; 470 line-height: 36px; 471 text-align: center; 472 } 473 474/* === Header === */ 475 476#header { 477 padding: 36px 0 0; 478} 479 480 #branding { 481 margin: 32px 0 30px; 482 padding: 0 15%; 483 text-align: center; 484 } 485 486 #site-title { 487 font-size: 36px; 488 line-height: 48px; 489 } 490 491/* === Footer === */ 492 493 #menu-social, 494 .footer-content, 495 #menu-social + .footer-content { 496 padding: 15px 5%; 497 text-align: center; 498 width: 100%; 499 } 500 501 #menu-social li a::after { 502 margin: 9px 0 0 0; 503 } 504 505} /* end @media max-width: 600px */