:root {
	--blog-primary-color: #001c45;
	--blog-font-family: proxima-nova, sans-serif;
	--body-text-color: #000;
	--blog-secondary-color: red;
}

.container {position: relative;}

.text-blue { color: var(--blog-primary-color); }
.d-block { display: block; }
.h-align { display: flex; align-items: center; }
.placeholder {width: 100%; display: block;}
.placeholder img {position: absolute; top: calc(50% - 50px); left: calc(50% - 50px); height:100px; width: auto; text-align: center; opacity: 0.2}


.blog h1,
.single-post .h1 { font-size: 32px !important; margin-bottom: 24px; color: var(--blog-primary-color); line-height: 1; }
.blog, .single-post { color: #2f2f2f; }
.blog-top ul { list-style-type: none; padding-left: 0; margin-left: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 2px; }
.blog-top { border-bottom: 2px solid #b5b5b5; }
.blog-top ul { justify-content: flex-end; }
.blog-top ul li { margin-left: 24px; font-family: var(--blog-font-family); font-weight: 600; font-size:14px }
.blog-top ul li a:hover img { transform: translateY(-5px); }
.blog-top img { height: 24px; width: 24px; transition: transform .3s ease; }
.blog-top .socials a img {display:block;}
.blog .post-item { line-height: 1.1; }
.blog .post-item-cat a,
.blog span.post-item-cat { color: var(--blog-primary-color); text-transform: uppercase; font-size: 14px !important; font-weight: 700; letter-spacing: 1px; }
.blog .post-item-cat a:hover { color: #b5b5b5; }
.blog .post-item-big h3 a { font-weight: 500; font-family: var(--blog-font-family); font-size: 32px !important; line-height: 1.3; color: #2f2f2f; }
.blog .post-item-small h3 {}
.blog .post-item-small h3 a { font-family: var(--blog-font-family); font-size: 19px !important; color: #2f2f2f; font-weight: 500; line-height: 1.2 !important; display: block;}
.blog .post-item-small .ratio:before {padding-bottom: 70%}
.blog .post-item-small .placeholder img {width: 70px; height: 70px; margin: 15px 15px 0 15px;}
.blog .post-item .post-item-cat a { font-size: 11px !important; font-weight: 700; letter-spacing: 1px;}
.blog .post-item img { transition: transform .3s ease; }
.blog .post-item a:hover img { transform: scale(1.05); }
.blog .post-item h3 a:hover { color: var(--blog-primary-color); }
.blog .blog-posts-smaller .post-item:not(:last-of-type) { margin-bottom: 25px; }


.blog .newsletter-inner { padding: 25px; background: #e8e8e8; }
.blog .newsletter form { margin: 30px auto; width: 80%; display: flex; align-items: stretch; }
.blog .newsletter .gform_validation_errors { display: none !important; }
.blog .newsletter form .gform-body { flex-grow: 1; }
.blog .gform-body input { padding: 6px 8px; border-radius: 6px; border: 1px solid #bbbbbb; }
.blog .newsletter form .gform_footer { position: relative; height: auto; display: flex; align-items: center; margin-left: 20px; padding: 0; margin-top: 0; }
.blog .newsletter form .gform_footer input { height: 100%; margin-bottom: 0; background: var(--blog-primary-color); color: #fff; text-transform: uppercase; font-weight: 700; border: none; }
.blog .newsletter form .gform_footer input:hover { background-color: #b5b5b5; }
.blog .newsletter img.gform_ajax_spinner { position: absolute; right: -24px;  }
.blog .newsletter .gfield { position: relative; }
.blog .newsletter .gfield .validation_message { position: absolute; left: 0; top: 100%; padding: 3px 0; background-color: transparent; border: none; color: #c02b0a; margin: 0 !important; text-align: left; line-height: 1.1; font-size: 12px; }

.btn-back { flex-wrap: nowrap; display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; text-transform: uppercase; font-family: var(--blog-font-family); font-weight: 700; color: #fff; background: var(--blog-primary-color); border-radius: 0; letter-spacing: 1px; padding: 5px 20px 5px 10px;}
.btn-back:hover {color: #FFF;}
.btn-back img {transform: rotate(180deg); width: 10px; margin-right: 10px;}
.featured-top { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 2px solid #c3e7e8; }
.featured-top h3 { font-size: 20px; font-family: var(--blog-font-family); font-weight: 700; text-transform: uppercase; color: var(--blog-primary-color); }
.featured-top .btn { flex-wrap: nowrap; display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; text-transform: uppercase; font-family: var(--blog-font-family); font-weight: 700; color: #fff; background: var(--blog-primary-color); border-radius: 0; letter-spacing: 1px; }
.featured-top .btn:hover { background: var(--body-text-color); }
.featured-categories h2 { color: var(--body-text-color); font-size: 30px; margin-bottom: 50px; }
.featured .btn img { height: 10px; width: 10px; }
.featured .slick { margin: 0 -10px 85px; }
.featured .slick-slide { padding: 0 10px; }
.featured .slick-slide a { font-family: var(--blog-font-family); color: #2f2f2f; font-size: 18px !important; line-height: 1.3 !important; }
.featured .slick-slide a:hover img { transform: scale(1.05); }
.featured .slick-slide a img { transition: transform .3s ease; }
.featured .slick-dots { bottom: -52px; }
.featured .slick-dots li { margin: 0 10px; }
.featured .slick-dots li button:before { transition: all .3s ease; left: 50%; top: 50%; transform: translate(-50%, -50%); content: ''; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--body-text-color); }
.featured .slick-dots .slick-active button:before { background: black; border-color: black; }
.featured .slick-next { right: 0; transform: translate(100%, -50%); }
.featured .slick-prev { left: 0; transform: translate(-100%, -50%); }

.cloud { margin: 0 -8px -16px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.cloud a { color: #fff; background: var(--blog-primary-color); margin: 0 8px 16px; font-size: 12px; font-family: var(--blog-font-family); font-weight: 700; text-transform: uppercase; padding: 5px 20px; border-radius: 18px; display: inline-flex; }
.cloud a:hover,
.cloud a.is-active { background: var(--blog-secondary-color); }

.blog .posts .post-item { margin-bottom: 30px; }
.blog .posts .post-item a { font-size: 18px; line-height: 1.3; padding: 15px 20px; border: 1px solid #969697; color: #444444; }
.blog .posts .post-item a:hover { color: var(--blog-primary-color); }
.blog .posts .post-item-simple a { padding: 0; border: 0; }
.blog .posts .btn-more { color: #fff; background: var(--blog-primary-color); font-size: 15px; font-family: var(--blog-font-family); text-transform: uppercase; font-weight: 700; border-radius: 0; margin: 40px auto 100px; padding: 6px 25px; }
.blog .posts .btn:hover { background: var(--body-text-color); }
.blog .posts.is-loading .btn { pointer-events: none; opacity: .5; }
.blog .posts.is-loading .loader { opacity: 1; }
.blog #load-posts { position: relative; }
.blog #load-posts .loader { position: absolute; }

.blog .search-box { background: var(--blog-primary-color); padding: 20px; border-radius: 5px; }
.blog .search-box form { position: relative; }
.blog .search-box input[type="search"] { width: 100%; padding: 3px 8px; padding-left: 50px; border-radius: 6px; border: 1px solid #bbbbbb; font-size: 20px; }
.blog .search-box input[type="submit"] { transition: transform .3s ease; background-color: transparent; border: 0; padding: 5px; color: transparent; background-image: url('search.svg'); width: 24px; height: 24px; position: absolute; left: 13px; cursor: pointer; top: 50%; transform: translateY(-50%); filter: saturate(0%);}
.blog .search-box input[type="submit"]:hover { transform: translateY(-50%) rotate(-15deg); }
.blog .search-box button { cursor: pointer; display: flex; align-items: center; margin-left: auto; font-size: 24px; padding: 0; background-color: transparent; border: 0; text-transform: uppercase; color: #fff;  }
.blog .search-box button[aria-expanded="true"] .search-btn-container { height: 2px; }
.blog .search-box .search-btn-container { transition: height .3s ease; flex-direction: column; justify-content: space-between; margin-left: 12px; display: flex; width: 38px; height: 28px; }
.blog .search-box .search-btn-container span { width: 100%; height: 3px; background: #fff; display: block; transition: background .3s ease; }
.blog .search-box button:hover span span { background: #bbbbbb;  }
.blog #search-form { display: none; }
.blog .search-box .cloud a { border: 2px solid #fff; }
.blog .search-box .cloud a:hover,
.blog .search-box .cloud a.is-active { border-color: var(--blog-secondary-color); }
.blog .search-box { color: #bbbbbb; }
.blog .search-box input[type="search"]::placeholder { font-size: 20px; color: #bbbbbb !important; opacity: 1; }
.blog .search-box input[type="search"]::-ms-input-placeholder { font-size: 20px; color: #bbbbbb !important; opacity: 1; }

.search #upper { background: transparent; }


.blog-subnav {position: sticky; top: 20px; padding: 15px 15px 0; background-color: #fffdfd; border: 1px solid #ccc; overflow-y: auto; }
.blog-subnav a {display: block; margin: 5px 0 20px; text-decoration: none; color: #007bff; font-weight: 500; color: var(--blog-primary-color);}
.blog-subnav a:hover {text-decoration: underline; }
.blog-subnav .title {text-transform: uppercase; color: var(--blog-secondary-color); font-weight: 700; letter-spacing: 2px; font-size: 12px; margin-bottom: 15px;}




/* loader */
.loader,.loader:after {pointer-events: none;border-radius:50%;width:20px;height:20px}
.loader{opacity:0;pointer-events:none;padding:0;position:absolute;left:50%;bottom: 0;z-index:2;margin:-10px;text-indent:-9999em;border-top:2px solid rgba(0,0,0,.2);border-right:2px solid rgba(0,0,0,.2);border-bottom:2px solid rgba(0,0,0,.2);border-left:2px solid var(--blog-primary-color);transform:translateZ(0);transition:opacity .3s;animation:1.1s linear infinite loading}
@keyframes loading {from{transform:rotate(0)}to{transform:rotate(360deg)}}/* loader */

.single-post #upper { padding-top: 0; position: relative; }
.single-post #upper .ratio {min-height: 300px; }
.single-post #upper .ratio:after { content: ''; left: 0; right: 0; bottom: 0; position: absolute; z-index: 1; top: 0; background-image: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .7)); }
.single-post #upper .ratio.no-img:after { content: none; }
.single-post #upper h1 { z-index: 4; position: absolute; padding: 10px ;left: 20px; right: 20px; text-align: center; bottom: 45px; line-height: 1.2; font-size: 40px; font-weight: 700; text-transform: uppercase; text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.004);  color: #FFF; white-space: normal;}
.single-post #page-content li,
.single-post #page-content p {font-size: 17px !important}
.single-post .ratio:before {padding-bottom: 30%}
.single-post .share-menu {position: absolute; background: #FFF; padding: 15px; box-shadow: 0 2px 8px rgba(0,0,0,.2); z-index: 5; border-radius: 5px; display: none; text-align: left;}
.single-post .share-menu a {display: block; padding: 5px 0}
.single-post .share img {width: 25px;}
.single-post .share {font-size: 18px; position: relative; z-index: 5; cursor: pointer; left: 0; display: inline-block;}
.single-post .share:hover .share-menu {display: block;}


.contents ul { padding-left: 0; margin-left: 0; list-style-type: none; }
.contents ul a { color: #444; padding: 5px 0;display: inline-block; padding-left: 30px; border-left: 5px solid #d0d0d0; }
.contents ul a.is-active,
.contents ul a:hover { border-color: var(--blog-primary-color); }
.contents ul a:hover { color: var(--blog-primary-color); }

.category .post-item-big .ratio:before {padding-bottom: 74%}
.category .post-item-small {margin-bottom: 30px;}
.category .post-item-small .ratio:before {padding-bottom: 45%}
.category .post-item-small h3 {font-size: 20px;}

.hentry {padding: 30px 0; border-bottom: 1px solid #DDD}



@media (max-width: 767px) {


	.dropdown:hover>.dropdown-menu {display: block; }
	.dropdown-menu {background: rgba(0,0,0,0.5); visibility: visible; top: 95%; padding: 0; margin: 0;}
	.dropdown-menu li {padding: 0 !important; margin: 0 !important;}
	.dropdown-menu li:hover a {background: transparent;}
	.dropdown-menu li:hover a span {opacity: 1;}
	.dropdown-menu li a {padding: 5px 15px; display: block; margin: 0;}
	.dropdown-menu li a span {color: #FFF !important; opacity: 0.8; font-size: 12px;}

    .blog h1,
    .single-post h1 { font-size: 30px !important; }
    .blog .newsletter form { width: calc(100% - 20px); flex-direction: column; }
    .blog .newsletter form .gform_footer { margin-left: 0; margin-top: 30px; }
    .blog .newsletter form .gform_footer input { width: 100%; }

    .blog .post-item-small h3 a,
    .blog .post-item-big h3 a { font-size: 18px !important; }

    .blog .search-box button { width: 100%; justify-content: space-between; margin-left: 0; margin-top: 20px;  }

    .blog .posts .btn-more {margin-bottom: 0}

    .featured .slick-dots { bottom: -40px; }
    .featured .slick-dots li { margin: 0 2px; }

    .cloud { margin: 0 -4px -8px;}
    .cloud a { padding: 5px 18px; margin: 0 4px 8px; font-size: 10px; }

    .single-post #upper .container { padding: 0; }
    .single-post #upper h1 { bottom: unset; top: 50%; transform: translateY(-50%);font-size: 36px; }

    .blog-subnav {margin-bottom: 30px;}

    .featured-categories h2 {font-size: 20px !important; margin-bottom: 20px;}

}