/* Colors:
dark purple #523177
40% dark purple #b8a7c7
medium purple #a25eb5
25% medium purple #e8d5ec 
light purple #b783ca
orange #ff9119
teal #00c9d4
magenta #cb009f
*/

html {
	min-height: 100%;
	}

body {
	background-color: #FFFFFF;
	font-family: "Abel";
	font-size: 1em;
	}

/* ----------------- Main Logo ------------------*/
#logo {
	text-align: center;
	background-color: #fff;
	height: 8em;
	}

.resplogo {
	display: none;
	}

#logoimg {
	padding-top: 2.75em;
	padding-bottom: .25em;
	}

#container {
	background-image: linear-gradient(#523177, #a25eb5, #523177);
	margin-top: 4.75em;
	min-height: 100%;
	padding-top: 6em;
	}


/* ----------------- Copy Right ------------------*/

footer {
	background-color: #523177;
	}

.emailcopy {
	clear: both;
	font-family: "Abel";
	color: #fff;
	margin-bottom: 5em;
	padding-right: 1em;
	padding-left: 1em;
	padding-top: 2em;
	padding-bottom: 2.5em;
	}

.email {
	float: left;
	padding-left: 2em;
	}

.copyrt {
		float: right;
		padding-right: 2em;
	}

/* ----------------- Home Page Navigation ------------------*/
#nav {
	padding-top: 0;
	text-align: center;
	color: #FFFFFF;
	font-size: 2.5em;
	}

.portfolio {
	font-family: "Abel";
	letter-spacing: .25em;
	}

.contact {
	font-family: "Abel";
	letter-spacing: .25em;
	}

.about {
	font-family: "Abel";
	letter-spacing: .25em;
	}

.home {
	font-family: "Abel";
	letter-spacing: .25em;
	}

a.homep {
	padding-right: 2%;
	padding-left: 2%;
	}

a:link {
	color: #b783ca;
	text-decoration: none;
	cursor: pointer;
	}

a:visited {
	color: #b783ca;
	}

a:hover {
	color: #ff9119;
	}

a:active {
	color: #00c9d4;
	}

.hometb {
	float: left;
	width: 20%;
	padding-top: 2em;
	}

/*------------------ Navigation ---------------------*/
nav.aboutnav {
	clear: both;
	font-family: "Abel";
	padding-top: 2em;
	}

nav.aboutnav a {
	color: #b783ca;
	text-decoration: none;
	cursor: pointer;
	}

nav.aboutnav a:hover {
	color: #ff9119;
	}

nav.aboutnav a:active {
	color: #00c9d4;
	}

.grid-container {
	background-color: #a25eb5;
  	display: grid;
  	grid-template-columns: auto auto auto;
  	padding: .5em;
	}

.grid-container > div {
  	text-align: center;
  	font-size: 2em;
	}

/*------------------About Description---------------------*/

#about {
	background-color: rgb(232,213,236,0.25);
	border-radius: 2.5em;
	margin: 0 1em;
	padding: .5em 0;
	}

p.me {
	padding-left: 10em;
	padding-right: 10em;
	font-size: 1.25em;
	color: #523177;
	}

a.aMe {
	color: #523177;
	font-weight: bold;
	font-style: italic;
	}

/* -------------------- Contact ---------------- */
.cinfo{
	text-align: center;
	}
 
.contactinfo {
	background-color: rgb(232,213,236,0.4);
	border-radius: 2.5em;
	padding: 2em 1em;
	width: 65%;
	}

/* ---------------- Portfolio/Souvenirs Landing Page ----------------- */

.pagename {
	margin: 0 0 0 .25em;
	text-align: center;
	}

.portfoliotitle {
	max-width: 35em;
	}

.portl {
	float: left;
	width: 50%;
	padding-top: 2em;
	padding-bottom: 2em;
	}

.portm {
	float: left;
	width: 50%;
	padding-top: 2em;
	padding-bottom: 2em;
	}

p.pagetitle {
	margin-top: .25em;
	margin-bottom: .25em;
	background-color: #a25eb5;
	font-size: 3em;
	text-align: center;
	color: #b783ca;
	}

	/* ---------------- Top Navigation ----------------- */


nav.porttopnav {
	clear: both;
	font-family: "Abel";
	}

nav.porttopnav a {
	color: #fff;
	text-decoration: none;
	cursor: pointer;
	}

nav.porttopnav a:hover {
	color: #ff9119;
	}

nav.porttopnav a:active {
	color: #00c9d4;
	}

.currentpg {
	background-color: #ff9119;
	}

.grid-containerportnav {
  	display: grid;
  	grid-template-columns: auto auto auto auto auto auto;
  	margin: 1em 1em;	
  	padding: 1em;
	}

.grid-containerportnav > div {
  	text-align: center;
  	font-size: 1.5em;
  	letter-spacing: .10em;
	}


/* ---------------- Slide Show ------------------ */

* {box-sizing:border-box}

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

/* Hide the images by default */
.mySlides {
  	display: none;
	}

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

/* 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(183,131,202,0.8);
	}

/* Caption text */
.text {
  	background-color: rgba(183,131,202,0.3);
  	color: #523177;
  	font-size: 25px;
 	padding: 8px 12px;
  	position: absolute;
  	bottom: 8px;
  	width: 100%;
  	text-align: center;
	}

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

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

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

/* 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}
	}

/* ---------------- Responsive Layout ----------------- */

	@media screen and (max-width: 900px) {
	.grid-containerportnav {
	  grid-template-columns: auto auto auto;
		}
	}

	@media screen and (max-width: 360px) {
			/* ---------- main page examples ---------- */

	.hometb  {
		width: 100%;
		padding-top: 0;
		}

	#nav {
		padding-top: .25em;
		padding-bottom: .75em;
		}

	a.homep {
		padding: 0 0;
		}

	.copyrt {
		float:left;
	}

	.email {
		padding-left: 0;
	}

	.emailcopy{
		padding-bottom: 4em;
	}

	.grid-container {
	  	grid-gap: 1.250em;
		}

	.grid-container > div {
	  	text-align: center;
	  	font-size: 1.25em;
		}

	.grid-containerportnav {
	  	grid-template-columns: none;
		}

	/* Caption text */
.text {
  	font-size: 15px;
	}

/* Next & previous buttons */
.prev, .next {
	font-size: 15px;
	}

		/* ---------- about page description ---------- */

	p.me {
		padding: 0 2em;
		}

	.portfoliotitle {
		max-width: 95%;
		padding-top: 2em;
		}
	}

	/* ------ end of first media querie ------ */

		/* ---------- Main Page Logo ---------- */

	@media screen and (max-width: 360px) {
	.mainlogo {
		display: none;
		}

	.resplogo {
		display: block;
		padding-bottom: 10em;
		}

	#logoimg {
		padding-top: 3em;
		width: 95%;
	}

	#container {
		margin-top: 7em;
		padding-top: 1.5em;

	}