/**
 * Hypermarket Child Theme
 *
 * @author      Mahdi Yazdani
 * @package     Hypermarket Child
 * @since       1.0.0
 */

/*Google Fonts nicht mehr von Google laden, sondern lokal*/

/* work-sans-300 - vietnamese_latin-ext_latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 300;
  src: local(''),
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* work-sans-regular - vietnamese_latin-ext_latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* work-sans-500 - vietnamese_latin-ext_latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* work-sans-600 - vietnamese_latin-ext_latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  src: local(''),
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url('../../../../../../fonts/work-sans-v8-vietnamese_latin-ext_latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}



 /**
 F�r den Fall, das man mal die Produkthintergr�nde transparent machen m�chte.
.shop-item .shop-thumbnail {
	background: transparent;
}
 */

 /**
 * Abstand im Produkt im Shop zur Navi
 */ 
.fw-section.bg-gray {
	background-color: #efefef; 
	margin-top: 55px; }
	
/** 
 * Hero Slider 100px niedriger. Dann hat die Navi mehr Platz.
*/ 
.page-template-template-homepage #hypermarket-header + section.hero-slider,
.page-template-template-homepage #hypermarket-header + section.hero-product {
  margin-top: 20px !important;
  padding-top: 0px !important; } 
 
/** 
 * Der Container f�r den Shop etwas h�her. �berschriften werden aktuell nicht verwendet, 
 * daher ist der Platz nicht n�tig.
*/  
 .padding-top-3x {
  padding-top: 20px !important; 
 }

/** 
 * Der Container f�r den Shop etwas h�her. �berschriften werden aktuell nicht verwendet, 
 * daher ist der Platz nicht n�tig. Extra nochmal f�r den Firefox
*/   
@-moz-document url-prefix() {
    .padding-top-3x  {padding-top: 55px !important;}
} 

/** 
 * Die Seiten im Firefox etwas h�her. 
*/   
@-moz-document url-prefix() { 
	.padding-top, .woocommerce-billing-fields {padding-top: 0px !important;} 
} 

.navbar {
 z-index:9900;
 width:100%;
 min-height:80px;
 background-color:#fff;
 display:-webkit-box;
 display:-ms-flexbox;
 display:block;
 -webkit-box-align:center;
 -ms-flex-align:center;
 align-items:center;
 padding-top:40px;
 padding-left:75px;
 position:relative;
 top:0;
 left:0
}

.toolbar {
  top: 0px;
  padding-top: 80px;
}

 .main-navigation {
  padding-top: 0px;
  padding-left:190px;}

/*
 * F�r kleinere Screens wichtig. Damit das bl�de Handy Men� auch sch�n mittig ist.
 * Ansonsten h�ngt es irgendwo recht versetzt rum. M�sste man sich irgendwann mal genau ansehen um das alles zu verstehen.
 * Lasse ich das hier weg, ist bl�tzlich das Men�verschoben. Dabei dachte ich, nur was ich hier explizit auff�hre, wird �berschrieben.
 * Ge�ndert habe ich hier jetzt nichts zur urspr�nglichen Klasse.
*/
@media screen and (max-width: 1070px) {
  .toolbar {
    width: 160px; }
    .toolbar .inner > a.mobile-menu-toggle {
      display: table-cell; }

  .toolbar .inner .cart-btn:hover .cart-dropdown {
    display: none; }

  .main-navigation {
    background-color: #ffffff;
    overflow-y: auto;
    visibility: hidden;
    width: 100%;
    height: 100%;
    opacity: 0;
    filter: alpha(opacity=0);
    padding: 0;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transition: visibility 0.3s, opacity 0.3s;
    -o-transition: visibility 0.3s, opacity 0.3s;
    transition: visibility 0.3s, opacity 0.3s; }
    .main-navigation > .menu {
      display: none;
      padding: 20px 0;
      margin-top: 120px; }
      .main-navigation > .menu > li {
        display: block; }
        .main-navigation > .menu > li > a {
          line-height: 1.5;
          padding: 12px 15px; }
        .main-navigation > .menu > li .sub-menu {
          display: block;
          width: 100%;
          max-height: 0;
          text-align: center;
          background-color: #efefef;
          border: 0;
          overflow: hidden;
          -webkit-transition: all 0.4s;
          -o-transition: all 0.4s;
          transition: all 0.4s;
          position: relative;
          top: 0;
          left: 0;
          padding: 0;
          margin: 0; }
          .main-navigation > .menu > li .sub-menu > li {
            margin-top: 0; }
            .main-navigation > .menu > li .sub-menu > li > a {
              padding: 6px 15px; }
            .main-navigation > .menu > li .sub-menu > li:hover .sub-menu {
              display: block !important;
              -webkit-animation: none;
              -o-animation: none;
              animation: none; }
            .main-navigation > .menu > li .sub-menu > li.menu-item-has-children > a:after {
              display: inline-block;
              vertical-align: middle;
              font-family: 'Material Icons';
              content: "\e5c5";
              font-size: 1.4em;
              margin-top: -3px;
              margin-left: 5px; }
          .main-navigation > .menu > li .sub-menu .sub-menu {
            display: block !important;
            -webkit-animation: none;
            -o-animation: none;
            animation: none;
            padding: 10px 0 !important;
            background-color: #e7e7e7;
            position: relative;
            top: 0;
            left: 0; }
        .main-navigation > .menu > li:hover .sub-menu {
          -webkit-animation: none;
          -o-animation: none;
          animation: none; }
        .main-navigation > .menu > li.menu-item-has-children.active > a:after {
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg); }
        .main-navigation > .menu > li.menu-item-has-children.active .sub-menu {
          max-height: 600px;
          padding: 20px 0; }
    .main-navigation.open {
      visibility: visible;
      opacity: 1;
      filter: alpha(opacity=100); }
      .main-navigation.open > .menu {
        display: block;
        -webkit-animation: slideUpLong 0.5s;
        -o-animation: slideUpLong 0.5s;
        animation: slideUpLong 0.5s; }

	/**
	 * Bei kleiner Aufl�sung stimmt das Padding nicht. Dann ist der Hero-Slider zu nah an der Navigation
	*/
	.navbar {	
		padding-bottom:60px;
		padding-left:0px;}
		
	.admin-bar .main-navigation .menu {
		margin-top: 110px; } }

