@import url('https://fonts.googleapis.com/css2?family=Jura:wght@300;400;500&display=swap');

.navbar-front{
background: rgb(238,238,238);
background: linear-gradient(to right, rgba(238,238,238,1) 0%,rgba(204,204,204,1) 100%);
border-bottom: 1px solid #cacaca;
border-radius:0;z-index:7;width:100%}
.navbar-front.affix{top:53px}
.navbar-front .nav{float:none;justify-content:center;display:flex}
.navbar-front li a{transition:border-color .2s ease-in-out;font-size:1.6rem;color:#444444;border-bottom:4px solid transparent;padding:15px 10px 5px;text-transform: uppercase;font-weight: 500;font-family: 'Jura', sans-serif;}
.navbar-front li a:hover, .navbar-front li a:focus,.navbar-front li.active a{color:inherit;border-color:#bbbbbb}
.navbar-front li:not(.active) a:focus{border-color:transparent}

.com_off-off .h3{font-size:5rem;font-weight:400;text-align:center;margin:30px 0 60px 0;  font-family: 'Jura', sans-serif;text-transform: uppercase}
.com_off-off .h3 .sub{
display: block;
font-size: 50%;
color: #bbbbbb;
font-family: "Lato",sans-serif;
margin-top: 15px;
text-transform: none;
}



#home {margin-bottom: 120px}
#home .page-title{font-family: 'Jura', sans-serif;font-weight:400;text-align:center;text-transform:uppercase;font-size:4rem;margin:30px 0}
#home .page-title span{display: block}

.catblock {margin: 80px 0}
.catblock .category{display: block;text-decoration: none}
.catblock .category:hover .title{border-color: #ffc135;color: inherit}
.catblock .title{
font-family: 'Jura', sans-serif;
text-align: center;
display: block;
font-size: 2.5rem;
margin: 30px 0;
font-weight: 500;
color: #cccccc;
border-bottom: 1px solid #e5e5e5;
}
.catblock .image{}
.catblock .image img{}


.collections .wrapper{display: flex;flex-wrap: wrap;justify-content: space-between;}

.block-coll:nth-child(1){border-color: #a22427;}
.block-coll:nth-child(2){border-color: #ffc135;}
.block-coll:nth-child(3){border-color: #01538b;}
.block-coll:nth-child(1) .title{color: #a22427;}
.block-coll:nth-child(2) .title{color: #ffc135;}
.block-coll:nth-child(3) .title{color: #01538b;}

.block-coll{
display: flex;
flex-direction: column;
width: 32%;
border-style: solid;

}

.block-coll .image{
order: 1;
}
.block-coll .text{
order: 2;

padding: 20px 30px 30px 30px;
}
.block-coll .title{
font-family: 'Jura', sans-serif;
font-size: 5rem;
margin-bottom: 30px;
font-weight: 500;
display: block;
text-decoration: none;
}
.block-coll .descr{
font-size: 1.9rem;
text-align: justify;
}



#why p.text{
font-size: 2rem;
margin-bottom: 30px;
display: block;
color: #bbbbbb;
font-family: "Lato",sans-serif;
text-align: center;
}
.block-why {display: flex;    align-items: center;
background: #efefef;
flex-wrap: wrap;
}
.block-why:last-child{border-bottom: none;}
.block-why .text{width: 50%;order:1; padding: 30px;}
.block-why .image{width: 50%;order:2}
.block-why .image img{max-width: 100%}

.block-why:nth-child(even) .image{text-align: right;}
.block-why:nth-child(odd) .image{order: 0}

.block-why .descr{
font-size: 2rem;
text-align: justify;
}
.block-why .title{
text-align: center;
font-family: 'Jura', sans-serif;
font-weight: 300;
font-size: 6rem;
margin-bottom: 60px;
}

.about .text{font-size: 2rem;margin-bottom: 50px;}
.about li .fas{width: 25px;}

#scheme .block{border-top:2px solid #000000;margin:15px 0}
#scheme .icon{display:flex;width:100px;height:100px;background:#e5e5e5;border-radius:100%;font-size:6rem;align-items:center;justify-content:center;margin:70px auto;font-weight:900}
#scheme .block .image{position:relative}
#scheme .block .image:after{content:"";width:100%;height:100%;position:absolute;display:block;background:rgba(0,177,195,0.1);z-index:1;top:0}
#scheme .block .image img{width:100%}
#scheme .block .image .title{top:-22px;position:absolute;z-index:3;background:#ffffff;border:1px solid;font-size:2.2rem;font-weight:900;text-align:center;text-transform:uppercase;padding:5px 0;width:80%;margin-left:10%}
#scheme .block .text{position:absolute;bottom:30px;background:rgba(255, 255, 255, 0.7);color:#777;padding:10px 15px;font-size:1.5rem;z-index:2;width: 100%;}
#scheme .block .text a{color: #333; text-decoration-color:#333}
@media (max-width: 991px) {

#scheme .icon{width:80px;height:80px}
#scheme .block .image .title{font-size:1.6rem}
#scheme .block .text{bottom:15px}
}

@media (max-width: 1199px) {
.com_off-off .h3 {
font-size: 4rem;
margin-bottom: 30px;
}
#home .page-title{font-size: 3.2rem}
.catblock{margin: 40px 0;}
.catblock .title{    font-size: 2rem;}

.block-coll .title{
font-size: 3.5rem;
margin-bottom: 15px;
}
.block-coll .text{padding: 20px;}
.block-coll .descr{    font-size: 1.8rem;}

.block-why .title{
font-size: 5rem;
margin-bottom: 30px;
}
}
@media (max-width: 991px) {
#home .page-title{font-size: 2.7rem;}
.catblock{margin: 0 0 30px 0;}
.catblock .image {
display: block;
max-width: 200px;
margin: auto;
}
.catblock .title{    font-size: 3.5rem;}
.block-coll{width: 100%;margin-bottom: 30px;}

.block-why .text{padding: 20px}
.block-why .title{
font-size: 3.5rem;
margin-bottom: 30px;
}
.block-why .descr{
font-size: 1.6rem;
}
}

@media (min-width: 768px) and (max-width: 991px) {
.block-coll{
flex-direction: row;

}
.block-coll .image{
width: 40%;
}
.block-coll .text{
width: 60%;
padding: 15px;
}
.block-coll .title{
font-size: 2.5rem;
margin-bottom: 10px;
}
.block-coll .descr{
font-size: 1.35rem;
}
}
@media (max-width: 767px) {
.com_off-off .h3 {
font-size: 2.5rem;
}
#home .page-title{font-size: 2.5rem;}

.catblock .title{    font-size: 2rem;}

.block-coll .title {
font-size: 2.4rem;
}
#why p.text {
font-size: 1.5rem;
}
.block-why .text{
width: 100%;
}
.block-why .image {
width: 100%;
order:2 !important;
}
.block-why .title {
font-size: 3.5rem;
}
.block-why .descr {

}

}