@import url('https://fonts.googleapis.com/css2?family=Rye&display=swap');
* {

  margin: 0;

  padding: 0;

font-family: 'Rye', cursive;

grid-column-gap;



  font-weight: 300;

	font-size: 12px;


  box-sizing: border-box;

}



*:focus {

  outline: 0;

}



body {

  display: grid;

  grid-template-columns: 350px 1fr;

  gap: 40px;

  padding: 20px;

  background: #ffffff;

}



img {

  display: block;

}

aside {

  max-width: 100%;





}

  text {

    color: black;

    padding: 20px;

    -moz-box-sizing: border-box; 

    box-sizing: border-box;

  }

.in-text {

     padding: 30px;

	font-size: 14px;

	  line-height: 1.8;

   }



section {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

  gap: 10px;

}
section_nd {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));

  gap: 10px;

}


section2 {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(850px, 1fr));

  gap: 20px;

}



section a {

  overflow: hidden;

  position: relative;

}
section_nd a {

  overflow: hidden;

  position: relative;

}



section a:hover img {

  transform: translateY(-100%);

}


section_nd a:hover img {

  transform: translateY(-100%);

}


section a:after {

  content: "";

  display: block;

  padding-top: 100%;

}

section_nd a:after {

  content: "";

  display: block;

  padding-top: 100%;

}




section img {

  max-width: 100%;

  transition: .3s;

  position: absolute;

}

section_nd img {

  max-width: 100%;

  transition: .3s;

  position: absolute;

}



section img:first-child {

  opacity: 1;

}
section_nd img:first-child {

  opacity: 1;

}



section img:last-child {

  margin-top: 100%;

}

section_nd img:last-child {

  margin-top: 100%;

}




article {

  display: grid;

  gap: 10px;

  width: 100%;

  max-width: 320px;

  text-align: center;

  position: fixed;

}



article img {

  max-width: 250px;

  margin: auto;

}



h1 {

  font-size: 25px;
letter-spacing: -1px;

	color: #4a4a4a;

font-family: 'Rye', cursive;
font-weight: bold;

}



h1:first-line {

  font-weight: 50;

}

h2 {

  color:aqua;

}

span.ingredient {

	    padding: 5px;

    color: #000000;

	background-color: #509fe2;

	    margin: 0px auto 0px auto; /* keep the table centered */



	

}





h2:first-line {

  font-weight: 70;

}



ul {

  list-style: none;

}



li {

  display: flex;

  align-items: center;

  justify-content:center;

	padding-top: auto;

	font-weight: 0.1;

		font-weight: bold;
color: #343434;




}



li3 {

  display: flex;

  align-items: center;

  justify-content:center;

	padding-top: auto;

	font-size: 12px;

		

		



}

li2 {

  display: flex;

  align-items: center;

  justify-content: center;

	padding-top:8px;



	color: #353535;

}

li > div {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 30px;

  height: 30px;

  margin-right: 5px;

  padding: 7px;

  color: #fff;

  background: #000;

  border-radius: 100%;

}

h4 {  font-size: 14px;
padding-left: 40px;
float: left;
margin-left: 1px;
margin-top: -12px;
font-style: normal;
}
h4.inst {  
font-size: 14px;
line-height: 40px;
background: url(../images/instagram2.png) no-repeat 0 100%;
 

}
h4.email {  
font-size: 14px;
line-height: 40px;
background: url(../images/email.png) no-repeat 0 100%;

}


h4.flag {  
font-size: 12px;
line-height: 24px;
background: url(../images/Flag1.PNG) no-repeat 0 100%;

}

.padding
{
width:32px;
height:24px;
padding: -20px -20px -20px -20px;
margin-left: 2px;
margin-right:2px;
}
.padding2
{
width:80px;
height:24px;
padding: -20px -20px -20px -20px;
margin-left: 2px;
margin-right:2px;
}

article a {

  color: inherit;

  text-decoration: none;

  border-bottom: 1px solid transparent;

  transition: border-color .3s;

}



article a:hover {

  border-color: #000;

  }

a:link {

	color: #2a67e4;

	text-decoration: underline;

}

a:visited {

	color: #2a67e4;

	text-decoration: underline;

}

a:hover {

	color: #749ff7;

	text-decoration: underline;

}

a:active {

	color: #749ff7;

	text-decoration: underline;

}

.custom-social a {

  text-decoration: none;

	margin-top: -10px;;

}



.custom-social img{

		margin-top: 60px;
		margin-bottom: -10px;

}

.custom-social2 a {

  text-decoration: none;

	margin-top: -20px;

}



.custom-social2 img{

		margin-top: -10px;

}
.custom-social3 img{

		margin-top: -20px;

}





@media (max-width: 1250px) {

  body {

    grid-template-columns: 1fr;

    gap: 30px;

    padding: 20px;

  }



  section {

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  }
  section_nd {

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  }


	

	  section2 {

    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

  }

	



  article {

    margin: auto;

    position: static;

  }

}



@media (max-width: 750px) {

  section {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  }
section_nd {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  }


}



@media (max-width: 750px) {

  section2 {

    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

  }

}