/*
 * Theme Name: Reference
 * Version: 1.1
 * Description: Ekonomické stavby
 * Author: Ekonomické stavby - AiMedia
*/

:root {
  --green:#61b117; 
  --green-dark:#489500;
  --khaki:#72855f;
  --purple:#c70caa;
  --blue:#252d83;
  --blue-gray:#2d5272;
  --blue-light:#0B6FC7;

  --white: #ffffff;
  --black: #000000;
  --text-default: #000000;
  --border-default: #D9D9D9;
}

.bronze { color: var(--bronze);}
.bronze-middle { color: var(--bronze-middle);}
.bronze-dark { color: var(--bronze-dark);}
.white { color: var(--white);}
.black { color: var(--black);}

body {
    font-family: "Roboto", serif !important;
    margin: 0;
    padding: 0;
    background-color: var(--white);
    color: var(--black);
}

p:empty { padding:0 !important; margin:0 !important; }

header {
	border-bottom:1px solid var(--green);
	height: 80px;
	display:block;
	margin-bottom:0.5em;
	position:sticky;
	top:0;
	z-index:900;
	background-color:var(--white);
}

#top-menu { display:none; margin-left: auto; list-style-type:none; }
#top-menu li { float: left; margin:0 0.5em; }
#top-menu a { padding:0.5em; font-size:1.5em; color:var(--black); text-decoration:none; text-decoration:none; text-transform:uppercase; }

.module { padding: 2vw 4vw; }
.module h3 { font-weight:500; color:var(--green); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--green); margin:0 0 3vw 0; padding:2vw 0; }
.module h3 span { font-weight:300; }


/* posts-list */
#posts-list a {  }
#posts-list .list-items a { color: var(--black); text-decoration:none; }
#posts-list .list-items h4 { text-transform:uppercase; letter-spacing:1px; font-family: "Noto Sans", sans-serif !important; font-size:5vw;  }
#posts-list .list-items p { font-weight:300; padding:0; margin:0.5em 0; letter-spacing:1px; line-height:5vw;  }
#posts-list .list-items .list-item { border-bottom:1px solid var(--green); padding-bottom:10vw;  }
#posts-list .list-items .list-item:last-child  { border-bottom: none; }
#list-more { font-weight:600; letter-spacing:0.2em; padding:0.8em 1.5em; color:var(--white); background-color:var(--green); border:none; text-transform:uppercase; border-radius:10px; margin:0 auto; display:flex; }



header .wrapper { display:flex; height:100%; align-items: center; justify-content: space-between; position: relative; padding:0vw 3vw; }
.hdr-logo-link { position: absolute;left: 50%;transform: translateX(-50%); }
.hdr-logo-link img { width:100px; vertical-align:middle; }
.top-nav { margin-left: auto; padding-right:1em; }
.top-nav img { width:25px; vertical-align:middle; }
.header-image { margin:0 auto; display:flex; }
.header-image img { margin:0 auto; margin-top:-4em; display:flex; max-width:150px;  }


/* menu */
#sliding-menu { width:250px; height:100%; background-color:var(--white); color:white; position:fixed; top:0; left:-250px; transition:left 0.3s ease; z-index:999; }
#sliding-menu ul { list-style-type: none; padding: 20px; }
#sliding-menu ul li { margin: 15px 0; }
#sliding-menu ul li a { color:var(--black); text-decoration:none; font-size:1.2em; line-height:2em; }
#sliding-menu.active { left:0; }
#sliding-menu ul { list-style-type: none; padding: 20px; }
#sliding-menu ul li { margin:15px 0; }
#sliding-menu #menu-header { padding:20px; border-bottom:1px solid var(--bronze-light); height:40px; }
#sliding-menu #menu-header #menu-logo { width:120px; float:left;  }
#sliding-menu #menu-header #menu-close { font-size:1.7em; float:right; color:var(--bronze-dark); font-weight:900; width:40px; text-align:right; cursor:pointer; }


/* post */
.article-header .image-wrapper { width:100%; height:80vw; overflow:hidden; position:relative; }
.article-header .image-wrapper img { position:absolute; top:50%; left:50%; width:auto; height:100%; transform:translate(-50%, -50%); }
.article-h1 { font-family: "Noto Sans", sans-serif !important; font-size:4.5vw; color:var(--white); text-transform:uppercase; background:var(--green); margin: 0; padding: 3vw 6vw; letter-spacing:1px; }

.author-image { padding:7vw 0; }
.author-image img { display:block; border-radius: 50%; width:100px; height:100px; margin:0 auto; }
.post-intro { padding: 0vw 5vw; letter-spacing:1px; }
.post-author { padding: 0vw 5vw;  }
.post-author p { padding-bottom:1vw; font-style:italic; text-align:right; border-bottom:1px solid var(--green); }

