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

/* General */
body { padding-bottom: 5%;
}

p { color: white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-size: 13px;
}


/* Headers */
h1 { color:white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	text-transform: uppercase;
	font-size: 18px;
	letter-spacing: 6px;
	text-align: center;
	font-weight: 700;
	margin-top: 35px;
	padding-left: 10px;
	padding-right: 10px;
	z-index: -2;
}

h2 {color:white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-size: 14px;
	text-align: center;
	font-weight: 300;
	margin-top: -3px;
	margin-bottom: 10px;
	z-index: -2;
}

h3 {color: white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	padding-top: 5px;
	padding-bottom: 10px;
}


/* Responsive Columns */
/* For mobile phones: */
[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /* For tablets: */
  .col-s-1 {width: 8.33%;}
  .col-s-2 {width: 16.66%;}
  .col-s-3 {width: 25%;}
  .col-s-4 {width: 33.33%;}
  .col-s-5 {width: 41.66%;}
  .col-s-6 {width: 50%;}
  .col-s-7 {width: 58.33%;}
  .col-s-8 {width: 66.66%;}
  .col-s-9 {width: 75%;}
  .col-s-10 {width: 83.33%;}
  .col-s-11 {width: 91.66%;}
  .col-s-12 {width: 100%;}
}

@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {width: 8.33%;}
  .col-2 {width: 16.66%;}
  .col-3 {width: 25%;}
  .col-4 {width: 33.33%;}
  .col-5 {width: 41.66%;}
  .col-6 {width: 50%;}
  .col-7 {width: 58.33%;}
  .col-8 {width: 66.66%;}
  .col-9 {width: 75%;}
  .col-10 {width: 83.33%;}
  .col-11 {width: 91.66%;}
  .col-12 {width: 100%;}
}


/* Navigation */
.LSummers { color: white;
			letter-spacing: 7px;
			font-family: itc-avant-garde-gothic-pro, sans-serif;
			text-transform: uppercase;
			font-size: 20px;
			margin-top: 0px;
			font-weight: 300;
			z-index: 1;
			position: fixed;
			left: 0;
			right: 0;
} 

.navlinks { font-family: itc-avant-garde-gothic-pro, sans-serif;
			font-size: 13px;
			word-spacing: 30px;
			margin-top: 50px;
			z-index: 1;
			position: fixed;
			left: 0;
			right: 0;
  			text-align: center;
}

#navbar {	background-color: #363636;
			opacity: 0.93;
			margin-top: -16px;
 			width: 100%;
			height: 100px;
			z-index: 1;
			position: fixed;
			left: 0;
			right: 0;
}


a { color: white;
	text-decoration: none;
}

a:hover, a:active {	text-decoration: line-through;
}

/* Portfolio Nav */
.portfolionav {
	overflow: hidden;
	padding-top: 125px;
	z-index: -2;
}

