* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: sans-serif;
}

body {
 line-height: 1.3;	
}	
	
a {
 text-decoration: none;	
}	

p {
 margin-bottom: 8px;	
}	
	
img {
 max-width: 100%;
 height: auto; 
}

.hidden {
 opacity: 0;
 z-index: -99;
 visibility: hidden; 
}	
	
.main-container {
 scroll-snap-type: y mandatory;
 overflow-y: scroll;
 scrollbar-width: none; 
 height: 100vh;
}

section {
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;	
 scroll-snap-align: start;
}

section.screen-one {
 justify-content: normal; 
 flex-wrap: wrap; 
}

.screen-one .main-wrapper {
 border: 0px solid #cc0000;
 width: 100vw;
 height: 90%;
 display: flex;

}

.screen-one .kpo-wrapper {
 border: 0px solid #cc0000;
 width: 100vw;
 height: 10%;
 display: flex;
 justify-content: center;
 padding-top: 5px;
 padding-bottom: 5px;
 text-align: center;
}

.screen-one .kpo-wrapper img {
 max-height: 100%;
 cursor: pointer; 
}

.h-30 {
 height: 30%!important;	
}


.h-70 {
 height: 70%!important;	
}

.position-relative {
 position: relative;	
}

.col-left {
 width: 60vw; 
 height: 100%; 
}

.col-left .wrapper {
 height: 100%;
 display: flex; 
}

.col-left .wrapper.h-70 {
 border-bottom: 8px solid #fff;	
}

.col-left .l-1 {
 width: 64%;
 height: 100%; 
 border-right: 6px solid #fff;
 background-image: url('images/nonna-l-1.jpg');
 background-size: cover; 
 background-position: center;
 transition: all 0.6s ease;
 background-repeat: no-repeat; 	
}

.col-left .l-2 {
 width: 36%;
 height: 100%; 
 background-image: url('images/nonna-l-2.jpg');
 background-size: cover; 
 background-position: center;
 transition: all 0.6s ease;
 background-repeat: no-repeat; 	
}

.col-left .l-3 {
 width: 36%;
 height: 100%; 
 border-right: 6px solid #fff;
 background-image: url('images/nonna-l-3.jpg');
 background-size: cover; 
 background-position: center;
 transition: all 0.6s ease;
 background-repeat: no-repeat; 	
}

.col-left .l-4 {
 width: 70%;
 height: 100%; 
 border-right: 8px solid #fff;
 background-image: url('images/nonna-logo.jpg');
 background-size: 45vh; 
 background-position: center;
 transition: all 0.6s ease;
 background-repeat: no-repeat; 	
}

.col-right {
 width: 40vw;  
 height: 100%;  
}

.col-right .wrapper {
 height: 100%; 
 border-left: 8px solid #fff;
 background-image: url('images/nonna-wroclaw.jpg');
 background-size: cover; 
 background-position: center;
 transition: all 0.6s ease;
 background-repeat: no-repeat;
}

.col-left .wrapper .l-1:hover,
.col-left .wrapper .l-2:hover,
.col-left .wrapper .l-3:hover {
 opacity: 0.8;	
}

.col-right .wrapper:hover {
 opacity: 0.8;
}

.bottom-contact {
 position: absolute;
 bottom: 20px;
 width: 100%;
 left :0;
 text-align: center;
 font-size: 16px;
 font-weight: 600;
 color: #482321; 
 display: flex; 
 justify-content: center;
 align-items: center;
}

.bottom-contact a {
 color: inherit;	
}

.bottom-contact i {
 font-szie: 18px;	
}

.tel-ico {
 height: 20px;
 position: relative;
 top: 3px;
 margin-right: 8px; 
}

.social-block {
 position: absolute;
 bottom: 30px;
 right: 20px;
 width: 32px;
 color: #fff;
 font-size: 20px; 
}

.social-block i {
 width: 40px;
 height: 40px;
 display: block;
 background: rgba(0,0,0,.7);
 text-align: center;
 line-height: 40px;
 font-size: 25px;
 border-radius: 50%;
 margin-top: 8px;
 
}

.social-block a {
 color: inherit;	
}

#kpo-info {
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: rgba(0,0,0,.6);
 padding: 50px;
 display: flex;
 justify-content: center;
 align-items: center; 
 transition: all .3s ease;
}

#kpo-info .kpo-info-wrapper {
 background: #fff;
 padding: 40px;
 max-width: 850px;  
}

#kpo-info .close {
 position: absolute;
 right: 25px;
 top: 25px;
 color: #fff;
 font-size: 40px;
 display: block;
 cursor: pointer;
}

@media screen and (max-width: 768px) {

 .main-container {
  height: 95vh;
  height: 100dvh;  
 }
 
 section.screen-one {
 height: 100%;	 
 }

 .col-left {
   width: 100vw;
 }	
 
 .col-right {
  display: none;	 
 }
 
 .col-left .l-4 {
  background-size: 30vh;
 }
 
 .bottom-contact span {
  display: block;
  width: 100%;  
 }
 
 #kpo-info {
  padding: 10px;	 
 }
 
 #kpo-info .kpo-info-wrapper {
  padding: 20px;
  
 }
 
} /* media */