*{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);} /* Removes Mobile Highlight */
html {
    height: 100%;
	overflow: hidden;
}
body {
	height: 100%;
	width: 100%;
    padding: 0;
    margin: 0;
	font-family: 'Oswald', Helvetica, arial, sans-serif;
	background-color:#000;

	background-attachment:fixed;
	background-image: url("sea.jpg");
	background-size: cover;

	overflow: hidden;
	position: fixed;
}
@font-face {
    font-family: 'stockregular';
    src: url('stock-webfont.woff2') format('woff2'),
         url('stock-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
:root {
    --bordercurve: 5px; 
}
#filer{
	position: absolute;
	top:-1000px;
	right:50px;
	width: 100px;height: 20px;
}
#filer img{
	width: 100%;
}
.centered{
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}
.onright{
    right: 10px;
    margin:0;
}
.no-scroll {
  overflow: hidden;
}
#vid {
	position: absolute;
	width: 400px;
    height: 400px;
	background: #000;
	z-index: 20;
	visibility: hidden;
}
.butt {
    background-color: #000;
    border: none;
    color: white;
    padding: 5px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 1px;
    border-radius: 5px;
	cursor: pointer;
	text-align: left;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#cCanvas{
	position: absolute;
	left: -2000px;
	top:-2000px;
	display: none;
}
#debug{
	position: absolute;
	left: 0;
	top:0;
	width: 200px;
	height: 50px;
	color: #000;
	background-color: #fff;
}
#overlay{
	position: absolute;
	left: 0;
	top:0;
	width: 100%;
	height: 100%;
	font-size: 100px;
	margin: 20px 0 0 10px;
	padding: 0;
}

/* WARNINGS, HOW TO ETC --------------------------------------------------------*/

#clickndrag{
	position: absolute;
	left: 50px;
	margin-right: 50px;
	top:30px;
	height: auto;
	color: #fff;
	text-shadow:rgb(0, 0, 0) 3px 3px 3px;
	opacity: 0;
	font-size: 25px;
	text-shadow:rgb(0, 0, 0) 2px 2px 4px;
	left: -300px;
	top:100px;
	margin-left:0;
	pointer-events:none;
} 
#clickndrag{
	width: 200px;
	height: 50px;
	overflow: auto;
	margin: auto;
	position: absolute;
	top: 0; left: 0; bottom: 0; right: 0;
} 
#warning{
	position: relative;
	width: 200px;
	height: auto;
	display: none;
	margin: 0 auto;
	top:70px;
	font-size: 16px;
	color: #fff;
	text-shadow:rgb(0, 0, 0) 3px 3px 3px;
	background-color:rgba(0, 0, 0, .5);
	padding:30px;
	border-radius: 10px;
}
#tester{
	position: absolute;
	width: -200px;
	height: auto;
	top:200px;
	right:-200px;
	opacity: 1;
	display: block;
	color: #fff;
	font-size: 16px;
	background-color:rgba(0, 0, 0, .5);
	padding:10px;
	border-radius: 10px;
}
#picholder{
	position: fixed;
	width: 200px;
	height: 100px;
	background-color: #333;
	top:50px;
	left:300px;
	overflow: hidden;
}
/* SHARE/SAVE STYLING -------------------------------*/
#shareHolder{
	position: absolute;
	display: none;
	width:100%;
	height:100%;
	top:0;
	margin:0;
	z-index: 90;
}
#shareBG, #picBG, #helpBG{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	margin:0;
	background-color: rgba(0,0,0,0.4);
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.88) 100%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.88) 100%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%,rgba(0,0,0,0.88) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#36000000', endColorstr='#e0000000',GradientType=1 );
}
#halloweenBG{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	margin:0;
	z-index: 30;
	display: none;
	/* background: url('grad.png')no-repeat;
	background-size: cover;
	mix-blend-mode: overlay; */
	background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%, rgba(0,0,0,0) 8%, rgba(0,0,0,0.21) 47%, rgba(0,0,0,1) 84%, rgba(0,0,0,1) 100%);
	background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 1%,rgba(0,0,0,0) 8%,rgba(0,0,0,0.21) 47%,rgba(0,0,0,1) 84%,rgba(0,0,0,1) 100%);
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 1%,rgba(0,0,0,0) 8%,rgba(0,0,0,0.21) 47%,rgba(0,0,0,1) 84%,rgba(0,0,0,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=1 );
	pointer-events: none;
}
#halloween{z-index: 31}
#helpBG{
	display: none;
	opacity:.6;
}
#shareInner{
	position:relative;
	top:50px;
	padding-top: 20px;
	width: 225px;
	height: 230px;
	margin: 0 auto;
	color: #f266e0;
	background-color: #fff;
	overflow: hidden;
	border-radius: 10px;
	text-align: center;
	font-size: 21px;
	-webkit-box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.72);
	-moz-box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.72);
	box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.72);
}
#shareInner .fb-like{
	position: absolute!important;
	bottom:10px!important;
}
#sharebutts{
	position: absolute!important;
	right:8px!important;
	/* width: 185px; */
	height: 33px;
	
	bottom:0px!important;
	z-index: 37;

}
#urlHidden{
	margin-left:-3000px;
}
#urlName{
	width:157px;
    border: 5px solid #f266e0;
    color: #f266e0;
    padding: 5px 8px;
	margin-bottom: 5px!important;0
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 1px;
    border-radius: 5px;
	text-align: center;
}
#shareInner .butt{
	width:165px;
    text-align: center;
	margin-bottom: 5px;
	background-color: #f266e0;
}
#shareInner .butt:hover{
	color: #f266e0;
	background-color: #000;
}

