/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

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, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
	border:0;
	font-family:inherit;
	font-size:100%;
	font-style:inherit;
	font-weight:inherit;
	margin:0;
	outline:0;
	padding:0;
	vertical-align:baseline;
}
:focus{ outline:0; }
body{
	background:#fff;
	line-height:1;
}
ol, ul{ list-style: none; }
table{
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td{
	font-weight:normal;
	text-align:left;
}
blockquote:before, blockquote:after, q:before, q:after{ content:""; }
blockquote, q{ quotes: "" ""; }
a img{ border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block; }

/******************** body *******************/

body{
	margin:0px;
	padding:0px;
	width:100%;
	height:100%;
	border:0px;
	font-family:"pb6ps", serif;
	font-size:16px;
	line-height:1.55;
	color:#333;
	background:rgb(93,196,252);
    background:linear-gradient(to bottom, rgba(65,174,234,1) 0%,rgba(161,215,250,1) 75%);
    background-attachment:fixed;
    background-size:100% 100%;
}

#loader{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
    opacity:1;
	background:#f8c605 url(images/loader.gif) center / 2em auto no-repeat;
	z-index:900;
}

#backcolor{
	background:#012440;
	background-image:url("images/bot.jpg");
	background-position:center top;
	position:fixed;
	width:100%;
	height:auto;
	bottom:0;
	left:0;
	display: block;
}

img{ 
	border:0px;
	margin:0 auto;
	width:90%;
	max-width:500px;
}

hr{
	height:1px;
	border:0px;
	background:rgba(0,0,0,0.1);
	margin:2.2em 0 2.3em 0;
	clear:both;
}

h1, h2, .h1, .h2, .h3, h3, .h4, .h6{
	font-size:2.1em;
	line-height:1.05;
	margin:0 0 .6em 0;
	clear:both;
	width:100%;
	text-align: center;
	font-weight:bold;
	color:#2F6694;
	letter-spacing: -0.02em;
}

.tt{ font-family:inherit; }

p{ 
	margin:0 auto 1em ;
	text-align:center;
	max-width:660px;
}
em, i{ font-style:italic; }
strong, b{ font-weight:bold; }
.br{ display:none; }

a{
	text-decoration:none;
	color:#f7c601;
	transition:.4s color;
}

a:hover{
	color:#2c6796;
}

#outside{
	width:100%;
	height:100%;
	display:block;
	position:absolute;
	margin:0;
	padding:0;
	top:0;
	left:0;
	overflow:hidden;
	overflow-y:auto;
}

#inside{
	width:100%;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
}

#top{
	width:100%;
	height:auto;
	position:relative;
	z-index:300;
}

#content{
	width:100%;
	height:auto;
	padding:0;
	margin:0 auto;
	clear:both;
	position:relative;
	z-index:250;
	text-align: center;
}

/******************** insides ********************/

#topinside{
	width:100%;
	margin:0 auto -1.5em;
	position:relative;
}

/********************* Top ************************/

#names{
	text-align:center;
	color:#ffd800;
	font-size:1.3em;
	text-shadow:0 3px 9px rgba(0,0,0,0.8);
	margin:0 0 -.5em 0;
	padding-top:.5em;
	letter-spacing: .01em;
}
#names svg{
	width:80%;
	max-width:580px;
	height:auto;
}

#topback{
	background:url("images/bot.jpg");
	background-position: center;
	width:100%;
	height:170px;
	position:absolute;
	top:0;
	left:0;
}

#topbackbot{
	background:url("images/top.png");
	background-position:center bottom;
	width:100%;
	height:60px;
	position:absolute;
	top:140px;
	left:0;
}

#title{
	display:block;
	position:relative;
	width:80%;
	height:auto;
	margin:0 auto;
	box-sizing:border-box;
	max-width:800px;
}

#gohomer{ cursor:pointer; }

#social{
	position:relative;
	display: inline-block;
	margin:0 0 0 1em;
	top:.25em;
}

#social a{
	position:absolute;
	width:100%;
	height:100%;
	z-index:1000;
}

.iconDiv{
	width:1em;
	height:1em;
	margin:0 0 0 1em;
	position:relative;
	display:inline-block;
	text-align:center;
	cursor:pointer;
}

.iconDiv svg{
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100% !important;
}


.iconDiv svg{
	fill:#fff;
	transition:.3s fill;
}

.iconDiv:hover svg{
	fill:#ffd701;
}

/******************** Main Content *******************/

