/*
Title: StumpysCss.css
Description: The CSS sheet for Stump's Bussinesss website. 
Author: Brett Gugel
CreationDate: 10/26/2023
LastUpdated: 11/21/2023
Version: 1.0
*/

/*Main Content*/
html{
  margin:0;
  padding:0;
}

h1,p {
  margin:0;
}

body {
  margin: 0;
  padding:0;
  font-family: Arial, Helvetica, sans-serif;
  color: #092834;/*Dark Blue*/
  
  /*Causes element to align center and at most grow to 1728px*/
   width: 100%;
   max-width: 1728px;
   margin-left: auto;
   margin-right: auto;
   background-color: #092834;/*Dark Blue*/
}

.content{
  background-color: #F0F7D4;/*Beige*/
}

.border{
  border-top: .2em solid #092834;/*Dark Blue*/
}

.parent {
  margin: 1rem;
  padding: 1rem 1rem;
  text-align: center;
}

.child {
  margin: .5rem;
  display: inline-block;
  padding: 1.5rem 1.6rem 2.2rem ;
  border-bottom: 2em;
  vertical-align: middle;
  background-color: #092834;/*Dark Blue*/
  border-radius: 10%;
}

.child2 {
  margin: .5rem;
  display: inline-block;
  padding: 1.6rem 1.6rem 2.2rem ;
  border-bottom: 2em;
  vertical-align: middle;
  background-color: #092834;/*Dark Blue*/
}

.textBorder{
  color: #f2f2f2;/*White*/
  width:500px;
  font-size:2em;
}

.textBorder2{
  color: #f2f2f2;/*White*/
  width:1050px;
  font-size:2em;
  border-radius: 10%;
}

.videoBorder{
  color: #f2f2f2;/*White*/
  width:1050px;
  font-size:2em;
} 

#mobileContact{
  display:none;
}

/*Top Heading logos float*/
.floatLeft { 
  float: left; 
}

.floatRight { 
  float: right; 
}

/*Nav*/
#myLinks {
  border-top: .2em solid #555;
  overflow: hidden;
  background-color: #092834;/*Dark Blue*/
  display: flex;
  flex-direction: row;
  /*Causes element to align center and at most grow to 1728px*/
   width: 100%;
   max-width: 1728px;
   margin-left: auto;
   margin-right: auto;
}

#myLinks a {
  width: 100%;
  float: left;
  color: #092834;/*Dark Blue*/
  text-align: center;
  margin: 1em 3em;
  padding: .4em 0em;
  text-decoration: none;
  font-size: 25px;
  border-radius: 1em;
  background-color: #58b058;/*Bad Dark Green*/
}

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

#myLinks a.active {
  background-color: #58b058;/*Bad Dark Green*/
  color: #092834;/*Dark Blue*/
}
#myLinks2 {
    display: none;
	background-color: #d99023;
 }
#myLinks2 a{
    
	background-color: #58b058;/*Bad Dark Green*/
	
	border-color:blue;
	text-align:center;
	padding-bottom:10px;
	
 }
.icon{
    display: none;
	
  }
footer{
  font-size:1.4em;
  line-height:1.4em;
  text-align: center;
  padding: 3px;
  background-color: #092834;/*Dark Blue*/
  color: white;
  /*Causes element to align center and at most grow to 1728px*/
   width: 100%;
   max-width: 1728px;
   margin-left: auto;
   margin-right: auto;
}

footer a{
  background-color: #F0F7D4;
  padding: 1px;
  border-radius: 5%;
}

header{
  background-color: #d99023;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  height: 9.2em;
  width: 100%;
  max-width: 1728px;
}
.logo {
  opacity: 0.9;
  width: 9em;
  height: 9em;
  content: url(img/IMG_1169.JPG);
  border-left: .2em solid #092834;/*Dark Blue*/
  border-right: .2em solid #092834;/*Dark Blue*/
}

.logoHeader {
  padding-top:20px;
  height: 80px;
  text-align: center; 
  font-size: 4em;
  color:#092834;/*Dark Blue*/
}
.logoPhone { 
  font-size:1.8em;
  padding-left:9px; 
  float: left;
 }
