#wrapper{
	margin:auto;
	padding: 0px;
	width:100%;
	max-width: 100%;
	min-width: 100%;
  height: 100%;
}

#main{
	overlfow: auto;
  pading-bottom: 300px;
}

body{
  font-family: quicksand;
  margin: 0;
  height: 100%;
}



/*LOGO*/
.logo{
  width: 25%;
  margin-left: 8%;
  margin-right: auto;
  margin-top: 7%;
  display: block;
}



@media screen and (min-width: 701px) and (max-width: 1150px){
  .logo{
    width: 45%;
    margin-left: auto;
    margin-top: 8%;
  }
}

@media screen and (max-width: 701px){
	.logo{
		width: 55%;
		margin-left: auto;
		margin-right: auto;

	}
}



/*NAVIGATION BAR*/
.topnav{
  text-align: right;
  width: 93%;
  font-family: 'Quicksand', sans-serif;
  font-style: bold;
  letter-spacing: 1.25px;
  font-size: 18px;
  margin-top: -75px;
	margin-bottom: 8%;
}

.topnav a{
  text-decoration: none;
  padding: 9px;
  color: rgb(165,165,165);
}

.topnav a:hover{
  color: rgb(229,186,177);
}

.topnav .active{
  color: rgb(229,186,177);
}

.topnav .icon{
  display: none;
}

@media screen and (min-width: 1150px) and (max-width: 1200px){
  .topnav{
		letter-spacing: .75px;
		font-size: 16px;
  }
}



@media screen and (min-width: 701px) and (max-width: 1150px){
  .topnav{
    margin-top: 5%;
    text-align: center;
    width: 100%;
    padding: 10px;
		margin-bottom: 5%;
  }
}

@media screen and (max-width: 701px) {

  #myTopnav{
    margin-top: 6%;
    width: 100%;
    background-color: rgb(229,186,177);
    height: 70px;
		z-index: 1111;
  }

  .topnav a:not(:first-child) {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
    color: rgb(255,255,255);
    padding: 25px 25px;
  }

  .topnav a {
    display: inline-block;
    text-align: center;
    padding: 25px 25px;
    text-decoration: none;
    font-size: 18px;
    color: rgb(255,255,255);
}

  .topnav .active{
    color: rgb(255,255,255);
  }

}

@media screen and (max-width: 701px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;

  }

	.topnav.responsive .icon a:hover{
		background-color: #F4E4DE;
	}

  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
	  padding: 25px 25px;
	  font-size: 17px;
    background-color: rgb(229,185,179);
    color: rgb(255,255,255);
  }

  .topnav a:hover{
    color: rgb(165,165,165);
		background-color: #F4E4DE;
  }

  .topnav{
	  text-align: left;
	  font-size: 17px;
    color: rgb(255,255,255);

  }

}

/*HOMEPAGE SELECTION OPTIONS*/

.homepagephotography{
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 1.25%;
	width: 70%;
}

.homepagedesign{
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 70%;
	padding-bottom: 1.4%;
}

.homepagebottombars{
	display: table-cell;
	vertical-align: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding-bottom: 9%;
	width: 70%;
}

.homepagejournal{
	padding-right: 1%;
	width: 22.5%;
}

.homepageabout{
	padding-right: 1%;
	width: 22.5%;
}

.homepagecontact{
	width: 22.5%;
}

@media screen and (min-width: 701px) and (max-width: 1150px){
  .homepagephotography{
		width: 80%;
		padding-bottom: 2%;
	}

	.homepagedesign{
		width: 80%;
		padding-bottom: 2%;
	}

	.homepagebottombars{
		width: 80%;
	}

	.homepagejournal{
		width: 25.75%;
		padding-right: 1%;
	}

	.homepageabout{
		width: 25.75%;
		padding-right: 1%;
	}

	.homepagecontact{
		width: 25.75%;
	}

}

