/* CSS ~ Portfolio
Property of Elizabeth Cozart */

body {
	margin: 0;
	padding: 0;
	color: #000;
	text-align: center;
	font-size: 16px;
	font-family: 'Antic', sans-serif;
}

a {
	color: #A9A9A9;
	text-decoration: none;
	transition: 0.5s;
}

a:hover {
	color: #A9A9A9;
	text-decoration: none;
	transition: 0.5s;
}

/* Highlight code ~ w3schools */

/* Code for Firefox */
::-moz-selection {
	color: #fff;
	background: #DF9997;
}

::selection {
	color: #fff;
	background: #DF9997;
}

h1,
h2,
h3,
h4 {
	font-weight: bold;
	text-align: center;
	font-family: 'Cherry Swash', cursive;
}

h1 {
	margin: 30px auto;
	font-size: 30px;
}

h2 {
	font-size: 24px;
}

h3 {
	font-size: 20px;
}

h4 {
	font-size: 16px;
	margin-bottom: -10px;
}

/* Mobile menu ~ w3schools */
#mobile-nav {
	position: relative;
	list-style-type: none;
	margin: 0;
	padding: 0;
	top: 0;
	width: 100%;
	background-color: #DF9997;
}

#mobile-nav a {
	display: block;
	background-color: #fff;
	padding: 15px;
	font-size: 18px;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
	border-bottom: 4px double #DF9997;
	color: #000;
	cursor: pointer;
	transition: 0.5s;
}

#mobile-nav a:hover {
	color: #547C53;
	background: #F9FAF5;
	transition: 0.5s;
}

.openbtn {
	display: block;
	margin: auto;
	font-size: 30px;
	background-color: #DF9997;
	color: #fff;
	border: none;
	padding: 15px;
	cursor: pointer;
	transition: 0.5s;
}

.openbtn:hover {
	background-color: #DF9997;
	color: #000;
	transition: 0.5s;
}

#mobile-nav #myLinks {
	display: none;
}

/* Tooltip code ~ w3schools */
.tooltip {
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext {
	visibility: hidden;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
	width: 70px;
	background-color: #DF9997;
	color: #fff;
	outline: 1px solid #fff;
	outline-offset: -2px;
	font-size: 12px;
	padding: 5px 0;
	position: absolute;
	z-index: 1;
	top: 105%;
	left: 50%;
	margin-left: -32px;
	/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
	opacity: 0;
	transition: opacity 1s;
}

.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}

/* To Top Button ~ w3schools */
#toTopButton {
	display: none;
	position: fixed;
	bottom: 170px;
	left: 15px;
	z-index: 99;
	font-size: 30px;
	color: #fff;
	background-color: #547C53;
	cursor: pointer;
	padding: 10px;
	border: 0;
	transition: 0.5s;
}

#toTopButton:hover {
	color: #DF9997;
	transition: 0.5s;
}

/* Image border-bottom line for mobile */
#img-line {
	border-bottom: 4px double #DF9997;
	background-color: #fff;
}

/* Navigation links */
#nav,
#nav a {
	position: relative;
	color: #000;
	margin: 30px 22px 30px 22px;
	transition: 0.5s;
}

#nav a:hover {
	color: #DF9997;
	transition: 0.5s;
}

#nav a:before {
	content: "";
	position: absolute;
	width: 100%;
	height: 2px;
	bottom: -5px;
	left: 0;
	background-color: #547C53;
	visibility: hidden;
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	transition: 0.5s;
}

#nav a:hover:before {
	visibility: visible;
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

/* Main Cover for Index Page */
#cover {
	background-color: #fff;
	border: 4px double #DF9997;
	border-radius: 15px;
	padding: 15px;
	width: auto;
	margin: auto;
	height: auto;
}

#cover h1 {
	margin: 20px auto;
	font-size: 40px;
}

#cover h2 {
	margin: 20px auto;
	font-size: 38px;
}

#cover h3 {
	margin: 20px auto;
	word-wrap: break-word;
	font-size: 24px;
	color: #A9A9A9;
}

#cover p {
	width: 75%;
	margin: 25px auto 15px auto;
}

/* Heading 1 bottom-border for Index Page */
#h1-border {
	width: 98%;
	margin: 30px auto;
	border-bottom: 2px solid #A9A9A9;
}

