/*
Theme Name: Collective Premade #04
Description: This design was custom made by Carol of Sin21 Designs.
This theme is not to be used or redistributed without the explicit permission of Carol L.
Version: 1.0
Author: Carol L.
Author URI: http://sin21.org

--------------------------
	Design Colors
--------------------------

99CC00 - green
9F9F9F - light grey #1
fff - white
*/

*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;-webkit-font-smoothing:antialiased}
body, html {text-rendering: optimizeLegibility !important;-webkit-font-smoothing: antialiased !important;-webkit-text-size-adjust: none;}
body {margin:0; background:#fff url(images/main-background.png) repeat; font:400 12px Noto Sans, sans-serif; color: #5a5a5a;}

/* -----------------------------------------------------------
	Global Styling
-------------------------------------------------------------- */

.clear {clear: both; display:block;}
.clearR {clear: right;}
.clearL {clear: left;}

/* -- Alignment Classes -- */
.text-center {text-align: center!important;}
.text-left {text-align: left!important;}
.text-right {text-align: right!important;}
.pull-left {float: left!important;}
.pull-right {float: right!important;}
.align-center {margin-left: auto!important; margin-right: auto!important; text-align: center!important;}
.alignleft {margin: 0 10px 0 0!important;float:left;}
.alignright {margin: 0 0 0 10px!important;float:right;}
.aligncenter {margin: 0 auto 10px auto!important;display: block;}

/* -- Webkit Scrollbar -- */
::-webkit-scrollbar-thumb {height: 100px;background: #3E3E3E;}
::-webkit-scrollbar {width: 10px;height: 10px;background: #fff;}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {background-color: #99CC00;}

/* -- Links -- */
a, a:visited, a img, a:visited img, a:hover img {color:inherit; text-decoration: none;transition:all .25s ease-in-out;}
a:hover{color:#99CC00; text-decoration: none;}

/* -- Wraps -- */
.spec, .wrapper {margin:0 auto; position:relative; overflow:hidden; max-width:1100px;}

.top-bar {margin:0 auto 25px; padding:15px 0; display:block; background:#fff; text-align:center; overflow:hidden;}
.top-bar h1 {margin:5px 0 0; padding:0; display:inline-block; font:700 28px Oleo Script Swash Caps; color:#3A3A3A; text-align:center; letter-spacing:-1px;}
.top-bar h1 span {margin:0 0 10px; padding:5px 7px; display:inline-block; font:italic 400 13px Noto Sans; background:#99CC00; color:#fff; text-align:center; text-transform:none; letter-spacing:0;}
.top-bar .nav {margin:0 auto 0; padding:0;}
.top-bar .nav .fa-link {font-size:18px; vertical-align:middle; margin-right:10px;}
.top-bar .nav ul {margin: 0; padding:0; display: inline; list-style: none; text-align: left;}
.top-bar .nav ul li {display: inline; padding:0; margin-left:-4px;}
.top-bar .nav ul li a, .top-bar .nav ul li a:visited {
	margin:0; padding: 8px 12px; display: inline-block; width:45px; position: relative; z-index:999; cursor: pointer; 
	font-size:14px; color: #9F9F9F; text-align:center; text-decoration:none; transition: all 0.2s; border-right:0px solid #E2E2E2;
}
.top-bar .nav ul li:after {content:'/'; color:#CFCFCF;}
.top-bar .nav ul li:last-child:after {content:'';}
.top-bar .nav ul li a:hover {color: #99CC00;}

.sites {margin: 10px auto; padding:0; list-style: none; text-align: center;}
.sites figure {margin:8px; display:inline-block; width: 200px; height:150px; background:#fff; position: relative; overflow:hidden; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.sites figure img {width:100%; display: block; position: relative; z-index:9!important;}
.sites figure figcaption {
	margin:0; padding: 50px 0; display:block; width:200px; height:150px; text-align:center!important; vertical-align:middle; position:absolute; bottom:0px; z-index:10!important; 
	background: rgba(0,0,0,0); line-height:180%; transform:translateY(-100px); transform:translateX(200px); transition: all 0.30s ease-in;
}
.sites figure:hover figcaption {background: rgba(0,0,0,7); transition: all 0.40s ease-out; transform:translateY(0);}
.sites figure:hover h2, .sites figure:hover figcaption .description {transform:translateY(0);}
.sites figure figcaption h2 {
	margin:0; padding:0; display:block; 
	font:700 15px Noto Sans; color:#fff; text-transform:uppercasxe; 
}
.sites figure figcaption h2 span {font-weight: 700; display:initial; border:0;}
.sites figure figcaption .description {margin:0; padding:0;font: 400 10px Noto Sans; color:#CACACA; letter-spacing:0;}

.friends {margin:25px auto 0; padding:15px 0; display:block; background:#fff; color: #252525; text-align:center; overflow:hidden;}
.friends ul {margin: 0; padding:0; display: inline; list-style: none; text-align: left;}
.friends ul li {display: inline; padding:0; margin-left:-4px;}
.friends ul li a, .friends ul li a:visited {
	margin:0; padding: 3px 0; display: inline-block; position: relative; z-index:999; cursor: pointer; 
	color: #7A7A7A; text-align:center; text-decoration:none; transition: all 0.2s;
}
.friends ul li:after {content:'/'; color:#CFCFCF; padding: 8px 12px;}
.friends ul li:last-child:after {content:'';}
.friends a:hover {color:#99CC00; box-shadow:inset 0 -2px 0 #99CC00;}

a.credit {margin:0; display:inline-block; padding:8px 10px; background:#99CC00; font-size:13px; color:#fff; font-weight:700;}
a.credit:hover {color:#fff; background:#3A3A3A;}

/* -----------------------------------------------------------
	Responsive (966px Resoultion and Lower)
-------------------------------------------------------------- */

@media only screen and (max-width: 966px), only screen and (max-device-width: 966px) {

.spec, .wrapper, .friends, hr {width:95%!important; max-width:95%!important;}
.sites figure {margin:8px; display:inline-block; width: 200px; height:200px; }
.sites figure figcaption {padding:10px 0!important; height:60px; background: rgba(0,0,0,1); transform:translateY(150px); transform:translateX(0);}
.sites figure figcaption h2, .sites figure figcaption .description {transform:translateY(0);}
.friends {text-align:center!important;}

a.credit {position:relative; left:45%; margin:0 auto 3px; display:inline-block; padding:8px 10px; background:#99CC00; font-size:13px; color:#fff; font-weight:700;}
}

/* -----------------------------------------------------------
	Responsive (540px Resoultion and Lower)
-------------------------------------------------------------- */

@media only screen and (max-width: 540px), only screen and (max-device-width: 540px) {

.top-bar .quote {font-size:18px;}
.sites figure {width: 43%;}
.sites figure img {width:100%;}

}