/* CSS Document */

 body, html{
 height:100%;
 }

a{
color:#666666;
text-decoration:none;
}



a img{
	border:none;
	padding:0px;
}

body{
	font-family: 'Lato', arial, san-serif;
	font-family: 'helvetica neue', helveticaneue, arial, helvetica, sans-serif; 
	font-size:.7em;
	letter-spacing:0px;
	background-color:#fff;
	min-height: 100%;
	    overflow-x: hidden;

    /*position: relative;*/	
}


footer {
    position: absolute;
    bottom: 0;
    padding-bottom:20px;
}



h1 {
font-size: 180%;
letter-spacing: 1px;
text-transform: uppercase;
margin:0;
padding-left:20px;

}

h1 span{

}

h1 a{
color:#000;
font-weight:normal;
margin:0;
}



h2{
font-weight:bold;
font-size:120%;
padding:0;
   

}	


h3 {
font-size: 130%;
padding:0;
margin:0;
font-weight:normal;
text-transform:capitalize;
color:#666;
}


h3 a{
}


h3 a:hover{
color:blue
}



		
#wrapper {
position:relative;
width:95%;
height:auto;
margin:0 auto;
}
	

strong{
color: #000000;
font-weight: bold;
}
	

.clear{
clear:both;
} 

p{
font-size:140%;
}

/* ---------------------------    N A V   ---------------------- */



nav{
width:120px;
line-height:2.5em;
margin-top:30px;
}



nav ul {
  margin: 0; 
  margin-top:10px;
  padding-left:10px;
}



nav ul li {
display: inline-block;
float: left;
clear:left;
list-style: none;
margin: 0;
line-height:2em;
}



nav ul li a{
line-height:1.5em;
text-transform: capitalize;
font-size:130%;
font-weight:normal;
letter-spacing:0px;
background-color:#fff;
padding:.1em .9em .4em .9em;
}

/*9999999999999999999999999999999 I N D E X   P A G E  99999999999999999999999999999999*/

/*body {
    overflow:hidden;
}*/


/*https://stackoverflow.com/questions/16670931/hide-scroll-bar-but-while-still-being-able-to-scroll and
https://jsfiddle.net/ehp3qnty/576/

.parent {
  width: 400px;
  height: 200px;
  border: 1px solid #aaa;
  overflow: hidden;
}
.child {
  height: 100%;
  margin-bottom: -50px; /* maximum width of scrollbar */
 /* padding-bottom: 50px; /* maximum width of scrollbar */
 /* overflow-y: hidden;
  overflow-x: scroll;
}
*/

/* before the above addition

.main_art_box{
clear:left;
float:left;
	width: 95%;
  	height: auto;
  	margin:3em 0 0 2em;
}

*/

.main_art_box{
clear:left;
float:left;
	width: 95%;
  	height: auto;
  	margin:4em 0 0 2em;
  	overflow:hidden;
  	position:relative;
}



.cat_title2{
width:300px;
margin-top:10px;
}


.main_art_box .thumb{
display: inline-block;
height:150px;
width:auto;
}


.main_art_box .thumb img{
height:100%;
width:auto;
padding-right:15px;
display: inline-block;
}


.main_art_box .row_box_1{
position:relative;
background-color:#fff;
width: auto;
height:170px;
overflow-x: scroll;
white-space: nowrap;
padding-bottom:1em;
z-index:2;
 /*margin-bottom: -50px; maximum width of scrollbar 
padding-bottom: 50px; /* maximum width of scrollbar */
}


.main_art_box .row_box_1::-webkit-scrollbar {
 display: none;
}

.main_art_box .row_box_2{
position:relative;
background-color:#fff;
width: auto;
height:170px;
overflow-x: scroll;
white-space: nowrap;
z-index:10;
 /*margin-bottom: -50px; /* maximum width of scrollbar 
padding-bottom: 50px; /* maximum width of scrollbar */

}

.main_art_box .row_box_2::-webkit-scrollbar {
 display: none;
}


.main_art_box .row_box_3{
position:relative;
background-color:pink;
margin-top:-20px;
width: auto;
height:170px;
overflow-x: scroll;
white-space: nowrap;
padding-top:5em;
margin-bottom: -50px; /* maximum width of scrollbar */
padding-bottom: 50px; /* maximum width of scrollbar */
}

.main_art_box .row_box_3::-webkit-scrollbar {
 display: none;
}

.main_art_box .row_box_4{
width: auto;
height:170px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-top:3em;

}


.main_art_box .row_box_5{
width: auto;
height:170px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-top:3em;

}



.main_art_box .row_box_6{
width: auto;
height:170px;
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
padding-top:3em;

}



.main_box_arrows{
position:absolute;
	top:125px;
	left:200px;
	width: 80%; 
  	height: auto; 
  /*overflow-x: scroll;
  overflow-y: hidden;*/
   	}

.cat_title{
padding-left:15px;
width:300px;
margin-top:10px;
}



/* ---------------------------- C O N T E N T  ------------------------------ */

#content_box{
position:relative;
margin: 0 auto;
margin-top:-4.8em;
width:50%;
height:auto;
z-index:1;
padding-bottom:70px;
}

#content_box p{
font-size:110%;
color:#333;
line-height:1.4em;
padding:8px 0px 0px 0px;
}

#content_box img{
display:block;
max-width:65%;
height:auto;
float:left;
}

