@media screen and (min-width:460px) and (max-width:770px) {


    .bg-black{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0px;
        left: 0px;
        background: rgba(0,0,0,.85);
    }
    
    .modal{
        width: 650px;
        height: 700px;

background: #3db5f1; /* Old browsers */
background: -moz-linear-gradient(left, #3db5f1 0%, #d0dbe2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3db5f1 0%,#d0dbe2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3db5f1 0%,#d0dbe2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3db5f1', endColorstr='#d0dbe2',GradientType=1 ); /* IE6-9 */     
     
        position: absolute;
        transform: translate(-50%, -50%);
        z-index: 1;
        margin-top: 50vh;
        margin-left: 50%;
    }
    
    .modal-sections {margin-top:15%}
    
    .modal>.modal-close{
        width: 63px;
        height: 63px;
        background: #ffffff;
        transform: translate(50%, -50%);
        position: absolute;
        right: 0px;
        top: 0px;
        border-radius: 50%;
        cursor: pointer;
    }
    .modal>.modal-close::before{
        content: "";
        width: 50px;
        height: 2px;
        background: #5e6064;
        display: block;
        transform: rotate(-45deg);
        position: absolute;
        top: 30px;
        left: 7px;
    }
    
    .modal>.modal-close::after{
        content: "";
        width: 50px;
        height: 2px;
        background: #5e6064;
        display: block;
        transform: rotate(45deg);
        position: absolute;
        top: 30px;
        left: 7px;
    }
    
    .modal-body{
        width: 550px;
        height: 600px;
        margin: 50px;
        background-position: top right;
        background-size: cover;
        text-align: center;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        transition: 1s all;
    }
    
    .modal-body.active{
        visibility: visible;
        opacity: 1;
    }
    
    .modal.step-1>.modal-body{
        #background-image: url('../images/1.jpg');
    }
    
    .modal.step-2>.modal-body{
        #background-image: url('../images/2.jpg');
    }
    
    .modal.step-3>.modal-body{
        #background-image: url('../images/3.jpg');
    }
    
    .modal.step-4>.modal-body{
        #background-image: url('../images/4.jpg');
    }
    
    .modal.step-5>.modal-body{
        #background-image: url('../images/5.jpg');
    }
    
    .modal.step-6>.modal-body{
       #background-image: url('../images/6.jpg');
    }
    
    .modal.step-7>.modal-body{
        #background-image: url('../images/7.jpg');
    }
    
    .modal.step-8>.modal-body{
        #background-image: url('../images/8.jpg');
    }
    
    .modal.step-9>.modal-body{
        #background-image: url('../images/9.jpg');
    }
    
    .modal.step-10>.modal-body{
        #background-image: url('../images/10.jpg');
    }
    span.test-name {
    font-family: 'Roboto', sans-serif;
    outline: none !important;
    color: #5ab2f0;
    margin: 0px;
    padding: 0px;
    font-weight: bold;
    font-size: 30px;
}    
    
    
    .title-big{
      font-size: 31px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;  
    }
    .n7>.title-big, .n8>.title-big, .n9>.title-big, .n10>.title-big{
        font-size: 33px;
        font-weight: 500;
        margin-top: 130px;
    }
    .title{
        font-size: 25px;
        font-weight: 500;
        color: #ffffff;
        margin-top: 20px;
        text-transform: uppercase;
        padding: 0px 30px;
    }
    .text{
        font-size: 22px;
        font-weight: 300;
        color: #ffffff;
        padding: 0px 100px;
        margin-top: 25px;
    }
    .n7>.text, .n8>.text, .n9>.text, .n10>.text{
        padding: 0px 50px;
        font-size: 24px;
    }
    .text>a{
        font-size: 24px;
        color: #3eb5f1;
        font-weight: 400;
        text-decoration: underline;
    }
    
    .text>a:hover{
        color: #3fade5;
    }
    .loader{
        font-size: 18px;
        color: #ffffff;
        margin-top: 15px;
    }
    .btn{
        background: #3eb5f1;
        width: 280px;
        font-size: 30px;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        padding: 20px 0px;
        border-radius: 40px;
        cursor: default;
        pointer-events: none;
        display: inline-block;
        margin-top: 60px;
    }
    .btn.active{
        background: #3eb5f1;
        cursor: pointer;
        pointer-events: initial;
    }
    .btn.active:hover{
        background: #3cace4;
    }
    .n1>.title-big{
        margin-top: 100px;
    }
    .n2>.title{
        margin-top: 130px;
    }
    .n3>.title{
        margin-top: 130px;
        padding: 0px 100px;
    }
    .n4>.title{
        margin-top: 130px;
    }
    .n5>.title{
        margin-top: 80px;
        padding: 0px 70px;
    }
    .n6>.title{
        margin-top: 130px;
    }
    
    
    .check{
        display: inline-block;
        margin-right: 50px;
        color: #ffffff;
        font-size: 36px;
        cursor: pointer;
        vertical-align: middle;
        margin-top: 40px;
    }
    
    .check::before{
        content: "";
        width: 33px;
        height: 30px;
        background: url('../images/chek.png');
        background-size: auto;
        background-position: right top;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    .check.active::before{
        background-position: left top;
    }
    
}


@media screen and (max-width:460px) {

    .bg-black{
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0px;
        left: 0px;
        background: rgba(0,0,0,.85);
    }
    
    .modal{
        width: 90%;
        height: 94vh;

background: #3db5f1; /* Old browsers */
background: -moz-linear-gradient(left, #3db5f1 0%, #d0dbe2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #3db5f1 0%,#d0dbe2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #3db5f1 0%,#d0dbe2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3db5f1', endColorstr='#d0dbe2',GradientType=1 ); /* IE6-9 */

        position: absolute;
        transform: translate(-50%, -50%);
        z-index: 1;
        margin-top: 50vh;
        margin-left: 50%;
    }
    
    .modal>.modal-close{
        width: 40px;
        height: 40px;
        background: #ffffff;
        transform: translate(30%, -30%);
        position: absolute;
        right: 0px;
        top: 0px;
        border-radius: 50%;
        cursor: pointer;
        z-index: 2;
    }
    .modal>.modal-close::before{
        content: "";
        width: 30px;
        height: 2px;
        background: #5e6064;
        display: block;
        transform: rotate(-45deg);
        position: absolute;
        top: 19px;
        left: 6px;
    }
    
    .modal>.modal-close::after{
        content: "";
        width: 30px;
        height: 2px;
        background: #5e6064;
        display: block;
        transform: rotate(45deg);
        position: absolute;
        top: 19px;
        left: 6px;
    }
    
    .modal-body{
        width: 90%;
        height: 90vh;
        margin: 5%;
        background-position: top right;
        background-size: cover;
        text-align: center;
        position: absolute;
        visibility: hidden;
        opacity: 0;
        #transition: 1s opacity;
    }
    
.title-big,.title,.text,.btn,.check,.loader {position:relative;top: 185px;}

.n2 .title-big,.n2 .title,.n2 .text,.n2 .btn,.n2 .check,.n2 .loader {position:relative;top: 130px;}
.n3 .title-big,.n3 .title,.n3 .text,.n3 .btn,.n3 .check,.n3 .loader {position:relative;top: 180px;}
.n4 .title-big,.n4 .title,.n4 .text,.n4 .btn,.n4 .check,.n4 .loader {position:relative;top: 140px;}

.n5 .title-big,.n5 .title,.n5 .text,.n5 .btn,.n5 .check,.n5 .loader {position:relative;top: 190px;}
.n6 .title-big,.n6 .title,.n6 .text,.n6 .btn,.n6 .check,.n6 .loader {position:relative;top: 130px;}
.n7 .title-big,.n7 .title,.n7 .text,.n7 .btn,.n7 .check,.n7 .loader {position:relative;top: 150px;}
.n8 .title-big,.n8 .title,.n8 .text,.n8 .btn,.n8 .check,.n8 .loader {position:relative;top: 120px;}
.n9 .title-big,.n9 .title,.n9 .text,.n9 .btn,.n9 .check,.n9 .loader {position:relative;top: 120px;}
.n10 .title-big,.n10 .title,.n10 .text,.n10 .btn,.n10 .check,.n10 .loader {position:relative;top: 120px;}
.modal-body img {width: 100%;height: auto;position: absolute;top: 0;left:0}    
    
    .modal-body.active{
        visibility: visible;
        opacity: 1;
    }
    
    .modal.step-1>.modal-body{
        #background-image: url('../images/1.jpg');
    }
    
    .modal.step-2>.modal-body{
        #background-image: url('../images/2.jpg');
        #background-position: top center;
    }
    
    .modal.step-3>.modal-body{
        #background-image: url('../images/3.jpg');
        #background-position: top center;
    }
    
    .modal.step-4>.modal-body{
        #background-image: url('../images/4.jpg');
        #background-position: top center;
    }
    
    .modal.step-5>.modal-body{
        #background-image: url('../images/5.jpg');
    }
    
    .modal.step-6>.modal-body{
        #background-image: url('../images/6.jpg');
        #background-position: top center;
    }
    
    .modal.step-7>.modal-body{
        #background-image: url('../images/7.jpg');
        #background-position: top right;
    }
    
    .modal.step-8>.modal-body{
        #background-image: url('../images/8.jpg');
        #background-position: top left;
    }
    
    .modal.step-9>.modal-body{
        #background-image: url('../images/9.jpg');
        #background-position: top center;
    }
    
    .modal.step-10>.modal-body{
        #background-image: url('../images/10.jpg');
        #background-position: top center;
    }
span.test-name {color: #065984;font-size: 25px;}
    .title-big{
        font-size: 23px;
        font-weight: bold;
        color: #ffffff;
        text-transform: uppercase;
        padding: 0px 20px;
    }
    .n7>.title-big, .n8>.title-big, .n9>.title-big, .n10>.title-big{
        font-size: 22px;
        font-weight: 500;
        margin-top: 10vh;
    }
    .title{
        font-size: 20px;
        font-weight: 500;
        color: #ffffff;
        margin-top: 3vh;
        text-transform: uppercase;
        padding: 0px 30px;
    }
    .text{
        font-size: 20px;
        font-weight: 300;
        color: #ffffff;
        padding: 0px 30px;
        margin-top: 5vh;
    }
    .n7>.text, .n8>.text, .n9>.text, .n10>.text{
        padding: 0px 10px;
        font-size: 18px;
    }
    .text>a{
        font-size: 19px;
        color: #3eb5f1;
        font-weight: 400;
        text-decoration: underline;
    }
    
    .text>a:hover{
        color: #3fade5;
    }
    .loader{
    font-size: 18px;
    color: #ffffff;;
    margin-top: 15px;
    text-decoration: underline;
    }
    .btn{
        background: #3eb5f1;
        width: 90%;
        font-size: 22px;
        color: #ffffff;
        font-weight: bold;
        text-align: center;
        padding: 20px 0px;
        border-radius: 40px;
        cursor: default;
        pointer-events: none;
        display: inline-block;
        margin-top: 7vh;
    }
    .btn.active{
        background: #3eb5f1;
        cursor: pointer;
        pointer-events: initial;
    }
    .btn.active:hover{
        background: #3cace4;
    }
    .n1>.title-big{
        margin-top: 15vh;
    }
    .n2>.title{
        margin-top: 15vh;
    }
    .n3>.title{
        margin-top: 7vh;
        padding: 0px 20px;
    }
    .n4>.title{
        margin-top: 15vh;
    }
    .n5>.title{
        margin-top: 3vh;
        padding: 0px 20px;
    }
    .n6>.title{
        margin-top: 15vh;
    }
    
    
    .check{
        display: block;
        margin-right:0px;
        color: #ffffff;
        font-size: 27px;
        cursor: pointer;
        vertical-align: middle;
        margin-top: 20px;
    }
    
        
    .check.z2{
        margin-left: 10px;
    }
    .check::before{
        content: "";
        width: 33px;
        height: 30px;
        background: url('../images/chek.png');
        background-size: auto;
        background-position: right top;
        display: inline-block;
        margin-right: 10px;
        vertical-align: middle;
    }
    
    .check.active::before{
        background-position: left top;
    }
    
}

@media screen and (max-width: 390px)  {
.modal.step-5 {height: 99vh;}
.title-big,.title,.text,.btn,.check,.loader {position:relative;top: 115px;}

.n2 .title-big,.n2 .title,.n2 .text,.n2 .btn,.n2 .check,.n2 .loader {position:relative;top: 100px;}
.n3 .title-big,.n3 .title,.n3 .text,.n3 .btn,.n3 .check,.n3 .loader {position:relative;top: 150px;}
.n4 .title-big,.n4 .title,.n4 .text,.n4 .btn,.n4 .check,.n4 .loader {position:relative;top: 100px;}

.n5 .title-big,.n5 .title,.n5 .text,.n5 .btn,.n5 .check,.n5 .loader {position:relative;top: 190px;}
.n6 .title-big,.n6 .title,.n6 .text,.n6 .btn,.n6 .check,.n6 .loader {position:relative;top: 110px;}
.n7 .title-big,.n7 .title,.n7 .text,.n7 .btn,.n7 .check,.n7 .loader {position:relative;top: 130px;}
.n8 .title-big,.n8 .title,.n8 .text,.n8 .btn,.n8 .check,.n8 .loader {position:relative;top: 110px;}
.n9 .title-big,.n9 .title,.n9 .text,.n9 .btn,.n9 .check,.n9 .loader {position:relative;top: 135px;}
.n10 .title-big,.n10 .title,.n10 .text,.n10 .btn,.n10 .check,.n10 .loader {position:relative;top: 110px;}
}

@media screen and (max-width: 280px) {
.modal.step-5 {height: 99vh;}
.title-big,.title,.text,.btn,.check,.loader {position:relative;top: 75px;}

.n2 .title-big,.n2 .title,.n2 .text,.n2 .btn,.n2 .check,.n2 .loader {position:relative;top: 90px;}
.n3 .title-big,.n3 .title,.n3 .text,.n3 .btn,.n3 .check,.n3 .loader {position:relative;top: 140px;}
.n4 .title-big,.n4 .title,.n4 .text,.n4 .btn,.n4 .check,.n4 .loader {position:relative;top: 90px;}

.n5 .title-big,.n5 .title,.n5 .text,.n5 .btn,.n5 .check,.n5 .loader {position:relative;top: 160px;}
.n6 .title-big,.n6 .title,.n6 .text,.n6 .btn,.n6 .check,.n6 .loader {position:relative;top: 100px;}
.n7 .title-big,.n7 .title,.n7 .text,.n7 .btn,.n7 .check,.n7 .loader {position:relative;top: 120px;}
.n8 .title-big,.n8 .title,.n8 .text,.n8 .btn,.n8 .check,.n8 .loader {position:relative;top: 100px;}
.n9 .title-big,.n9 .title,.n9 .text,.n9 .btn,.n9 .check,.n9 .loader {position:relative;top: 100px;}
.n10 .title-big,.n10 .title,.n10 .text,.n10 .btn,.n10 .check,.n10 .loader {position:relative;top: 100px;}
}


@media (max-width: 520px){
    .title{
        padding: 0;
        font-size: 16px;
    }
    .modal-body img{
        position: unset;
    }
    .title-big, .title, .text, .btn, .check, .loader{
        top: 0;
    }
    .n2 .title-big, .n2 .title, .n2 .text, .n2 .btn, .n2 .check, .n2 .loader{
        top: 0;
    }
    .n3 .title-big, .n3 .title, .n3 .text, .n3 .btn, .n3 .check, .n3 .loader{
        top: 0
    }
    .n4 .title-big, .n4 .title, .n4 .text, .n4 .btn, .n4 .check, .n4 .loader{
        top: 0;
    }
    .n5 .title-big, .n5 .title, .n5 .text, .n5 .btn, .n5 .check, .n5 .loader{
        top: 0;
    }
    .n6 .title-big, .n6 .title, .n6 .text, .n6 .btn, .n6 .check, .n6 .loader{
        top: 0
    }
    .n7 .title-big, .n7 .title, .n7 .text, .n7 .btn, .n7 .check, .n7 .loader{
        top: 0;
    }
    .n8 .title-big, .n8 .title, .n8 .text, .n8 .btn, .n8 .check, .n8 .loader{
        top: 0;
    }
    .n9 .title-big, .n9 .title, .n9 .text, .n9 .btn, .n9 .check, .n9 .loader{
        top: 0;
    }
    .n10 .title-big, .n10 .title, .n10 .text, .n10 .btn, .n10 .check, .n10 .loader{
        top: 0;
    }
    .modal-body .title-big{
        margin-top: 10px;
    }
    .modal-body .title{
        margin-top: 10px;
    }
    .check{
        font-size: 22px;
    }
    .loader{
        font-size: 16px;
    }
    .btn{
            padding: 12px 0px;
    }
    span.test-name{
        font-size: 16px;
    }
    .modal-body{
        background: rgba(0, 0, 0, 40%);
    }
    span.test-name{
        color: #9ad9fa;
    }
}