/* --------------------------------------------------- Title: IDEENWERKSTATT TINTIFAX - Layout CSS Author: Pierpaolo Federici - IDEENWERKSTATT TINTIFAX ------------------- Color Palette -------------------- orange - rgb(249,178,51); gray - rgb(177,167,158); NEW!!! gray - rgb(135,122,116); ------------------------------------------------------ /* Table of contents Basic tmeplate 1 BASIC 2 TYPOGRAPHY 3 PRELOADER Sections 6 HOME 7 SUB-VIEWS 8 FOOTER Other class 13 BUTTONS 14 ROLLING QUICKLINKS Media Queries MAX-WIDTH: 400px; MAX-WIDTH: 550px; MAX-WIDTH: 750px; MAX-WIDTH: 1000px; MAX-WIDTH: 1200px; */ /*====================== PRELOADER ========================*/ /*======================== BASIC ========================*/ @font-face { font-family: 'Lato'; src: url(../fonts/Lato-Light.ttf); font-weight: 300; font-display: swap; } @font-face { font-family: 'Lato'; src: url(../fonts/Lato-Regular.ttf); font-weight: 400; font-display: swap; } @font-face { font-family: 'Lato'; src: url(../fonts/Lato-Bold.ttf); font-weight: 700; font-display: swap; } @font-face { font-family: 'Lato'; src: url(../fonts/Lato-Black.ttf); font-weight: 900; font-display: swap; } @font-face { font-family: 'Calligraffitti'; src: url(../fonts/Calligraffitti-Regular.ttf); font-weight: 400; font-display: swap; } body { font-size: 1.5em; line-height: 1.6; font-weight: 400; font-family: "Lato", sans-serif; color: #222; } .row.flex {display: -webkit-flex; display: flex; -webkit-flex-wrap:wrap; flex-wrap:wrap;} .row.flex .three{-webkit-order: 2; order: 2; /* margin-top: 20px;*/} .row.flex .nine {-webkit-order: 1; order: 1;} br.rwd-break {display: none;} #head {position:relative; z-index: 20;} #head .logo img {width: 50%; display: block; margin: 10px 0 10px 25px;} #social-icons {position: absolute; right: 10px; top: 19px; z-index: 20;} #social-icons a {margin: 10px 3px;} #social-icons a:hover svg path {fill: rgb(249,178,51)!important;} #content-top {position:relative; width: 100%; background-color: rgb(249,178,51);} #content-top div.img {width: 100%; height: 250px;} #content-top .overlay{position: absolute; top:0; left: 0; right: 0; bottom: 0; background-color: rgba(249,178,51, 0.85); z-index: 15; display: none;} article {color: rgb(135,122,116); margin: 40px 0;} article h3, article h4, article h5 {color: rgb(249,178,51); font-weight: 300;} article h5, article h6 {margin-bottom: 1.5rem;} article h6 {font-weight: 700;} article a {color: rgb(249,178,51); text-decoration: none;} article a:hover {color: rgb(135,122,116);} article .content{padding: 20px 20px 0;} article img.thumb {max-width: 100%; border: 1px solid;} .more {color: rgb(115,110,104); font-style: italic;} .more::before {content: "» "; font-size: 1.4em; font-style: normal; padding-right: 5px; line-height: 0;} .date {font-size: 1.3em; font-weight: 300;} .date.small {font-size: 1em;} /*====================== TYPOGRAPHY ======================*/ .orange {color: rgb(249,178,51);} /*====================== HOME =============================*/ #index #content-top .ten.columns {width: 100%;} #index #content-top .two.columns {display: none;} #media {display: none; width: 72%; float: right;} #media li {list-style: none; margin:0;} #media li a {display: none; width: 70%; background-color: rgb(135,122,116); font-size: 1em; font-weight: bold; color: rgba(255, 255, 255, 0.7); padding:17px 0 17px 30%; line-height: 17px; background-repeat: no-repeat; background-position: 10% center; border-bottom: 1px solid; transition: all 800ms ease;} #media a.videos {background-image: url('../images/ico-video.png');} #media a.downloads {background-image: url('../images/ico-download.png');} #media a.links {background-image: url('../images/ico-links.png');} #media li a:hover {background-color: rgb(249,178,51); color: #fff; text-decoration: none;} #efb { width: 72%; margin: 20px auto; text-align: center;} #shop { width: 72%; margin: auto; text-align: center;} #shop a { display: block; background-color: rgb(135,122,116); line-height: 1.35em; font-size: 1em; color: rgba(255, 255, 255, 0.7); transition: all 800ms ease; padding: 10px 0px; box-sizing: border-box;} #shop img {margin: 10px 0;} #shop a:hover {background-color: rgb(249,178,51); color: #fff; text-decoration: none;} #shop p {margin-bottom: 10px;} #corona-modal {padding: 20px;} #corona-modal .title {color: rgb(249,178,51); font-size: 1.2em; font-weight: bold;} #corona-modal .bold {font-weight: bold;} #corona-modal .link {padding-top: 10px; color: rgb(249,178,51);} #corona-modal li {margin-left: 20px; list-style-position: outside; list-style-type: square;} #corona-modal ul ul li {font-size: 15px;} #jobangebote {position: relative; width: 100%; margin-top: 60px;} #jobangebote .job-but {display: block; width: 200px; background-color: rgb(249,178,51); padding: 5px; text-align: center; color: #fff;} #jobangebote h5 {font-size: 1.25em; font-weight: 500; margin-bottom: 1rem;} #jobangebote a {position:relative;} #jobangebote p {margin-bottom: 0;} #jobangebote a:hover {color: rgb(249,178,51);} #jobangebote hr {margin: 22px 0;} #jobangebote hr.orange {border-color: rgb(249,178,51); margin: 0 0 22px 0;} .quicklink {border:1px solid rgb(177,167,158); float:none; width: 85%; margin: 10px auto;} .quicklink h5 {padding: 10px 0 0px 13px; margin-bottom: .05rem; font-size: 2.2rem; font-weight: 400;} .quicklink p {padding-left: 13px; color: rgb(135,122,116);} /*#standorte.quicklink p {padding:10px 15px 10px 15px; margin:0;} #standorte.quicklink a.standort {padding-left: 15px; display: block; font-size: 1.1em; line-height: 1.6em;} #standorte.quicklink a.standort:before {content: '+'; padding-right: 10px; color: rgb(100,100,100); position: absolute; margin-left: -15px;} #standorte.quicklink a.standort:hover {color: rgb(100,100,100);} #standorte.quicklink a.standort-weg {text-decoration: underline;} #standorte.quicklink a.standort-weg:hover {color: rgb(100,100,100);}*/ /*====================== SUB-VIEWS =======================*/ #sub-view article {width: 85%; margin: 40px auto;} #sub-view #media {margin-top: 35%;} #sub-view #media li a {background-color: rgb(253, 235, 196); color: rgb(249,178,51); font-size: 1.1em; font-weight: 700; text-decoration: none; border-bottom: 1px solid;} #sub-view #media a.videos {background-image: url('../images/ico-video-orange.png');} #sub-view #media a.downloads {background-image: url('../images/ico-download-orange.png');} #sub-view #media a.links {background-image: url('../images/ico-links-orange.png');} #sub-view #media li a:hover {background-color: rgb(255,255,255); color: rgb(249,178,51);} #galerie {margin-top: 3.5rem;} #galerie a {margin:5px 5px 5px 0; float: left; width: 100%; line-height: 0; background-color: rgb(249,178,51);} #galerie a img {opacity: 1; transition: opacity 0.5s; width: 100%; height: 100%;} #galerie a img:hover{opacity: 0.60; transition: opacity 0.5s;} /*====================== JOBS INDEX =======================*/ #sub-view.jobs-index article {width: 85%; margin: 40px auto;} #sub-view.jobs-index h3 {margin-bottom: 40px;} #sub-view.jobs-index h5 {font-weight: 500;} /*====================== JOBS ANGEBOT =======================*/ #sub-view.jobs-angebot #read h1 {margin-bottom: 0;} #sub-view.jobs-angebot #read .job-standort {margin: 20px 0; padding: 20px 20px 0; border: 1px solid rgb(249,178,51); font-size: 1.1em; font-weight: 600; border-width: 1px 0;} #sub-view.jobs-angebot #read .text h5 {font-weight: 500;} #sub-view.jobs-angebot #read ul li {position: relative; margin-bottom: 5px; list-style-type: none; padding-left: 20px;} #sub-view.jobs-angebot #read ul li::before {content: "•"; display: inline-block; position: absolute; left: 0px; color: rgb(249,178,51);} /*#sub-view.jobs-angebot #read ul li::marker {color: rgb(249,178,51);}*/ #sub-view.jobs-angebot iframe {margin-bottom: 50px;} @media (min-width: 750px) { #sub-view.jobs-angebot iframe {min-height: 1200px;} } /*====================== STANDORTE =======================*/ div.links {margin-bottom: 20px;} .links a {display: block;} .links a:hover {color: rgb(135,122,116);} .links a::before {content: '\276D'; color: rgb(177,167,158); padding-right: 10px; transition: all 0.2s;} .links a:hover::before {margin-left: 5px;} .quicklink.standort h5 {font-size: 1.8rem; font-weight: 400; padding-bottom: 10px;} /*====================== TEAM =======================*/ img.team {margin-bottom: 20px;} #team h5, #team h6 {margin: 0;} /*====================== BIB =======================*/ .bib a img {border: 1px solid} .bib a img:hover{border-color: rgb(177,167,158);} /*====================== VIDEOS =======================*/ .videos a img {border: 1px solid; float: left; width: 50%; margin: 0 10px 20px 0;} .videos a img:hover{border-color: rgb(177,167,158);} /*====================== PRODUKTVERKAUF =======================*/ table#preise {width: 100%; font-size: 0.9em;} table#preise td, table#preise th {padding: 12px 8px;} table#preise td:first-child, table#preise th:first-child {padding-left:0;} table#preise .prod td {color: rgb(249,178,51); padding: 30px 0 10px 0;} /*====================== FOOTER =======================*/ footer {background-color: rgb(135,122,116); padding-top: 20px; font-size: 1.2em; color: #fff; text-align: center;} footer .logo img {margin: 20px 0; width: 80%;} footer .contacts {margin-bottom: 20px;} footer .contacts span {display: block; text-align: left; padding: 15px 0px 15px 22%; border-bottom: 1px solid #fff;} footer .contacts span:first-of-type {border-top: 1px solid #fff;} footer .contacts a {color: #fff; text-decoration: none; white-space: nowrap; transition: all 400ms ease;} footer .contacts a:hover {color: rgb(249,178,51);} footer .contacts .tel:before {content:url('../images/ico-tel.png'); position: absolute; margin-left: -35px;} footer .contacts .fax:before {content:url('../images/ico-fax.png'); position: absolute; margin-left: -35px;} footer .contacts .mail:before {content:url('../images/ico-mail.png'); position: absolute; margin-left: -35px;} footer #quicklinks, footer #spruch {padding-top: 25px; display: none;} footer #quicklinks h5 {font-weight:300; padding-bottom: 10px; border-bottom: 2px solid;} footer #quicklinks ul {display: block; margin: 0;} footer #quicklinks li {list-style-type: none; margin-bottom: 0px;} footer #quicklinks li a {color: #fff; text-decoration: none; transition: all 400ms ease;} footer #quicklinks li a:hover {color: rgb(249,178,51);} footer #quicklinks li:before {content: '+'; padding-right: 5px;} footer #spruch {font: 1.4em/30px 'Calligraffitti', cursive; max-width: 80%; } footer #spruch .sign {font-family: "Lato", sans-serif;} footer #spruch span {font-size: 0.8em; float: right; padding:10px 20px 0;} footer #spruch a {color: #fff; text-decoration: none; transition: all 500ms ease;} footer #spruch a:hover {color: rgb(249,178,51);} footer #downfoot {background-color: rgb(68, 61, 58); font-size: 0.9em; padding:10px 0; margin-top: 40px; color: rgb(190,190,190);} footer #downfoot a {text-decoration: none; color: rgb(190,190,190); transition: all 500ms ease;} footer #downfoot a:hover {color: #fff;} footer #downfoot .links-left span {padding: 0 4px;} footer #downfoot .land-salzburg {margin:10px 0;} footer #downfoot .tintifax {display: block;} footer .intranet {display: block; margin: 20px 0;} footer .intranet img {display: block; margin: 0 auto; width: 40px;} footer .intranet p {margin: 0; line-height: 1.1em;} footer #downfoot .copyright {font-size: 0.8em; padding:5px 0;} /*====================== lists =========================*/ ul.list, ul.list ul {list-style-type: none; font-size: 100%;} ul.list li:before {content: '.'; font-weight: 700; font-size: 1.6em; line-height: 10px; color: rgb(249,178,51); display: block; position: absolute; margin-left:-15px;} ul.list ul li:before{content: '-'; line-height: 20px; font-weight: 400; font-size: 1.4em;} ul.list li {padding-left:15px;} ul.list ul li {padding-left:5px;} /*================ Barrierefreie Funktionen ===================*/ #barrierfree-nav {position: fixed; right: 0; top: 165px; width: 50px; background: #FBD79E; z-index: 100; display: block;} #barrierfree-nav a {width: 40px; height: 40px; display: block; margin:5px; cursor: pointer;} #barrierfree-nav a span {width: 40px; height: 40px; display: block; border: 1px solid #FBD79E; background: url('../images/barrierfree-icons.png') no-repeat 0px 0px; background-color: rgb(249,178,51); transition: all 400ms ease;} #barrierfree-nav a.zoom .bigger {background-position: 0px -40px; position: absolute; right: 4px; z-index: 10;} #barrierfree-nav a.zoom .bigger:hover {background-color: rgb(135,122,116);} #barrierfree-nav a.zoom .smaller {background-position: -40px -40px;} #barrierfree-nav a.zoom .smaller:hover {background-color: rgb(177,167,158);} #barrierfree-nav a.ll span {background-position: 0px -80px;} #barrierfree-nav a.contrast span {background-position: 0px -120px;} #barrierfree-nav a:hover span {background-color: #FBD79E; border: 1px solid #fff;} .contrast-black {background-color: #000;} .contrast-black h3, .contrast-black h4, .contrast-black h5, .contrast-black h6, .contrast-black p, .contrast-black article a {color: #fff;} .contrast-black #content-top {background-color: #000;} .contrast-black #read {background-color: #000!important;} .contrast-black #bx-pager {background-color: #000;} .contrast-black .button-more {color: #000;} .contrast-black #media li a {background-color: #000!important;} .contrast-black .accordion {background-color: #000;} .contrast-black .accordionTitleActive, .contrast-black .accordionTitle.is-expanded {background-color: #000!important;} .contrast-black .accordion h5 {background-color: #000;} .contrast-black .accordionTitle {color: #000;} .contrast-black footer {background-color: #000;} #readspeaker_button {display: none;} /*====================== buttons =======================*/ /* Back to top button */ #back-top {position: absolute; z-index: 100; right: 0px; bottom: 255px; display: none;} /* arrow icon (span tag) */ #back-top span {width: 45px; height: 45px; display: block; margin-bottom: 7px; background: #fff url('../images/up-arrow.png') no-repeat top center; /* rounded corners */ -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; /* background color transition */ -webkit-transition: 0.5s; -moz-transition: 0.5s; transition: 0.5s; } #back-top a:hover span {background-color: rgb(249,178,51); background-position: bottom center;} .button-more {color: rgb(249,178,51); text-decoration: none; font-size: 0.9em; text-align: center; padding: 5px 0; width: 140px; background: #fff; display: inline-block; border: 1px solid #fff; transition: all 0.5s; } .button-more:hover, .button-more:active { color: rgb(249,178,51); background-color: rgb(249,178,51); border-color: #fff; } .button-more span { display: inline-block; position: relative; padding-right: 0; transition: padding-right 0.5s; } .button-more span:after { content: ' '; position: absolute; top: 50%; right: -35px; opacity: 0; width: 6px; height: 6px; margin-top: -4px; border: 3px solid rgb(249,178,51); border-left: none; border-bottom: none; transition: all 0.5s; transform: rotate(45deg); } .button-more:hover span, .button-more:active span { padding-right: 20px; color: #fff; } .button-more:hover span:after, .button-more:active span:after { transition: all 0.5s; opacity: 1; border-color: #fff; right: 0px; } /********************************************* * ROLLING QUICKLINKS *********************************************/ .quicklink {transition: all 400ms ease;} .quicklink:hover {background-color: rgba(249,178,51, 0.2); transition: all 800ms ease;} .quicklink a {text-decoration: none;} .roll { float: right; margin-top: -35px; display: inline-block; overflow: hidden; vertical-align: top; font-size: 3.5em; font-weight: 300; line-height: 0.8em; background-color: rgb(249,178,51); font-family: "Times New Roman", Georgia, Serif; -webkit-perspective: 300px; -moz-perspective: 300px; -ms-perspective: 300px; perspective: 300px; -webkit-perspective-origin: 50% 50%; -moz-perspective-origin: 50% 50%; -ms-perspective-origin: 50% 50%; perspective-origin: 50% 50%; } .quicklink:hover > .roll { border-radius: 2px; text-shadow: none; } .roll span { display: block; position: relative; padding: 0 8px; pointer-events: none; color: #fff; border-bottom: 1px solid #fff; -webkit-transition: all 600ms ease; -moz-transition: all 400ms ease; -ms-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .quicklink:hover .roll span { background: rgba(135,122,116,.9); -webkit-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg ); -moz-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg ); -ms-transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg ); transform: translate3d( 0px, 0px, -55px ) rotateX( 90deg ); } .roll span:after { content: attr(data-title); display: block; position: absolute; left: 0; top: 3px; padding: 1px 8px; white-space: nowrap; color: white; background: rgb(135,122,116); -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%; -ms-transform-origin: 50% 0%; transform-origin: 50% 0%; -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg ); } /* no 3d transform fix */ .no-csstransforms3d .roll span:after { display:none; } .no-csstransforms3d .quicklink:hover .roll span { color:rgb(249,178,51); background:rgb(177,167,158); } .no-csstransforms3d .quicklink:hover .roll span { -webkit-transform:none; -moz-transform:none; -o-transform:none; transform: none } /* ie10 fix */ .no-cssreflections .roll span:after { display:none; } .no-cssreflections .quicklink:hover .roll span { color:#fff; background:rgb(177,167,158); } .no-cssreflections .quicklink:hover .roll span { -webkit-transform:none; -moz-transform:none; -o-transform:none; transform: none } /********************************************* * COUCHCMS CKE-Editor *********************************************/ .cke_editable h5 {font-size: 1rem;} .cke_editable a {color:rgb(249,178,51);} /* Media Queries –––––––––––––––––––––––––––––––––––––––––––––––––– */ /* Note: The best way to structure the use of media queries is to create the queries near the relevant code. For example, if you wanted to change the styles for buttons on small devices, paste the mobile query code up in the buttons section and style it there. */ /* Larger than mobile */ @media (min-width: 400px) {} /* Larger than phablet (also point when grid becomes active) */ @media (min-width: 550px) {} /* Larger than tablet */ @media (min-width: 750px) { .container {width: 750px;} .row.flex {display: block;} #head {padding-top: 10px;} #head .logo img {margin: 30px auto 0; width: 100%;} #social-icons a {display: block; margin: 3px 0;} #index #efb {float: right;} #index #shop {float: right;} #sub-view #content-top div.img{height: 350px;} article .content{padding: 0;} article#page-list { position: relative; margin-top: -300px; padding-top: 20px; background-color: #fff; } #content-top .three.columns {display: none;} #content-top .nine.columns {width: 100%; margin-left: 0;} .nine.columns.content {width: 100%;} #index .quicklink {max-width: 100%!important; margin: 0 0 20px 0;} /*#standorte.quicklink {display:block; margin: 0; font-size: 0.95em; line-height: 1.4em;}*/ /*#jobangebote a {position:absolute; right: 0; margin-top: -25px;}*/ .quicklink {float:left; width: 100%; margin: 0 0 0 4%;} .quicklink h5 {font-size: 1.4rem;} .quicklink p {font-size: 0.85em;} .roll {margin-top: -25px; font-size: 2.5em;} footer {text-align: left; font-size: 0.9em;} footer .logo img {width: 80%; margin-bottom: 15px;} footer .contacts {margin: 0;} footer .contacts span {margin-left: 0; border: none; padding: 5px 0px 5px 5px;} footer .contacts span:first-of-type {border:none;} footer .contacts :before {display: none;} footer #quicklinks, footer #spruch {display: block;} footer #quicklinks {padding-top: 20px;} footer #quicklinks h5 {max-width: 75%;} footer #quicklinks ul {margin-right: 0px; display: inline-block;} footer #spruch {max-width: 100%; font-size: 1.2em; line-height: 1.6em;} footer #downfoot {font-size: inherit;} footer #downfoot .links-left a:first-child {padding-left:5px;} footer #downfoot .land-salzburg {bottom: 40px; right: 15px; position: absolute;} footer #downfoot .tintifax {float: right; margin-right: 15px;} footer .intranet {display: inline-block; position: relative; padding-left: 30px; margin: 0;} footer .intranet img {position: absolute; margin-left: -30px; margin-top: -7px; width: inherit;} footer .intranet span {display: none;} /*footer .intranet {display: block; margin: 20px 0;} footer .intranet img {display: block; margin: 0 auto;}*/ footer #downfoot .copyright {font-size: inherit; padding:5px 0;} /*===== SUB-VIEWS =====*/ #sub-view article {width: 100%;} #sub-view .quicklink {margin: 0 0 20px 0;} #galerie a {width: 32%;} /*====================== PRODUKTVERKAUF =======================*/ table#preise {width: 70%; font-size: 1em;} table#preise td, table#preise th {padding: 12px 15px;} } /* Larger than desktop */ @media (min-width: 1000px) { .container {width: 1000px;} #sub-view article #read {max-width: 84%; padding: 5% 8% 0; margin-top: -320px; background: #fff;} #sub-view #content-top {min-height: 330px;} #head .logo img {margin-top: 18px; width: 100%;} #index #content-top .ten.columns {width: 82.6666666667%;} #index #content-top .two.columns {display: block;} /*#content-top .container {background: url('../images/bg-content-top.png') no-repeat 0 0;} herz im hintergrund*/ #content-top .three.columns {display: block;} #content-top .nine.columns {width: 74%; margin-left: 4%;} .nine.columns.content {width: 74%;} #media {display: block;} #media li a {display: block; background-position: 10% center;} .quicklink h5 {font-size: 1.6rem;} .quicklink p {font-size: 0.9em;} .roll {margin-top: -35px; font-size: 3.5em;} footer .contacts span {padding-left: 45px;} footer .contacts :before{display: block;} footer #quicklinks h5 {max-width: 95%;} footer #quicklinks ul {margin-right: 10px;} footer #quicklinks {padding-top: 25px;} footer #spruch {padding-top: 35px;} footer #spruch {font-size: 1.4em; line-height: 30px;} #back-top {bottom: 175px;} } /* Larger than Desktop HD */ @media (min-width: 1200px) { br.rwd-break {display: block;} .container {width: 1200px;} #head .logo img {margin:10px 0 0; width: 90%;} #index #media {width: 60%; float: right;} #index #efb {width: 60%;} #index #shop {width: 60%;} .quicklink h5 {font-size: 2.2rem; font-weight: 300;} .quicklink p {font-size: 1em;} footer #quicklinks {padding-top: 30px;} footer #spruch {padding-top: 35px;} footer #quicklinks h5 {max-width: 85%;} footer #quicklinks ul {margin-right: 30px;} #back-top {bottom: 180px;} #barrierfree-nav { top: 195px; } } @media (max-width: 1300px) and (min-width: 1200px) { /* #barrierfree-nav { display: none; }*/ #barrierfree-nav {position: absolute; margin-top: 0px;} #index #barrierfree-nav {position: absolute; margin-top: 320px;} #index ul#media {display: none;} } @media (max-width: 1050px) and (min-width: 999px) { /*#barrierfree-nav { display: none; }*/ #barrierfree-nav {position: absolute; margin-top: 0px;} #index #barrierfree-nav {position: absolute; margin-top: 300px;} #index ul#media {display: none;} } @media (max-width: 960px){ #barrierfree-nav { display: none; } }