@import"https://fonts.googleapis.com/css2?family=Lato&family=Rajdhani:wght@400;600;700&display=swap";
.fc-r{
color:#ff3539
}
.fc-r-d{
color:#cc0008
}
.section-shadow{
position:relative;
z-index:10;
box-shadow:0 0 10px 2px #000
}
.element-shadow,main.blog-page>.con img,#gallery>.con .photo-box img,.main #about>.con .staff>div .staff-photos div img,.nav-button span{
box-shadow:0 0 4px #000
}
h3,.h3,main.price>.con>section table tr td,main.price>.con>section table tr th{
font-size:clamp(20px,2dvw,29px);
font-weight:700;
letter-spacing:.64px;
text-transform:uppercase;
font-family:Rajdhani,sans-serif
}
td {
background-color: #D3D3D3;
}
h3,.h3,.neutral-case,main.price>.con>section table tr td,main.price>.con>section table tr th.neutral-case{
text-transform:unset!important;
letter-spacing:unset!important
}
h2,.main.blog>h1,.main.blog-page>h1{
font-size:clamp(31px,3.4dvw,53px);
font-weight:700;
letter-spacing:-.48px;
text-transform:uppercase;
font-family:Rajdhani,sans-serif!important
}
h1{
font-size:clamp(33px,4.8dvw,71px);
font-weight:700;
line-height:clamp(36px,5dvw,64px);
letter-spacing:-.48px;
text-transform:uppercase;
font-family:Rajdhani,sans-serif!important
}
a{
color:#fff;
text-decoration:none
}
hr{
margin-bottom:10px
}
p{
font-size:clamp(18px,1.5dvw,20px);
line-height:clamp(20px,2.5dvw,24px);
font-family:Lato,sans-serif;
letter-spacing:.22px;
margin:20px 0
}
gap30{
margin:30px 0
}
gap60{
margin:60px 0
}
.nav-button{
display:none;
justify-content:center;
align-items:center;
position:fixed;
top:0;
right:0;
z-index:666666;
aspect-ratio:1/1;
margin:10px;
width:40px
}
.nav-button span{
position:absolute;
background-color:#fff;
width:23px;
height:3px;
border-radius:3px;
transition:transform .2s,width .2s
}
.nav-button span:nth-of-type(1){
transform:translateY(-8px)
}
.nav-button span:nth-of-type(2){
transform:translateY(0)
}
.nav-button span:nth-of-type(3){
transform:translateY(8px)
}
.nav-button.active span:nth-of-type(1){
width:0;
transform:unset
}
.nav-button.active span:nth-of-type(2){
transform:rotate(45deg)
}
.nav-button.active span:nth-of-type(3){
transform:rotate(-45deg)
}
.nav{
display:grid;
grid-template-columns:1fr [content-start] 1fr [content-end] 1fr;
position:fixed;
top:0;
right:0;
z-index:555555;
height:120px;
width:100dvw;
font-family:Rajdhani,sans-serif;
font-weight:700;
text-transform:uppercase
}
.nav .con{
grid-column:content;
display:grid;
grid-template-columns:5fr 1fr;
grid-template-rows:120px;
gap:clamp(0px,1dvw,40px);
height:100%;
width:clamp(350px,90dvw,1200px)
}
.nav .con .menu-block{
display:grid;
grid-template-columns:auto 1fr;
grid-template-rows:1fr;
height:100%;
padding:0 40px 0 10px;
background-color:#1a1a1a
}
.nav .con .menu-block .image{
display:flex;
justify-content:center;
align-items:center;
height:100%;
aspect-ratio:1/1
}
.nav .con .menu-block .image img{
height:110px
}
.nav .con .menu-block ul{
display:flex;
flex-flow:row nowrap;
justify-content:end;
align-items:center;
gap:clamp(10px,3dvw,40px);
list-style:none
}
.nav .con .menu-block ul li{
height:100%;
font-size:clamp(16px,1.7dvw,18px);
}
.nav .con .menu-block ul li a{
display:flex;
justify-content:center;
align-items:center;
height:100%;
transition:color .2s
}
.nav .con .menu-block ul li a:hover{
color:#ff3539
}
.nav .con .phone-block{
display:flex;
justify-content:center;
align-items:center;
background-color:#ff3539
}
.nav .con .phone-block>a{
display:grid;
grid-template-columns:auto auto;
column-gap:clamp(5px,.5dvw,10px);
color:#0b090a
}
.nav .con .phone-block>a i{
aspect-ratio:1/1;
font-size:clamp(11px,1.5dvw,20px);
}
.nav .con .phone-block>a .title{
font-size:clamp(11px,1.3dvw,16px);
letter-spacing:-.28px
}
.nav .con .phone-block>a .phone-number{
grid-column:2/3;
font-size:clamp(18px,2.3dvw,27px);
letter-spacing:-.64px
}
@media screen and (max-width: 800px){
.nav-button{
display:flex
}
.nav{ right: -100%;
display:flex;
justify-content:center;
align-items:center; width: 100%;
height:100dvh;
transition:right .2s
}
.nav .con{
margin-top: 0px;
display:flex;
justify-content:center;
align-items:center;
width:220px;
height:100dvh
}
.nav .con .menu-block{
display:flex;
position:absolute;
right:0; width: 100%; padding: 60px 15px 0 0;
overflow-y: scroll;
}
.nav .con .menu-block ul{
width:100%;
height:100%;
flex-flow:nowrap column;
gap:10px;
justify-content:center;
align-items:end
}
.nav .con .menu-block ul li{ font-size:1.3rem
}
.nav .con .menu-block .image,.nav .con .phone-block{
display:none
}
.nav.active{
right:0
}
}
.main {
width: 100dvw;
flex: 1;  }
.main.blog-page,.main.price{
display:flex;
flex-flow:column nowrap;
justify-content:stretch;
align-items:center
}
.main.blog a,.main.blog-page a,.main.price a{
color:white!important
}
.main.blog>h1:first-of-type,.main.blog>h2:first-of-type,.main.blog-page>h1:first-of-type,.main.blog-page>h2:first-of-type,.main.price>h2:first-of-type{
color:#fff;
width:100%;
display:block;
padding:160px 0 20px;
text-align:center;
background-image:url(https://metal-profil.pl/nowa/wp-content/themes/metalprofil/assets/images/main_pic.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:center center
}
.main.blog>h1:first-of-type:after,.main.blog>h2:first-of-type:after,.main.blog-page>h1:first-of-type:after,.main.blog-page>h2:first-of-type:after,.main.price>h2:first-of-type:after {
content: "";
display: none;
position: absolute;
left: 10px;
top: 10px;
z-index: 50;
width: clamp(55px, 15dvw, 60px);
aspect-ratio: 1/1;
background-image: url(https://metal-profil.pl/nowa/wp-content/themes/metalprofil/assets/images/logo.webp);
background-size: cover;
background-repeat: no-repeat
}
.main>section{
display:flex;
justify-content:center;
align-items:center
}
@media screen and (min-width: 1000px) {
.main>section>.con {
margin-top: 60px;
}
#about-header {
margin-right: 4%;
}
}
.main>section>.con{
display:grid;
padding:clamp(80px,15dvh,120px) 40px;
width:clamp(700px,80dvw,1200px);
height:100%;
}
.main #hero{
position:relative;
display:flex;
justify-content:center;
align-items:center;
width:100dvw;
height:100dvh;
background-image:url(https://metal-profil.pl/nowa/wp-content/themes/metalprofil/assets/images/main_pic.webp);
background-repeat:no-repeat;
background-size:cover;
background-position:center center;
color:#fff
}
.main #hero div{
position:relative;
text-align:center
}
.main #hero div h3,.main #hero div .h3,.main #hero div main.price>.con>section table tr td,main.price>.con>section table tr .main #hero div td,.main #hero div main.price>.con>section table tr th,main.price>.con>section table tr .main #hero div th{
color:#ff3539
}
.main #hero a{
display:block;
position:absolute;
bottom:25%;
left:50%;
margin-top:50px;
padding:20px 25px;
border:1px solid #FFFFFF;
background:transparent;
color:#fff;
-webkit-backdrop-filter:blur(10px);
backdrop-filter:blur(10px);
transform-origin:center center;
transition:color .2s,background-color .2s;
transform:translate(-50%) translateY(50%) scale(.9)
}
.main #hero a h3,.main #hero a .h3,.main #hero a main.price>.con>section table tr td,main.price>.con>section table tr .main #hero a td,.main #hero a main.price>.con>section table tr th,main.price>.con>section table tr .main #hero a th{
white-space:nowrap
}
.main #hero a:hover{
background:#ffffff1a
}
.main #hero:after{
content:"";
display:none;
position:absolute;
left:10px;
top:10px;
z-index:50;
width:clamp(55px,18dvw,75px);
aspect-ratio:1/1;
background-image:url(https://metal-profil.pl/nowa/wp-content/themes/metalprofil/assets/images/logo.webp);
background-size:cover;
background-repeat:no-repeat
}
.main #about>.con{
position:relative;
grid-template-columns:3fr 2fr;
justify-items:center;
}
.main #about>.con .text hr{
border:1px solid #D3D3D3;
opacity:.3
}
.main #about>.con .text button{
display:block;
width:fit-content;
margin-top:50px;
padding:20px 25px;
border:1px solid #0B090A;
background:transparent;
color:#0b090a;
transition:background-color .2s
}
.blog-page .con a:hover{
background:#0b090a1a
}
.blog-page .con a{
display:block;
width:fit-content;
margin-top:50px;
padding:20px 25px;
background-color:#FF3539;
color:#0b090a;
transition:background-color .2s
}
.blog-page .con button{
display:block;
width:fit-content;
margin-top:50px;
padding:20px 25px;
border:1px solid #0B090A;
background:transparent;
color:#0b090a;
transition:background-color .2s
}
.main #about>.con .text button h3,.main #about>.con .text button main.price>.con>section table tr td,main.price>.con>section table tr .main #about>.con .text button td,.main #about>.con .text button main.price>.con>section table tr th,main.price>.con>section table tr .main #about>.con .text button th{
white-space:nowrap
}
.main #about>.con .text button:hover{
background:#0b090a1a
}
.main #about>.con .image{
width:25dvw;
height:100%;
background-image:url(https://metal-profil.pl/nowa/wp-content/themes/metalprofil/assets/images/drone_pic.webp);
background-repeat:no-repeat;
background-position:center center;
background-size:cover
}
.main #about>.con .staff{
grid-column:1/3;
display:grid;
grid-template-rows:0fr;
padding:0;
width:100dvw;
background-color:transparent;
transition-duration:.5s
}
.main #about>.con .staff.active{
background-color:#adadad;
grid-template-rows:1fr;
padding:60px 0 30px
}
.main #about>.con .staff>div{
overflow:hidden
}
.main #about>.con .staff>div .staff-photos-title{
text-align:center;
margin-bottom:40px
}
.main #about>.con .staff>div .staff-photos{
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-flow:wrap row;
gap:clamp(50px,12dvw,150px);
margin:30px
}
.main #about>.con .staff>div .staff-photos div{
position:relative;
display:flex;
flex-flow:nowrap column;
justify-content:center;
align-items:center;
width:clamp(200px,25dvw,250px)
}
.main #about>.con .staff>div .staff-photos div img{
position:relative;
width:100%;
display:block;
margin-bottom:20px
}
.main #about>.con .staff>div .staff-photos div h3,.main #about>.con .staff>div .staff-photos div main.price>.con>section table tr td,main.price>.con>section table tr .main #about>.con .staff>div .staff-photos div td,.main #about>.con .staff>div .staff-photos div main.price>.con>section table tr th,main.price>.con>section table tr .main #about>.con .staff>div .staff-photos div th{
font-size:180%
}
.main #about>.con .staff>div .staff-photos div h3:last-of-type,.main #about>.con .staff>div .staff-photos div main.price>.con>section table tr td:last-of-type,main.price>.con>section table tr .main #about>.con .staff>div .staff-photos div td:last-of-type,.main #about>.con .staff>div .staff-photos div main.price>.con>section table tr th:last-of-type,main.price>.con>section table tr .main #about>.con .staff>div .staff-photos div th:last-of-type{
font-size:85%;
opacity:.75
}
#offer{
background-color:#0b090a;
color:#fff
}
#offer>.con{
grid-template-columns:1fr
}
#offer>.con hr{
border:1px solid #D3D3D3;
opacity:.3
}
#offer>.con ul.pros-list{
list-style:none;
width:100%
}
#offer>.con ul.pros-list li{
margin:60px 0;
padding:10px 20px
}
#offer>.con ul.pros-list li:nth-of-type(2n){
text-align:left;
border-left:2px #ff3539 solid
}
#offer>.con ul.pros-list li:nth-of-type(odd){
text-align:right;
border-right:2px #ff3539 solid
}
#offer>.con .fast_offers-title{
text-align:center
}
#offer>.con .fast_offers{
display:flex;
justify-content:space-around;
align-items:center;
flex-flow:wrap row;
gap:60px 40px;
margin:30px 0
}
#offer>.con .fast_offers a{
position:relative;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
width:clamp(200px,20dvw,292px);
aspect-ratio:3/2;
background-size:cover;
background-position:center center;
background-repeat:no-repeat
}
#offer>.con .fast_offers a img{
position:absolute;
width:100%;
height:100%;
object-fit:cover;
filter:contrast(.7) brightness(.2) saturate(0);
transition:filter .2s
}
#offer>.con .fast_offers a h3,#offer>.con .fast_offers a main.price>.con>section table tr td,main.price>.con>section table tr #offer>.con .fast_offers a td,#offer>.con .fast_offers a main.price>.con>section table tr th,main.price>.con>section table tr #offer>.con .fast_offers a th{
position:relative;
z-index:10;
transition:scale .2s
}
#offer>.con .fast_offers a:after,#offer>.con .fast_offers a:before{
content:"";
position:absolute;
z-index:10;
width:40%;
height:40%;
transition-duration:.2s
}
#offer>.con .fast_offers a:after{
top:0;
left:0;
border-top:1.5px #ff3539 solid;
border-left:1.5px #ff3539 solid
}
#offer>.con .fast_offers a:before{
bottom:0;
right:0;
border-bottom:1.5px #ff3539 solid;
border-right:1.5px #ff3539 solid
}
#offer>.con .fast_offers a:hover img{
filter:contrast(.7) brightness(.25) saturate(.5)
}
#offer>.con .fast_offers a:hover h3,#offer>.con .fast_offers a:hover main.price>.con>section table tr td,main.price>.con>section table tr #offer>.con .fast_offers a:hover td,#offer>.con .fast_offers a:hover main.price>.con>section table tr th,main.price>.con>section table tr #offer>.con .fast_offers a:hover th{
scale:1.05
}
#offer>.con .fast_offers a:hover:after,#offer>.con .fast_offers a:hover:before{
width:calc(40% + 10px);
height:calc(40% + 10px)
}
#offer>.con .fast_offers a:hover:after{
top:-10px;
left:-10px
}
#offer>.con .fast_offers a:hover:before{
bottom:-10px;
right:-10px
}
#gallery>.con{
grid-template-columns:1fr
}
#gallery>.con>h3,main.price>.con>section table tr #gallery>.con>td,main.price>.con>section table tr #gallery>.con>th{
text-align:center
}
#gallery>.con .photo-box{
display:grid;
grid-template-columns:repeat(4,minmax(150px,auto));
gap:clamp(10px,5dvw,30px);
margin:30px auto
}
#gallery>.con .photo-box img{
width:100%;
aspect-ratio:10/9;
object-fit:cover;
transition:scale .2s,filter .2s
}
#gallery>.con .photo-box:hover img:not(:hover){
scale:.95;
filter:saturate(0) brightness(.6)
}
#gallery>.con .photo-box:hover img:hover{
scale:1.05
}
@media screen and (max-width: 800px){
.main.blog>h1:first-of-type,.main.blog>h2:first-of-type,.main.blog-page>h1:first-of-type,.main.blog-page>h2:first-of-type,.main.price>h2:first-of-type{
padding:20px 80px
}
.main.blog>h1:first-of-type:after,.main.blog>h2:first-of-type:after,.main.blog-page>h1:first-of-type:after,.main.blog-page>h2:first-of-type:after,.main.price>h2:first-of-type:after{
display:block
}
.main>section.con {
margin-top:0;
}
.main #gallery>.con .photo-box{
grid-template-columns:repeat(auto-fill,minmax(150px,auto))
}
}
@media screen and (max-width: 800px){
.main #hero:after{
display:block
}
.main #about>.con{
grid-template-columns:1fr;
grid-template-rows:1fr 20dvh;
}
.main #about>.con .text{
margin-left: 5%;
margin-right: 5%;
}
.main #about>.con .image{
width:100%
}
}
main.blog-page>.con.rand_posts{
display:grid;
grid-template-columns:repeat(auto-fill,30%);
justify-content:center;
gap:5%;
padding:40px 40px clamp(80px,15dvh,120px) 40px;
width:60dvw;
height:100%;
}
.main.blog .con {
width: clamp(350px,90dvw,1200px);
margin: 50px auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
main.blog>.con a, main.blog-page>.con.rand_posts a{
color:white;
background-color: #1E1E1E;
box-shadow:0 0 4px #1E1E1E;
}
main.blog-page > .con.rand_posts a {
margin: 0;
width: auto;
padding: 0;
}
main.blog>.con a article, main.blog-page>.con.rand_posts a article{
aspect-ratio:2/3
}
main.blog>.con a article img, main.blog-page>.con.rand_posts a article img{
width:100%;
aspect-ratio:3/2;
object-fit:cover
}
main.blog-page > .con.rand_posts a article img {
height: auto;
float: none;
margin: 0;
}
main.blog>.con a article h3, main.blog-page>.con.rand_posts a article h3,main.blog>.con a article main.price>.con>section table tr td,main.price>.con>section table tr main.blog>.con a article td,main.blog>.con a article main.price>.con>section table tr th,main.price>.con>section table tr main.blog>.con a article th,main.blog>.con a article p, main.blog-page>.con.rand_posts a article p,main.blog>.con a article .date, main.blog-page>.con.rand_posts a article .date{
font-size: 105%;
margin:5px
}
main.blog>.con a article h3, main.blog-page>.con.rand_posts a article h3{
font-size: 150%;
}
main.blog>.con a article .date, main.blog-page>.con.rand_posts a article .date, main.blog>.con a article p, main.blog-page>.con.rand_posts a article p{
display:block;
color:#D3D3D3;
}
main.blog>.con a article .date, main.blog-page>.con.rand_posts a article .date{
font-size:.8em
}
@media screen and (max-width: 1500px) {
main.blog-page>.con.rand_posts{
display:grid;
grid-template-columns:repeat(auto-fill, 45%);
justify-content:center;
gap:40px;
padding:40px 40px clamp(80px,15dvh,120px) 40px;
width:60dvw;
height:100%
}
}
@media screen and (max-width: 1200px) {
main.blog-page>.con.rand_posts{
display:grid;
grid-template-columns:repeat(auto-fill, 45%);
justify-content:center;
gap:40px;
padding:40px 40px clamp(80px,15dvh,120px) 40px;
width:80dvw;
height:100%
}
}
@media screen and (max-width: 800px){
main.blog>.con a article h3, main.blog-page>.con.rand_posts a article h3{
font-size: 100%;
}    
main.blog>.con a article p, main.blog-page>.con.rand_posts a article p{
font-size: 80%;
}    
main.blog>h2:first-of-type{
padding:20px 0
}
main.blog-page>.con.rand_posts{
padding:40px;
gap:0
}
main.blog-page>.con.rand_posts{
display:grid;
grid-template-columns:repeat(auto-fill, 45%);
justify-content:center;
gap:5%;
padding:40px 40px clamp(80px,15dvh,120px) 40px;
width:90dvw;
height:100%
}
}
@media screen and (max-width: 600px){
.main.blog>h1:first-of-type,.main.blog>h2:first-of-type,.main.blog-page>h1:first-of-type,.main.blog-page>h2:first-of-type,.main.price>h2:first-of-type{
padding:75px 25px 25px 25px;
}
main.blog>.con a article h3, main.blog-page>.con.rand_posts a article h3{
font-size: 90%;
}
main.blog>.con a article p, main.blog-page>.con.rand_posts a article p{
line-height: 100%;
font-size: 70%;
}    
main.blog>h2:first-of-type{
padding:20px 0
}
main.blog-page>.con.rand_posts{
padding:10px;
gap:0
}
main.blog-page>.con.rand_posts{
display:grid;
grid-template-columns:repeat(auto-fill,100%);
justify-content:center;
align-items:center;
gap:40px; width:80dvw;
height:100%
}
}
main.blog-page>.con{
padding:40px;
width:clamp(700px,80dvw,900px);
max-width:100%;
height:100%
}
main.blog-page>.con img{
width:20dvw;
height:400px;
object-fit:cover;
float:right;
margin:10px 20px 15px 30px
}
main.blog-page>.con b{
font-weight:400;
color:#cc0008
}
main.blog-page>.con ul{
margin:40px 20px
}
main.blog-page>.con ul li{
margin-top:10px
}
@media screen and (max-width: 1400px){
main.blog-page>h2:first-of-type{
padding:20px 0
}
main.blog-page>.con img{
width:35dvw;
object-fit:cover;
float:right;
margin:10px 20px 15px 30px
}
}
@media screen and (max-width: 800px){
main.blog-page>h2:first-of-type{
padding:20px 0
}
main.blog-page>.con img{
float:none;
width:100%;
height:30dvh;
margin:0
}
}
@media screen and (max-width: 500px) {
main.blog-page>.con{
padding:20px;
width:clamp(700px,80dvw,900px);
max-width:100%;
height:100%
}
}
@media screen and (max-width: 300px) {
main.blog-page>.con{
padding:10px;
width:clamp(700px,80dvw,900px);
max-width:100%;
height:100%
}
}
main.price>.con{
display:flex;
flex-flow:nowrap column;
justify-content:center;
align-items:center;
width:100dvw;
min-height:100%
}
main.price>.con h3,main.price>.con>section table tr td,main.price>.con>section table tr th{
margin-bottom:10px
}
main.price>.con h3:not(:first-of-type),main.price>.con>section table tr td:not(:first-of-type),main.price>.con>section table tr th:not(:first-of-type){
margin:60px 0 10px
}
main.price>.con>section{
display:flex;
flex-flow:nowrap column;
justify-content:center;
align-items:center;
width:100%;
padding:clamp(80px,13dvh,100px) 0
}
main.price>.con>section:nth-of-type(2n){
background-color:#adadad
}
main.price>.con>section table{
border-collapse:collapse;
width:100%;
max-width:1200px
}
main.price>.con>section table:not(:last-of-type){
margin-bottom:40px
}
main.price>.con>section table tr:hover{
background:#ffffff1a
}
main.price>.con>section table tr td,main.price>.con>section table tr th{
border:1.5px solid #0B090A;
padding:20px
}
main.price>.con>section table tr th{
font-weight:700;
background-color:#ff3539;
color:#0b090a
}
@media screen and (max-width: 800px){
main.price>h2:first-of-type{
padding:20px 0
}
main.price>.con{
padding:40px 0;
gap:0
}
main.price>.con section{
padding-right: 5%;
padding-left: 5%;
}
}
#contact {
display: flex;
flex-flow: nowrap column;
width: 100dvw;
padding: clamp(80px, 15dvh, 120px) 10dvw;
background-color: #0b090a;
color: #fff;
margin-top: auto; }
#contact .con{
position:relative;
width:100%;
display:grid;
grid-template-columns:1fr 1fr 1fr;
justify-content:center;
align-items:center;
margin:30px 0;
gap:0 40px
}
#contact .con h3,#contact main.price>.con>section table tr td,#contact main.price>.con>section table tr th{
position:absolute;
left:0;
top:0
}
#contact .con .data{
justify-self:left;
display:grid;
grid-template-columns:auto auto;
justify-content:center;
align-items:center;
gap:0 20px
}
#contact .con .data i{
color:#d3d3d3;
font-size:20px
}
#contact .con>iframe{
width:100%;
height:100%;
min-height:300px
}
#contact .con form{
justify-self:right;
display:grid;
grid-template-columns:1fr;
grid-template-rows:auto auto 1fr auto;
gap:10px;
width:100%;
height:100%;
min-height: 350px;
}
#contact .con form input,#contact .con form textarea{
padding:10px;
border:2px solid #ff3539;
font-family:Rajdhani,sans-serif;
background-color:#0b090a;
color:#fff
}
#contact .con form input[type=submit],#contact .con form textarea[type=submit]{
font-weight:700;
background-color:#ff3539;
color:#0b090a;
text-transform:uppercase;
cursor:pointer;
font-size:1.2em;
transition:color .1s,background-color .1s
}
#contact .con form input[type=submit]:hover,#contact .con form textarea[type=submit]:hover{
background-color:#0b090a;
color:#ff3539
}
#contact .con form input::placeholder,#contact .con form textarea::placeholder{
font-weight:700;
text-transform:uppercase
}
#contact .con form textarea{
resize:none
}
@media screen and (max-width: 1200px){
#contact{
padding:clamp(50px,10dvh,80px) 10dvw clamp(30px,5dvh,80px) 10dvw
}
#contact .con{
grid-template-columns:1fr 1fr;
gap:40px 20px
}
#contact .con>form{
justify-self:center;
max-width: 100%;
grid-column:1/3;
}
#contact .con>form textarea{
max-width: 100%;
}
}
@media screen and (max-width: 800px){
#contact{
padding:clamp(30px,7dvh,80px) 10dvw clamp(30px,5dvh,80px) 10dvw
}
.main>section.con {
margin-top: 0px;
}
#contact .con{
grid-template-columns:1fr;
grid-auto-flow: row dense;
gap:40px 0
}
#contact .con .data{
grid-column:1/3;
width:100%;
height:100%
}
}
@media screen and (max-width: 600px) {
main.blog>.con a article, main.blog-page>.con.rand_posts a article{
aspect-ratio:initial;
}
}
html{
scroll-behavior:smooth
}
*{
margin:0;
padding:0;
box-sizing:border-box
}
body {
background-color: #D3D3D3;
color: #0b090a;
font-family: Lato, sans-serif;
overflow-x: hidden; display: flex;
flex-direction: column;
min-height: 100vh; 
margin: 0;
}
::-webkit-scrollbar{
width:6px
}
::-webkit-scrollbar-track{
background-color:#0b090a
}
::-webkit-scrollbar-thumb{
background-color:#d3d3d3;
border-radius:4px;
border:1px solid #0B090A
}
::-webkit-scrollbar-button{
display:none
}
.custom-form-wrapper p,
.custom-form-wrapper span {
display: inline !important;
margin: 0 !important;
padding: 0 !important;
width: auto !important;
float: none !important;
}
main.blog>.con a article h3, main.blog-page>.con.rand_posts a article h3{
line-height: 100%;
font-size: 140%;
}
.main.blog a {
color: white;
}
input[type="text"]
{
width: 100%;
}
input[type="email"]
{
width: 100%;
}
input[type="submit"]
{
width: 100%;
}
textarea
{
width: 100%;
}
.price div{
margin: auto;
}
@font-face {
font-family: 'fontello';
src: url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.eot?25695036);
src: url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.eot?25695036#iefix) format('embedded-opentype'),
url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.woff2?25695036) format('woff2'),
url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.woff?25695036) format('woff'),
url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.ttf?25695036) format('truetype'),
url(//metal-profil.pl/nowa/wp-content/themes/metalprofil/font/fontello.svg?25695036#fontello) format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
font-family: "fontello";
font-style: normal;
font-weight: normal;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-right-open:before { content: '\e800'; }
.nav .con .menu-block ul .sub-menu {
display: none;
}
.nav .con .menu-block ul .sub-menu.open {
display: block;
}
@media (min-width: 801px) {
.nav .con .menu-block ul .sub-menu {
position: absolute;  min-width: 347px;
}
.nav .con .menu-block .menu-item-has-children {
position: relative;
}
.nav .con .menu-block .menu-item-has-children:hover > .sub-menu {
display: block;
}
.nav .con .menu-block ul .sub-menu li {
background: #1a1a1a;
border: 2px solid rgb(26, 26, 26);
margin-top: -2px;
transition: background 0.3s;
}
.nav .con .menu-block ul .sub-menu li:hover {
background: #ff3539;
}
.nav .con .menu-block ul .sub-menu li:first-child {
margin-top: 0;
}
.nav .con .menu-block .sub-menu li a {
padding: 14px 24px;
justify-content: space-between;
}
.nav .con .menu-block ul .sub-menu li a:hover {
color: #1a1a1a;
}
.nav .con .menu-block ul .sub-menu .sub-menu {
left: 100%;
top: -2px;
}
.nav .con .menu-block ul:not(.sub-menu) > .menu-item-has-children > a {
flex-direction: column;
padding-top: 10px;
}
.nav .con .menu-block ul > .menu-item-has-children > a::after,
.nav .con .menu-block .sub-menu .menu-item-has-children > a::after {
content: '\e800';
font-family: "fontello";
font-size: 50%;
margin-left: 24px;
}
.nav .con .menu-block ul:not(.sub-menu) > .menu-item-has-children > a::after {
transform: rotate(90deg);
margin-left: 0;
}
.nav .con .menu-block ul > .menu-item-has-children > span.show_submenu,
.nav .con .menu-block .sub-menu .menu-item-has-children > span.show_submenu {
display: none;
}
}
@media (max-width: 800px) {
.nav .con .menu-block ul > .menu-item-has-children > span.show_submenu,
.nav .con .menu-block .sub-menu .menu-item-has-children > span.show_submenu {
font-size: 50%;
transform: rotate(90deg);
display: flex;
padding: 0 10px 15px;
color: #fff;
position: absolute;
right: 0;
top: -2px;
}
.nav .con .menu-block ul {
display: block;
height: auto;
align-self: flex-start;
margin-bottom: 20px;
}
.nav .con .menu-block ul li a {
justify-content: flex-end;
margin: 5px;
}
.nav .con .menu-block ul li {
text-align: right;
}
.nav .con .menu-block .sub-menu:first-of-type {
margin-top: 20px;
}
.nav .con .menu-block ul > .menu-item-has-children {
position: relative;
}
.nav .con .menu-block ul > .menu-item-has-children > a {
margin-right: 35px;
}
.nav .con .menu-block ul > .menu-item-has-children.open_submenu > span.show_submenu {
transform: rotate(-90deg);
padding: 15px 6px 0;
}
}
.blog_pagination {
text-align: center;
margin: 0 15px 50px;
}
.blog_pagination .page-numbers {
display: inline-block;
background-color: #1e1e1e;
padding: 10px 15px;
margin: 5px 2px;
color: #fff;
font-family: Rajdhani,sans-serif;
font-size: 22px;
font-weight: 600;
}
.blog_pagination .page-numbers.current,
.blog_pagination .page-numbers.dots,
.blog_pagination .page-numbers:hover {
background-color: #ff3539;
color: #0b090a;
}
.blog_pagination .page-numbers.prev {
margin-right: 4px;
}
@media (max-width: 600px) {
.main.blog .con {
grid-template-columns: 1fr;
margin: 20px auto;
gap: 30px;
}
.blog_pagination .page-numbers {
padding: 10px 12px;
font-size: 16px;
}
}
@media (min-width: 601px) and (max-width: 1199px) {
.main.blog .con {
grid-template-columns: repeat(2, 1fr);
}
}