/*
	@package achillestheme
*/

/*
	Import
	------------------------------------------------
*/
@import 'base/variables'; 		//variables
@import 'base/mixins';			//mixins
@import 'base/fonticons';		//fonticons
@import 'base/placeholders';	//placeholders

/* 
	Generic 
	------------------------------------------------
*/

.page-social-links{
	position: absolute;
	left: 10px;
	top: 10px;
	a{
		font-size: 16px;
	}
}
.sharing-posts{
	.icon{
		color: #222;
		width: 15px;
		height: auto;
	}
	color: #222;
}
.reddit-icon{
	width: 15px;
	height: auto;
	margin-top: -5px;
}
body{
	padding: 0;
	margin: 0;
	font-family: $body-font; 
}

a{
	@include animate( color, 320ms);
	color: $primary-color;
	&:hover,
	&:focus{
		text-decoration: none;
		color: $dark-grey;
	}
}
.background-image { background-position: center center; background-size: cover; background-repeat: no-repeat; }

.table { display: table; width: 100%; height: 100%; 
	.table-cell { display: table-cell; width: 100%; height: 100%; vertical-align: middle; }
}

.site-content{
	float: left;
}
.site-sidebar{
	margin-top: 80px;
	float: right;
	@media only screen and (max-width : 770px) {
		display: none;
		float: right;
		text-align: center;
		width: 100%;
		.site-content{
			float: left;
		}
	}
}
.site-sidebar-left{
	border: 1px solid $lighter-grey;
	border-radius: 2px;
	margin-top: 80px;
	float: left;
	@media only screen and (max-width : 770px) {
		display: none;
		float: right;
		text-align: center;
		width: 100%;
		.site-content{
			float: left;
		}
	}
}
.container2{
	margin-left: 0%;
	margin-right: 0%;
	@media only screen and (max-width : 1010px) {
		margin-left: 0%;
		margin-right: 0%;
	}
}
.logo-image{
	width: 300px;
	height: 142px;
	overflow: hidden;
	margin: 0 auto; 
	background-position: center center; 
	background-repeat: no-repeat; 
	background-size: cover; 
}

.right-content{
	float: right;
}
/* 
	Header 
	------------------------------------------------
*/
.no-header-container{
	@extend %text-shadow;
	position: relative; 
	display: block;
	width: 100%;
	height: 300px;
}
.header-container{
	@extend %text-shadow;
	position: relative; 
	display: block;
	width: 100%;
	height: 300px;
}

.site-info{
	@extend %text-shadow;
	color: #fff;
	.site-title{
		margin: 0; 
		font-size: 80px;
	}
	.site-description{
		font-size: 14px;
		margin-top: 1em;
	}
}

.nav-container { 
	text-align: center;
	position: absolute; 
	bottom: 0; 
	left: 0; 
	right: 0; 
	height: 50px;
}
.site-description-logo{
	margin: 0;
	padding: 0;
	text-shadow: 1px 1px black;
	font-size: 14px;
	font-weight: 500;
}

/* 
	Navbar 
	------------------------------------------------
*/
.search_menu{
	display: none;
	#searchform{
		padding-top: 0;
		margin-top: 0;
		vertical-align: middle;
	}
}

