/*
Theme Name: ElFlora 2023
Theme URI: http://elflora.net/
Author: Yowan
Author URI: https://yowan.dev
*/


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:ital,wght@0,300;0,700;1,300&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/    v2.0 | 20110126     License: none (public domain) 
-------------------------------------------------------------- */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}

/*  WordPress Core 
-------------------------------------------------------------- */
.alignnone{margin:5px 20px 20px 0}
.aligncenter,div.aligncenter{display:block;margin:5px auto}
.alignright{float:right;margin:5px 0 20px 20px}
.alignleft{float:left;margin:5px 20px 20px 0}
a img.alignright{float:right;margin:5px 0 20px 20px}
a img.alignnone{margin:5px 20px 20px 0}
a img.alignleft{float:left;margin:5px 20px 20px 0}
a img.aligncenter{display:block;margin-left:auto;margin-right:auto}
.wp-caption{background:#fff;border:1px solid #f0f0f0;max-width:96%;padding:5px 3px 10px;text-align:center}
.wp-caption.alignnone{margin:5px 20px 20px 0}
.wp-caption.alignleft{margin:5px 20px 20px 0}
.wp-caption.alignright{margin:5px 0 20px 20px}
.wp-caption img{border:0 none;height:auto;margin:0;max-width:98.5%;padding:0;width:auto}
.wp-caption p.wp-caption-text{font-size:11px;line-height:17px;margin:0;padding:0 4px 5px}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute!important;height:1px;width:1px;overflow:hidden}
.screen-reader-text:focus{background-color:#f1f1f1;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,0.6);clip:auto!important;color:#21759b;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;left:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}


:root {
    --black: #464646; 
    --blackDark: #000;
    --gray: #e8e8e8; 
    --grayLight: #fafafa;
    --blue: #0f3c60;
    --orange: #ec5c3a;
    --pink: #e3007b;
    --green: #739f33;
    --FontHeader:  'Bebas Neue', sans-serif; 
    --boxShadow: 3px 3px 3px 0px rgba(0,0,0,0.15);
}

body,html { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 18px; background: #FFF; font-weight: 300; color: var(--black); }
a { color: inherit; text-decoration: none; transition: color 0.2s linear;  -o-transition: color 0.2s linear;  -moz-transition: color 0.2s linear;  -webkit-transition: color 0.2s linear;  outline:0; }
strong, b { font-weight: 700; }
.hidden { display: none; }

.container { position: relative; overflow: auto; max-width: 1200px; margin: 0 auto; padding: 10px 0; }
header { position: relative; background: var(--blue); color: white; }
header .container { padding: 10px 0; display: flex; align-items: center; }
header .logo { float: left; font-size: 48px; line-height: 120%; font-family: var(--FontHeader); color: white; letter-spacing: 1px; width: 150px; }
header .logo span { color: var(--orange); }

header nav.menu { float: left; font-family: var(--FontHeader); margin-left: 20px;  letter-spacing: 1px; width: calc(100% - 50% - 170px); width: 50px; }
header nav.menu ul li { display: inline-block; font-size: 24px; margin-right: 20px; display:none; }
header nav.menu ul li a.current, header nav.menu ul li a:hover { color: var(--orange); }

header aside { float: right; width: calc(100% - 200px); text-align: center; font-size: 21px; padding: 20px 0; opacity: 0.5;  line-height: 120%;  }
header aside span.lbq { font-size: 32px; font-family: "times new roman", serif; margin-right: 5px; }

main { margin: 50px 0; }
main  #post { width: 75%; float: left; }
main img, img { max-width: 100%; height: auto; }
main span.category { background: var(--pink); color: white; padding: 0 8px;  text-transform: uppercase; font-size: 11px;  display: inline-block;   }

.fancy-header { position: relative; margin-bottom: 20px; border-bottom: 2px solid  var(--blue); }
.fancy-header .fancy-header-title { font-family: var(--FontHeader); font-size: 24px; background: var(--blue); letter-spacing: 1px; color: white; display: inline-block; padding: 10px 20px; }

.section_latest_post { border: 1px solid var(--gray); box-shadow: var(--boxShadow); background: white; position: relative; overflow: auto;  margin-bottom: 30px; display: flex;   flex-direction: row;   }
.section_latest_post .lp_image { width: 60%; background-size: cover; background-position: center center; min-height: 300px; }
.section_latest_post .lp_info { width: 40%; }
.section_latest_post .lp_info .lp-category { margin-bottom: 10px; }
.section_latest_post .lp_info .wrap { padding: 20px; }
.section_latest_post .lp-title { font-family: var(--FontHeader); font-size: 48px; line-height: 100%; margin: 10px 0; color:var(--blackDark); }
.section_latest_post .summary { line-height: 200%; font-size: 16px;   }
.section_latest_post .summary a.readmore { font-size: 14px; color: var(--blackDark); white-space: nowrap; }

.section_category { margin-bottom: 50px; }
.section_category .category_header .view-all { float: right; text-transform: uppercase; font-weight: 700; opacity: 0.5; padding: 10px 0; }
.section_category .category_header .view-all:hover { color:  var(--black); opacity: 1; }

.section_category.archives { display: none; }

.fancy-header.pink, .section_category.art .fancy-header { border-color: var(--pink); }
.fancy-header.pink .fancy-header-title, .section_category.art .fancy-header .fancy-header-title { background: var(--pink);  }
.fancy-header.pink .view-all:hover, .section_category.art .fancy-header .view-all:hover {  color:  var(--pink); }

.fancy-header.green, .section_category.food .fancy-header { border-color: var(--green); }
.fancy-header.green .fancy-header-title, .section_category.food .fancy-header .fancy-header-title { background: var(--green);  }
.fancy-header.green .view-all:hover, .section_category.food .fancy-header .view-all:hover {  color:  var(--green); }

span.category.food { background: var(--green) !important; }

ul.category_posts { display: grid; grid-template-columns: repeat(auto-fill, 31.5%); justify-content: space-between; grid-gap: 20px 0; }
ul.category_posts li { box-sizing: border-box; text-align: center; font-size: 16px; border: 1px solid var(--gray); box-shadow: var(--boxShadow);  }
ul.category_posts li .wrap { padding: 20px; }
ul.category_posts li .wrap .post-title { margin-top: 20px; display: block; letter-spacing: 0.5px; line-height: 150%; }

main #sidebar { float: right; width: calc(25% - 40px);  }
.widget.latest-posts img { display: block; width: 100%; height: 150px; object-fit: cover; }
.widget.latest-posts ul li { border-bottom: 1px solid var(--gray); margin-bottom: 20px; }
.widget.latest-posts a.img { position: relative; display: block; }
.widget.latest-posts a.img span.category {  position: absolute;bottom:0; margin: 0 0 5px 5px; }
.widget.latest-posts a.post-title { display: block; padding: 12px 0; }
.widget.latest-posts a.post-title span.category { margin-right: 5px; }
.widget.latest-posts span.title { font-size: 14px; line-height: 150%; letter-spacing: 1px; }

.widget.latest-posts .view-all { float: right; text-transform: uppercase; font-weight: 700; opacity: 0.5; padding: 10px 0; }
.widget.latest-posts .view-all:hover { color:  var(--black); opacity: 1; }


#post.single h1.post-title {  font-family: var(--FontHeader); font-size: 48px; line-height: 100%; margin: 10px 0; color:var(--blackDark);  }
#post.single .post-content { font-size: 18px; line-height: 180%; }
#post.single .post-content p { margin: 20px 0; }
#post .meta { margin-bottom: 20px; opacity: 0.7; }
#post .meta span { background: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-time.svg) left center no-repeat; background-size: contain; padding-left: 25px; margin-right: 10px; white-space: nowrap;   }
#post .meta .date { background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-time.svg);  }
#post .meta .cat { background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-folder.svg);  }
#post .meta .tag { background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-tag.svg);  }

#post .post-content ul { list-style-type: disc; margin: 20px 30px; }
#post .post-content ol { list-style-type: decimal; margin: 20px 30px; }

nav.pagination { font-size: 16px; }
nav.pagination span.page-numbers { cursor: default;  }
nav.pagination .page-numbers { padding: 5px 12px; background: var(--gray); margin-bottom: 5px; display: inline-block; }
nav.pagination .page-numbers.current, nav.pagination .page-numbers:hover { background: var(--orange); color: white; }

footer { background: var(--grayLight); line-height: 150%; }
footer .container { padding: 50px 0; }
footer .col { float: left; width: 25%; }
footer .col.tags { width: 50%; }
footer .col.about { font-size: 16px; line-height: 180%; }
footer .col.about .logo { font-size: 48px; line-height: 120%; font-family: var(--FontHeader); color: var(--blue); letter-spacing: 1px; }
footer .logo span { color: var(--orange); }
footer .col .title { font-family: var(--FontHeader); font-size: 24px; color: var(--blue); margin-bottom: 20px; letter-spacing: 1px; }

footer .col.social ul li { display: inline-block; margin-right: 10px;}
footer .col.social ul li a { display: inline-block; width: 48px; height: 48px; background: var(--blue); border-radius: 5px; overflow: hidden; background: var(--blue) url( 'https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-youtube.svg') center center no-repeat; background-size: 60%; text-indent: -99999px;  }
footer .col.social ul li.youtube a { background-color: red; }
footer .col.social ul li.twitter a { background-color: black; background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-x.svg); }
footer .col.social ul li.fb a { background-color: #4267B2; background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-fb.svg); }
footer .col.social ul li.da a { background-color: black; background-image: url(https://elflora.net/wp-content/themes/elflora_v2023/imgs/icon-da.svg); }

footer .col.tags li { display: inline-block; margin-right: 5px; }
footer .col.tags a { background: var(--black); color: white; padding: 2px 8px;  text-transform: uppercase; font-size: 16px;  opacity: 0.5;  }
footer .col.tags a:hover { opacity: 1; }

@media only screen and (max-width: 1250px) {
    .container { padding: 10px 30px !important; }
    footer .container { padding: 50px 30px !important; }
}

@media only screen and (max-width: 990px) {
    main #post { width: 100%; }
    main #sidebar { display:none; }
    
   .section_category.archives { display: block; }
   footer .col { width: 50%; }
   footer .col.tags { width: 100%; margin-top: 40px; }
}

@media only screen and (max-width: 768px) {
    header .container { display: block; }
    header .logo, header aside { width: 100%; text-align: center; padding-top:10px; }
    
    .section_latest_post { display: block; min-height: 200px; }
    .section_latest_post .lp_image, .section_latest_post .lp_info { width: 100% !important; }
    
    ul.category_posts { grid-template-columns: repeat(auto-fill, 48%); }
}

@media only screen and (max-width: 575px) {
    ul.category_posts { grid-template-columns: repeat(auto-fill, 48%);  }
    footer .col { width: 100%; margin-top:0 !important; margin-bottom: 30px; text-align: center; }
    footer .col.tags { margin-bottom:0; }
}


@media only screen and (max-width: 450px) {
    ul.category_posts { grid-template-columns: repeat(auto-fill, 100%); }
}

.is-small-text{font-size:.875em}.is-regular-text{font-size:1em}.is-large-text{font-size:2.25em}.is-larger-text{font-size:3em}.has-drop-cap:not(:focus):first-letter{float:left;font-size:8.4em;font-style:normal;font-weight:100;line-height:.68;margin:.05em .1em 0 0;text-transform:uppercase}body.rtl .has-drop-cap:not(:focus):first-letter{float:none;margin-left:.1em}p.has-drop-cap.has-background{overflow:hidden}:root :where(p.has-background){padding:1.25em 2.375em}:where(p.has-text-color:not(.has-link-color)) a{color:inherit}p.has-text-align-left[style*="writing-mode:vertical-lr"],p.has-text-align-right[style*="writing-mode:vertical-rl"]{rotate:180deg}