/* Image Hovers */
/* CORPORATE */
/* GON */
.portfolioimg_GON {
  background: url("Outlined_Logos/GON_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
  text-align: center;

}

.portfolioimg_GON:hover {
  background: url("Color_Logos/GON_logo_color.png") no-repeat;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Evention */
.portfolioimg_Evention {
  background: url("Outlined_Logos/Evention_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_Evention:hover {
  background: url("Color_Logos/Evention_logo_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Stevenson Crane Service */
.portfolioimg_Stevenson {
  background: url("Outlined_Logos/Stevenson_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_Stevenson:hover {
  background: url("Color_Logos/Stevenson_logo_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Michigan */
.portfolioimg_MRoss {
  background: url("Outlined_Logos/MRoss_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_MRoss:hover {
  background: url("Color_Logos/MRoss_logo_color.png") no-repeat;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* SHOP 'n SAVE' */
.portfolioimg_SNS {
  background: url("Outlined_Logos/SNS_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_SNS:hover {
  background: url("Color_Logos/SNS_color_logo.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Redbird Athletics */
.portfolioimg_RBA {
  background: url("Outlined_Logos/RA_logo_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_RBA:hover {
  background: url("Color_Logos/RA_logo_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* ARTSY */
/* Strangers */
.portfolioimg_Strangers {
  background: url("Outlined_Logos/Strangers_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_Strangers:hover {
  background: url("Color_Logos/Strangers_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Exploring Typography */
.portfolioimg_type {
   background: url("Outlined_Logos/type_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_type:hover {
  background: url("Color_Logos/type_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Character Design */
.portfolioimg_character {
   background: url("Outlined_Logos/character_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_character:hover {
  background: url("Color_Logos/character_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }

/* Illustration */
.portfolioimg_illustration {
   background: url("Outlined_Logos/illustration_outline.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  display: block;
  width: 300px;
  height: 300px;
}

.portfolioimg_illustration:hover {
  background: url("Color_Logos/illustration_color.png") no-repeat;
  margin-left: auto;
  margin-right: auto;
  width: 300px;
  height: 300px;
  transition: 0.3s;
 }


/* About */
#credits { color: white;
		   font-size: 12px; 
		   padding-top: 50px;
}

#me { margin-left: 6%;
	  margin-right: 6%;
	  padding-bottom: 50px;
	  float: left;
}

#about_padding { padding-top: 10%;
	
}

/* Social Media Icons Hover */
.social_linkedin {
  background: url("Social_Icons/linkedin_outline.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
  margin-top: -10px;
  margin-right: 10px;
}

.social_linkedin:hover {
  background: url("Social_Icons/linkedin_color.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
}

.social_twitter {
  background: url("Social_Icons/twitter_outline.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
  margin-top: -10px;
  margin-right: 10px;
}

.social_twitter:hover {
  background: url("Social_Icons/twitter_color.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.social_insta {
  background: url("Social_Icons/insta_outline.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
  margin-top: -10px;
  margin-right: 10px;
}

.social_insta:hover {
  background: url("Social_Icons/insta_color.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
}

.social_dots {
  background: url("Social_Icons/dots_outline.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
  margin-top: -10px;
}

.social_dots:hover {
  background: url("Social_Icons/dots_color.png") no-repeat;
  float: left;
  width: 50px;
  height: 50px;
}

/* Project Page */
hr {background-color:white;

}

.portfolio_padding { padding-left: 10%;
					 padding-right: 10%;
					 line-height: 1.7;
					 max-width: 900px;
					 margin-left: auto;
					 margin-right: auto;
}

.deliverables_padding { padding-left: 7%;
						padding-right: 7%;
						max-width: 900px;
						margin-left: auto;
					    margin-right: auto;
}

.banner_padding { height: 100px;
				  width: 1px;
}

/* Portfolio Page Banners */
.portfolio_banners_GON { background: url("Portfolio_Banners/GON_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_MRoss { background: url("Portfolio_Banners/MRoss_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_SNS { background: url("Portfolio_Banners/SNS_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_Strangers { background: url("Portfolio_Banners/Strangers_Deer_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_RBA { background: url("Portfolio_Banners/RBA_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_Type { background: url("Portfolio_Banners/Type_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_character { background: url("Portfolio_Banners/Character_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_illustration { background: url("Portfolio_Banners/Illustration_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_Evention { background: url("Portfolio_Banners/Evention_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

.portfolio_banners_Stevenson { background: url("Portfolio_Banners/Stevenson_Banner.png");
	background-repeat: repeat-x;
	width: 100%vw;
	height: 550px;
	padding-bottom: 15px;
}

                 
/* End of Portfolio Banners */

/* Individual Portfolio Page Font */
.portfolio_desc { color:white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-size: 12px;
	font-weight: 300;
}

.portfolio_header { color:white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	text-transform: uppercase;
	font-size: 16px;
	letter-spacing: 3px;
	text-align: center;
	font-weight: 700;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	line-height: 20px;
}

.next_project { color: white;
	font-family: itc-avant-garde-gothic-pro, sans-serif;
	font-size: 25px;
	font-weight: 700;
	letter-spacing: 1px;
	margin-top: -25px;
	line-height: 28px;
}

.arrow { float: right;
		 width: 35px;
		 height: 40px;
		 padding-bottom: 10px;
}

/* Slideshows */
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;margin:0}
.mySlides {display:none}

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

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

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

/* 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-top: 0px; 
  padding-right: 0px;
  width: 100%;
  text-align: center;
}

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

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

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

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}

@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}