/* Cover Image for Index Page */
#cover-img {
	padding: 120px;
	background-image: url('images/floral-pattern.jpg');
}

/* Border Image for non-index pages */
#border-img {
	padding: 57.5px;
	background-image: url('images/floral-pattern.jpg');
}

/* Quote for Index Page */
#quote {
	font-family: 'Cherry Swash', cursive;
	margin: 15px auto;
	font-style: italic;
	font-weight: bold;
}

/* Social media buttons for Index Page */
.index-social {
	font-size: 20px;
	position: absolute;
	top: 50px;
	left: 143px;
	float: left;
}

.index-social i,
.social i {
	color: #fff;
	background-color: #A9A9A9;
	padding: 5px;
	height: 20px;
	width: 20px;
	font-size: 20px;
	margin-top: 30px;
	margin-right: 5px;
	float: left;
}

/* Social media buttons for non-index pages */
.social {
	font-size: 20px;
	position: absolute;
	top: 50px;
	left: 15px;
	float: left;
}

/* Box layout for Index Page */
#box {
	display: inline-block;
	border: 4px double #DF9997;
	border-radius: 15px;
	width: 250px;
	height: auto;
	margin: auto;
	padding: 15px;
	background-color: #fff;
	transition: 0.5s;
}

#box a {
	color: #000;
	transition: 0.5s;
}

#box:hover {
	background-color: #A9A9A9;
	border: 4px double #A9A9A9;
	transition: 0.5s;
}

/* Box headings for Index Page */
#box-heading {
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
}

#box p {
	font-size: 14px;
	margin: auto;
}

#box i {
	margin: 30px auto;
	color: #547C53;
	font-size: 35px;
}

/* About Portrait */
#about-portrait {
	display: inline-block;
}

#about-portrait img {
	display: inline-block;
	width: 20%;
	margin: 0;
	height: 20%;
}

/* Nav for other pages */
#secondary-nav {
	padding: 15px;
	width: auto;
	background-color: #fff;
	border: 4px double #DF9997;
}

/* Personality Sidebars for About Page */
#personality-s1 {
	padding: 15px;
	width: 15%;
	height: auto;
	margin: auto;
	background-color: #fff;
	border-left: 4px double #DF9997;
	border-right: 4px double #DF9997;
	border-bottom: 4px double #DF9997;
	float: left;
}

#personality-s2 {
	padding: 15px;
	width: 15%;
	height: auto;
	margin: auto;
	background-color: #fff;
	border-left: 4px double #DF9997;
	border-right: 4px double #DF9997;
	border-bottom: 4px double #DF9997;
	float: right;
}

#personality-s1 p,
#personality-s2 p {
	font-size: 14px;
}

#personality-s1 i,
#personality-s2 i {
	color: #DF9997;
	font-size: 16px;
}

/* Spacing between personality questions */
#extra-spacing {
	height: 110px;
	width: auto;
}

/* Personality slide toggles for About Page ~ w3schools */
#toggle-container {
	margin: 5px auto;
	padding: 15px;
}

#flip1,
#flip2,
#flip3,
#flip4,
#flip5,
#flip6,
#flip7,
#flip8,
#flip9,
#flip10 {
	padding: 10px;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
	border-radius: 15px;
	background-color: #DF9997;
	border: 1px solid #fff;
	cursor: pointer;
}

#panel1,
#panel2,
#panel3,
#panel4,
#panel5,
#panel6,
#panel7,
#panel8,
#panel9,
#panel10 {
	border-radius: 15px;
	background-color: #F9FAF5;
	padding: 20px;
	display: none;
}

/* Content for About Page */
#about-content {
	padding: 10px;
}

#about-content a {
	color: #DF9997;
	font-weight: bold;
	text-decoration: none;
	transition: 0.5s;
}

#about-content a:hover {
	color: #547C53;
	text-decoration: none;
	transition: 0.5s;
}

/* Photo caption for About Page */
#photo-caption {
	font-size: 12px;
	width: 250px;
	padding: 5px;
	margin: auto;
}

/* Columns & rows for Catalog & Sample pages ~ w3schools */
.column-container {
	margin: 0 50px;
}

.column {
	height: auto;
	padding: 10px;
	margin: auto;
	box-sizing: border-box;
}