/* DROPPER STYLING -------------------------------*/
.pic1canvasHolder{
	position: absolute;
	display: none;
	width:100%;
	height:100%;
	top:0;
	margin:0;
	/* border:1px solid #ccc; */
	text-align:center;
	

	z-index: 100;
}
#picInner{
	position:relative;
	top:50px;
	width: 400px;
	height: 400px;
	margin: 0 auto;
	overflow: hidden;
	-moz-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	-webkit-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
}
#testCanvas{
	position:relative;
	border:0px solid #000;
	/* background-color: rgba(0,0,0,0); */
	background-color: #fff;
	border-radius: 10px;
	-moz-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	-webkit-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
}
#captureButt{
	display:none;
}
#okButt, #wcButt{
	margin-right: 10px;
}
#guide{
	position:absolute;
	top:0;
	width: 400px;
	height: 400px;
	z-index: 10;
	background:url(guide.png) no-repeat top left;
	pointer-events:none;
}
.dg{margin-top:7px!important;}

#dropHolder{
	position: absolute;
	width:400px;
	height: 400px;
	overflow: hidden;
}
#picButts{
	position: absolute;
	z-index:30;
	top:350px;
}

/* SELECT BOX STYLING -------------------------------*/
.styled-select {
	width: 128px;
	height: 20px;
	overflow: hidden;
	background: #333;
	color: #fff;
}
.styled-select select {
	background: transparent;
	width: 128px;
	padding: 3px;
	border: 1px solid #CCC;
	font-size: 16px;
	height: 20px;
	font-weight: bold;
	outline:none!important;
	-webkit-appearance: none;
}
.styled-select option {
	background:  #333;
	width: 128px;
	padding: 5px;
	border: 1px solid #CCC;
	font-size: 16px;
	height: 20px;
	outline:none!important;
	-webkit-appearance: none;
}
input:focus, textarea:focus, select:focus{
	outline: none;
}

#spinner1,#spinner2{
	position: relative;
	display: inline-block;
	/* margin-left: -110px; */
}
.wrapper {
	position:absolute;
	top:50%;
	left:50%;
}
.close-button {
	background-color: transparent!important;
	padding-top:10px!important;
}

/********** RIGHT CONTROLS ***********************/

.tit{
	position: absolute;
	margin: -21px 0 0 10px;
}
.tit2{
	position: relative;
	text-align: center;
	margin: 40px 0 0 0px;
}

#cont,
#cont2,
#cont3{
	position: relative;
	display:inline-block!important;
	font-weight: normal;
	visibility: hidden;
	width: 197px;
	height: auto;
	color:#6eb7e5;
	background-color:#000;
	
	text-align: left;
	margin-bottom: 0px;
	margin-top: 2px;
	padding: 27px 2px 3px 0px;
	cursor: default;
	left: 1px;

	-o-transition:.3s;
	-ms-transition:.3s;
	-moz-transition:.3s;
	-webkit-transition:.3s;
	transition:.3s;
	border-radius: var(--bordercurve);
}
#cont{
	color: #fff;
	margin-top: 0;
}
#cont3{
	color: #bda14e;
}

