@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic,600');
@import url('//fonts.googleapis.com/css?family=Shadows+Into+Light');
@import url('//fonts.googleapis.com/css?family=Martel+Sans:200,400');
@import url('//fonts.googleapis.com/css?family=Open+Sans:400,800');
@import url('//fonts.googleapis.com/css?family=Biryani:400,900');
@import url('//fonts.googleapis.com/css?family=Rancho');
@import url('font-awesome.min.css');
@import url('//fonts.googleapis.com/css?family=Architects+Daughter');
@import url('//fonts.googleapis.com/css?family=Archivo+Black');




div{
    
 
  



}

img.book
{
    border-width:1px;
    border-style:solid;
    border-color:grey;
    max-width:100%;
} 

ul.document {
    
    text-align:left;
    margin:80px;
    padding:25px;
    list-style-image: url('../images/document-text.jpg');
}

ul.folder {
    list-style-type: url('../images/folder.jpg');
    text-align:left;
    margin:80px;
    padding:25px;
    
}

li.folder {
list-style-image: url('../images/folder.jpg');
    border-width:1px;
    border-color:grey;
    border-style:solid;
    margin-left:20px;
    margin-top:1px;
    padding:15px;
    
}

li.document {
    list-style-image: url('../images/document-text.jpg');
    border-width:1px;
    border-color:grey;
    border-style:solid;
    margin-left:20px;
    margin-top:1px;
    padding:15px;
   
    
}



.titlesHeaderText{

height:auto;
width: auto;
overflow: hidden;

font-family: 'Martel Sans', sans-serif;
font-size: 0.8em;
font-weight: bold;
color:black;
text-align:left;

}

.titlesDetailsText{

height:auto;
width: auto;
overflow: hidden;

font-family: 'Helvetica', sans-serif;
font-size: 0.9em;
font-weight: 500;
color:black;
font-style:italic;
line-height:110%;
margin-top:10px;
text-align:left;

}

.titlesDescriptionText{

margin-top:10px;
height:auto;
width: auto;
overflow: hidden;
font-family: 'Helvetica', sans-serif;
font-size: 0.9em;
font-weight: 400;
color:black;
line-height:110%;
text-align:left;
}



.wrapper{


margin-top:-70px;
margin-left:auto;
margin-right:auto;

	padding-top:1px;
	padding-bottom:1px;
	padding-left:2px;
	padding-right:2px;
    height: auto;
   overflow: hidden;
   max-width:1024px;
   width:1024px;


	}


.header{
    


width: 840px;
height:120px;
overflow: hidden;
background-color:#FDD017;
background-image:url("../images/kod_header.jpg");
}

#headerLogoRight{

height:75px;
width: 75px;
overflow: hidden;
float:right;
margin-top:10px;
margin-right:35px;
}

.headerTextCenter{
    margin-left:100px;
font-family: 'Martel Sans', sans-serif;
font-size: 2.95em;
font-weight: 450;
padding-top:0px;
height:50px;
width: auto;
overflow: hidden;
float:left;
margin-top:0px;
}

.addressTextCenter{
   
height:45px;
width: 540px;
overflow: hidden;
margin-left:100px;
float:left;
font-family: 'Martel Sans', sans-serif;
font-size: 1em;
font-weight: 50;
float:left;
margin-top:5px;
}

.headerLogoLeft{

height:auto;
width: auto;
overflow: hidden;
float:left;
}




.rightColumn{


width:250px;;
float:right;
height:auto;
margin-top:-100px;
}

.kodanshaComics{
clear:both;

width:180px;
float:right;



}



.downloadButton{
clear:both;
width:180px;
float:right;
height:200px;
margin-top:20px;

}

.buttonRow{
    
    display:inline-block;
    
}



.tradeCustomersHeaderText{

height:auto;
    width: 213px;
overflow: hidden;
font-family: 'Biryani', sans-serif;
font-size: 1.1em;
font-weight: bold;
color:black;
text-align:center;
}


.allOurBooks{

    border-color:red;
    height:auto;
    width: 213px;
    overflow: hidden;
    font-family: 'Biryani', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color:black;
    padding:2px;
}

.clickWebsite{


    height:auto;
    width: 213px;
    overflow: hidden;
    font-family: 'Biryani', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color:red;
}

.clickCreditapp{
    margin-top:10px;
    height:auto;
    width: 213px;
    overflow: hidden;
    font-family: 'Biryani', sans-serif;
    font-size: 1.1em;
    font-weight: bold;
    color:red;
}