#mainContent{
	width:100%;
	height:auto;
	margin:0 auto;
	position:relative;
	z-index:900;
}

#mainText{
	width:84%;
	padding:2em 5% 3em;
	margin:1em auto;
	text-align:left;
	background:#fff url("images/textback.jpg") center top;
	position:relative;
	box-sizing:border-box;
	max-width:900px;
}

#mttop, #mtright, #mtbottom, #mtleft, #mttl, #mttr, #mtbl, #mtbr{
	position:absolute;
}

#mttop{
	background:url("images/bsT.png") center top / auto 50px repeat-x;
	top:-30px;
	left:15px;
	width:100%;
	height:50px;
}

#mtright{
	background:url("images/bsR.png") right top / 50px auto repeat-y;
	top:0;
	right:-30px;
	width:50px;
	height:100%;
}

#mtbottom{
	background:url("images/bsB.png") center bottom / auto 50px repeat-x;
	bottom:-30px;
	left:0;
	width:100%;
	height:50px;
}

#mtleft{
	background:url("images/bsL.png") left top / 60px auto repeat-y;
	top:0;
	left:-30px;
	width:50px;
	height:100%;
}

#mttl, #mttr, #mtbl, #mtbr{
	background-repeat:no-repeat;
	background-size:100% auto;
	background-position:center;
	width:90px;
	height:90px;
}

#mttl{
	top:-35px;
	left:-35px;
	background-image:url("images/cornerTL.png");
}

#mttr{
	top:-35px;
	right:-35px;
	background-image:url("images/cornerTR.png");
}

#mtbl{
	bottom:-35px;
	left:-35px;
	background-image:url("images/cornerBL.png");
}

#mtbr{
	bottom:-35px;
	right:-35px;
	background-image:url("images/cornerBR.png");
}

#bookarea{
	width:100%;
	clear:both;
	float:left;
	margin-top: 1em;
	text-align: center;
}

/******************* Bottom **********************/

#bottom{
	width:100%;
	height:auto;
	padding:0 0 2em 0;
	box-sizing:border-box;
	position:fixed;
	z-index:200;
	background:#012440 url("images/bot.jpg") center top;
	left:0;
	bottom:0;
}

#bottomInside{
	width:100%;
	padding:1em 0 0 0;
	margin:0 auto;
	position:relative;
	text-align:center;
}

#botback{
	width:100%;
	height:60px;
	background:url("images/bot.png") center top / auto repeat-x;
	position:absolute;
	bottom:3em;
	z-index:100;
}

#copyright{
	width:100%;
	clear:both;
	font-size:.7em;
	line-height:1.4;
	text-align:center;
	color:rgba(255,255,255,.3);
	margin:3em 0 0 0;
}

.cloudslong{
	position:absolute;
	left:0;
	top:-16em;
	width:100%;
	height:15em;
	background:url("images/cloudslong.svg") 0 bottom / auto repeat-x;
	z-index:0;
}

/****************** Extras Categories ***********************/

.left{ float:left; }

.right{ float:right; }

.clear{
	clear:both;
	height:30px;
}

/***************** reset styles for contat form ****************/

.formOut{
	width:100%;
	position: relative;
	text-align:center;
}

.contactform{
	max-width:600px;
	width:100%;
	display: inline-block;
	text-align: left;
}

.contactform p{
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-bottom: 2em;
}

.contactform .btn, .contactform input[type="submit"]{
	display:block;
	float:none;
	margin-left:auto;
	margin-right:auto;
	margin-top:1.5em;
}

label{
	font-size:1.1em;
	font-weight:bold;
	vertical-align:top;
    width:100%;
    box-sizing:border-box;
    margin-bottom:.2em;
}

.formin, .wpcf7-form-control-wrap{
	display: block;
	width:100%;
	margin:0 0 .5em 0;
}

.note{
	font-size:.9em;
	font-style:italic;
	color:rgba(182,48,48,0.80);
	margin-bottom: 1em;
}

.formin input, .formin textarea, .forminput input, .forminput textarea{
	padding:.6em 1em;
	width:calc(100% - 2em);
	border-radius: 4px;
	font-size: 1rem;
	color:#666;
	background:#fff;
}

.formin textarea, .forminput textarea{
	height:6em;
}

.forminput p{ margin-bottom:.3em; }

.required{ color:rgba(182,48,48,0.80); }

.file-out{ 
	display: table; 
	width:100%;
	height:100%;
}

