html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
    -webkit-text-size-adjust:none;
    -webkit-tap-highlight-color:transparent;
}
html {
     overflow: -moz-scrollbars-vertical;
     overflow: scroll;
}
body{
    margin:0 auto;
    width:100%; 
    height:auto;
    font: 12px normal Verdana, Arial, Helvetica, sans-serif;
    font-family:"Cambria"; 
    color: #333333;
}

#bg1{
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background:url(../img/bg1.jpg);
    background-repeat:no-repeat;

    -webkit-background-size: 100%;
    -moz-background-size: 100%;
    -o-background-size: 100%;
    background-size: 100%;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    z-index: -10;
}
#bg{
    position:fixed;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background:url(../img/bg_mask.png);
    z-index: -9;
}

a{
    text-decoration:none;
    color:inherit;  
}
#mainApp{
    width:830px;
    height:auto;
    border:none 1px #ffffff;
    margin:0 auto;
}
#header{
    position:relative;
    width:100%;
    height:128px;
}
#header:nth-child(1)>img{
    position:absolute;
    top:-2px;
    left:-5px;
    cursor:pointer;
}
#header>p:nth-child(2){
    position:absolute;
    top:0;
    right:0px;
    font-size:12px;
    text-shadow:0 1px 1px rgba(0,0,0, 0.2);
}
#header>p:nth-child(3){
    position:absolute;
    top:15px;
    right:0px;
    font-size:12px;    
    text-shadow:0 1px 1px rgba(0,0,0, 0.2);    
}
#content{
    position:relative;
    width:100%; 
    float:left;
    height:auto;
    background:#ffffff;
    -moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.2);
    -webkit-box-shadow:  0px 3px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.2);
    overflow: hidden;
    /*height:503px;*/
}
.content-block{
    position: relative;
    float:left;
    border:none 1px #000;
    width:100%;
    height:auto;
    opacity: 0;
}

#main_menu{
    position:absolute;
    height:25px;
    width:auto;
    right:0px;
    bottom:0px;
    list-style:none;
    margin:0;
    padding:0;
    line-height:25px;
    z-index:4;
}
#main_menu>li{
    position:relative;
    font-size:14px;
    float:right;
    padding-left:8px;   
    padding-right:8px;   
    text-shadow:0px 1px 0px rgba(255,255,255,0.4);    
    background:url(../img/white_line.png) repeat-x;  
    background-position: 0px 25px;
    -webkit-transition:background-position .1s ease-in;
    -moz-transition:background-position .1s ease-in;
    -o-transition:background-position .1s ease-in;
    transition:background-position .1s ease-in;
}
#main_menu>li.selected,
#main_menu>li:hover{
    color:#333333;
    background:url(../img/white_line.png) repeat-x;  
    background-position: 0px 0px;
    cursor: pointer;
}

#footer{
    float:left;
    background:#333333;
    width:100%;
    height:auto;
    margin-top:16px;
    padding-top: 18px;
    padding-bottom: 9px;
    mix-blend-mode: darken;
    z-index: -8;
}
#footer>p:first-child{

}
#footer>p{
    margin:0;
    margin-bottom:9px;
    margin-left:18px;
    color:gray;
    font-family: "Cambria";
    text-align: left;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.05em;
    display: flex;
    align-items:center;
    color:#D3D3D3;
}

#contacts{
    float:left;
    width:100%;
    height:auto;
    padding-top: 18px;
    padding-bottom: 9px;
    z-index: -8;
}
#contacts>p{
    margin:0;
    margin-bottom:9px;
    margin-left:18px;
    color:gray;
    font-family: "Cambria";
    text-align: left;
    font-size: 14px;
    line-height: 14px;
    letter-spacing: 0.05em;
    display: flex;
    align-items:center;
    color:black;
}

.footerIcon{
    width:14px;
    height:14px;
    line-height: 14px;
    margin-right: 10px;
}

.article-description{
    width:auto;
    margin-left:18px;
    margin-right:18px;
    font-size: 14px;
    letter-spacing: 0.05em;
}
/*********************** intro *************************/
#intro{
    float:left;
    border:none 1px #000;
    width:100%;
}

.intro-text-block{
    float:left;
    width:262px;
    border:none 1px #000;
    margin-left:15px;
}
.intro-title{
   font-family:"Cambria";    
   border:none 1px #000;
   width:auto;
   font-size:24px;
   line-height:22px;
   letter-spacing:1px;
}
.intro-description{
   font-family:"Cambria";
   text-align:left;
   border:none 1px #000;
   width:auto;
   font-size:14px;
   line-height:16px;
   overflow:hidden;
   letter-spacing:0.1em;
}
/********************* slider ***************************/
.intro-slider{
    float:left;
    margin-left: 18px;
    width:520px;
    height:250px;
    border:none 1px #000;
}
.article-slider{
    width:auto;
    margin-left: 18px;
    margin-right: 18px;
    border:none 1px #000;
}
.slider{
    position:relative;
    width:100%;
    height:100%;
    border:none 0px #000;
    overflow:hidden;
    background-color:#ffffff;
}
.slide-container{
    width:100%;
    height:100%;
    overflow:hidden;
    position:relative;
}