.achilles-navbar-right{
	position: absolute;
	display: inline-block;
	top: 0;
	right: 15px;
}
.navbar-brand{
	padding-top: 0;
	position: absolute;
}
.nav-logo img{
	height: 50px;
}
.navbar-achilles { 
	text-align: center; 
	border: none; 
	border-radius: 0; 
	min-height: auto; 
	margin-bottom: 0; 
	background: rgba( 0,0,0,0.5); 
	border-top: 1px solid rgba( 255,255,255,0.1);
	ul { 
		float: none; 
	}
	li { 
		float: none; 
		display: inline-block;
		&.active {
			a { 
				opacity: 1;
				&:after { 
					@include transform( translateY(0) ); opacity: 1; 
				}
			}
		}
		&.open {
			a { 
				opacity: 1; 
				background-color: rgba(0,0,0,0.1)!important;
				&:after { 
					@include transform( translateY(10px) ); 
					opacity: 0!important; 
				}
				&:hover,
				&:focus,
				&:visited { 
					background-color: rgba(0,0,0,0.1)!important;
					&:after { 
						@include transform( translateY(10px) ); 
						opacity: 0!important; 
					}
				}
			}
		}
		a { 
			text-transform: uppercase; 
			color: #fff; 
			font-size: 12px; 
			opacity: 0.7; 
			letter-spacing: 0.05em; 
			background: none; 
			@include animate( opacity, 320ms );
			&:hover,
			&:focus,
			&:visited { background: none; opacity: 1; 
				&:after { 
					@include transform( translateY(0) ); 
					opacity: 1; 
				}
			}
			&:after { content: ''; position: absolute; display: block; left: 15px; right: 15px; bottom: 14px; height: 2px; background: #fff; @include animate( all, 320ms ); opacity: 0; @include transform( translateY(10px) ); }
		}
		ul.dropdown-menu { border: 0; border-radius: 0; background: #222; 
			li { display: block; 
				a {
					line-height: 35px;
					&:hover,
					&:focus,
					&:visited { background: #222!important; color: #fff; }
				}
			}
		}
	}
}
.navbar-mobile{
	display: block;
	text-align: center;
	color: #fff;
	border: none; 
	border-radius: 0; 
	min-height: auto; 
	margin-bottom: 0; 
	background: rgba( 0,0,0,0.5); 
	border-top: 1px solid rgba( 255,255,255,0.1);
	line-height: 20px;
	.ham-icons{
		list-style: none;
	}
	.icon-ham{
		line-height: 20px;
		margin: 0;
		padding: 0;
		display: inline-block;
		margin-right: 5%;
		font-size: 16px;
		border: 1px solid #fff;
		border-radius: 5px;
		padding: 6px 18px;
		&:hover,
		&:focus{
			@include animate( all, 320ms );
			border-color: $light-grey;
			color: $light-grey;
			cursor: pointer;
		}
	}
	a{
		color: #fff;
		
	}
	ul li a > ul li{
		color: #fff!important;
	}
	.nav > li > a:focus, .nav > li > a:hover {
		@include animate( all, 320ms );
	    text-decoration: none;
	    background: none !important; 
	    color:  $light-grey !important;

	}

	.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
	    background-color: #222;
	}

	//dropdowns line-height: 50px;
	.navbar-nav .open .dropdown-menu > li > a {
	    line-height: 35px;
	}
	.dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover {
	    background-color: #222;
	}
	.dropdown-menu > li > a:focus, .dropdown-menu > li > a{
		color: #fff;
		text-align: center;
		border-top: 1px dotted $light-grey;
		border-bottom: 1px dotted $light-grey;

	}
	.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
	   	color: $light-grey;
	    text-decoration: none;
	    background-color: #222;    
	}
}
.hamburger{
	display: none;
}
.mobile-nav{
	display: none;
}
.mobile-nav{
	background: #222;
	border-top: 0;
	li{
		background: #222;
		display: block;
		z-index: 99999;	
	}
	a{
		background: #222;
	}	
}
@media only screen and (max-width : 770px) {
	.hamburger{
		display: block;
	}
	.main-achilles-nav{
		display: none;
	}
}


/* 
	Standard Post Format
	------------------------------------------------
*/
article{
	border-bottom: 4px solid $lighter-grey;
	padding-top: 80px;
	padding-bottom: 4px;
	&:first-child{
		padding-top: 80px;
	}
	h1{
		font-size: 48px;
		font-weight: 300;
		&.entry-title{
			text-align: center;
			line-height: 1.5em;
			padding: 0;
		}
	}
	.entry-meta{
		color: $light-grey;

		a{
			font-weight: 500;
			color: $light-grey;
			&:hover,
			&:focus{
				color: $dark-grey;
			}
		}
	}
}

.standard-featured-link{
	display: block;
	position: relative;
	&:hover,
	&:focus{
		.standard-featured{
			&:after{
				background: rgba(0,0,0,0);
			}
		}
	}
}

