@charset "utf-8";

/* Nalani Nickles Project 3 Styles*/

/* Google font 
font-family: 'Fredericka the Great', cursive;

blue rgba(93,179,236,1.00)
yellow rgba(238,211,139,0.80)
*/


/* Start of desktop layout */

/* Adding background image & removing default margin & padding */
body {
	margin: 0 auto;
	padding: 0;
	text-align: center;
	background-image: url("../images/yellow_pencil_background.jpg");
	background-attachment: fixed;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center bottom;
	/* background color in case of broken image link */
	background-color: rgba(238,211,139,1.00);
}

/* Styles any text needing to be bold */
.bold {
	font-weight: bold;
}

/* Styles unicode pencil on Degrees page */
.unicode_pencil {
	color: rgba(0,80,132,1.00);
	font-size: 1.5em;
}


/* Start of DESKTOP styles */
/* Media query for DESKTOP and large TABLET viewport targets screens with a minimum width of 1081px */
@media only screen and (min-width: 1081px) {
	
	/* Style specifies to hide the mobile class */
	.mobile {
		display: none;
	}

	/* website name */
	h2 {
		font-family: 'Fredericka the Great', cursive;
		font-size: 2.1em;
		letter-spacing: 0.05em;
		margin: 0;
		padding: 0.95em;
	}

	/* page topic */
	h1.desktop {
		font-family: 'Fredericka the Great', cursive;
		font-size: 2.7em;
		letter-spacing: 0.07em;
		color: rgba(255,255,255,1.00);
		margin: 0;
		padding-left: 7.3em;
		padding-top: 1.4em;
		padding-bottom: 1.08em;
	}


	/* Start of nav styles */
	.nav_img {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -10;
		width: 100%;
		height: 342px;
	}

	nav {
		margin: 0;
		padding-left: 20em;
		padding-bottom: 2em;
		letter-spacing: 0.01em;
		word-spacing: 0.8em;
	}

	nav ul li {
		display: inline;
		margin: 0;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-weight: bold;
		font-size: 1.7em;
		list-style-type: none;
	}

	.nav_upright {
		font-size: 1.7em;
	}

	li a {
		text-decoration: none;
		color: rgba(0,0,0,1.00);
	}

	li a:hover {
		color: rgba(25,71,159,1.00);
		text-decoration: underline;
	}
	/* End of nav styles */


	/* Start of main styles */
	main {
		margin: 0 auto;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-size: 1.25em;
		text-align: left;
	}

	.body_wrapper {
		width: 70%; 
		margin: 2% auto 0 auto;
	}
	
	/* Styles images in the main area */
	.extra_img {
		width: 300px;
		border-radius: 3.5em 0 3.5em 0;
		float: left;
		padding: 1.1em 1.1em 0 0;
		margin: -0.7em 0 0.4em -5.7em;
	}		
	/* End of main styles */


	/* Start of art styles */
	.artflex_top {
		display: flex;
		align-items: flex-start;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		max-width: 88%;
		margin: 1.5% auto;
	}
	
	.artflex_mid {
		display: flex;
		align-items: flex-start; 
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		max-width: 88%; 
		margin: 1.5% auto;
	}

	.artflex_bottom {
		display: flex;
		align-items: flex-start; 
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
		width: 88%; 
		margin: 1.5% auto;
	}
	
	.art_deskt {
		max-width: 70%;
		border: 1px solid rgba(144,137,101,0.80);
		-webkit-box-shadow: 0px 3px 3px 2px rgba(144,137,101,0.80);
		box-shadow: 0px 3px 3px 2px rgba(144,137,101,0.80);
	}
	/* end of art styles */
	
	/* start of instuctors styles */
	.instructors img {
		max-width: 100%;
		margin: 0;
		padding-bottom: 0;
		border-radius: 0 3.5em 0 3.5em;
	}
	/* end of instructors styles */

	/* Start of footer styles */
	footer {
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-weight: bolder;
		max-width: 100%;
		padding: 0.7% 0 2% 0;
		margin-top: 38px;
		margin-bottom: 0;
		background-color: rgba(238,211,139,0.80);
	}

	.footer_pals {
		display: block;
		margin-left: -41em;
		padding: 0;
	}

	.logo {
		max-width: 2.7%;
		padding: 0;
		margin-top: 0.5em;
	}

	.tmcc_name {
		display: inline;
		text-align: center;
		padding-left: 2em;
		margin: 0;
	}
/* End of footer styles */

}
/* End of DESKTOP styles */


