/*BASICS*/
	@font-face {
		font-family: 'Trend Sans One';
		src: url(font/TrendSansOne.otf);
	}

	body {
		font-family: mrs-eaves, serif;
		font-size: 22px;
		line-height: 120%;
		margin: 0;
		height: 100vh;
		color: #fff;
		-webkit-font-smoothing: antialiased;
	}

	a {
		color: #404040;
		text-decoration: none;
	}



	section {
		max-width: 900px;
	    margin: 0 auto;
	    padding:  0 5%;
	}

	section:last-child {
		padding-bottom: 60px;
	}


	button {
		color: black;
		padding:  15px 30px;
		border:  none;
		border-radius: 30px;
		font-family: 'Trend Sans One', sans-serif;
		transform: scale(100%);
		transition-timing-function: ease-out;
		transition-duration: .3s;
		background-color: white;
	}

		button:hover {
			transition-duration: .5s;
			transform: scale(105%);
			transition-timing-function: ease;
			cursor: pointer;
		}

	.section-header-wrap {
		padding: 30% 0 0%;
		border-bottom: 1px solid #DDDDDD;
		text-align: center;
		max-width: 1200px;
		margin-bottom: 6%;
	}

/* BUTTONS */

	.button-brown {
		color: #937B58;
	}

	.button-green {
		color: #3B5246;
	}

	.button-blue {
		color: #2D6486;
	}

	.button-pink {
		color: #BF9997;
		margin-top: 20px;
	}


/* BASIC TYPE STYLES */

	.trend-sans {
		font-family: 'Trend Sans One', sans-serif;
		font-size: 16px;
		letter-spacing: 2px;
	}

	.trend-sans-small {
		font-family: 'Trend Sans One', sans-serif;
		font-size: 12px;
		letter-spacing: 1px;
	}

	.trend-sans-large {
		font-family: 'Trend Sans One', sans-serif;
		font-size: 18px;
		letter-spacing: 1px;
	}

	.mrs-caps-med {
		text-transform: lowercase;
		font-variant: small-caps; 
		font-size: 25px;
		letter-spacing: 2px;
	}

	.mrs-caps-small {
		font-family: mrs-eaves-roman-all-petite-c, sans-serif;
		font-size: 26px;
		letter-spacing: 0.07em;
	}

	.italic {
		font-style: italic;
		letter-spacing: 2px;
	}

	.section-header {
		font-size: 25px;
		margin-bottom: 5px;
		padding: 10px 15px;
		display: inline-block;
	}

	.paragraph {
		max-width: 500px;
		padding-bottom: 20px;
	}

	.paragraph-center {
		text-align: center;
		margin:  0 auto;
	}

	.paragraph-right {
		text-align: right;
	}

	.button-center {
		margin:  0 auto;
		display: block;
	}

	.weight-600 {
		font-weight: 600;
	}


/* PHOTOS */

	.page {
		height: 100vh;
	}


	.photo {
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
	}

	.white {
		background: white;
		display: block;
	}

	.shadow { 
		-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11);
		-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11);
		box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11); 
	}

	.photo-border {
		border: 10px solid white;
	}



/* NAV */

	nav {
		background-color: white;
		font-family: 'Trend Sans One', sans-serif;
		font-size: 14px;
		-webkit-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11);
		-moz-box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11);
		box-shadow: 0px 0px 21px 0px rgba(0,0,0,0.11);
		position: fixed;
		width: 100%;
		z-index: 10000;
	}

	.nav-menu-wrap {
		display: none;
		background-color: white;
	}

	.nav-menu-icon {
		display: block;
		background-image:  url('images/menu.svg');
		height: 20px;
		width: 25px;
		background-position: center center;
    	background-size: cover;
    	margin:  20px;
	}

	.nav-link {
		padding: 17px 10px;
		cursor: pointer;
	}

	.nav-links {
		max-width: 1000px;
		margin: 0 auto;
		white-space: nowrap;
		text-transform: uppercase;
	}


	/* HOVERS */

		.blue-hover:hover {
			background-color: #D1DEE6;
		}

		.lt-pink-hover:hover {
			background-color: #F3ECEC;
		}

		.green-hover:hover {
			background-color: #D2E1DA;
		}

		.pink-hover:hover {
			background-color: #EEDCE1;
		}

		.gold-hover:hover {
			background-color: #EAE0D3;
		}



		/* ACTIVE */

		.blue-current {
			background-color: #D1DEE6;
		}

		.lt-pink-current {
			background-color: #F3ECEC;
		}

		.green-current {
			background-color: #D2E1DA;
		}

		.pink-current {
			background-color: #EEDCE1;
		}

		.gold-current {
			background-color: #EAE0D3;
		}