#cont .slider-fg{
	background-color: #fff!important;
}
#cont input{
	color: #fff!important;
}
#cont .has-slider{
	border-left: 3px solid #fff!important;
}
#cont3 .slider-fg{
	background-color: #bda14e!important;
}
#cont3 input{
	color: #bda14e!important;
}
#cont3 .has-slider{
	border-left: 3px solid #bda14e!important;
}
#cont:hover{
	color: #000;
	background: #fff;
}
#cont2:hover{
	color: #000;
	background: #6eb7e5;
}

#cont3:hover{
	background: #bda14e;
	color: #000;
}
#chooseOne, #chooseTwo{
	position: relative;
	padding-bottom: 5px;
	margin-bottom: 5px
}
#chooseOne{
	color: #6eb7e5;
}
#chooseTwo{
	color: #bda14e;
}
#f1Holder{
	position: relative;
	/* z-index: 2; */
}
#f2Holder{
	position: static;
}
/*#myDropdowns ,*/
#lucky, #halloween, #animstyle, .topmenu, /* .yourpic, #chooseOne, #chooseTwo,  */.notface, #gallery, #sendButt{
    -webkit-transition:background-color .3s ease-in-out, color .3s ease-in-out;
	-moz-transition:background-color .3s ease-in-out color .3s ease-in-out;
	-o-transition:background-color .3s ease-in-out color .3s ease-in-out;
	transition:background-color .3s ease-in-out color .3s ease-in-out;
}
#showEmButt{
	/* position: relative; */
	visibility: hidden;
    left:155px;
    width:108px;
    /* padding-left: 11.5px;
    padding-right:11.5px;*/
    white-space: nowrap; 
    overflow: hidden;
    text-align: center;

	z-index: 8;
}
#showEmButt{
    -webkit-transition:background-color .3s ease-in-out, color .3s ease-in-out, width .3s ease-in-out;
	-moz-transition:background-color .3s ease-in-out color .3s ease-in-out, width .3s ease-in-out;
	-o-transition:background-color .3s ease-in-out color .3s ease-in-out, width .3s ease-in-out;
	transition:background-color .3s ease-in-out color .3s ease-in-out, width .3s ease-in-out;
}
.topMenu{
    visibility: hidden;
}
.property-name{
	font-family: 'Oswald', Helvetica, arial, sans-serif;
	font-size: 12px;
}

#cont2 .property-name, #cont2 .close-button{
	color: #6eb7e5;
}
#cont3 .property-name, #cont3 .close-button{
	color: #bda14e;
}

#controlsbox{
	margin-top: 10px;
	background-color: rgba(255,255,255,.4);
}


/********** GALLERY / STYLE ***********************/
#gallery,#sendButt{
	color: #f266e0;
	background: #000;
}
#sendButt{z-index: 33;}
#gallery li, #animstyle li{
	width: 112px!important;
}
#gallery a:link, #gallery a:visited {
	color:#000;
}
#gallery:hover, #sendButt:hover{
	color: #000;
	background: #f266e0;
}
#gallery .butt, #sendButt .butt, #animstyle .butt{
	padding:3px 5px;
}
#gallery ul, #animstyle ul{
	width:262px;
}
#animstyle{
	left:91px;
	margin-bottom: 2px;
	z-index: 37;
}
#gallery{
	position: relative;
	margin-right: 5px;
	margin-bottom: 2px;
}

/********** TITLES ***********************/
#sttext {
    color: #fff;
    font-size: 80px;
    /* transform: translateY(-50%);
    -ms-transform: rotate(-15);
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg); */
    position: relative;
    top: 10%;
    left: -30px;
    line-height: 95%;
    opacity: 0;
}
#stoys {
    color: #fff;
    opacity: .2
}
#sline {
    color: #000
}
#me{
	position: absolute;
	font-size: 11px;
	right: 15px;
	color: #f4f4f4;
	bottom:13px;
	visibility: hidden;
}

/********** SOCIAL AND ADS GO HERE **************/

