/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
body {
line-height: 1;
color: black;
background: white;
}
ol, ul {
list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: separate;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}

/*elements*/

body {
	background-color:#e1e9f1;
}

a {
	text-decoration:none;
}



/*container*/

#logo {
padding:5px; margin:10px;
}

#maincontent {
	margin:0; padding:0;
}

#top {
	padding:5px; margin:0;
}

#sub-container {
	float:center; margin:0 10% 0 10%; padding:px;
}

#sub-container h2 {
text-align:center; clear:all; color:orange;border-bottom:1px solid grey; margin:20px; padding:10px; font-size:44px; font-weight:600;
}

#sub-container p {
	 font-size:32px; color:black; font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

#banner img {
	width:100%;
}

#subser {
	position:center; margin:auto; clear:all; width:100%; display:inline-block;
}

#subservices-contact {
	width:32%; height:; margin:5px; padding:; background-color:#3c78ae; clear:all; float:left; height:400px; box-shadow:b;
}

#subservices-contact p {
text-align:center; clear:all; color: white; margin:5px; padding:px; font-size:20px; font-family:sans-serif; text-shadow:1px 1px 2px black;
}


#subservices-contact img{
	width:100%; margin:px;
}

#subservices-contact h4{
text-align:center; clear:all; color: white;  
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  text-shadow:black; border-bottom:1px solid white; margin:20px; padding:10px; font-size:44px; font-weight:600;

}
#subservices-contact h3 {
color:black; text-align:center; font-size:22px; margin:10px; padding:5px; clear:all;
}

#subservices-contact:hover {
	 background-color:#ddd;
color:black;
}

#subservices-contact-large {
	width:32%; height:; margin:5px; padding:; background-color:#3c78ae; clear:all; float:left; height:500px; box-shadow:b;
}

#subservices-contact-large p {
text-align:center; clear:all; color: white; margin:5px; padding:px; font-size:20px; font-family:sans-serif; text-shadow:1px 1px 2px black;
}


#subservices-contact-large img{
	width:100%; margin:px;
}

#subservices-contact-large h4{
text-align:center; clear:all; color: white;  
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
  text-shadow:black; border-bottom:1px solid white; margin:20px; padding:10px; font-size:44px; font-weight:600;

}
#subservices-contact-large h3 {
color:black; text-align:center; font-size:22px; margin:10px; padding:5px; clear:all;
}

#subservices-contact-large:hover {
	 background-color:#ddd;
color:black;
}

#last-footer {
	position:center; width:100%; margin:px; padding:px;
}

#icons {
	position: absolute;
  right: 10px; margin-top:0px; 
}

#icons ul{
	
}

#icons ul li{
	display:inline-block; margin:0 10px 0 10px;
}

#welcome-note {
	margin:0 10px 0 10px;
}

#welcome-note p {
	font-family:serif; font-size:26px;
}

#contact-note {
	margin:0 10px 0 10px;
}

#contact-note P {
	font-family:serif; font-size:26px; margin:10px;
}

#last-footer p {
	border-top:lightgrey 1px solid; font-family:serif; font-size:24px; text-align:center; margin:20px;  padding: 50px 0 65px;
}

/*class*/

.sitename {
	font-family:Helvetica; font-size:52px; color:blue; font-weight: 800; text-shadow: 2px 2px #000;
}

.icons {
	width:30px; height:30px; display:inline-block;
}


.left {
float
}

.topnav {
background-color:#333;
overflow:hidden;
clear:all; 
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight: 800;
}

.topnav a{
float:left;
color:#f2f2f2;
text-align:center;
padding:14px 16px;
text-decoration:none;
text-size:17px;

}

.topnav a:hover{
background-color:#ddd;
color:black;
}

.topnav a.active{
background-color:4CAF50;
color:white;
}


.topnav {
	
}


.button {
  background-color: orange;
  text-shadow:black;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
}

.button:hover{
	background-color:#ddd;
color:black;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  #subservices, #subservices-contact, #subservices-contact-large, #banner {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}


@media screen and (min-width: 601px) {
  .sitename {
    font-size: 52px;
  }
}

@media screen and (max-width: 800px) {
  .sitname {
    font-size: 30px;
  }
}


/* Dropdown Button */
.dropbtn {
background-color: blue;
color: white;
padding: 16px;
font-size: 16px;
border: none;
width:20%;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {

display: inline-block; width:450px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}