/*
Theme Name: XtremelySocial
Theme URI: http://xtremelysocial.com
Description: Custom theme for XtremelySocial.com
Author: XtremelySocial
Author url: http://xtremelysocial.com
Version: 1.3
Template: flat-bootstrap
Template Version: 2.0
Tags: one-column, right-sidebar, left-sidebar, fluid-layout, responsive-layout, custom-background, custom-header, custom-menu, featured-images, featured-image-header, full-width-template, flexible-header, rtl-language-support, theme-options, translation-ready, sticky-post, threaded-comments, light, blue, green
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Typography
# Elements
# Navigation
	## Links
	## Menus
# Content
	## Header
	## Footer
	## Sidebars
	## Posts and Pages
	## Comments
# Animation
# Widgets and Plugins
	## Widgets
	## Plugins
--------------------------------------------------------------*/

/* IMPORT the parent theme's stylesheet(s) */
/*@import url("../flat-bootstrap/style.css");*/

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

/* Don't automatically bold hx tags */
/*b:not(h1, h2, h3, h4, h5, h6), strong:not(h1, h2, h3, h4, h5, h6) {
	font-weight: 500;
}*/

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
i {
	font-size: 35px;
	padding: 20px;
}
i.fa-li {
	padding: 0;
}

.panel {
	border-radius: 0;
}

