@font-face {
    font-family: HelveticaNeueCyrMedium;
    src: url(../resources/fonts/HelveticaNeueCyr-Medium.otf); 
}

@font-face {
    font-family: HelveticaNeueCyrLight;
    src: url(../resources/fonts/HelveticaNeueCyr-Light.otf); 
}
@font-face{
    font-family: RobotoLight;
    src: url(../resources/fonts/Roboto-light.ttf);
}
@font-face{
    font-family: RobotoBold;
    src: url(../resources/fonts/Roboto-Bold.ttf);
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, 
blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, 
ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, 
hr, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, capxion, 
tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, 
figcapxion, footer, header, hgroup, menu, nav, output, ruby, section, summary, 
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    color: inherit;
    text-decoration: none;
}
body{
    font-family:  HelveticaNeueCyrLight;
}

.bold-text{
    font-family:  HelveticaNeueCyrMedium;
}

.popup-container{
    margin:  20px 0;
}

.popup{
    width:540px;
    margin: 0 auto;
    padding: 30px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.5);
    border-radius: 7px;
    box-sizing: border-box;
}

.undl{
    text-decoration: underline;
}

.instruction-container.iOS9{
    width:100%;
    text-align: center;
    font-family: RobotoLight;
    font-size: 24px;
}
.iOS9 .logo{
    margin: 0 auto;
    width:193px;
    height:48px;
    background: url(../resources/images/AdvertAppLogo.png) no-repeat;
    
}
.iOS9 .header{
    background-color: #80CF80;
    line-height: 0;
    padding: 2% 0;
}
.iOS9 .steps{
    position: relative;
    padding: 3% 0;   
}
.iOS9 .steps .number{
    position: absolute;
    top:0; 
    left:0;
    padding: 2% 0 0 3%;
}
.iOS9 .steps img{
    padding: 2% 2% 0 2%; 
    max-width: 92%;
}
.iOS9 .step-1{
    background-color: #FED770;
}
.iOS9 .step-2{
    background-color: #FB9D79;
}
.iOS9 .step-3{
    background-color: #ED706C;
}
.iOS9 .step-4{
    background-color: #87C9C8;
}
.iOS9 .step-5{
    background-color: #A49FD5;
}
.iOS9 .step-6{
    background-color: #6394BC
}
.iOS9 .step-7{
    background-color: #2ABB9C;
}
.iOS9 .step-8{
    background-color: #6EDE6E;
}

@media screen and (max-width:800px) {
    .iOS9 .steps{
        padding: 3% 10%;   
    }
    .iOS9 .steps .number{
        padding: 2% 0 0 3%;
    }
}

@media screen and (max-width:720px) {
    .popup{
        width: 100%;
    }
    .popup-container{
        padding: 0 10px ;
        box-sizing: border-box;
    }
}
@media screen and (max-width:640px) {
    .instruction-container.iOS9{
        font-size: 17px;
    }
    .iOS9 .logo{
        width:156px;
        height:41px;
        background-image: url(../resources/images/AdvertAppLogoSmall.png);  
    }
    .iOS9 .steps{
        padding: 4% 6%;   
    }
    .iOS9 .steps img{
        padding-top: 4%; 
        max-width: 80%;
    }
    .iOS9 .steps .number{
        position: static;
        padding: 0;
    }
    .iOS9 .header{
      padding: 3% 0;
    }

}

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

}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
    .iOS9 .logo{
        background-size: 156px auto;
        -webkit-background-size: 156px auto;
        background-image: url(../resources/images/AdvertApp_smallх2.png);  
    }
    
}