/* 1.1.index, body
===========================*/
#body {
	margin: 0;
    width: 100%;
    background: rgba(0, 63, 125, 0.65);
	}
#h1 { color: rgba(0, 63, 125, 0); }


#main_fon img { position: fixed;
                width: 100%;
                margin-top: 0;
                height: auto;
                left: 0;
                top: 0;}

#main_fon2 img {   display: none;  }

.m {display: none;}


#brend{ width: 100%;
        height:170px;
        position: absolute;
        left: 0;
        top: 0;
        background: rgba(0, 63, 125, 0.65);
        z-index: 1000;}
#brend-width{
       
        width: 80%;
        margin-left: 10%;
        height: 150px;
        img {width: 140px;
            float: left;
                margin-top: 25px;}
    
        p { margin: 0;
            text-align: right;
            width: 550px;
            font-weight: bold;
			float: left;
            font-size: 28px;
            color: #000;
            color: #FAFAFA;
            font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
            vertical-align: middle;}
            }

#brend-foto {   width: 100px;
                height: 120px;  }

#brend-word {   position: absolute;
                margin-left: 110px;
                top: 20px;
                height: 70px;
                width: 700px;   }
#brend-tel {    position: absolute;
                margin-left: 110px;
                top: 60px;
                height: 70px;
                width: 700px;
                p {     font-size: 21px;
                        text-align: right;}  }

.dropdown {     display: none;  }


#map {	position: absolute;
        top:25px;
        right: 25%;
        width: 400px;
        height: auto;
		text-decoration: none;
		z-index: 2000;
            
		a:hover{	
			#map2{	
				p{	
					color: #A6F615;
					}
				}                    
			}
        img {   width:38px;
                height: 40px;
                float: right;}
		
                p{  
					margin: 5px;
                    text-align: center;
					float: right;
                    font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
	                color: #FFF;
                    font-size: 20px;
                    font-weight: bold;
                    font-style: italic;
                    text-decoration: none;
                    }
            }

#map1{
        width:10%;
		float: left;
            }
#map2{
		float: right;
		width:90%;
            }

#map3 {display: none;}

.width{
    width: 100%;
    z-index: 1000;
    height: 70px;
    position: absolute;
    top: 100px;
    left: 0;
    }

#width-border{
    width: 80%;
    height: 50px;
    margin-top: 7px;
    margin-left: 10%;
    border-top: 3px solid #FFF;
    border-bottom: 3px solid #FFF;
                        }
                
            

.smart {display: none;}

.nav{
    margin: 0 auto;
    width: 1060px;
    height: 50px;
    padding: 0;
    
    li{
    
    width: 14.28%; 
    height: 50px;
    list-style-type: none;
    float: left;
    text-align: center;    
        a{
        display: block;
        padding-top: 15px;
        padding-bottom: 14px;
        font-weight: bold;
        font-size: 20px;
        color: #000;
        text-decoration: none;
        color: #FAFAFA;
        font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
		vertical-align: middle;
            }
        a:hover {   background-color: #5F82BB;
                    color: #FFDD00;
                    height: 20px;
                        
                    }
                }
            }

#soc {      position:absolute;
            top: 30px;
            right: 0px;
            height: 50px;
            width: 20%;
            background: rgba(0, 63, 125, 0.15);
            z-index: 5000;
            
            }

#kont  {    width: auto;
            padding-left: 0px;        
            }

#vk    {width: auto;
        height: 50px;
        margin: 0 auto;
        padding: 0;
        li{ width: 54px; 
            height: 50px;
            list-style-type: none;
            float: left; 
        a {display: block;
            width: 54px;
            height: 50px;}
    
            
        img {   width: 53px;
                height: 50px;}
            a:hover {background-color: #A2A2A2;}
    }
}

#proekt {   width: 100%;
            position: absolute;
            top:70%;
            background: rgba(56, 63, 69, 0.98);
           } 

#pr_snippet{
    margin-top: 20px;
    padding: 0;
    margin-bottom: 0;
    text-align: center;
    font-weight: 500;
    color: #FFDD00;
    font-style: italic;
    font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
    font-size: 23px;
    vertical-align: middle;
    text-indent: 30px;
    }
.pr_snippet_2 {
		padding-top: 10px;
		padding-left: 10%;
		padding-right: 10%;
        
        margin-bottom: 10px;
        text-align: justify;
		font-weight: 500;
        font-style: italic;
		color: #FFF;
		font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
		font-size: 22px;
		vertical-align: middle;
        text-indent: 30px;
		}

.left_content { width: 45%;
                align-content: center;
                margin: 30px auto;
                img { width: 100%; 
                    border-radius: 20px; }   }

