main {  margin: auto;
	width: 70%;
	padding-bottom: 2%;
}

body { font-family: "Century Gothic", sans-serif;
	color: #1F1F1F;
	background-color: #FEFCFF;
}

.navBar {
  overflow: hidden;
  background-color: #1F1F1F;
}

.navBar a {
	float: right;
  	font-size: 1.25em;
  	color: #FEFCFF;
  	text-align: center;
  	padding: 1em 1em;
  	text-decoration: none;
  	-webkit-transition-duration: 0.4s;
  	transition-duration: 0.4s
}

.dropDown {
  float: right;
  overflow: hidden;
}

.dropDown .dropbtn {
  	font-size: 1.25em;
  	border: none;
  	outline: none;
  	color: #FEFCFF;
 	padding: 1em 1em;
  	background-color: inherit;
  	font-family: inherit;
  	margin: 0;
  	-webkit-transition-duration: 0.4s;
  	transition-duration: 0.4s
}

.navBar a:hover, .dropDown:hover .dropbtn {
  background-color: #660066;
}

.dropDownContent {
  display: none;
  position: absolute;
  background-color: #FEFCFF;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropDownContent a {
  float: none;
  color: #1F1F1F;
  padding: .75em .5em;
  display: block;
  text-align: left;
}

.dropDownContent a:hover {
  background-color: #ddd;
}

.dropDown:hover .dropDownContent {
  display: block;
}

h1 { color: #660066;
  	font-size: 3.5em;
  	font-weight: normal;
	text-align: center;
}

h2 { text-align: center;
	font-size: 2.5em;
}

h3 { text-align: center;
	font-weight: normal;
	font-size: 2em;
}

h3 a { color: #660066;
	text-decoration: none;
}

h3 a:hover{
	text-decoration: underline;
}

p {
 	padding: 2% 12%;
	line-height: 1.5;
	font-size: 1.3em;
}

.picHead, .picMid, .imgLink, .picLogo1, .picLogo2, .gif1, .gif2 {
	display: block;
	margin: 5% auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,.75);
	width: 100%;
	border-radius: 4%;
	opacity: 1;
	transition: .4s ease;
}

video {

	display: block;
	margin: 5% auto;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,.75);
	width: 100%;
	border-radius: 2%;

}

.imgContainer {
	margin: auto;
	position: relative;
	width: 50%
}

.middleLink {
 	transition: .4s ease;
	opacity: 0;
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
  	-ms-transform: translate(-50%, -50%);
  	text-align: center;
}

.imgContainer:hover .imgLink {
	opacity: 0.3;
}


.imgContainer:hover .middleLink {
	opacity: 1;
}

.middleTxt { 
  	color: #1F1F1F;
 	font-size: 1.5em;

}



#socials {
	text-align: center
}

button {
	margin: 5% 5%;
	background-color: #1F1F1F;
  	border: none;
  	color:  #FEFCFF;
 	padding: 1%;
 	text-align: center;
  	text-decoration: none;
  	display: inline-block;
  	font-size: 1.5em;
  	cursor: pointer;
}

.buttonLink {
	border-radius: 12px;
	cursor: pointer;
  	-webkit-transition-duration: 0.4s;
  	transition-duration: 0.4s
}

.buttonLink:hover { 
	background-color: #660066;
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24);

}

footer {
	font-size: 1em;
	text-align: center;
	padding-bottom: 0;
}

footer a {
	color: #660066;
	text-decoration: none;
}

footer a:hover {
	text-decoration: underline;
}

* {box-sizing:border-box}

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

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

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

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

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


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

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

.fade {
  animation-name: fade;
  animation-duration: 0.5s;
}

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



* {
  box-sizing: border-box;
}

/* Position the image container (needed to position the left and right arrows) */
.gallery-container {
  position: relative;
  width: 100%;
  margin: auto;
}

/* Hide the images by default */
.myGallery {
  display: none;
  text-align: center;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.gPrev,
.gNext {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

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

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


/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 1px 16px;
  color: white;
}

.galleryRow:after {
  content: "";
  display: table;
  clear: both;
}

/* Six columns side by side */
.galleryColumn {
  float: left;
  width: 20%;
}

/* Add a transparency effect for thumnbail images */
.demo {
  opacity: 0.6;
}

.gActive,
.demo:hover {
  opacity: 1;
}


@media (min-width: 800px) {

.profile {
	display: flex;
	align-items: center;
	justify-content: center;
}

.profile div { margin: 0 2%;
}

.navBar a, .dropDown .dropbtn {
  font-size: 1.5em;
}

.picHead {
	width: 350px;
	height: 500px; 
}

.picMid, .imgLink {
	width: 550px;
	height: 400px; 
}

.picLogo1 {
	width: 550px;
	height: 250px;
	padding: 1em; 
}

.picLogo2 {
	width: 350px;
	height: 350px;
	padding: 1em;
}

.gif1 {
	width: 450px;
	height: 450px;
	padding: 0.5em;
}

.gif2 {
	width: 600px;
	height: 400px;
}

video {
	width: 888px;
	height: 500px;

}

.middleTxt { 
 	font-size: 2.5em;
}

.gallery-container {
  width: 45%;
}

}