@font-face {
    font-family: 'arr_wg';
    src: url('../fonts/ArR_WG.eot');
    src: url('../fonts/ArR_WG.eot?#iefix') format('embedded-opentype'),
         url('../fonts/ArR_WG.woff') format('woff'),
         url('../fonts/ArR_WG.ttf') format('truetype'),
         url('../fonts/ArR_WG.svg#arr_wg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'tondo';
    src: url('../fonts/Tondo_Cyr_Lt.eot');
    src: url('../fonts/Tondo_Cyr_Lt.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Tondo_Cyr_Lt.woff') format('woff'),
         url('../fonts/Tondo_Cyr_Lt.ttf') format('truetype'),
         url('../fonts/Tondo_Cyr_Lt.svg#tondo') format('svg');
    font-weight: normal;
    font-style: normal;

}

body{
    font-family: 'Open Sans', sans-serif;
    margin:0;
    padding:0;
    text-align: center;
    position: relative;
}

#header{
    min-width:850px;
    height:220px;
    text-align:left;
}

#main{
    min-width:850px;
    text-align: left;
}

#footer{
    background:url(../images/footer-bgr.jpg) repeat-x bottom left #0092cd;
    min-width:850px;
    padding-bottom:20px;
}

/*Header*/

#header #header-text{
    width:585px;
    margin-top:15px;
    margin-right:50px;
    float:right;
}


#header #header-text h1{
    font-family: 'arr_wg';
    margin:0;
    padding:0;
    font-size:36px;
    color:#0092cd;
}

#header #header-text span{
    font-family: 'Open Sans', sans-serif;
    background:url(../images/point.png) no-repeat left top;
    padding-left:20px;
    font-size: 14px;
    color:#0092cd;
    font-weight:600;
}

#header a{
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    color:#0092cd;
    font-weight:600;
}


/*Main*/

#main #purple{
    background:url(../images/purple-bgr.png) top right no-repeat #a74498;
    width:100%;
    display:inline-block;
}

#main #purple .arrow-down{
    border-top:25px solid #a74498;
}


#main #green{
    background:url(../images/green-bgr.png) top right no-repeat #84c64c;
    width:100%;
    display:inline-block;
}

#main #green .arrow-down{
    border-top:25px solid #84c64c;
}

#main #blue{
    background:url(../images/blue-bgr.png) top right no-repeat #0092cd;
    width:100%;
    display:inline-block;
}

#main #blue .arrow-down{
    border-top:25px solid #0092cd;
}
#main .info{
    width:400px;
    margin:70px 0 65px 40px ;
    text-align:center;
}

#main .info h2{
    font-family: 'tondo';
    margin:0 0 5px 0;
    padding:0;
    font-size:101px;;
    color:#ffffff;
}

#main .info p{
    margin:0;
    padding:0;
    font-size:21px;
    color:#ffffff;
}

#main .brands{
    background:#ffffff;
    text-align: center;
    position:relative;
}

#main .brands .arrow-down{
    width: 0; 
    height: 0; 
    border-left: 25px solid transparent;
    border-right: 25px solid transparent;
    position:absolute;
    margin-left:-12px;
    top:0;
    left:50%;
}

#main .brands ul{
    margin:0 auto;
    padding:0;
    position:relative;
}

#main .brands ul li{
    margin:33px 15px 20px 15px;
    display: inline-block;
}

#main .brands ul li:hover{
    cursor: pointer;
}

#main .brands ul li .popup{
    background:#ffffff;
    width:565px;
    padding:25px;
    margin-left:-310px;
    text-align: left;
    position:absolute;
    left:50%;
    bottom:98px;
    box-shadow:3px 3px 3px rgba(0, 0 ,0 ,0.2);
    z-index:100;
    visibility: hidden;
}

#main .brands ul li .popup.open{
    visibility: visible;
}

#main .brands ul li .popup .image-box{
    width:266px;
    float:left;
    position:relative
}

.content{
    width:275px; 
    height:255px; 
    margin:0 0 0 20px;
    padding:0;
    overflow:auto;  
    -webkit-border-radius:3px; 
    -moz-border-radius:3px; 
    border-radius:3px;
    float:left;
}

.content p{
    font-size:13px;
    color:#0092cd;
}

#main .brands .popup .image-box .popup-arrow{
    background:url(../images/popup-arrow.png)no-repeat top left;
    width:22px;
    height:20px;
    position:absolute;
    margin-left:-12px;
    top:inherit;
    bottom:-45px;
    z-index:100;
}

#main .brands .box1 .popup .image-box .popup-arrow{
    left:225px;
}

#main .brands .box2 .popup .image-box .popup-arrow{
    left:355px;
}

#main .brands .box3 .popup .image-box .popup-arrow{
    left:85px;
}

#main .brands .box4 .popup .image-box .popup-arrow{
    left:220px;
}

#main .brands .box5 .popup .image-box .popup-arrow{
    left:355px;
}

#main .brands .box6 .popup .image-box .popup-arrow{
    left:488px;
}

#main .brands .box7 .popup .image-box .popup-arrow{
    left:30px;
}

#main .brands .box8 .popup .image-box .popup-arrow{
    left:150px;
}

#main .brands .box9 .popup .image-box .popup-arrow{
    left:285px;
}

#main .brands .box10 .popup .image-box .popup-arrow{
    left:425px;
}

#main .brands .box11 .popup .image-box .popup-arrow{
    left:555px;
}

#main .mCSB_draggerRail{
    background:#e7e7e7;
    width:5px;
}

#main #purple .mCSB_dragger_bar{
    background:#a74498;
    width:5px;
}

#main #green .mCSB_dragger_bar{
    background:#84c64c;
    width:5px;
}

#main #blue .mCSB_dragger_bar{
    background:#0092cd;
    width:5px;
}

/*Footer*/

#footer a{
    margin:20px 0 0 0;
    font-size:13px;
    color:#ffffff;
    display:inline-block;
}

#footer p{
    margin:18px 0 0 0;
    font-size:13px;
    color:#9edaf2;
    font-style:normal;
}

#footer address{
    margin:18px 0 0 0;
    font-size:13px;
    color:#9edaf2;
    font-style:normal;
}

#footer address a{
    color:#9edaf2;
    margin: 0;
}

#popUp{
    background: rgba(0, 0, 0, 0.8);
    position: absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    z-index: 9998;
}

#PopUpCont{
    width:787px;
    margin: 20px auto;
    position: relative;
}

#PopUpCont a{
    background: #ffffff;
    padding:10px 14px;
    position: absolute;
    top:0;
    right:0;
    font-size:16px;
    color:#0092cd;
    font-weight:bold;
    text-decoration: none;
}

#PopUpCont img{
    width:100%;
    height: auto;
}