@charset "utf-8";
/* CSS Document */

html, body{ height: 100%;}
body{font-size: 14px; color:rgb(50,50,59); background: rgb(255,255,255);font-family: 'latoregular', arial;}

body, form{ padding: 0px; margin: 0px;}

img {border: 0px;}

h2{font-family: 'latobold';}

a{text-decoration: none; color:rgb(50,50,59);}
a:hover{ color: rgb(0,0,0); }


.tab{display: table; width: 100%; }
.tab>*{display: table-cell}

.ram, #sliderCategories { margin-left: auto; margin-right: auto; width: 1180px; transition: 0.5s;}


header>div{height:450px; overflow: hidden; background: rgb(250,250,250) no-repeat top; background-size:cover !important;  transition: 0.5s; }
header>div>article.tab{margin-top:20px;}
header>div>article.tab>nav{ text-align: right; vertical-align: top; font-size: 1.2rem;}
header>div>article.tab>nav>*{display: inline-block; text-align: center; color: rgb(255,255,255); text-transform: uppercase; transition: 0.5s; vertical-align: top; margin-left: 10px; margin-top: 10px;}
header>div>article.tab>nav>*.activ{color:rgb(242,231,38)}

header>nav{ border-bottom: 1px solid rgba(215,215,215,0.5); font-size: 1rem; text-transform: uppercase;}
header>nav>.ram>*{padding: 20px 19px; height:35px; vertical-align: middle; text-align: center; transition: 0.5s;}
header>nav>.ram>a{padding-top: 25px;}
header>nav>.ram>a:first-of-type{padding-left: 35px; position: relative;}
header>nav>.ram>a::after{ content:''; display: block; margin: 5px auto 0 auto; height: 2px; width:10px; background:rgba(225,225,225,1); transition: 0.5s; }
header>nav>.ram>a:hover::after{ background:rgba(225,225,225,1); width:40px; }
header>nav>.ram>a.activ::after{ background:rgb(242,231,38);width: 40px; }
header>nav>.ram>i{background:url(../obrazy/logo_male.png) no-repeat left center; background-size: contain; width: 150px; cursor: pointer;}
header>nav>.ram>div{display: none;}
header>nav>.ram>aside{border-left:1px solid rgba(215,215,215,0.5); width:35px;}
header>nav>.ram>aside>a{ color:rgb(209,209,209);}

 
main>nav{font-size:0.9rem; margin: 20px 0; color:rgba(0,0,0,0.5)}
main>h1{ffont-size: 2rem; text-transform: uppercase; margin-bottom:50px; margin-top: 30px; transition: 0.5s;}
main>h1>aside{background:rgb(242,231,38); height:5px; width:90px; margin-top:15px; border-radius:10px; }
main>article{margin-bottom: 80px;}

body>nav{position: fixed; right: 0; z-index: 3; top: 550px; -webkit-box-shadow: -4px 2px 39px -13px rgba(0,0,0,0.8);-moz-box-shadow: -4px 2px 39px -13px rgba(0,0,0,0.8);box-shadow: -4px 2px 39px -13px rgba(0,0,0,0.8); background:rgba(255,255,255,1.00); width:300px; padding-bottom: 20px; margin-right: -250px; transition: 1.5s; border-radius:8px 0 0 8px; overflow: hidden;}
body>nav>*{ display: table; width: 100%;margin-bottom: 1px; }
body>nav>*>*{display: table-cell !important; vertical-align: top; padding: 10px; text-transform: uppercase; transition: 0.5s;}
body>nav>aside>*{vertical-align: middle; background: rgb(248,248,248); font-size: 1.05rem}
body>nav>aside>*:first-child{ background:rgb(242,231,38); color: rgba(255,255,255,1.00); width: 30px;height: 30px; line-height: 30px; text-align: center; vertical-align: middle; font-size: 1.6em;transform: rotate(180deg); transition: 0s; cursor: pointer;}
body>nav>a>*:first-child{width: 30px; text-align: center; }
body>nav>a>*:first-child>i{border-radius: 50%; width: 8px; height:8px; background: rgb(215,215,215); display: inline-block; transition: 0.5s;} 
body>nav>a:hover{color:rgb(0,0,0); }
body>nav>a:hover>*:first-child{background:rgb(248,248,248); }
body>nav>a:hover>*:first-child>i{background:rgb(242,231,38); } 
body>nav.activ{ margin-right: 0px;}
body>nav.activ>aside>*:first-child{transform: rotate(0deg)}