/* BUTTONS */

	.button-brown {
		color: #937B58;
	}

	.button-green {
		color: #3B5246;
	}




/*  WELCOME  */


	.section-welcome {;
		padding-top: 140px;
	}

	.content-wrap {
		padding: 10% 5%;
		display: grid;
		grid-gap: 30px;
	}
	.content-wrap--welcome {
		padding: 30% 0 0%;
	}

	.welcome-photo {
		height: auto;
		width: 75%;
		transform: rotate(-2deg);
		justify-self: center;
		margin-bottom: 20px;
	}

	.welcome-text {
		color:  #464646;
		text-align: center;
	}


	.welcome-text-wrap {
		text-align: center;
		justify-self: center;
		color: #464646;
	}

	.welcome-text__title {
		padding-bottom: 25px;
		font-size: 40px;
	}

	.welcome-text__subtitle {
		font-size: 15px;
		padding-bottom: 5px;
	}

	.content-wrap--shoes {
		display: grid;
		justify-items: center;
		align-items: start;
		height: 100vh;
		padding-top: 20%;
	}

	.shoe-photo {
		width: 65%;
		height: auto;
		transform: rotate(3deg);
		order:  1;
	}

	.shoe-text {
		color: #464646;
		order:  2;
	}


	.shoe-text_title {
		font-size: 23px;
	}



/* SHAPES */


	.shapes1 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		height: 100vh;
		width: 100vw;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		margin-bottom: 20%;
	}

	.shapes2 {
		display: grid;
		position: absolute;
		grid-template-columns: 1fr 1fr;
		top: 100vh;
		left: 0;
		width: 100%;
		height: 100vh;
		z-index: -1;
		padding-top: 10%;
	}


	.shape1 {
		width: 150%;
		padding-top: 50px;
		justify-self: start;
		align-self: start;
	}

	.shape2 {
		width: 130%;
		justify-self: end;
		align-self: end;

	}

	.shape3 {
		width: 120%;
	    justify-self: start;
	    align-self: start;
	    position: absolute;
	    top: 730px;
	}

	.shape4 {
		width: 0%;
		justify-self: end;
		align-self: end;
	}


/*  VENUES  */

	.page-venues {
		background-color: #70857B;
	}

	.photo-group {
		display: none;
	}

	.venue-section {
		display:  grid;
		margin: 0 auto;
		padding:  5% 10%;
	}

	.venue-section:last-child {
		padding-bottom: 60px;
	}

	.venue-combo {
		width: 120%;
		height: auto;
		justify-self:  center;
		padding: 20px 0;
	}


/* WEDDING PARTY */

	.page-wedding-party {
		background-color:  #C7B396;
	}

	.w-party-wrap {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: auto;
		grid-gap: 60px 80px;
	}

	.w-party-group {
		display: flex;
		align-items: center;
		padding-bottom: 20px;
	}

	.w-party_photo {
		height: 100px;
		width: 100px;
		margin-right: 20px;
		display: inline-block;
		border-radius: 10px;
		background-size: cover;
	}

	.w-party_photo--rachel {
		background-image: url('images/headshots/rachel.png');
	}

	.w-party_photo--kevin {
		background-image: url('images/headshots/kevin.png');
	}

	.w-party_photo--kyla {
		background-image: url('images/headshots/kyla2.jpg');
	}

	.w-party_photo--adam {
		background-image: url('images/headshots/adam.png');
	}

	.w-party_title {
		font-size: 20px;
	}


/*ACCOMODATIONS*/

	.hotel-text {
		text-align: center;
	}

	.page-accomodations {
		background-color: #D9C7C7;
	}

	.hotel-wrap {
		padding-bottom: 80px;
		grid-template-columns: 40% 40%;
		grid-gap: 10%;
		align-items: center;

	}


	.hotel-image {
		background-size: cover;
		background-position: center center;
    	width: 90%;
    	height: 190px;
		margin: 0 auto 30px;
	}

	.hotel-image1 {

		order: 1;
		background-image:  url("images/photos/accommodation1.jpeg");
	}


	.hotel-image7 {

		background-image:  url("images/photos/accommodation7.png");
	}

	.hotel-image2 {

		background-image:  url("images/photos/accommodation2.jpeg");
		order: 1;
	}

	.hotel-image3 {


		background-image:  url("images/photos/accommodation3.jpeg");
	}

	.hotel-image4 {

		background-image:  url("images/photos/accommodation4.jpeg");
		order: 1;
	}

	.hotel-image5 {


		background-image:  url("images/photos/accommodation5.jpeg");
	}

	.hotel-image6 {

		background-image:  url("images/photos/accommodation6.jpeg");
		order: 1;
	}