/* Start of MOBILE styles */
/* Media query for MOBILE viewport (and small tablet) targets screen size with a maximum width of 1080 */
@media only screen and (max-width: 1080px) {
	
	/* Style to hide the desktop class in mobile layout */
	.desktop {
		display: none;
	}
	
	/* website name */
	h2 {
		font-family: 'Fredericka the Great', cursive;
		font-size: 1.2em;
		letter-spacing: 0.02em;
		margin: 0;
		padding: 0.95em;
	}

	
	/* Start of nav styles */
	.nav_img {
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -10;
		max-width: 120%;
	}

	nav {
		margin: 17% auto 0;
		padding-bottom: 2em;
		letter-spacing: 0.01em;
		word-spacing: 0.8em;
	}

	nav ul li {
		display: inline;
		margin: 0;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-weight: bold;
		font-size: 1.2em;
		list-style-type: none;
	}

	.nav_upright {
		font-size: 1.3em;
		color: rgba(0,0,0,1.00);
	}

	li a {
		text-decoration: none;
		color: rgba(0,0,0,1.00);
	}

	li a:hover {
		color: rgba(25,71,159,1.00);
		text-decoration: underline;
	}
	/* End of nav styles */


	/* Start of main styles */
	
	/* page topic */
	h1.mobile {
		font-family: 'Fredericka the Great', cursive;
		font-size: 1.5em;
		letter-spacing: 0.03em;
		text-align: center;
		color: rgba(0,0,0,1.00);
		margin: 0 auto;
		padding-bottom: 1.5em;
	}
	
	main {
		margin: 2% auto 0;
		max-width: 70%;
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-size: 1.2em;
		text-align: left;
	}

	.body_wrapper {
		width: 80%; 
		margin: 0 auto 0 auto;
	}
	/* End of main styles */


	/* Start of footer styles */
	footer {
		font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
		font-weight: bolder;
		max-width: 100%;
		padding: 1.5% 0 3.5% 0;
		margin-top: 38px;
		margin-bottom: 0;
		background-color: rgba(238,211,139,0.80);
	}

	.footer_pals {
		display: block;
		margin: 0 auto;
		padding: 0;
	}

	.logo {
		min-width: 35px;
		max-width: 3.5%;
		padding: 0;
		margin-top: 0.5em;
	}

	.tmcc_name {
		display: inline;
		text-align: center;
		font-size: 0.9em;
		padding-left: 1.5em;
		margin: 0;
	}
/* End of footer styles */

	
	/* start of instuctors styles */
	.instructors {
		font-size: 0.9em;
	}
	
	.instructors img {
		display: block;
		margin: 0 auto;
		padding-bottom: 0;
		max-width: 100%;
		border-radius: 0 3.5em 0 3.5em;
	}
	/* end of instructors styles */
	
	
		/* Start mobile only art slideshow */
		/* Found at speckyboy.com - original unaltered code by Helio Marcondes */
		.carousel-wrapper{
		  height: 15em;
		  position:relative;
			max-width: 100%;
		  margin:0 auto;
		}
		.carousel-item{
		  position:absolute;
		  top:0;
		  bottom:0;
		  left:0;
		  right:0;
		  padding:15px 5px;
		  opacity:0;
		  transition: all 0.5s ease-in-out;
		}
		.arrow{
		  border: solid black;
			border-width: 0 3px 3px 0;
			display: inline-block;
			padding: 12px;
		}

		.arrow-prev{
		  left:-30px;
		  position:absolute;
		  top:50%;
		  transform:translateY(-50%) rotate(135deg);
		}

		.arrow-next{
			right:-30px;
		  position:absolute;
		  top:50%;
		  transform:translateY(-50%) rotate(-45deg);
		  }

		.light{
		  color:white;
		}

		@media (max-width: 480px) {
			  .arrow, .light .arrow {
				background-size: 10px;
				background-position: 10px 50%;
			  }
			}

		/*Select every element*/
		[id^="item"] {
			display: none;
		  }

		.item-1 {
			z-index: 2;
			opacity: 1;
		  background:url("../images/art1_architecture_brochure.png");
		  background-size: contain;
			background-repeat: no-repeat;
		  }
		.item-2{
		  background:url("../images/art2_grc175_kevin_kentera.png");
		   background-size:contain;
			background-repeat: no-repeat;
		}
		.item-3{
		  background:url("../images/art3_grc200p06.png");
		   background-size:contain;
			background-repeat: no-repeat;
		}
		.item-4 {
		  background:url("../images/art4_grc200p01_nn.png");
		  	background-size:contain;
			background-repeat: no-repeat;
		  }
		.item-5{
		  background:url("../images/art5_grc200p06_nn.png");
		   background-size:contain;
			background-repeat: no-repeat;
		}
		.item-6{
		  background:url("../images/art6_postcard_front.png");
		   background-size:contain;
			background-repeat: no-repeat;
		}

		*:target ~ .item-1 {
			opacity: 0;
		  }

		#item-1:target ~ .item-1 {
			opacity: 1;
		  }

		#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
			z-index: 3;
			opacity: 1;
		  }
	
		#item-3:target ~ .item-3, #item-4:target ~ .item-4 {
			z-index: 3;
			opacity: 1;
		  }
	
		#item-4:target ~ .item-4, #item-5:target ~ .item-5 {
			z-index: 3;
			opacity: 1;
		  }
	
		#item-5:target ~ .item-5, #item-6:target ~ .item-6 {
			z-index: 3;
			opacity: 1;
		  }
	
		#item-6:target ~ .item-6, #item-1:target ~ .item-1 {
			z-index: 3;
			opacity: 1;
		  }
	/* End mobile only art slideshow */


}
/* End of MOBILE styles */