/********** DROPDOWN MENU ***********************/
#myDropdownsMenu{
	display: block;
	position: absolute;
	top:10px;
	left:285px;
	z-index: 32;
}
.dropDown ul{
	margin: 0;
	padding: 0;
	list-style-type: none;
	cursor: default;
	margin-right: 2px;
	/* border:1px solid #ffff00; */
}

ul.ddlist{
	position: absolute;
	overflow-y:auto;
	overflow-x:hidden;
	height: auto;
	width:272px;
	padding-bottom: 5px;
	margin-top: 5px;
	/* border:1px solid #ff0000; */
}
#nav ul.ddlist, #nav2 ul.ddlist{
	left:100px!important;
}


/*Top level menu link items style*/
.dropDown ul li{
	position: relative;
	display: block;
	float: left;
	
	/*
	-webkit-box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.56);
	-moz-box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.56);
	box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.56);
	*/
}
	
/*1st sub level menu*/
.dropDown ul li ul{
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden;
	-webkit-overflow-scrolling: touch;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.dropDown ul li ul li{
	display: inline;
	float: left;
	padding: 0;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu*/
.dropDown ul li ul li ul{
	/* top: 150px; */
}
.face{
	width: 117px!important; 
	margin-left: 2px!important;
	margin-right: 0!important;
}
#nav .butt, #nav2 .butt{
	width:90px;
	padding:3px 5px;
}
#nav, #nav2{
	width:100px;
}


/* Sub level menu links style */
.dropDown ul li ul li{
	font-weight: 400;
	font-size: 13px;

	width:188px;/*width of sub menus*/
	-webkit-box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.46);
	-moz-box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.46);
	box-shadow: 4px 4px 16px 1px rgba(0,0,0,0.46);
}
#strike{text-decoration: line-through;}

/********** HELP ***********************/
#help{
	display: none;
	position: absolute;
	width:80%;
	max-width: 460px;
	top: 10px;
	background-color: #fff;
	/* font-family: Helvetica, arial, sans-serif!important; */
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #888;
	max-height: 700px;

	-moz-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	-webkit-box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);
	box-shadow:8px 7px 44px 5px rgba(0, 0, 0, 0.55);

	border-radius: 10px;

	z-index: 50;
}

em{
	font-weight: 600;
	font-style: normal;
}
#hInner{
	position: relative;
	width: 85%;
	padding-right: 10px;
	top: 20px;
	left: 0px;
	overflow-y: scroll;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}
/* .notface:hover{
	background: #fff;
	color: #000;
} */

#showEmButt, #halloween, #lucky, #animstyle, #gomental, #dotrails, #randomizeEm, .yourpic, #wtf, #auto{
	position: absolute;
	top:10px;
}
#showEmButt{
	/* width: 110px; */
}
 #lucky{
	/* width:57px; */
	left:10px;
	z-index: 7;
}
#halloween{
	right:10px;
	top:10px;
	bottom:auto;
	height: 25px;
	font-family: 'Jolly Lodger', cursive;
	font-size: 21px;
	width:93px;
	background-color: #bd6022;
	white-space: nowrap;
	text-align: center;
	-webkit-box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.7);
	-moz-box-shadow:    6px 6px 15px 0px rgba(0, 0, 0, 0.7);
	box-shadow:         6px 6px 15px 0px rgba(0, 0, 0, 0.7);
	z-index: 38;
}
/* BLACK/WHITE ROLLOVER */
#showEmButt:hover, #halloween:hover,  #lucky:hover, #animstyle:hover, .notface:hover{
	background: #fff;
	color: #000;
}

#gomental, #dotrails, #randomizeEm, #auto{
 	position: static;
 	display: inline-block;
	width:82px;
	margin: 0px;
	font-size: 14px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
}
.showTick:after{
	content:'\2714';
	display:inline-block;
	font-weight: bold;
	color:#fff;
	padding-left:6px;
} 
#wtf{
	left: 10px;
	top:auto;
	bottom:12px;
	visibility: hidden;
	white-space: nowrap;
	z-index: 2;
}
.yourpic{
	position: static;
	width: 183px!important;
	text-align: left;
	color: #6eb7e5;
	margin-bottom: 4px;
}

#yourpic2{
	color: #bda14e;
}

#help a{
	color: #2fa1d6;
	text-decoration: none;
	padding:2px 1px;
	font-weight: 400;
}
#help a:hover{
	color: #fff;
	background-color: #2fa1d6; 

	border-radius: 3px;
}

