@charset "utf-8";
/* CSS Document */


@font-face {
    font-family: 'Gudea';
    src: url('../fonts/gudea-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Gudea';
    src: url('../fonts/gudea-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Gudea';
    src: url('../fonts/gudea-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Lobster';
    src: url('../fonts/lobstertwo-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Lobster';
    src: url('../fonts/lobstertwo-italic.woff') format('woff');
    font-weight: 400;
    font-style: Italic;
}
@font-face {
    font-family: 'Lobster';
    src: url('../fonts/lobstertwo-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: 'Lobster';
    src: url('../fonts/lobstertwo-bolditalic.woff') format('woff');
    font-weight: 700;
    font-style: Italic;
}


@font-face {
font-family: 'Icomoon';
src: url('../fonts/icomoon.woff') format('woff');
font-weight: normal;
font-style: normal;
}

[class*="icon"] {
font-family: 'Icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}


html {
height: 100%;
box-sizing: border-box;
}

*, *::before, *::after {
box-sizing: inherit;
}

:root {
--link: #e10000;
--link_hover: #393;
--tag: #e8e8e8;
--tag_active: #444;
}


body {
min-height: 100%;
margin: 0;
padding: 0;
font: 18px/normal "Gudea", sans-serif;
color: #000;
background-color: #fff;
}

a {
text-decoration: none;
outline: none;
color: var(--link);
}
a:hover,
a:focus {
color: var(--link_hover);
}

p {
margin: 0 0 15px;
}
img {
display: block;
border: none;
}

.wrapper {
min-height: 100vh;
max-width: 1400px;
padding: 0 40px;
margin: 0 auto;
}

#home_container {
margin-left: 60px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: auto;
gap: 2px;
}
#home_container .item {
font-size: 26px;
font-weight: 700;
line-height: 1.2;
background-color: #eee;
}
#home_container a {
display: block;
position: relative;
color: #fff;
}



#home_container img {
width: 100%;
}

.article_title {
text-align: center;
padding: 20px;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
transition: all .5s;
place-items: center;
display: grid;
opacity: 0;
}
#home_container .item:hover .article_title {
opacity: 1;
}


#container h1 {
margin: 0 0 20px;
font-size: 30px;
font-weight: 400;
line-height: normal;
}

h2.hallo {
font-family: "Lobster";
font-size: 30px;
font-style: italic;
color: var(--link);
margin: 0 0 15px;
}
h3 {
margin: 20px 0 15px;
font-size: 17px;
line-height: normal;
text-transform: uppercase;
}


#container {
margin-bottom: 60px;
display: grid;
grid-template-columns: 10px 1fr 2fr;
grid-template-rows: auto 1fr;
gap: 0 50px;
line-height: 1.4;
}

.single #container {
grid-template-columns: 10px 1fr 1fr;
}


.item.desc {
grid-column: 2 / 3;
grid-row: 1 / 2;
}

.item.tags {
grid-column: 2 / 3;
grid-row: 2 / 3;
}

.copyright {
grid-column: 1 / 3;
grid-row: 3 / 4;
display: grid;
align-content: end;
font-size: 15px;
line-height: 1;
}

.item.display {
grid-column: 3 / 4;
grid-row: 1 / 3;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 50px 30px;
align-items: start;
}

.single .item.display {
grid-template-columns: repeat(auto-fill, minmax(260px, 450px));
}

.pagenav {
grid-column: 3 / 4;
grid-row: 3 / 4;
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 30px;
}










.display .item {
display: grid;
}
.display .image {
position: relative;
background-color: #eee;
border: 5px solid #eee;
}
.display .image::before {
content: "";
padding-top: 100%;
display: block;
}

.display .image a {
display: block;
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
}



.display .image img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}

.display .caption {
padding-top: 30px;
font-size: 16px;
}





.tags_menu {
margin: 0 0 40px 60px;
padding: 20px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}