.standard-featured{
	width: 100%;
	height: 350px;
	margin-bottom: 5px;
	margin-top: 5px;
	&:after{
		@include animate(background, 320ms);
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0,0,0,0.13);
		box-shadow: inset 0 0 15px  rgba(0,0,0,0.35);
	}
}

.entry-excerpt{
	padding: 30px 30px 30px 30px;
	p{
		font-size: 17px;
		line-height: 1.5em;
		font-weight: 300;
		letter-spacing: 0.03em;
	}

}

.btn-achilles{
	@include animate(all, 320ms);
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 300;
	color: $light-grey;
	padding: 8px 12px;
	border-radius: 2px;
	border: 1px solid $light-grey;
	background-color: transparent;
	&:hover,
	&:active{
		color: $dark-grey;
		border-color: $dark-grey;
	}
}
.entry-footer{
	color: $light-grey;
	text-transform: uppercase;
	a{
		color: $light-grey;
		display: inline-block;
		font-size: 12px;
		&:hover,
		&:focus{
			color: $dark-grey;
		}
	}
	.tags-list{
		.achilles-price-tag{
			margin-right: 10px;
		}
	}
	.comments-link{
		margin-left: 10px;
		text-transform: uppercase;

	}
}
/* 
	Image Post Format
	------------------------------------------------
*/

.achilles-format-image{

	position: relative;
	color: #ffffff;
	.entry-title a{
		color: #fff;
		text-shadow: 2px 2px #222;
	}
	.entry-meta{
		color: #ffffff;
		text-shadow: 1px 1px #222;
		a{
			color: $lighter-grey;
		}
	}
	.background-image{
		height: 600px;
	}
	.image-caption{
		@extend %background-gradient;
		position: absolute;
		width: 100%;
		bottom: 65px;
		left:0;
		right:0;
	}
	.entry-footer{
		margin-top: 30px;
		margin-bottom: 60px;
	}
}

/* 
	Audio Post Format
	------------------------------------------------
*/

.achilles-format-audio{
	padding-bottom: 4px;
	h1{
		font-size: 30px;
		&.entry-title{
			display: inline-block;
			margin-right: 20px;
			&:before, &:after{
				display: none;
			}
		}
	}
	.entry-meta{
		display: inline-block;
		margin-bottom: 0;
	}
	.entry-content{
		iframe{
			width: 100%;
			height: 166px;
		}
	}
	.entry-footer{
		margin-top: 30px;
		margin-bottom: 0;
	}
	article{
		padding-bottom: 0;
	}
}

/* 
	
	Video Post Format
	------------------------------------------------
*/

.achilles-format-video{
	padding-bottom: 4px;
	header{
		h1{
			&.entry-title{
				margin-top: 20px;
			}
		}
	}
	.entry-content{
		margin-top: 5px;
		iframe{
			width: 100%;
			height: 460px;
		}
	}
	.entry-footer{
		margin-top: 30px;
		margin-bottom: 0;
	}
}

/* 
	
	Quote Post Format
	------------------------------------------------
*/

.achilles-format-quote{
	.quote-content{
		font-size: 42px;
		font-weight: 100;
		line-height: 1.3em;
		letter-spacing: 0.03em;
		&:before,
		&:after{
			content: '"';
			display: inline-block;
			position: relative;
			color: $light-grey;
		}
	}
	.quote-author{
		color: #898989;
		font-size: 12px;
		letter-spacing: 0.06em;
	}
	.entry-footer{
		margin-top: 30px;
		margin-bottom: 0px;
	}
}

/* 
	
	Link Post Format
	------------------------------------------------
*/

.achilles-format-link{
	text-align: center;
	padding-bottom: 70px;
	.achilles-link-bg{
		display: block;
		margin: 0 auto;
		background: $light-grey;
		color: white;
		height: 65px;
		width: 65px;
		border-radius: 50%;
		&:hover,
		&:active{
			@include animate(background, 320ms);
			background: $dark-grey;
		}
	}
}

/*
	Aside Post Format
	------------------------------------------------
*/

