$color1: #244F75;
$color2: #60BFBF;
$color3: #8C4B7E;
$color4: #F8BB44;
$color5: #F24B4B;

@mixin easeOut {
  transition: all .6s cubic-bezier(0.23, 1, 0.32, 1);
}

@mixin break {
  @media screen and (max-width: 760px) {
    @content;
  }
}

* {
  box-sizing: border-box;
}

.strips {
  min-height: 100vh;
  text-align: center;
  overflow: hidden;
  color: white;
  
  &__strip {
    will-change: width, left, z-index, height;
    position: absolute;
    width: 20%;
    min-height: 100vh;
    overflow: hidden;
    cursor: pointer;
    @include easeOut;
    
    &:nth-child(1) {
      left: 0;
    }
    
    &:nth-child(2) {
      left: 20vw;
    }
    
    &:nth-child(3) {
      left: 40vw;
    }
    
    &:nth-child(4) {
      left: 60vw;
    }
    
    &:nth-child(5) {
      left: 80vw;
    }
    
    &:nth-child(1) {
      .strip__content {
        background: $color1;
        transform: translate3d(-100%, 0, 0);
        animation-name: strip1;
        animation-delay: 0.1s;
      }
    }
    
    &:nth-child(2) {
      .strip__content {
        background: $color2;
        transform: translate3d(0, 100%, 0);
        animation-name: strip2;
        animation-delay: 0.2s;
      }
    }
    
    &:nth-child(3) {
      .strip__content {
        background: $color3;
        transform: translate3d(0, -100%, 0);
        animation-name: strip3;
        animation-delay: 0.3s;
      }
    }
    
    &:nth-child(4) {
      .strip__content {
        background: $color4;
        transform: translate3d(0, 100%, 0);
        animation-name: strip4;
        animation-delay: 0.4s;
      }
    }
    
    &:nth-child(5) {
      .strip__content {
        background: $color5;
        transform: translate3d(100%, 0, 0);
        animation-name: strip5;
        animation-delay: 0.5s;
      }
    }
    
    @include break {
      min-height: 20vh;
      &:nth-child(1) {
        top: 0;
        left: 0;
        width: 100%;
      }

      &:nth-child(2) {
        top: 20vh;
        left: 0;
        width: 100%;
      }

      &:nth-child(3) {
        top: 40vh;
        left: 0;
        width: 100%;
      }

      &:nth-child(4) {
        top: 60vh;
        left: 0;
        width: 100%;
      }

      &:nth-child(5) {
        top: 80vh;
        left: 0;
        width: 100%;
      }
    }
  }
  
  .strip__content {
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: both;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-decoration: none;

    &:hover {
      &:before {
        transform: skew(-30deg) scale(3) translate(0, 0);
        opacity: 0.1;
      }
    }

    &:before {
      content: "";
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: white;
      opacity: 0.05;
      transform-origin: center center;
      transform: skew(-30deg) scaleY(1) translate(0, 0);
      @include easeOut;
    }
  }
  
  .strip__inner-text {
    will-change: transform, opacity;
    position: absolute;
    z-index: 5;
    top: 50%;
    left: 50%;
    width: 70%;
    transform: translate(-50%,-50%) scale(0.5);
    opacity: 0;
    @include easeOut;
  }
  
  &__strip--expanded {
    width: 100%;
    top: 0 !important;
    left: 0 !important;
    z-index: 3;
    cursor: default;
    
    @include break {
      min-height: 100vh;
    }
    
    .strip__content {
      &:hover {
        &:before {
          transform: skew(-30deg) scale(1) translate(0, 0);
          opacity: 0.05;
        }
      }
    }
    
    .strip__title {
      opacity: 0;
    }
    
    .strip__inner-text {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }
}

.strip__title {
  display: block;
  margin: 0;
  position: relative;
  z-index: 2;
  width: 100%;
  font-size: 3.5vw;
  color: white;
  @include easeOut;
  
  @include break {
    font-size: 28px;
  }
}

.strip__close {
  position: absolute;
  right: 3vw;
  top: 3vw;
  opacity: 0;
  z-index: 10;
  @include easeOut;
  cursor: pointer;
  transition-delay: 0.5s;
  
  &--show {
    opacity: 1;
  }
}

@keyframes strip1 {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strip2 {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strip3 {
  0% {
    transform: translate3d(0, -100%, 0);
  }
  
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strip4 {
  0% {
    transform: translate3d(0, 100%, 0);
  }
  
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes strip5 {
  0% {
    transform: translate3d(100%, 0, 0);
  }
  
  100% {
    transform: translate3d(0, 0, 0);
  }
}

/* Demo purposes */

body {
  font-family: 'Lato';
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  line-height: 1.5;
}

h1, h2 {
  font-weight: 300;
}

.fa {
  font-size: 30px;
  color: white;
}

h2 {
  font-size: 36px;
  margin: 0 0 16px;
}

p {
  margin: 0 0 16px;
}

.matdiv{
	width:100%;
	height:auto;
	padding:5px;
	margin:10px 0px;
border-bottom:solid 2px #999


	}

.matlogo{
	width:100%;
	height:auto;
	line-height:50px;
	float:left
	}
.matpara{
	width:95%;
	height:auto;
	line-height:100px;
	float:left
	
	}
.matlogo img{
	width:150px;
	height:auto
	}
.matpic img{
	width:200px;
	height:auto;
		
	}
.matpara p{
font-size:12pt
	}
.matpic{
	width:75%;
	height:50px;
	margin-top:0px;
	
	
	}
.matbtn{
	width:150px;
	height:25px;
	border-radius:100px;
	background:#006;
	color:white;
	float:right;
	margin-right:150px;
	cursor:pointer	
	}
.matbtn:hover{
	background:#03F;
	cursor:pointer
	}

.material{
	width:14.28%;
	height:70px;
	padding:10px;
	line-height:100px;
	background:#CCCCCC;
		}
.mainmat{
	width:100%;
	height:auto;
	position:fixed;

	}
.matback{
	background:black;
	width:100%;
	height:auto;
	 
	}
.transxlogo img{
	margin-top:20px
	}
.life{
	color:white;
	font-size:15pt;
	font-family:'Oswald', serif;
	}
.extra{
	color:white;
	font-size:28pt;
	font-family:'Oswald', serif;
	}
.act{
	color:white;
	font-size:18pt;
	font-family:'Oswald', serif;
	}
.figimg{
	width:85%;
	height:270px;

	background:black
	
	}
.figimg figure{
	width:25%;
	height:auto;
	float:left;

	}
.great{
	color:#09F;
	font-size:35pt;
	font-family:'Oswald', serif;
	}
#arrowbtn{
	width:50px;
	height:50px;
	background:black;
	float:right;
	opacity:0;
	border-radius:100px
	}
.triheader{
	width:85%;
	height:400px;


	}
.boxes{
	width:33%;
	height: auto;
	border:1px solid #999999;
	float:left
}
.box{
	width:33%;
	height:230px;
	float:left;
	margin-top:50px;
	padding:20px
	
}
.boximg{
	width:90%;
	height:100%;
	padding:10px;
	border:1px solid #999999;
	}
.technicalTable{
    width: 100%;
    border: 1px solid #ebebeb;

}
.technicalTable td{
    line-height: 50px;
    color: #64686e;
    font-size: 16px;
    padding: 0 15px;
    border-top: 1px solid #ebebeb;
}
.range{
	width:65%;
	height:30px;
	background:#CCC;
	border:1px solid white;
	}
.per{
	width:5%;
	height:30px;
	background:#666;
	color:white;
	text-align:center;
	line-height:30px;
	font-size:12pt;
	float:left;
	border-bottom:1px solid white;
	border-top:1px solid white;
	border-left:1px solid white;
	}
.val{
	width:41%;
	height:30px;
	background:#910303;
	color:white;
	text-align:left;
	line-height:30px;
	font-size:12pt;
	float:left;
	margin-left:40px;
	padding-left:10px;
	border-bottom:1px solid white;
	border-top:1px solid white;
	border-right:1px solid white;
	}
.val2{
	width:41%;
	height:30px;
	background:#910303;
	color:white;
	text-align:right;
	line-height:30px;
	font-size:12pt;
	float:left;
	margin-right:40px;
	padding-right:10px;
	border-bottom:1px solid white;
	border-top:1px solid white;
	border-right:1px solid white;
	}
#OPTILEXAR{
	width:70px;
	height:30px;
	background:#999;
	font-size:12pt;
	text-align:center
		}
	#imgline{
	    
	    width:50%;  height:auto; margin-left:0px;
	}
#imglineout{
    width:50%;  height:auto;
    
}
@media screen and (min-width:200px){
#coatingdiv{
	margin-left:50px;
	width:100%;
	
	}
	#imgline{
	    
	    width:100%;  height:auto; margin-left:0px;
	}
	
	#imglineout{
    width:100%;  height:auto;
    
}
	
	}
	
@media screen and (max-width:400px){
#coatingdiv{
	margin-left:25px;
	
	}
}
.sennav{background: #CCC; width:14.28%; height:70px; float:left; line-height:70px; padding:5px; text-align:center;
}
.sennav:hover{
	background:#999
	}
.fixnav{


	width:100%;

	}
#glass{
	position:relative;
	top:0px;
	left:-0px;
	transition:all 0.8s;
	-webkit-transition:all 0.8s
	}
#proimg{
	display:block
	}
#prohimg{
	width:25%;
	height:auto
	}
#trivexdiv{
background:none;
height:1350px	
	}
.newboxdiv{
	width:100%; margin-top:0px; border-top:10px solid black; border-bottom:10px solid black; padding:20px;
	text-align:center;
	}