*:active, *:focus{ outline:0; }

a{ display:inline-block; position:relative; color:#27b; text-decoration:none; transition:all ease 0.5s; }
a::after{ content:""; display:block; position:absolute; left:0; width:100%; right:0; height:1px; bottom:-2px; background:#27b; transition:all ease 0.5s; }
a:hover{ color:#048; }
a:hover::after{ left:50%; right:50%; width:0; background:#048; }

body{ margin:0; min-width:500px; }
#wrapper{ display:block; position:fixed; top:0; left:0; right:0; bottom:0; overflow:hidden; width:100vw; height:100vh; background:#000 url('media/background.jpg') no-repeat left top; background-size:cover; }
#wrapper::before, #wrapper::after{ content:""; display:block; position:absolute; top:0; left:-50px; bottom:0; width:50px; height:100%; background:#000; z-index:2; box-shadow:0 0 150px 100px #000; }
#wrapper::after{ left:auto; right:-50px; width:50px; }
#bg001{ display:block; position:absolute; top:0; left:0; width:100%; height:auto; margin:0; z-index:1; }

#content{ display:block; position:relative; width:800px; height:150px; max-width:calc(100% - 50px); min-width:500px; padding:0; background:transparent; color:#fff; z-index:3; margin:calc(50vh - 150px) auto; }
#content h1{ display:block; color:#fff; font-family:"Arial", sans-serif; font-size:77px; text-align:center; text-transform:uppercase; font-weight:bold; text-shadow:0 0 50px #000; white-space:nowrap; margin:0; }
#content h1 small{ display:block; font-weight:normal; font-size:0.5em; letter-spacing:0.4em; }
#content h1 small i{ font-style:normal; letter-spacing:0; }
#content img{ display:block; position:relative; clear:both; margin:10px auto; cursor:pointer; height:auto; width:80px; }

#credit{ display:block; position:absolute; top:10px; left:10px; width:18px; height:18px; border:1px solid #fff; background:#fff; border-radius:10px; color:#000; font-family:"Arial", sans-serif; font-weight:bold; text-align:center; line-height:18px; font-size:16px; cursor:help; z-index:5; transition:all ease 0.5s 0.3s; }
#credit.showingCred{ background:#000; color:#fff; }

#vidCred{ display:block; background:#fff; color:#000; position:absolute; top:35px; left:-320px; z-index:5; font-family:"Arial", sans-serif; font-size:13px; padding:20px; opacity:0.85; border-radius:8px; text-align:left; transition:all ease 0.5s 0.3s; }
#vidCred.showCred{ left:10px; }

#mailFrame{ display:block; position:fixed; width:120vw; height:120vh; background:#fff url('media/bg002.jpg') no-repeat center bottom; background-size:cover; box-shadow:0 0 600px 400px #000; top:-10vh; left:-10vw; z-index:6; opacity:0; visibility:hidden; transition:all ease 1s 0.5s; }
#mailFrame.show{ width:480px; height:calc(100vh - 20px); top:10px; bottom:10px; left:calc(50vw - 240px); opacity:1; visibility:visible; transition:all ease 1s 0.5s; border-radius:15px; }
	
#mailFrame::before, #mailFrame::after{ content:""; display:block; position:absolute; top:calc(100% + 20px); bottom:calc(-100% - 20px); left:-8px; width:2px; height:calc(100% + 20px); background:#fff; transition:all ease 0.5s; }
#mailFrame::after{ left:auto; right:-8px; top:calc(-100% - 20px); bottom:calc(100% + 20px); }
#mailFrame.show::before, #mailFrame.show::after{ top:-10px; bottom:-10px; transition:all ease 0.5s 2s; }

#mailFrame #closeBtn{ display:block; position:absolute; top:15px; right:15px; background:transparent; width:20px; height:20px; overflow:hidden; cursor:pointer; }
#mailFrame #closeBtn i{ display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:calc(100% - 4px); height:calc(100% - 4px); border:2px solid #000; background:transparent; transform:rotate(45deg);  transition:all ease 0.5s; }
#mailFrame.show #closeBtn i{ transition:all ease 0.5s 2s; }
#mailFrame #closeBtn i:nth-of-type(1){ bottom:auto; top:calc(-50% - 15px); }
#mailFrame #closeBtn i:nth-of-type(2){ top:auto; bottom:calc(-50% - 15px); }
#mailFrame #closeBtn i:nth-of-type(3){ right:auto; left:calc(-50% - 15px); }
#mailFrame #closeBtn i:nth-of-type(4){ left:auto; right:calc(-50% - 15px); }
#mailFrame.show #closeBtn i:nth-of-type(1){ bottom:auto; top:calc(-50% - 7px); }
#mailFrame.show #closeBtn i:nth-of-type(2){ top:auto; bottom:calc(-50% - 7px); }
#mailFrame.show #closeBtn i:nth-of-type(3){ right:auto; left:calc(-50% - 7px); }
#mailFrame.show #closeBtn i:nth-of-type(4){ left:auto; right:calc(-50% - 7px); }

#mailFrame #disclaim{ display:block; position:relative; margin:100px 20px 30px 20px; text-align:justify; font-family:"Arial", sans-serif; font-size:1em; opacity:0; visibility:hidden; transition:all ease 0.5s; }
#mailFrame #messageForm{ display:block; position:relative; margin:20px; text-align:left; font-family:"Arial", sans-serif; opacity:0; visibility:hidden; transition:all ease 0.5s; }
#mailFrame.show #disclaim{ opacity:1; visibility:visible; transition:all ease 1s 3s; }
#mailFrame.show #messageForm{ opacity:1; visibility:visible; transition:all ease 1s 3s; }

#mailFrame #messageForm fieldset{ border:0; margin:0; padding:0; }
#mailFrame #messageForm fieldset:nth-of-type(2){ font-size:0.7em; padding:0 0 10px 0; }
#mailFrame #messageForm small{ display:block; text-align:center; clear:both; margin:15px 0; }
#mailFrame #messageForm label{ display:inline-block; position:relative; text-align:right; font-size:1em; width:100px; margin:0 5px 10px 0; }
#mailFrame #messageForm label:nth-of-type(3){ top:-300px; }
#mailFrame #messageForm input[type="text"], #mailFrame #messageForm textarea{ display:inline-block; position:relative; text-align:left; font-size:0.9em; width:calc(100% - 113px); background:#ddd; margin:0 0 10px 0; padding:3px; font-family:"Arial", sans-serif; border:1px solid #ddd; color:#000; transition:all ease 0.5s; }
#mailFrame #messageForm textarea{ height:300px; resize:none; }
#mailFrame #messageForm input[type="text"]:focus, #mailFrame #messageForm textarea:focus{ border:1px solid #000; background:#fff; }
#mailFrame #messageForm input[type="submit"]{ display:block; width:calc(100% - 105px); margin:15px 0 15px 105px; text-align:center; font-family:"Arial", sans-serif; font-size:0.9em; color:#fff; background:#555; border:1px solid #555; padding:10px 0; font-weight:bold; cursor:pointer; text-transform:uppercase; transition:all ease 0.3s; }
#mailFrame #messageForm input[type="submit"]:hover{ color:#000; border:1px solid #fff; background:#fff; }

#mailFrame #messageForm input[type="submit"].disabled, #mailFrame #messageForm input[type="submit"].disabled:hover{ background:#aaa !important; border:1px solid #aaa !important; color:#777 !important; cursor:not-allowed !important; }

#msg{ display:block; position:relative; text-align:center; font-family:"Arial", sans-serif; font-size:20px; margin:20px auto; }

@media (max-width: 750px){
	#content h1{ font-size:60px; }
	#content img{ width:70px; }
}

@media (max-width: 600px){
	#content h1{ font-size:50px; }
	#content img{ width:60px; }
}