@charset "utf-8";
/* ------------------------------------------------------------------------
CSS sheet for Simply Slick

All inquiries for this document should be directed to information@virtualtech.com.
--------------------------------------------------------------------------*/
.white {	
	/* TAKE THIS OUT */
	/*min-height:400px;*/
}

body, div, span, a, p, ul, li, h1, h2, h3, h4, h5, h6, dl, dt, dd, img, table, th, td, tr {
	margin: 0px;
	padding: 0px;
	outline: none;
}

@font-face {
  font-family: 'Gotham Bold';
  src: url('../fonts/Gotham-Bold.otf') format('opentype');
  src: url('../fonts/Gotham-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'Gotham Medium';
  src: url('../fonts/Gotham-Medium.otf') format('opentype');
  src: url('../fonts/Gotham-Medium.ttf') format('truetype');
}

a img {
	border: none;
}
body {
	-webkit-text-size-adjust: 100%;
	font-size:100%;
	font-family:'Source Sans Pro', 'Lato', 'Open Sans', sans-serif;
}

body#grain {
	background:url(../images/grain-bg.jpg);
}

#background {
	background:url(../images/covered-3-bg.jpg) no-repeat center top #6c6c6c;
	width:100%;
	height:100%;
	min-height:583px;
	position:fixed;
	top:0;
	z-index:100;
	text-align:center;
}

#background img {
	/*position:absolute;
	top:50%;
	left:50%;
	margin-top:-88px;
	margin-left:-169px;*/
	margin-top:280px;
}

#love-background {
	background:url(../images/love-story.jpg) no-repeat center top #080808;
}

#share-background {
	background:url(../images/share-tell.jpg) no-repeat center top;
}

#faq-background {
	background:url(../images/faq.jpg) no-repeat center top #8e8e8e;
}

#shop-background {
	background:url(../images/shop-bg.jpg) no-repeat center top #676767;
}

#facts-background {
	background:url(../images/scary-facts.jpg) no-repeat center top #303030;
}

#love-background, #share-background, #faq-background, #shop-background, #facts-background {
	width:100%;
	height:100%;
	min-height:300px;
	position:fixed;
	top:0;
	z-index:100;
	text-align:center;
}

#mobile-nav {
	display:none;
}

#desktop-nav {
display:block;
}

/* ------------------------------------------------------------------------
rtl / responsive elements
--------------------------------------------------------------------------*/
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.two-thirds {
	width: 66%;
}
.med {
	width: 36%;
	padding: 0px 1%;
}	
.center {
	text-align: center;
}

img {
	max-width:100%;
}

#map img {
	max-width:none;	
}

iframe {
	max-width:100%;
	max-height:100%;
}

input {
	max-width:100%;
}

.italic {
	font-style:italic;
}

.small {
	font-size:.625em;	
}

.bold {
	font-weight:bold;
}

.no-bullets {
	list-style-type:none;
}

.container {
	max-width:1024px;
	width:100%;
	margin:0 auto;
	text-align:center;
}

.inline-block {
	display:inline-block;	
}

.main-content .container > *, .main-content-inner .container > * {
	padding:0 4%;
}

h1, .nav li {
	font-family:'Gotham Medium', 'Montserrat', 'Gotham Book', Gotham-Book, Arial, sans-serif;
	text-transform:uppercase;
}

h1 {
	font-size:.9375em;
	color:#a8a8a8;
	padding:25px 4% !important;
	border-bottom:1px solid #a8a8a8;
	margin:0 auto 40px;
	display:inline-block;
}

h2 {
	font-size:1.25em;
	font-weight:600;
}

h3 {
	font-size:.875em;
	font-style:italic;
	font-weight:700;
}

a {
	color:#50caf5;
	text-decoration:none;
}

a:hover {
	color:#83dfff;
	text-decoration:none;
}

p {
	font-size:.875em;
	margin:30px 0;
}

p, ul {
	line-height:1.3em;
}

.grey, .white {
	padding:40px 0;
}

.grey {
	background:#f2f2f2;
}

.white {
	background:#fff;
}

#header {
	position:fixed;
	top:0;
	width:100%;
	background:url(../images/header-bg.png);
	text-align:left;
	padding:10px 0;
	z-index:9998;
}

#header-left {
	min-widht:190px;
	float:left;
}

#header-left img {
	padding-left:4%;
}

#header-right {
	width:72%;
	float:right;
}

.nav {
	list-style-type:none;
	float:right;
	width:100%;
	text-align:right;
	padding-top:5px;
	float:right;
}

.nav li {
	display:inline;
	margin:5px 1.3%;
}

.nav li a {
	color:#fff;
}

.nav li a:hover {
	color:#50caf5;
}

.nav li a#current {
	color:#b4b4b4 !important;
}

.nav li a#blue {
	color:#50caf5 !important;
}

.main-content {
	margin-top:577px;
	position:relative;
	z-index:200;
}

.main-content-inner {
	margin-top:357px;
	position:relative;
	z-index:200;
}

.main-content .container, .main-content-inner .container {
	max-width:740px;
}