.left {
	float: left;
	margin-left: auto;
	margin-right: auto;
	background-color: #A9A9A9;
	outline: 1px solid #fff;
	outline-offset: -2px;
	width: 55%;
}

.left a {
	color: #fff;
	font-weight: bold;
}

.right {
	float: right;
	width: auto;
	margin-left: auto;
	margin-right: auto;
}

ul {
	list-style-type: circle;
	list-style-position: inside;
	margin-left: -30px;
}

li {
	margin: 25px;
}

.column1,
.column2 {
	margin: auto;
	width: auto;
	padding: 0 15px 30px 15px;
}

.row {
	margin: auto;
	width: auto;
}

/* Clearfix (clear floats) */
.row::after {
	content: "";
	clear: both;
	display: table;
}

/* Hover effects for Catalog Page ~ w3schools */
.container {
	position: relative;
	width: 332px;
	margin: auto;
	border-radius: 15px;
	background-color: rgba(223, 153, 151, 0.3);
}

.image {
	display: block;
	border: 4px double #DF9997;
	background-color: #fff;
	border-radius: 15px;
	padding: 0;
	width: 325px;
	height: 175px;
	opacity: 1;
	backface-visibility: hidden;
	transition: 0.5s;
}

.middle {
	transition: 0.5s;
	opacity: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 140px;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
}

.container:hover .image {
	opacity: 0.3
}

.container:hover .middle {
	opacity: 1;
}

.title {
	font-size: 18px;
	width: 310px;
	margin-left: -85px;
	margin-bottom: 65px;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
}

/* Button effect for Catalog Page ~ w3schools */
.container .btn {
	position: absolute;
	top: 65%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	background-color: #DF9997;
	color: #fff;
	font-family: 'Antic', sans-serif;
	font-size: 16px;
	padding: 16px 32px;
	border-radius: 15px;
	width: 160px;
	border: none;
	cursor: pointer;
	transition: 0.5s;
}

.btn a {
	color: #fff;
	transition: 0.5s;
}

.btn a:hover {
	color: #fff;
	transition: 0.5s;
}

.container .btn:hover {
	cursor: pointer;
	background-color: #547C53;
	transition: 0.5s;
}

/* Slideshow for sample pages ~ w3schools*/

/* Slideshow container */
.slideshow-container {
	padding: 10px 25px 25px 25px;
	margin: auto;
}

.slideshow {
	max-width: 700px;
	position: relative;
	margin: auto;
}

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

/* Position the "previous button" to the left */
.prev {
	left: 0;
	border-radius: 3px 0 0 3px;
}

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

/* Number text (1/3 etc) */
.numbertext {
	color: #000;
	font-weight: bold;
	padding: 15px;
	position: absolute;
}

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

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

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

/* Button for sample pages */
.sample-btn {
	display: block;
	background-color: #DF9997;
	color: #fff;
	font-family: 'Antic', sans-serif;
	font-size: 16px;
	margin: 0 auto 10px auto;
	padding: 16px 32px;
	border-radius: 15px;
	width: 175px;
	border: none;
	cursor: pointer;
	transition: 0.5s;
}

.sample-btn a {
	color: #fff;
	transition: 0.5s;
}

.sample-btn a:hover {
	color: #fff;
	transition: 0.5s;
}

.sample-btn:hover {
	cursor: pointer;
	background-color: #547C53;
	transition: 0.5s;
}

/* Image for Contact Page */
#mail img {
	display: block;
	margin: auto;
}

/* Contact Form ~ codepen */
form h1 {
	font-size: 18px;
	background: #DF9997;
	padding: 15px;
	border-radius: 15px 15px 0 0;
	margin: 0 30px auto;
}

form {
	border-radius: 15px;
	max-width: 700px;
	width: 100%;
	margin: auto;
	background-color: #fff;
	overflow: hidden;
}

form p span {
	color: #547C53;
	font-weight: bold;
}

input {
	border-radius: 0 5px 5px 0;
	border: 1px solid #F9FAF5;
	margin-bottom: 15px;
	width: 75%;
	height: 40px;
	float: left;
	padding: 0 15px;
}

textarea {
	border-radius: 0 5px 5px 0;
	border: 1px solid #F9FAF5;
	margin: 0;
	width: 75%;
	height: 130px;
	float: left;
	padding: 0 15px;
}

.form-group {
	overflow: hidden;
	clear: both;
}

