#msg_pop{
background: #fff;
display: none;
position: fixed;
z-index: 99999;
bottom: 20px;
left:20px;
width: 100%;
max-width: 480px;
height: 280px;
padding: 25px 5px 0;
font-size:14px;
color:#6e6e6e;
line-height:18px;
-webkit-box-shadow: 0px 3px 10px #ccc;
-moz-box-shadow: 0px 3px 10px #ccc;
box-shadow: 0px 3px 10px #ccc;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}
.popup-title {
padding: 0.5em 0 0;
text-align:center;
font-size:21px;
line-height: 26px;
margin-bottom: 15px;
}
.orange {
color: #f26422;
}
#msg_close{
display:block;
position:absolute;
top:5px;
right:10px;
line-height:15px;
width:30px;
height:30px;
text-align:center;
color:#6e6e6e;
cursor:pointer;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
#msg_close:hover {
background-color:#fff;
color:#000;
}
.fadeIn{
    animation-name: fadeIn;
    -webkit-animation-name: fadeIn; 
     animation-duration: 0.4s; 
    -webkit-animation-duration: 0.4s;
     animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     
     visibility: visible !important; 
}
 
@keyframes fadeIn {
    0% {transform: scale(0.7);opacity: 0.5;}
    80% {transform: scale(1.1);}       
    100% {transform: scale(1);opacity: 1;}       
}
 