.logoHours { 
  font-size:1.8em;
  padding-right:9px; 
  float: right;
 }

@media only screen and (max-width: 1727px)and (min-width: 1440px) {
  .logoHeader {
  	font-size:3.8em;
	height: 70px;
	padding-top:10px;
  }
  .logoPhone { 
	font-size:1.7em;
	display:block;
	float:none;
	
  }
  .logoHours { 
	font-size:1.7em;
	display:block;
	float:none;
  }
	.topnav a {
	margin: 1em 3em;
  }
}

@media only screen and (max-width: 1439px) and (min-width: 1203px){
  .logoHeader {
  	font-size:3.8em;
	height: 70px;
	padding-top:10px;
  }
  .logoPhone { 
	font-size:1.7em;
	display:block;
	float:none;
	
  }
  .logoHours { 
	font-size:1.7em;
	display:block;
	float:none;
  }
	
  #myLinks a {
    margin: 1em 2em;
  }
  .topnav a {
	margin: 1em 3em;
  }
  #myLinks2 {
    display: none;
  }
}

@media only screen and (max-width: 1202px) and (min-width: 1000px){
  .vid{
	width:500px;
	height:600px;
  }
  .videoBorder{
    width:500px;
  }
   .logoHeader {
  	font-size:3.8em;
	height: 70px;
	padding-top:10px;
  }
  .logoPhone { 
	font-size:1.7em;
	display:block;
	float:none;
  }
  .logoHours { 
	font-size:1.7em;
	display:block;
	float:none;
  }
  .logo{
    display: none
  }
  .topnav a {
	margin: 1em 3em;
  }
   #myLinks a {
    margin: 1em 1em;
  }
  #myLinks2 {
    display: none;
  }

}

