@import "font-awesome/css/font-awesome.min.css";

html, body{
    height: 100%;
	overflow:hidden;
}
body{
    background-image: url('../images/uc-bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
	overflow-x: hidden;
    margin: 0;
    color: #FFF;
    font-family: 'Lato', sans-serif;
	background-color:#000;
}
/*body::before { content: "";  top: 0;   left: 0;  bottom: 0;   right: 0;   position: absolute;
  z-index: -1;  
}*/
body::after{content: ""; background:url(../images/patern.png) left top repeat; z-index:-1; position:absolute; left:0; top:0; width:100%; height:100%; }

*{
    box-sizing: border-box;
}
.wrapper{
    margin: 0 auto;
    max-width: 1200px;
    min-height: 100%;
    position: relative;
    padding: 70px 10px;
}


/*-------------------------------------------------------------*/
/*-----------------------TOP BLOCK-----------------------------*/
/*-------------------------------------------------------------*/
.top{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    padding: 10px 20px;
}
.top ul{
    float: right;
    margin: 0;
    padding: 0;
}
.top li {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.7);
    list-style: none;
    white-space:nowrap;
    margin-left: 36px;
    border-radius: 25px;
    display: inline-block;
    -webkit-transition: all 1s; /* Safari */
    transition: all 1s;
    height: 50px; min-width: 50px;
    line-height: 50px;
}
.top li a {
    opacity: 0;
    color: #212121;
    max-width: 0;
    display: inline-block;
    text-decoration: none;
    transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color;
}
.top li a span {
    float:left;
    display: block;
    padding-left: 20px;
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: 400;
}
.top li .icon {
    display: inline-block;
    color: #555;
    font-size: 24px;
    height: 50px; width: 50px;
    border-radius: 50%;
    vertical-align: top;
    line-height: 50px;
    text-align: center;
    -webkit-transition: all .5s; /* Safari */
    transition: all .5s;
    position: relative;
    z-index: 1;
}
.top li:hover {
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    list-style: none;
    white-space:nowrap;
    /*margin-right: 10px;*/
    display: inline-block;
    border-radius: 10px;
}
.top li:hover .icon {
    color: #212121;
}
.top li:hover a {
    color: #212121;
    opacity: 1;
    max-width: 380px;
    transition: max-width 1s ease-out .1s, opacity 1s ease-out .1s, color .2s;
}


/*-------------------------------------------------------------*/
/*----------------------MAIN BLOCK-----------------------------*/
/*-------------------------------------------------------------*/
.main-block{
    position: absolute;
    text-align: center;
    top: 50%; left: 50%;
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -webkit-transform: translate(-50%, -50%); /* Safari */
    transform: translate(-50%, -50%);
	width:100%;
}
.main-block .content-holder{
    position: relative;
    padding: 35px 150px 45px 150px;
}
/*.main-block .content-holder:before{
    content: '';
    position: absolute;
    width: 5000px; height: 100%;
    left: -2000px; top: 0;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: -1;
}*/
.main-block img{
    display: inline-block;
    max-width: 100%; height: auto;
	margin-top:-80px;
}
.main-block h1{
    font-size: 24px;
    font-weight: 400;
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 25px; margin-top:30px;
}
.main-block h1:before{
    content: '';
    position: absolute;
    left: 50%; bottom: 0;
    margin-left: -75px;
    width: 150px; height: 3px;
    background-color: #0095DA;
}
.main-block p{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 400;
	margin-bottom:0;
}


/*-------------------------------------------------------------*/
/*----------------------BOTTOM BLOCK---------------------------*/
/*-------------------------------------------------------------*/
.bottom{ position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px 20px; }
.bottom .links-holder{  display: inline-block; width:100%; text-align:center;}
.bottom .links-holder p, .bottom .links-holder a{ font-size:13px; font-weight:300; color:#FFF; text-decoration:none;}
.bottom .links-holder p span{font-size:11px; color:#FFF;}


@media only screen and (max-device-width: 640px) and (orientation: landscape){
.main-block{position:inherit; -webkit-transform:none; -ms-transform:none; transform:none; top:auto; left:auto; }
.main-block img{width:120px;}
.bottom .links-holder p, .bottom .links-holder a{margin:0;}
.bottom .links-holder p span{width: 410px; margin: 0 auto; display: inline-block;}
}


@media(min-width: 768px) and (max-width: 991px){
    /*-------------------------------------------------------------*/
    /*-----------------------TOP BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .top li { margin-left: 26px; }


    /*-------------------------------------------------------------*/
    /*----------------------MAIN BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .main-block .content-holder{ padding: 30px 20px 30px 20px; }
    .main-block img{ /*max-height: 40px;*/ max-height: none; }
    .main-block h1{
        font-size: 21px;
        padding-bottom: 30px;
        margin-bottom: 20px;
    }
    .main-block p{
        font-size: 16px;
    }


    /*-------------------------------------------------------------*/
    /*----------------------BOTTOM BLOCK---------------------------*/
    /*-------------------------------------------------------------*/
    .bottom .links-holder a{
        margin-left: 26px;
    }
}

@media(max-width: 767px){
    /*-------------------------------------------------------------*/
    /*-----------------------TOP BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .top{
        padding: 10px;
    }
    .top li {
        margin-left: 16px;
    }
    .top li a span {
        padding-left: 15px;
        font-size: 14px;
    }



    /*-------------------------------------------------------------*/
    /*----------------------MAIN BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .main-block .content-holder{
        padding: 20px 10px 20px 10px;
    }
    .main-block img{
        /*max-height: 30px;*/
		max-height: none;
    }
    .main-block h1{
        font-size: 18px;
        padding-bottom: 20px;
        margin-bottom: 15px;
    }
    .main-block p{
        font-size: 14px;
    }


    /*-------------------------------------------------------------*/
    /*----------------------BOTTOM BLOCK---------------------------*/
    /*-------------------------------------------------------------*/
    .bottom{
        padding: 10px;
    }
    .bottom .links-holder a{
        margin-left: 16px;
    }
}

@media(max-width: 480px){
	body{ background-position: -340px;}
    /*-------------------------------------------------------------*/
    /*-----------------------TOP BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .top li {   margin-left: 11px; }
	.top li a {position:relative; left:5px;}
	.top li:hover a {max-width:360px;}
    .top li a span { padding-left: 10px;font-size: 12px; }

    /*-------------------------------------------------------------*/
    /*----------------------MAIN BLOCK-----------------------------*/
    /*-------------------------------------------------------------*/
    .main-block .content-holder{ padding: 15px 10px 15px 10px; }
    .main-block img{
        /*max-height: 25px;*/
		max-height: none;
		max-width: 180px;
    }
    .main-block h1{
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }
    .main-block p{ font-size: 13px; }

    /*-------------------------------------------------------------*/
    /*----------------------BOTTOM BLOCK---------------------------*/
    /*-------------------------------------------------------------*/
    .bottom .links-holder a{
        margin-left: 11px;
    }
}
@media(max-width:420px){
	body{ background-position: -432px;}
	.bottom .links-holder p span{ max-width: 340px; margin: 0 auto; display: inline-block; font-size:9px} 	
}
@media(max-width:414px){ body{ background-position: -435px;} }
@media(max-width:380px){ body{ background-position: -280px;} }
@media(max-width:360px){ body{ background-position: -300px;} }
@media(max-width:320px){ 
	body{ background-position: -330px;} 
	.bottom .links-holder p span{ max-width: 320px; font-size:8px}
}