footer{border-top:1px solid rgb(215,215,215);}
footer>aside{background:rgb(250,250,250); height: 500px;}
footer>aside>*{height: 100% !important; width: 100% !important;}
footer>article{margin: 40px auto; border-spacing: 40px 0; font-size: 1.1rem; }
footer>article>*{padding: 0 10px;}
footer>article>*:first-child{padding:0;}
footer>article>*:last-child{padding: 0 0px 0 20px;}
footer>article>div>h2{font-size: 2.5rem; text-transform: uppercase; margin-bottom:50px;}
footer>article>div>h2>aside{background:rgb(242,231,38); height: 5px; width:90px; margin-top:15px; }
footer>article>div>h3{margin: 0 0 40px 0;}
footer>article>div>a{margin-bottom:20px; display: block;}
footer>article>div>a>*{ display: inline-block; vertical-align: middle;}
footer>article>div>a>img{margin-right:20px;}
footer>article>div>aside{font-size: 0.7rem; color:rgb(230,230,230); margin-top: 40px;}

.okruszki_f{background: rgba(241,239,239,0.6)}
.okruszki_f>*>*{ padding: 15px 0; color: rgba(0,0,0,0.4)}

.okruszki_f a:hover{text-decoration: underline;}

.formko{background: rgb(250,250,250);}
.formko>*{padding: 50px 0;}
.formko h2{font-size: 1.5rem; text-transform: uppercase; padding-bottom: 15px;  border-bottom:1px solid rgb(215,215,215); margin-bottom: 50px;}
.formko form{display: block; overflow: hidden;}
.formko input, .formko textarea{ width: calc(50% - 42px); padding:10px; border: 1px solid rgb(215,215,215); vertical-align: top;  }
.formko input:hover, .formko textarea:hover{ border-color: rgb(242,231,38)}
.formko input{margin: 0 20px 10px 0;}
.formko textarea{height:115px; float: right;}
.formko input[type="checkbox"] {
    margin: 0 !important;
    width: 20px;
}

.formko .button{width: auto; padding: 10px 20px; background:transparent; border: 1px solid rgb(242,231,38); color:rgb(242,231,38); transition: 0.5s; cursor: pointer;}
.formko .button:hover{background:rgb(242,231,38); color:rgb(255,255,255); }


@media screen and (max-width:1500px) {
	header>div{height:400px;}
	body>nav{top:450px;}
}
@media screen and (max-width:1220px) {	
	.ram, #sliderCategories{width: 1000px;}
	header>div{height:350px;}
	header>nav{font-size: 1.1rem;}
	header>nav>.ram>*{height:30px;}
	body>nav{top: 395px;}
	main>h1{font-size: 2.2rem;}
	footer>article>div>h2{margin-top: 0px; font-size: 2.2rem;}
}
@media screen and (max-width:1080px) {	
	.ram, #sliderCategories{width:calc(100% - 60px); margin-left: 30px; margin-right: 30px;}
	header>div{height:300px;}
	header>nav{font-size: 1.05rem;}
	header>nav>.ram>*{height:25px;}
	body>nav{top:340px;}
	main>h1{font-size: 2rem;}
	footer>article>div>h2{margin-top: 0px; font-size: 2rem;}
	
}

@media screen and (max-width:860px) {
	.formko>*{padding:30px 0;}	
header>div{height:280px; }
	header>div>article.tab>nav{font-size: 1rem;}
	body>nav{top:320px;}
	footer>article.tab{display: block; border-spacing: 0; margin-top: 40px; margin-bottom: 40px; }
	footer>article.tab>*{display: inline-block; margin-bottom: 30px; width:calc(50% - 34px); vertical-align: top;}
	footer>article.tab>*:first-child{width: 100%;}
	footer>article.tab>*:last-child{margin-bottom: 0px;}
	footer>article>div>h3{margin-bottom: 15px;}
}

@media screen and (max-width:770px) {
	header>div>article>a{width: 50%;}
	header>div>article>a>*{width: 100%; max-width: 235px;}
	body>nav, header>nav>.ram>*{display: none;}
	footer>article>*,footer>article>*:last-child{padding: 0px;}
	header>div{height:300px; }
	header>nav>.ram>div{display: table-cell; text-align: right;height:30px; padding:10px 15px; vertical-align: top;} 	
	header>nav>.ram>i{display: table-cell; width: 120px;}

}
@media screen and (max-width:420px) {
	header>div>article.tab>nav>*{ margin-left: 5px;}
	footer>article.tab>*{width: 100%;}
	.formko input, .formko textarea{width:calc(100% - 42px); margin-bottom:10px; float: none;}
	main>h1{font-size:1.5rem;}
	footer>article>div>h2{margin-top: 0px; font-size:1.5rem;}
	main>h1>aside, footer>article>div>h>aside{height: 3px; width: 80px;}
	.ram, #sliderCategories{width: calc(100% - 30px);
    margin-left: 15px;
    margin-right: 15px;}
	header>div{background-size:auto 380px !important; background-position:top left;
		margin-bottom: 1px;}

}