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

*{

  margin:0px;
  padding: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;

}


@font-face{
	font-family:bittersweetNF.ttf;
	src: url('/vegan/fonts/bittersweetNF.ttf');
}

@font-face{
	font-family:lifeFormBB.ttf;
	src: url('../vegan/fonts/lifeFormBB.ttf');
}

body{
	background: url('../img/back_over.jpg');
	background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;  
}

/* ТУТ МОЖНО ПОМЕНЯТЬ ШИРИНУ САЙТА */

main{
  width: 80%;
  margin: 0 auto;
}

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

/* НАЧАЛО ХЕАДЕРА */

header{
	width: 100%;
  height: auto;
  overflow: hidden;
  background-color: white;
  opacity: 0.9;
  padding-bottom: 4%;
}

header article#logo_vegan{
  float: left;
  overflow: hidden;
  clear: both;
}

header article#logo_vegan img {
  width: 100%;
  height: auto;
  display: block;
}

header article#Mobile-logo_vegan{
  float: left;
  overflow: hidden;
  display: none;
  clear: both;
}

header article#Mobile-logo_vegan img {
  width: 100%;
  height: auto;
  display: block;
}

header article#hamburger{
  display: none;
}

header article#delively_contact{
  float: right;
  overflow: hidden;
}

header article#delively_contact img{
  width: 100%;
  height: auto;
  display: block;
}

header article#Mobile-delively_contact{
  display: none;
}

#order_online:hover{
  transform: scale(1);
  transition: scale, 2s; 
}

/* КОНЕЦ ХЕАДЕРА */

/* НАЧАЛО БЛОКА ХЕАДКЕР-МЕНЮ */

section.Header-Menu{
  width: 100%;
  margin: 0 auto;
  /*margin-top: 4%;*/
}

section.scrollmenu {
    background-color: #F2D65C;
    overflow: auto;
    white-space: nowrap;
    height: auto;
    width: 100%;
    float: left;
}

section.scrollmenu nav li{
  float: right;
  text-decoration: none;
  list-style: none;
  padding-right: 50px; 
  /* НАТА мне поебать я заебался я сделал в пикселях */
}

section.scrollmenu a {
    display: inline-block;
    color: #008BB0;
    float: left;
    padding: 1vh 0vw 1vh 0vw; 
    /* НАТА мне поебать я заебался я сделал в пикселях */
    display: block;
    text-align: center;
    text-decoration: none;
    list-style: none;
    font-family:lifeFormBB;
    font-size: 1.375em;
}

section.scrollmenu a:hover {
  color: #F57905;
}


section.Mobile-Menu{
  display: none;
}


/* КОНЕЦ БЛОКА ХЕАДЕР-МЕНЮ */


/* Центральный блок */

section.Central-Block{
  
  /*width: 100%;
  height: 100%;*/
  
}
/* ПОКА ЧТО ВОТ ТАК 
article.slider img{
  width: 100%;
  height: auto;
  display: block;
}
*/

/* Начало слайдера */


.slider{
  width: 100%;
  height: 100%;
  margin: auto 0;
  overflow: hidden;
  position: relative;
}

.slider ul{
  margin: 0;
  padding: 0;
}
.slider ul li{
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.slider li{
  z-index: 100;
  position: relative;
  display: block;
    transform: rotateY(90deg);
    opacity: 0;
    transition: 2s;
}

.slider img, .slider iframe{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.slider .prev, .slider .next{ /* НА СТРОКЕ НИЖЕ МЫ ПОМЕНЯЛИ КАРТИНКИ СТРЕЛОЧКИ МЕСТАМИ */
  background: rgba(0,0,0,0.5) url("../img/next.png") no-repeat center center;
  background-size: 50%;
  width: 10%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 90%;
  z-index: 500;
  opacity: 0.3;
  transition: 0.3s;
}

.slider .next{/* НА СТРОКЕ НИЖЕ МЫ ПОМЕНЯЛИ КАРТИНКИ СТРЕЛОЧКИ МЕСТАМИ */
  background: rgba(0,0,0,0.5) url("../img/prev.png") no-repeat center center;
  background-size: 50%;
  left: inherit;
  right: 0;
  float: right;
}

.slider .prev:hover, .slider .next:hover{
  opacity: 1;
  /* background: orange; */
}

.slider .active{
  z-index: 300;
  opacity: 1;
  margin: 0;
  padding: 0;
  transform: rotateY(0);
}

.for_slider{
  background: #2B323A;
  padding: 20px;
  color: #fff;
}

.for_slider li{
  display: none;
}

.for_slider .active_k{
  display: block;
}

.for_slider h2{
  font-size: 31px;
}


/* Слайдер конец */
  



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

/* Конец центрального блока */

/* После Центрального Блока, блок */

section.bamboo{
  width: 100%;
  height: 100%;
}

article#After-Central-Block img{
  width: 100%;
  height: auto;
  display: block;
}

/* Конец после центрального блока */

/* НАКОНЕЦ-ТО КОНЕЦ МУЧЕНИЯМ 3 с половиной часа */

/* footer begging */

footer{
  background-color: #F2D65C;
  width:100%;
  height:35vh;
}


#Footer_Img{
  width:100%;
  float: left;
  height: auto;
  display:block;
  padding-top: 2vh; 
}


