@font-face{
font-family:'Brown';
src: url('font/BrownPro-Regular.eot');
src: url('font/BrownPro-Regular?iefix') format('eot'),
	 url('font/BrownPro-Regular.woff2') format('woff2'),
	 url('font/BrownPro-Regular.woff') format('woff'),
	 url('font/BrownPro-Regular.ttf') format('truetype'),
	 url('font/BrownPro-Regular.svg#Brown') format('svg');
font-weight:normal;
font-style:normal;
}	

#container-project, #container-info{max-width:1255px;margin:50px auto 20px;font-family:'Brown',sans-serif}
#container-project img{max-width:1255px;width:100%!important}
#container-info h2 {margin-bottom: 11px}
.project-description{
    position:relative;
    margin:100px auto;
    text-align: center;
    font-family: "Brown";
    letter-spacing: 3px;
    width:50%;
}

.project-description h2{text-transform:uppercase;margin-bottom:20px;letter-spacing: 1px;}
.project-description ul{list-style: none;padding-left:0}
.project-description li{display: inline-block; vertical-align: top;padding-right: 5px}
.project-description li a{font-size: 20px}
.project-description .category,.social{position:absolute;top:0;right:0}
.project-description a:link{color: #000000 !important;text-decoration: underline !important;}
.project-description a:visited{color: #000000 !important;text-decoration: underline !important;}
.project-description p{
    text-align:justify;line-height:1.5em;font-size:19px;font-family:'Brown',sans-serif;
    text-align:center;
}
.project-gallery img{margin-bottom:40px}
.footer{
    position:relative;
    text-align: center;
    margin: auto;
}
.footer p {
    font-size:10px;
}
.top{text-transform:uppercase}
.top a:hover{cursor:pointer}
.top a,.social a{text-decoration:none;color:#000;font-family:'Brown',sans-serif}
.social a{transform:none}
.social li{display:inline-block;margin-left:20px}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.project-description{margin:20px 0}
.project-description h2{font-size:1.2em;}

.project-gallery img{margin-bottom:20px}
.footer a{font-size:12px}
}

/* Iphone 2-3-4 */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) {
#container-project{margin:70px auto 20px}
#container-info{margin-top: 63px !important}
.project-description li{display:block}
.project-description li a{display:block;width:100%;text-align:center}
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) {
#container-project{margin:60px auto 20px}
#container-info{margin-top: 63px !important}
.project-description li{display:block}
.project-description li a{display:block;width:100%;text-align:center}
}