.brick        { font-weight: 500;
                color: #FFF;
                font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
                font-size: 22px;
                margin: 0;} 
.cash         { font-weight: 750;
               
                color: #FFDD00;
                font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
                font-size: 22px;
                margin: 0;} 



@media (max-width: 1720px) and (min-width: 1681px) {
    #map    {   width: 380px;
                right: 27%;
		      p {  font-size: 17px;} }
	#map1  { width: 15%;}	
	#map2  { width: 85%;} 
    }
@media (max-width: 1681px) and (min-width: 1500px) {
    #soc  {  width: 20%;}
            
    #map  { right: 21%; 
            width: 310px;
        p {  font-size: 15px;} }
    
    .nav {li a { font-size: 17px; }}
    
}

@media (max-width: 1500px) and (min-width: 1300px) {
	
    #soc  {     width: 16%;
                height: 40px;
            li  {   width: 40px;
                    height: 40px;
                    img { height: 40px;
                    width: 40px;}
                    a { height: 40px;
                    width: 40px;}
                }}
    #map  { right: 18%; 
            width: 300px;
        p {  font-size: 15px;} }
    
    .nav {li a { font-size: 18px; }}
    
    #brend-width
    {   width: 50%;
        margin-left: 7.5%;
         }
    #brend-word  {  width: 650px;
                    margin-left: 50px;
                    p { font-size: 24px; 
                        }}
    #brend-tel  {   width: 650px;
                    margin-left: 50px;
                    p {font-size: 18px; }}
    
    #width-border  { width: 85%;
                     margin-left: 7.5%;}
    
    }


@media (max-width: 1300px) and (min-width: 1050px) {
    #soc  {     top: 38px;
                width: 150px;
                height: 40px;
            li  {   width: 40px;
                    height: 40px;
                    img { height: 40px;
                    width: 40px;}
                    a { height: 40px;
                    width: 40px;}
                }}

    #map  { top: 37px;
            right: 15.5%; 
            width: 260px;
        p {  font-size: 12px;} }  
    
    #map2  { width: 85%;} 

    #width-border {     width: 90%;
                        margin-left: 5%;    }
    .nav {  width: 100%;    }
    .nav li a {	font-size: 18px;    }  
       	
    #brend-width{	width: 95%;
                    margin-left: 5%;
					img {	width: 120px;
                            margin-top: 32px;
							}
					p {	font-size: 23px;
						width: 500px;
						text-align: center;
						margin: 20px 0 45px 10px;}    }
	
    #brend-word  {  top: 10px; 
                    margin-left: 80px; }
    #brend-tel  {   top: 50px; 
                    margin-left: 80px;
                    p {	font-size: 17px; }  }
    #brend-foto {   width: 120px; }
 
    .line { width: 100%;    }    
    
    .left_content { width:60%;}
                


}
    


@media (max-width: 1050px) {
    
    #main_fon img   {  display: none; }
    #main_fon2 img {    display: block; 
                        position: fixed;
                        width: 100%;
                        margin-top: 0;
                        height: auto;
                        left: 0;
                        top: 0;}
    
    

    
    .m {display:block;}
    #brend {    height: 146px;  }
    #main_fon img{  top: 0; }  
    
    #brend-width    {  margin-left: 12px;
                       img {width: 130px; 
                        margin-top: 15px;}   }
    #brend-word {   right: 22%;
                    top: 20px;
                    width: 60%;
                    margin: 0;
                    p { font-size: 21.5px; 
                        text-align: center;}   }
    
    #brend-tel {    right: 22%;
                    top: 55px;
                    width: 60%;
                    p { font-size: 16px;
                        text-align: center;  }  }
    
    #brend2 { display: none; }
    
    #soc {  top: 25px;
            right: 10px;
            height: 50px;
            width: 150px;
            li { width:  33%; }
            }
    
    #map{ 	width: 77%;
			right: 1%;
			top: 95px;
		p {font-size: 15px;} }
    
    #map1{      margin-bottom: 20px;
                img{	width: 40px;
                        height: 40px;}}
    
    #map2{  	width: 540px; 
                padding-top: 5px;
                float: left;}
    
    
    
    #kont {margin-right: 0;}
    
    
    
    
    
    
    .width {display: none;}
    
    .line {width: 100%;}
    
    .m {    position: absolute;
            top: 86px;
            left: 52px;
            img { z-index: 2000px;
                    }
            }
    
    .dropbtn {  color: #FFF;     
                background: rgba(36, 36, 36, 0.05);
                font-size: 50px;
                border: none;
                cursor: pointer;   }

    .dropbtn:hover, .dropbtn:focus {    background: rgba(0, 63, 125, 0.65);  }


    .dropdown {     position: absolute;
                    z-index: 2000;
                    top: 80px;
                    width: 160px;
                    border-top: 3px solid #FFF;
                    border-bottom: 3px solid #FFF;
                    display: inline-block;
                    p {width: 148px;
                        }
                    }

    .dropdown-content { display: none;
                        position: absolute;
                        top: 64px;
                        background: rgba(0, 63, 125, 0.65);
                        width: 300px;
                        overflow: auto;
                        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
                        z-index: 1; }
    
    .dropdown-content a {   padding: 12px 30px;
                            font: 15px verdana; 
                            font-weight: bold;
                            color: #FFF;    
                            text-decoration: none;
                            display: block; }
    
    .dropdown a:hover { background: rgba(0, 63, 125, 0.25);  }
    
    .show { display: block; }   

  
    .left_content { width:60%;}
}