.icon-case {
	float: left;
	border-radius: 5px 0 0 5px;
	background: #F9FAF5;
	color: #DF9997;
	width: 35px;
	height: 42px;
	font-size: 18px;
	position: relative;
	line-height: 45px;
}

.contentform {
	padding: 30px;
}

.button-contact {
	background-color: #DF9997;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
	width: 100%;
	border: 0;
	padding: 15px;
	border-radius: 0 0 15px 15px;
	cursor: pointer;
	margin-top: 40px;
	font-size: 18px;
}

.leftcontact {
	width: 49.5%;
	float: left;
	border-right: 4px double #DF9997;
	box-sizing: border-box;
	padding: 0 15px 0 0;
}

.rightcontact {
	width: 49.5%;
	float: right;
	box-sizing: border-box;
	padding: 0 0 0 15px;
}

#sendmessage {
	border: 0;
	display: none;
	margin: 10px 0;
	font-weight: bold;
	font-family: 'Cherry Swash', cursive;
	font-size: 18px;
	margin-bottom: 30px;
	background-color: #DF9997;
	padding: 15px;
	border-radius: 15px;
}

#sendmessage.show,
.show {
	display: block;
}

/* Footer */
#footer {
	background-color: #DF9997;
	padding: 15px;
	height: auto;
	margin: 0;
	font-size: 12px;
}

#footer-menu {
	color: #000;
}

#footer-menu a {
	color: #fff;
	font-size: 14px;
	font-family: 'Cherry Swash', cursive;
	font-weight: bold;
	transition: 0.5s;
}

#footer-menu a:hover {
	color: #547C53;
	transition: 0.5s;
}

#footer i {
	color: #fff;
	border-radius: 50%;
	background-color: #547C53;
	padding: 10px;
	display: inline-block;
	height: 20px;
	width: 20px;
	margin: 0 5px 10px 0;
	font-size: 20px;
	transition: 0.5s;
}

#footer i:hover {
	color: #DF9997;
	background-color: #fff;
	transition: 0.5s;
}

/* Responsive codes */

/* Small devices */
@media only screen and (max-width: 767px) {
	#mobile-nav {
		visibility: visible;
	}
	.openbtn {
		visibility: visible;
	}
	.wrapper2 {
		margin: 15px auto;
	}
	.column {
		width: 100%;
		display: block;
	}
	ul {
		margin-left: -40px;
	}
	.column1 {
		display: block;
	}
	.column2 {
		display: block;
	}
	#cover {
		width: auto;
		margin: -5px -85px auto;
	}
	#box {
		display: block;
		width: 250px;
		height: auto;
		margin: 0 auto 30px auto;
	}
	#nav {
		display: none;
	}
	.index-social {
		display: none;
	}
	#secondary-nav {
		display: none;
	}
	#img-line {
		visibility: visible;
	}
	.social {
		display: none;
	}
	#about-content {
		width: 75%;
		margin: auto;
	}
	#toggle-container {
		visibility: visible;
	}
	#personality-s1 {
		display: none;
	}
	#personality-s2 {
		display: none;
	}
	#personality-s1 p,
	#personality-s2 p {
		display: none;
	}
	#personality-s1 i,
	#personality-s2 i {
		display: none;
	}
	#flip1,
	#flip2,
	#flip3,
	#flip4,
	#flip5,
	#flip6,
	#flip7,
	#flip8,
	#flip9,
	#flip10 {
		visibility: visible;
	}
	#panel1,
	#panel2,
	#panel3,
	#panel4,
	#panel5,
	#panel6,
	#panel7,
	#panel8,
	#panel9,
	#panel10 {
		visibility: visible;
	}
	#mail img {
		margin: -22px auto -5px auto;
	}
}

