/**

  Theme Name: MyBar

  Author: Stefano Agnelli

  Author URI: https://www.agnellistefano.it

  Theme URI:

  Description: The theme was created as a basis for any type of website.

  It is an excellent starter theme useful for any type of professional or study need

  Tested up to: 6.1

  Requires PHP: 5.6

  Domain Path:  /languages

  Version: 1.4.7

  License: GNU General Public License v3 or later

  License URI: http://www.gnu.org/licenses/gpl-3.0.html

  Text Domain: mybar

  Tags: blog, news, entertainment, one-column, two-columns,right-sidebar,custom-menu, full-width-template, custom-header, translation-ready, threaded-comments



  This theme, like WordPress, is licensed under the GPL.

  Use it to make your site beautiful, have fun and if you liked it share it with others.

  */

  

/**************  reset code****************/



 

body,html{font-size: 16px;box-sizing: border-box;margin:0;padding:0; max-width: 100%;

    overflow-x: hidden;}

*,*:before,*:after{box-sizing: border-box;}/* tutti gli elemnti*/

h1,h2,h3,h4,h5,h6,p,ol,ul{margin:0;padding:0;}

ol,ul{list-style: none;}

 



/************** end reset code****************/

/*  BASE */

body{display:flex;min-height:100vh;flex-direction:column;font-family: system-ul,"Helvetica Neue", Arial, sans-serif;}