.file, input[type="file"]{
	padding-top:.5em !important;
	padding-bottom:.5em !important;
	font-style:italic;
}

.g-recaptcha{
	display:inline-block;
	margin:0 auto;
}

#formMessage{
	display: none;
	width:calc(100% - 2em);
	margin:2em 0 0 0;
	background:rgba(182,48,48,0.80);
	color:#fff;
	border-radius:4px;
	padding:.5em 1em;
}

input, textarea{
	font-family:inherit;
	font-size:1.4em;
	border:1px solid #ccc;
}

input[type="submit"], .backToBlog a, .button, input[type="button"]{
	cursor:pointer;
	width:auto !important;
	border:0px;
	border-radius:5px;
	margin:.2em 0 0 0;
	padding:.6em 1.2em .65em 1.2em;
	line-height:1;
	display:inline-block;
	font-size:1.45em;
	color:#2F6694;
	text-shadow:0 2px 4px rgba(0,0,0,0.2);
	box-shadow:inset 0 -2px 2px rgba(0,0,0,0.1), inset 0 0 24px rgba(225,150,20,0.4), 0 2px 5px rgba(0,0,0,0.25);
	font-weight:bold;
	background:url(images/buyback.jpg);
	background-position: center !important;
	transition:.5s color, .5s background, .5s box-shadow;
}

.checkout input, .cart input, .checkout textarea, .cart textarea{ font-size:1em; }

.loadBlue{ 
	background:url(images/buybackb.jpg);
	opacity:0;
}

.backToBlog a{
	margin:3em 0 35px 0;
	font-size:1.4em;
	transition:.5s background;
}

#pagination .next, #pagination .prev, .read-more{
	padding:.2em .4em .2em .4em;
	margin:0 .3em;
	font-size:.9em;
	display:inline-block;
	color:#fff;
	background:#1d1d1e;
	transition:.5s color, .5s background;
}

.read-more{
	font-size:.85em;
	padding:.25em .8em .25em .8em;
	color:#f1da17;
	background:#1d1d1e;
}

#pagination .next:hover, #pagination .prev:hover, .read-more:hover{
	color:#1d1d1e;
	background:#f1da17;
}

input[type="submit"]:hover, .backToBlog a:hover, .button:hover, input[type="button"]:hover{
	color:#fff;
	background:url(images/buybackb.jpg);
	box-shadow:inset 0 -2px 2px rgba(0,0,0,0.1), inset 0 0 24px rgba(0,50,115,0.4), 0 2px 5px rgba(0,0,0,0.25);
}

.loaderover{
	background:rgba(255,255,255,0.5);
	position:absolute;
	width:100%;
	height:100%;
	z-index:9999;
	display: none;
}

/*********************** Add frame around images **************************/

.shadowFrame{
	border:10px solid #fff;
	background:#fff;
	margin-bottom:20px;
	box-shadow:0px 2px 6px rgba(0,0,0,0.3);
}

/********************** Extra *********************************/

.intext{
	width:44%;
	height:auto;
	margin:0 0 .25em 1em;
	float:right;
}

.intextr{
	width:47%;
	height:auto;
	margin:0 1em .25em 0;
	float:left;
}

/********************** Buy Now Button ***********************/

.buyNowArea, .buyNowArea2{
	width:100%;
	max-width:400px;
	display: inline-block;
	height:auto;
	font-family:"memo";
	text-transform:uppercase;
	position: relative;
    line-height:1;
}

.fullBox{
	width:100%;
	height:100%;
	display: block;
	position:absolute;
	top:0;
	left:0;
}

.buyNowArea2{
	margin:0 0 -.65em 0 !important;
}

.buyNowArea a, .buyNowArea2 a{
	color:#012440;
}

.buyNowArea img{
	width:130%;
	height:auto;
	position:relative;
	z-index:400;
	margin:0 0 -6em -15%;
	pointer-events: none;
}

.buyNowButton{
	margin:0;
	width:100%;
	padding:3em 0 .85em 0;
    box-sizing:border-box;
	cursor:pointer;
    display:table;
	clear:both;
	position:relative;
	background:url(images/buyback.png) no-repeat;
	background-position: center;
	background-size:100% 100%;
	font-size:2.15em;
    text-shadow:.06em .06em .26em rgba(0,0,0,0.5);
    transition:.5s color;
    color:#fff !important;
}

.buyNowButton svg{
	position: relative;
	top:2.5em;
    padding:0;
    width:10.15em;
    height:1.5em;
}