.article-body { padding:2vw 0; }
.article-body p { font-size:5vw; padding:2vw 8vw; font-weight:300; line-height:1.5em; text-align:justify; }
.article-body p strong { text-align:left; }

.article-body .post-tags { padding:0vw 4vw; margin:1vw 0; }
.article-body .wp-block-image { padding:0vw 4vw; border-radius:1em; }
.article-body .wp-block-image img { display:block; margin:0 auto; }


.cat1 { background-color:var(--purple); }
.cat2 { background-color:var(--green); }
.cat3 { background-color:var(--blue-light); }
.cat4 { background-color:var(--blue-gray); }



.tag-link { display: inline-flex; align-items: center; position: relative; color:#FFF; text-decoration:none; padding:0.5em 1em 0.5em 2em; border-radius: 20px; border-top-right-radius: 10px; border-bottom-right-radius: 10px; margin:0.5vw }
.tag-link::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}
#tags .tag-link { margin:2vw 1vw }



/* swiper */
.swiper-container {
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.main-swiper { width: 100%;	height: 20em; border-radius:5px; }
.main-swiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.main-swiper-thumbs-container {	width: 100%; margin-top: 0em; background:rgba(97, 177, 23, .1); padding-top:0.5em; }
.main-swiper-thumbs-container .swiper-wrapper {	display:flex; flex-wrap: wrap; }
.main-swiper-thumbs-container .swiper-wrapper .swiper-thumb { flex: 0 0 20%; height:4.5em; padding:5px; box-sizing:border-box; }
.main-swiper-thumbs-container .swiper-wrapper .swiper-thumb img { width: 100%; height: 100%; border-radius:5px; object-fit: cover; }


.tag-header { font-family: "Noto Sans", sans-serif !important; font-size:16px; text-transform:uppercase; font-weight:bold; letter-spacing:1px; }
.big-tag { font-size:18px; margin-bottom:20px; letter-spacing:1px; }

.video-container {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
	height: 0;
	overflow: hidden;
	max-width: 100%;
}

.video-container iframe,
.video-container object,
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/* Home */
.green { position:relative; font-size: 18px; color:var(--white); background-color:var(--green); border-radius:1em; letter-spacing:1px; text-align:center; padding: 1em; margin:4em 1.5em 3em 1.5em; line-height:1.5em; }
.green .module-text { border-bottom:1px solid var(--white); padding-bottom:1em; margin-bottom:1em }
.green .module-name { font-size:24px; font-style:italic; font-weight:300; }
.green .butterfly { position:absolute; width:7em; top:-4em; left:-2em; }
.slogan { display:none; text-align:center; text-transform:uppercase; font-family: "Noto Sans", sans-serif !important;letter-spacing:1px;   }



.comment-box {}
.blog-comment { margin-bottom:1em; border-bottom:1px dashed var(--green) }
.comment-form textarea { font-family: "Roboto", serif !important; width:100%; margin-bottom:1em; padding:0.5em; box-sizing: border-box; border-radius:1em; }
.comment-form button { font-weight:600; letter-spacing:0.2em; padding:0.8em 1.5em; color:var(--white); background-color:var(--black); border:none; text-transform:uppercase; border-radius:10px; }


footer { text-align: center; padding: 1rem; background-color: var(--white); color: black; margin-top: 2em; }



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

/* home */
#home-intro .video-wrapper { max-width: 90%;margin: 0 auto; border-radius:15px; }
#home-intro .video-container { border-radius:15px; }
#home-module { display:flex; width: 90%; margin:0 auto; }
.green { width:35%; margin:-2em 4em 3em 4em; padding: 2em; line-height:2em; }
.green .butterfly { width:13em; top:-5em; left:-8em; }
.slogan { display:block; width:45%; margin-top:0.5em; font-size:32px; }
.slogan img { width:60%; }
.slogan p { font-size:1em; }

/* post */
.article-body p { font-size: 140%; }
.author-image img { display:block; border-radius: 50%; width:15%; height:15%; margin:0 auto; }
.post-intro { font-size: 2vw; }



/* posts-list */
#posts-list .list-items { width:100%; margin:0 auto; }

#posts-list .list-items h4 { font-size:2vw; margin-bottom: 1.5em; }
#posts-list .list-items p {  line-height:1.2em;  }
#posts-list .list-items .list-item { display:flex; padding-bottom:2vw; }
.author-image { flex: 0 0 auto; margin-right: 5em; }
.author-image img { width: 150px; height:150px }
.list-item h4, .list-item-intro { margin: 0; }
.list-item-intro { font-size:1.2em; }
#posts-list .author-image {  padding:0;  }



/* swiper */
.main-swiper { height: 50vw; }
.main-swiper-thumbs-container { width: 85%; padding: 2vw; }
.main-swiper-thumbs-container .swiper-wrapper .swiper-thumb { height:10vw; padding:10px; } 


.tag-header { font-size: 1.5em; }
.big-tag { font-size: 3vw; margin-bottom: 2em !important; }
.tag-link { padding:0.5em 1em 0.5em 2em; border-radius: 4vw; border-top-right-radius: 2vw; border-bottom-right-radius: 2vw; margin:0.5vw }
.tag-link.big-tag::before { width: 1.5vw; height: 1.5vw; }

.comment-form textarea { font-size:1em; padding:0.8em; }



}


