/* Базовые служебные */
.hidden{display:none}

/* Фон модального окна */
.mfp-bg{
	position:fixed;
	top:0;left:0;
	width:100%;height:100%;
	z-index:1042;
	background:#0b0b0b;
	opacity:.8;
}

/* Оболочка модалки */
.mfp-wrap{
	position:fixed;
	top:0;left:0;
	width:100%;height:100%;
	z-index:1043;
	outline:0;
}

/* Центрирование контента по вертикали */
.mfp-container{
	position:relative;
	width:100%;height:100%;
	text-align:center;
	padding:0 8px;
}
.mfp-container:before{
	content:'';
	display:inline-block;
	height:100%;
	vertical-align:middle;
}

/* Контент модалки */
.mfp-content{
	position:relative;
	display:inline-block;
	vertical-align:middle;
	margin:0 auto;
	text-align:left;
	z-index:1045;
	width: 100%;
    cursor: auto;
}

/* Кнопка закрытия */
.mfp-close{
	position:absolute;
	right:15px;
	top:10px;
	width:44px;
	height:44px;
	line-height:44px;
	text-align:center;
	background:#eff5f7;
	color:#0D878B;
	font-size:40px;
	font-weight: 100;
	border:none;
	opacity:1;
	cursor:pointer;
	padding: 0 0 18px 10px;
	z-index: 1046;
}
.mfp-close:hover{color:red}

/* Форма */
.popup__form{
	background-color: #EFF5F7;
	color:#000;
	position:relative;
	overflow:hidden;
	width:90%;
	max-width:620px;
	min-width:320px;
	margin:auto;
	border-radius:5px;
	padding:25px;
	font-family:'Roboto', sans-serif;
	box-sizing:border-box;
	min-height: 260px;
	      border-radius: 30px;
}

/* Экран "успех" */
.success{
	position:absolute;
	z-index:2;
	left:0;top:-100%;
	width:100%;height:100%;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:#fff;
	color:#000;
	opacity:0;
	transition:all .5s ease;
}
.success.active{
	top:0;
	opacity:1;
}
.success h3{
	font-size:25px;
	margin-bottom:20px;
}
.success p{
	display:flex;
	font-size:18px;
	padding:0 0 10px 0;
}

/* Контент заказа */
.order{text-align:center}
.h3{
font-family: 'Roboto', sans-serif;
    margin: 25px 0 0px;
    font-size: 28px;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 32px;
    letter-spacing: 0.02em;
    color: #222831;
}
.order p{
padding-bottom: 35px;
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #4b4b4b;
}
/* Поля ввода */

.order label{
	display: block;
    margin: 25px 0 0 15px;
    padding: 0 0 0 25px;
    color: #4b4b4b;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
}
.input{
	display:block;
	margin:auto;
	max-width:520px;
	min-width:250px;
	width:100%;
	height:40px;
	padding:0 15px;
	border:none;
	border-bottom:1px solid #0D878B;
	background:#EFF5F7;
	color:#4b4b4b;
	outline:0;
	box-sizing:border-box;
}
.input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
textarea:focus{
	color:#000;
}

/* Кнопка отправки */
.send{
margin-top: 40px;
    cursor: pointer;
    background-color: #C9DEE2;
    border-color: #C9DEE2;
    border: 1px solid #fff;
    outline: 0;
    transition: .5s;
    box-shadow: 5px 5px 22px 2px rgba(201, 222, 226, .4);
    -webkit-appearance: none;
    font-size: 14px;
    font-weight: 500;
    line-height: 15px;
    letter-spacing: 0.02em;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-radius: 190px 190px 190px 190px;
    padding: 0px 20px 0px 20px;
    min-height: 40px;
    flex-basis: 100%;
}
.send:hover{
	background:transparent;
	background-color: #4A7F89;
    color: #FFFFFF;
    border-color: #C9DEE2;
}
.send:active{
	background:#940b0d;
	transform:scale(.97);
	transition:.3s;
}

/* Анимация появления (используется класс .down на форме) */
@-webkit-keyframes down{
	0%{transform:scale(0)}
	50%{transform:scale(1)}
	100%{margin-top:0}
}
@keyframes down{
	0%{transform:scale(0)}
	50%{transform:scale(1)}
	100%{margin-top:0}
}
.down{
	-webkit-animation:down .5s alternate linear;
	        animation:down .5s alternate linear;
	transition:.5s;
}

/* Адаптив */
@media only screen and (max-width:480px){
	.popup__form{width:100%}
}