html { margin:0;padding:0;width:100%;min-height:100vh;		background-color: rgb(228,228,228);}
body { font-family: 'Work Sans', sans-serif;width:100%;height:100%;font-size:16px;margin:0;color:#222;}
body * { box-sizing:border-box }
img {max-width:100%;min-width:0;}
iframe {width:100%;}
#wrapper {margin:0 auto;width:30vw;position:Relative;z-index:10;}
header {text-align:center;padding:50px 0;}
header img {width:90vw;max-width:300px;}
#social, #contact {max-width:300px;margin:0 auto;}
#social {text-align:Center;}
#social a {font-size:23px;background-color:#444;color:#e3e3e3;text-align:center;padding:10px 0;width:47px;height:47px;border-radius:50%;display:inline-block;}
#contact i {font-size:18px;background-color:#444;color:#e3e3e3;text-align:center;padding:10px 0;width:38px;height:38px;border-radius:50%;display:inline-block;}
#contact > div {margin-bottom:10px;}
#contact a {text-decoration:none;color:#222}
#bg {width:100%;height:100%;position:fixed;top:0;left:0;background-color: rgb(228,228,228);background: linear-gradient(180deg, rgba(228,228,228,1) 0%, rgba(181,181,181,1) 75%, rgba(144,144,144,1) 100%);z-index:-1}
#bg img {width:100%;height:100%;display:block;}
#bg-right {position:fixed;right:0;bottom:0;width:40vw;height:auto;max-height:80vh;object-fit:contain;object-position:bottom right;display:block;transition:all 0.2s;animation: 0.4s ease-out 0s 1 slideInFromRight;}
#bg-left {position:fixed;left:0;bottom:0;width:40vw;height:auto;max-height:80vh;object-fit:contain;object-position:bottom left;display:block;animation: 0.4s ease-out 0s 1 slideInFromLeft;}
h2 {font-size:20px;text-align:center;}

@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

@media only screen and (max-width: 1000px) {
	 #wrapper {width:100vw;padding:0 20px;}
	 #info-wrap {display:flex;}
	 #bg-left {flex-basis:50%;position:static;width:auto;flex-shrink:1}
	 #info {flex-basis:40%;}
	 #bg-right {flex-basis:50%;position:static;width:auto;flex-shrink:1}
}

@media only screen and (max-width: 600px) {
	body {font-size:12px;}
	html {min-height:auto;}
	h2 {font-size:12px;}
	#contact {text-align:center;}
	#social a {font-size:17px;width:39px;height:39px;}
	#contact i {font-size:17px;padding:10px 0;width:39px;height:39px;}
	#contact a span {display:none;}
	#contact div {display:inline-block}
	#bg-left {flex-basis:50%;position:relative;left:-20px;width:100%;height:100%}
	#bg-right {flex-basis:50%;position:Relative;right:-20px;width:100%;height:100%}
	#info-wrap {margin-top:-60px;}
}