* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;

}
/*-----------------------------------------------------*/
p {
padding :15px;
}
ul.menu {
list-style: none;
padding: 0;
}
.menu li {
margin: 5px;
float: left;
}
.menu li a {
text-decoration: none;
color:#000000;
display: block;
padding: 10px;
font-weight: 500px;
}
.wrapper {
width: 100%;
padding: 20px 2% 20px 2%;
margin: 0;

}
#header .wrapper   {
position: fixed;
color: #fff;
background-color:#AFEEEE ;
z-index: 9999;
padding: 0px 10% 10px 10%;

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

}
#header:after,
#block1:after,
#block2:after{
display: block;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
padding-top: 200px;

}
#header:after {
content: "";
background-image: url(images/fon.jpg);
font-size: 100px;
height: 400px;
}
#block1:after {
content: "";
background-image: url(images/kkofe.jpg);
font-size: 0px;
height: 100px;
}
#block2:after {
content: "";
background-image: url(images/kkofe.jpg);
font-size: 0px;
height: 100px;
}

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


#block1,
#block2,
#block3{
display: block;
width: 100%;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

#block1 {
background-color:white;
}

#block2 {
background-color:#e8ffc4;

}
#block3 {
background-color:white;
}

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

#block1 img {
width: 40%;
height: 30%;
float: left;
padding: 90px 20px 30px 20px;
}
#block3 img {
width: 40%;
height: 20%;
float: right;
padding: 30px 5px 50px 20px;
}

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

.box_wrapper{
background-image: url(images/fon.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.box_wrapperю2{
background-image: url(images/fon2.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}

/*-----------------------------------------------------*/
.box {
width: 600px;
font-size: 40px;
font-weight: 900;
color: #fff;
text-transform: uppercase;
text-align: center;
background-color:#0000006b;
position: relative;
top: -250px;
padding: 20px;
margin: 0 auto;

/*-----------------------------------------------------*/
}

#footer {
background-color: #AFEEEE;
clear: both;
}
#footer .wrapper {
z-index: 9999;
color: #000000;
text-align: center;
}
/*-----------------------------------------------------*/
#block1 p {
text-align: left;
padding: 20px 0px 30px 0px;
font-family: Verdana, sans-serif;
scroll-behavior: smooth;
font-size: 20px;
}
#block3 p {
text-align: right;
padding: 20px 15px 30px 20px;
font-family: Verdana, sans-serif;
scroll-behavior: smooth;
font-size: 20px;
}
#block1 h3 {
text-align: right;
padding: 10px 250px 0px 0px;
}
#block2 a  {
text-align: center;
color: #000;

text-decoration: none;
}
#block3 h2 {
text-align: center;}

#block2 h2 {
text-shadow: 5px 3px 0px #f1fb1091;
}
/*-----------------------------------------------------*/

.blur img {
transition: all 1s ease;
}
.blur img:hover {
filter: blur(5px);
}
/*-----------------------------------------------------*/
.demo {
position: relative;
padding-top: 35%;
overflow: hidden;
}
.demo input {
display: none;
}
.demo label {
transition: 3s;
}
.demo img {
position: absolute;
left: 50%;
top: 50%;
width: 400px;
height: 400px;
transform: translate(-50%, -50%);
}
.demo label{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transition: 3s;
}
.demo label,
.demo #on1:checked ~ [for="on1"],
.demo #on2:checked ~ [for="on2"],
.demo #on3:checked ~ [for="on3"],
.demo #on4:checked ~ [for="on4"],
.demo #on5:checked ~ [for="on5"] {
transform: translateX(-35%) scale(.7); z-index: 2;
}
.demo #on1:checked ~ [for="on3"],
.demo #on2:checked ~ [for="on4"],
.demo #on3:checked ~ [for="on5"],
.demo #on4:checked ~ [for="on1"],
.demo #on5:checked ~ [for="on2"] {
transform: translateX(35%) scale(.7); z-index: 2;
}
.demo #on1:checked ~ [for="on4"],
.demo #on2:checked ~ [for="on5"],
.demo #on3:checked ~ [for="on1"],
.demo #on4:checked ~ [for="on2"],
.demo #on5:checked ~ [for="on3"],
.demo #on1:checked ~ [for="on5"],
.demo #on2:checked ~ [for="on1"],
.demo #on3:checked ~ [for="on2"],
.demo #on4:checked ~ [for="on3"],
.demo #on5:checked ~ [for="on4"] {
z-index: 1;
}
.demo #on1:checked ~ [for="on2"],
.demo #on2:checked ~ [for="on3"],
.demo #on3:checked ~ [for="on4"],
.demo #on4:checked ~ [for="on5"],
.demo #on5:checked ~ [for="on1"] {
transform: translateX(0);
z-index: 4;
visibility: visible;
}

/*--------------------index1--------------*/



/*-------------------------------------------*/
/*--------------------index2--------------*/

main {
  margin-bottom: 100px;
}