/* Medium devices */
@media only screen and (min-width: 768px) {
	#mobile-nav {
		display: none;
	}
	.openbtn {
		display: none;
	}
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
	.wrapper2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 15px auto;
		grid-gap: 5px;
	}
	.right {
		width: 45%;
	}
	ul {
		margin-left: -40px;
	}
	.column1 {
		float: right;
	}
	.column2 {
		float: left;
	}
	#cover {
		width: auto;
		margin: -5px -85px auto;
	}
	#cover-img, #border-img {
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#box {
		display: block;
		margin: 0 auto 60px auto;
	}
	#nav {
		visibility: visible;
	}
	.index-social {
		margin-left: -90px;
	}
	#secondary-nav {
		visibility: visible;
	}
	#about-content {
		width: 55%;
	}
	#img-line {
		display: none;
	}
	#toggle-container {
		display: none;
	}
	#personality-s1 {
		visibility: visible;
	}
	#personality-s2 {
		visibility: visible;
	}
	#personality-s1 p,
	#personality-s2 p {
		visibility: visible;
	}
	#personality-s1 i,
	#personality-s2 i {
		visibility: visible;
	}
	#flip1,
	#flip2,
	#flip3,
	#flip4,
	#flip5,
	#flip6,
	#flip7,
	#flip8,
	#flip9,
	#flip10 {
		display: none;
	}
	#panel1,
	#panel2,
	#panel3,
	#panel4,
	#panel5,
	#panel6,
	#panel7,
	#panel8,
	#panel9,
	#panel10 {
		display: none;
	}
	#mail img {
		position: relative;
		margin: -22px auto -5px auto;
	}
}

/* Large devices */
@media only screen and (min-width: 992px) {
	#mobile-nav {
		display: none;
	}
	.openbtn {
		display: none;
	}
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-gap: 10px;
	}
	.wrapper2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 15px auto;
		grid-gap: 5px;
	}
	.right {
		width: 40%;
	}
	ul {
		display: inline-block;
	}
	.column1 {
		float: right;
	}
	.column2 {
		float: left;
	}
	#cover {
		width: auto;
		margin: -5px auto;
	}
	#cover-img, #border-img {
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#box {
		display: block;
		margin: 0 auto 60px auto;
	}
	#nav {
		visibility: visible;
	}
	.index-social {
		margin-left: -5px;
	}
	#secondary-nav {
		visibility: visible;
	}
	#about-content {
		width: 55%;
	}
	#img-line {
		display: none;
	}
	#toggle-container {
		display: none;
	}
	#personality-s1 {
		visibility: visible;
	}
	#personality-s2 {
		visibility: visible;
	}
	#personality-s1 p,
	#personality-s2 p {
		visibility: visible;
	}
	#personality-s1 i,
	#personality-s2 i {
		visibility: visible;
	}
	#flip1,
	#flip2,
	#flip3,
	#flip4,
	#flip5,
	#flip6,
	#flip7,
	#flip8,
	#flip9,
	#flip10 {
		display: none;
	}
	#panel1,
	#panel2,
	#panel3,
	#panel4,
	#panel5,
	#panel6,
	#panel7,
	#panel8,
	#panel9,
	#panel10 {
		display: none;
	}
	#mail img {
		position: absolute;
		top: 380px;
		right: 30px;
		transform: rotate(20deg);
	}
}

/* Extra large devices */
@media only screen and (min-width: 1200px) {
	#mobile-nav {
		display: none;
	}
	.openbtn {
		display: none;
	}
	.wrapper {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		margin: auto;
	}
	.wrapper2 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		margin: 15px auto;
		grid-gap: 5px;
	}
	.right {
		width: 40%;
	}
	ul {
		display: inline-block;
	}
	.column1 {
		float: right;
	}
	.column2 {
		float: left;
	}
	#cover {
		margin: -5px auto;
	}
	#cover-img, #border-img {
		background-attachment: fixed;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
	}
	#box {
		display: block;
		margin: 0 auto 30px auto;
	}
	#nav {
		visibility: visible;
	}
	#secondary-nav {
		visibility: visible;
	}
	#about-content {
		width: 60%;
	}
	#img-line {
		display: none;
	}
	#toggle-container {
		display: none;
	}
	#personality-s1 {
		visibility: visible;
	}
	#personality-s2 {
		visibility: visible;
	}
	#personality-s1 p,
	#personality-s2 p {
		visibility: visible;
	}
	#personality-s1 i,
	#personality-s2 i {
		visibility: visible;
	}
	#flip1,
	#flip2,
	#flip3,
	#flip4,
	#flip5,
	#flip6,
	#flip7,
	#flip8,
	#flip9,
	#flip10 {
		display: none;
	}
	#panel1,
	#panel2,
	#panel3,
	#panel4,
	#panel5,
	#panel6,
	#panel7,
	#panel8,
	#panel9,
	#panel10 {
		display: none;
	}
}