.rightLowerColumn{
clear:both;
margin-top:20px;
margin-bottom:5px;
width:220px;
float:right;
height:410px;
background-color:#fff;
border-width:15px;
border-style:solid;
border-color:#ffe600;
float:right;


}



.rightLowerColumnWrapper{
clear:both;
width:200px;
float:right;
height:650px;
}

.rightLowerColumnTopText{
clear:both;
width:180px;
height:190px;

text-align: center;


}

.rightLowerColumnBottomText{
    margin-top:10px;
    height:auto;
    width: 213px;
    overflow: hidden;
    font-family: 'Biryani', sans-serif;
    font-size: 1em;
    font-weight: bold;
    color:black;
    text-align: center;

}

.emailText{
    margin-top:10px;
    height:auto;
    width: 213px;
    overflow: hidden;
    font-family: 'Biryani', sans-serif;
    font-size: 1.em;
    font-weight: bold;
    color:red;
    text-align: center;
    background-color:#fff;
    
}

.rightLowerColumnTurnaroundLogo{
clear:both;
width:180px;
height:30px;
margin:10px;
padding-left:10px;

}

.middleTextHeader{

height:195px;
width: auto;
overflow: hidden;
margin-left:auto;
margin-right:auto;
font-family: 'Architects Daughter', cursive;
font-size: 2.7em;
line-height: 120%;
font-weight: bold;
margin-left:50px;
color:#8B0000;
text-align:right;
margin-right:50px;
}

.facebookLogo{
    margin-top:10px;
height:65px;
width: 65px;
overflow: hidden;
float:left;
margin-right:50px;
}

.middleText{
margin-top:5px;

float:right;
overflow: hidden;
font-size: 15pt;
line-height: 1.85em;
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;

height:auto;
width: auto;
overflow: hidden;

}

.representsHeader{
font-family: 'Architects Daughter', cursive;
    font-size: 1.2em;
    margin-top:3px;
}

.representsFooter{
    font-size: 0.8em;
    text-align:center;
      background-color:#686868;
      color:#fff;
      font-weight:bold;
      margin-top:-2px;
}

.representsText{
    disply:inline-block;
margin-top:1px;
height:250px;
width: 1024;
overflow: hidden;px
float:left;

font-family: 'Architects Daughter', cursive;
font-size: 1em;
font-weight: bold;
  text-align:center;
  background-color:#686868;
  color:#fff;

}

.leftColumn{
margin-top:5px;
height:auto;
width: auto;

overflow: hidden;
}

.newTitlesSlider{



margin-top:5px;

overflow: hidden;
float:left;
background-color:black;
height:550px;
width:370px;

}

.newTitlesSliderHeader{

	height:50px;
	width: 100%;
	overflow: hidden;
	float:left;
    font-family: 'Biryani', sans-serif;
	font-size: 2.4em;
	font-weight: 900;
	color:white;
	margin-left:5px;
    margin-top:10px;

}



.mainText{


height:auto;
width: 367px;
overflow: hidden;
padding:1em;
padding-top:0px;
float:right;
text-align:justify;
}

.newTitlesTextBlock{
    font-size: 1.7em;
    text-align:center;
    background-color:#E0E0E0;
    color:#000;
    font-weight:200;
    font-family: 'Architects Daughter', cursive;
    height:125px;
    padding:10px;
}

.newTitlesTextBlockText{
    font-size: 2.2em;
    text-align:center;
    background-color:#E0E0E0;
    color:#000;
    font-weight:bold;
    font-family: 'Helvetica', cursive;
    height:45px;
    padding:10px;
}



.newTitlesGrid{

height:auto;
width: 1024px;
overflow: hidden;
background-color:#686868;
}

.gridRow{

text-align: center;


}

.gridRowRep{
    
    text-align: center;
    width:auto;
    margin-left:40px;
    border-color:#fff;
}

.gridCell{
	

height:650px;
width:240px;
padding: 1em;
min-height: 1px;
display: block;
float:left;
margin: 2em;
position:static;
top:20px;
background-color:#fff;
overflow: hidden;
padding-bottom:8px;

}

.gridCellRep{
    
    

    height:700px;
    width:240px;
    padding: 1em;
    min-height: 1px;
    display: block;
    float:left;
    margin-left: 2em;
    margin-right: 2em;
    margin-top:1px;
    position:static;
    top:-10px;
    background-color:#686868;
    overflow: hidden;
    
    
}




.imageFrame{
	
	top: 0px;
  	left: 20px;


	width: 100%;
	max-width:200px;
	height:312px;
  

}