.slider-title{
    font-family:"Cambria";
    position:absolute;
    width:auto;
    font-weight:lighter;
    height:20px;
    line-height:20px;
    font-size:14px;
     background-color:#1b1b1b;
     color:#ffffff;  
     margin-top:14px;
     margin-left:14px;
     padding-left:6px;
     padding-right:6px; 
     cursor:pointer;  
     z-index:2;   
}
ul.dots{
    position:absolute;
    bottom:8px;
    right:8px;
    border:none 1px #000;
    margin:0;
    padding:0;
    z-index:2; 
}
ul.dots>li{
    float:left;
    display:block;
    margin:0;
    padding:0;
    width:8px;
    height:8px;
    border-radius:4px;
    background:#1B1B1B;  
    margin-left:6px;
    margin-top:4px; 
    cursor:pointer;     
}
ul.dots>li:hover{
   background-color:#ffffff;      
}
ul.dots>li.selected{
   background-color:#ffffff;      
}
ul.dots>li.arrow{
    float:left;
    display:block;
    margin:0;
    padding:0;
    width:14px;
    height:14px;
    border-radius:3px;
    background:#1B1B1B;  
    cursor:pointer;
}
ul.dots>li.l{
    background:url(../img/arrows.png) no-repeat 4px 4px;    
    background-color:#1B1B1B;      
    margin-left:8px;         
}
ul.dots>li.r{
    background:url(../img/arrows.png) no-repeat -11px 4px;    
    background-color:#1B1B1B;      
    margin-left:2px;          
}
ul.dots>li.l:hover{
    background:url(../img/arrows_s.png) no-repeat 4px 4px;    
    background-color:#ffffff;      
    margin-left:8px;         
}
ul.dots>li.r:hover{
    background:url(../img/arrows_s.png) no-repeat -11px 4px;    
    background-color:#ffffff;      
    margin-left:2px;          
}
/********************** icons **************************/
div.icons{
    float:left;
    height:auto;
    border:none 1px #000;
    width:100%;
}
.content-block-wide{
    position:relative;
    float:left;
    border:none 1px #000;
    width:100%;
    height:auto;   
}

.header-line{
    width: auto;
    border:none 1px #000;
    height:15px;
    margin-left:18px;
    margin-right:18px;
    background: url(../img/header_line.png) repeat-x 0 4px;           
}
.header-line>.header{
    background:#ffffff;
    line-height:15px;
    margin-left:20px;
    padding-left:7px;
    padding-right:7px;
    display: inline;
    font-size: 14px;
    letter-spacing: 0.05em;
}

.icon-container{
    position:relative;
    float:left;
    width:182px;
    height:173px;
    margin-left:18px;
    margin-right:4px;
    margin-bottom:0px;
    border:none 1px #000;
    text-align:center;  
}
.icon-image-wrap{
    width:182px;
    height:124px;
    position:relative;
}
.icon-image-wrap>img{
    width:182px;
    height:124px;
}
div.icon-container>p{
    padding:0px;
    margin:0px;
    display:block;
    position:absolute;
    top:136px;
    font-size:13px;
    border:none 1px #000; 
    width:182px;
}
.cursor-pointer{
    cursor:pointer;
}
.mt-18{
    margin-top: 18px;
}
.mt-10{
    margin-top: 10px;
}
.mb-10{
    margin-bottom: 10px;
}
.link-button{
    color:#000;
    cursor:pointer;
    letter-spacing: 0.05em;
}
.link-button:hover{
    color:#6A7D87;
}

.preload-image{
    width:100%;
    height: 100%;
    background: rgb(124,124,124);
    background: linear-gradient(180deg, rgba(124,124,124,1) 0%, rgba(255,255,255,0) 100%);
    position:absolute;
}
.preload-image>img{
    opacity:0;
    width:100%;
}
.preload-image>img.loaded{
    opacity:1;
    -webkit-transition:opacity 1s ease-in;
    -moz-transition:opacity 1s ease-in;
    -o-transition:opacity 1s ease-in;
    transition:opacity 1s ease-in;
}

[v-cloak] { display:none; }

@media only screen and (min-width: 200px) {
    #mainApp{
        width:425px;
    }
    .intro-text-block{
        display: none;
    }
    .intro-slider{
        width:385px;
        height:216px;
    }
    .article-slider{
        width:385px;
        height:216px;
    }
}

@media only screen and (min-width: 880px) {
    #mainApp{
        width:830px;
    }
    .intro-text-block{
        display: block;
    }
    .intro-slider{
        width:520px;
        height:292px;
    }
    .article-slider{
        width:794px;
        height:446px;
    }
}