.tags_container {
margin: 30px 0;
padding: 20px 0;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
#container .tags_container a,
.tags_menu a {
display: inline-block;
font-size: 14px;
line-height: 1;
font-weight: 700;
text-transform: uppercase;
padding: 10px 12px; 
color: #000;
margin: 4px 2px;
background-color: var(--tag);
border-radius: 3px;
}

#container .tags_container a.active,
.tags_menu a.active {
color: #fff;
background-color: var(--tag_active);
}
#container .tags_container a:hover,
#container .tags_container a:focus,
#container .tags_container a.active:hover,
#container .tags_container a.active:focus,
.tags_menu a:hover,
.tags_menu a:focus {
color: #fff;
background-color: var(--link);
}
.tags_menu a.active:hover {
background-color: #444;
}

header {
padding: 70px 0 45px;
font-size: 40px;
font-weight: 700;
line-height: 1;
}
header a {
color: #000;
}
header a:hover,
header a:focus {
color: var(--link);
}

header span a {
font-family: "Lobster";
font-size: .8em;
font-weight: 700;
font-style: italic;
color: var(--link);
white-space: nowrap;
}
header span a:hover,
header span a:focus {
color: #fff;
color: var(--tag_active);
}


.home_footer {
margin-top: 50px;
padding: 0 0 40px;
}
.home_footer::before {
content: "";
display: block;
width: 160px;
border-top: 1px solid #ddd;
}

.article_footer {
font-size: 15px;
padding: 45px 0;
display: grid;
grid-template-columns: 1fr 2fr;
gap: 0 110px;
}



footer h3,
.tags h3 {
margin: 15px 0;
font-size: 17px;
text-transform: uppercase;
}

.social {
margin-bottom: 30px;
}

.social a {
display: inline-block;
margin-right: 5px;
color: #999;
font-size: 30px;
line-height: 1;
}
.social a:hover {
color: var(--link);
}
.social a.fb:before {
content: "\e61c";
}
.social a.in:before {
content: "\e61d";
}
.social a.be:before {
content: "\e900";
}
.copyright p {
margin: 0;
line-height: normal;
}
.copyright p:first-child {
margin: 0 0 5px;
}

.item.copyright p:first-child::before {
content: "";
display: block;
width: 60px;
padding-top: 20px;
border-top: 1px solid #ddd;
}

/* page navigation */


.pagenav a {
flex: 0;
color: #444;
font: normal 28px/45px "Icomoon", sans-serif;
}
.pagenav a:hover {
color: var(--link);
}
.pagenav a.inactive {
color: #999;
}
.pagenav a.prev:before {
content: "\f060";
}
.pagenav a.next:before {
content: "\f061";
}

/* end page navigation */




/* to top */
.fixed {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
z-index: 200;
}
.fixed a {
display: block;
width: 30px;
height: 30px;
margin: 0 auto;
text-align: center;
color: #fff;
background-color: rgba(102, 102, 102, 0.8);
border-radius: 15px;
}
.fixed a:hover {
background-color: var(--link);
}
#to_top:before {
content: "\f062";
font: normal 12px/30px "Icomoon";
color: #fff;
}
/* end to top */





@media all and (max-width: 1400px) {

#home_container .item {
font-size: calc(16px + 6 * ((100vw - 320px) / 680));
}

.fixed {
right: 40px;
}

}




@media all and (max-width: 1199px) {

#home_container,
.tags_menu {
margin-left: 0;
}

#container {
grid-template-columns: 1fr 2fr;
}
.single #container {
grid-template-columns: 2fr 1fr;
}


.item.desc {
grid-column: 1 / 2;
}

.item.tags {
grid-column: 1 / 2;
}

.copyright {
grid-column: 1 / 2;
}

.item.display {
grid-column: 2 / 4;
}

.pagenav {
grid-column: 2 / 4;
}

}


@media all and (max-width: 1087px) {

#home_container {
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

}



@media all and (max-width: 1023px) {

#container {
grid-template-columns: 1fr 1fr;
}

}



