/* CSS Document */

/* Desktop Layout: 769px to a max of 1140px.  Inherits styles from: Mobile Layout and Tablet Layout.
------------------------------------------------------------------------------------------------------------------------------------------*/

@media only screen and (min-width: 769px) {
	
/* GLOBALS (desktop)
-----------------------------------------*/ 	
.gridContainer {
	width: 89.0217%;
	max-width:1140px;
	padding-left: 0.4891%;
	padding-right: 0.4891%;
	margin: auto;
	clear: none;
	float: none;
	margin-left: auto;
}

a:hover {text-decoration: none;}

p a:hover {
    border-bottom: 1px dashed transparent;
    color: black;
}
    
button:hover {
    color: white;
    background-color: #db1075;
}
    
.comicPanel {
	background-repeat: no-repeat;
	background-position: center;
	height:auto;
}

.masthead h1 {
	position:absolute;
	bottom:30px;
	left:10%;	
	font-size:72px;
}

.img-half {
    width: 47%;
}
    
.img-third {
    width: 31%;
}
    
.img-quarter {
    width: 23%;
}

.img-sm {
	max-height: 400px;
}
    
.float-left {
    float: left;
}
    
/* HEADER (desktop)
-----------------------------------------*/ 
.logo {
	width: 49.4505%;
	 -webkit-transition: background-position 1.5s ease-out;
    -moz-transition: background-position 1.5s ease-out;
    -o-transition: background-position 1.5s ease-out;
	transition: background-position 1.5s ease-out;
	/*background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/DID-bg-blotch.png);
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/DID-bg-blotch-01.svg);*/
	background-size:cover;
	background-repeat:no-repeat;
	background-position:0px -105px;
	padding-right:10px;
}

/* NAV (desktop)
-----------------------------------------*/ 
.nav-collapse {
	width: 49.4505%;
	margin-left: 1.0989%;
	clear: none;
	margin-top:0px;
}

.mainNav {
	width:100%;
	/*width: 49.4505%;
	margin-left: 1.0989%;
	clear: none;*/
	margin-top:0px;
}

.mainNav ul li a{
    display: block;
	line-height: 40px;
	margin:0;
	padding:0;
	border-radius:0px;
	padding-top: 20px;
	padding-bottom: 0px;
	width:100%;
	border:none;
	background-color:transparent;
	text-align:center;
    border-bottom: 2px solid black;
    transition: all .3s ease;
}

.mainNav ul li a:hover {
    border-bottom: 15px solid black;
}

/* COMIC NAV (desktop)
-----------------------------------------*/ 
.comicNav {
	width: 100%;
	margin-left: 0;
	clear: both;
}

.comicNav ul li a {
	line-height: 35px;
	-webkit-transition: background-color 1.5s ease-out;
    -moz-transition: background-color 1.5s ease-out;
    -o-transition: background-color 1.5s ease-out;
	transition: background-color 1.5s ease-out;
}

.comicNav ul li a:hover {
	background-color:#ed0f69; /* BRAND PINK */
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
}


/* COMIC (desktop)
-----------------------------------------*/ 
.comicTitleContainer {
	/*width: 49.4505%;
	margin-left: 1.0989%;
	clear: none;
	text-align:right;*/
	/*width: 66.3003%;*/

	/*width: 32.2033%;*/
	width: 65%;
	text-align:left;
}

a.buyThis {
	/*width: 64.4066%;*/
	width: 33%;
	margin-left: 1.6949%;
	padding-right: 0%;
	clear: none;
	-webkit-transition: background-color .5s ease-in-out;
	-moz-transition: background-color .5s ease-in-out;
	-o-transition: background-color .5s ease-in-out;
	transition: background-color .5s ease-in-out;
}

a.buyThis:hover {
	color:white;
	border-bottom:none;
	background-color: black;	
}


/* MAIN SECTION (desktop)
-----------------------------------------*/ 
.main {
	width: 66.3003%;
}


/* ASIDE (desktop)
-----------------------------------------*/ 
.pageAside {
	width: 32.6007%;
	/*margin-left: 1.0989%;*/
	margin-left:7px;
	clear: none;
}

.social{
	width:100%;
	padding-bottom:20px;
}

.social ul li a {
	-webkit-transition: background-color .5s ease-in-out;
  	-moz-transition: background-color .5s ease-in-out;
  	-o-transition: background-color .5s ease-in-out;
  	transition: background-color .5s ease-in-out;
}

.social ul li a:hover {
	border-bottom:none;
	background-color:black;
}

.signUpForm {
	width: 100%;
	/*margin-left: 1.6574%;
	clear:none;*/
	margin-left:0;
}

#mc_embed_signup form{
	padding:0;
}

