@charset "utf-8";
/* CSS Document */
	*{
		margin: 0;
		box-sizing: border-box;
	}

@media only screen and (min-width:1px){
	.size-1 {width: 100%; float: left;}
	.size-2 {width: 100%; float: left;}
	#castro .top {
		top: 20px;
		font-size: 20px;}

	#castro .bottom{
		bottom: 20px;
		font-size: 20px;
		width: 50%;
	}
	
	nav{
		background-color: #E1E1E1;
		height: 70px;
	}
	
}

@media only screen and (min-width:550px){
	.size-1 {width: 50%; float: left; min-height: 700px;}
	.size-2 {width: 100%;}
	#castro .top{
		top: 50px;
		font-size: 25px;
	}
	#castro .bottom{
		bottom: 45px;
		font-size: 18px;
		width: 50%;
	}
	nav{
		background-color: #E1E1E1;
		height: 35px;
	}
}

	section::after{
		content: "";
		clear: both;
}

	a:hover{
		background-color: white;
		color: #006983;
		text-decoration: underline;
		font-weight: bold;
	}

	#headerimage{
		width: 100%;
		height: auto;
		display: block;
	}

	
	body{
		max-width: 1400px;
		font-size: 14px;
		margin: 0 auto;
		background-color: white;
		font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
		color: white;
	}
	

	
	nav ul li{
		display: inline;
		margin-right: 20px;
	}

	nav ul li a {
	  display: inline-block;
	  padding: 7px 16px;
	}

	
	a{
		text-decoration: none;
		color: black;
	}
	
	h1,p{
		margin: 10px;
	}
		
	
	#list{		
		background-color: #006983;	
		font-size: 20px;
	}
	
	#pro{	
		background-color: #F4587A;
	
	}
	#pro img{
		width: 80%;
		height: auto;
		padding: 5% 5% 0;
	}
	
	#mer{
		background-color: #FFCB4F;
		color: black;
	}
	
	#mer img{
		width: 80%;
		height: auto;
		padding: 5% 5% 0;
	}
	
	#med{
		background-color: #DD4814;
	}
	
	#med img{
		width: 80%;
		height: auto;
		padding: 5%;
		border-radius: 50%;
	}
	
	#kock{
		background-color: #B2D79D;
		color: black;
	}
	
	#kock img{
		width: 40%;
		height: auto;
	}
	
	#kock ul{
		float: left;
		width: 50%;
	}
	
	#ser{
		background-color: #6673B6;
	}
	
	#ser img{
		width: 40%;
		height: auto;
	}
	
	#ser ul{
		float: left;
		width: 50%;
	}
	
	#sec{
		background-color: rgba(249,200,83,0.50);
		color: black;
	}
	
	#sec img{
		width: 80%;
		padding: 5%;
		height: auto;
	}
	
	#nar{
		background-color: rgba(244,88,122,0.5);
		color: black;
	}
	
	#nar img{
		width: 80%;
		padding: 5%;
		height: auto;
	}

	#castro {
		position: relative;
	}

	#castro img{
		width: 100%;
		height: auto;
		display: block;
	}
	
	
	#list h1{
		text-align: center;
		margin: 25px 0;
	}
	
	hr{
		width: 15%;
		margin-left: 42%;
	}

	#castro .top,
	#castro .bottom {
		  position: absolute;
		  left: 50%;
		  transform: translateX(-50%);
		  color: white;
		  text-align: center;
		}


	footer{
		background-color: #006983;
		padding: 10px;
		color: white;
		clear: both;
	}