@charset "UTF-8";

/********* CSS RESETS **********/

img {
	max-width:100%;
}

h1, h2, h3, p, ul, ol {
	margin: 0;
	padding: 0;
}

nav ul, nav ol {
	list-style-type: none;
}

a {
	text-decoration:none;
}

/********* End CSS Reset *********/

body {
	font-family: "Open Sans Sans", sans-serif;
	font-weight: 400;
	color: #333333;
	overflow-x: hidden;
}

#container {
	overflow: hidden;
}

/**************** Buttons and Social Media Icons Styles*****************/

.icon-bar {
  	position: fixed;
  	bottom: 15%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
	z-index:2;
}

.icon-bar a {
  	display: block;
  	text-align: center;
  	padding: 10px;
  	transition: all 0.3s ease;
  	color: hsla(184,99%,35%,0.50);
  	font-size: .8em;
	background:hsla(0,0%,95%,0.50);
}

.icon-bar a:hover {
  	background-color: #01A6B1;
	color: #ffffff;
}

.insta  {
	border-radius: 0 10px 0 0;
}

 .pinterest {
	border-radius: 0 0 10px 0;
}

#myBtn {
  	display: none; 
  	position: fixed; 
  	bottom: 30px; 
  	right: 5px; 
  	z-index: 99; 
  	border: none; 
  	outline: none;
  	background-color:#f1f1f1; 
  	color: hsla(184,99%,35%,0.50); 
  	cursor: pointer;
  	padding: 13px 10px; 
  	border-radius: 30px;
  	font-size: .8em;
}

#myBtn:hover {
  	background-color: #01A6B1;
	color: #ffffff;
}

/*************** Header Styles *************/

header {
	background: url("images/header600.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	height: 0;
	padding-top: 63%;
	align-content: center;
	color: #ffffff;
}

header h1 {
	font-size: 3vw;
	position: absolute;
	top: 12%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.powell {
	text-transform: uppercase;
	color: #D99686;
}

.topsignup {
	font-size: 2.5vw;
	position: absolute;
	top: 12%;
	left: 90%;
	transform: translate(-50%, -50%);
	white-space: nowrap;
}

.topsignup a {
	text-decoration: underline;
}

header a {
	color: #ffffff;
	display: block;
}

header a:hover {
	color: #D99686;
}

.headertitle {
	position: absolute;
	top: 42%;
	left: 46%;
}

.headertitle h2 {
	font-family: "Fondamento", cursive;
	font-size: 4vw;
	margin-bottom:.5em;
}

.headertitle p {
	font-size: 3vw;
}

.topjoin {
	position: absolute;
	bottom: 10%;
	left: 60%;
	white-space: nowrap;
	margin: auto;
}

.topjoin a {
	border: solid 1px #ffffff;
	border-radius: 7px;
	font-size: 2.5vw; 
	padding: 10px 30px;
}

.topjoin a:hover {
	border: solid 1px #D99686;
}

/************ Main Styles **************/

main {
	margin: auto;
}

main h1 {
	margin: 2em 0 0.8em 0;
	font-size: 5vw;
	text-align: center;
}

main h2 {
	margin: 1.5em 0 0.8em 0;
	font-size: 4.5vw;
}

main h3 {
	color: #D99686;
	margin: 1em 0 0.2em 0;
	font-size: 4vw;
}

main p {
	line-height: 1.5em;
	font-size: 3vw;
}

main a {
	color: #01A6B1;
}

main a:hover {
	color: #D99686;
}

#intro, #top, #bottom, #main {
	padding: 0 40px;
	margin: auto;
}

/************ .Float Styles **************/

.float {
	overflow: hidden;
}

.float img {
	float: left;
	border-radius: 50px;
	margin-right: 20px;
}

.float p {
	font-weight: 300;
	font-family: sans-serif;
	font-style: italic;
	line-height: 1.3em;
}

.float span {
	white-space: nowrap;
}

/************ #Main Styles **************/

#technology {
	margin: 1.3em 0;
}

#technology img {
	border-radius: 7px;
}

#grid {
	display:grid;
	grid-template-columns: 1fr;
	grid-gap: 1.3em;
	margin-top: 1.3em;
}

/************ Card Flip Styles **************/

.flip-container { perspective: 1000px;}
	
.flip-container.hover .back {
	transform: rotateY(0deg);
}

