body, html{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body{

    font-family: 'Barlow', sans-serif;
    font-size: 1.6em;
    line-height: 1.3em;
    background-color: #ffffff;
} 
a{color: black;}
a:hover{color:blue}  
h1{font-size: inherit;display: inline;margin: 0;font-weight: 500;}
h2{font-size: inherit;display: block;font-weight: 800;font-size: 2em;}
strong{font-weight: 500;}
h3{margin: 0;padding: 0;}

.badge
{position: absolute;
    top:20px;right:240px;
	z-index:20000; width:120px;}


img{border: 0;display: block;}
.logo{
    position: absolute;
    top:30px;left:30px;
    text-transform: uppercase;  
    z-index: 10000;
    mix-blend-mode: hard-light;    
    font-size: 19px;
    text-decoration: none;
	z-index:1000;
}
.logo img{max-width: 50px;float: left;padding-right: 5px;}
.logo p{display: block;margin: 0;width: 200px;line-height: 1.1em;padding-left: 5px;}
.logo p::after{clear: both;}
.logo small {display: block;}
.logo strong{font-weight: bolder;}



.ommig{
  background-image: url(../images/web.png);
  background-position: right 45% bottom ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: contain;
}

.pricetag{
	border-radius:5px;
	background-color:#6c9e6a;
	text-align:center;
	vertical-align: middle;
	padding:5px;
	display:block;	
		
	color:white;
	line-height:1.0em
}
.pricetag small{font-size:11px;}
#what img{
    width: 80px;
    display: block;
    float: right;
    margin: 0 0 5px 10px;
  }
#what img::after{clear: both;content: "";display: table;}
#what{
  display: grid; 
   grid-template-rows: 1fr;
   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
   grid-auto-flow: dense;
   gap: 20px;
}
#what1:hover, #what2:hover, #what3:hover, #what4:hover, .img-grid a:hover{
  transform: scale(1.15);
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
  cursor: pointer;z-index: 100;
}
#what1, #what2, #what3, #what4{
  background-color: #f7f7f7;
  transition: transform .2s; 
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  padding: 20px;
  border-radius: 5px;
  font-size: 0.8em;
  line-height: 1.2em;
}
#what a{display: block;text-decoration: none;}
#what a:hover{color:black;}

.content{
    display: table; 
    margin: 0 auto;
    height: 95vh;
    vertical-align: middle;
    text-align: left;
    width: 1440px;
}

.text{
   display: table-cell;
   vertical-align: top;
   padding: 20px;
   font-weight: 300;
   text-align: left;
   vertical-align: middle;
   
}


.aboutMe{max-width: 50%;}
.ico{float: left;width: 80px;margin-top: -20px;padding-right: 10px;}


@media only screen and (max-width : 1200px){
.content{width:auto;}
.aboutMe{max-width: 45%;font-size:0.8em}
#what {font-size: 1em;grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));}
#what1:hover, #what2:hover, #what3:hover, #what4:hover, .img-grid a:hover{transform: scale(1.03);}
}



@media only screen and (max-width : 1024px){
.content{width:auto;}
.ico{width: 60px;margin-top: -10px;padding-right: 10px;}
.text h2{font-size:1em;}
.ommig{
  background-image: url(../images/web.png);
  background-position: right 0 center ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 60%;
}
.aboutMe{max-width: 65%;font-size:0.9em}
}



@media only screen and (max-width : 768px) { 
.content{width:auto;}
.text h2{font-size:1em;}
.ico{width: 60px;margin-top: -10px;padding-right: 10px;}
.ommig{
  background-image: url(../images/web.png);
  background-position: right 0 top ;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100%;
}
.aboutMe{max-width: 95%;font-size:0.7em;line-height: 1.3em;}
}
@media only screen and (max-width :  640px) {
.content{width:auto;}
#what {font-size: 0.8em;grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));}
#kontakt, .desc{font-size:0.8em;line-height: 1.2em;}
.ico{width: 40px;margin-top: 0;padding-right: 10px;}
.text{   padding: 20px 50px 20px 20px;}
#what img{width: 60px;}
.logo{top:10px;left:10px;font-size:16px;}
.logo p{width: 160px;}
.logo img{width: 40px;}
#menuToggle
{

  top: 20px!important;
  right: 20px!important;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  font-size: 12px;
 
}
.content{height: auto;}
#menu{
  width: 420px!important;
  font-size: 11px!important;

}
}
  









.img-grid{
  display: grid; 
  grid-template-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  grid-auto-flow: dense;
  gap: 20px; 
  margin: 0 auto;
}
.img-grid img{
  width: 100%;
  height: 100%;
  border-radius: 5px;
  overflow: hidden;
  object-fit: cover;
}
.img-grid a{
  transition: transform .2s;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
  position: relative;
  z-index: 2;
  width: 100%;
  height: 350px;
}
.img-grid a small{
  position: absolute;
  bottom:20px;
  width: 100%;
  line-height: 40px;
  background: #00000071;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.2s, opacity 0.2s;
  padding-left:10px;
  box-sizing: border-box;
  color: #f7f7f7;
  backdrop-filter: blur(10px);  
}
.img-grid a:hover small{
  opacity: 1;
  transform: translateY(0); 
  z-index: 100;
  }










#menuToggle
{
  display: block;
  position: absolute;
  top: 70px;
  right: 50px;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
  font-size: 14px;
 
}
#menuToggle a{text-decoration: none;color: #525252;transition: color 0.3s ease;}
#menuToggle a:hover{color: blue;text-decoration: underline;}
#menuToggle input
{
  display: block;
  width: 40px;
  height: 32px;
  position: absolute;
  top: -7px;
  left: -5px;
  cursor: pointer;
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  -webkit-touch-callout: none;
}
#menuToggle span
{
  display: block;
  width: 50px;
  height: 5px;
  margin-bottom: 5px;
  position: relative;
  background: #000000;
  border-radius: 50px;
  z-index: 1;
  transform-origin: 4px 0px;
  transition: transform 0.5s cubic-bezier(0.57,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.57,0.2,0.05,1.0),
              opacity 0.55s ease;
              
}

#menuToggle span:first-child {transform-origin: 0% 0%;}
#menuToggle span:nth-last-child(2){transform-origin: 0% 100%;}
#menuToggle input:checked ~ span{opacity: 1;transform: rotate(45deg) translate(-10px, -6px);background: #353535;}
#menuToggle input:checked ~ span:nth-last-child(3){opacity: 0;transform: rotate(0deg) scale(0.2, 0.2);}
#menuToggle input:checked ~ span:nth-last-child(2){transform: rotate(-45deg) translate(0, -1px);}
#menu
{
    position: absolute;
    width: 380px;
    text-align: left;
    margin: -100px 0 0 0;
    padding: 50px;
    padding-top: 125px;
    right: -120px;
    background-color: #f7f7f7;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(100%, 0);
    transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    box-sizing: content-box;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}
#menu li{padding: 10px 0;font-size: 2em;}
#menuToggle input:checked ~ ul {transform: none;}