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;
}


input[type="checkbox"] {
    display: none;
}

.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;         }

.shadow { box-shadow: rgba(0,0,0,0.75) 2px 2px 0px 0px;      }
   
.white { background-color: #fff; margin: 5px 5px; }  

.rounded_small { -webkit-border-radius: 5px; 
		  	    -moz-border-radius: 5px; 
		      border-radius: 5px; }
		      
.flex-container {   display: -webkit-box; 
 					display: -moz-box;
 					display: -ms-flexbox;
  					display: -webkit-flex;
  					display: flex;

				     -webkit-flex-wrap: wrap;
				    flex-wrap: wrap; 
					
				    align-items: stretch; 
					    webkit-align-items: stretch;
   					 justify-content: space-around; 
     }
     
		
.anim {    transition: all .5s; }
.right { float: right; margin-right: 0px; }
.left { float: left; margin-left: 5px; }
      
.bigtext { font-size: 20px; line-height: 26px; }      
      
/*-------------------------- custom styles ------------------------------------------ */		      
	
.text-color-1 {
    color: #fff;
}

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

body a, a:visited { color: #ffff00; text-decoration: underline; }

p { margin: 2px 0px; }

#header h1 {
    font-weight: 700;
    font-style: italic;
    font-size: 32px;
    line-height: 30px;
    text-align: center;
    margin: 0px;
}


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


.wrapper {
	padding: 5px 3px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	position: relative;
	margin: 10px 5px;

}





/*--------------------------- popup stuff -------------------------------- */

#overlay {
    position: fixed;
    display: none;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.7);
    z-index: 199;
    cursor: pointer;
}



.popup {    position: fixed;
  			top: 50%;
    		left: 50%;
			/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffc6+0,ffff88+100 */
background: rgb(255,255,198); /* Old browsers */
background: -moz-linear-gradient(top, rgba(255,255,198,1) 0%, rgba(255,255,136,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,198,1) 0%,rgba(255,255,136,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,198,1) 0%,rgba(255,255,136,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffc6', endColorstr='#ffff88',GradientType=0 ); /* IE6-9 */
			
   			 border-radius: 10px;
    		text-align: center;
    		color: #666;
    		display: none;
   			 padding: 0px;
    		font-size: 15px;
    		z-index: 200;
    		line-height: 20px;
    		box-shadow: rgba(0,0,0,0.75) 2px 2px 0px 0px;  
    		border: 3px solid #000;
			overflow: hidden;
	}



.popup .titlebar { 				/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
background: rgb(125,126,125); /* Old browsers */
background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(14,14,14,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(14,14,14,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-9 */
					color: #fff;
					height: 35px; line-height: 35px;
					font-weight: bold;
					margin:0px;
					text-align: left;
					padding-left: 5px; }




.popup .close {
    float: right;
font-size: 20px;
text-decoration: none;
margin-right: 5px;
font-weight: 700;
color:#fff;
cursor:pointer;
    
}

.popup .pop_content { padding: 10px 8px; text-align: center;					 }


.popup a { color: #0000ff; }

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


.popup p {
    margin: 10px 0px;
}


.popup ul { list-style-type: none;
   					 margin: 0;
   					 padding: 0;
    			    width: 100%;
    			    display: block;
    			    line-height: 30px; }


.popup ul li { text-align: left; padding: 2px 0px; }

.popup ul li span { width: 110px;
					font-size: 14px;
					color: #0000ff;
					display: inline-block;
					border-bottom: 1px dashed; }










.rating-popup {

    margin-top: -150px;
    margin-left: -155px;
    width: 310px;
    height: 300px;
    display: block;
    
}





/*--------------- 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: 5;
	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; }


#members-only-popup a { color:#0000ff; }

#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.7); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}	


/*------------------------- header stuff ----------------------------------------- */

.sfw #header { display: none; }


#header { position: relative; background-repeat:no-repeat;  
		background-size: 100% auto;
		padding-bottom: 52.5%;
		padding-top: 0px; }

#header .logo {
    position: absolute;
    left: 10px;
    top: 10px;
    display: block;
    font-size: 46px;
    line-height: 40px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -.045em;
}


#header .rightbutton {
    position: absolute;
    top: 18px;
    right: 20px;
    font-size: 1.1em;
    line-height: 1.5em;
    font-weight: 700;
    color: #fff;
    display: none;
}



#header .rightbutton .login-button {
    cursor: pointer;
    display: block;
    line-height: 32px;
    text-decoration: none;
    padding: 0 15px;
}

#header .rightbutton .login-button i {
	font-size: 20px;
	margin-right: 10px;
	vertical-align: -2px;

}