#header1 {
  height: 650px;
  background: url(images/fon2.jpg);
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  margin-bottom: 80px;
}
#header1 h1 {
  padding:220px;
  font: 100px Bold Script ;
  color: #AFEEEE;
  text-shadow: 5px 5px 0px #000;
  text-align: center;
 
}





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


header {
  display: block;
  width: 965px;
  height: 100px;
  background-color: rgba(0, 0, 0, 0.4);
}


/*-------------------------------------------*/
/*СЛАЙДЩОУ*/

#men {
  margin-right: 177px;
  margin-left: 177px;
}

#men h2 {
  text-align: center;
   font: 28px Broadway ;
}

.container {
    
    overflow: hidden;
    padding: 20px;
    position: relative;
}

/*-------------------------------------------*/
span.cap {
    display:none;
}
.slider {
    position: relative;
    left: 14%;
}
ul.slider {
    margin:0 auto;
    height:534px;
    list-style:none;
    position:relative;
    width:900px;
}
ul.slider li {
    float:left;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides {
    height:300px;
    overflow:hidden;
    position:relative;
    width:600px;

    z-index:10;

    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    -webkit-transition: 1s;
    transition: 1s;
}
ul.slider li.slides img {
    display:block;
    left:50%;
    opacity:0; 
    position:absolute;
    top:0;

}
ul.slider li.slides img.g1,
ul.slider li.slides img.g2,
ul.slider li.slides img.g3,
ul.slider li.slides img.g4,
ul.slider li.slides img.g5,
ul.slider li.slides img.g6,
ul.slider li.slides img.g7,
ul.slider li.slides img.g8,
ul.slider li.slides img.g9 
{
    margin-left:-150px
}
ul.slider li.lArrow,
ul.slider li.rArrow {
    top:70px;
    position:relative;
    height:40px;
    width:40px;
    z-index:5;
}
ul.slider li.lArrow {
    left:-15px;
    
}
ul.slider li.rArrow {
    left:15px;
}
ul.slider li.lArrow a,
ul.slider li.rArrow a {
    display:block;
    position:absolute;
    top:5px;
    width:50px; 
}
ul.slider li.lArrow a:before {
    margin-left:15px;
    font: bold 20px "Verdana, Arial, sans-serif";
    color:black;
}
ul.slider li.rArrow a:after {
    margin-left:15px;
    font:bold 20px "Verdana, Arial, sans-serif";
    color:black;
}
ul.slider li.lArrow:hover {
    background-color:#eee;
    left:2px;
}
ul.slider li.rArrow:hover {
    background-color:#eee;
    left:-2px;
}
ul.slider li.track {
    background-color:rgba(255,255,255,0.3);
    clear:left;
    height:25px;
    margin-left:41px;
    margin-top:-25px;
    position:relative;
    text-align:center;
    width:400px;
    z-index:20;
}
ul.slider li.track a {
    background-color:#111111;
    display:inline-block;
    height:10px;
    margin:5px;
    width:10px;
}
ul.slider li.track a:hover {
    background-color:#ffc;
}

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











#nachos {
  margin-bottom: 400px;
}

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


#ourmenu {
  width: 100%;
  height: 150px;
  margin-top: -1250px;
}
#ourmenu p{
  text-align: center;
  width: 100%;
  font:80px Broadway;
  color:black;
  margin-top:20px;
  margin-bottom: 50px;
}
#ourmenu p:hover {
  text-shadow: 5px 5px 0px #60b35b;
  animation: scale 0.5s ease-out forwards;
  transition-duration: .2s;
}

@keyframes scale{
  100% {
      transform:scale(1.3, 1.3); 
    }
}
/*-------------------------------------------*/








#menu {
  width:25%;
  margin-bottom: 1200px;
}

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


ul{ 
  position:relative;    /* Относительное позиционирование родителя */
  list-style:none;
  font-family:Arial,Verdana,sans-serif;
  font-size:18px; 
  margin-left: 0px/*-40px*/;    
  }

ul#nav{
  display: block;
  float: left;
}

a{ 
  text-decoration:none;
}

ul#nav a{ 
  display:block;
   background:rgba(0, 113, 45, 1);/*(107,12,54,0.75); /* Полупрозрачный фон */
  color:#fff; 
  padding:10px;
  height: 120px;
  } 

ul#nav > li{
  position:relative;    /* Относительное позиционирование родителя */
  /*float: left;*/
  margin-right:100px;
  width: 300px;
  height: 100px;
  margin: 2px;
  color:#000 ;
  text-align: center;
  font: 30px Broadway ;
}

ul#nav ul{ 
  position:absolute; /* Абсолютное позиционирование */
  list-style:none; 
  left:-9999px; /* Скрываем за экраном, когда не нужно */ 
  opacity:0; /* Устанавливаем начальное состояние прозрачности */
  transition:opacity 0.5s linear; /* Замедление эффекта*/
} 