.flip-container.hover .front {
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
	width: 100%;
}

.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;
	position: relative;
	height: 0;
	padding-top:120%;
}

.front, .back {
	-webkit-backface-visibility: hidden; /*still needed for safari & android*/
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}

.front { transform: rotateX(0deg); z-index: 2; }

.back {
	transform: rotateY(-180deg);
	box-sizing: border-box;
}

.front img, .back img  {
	display:block;
	border-radius: 7px;
}

.back div {
	position: relative;
}

.back div p {
	position: absolute;
	top: 15%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	white-space: nowrap;
	font-family: "Fondamento", cursive;
	font-size: 1em;
}

/*************** #Coupon Styles *************/

#coupon {
	position: relative;
	background: #01A6B1;
	margin-top: 10vw;
	color: #fafafa;
	padding: 30px 50px;
	text-align: center;
}

#coupon p {
	font-size: 3.5vw;
	margin-bottom: 2em;
}

#buttons {
	margin: auto;
	width: 45%;
}

#buttons a {
	display: block;
	color: #ffffff;
	border: solid 1px #ffffff;
	border-radius: 7px;
	font-size: 3vw; 
	margin-top: 1em;
	padding: 10px 0;
	white-space: nowrap;
}

#buttons a:hover {
	color: #D99686;
	border: solid 1px #D99686;
}

#triangle1 {
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
	transform-origin: top left;
	transform: rotate(-5deg);
	width: 120%;
	height: 10vw;
	background-color: #01A6B1; 
}

#triangle2 {
	position: absolute;
	bottom: 0;
	right: 0;
	z-index: -2;
	transform-origin: bottom right;
	transform: rotate(-5deg);
	width: 120%;
	height: 10vw;
	background-color: #01A6B1; 
}

/************ Footer Styles *************/

footer {
	background-color: #D1D1D1;
	text-align: center;	
	padding: 1.7em 0 1.2em 0;
	font-size: 3vw;
}

footer p {
	margin-bottom: 1em;
}

footer p a {
	color: #333333;
}

footer p a:hover {
	color: #D99686;
}

#form p {
	margin-bottom: .2em;
}

#copyright {
	margin: 3em 0 0 0;
	font-size: 2.5vw;
}

/******************* Form Styles ****************/

#newsletter {
	display: flex;
	justify-content: center;
}

#newsletter input[type="text"] {
	width: 40%;
	border:solid 0.5px #B8B8B8;
	border-radius: 7px 0 0 7px;
	color: #656565;
	font-size: 12px; 
	height: 20px;
	padding: 7px 0 7px 15px;
}

#newsletter input[type="submit"] {
	margin-left:-5px;
	border: solid 0.5px #B8B8B8;
	border-radius: 0 7px 7px 0;
	border-left: none;
	color: #B8B8B8;
	background-color: #ffffff;/*otherwise, Safari displays a grey color*/
	font-size:17px;
	height: 35px;
	padding: 7px 15px;
	align-content: center;
}


/******************* @Media Query ****************/

@media only screen and (min-width: 600px) {
	
	header {
		background-image: url("images/header1000.jpg");
	}
	
	main h1 {
		font-size:4vw;
	}
	
	main h2 {
		font-size: 3vw;
	}
	
	main h3 {
		font-size: 2.5vw;
	}
	
	main p {
		font-size: 2vw;
	}
	
	#intro, #top, #bottom, #main {
		padding: 0 60px;
	}

	#float img {
		content: url("images/emily400.jpg");
		width: 130px;
		height: 130px;
		border-radius: 150px;
	}
	
	#technology img {
		content: url("images/printing1200.png");
	}
	
	#grid {
		display:grid;
		grid-template-columns: 1fr 1fr;
	}
	
	#show {
		display: flex;
		justify-content: space-between;
	}
	
	#coupon {
		padding: 30px 90px;
	}
	
	#coupon p {
		margin-bottom: 1.5em;
		font-size: 2.5vw;
	}
	
	#buttons {
		display: flex;
		justify-content: center;
	}
	
	#buttons a {
		display: block;
		margin-top: 0;
		font-size: 2vw;
		padding: 10px 40px;
	}
	
	#buttons a:first-of-type {
		order:2;
		margin-left: .8em;
		padding: 10px 25px;
	}
	
	footer p, footer a {
		font-size:1.8vw;
	}
	
	.footer {
		display:flex;
		justify-content:space-between;
		width:75%;
		margin:auto;
		align-items: center;
	}
	
	footer p {
		margin-bottom: 0;
	}
	
	#form {
		display: flex;
		align-items: center;
		margin: 0;
	}
	
	#form p {
		padding-right: 5px;
	}

	#newsletter input[type="text"] {
		width:200px;
		font-size:1.5vw; 
	}
	
	#copyright {
		font-size: 1.4vw;
	}
	
	.icon-bar {
		bottom: 40%;
	}
	
	.icon-bar a {
		padding: 12px;
		font-size: 1em;
	}
	
	#myBtn { 
		right: 10px; 
		padding: 12px 10px; 
		font-size: 1em;
	}
}

