@charset "utf-8";
/* CSS Document */



@media (max-width: 500px){
/* layout */
header{
	
	
	padding: 45px 0;
	
	
}

.section {
	
	padding: 45px;
}


.Container{
	
	width:90%;
	max-width: 920px;
	margin: 0 auto;
	height: auto;
	height: 87px;
	background-image: url("../images/cmplogo 320.png");
	background-repeat: no-repeat;
	

	
	
	
}


.Content{
	
	width:90%;
	max-width: 920px;
	margin: 0 auto;
	
}



input[type=submit] {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     background-color: green;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}


input[type=submit]:hover {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     background-color: white;
  border: none;
  color: green;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
	
	.Whist{
		align-content: center;
		height: 180px;
		width:90%;
	max-width: 180px;
	margin: 0 auto;
	background-image: url("../images/whistle 190.jpg");
	background-repeat: no-repeat;
background-size: 100% auto;
	float:none;
		border: black;
		border:6px solid black;
	
		
		
	}
	
	
}




@media (min-width: 500px){
/* layout */
header{
	
	
	padding: 45px 0;
	
	
}

.section {
	
	padding: 45px;
}


.Container{
	
	width:90%;
	margin: 0 auto;
	max-width: 920px;
height: 230px;
	background-image: url("../images/cmplogo 800.png");
	background-repeat: no-repeat
	
}


.Content{
	
	width:90%;
	max-width: 920px;
	margin: 0 auto;
    
	
	
	
}



input[type=submit] {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     background-color: green;
  border: none;
  color: white;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}


input[type=submit]:hover {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
     background-color: white;
  border: none;
  color: green;
  padding: 16px 32px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}
	
	.Whistleft{
		align-content: center;
		height: 250px;
		width:90%;
	max-width: 337px;
	margin: 0 auto;
	float: left
		
		
	}
	.Whistright{
		align-content: center;
		height: 250px;
		width:90%;
	max-width: 333px;
	margin: 0 auto;
	float:right
	
		
		
	}
	.Whist{
		align-content: center;
	height: 238px;
	width:90%;
	max-width: 238px;
	margin: 0 auto;
	background-image: url("../images/whistle 190.jpg");
	background-repeat: no-repeat;
	background-size: 100% auto;
	float:left;
		border: black;
		border:6px solid black;
		
	}
}