.social a svg { font-size: 20px; margin: 0px 10px; color:#0000ff; 	 }






/*--------------------------- main menu stuff ------------------------------- */

/* -------------- top nav ----------------------- */

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

#topnav { position: static; top: 0px;  
			background-color: #1b1b1b; border-bottom: 1px solid #8e8e8e;
			 z-index: 999; text-align: left; 
			width: 100%;
			padding: 0px;
			margin: 0px;
			height: auto;
			line-height: 52px;
			 height: 50px; 
			 			}





#topnav #toplogo { float: left; margin: 2px 0px; 
					width: auto;
				height: 44px;
				max-width: 185px; }
					
					

.members #topnav #toplogo { margin: 0px 5px; 
							height: 49px; }					

#topnav nav { 			float: right; 
					   text-align: right;
					/*   height: 40px; */
						overflow: hidden;
						margin: 4px 0px 4px 0px; 
						background-color: #333;
						  -webkit-border-radius: 5px 0px 0px 5px; 
		  	    -moz-border-radius: 5px 0px 0px 5px; 
		      border-radius: 5px 0px 0px 5px;
		      border: 1px solid #606060;
				box-shadow: 2px 2px inset rgba(0,0,0,0.8);
				display: none;
						}
					   
					   
					   
					   
.members #topnav { line-height:50px; }
/* .members #topnav nav { margin: 14px 0px 4px 0px; }					    */
					   

#topnav nav ul {   list-style-type: none;
   					 margin: 0;
   					 padding: 0;
    			    width: 100%;
    			    display: block;
    			    line-height: 40px;
    			  
    			    }
	


#topnav nav ul li { padding: 0px 5px;
					float: left;
					font-size: 14px;
					text-align: center;
					
					border-right: 1px solid #606060;

				}


#topnav nav ul li:last-child { border: 0px; }



#topnav nav ul li a { color: #fff;
					  text-decoration: none;
					  text-transform: uppercase;
					  font-family: 'Oswald', sans-serif;
					  display: block;
					  padding: 0px 5px;
					  }

#topnav nav ul li:hover { background-color: #bd0564; }


/*------------------------ topnav menu button --------------------------*/

 .menubutton { float: right;
					margin: 4px 0px 4px 0px;
					/* background-color: #333; 
						 -webkit-border-radius: 5px; 
		  	    		-moz-border-radius: 5px; 
		     			 border-radius: 5px;
		      			border: 1px solid #606060; */
		      width: 40px;
		      text-align: center;
		      line-height: 22px;
		      padding: 5px;
		      cursor: pointer; }
		      
		      
#topnav .menubutton svg { font-size: 22px; font-weight: 600; margin-top: 4px; }		      

.members #topnav .menubutton {margin: 0px; }

.members #topnav .menubutton svg { margin-top: 7px; }

/* =================== breadcrumbs ================================== */			
			
#breadcrumbs { line-height: 21px; padding: 8px 5px;	
				border: 1px solid #000;
				text-align: left;
				margin:3px 4px; color:#000; }		
			
		
		
		

		
#breadcrumbs ol { list-style-type: none;
				text-align: left;
				font-size: 110%; 
				margin: 0px; padding: 0px 0px 0px 0px; }
				
				
#breadcrumbs ol li { display: inline; padding: 4px 5px; font-weight:500; }
 
#breadcrumbs ol li a { color:#0000ff; }	

#breadcrumbs ol li h1, #breadcrumbs ol li h2 { font-size: 110%; 
											margin: 0px; 
											display: inline;
											font-weight: 500; }
	
#breadcrumbs ol svg.fa-angle-right { font-size: 120%; }				  

/*------------- nav stuff ---------------------------- */						  
						  
.sitenav	 { display: block;
		margin:0px 0px 0px 0px;		
				padding: 0px; 
				font-size: 14px;}						  
						  
						  
						  
						  


#menu {
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 45px;
    width: 100%;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	align-items: stretch;
	height: auto;
	position: static;
	/* display: none; */
}	

#menu li {
    margin-bottom: 0px;
     float: left;
    padding: 0px 10px;
    height: 100%;
}
					  
#menu li.desktop { display: none; }

						  
#menu li a {
    display: block;
    
    /* height: 44px; */
    text-align: center;
    line-height: 44px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    text-decoration: none;
    font-size: 130%;
}						  
						  
						  
#menu li a svg { font-size: 20px; margin-right: 10px; }	

#menu li.menu_button { padding: 0px 0px 0px 5px; font-size: 15px; 
						text-transform: uppercase;
						line-height: 15px; }


#menu #joinlink, #menu li#loginlink { float: right; padding: 0px 5px; }