@media (min-width: 1440px) {

body { width:1440px; margin:0 auto; }
header { margin-bottom:1.5em; }

#top-menu { display:block; }
#menuToggle { display:none; }

.module { width: 1280px; margin:0 auto; padding: 2vw 4vw; }
.module h3 { font-weight:500; color:var(--green); text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid var(--green); margin:0 0 30px 0; padding:20px 0; }
.module h3 span { font-weight:300; }



header .wrapper { align-items: center; justify-content: inherit; padding:0vw; }
.hdr-logo-link { position: relative; left:inherit; transform:inherit; padding-left:1em; }


/* post */
.article-header .image-wrapper { width:1280px; height:720px; margin:0 auto; border-radius:15px; }
.article-h1 { display:inline-block; position:relative; font-size:46px; margin-top:-50px; padding:10px 40px; letter-spacing:1px; border-radius:15px; z-index:10; }

.article-intro { display:flex; flex-wrap: wrap; width:1280px; margin:100px auto 50px auto; }
.author-image { flex: 0 0 20%; justify-content:center; padding:0; }
.author-image img { width:180px; height:180px; margin:0; }
.post-intro { flex: 0 0 80%; align-items: center; padding:0; font-size:24px; }
.post-intro p { margin:0 0 20px 0; }
.post-author { flex: 0 0 100%; text-align: center; padding:0; }
.post-author p { font-size:24px; padding-bottom:10px; border-bottom:4px solid var(--green); }

.article-body { width:1280px; margin:0 auto; padding:0; }
.article-body p { width:800px; margin:0 auto; font-size:20px; padding:20px 0; }
.article-body p strong { font-size:24px; text-align:left; }

.article-body .post-tags { font-size:18px; padding:0 120px; margin:1vw 0; }
.article-body .wp-block-image { width:1050px; margin:0 auto; border-radius:15px; }
.article-body .wp-block-image img { border-radius:15px; }


/* swiper */
.main-swiper { width: 1280px; height: 850px; border-radius:15px; }
.main-swiper-thumbs-container {	width:85%; margin-top: 0em; padding:30px; }
.main-swiper-thumbs-container .swiper-wrapper .swiper-thumb { flex: 0 0 20%; height:150px; padding:5px; box-sizing:border-box; }
.main-swiper-thumbs-container .swiper-wrapper .swiper-thumb img { border-radius:15px; }

.comment-form textarea { font-size:1em; padding:0.8em; }



/* home */
#home-intro .video-wrapper { max-width: 1280px;margin: 0 auto; border-radius:15px; }
#home-intro .video-container { border-radius:15px; }
#home-module { display:flex; width: 1280px; margin:0 auto; }
.green { width:35%; margin:-2em 4em 3em 4em; padding: 2em; line-height:2em; }
.green .butterfly { width:13em; top:-5em; left:-8em; }
.slogan { display:block; width:45%; margin-top:0.5em; font-size:32px; }

/* posts-list */
#posts-list .list-items { width:1180px; margin:0 auto; }
#posts-list .list-items h4 { font-size:1.5vw; margin-bottom: 1em; }
#posts-list .list-items p {  line-height:1.3em;  }
#posts-list .list-items .list-item { display:flex; padding-bottom:2em; }
.author-image { flex: 0 0 auto; margin-right: 5em; }
.author-image img { width: 150px; height:150px }
.list-item h4, .list-item-intro { margin: 0; }
.list-item-intro { font-size:20px; }


/* tags */
.tag-header { font-size: 1.5em; }
#tags .tag-link { margin:0.5vw 0.5vw }
.big-tag { font-size: 3em; margin-bottom: 2em !important; }
.tag-link { padding:0.5em 1em 0.5em 2em; border-radius: 4vw; border-top-right-radius: 2vw; border-bottom-right-radius: 2vw; margin:0.5vw }
.tag-link.big-tag::before { width: 1.5vw; height: 1.5vw; }

}