/*
Theme Name: hromadske.volyn.ua
Description: Special theme
Version: 1.01
Text Domain: cehla
*/


body {
	font-size: 14px;
	color:#333;
	word-wrap: break-word;
}

p, li, li a, label {
	color: #333;
}


.img-responsive {
	display: inline-block;
}

.btn-hrom {
	color: #fff;
	background-color: #d52534;
	border-color: #d52534;
}
.btn-hrom:hover,
.btn-hrom:active,
.btn-hrom:focus {
	color: #fff;
	opacity: 0.95;
}

/* Додаємо додатковий клас, щоб створити на великих екранах відступ внизу */
@media(min-width:992px) {
	.lg-margin-bottom-30 {
		margin-bottom: 30px;
	}
}

/* Header
##############################################################################*/
.header > .container {
	position: relative;
}
.header .logo img {
	max-width: 300px;
}



/* На малих екранах зменшуємо лого і додаємо більші бокові відступи для мобільного меню */
@media(max-width:991px) {
	.header .logo img {
		max-width: 220px;
		margin: 8px 0;
	}
	
	.header .navbar-nav > li {
		padding-left: 5px;
		padding-right: 5px
	}
}


.header .navbar-nav > li > a {
	font-size: 14px;
}

@media(min-width:992px) {
	.header > .container {
		margin-bottom: -10px;
	}
	#nav {
		background-color: #2E3641;
	}
	
	#nav .navbar-nav > li > a {
		padding-left: 15px;
		padding-right: 15px;
	}
	
	#nav .navbar-nav > li.menu-item-has-children > a {
		padding-right: 30px;
	}
	
	#nav .navbar-nav > li > a,
	#nav .nav > li > .search {
		color: #ddd;
	}
	
	#nav .navbar-nav > li:hover > a,
	#nav .nav > li > .search:hover {
		color: #fff;
	}
	
	/* Search */
	#nav .nav > li > .search:not(:hover) {
		border-bottom-color: transparent;
	}
	#nav .nav > li > .search {
		background-color: transparent;
	}
	
	/* Search -- Close icon */
	#nav .nav > li > .search.fa-times {
		background-color: #fcfcfc;
		color: #2E3641;
		position: relative;
		z-index: 10;
	}
	#nav .nav > li > .search.fa-times:hover {
		color: #d52534;
		border-bottom-color: transparent;
	}
}

/* SN & top buttons */
.header .topbar {
	padding-top: 20px;
}
.header .header-socials {
	margin-top: 10px;
}
.header .header-socials a {
	display: inline-block;
	width: 30px;
	text-align: center;
	line-height: 30px;
	font-size: 20px;
	color: #666;
	background-color: #f6f6f6;
}
.header .header-socials a:hover {
	color: #000;
}


/* Container
##############################################################################*/
.breadcrumbs {
	padding: 10px 0;
}
.breadcrumb {
	top: auto;
	margin: 0;
	padding: 0;
}

#wrapper {
	word-wrap: break-word;
}


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

/* images */
#content article img {
	max-width: 100%;
	height: auto;
}
.wp-caption {
	max-width: 100%;
}

.thumb-responsive {
	display:block;
	height: 0;
	padding-bottom: 56.25%;
	background-size: cover;
	background-position: 0 0;
}

.thumb-responsive,
.embed-responsive {
	background-color: #eee;	
}

article {
	font-size: 15px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	color: #222;
}

/**
 * HOME
 */
#featured-posts {
	max-height: 500px;
	overflow: hidden;
}
#featured-posts .slick-slider {}

#featured-posts .slide {
	position: relative;
}
#featured-posts .slide {
	position: relative;
	display: block;
}
#featured-posts .thumb-responsive {
	padding-bottom: 280px;
	position: relative;
}
@media(min-width:768px) {
	#featured-posts .thumb-responsive { height:350px; }
}
@media(min-width:1024px) {
	#featured-posts .thumb-responsive { height:450px; }
}

#featured-posts .thumb-responsive:before {
	content: '';
	display: block;
	width: 100%;
	height: 100%;
    position: absolute;
	z-index: 6;
    left: 0;
    right: 0;
    bottom: 0;
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.7)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#77000000', GradientType=0);
}
#featured-posts .title {
    position: absolute;
	z-index: 7;
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    font-size: 24px;
    line-height: 1.2;
    padding: 20px;
}

#featured-posts .slick-arrow {
	position: absolute;
	z-index: 5;
    top: calc(50% - 36px);
	
	border: 0 none;
	border-radius: 50%;
	height: 36px;
	width: 36px;
	background-color: rgba(0,0,0,0.6);
	color: #ddd;
    font-size: 20px;
    line-height: 36px;
    text-align: center;
	transition: all 0.1s;
}
#featured-posts .slick-arrow:hover {
	color: #fff;
	background-color: rgba(0,0,0,1);
}
#featured-posts .slick-prev {
	left: 15px;
}
#featured-posts .slick-next {
	right: 15px;
}

#featured-posts .slick-dots {
	margin: 5px 0 0 0;
	padding: 0;
	text-align: center;
}
#featured-posts .slick-dots li {
	list-style: none;
	display: inline-block;
	margin: 0 4px;
}
#featured-posts .slick-dots li button {
	display: inline-block;
	border: 0;
	width: 8px;
	height: 4px;
	overflow: hidden;
	background-color: #2E3641;
}
#featured-posts .slick-dots li.slick-active button {
	background-color: #e32535;
}



#content .headline h2 a {
	color: inherit;
}
#content .block-grid-v2-info {
	padding: 10px 15px;
}
#content .block-grid-v2-info h3 {
	font-size: 18px;
	margin: 0;
}




/**
 * LOOP
 */
.archive-meta {
    padding: 15px;
    background: #eee;
    border: #ccc;
    font-size: 1.1em;
}