@media only screen and (min-width: 960px) {
	
	header {
		background-image: url("images/header2000.jpg");
		padding-top: 53%;
	}
	
	header h1  {
		font-size: 2.5vw;
	}
	
	.topsignup {
		font-size: 2vw;
	}

	main h1 {
		font-size:3vw;
		margin-top: 3em;
	}
	
	main h2 {
		font-size: 2.5vw;
	}
	
	main h3 {
		font-size: 2vw;
	}
	
	main p {
		font-size: 1.8vw;
	}
	
	#intro, #top, #bottom, #main {
		padding: 0 80px;
	}
	
	
	#coupon {
		padding: 40px 140px;
	}
	
	#coupon p, #buttons a  {
		font-size: 2vw;
	}
	
	footer p, footer a {
		font-size:1.5vw;
	}
	
	#newsletter input[type="text"] {
		width:300px;
		font-size:1.2vw; 
	}
	
	.icon-bar {
		bottom: 30%;
	}
	.icon-bar a {
		padding: 15px;
	}
	
	#myBtn { 
		right: 20px; 
		padding: 15px 12px; 
	}
	
	/************ Scroll down *************/
	.scroll-down {
	  position: absolute;
	  left: 50%;
	  bottom: 7%;
	  display: block;
	  text-align: center;
	  font-size: 30px;
	  z-index: 100;
	  text-decoration: none;
	  text-shadow: 0;
	  width: 40px;
	  height: 40px;
	  border-bottom: 3px solid #fff;
	  border-right: 3px solid #fff;
	  z-index: 9;
	  left: 50%;
	  -webkit-transform: translate(-50%, 0%) rotate(45deg);
	  -moz-transform: translate(-50%, 0%) rotate(45deg);
	  transform: translate(-50%, 0%) rotate(45deg);
	  -webkit-animation: fade_move_down 4s ease-in-out infinite;
	  -moz-animation: fade_move_down 4s ease-in-out infinite;
	  animation: fade_move_down 4s ease-in-out infinite;
	}

	/*animated scroll arrow animation*/
	@-webkit-keyframes fade_move_down {
	  0% {
		-webkit-transform: translate(0, -10px) rotate(45deg);
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		-webkit-transform: translate(0, 10px) rotate(45deg);
		opacity: 0;
	  }
	}
	@-moz-keyframes fade_move_down {
	  0% {
		-moz-transform: translate(0, -10px) rotate(45deg);
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		-moz-transform: translate(0, 10px) rotate(45deg);
		opacity: 0;
	  }
	}
	@keyframes fade_move_down {
	  0% {
		transform: translate(0, -10px) rotate(45deg);
		opacity: 0;
	  }
	  50% {
		opacity: 1;
	  }
	  100% {
		transform: translate(0, 10px) rotate(45deg);
		opacity: 0;
	  }
	}
}
	
@media only screen and (min-width: 1200px) {
	
	.back div p {
		font-size: 1.7em;
	}
	
	#intro, #top, #bottom, #main {
		width: 960px;
	}

	main h1 {
		font-size:2.7vw;
	}
	
	main h2 {
		font-size: 2.3vw;
	}
	
	main h3 {
		font-size: 2vw;
	}
	
	main p {
		font-size: 1.6vw;
	}
	
	#intro, #top, #bottom, #main {
		padding: 0 80px;
	}
	
	#coupon {
		padding: 40px 170px;
	}
	
	#coupon p, #buttons a  {
		font-size: 2vw;
	}
	
	.topjoin a {
		font-size: 2vw;
	}
	
	#buttons a {
		font-size: 1.8vw; 
	}
}