body{
    margin:0;
    padding:0;
    font-family:arial, sans-serif;
    font-size:14px;
}
a{
    text-decoration:none;
    color:#000;
}
.main{
    margin:0 auto;
    width:850px;
}
.header{
    height:120px;
    color:grey;
}
.header-info{
    margin:50px 20px 0 20px;
    width:800px;
}
.header-image{
    float:left;
    width:50px;
}
.header-name{
    margin-left:10px;
    float:left;
}
.header-contact{
    float:right;
}
.mobile-menu{
    margin-top:60px;
    padding:20px;
    display:none;
    text-align:center;
    color:gray;
    cursor:pointer;
}
.mobile-menu:hover{
    background-color:#f5f5f5;
    color:#000;
}
#menu{
    height:80px;
    text-align:center;
    background-color:#fff;
    border-top:1px solid lightgrey;
    border-bottom:1px solid lightgrey;
}
#menu ul{
    list-style-type:none;
}
#menu ul li{
    display:inline;
}
#menu ul li a{
    padding:20px;
    color:grey;
    line-height: 51px;
}
#menu ul li a:hover{
    color:#000;
}
.content{
    margin:40px 0 0 0;
    font-family:'Open Sans', arial;
}
.content-image img{
    width:100%;
}
.article{
    margin:100px 0 100px 0;
    overflow:auto;
}
.article img{
    width:100%;
}
.cooperations{
    height:200px;
    clear:both;
}
.cooperations ul{
    list-style-type:none;
}
.cooperations img{
    float:left;
    width:200px;
}
.footer{
    padding:40px;
    clear:both;
    text-align:center;
}
@media only screen 
and (min-width : 320px)
and (max-width : 480px) {
    .main{
        margin:0;
        padding:0;
        width:100%;
    }
    .header-info{
        margin:0;
        width:100%;
        text-align:center;
    }
    .header-image{
        float:none;
        width:50px;
    }
    .header-name{
        margin-left:0;
        float:none;
    }
    .header-contact{
        float:none;
    }
    .mobile-menu{
        display:block;
    }
    #menu{
        display:none;
        margin-top:40px;
        padding:0;
        height:auto;
    }
    #menu ul{
        margin:0;
        padding:0;
    }
    #menu ul li{
        display:block;
    }
    .article{
        margin-left:11%;
        width:80%;
    }
    .cooperations p{
        text-align:center;
    }
}
@media only screen 
and (max-width : 850px){
    .main{
        margin:0;
        padding:0;
        width:100%;
    }
    .header-info{
        margin:0;
        width:100%;
        text-align:center;
    }
    .header-image{
        float:none;
        width:50px;
    }
    .header-name{
        margin-left:0;
        float:none;
    }
    .header-contact{
        float:none;
    }
    .mobile-menu{
        display:block;
    }
    #menu{
        display:none;
        margin-top:40px;
        padding:0;
        height:auto;
    }
    #menu ul{
        margin:0;
        padding:0;
    }
    #menu ul li{
        display:block;
    }
    .article{
        margin-left:11%;
        width:80%;
    }
    .cooperations p{
        text-align:center;
    }
}