html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, input ,textarea
{
    margin: 0;
    font-family: "DIN Pro Condensed",Arial,Verdana,sans-serif;
    font-size: 14pt;
    font-weight:400;
    color: #040707;
    position: relative;
    z-index: 1;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    outline: none;
    border: none;
}
body {	
    overflow-x: hidden;
    background: #fff;
}
::-webkit-input-placeholder { /* WebKit browsers */
    color:#2f4058;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:#2f4058;
}
br {
  	content:"";
  	margin:0;
  	display:block;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:#2f4058;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:#2f4058;
}
* {
  box-sizing:border-box;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color:#c6c6c6;
}
::-moz-placeholder { /* Firefox 19+ */
  color:#c6c6c6;
}
:-ms-input-placeholder { /* IE 10+ */
  color:#c6c6c6;
}
:-moz-placeholder { /* Firefox 18- */
  color:#c6c6c6;
}
.clear {
    clear:both;
}
h2 {
	font-size: 48px;
    line-height: 1em;
    font-weight: bold;
}
.logo {
    width: 200px;
    height: 200px;
    text-align: center;
    padding: 20px;
    position: absolute;
    z-index: 9999;
    background: #fff;
    border-radius: 50%;
    left: calc(50% - 100px);
    top: calc(50% - 100px);
}
.logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.container {
    display: flex;
    width: 120%;
    box-sizing: border-box;
    height: calc(100vh);
    left: -10%;
	background:#000;
}

.box {
	flex: 1;
	overflow: hidden;
	transition: .5s;
	margin: 0 0;
    box-shadow: 0 20px 30px rgb(0 0 0 / 10%);
    line-height: 0;
    -webkit-transform: skewX(-10deg);
    -ms-transform: skewX(-10deg);
    transform: skewX(-5deg);
}

.box > img {
	width:100%;
	height: calc(100%);
	object-fit: cover; 
	transition: .5s;
    filter: grayscale(100%);
    opacity: .3;
}
.box:hover img {
    filter: grayscale(0);
    opacity: 1;
}

.box > span {
  display: block;
  position: absolute;
  top: 0;
  width: 100%;
  text-align: center;
  background: #fff;
  padding: 20px;
}
.box > span img {
  max-width:100%;
}
.box > h2 {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    color: #fff;
    font-weight: bold;
    font-size: 90pt;
    width: 100%;
    text-align: center;
    line-height: 100vh;
	transition: .5s;
}
.box:hover > h2 {
    line-height:90vh;
}





@media(max-width:1024px) {




.box {
    flex: none;
    overflow: hidden;
    transition: .5s;
    margin: 0 0;
    box-shadow: 0 20px 30px rgb(0 0 0 / 10%);
    line-height: 0;
    -webkit-transform: skewX(0deg);
    -ms-transform: skewX(0deg);
    transform: skewX(0deg);
    width: 100%;
    float: left;
    height: 50vh;
}
.box > img {
    object-fit: cover;
}
.box > h2 {
    font-size: 50pt;
    line-height:50vh;
}
.box:hover > h2 {
    line-height:40vh;
}
.container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh);
    left: 0;
    background: #000;
    align-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: column;
}
























}