/**
 * .site-logo.visible-mobile um margin-left und margin-right mit auto erweitert (Zentrierung) und au�erdem display von inline-block auf table ge�ndert.
*/ 
 
.site-logo {
  z-index: 10;
  max-height: 60px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  color: #606060;
  font-size: 20px;
  font-weight: 200;
  text-decoration: none;
  position: relative;
  padding-left:0px;}
  .site-logo span {
    font-weight: normal; }
  .site-logo:hover, .site-logo:focus, .site-logo:active {
    color: #606060;
    text-decoration: none; }
  .site-logo img {
    width: 100%;
    max-width: 173px;
    margin-top: 0px;
    margin-left: 0px; }
  .site-logo.visible-desktop {
    max-width: 310px; }
  .site-logo.visible-mobile {
    display: none; }
  .site-logo > .site-logo {
    padding: 0;
    margin: 0; }
  @media screen and (max-width: 768px) {
    .site-logo {
      z-index: 20;
      margin-right: 20px; }
      .site-logo.visible-desktop {
        display: none; }
      .site-logo.visible-mobile {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0px;
        display: table; } }
  @media screen and (max-width: 360px) {
    .site-logo {
      margin-right: 8px; } 
  }
  
/**
 In My Account wird eine gro�e leere Zeile eingeblendet. Die sieht aber doof aus.
 Daher weg. Durch klein und wei� machen. ;-) Falls das mal f�r Probleme sorgt, dann hier wieder anpassen. So richtig sauber ist das vermutlich nicht, 
 da nicht so ganz klar ist, wof�r der featured-background eigentlich ist... Irgendein Bild wird da vermutlich angezeigt.
*/ 
 .featured-background {
  width: 0px;
  height: 0px;
  background-color: #ffffff;
}
	  
/*
Die Buttons f�r In den Warenkorb legen waren zu klein. Diese sind nun breiter.
*/

.add-to-cart {
  width: 200px;
}

/*
Footer innen und au�en wei�
*/
  .footer .column {
    background: #ffffff;
 }

/*
Footer mitte wei�
*/
.footer .column:nth-of-type(2n) {
    background-color: #ffffff;
}

/*
Social Icons zentrieren
*/
#footer-bar .widget {
  margin-left: auto;
  margin-right: auto;
}

/*
Abstand zwischen Social Icons und Footer verr�ndern (Standard 72px)
*/
.space-top-3x {
    margin-top: 0px !important;
}

/*
 * Irgendwas ausgeblendet... :-/
 */
.woocommerce-page .x-header-landmark {
display: none;
}

/*
 * Die Produktbeschriftungen sind umbebrochen. Die Spalte ist jetzt breiter.
 */
.shop-item .shop-item-details .shop-item-title {
    width: 65%;
}

/*
 * Die Icons f�r VISA, Mastercard usw. waren auf der Bezahlm�glichkeit Seite zu gro�. 
 */
 
img.stripe-icon {
  vertical-align: middle;
  display: block;
  max-width: 5%;
  height: auto; }