.main-content ul li, .main-content-inner ul li {
	margin:20px 0;
}

.main-content ul li p, .main-content-inner ul li p {
font-size:.875em;
margin:0;
}

.main-content ul li h3, .main-content-inner ul li h3 {
	font-weight:600;
}

.quote {
	font-style:normal;
}

#gap {
	min-height:235px;
	background:url(../images/kissing-2-bg.jpg) no-repeat center #424242;
}

#arrow {
	width:62px;
	height:28px;
	margin:0 auto;
	position:absolute;
	top:-28px;
	left:50%;
	margin-left:-31px;
	background:url(../images/arrow-down.png) no-repeat;
}

#arrow a {
	display:block;
	width:100%;
	height:100%;
}

#to-top a {
	position:fixed;
	z-index:9999;
	bottom:30px;
	right:30px;
}

#shake-it {
	background:url(../images/shake-it.png) no-repeat right;
}

.parabens {
	background:url(../images/parabens.png) no-repeat right 50px center;
}

.antifreeze {
	background:url(../images/antifreeze.png) no-repeat left 50px center;
}

.hydroxides {
	background:url(../images/hydroxides.png) no-repeat right 50px center;
}

.parabens, .antifreeze, .hydroxides {
	margin:60px 0;	
}

.no-top {
	margin-top:0;	
}

.scary-facts p {
	margin:20px 0;	
}

h2 .italic {
	font-size:.75em;
	font-weight:normal;	
}

#footer {
	color:#a8a8a8;
	z-index:9999;
	background:#f2f2f2;
	text-align:center;
	width:100%;
	margin:0 auto;
	padding:10px 0;
}

#footer a {
	color:#12c1ff;
}

#footer a:hover {
	color:#4ecaf5;
}

#footer p {
	max-width:600px;
	margin:0 auto;
	padding:0 4%;
}

.grey-link {
	color:#a8a8a8 !important;
}

.iframe {
	overflow:hidden;
}

.ecard {
	float:left;
	width:42%;
	min-width:300px;
	text-align:center;
	margin:20px 0;
}

.ecard img {
	max-width:300px;
}

h1#black {
	display:block !important;
}

.fb-share-button:hover {
	cursor:pointer;
	opacity:.75;	
}

/* ---------------------------------------------------------------------------
		e-card lightboxes
----------------------------------------------------------------------------- */

#card-wrap {
	width:468px;
	height:640px;
	padding:15px 0 0 0;
	margin:0 auto;
}

#e-card {
	text-align:center;
	margin:0 auto;
}

#e-card h1 {
	color:#000;
	border-bottom:none;
	margin-bottom:5px;
	font-size:1.25em;
}

#outerContainer {
	margin-left:-20px !important;
}

/* ---------------------------------------------------------------------------
		Contact Form
----------------------------------------------------------------------------- */

.formField {
	width:200px;
}

.textField {
	resize:none;
	width:200px;
}


/* ---------------------------------------------------------------------------
		CSS Media Queries
----------------------------------------------------------------------------- */

@media only screen and (max-width: 810px) {
	
.nav li {
	font-size:.9em;
}

}



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

.ecard {
	float:none;
	width:auto;
	min-width:0;
}

.ecard img {
	width:100%;
}

.nav li {
	font-size:.8em;
}


}



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

#mobile-nav {
	display:block;
	position:absolute;
	top:52px;
	background:#000;
	width:100%;
	float:none;
}

.toggle-menu {
	position:absolute;
	top:-38px;
	right:15px;
	color:#fff;
	cursor:pointer;
	text-shadow:0 0 3px #000;
}

.nav {
	list-style-type:none;
	float:none;
	width:100%;
	text-align:center;
	margin:0;
	display:none;
}

.nav li {
	display:inline-block;
	margin:0 0 2px;
	text-align:center;
	font-size:1em;
}

.nav li a {
	display:inline-block;
	padding:10px;
}

#desktop-nav {
	display:none;
}

}

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

#background {
	top:-100px;
}

.main-content {
	margin-top:477px;
}

#background {
	top:-180px;
}

.main-content {
	margin-top:307px;
}

}

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

.nav li {
	font-size:.9em;
}

.two-thirds {
	width:auto;
}

#shake-it, .parabens, .antifreeze, .hydroxides {
	background:none;
}

.parabens, .antifreeze, .hydroxides {
	margin:20px 0;	
}

#love-background {
	width:100%;
}

.main-content-inner {
	margin-top:245px;
}

#share-background {
	background: url("../images/share-tell.jpg") no-repeat left -400px top 20px;
}

}



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

.flow-hide {
	display:none;	
}

}



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

.nav li {
	font-size:.8em;
}

#love-background {
	background-position:top left -450px;
}

}

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

.nav li {
	font-size:.75em;
}

.flow-hide-small {
	display:none;	
}

}

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

.nav li {
	font-size:1em;
	display:block;
	border-bottom:1px solid #424242;
}

.nav li a {
	width:100%;
}

.nav li:last-child {
    border:none;
}

.small-screen {
	display:none;
}

#background {
	top:-180px;
}

.main-content {
	margin-top:290px;
}

}