@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600);

* {
	margin:0px;
	padding:0px;
	color:inherit;
	font-size:inherit;
	line-height:inherit;
	font-weight:inherit;
	outline:none;
}
strong {
	font-weight:600;
}
em {
	font-style:italic;
}

body {
	font-family:"Open Sans";
	font-size:0.5cm;
	line-height:0.75cm;
	font-weight:300;
	margin:1em;
	color:rgb(32,64,128);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1 {
	font-weight:600;
	font-size:0.75cm;
}
h1, p {
	margin:0 0 0.25cm 0;
}
p {
}
ul {
	list-style:none;
}
ul > li {
	display:inline-block;
	position:relative;
}
ul > li > a {
	display:block;
	width:200px;
	height:200px;
	padding:1px;
	border:1px solid rgb(32,64,128);
	margin:0 0.5cm 0.5cm 0;
	box-shadow:3px 3px 2px rgba(0,0,0,0.3);
	transition:box-shadow 0.1s ease-out 0s;
}
ul > li > a:hover {
	box-shadow:15px 15px 30px -5px rgba(0,0,0,0.2);
	z-index:999;
}
ul > li > a:focus {
	border:1px solid rgb(255,64,128);
}
ul > li > a > img {
	display:inline-block;
	width:200px;
	height:200px;
	background-color:rgb(240,240,240);
}
a {
	transition:color 0.2s ease-out 0s;
}
a:hover {
	color:rgb(0,128,192);
}
a:focus {
	color:rgb(255,64,128);
}
input[type=submit] {
	transition:background-color 0.2s ease-out 0s;
	background-color:rgb(32,64,128);
	color:rgb(255,255,255);
	border:none;
	padding:0cm 0.2cm 0cm 0.2cm;
	border-radius:0.1cm;
	cursor:pointer;
	font-size:20px;
}
input[type=submit]:hover {
	background-color:rgb(0,128,192);
}
input[type=submit]:focus {
	background-color:rgb(255,64,128);
}


@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Smartphones (portrait and landscape) ----------- */

}

@media only screen 
and (min-width : 321px) {
/* Smartphones (landscape) ----------- */

}

@media only screen 
and (max-width : 320px) {
/* Smartphones (portrait) ----------- */

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* iPads (portrait and landscape) ----------- */

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* iPads (landscape) ----------- */

}

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* iPads (portrait) ----------- */

}

@media only screen 
and (min-width : 1200px) {
/* Desktops and laptops ----------- */

}

@media only screen 
and (min-width : 1700px) {
/* Large screens ----------- */

}

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* iPhone 4 ----------- */

}