ul#nav ul li{
  padding-top:10px; /* Вводим отступ между li для разделения пунктов меню */         
  color:white;
  margin-left: 30px;
  font:20px Broadway;
  float: left;
  height: 45px;
  width: 300px;
}

ul#nav ul a{ 
  white-space:nowrap;/* Запрещаем перенос текста на следующую строку */
}

ul#nav li:hover ul{ /* Выводим выпадающее меню при наведении курсора */ 
  left:-70px; /* Возвращаем его обратно на экран*/ 
  opacity:1;
  top: 65px; /* Делаем непрозрачным */
  margin-top: 5px;    
} 

ul#nav li a:hover{ 
  background:rgba(146, 239, 140, 1)/*(107,12,54,1)*/;/* Непрозрачный фон при наведении мыши */
}

.clear {
  clear: left; /* Очистка обтекания */
}

a {
  font-color:black;
}

#nav2 li {
  margin-top: 50px;
}



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



/*ССССССС СЛАЙДШОУ  УУУУУУУ*/

.demo2 {
  position: relative;
  height: 535px;
  width: 800px;
  /*margin: 80px auto;*/

  margin-left: 400px;
  margin-top: 10px;
  margin-bottom: 300px;
}
.demo2 input {
  display: none; 
}
.demo2 img {
  position: absolute;
  width: 800px;
  height: 535px;
}
.demo2 label{
  position: absolute; 
  left: 0;
  top: -1085px;
  width: 800px;
  height: 535px;     
  visibility: hidden;
  opacity: 0;
  transition: 3s; 
 }
    
.demo2 #on1:checked ~ [for="on1"],
.demo2 #on2:checked ~ [for="on2"],
.demo2 #on3:checked ~ [for="on3"],
.demo2 #on4:checked ~ [for="on4"],
.demo2 #on5:checked ~ [for="on5"] {      
      visibility: hidden;
      opacity: 0;
    }
.demo2 #on1:checked ~ [for="on2"],
.demo2 #on2:checked ~ [for="on3"],
.demo2 #on3:checked ~ [for="on4"],
.demo2 #on4:checked ~ [for="on5"],
.demo2 #on5:checked ~ [for="on1"] {
      visibility: visible; 
      opacity: 1;
    }
/*-------------------------------------------*/


#sauce p{
  text-align: center;
  width: 100%;
  font:80px Broadway;
  color:black;
  margin-top:20px;
  margin-bottom: 50px;
}
#sauce p:hover {
  text-shadow: 5px 5px 0px #60b35b;
  animation: scale 0.5s ease-out forwards;
  transition-duration: .2s;
}

@keyframes scale{
  100% {
      transform:scale(1.3, 1.3); 
    }
}




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




.photos1 img{
	width: 310px;
	height: 230px;
	border: 4px solid green;
}



.photos1{ 
  width:1000px;
  margin:40px auto;
  }
.photos1 a{
  display:block-inline;
  background:#fff;
  margin-right:5px;
  margin-top:5px;
  padding:5px;
  float:left;
} 

 /*-------------------------------------------*/
.pressbox {
    width: 0;
    height: 0;
    position: fixed;
    overflow: auto;
    left: 0;
    top: 0;
    /* Поверх всех остальных элементов */
    z-index: 9999;
    text-align: center;
    /* Полупрозрачный серый фон */
    background: rgba(0,0,0,0.5);
    font:40px Broadway;
    color: #fff;

    }





 #container {
   position: relative;
   margin: 90px auto;
   width: 602px;
   height: 603px;
   z-index: 1;
   perspective: 1000px;
   }
   #card {
   width: 100%;
   height: 100%;
   box-shadow: 5px 5px 5px #aaa;
   transform-style: preserve-3d;
   transition: all 1.0s linear;
   }
   #container:hover #card {
   box-shadow: -5px 5px 5px #aaa;
   transform: rotateY(180deg);
   }
   .front {
   position: absolute;
   backface-visibility: hidden;

   }
   .back {
   backface-visibility: hidden;
   transform: rotateY(180deg);
   }
/*-------------------------------------------*/




.forma{
        margin:0px auto;
        width:400px;
      }
      input{
        display:block;
        margin:0px auto;
      }
      input:focus:invalid {
        background: pink;
        outline: 3px #f00 solid;
      }
      input:focus:valid {
        outline: 2px #0f0 solid; 
      }
      input:valid {
        background: white;
        outline: none; 
      }
      input:invalid {
        background: white;
        outline: 2px pink solid;
      }
     
#sauce2 p{
  text-align: center;
  width: 100%;
  font:70px Broadway;
  color:black;
  margin-top:20px;
  margin-bottom: 50px;
}
#sauce2 p:hover {
  text-shadow: 5px 5px 0px mediumaquamarine;
  animation: scale 0.5s ease-out forwards;
  transition-duration: .2s;
}

@keyframes scale{
  100% {
      transform:scale(1.2, 1.2); 
    }
}