/*modal*/




@media only screen and (min-width:100px) and (max-width:449px){
#modal_form {
	width:90%; 
	height: 200px; /* Размеры должны быть фиксированы */
	border-radius: 5px;
	/*border: 1px #000 solid;*/
	/*background: #ffff;*/
	position: fixed;
/* чтобы окно было в видимой зоне в любом месте */
	top: 5%; /* отступаем сверху 5%, остальные 5% подвинет скрипт */
	left: 5%; /* половина экрана слева */
	margin-top: 0px;	/* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 999; /* окно должно быть наиболее большем слое */
	padding: 0px 0px;

}

#modal_form  iframe{
width: 100%;
height: 200px;
border: 0px #fff solid;
}
}



@media screen and (min-width:450px) and (max-width:799px){
#modal_form {
	width: 430px; 
	min-height: 250px; /* Размеры должны быть фиксированы */
	border-radius: 5px;
	border: 1px #000 solid;
	background: #ffff;
	position: fixed;
 /* чтобы окно было в видимой зоне в любом месте */
	top: 10px; /* отступаем сверху 5%, остальные 5% подвинет скрипт */
	left: 50%; /* половина экрана слева */
	margin-top: 10px;
	margin-left: -226px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 5; /* окно должно быть наиболее большем слое */
	padding: 10px 10px;

}
#modal_form  iframe{
width: 450px;
height: 250px;
}
}

@media screen and (min-width: 800px){
#modal_form {
	width: 640px; 
	height: 360px; /* Размеры должны быть фиксированы */
	border-radius: 5px;
	border: 1px #000 solid;
	background: #fff;
	position: fixed;
/* чтобы окно было в видимой зоне в любом месте */
	top: 10px; /* отступаем сверху 5%, остальные 5% подвинет скрипт */
	left: 50%; /* половина экрана слева */
	margin-top: 10px;
	margin-left: -330px; /* тут вся магия центровки css, отступаем влево и вверх минус половину ширины и высоты соответственно =) */
	display: none; /* в обычном состоянии окна не должно быть */
	opacity: 0; /* полностью прозрачно для анимирования */
	z-index: 5; /* окно должно быть наиболее большем слое */
	padding: 10px 10px;
}

}


/* Кнопка закрыть для тех кто в танке) */
#modal_form #modal_close{
	width: 50px;
	height: 15px;
	position: absolute;
	top: -10px;
	right: 15px;
	cursor: pointer;
	display: block;
border: 1px #0074ae solid;
border-radius: 25px;
text-align: center;
padding: 5px 0px 9px 0px;
color:  #fff;
font-size:15px;
font: Tahoma, Verdana, Arial, Helvetica, sans-serif;

background: #0074ae;

 -webkit-transition: All 0.5s ease;
  -moz-transition: All 0.5s ease;
  -o-transition: All 0.5s ease;
  -ms-transition: All 0.5s ease;
  transition: All 0.5s ease;


}


#modal_form #modal_close:hover {
	
border: 1px #0091d9 solid;
color:  #0091d9;
background: #fff;

}




/* Подложка */
#overlay {
	z-index: 3; /* подложка должна быть выше слоев элементов сайта, но ниже слоя модального окна */
	position: fixed; /* всегда перекрывает весь сайт */
	background-color: #000; /* черная */
	opacity: 0.8; /* но немного прозрачна */
	width: 100%; 
	height: 100%; /* размером во весь экран */
	top: 0; 
	left: 0; /* сверху и слева 0, обязательные свойства! */
	cursor: pointer;
	display: none; /* в обычном состоянии её нет) */
}