/*

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


	// THEME COLORS 
	(Eruption - http://www.colourlovers.com/palette/1162394/Eruption)
	
	Volcano Violet - #230446
	Stormy Purple - #4b1d54
	Muted Dusty Rose - #a73d52
	Apricot Jam - #d34648
	Mango Jelly - #f99347
	Background - #f1f1f1
	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:#f1f1f1; color:#767676;
		text-align:center; font-size:87.5%; 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: #4b1d54;font-weight: 900;}
i, em {color: #230446;} 

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: #d34648;}


/* --- Links --- */
a:link, a:active, a:visited {color: #a73d52;text-decoration: none;}
	a:hover {color: #f99347;text-decoration: none;}


/* --- 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(bg-alt.jpg); }
		
	#side-int { padding-right: 10px; background: url(border.jpg) center right repeat-y; 
			z-index: 999!important; position:relative; height: 100%;}

		#logo { font-size: 3em; padding: 80px 0 30px 0; }
			#logo i { color: #d34648 !important; }
		
		#title { font-size: 2em; color: #a73d52; text-transform: uppercase; 
				margin-bottom: 30px; }
			.title { font-weight: 300; color: #d34648; }
				.title strong { font-weight: 900; color: #a73d52; }
			.subtitle { font-style: italic; font-weight: 900; font-size: .25em; 
					background:#f99347; letter-spacing: 1px; color: #fff; }
					
					
/* --- Headers --- */

h1 { text-transform: uppercase; font-size: .875em; line-height: 1em; color: #230446; 
		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; font-size: 1.25em !important; }
	.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.twitch i { color: #6441a4; }
	a.tumblr i { color: #36465d; }
	a.instagram i { color: #bc2a8d; }
	a.email i { color: #230446; }
	
		a i:hover {color:#4b1d54 !important;}

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

/* --- Content Section --- */
#content { float:right; width: 53%; padding: 1% 20% 1% 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(bg.jpg); box-shadow: 0 0 5px #bfbfbf;}

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

	.caption {  position: absolute; top: 0; background: url(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:#a73d52; 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: #d34648 !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; }

}