.buyNowArea .navText{ transition:.5s fill; }
.buyNowArea:hover .navText{ fill:#559ad3 !important; }

.buyNowButton:hover{ color:#043154 !important; }

.buyNowArea2 .buyNowButton{
	padding-top:0;
}

a.buyLink:hover{ color:#fff; }

.bNL{
	display:table-cell;
    vertical-align:middle;
	padding:0;
    width:45%;
    box-sizing:border-box;
}

.bNR{
	display:table-cell;
    vertical-align:middle;
	padding:0 5% 0 0;
    box-sizing:border-box;
    font-size:.75em;
}

.buyNowArea2 .bNR{
	padding:.25em 0;
}

/********************************** 404 *********************************/

.lost{
	margin:0;
	padding:3em 0 4em 0;
	text-align: center;
}

.lostH{
	width:100%;
}

.lostH img{
	width:100%;
	height:auto;
}

.lostP{
	margin:0;
}

/******************************* Clouds ********************************/

.cloudA{
	position:absolute;
	left:0;
	top:30%;
	width:700px;
	height:233px;
	background:url("images/cloudA.svg") no-repeat;
	background-size:100% auto;
}

.cloudB{
	position:absolute;
	left:0;
	top:200px;
	width:350px;
	height:119px;
	background:url("images/cloudB.svg") no-repeat;
	background-size:100% auto;
}

/********************************** Resized CSS *************************/

@media all and (max-width:980px){
	#names{ margin:0 0 -1vw 0; }
    #names svg{
        width:60%;
        max-width:none;
    }
    #topback{ height:18vw; }
    #topbackbot{ top:13vw; }
	#title{
        width:90%;
        margin:0 5% 1.2em 5%;
    }
	#topinside{ width:100%; }
    .cloudA{
        width:525px;
        height:175px;
		top:25vw;
    }
    .cloudB{
        width:263px;
        height:90px;
		top:2vw;
    }
	.br{ display: inline; }
	.intext{
        width:65%;
        margin:0 0 .5em .5em;
    }
	.intextr{
		width:60%;
		margin:0 .5em .25em 0;
	}
}

@media all and (max-width:800px){
	#title{ 
		margin-bottom: 4vw; 
	}
	#content{ margin-bottom: -5em; }
	#topbackbot{
		height:8vw;
		background-size:auto 100%;
	}
	#botback{
        height:4em;
		background-size:auto 100%;
        bottom:2em;
    }
    #mttop{
        background-size:auto 6.5vw;
        top:-4vw;
        height:6.5vw;
    }
    #mtright{
        background-size:6.5vw auto;
        right:-4vw;
        width:6.5vw;
    }
    #mtbottom{
        background-size:auto 6.5vw;
        bottom:-4vw;
        height:6.5vw;
    }
    #mtleft{
        background-size:6.5vw auto;
        left:-4vw;
        width:6.5vw;
    }
    #mttl, #mttr, #mtbl, #mtbr{
        width:12vw;
        height:12vw;
    }
    #mttl{
        top:-4.5vw;
        left:-4.5vw;
    }
    #mttr{
        top:-4.5vw;
        right:-4.5vw;
    }
    #mtbl{
        bottom:-4.5vw;
        left:-4.5vw;
    }
    #mtbr{
        bottom:-4.5vw;
        right:-4.5vw;
    }
}

@media all and (max-width:720px){
	#topbackbot{ height:3em; }
	#content{ margin-bottom:-5em; }
	#botback{ bottom:2em; }
	.cloudslong{ bottom:5em; }
}

@media all and (max-width:530px){
	.buyNowButton{ 
		font-size:6.5vw; 
		padding-bottom:0;
		height:30vw;
	}
	.buyNowButton svg{
        top:16vw;
		width:66vw;
		height:10.5vw;
    }
	.buyNowArea img{ margin:0 0 -20.5vw -15%; }
	.intext, .intextr{
        width:100%;
        margin:0 0 .5em 0;
        float:left;
    }
}

@media all and (max-width:500px){
	#names{ margin:0 0 -1.2vw 0; }
    #names svg{ width:80%; }
	#title{
        width:100%;
        margin:0 0 4.75vw 0;
    }
	#topback{ height:22vw; }
    #topbackbot{ 
		top:17.5vw;
		height:10vw; 
	}
}

@media all and (max-width:410px){
	h1, .h1{ font-size:10vw; }
	#title{ margin:0 0 5vw 0; }
}