@media (max-width: 800px) {
    .dropdown {     position: absolute;
                    z-index: 2000;
                    top: 5px;}
    
    .m {    position: absolute;
            top: 11px; }
    
    #brend-foto {   position: absolute;
                    width: auto;
                    right: 10px;}

    #soc    {   top: 136px; 
                right: 0;
                li {width: 32%;}
                }
    
    .dropdown-content { top: 73px;
                        width: 250px;}
    
    #brend {height: 70px;}
    
    #brend-width    {	width: 60%;
                        margin: 0;
                        img {margin-top: 7px;}}
                        
    #brend-word {   width: 70%; 
                    left: 11%;
                    right: auto;
                    top:12px;
                    p {font-size: 20px;}
                    }
    #brend-tel {    left: 11%;
                    top: 45px;
                    width: 70%;
                    margin: 0;
                    p {font-size: 15px;}
                    }
    
    #map1 { float: right;
            padding-top: 5px;
            padding-right: 10px;
            padding-bottom: 10px;
            margin: 0;}
    #map2 { float: right;
            padding-top: 10px;
            width: 70%;    
            p {margin: 0;
                } }
    
    
    #map {  top: 80px;
            width: 55%;
            right: 0;
            background: rgba(0, 63, 125, 0.0);} 
    
    
    #proekt {top:40%;}
    #pr_snippet { font-size: 22px;}
    .pr_snippet_2 { font-size: 18px;}
    .left_content { width:60%;}
    .brick    { font-size: 18px;} 
    .cash     { font-size: 18px;} 
    
    
    
    
    }
    
@media (max-width: 700px)   { 
	
    .dropdown-content { 
                        width: 205px;}
    #brend-width    {   img {width: 120px;}
                        }      
    #brend-word { display: none; }
    #brend-tel {    top: 80px;
                    width: 100%;
                    right: 0;
                    left: 0;
                    p { float: right;
                background: rgba(0, 63, 125, 0.0);
                width: 350px;
                padding-right: 5px;
                padding-left: 5px;}        
                    }
    
    #btel { height: 20px;
            width: 400px;
            float: right;
            }
    
    
    #brend2 {   display: block; 
                position: absolute; 
                top: 10px;
                width: 60%;
                left: 20%;
                right: 20%;
                margin: 0;
                z-index: 2000;
                 }
    #stroy {text-align: center;
            margin: 0;
            font-weight: bold;
            font-size: 17px;
            color: #000;
            color: #FAFAFA;
            font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
            vertical-align: middle;}
    #JH    {text-align: center;
            margin: 0;
            font-weight: bold;
            font-size: 32px;
            color: #000;
            color: #FAFAFA;
            font-family: Arial, "DejaVu Sans Condensed", "Gill Sans", "Gill Sans MT", "Myriad Pro", Helvetical, sans-serif;
            vertical-align: middle;}
    #map1 { padding-right: 0;
            }
    #map2 {display: none;}
    
    #map { width: 400px;
            top: 98px;}
    
    #map3 {display: block;
            width: 350px;
            p { width: 360px;
                padding-top: 12px; 
            text-align: right;}
            }
    #soc {top:153px; }
     
    #proekt {top:35%;}
    #pr_snippet { font-size: 20px;}
    .pr_snippet_2 { font-size: 16px;}
    .left_content { width:75%;}
    .brick    { font-size: 16px;} 
    .cash     { font-size: 16px;} 
    
     }