/*First Mobile Friendly width*/
@media only screen and (max-width: 999px) and (min-width: 808px){
  .vid{
	width:500px;
	height:600px;
  }
  .videoBorder{
    width:500px;
  }
  .logoHeader {
	float:right;
	padding-right: 10px;
  	font-size:3em;
	height: 70px;
	padding-top:10px;
  }
  .logoPhone { 
	font-size:1.5em;
	display:block;
	float:right;
	padding-right: 10px;
  }
  .logoHours { 
	font-size:1.5em;
	display:block;
	float:right;
	padding-right: 10px;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
	font-size:6.915em;

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

@media only screen and (max-width: 808px) and (min-width: 650px){
  .vid{
	width:500px;
	height:600px;
  }
  .videoBorder{
    width:500px;
  }
  .logoHeader {
	float:right;
	padding-right: 10px;
  	font-size:2.5em;
	height: 70px;
	padding-top:10px;
	padding-left:120px; 
  }
  .logoPhone { 
    padding-top:16px;
	font-size:1.2em;
	display:block;
	float:right;
	padding-right: 10px;
  }
  .logoHours { 
	font-size:1.2em;
	display:block;
	float:right;
	padding-right: 10px;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
	font-size:6.915em;

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

@media only screen and (max-width: 649px) and (min-width: 535px){
  img{
    max-width:400px;
    max-height:480px;
  }
  .child{
    max-width:400px;
  }
  .textBorder{
	max-width:400px;
	font-size:1.5em;
  }
  .vid{
	max-width:400px;
    max-height:480px;
  }
  .videoBorder{
    max-width:400px;
	font-size:1.5em;
  }
  header{
    height:10em;
  }
  .logoHeader {
	float:right;
	padding-left: 10px;
  	font-size:2.4em;
	height: 70px;
	padding-top:10px;
	padding-left:120px;
  }
  .logoPhone { 
    padding-top:16px;
	font-size:1.15em;
	display:block;
	float:right;
	padding-right: 10px;
	padding-left:120px;
  }
  .logoHours { 
	font-size:1.15em;
	display:block;
	float:right;
	padding-left:130px;
	padding-right: 10px;
	text-align:center;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
	font-size:7.6em;

  }
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .logo{
    display: none;
  }
}
@media only screen and (max-width: 534px) and (min-width: 425px){
  #mobileContact{
    display:inline-block;
  }
  img{
    max-width:300px;
    max-height:360px;
  }
  .child{
    max-width:300px;
  }
  .textBorder{
	max-width:300px;
	font-size:1.2em;
  }
  .vid{
	max-width:300px;
    max-height:360px;
  }
  .videoBorder{
    max-width:300px;
	font-size:1.2em;
  }
  header{
    height:10em;
  }
  .logoHeader {
	float:left;
	padding-left: 10px;
  	font-size:2.4em;
	height: 70px;
	padding-top:10px;
	padding-right:120px;
  }
  .logoPhone { 
    display: none;
  }
  .logoHours { 
    display: none;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
	font-size:7.6em;

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

@media only screen and (max-width: 424px) and (min-width: 376px){
  #mobileContact{
    display:inline-block;
  }
  img{
    max-width:250px;
    max-height:300px;
  }
  .child{
    max-width:300px;
  }
  .textBorder{
	max-width:250px;
	font-size:1.175em;
  }
  .vid{
	max-width:250px;
    max-height:300px;
  }
  .videoBorder{
    max-width:250px;
	font-size:1.175em;
  }
  header{
    height:10em;
  }
  .logoHeader {
	float:left;
	padding-left: 10px;
  	font-size:2.4em;
	height: 70px;
	padding-top:10px;
	padding-right:120px;
  }
  .logoPhone { 
    display: none;
  }
  .logoHours { 
    display: none;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
	font-size:7.6em;

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

@media only screen and (max-width: 375px) and (min-width: 321px){
  #mobileContact{
  display:inline-block;
  }
  img{
    max-width:220px;
    max-height:264px;
  }
  .child{
  max-width:300px;
  }
  .textBorder{
	max-width:220px;
	font-size:1.05em;
  }
  .vid{
	max-width:220px;
    max-height:264px;
  }
  .videoBorder{
    max-width:220px;
	font-size:1.05em;
  }
  header{
    height:10em;
  }
  .logoHeader {
	float:left;
	padding-left: 10px;
  	font-size:2.3em;
	height: 70px;
	padding-top:10px;
	padding-right:120px;
  }
  .logoPhone { 
    display: none;
  }
  .logoHours { 
    display: none;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
	font-size:7.6em;
  }
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .logo{
    display: none;
  }
}


@media only screen and (max-width: 320px){
	  #mobileContact{
  display:inline-block;
  }
  img{
    max-width:200px;
    max-height:240px;
  }
  .child{
  max-width:200px;
  
  }
 
  .textBorder{
	max-width:200px;
	font-size:.96em;
	
  }
  .vid{
	max-width:200px;
    max-height:240px;
  }
  .videoBorder{
    max-width:200px;
	font-size:.96em;
  }
  header{
    height:10em;
  }
  .logoHeader {
	float:left;
	padding-left: 10px;
  	font-size:2em;
	height: 70px;
	padding-top:20px;
	padding-right:120px;
  }
  .logoPhone { 
    display: none;
  }
  .logoHours { 
    display: none;
  }
  #myLinks {
	border:none;
  }
  #myLinks a{
    display: none;
	background-color:#F0F7D4;/*Beige*/
	border:none;
  }
  #myLinks2 {
    display: none;
	/*The top of the borders on lines 258-259(.icon)*/
  }
  .topnav a {
    color: white;
	background-color:#58b058;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    display: block;
  }
  .icon {/*The Burger*/
	background: #092834;/*Dark Blue*/
	padding:10px;
	color:white;
    display: block;
    position: absolute;
    right: 0;
    top: 0;
	font-size:7.6em;

  }
  .topnav a:hover {
    background-color: #ddd;
    color: black;
  }
  .vid{
	width:500px;
	height:600px;
  }
  .videoBorder{
    width:500px;
  }
  .logo{
    display: none;
  }
}