@media screen and (max-width: 767px)
{
	.mobile {
		display: none;
	}
	
	#stackedbars {
		background-color: #154734;
		width: 100%;
		text-align: left;

	}
	
	#stackedbars i {
		font-size: 32px;
		margin: 12px;	
		color: #fff;
	}
	
	#socialmedia {
		text-right: center;	
		xmax-height: 25px !important;	
	}
	.githumimage {
		max-height: 35px;
		padding-bottom: 12px;
	}
	
	.ribbon-header {
		display: none;
	}

	.ribbon-header .col {
		min-width: 100% !important;	
		xborder: 1px solid #f0f;
		xdisplay: none;
	}
	
	.wyattheaderclass {
		min-width: 100% !important;	
		border: 1px solid #f0f;
	}
	
	.header-gif{
	  max-width: 90vw;
	  min-width: 75vw;
	}
	
	#wyattheader {
		max-width: 90vw;
		min-width: 75vw;
		
	}
	.ribbon-header .container {
		min-width: 100%;
		line-height: 25px;
		text-align: center;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	.skill{
	  width: 85vw;
	  max-width: 85vw;
	  min-width: 85vw;
  
	}
	.sub-header{
		min-width: 100%;
		padding:10px;
		font-size:30pt;
		font-weight:bold;
		border-style:none none double none;
		width: 25%;
	}
	.img-text{
	  font-size: 18px;
	  margin-left: 20px;
	  margin-right: 20px;
	  text-indent: 25px;
	  line-height: 25px;
	}

}

@media (min-width: 768px)
{
	
	.desktop {
		display: none;
	}
	
	.img-text{
	  font-size: 20px;
	  margin-left: 50px;
	  margin-right: 50px;
	  text-indent: 25px;
	  line-height: 25px;
	}
	.sub-header{
	  margin-left: 10px;
	padding:10px;
	font-size:30pt;
	font-weight:bold;
	border-style:none none double none;
	width: 45%;
	max-width:600px;
	min-width:250px;
	display:inline-block;
  
	}

	.skill{
	  width: 35vw;
	  max-width: 35vw;
	  min-width: 35vw;
  
	}
	#socialmedia {
		text-right: right;	
	}
	.githumimage {
		max-height: 35px;	
	}
	.header-gif{
	  max-width: 45vw;
	  min-width: 25vw;
	}
	#wyattheader {
		max-width: 45vw;
		min-width: 25vw;
		
	}
	.ribbon-header .container {
		min-width: 100%;
		line-height: 75px;
	}

	
}


*{
	box-sizing:border-box
	}

    body {
	background-color: white;
	width: 100vw;
	height: 100vh;
	background-size: cover;
	xbackground-position: center;
	overflow-x: hidden;
    }

.container .col {
	xborder: 1px solid #f00;	
}

#pagestart {
	margin-top: 25px;	
}



/* Ribon Header*/
.ribbon-header {
	background-color: #154734;
	width: 100vw;
	
}

.ribbon-header .col {
	white-space: nowrap;
}


a.ribbon-button {
  color: white;
  font-weight: bold;
  vertical-align: bottom;
  border-radius: 5px;
  user-select:none;
  text-decoration:none;
  padding: 25px;
  font-size: 16px;
}
  
a.intext-button {
  color: #154734;
  font-weight: bold;
  vertical-align: bottom;
  border-radius: 5px;
  user-select:none;
  text-decoration:none;
  padding: 25px;
  font-size: 16px;
}

a.ribbon-button:hover{
  color:#C69214;
}

a.intext-button:hover{
  color:#C69214;
}

.title {
  text-align: left;
  padding: 50px;
}


.education{
  display:inline-block; 
  margin-left: 10%;
  font-weight: bold;
}
/* About Me Section */
.about-me{
  margin-top:50px;
}



/* Float Image on Left Margin */
.left-img{
  padding: 25px;
  float:left;
  vertical-align: middle;
  margin-left:5%;
  width: 25%;
  max-width: 400px;
  min-width: 250px;
  border-radius:50px;
}

/* Float Image on right Margin */
.right-img{
  padding: 25px;
  float:right;
  vertical-align: middle;
  margin-right:5%;
  width: 25%;
  max-width: 400px;
  min-width: 250px;
  border-radius:50px;
}
/* Float Image on Left Margin */
.left-img-exp{
  padding: 25px;
  float:left;
  vertical-align: middle;
  margin-left:5%;
  width: 25%;
  max-width: 400px;
  min-width: 250px;
}

/* Float Image on right Margin */
.right-img-exp{
  padding: 25px;
  float:right;
  vertical-align: middle;
  margin-right:5%;
  width: 25%;
  max-width: 400px;
  min-width: 250px;

}
/* Text that goes alongside an image */
/* Subheader*/

/* Skill Section Container */
.skill-container{
}

/* Skill Column Format */
.skill{
  background-color:#154734;
  color: #fff;

  font-size: 20pt;
  text-align: left;
  padding: 25px;
  margin: 25px;
  border-radius:25px;
  
}
.skill h4 {
	text-transform: uppercase;
	text-decoration: underline;	
	font-size: 42px;
	text-align: center;
	width: 100%;
}

/* List Format for Skill section */
.ul {
  text-align: center;
  list-style-position: inside;
}

/* Slideshow container */
.slideshow-container {
  max-width: 1250px;
  position: relative;
  margin: auto;
  margin-top: 200px;
}

a.buttonslide {
  color: white;
  text-decoration: none;
  cursor: pointer;
  padding:10px;
  border-radius: 10px;
  user-select: none;
  font-size: 20px;
  }

a.buttonslide:hover {
  background-color: rgba(0,0,0,0.8)
}
/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
a.prev,a.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 10px 10px 0;
  user-select: none;
}

/* Position the "next button" to the right */
a.next {
  right: 0;
  border-radius: 10px 0 0 10px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  vertical-align: top
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 02px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease}

.active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
.fade_pic {
  animation-name: fade_pic;
  animation-duration: 1.0s;
  animation-fill-mode: both;
}

.intext-header{
	margin-left: 50%;
}

@keyframes fade_pic {
  from {opacity: 0}
  to {opacity: 1}
}

.show_image{
  animation-name: show_image;
  animation-play-state: paused
}

@keyframes show_image{
to {opacity:1}
}