@media (max-width: 569px) and (min-width: 470px){ 
	
    .dropdown { top: 5px;
                width: 80px;
                }
    .dropbtn:hover, .dropbtn:focus { width: 80px;}
    
    .dropdown-content { background: rgba(0, 63, 125, 0.95);}
    
    .m {   left: 14px; }
    
     #map { width: 360px;
            top: 120px;
            p {font-size: 12px;}}
    
    #soc {top:71px; }
    
    #stroy { font-size: 15px;}
    #JH    { font-size: 29px;}
    
    #brend2 {  top: 7px; }
    
    #brend-width    { img { margin-top: 7px;}}
                            
    #brend-tel {    top: 253px; }
    
    #btel { width: 350px;
            float: right;
            p { font-size: 13px;
                
                text-align: end;}
            }
    #map3 { width: 100%;}
    #map {  width: 100%;
            height: 45px;
            top: 270px;
            P { width: 390px; 
                padding-top: 11px;
            }
    }
        
    #width-border {     width: 96%;
                        margin-left: 0;    }
    
    #proekt {top: 310px;}
    #pr_snippet { font-size: 18px;}
    .pr_snippet_2 { font-size: 14px;
                    padding-left: 7%;
		            padding-right: 7%;}
    .left_content { width:85%;}
    .brick    { font-size: 14px;} 
    .cash     { font-size: 14px;} 
    }


@media (max-width: 470px) and (min-width: 370px){ 
	.dropdown { top: 3px;
                width: 58px;
                border: 0;
                }
    .dropbtn:hover, .dropbtn:focus { width: 80px;}
    .dropdown-content { background: rgba(0, 63, 125, 0.95);}
    
    .m {    left: 10px;
            top: 7px;
            img {width: 45px;}}
    
     #map { width: 360px;
            top: 120px;
            p {font-size: 12px;}}
    
    #stroy { 
             font-size: 15px;}
    #JH    { font-size: 24px;}
    
    #brend2 {   width: 70%;
                left: 12%;
                right: 18%; 
                top: 9px; }
    
    #brend {    height: 63px;}

    #brend-width    { img { width: 90px;
                            margin-top: 12px;}}
                            
    #brend-tel {top: 163px;
                padding-right: 0;
                p { background: 0;
                font-size: 12px;
                text-align: end;
                } }
      
    #map3 { width: 100%;}
    #map {  width: 100%;
            height: 45px;
            top: 175px;
            p {width: 300px; 
                padding-top: 10px;
            }
    }
   

    
    #soc  {     top:63px; 
                width: 120px;
                height: 40px;
            li  {   width: 40px;
                    height: 40px;
                    img { height: 40px;
                    width: 40px;}
                    a { height: 40px;
                    width: 40px;}
                }}
    
    #proekt {top: 30%;}
    
    #pr_snippet { font-size: 17px;
                    }
    .pr_snippet_2 { font-size: 14px;
                    padding-left: 5%;
		            padding-right: 5%;}
    .brick    { font-size: 14px;} 
    .cash     { font-size: 14px;}
    .left_content { width:90%;}
    
    
        }


@media (max-width: 370px) { 
.dropdown { top: 2px;
                width: 58px;
                border: 0;
                }
    .dropbtn:hover, .dropbtn:focus { width: 60px;}
    .dropdown-content { background: rgba(0, 63, 125, 0.95);}
    
    .m {    left: 10px;
            top: 3px;
            img {width: 45px;}}
    
     #map { width: 360px;
            top: 120px;
            p {font-size: 12px;}}
    
    #stroy { 
             font-size: 12px;}
    #JH    { font-size: 18px;}
    
    #brend2 {   width: 70%;
                left: 12%;
                right: 18%; 
                top: 9px; }
    
    #brend {    height: 51px;}

    #brend-width    { img { width: 70px;
                            margin-top: 12px;}}
                            
    #brend-tel {top: 155px;
                padding-right: 0;
                p { background: 0;
                font-size: 12px;
                text-align: center;
                } }
    #btel { width: 350px;
            p {text-align:right; 
                padding-right: 10px;}} 
    
    
    
    #map3 { width: 100%;}
    #map {  width: 100%;
            height: 45px;
            top: 165px;
            P {width: 270px; 
                padding-top: 12px;
            }
    }
    #soc  {     top:55px; 
                width: 120px;
                height: 40px;
            li  {   width: 40px;
                    height: 40px;
                    img { height: 40px;
                    width: 40px;}
                    a { height: 40px;
                    width: 40px;}
                }}
        
    #proekt {top: 30%;}
    #pr_snippet { font-size: 16px;}
    .pr_snippet_2 { font-size: 12px;
                    padding-left: 5%;
		            padding-right: 5%;}
    .brick    { font-size: 12px;} 
    .cash     { font-size: 12px;}
    .left_content { width:90%;}
}