@media all and (max-width: 1024px) {

#home_container a {
color: #000;
}
#home_container .item:hover {
background-color: #000;
}
#home_container .item:hover a {
color: #fff;
}
.article_title {
font-size: 16px;
font-weight: 700;
position: static;
padding: 10px 15px 15px;
opacity: 1;
background-color: transparent;
transition: none;

}

}



@media all and (max-width: 885px) {

#home_container {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}

}



@media all and (max-width: 768px) {

#container {
display: block;
}

.item.desc {
margin-bottom: 40px;
}
.item.display {
gap: 40px;
}

.item.copyright p:first-child::before {
width: 110px;
}

.fixed {
width: 100%;
bottom: 10px;
right: 0;
}

}



@media all and (max-width: 499px) {

.wrapper {
padding: 0 30px;
}
header {
padding: 70px 0 45px;
font-size: 36px;
font-weight: 700;
line-height: 1;
}


}








/* Magnific Popup CSS */

.image-link {
}
.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #000;
opacity: 0.85;
}

.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden;
}
.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.mfp-align-top .mfp-container:before {
display: none;
}
.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045;
}
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content {
width: 100%;
max-width: 640px;
cursor: auto;
}
.mfp-ajax-cur {
cursor: progress;
}
.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
}
.mfp-auto-cursor .mfp-content {
cursor: auto;
}
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.mfp-loading.mfp-figure {
display: none;
}
.mfp-hide {
display: none !important;
}
.mfp-preloader {
color: #CCC;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044;
}
.mfp-preloader a {
color: #CCC;
}
.mfp-preloader a:hover {
color: #FFF;
}
.mfp-s-ready .mfp-preloader {
display: none;
}
.mfp-s-error .mfp-content {
display: none;
}
button.mfp-close,
button.mfp-arrow {
overflow: visible;
cursor: pointer;
color: #999;
background-color: transparent;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
box-shadow: none;
touch-action: manipulation;
}

.mfp-ajax-holder button.mfp-close:hover,
.mfp-ajax-holder button.mfp-close:focus {
color: red;
}
button::-moz-focus-inner {
padding: 0;
border: 0;
}
.mfp-close {
width: 40px;
height: 40px;
line-height: 40px;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
text-align: center;
color: #999;
font-style: normal;
font-size: 30px;
font-family: 'Asap', Arial, sans-serif; 
font-weight: 400;
}
.mfp-close:hover {
color: #fff;
}
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close {
right: -6px;
text-align: right;
padding-right: 6px;
width: 100%; 
background: transparent;
}
.mfp-counter {
display: none;
color: #fff;
font-size: 12px;
line-height: 18px;
text-align: center;
white-space: nowrap;
}
.mfp-arrow {
position: absolute;
opacity: 0.65;
margin: 0;


top: 50%;
margin-top: -55px;
padding: 0;
width: 90px;
height: 110px;
-webkit-tap-highlight-color: transparent;
}
.mfp-arrow:active {
margin-top: -54px;
}
.mfp-arrow:hover,
.mfp-arrow:focus {
opacity: 1;
}
.mfp-arrow:before,
.mfp-arrow:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 0;
top: 0;
margin-top: 35px;
margin-left: 35px;
border: medium inset transparent;
}
.mfp-arrow:after {
border-top-width: 13px;
border-bottom-width: 13px;
top: 8px;
}
.mfp-arrow:before {
border-top-width: 21px;
border-bottom-width: 21px;
opacity: 0.7;
}
.mfp-arrow-left {
left: 0;
}
.mfp-arrow-left:after {
border-right: 17px solid #FFF;
margin-left: 31px;
}
.mfp-arrow-left:before {
margin-left: 25px;
border-right: 27px solid #3F3F3F;
}
.mfp-arrow-right {
right: 0;
}
.mfp-arrow-right:after {
border-left: 17px solid #FFF;
margin-left: 39px;
}
.mfp-arrow-right:before {
border-left: 27px solid #3F3F3F;
}

