* {
 margin: 0;
 padding: 0;
 font-family: Century Gothic;
 
 }
 
 body{
	 background-color:	white;
	  margin: 0;
 padding: 0;
 }

header{
padding:20px;
font-size:35px;
//display:flex;
}

#logo{
	vertical-align:middle;
}



.d{
	display:inline-block;
	vertical-align:middle;
}
.submenu
{
    display: none;   
    position: absolute;
    text-align: center;
    background-color: black;
	min-width:300px;
}

div.main_menu_item:hover div
{
    display: block;
}
#z{
	padding:15px;
}
h1{
	text-align:center;
	font-size:37px;
}
#zag {
	
	font-weight:bold;
	//padding:50px;
	vertical-align:middle;
	float:right;
	text-align:right;
	padding:50px;

	
}

//#hi{
	//object-fit:contain;
	//width:10%;
	//height:100%;
//}

.head_div{
	display:inline-block;
	margin: 0;
	padding: 0;



}

.topnav{
	background-color:black;
	font-size:25px;
	//width:100%;
	//float:middle;
}	


ul.topnav{
	list-style-type:none;
	margin:0;
	padding:0;
	overflow:hidden;
	background-color:black;
	//width:300px;
}

ul.topnav li{
	float:right;
	//overflow:hidden;
	//background-color:black;
	//display:inline;
	width:300px;
}

ul.topnav li a{
	display:block;
	color:white;
	text-align:center;
	padding:15px 40px 15px 40px;
	text-decoration:none;
}

.topnav li a:hover{
	background-color:white;
	color:black;
	transition:0.5s;
}

#ppred{
	margin:auto;
	max-width:591px;
	text-align:center;
}

.pred{
    vertical-align:top;
	//text-align:center;
	margin:auto;
	padding-top:10px;
	padding:20px;
	padding-bottom:0;
	display:inline-block;
	//width:50%;
	min-width:250px;
	max-width:250px;

	font-size:30px;
	//margin:-10px;
}
.pred img{
	
	max-width:200px;
}

#z1{
	width:5%;
	//padding-left:10%;
}
#z{
	margin:0;

}
#service{
	padding:20px;
	background-color:white;//#111111;
	height:auto;
	font-size:25px;
	color:	black; //#5615A1;
	margin:0;
	text-align:center;
}

//div{
	// height:921px;
//}
.serv{
	display:inline-block;
	vertical-align:top;
	//text-align:center;
	margin:20px;
	padding:15px;
	background-color:white;//#B08ED7;
	width:auto;//300px;
	max-width:300px;
	min-width:290px;
	height:auto;//500px;
	color:black;
	//border:solid 1px black;
	//border-color:black;
	//border-radius:7px;
	//box-shadow:0 0 3px 3px #4D2495;
	//transition:all 0.4s;
	

}

.serv:hover{
	//box-shadow:0 0 7px 7px #4D2495;//#5615A1;
	//transform: scale(1.03);
	//transition:all 0.6s;
}

#contacts{
	background-color:black;
	//margin:10%;
	padding:50px;
	//padding-top:5%;
	color:	white;
}

.soc{
	display:inline-block;
	padding:2%;
	transition:all 0.4s;
}
.soc:hover{
	transform: scale(1.06);
	transition:all 0.6s;
}
	
.tel{
	font-size:25px;
}
#dost{
	font-size:25px;
	text-align:center;
	background-color:white;//#111111;
	color:	black;
	padding-left:10%;
	padding-top:5%;
}
.dostb{
	display:inline-block;
	padding-left:10%;
	padding-right:10%;
}
	
ul{
	font-size:25px;
	text-align:left;

	margin-left:5%;
padding-bottom:50px;
}

#dost li{
	list-style-type:none;
	text-decoration:underline;
}

#dost li:before{
	content:"+  "
}

.dost_o{
	margin-left:22px;
	margin-bottom:15px;
}

#l1{
	//list-style-image:url(l1.png);

	
}
#l2{
	//list-style-image:url(l2.png);
	
}
#l3{
	//list-style-image:url(l3.png);
}
#l4{
	//list-style-image:url(l4.png);
}
#prices{
	font-size:20px;
	text-align:center;
	//background-color:#0F6673;
	//color:	white;
	padding-left:0;
	padding:20px;
}
hr{
	height:16px;
	background-color:black;
	border-radius:12px;
}
.price{
	display:inline-block;
	vertical-align:top;
	//background-color:black;//#4D2495;
	width:auto;
	max-width:300px;
	min-width:290px;
	//height:auto;
	//color:white;
	//border:solid 1px black;
	border-color:black;
	border-radius:7px;
	padding:10px;
	margin:10px;
}
#where{
	background-color:black;
	color:white;
	padding:30px;
	//text-align:center;
	font-size:25px;
}
#where p{
margin:20px;
}
#foot2{
	background-color:black;
	color:white;
	padding:30px;
	//text-align:center;
	font-size:25px;
}
#foot2 p{
margin:20px;
}
#foot2 a:link, a:hover, a:active{
color:white;
}
#port{
	margin:20px;
}
	
#port p{
	font-size:20px;
	margin:15px;
}
#port a{
	color:black;
	font-size:25px;
}

#start_cont{
	text-align:right;
	//padding-left:0;
	//flex:1;
	vertical-align:middle;
}

.wrap{
	        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
}
.okno{
	background-color:black;
	width: 450px;
       //height: 400px;
        //text-align: center;
        padding: 15px;
		padding-top:0;
        border: 5px solid white;
        color: white;
        //display: none;
		position:fixed;
		top:50%;
		left:50%;
		float:center;
		vertical-align:center;
		transform:translate(-50%,-50%);
	//font-size:30px;
	//z-index:100;
	    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
//.wrap.target{
	//display:block;
//}
.okno form .form_o input{
height:30px;
width:100%;
font-size:20px;
margin-top:5px;
margin-bottom:5px;

}
#comm{
height:80px;
width:100%;
font-size:20px;
margin-top:5px;
margin-bottom:5px;
resize:none;
}
#subm{
	text-align:center;
}
button{
	height:30px;
	font-size:20px;
	background-color:white;
}
.tel_footer{
	width:100%;
	font-size:min(60px, calc(10vw - 2px));
}
@media only screen and (max-width: 570px){
	.tel_footer{
	//font-size:calc(12vw - 0px);
	}
}
@media only screen and (max-width: 520px){
	#start_cont{
	display:none;
	//font-size:7.5vw;
	}
}
@media only screen and (max-width: 400px){
	.d img{
	width:100%;
	}
}
@media only screen and (max-width: 614px){
	ul.topnav li{

	width:100%;
}
}

@media only screen and (max-width: 505px){
	.okno{

	width:100%;
}
}
.ph{
	display:inline-block;
	width:350px;
	//height:400px;
}
@media only screen and (max-width: 540px){
	.ph{

	width:100%;

}
}
.myBtn{
	width:210px;
	text-decoration:underline;
	font-size:25px;
}
.myBtn:hover,
.myBtn:focus{
	cursor: pointer;
	background-color:white;
	color:black;
	transition:0.5s;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}

#close{
	text-align:right;
}
#close:hover,
#close:focus {
    color: gray;
    text-decoration: none;
    cursor: pointer;
}


@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:50%; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:50%; opacity:1}
}