#mc_embed_signup input.button {
-webkit-transition: background-color .5s ease-in-out;
  	-moz-transition: background-color .5s ease-in-out;
  	-o-transition: background-color .5s ease-in-out;
  	transition: background-color .5s ease-in-out;
}

#mc_embed_signup input.button:hover {
	background-color:black;
}

/*EDITIONS page  (desktop)
-------------------------------------------------------------------------------------------------------------------------*/

#preload-01 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-valentines-black.jpg") no-repeat -9999px -9999px; }
#preload-02 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-retro-black.jpg") no-repeat -9999px -9999px; }
#preload-03 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-starwars-black.jpg") no-repeat -9999px -9999px; }
#preload-04 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-superhero-black.jpg") no-repeat -9999px -9999px; }
#preload-05 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-halloween-black.jpg") no-repeat -9999px -9999px; }
#preload-06 { background: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-christmas-black.jpg") no-repeat -9999px -9999px; }


.editionsContent a.imageButton {
	background-position:center top;
	 -webkit-transition: background-image .5s ease-in 0s;
    -moz-transition: background-image .5s ease-in 0s;
    -o-transition: background-image .5s ease-in 0s;
    transition: background-image .5s ease-in 0s;
}

.editionsContent a.imageButton:hover {
		/*background-position:center bottom;*/
		border-bottom:none;
}

.editionsContent a.valentinesButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-valentines-black.jpg");
}

.editionsContent a.retroGamesButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-retro-black.jpg");
}

.editionsContent a.starWarsButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-starwars-black.jpg");
}

.editionsContent a.superheroButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-superhero-black.jpg");
}
    
.editionsContent a.halloweenButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-halloween-black.jpg");
}
    
.editionsContent a.christmasButton:hover {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-christmas-black.jpg");
}

/* VALENTINES edition page (tablet)
------------------------------------------------------------------------*/

h1.stacked {
	font-size:64px;
	line-height:64px;
	bottom:30px;
	left:10%;	
}

a.comicButton img:hover{
	border: 5px solid black;
}


/* FOOTER (desktop)
-----------------------------------------*/ 
.zeroMargin_desktop {
margin-left: 0;
}
.hide_desktop {
display: none;
}



/* CONTACT PAGE (desktop)
-----------------------------------------------------*/
.contactPageContent a.emailButton {
	-webkit-transition: background-color 1.5s ease-out;
    -moz-transition: background-color 1.5s ease-out;
    -o-transition: background-color 1.5s ease-out;
	transition: background-color 1.5s ease-out;
}

.contactPageContent a.emailButton:hover {
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
	background-color:#8500B8;
}

.form-submit-button {
	-webkit-transition: background-color 1.5s ease-out;
    -moz-transition: background-color 1.5s ease-out;
    -o-transition: background-color 1.5s ease-out;
	transition: background-color 1.5s ease-out;
}

.form-submit-button:hover {
	-webkit-transition: background-color .3s ease-out;
	-moz-transition: background-color .3s ease-out;
	-o-transition: background-color .3s ease-out;
	transition: background-color .3s ease-out;
	background-color:#8500B8;
}

}


@media only screen and (min-width: 900px) {

.masthead h1 {
	bottom:40px;
	left:10%;	
	font-size:84px;
	line-height:80px;
}
    
/* STORE PAGE 
------------------------------------------*/

a.store-btn {
	width: 100%;
	color:black;
	clear: both;
	margin-left: 0;
	margin-top:10px;
	background-color:transparent;
    border: 2px solid #db1075;
}

a.store-btn:hover {
    background-color: #db1075;
    color: white;
}

.storeButtonsWrapper {
    width: 66.3003%;
    padding: 10px;
    height: auto;
    float: left;
    
}

.bitch-left {
    width: 49%;
    float:left;
}

.bitch-right {
    width: 49%;
    float: right;
}
    
.storeCartWrapper {
    width: 32.6007%;
    padding: 10px;
    height: auto;
    float: right;
    margin-left:7px;
	clear: none;
}
    

}