.imageDescriptionFrame{
	position:relative;
	top: 5px;
  	left: 0px;


	height:80px;
	width: 240px;
}

.imagesOfTheMonth{

margin-top:5px;
height:auto;
width: auto;
overflow: hidden;
padding:3em;
overflow: hidden;

text-align: center;
float:left;
}

.imagesOfTheMonthHeader{

	height:80px;
	width: 100%;
	overflow: hidden;
	float:left;
    font-family: 'Archivo Black', sans-serif;
	font-size: 3.5em;
	font-weight: bold;
	color:black;
	margin-left:30px;
    font-style:normal;
}

.imagesOfTheMonthContainer1{

margin-top:5px;
height:auto;
width: 315px;
overflow: hidden;
float:left;
margin-right:55px;

margin-bottom:5px;
margin-left:52px;

}

.imagesOfTheMonthContainer2{

margin-top:20px;
height:auto;
width:285px;
overflow:hidden;
margin-right:50px;
float:right;


}

.imagesOfTheMonthContainer3{

margin-top:20px;
height:auto;
width: 417px;
overflow: hidden;
margin-right:50px;
float:right;
}

.imagesOfTheMonthContainer4{

margin-top:5px;
width:587px;
height:auto;
overflow: hidden;
float:left;

margin-right:10px;
margin-left:52px;

}

.imagesOfTheMonthLabel{
    

}


.imagesOfTheMonthTextbox1{
    margin-top:5px;
    height:auto;
    width: auto;
    overflow: hidden;
    float:left;
    margin-right:55px;
    margin-bottom:5px;
    margin-left:2px;
    color:black;
font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
    font-weight: 200;
    text-align: left;
    padding-left:2;
}

.imagesOfTheMonthTextbox2{
    margin-top:5px;
    height:auto;
    width: auto;
    overflow: hidden;
    float:left;
    margin-right:55px;
    margin-bottom:5px;
    margin-left:2px;
    color:black;
font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
    font-weight: 200;
    text-align: left;
    padding-left:2;
}

.imagesOfTheMonthTextbox3{
    margin-top:5px;
    height:auto;
    width: auto;
    overflow: hidden;
    float:left;
    margin-right:55px;
    margin-bottom:5px;
    margin-left:2px;
    color:black;
font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
    font-weight: 200;
    text-align: left;
    padding-left:2;
}

.imagesOfTheMonthTextbox4{
    margin-top:5px;
    height:auto;
    width: auto;
    overflow: hidden;
    float:left;
    margin-right:55px;
    margin-bottom:5px;
    float:rigth;
    margin-left:2px;
    color:black;
font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
    font-weight: 200;
    text-align: left;
    padding-left:2;
}

.imagesOfTheMonthTextbox5{
    margin-top:5px;
    height:auto;
    width: auto;
    overflow: hidden;
    float:left;
    margin-right:55px;
    margin-bottom:5px;
    margin-left:2px;
    color:black;
 font-family: 'Architects Daughter', cursive;
    font-size: 1.4em;
    font-weight: 200;
    text-align: left;
    padding-left:2;
}


@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) {
 
 
 .header{
     
    
     width: 375px;
     overflow: hidden;
    
     float:left;
     padding:0;
     margin:0;
     
 }
 
 .rightColumn{
     width:375px;
     
     height:auto;
    
   
 }
 
 .headerTextCenter{
     font-family: 'Martel Sans', sans-serif;
     font-size: 1.8em;
     font-weight: 500;
     height:auto;
     width: auto;
     overflow: hidden;
    
     float:left;
 
 }
 
 .addressTextCenter{
     
     height:63px;
     width: auto;
     overflow: hidden;
     float:left;
     font-family: 'Martel Sans', sans-serif;
     font-size: 1em;
     font-weight: 50;
 }
 

 
 .kodanshaComics{
  
     
     width:252px;
     height:50px;
     float:left;
     
 }
 
 .downloadButton{
     
     width:100px;
   
     height:50px;
     float:left;
     
 
   
 
 }
 
 .leftColumn{
     margin-top:5px;
     height:auto;
     width: 340;
     float:left;
     overflow: hidden;
     padding:0;
     margin:0;
 }
 
 .wrapper{
     
     padding-bottom:1px;

margin-left:-0px;
     height: auto;
     overflow: hidden;
     max-width:375px;
     width:auto;
     
     padding:0;
     margin:0;
     
     
	}
 
 .outerWrapper{
     

     
 }
 

     
     
     #headerLogoRight{
     display:none;
     
 }
 
    
			
}