/*  DETAILS  */




	.page-details {
		background-color: #8BA7B3;
	}


	.important-dates {
		display: grid;
		grid-template-rows: 1fr 1fr;
		grid-template-columns: 1fr 1fr;
		align-items: center;
	}

	.important-date {
		text-align: right;
		border-right: 1px solid #DDDDDD;
		padding: 12px 20px 12px 0;
	}

	.important-date-label {
		padding: 12px 0 12px 20px;
	}

	.map {
		background-image:  url("images/photos/map.png");
		background-size: cover;
		background-position: center center;
		max-width:  900px;
		height:  360px;
		margin-bottom: 30px;
	}

	.photo-5 {
		width: 300px;
	    height: auto;
	    transform: rotate(-1deg);
	    margin: 8% auto 0;
	    display: block;
	}

	.photo-6 {
		width: 300px;
	    height: auto;
	    transform: rotate(1deg);
	    margin: 8% auto 0;
	        display: block;
	}




/*  RSVP & REGISTRY  */


	.page-rsvp {
		background-color:  #B49F81;
	}

	.photo-3 {
		width: 300px;
	    height: auto;
	    transform: rotate(-1deg);
	    margin: 8% auto 0;
	    display: block;
	}

	.photo-4 {
		width: 300px;
	    height: auto;
	    transform: rotate(1deg);
	    margin: 8% auto 0;
	        display: block;
	}







/* Super8 */

	.page-super {
		background-color: #70857B;
	}

	.super8-wrap {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr;
		grid-gap: 10px;
		padding-bottom: 40px;
	}


	.super8-gif {
	    height: 180px;
	    width: auto;
		display: inline-block;
		background-color:  black;
		border: solid white 10px;
	}




	.super8-still1 {
		background-image: url("images/gifs/1.png");
		background-size: cover;
		z-index: 100;
		opacity: 100;
	}

	.super8-still1 :hover {
		display: none;
	}

	.super8-gif1:hover  {
		background-image: url("images/gifs/1.gif");
		background-size: cover;

	}




	.super8-still2 {
		background-image: url("images/gifs/2.png");
		background-size: cover;
		z-index: 100;
	}

	.super8-still2 :hover {
		display: none;

	}

	.super8-gif2:hover {
		background-image: url("images/gifs/2.gif");
		background-size: cover;
	}



	.super8-still3 {
		background-image: url("images/gifs/8.png");
		background-size: cover;
		z-index: 100;
	}

	.super8-still3 :hover {
		display: none;
	}

	.super8-gif3:hover {
		background-image: url("images/gifs/8.gif");
		background-size: cover;
	}





	.super8-still4 {
		background-image: url("images/gifs/6.png");
		background-size: cover;
		z-index: 100;
	}

	.super8-still4 :hover {
		display: none;
	}

	.super8-gif4:hover {
		background-image: url("images/gifs/6.gif");
		background-size: cover;
	}





	.super8-still5 {
		background-image: url("images/gifs/5.png");
		background-size: cover;
		z-index: 100;
	}

	.super8-still5 :hover {
		display: none;
	}

	.super8-gif5:hover {
		background-image: url("images/gifs/5.gif");
		background-size: cover;
	}



	.super8-still6 {
		background-image: url("images/gifs/3.png");
		background-size: cover;
		z-index: 100;
	}

	.super8-still6 :hover {
		display: none;
	}

	.super8-gif6:hover {
		background-image: url("images/gifs/3.gif");
		background-size: cover;
	}