#menu li#joinlink a.join-link, #menu li#loginlink a.join-link { font-size: 14px; 
								font-weight: 700;
								line-height: 32px;
								margin: 5px 0px;
								padding: 0px 10px; }
								
								


						
#menu li.menu_icon { padding-top: 2px;  }

#menu li .desktop { display: none; }
					  
#menu li.menu_home { max-width: 50px; }					  
					  
 /*-------------------------------- The side navigation menu------------------------------------------------ */
 
.sidenav { height: 100%; 
   		 width: 190px; 
   		 position: fixed; 
    		z-index: 1; 
   		 top: 0; 
			overflow-x: hidden; 
    		padding-top: 10px; 
    		transition: 0.5s; 
    		text-align: left;
    		
    		visibility: hidden;
		}
 
 
.sidenav_left { left: 0;
				background-color: #111; 
				transform: translate(-170px); }
 
 
 
 
.sidenav_right { right: -170px; 
				background-color: #1b1b1b; 
				
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
			}
 
 
 
.opened_right { visibility: visible;
				right: 0; }
 
 
.slided_left {   transform: translate(-190px); 
			 transition: all .5s; }
 
 
 

.opened_left { transform: translate(0);
			visibility: visible; }

.slided_right { transform: translate(190px); 
			 transition: all .5s; }


.sidenav ul li { padding: 0px;
				 display: block;
				 border-top: 1px dotted #c9c9c9;
				 margin: 0px 15px 0px 15px; }
				 
				 
.sidenav ul li a { text-decoration: none;
    font-size: 14px;
    color: #f3f3f3;
    display: block;
    transition: 0.3s;
    text-align: left;
    text-transform: uppercase;
    padding: 8px; }


/* When you mouse over the navigation links, change their color */
.sidenav_right ul li a:hover {
    color: #f1f1f1;
    background-color:#e81a86;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 28px;
   text-decoration: none;
   color: #ffff00;
   }


.sidenav_right .toplogo { width: 100%; margin: 15px auto 5px auto; }