#me a:hover{
	color: #000;
	background-color: #2fa1d6; 
}
#help p:last-child{
	margin-bottom: 0;
}
#help h2{
	color: #2fa1d6;
	font: 21px normal;
	font-family: 'Oswald', Helvetica, Arial, sans-serif;
	margin-bottom: -7px;
	margin-top: 10px;
	border-bottom: 3px solid #2fa1d6;;
}
#help h2:first-child{
	margin-top: -5px;
}

#fwa{position:absolute;top:0;right:0px;z-index:2;}
#fwa a{width:98px;height:100px;text-indent:-8000px;display:block;background:url(DayTopRight.png) no-repeat;}

#fwa a:hover{
	background-color: rgba(0,0,0,0); 
}

#cexper{position:absolute;top:0px;right:-150px;}
#cexper a{width:128px;height:73px;text-indent:-8000px;display:block;background:url(cex.png) no-repeat;}

/* ROLLOVER ANIMATIONS */
/*  #myDropdownsMenu, 
a {
	-o-transition:.5s;
	-ms-transition:.5s;
	-moz-transition:.5s;
	-webkit-transition:.5s;
	transition:.5s;
}
*/
 /*----------------------------------------------------
ScrollBars
------------------------------------------------------*/
::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.1);
}
 
/* Handle */
::-webkit-scrollbar-thumb {
    height: 50px;
    background: #fff; 
}

#nav ::-webkit-scrollbar-thumb {
    background: #6eb7e5; 
}

#gallery ::-webkit-scrollbar-thumb {
    background: #f266e0; 
}
#nav2 ::-webkit-scrollbar-thumb {
    background: #bda14e; 
}

#help ::-webkit-scrollbar-thumb {
    background: #6eb7e5; 
}

#help ::-webkit-scrollbar-track {
    background: #fff; 
}

.tit{white-space: nowrap;}
.faceHolder{
	position: static;
	margin-left:-4px;
	width:200px;
	padding: 5px;
	min-height:20px;
	background-color: rgba(255,255,255,.4);

	border-radius: 10px;

	-webkit-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.21);
	-moz-box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.21);
	box-shadow: 5px 5px 7px 0px rgba(0,0,0,0.21);
}
#f1Holder{
	margin-top:40px;
}
#f2Holder{
	margin-top:10px;
    background-color: #bda14e; 
	background-color: rgba(255,255,255,.4);
}
#menuHolder{
	position: absolute;
	margin:4px;
	padding:10px;
	padding-right: 0px;
	height:100%;
	width:215px;
	left:-280px;
	top:0;
	background-color: rgba(255,255,255,.5);
	visibility: hidden;
	z-index: 1;

	border-radius: 10px;
	-webkit-box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.52);
	-moz-box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.52);
	box-shadow: 10px 10px 53px 0px rgba(0,0,0,0.52);

	/* -webkit-overflow-scrolling: touch; */
}

/*--------------------------------------------------------------------------------------------------------------------------
Mobile Landscape Size to Tablet Portrait (480x320)
--------------------------------------------------------------------------------------------------------------------------*/
@media only screen and (max-width: 792px) {
	/* #myDropdowns{
		top:45px;
		left:10px;
	} */
}
@media only screen and (max-width: 570px) {
	#clickndrag, #badges {
		display: none;
	}
	#sttext{
		font-size: 50px;
		left:0px;
		top:30%;
	}
	#clickndrag{
		font-size: 10px;
	}
	ul.ddlist{
		width:143px;
	}
	#halloween{
		top:auto;
		bottom:45px;
	}
}
@media only screen and (max-width: 457px) {
	#myDropdownsMenu{
		left:10px;
		top:50px;
	}
	#topCont, #topCont2, #topCont3{
		display: none;
	}
	#nav ul.ddlist, #nav2 ul.ddlist{
		left:-143px!important;
		width:143px!important;
	} 
	/*#showEmButt{
		left:160px;
		
	}
	#nav > li, #nav2 > li{
		left:-85px!important;
	} */
}
@media only screen and (max-width: 400px) {
	#picInner{
		-ms-transform:translateX(-50%);
    	-webkit-transform:translateX(-50%);
    	transform:translateX(-50%);
    	left:50%;
	}
}