@charset "utf-8";
 @import "https://use.fontawesome.com/releases/v5.6.3/css/all.css";
/* CSS Document */
 body {
     margin: 0;
     padding: 0;
     font-family: 'Raleway', sans-serif;
}
 .container{
     max-width: 1250px;
     margin: 0 auto;
}
 .bg0 .page{
     background-color: #2a2c2b;
}
 .bg0 {
     background: url(../images/tbg.jpg) top center repeat-x;
     width: 100%;
     float: left;
}
 .bg1 {
     background: url(../images/top2.jpg) top center no-repeat;
     width: 100%;
     float: left;
}
 .bg2 {
     background: #292b2a;
     width: 100%;
     float: left;
     margin-top: -2px;
     padding: 20px 0;
}
 .loog {
     width: 120px;
     margin: 2px 0 0 100px;
     float: left;
     padding: 10px 0;
}
 .top span{
     display: none;
}
 .bg3 {
     background: #fff;
     width: 100%;
     float: left;
}
.bg3 .page{
	width: auto;
	padding: 0 20px;
}
 .bg4 {
     background: #e2b500;
     width: 100%;
     float: left;
}
 .bg5 {
     background: #000;
     width: 100%;
     float: left;
}
 .page {
     width:100%;
     height:auto;
     margin:0 auto;
}
 .top {
     width:100%;
     background: #2a2c2b;
     background-repeat:no-repeat;
}
 .top .menu .position {
     display:inline-block;
     padding-left: 10px;
     padding-right:10px;
     line-height: 83px;
}
 .top .menu a{
     color:#f8f8f8;
}
 .top .menu a:visited{
     color:#f8f8f8;
}
 .top .menu .position:hover{
     background-color: #000;
}
 .header {
     width:100%;
     height:442px;
     background-image:url(../images/header.jpg);
     background-repeat:no-repeat;
}
 .container1 {
     width:100%;
     display: flex;
     justify-content: center;
     flex-direction: column;
     align-items: center;
}
 .container1 img{
     width:100%;
}
 .bg2 .page{
     display: flex;
     align-items: center;
     flex-direction: column;
}
 .bg2 .page button {
     border: 1px solid #f8f8f8;
     background-image:none;
     background-color: #292b2b;
     color:#f8f8f8;
     padding: 15px 10px;
}
 .bg2 .page button:hover {
     background: #f8f8f8;
     color: #292b2b;
}
 .container2 {
     padding:0 30px;
     background-color:#fff;
}
 .container2 img {
     margin-left:50px;
     margin-top:30px;
     float:left;
}
 .container2 .text {
     width:100%;
     margin-top:30px;
     display:inline-block;
     padding-bottom:30px;
}
 .container3 {
     margin-top: 20px;
     background-color:#e2b500;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 0 20px;
}
 .container3 img {
     float:left;
}
 .container3 .text {
     width:100%;
     margin-top:30px;
     display:inline-block;
     padding-bottom:30px;
}
 .bg4 .page button {
     border: 2px solid #f8f8f8;
     background-image:none;
     background-color: #e2b500;
     color:#f8f8f8;
     margin-bottom:30px;
     font-weight:bold;
     padding: 15px 10px;
}
 .bg4 .page button:hover {
     background: #fff;
     color: #e2b500;
}
 .footer {
     width: 100%;
     display: flex;
     flex-direction: column;
}
 .footer .box1 {
     width:100%;
     height:208px;
     background-image:url(../images/box.jpg);
     background-repeat:no-repeat;
}
 .footer .box2 {
     width:100%;
     height:208px;
     background-image:url(../images/box2.jpg);
     background-repeat:no-repeat;
     display: flex;
     align-items: flex-end;
     justify-content: center;
}
 .footer .box2 input{
     width:100%;
     height:32px;
     background-color:#292b2b;
     color:#7f7f7f;
     border:none;
     padding-left:10px;
}
 .footer .box2 button {
     width:100%;
     height:35px;
     border: none;
     background-image:none;
     background-color: #0060a2;
     color:#f8f8f8;
     margin-bottom:30px;
     margin-top:116px;
}
 .zxcv {
     width:112px;
     height:35px;
     border: none;
     background-image:none;
     background-color: #0060a2!important;
     color:#f8f8f8!important;
     margin-bottom:30px;
     margin-top:116px;
}
 .footer .box3 {
     float:left;
     width:100%;
     height:208px;
     background-image:url(../images/box3.jpg);
     background-repeat:no-repeat;
     background-position: center;
}
 h3 {
     font-size: 24px;
     font-weight: 100;
}
 h3 b {
     color: #fff;
}
 .fotka img{
     float: left;
     margin: 10px 5px 5px 0;
     width: 100%;
     height: auto;
}
 h3 {
     width: 100%;
     float: left;
}
 .hidenone, .hidentwo, .hidenthree, .hidenfour {
     float: left;
     width: 100%;
     margin: 10px 0;
     display: none;
}
 #one:hover, #two:hover, #three:hover, #four:hover {
     color: #777;
     cursor: pointer;
}
 .btn {
     width: 24%;
     float: left;
     margin: 3%;
}
 .bg4 .page .container.button__container{
     display: flex;
     justify-content: center;
}
 .btn h3 {
     font-size: 14px;
     text-align: center;
     font-weight: bold;
}
 .btn img {
     width: 95%;
     border: 1px solid #ddd;
     margin: 0 auto 10px auto;
}
 .toggle, [id^=drop] {
     display: none;
}
 .main-nav {
     margin:0;
     padding: 0;
}
 #logo {
     display: block;
     padding: 0 30px;
     float: left;
     font-size:20px;
     line-height: 60px;
}
 .main-nav:after {
     content:"";
     display:table;
     clear:both;
}
 .main-nav ul {
     float: right;
     padding:0;
     margin:0;
     list-style: none;
     position: relative;
}
 .main-nav ul li {
     margin: 0px;
     display:inline-block;
     float: left;
     background-color: #2a2c2b;
}
 .main-nav a {
     display:block;
     padding:14px 20px;
     color:#FFF;
     font-size:17px;
     text-decoration:none;
}
 .main-nav ul li ul li:hover {
     background: #000000;
}
 .main-nav a:hover {
     background-color: #000000;
}
 .main-nav ul ul {
     display: none;
     position: absolute;
     top: 60px;
}
 .main-nav ul li:hover > ul {
     display:inherit;
}
 .main-nav ul ul li {
     width:170px;
     float:none;
     display:list-item;
     position: relative;
}
 .main-nav ul ul ul li {
     position: relative;
     top:-60px;
     left:170px;
}
 li > a:after {
     content: ' +';
}
 li > a:only-child:after {
     content: '';
}
 @media all and (max-width : 768px) {
     #logo {
         display: block;
         padding: 0;
         width: 100%;
         text-align: center;
         float: none;
    }
     .main-nav {
         margin: 0;
    }
     .toggle + a, .menu {
         display: none;
    }
     .toggle {
         text-align: right;
         display: block;
         padding: 14px 20px;
         color: #FFF;
         font-size: 23px;
         text-decoration: none;
         border: none;
         padding-top: 40px;
    }
     [id^=drop]:checked + ul {
         display: block;
    }
     .main-nav a {
         text-align: center;
    }
     .main-nav ul li {
         display: block;
         width: 100%;
    }
     .main-nav ul ul .toggle, .main-nav ul ul a {
         padding: 0 40px;
    }
     .main-nav ul ul ul a {
         padding: 0 80px;
    }
     .main-nav a:hover, .main-nav ul ul ul a {
         background-color: #000000;
    }
     .main-nav ul li ul li .toggle, .main-nav ul ul a, .main-nav ul ul ul a{
         padding:14px 20px;
         color:#FFF;
         font-size:17px;
    }
     .main-nav ul li ul li .toggle, .main-nav ul ul a {
         background-color: #212121;
    }
     .main-nav ul ul {
         float: none;
         position:static;
         color: #ffffff;
    }
     .main-nav ul ul li:hover > ul, .main-nav ul li:hover > ul {
         display: none;
    }
     .main-nav ul ul li {
         display: block;
         width: 100%;
    }
     .main-nav ul ul ul li {
         position: static;
    }
}
 @media all and (min-width : 768px) {
     .main-nav ul {
         height: 102px;
         display: flex;
         align-items: center;
    }
     .container1 {
         flex-direction: row;
    }
     .container1 img{
         width:35%;
    }
     .container3{
         flex-direction: row;
         text-align: left;
    }
     .footer {
         flex-direction: row;
	}
	.contact__page--container{
		flex-direction: row!important;
		justify-content: space-between;
	   }
	.contact__page--container div{
		width: 50%;
	}
	.fotka img{
		width: 160px;
		height: 120px;
   	}
}
 @media all and (max-width : 330px) {
     .main-nav ul li {
         display:block;
         width: 94%;
    }
}
 .contact__page--container{
     display: flex;
     flex-direction: column;
     padding: 0 20px;
}
 .contact__page--container input, textarea{
     width: 100%;
     resize: vertical;
}
 .contact__page--container textarea{
     resize: vertical;
     min-height: 50px;
}
 .contact__page--container input[type=reset], input[type=submit]{
     margin: 5px 0;
}