.sidenav_right ul li:last-child { border-bottom: 1px dotted #c9c9c9; }


.sfw #topnav .updates_link, .sfw #sidenav_right .updates_link { display: none; }

.sfw .about_me { display: none !important; }





/*-------------------------------- item stuff------------------------------------------ */


.item {
    display: inline-block;
    padding: 2px 1px;
   
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    float: left;
    position: relative;
}


.item .itemcontent {
    
   
    margin: 1px;
    height: 100%;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    padding: 2px 4px;
    position: relative;
    text-align: center;
	border-radius: 0.5rem;
}


.item .thumbwrapper {
    position: relative;
    display: inline-block;
    margin: 4px auto;
       padding: 4px;
       max-width: 250px;
  
}

.moresites .item .thumbwrapper { max-width: 100%; }

.item .thumbwrapper .updatetype, .update-cell .updatetype, .itemcontent .updatetype {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}


.thumbwrapper .updatetypeicon {
				position: absolute;
    			left: 4px;
    			top: 4px;
   				 z-index: 10;
   				 text-align: center;
   				 background-color:rgba(255,255,255,0.5);
				}





.thumbwrapper .updatetypeicon svg {
 		font-size: 16px;
		color: #000;
		margin: 0px 2px;
		line-height: 16px;

}





.item .thumbwrapper img.thumb {
    width: 100%;
}



.item .title { font-size: 1em; 
				font-weight: bold;
				line-height: 1.55em;
				margin: 2px 0px !important;
				text-decoration: none !important;
				text-overflow: ellipsis;

 
  overflow: hidden;
  white-space: nowrap;}
				

.tube-updates .item {
    width: 100%;
    flex: 0 1 auto;
}

.tube-updates .item .itemcontent, .moresites .item .itemcontent  { font-size: 0.9rem !important;  line-height: 1.2em !important;  }

.tube-updates .item .itemcontent .date { font-size: 0.8rem; }

.moresites .flex-container { justify-content: start;}

.moresites .item .itemcontent p { color: #515151 !important; font-size: 0.85rem; }


.line-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}




.tube-updates .item .thumbwrapper { overflow: hidden; max-height: 190px; }

.tube-updates .item .text {    font-size: 13px !important;
    						    text-align: center;
  								  margin: 2px 0px;
   								 line-height: 1.3em !important;
    							
   								 text-overflow: ellipsis;
    							
   								 
   								 font-style: italic;
								  display: -webkit-box;
  									-webkit-line-clamp: 3;
  									-webkit-box-orient: vertical;  
  									overflow: hidden;
}



.sfw .tube-updates .item .text {  text-overflow: ellipsis;  overflow: hidden;  white-space: nowrap; height: auto; margin: 0 0 0.5rem 0 !important; }
.sfw .tube-updates .item .date { font-size: 0.8rem !important; margin: 0.25rem auto !important; line-height: 0.9rem !important;}
.sfw #content_wrapper #text_wrapper .tube-updates .item h3 { font-size: 0.9rem; font-weight: bold; margin: 0 auto 0.5rem auto; }


.moresites { margin: 0px 5px 20px 5px; }


.moresites .item { width: 50%;
					flex: 0 1 auto; }
					
					
					
					
					
					
/*------------------------------ single update stuff ------------------------------- */


.update-cell {
    text-align: center;
    margin: 5px;
    font-family: Arial;
    font-size: 14px;
    overflow: hidden;
    padding: 5px;
    box-sizing: border-box;
    position: relative;
    background-color: #fff;
    color: #000;
    border: 1px solid #000;
     box-shadow: rgba(0,0,0,0.6) 2px 2px 1px;
    -webkit-box-shadow: rgba(0,0,0,0.6) 2px 2px 1px;
    -moz-box-shadow: rgba(0,0,0,0.6) 2px 2px 1px;
    -o-box-shadow: rgba(0,0,0,0.6) 2px 2px 1px;
}


.item .update-cell  .date {
    float: right;
    text-align: right;
    padding-right: 2px;
    font-size: 0.9em;
}

.update-cell .flex-container { align-items: center; 
								margin: 8px 0px;
								justify-content: space-around;}

.update-cell .flex-container  .landscape { max-width: 170px; margin: 5px; }

.update-cell .flex-container  .portrait { max-width: 180px; margin: 5px; }



.update-cell .updatetype,  .itemcontent .updatetype { left: -1px; top: -1px; }

.update-cell .smalltext { margin: 15px 5px 8px 5px; font-size: 12px; }

.update-cell h1 { font-size: 1.2em; 
				font-weight: bold;
				line-height: 1.2em;
				margin: 10px 0px; }
				
				
.update-cell h1 svg {
    font-size: 1.8em;
    margin-right: 10px;
    vertical-align: -0.25em;
    color: #000;
}				

.update-cell a, .update-cell a:visited { color: #0000ff; }

.update-cell a.catlink { text-decoration: underline; margin-right: 10px; }






#update-wrapper .item { width: 100%; }



.tacicon {
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(https://www.tacamateurs2.com/hub5/members/images/icons.png) 0 0 no-repeat;
        background-position-x: 0px;
        background-position-y: 0px;
    margin: 10px 10px;
    padding: 0px;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    float: right;
}

.members .update-cell .tacicon { margin: 0px 10px; }

.members .tube-updates .item .itemcontent .tacicon { margin: 2px 5px; }



.tacicon-heart {
    background-position: -20px 0px;
}

.tacicon-heart-off {
    background-position: -80px 0px;
}


.tacicon-email { background-position: 0px 0px; }

.tacicon-star { background-position: -40px 0px; }
.tacicon-quote { background-position: -60px 0px; }			

.tacicon-star-off { background-position: -100px 0px; }





.item .playbar {
    margin: 5px auto;
    text-align: center;
    padding: 8px 5px;
    max-width: 400px;
    border: 1px solid #bababa;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: rgba(0,0,0,0.8) 1px 1px 0px;
    -webkit-box-shadow: rgba(0,0,0,0.8) 1px 1px 0px;
    -moz-box-shadow: rgba(0,0,0,0.8) 1px 1px 0px;
    -o-box-shadow: rgba(0,0,0,0.8) 1px 1px 0px;
    font-size: 1em;
    display: inline-block;
    background-color: #371b64;
}






.item .playbar a.quick:first-child {
    border-left: 0px;
}
.item .playbar a.quick {
    display: inline-block;
    flex: 1 1 auto;
    color: #fff !important;
    border-left: 1px solid #999;
    text-decoration: none !important;
    padding: 0px 5px;
    font-size: 12px;
}

.item .playbar a.quick svg, .item .morelike-button span, .btn-small svg {
    margin-right: 8px;
    font-size: 13px;
}



.joinlink svg { font-size: 1.2em;
    		margin-right: 10px; 
    		}


#video-buttons { max-width: 100%; line-height: 1.4em; margin: 10px 0px 20px 0px; }

.members #video-buttons .quick { color: #0000ff !important; }

/*-------------------------------- list view stuff --------------------------------------------- */

.list-updates .item { width: 100%; font-size: 15px; line-height: 18px;}

.list-updates .item .flex-container {
    align-items: center;
    margin-bottom: 5px;
}



.list-updates .item .landscape {
    max-width: 180px;
}

.list-updates .item .portrait {
    max-width: 160px;
}

.list-updates .item .tacicon { margin: 0px 10px; }

.list-updates .item p { margin: 4px 0px; }

.list-updates .item .itemcontent .date {
    float: right;
    text-align: right;
    padding-right: 2px;
    font-size: 0.9em;
}


/*----------------------------- members view options stuff ---------------------------------------- */
.members ul.viewoptions {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    display: flex;
     -webkit-flex-wrap: wrap;
	 flex-wrap: wrap; 
	 justify-content: space-around;

}

.members ul.viewoptions li {
    display: inline-block;
    flex: 1 1 auto;
    text-align: center;
    /* width: 48%; */
    box-sizing: border-box;
    margin: 10px 0px;
   }


.members ul.viewoptions li select { color:#000; }

.selectBox-dropdown-menu li a { color: #0000ff; }


.selectBox-label { color: #000; }


ul.viewoptions li#cats_wrapper { order: 3; width: 100%; }



/*------------------------------------ button stuff -------------------------------------- */

.button {
	display: inline-block;
	position: relative;
	margin: 10px;
	padding: 0 20px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 1px rgba(255,255,255,.22);
	font: bold 12px/25px Arial, sans-serif;

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

	-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	-moz-box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);
	box-shadow: 1px 1px 1px rgba(0,0,0,.29), inset 1px 1px 1px rgba(255,255,255,.44);


}

.big {
	padding: 10px 40px;
	/* padding-top: 10px;
	height: 55px; */
	text-transform: uppercase;
	font: bold 18px/24px Arial, sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0, .9);
}

.big span {
	display: block;
	text-transform: none;
	font: italic bold 1em/1.3em Arial, sans-serif;
	text-shadow: 1px 1px 1px rgba(0,0,0, .9);
}









/*-----------------------------------------------------------------------------------*/

h1.section_title { font-weight: 700;
					font-size: 150%;
					line-height: 150%;
					margin: 0px 0 20px 10px;
					text-align: left;
					}



h3.section_title {font-weight: 700;
					font-size: 100%;
					line-height: 130%;
					margin: 1.3em 10px 1.3em 10px;
					text-align: center;
					text-transform: uppercase;





				}


















/*-------------------------- frontpage wrappers ------------------------------------ */

#content_wrapper { justify-content: space-between; }

#content_wrapper .flex_wrapper { padding: 6px; text-align: center; 
								 margin: 0px; 
								 
								 
								 }				  
					  
					  
					  
#content_wrapper #facepic_wrapper { flex: 1 0 auto; width: 100%;		}
			  
#content_wrapper #text_wrapper { flex: 1 0 auto; width: 100%;
								padding: 10px 20px;
								font-size: 15px;	}		  

#content_wrapper #text_wrapper p { line-height: 1.4em !important; }
					  
					  
#content_wrapper #facepic_wrapper .mainpic { max-width: 600px;
											 width: 100%;
											 margin: 10px auto; }			


#content_wrapper #facepic_wrapper h1 {	font-size: 1.5em;
  margin: 0.25em auto 0.7em auto;
  font-weight: bold;}

					  
