/*-----------------------------------------------------------------------------------*/ /* CSS3 Media Queries for Responsiveness (mobile-first, from small to big) /*-----------------------------------------------------------------------------------*/ /* Minimum width of 500 pixels (small tablets) ------------------------------------------------------------------------------------ */ @media screen and (max-width: 400px) { /* #General Layout Changes ================================================== */ /* #Page Specific Changes ================================================== */ /* #Font Changes ================================================== */ /* #Widget Changes ================================================== */ /* #Footer Layout Changes ================================================== */ } /* Minimum width of 768 pixels (tablets portrait) ------------------------------------------------------------------------------------ */ @media screen and (min-width: 768px) { /* #General Layout Changes ================================================== */ div#site-content article { float: left; margin: 0 1.2% 10px; width: 47.4%; } .entry-meta .share-links-wrap { display: block; } /* #Page Specific Changes ================================================== */ /* #Font Changes ================================================== */ /* #Widget Changes ================================================== */ /* #Footer Layout Changes ================================================== */ } /* Minimum width of 1024 pixels (tablets landscape) ------------------------------------------------------------------------------------ */ @media (min-width: 768px) and (max-width: 991px) { /* #General Layout Changes ================================================== */ p { margin-bottom: 24px;} div#site-content article { float: left; margin: 0 1.2% 10px; width: 47.4%; } /* #Page Specific Changes ================================================== */ /* #Font Changes ================================================== */ /* #Widget Changes ================================================== */ /* #Footer Layout Changes ================================================== */ } /* Minimum width of 1100 pixels (15' laptops + desktops) ------------------------------------------------------------------------------------ */ @media (min-width: 992px) { /* #General Layout Changes (style.css) ================================================== */ /* body { overflow: hidden;}*/ #header {} #content {padding: 60px 0px;} .ausgaben { background: url(../../css/default/img/ibooks_hochformat.png) no-repeat; background-size: 100%; min-height: 490px; box-shadow: 0px 5px 5px #333;} .ausgaben .post {padding: 0px; background: none; } .ausgaben .magazin img {box-shadow: 0px 3px 4px #000;} /* MasonryGrid { overflow: hidden;}*/ div#site-content article { float: left; margin: 0 0.7% 20px; width: 23.464%; } .ausgaben {padding-top: 35px;}/* .ausgaben article.magazin { float: left; margin: 0px 6.2% 0px; width: 11%; }*/ .ausgaben article.magazin h2, .ausgaben article.magazin h2 a{ font-size: 100%; line-height: 19px; word-break:keep-all; white-space:nowrap; color: #990000 !important; font-weight: bold; text-shadow: 0 -1px 1px #e7DFAC, 0 1px 1px #4C2506; } .ausgaben article.magazin:first-child { } /* #Text Layout Changes (css/default/stayle.css) ================================================== */ p { margin-bottom: 30px;} /* #Page Specific Changes ================================================== */ /* --- Header --- */ #header a#mobile-menu-btn, #header a#mobile-search-btn { display: none; } #site-title { max-width: 80%; display: inline-block; padding:30px 0px 20px 210px; float: left; background: url(../../css/default/img/logo.png) no-repeat; background-size: 29%;} #site-title h1, #site-title h2{text-align: left;} #site-title h1 {font-size: 75px; line-height: auto; letter-spacing: 0px;} #site-title h2 {margin-top: 20px;} a#desktop-search-btn, .header-widget-wrap { display: block; } #header .f-nav{ z-index: 9999; position: fixed; left: 0; top: 0; width: 100%;} /* --- Header Widget Area --- */ #header ul.headerinfo-text { position: absolute; top: 0; right: 65px; float: right; display: block; padding: 16px 16px 16px 0; text-align: right; } #header ul.headerinfo-text li { margin: 0px 0px 7px; padding: 0; font-size: 14px; font-size: 0.875rem; color: #3f3f3f; font-style: italic; clear: both; list-style: none; } #header ul.headerinfo-text li span { display: inline-block; padding: 4px 10px; color: #3f3f3f; } /* --- Header Search --- */ /* --- Main Nav + Sub-Menus --- */ #mainnav { display: block !important; background: #202020; position: relative; padding: 0; } #mainnav ul { margin: 0 auto; padding: 0; max-width: 1180px; overflow: visible; } #mainnav ul li { position:relative; display: inline-block; margin-right: 30px; padding: 15px 0; text-align: left; } #mainnav li a { color: rgba(255, 255, 255, 0.5); font-weight: 400; } #mainnav ul.sub-menu, #mainnav ul.children { display: none; position: absolute; top: 52px; left: 0; width: 220px; border: none; z-index: 99999; padding: 0; text-align: left; background: none; } #mainnav li.current_page_item a, #mainnav li.current-menu-item a {color: #FFF;} #mainnav ul.sub-menu ul, #mainnav ul.children ul { display: none; top: 0; left: 220px; z-index: 99999; } #mainnav li li { position:relative; display: block; float:none; margin: 0; padding: 0; font-weight: 400; } #mainnav li li a { font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, 0.6); display: block; background: #202020; margin: 0; padding: 15px 20px; } #mainnav li li a:hover { color: #FFF; } #mainnav li li li { display: block; padding: 0; } #mainnav ul li:hover > ul { display: block; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } #mainnav li:hover > a { color: #FFF; } #mainnav li li:hover > a { color: #fff !important; background: #AC2E40; } /* --- Header Search --- */ a#desktop-search-btn { position: absolute; top: 7px; right: 0; width: 40px; height: 40px; display: inline-block; background: #202020; z-index: 1000; text-align: center;-moz-border-radius: 35px; border-radius: 35px; } a#desktop-search-btn:before, a#desktop-search-btn.btn-open:before { content: '\f400'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 20px/1 'Genericons'; vertical-align: top; color: #bbb; padding-top: 11px; padding-left: 1px;} a#desktop-search-btn.btn-open:after { content: '\f503'; display: inline-block; -webkit-font-smoothing: antialiased; font: normal 12px/1 'Genericons'; vertical-align: bottom; padding: 0; position: absolute; top: 16px; right: 39px; z-index: 10000; } a#desktop-search-btn.btn-open:before, a#desktop-search-btn:hover:before { color: #fff !important; } a#desktop-search-btn span { display: none; } #search-wrap { position: relative; display: block !important; width: 20%; margin: 7px 40px 0px 0; padding: 0; background: none; float: right; } #search-wrap #s { display: none; width: 220px; background: #efefef !important; padding: 0 66px 0 16px; height: 40px; float: right; color: #a3a3a2; } /* #Font Changes ================================================== */ /* #Widget Changes ================================================== */ /* #Footer Layout Changes ================================================== */ } /* Minimum width of 1100 pixels (15' laptops + desktops) ------------------------------------------------------------------------------------ */ @media (min-width: 1200px) { /* #General Layout Changes (style.css) ================================================== */ .ausgaben {padding-top: 48px;} .ausgaben { min-height: 598px; }/* .ausgaben article.magazin { float: left; margin: 5px 6.2% 0px; width: 11%; }*/ .ausgaben article.magazin { padding: 0 65px 0 40px; } .ausgaben .hentry{ margin-bottom: 15px; } .ausgaben article.magazin h2, .ausgaben article.magazin h2 a{ font-size: 115%; } /* #Text Layout Changes (css/default/stayle.css) ================================================== */ /* #Page Specific Changes ================================================== */ /* #Font Changes ================================================== */ /* #Widget Changes ================================================== */ /* #Footer Layout Changes ================================================== */ } /*-----------------------------------------------------------------------------------*/ /* Retina Display optimized Images /*-----------------------------------------------------------------------------------*/ @media only screen and (-webkit-min-device-pixel-ratio: 2) { .logoBox1 { background: url(img/logo_retina.png) 0 0 no-repeat; -webkit-background-size: 200px 70px; } }