@import url('https://fonts.googleapis.com/css?family=Bevan');

@import url('https://fonts.googleapis.com/css?family=Croissant+One');

@import url('https://fonts.googleapis.com/css?family=Playball');

@import url('https://fonts.googleapis.com/css?family=Playfair+Display');


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

@media screen and (min-width:800px) {

body {
}
big {
	font-size: 120%;
}
div.splash{position: fixed; top:0px; width:100%; height:100%; background-image: url(bg.jpg); background-size: cover; z-index:-100;
}

div.tits{
	position: fixed; top:0px; width:60%; height:100%; margin-left:30%; background-image: url(title2.png); background-size: contain; background-repeat: no-repeat; opacity: 1;z-index:98;

}



div.punch {height:100%; width:100%;margin:auto;
	background-image: url(gorrodron.png); background-size: cover; background-repeat: no-repeat;background-position: left; bottom:0px;position: relative;z-index:100;
}

div.moon {height:306px; width:248px;margin-left:70%;
	background-image: url(moon.png); background-size: contain; background-repeat: no-repeat;background-position: right; top:0px;position: absolute;
}

div.gary {height:250px; width:250px;margin-left:100%;
	background-image: url(gary.png); background-size: contain; background-repeat: no-repeat;background-position: right; bottom:0px;position: absolute;z-index:99;}

.hide {position: absolute;top:0px;width: 100%;height:100%;overflow-x:hidden;}

div.bodycontent {
	background-color: #222; width:100%;
}

div.red {background-color: #a1104c;background-image: url('rear3.jpg'); width:100%;
-webkit-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);}
.redtext {width:780px; margin: auto;}
div.white {background-color: #250653; background-image: url('bgsuns.jpg'); background-size: cover; width:100%;min-height:180px;
-webkit-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);}
div.rainbow {background-color: #ccc; background-image: url('bg4.jpg'); background-size: 100% 100%; width:100%;min-height:180px;
-webkit-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);}
.raintext {width:780px; margin: auto;padding-top: 20px;text-shadow: 2px 2px 2px #9BBECE;}
.raintext h3 {color: #111;}
div.plain {background-color: #fff; width:100%;
-webkit-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);}
.plaintext {width:780px; margin: auto;color:#111;}
.plaintext h2, .plaintext h3, .plaintext h4, .plaintext p {color:#111 !important; padding:15px;} 
h1 {
		font-size:10vw; text-transform: uppercase; font-family: 'Croissant One', cursive; color: #ffea00; text-align: center; padding: 30px;   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: white;
}

h2 {
		font-size:5vw; text-transform: uppercase; font-family: 'Playfair Display', cursive; color: #eee; text-align: center;   padding-top: 30px;
}

h3 {
		font-size:2vw; font-family: 'Playball', cursive; color: #eee; text-align: center;   padding-bottom: 30px; 
}

h3.nopadding {
		font-size:2em; font-family: 'Playball', cursive; color: #94001e; text-align: center;   padding-bottom: 0px;padding-top: 10px; 
}


h4 {
	font-size:1.2em; font-family: 'Playfair Display', cursive; color: #eee; text-align: center; padding: 30px;line-height: 1.5em;

}
h4 b{
	font-weight:600;
}
h5 {
	font-size:2em;
}
.para {
	width:40%;margin:auto;
}

.product_para {
	width:90%;margin:auto;
}

div.content {width: 930px;margin:auto; background-color: #eee;
	font-size:1.5em;text-align: center; font-family: 'Playfair Display', serif; padding: 30px;
}

div.cuntwrapper {width:100%;background-image: url(bg1.jpg); background-size: contain;background-repeat: repeat-y; }

.content p {padding-top: 15px;}

p.description {margin-left:20%;margin-right:20%;}

div.divider {width:100%;background-image: url(divider.png); background-size: contain;background-repeat:no-repeat;height:150px; background-position: center;

}
div.divider-dark {width:100%;background-image: url(divider-dark.png); background-size: contain;background-repeat:no-repeat;height:150px; background-position: center;

}
div.smalldivider {width:100%;background-image: url(divider.png); background-size: contain;background-repeat:no-repeat;height:100px; background-position: center;

}

table {text-align: center;margin: auto; margin-top:30px;margin-bottom: 30px;}

.content form {margin-bottom: 30px;margin-top: 20px;}

}

p{
	line-height: 1.5em; color:#eee;font-size: 1em;font-family: 'Playfair Display';text-align: center;padding-top: 15px;

}

.samples {
	width:80%;margin:auto;text-align: center;
}
.sample {
	display: inline-block;width:150px;
}

a:link, a:visited {
	color:#ffd41b; text-decoration: none;
}
a:hover, a:active {
	color:#81b2ef;
}


@media screen and (max-width:799px) {

body {
}

div.splash{position: fixed; top:0px; width:100%; height:100%; background-image: url(bg.jpg); background-size: cover; z-index:-100;
}

div.tits{
	position: fixed; top:0px; width:80%; height:100%; margin:auto; background-image: url(title_mobile.png); background-size: contain; background-repeat: no-repeat; opacity: 1;z-index:198;

}



div.punch {height:100%; width:100%;margin:auto;
	background-image: url(gorrodron.png); background-size: cover; background-repeat: no-repeat;background-position: left; bottom:0px;position: relative;z-index:100;
}

div.moon {height:306px; width:248px;margin-left:70%;
	background-image: url(moon.png); background-size: contain; background-repeat: no-repeat;background-position: right; top:0px;position: absolute;
}

div.gary {height:150px; width:150px;margin-left:100%;
	background-image: url(gary.png); background-size: contain; background-repeat: no-repeat;background-position: right; bottom:0px;position: absolute;z-index:99;}

.hide {position: absolute;top:0px;width: 100%;height:100%;overflow-x:hidden;}

div.bodycontent {
	background-color: #222; width:100%;
}


div.red {background-color: #a1104c;background-image: url('rear3.jpg'); width:100%;}
.redtext {width:90%; margin: auto;}
div.white {background-color: #250653; background-image: url('bgsuns.jpg'); background-size: cover; width:100%;min-height:180px;}
div.rainbow {background-color: #ccc; background-image: url('bg4.jpg'); background-size: cover; width:100%;min-height:180px;}
.raintext {width:90%; margin: auto;padding-top: 20px;}
.raintext h3 {color: #111;}

div.plain {background-color: #fff; width:100%;}
.plaintext {width:90%; margin: auto;color:#111;}
.plaintext h2, .plaintext h3, .plaintext h4, .plaintext p {color:#111 !important; padding:15px;} 

h1 {
		font-size:10vw; text-transform: uppercase; font-family: 'Croissant One', cursive; color: #ffea00; text-align: center; padding: 30px;   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: white;
}

h2 {
		font-size:3em; text-transform: uppercase; font-family: 'Playfair Display', cursive; color: #eee; text-align: center;   padding-top: 30px;
}

h3 {
		font-size:2em; font-family: 'Playball', cursive; color: #eee; text-align: center;   padding-bottom: 30px; 
}

h3.nopadding {
		font-size:2em; font-family: 'Playball', cursive; color: #94001e; text-align: center;   padding-bottom: 0px;padding-top: 10px; 
}


h4 {
	font-size:1.2em; font-family: 'Playfair Display', cursive; color: #eee; text-align: center; padding: 30px;line-height: 1.5em;

}
h4 b{
	font-weight:600;
}
.para {
	width:90%;margin:auto;
}

div.content {width: 90%;margin:auto; background-color: #eee;
	font-size:1em;text-align: center; font-family: 'Playfair Display', serif; padding: 5%;
}

div.cuntwrapper {width:100%;background-image: url(bg1.jpg); background-size: contain;background-repeat: repeat-y; }

.content p {padding-top: 15px;}

p.description {margin-left:5%;margin-right:5%;}

div.divider {width:100%;background-image: url(divider.png); background-size: contain;background-repeat:no-repeat;height:150px; background-position: center;

}
div.smalldivider {width:100%;background-image: url(divider.png); background-size: contain;background-repeat:no-repeat;height:100px; background-position: center;

}



table {text-align: center;margin: auto; margin-top:30px;margin-bottom: 30px;}

.content form {margin-bottom: 30px;margin-top: 20px;}

.video-container {

  background-color:#ddd;
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0;
  overflow:hidden;
  margin-bottom: 20px;
}

.video-container iframe, .video-container object, .video-container embed {

  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}

}
div.spacer {
	width:100%; height:100px;
}

.streaming_icon {height:auto; width:150px;display:inline-block; 
 display: -moz-inline-stack;
        display: inline-block;
        zoom: 1;
	background-color:transparent;text-align: center;
position: relative;
z-index: 15}

/*.streaming_icon:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0);
	-webkit-transition: none;
	   -moz-transition: none;
	        transition: none;
	        z-index: 9;
}
.streaming_icon:hover:after {
  width: 0%;
  background-color: rgba(255,255,255,0.2);
  
	-webkit-transition: all 0.4s ease-in-out;
	   -moz-transition: all 0.4s ease-in-out;
	        transition: all 0.4s ease-in-out;
	        z-index: 8;
}*/

.streaming_icon p{ font-size:1em;text-align: center; font-family: 'Playfair Display', serif; }

.streaming_icon img:hover {
  /* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 0.2s;

  /* When the animation is finished, start again */
  animation-iteration-count: 1;
}

@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

.icon_block {width:auto;display: table; margin: 0 auto;text-align: center;padding: 20px;}
img {max-width: 100%;}


.cover {
	width:314px;margin: auto;
}

.product_container {
	width:800px; max-width:90%;display: block;margin: auto; overflow: hidden;
}

.product {
	width:400px;max-width:100%;display:block;float:left;
}

.pages {
	width:600px;max-width:90%;margin: auto;
}

/*begin footer*/
@media screen and (min-width:900px) {

 div.footer {
  background-color: #000;
 
  position: relative; 
   height: auto;
   margin-bottom: 0px;
   margin-top:10px;
   margin:auto;
   padding: 0px;
 }
}

@media screen and (max-width:899px) {

 div.footer {
  background-color: #000;
  width:100%;
  position: relative; 
   height: auto;
     margin:auto;
   margin-bottom: 0px;
   margin-top:10px;
 
   padding: 0px;
 }
}

 div.footer_sm{
  font-family: 'Viga', sans-serif;
  padding-top:20px;
  font-size:1em;
  color:#1e71b8;
  height:auto;
  width:100%;
  margin-left: 0px;
  padding-bottom: 30px;
  background-color: #dedc00;

  background-image: url('vrainbowup.jpg');
  text-align: center;
  text-transform: uppercase;
      letter-spacing: 2px;

      -webkit-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
-moz-box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
box-shadow: inset 0px 14px 5px -9px rgba(0,0,0,0.75);
 }

.sm_block{
  padding-top: 20px;
  text-align: center;
}

.tileMe ul {
  display:inline;
}

.tileMe li {
    display: inline;
    padding-top:5px;
    padding-left:5px;
    padding-right: 5px;
    margin:auto;
}

@media screen and (min-width:550px) {

.tileMe li img {
  max-width: 40px;
  height:auto;

}
}

@media screen and (max-width:549px) {

.tileMe li img {
  max-width: 25px;
  height:auto;
}
}



 div.footer_content{
  font-family: 'Tinos', sans-serif;
  padding-top:20px;
  font-size:0.6em;
  color:#1e71b8;
  text-align:center;
  padding-bottom: 20px;
    text-transform: uppercase;
      letter-spacing: 2px;

 }



.myButton {
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:8px;
	border:1px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333 !important;
	font-family:Trebuchet MS;
	font-size:26px;
	font-weight:bold;
	padding:13px 24px;
	text-decoration:none;
	text-shadow:0px 0px 0px #ffee66;
	text-align:center;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}
.buy-button{
	position: relative;
	text-align: center;
}
