@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300i,700');
section {
     height: 100vh;
     overflow: hidden;
}
.calc {
     width: 20%;
}
.tep {
     display: none;
}
.info {
     background: #fff;
     position: relative;
}
.info h1 {
     font-family: 'Open Sans Condensed';
     font-weight: 700;
     text-transform: uppercase;
     font-size: 2.2em;
}
.info a.f {
     font-family: 'Open Sans Condensed';
     font-weight: 300;
     color: #424242;
     text-transform: uppercase;
     border: 1px solid orange;
     padding: .2em 1em;
}
.info a {
     color: #000;
}
.info ul {
     padding: 0;
     margin: 0;
}
.info ul li {
     font-family: 'Open Sans Condensed';
     font-weight: 300;
     color: #000;
}
.info::before {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: inherit;
     content: " ";
     transform: scale3d(1.1,1.1,1) skewX(355deg) skewY(359deg);
}
.item {
     padding: 0;
     height: 33.33333vh;
}
.item:nth-child(1) {
     width: 28%;
     background-image: url(making.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(2) {
     width: 31%;
     background-image: url(rothman.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(3) {
     width: 41%;
     background-image: url(love.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(4) {
     width: 30%;
     background-image: url(porsche.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(5) {
     width: 26%;
     background-image: url(valspar.png);
     background-position: -60px center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(7) {
     width: 24%;
     background-image: url(bigchief.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(8) {
     width: 25%;
     background-image: url(labnutrition.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(9) {
     width: 29%;
     background-image: url(karcher.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(10) {
     width: 21%;
     background-image: url(onebit.png);
     background-position: center center;
     background-size: cover;
     background-repeat: no-repeat;
}
.item:nth-child(11) {
     width: 25%;
     background-image: url(nextgen.png);
     background-position: -20px center;
     background-size: cover;
     background-repeat: no-repeat;
}
@media (max-width: 426px) {
     section {
          height: auto;
     }
     .item {
          height: 300px;
          width: 100% !important;
     }
     .calc {
          width: 100%;
          padding: 1em;
          display: none;
     }
     .tep {
          display: block;
          position: absolute;
          top: 0px;
          left: 0px;
          padding: 2em;
     }
     .tep .info {
          background: rgba(255, 255, 255, 0.5) !important;
          padding: .5em;
     }
     .tep .info::before {
          transform: scale3d(1.1,1.1,1) skewX(359deg) skewY(359deg);
     }
}