/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
body{background: #FFF;}
html, body { height: 100%; }
* {box-sizing: border-box;}
/* wrapper */
#wrapper{position: fixed;left: 0;height: 80%;width: 100vw;overflow: hidden;}
#wrapper > .item{display: block;top: 0;height: 100%;position: absolute;width: calc(100% / 3 );-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;overflow: hidden;z-index: 1;}
#wrapper > .item:hover{z-index: 2;-webkit-box-shadow: 0 0 24px 0px rgba(0,0,0,0.25);box-shadow: 0 0 24px 0px rgba(0,0,0,0.25);}
#wrapper > .item:nth-child(2){left: calc(100% / 3 );background: #CCC;}
#wrapper > .item:nth-child(3){left: auto;right: 0;}
#wrapper > .item > .logo {display: block;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 25vw;height: 25vh;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;z-index: 20;}
#wrapper > .item:hover > .logo {-webkit-transform: translate(-50%, -50%) scale(1.05);transform: translate(-50%, -50%) scale(1.05);}
#wrapper > .item > .logo > img{max-width: 100%;position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);max-width: 75%;max-height: 75%;width: auto;height: auto;-webkit-filter: drop-shadow(0 4px 4px rgba(255,255,255,.5));filter: drop-shadow(0 4px 4px rgba(255,255,255,.5));}
#wrapper:hover > .item:not(:hover) > .picture{-webkit-filter: brightness(95%);filter: brightness(95%);}
#wrapper > .item > .picture{display: block;height: 100vh;width: 100%;z-index: 1;-webkit-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
#wrapper > .item > .picture > img {display: block;object-fit: cover;object-position: center center;width: 100%;height: 100%;}
@media only screen and (max-width: 992px){
  #wrapper > .item {width: 100vw;height: calc(100% / 3  );}
  #wrapper > .item:nth-child(2){left: 0;top: calc(100% / 3);}
  #wrapper > .item:nth-child(3){top: auto;bottom: 0;left: 0;}
  #wrapper > .item > .logo{width: 50%;}
}
/* header */
#header {position: fixed;bottom: 0;height: 20%;width: 100vw;display: block;padding: 48px;box-sizing: border-box;z-index: 2;-webkit-box-shadow: 0 0 24px 0px rgba(0,0,0,0.25);box-shadow: 0 0 24px 0px rgba(0,0,0,0.25);}
#header > .logo{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);width: 40vw;height: 15vh;/*margin-top: -4vh;*/}
#header > .logo > img{position: absolute;top: 50%;left: 50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);display: block;max-width: 100%;max-height: 100%;width: auto;height: auto;-webkit-filter: drop-shadow(0 10px 4px rgba(0,0,0,.1));filter: drop-shadow(0 10px 4px rgba(0,0,0,.1));}
@media only screen and (max-width: 1200px){
  #wrapper {height: 85%;top: 15%;}
  #header{height: 15%;bottom: auto;top: 0;}
  #header > .logo{margin-top: 0;height: 10vh;width: 50vw;}
}
@media only screen and (max-width: 992px){
  #header > .logo{margin-top: 0;width: 60vw;}
}