.edit-link a {
	color: #fff;
}

.sk-blog-author {
	margin-bottom: 10px;
}
.sk-blog-author img {
	margin-right: 5px;
}

@media(min-width:768px) {
	.post-in-loop .post-title {
		margin-top: -5px;
	}
}

/* Page Views */
.pageviews {
	margin-top: 13px;
	color: #777;
	font-size: 13px;
}
.pageviews span {
	font-size: 12px;
	margin-left: 3px;
}
@media(min-width:1024px) {
	.pageviews {
		text-align: right;
	}
}



/* Author archive page */
#author-info {}
#author-info img {
	margin: 0 20px 0 0;
}
#author-info {}


/**
 * SINGLE post
 */
#content .post-title {
	color: #222;
	line-height: 1.3;
	font-weight: bold;
}
#content .post-title a {
	color: inherit;
}
#content .post-title a:hover {
	text-decoration: underline;
}

@media(min-width:768px) {
	#content article .post-title {
		font-size: 30px;
	}
}
@media(min-width:992px) {
	#content article .post-title {
		font-size: 36px;
	}
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
	color: #222;
}

/* Quote */
blockquote {
    font-style: italic;
    font-family: serif;
    border-left-width: 7px;
    position: relative;
    padding-left: 46px;
}
blockquote:before {
    content: "\f10e";
    font: normal normal normal 14px/1 FontAwesome;
    font-size: 20px;
    position: absolute;
    left: 12px;
    top: 12px;
}
blockquote p {
	font-size: 20px;
	color: #333;
}



/**
 * Fotorama gallery
 */
.fotorama {
	background: #ececec;
	margin: 1em 0;
}

.fotorama>.fotorama__wrap {
	margin: 0 auto;
}

.fotorama__stage__frame .fotorama__caption {
	display: none;
}
.fotorama__stage__frame:hover .fotorama__caption {
	display: block;
}

.fotorama__caption {
	text-align: center;
}
.fotorama__caption .fotorama__caption__wrap {
	color: #fff;
	background: #000;
	background: rgba(0,0,0,0.7);
	font-size: 11px;
	display: inline-block;
	margin: 0 auto;
}


.post .fotorama__stage {
	margin-bottom: 7px;
}

/*.post .fotorama__thumb-border {display: none;}*/

.post .fotorama__nav--thumbs .fotorama__nav__frame {opacity: 0.6; /*margin: 0 3px 0 0;*/}

.post .fotorama__nav--thumbs .fotorama__nav__frame:hover {opacity: 0.9;}
.post .fotorama__nav__frame.fotorama__active {opacity: 1;}
/**/




/* Sidebar
##############################################################################*/
#sidebar {}

#sidebar .widget ul {
	margin: 0;
	padding: 0 0 0 15px;
}


#sidebar .itc-latest-posts-widget {
    padding: 0 15px 15px 15px;
    border: 1px solid #ddd;
    background: #e9eaed;
}

#sidebar .widget-title {
	color: #222;
	font-weight: bold;
}

#sidebar .widget-title a {
	color: inherit;
}

#sidebar .itc-latest-posts-widget .post + .post {
	margin-top: 15px;
    border-top: 1px solid #ddd;
    margin: 10px -15px 0 -15px;
    padding: 10px 15px 0 15px;
}
#sidebar .itc-latest-posts-widget .col-img {
    width: 90px;
    float: left;
    margin-right: 10px;
}
#sidebar .itc-latest-blog-posts-widget .col-img { /* У блоґів замість картинки, виводимо аватарку юзера з меншим розміром */
	width: 60px;
}

/* На великих і малих екранах робимо картинки вищими, щоб гарніше виглядало (бо там сайдбар невеликої ширини) */
@media(min-width:992px) {
	#sidebar .thumb-responsive {
		padding-bottom: 75%;
	}
}


#sidebar .itc-latest-posts-widget .col-txt {
	overflow: hidden;
}
#sidebar .itc-latest-posts-widget .col-txt a {
	color: #585f69;
}
#sidebar .itc-latest-posts-widget .col-txt a:hover {
	color: #e32535;
}

#sidebar .itc-latest-posts-widget .post-meta {
	margin-top: 7px;
	font-size: 0.9em;
	color:#777;
}
#sidebar .itc-latest-posts-widget .post-meta a {
	color: inherit;
}


/* Footer
##############################################################################*/
#footer .footer  {
	padding: 20px 0
}
#footer .menu {
	margin: 0;
	padding: 0;
}
#footer .menu li {
	list-style: none;
	display: inline-block;
	margin-top: 5px;
}
#footer .menu li + li {
	margin-left: 10px;
}
#footer .menu li a {
	color: #ddd;
}
#footer .menu li a:hover {
	color: #fff;
}

#footer .footer-socials {
	margin: 0;
	text-align: right;
}
#footer .footer-socials li a {
    color: #272727;
    background-color: #ddd;
    display: inline-block;
    border-radius: 50%;
    width: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 19px;
}
#footer .footer-socials li a:hover {
	background-color: #fff;
}

#footer .copyright {
	font-size: 13px;
	color: #ddd;
}

@media(max-width:479px) {
	#footer .menu li {
		display: block;
	}
	#footer .menu li+li {
		margin-top: 10px;
		margin-left: 0;
	}
}

@media(max-width:767px) {
	#footer .menu {
		margin-bottom: 20px;
		text-align: center;
	}
	#footer .footer-socials {
		text-align: center;
	}
	#footer .footer-socials a {
		font-size: 26px;
	}
}



/* Сайдбар фіксованої ширини у 300px */
@media(min-width:992px) {
	#content {
		width: calc(100% - 330px);
	}
	#sidebar {
		width: 330px;
	}
}