/*

	// Theme Name: Collective #07 
	// Theme Author: Courtney
	// Author URI: http://cordy.nu


	// THEME COLORS 
	(https://colorhunt.co/palette/624e888967b3cb80abe6d9a2)
	
	Darkest - #3f3258
	Dark Purple - #624e88
	Mid Purple - #8967b3
	Pink - #cb80ab
	Yellow - #e6d9a2
	Background - #fcfaef
	Text - #767676
	
    
    // CELEB IMAGES need to be 200x180 pixels in size and in color OR b&w
    

	// THEME FONTS
	
	Body/Title Text - Lato
	Webicons/Social Media - Font Awesome 5 Free

*/


/* --- Basic Elements -- */
body { background:#fcfaef; color:#767676;
		text-align:center; font-size:75%; line-height:1.813em; 
		font-family: 'Lato', sans-serif; margin:0; font-weight: 400;}

a, a img, img a, img, i, .caption, .sitelink, .fansiteimg, .socials i, .socials a, :hover
	{-webkit-transition: all 0.8s ease-in-out;  -moz-transition: all 0.8s ease-in-out; 
	-o-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out;}

b, strong {color: #624e88;font-weight: 900;}
i, em {color: #3f3258;} 

div#qTip {padding: 3px 8px 1px 8px;display: none;font-size: .625em; 
	font-weight: 700;position: absolute;z-index: 1000; text-shadow: 0px 0px !important;
	text-transform: uppercase; letter-spacing: 2px; color: #fff; background: #cb80ab;}


/* --- Links --- */
a:link, a:active, a:visited {color: #8967b3;text-decoration: none;}
	a:hover {color: #e6d9a2;text-decoration: none; background: #8967b3;}


/* --- Images -- */			
img { filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='grayscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0'/></filter></svg>#grayscale");
	filter: gray; /* IE 6-9 */
	-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
	}
	

/* --- Side Section --- */
#side {position:fixed; width: 25%; height: 100%; background: url(images/bg-alt.jpg); }
		
	#side-int { padding-right: 10px; background: url(images/border.jpg) center right repeat-y; 
			z-index: 999!important; position:relative; height: 100%;}

		#logo { font-size: 4em; padding: 80px 0 30px 0; }
			#logo i { color: #cb80ab !important; }
		
		#title { font-size: 3em; color: #8967b3; text-transform: uppercase; 
				margin-bottom: 30px; }
			.title { font-weight: 300; color: #cb80ab; }
				.title strong { font-weight: 900; color: #8967b3; }
			.subtitle { font-style: italic; font-weight: 900; font-size: .375em; 
					background:#e6d9a2; letter-spacing: 1px; color: #fff; }
					
					
/* --- Headers --- */

h1 { text-transform: uppercase; font-size: .875em; line-height: 1em; color: #3f3258; 
		text-align:center; letter-spacing: 2px; padding: 0 2px; margin-top: 30px; }
		
	h1 span { box-shadow: inset 0 -5px 0 #e6e6e6; }


/* --- Socials --- */
.socials { display:block; margin: 20px auto 0 auto;}
	.socials a { margin: 0 5px; }
		
	a.twitter i { color: #7eb3cd; }
	a.facebook i { color: #3b5998; }
	a.pinterest i { color: #cb2027; }
	a.youtube i { color: #bb0000; }
	a.tumblr i { color: #36465d; }
	a.instagram i { color: #3f729b; }
	a.email i { color: #f4324a; }
	
		a i:hover {color:#624e88 !important;}

	.credit {display:block; font-size: 1.125em; }
	

/* --- Content Section --- */
#content { float:right; width: 73%; padding: 1%; text-align:left; }


/* --- Site Infos -- */
.fansite { height: 190px; overflow:hidden; font: 400 .875em/1.5em 'Lato', sans-serif;
	padding: 0; margin-top: 30px; text-align: left; position: relative;
	vertical-align:top; background: url(images/bg.jpg); box-shadow: 0 0 5px #bfbfbf;}

	.fansiteimg { display:block; padding: 5px; }

	.caption {  position: absolute; top: 0; background: url(images/bg.jpg);
		right: 0; bottom: 0; left: 0; overflow: hidden; 
		text-transform: uppercase; padding: 30px 10px 0 10px; text-align:center; }
	
			.sitename { color: #fff; background:#8967b3; line-height: .75em; 
				padding: 0 2px; font-weight: 900; letter-spacing: 2px; font-size: .65em; }
			
			.caption b, .caption strong { font-size: .875em; }
			.caption .fansitelink { font-size: 1.25em; padding: 10px; }
				.caption .fansitelink i { color: #cb80ab !important; }				
			.caption .social { letter-spacing: 2px; font-size: 1.25em; }


/* ------------------------------------------------------------------------- */	
/*  Responsive Theme Elements                                                */
/* ------------------------------------------------------------------------- */

/*  FULL SITE - 1025px and higher                                            */
/* ------------------------------------------------------------------------- */
@media only screen and (min-width:1025px) {

		.fansite { margin-right: 15px; display: inline-block; width: 210px; }
		.caption { opacity: 0; }
		.caption:hover { opacity: .85; }
		.credit {position: absolute; bottom: 50px; right: 50%;}

}


/*  HANDHELD DEVICES - 1024px and lower                                      */
/* ------------------------------------------------------------------------- */
@media only screen and (max-width:1024px) {

	.fansite { margin: 15px auto; display:inline-block; max-width: 210px;}
		.caption { opacity: .85; }
	#side, #content { display:block; position:static; width: 96%; height: 100%; 
			padding: 0 2%; float: none !important; margin: 0 auto !important; 
			text-align:center;}
	#side-int { position:static; width: 100%; background: none !important; }
	.credit { padding: 25px; }
		
}


/*  HANDHELD DEVICES - 650px and lower                                      */
/* ------------------------------------------------------------------------- */
@media only screen and (max-width:650px) {

	.socials { display: block; margin: 0 auto !important; 
		text-align: center !important; float: none; }
	.socials {margin-top: 20px !important; }
	.socials a { margin: 0 2px; }

}


/*  HANDHELD DEVICES - 431px and lower                                      */
/* ------------------------------------------------------------------------- */
@media only screen and (max-width:431px) {
	
	.socials a, .socials i { font-size: 5vw; }
	.socials a { padding: 7px 10px; }

}