/*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browser Upgrade Prompt
   ========================================================================== */

.browserupgrade {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}


/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

.clear {clear:both;}

.rounded {  -webkit-border-radius: 10px; 
		  	    -moz-border-radius: 10px; 
		      border-radius: 10px;     position: relative;
    }

.shadow { box-shadow: rgba(0,0,0,0.6) 1px 1px 1px;
-webkit-box-shadow: rgba(0,0,0,0.6) 1px 1px 1px;
-moz-box-shadow: rgba(0,0,0,0.6) 1px 1px 1px;   
    position: relative;
   }

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

 body {
background-color: #000;    color: #999999;
    font-style:normal; font-variant:normal; font-weight:normal;     
        font: 12px/20px Helvetica, Helvetica Neue, Arial;
    
   margin: 0px 5px;
}


a, a:visited { color: #fff; text-decoration: none; }

p { margin: 3px 0px; }

.btn-more, .btn-less {
  box-sizing: border-box;
  position: relative;
  display: block;
  padding: 10px 0;
  
  -webkit-border-radius: 4px; 
		  	    -moz-border-radius: 4px; 
		      border-radius: 4px; 
  color: #fff;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font: 300 16px/18px 'Nunito', sans-serif;
  margin: 5px auto 15px auto;
  width: 720px;
  max-width: 95%;
 
  overflow: visible;
  background-color:rgba(19,19,19,1);

		 
		 -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

}

.btn-more:after {
  position: absolute;
  bottom: -14px;
  left: 50%;
  margin-left: -12px;
  width: 16px;
  height: 14px;
  background: url('https://www.myamateurwebsite.com/hub5/images/bg-btn-more-white.png') no-repeat 0 0;
  content: ""
}


.btn-less:before {
  position: absolute;
  top: -14px;
  left: 50%;
  margin-left: -12px;
  width: 16px;
  height: 14px;
  background: url('https://www.myamateurwebsite.com/hub5/images/bg-btn-more-white.png') no-repeat 0 0;
  content: ""
}







#wrap {	padding:0px; width: 100%; max-width: 1000px;
   margin: 0px auto;
   
}



		
		
nav { display: block;
			
			margin:0px;
		
			width: 100%;
				margin-bottom: 8px;
				padding: 1px; 
				font-size: 14px;}
			
			

.drop { display: inline-block; margin-left: 8px; vertical-align: middle; }



#menu {
	list-style-type:none;
	margin:0;
	padding:0;
	width: 100%;

	}


#menu { 	
		     -webkit-flex-wrap: wrap;
		    flex-wrap: wrap; 
		    align-items: stretch; 
		    line-height: 39px;
			
			position: static;
		display: none;
		}
	

#menu li { display: inline-block; 
		  flex: 0 1 auto;
		  margin-right: 0px;
		  width: 100%;
		  text-align: left;
		  }
	

#menu li.home a span { font-size:20px !Important; }




/*Style for menu links*/
#menu li a {
	display:block;
	
	height: 39px;
	
	line-height: 39px;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
			text-decoration: none;
	/* border-right: 1px solid #000; */
	padding: 0 10px;
}

#menu li.home a { padding: 0 5px; }

#menu li {
		margin-bottom: 0px;
		 
		 border-top: 1px solid #999;
	}



#menu li#moremenu a { border-right: 0px; }


/*Hover state for top level links*/


/*Display the dropdown on hover*/
#menu ul li a:hover + .hidden, .hidden:hover, #menu li:hover ul {
	display: block;
}

/*Style 'show menu' label button and hide it by default*/
.show-menu {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-decoration: none;
	color: #fff;
	background-image:url('../../images/menu/bar5.png'); background-repeat:repeat-x;		background-size: auto 40px; 
	text-align: center;
	padding: 10px 0;
	display: block;
	font-size: 18px;
}

/*Hide checkbox*/

input[type=checkbox]{ 

     display: none; 
}

	
		
/* ------------------ Top Nav Menu ------------------ */

#nav_wrapper { z-index: 999; }

#topnav { 
			background-color: #000; border-bottom: 1px solid #fff;
			 text-align: left; 
			line-height: 25px;
			padding: 5px 5px 5px 10px;
			}
			
#topnav a.menuline { color: #fff; font-size: 15px;
					margin-right: 10px; line-height: 20px;
					text-decoration: underline;
					font-weight: normal;
					text-shadow:2px 2px 0 rgba(0,0,0, 0.7);  }			
		
		

		
#topnav span.nxt { font-size:14px;  margin-right:10px; color:#fff; }		
		
#joinbutton2 { display: none; }		
		
		
		
		
/* ------------------  wrappers ----------------------------- */