.mfp-iframe-holder {
padding-top: 40px;
padding-bottom: 40px;
}
.mfp-iframe-holder .mfp-content {
line-height: 0;
width: 100%;
max-width: 900px;
}
.mfp-iframe-holder .mfp-close {
top: -40px;
}
.mfp-iframe-scaler {
width: 100%;
height: 0;
overflow: hidden;
padding-top: 56.25%;
}
.mfp-iframe-scaler iframe {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
background: #fff;
}
img.mfp-img {
width: auto;
max-width: 100%;
height: auto;
display: block;
line-height: 0;
box-sizing: border-box;
padding: 40px 0 40px;
margin: 0 auto;
}
.mfp-figure {
line-height: 0;
}
.mfp-figure:after {
content: '';
position: absolute;
left: 0;
top: 40px;
bottom: 40px;
display: block;
right: 0;
width: auto;
height: auto;
z-index: -1;
-webkit-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.3);
background: #444;
}
.mfp-figure small {
color: #BDBDBD;
display: block;
font-size: 12px;
line-height: 14px;
}
.mfp-figure figure {
margin: 0;
}
.mfp-bottom-bar {
margin-top: -36px;
position: absolute;
top: 100%;
left: 0;
width: 100%;
cursor: auto;
}
.mfp-title {
text-align: center;
font-size: 15px;
line-height: normal;
color: #F3F3F3;
word-wrap: break-word;
padding: 15px 15px 0 15px;
}
.mfp-image-holder .mfp-content {
max-width: 100%;
}
.mfp-gallery .mfp-image-holder .mfp-figure {
cursor: pointer;
}
.mfp-zoom-in {
.mfp-with-anim {
opacity: 0;
transition: all 0.6s ease-in-out; 
transform: scale(0.9); 
}
&.mfp-bg {
opacity: 0;
transition: all 0.4s ease-out;
}

/* animate in */
&.mfp-ready {
.mfp-with-anim {
opacity: 1;
transform: scale(1); 
}
&.mfp-bg {
opacity: 0.8;
}
&.mfp-removing {
.mfp-with-anim {
transform: scale(0.8); 
opacity: 0;
}
&.mfp-bg {
opacity: 0;
}
.mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.4s ease-out; 
-moz-transition: opacity 0.4s ease-out; 
-o-transition: opacity 0.4s ease-out; 
transition: opacity 0.4s ease-out;
}
.mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.75;
}
.mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
.mfp-img-mobile .mfp-image-holder {
padding-left: 0;
padding-right: 0;
}
.mfp-img-mobile img.mfp-img {
padding: 0;
}
.mfp-img-mobile .mfp-figure:after {
top: 0;
bottom: 0;
}
.mfp-img-mobile .mfp-figure small {
display: inline;
margin-left: 5px;
}
.mfp-img-mobile .mfp-bottom-bar {
background: rgba(0, 0, 0, 0.6);
bottom: 0;
margin: 0;
top: auto;
padding: 3px 5px;
position: fixed;
box-sizing: border-box;
}
.mfp-img-mobile .mfp-bottom-bar:empty {
padding: 0;
}
.mfp-img-mobile .mfp-counter {
right: 5px;
top: 3px;
}
.mfp-img-mobile .mfp-close {
top: 0;
right: 0;
width: 35px;
height: 35px;
line-height: 35px;
background: rgba(0, 0, 0, 0.6);
position: fixed;
text-align: center;
padding: 0;
}
}
@media all and (max-width: 900px) {
.mfp-arrow {
-webkit-transform: scale(0.75);
transform: scale(0.75);
}
.mfp-arrow-left {
-webkit-transform-origin: 0;
transform-origin: 0;
}
.mfp-arrow-right {
-webkit-transform-origin: 100%;
transform-origin: 100%;
}
.mfp-container {
padding-left: 6px;
padding-right: 6px;
}
}