*{
padding: 100;
margin 10;
}
body{
font-family: Palatino;
background: white;
color: black;
line-height: 1.6;
height: 100vh;
overflow: hidden;
}



img #exampimg{
position: absolute;
width: 50%;
}
section #second{
text-align: right;
}
section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
width: 100%;
height: 100vh;
scroll-snap-align: center;
overflow: hidden;
}

img{
padding: 20px;
height: 80vh;
}
.container{
width: 100%;
height: 100vh;;
overflow-x: scroll;
scroll-behavior: smooth;
scroll-snap-type: y  mandatory;
overflow: hidden;
}

.container2{
width: 100%;
height: 100%;
overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
}

.box1{
          display: flex;
          flex-direction: row;
     }

.box1-1{
	flex: 1;
	order: 1;
}

.box1-2{
	flex: 1;
	order: 2;
	padding: 10px;
}

.box2{
          display: flex;
          flex-direction: row;
     }

.box2-1{
        flex: 1;
        order: 2;
}

.box2-2{
        flex: 1;
        order: 1;
        padding: 10px;
}
.transition {
  position:absolute;
  height:100%;
  width:50%;
  background:skyblue;
/*  background:#d6d6d6;
  transform: skewX(-10deg) translateX(-50px);*/
  transition:2s all ease-in-out;
  -webkit-transition:2s all ease-in-out;
}

a{
text-decoration: none;
}
.transition2 {
  position:absolute;
  right: 0;
  height:100%;
  width:50%;
  background:skyblue;
  transition: 2s all ease-in-out;
  -webkit-transition: 2s all ease-in-out;
}
.content {
  position:relative;
  padding:200px 0 0 200px;
  color:#000;
  z-index:10;
  height:300px;
}


.cta {
  outline:none;
  border:none;
  text-decoration:none;
  text-transform:uppercase;
  background:#202020;
  color:#eaeaea;
  box-sizing:border-box;
  margin-top:20px;
  padding:10px 10px;
}

.anim-trans {
  animation: anim 4s ease-in-out;
  }
.ranim-trans {
  animation: ranim 4s ease-in-out;
  }

@keyframes anim{
     0% { }
     20%  { z-index:11;\transform: skewX(0deg) translateX(-100%); }
     40%   { transform: skewX(0deg) translateX(0);
        width:50%; z-index:11; box-shadow: none;}
     60%   { transform: skewX(0deg) translateX(0);
        width:25%;z-index:11; box-shadow: none;}
     80%   { transform: skewX(0deg) translateX(0px);
         width:0%;z-index:11; box-shadow: none;}
     100%   { transform: skewX(0deg) translateX(0px);
        width:50%; z-index:1; box-shadow: none;}
}

@keyframes ranim{
     0% { }
     20%  { z-index:11;\transform: skewX(0deg) translateX(100%); }
     40%   { transform: skewX(0deg) translateX(0);
 width:50%; z-index:11; box-shadow: 10px 10px 5px #eaeaea;}
     60%   { transform: skewX(0deg) translateX(0);
 width:25%;z-index:11; box-shadow: 10px 10px 5px #eaeaea;}
     80%   { transform: skewX(0deg) translateX(0);
 width:0%;z-index:11; box-shadow: 10px 10px 5px #eaeaea;}
     100%   { transform: skewX(0deg) translateX(0);
 width:50%;z-index:1; box-shadow: none;}