#facepic_wrapper { width: 100%; display: block;  }
#content_wrapper, #updates_wrapper, #moresites_wrapper, #freepics_wrapper, #bottom, #join_wrapper, #banners_wrapper, #links_wrapper {width: 100%; display: block; overflow: hidden; padding: 15px 5px; }	
#samplepics_wrapper { width: 100%;  overflow: hidden; text-align: center; }
#update_wrapper { text-align: left; font-size: 14px; line-height: 18px; }



/*----------------safe for work stuff ------------------- */

.sfw #freepics_wrapper {display: none; }
.sfw .header { display: none; }


/*------------------------ video player ------------------------------- */

#player_wrapper {  clear: both; padding: 10px; margin: 10px auto; text-align:center; 
				position: relative;
				/* max-width: 600px; */
				background-color:#fff; }
				
				
#player_wrapper img.thumb { max-width: 95%; }

#player_wrapper span { width: 100%;
  height: 100%;
  position: absolute;
  background: url('../../hub5/play-button-overlay.png') no-repeat 50% 50%;
  
  
}






		
		.update-row { width: auto; display: block; }
		
		
.flex-container { display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;



     -webkit-flex-wrap: wrap;
    flex-wrap: wrap; 
    align-items: stretch; 
    /* justify-content: space-around; */
     }		
		
		
#freepics_wrapper .flex-container { justify-content: space-around;
									align-items: center;  }		
		
		
		
#facepic_wrapper img.mainpic { width: 97%;  margin: 4px; max-width: 230px; }	

#facepic_wrapper p { font-size: 16px; line-height: 1.3em; }

#welcome_text p { margin: 15px 3px; font-size: 16px; line-height: 1.4; } 

#content_wrapper p { margin: 15px 5px; }

#content_wrapper .date, #update_wrapper .date { float: right; 
						text-align: right; 
						padding: 2px 5px 5px 5px;
						font-size: 13px;
						font-weight: bold; }



p.smalltext { margin: 5px !important;
				font-size: 12px; }


/* -------------- layout for update tables --------------------------- */


.update-cell-wrapper {display: inline-block;
					box-sizing: border-box;
					padding: 1px;
					margin-bottom: 1px;
					width: 100%;
					}

.update-cell {  height: 100%; text-align: center;  
                 padding: 2px;           
                 -webkit-border-radius: 6px;  -moz-border-radius: 6px;  border-radius: 6px;   
                 overflow: hidden; 	  
                 display: inline-block;
                 box-sizing: border-box;
                 display: table-cell;
                }

.thumbwrapper {  display: inline-block;
									/*	max-width: 320px; */
										/* min-width: 120px; height: 120px; */
										 margin: 4px auto;
										position: relative; 
										overflow: hidden;
																				clear: both;
										
										}
										
.thumbwrapper img.thumb { max-width: 98%; height: auto;
						  /* max-height: 390px; */
						   }	

 img.updatetype { position: absolute; left: -1px; top: -1px; z-index: 10; }
 
 .thumbwrapper img.hd_logo,  .thumbwrapper img.hdicon { position: absolute; right: 5px; top: 5px; z-index: 10; }
 
 .thumbwrapper .timestamp { position: absolute; left: 5px; bottom: 5px; z-index: 10;
 							color: #F6F6F6;
							border-radius: 2px;
							text-align: center;
							font-weight: bold;
							padding: 2px 4px;
							background: #4c4c4c;
							font-size: 11px;
							line-height: 13px;
							height: 12px; }
 
 
 
 .update-cell .thumbwrapper .type { position: absolute;
							     top: 1px;
							     left: 2px;
							     z-index: 100;
							     display: block;
							     padding: 2px 5px;
							     color: #fff;
							     font-size: 11px;
							     font-weight: 600;
							     border-radius: 0 0 5px 0;
							     box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.6);
							     border-top: 0px !Important;
							     border-left: 0px !Important; 
							     text-transform: uppercase;}
							     
							     



.update-cell .thumbwrapper .pics { background-color: rgba(50,196,21,0.9); border: 1px solid #11a800; }

.update-cell .thumbwrapper .video { background-color: rgba(211,34,34,0.9);  border: 1px solid #950000;}
 
 
 
 
  .update-cell p.text { font-size: 13px; line-height: 1.2em;   }
  
  .update-cell p.date { font-size: 11px; line-height: 13px; margin: 0px;  }
  
.update-cell p { margin: 5px; }



/*------------------- layout for update lists -------------------------- */

.list-cell { width: 98% !Important; position: relative; }

.list-cell .thumbwrapper { display: inline-block; clear: none; margin: 5px; }

.list-cell p.date { text-align: right; margin-bottom: 10px; }

.list-cell p.title { font-size: 15px; }

.list-cell p.text { font-size: 14px;  }






/* ------------------------- tag search -------------------------------- */

#tagsearch { height: 120px; overflow: hidden; text-align: left; background-color: #fff; margin: 5px;
			padding: 5px 5px 10px 5px; }
#tagsearch p { margin: 4px; font-size: 11.5px; }

#tagsearch p a { float: left;
				color: #FFF;
				background-color: #131313;
				padding: 4px 10px;
				font-weight: normal;
				border-radius: 3px;
				margin: 3px 10px 3px 0px; }
 