h1,h2,h3,h4,h5,h6,p,ol,ul{color:#333;margin-bottom: 0px;}

h1.site-title,p.description{color:#D3C552;font-family: initial;}

h1{font-size: 60px;line-height: 1;font-weight: 800;}

h2{font-size: 15px;line-height: 1.3;}

h2.date{font-size: 15px;line-height: 1.3;font-weight: 100;margin-bottom: 20px;}

h3{font-size: 30px;line-height: 1.3;}

h4{font-size: 25px;line-height: 1.3; }

h5{font-size: 20px;line-height: 1.3;}

h6{font-size: 15px;line-height: 1.3;}



.img-min{width: 70px;height: 70px;margin-right: 15px;}

.mb-1{margin-bottom: 20px;}

.mb-2{margin-bottom: 40px;}

/************* color link ***************************/

a {

  text-decoration: none;

}

/* unvisited link */

a:link {

  color: red;

}



/* mouse over link */

a:hover {

  color: hotpink;

  text-decoration: underline;

}



/* selected link */

a:active {

  text-decoration: underline;

  color:yellow;

  width: 100%;

  height: 5px;

}

/*.current_page_item{text-decoration: underline;color:#ffffff;}*/

/*******************************************/

  /*h2.page-title,a article  h3#content,a article div.post-img p{color:white;}

  h2 span,h3 span{  background-color: black;padding: 0px 30px;}*/



/* layout*/

 

.main{display: flex;position: relative; min-height: 100vh;}

p{line-height: 1.3;}

.container,

article{margin:10px;padding: 10px;}

.container{width: 69%;padding-bottom: 2.5rem;}

.container-post{max-width: 100%;display: flex;}

.sidebar{width: 32%;}

div.container.full-width{width: 100%;height: 100vh;}





/*************** COMMENTS AREA **************/

  div.comment-metadata a{font-family: verdana;color:#4763F7;}

 

.comment-body p{ font-family:arial-serif;line-height: 20px;margin-top: 10px; }

.comment-body{border: 2px solid #d2c9c9;padding: 15px;margin-bottom: 10px;}

.post-img{display: flex; padding-right:15px; }

.bypostauthor{color:violet;}



/*************** align text and image ***********************/

img.alignright { float: right; margin: 0 0 1em 1em; }

img.alignleft { float: left; margin: 0 1em 1em 0; }

img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

.alignright { float: right; }

.alignleft { float: left; }

.aligncenter { display: block; margin-left: auto; margin-right: auto; }

 .primary-menu-smart{display: none;}

/****************** SMARTPHONE *******/

.container-smart{display: none;}

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

   /************** hamburger menu *************/

.title-site-header{width: 100%;bottom: 0px; left: 0px; height: auto; padding-top: 0; position: absolute;top: 100px;display:contents; }

.title-site-header-text{margin: 15px;}

.custom-header-menu{display: block!important;}

 

.custom-header-menu div.logo{display: flex;

  justify-content: space-between;

font-weight: 800;

  font-size: 30px;

  text-transform: uppercase;}

.container-smart{width: 40px;float: right;display: block;}

.primary-menu,.secondary-menu{display: none;}

.menu{background: rgb(34,193,195);

 background: linear-gradient(to right, #f1da36 4%,#f1da36 4%,#f1da36 4%,#fefcea 34%,#fefcea 34%,#fefcea 66%,#f1da36 98%);width: 100%;height: 300px;}

.menu-button,

.menu-button::before,

.menu-button::after {

    display: block;

    background-color: #2d2323;

    position: relative;

    height: 4px;

    width: 30px;

    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);

    border-radius: 2px;

    float: right;

}

.button{width:100%;height: 30px;cursor: pointer;float: right;padding-right: 12px;}

.menu-button::before {

  content: '';

  margin-top: -8px;

  padding-right: 11px;

}

.menu-button::after {

  content: '';

  margin-top: 8px;

}

.main-navigation ul ul{

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

  float: left;

  position: absolute;

  top: 2.5em;

  left: 0em!important;

  z-index: 99999;}  

  div.secondary-menu nav#site-navigation.main-navigation div.menu-mio-container ul li ul.sub-menu li a{color:black;}

 header.header{display: inline-block;border :2px solid #243014;}

 div.custom-header img{height: 18vh!important;}

  h1{font-size: 40px;}

  h2{font-size: 30px;}

  h3{font-size: 25px;}

 /* .logo{width: 100%;text-align:  center;}*/

  .header{display: block;}

  .container{width: 100%;}

  .main{display: block;}

  #sidebar{height:100vh;}

  nav.menu div.menu{background: red;

  position: relative;

  top: 62px;}

  .menu ul li{width: 100%;

  text-align: left;

   }

                                        

}

.bar1,

.bar2,

.bar3 {

  width: 35px;

  height: 5px;

  background-color: red;

  margin: 6px 0;

  transition: 0.4s;

}



/* Rotate first bar */

.change .bar1 {

  transform: translate(0, 11px) rotate(-45deg);

}



/* Fade out the second bar */

.change .bar2 {

  opacity: 0;

}



/* Rotate last bar */

.change .bar3 {

  transform: translate(0, -11px) rotate(45deg);

}

  /**** end css for hamburger menu ***/



/****************** end SMARTPHONE *******/

/*______________________________________________________*/



/******** Text meant only for screen readers. ********/

/*____________________________________________________*/

.screen-reader-text {

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

  clip-path: inset(50%);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

  word-wrap: normal !important;

}

.screen-reader-text:focus {

  background-color: #eee;

  clip: auto !important;

  clip-path: none;

  color: #444;

  display: block;

  font-size: 1em;

  height: auto;

  left: 5px;

  line-height: normal;

  padding: 15px 23px 14px;

  text-decoration: none;

  top: 5px;

  width: auto;

  z-index: 100000; /* Above WP toolbar. */

}



/*----------------- end screen readers --------------------*/



/* header*/

/*-----------------------------------------------------------*/







 .custom-header-menu{background-color: #D3C552; display: flex; right: 0; width: 100%; z-index: 3;

    justify-content: space-between;border-bottom: 1px solid #eee;padding: 0 37px;}

.title-site-header{bottom: 201px; left: 100px;height: auto; padding-top: 0; position: absolute;  width: 100%}

div.custom-header img{width: 100%;height: 75vh;}

.first{color:black;}

/*.logo,.inner,.primary-menu,.secondary-menu{width: 30%;}*/

.logo a{color:#151414;align-items: center;margin:   5px;}

.logo{display: flex; justify-content: center;/*display: inline-block;*/font-weight: 800;font-size: 30px;text-transform: uppercase;}

div.logo img{width: 200px;}

div.inner a.accordion-section{font-size: 60px;line-height: 1;font-weight: 800;color:#050202;}



.menu ul {margin: 0 auto;text-align: center;}

.menu li{display: inline-block;}

div.secondary-menu nav#site-navigation.main-navigation div.menu-mio-container ul.menu li a{color: red;}

.menu li a{padding: 10px;display:block;color: #151414;}

.menu li.evi a{background: #F75E47;color:#fff;text-transform: uppercase;font-weight: bold;border-radius: 4px;padding: 10px 20px;}

nav.menu{width: 35%;}

h1.site-name{text-align: center;}

h1.site-name-home,h3.site-description-home,h1.screen-reader-text home{text-align: center;color:#151414;; }

/*.primary-menu{display: flex;

    justify-content: center;}*/

html body.page-template-default.page.page-id-2.logged-in.admin-bar.custom-background.wp-embed-responsive.customize-support header.page-header header.header div.secondary-menu nav#site-navigation.main-navigation div.menu-mio-container ul#menu-mio.menu li#menu-item-52.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-home.current-menu-ancestor.current-menu-parent.menu-item-has-children.menu-item-52 a,html body.page-template-default.page.page-id-2.logged-in.admin-bar.custom-background.wp-embed-responsive.customize-support header.page-header header.header div.secondary-menu nav#site-navigation.main-navigation div.menu-mio-container ul#menu-mio.menu li#menu-item-52.menu-item.menu-item-type-custom.menu-item-object-custom.menu-item-home.current-menu-ancestor.current-menu-parent.menu-item-has-children.menu-item-52 ul.sub-menu li#menu-item-53.menu-item.menu-item-type-post_type.menu-item-object-page.current-menu-item.page_item.page-item-2.current_page_item.menu-item-53 a,html body.page-template-default.page.page-id-2.logged-in.admin-bar.custom-background.wp-embed-responsive.customize-support header.page-header header.header div.secondary-menu nav#site-navigation.main-navigation div.menu-mio-container ul#menu-mio.menu li#menu-item-51.menu-item.menu-item-type-post_type.menu-item-object-post.menu-item-51 a{color:black!important;}

html body.home.blog.custom-background.wp-embed-responsive header.header div.primary-menu nav#site-navigation.main-navigation div.menu ul li.page_item.page-item-2 a{color:#fff!important;}



/************* menu dropdown*************************/

.container-menu > ul li.menu-item-has-children > a::after{

  content:" ";width: 30px;height: 30px; background-size:30px;position: absolute;

  top:50%; right: 0; transform: rotate(90deg);margin-top: -15px;margin-right: -13px;

  background-size:100%;

  background-image: url('data:image/svg+xml;utf8,<svg width="50px" height="50px" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><path fill="black" d="M22.7 34.7l-1.4-1.4 8.3-8.3-8.3-8.3 1.4-1.4 9.7 9.7z"/></svg>');

}

 .container-menu ul ul{display: none;}

.container-menu ul li:hover > ul {display: block;}

.container-menu ul ul {

    display: none;

    position: absolute;

    top: 2em;

    left: 0;

    z-index: 99999;

    width: 180px;

    background: #fff;

    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

}

.container-menu li {

    position: relative;

}

.giop{color:red;}

/**************************************/

  

/******  footer *******/

.footer{padding: 40px;

  background: gray;}

.footer p {text-align: center;}



/***************** sidebar ***********************/

#sidebar{background: #ddd9d9;}

.widget{

  padding: 10px;

  margin: 20px auto;

  margin-top: 10px;

  width: 78%;

  margin: ;

  margin-left: auto;

  margin-right: auto;}



/* Image Caption */

.wp-caption { margin-bottom: 20px; padding: 10px; max-width: 97%; border: 1px solid #eee; text-align: center; }

.wp-caption img { margin: 0; padding: 0; width: 100%!important; height: auto; border: 0 none; }

.wp-caption p.wp-caption-text { margin: 0; padding: 8px; font-size: 1em; line-height: 17px; }

.gallery-caption{font-size: 20px;}

/* Stiky */

.sticky { border-right: 3px solid #eee; border-bottom: 3px solid #eee; }



/******************************************/

/* Accessibility */

/* Text meant only for screen readers. */

screen-reader-text {

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

  clip-path: inset(50%);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute !important;

  width: 1px;

  word-wrap: normal !important;

  /* Many screen reader and browser combinations announce broken words as they would appear visually. */

}

 

/*************************************************************************************/



.main-navigation {

  clear: both;

  display: grid;

  align-items: center;

  float: left;

  width: 100%;

}



.main-navigation ul {

  list-style: none;

  margin: 0;

  padding-left: 0;

}



.main-navigation li {

 

  position: relative;

}



.main-navigation a {

  display: block;



}



.main-navigation ul ul {

  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);

  float: left;

  position: absolute;

  top: 2.5em;

  left: -999em;

  z-index: 99999;

}



.main-navigation ul ul ul {

  left: -999em;

  top: 0;

}



.main-navigation ul ul a {

  width: 200px;

}



.main-navigation ul li:hover > ul,

.main-navigation ul li.focus > ul {

  left: auto;

}



.main-navigation ul ul li:hover > ul,

.main-navigation ul ul li.focus > ul {

  left: 100%;

}



/* Text meant only for screen readers. */

.screen-reader-text {

  border: 0;

  clip: rect(1px, 1px, 1px, 1px);

  -webkit-clip-path: inset(50%);

  clip-path: inset(50%);

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

  word-wrap: normal !important;

}



.screen-reader-text:hover,

.screen-reader-text:active,

.screen-reader-text:focus {

  background-color: #eadada;

  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: 0.875rem;

  font-weight: bold;

  height: auto;

  left: 5px;

  line-height: normal;

  padding: 15px 23px 14px;

  text-decoration: none;

  top: 5px;

  width: auto;

  z-index: 100000; /* Above WP toolbar. */

}

.site-navigation ul li:hover > ul,

.site-navigation ul li.focus > ul {

  right: auto;

}

.site-navigation ul ul li:hover > ul,

.site-navigation ul ul li.focus > ul {

  right: 100%;

  left: auto;

}