@-webkit-keyframes fadeIn {
    0% {-webkit-transform: scale(0.7);opacity: 0.5;}
    80% {-webkit-transform: scale(1.1);}       
    100% {-webkit-transform: scale(1);opacity: 1;}       
}
.fancy__popup-wrap {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.fancy__popup-title {
    margin-bottom: 22px;
    font-size: 21px;
    line-height: 5px;
    text-align: center;
    letter-spacing: 1px;
}
.sm__popup-content {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.sm__popup-preview {
    position: relative;
    -webkit-flex-basis: 155px;
    -ms-flex-preferred-size: 155px;
    flex-basis: 155px;
    max-width: 155px;
    text-align: center;
}
.sm__popup-preview img {
    position: relative;
    width: 106px;
    height: 193px;
    max-width: 100%;
}
.sm__popup-steps {
    width: 100%;
    margin-left: 30px;
}
.sm__popup-step {
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
	line-height: 15px;
}
.ts-list {
    list-style: none;
	font-weight: bold;
}
.ts-list li::before {
    /*content: '\2022';
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 18px;
    color: #f26422;*/
	list-style-type: none;
}
.sm__popup .ts-list li {
    margin-bottom: 11px;
    color: #6e6e6e;
}
.ts-list li {
    position: relative;
    margin-bottom: 15px;
    padding-left: 15px;
}
.sm__popup-step .ts-list li .accent {
    color: #3c3c3b;
}
.button, button, input[type="submit"] {
    background: #f26422;
    text-align: center;
    color: #fff;
    position: relative;
    cursor: pointer;
    text-decoration: none;
	border-radius: 3px;
}
.sm__popup button, .sm__popup-btn {
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 500;
    letter-spacing: 1px;
}
.sm__popup-btn {
    width: 100%;
    max-width: 220px;
    height: 35px !important;
    line-height: 32px !important;
    margin: 18px 0 0;
}
/*   ----step2----  */
.sm__popup-step {
    position: relative;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .2s ease;
    transition: opacity .2s ease;
}
.sm__popup-title {
    margin-bottom: 8px;
    font-size: 18px;
}
.sm__popup-subtitle {
    font-size: 16px;
    color: #6e6e6e;
}
.sm__popup .form-inline--sk {
    max-width: 220px;
    margin: 10px 0 0;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.form-inline--sk input::-moz-placeholder {
    font-size: .85em;
    line-height: 1.1em;
    color: #bfbfbf;
    font-weight: 400;
}
.form-inline--sk span.ff__underline::after {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    height: 3px;
    width: 100%;
    border-radius: 5px;
    background: rgba(60,60,59,.42);
}
.form-inline--sk span.ff__underline {
    position: relative;
    display: inline-block;
    width: 218px;
    height: 30px;
}
.form-inline--sk input[type="tel"] {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    font-size: 18px;
    font-weight: 500;
    border: none;
    background: 0 0;
    text-align: center;
	font-family: core_sans;
}
.sm__popup-step.hide {
    height: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    z-index: -1;
}
.sm__popup-step.hide {
    visibility: hidden;
}
[data-step="2"] {
    max-height: 540px;
}
.hidden, [hidden] {
    display: none;
}
.sm__popup-desc {
    margin-bottom: 15px;
    font-size: 11px;
    color: #6e6e6e;
}
.sm__popup span.ff__underline {
    width: 100%;
}
.sm__popup button, .sm__popup-btn {
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 500;
    letter-spacing: 1px;
}
.sm__popup button {
    height: 35px;
    line-height: 30px;
    margin: 13px 0 10px;
    background: #f26422;
    border-color: #f26422;
    color: #fff;
	border-color: #f26422;
}
.phone a, body, input[type="tel"], input[type="text"] {
    color: #3c3c3b;
}
.clearfix:after, .fancybox-close:after, .fancybox-close:before, .form-inline--sk span.ff__underline:after, .swiper-pagination-bullet:after {
    content: '';
}
/*   ----END step2----  */

/*    ----- 360x640px   --------- */
@media (max-width: 360px){
#msg_pop{
padding: 25px 20px 0;
left: 10px;
background: url(http://oknas.okna-plus.dp.ua/wp-content/themes/twentyseventeen/assets/images/icon-man.png) 10px 120% no-repeat #fff;
max-width: calc(100% - 20px);
background-size: 70px 132px;
height: 287px;
}
.fancy__popup-wrap{
	-webkit-box-pack: center;
justify-content: center;
-webkit-box-flex: 1;
flex-grow: 1;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.fancy__popup-title {
    margin-bottom: 15px;
}
.sm__popup-preview {
    display: none;	
}
.sm__popup-steps {
    margin: 0;
	width: 110%;
}
.sm__popup-step {
    position: relative;
    height: 165px;
}
.ts-list li::before {
    /*content: '\2022';
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 18px;
    color: #f26422;*/
	list-style-type: none;
}
.sm__popup .ts-list li {
    margin-bottom: 4px;
}
.ts-list li {
    margin-bottom: 0px;
}
.sm__popup-btn {
    margin-top: 0;
	font-size: 13px !important;
	position: absolute !important;
    right: 0;
    bottom: 0;
    max-width: 175px;
	font-weight: 600;
}

}

/*    ----- 320x480px   --------- */
@media (max-width: 320px){
.sm__popup-steps {
    margin: 0;
	width: 110%;
}
}

/*    ----- 480x320px   --------- */
@media (max-width: 480px){
#msg_pop {
	max-width: 440px;
}
}	

/*    ----- 411x500px   --------- */
@media (max-width: 411px){
#msg_pop{
padding: 25px 20px 0;
left: 10px;
background: url(http://oknas.okna-plus.dp.ua/wp-content/themes/twentyseventeen/assets/images/icon-man.png) 10px 120% no-repeat #fff;
max-width: calc(100% - 20px);
background-size: 70px 132px;
height: 287px;
}
.fancy__popup-wrap{
	-webkit-box-pack: center;
justify-content: center;
-webkit-box-flex: 1;
flex-grow: 1;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.fancy__popup-title {
    margin-bottom: 15px;
}
.sm__popup-preview {
    display: none;	
}
.sm__popup-steps {
    margin: 0;
	width: 110%;
}
.sm__popup-step {
    position: relative;
    height: 165px;
}
.ts-list li::before {
    /*content: '\2022';
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 18px;
    color: #f26422;*/
	list-style-type: none;
}
.sm__popup .ts-list li {
    margin-bottom: 4px;
}
.ts-list li {
    margin-bottom: 0px;
}
.sm__popup-btn {
    margin-top: 0;
	font-size: 13px !important;
	position: absolute !important;
    right: 0;
    bottom: 0;
    max-width: 175px;
	font-weight: 600;
}
}
/*    ----- 414x736px   --------- */
@media (max-width: 414px){
#msg_pop{
padding: 25px 20px 0;
left: 10px;
background: url(http://oknas.okna-plus.dp.ua/wp-content/themes/twentyseventeen/assets/images/icon-man.png) 10px 120% no-repeat #fff;
max-width: calc(100% - 20px);
background-size: 70px 132px;
height: 287px;
}
.fancy__popup-wrap{
	-webkit-box-pack: center;
justify-content: center;
-webkit-box-flex: 1;
flex-grow: 1;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.fancy__popup-title {
    margin-bottom: 15px;
}
.sm__popup-preview {
    display: none;	
}

.sm__popup-step {
    position: relative;
    height: 165px;
}
.ts-list li::before {
    /*content: '\2022';
    position: absolute;
    top: -2px;
    left: 0;
    font-size: 18px;
    color: #f26422;*/
	list-style-type: none;
}
.sm__popup .ts-list li {
    margin-bottom: 4px;
}
.ts-list li {
    margin-bottom: 0px;
}
.sm__popup-btn {
    margin-top: 0;
	font-size: 13px !important;
	position: absolute !important;
    right: 105px;
    bottom: 0;
    max-width: 175px;
	font-weight: 600;
}


}