#lesstags { display: none; }
 
/* ------------------------- tag display on update page -------------------------------- */ 

p.tags { font-size: 14px; line-height: 20px; }
p.tags a { text-decoration: underline; margin-right: 10px; }
 
 
/* ---------------------- more sites ------------------------------------------ */



 /* .item {
    display: inline-block;
    
    padding: 8px;
    margin: 5px 3px;
    box-sizing: border-box;
    border-radius: 3px;
    text-align: center;

     
     flex: 1 1 48%;
     webit-flex: 1 1 48%;     
     ms-flex: 1 1 48%;     
     
    color: #000;
    overflow: hidden;
   flex-grow: auto;
    
} */
.item { display: inline-block;
		box-sizing: border-box;
				padding: 8px; 
		
		 overflow: hidden;
		
		 } 





.item img { clear: both; margin: 4px 0px; max-width: 100%;   }

#gallery .item { flex: 1 1 auto; width: 48%; }

#freepics_wrapper .item { flex: 0 1 48%; /* max-width: 170px; */
		 }

#moresites_wrapper .item { padding: 5px; color: #000; flex: 1 1 auto; }
#moresites_wrapper .item .item-content { padding: 3px; box-sizing: border-box; height: 100%; 
										-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
										
#moresites_wrapper .item .text-wrapper { height: 50px; }										
										
#moresites_wrapper .item p { font-size: 12px; line-height: 14px; }
#moresites_wrapper .item p.title { margin: 0px; font-size: 13px; }
#moresites_wrapper .item a.sitelink { text-decoration: underline;  }
#moresites_wrapper .item img { max-width: 200px; width: 98%; }
#samplepics_wrapper .item { flex: 1 1 auto;}
#samplepics_wrapper .item img { max-width: 99%; }
	
/*----------------- social stuff --------------------------------- */
.social-bar { float: right; }

img.flag { height: 22px; margin: 2px 3px; border:1px solid #000; -webkit-border-radius: 3px;
   			 -moz-border-radius: 3px;
    		border-radius: 3px;  }		


		
.social-button { 
			-webkit-border-radius: 3px;
   			 -moz-border-radius: 3px;
    		border-radius: 3px;
			box-sizing: border-box;; 
			border:1px solid #000; 
			display: inline-block;
			color:#000;
			width: 25px; 
			height: 25px;
			margin: 0px 3px;
			background-image: url('../images/sprite.png');
			vertical-align: middle;
	}		
		
.button-tweet {background-position: 0px -1px;}		
		
.button-tumblr {background-position: -25px -1px;}				
		
.button-share {	background-position: -100px -1px; width: 65px; }	
		
.button-more { background-position: 	-175px -1px; width: 65px; display: inline-block; }

.social-bar .flag, .social-bar .button-tweet, .social-bar .button-tumblr, .social-bar .button-share { display: none; }
		

/*---------------- insert stuff -------------------------------- */

#insert { min-height:100px; text-align: left; padding: 10px; display: block; background-color:#000; border:2px solid #fff; }

#insert ul { list-style: none;
			margin: 0px; padding: 0px;
			font-size: 15px; }
			
#insert ul li { float: left; display: block; 
				width: 50%; 
				padding: 3px;
				box-sizing:border-box;
				height: 30px;
				line-height: 30px; }	
				
#insert h2 { font-size: 16px;
			color: #ffff00;
			margin-bottom: 4px;
				
			}
		
		
/* #insert ul li .social-button { width: 75px;	background-image: url('../images/sharebuttons.png'); }

#insert ul li .button-tweet { background-position: 0px -1px;}
#insert ul li .button-tweet-follow { background-position: -75px -1px;}
#insert ul li .button-tumblr { background-position: -150px -1px;}
#insert ul li .button-tumblr-follow { background-position: -225px -1px;} */
		