/*MEDIA QUERIES*/

	@media screen and (min-width: 768px) {

		nav {
			display: block;
		}


		.welcome-text__title {
			padding-bottom: 30px;
			font-size: 55px;
		}

		.welcome-text__subtitle {
			font-size: 19px;
			padding-bottom: 12px;
		}

		.shoe-text_title {
			font-size: 25px;
		}


	}

	@media screen and (min-width: 1000px) {

		.nav-links {
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.nav-link {
			margin: 0 5px;
		}

		.nav-menu-icon {
			display: none;
		}

		.nav-menu-wrap {
			display: flex;
		}

		section {
			padding:  0 0;
		}

		section:last-child {
			margin-bottom: 100px;
		}

		.section-header-wrap {
			padding: 20% 0 0%;
		}

		.content-wrap-outer {
			padding: 0;
		}

	/*  WELCOME  */
		.content-wrap {
		    padding: 0;
		    display: grid;
		    grid-gap: 30px;
		}

		.content-wrap--welcome {
			display: grid;
			grid-template-columns: 1.2fr .8fr;
			height: 100vh;
			width: 100vw;
			grid-column-gap: 5%;
			align-items: center;
			justify-items: center;
			margin-bottom: 20%;
		}

		.welcome-photo {
			justify-self: end;
		}

		.welcome-text {
			justify-self: start;
		}


		.content-wrap--shoes {
			display: grid;
			grid-template-rows: min-content min-content min-content;
			grid-template-columns: min-content 1fr .9fr;
			justify-items: center;
			align-items: start;
		}

		.shoe-photo {
			width: 65%;
			height: auto;
			transform: rotate(3deg);
			order:  2;
			grid-column-start: 3;
			grid-column-end: 3;
			grid-row-start: 1;
			grid-row-end: 4;
			align-self: center;
		}

		.shape-green {
			background-image: url(images/shapes/green.svg);
			background-size: contain;
			background-repeat: no-repeat;
			width: 100%;
		    height: 180px;
		    grid-column-start: 1;
		    grid-column-end: 3;
		    grid-row-start: 1;
		    grid-row-end: 2;
		    z-index: 20;

		}

		.shape-pink {
			background-image: url(images/shapes/pink.svg);
			background-size: contain;
			background-repeat: no-repeat;
			grid-column-start: 1;
			grid-column-end: 1;
			grid-row-start: 1;
			grid-row-end: 4;
			justify-self: start;
			width: 200px;
			height: 100%;
    		position: relative;
    		top:  70px;
		}

		.shape-blue {
			background-image: url(images/shapes/blue.svg);
		    background-size: contain;
		    background-repeat: no-repeat;
		    grid-column-start: 1;
		    grid-column-end: 3;
		    grid-row-start: 3;
		    grid-row-end: 3;
		    width: 100%;
		    height: 310px;
		    justify-self: start;
		    position: relative;
		    top:  -130px;
		}

		.shoe-text {
			max-width: 600px;
			justify-self: start;
			order:  1;
			grid-column-start: 2;
			grid-column-end: 3;
			grid-row-start: 2;
			grid-row-end: 2;
		}

		.shoe-text_title {
			font-size: 25px;
		}

		.shapes1 {
			display: grid;
			grid-template-columns: 1fr 1fr;
			height: 100vh;
			width: 100vw;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			margin-bottom: 20%;
		}

		.shapes2 {
			display: grid;
			position: absolute;
			grid-template-columns: 1fr 1fr;
			top: 100vh;
			left: 0;
			width: 100%;
			height: 100vh;
			z-index: -1;
			padding-top: 10%;
		}

		.shape1 {
			width: 100%;
			padding-top: 50px;
			justify-self: start;
			align-self: start;
		}

		.shape2 {
			width: 80%;
			justify-self: end;
			align-self: end;

		}

		.shape3 {
			display: none;
		}

		.shape4 {
			grid-column-start: 3;
			grid-column-end: 3;
			grid-row-start: 1;
			grid-row-end: 4;
			width: 100%;
			height: 100vh;
		}

	/*  VENUES  */
		.venue-combo {
			display: none;
		}

		.venue-section {
			display:  block;
			margin: 0;
			padding:  0;
		}

		.venue-section:last-child {
			padding-bottom: 100px;
		}

		.venue-photo1 {
			width: 50%;
			transform: rotate(-3deg);
			position: relative;
			left: 12%;
	    	top: -20px;
		}

		.venue-photo2 {
			width: 40%;
			transform: rotate(2deg);
			position: relative;
			left: 0%;
		    top: 0%;
		}

		.venue-photo3 {
			width: 30%;
			transform: rotate(1deg);
			position: relative;
			left: 30%;
		    top: -10%;
		}

		.venue-photo4 {
		    width: 42%;
		    transform: rotate(-2deg);
		    position: relative;
		    right: -49%;
		    top: 6%;
		}

		.venue-photo5 {
		    width: 60%;
		    transform: rotate(3deg);
		    position: relative;
		    right: -10%;
		    top: -5%;
		}



		.venue-photo6 {
			width: 30%;
			transform: rotate(-3deg);
			position: relative;
	    	left: 10%;
	    	top: 45%;
		}

		.venue-photo7 {
			width: 65%;
			transform: rotate(2deg);
			position: relative;
	    	left: 30%;
	   		top: 35%;
		}

		.venue-photo8 {
			width: 65%;
			transform: rotate(1deg);
			position: relative;
			right: 15%;
	    	top: 15%;
		}

		.venue-photo9 {
			width: 40%;
			transform: rotate(-3deg);
			position: relative;
			right: -6%;
		    top: 9%;
		}

		.venue-photo10 {
			width: 40%;
			transform: rotate(3deg);
			position: relative;
			right: 3%;
		    top: -10%;
		}


		.venue-section-stpeters {
			display: grid;
			grid-template-columns: 43% 27% 30%;
			height: calc(100vh - 10%);
			justify-items: center;
			align-items: center;
		}

		.venue-section-kingwood{
			display: grid;
			grid-template-columns: 35% 25% 45%;
			height: calc(100vh - 10%);
			overflow:  hidden;
			justify-items: center;
			align-items: center;
		}

		.photo-group {
			display: block;
			position: relative;
			height: calc(100vh - 10%);
		}

		.photo-group1 {
			left: -7%;
		}

		.photo-group3 {
			top:  -10%;
		}

		.photo-group4 {
			top:  -10%;
		}

		.venue-text {
			position: relative;
			left: -5%;
			top: -10%;
			min-width: 420px;
		}

		.venue-text2 {
			position: relative;
			left: -50%;
			top: -180px;
			min-width: 420px;
		}


	/* WEDDING PARTY */


		.w-party-wrap {
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr 1fr;
			grid-gap: 60px 80px;
		}

	/* ACCOMODATIONS */

		.hotel-text {
			position: relative;
			min-width: 420px;
			text-align: left;
		}

		.hotel-wrap {
			display:  grid;
		}

		.hotel-image {
			/*background-image:  url("images/photos/map.png");*/
			background-size: cover;
			background-position: center center;
			width:  350px;
			height:  270px;
			margin-bottom: 30px;
		}

		.hotel-image1 {
			transform: rotate(2deg);
			order: 1;
			background-image:  url("images/photos/accommodation1.jpeg");
		}


		.hotel-image7 {
			transform: rotate(-2deg);
			background-image:  url("images/photos/accommodation7.png");
		}

		.hotel-image2 {
			transform: rotate(2deg);
			background-image:  url("images/photos/accommodation2.jpeg");
			order: 1;
		}

		.hotel-image3 {
			transform: rotate(-2deg);

			background-image:  url("images/photos/accommodation3.jpeg");
		}

		.hotel-image4 {
			transform: rotate(2deg);
			background-image:  url("images/photos/accommodation4.jpeg");
			order: 1;
		}

		.hotel-image5 {
			transform: rotate(-2deg);

			background-image:  url("images/photos/accommodation5.jpeg");
		}

		.hotel-image6 {
			transform: rotate(2deg);
			background-image:  url("images/photos/accommodation6.jpeg");
			order: 1;
		}

	/*SUPER 8*/

		.super8-wrap {
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr 1fr 1fr;
			grid-gap: 10px;
			padding-bottom: 40px;
		}

	}

	@media screen and (min-width: 1200px) {

		.photo-3 {
			width: 25%;
		    height: auto;
		    position: absolute;
		    transform: rotate(-4deg);
		    left: -5%;
		    top: 80px;
		}

		.photo-4 {
			width: 20%;
		    height: auto;
		    position: absolute;
		    transform: rotate(3deg);
		    right: -30px;
		    bottom: -10%;
		}

		.photo-5 {
			width: 300px;
		    height: auto;
		    position: absolute;
		    transform: rotate(-4deg);
		    left: 0px;
		    top: 10px;
		}

		.photo-6 {
			width: 280px;
		    height: auto;
		    position: absolute;
		    transform: rotate(4deg);
		    right: -60px;
		    top: 530px
		}
	}