.lead {
	font-size: 22px;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
/* Set the midnightblue links back to green */
/*
.midnightblue a:not(.btn), 
.bg-midnightblue a:not(.btn) {
    color: #16a085;
    text-decoration: none;
}

.midnightblue a:hover:not(.btn), 
.bg-midnightblue a:hover:not(.btn) {
    color: #19B798;
}
*/

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
/* 
 * Need room for fixed navbar at the top. If you change the height of it, change it 
 * here as well. Make sure the navbar doesn't wrap on tablets or it won't look good.
 */
body {
    padding-top: 50px;
    font-size: 18px;
}

/* Navbar */
.navbar-fixed-top {
	opacity: 0.97;
}

.navbar-brand {
	font-size: 22px;
}
.navbar-brand:hover,
.navbar-brand:active,
.navbar-brand:focus {
	opacity: 0.75;
}

/* Set a top green border on hover/active except for smartphones */
@media (min-width: 767px) {
	.navbar-default .navbar-nav>.active>a, 
	.navbar-default .navbar-nav>.active>a:hover, 
	.navbar-default .navbar-nav>.active>a:focus {
		border-top: 4px solid #16a085; /*darkgreen*/
		padding-top: 10px;    
	}
	.navbar-default .navbar-nav>li>a:hover, 
	.navbar-default .navbar-nav>li>a:focus {
		border-top: 4px solid #16a085; /*darkgreen*/
		padding-top: 10px;    
		background-color: #f2f2f2; /*#f8f8f8;*/
	}
}

/* Hide the navbar home link on tablets so menu doesn't wrap */
/*
@media (min-width: 768px) and (max-width: 991px) {
	#menu-item-5114 {
    display: none !important;
  }
}
*/

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Header
--------------------------------------------------------------*/

/* Change height of cover (home page) and section (other pages) images */
.cover-image,
.section-image {
	background-color: #1abc9c;
}

/* Let's crank up the text size on the full-width images */
@media (min-width: 768px) {
	.cover-image h1, 
	.section-image-overlay h1 {
		font-size: 80px;
	}
	.cover-image h2, 
	.section-image-overlay h2 {
		font-size: 50px;
	}
	.cover-image-overlay {
		padding: 100px;
	}
}

/* Set content header section to match the height of full-width images */
header.content-header {
	min-height: 200px;
}

header.content-header, 
.green-pattern {
    background-color: #72b9a6; /* match lightest part of image */
    background-image: URL('images/bg-green-pattern.jpg');
	color: #fff;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/

/* Widgetized Footer */
.sidebar-footer {
	background-color: #34495e; /*bg-darkblue (& flat-ui wet-asphalt)*/
	text-align: left;
	padding-bottom: 0; /*Padding on columns handles this*/
}
.sidebar-footer h2, 
.sidebar-footer h3 {
	font-size: 28px;
	color: white;
}
.sidebar-footer aside.widget {
	margin-bottom: 25px;
}

/* After Footer */
.after-footer {
	background-color: #2C3E50; /*flat-ui midnight blue*/
	font-size: 16px;
}

/* Just for demo pages under our "test-page", make footer black */
.parent-pageid-321 .after-footer {
	background-color: #222222; /*not quite black*/
}

/*--------------------------------------------------------------
## Sidebars
--------------------------------------------------------------*/
/* For sidebar on mobile, remove extra whitespace */
/*
@media (max-width: 767px) {
	#secondary {
		padding-top: none !important;
	}
}
*/

.sidebar-pagebottom .panel {
	margin-bottom: 0;
}

/*--------------------------------------------------------------
## Posts & Pages
--------------------------------------------------------------*/

/* Add some extra space at the top of pages that aren't full width */
/*
.content-area,
.content-area-wide .comments-section {
	padding-top: 50px;
}
*/

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
/* Move the comment reply link up */
.reply {
	margin-top: -11px;
}

/* Mark comments by post author */
/*.bypostauthor cite:after {
	content: "Author";
	display: inine-block;
	background-color: #1abc9c;
	color: #fff;
	margin-left: 10px;
	padding: 3px 5px;
	vertical-align: middle;
}*/


/* NEW STYLES ADDED TO THIS THEME */

/* Since we have a fixed navbar, make it easy to add extra padding to sections */
.extra-padding {
	padding-top: 55px;
} 

/* Let us get rid of link underlines in colored sections. Eg) for tag clouds. 
   Set the link color and hover to shades of gray. 
*/
.link-style-none a:not(.btn) {
	text-decoration: none;
	/*color: #bdc3c7;*/
	color: #ecf0f1;
}
.link-style-none a:hover:not(.btn), 
.link-style-none a:focus:not(.btn) {
	color: #7b7b7b;
}

/*iframe#xs_iframe, 
.content-area-wide {*/
iframe#xs_iframe {
	height: 100%;
}

/*--------------------------------------------------------------
# Animations - Tilt
--------------------------------------------------------------*/

/* Tilt Animation Effect. Just add class "tilt" to any <div> */
.tilt {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
}
 
.tilt:hover {
  -webkit-transform: rotate(-10deg);
     -moz-transform: rotate(-10deg);
       -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
          transform: rotate(-10deg);
}

/*.animate {
	visibility: hidden;
}*/

/*--------------------------------------------------------------
# Animations - SlideDown
--------------------------------------------------------------*/

/* Slide Down Animation Effect. Just add class "slideDown" to any <div> */
.slideDown.active {
	animation-name: slideDown;
	-webkit-animation-name: slideDown;	

	animation-duration: 1s;	
	-webkit-animation-duration: 1s;

	animation-timing-function: ease;	
	-webkit-animation-timing-function: ease;	

	visibility: visible !important;						
}

@keyframes slideDown {
	0% {
		transform: translateY(-100%);
	}
	50%{
		transform: translateY(8%);
	}
	65%{
		transform: translateY(-4%);
	}
	80%{
		transform: translateY(4%);
	}
	95%{
		transform: translateY(-2%);
	}			
	100% {
		transform: translateY(0%);
	}		
}

@-webkit-keyframes slideDown {
	0% {
		-webkit-transform: translateY(-100%);
	}
	50%{
		-webkit-transform: translateY(8%);
	}
	65%{
		-webkit-transform: translateY(-4%);
	}
	80%{
		-webkit-transform: translateY(4%);
	}
	95%{
		-webkit-transform: translateY(-2%);
	}			
	100% {
		-webkit-transform: translateY(0%);
	}	
}

/*--------------------------------------------------------------
# Widgets and Plugins
--------------------------------------------------------------*/

/*--------------------------------------------------------------
## Widgets
--------------------------------------------------------------*/

/* Search widget in sidebar */
#secondary > .widget_search {
	margin-top: 22px;
}

/*--------------------------------------------------------------
## Plugins
--------------------------------------------------------------*/

/* Facebook Connect by Sociabl.es */
#fbconnectcheckpublish {
	font-weight: 300 !important;
}
.fbconnect_sharewith_facebook {
	background: none !important;
	padding-left: 0 !important;
}

/* WordPress.com stats plugin remove smiley */
#wpstats, #__bkframe {
	display:none;
	margin: 0;
	padding: 0;
}

/* FIX for emoticons */
img.wp-smiley {
	display: inline-block;
}

/* Jetpack sharing plugin */
.shareaholic-recommendations-container .shareaholic-recommendations-header {
    min-height: 18px !important;
    font-size: 18px !important;