/* =======================================================
           Global Style Below
==========================================================*/
* {
    box-sizing: border-box;
}

body {
	background-color: #ffffff;
	font-size: 17px;	
}
        
h1 {
	font-family:'Arvo', serif;
	letter-spacing: 2px;
    font-size: 2em;
     line-height: 2em;
	text-align: center;
}

.upper {
   text-transform: uppercase;
}

h2 {
	font-family:'Arvo', serif;
	text-transform: uppercase;	
	font-size: 1.75em;
	line-height: 2em;
	text-align: center;
}

h3 {
    font-family:'Arvo', serif;	
	font-size: 1.5em;
	line-height: 2em;
}

p, li {
	font-family: 'Roboto', sans-serif;
	line-height: 1.75em;
	font-size: 1.2em;	
}

nav img {
	position: absolute;
    display: inline-block;
	float: left;
	top: 2em;
	left: 4em;
}

header nav {
	height: 100px;
	padding: 4em 0 6em 0;
}

header nav ul {
	margin: 0;
	padding: 1em;
	list-style-type: none;
}

header nav ul li {
	display: inline;
	margin-left: 1em;
	font-size: 1em;
	font-family: 'Arvo', serif;
}

header nav ul li:first-child {
	margin-left: 0;
}

header nav ul li ul {
	display: none;
}

a {
	color: #000000;
	text-decoration: none;
}

a:hover {
	color:#8bc53e;
}

a, a:hover {
	-o-transition: color 0.25s ease-in;
	-webkit-transition: color 0.25s ease-in;
	-moz-transition: color 0.25s ease-in;
	transition: color 0.25s ease-in;
}

#upper {
	 background-image: url('../assets/mainpic.png');
	 position: relative;
     height: 500px;
     background-repeat: no-repeat;
     background-size: cover;
    background-position: 66%;
}


#lower {
	margin-top: 4em;
	padding: 6em 1em;	
}

#title {
	background-color: #8bc53e;
	padding: 3em 1em 2em 1em;
}

#title h1 {
	font-family: 'Lobster Two', cursive;
	text-align: center;
}

.about {
	padding: 2em 1em;
}

.team {
	padding: 1em;
}

.mission h2 {
	text-align: center;
}

.mission ul li{
	line-height: 2em;	
}

.names li {
	float: none;
	line-height: 2em;
}

.about h2 {
	text-align: center;
}

.media {
    padding: 1em;
}

.contact {
	text-align: center;
    padding: 4em 2em;
}

.contact-2 {
    padding: 0 2em 4em 2em;
}


.prod {
	 padding-bottom: 3em;
}
	
.products {
	 padding: 4em 2em;
}

.products img {
      border-radius: 5px;
	  margin: auto;
	  display: block;
}
 
label, input {
	font-family: 'Roboto', sans-serif;
	padding: 5px 5px;
}

#iframeholder {
	padding: 1em;
}

.cont  {
	 padding-bottom: 3em;
}

#map {
	height: 300px;
	width:  300px;
}

.map {
	padding-top: 2em;
}

#vid {
	 width: 300px; 
	 height: 215px;
}

#menu {
	width: 300px; 
	height: 850px;
}

footer {
	padding-top: 2.5em;
	padding-bottom: 1em;
	background-color: #663399;
}

footer p {
	text-align: center;
	color: #bbbbbb;
	font-size: .8em;
}

#socialicon  ul {
	 padding-left: 25%;
}
	
.copy {
	 padding-top: 2em;	
}

 ul {
    padding: 0 0 1.5em 0; 
 }

li {
   list-style-type: none;
   float: left;
 }
 
ul li a span {
    background: #000000;
    color: #ffffff;
    width: 50px;
    height: 60px;
    border-radius: 5px;
    text-align: center;
    margin-right: 10px;
    padding-top: 23px;
    transition: all 0.2s ease-in-out;
 }

 ul li a span:hover {
            color: #8bc53e;
}

/*==========================================================================
           Media Queries Below
============================================================================*/

/* ========= TABLET STYLE ================================================== */

@media screen and (min-width: 481px) {

    body {
        font-size: 16px;
	}
    header nav ul {
	    padding-left: 40%;	
	}
	h1 {
       font-size: 2em;
	   line-height: 3em;
	}
    #upper {
        height: 420px;
	}
	#lower {
	   padding: 6em 8em 8em 8em;
	   text-align: center;
	}
   #title h1 {
	   font-size: 3em;
	}
	.about {
	   padding: 6em 5em;
    }
    .team {
	   padding-left: 2em;
    }
	#iframeholder {
	   padding: 20px 240px;
    }
	.map {
       padding-left: 6em;
    }
	.contact {
       padding: 4em 1em;
    }
	form {
	   width: 60%;
	   margin: 0 auto;
     }
	.media {
       padding: 6em 2em;
     }
	#vid {
	   width: 400px; 
	   height: 215px;
	}
	#menu {
	   width: 800px; 
	   height: 850px;
	}
	footer p {
	text-align: right;
	padding-right: 6em;
	}
	
} /*Media Query Close*/
/* ========= END OF TABLET STYLE =========================================== */
/* ========= DESKTOP STYLE ================================================= */

@media screen and (min-width: 990px) {
   
	body {
        font-size: 18px;
    }
   header nav ul {
	  padding-left: 50%;	
	}
	#upper {
	 top: 0em;
	}
	#lower {
		margin-top: 0em;
	}
								
}/*Media Query Close*/
/* =========END OF  DESKTOP STYLE ================================================= */
/* ========= LARGER DESKTOP STYLE ================================================= */

@media screen and (min-width: 1440px) {
    body {
         font-size: 16px;
    }
}
/*========== End of Media Query========================================================*/