#facebook {
   float: left;
   padding-left: 2vw; 
}
#insta {
  float: left;
  padding-left: 2vw; 
}
#twitter{
  float: left;
  padding-left: 2vw; 
}

#yelp{
  float: left;
  padding-left: 2vw; 
}

#facebook:hover{
  transform: rotate(100deg);
  transition: transform 1s;
}
#insta:hover{
  transform: rotate(100deg);
  transition: transform 1s;
}
#twitter:hover{
  transform: rotate(100deg);
  transition: transform 1s;
}
#yelp:hover{
  transform: rotate(100deg);
  transition: transform 1s;
}

footer article#text-footer-h2 h2{
  font-family:bittersweetNF; 
  text-align: center;
  font-size: 1.125em;
  width: 50%;
  margin: 0 auto;
  display: block; 
}


/* footer end */



h1{
	font-family:lifeFormBB; 
  font-size: 25pt;
}
h2{
	font-family:bittersweetNF; 

}

/* my media */


@media screen and (min-width: 0px) and (max-width: 659px) {
  

    main{
      width: 100%;
      margin: 0 auto;
    }


    body{
      background: none;
    }


    header{
      background-color: white;
      padding-bottom: 0; 
    }


    header article#logo_vegan{
      display: block;
    }

    header article#Mobile-logo_vegan{
      display: none;
    }


    header article#hamburger{
      margin-top: 4vh;
      display: block;
      float: right;
      position: absolute;
      z-index: 9999;
    }

    header article#hamburger img{
      height: auto;
      position: relative;
      float: right;
    }

    header article#hamburger img:hover{
      animation-name: navigation_drawer;
      animation-duration: 2s;
    }

    @keyframes navigation_drawer{
      from{
      
      }

      to{
        transform: rotate(1turn);
        transition: transform 2s linear;
      }
    }


    header article#delively_contact{
      float: none;
      overflow: hidden;
      display: none;
    }

    header article#Mobile-delively_contact{
      display: block;
    }

    header article#Mobile-delively_contact ul{
      width: 100%;
      overflow: hidden;
    }

    header article#Mobile-delively_contact ul li{
      margin: 0 auto;
      text-align: center;
      list-style: none;
    }

    section.Header-Menu{
      width: 100%;
      margin: 0 auto;
      /*margin-top: 4%;*/
    }

    section.scrollmenu {
        background-color: #F2D65C;
        overflow: auto;
        white-space: nowrap;
        height: auto;
        width: 100%;
        float: none;
        display: none;
    }

    section.Mobile-Menu{
      display: block;
    }

    section.Mobile-Menu article ul{
      width: 100%;
      overflow: hidden;
    }

    section.Mobile-Menu article ul li{
      margin: 0 auto;
      text-align: center;
      list-style: none;
    }





    section.Central-Block{
      background-color: white;
      background-image: url('../img/mandala_mob.jpg');
      background-position: center;
      background-repeat: no-repeat;
      height: 50vh; 
    }

    .slider{
      display: none;
    }

    section.bamboo{
      display: none;
    }

    footer{
      background-color: #F2D65C;
      height: 20vh;
    }

    #Footer_Img{
      width: 50%;
      margin: 0 auto;
      float: left;
      height: auto;
      display:block;
      padding-top: 5vh;
      margin-left: 35%;
      /*padding-right: 40%; */
    }


    footer article#text-footer-h2 h2{
      font-family:bittersweetNF; 
      text-align: center;
      font-size: 1.125em;
      width: 50%;
      margin: 0 auto;
      display: none; 
    }


}

/* here is my styles for phablets */


@media screen and (min-width:659px) and (max-width:767px){

    main{
      width: 100%;
      margin: 0 auto;
    }


    body{
      background: none;
    }


    header{
      background-color: white; 
    }

    section.Central-Block{
      background-color: white; 
    }

    .slider{
      display: block;
    }

    section.bamboo{
      display: none;
    }

    footer{
      background-color: #F2D65C;
    }

    #Footer_Img{
      width: 50%;
      margin: 0 auto;
      float: left;
      height: auto;
      display:block;
      padding-top: 5vh;
      margin-left: 35%;
    }


    footer article#text-footer-h2 h2{
      font-family:bittersweetNF; 
      text-align: center;
      font-size: 1.125em;
      width: 50%;
      margin: 0 auto;
      display: none; 
    }

}


/* here is my styles for tablets */

@media screen and (min-width: 769px) and (max-width: 1365px){

  footer{
    height: auto;
  }

}

/* here is my styles for laptops */

@media screen and (min-width: 1366px) {

  footer{
    height: auto;
  }

  }

/* here is my styles for desktops */

@media screen and (min-width: 1920px) {

  footer{
    height: auto;
  }

} 


/* End media  */ 


/* BEGIN KEYFRAME */



/* END KEYFRAME */

/* КОНЕЦ ШРИФТОВ */