#content_box a{
font-size:100%;
color:blue;
padding:0px;
}

#content_box ul{
display:block;
width:100%;
padding:0;
margin: 10px auto 30px auto;
display:flex;
justify-content: center;
 }

#content_box ul li{
display: list-item;
padding:0 20px 0 0;
margin:0;
text-transform: uppercase;
font-size:120%;
}


#content_box ul li a{
display: list-item;
color:#999;
padding:0;
margin:0;
}

#content_box ul li strong{
color:#000;
font-weight:bold;
}

#content_box a:visited{
color:blue;

}





/* ----------------------------   P A G I N A T I O N   ------------------------------- */
/* ----------------------------   P A G I N A T I O N   ------------------------------- */
/* ----------------------------   P A G I N A T I O N   ------------------------------- */
/* ----------------------------   P A G I N A T I O N   ------------------------------- */
/* ----------------------------   P A G I N A T I O N   ------------------------------- */


.pagination_box{
top:150px;
left:20px;
width:100%;
display:block;
 }

.previous a{
position:absolute;
top:250px;
font-family: Lato, sans-serif;
font-weight:bold;
left:8%;
font-size:1000%;
color:#ddd;
text-decoration:none;
}

.previous a:hover{
text-decoration:none;
color:#666;
}

.next a{
position:absolute;
font-family: Lato, sans-serif;
font-weight:bold;
font-size:1000%;
top:250px;
left:80%;
color:#ddd;
text-decoration:none;
 }

.next a:hover{
text-decoration:none;
color:#666;
}


#x_box{
position:absolute;
top:10px;
left:93%;
}

#x_box a{
font-size:300%;
color:#ddd;
}	

#x_box a:hover{
text-decoration:none;
color:#666;
}

.image_box_horizontal{
position: relative;
top:-80px;
/*left:17%;*/
width:65%;
height:auto;
margin:0 auto;
}


.image_box_horizontal img{
width:100%;
margin:0 auto;
height:auto;
}


.image_box_horizontal p{
color:#333;
font-size:95%;
padding:0;
margin:0;
text-align:center;
}



.image_box_vertical{
position: relative;
top:-100px;
/*left:33%;*/
width:38%;
height:auto;
margin:0 auto;
}


.image_box_vertical img{
width:100%;
height:auto;
margin:0 auto;
}


.image_box_vertical p{
color:#333;
font-size:95%;
padding:0;
margin:0;
text-align:center;
}


.caption_box{
float:left;
width:100%;
padding-top:0;
}


.caption_box p{
font-family: verdana, arial, san-serif;
font-size:80%;
font-weight:normal;
color:#000;
padding-top:10px;
margin:0;
text-align:left;
line-height:1.5em;
}


.caption_box p a{
color:blue;
text-decoration: underline;
}



#x_box{
position:absolute;
top:10px;
left:93%;
}



/*..................................L A R G E   pre-pre tablet ....................................*/
/*..................................L A R G E   pre-pre tablet ....................................*/
/*..................................L A R G E   pre-pre tablet ....................................*/

@media screen and (max-width: 1200px) {

	
}


/*............................................pre - T A B L E T S ....................................*/


@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 850px) {

	.next a{
	top:400px;
	left:85%;
	font-size:500%;
	}

	.previous a{
	top:400px;
	left: 6%;
	font-size:500%;
	}	

	.image_box_horizontal{
	top:50px;
	position:relative;
	margin:0 auto;
	left:0;
	width:80%;
	}
	

	.image_box_square{
	top:150px;
	left:27%;
	width:50%;
	height:auto;
	}
	
	.image_box_vertical{
	top:20px;
	position:relative;
	margin:0 auto;
	left:0;
	width:65%;
	}
	
	.image_box_vertical img{
	max-width:100%;
	}

	#x_box{
	top:100px;
	left:93%;
	}
	
	
	
	
}

@media screen and (max-width: 700px) {	


	
}

	
@media screen and (max-width: 600px) {

	.next a{
	left:82%;
	}
}

/*............................................T A B L E T S ....................................*/
/*............................................T A B L E T S ....................................*/
/*............................................T A B L E T S ....................................*/


@media screen and (max-width: 700px) {

	

	#wrapper {
	max-width: 860px;
 	}
	
	nav{
	position:static;
	margin-top:3em;
	width:40px;
	line-height:2.5em;
	}
	
	
	#content_box{
	margin:2em .5em 2em 2em;
	width:90%;
	}
	
	#title{
	display:none;
	}
	
	
	img{
	max-width:100%;
	height:auto;
	}

}


/*............................................ P H O N E S ......................................*/
/*............................................ P H O N E S ......................................*/
/*............................................ P H O N E S ......................................*/


@media all and (max-width: 480px) {

	#wrapper {
	width:99%;
	}

	.next a{
	top:160px;
	left:77%;
	color:#000;
	}

	.previous a{
	top:160px;
	left:6%;
	color:#000;

	}
	
	#x_box{
	top:75px;
	left:93%;
	}
	
	.image_box_horizontal{
	position:relative;
	top:120px;
	width:98%;
	left:0;
	margin:0 auto;
	}
	
	.image_box_vertical{
	position:relative;
	top:90px;
	left:0;
	width:90%;
	margin:0 auto;
	}
	
	
	
	.caption_box{
	width:90%;
	}
	


	
 	
 	
 	
}