@charset "UTF-8";
/* CSS Document */
/* Code By Derek Jenkins */
@import url(http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,800,700,900);
@import url(http://fonts.googleapis.com/css?family=Saira:400,100,200,300,500,600,800,700,900);

@font-face {
    font-family: Saira;
	src: url(http://fonts.googleapis.com/css?family=Saira:400,100,200,300,500,600,800,700,900);
}

/*
background-image: linear-gradient(90deg, rgba(238, 101, 136, 0.9), rgba(246, 149, 96, 0.9));
*/

body, html {
	/*background-color: #F7C9BF;*/
	background-color: rgba(255,255,255,1.00);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	font-family: "Raleway";
	font-weight: 500;
	padding: 0;
  	margin: 0;
	height: 100%;
	width: 100%;
	text-rendering: optimizeLegibility;
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}
* { /* Derek's reset*/
	background: transparent;
	border: 0;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
/*Prevents iOS Styling!*/
input.text, input[type="text"], input[type="button"], input[type="submit"], .input-checkbox, textarea {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Saira" !important;
	font-weight: 900 !important;
}

/*img	{
	pointer-events: none;
}*/

a:hover {
	cursor: pointer !important;
}

p	{
	font-size: 16px;
}

li	{
	cursor: pointer;
	font-size: 16px;
}

.logo {
	/*float:top-left;*/
	background: url(https://www.carnivorousplantsusa.com/images/banner-graomogolensis.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.logo-drosera {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-drosera-admirabilis.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.logo-burmannii {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-drosera-burmannii.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-pinguicula {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-pinguicula-reticulata.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-venusflytrap {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-venusflytrap.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-about {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-pinguicula-hemi.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-guide {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-pinguicula-reticulatas.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-contact {
	/*float:top-left;*/
	background:  url(https://www.carnivorousplantsusa.com/images/banner-pinguicula-ehlersiae-2.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: -10% 70%;
	position: relative;
	width: 100%;
	height: 70%;
}

.banner-h1-container {
	background: rgba(102,204,102, 0.70);
	border: 2px solid rgba(0,0,0,1.00);
	width: 40%;
	height: auto;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align: center;
}

.banner-h1 {
	font-size: 42px;
	font-family: "Saira" !important;
	font-weight: 900 !important;
}

.divider-main {
	background-color: #B5F3AE;
	height: 2px;
	width: 95%;
	margin: 0px 2.5% 0px 2.5%;
	position: relative;
}

.divider-main-med {
	background-color: #B5F3AE;
	height: 2px;
	width: 50%;
	margin: 0px 25% 0px 25%;
	position: relative;
}

.divider-guide-sub {
	background-color: #B5F3AE;
	height: 2px;
	width: 25%;
	margin: 0px 0px 0px 5%;
	position: relative;
}

.parallax-pinguicula {
	background-image: url("../images/banner-pinguicula-agnata-zimapan.jpg");
  	/* Set a specific height */
	height: 300px;
	width: 100%;
  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.parallax-drosera {
	background-image: url("../images/banner-pinguicula-moranensis.jpg");
  	/* Set a specific height */
	height: 300px;
	width: 100%;
  	/* Create the parallax scrolling effect */
  	background-attachment: fixed;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

.mediaicon {
	cursor: pointer;
	max-width: 40px;
	max-height: auto;
}

.mediaicon:hover	{
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-transform:scale(1.3);
  -webkit-transform:scale(1.3);
  transform:scale(1.1);
  -webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.cart	{
	position: absolute;
	bottom: 0%;
	right: 0%;
	text-align: right;
}

.navpad {
	padding-bottom:20px;
	position: absolute;
	left: 0px;
	right: 0px;
	margin-left: 0px;
	margin-right: 0px;
	padding-left: 0px;
	padding-right: 0px;
	width: 100%;
	z-index: 990;
}

#picModal {
	z-index: 999;
}

#cpusaBurgerID {
	text-align: center;
	margin: 0px auto 0px auto;
	position: relative;
	 width: 30px;
	 height: 30px;
}

.burger-mark-1, .burger-mark-2, .burger-mark-3 {
  	display: block;
  	height: 3px;
 	width: 30px;
 	background: rgba(0,0,0, 1.0);
 	border-radius: 2px;
  	opacity: 1;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  	transition: .25s ease-in-out;
}

.burger-mark-1 {
	position: absolute;
	top: 10%;
	left: 0%;
}

.burger-mark-2 {
	position: absolute;
	top: 50%;
	left: 0%;
}

.burger-mark-3 {
	position: absolute;
	top: 90%;
	left: 0%;
}

#cpusaBurgerID.open .burger-mark-1 {
	top: 50%;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
}

#cpusaBurgerID.open .burger-mark-2 {
  opacity: 0;
}

#cpusaBurgerID.open .burger-mark-3 {
	top: 50%;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.navbar {
	border-top: 2px solid #66CC66;
	border-bottom: 2px solid #66CC66;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #B5F3AE;
	text-align: center;
}

.navbar li {
	display: inline-block;
}

.navbar li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
	transition:0.2s;
	z-index: 1;
	line-height: 100%; /*100% of navbar for the list items*/
}

.navbar li a:hover {
	cursor: pointer;
	-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	background-color: #339966;
}

.dropdown {
	position: relative;
	text-align: center;
}

.dropdown > .dropdown-content {
	height: 0px;
	-webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

.dropdown:hover > .dropdown-content {
	height: auto;
}

.dropdown-content {
  display: none;
  border: 2px solid #66CC66;
  position: absolute;
  background-color: #B5F3AE;
  padding: 0px;
  /*width: 103px;
  margin: 0px;*/
  z-index: 1;
  text-align: center;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
-webkit-transition: height 0.3s ease-in-out;
    -o-transition: height 0.3s ease-in-out;
    -moz-transition: height 0.3s ease-in-out;
    transition: height 0.3s ease-in-out;
}

.dropdown-content a {
	display: block;
	text-align: center;
	  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
   transition: all .25s ease;
}

.dropdown-content li	{/*creating this class fixed the vertical navbar issue*/
	display: block;
	text-align: center;
	padding: 0px;
	margin: 0px;
}

.dropdown-content li ul	{
	  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -ms-transition: all .25s ease;
  -o-transition: all .25s ease;
   transition: all .25s ease;
}

.dropdown-content:hover {
	display: block;
}

.dropdown:focus + .dropdown-content {
  display: block;
  position:absolute;
}

.dropdown:hover + .dropdown-content {
  display: block;
  position:absolute;
  cursor: pointer;
}
/*
.dropdown:after {
    content: ' ▶';
}

.dropdown:hover:after {
	content:' ▼'
}*/

.tucker	{
	margin: 100px auto auto auto;
	text-align: center;
}

.tucker-cat	{
	max-width: 60%;
	max-height: auto;
	border-radius: 5px;
	border: 2px solid #66CC66;
}

.tucker-cat:hover	{
	transform: rotate(-5deg);;
  -webkit-transform: rotate(-5deg);
	-moz-transform: rotate(-5deg);
	-o-transform: rotate(-5deg);
  -webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.webring {
	text-align: center;
}

.webring h4 {
	text-decoration: underline;
}

.webring-prev, .webring-next {
	display: inline;
}

.webring-prev {
	width: 50px;
}

.webring-next {
	width: 50px;
}

.webring a:link, a:visited, a:active	{
	color: #66CC66;
	text-decoration: none;
	cursor: default;
}

.webring a:hover	{
	color: #339966;
	text-decoration: none;
	cursor: default;
}

.front-page a:link, a:visited, a:active	{
	color: #66CC66;
	text-decoration: none;
	cursor: default;
}

.front-page a:hover	{
	color: #339966;
	text-decoration: none;
	cursor: default;
}

.about a:link, a:visited, a:active	{
	color: #66CC66;
	text-decoration: none;
	cursor: default;
}

.about a:hover	{
	color: #339966;
	text-decoration: none;
	cursor: default !important;
}

.hayden a:link, a:visited, a:hover, a:active	{
	color: black;
	text-decoration: none;
	cursor: default;
}

.faq {
	text-align: center;
	width: 100%;
}

ul.navbar li.icon {
	display: none;
	transition: 0.4s;
}

.front-page {
	text-align: center;
	margin: 100px auto auto auto;
}

.front-h2-welcome {
	font-size: 28px;
}

.front-subheader {
	font-size: 16px;
}

.front-p {
	font-size: 16px;
	margin: 10px 5% 10px 5%;
}

.front-butterwort {
	max-width: 85%;
	max-height: auto;
}

.front-pinguicula	{
	text-align: center;
}

.front-pinguicula img	{
	display: block;
	margin-right: 25%;
	width: 75%;
	max-width: 800px;
	height: auto;
}

.front-pinguicula p	{
	text-align: left;
	margin: 10px 5% 10px 5%;
}

.front-drosera	{
	text-align: center;
}

.front-drosera img	{
	display: block;
	margin-left: 25%;
	width: 75%;
	max-width: 800px;
	height: auto;
}

.front-drosera p	{
	text-align: left;
	margin: 10px 5% 10px 5%;
}

/*.glidercss { No longer in use, pre-written code implementation often results in messiness!
	padding-bottom:20px;
	padding-top:20px;
}*/

.about	{
	margin: 100px;
	text-align: center;
}

.about p	{
	margin: 10px 5% 10px 5%;
}

.about:link	{
	background-color: #6F6;
	color: white;
}

#outer-store	{
	padding-top: 20px;
	padding-bottom: 20px;
	overflow: hidden;
}

#store	{
	overflow: hidden;
	text-align: center; /*This needs to be put into the parent div in order to center the child divs properly*/
	max-width: 1200px;
	margin: 50px auto auto auto;
}

.store-p {
	position: relative;
	margin: 10px 5% 10px 5%;
}

.columns	{
	/*background-color: rgba(181, 243, 174, .7);*/
	background: rgb(247,201,191);
	background: radial-gradient(circle, rgba(247,201,191,1) 0%, rgba(181,243,174,1) 100%);
	/*background-image: linear-gradient(#B5F3AE,#DDF2DA);*/
	margin: 10px;
	padding: 30px;
	vertical-align: middle; /*Fixed crooked inline-divs*/
	position: relative;
	border: 2px solid #66CC66;
	text-align: center;
	display: inline-block;
	width: 200px;
	height: 200px;
	cursor: pointer;
	overflow: hidden;
	font-size: 12px;
}
/*
.columns:after	{
	background: linear-gradient(rgba(255,255,255,0.8), rgba(255,255,255,0.2));
}*/

.columns p {
	font-size: 12px !important;
}

.columns img	{
	cursor: pointer;
	height: 150px;
	width: 150px;
}

.columns:hover	{
	/*-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	opacity: 0.5;
	filter: alpha(opacity=50); /*For IE8 and earlier browsers.*/
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -moz-transform:scale(1.1);
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
  -webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}

.product-container	{
	height: 400px;
	width: 100%;
	margin: 100px auto auto auto;
	text-align: center;
}

.product-image	{
	float: left;
	width: 25%;
	min-width: 150px;
	max-width: 400px;
	height: auto;
}

.product-template-text	{
	margin: 100px auto 100px auto;
}

.front-content {
	position: relative;
	text-align:center;
	margin: 50px auto auto auto;
}

.contact-container	{
	width: 100%; /*This in combination with the child-div being set to display as a table allowed things to be centered without using text-align*/
	margin-top: 20px;
}

.contact {
	margin: 50px auto auto auto;
	display: table;
}

.contact-h1 {
	text-align: center;
}

.contact-h2 {
	text-align: center;
}

.contact-p {
	margin: 10px 5% 10px 5%;
}

.contact-message	{
	width: 100%; /*Allows the div to be responsive*/
}

.contact input[type="text"], textarea {
	background-color: #FFFCF8;
	border: 2px solid #66CC66;
}

.contact-message textarea {
	background-color: #FFFCF8;
	border: 2px solid #66CC66;
}

.contact-submit	{
	padding: 5px;
	text-align: center;
}

.contact-submit-button	{
	background-color: #B5F3AE;
	border: 2px solid #66CC66;
	border-radius: 4px;
	color: black;
	padding: 5px 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	cursor: pointer;
}

.contact-submit-button:hover	{
	background-color: #339966;
}

input[type=text]	{
	border: 2px solid #000000;
	border-radius: 4px;
}

#message	{
	border: 2px solid #66CC66;
	border-radius: 4px;
	width: 100%;
	resize: none;
}

.contact-bottom-container	{
	border-top: 2px solid #66CC66;/*
	background: linear-gradient(150deg, rgba(181, 243, 174, 1) 0%, rgba(221, 243, 224, 1) 80%);
	background: rgba(151, 213, 144, 1);*/
	background: rgba(181, 243, 174, 1);
	margin: 50px auto auto auto;
	text-align: center;
}

.contact-bottom {
	text-align: center;
	font-size-adjust: +1;
}

.contact a:link, a:visited, a:active	{
	color: #66CC66;
	text-decoration: none;
	cursor: pointer;
}

.contact a:hover	{
	color: #339966;
	text-decoration: none;
	cursor: pointer;
}

.guide-main-div {
	border: 2px solid rgba(0,0,0,1.00);
	width: 90%;
	height: auto;
	display: inline-block;
	margin: 20px 5% 20px 5%;
}
.guide-main-div-p {
	margin: 5px 5% 25px 5%;
}
	.guide-div {
		display: inline-block;
		width: 100%;
		position: relative;
		text-align: left;
		height: auto;
	}
.guide-supplies-div {
		display: inline-block;
		width: 100%;
		position: relative;
		height: auto;
	}
.guide-h3 {
	display: inline-block;
	font-size: 20px;
		position: relative;
	margin: 10px 5% 10px 5%;
}
	.guide-p {
		display: inline-block;
		position: relative;
		margin: 10px 5% 10px 5%;
	}
.supply-column {
	border: 2px solid rgba(0,0,0,1.00);
	height: 300px;
	width: 300px;
	margin: 10px 10px 10px 10px;
	overflow: hidden;
	display: inline-block;
	text-align: center;
}
.supply-photo {
	height: 225px;
	width: auto;
}

.fa-facebook {
  background: #3B5998;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}

#loaderCPUSA {
	/*background-color: #F7C9BF;*/
	background: rgb(247,201,191);
	background: radial-gradient(circle, rgba(181,243,174,1) 0%, rgba(247,201,191,1) 100%);
	/*background: rgb(181,243,174);
	background: linear-gradient(90deg, rgba(181,243,174,1) 0%, rgba(247,201,191,1) 35%, rgba(181,243,174,1) 100%);*/
	display: inline-block;
	position: fixed;
	text-align: center;
	height: 100%;
	width: 100%;
	transition: 2s ease all;
	z-index: 999;
}

.loader-spinner {
	position: absolute;
	animation-name: spin;
  	animation-duration: 1500ms;
  	animation-iteration-count: infinite;
  	animation-timing-function: linear; 
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	z-index: 9999;
}

#loaderCanvas {
	position: absolute;
	top: 50%;
  	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000;
}

@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.loader-p {
	color: #66CC66;
	font-size: 72px;
	position: absolute;
	top: 60%;
  	left: 50%;
  	transform: translate(-50%, -50%);
}

.loader-move {
	display: inline-block;
	animation-name: loader-move;
	animation-duration: 2.5s;
}

@keyframes loader-move {
	0% {
		background-color: #B5F3AE;
		transform: translateY(12%);
	}
	80% {
		transform: translateY(-200%);
	}
	100% {
		display: none;
	}
}

@keyframes dots {
 0% {
 opacity: .2;
}
 20% {
 opacity: 1;
}
 100% {
 opacity: .2;
}
}
.loader-p span {
	animation-name: dots;
	animation-duration: 1.4s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}
.loader-p span:nth-child(2) {
	animation-delay: .2s;
}
.loader-p span:nth-child(3) {
	animation-delay: .4s;
}

@media screen and (max-width:800px) {
	.logo	img{/*Makes the image responsive*/
		max-width: 100%;
	}
  ul.navbar li {
	  display:none;
	   transition: 0.4s ease all;
  }
  ul.navbar li.icon {
	  text-align:center;
      display: block;
  }
  .contact	{
	  text-align: center;
	  display: block;
  }
  .contact input	{
	  min-width: 96%;
	  max-width: 96%;
  }
  #message	{
	  min-width: 96%;
	  max-width: 96%;
  }
  .columns:hover	{
	/*-webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
	opacity: 0.5;
	filter: alpha(opacity=50); /*For IE8 and earlier browsers.*/
  -moz-transform: none;
  -webkit-transform: none;
  transform: none;
  -webkit-transition-duration: 0.4s;
	transition-duration: 0.4s;
}
	
	.logo, .logo-drosera, .banner-pinguicula, .banner-venusflytrap, .banner-about, .banner-guide, .banner-contact {
	background-position: 35% 70%;
}
	
	.banner-h1-container {
	background: rgba(102,204,102, 0.70);
	border: 2px solid rgba(0,0,0,1.00);
	width: 60%;
	height: auto;
	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	text-align: center;
}

.banner-h1 {
	font-size: 24px;
}
	
	.parallax-drosera, .parallax-pinguicula {
		display: none;
	}


@media screen and (max-width: 800px) {
  ul.navbar.responsive li {
	position: relative;
	z-index: 999;
  }
  ul.navbar.responsive li .icon {
    position: absolute;
  }
  ul.navbar.responsive li {
    float: none;
    display: block;
    text-align: center;
  }
  .dropdown {
	  visibility:hidden;
	  white-space: nowrap;
	  max-height: 0px;
	  margin-top: -11px;
	  margin-bottom: -11px;
  }
  .dropdown-content {
    float: none;
	border: none;
    display: block;
    text-align: center;
	position: relative;
	box-shadow: none;
  }
}}
/* Why are you reading all of this? */