.close { float: right; color:#ffff00; text-decoration: underline; font-size: 13px; }		
		
		
		
		
/*-------------- LINKLIST --------------------------- */
.linklist { list-style: none;
			margin: 0px 0px 25px 5px; padding: 0px;
			font-size: 12px; }
			
.linklist li { float: left; display: block; 
				width: 100%; 
				overflow: hidden; 
				padding: 3px;
				box-sizing:border-box; }			

.linklist li a {display: block; padding: 2px 5px;  text-align: left; height:50px; border: 1px dotted #908f8f; color:#bdbdbd;  line-height: 14px; text-decoration: none; overflow:hidden; 	 }


.linklist li a span.title { font-weight: bold; margin-bottom: 4px; text-decoration: underline; font-size: 1.1em; color: #fdbb05;  }

.linklist li a p { margin: 0px; width: 100%; padding: 5px; }		
		
#bottom .linklist li a { text-align: center; height: 20px; line-height: 20px;  }	

#bottom .linklist li a span.title { color: #ffff00; }		

/*======================== pagination stuff ===================================== */


ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 5px 0px;
}

ul.pagination li {display: inline;}

ul.pagination li a {
    color: white;
    float: left;
    padding: 8px 8px;
    text-decoration: none;
    /* border-radius: 5px; */
     border: 1px solid #9c9c9c; 
     background-color: #505050;
}

ul.pagination li a.active {
    background: #ffc003; /* Old browsers */
background: -moz-linear-gradient(top,  #ffc003 0%, #feae01 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffc003 0%,#feae01 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffc003 0%,#feae01 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc003', endColorstr='#feae01',GradientType=0 ); /* IE6-9 */

    color: black;
   /*  border-radius: 5px; */
}

ul.pagination li a:hover:not(.active) {background-color: #ddd; color:#000; }

.pagination li:first-child a, .pagination li:nth-child(2) a {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.pagination li:last-child a, .pagination li:nth-last-child(2) a  {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
   
}

.pagination li a.endstop { margin: 0 2px; }

/* .col4, .col5, .col6, .col7 { display: none !Important; } */

    .previous, .next, .remove
    {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: none;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
     
      font-variant: normal;
      text-transform: none;
     
     
      line-height: 1em;
     
      margin-left: .2em;
     
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     

    }

		
/*--------------- members only popup ---------------------------- */


#members-only-popup, #adults-only-popup {
	 position: fixed;
  	top: 50%;
  	left: 50%;
	background-color:#fff;
	border-radius: 8px;
	text-align: center;
	color: #666;
	display: none;
	padding: 5px;
	font-size: 15px;
	z-index: 105;
	line-height: 20px;
}


#members-only-popup {
  	margin-top: -75px;
  	margin-left: -155px;
     width: 310px;
     height: 150px;
	
		}

#adults-only-popup {
	width: 450px;
	height: 250px;
	margin-top: -125px;
	margin-left: -225px;
		
}





		
#members-only-popup p, #adults-only-popup p { margin: 10px 0px; }		

#members-only-popup p.title, #adults-only-popup p.title { font-weight: 600;
							 font-size: 16px;
							 margin: 0px 0px 20px 0px;
							 text-align: left; }

#adults-only-popup a { color:#0000ff !important; }

#members-only-popup .close, #adults-only-popup .close { float: right; font-size: 12px; color:#000; }

#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.8); /* Black background with opacity */
    z-index: 100; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}				
		
/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */
   
@media only screen and (min-width: 450px) {

	#moresites_wrapper .item {    width: 33%; }
	#moresites_wrapper .item .text-wrapper { height: 100px; }	
	#freepics_wrapper .item {   flex: 1 1 31%; }	
	#samplepics_wrapper .item { width: 48%; }
	.linklist li { width: 50%; }
}  
  
  
   
@media only screen and (min-width: 580px) {


	#gallery .item { width: 31%; }
	#freepics_wrapper	.item { width: 23%;  flex: 1 1 23%; }	
	
	nav { font-size: 14px; }



}



@media only screen and (min-width: 600px) {
	
	#facepic_wrapper { width: 25%; max-width: 210px; -webkit-flex: 1; flex: 1; order: 2 }
	#content_wrapper { -webkit-flex: 2; flex: 2; }
	nav { font-size: 14px; }
	#menu {display: -webkit-flex; display: flex;   }
	#menu li { width: auto; }
	.show-menu { display: none; }
		#insert ul li { width: 33%; }
	.update-cell-wrapper {  width: 50%;   }
	.social-bar .flag, .social-bar .button-tweet, .social-bar .button-tumblr, .social-bar .button-share { display: inline-block; }
	.button-more { display: none; }
		 .linklist li { width: 33%; }
		#moresites_wrapper .item .text-wrapper { height: 80px; }
		#samplepics_wrapper .item { width: 24%; }
		#gallery .item { width: 24%; }
												
}

@media only screen and (min-width: 750px) {
	#moresites_wrapper	.item { width: 25%;  }
	.update-cell-wrapper {  width: 33%;   }
 .update-cell p.text { font-size: 13px; line-height: 16px;}
	
	
	#freepics_wrapper .item {    flex: 1 1 14%;			 }
	/* #samplepics_wrapper .item {     flex: 1 1 23; width: 23%;			 } */
	
	nav { font-size: 15px; }
	/* .linklist li { width: 25%; } */

}

@media only screen and (min-width: 1000px) {
	#gallery .item { width: 20%; }




	}