.achilles-format-aside{
	border-bottom: none;
	
	.xs-mg-top{
		margin-top: 20px;
		text-align: center;
	}
	.aside-container{
		background: rgba(0,0,0,0.05);
		padding-top: 20px;
	}
	@media only screen and (min-width : 770px) {
		.aside-featured{
			width: 136px;
			height: 136px;
			border-radius: 50%;
			margin: 20px 20px -20px;
		}
	}
	@media only screen and (max-width : 770px) {
		.aside-featured{
			width: 136px;
			height: 136px;
			border-radius: 50%;
			margin: 0 auto -20px;
		}	
	}
	.entry-excerpt{
		p{
			margin-top: 0;
			font-size: 15px;
		}
	}
	.entry-meta{
		margin-bottom: 5px;
	}
	.entry-footer{
		border-bottom: none;
		background: rgba(0,0,0,0.05);
		padding-bottom: 4px;
	}
}



/*
	Achilles Gallery Format
	------------------------------------------------
*/

.achilles-format-gallery {
	header { 
		h1 {
			&.entry-title { 
				margin-top: 20px;
				text-align: center;
			}
		}
	}
	.standard-featured { height: 400px; color: #ffffff;
		&:after { background-color: transparent; }
	}
	.image-caption{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		@extend %background-gradient;
	}
	.entry-meta{
		text-align: center;
	}
	.entry-footer{
	}
	
}

/*
	Achilles Sidebar Format
	------------------------------------------------
*/
.site-sidebar{
	border: 1px solid $lighter-grey;
	border-radius: 4px;
}
.sidebar{
	//background: rgba(0,0,0,0.05);
	ul{
		list-style: none;
		padding: 10px;
		text-align: center;
	}
	.r_s_h2{
		background: rgba(0,0,0,0.05);
		text-align: center;
		color: #222;
		padding: 5px;
		width: 100%;
		font-size: 22px;
		
	}
	a{
		&:hover,
		&:active{
			@include animate(all, 320ms);
			color: $light-grey;
			text-decoration: underline;
		}
	}
}

.calendar_wrap{
	width: 100%;
	text-align: center;
	padding-left: 50%;
	margin-left: -65px;
	td{
		padding: 2px;
	}
}

/*
	Achilles Comments Format
	------------------------------------------------
*/
#resond{
	clear: both;
}
#submit{
	border: none;
	padding: 8px 16px;
	border-radius: 4px;
	background: #222;
	color: #fff;
	&:hover,
	&:active{
		@include animate(all, 320ms);
		background: #333;
	}
}
#comment{
	min-width: 100%;
}
#commentform{
	p{
		a{
			color: $light-grey;
			font-weight: 500;
			&:hover,
			&:active{
				@include animate(all, 320ms);
				color: $dark-grey;
			}

		}
	}

}
.commentlist{
	list-style: none;
	margin:2px;
	padding:0;
	background: white;
	/*
	.children{
		width: 100%;
		margin-left: 10%;
		float: right;
		padding: 0;
		list-style: none;
		margin:2px;
	}
	*/
}
.comment-body{
	border: 0.5px solid $light-grey;
	padding: 20px;
	border-radius: 2px;
}

/*
	Achilles Shortcodes Format
	------------------------------------------------
*/
.accordion{
	width: 100%;
}
.accordion-button-container{
	display: block;
	width: 40px;
}
.accordion-button{
	font-size: 24px;
	padding: 0px 14px;
	min-width: 40px;

}
.accordion-data{
	display: block;
	margin-top: 15px;
	width: 95%;
	margin-left: 5%;
}


.icon_link_sc{
	list-style: none;
}
.icon_icon{
	margin-right: 10px;
}

//style classes
.danger{
	border-left: .5em #c9302c solid;
}
.info{
	border-left: .5em #31b0d5 solid;
}
.primary{
	border-left: .5em #286090 solid;
}
.warning{
	border-left: .5em #ec971f solid;
}
.default{
	border-left: .5em #e6e6e6 solid;
}
.success{
	border-left: .5em #449d44 solid;
}


/*
	Achilles Pagination
	------------------------------------------------
*/
.nav-links{
	.page-numbers{
		border: 1px solid $light-grey;
		border-radius: 5px;
		padding: 8px 16px;
		color: $light-grey;
		&:hover,
		&:focus{
			color: $dark-grey;
			border-color: $dark-grey;
		}
	}
}
.screen-reader-text{
	visibility: hidden;
}