.sfw #content_wrapper #facepic_wrapper .mainpic { max-width: 210px; }
.sfw #content_wrapper #facepic_wrapper p.hubtext { font-size: 1.1rem !important;  line-height: 1.3 !important; margin-bottom: 1rem !important; }
.sfw #content_wrapper #facepic_wrapper a.shiny-button {
  margin: 10px auto 1.5rem auto !important;
  display: block !important;
	text-decoration: none;
}
a.shiny-button {
  display: inline-block;
  text-align: center;
  text-decoration: none;
  line-height: 1.3;
  font-weight: normal;
  font-family: sans-serif;
  color: #FFFFFF;
  font-size: 0.9rem;
  background-color: #68b12f;
	
	
	
  background: -webkit-gradient(linear, left top, left bottom, from(#5689d7), to(#1e4b91));
  background: -webkit-linear-gradient(top, #5689d7, #1e4b91);
  background: -moz-linear-gradient(top, #5689d7, #1e4b91);
  background: -ms-linear-gradient(top, #5689d7, #1e4b91);
  background: -o-linear-gradient(top, #5689d7, #1e4b91);
  background: linear-gradient(top, #5689d7, #1e4b91);
  border: 1px solid #1b1191;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: rgba(17,27,145,1.00);
  border-bottom: 1px solid #2A3799;
  border-radius: 7px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  -ms-border-radius: 12px;
  -o-border-radius: 12px;
  box-shadow: inset 0 1px 0 0 #9fd574, 2px 2px #000;
  -webkit-box-shadow: 0 1px 0 0 #9fd574 inset, 2px 2px #000;
  -moz-box-shadow: 0 1px 0 0 #9fd574 inset, 2px 2px #000;
  -ms-box-shadow: 0 1px 0 0 #9fd574 inset, 2px 2px #000;
  -o-box-shadow: 0 1px 0 0 #9fd574 inset, 2px 2px #000;
  color: white;
  text-shadow: 0 -1px 0 #396715;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 12px;
  padding-bottom: 12px;
  margin: 10px 5px;
  max-width: 400px;
	letter-spacing: 1px; }
					  
a.shiny-button strong {
  letter-spacing: 0px !important;
}
a.shiny-button strong {
  letter-spacing: 1px;
  font-size: 25px;
  text-transform: uppercase;
}					  
					  

a.shiny-button span { color: #f7d000;
  font-size: 130%;
  font-weight: bolder;
  text-shadow: none;}

#content_wrapper #text_wrapper h1 { font-size: 1.3em; line-height: 130%; font-weight: 700; margin: 1em 0px 1em 0px; font-family: 'Arimo', sans-serif; }					  
					  
					  

/*------------------ join options --------------------- */

.join-options { margin:0 20px; }

.join-options .item { width: 33%; text-align: center; }

.join-options .item img { margin: 0 auto; }












					  
.arrow {
  cursor: pointer;
  display: inline-block;  
  height: 30px;
  margin-left: 30px;
  margin-right: 30px;
  position: relative;
  line-height: 30px;
  padding-left: 1em;
  padding-right: 1em;
  background: white;
  color: #000;
  text-decoration: none !Important;
  font-size: 14px;
  font-weight: 700;
  
  margin: 20px 30px 20px 30px;
 }

.arrow:after {
   content: "";
  position: absolute;
  border-left: 15px solid white;

  border-bottom: 15px solid transparent;
  border-top: 15px solid transparent;
  height: 0px;
  width: 0px;
  margin-right: -15px;
  right: 0; 
}

.arrow:hover, .arrow:active {
  background: yellow;
  color: black !important;

}					  
				  
					  
.arrow:hover:after {

border-left: 15px solid yellow;



}					  
					  
					  
/*------------------------------ biglogo stuff ---------------------------------------- */

.biglogo {
    width: 100%;
    max-width: 600px;
    background-image: url('../images/siteboxsmall.webp');
    background-size: 100% auto;
    padding-bottom: 56%;
    background-repeat: no-repeat;
    margin: 10px auto;
    cursor: pointer;
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #b4b4b4;
}					  
					
.sfw .biglogo {
	background-image: url('../images/siteboxsmall-sfw.webp');
	
	
	
}
					  
					  
/*--------------------------------- joinlist stuff ----------------------------------------- */					  
					  
ul.joinlist {
    list-style-type: none;
    margin: 15px 0px;
    padding: 0px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; 
    justify-content: space-between;
}				  
					  
					  
ul.joinlist li {
    background-image: url("../images/redtick.png");
    background-repeat: no-repeat;
    background-position: 5px center;
    margin: 4px auto;
    padding: 12px 6px 12px 44px;
    text-align: left;
    font-weight: bold;
    font-size: 1.1em;
    font-style: italic;
    line-height: 1.2em;
   display: inline-block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    width: 96%;
	background-size: 30px 30px;
	min-height: 35px;
   }					  
					  
					  
/*------------------- bottom stuff ---------------------------------------- */

#bottom {
    width: 100%;
    padding: 5px;
    font-size: 12px;
}	  
					  
#bottom ul.toplist {
    margin: 10px 0px;
    text-align: center;
    list-style-type: none;
    padding: 0px;
    width: 100%;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: space-around;
}			  
					  
#bottom ul.toplist li {
    width: 97%;
    font-size: 12px;
    margin: 6px 0px;
    text-align: left;
    flex: 0 1 auto;
    color: #4d4d4d;
    font-weight: 600;
    display: inline-block;
   }					  
					  
					  
#bottom ul.toplist li a {
    display: block;
    padding: 7px 2px 2px 2px;
    text-align: center;
    height: 30px;
    border: 1px dotted #908f8f;
    line-height: 14px;
    text-decoration: underline;
}					  
					  
#bottom ul.toplist li.social a { line-height: 18px; }
#bottom ul.toplist li a svg { font-size: 18px; margin-right: 8px; }		



/*----------------------------------- pagination -------------------------------------- */

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


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

ul.pagination li {display: inline;}

ul.pagination li a {
    color: black;
    float: left;
    padding: 6px 7px;
    text-decoration: none;
    /* border-radius: 5px; */
     border: 1px solid #ddd; 
     background-color:#fff;
}

ul.pagination li a.active {
    background-color: #4CAF50;
    color: white;
   /*  border-radius: 5px; */
}

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

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

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

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

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



/*----------------------------------- members stuff----------------------------------------------*/

.comments_wrapper { text-align: left; line-height: 150%; }

.comments_wrapper p { font-size:15px; line-height: 1.2em; margin:0.5em; }

.members input[type="text"]	 { font-size: 15px;
									padding: 4px;
									border: 1px solid #c9c9c9;
									padding: 4px 8px;
									text-align: left;
									display: inline-block;
									max-width: 175px;
									width: 55%; }


.members .drop { font-size: 15px;
				 color: #000;
				 padding: 2px 5px;
				 width: 90px; }


.members .icon_wrapper { padding: 0px 10px; 
						 margin-right: 5px; 
						 height: 40px;
   						 line-height: 40px;

						 }


.members #content_wrapper { margin-bottom: 20px; }


.tac2-icon { display: inline-block; 
			margin: 0px 3px;
			width: 25px; }



#comment { width: 60%; max-width: 720px; color:#000; }

.btn-small {
    cursor: pointer;
    border-radius: 5px;
    padding: 4px 15px;
    color: #421C52;
    margin: 0px 10px;
    vertical-align: middle;
    text-decoration: none;
    font-weight: normal;
    text-transform: none;
    font-size: 15px;
    display: inline-block;
}
.button-shine {
    box-shadow: inset 1px 1px 0 0 #fff, rgba(0,0,0,0.6) 2px 2px;
    -webkit-box-shadow: 1px 1px 0 0 #fff inset, rgba(0,0,0,0.6) 2px 2px;
    -moz-box-shadow: 1px 1px 0 0 #fff inset, rgba(0,0,0,0.6) 2px 2px;
    -ms-box-shadow: 1px 1px 0 0 #fff inset, rgba(0,0,0,0.6) 2px 2px;
    -o-box-shadow: 1px 1px 0 0 #fff inset, rgba(0,0,0,0.6) 2px 2px;
}
.purple {
    background-color: #371b64;
    color: #fff !important;
   /* background-image: url('../images/menubar.png');
    background-repeat: repeat-x;
    background-size: auto 100%; */
}



.grey {
   /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,c4c4c4+100 */
background: rgb(234,234,234); /* Old browsers */
background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(196,196,196,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(196,196,196,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(234,234,234,1) 0%,rgba(196,196,196,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eaeaea', endColorstr='#c4c4c4',GradientType=0 ); /* IE6-9 */    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
   /* -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .75);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .75); */
    border: solid 1px #BBB;
}




/*------------- rating stuff --------------------------- */

.outer_rating, .inner_rating {

    background-image: url('/hub5/images/star_off.png');
    background-repeat: repeat-x;
    text-align: left;
    margin-right: 5px;
    display: inline-block ;
    background-size: auto 100%;
    vertical-align: middle;
    width: 100px;
    height: 20px;
    cursor:pointer;
}

.inner_rating { background-image: url('/hub5/images/star_red.png'); display:block; }

.outer_rating { margin-left: 10px; margin-right: 10px; }

.rate_me {     width: 125px;
			    height: 25px;
			    vertical-align: -5px; }


.rate_wrapper { line-height: 28px; }


.rate_button {	width: 	145px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #c9c9c9;
				margin: 0px 0px;
				display: inline-block;

				}



.rate_button:hover { box-shadow: 0px 0px; 
					background: none #fff; }




/*-------------------------- search form ---------------------------------- */

.searchpanel { display: none;	
				padding: 20px 5px;
				text-align: left;
				font-size: 18px; 
				border: 1px solid #c9c9c9;
				border-radius: 6px;
				margin: 15px 3px;
				position: relative;
				background-color: #fff;
				color: #000;}



.searchpanel input[type="search"]	 { font-size: 15px;
									padding: 4px;
									border: 1px solid #c9c9c9;
									padding: 4px 8px;
									text-align: left;
									display: inline-block;
									max-width: 175px;
									width: 55%; }



.searchpanel .search_options { display: inline-block; line-height: 15px; font-size: 15px; margin: 15px 0px; }

.searchpanel .search_options input[type="radio"] {margin: 0px 5px 0px 15px; }


.searchpanel h2 { 
    position: absolute;
    top: -12px;
    left: 10px;
    font-size: 15px;
    display: inline-block;
    background-color: #F1F0FF;
    color: #000;
}



.selected-panel {
    text-align: left;
    margin: 6px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #eceaff;
    border: 1px solid #818096;
    padding: 5px;
    color: #000;
}

.selected {
    text-align: left;
    display: inline-block;
    padding: 5px 4px;
    background-color: #fff;
    border: 1px solid #9f9e9e;
    margin: 5px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}


#selected, #morelike-left {
    text-align: left;
    margin: 10px 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background-color: #eceaff;
    border: 1px solid #818096;
    padding: 5px;
    color: #000;
}



#selected a.blue { color: #0000ff !Important; }










		  
						  
/*----------------------------- media stuff ------------------------------------ */		


@media only screen and (min-width: 460px) {
			#wrap { font-size: 15px; }


			/*--------------------- switch updates round ------------------------ */
			.tube-updates .item .thumbwrapper {	margin: 4px 5px;
											float: left;
											max-width: 200px; }
     
			.tube-updates .item .itemcontent { text-align: left; }
	
	.tube-updates .item .itemcontent .text { text-align: left; white-space: normal; }

			#bottom ul.toplist li {    width: 31%;}
				  
			/*-------------- button ------------------------- */
				.big {	font: bold 18px/24px Arial, sans-serif; }
			  

}





@media only screen and (min-width: 620px) {
			#header { padding-bottom: 31.5%; }
			#wrap { font-size: 16px; }
			#menu { display: block;  height: 45px; }
			#menu li { display: inline-block;  margin-right: 0px; width: auto;  float: left; padding: 0px 10px; border: 0px solid #000; }
			
			#menu li.menu_button	{display: none; }							
			#menu li.desktop { display: inline-block; }

				 #menu li a { font-size: 1.2em; }
				 
				 h1.section_title { font-size: 130%; line-height: 150%;
					margin: 0.5em 0 0.5em 10px;										}
			
		
			#topnav nav { display: block; }
			#topnav .menubutton, #topnav #menubutton-text { display: none; }
	 
				 
			/* #header .rightbutton {	display: block; }
			 #menu li#loginlink { display: none; }	*/										 
				 
				 
				.tube-updates .item {    width: 50%; }
				
				/*--------------------- switch updates back ------------------------ */
			.tube-updates .item .thumbwrapper {	margin: 4px auto;
											float: none;
											max-width: 240px; }
     
			.tube-updates .item .itemcontent { text-align: center; }
			.tube-updates .item .itemcontent .text { text-align: center; }
			.arrow {float: right; }

			.biglogo {    max-width: 970px;
   						 background-image: url('../images/siteboxbig.webp');
   						 padding-bottom: 55%		}


	.sfw .biglogo { background-image: url("../images/siteboxbig-sfw.webp")}

				/*--------------------------- moresites stuff --------------------------- */
			

			.moresites .item { width: 25%; }


				/*----------------------------- joinlist stuff---------------------------- */
				
				ul.joinlist li { width: 48%; font-size: 1em;  }
				
				/*---------------------- bottom stuff --------------------------- */
				#bottom ul.toplist li {    width: 19%; }


				/*-------------------- single update stuff --------------------- */
				 .flex-container  .landscape  { max-width: 150px;  }

				 .flex-container  .portrait { max-width: 130px; }


				/*-------------- button ------------------------- */
				.big {	font: bold 18px/24px Arial, sans-serif; }


				#comment { width: 70%; }

				ul.viewoptions li#cats_wrapper { order: 2; width: auto; }




}





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

			#content_wrapper #facepic_wrapper { width: 60%;		}
			  
			#content_wrapper #text_wrapper {  width: 40%;	}
	
	.sfw #content_wrapper #facepic_wrapper { width: 250px; max-width: 250px; order: 2; }
	.sfw #content_wrapper #text_wrapper { flex: 1 1 auto;}
	

			#content_wrapper #text_wrapper { font-size: 13px; }
	.sfw #content_wrapper #text_wrapper .welcometext p { font-size: 1rem; }
	

			nav {   font-size: 15px;}
			
				.tube-updates .item {    width: 33%; }
	.sfw .tube-updates .item { width: 50%; }
				
				h3.section_title { font-size: 120%; line-height: 150%; }
				
			ul.joinlist li { font-size: 1.3em; line-height: 1.4em  }

			/*-------------------- single update stuff --------------------- */
				 .flex-container  .landscape { max-width: 180px;  }

				 .flex-container  .portrait { max-width: 150px; }

			/*-------------- button ------------------------- */
				.big {	font: bold 22px/28px Arial, sans-serif; }


		.join-options { margin:0 0.25rem; }

.join-options .item { width: 50%; padding: 10px 5px; }


}





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

		#content_wrapper #text_wrapper { font-size: 15px; }
		.moresites .item { width: 16.6%; }
			.sfw .tube-updates .item { width: 33%; }




}