/* fonts: self-hosted Montserrat (woff2 zmienny 400-800), preload w , brak zaleznosci od Google Fonts */ @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/montserrat-latinext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/montserrat-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} /* default */ *{margin:0;padding:0;border:0} body{font-family:'Montserrat', sans-serif;font-size:15px;font-weight:400;color:#666} a{outline:none;color:#666;text-decoration:none} a.white-link { color: white !important; } /* container */ div#container{position:relative} /* top */ div#top{overflow:hidden;height:40px;background-color:#eee} div#top ul{list-style:none;text-align:right} div#top ul li{position:relative;display:inline-block;height:40px;line-height:40px;font-weight:400;font-size:14px} div#top ul li +li{margin-left:50px} div#top ul li:before{content:'';position:absolute;top:10px;left:-30px;width:20px;height:20px} div#top ul li.phone:before{background:url(../images/icon-call.png)} div#top ul li.marker:before{background:url(../images/icon-marker.png)} div#top ul li.marker .road{display:none} /* header */ div#header{width:100%;height:150px;z-index:500} div#header a#logo{position:absolute;z-index:200;left:100px;top:50px;width:150px;height:50px;background:url(../images/header-logo.png?v2) center center} div#header div#main{display:none} div#header div#menu{position:absolute;top:50px;left:325px;z-index:500} div#header div#menu ul{list-style:none} div#header div#menu ul li{position:relative;display:inline-block} div#header div#menu ul li +li{margin-left:20px} div#header div#menu ul li span, div#header div#menu ul li a{position:relative;display:block;height:50px;line-height:50px;color:#000;font-weight:700;font-size:14px;text-transform:uppercase;transition:all 0.5s ease} div#header div#menu ul li a:hover, div#header div#menu ul li a.active{color:#c20833} div#header div#menu ul li a.active:before{content:'';position:absolute;top:50px;left:calc(50% - 3px);width:7px;height:4px;background-image:url(../images/menu-arrow.png)} div#header div#menu ul ul{position:absolute;display:none;top:50px;padding:10px 20px;width:180px;background-color:rgba(255,255,255,1);list-style:none;border:1px solid #eee;box-shadow:0 0 5px rgba(0,0,0,.1)} div#header div#menu ul ul li{margin-left:0 !important} div#header div#menu ul ul li +li{border-top:1px solid #eee} div#header div#menu ul ul li a{display:block;padding:10px 0;width:160px;min-height:20px;height:auto;line-height:20px;font-size:12px;background-color:#fff;color:#000} div#header div#menu ul ul li a:hover, div#header div#menu ul ul li a.active {color: rgb(225,165,90);} div#header div#menu ul ul ul{left:200px;top:0} div#header div#socialmedia{position:absolute;top:65px;right:0px;z-index:500} div#header div#socialmedia ul{list-style:none} div#header div#socialmedia ul li{position:relative;display:inline-block} div#header div#socialmedia ul li +li{margin-left:20px} div#header div#socialmedia ul li a{position:relative;display:block;height:16px;line-height:16px;transition:all 0.5s ease} div#header div#socialmedia ul li a:hover{opacity:.5} div#header div#socialmedia ul li a img{width:16px} /* slider */ div#slider{position:relative;z-index:50;margin-left:calc(50% - 550px);width:calc(50% + 550px)} div#slider:before{content:'';position:absolute;top:-20px;left:100px;width:450px;height:20px;background-color:rgba(182,12,49,.8);} div#slider ul.slider{height:500px} div#slider > ul.slider li:not(:first-child){display:none} /* pre-JS: tylko 1 slajd widoczny; bxslider owija ul w .bx-viewport i przejmuje - zapobiega CLS/blyskowi stosu przy defer */ div#slider ul.slider li{position:relative;height:500px} div#slider ul.slider li img{position:absolute;top:50%;z-index:100;width:100%;transform: translateY(-50%)} div#slider ul.slider li .description{position:absolute;z-index:9000;top:-10px;left:100px;padding:75px;width:300px;height:300px;background-color:rgba(182,12,49,.8);text-transform:uppercase} div#slider ul.slider li .description .header{color:#fff;font-weight:800} div#slider ul.slider li .description .header span{font-size:60px;display:block;text-align:left;line-height:50px;letter-spacing:-2px} div#slider ul.slider li .description .text{margin-top:50px;font-size:14px;color:#fff;font-weight:800} /* script */ .bx-wrapper .bx-pager{bottom:50px;z-index:2000} .bx-wrapper .bx-pager .bx-default-pager a {color: #fff;background-color: #000;} .bx-wrapper .bx-prev, .bx-wrapper .bx-next{background-image:url(../images/slider-controls.png)} .bx-wrapper .bx-prev{left:calc(50% + 130px);background-position:0 0} .bx-wrapper .bx-next{left:calc(50% + 180px);background-position:-50px 0} .bx-wrapper .bx-prev:hover{background-position:0 0} .bx-wrapper .bx-next:hover{background-position:-50px} .bx-wrapper .bx-controls-direction a{top:calc(100% - 50px);margin-top:0;width:50px;height:50px;background-color:#fff} /* photo */ div#photo{position:relative;z-index:50;width:100%;height:450px;background-repeat:no-repeat;background-position:center center;background-size:cover;background-image:url(../images/photo-bg.png)} /* breadcrumbs */ div#breadcrumbs{position:relative;z-index:100} div#breadcrumbs ul{margin:0 auto;max-width:1200px;list-style:none} div#breadcrumbs ul li{display:inline-block;position:relative;margin-left:30px;font-size:12px;color:#aaa} div#breadcrumbs ul li a:hover{border-bottom:1px solid #ccc;color:#ccc} div#breadcrumbs ul li +li:before{content:'❯';position:absolute;left:-30px;width:30px;text-align:center} div#breadcrumbs .inner{height:50px;line-height:50px} /* content */ div#content{position:relative;padding:50px 0} div#content p +p{margin-top:20px} div#content ul.album{overflow:hidden;margin:0;margin-top:50px;list-style:none} div#content ul.album li{float:left;margin:5px;width:calc(25% - 10px)} div#content ul.album li a img{display:block;width:100%} /*div#content table{margin-top:10px;margin-bottom:10px;width:100%;border-collapse:separate;border-spacing:0} div#content table th{padding:10px;background-color:#eee;color:#000;font-weight:700} div#content table td{padding:10px;border-bottom:1px solid #eee;text-align:center}*/ div#content table {border-collapse: collapse;width: 100%;margin: 0 auto;} div#content th {padding: 8px;text-align: left;border: none;} div#content td {padding: 8px;text-align: left;border: none;} div#content table.price{margin:0 auto;margin-top:50px;width:70%} div#content table.price td span{display:block;color:#999} div#content label.error{position:absolute;top:0;right:0;display:block;width:300px;height:29px;line-height:29px;border-bottom:1px solid #ee0000;color:#ee0000} div#content input[type=text], div#content input[type=file], div#content input[type=password], div#content select, div#content textarea{padding:0 5px;width:calc(100% - 10px);height:30px;line-height:30px;border-bottom:1px solid #ccc;background-color:#fff;font-family:'Lato';font-size:14px} div#content textarea{height:240px} div#content input[type=submit]{cursor:pointer;font-family:'Lato';font-size:14px;background-color:transparent} div#content .about{margin-top:-50px;margin-bottom:50px;} div#content .about .description{position:relative;padding:75px 250px 75px 100px;width:calc(80% - 350px);background-color:#eee;font-size:13px} div#content .about .description b{display:block;margin-bottom:20px} div#content .about .description .button{position:absolute;top:50%;right:-100px} div#content .offer{margin-top:100px} div#content .offer ul{list-style:none} div#content .offer ul li{position:relative;float:left;width:20%;padding-top:20%} div#content .offer ul li a{position:absolute;top:0;left:0;display:block;width:100%;height:100%} div#content .offer ul li a img{position:absolute;top:50%;left:50%;margin-top:-30px;margin-left:-30px;width:60px} div#content .offer ul li a span{position:absolute;bottom:50px;width:100%;height:20px;line-height:20px;color:#fff;font-weight:700;text-transform:uppercase;text-align:center} div#content .offer ul li:nth-child(1){background-color:rgba(0,0,0,1)} div#content .offer ul li:nth-child(2){background-color:rgba(0,0,0,.90)} div#content .offer ul li:nth-child(3){background-color:rgba(0,0,0,.85)} div#content .offer ul li:nth-child(4){background-color:rgba(0,0,0,.80)} div#content .offer ul li:nth-child(5){background-color:rgba(0,0,0,.75)} div#content .work{margin-top:100px} div#content .work ul{list-style:none} div#content .work ul li{overflow:hidden;position:relative;float:left;margin:5px;width:calc(20% - 10px);padding-top:40%} div#content .work ul li span{position:absolute;top:20px;z-index:110;font-weight:700;text-transform:uppercase} div#content .work ul li.image img{position:absolute;top:0;left:0} div#content .work ul li.image span{left:20px;bottom:20px;color:#fff} div#content .work ul li.image .mask{position:absolute;top:0;left:0;z-index:100;width:100%;height:0;transition:all 0.5s ease} div#content .work ul li.image:hover .mask{height:300px;background-color:#c20833} div#content .work ul li:first-child span{color:#c20833} div#content .work ul li:last-child{position:absolute;left:80%;top:0;width:calc(20% + 300px)} div#content div.news.home{overflow:hidden} div#content div.news.home .image{float:left;width:50%} div#content div.news.home .header{padding-top:100px} div#content div.news.home p{margin-bottom:50px} div#content div.map{position:relative;overflow:hidden;margin:50px 0;height:700px} div#content div.list.inline{float:left;margin:10px;width:calc(25% - 20px)} div#content div.list:first-child(1){clear:left;background-color:#fff000} div#content div.list.inline .image{margin-bottom:20px} div#content div.list.inline .image img{display:block;width:100%} div#content div.list.inline .header{display:block;font-size:20px;line-height:18px;text-align:center} div#content div.list.inline .button{margin:0 auto} div#content div.list.block{overflow:hidden;margin:0 auto;width:1000px;clear:left} div#content div.list.block +.block{margin-top:50px} div#content div.list.block .image{float:left;width:500px} div#content div.list.block .image img{width:100%} div#content div.list.block .description{float:left;padding:50px;width:400px} div#content div.list.alternately:nth-child(2n) .image{float:right} div#content div.list .header{margin-bottom:20px} div#content div.list p{margin-bottom:20px;color:#767676} div#content div.date{margin-bottom:20px;font-weight:400;color:#d41f3e} div#content div.form{margin:0 auto;margin-bottom:100px;width:600px;padding:50px;border:2px solid #eee} div#content div.form dl +dl{margin-top:20px} div#content div.form dl dt{float:left;font-weight:700} div#content div.form dl dd{margin-left:150px;position:relative} div#content div.form dl dd div input[type=text]{margin-bottom:10px} div#content div.form h3{margin-top:50px;margin-bottom:20px;padding:5px;background-color:#f5f5f5;border-bottom:1px solid #e5e5e5;color:#999;font-weight:400} div#content div.form p{text-align:center;margin-bottom:50px;color:#000} div#content div.form div.rule{margin:20px 0;padding:20px;border:1px solid #eee;background-color:#fff} div#content div.form div.rule ol{padding-left:20px;} div#content div.form div.buttons{margin-top:20px} div#content div.form .button{margin-top:20px} div#content div.news .inner{width:900px} div#content div.news .item{float:left;width:400px} div#content div.news .item +.item{margin-left:100px} div#content div.news .item h2{margin-bottom:20px;height:60px;line-height:30px;font-weight:900} div#content div.news .item h2 a{color:#052d87} div#content div.news .item p{margin-bottom:50px} div#content div.news .item p{margin-bottom:50px} div#content div.news .title{display:block;margin-bottom:20px;color:#b60c31;font-size:20px;font-weight:700} div#content div.item{position:relative;margin:0 auto;padding:50px 0;width:800px;font-size:14px;text-align:justify} div#content h1, div#content h2, div#content h3 {text-align: left;} div#content div.item h1{margin-bottom:30px;color:#000;letter-spacing:-2px} div#content div.item h2{margin-top:50px;margin-bottom:20px;color:#c20833} div#content div.item h3{margin-top:20px;margin-bottom:10px;color:#000} div#content div.item ul, div#content div.item ol{margin-left:20px;margin-bottom:20px} div#content div.item hr{margin-top:50px;border-top:2px solid #eee} div#content div.item .photo{margin:0 auto;margin-bottom:50px;max-width:800px} div#content div.item .photo img{display:block;width:100%} div#content div.item .price{position:absolute;top:0;right:0;width:200px;height:40px;line-height:40px;;background-color:#ff0000;color:#fff;text-align:center;text-transform:uppercase} div#content div.item .price b{margin-left:10px;font-size:20px} div#content div.item .producer{position:absolute;top:-130px;right:0;padding:25px;width:150px;height:80px;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.2)} div#content div.item .producer img{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% - 50px)} div#content div.item .menu{float:right;margin:-50px -50px 50px 50px;padding:20px 30px;width:200px;border:2px solid #eee} div#content div.item .menu ul{margin:0;list-style:none} div#content div.item .menu ul li{display:block} div#content div.item .menu ul li +li{border-top:1px solid #eee} div#content div.item .menu ul li a{position:relative;display:block;padding:10px 0;font-weight:700;text-align:left;transition:all 0.5s ease;} div#content div.item .menu ul li a:hover, div#content div.item .menu ul li a.active{color:#c20833} div#content div.item .menu ul li a:hover:before, div#content div.item .menu ul li a.active:before{content:'';position:absolute;top:0;left:-32px;height:100%;width:2px;background-color:#c20833} /*brands*/ div#brands{position:relative;z-index:150;padding:30px 0} div#brands ul{list-style:none} div#brands ul li{position:relative;height:70px} div#brands ul li img{display:block;margin:0 auto;max-width:150px;max-height:70px} /* rewievs by sebowsky 09-2024 */ div#reviews { margin: 50px auto; /* Odsunięcie od góry i dołu oraz wycentrowanie */ padding: 50px 0; /* Odstęp wewnętrzny góra-dół */ background-color: #fff; /* Kolor tła */ text-align: left; /* Wyrównanie tekstu do lewej */ } div#reviews .inner { margin: 0 auto; /* Wycentrowanie elementów wewnątrz */ max-width: 1100px; /* Ograniczenie maksymalnej szerokości kontenera */ padding-left: 30px; /* Odstęp z lewej */ padding-right: 30px; /* Odstęp z prawej strony */ box-sizing: border-box; /* Upewniamy się, że padding nie wykracza poza kontener */ } /* realization */ div#realization{margin:50px 0 100px 0;overflow:hidden} div#realization ul{list-style:none} div#realization ul li{position:relative;float:left;margin-left:1px;width:calc(16.666666% - 1px);padding-top:16.666666%;background-size:cover;background-position:center center;background-color:#eee} div#realization ul li:nth-child(2){background-color:#b60c31;color:#fff} div#realization ul li:nth-child(2) div{position:absolute;bottom:30px;left:30px;margin:0;font-size:20px;color:#fff} /* footer */ div#footer{position:relative;z-index:150;padding:100px 0;background-color:#000000;color:#999} div#footer .col{float:left;width:28%} div#footer .col:first-child{width:16%} div#footer .col.call b{position:relative;display:block;font-size:25px;color:#fff} div#footer .col.call b:before{content:'';position:absolute;top:5px;left:-30px;width:20px;height:20px;background:url(../images/icon-call.png)} div#footer .copyright{padding-top:50px;margin-top:50px;border-top:1px solid rgba(255,255,255,.2)} div#footer .copyright, div#footer .copyright a{color:#999} /* privacy */ /* PRIVACY POPUP BASE STYLES */ div#privacy { position: fixed; bottom: 1rem; /* mniejszy odstęp od dołu */ right: 1rem; /* mniejszy odstęp od prawej */ z-index: 1000; max-width: 90vw; /* kluczowe: niech szerokość nie przekracza 90% ekranu */ padding: 1rem; /* zmniejszone paddingi dla małych ekranów */ background-color: rgba(0, 0, 0, .8); color: #fff; box-sizing: border-box; /* by padding nie zwiększał całkowitej szerokości */ } div#privacy p { line-height: 1.4; /* lub 1.5, żeby tekst był bardziej czytelny */ margin: 0 0 1rem; /* odstępy między akapitami */ } div#privacy p a { color: #fff; border-bottom: 1px dotted #fff; text-decoration: none; } div#privacy p a:hover { color: #fff; } div#privacy .close { display: block; position: absolute; top: .5rem; right: .5rem; width: 20px; height: 20px; background: url(../images/privacy-close.png) no-repeat center center; } /* OPCJONALNIE – MEDIA QUERIES dla jeszcze lepszej kontroli */ @media (max-width: 480px) { div#privacy { bottom: 0.5rem; right: 0.5rem; max-width: 95vw; /* dodatkowo można „poluzować” */ padding: 0.5rem; } div#privacy .close { top: 0.25rem; right: 0.25rem; } } /* other */ .more{display:inline-block;position:relative;padding-right:20px;height:40px;line-height:40px;color:#b60c31;font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;text-decoration:none} .more.line:after{content:'';position:absolute;top:18px;margin-left:20px;width:50px;height:2px;background-color:#b60c31;transition:all 0.5s ease} .more.line:hover:after{margin-left:40px} .button{display:block;width:200px;height:30px;line-height:30px;background-color:#b60c31;color:#fff;font-size:12px;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:2px;transition:all 0.5s ease} .button-a{display:block;width:300;height:30px;line-height:30px;background-color:#b60c31;color:#fff;font-size:12px;font-weight:700;text-align:center;text-transform:uppercase;letter-spacing:2px;transition:all 0.5s ease} .break{float:none;clear:left} .break.border{border-bottom:1px solid #ccc} .mt50{margin-top:50px} .mb50{margin-bottom:50px} .center{text-align:center} .right{text-align:right} .justify{text-align:justify} .header{margin-bottom:50px;font-size:30px;font-weight:400;line-height:30px;color:#b60c31;text-transform:uppercase} .header span{display:block;font-size:.4em;letter-spacing:5px} .header big{display:block;font-size:1.5em;font-weight:700;letter-spacing:-1px;} .section{position:relative;margin-bottom:25px;font-size:20px;font-weight:700i;font-family:'Exo 2', sans-serif;color:#000;text-transform:uppercase;text-align:left;text-indent:50px} .section:before{content:'';position:absolute;top:0;left:10px;width:30px;height:30px;background-color:#979a53} .inner{position:relative;margin:0 auto;max-width:1100px;width:100%} /* max-width: 1000px */ @media screen and (max-width: 1000px) { div#top ul{list-style:none;text-align:center} div#top ul li.phone:nth-child(2){display:none} div#top ul li.marker .road{display:block} div#top ul li.marker .address{display:none} div#header{height:100px} div#header a#logo{left:50px;top:25px} div#header div#main{display:block;position:absolute;top:44px;right:50px} div#header div#main span{display:block;width:25px;height:1px;background-color:#999} div#header div#main span +span{margin-top:3px} div#header div#main:hover span{background-color:#000} div#header div#menu{display:none;position:absolute;left:0;top:100px;height:auto;z-index:500} div#header div#menu ul{width:100%} div#header div#menu ul li{display:block;text-align:left} div#header div#menu ul li +li{margin-left:0} div#header div#menu ul li a{display:block;height:auto;line-height:40px;text-indent:20px;background-color:#000;color:#fff} div#header div#menu ul ul{position:relative;top:0;left:0;margin-left:0;width:calc(100% - 42px);display:block} div#header div#menu ul ul li{margin-left:0 !important} div#header div#menu ul ul li +li{border-top:1px solid #eee} div#header div#menu ul ul li a{display:block;width:100%;height:20px;line-height:20px;color:#000;text-indent:0} div#header div#menu ul ul li a:hover, div#header div#menu ul ul li a.active{color:#ee0000} div#header div#menu ul ul ul{left:0} div#header div#socialmedia{top:45px;right:100px} div#header div#socialmedia ul li +li{margin-left:10px} div#slider{margin-left:0;width:100%} div#slider:before{top:-10px;left:50px;width:calc(100% - 50px);height:10px} div#slider ul.slider{height:350px} div#slider ul.slider li{height:350px} div#slider ul.slider li img{top:0;left:50%;width:auto;height:100%;transform:translateX(-50%)} div#slider ul.slider li .description{left:50px;padding:25px;width:calc(100% - 100px);height:150px} div#slider ul.slider li .description .header span{font-size:30px;line-height:25px} div#slider ul.slider li .description .text{font-size:14px} .bx-wrapper .bx-prev, .bx-wrapper .bx-next{display:none} div#photo{height:300px} div#content .work{display:none} div#content .about .description{padding:40px;width:calc(100% - 80px)} div#content .about .description .button{position:relative;top:20px;left:0} div#content .offer{margin-top:50px} div#content .offer ul li{float:none;width:100%;padding-top:0;height:100px} div#content .offer ul li a{position:absolute;top:0;left:0;display:block;width:100%;height:100%} div#content .offer ul li a img{top:50%;left:50px;margin-top:-30px;margin-left:0} div#content .offer ul li a span{left:150px;top:calc(50% - 10px);width:calc(100% - 150px);text-align:left} div#content div.news.home .image{float:none;width:100%} div#content div.news.home .image img{width:100%} div#content div.news.home .description{padding:25px} div#content div.news.home .description .header{padding-top:0} div#content div.news .inner{width:100%} div#content div.news .item{float:none;width:100%} div#content div.news .item +.item{margin-left:0;margin-top:50px} div#content div.news .item h2{height:auto} div#content div.news .title{display:block;margin-bottom:20px;color:#b60c31;font-size:20px;font-weight:700} div#content div.list.block{width:100%} div#content div.list.block +.block{margin-top:50px} div#content div.list.block .image{float:none;width:100%} div#content div.list.block .image img{width:100%} div#content div.list.block .description{float:none;padding:20px;width:calc(100% - 40px)} div#content div.photo{height:300px} div#content div.item{padding:50px 20px;width:calc(100% - 40px)} div#content div.item h1{margin-bottom:30px;color:#000} div#content div.item h2{margin-top:50px;margin-bottom:20px;color:#c20833} div#content div.item h3{margin-top:20px;margin-bottom:10px;color:#000} div#content div.item ul, div#content div.item ol{margin-left:20px;margin-bottom:20px} div#content div.item hr{margin-top:50px;border-top:2px solid #eee} div#content div.item .price{position:absolute;top:0;right:0;width:200px;height:40px;line-height:40px;;background-color:#ff0000;color:#fff;text-align:center;text-transform:uppercase} div#content div.item .price b{margin-left:10px;font-size:20px} div#content div.item .producer{position:absolute;top:-130px;right:0;padding:25px;width:150px;height:80px;background-color:#fff;box-shadow:0 0 20px rgba(0,0,0,.2)} div#content div.item .producer img{position:absolute;top:50%;transform:translateY(-50%);width:calc(100% - 50px)} div#content div.item .menu{display:none} div#realization ul li{float:left;margin-left:1px;margin-top:1px;width:calc(50% - 1px);padding-top:50%} div#footer{padding:50px 0} div#footer .col{float:none;margin-top:50px;padding:0 50px;width:calc(100% - 100px)} div#footer .col:first-child{margin:0;width:calc(100% - 100px)} div#footer .copyright{padding:50px} div#footer .copyright, div#footer .copyright a{color:#999} } /* max-width: 600px */ @media screen and (max-width: 600px) { div#content div.list.inline { width: calc(50% - 20px); } div#content table, div#content tbody, div#content tr, div#content th, div#content td { display: block; width: 100%; } div#content tr { margin-bottom: 1em; border-bottom: 0; } div#content td { border: none; } } /* max-width: 400px */ @media screen and (max-width: 400px) { div#header div#socialmedia { display: none; } div#realization ul li { margin-left: 0; width: 100%; padding-top: 100%; } div#content div.list.inline { width: calc(100% - 20px); } div#content table, div#content tbody, div#content tr, div#content th, div#content td { display: block; width: 100%; } div#content tr { margin-bottom: 1em; border-bottom: 0; } div#content td { border: none; } }