@media screen and (max-width: 701px) {
	.homepagephotography{
		width: 90%;
		padding-bottom: 3%;
	}

	.homepagedesign{
		width: 90%;
		padding-bottom: 3%;
	}

	.homepagebottombars{
		width: 90%;
	}

	.homepagejournal{
		width: 27.5%;
		padding-right: 3%;
	}

	.homepageabout{
		width: 27.5%;
		padding-right: 3%;
	}

	.homepagecontact{
		width: 27.5%;
	}

}

/*PHOTOGRAPHYSLIDESHOW*/

/* Slideshow container */
.slideshow-container {
  max-width: 62%;
  position: relative;
  margin-left: auto;
	margin-right: auto;
	margin-bottom: 7%;
}

/* 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;
  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: rgb(232,232,232);
}

@media screen and (min-width: 701px) and (max-width: 1150px){
	.slideshow-container {
	  max-width: 72%;
	}
}

@media screen and (max-width: 701px) {
	.slideshow-container{
		max-width: 85%;
	}

}

/*DESIGNSLIDESHOW*/

/* Slideshow container */
.slideshow-container2 {
  max-width: 75%;
  position: relative;
  margin-left: auto;
	margin-right: auto;
	margin-bottom: 7%;
}

/* Next & previous buttons */
.prev2, .next2 {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: silver;
  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 */
.next2 {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev2:hover, .next2:hover {
  background-color: rgb(232,232,232);
}

@media screen and (min-width: 701px) and (max-width: 1150px){
	.slideshow-container2 {
	  max-width: 85%;
	}

	/* Next & previous buttons */
	.prev2, .next2 {
	  cursor: pointer;
	  position: absolute;
	  top: 50%;
	  width: auto;
	  padding: 5px;
	  margin-top: -22px;
	  color: silver;
	  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 */
	.next2 {
	  right: 0;
	  border-radius: 3px 0 0 3px;
	}
}

@media screen and (max-width: 701px) {
	.slideshow-container2{
		max-width: 95%;
	}

	/* Next & previous buttons */
	.prev2, .next2 {
		cursor: pointer;
		position: absolute;
		top: 50%;
		width: auto;
		padding: 2px;
		margin-top: -22px;
		color: silver;
		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 */
	.next2 {
		right: 0;
		border-radius: 3px 0 0 3px;
	}

}

/*JOURNALPAGE*/

.journalpage{
	margin-bottom: 4%;
}

.journaltitle{
	font-family: 'Quicksand', sans-serif;
	font-style: bold;
	text-align: justify;
	font-size: 20px;
	letter-spacing: 2px;
	color: rgb(165, 164, 164);
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.journalwords{
	font-family: 'Quicksand', sans-serif;
	text-align: justify;
	width: 65%;
	line-height: 250%;
	font-size: 17px;
	color: rgb(165, 164, 164);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.entrylandscape{
	width: 65%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

.entryportrait{
	height: 700px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 2%;
}

@media screen and (max-width: 701px) {

	.journaltitle{
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-size: 16px;
	}

	.journalwords{
		font-size: 16px;
	}

	.entrylandscape{
		width: 85%;
	}
	.entryportrait{
		height: 600px;
	}

	.journalwords{
		width: 85%;
		font-size: 16px;
	}


}



/*ABOUTPAGE*/

.aboutmepage{
	margin-bottom: 4%;
}

.aboutmeimage{
	height: 700px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 4%;

}

.aboutmewords{
	font-family: 'Quicksand', sans-serif;
	text-align: justify;
	width: 65%;
	line-height: 250%;
	font-size: 17px;
	color: rgb(165, 164, 164);
	display: block;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 701px) {

	.aboutmeimage{
		height: 600px;
	}

	.aboutmewords{
		width: 76%;
		font-size: 16px;
	}


}





/*CONTACTPAGE*/


/*CONTACTPAGEMESSAGE*/


#fcf-form {
    display:block;
    margin-left: auto;
    margin-right: auto;
}

.fcf-body {
    margin-left: auto;
    margin-right: auto;
    font-family: 'Quicksand', sans-serif;
    letter-spacing: 3px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.5;
    color: #e3b9b3;
    text-align: left;
    background-color: #fff;
    padding: 50px;
    padding-bottom: 50px;
    border-radius: 0.25rem;
    max-width: 70%;
}

.fcf-form-group {
    margin-bottom: 1rem;
}

.fcf-input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;

}

.fcf-form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #e3b9b3;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    outline: none;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.fcf-form-control:focus {
    border: 1px solid #e3b9b3;
		font-family: 'Quicksand', sans-seif;
		color: #a5a4a4;
}

select.fcf-form-control[size], select.fcf-form-control[multiple] {
    height: auto;
}

textarea.fcf-form-control {
    font-family: 'Quicksand', sans-serif;
    height: auto;
}

label.fcf-label {
    display: inline-block;
    margin-bottom: 0.5rem;
}

#fcf-button{
  width: 12%;
}

@media screen and (max-width: 701px){
  #fcf-button{
    width: 30%;
  }
}

.fcf-btn {
    display: inline-block;
    margin-left: auto;
    font-weight: 400;
    color: #e3b9b3;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-color: transparent;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    letter-spacing: 3px;
    font-family: 'Quicksand', sans-serif;
    border-radius: 0.25rem;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
    .fcf-btn {
        transition: none;
    }
}

.fcf-btn:hover {
    color: #212529;
    text-decoration: none;
}

.fcf-btn:focus, .fcf-btn.focus {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.fcf-btn-primary {
    color: #fff;
    background-color: #e3b9b3;
}

.fcf-btn-primary:hover {
    color: #fff;
    background-color: #f4cdc9;
    opacity: .75;
}

.fcf-btn-primary:focus, .fcf-btn-primary.focus {
    color: #fff;
    background-color: #0069d9;
    border-color: #0062cc;
    box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.fcf-btn-lg, .fcf-btn-group-lg>.fcf-btn {
    padding: 0.5rem 1rem;
    font-size: 16px;
    line-height: 1.5;
    border-radius: 0.3rem;
}

.fcf-btn-block {
    display: block;
    width: 25%;
}

.fcf-btn-block+.fcf-btn-block {
    margin-top: 0.5rem;
}

input[type="submit"].fcf-btn-block, input[type="reset"].fcf-btn-block, input[type="button"].fcf-btn-block {
    width: 100%;
}







/*CONTACTPAGELOGOS*/

#mycontact{
	display: inline-block;
	vertical-align: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10%;
	margin-top: 9%;
}

#mycontact a{
	text-decoration: none;
}
.instagramcontact{
	width: 5%;
	padding-right: 1.25%;
}

.etsycontact{
	width: 5%;
	padding-right: 1.25%;
}

.pinterestcontact{
	width: 5%;
	padding-right: 1.25%;
}

.gmailcontact{
	width: 5%;
}


@media screen and (min-width: 701px) and (max-width: 1150px){

.instagramcontact{
	width: 7%;
	padding-right: 1%;
}

.etsycontact{
	width: 7%;
	padding-right: 1%;
}

.pinterestcontact{
	width: 7%;
	padding-right: 1%;
}

.gmailcontact{
	width: 7%;
}

}

@media screen and (max-width: 701px) {

.instagramcontact{
	width: 8%;
	padding-right: 1%;
}

.etsycontact{
	width: 8%;
	padding-right: 1%;
}

.pinterestcontact{
	width: 8%;
	padding-right: 1%;
}

.gmailcontact{
	width: 8%;
}
}




























/*FOOTER*/
.footer{
  background-color: rgb(229, 186, 177);
  height: 280px;
  width: 100%;
	height: 300px;
	clear: both;
  position: relative;
  bottom: 0;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.contact{
  font-family: 'Quicksand', sans-serif;
  color: rgb(255,255,255);
	line-height: 25px;
	width: 100%;
	text-align: center;
  letter-spacing: 3px;
	margin-top: 65px;
	padding-top: 75px;
}

.contact a{
  text-decoration: none;
  color: rgb(255,255,255);
}

.contact a:hover{
  color: rgb(165,165,165);
}


.lemon{
  margin-left: 10px;
	margin-top: -10px;
}

















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