@font-face
{
font-family: source-sans-pro;
src: url(“fonts/font.ttf");
}

html {
	height: auto;
}

header {
	transition: 1s;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 4pc;
	background-color: orangered;
	margin-top: -0.5pc;
}

body {
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(156,156,156,1) 100%);
}

.logo {
	transition: 1s;
	color: #fff;
	height: 3pc;
	float: left;
	margin-top: 0.2pc;
	margin-left: 2pc;
}

.gallery {
	margin-left: 5%;
	margin-right: 5%;
	margin-top: 25px;
	margin-bottom: 2%;
}

.gallery img {
    transition: 1s;
    padding: 2.5pc;
    width: 16%;
    height: 16%;
}

.gallery img:hover{
    filter: drop-shadow(16px 16px 20px black);
    width: 17%;
    height: 17%;
	margin-bottom: -1%;

}

.copyright {
	font-family: 'Source Sans Pro', sans-serif;
	text-align: center;
	padding-top: 2pc;
	padding-bottom: 2pc;
	background-color: orangered;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 1pc;
}
@media ( min-width : 1px ) and (max-width : 1315px ){
	
	body {
background: rgb(0,0,0);
background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(156,156,156,1) 100%);
height: 100%
}
	
	.gallery img {
    transition: 1s;
    padding: 2.5pc;
    width: 35%;
    height: 35%;
}
	.gallery img:hover{
    filter: drop-shadow(16px 16px 20px black);
    width: 36%;
    height: 36%;
	margin-bottom: -1%;

}
	
	header {
	margin-top: 0pc;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 8pc;
	background-color: orangered;
	margin-top: -15px;
}
	
	.logo {
	width: 12pc;
	height: auto;
	float: left;
	margin-top: 0.8pc;

}
	
	.copyright {
	font-family: 'Source Sans Pro', sans-serif;
	text-align: center;
	padding-top: 2pc;
	padding-bottom: 2pc;
	background-color: orangered;
	color: #FFFFFF;
	text-transform: uppercase;
	font-weight: lighter;
	letter-spacing: 2px;
	border-top-width: 1pc;
	font-size: 2pc;
}
	
}