/*
	Achilles Footer
	------------------------------------------------
*/

.page-footer{
	margin-top: 70px;
	padding-top: 10px;
	padding-bottom: 10px;
	background: #333;
	color: #fff;
	line-height: 30px;
}
.footer-widget-area{
	display: inline-block;
	float: left;
	width: 25%;
	ul{
		list-style: none;
		text-align: center;
		padding: 8px;
	}
	.r_s_h2{
		text-align: center;
		padding: 5px;
		width: 100%;
		font-size: 22px;
	}
	a{
		color: $light-grey;
		&:hover,
		&:focus{
			color: $lighter-grey;
		}
	}
}

/*
	Achilles Menu Below Content
	------------------------------------------------
*/
.menu_below_content{
	margin-top: 50px;
	ul{
		list-style: none;
	}
	li{
		display: inline-block;
	}
	a{
		@include animate(all, 320ms);
		padding: 8px 16px;
		color: $light-grey;
		border:1px solid $light-grey;
		&:hover,
		&:focus{
			color: $dark-grey;
			border-color: $dark-grey;
		}
	}
	.dropdown-menu{
		li{

		}
		a{
			color: $light-grey;
			border:none;
			&:hover,
			&:focus{
				color: $dark-grey;
			}
		}
	}
}
/*
	Achilles scroll item
	------------------------------------------------
*/
.scroll_top{
	display: none;
	position: fixed;
	right: 5%;
	bottom: 50px;
	padding: 20px 20px;
	border-radius: 1px;
	background: rgba(0,0,0,0.5);
	z-index: 10000;
	color: #fff;
	
	&:hover,
	&:focus{
		pointer:cursor;
	}
}

/*
	Achilles gallery post format 2
	------------------------------------------------
*/
/* The Gallery container (div) */
.gallery { }

/* A Gallery item container,
 for 3, 2 and 4 column galleries */
.gallery .gallery-item { }
.gallery-columns-2 .gallery-item { }
.gallery-columns-4 .gallery-item { }

/* The actual image inside a container
for 3, 2 and 4 column galleries */
.gallery img { }
.gallery-columns-2 .attachment-medium { }
.gallery-columns-4 .attachment-thumbnail { }

/* A gallery image caption */
.gallery .gallery-caption { }

/* Definition lists elements */
.gallery dl, .gallery dt { }

/* Pick the second line break if two
line breaks are adjacent */
.gallery br+br { }
/* Gallery */
.gallery { margin: 0; }
.gallery .gallery-item {
	float: left;
	margin-top: 0 !important;
	text-align: center;
	width: 33%;
}
.gallery-columns-2 .gallery-item { width: 50%; }
.gallery-columns-4 .gallery-item { width: 25%; }
.gallery img {
	box-shadow: 0px 0px 4px #999;
	border: 1px solid white;
	padding: 4px;
	background: #f2f2f2;
}
.gallery img:hover {
	background: white;
}
.gallery-columns-2 .attachment-medium {
	max-width: 92%;
	height: auto;
}
.gallery-columns-4 .attachment-thumbnail {
	max-width: 84%;
	height: auto;
}
.gallery .gallery-caption {
	color: #888;
	font-size: 12px;
	margin: 0 0 12px;
}
.gallery dl, .gallery dt { margin: 0; }
.gallery br+br { display: none; }

/*
//// ADS
*/
.header_ad{
	margin-top: 80px;
	max-width: 100%;
	min-height: 90px;
}
.header_mobile_ad{
	margin-top: 80px;
	max-width: 100%;
	min-height: 90px;
}
.below_ads{
	margin-top: 60px;
	width: 80%;
	margin-left: 10%;
	min-height: 320px;
}
.below_widgets_ad{
	max-width: 100%;
}


@media only screen and (max-width : 770px) {
	.header_ad{
		display: none;
	}
}
@media only screen and (min-width : 770px) {
	.header_mobile_ad{
		display: none;
	}
}


/* attachment page image size */

.attachment-page{
	.attachment img{
	
	}
}