/* ------------------------------------------------------------------------------------
--  RESET
------------------------------------------------------------------------------------ */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, 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,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
    line-height: 1;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
::selection{
	background:white;
}
::-moz-selection{
	background:white;
}
/* ------------------------------------------------------------------------------------
--  GENERAL 
------------------------------------------------------------------------------------ */
html, body{ 
    width:100%;
    height:100%;
	margin: 0; 
	padding: 0;
    font-size:100%;
	font-family:'Varela', Helvetica, Arial, FreeSans, sans-serif;
	background:#111;
}
a{
	text-decoration:none;
	outline:none;
	color:#e0e0d7;
}
a:hover{
	color:#bab9b1;
}
p{
	line-height:1.6em;
	color:#808080;
	font-size:1em;
}
img, object, iframe, figure, video{
	float:left;
} 
img{
	max-width:100%;
}
@font-face {
    font-family: 'foglihtenno04regular';
    src: url('fonts/foglihtenno04-070-webfont.eot');
    src: url('fonts/foglihtenno04-070-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/foglihtenno04-070-webfont.woff') format('woff'),
         url('fonts/foglihtenno04-070-webfont.ttf') format('truetype'),
         url('fonts/foglihtenno04-070-webfont.svg#foglihtenno04regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

ul {
    list-style-image: url("images/bullet.png");
    line-height: 1.6em;
    color: #808080;
}

/* ------------------------------------------------------------------------------------
--  SPANS
------------------------------------------------------------------------------------ */
.colour{
	color:#b93f04;
	text-shadow:none;
}
.fractur{
	font-family:'UnifrakturMaguntia', cursive;
	font-size:1.6em;
}
/* ------------------------------------------------------------------------------------
--  WRAPPERS
------------------------------------------------------------------------------------ */
.wrapper{
	float:left;
	width:100%;
	background:#070a08;
	clear:both;
	position:relative;
}
.fixed{
	position:fixed;
	top:0;
	left:0;
	background:#070a08;
	box-shadow:0 2px 100px #000;	
	border-bottom:4px solid #b93f04;
	z-index:300;
}
.border{
	border-top:6px solid #111;
	border-bottom:6px solid #2c2b2c;
	background:url(images/pattern.jpg);
	background-repeat:repeat;
	box-shadow:0 2px 100px #000;
}
.border2{
	border-top:4px solid #b93f04;
	background:url(images/pattern.jpg);
	background-repeat:repeat;
}
.border3{
    background:#101612 url(images/bg.png);
    background-repeat:repeat;
	border-top:6px solid #111;	
}
.border4{
	border-top:6px solid #111;
	background:url(images/pattern.jpg);
	background-repeat:repeat;
	box-shadow:0 2px 100px #000;
}
.border5{
    background:#101612 url(images/bg.png);
    background-repeat:repeat;
	border-top:6px solid #111;	
	box-shadow:0 2px 100px #000;
}
/* ------------------------------------------------------------------------------------
--  SCROLLS
------------------------------------------------------------------------------------ */
#datescroll, #programscroll, #usagescroll, #outscroll, #reportscroll, #contactscroll{
	float:left;
	width:100%;
	margin-top:-4%;
}
#mapscroll{
	float:left;
	width:100%;
	margin-top:-8%;
}
/* ------------------------------------------------------------------------------------
--  HEADER
------------------------------------------------------------------------------------ */
header{
	width:100%;
	clear:both;
	float:left;
}
/* ------------------------------------------------------------------------------------
--  HEADER: LOGO
------------------------------------------------------------------------------------ */
#logo{
	float:left;
	height:80px;
	width:50%;
}
#logo h1{
    float:left;
	color:#bab9b1;
	font-size:1.2em;
	line-height:80px;
	margin-left:8%;
}
/* ------------------------------------------------------------------------------------
--  HEADER:NAVIGATION 
------------------------------------------------------------------------------------ */
nav{
    float:right;
    width:50%;
}
nav ul{
	list-style:none;
	float:left;
	width:100%;
	position:relative;
}
nav li{
	float:left;
	padding:0 2%;
	line-height:80px;
	background:#070a08;
	border-left:1px solid rgba(255,255,255,0.08);
}
nav li:last-child{
	border-right:1px solid rgba(255,255,255,0.08);
}
nav li:hover{
	background:#b93f04;	
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
nav a{
	display:inline-block;
    text-transform:uppercase;
    font-size:0.8em;
}

pre {
    margin-top: 1em;
    text-align: left;
    overflow: auto;
    width: auto;
    color: #000;
    background: none repeat scroll 0% 0% #C1C0B8;
    border-style: solid;
    border-color: #808080;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    border-width: 0.1em 0.1em 0.1em 0.8em;
    padding: 0.2em 0.6em;
    font-family: monospace,serif;
}

pre code {
    color: #2f2f2f;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------------------------
--  BLOCK1 HOMEPAGE
------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------
--  BLOCK1 HOMEPAGE: LEFT SIDE GENERAL 
------------------------------------------------------------------------------------ */
.left{
	float:left;
	width:50%;
	padding:15% 0;
	background:#070a08;
}
.left-inner{
	float:left;
	width:100%;
	padding:15% 0;
}
.left hgroup{
	float:left;
	width:100%;
	text-align:center;
	color:#e0e0d7;
}
.left h1{
	font-family:'foglihtenno04regular';
	font-size:6em;
	text-shadow:0 -1px 1px #fff;
	margin-bottom:20px;
}
@media screen and (max-width: 1366px) {
    .left h1 {
	font-size:4em;
  }
}
.left h2{
	text-transform:uppercase;
	font-size:2.8em;
	text-shadow:0 1px 1px #fff;
	margin-bottom:20px;
}
@media screen and (max-width: 1366px) {
    .left h2 {
	font-size:2.2em;
  }
}
.left h3{
	font-size:1.2em;
	margin-bottom:20px;   
	line-height:1.5em;
	text-transform:uppercase;
}
/* ------------------------------------------------------------------------------------
--  BLOCK1 HOMEPAGE: RIGHT SIDE GENERAL 
------------------------------------------------------------------------------------ */
.right{
	float:right;
	width:50%;
}
/* ------------------------------------------------------------------------------------
--  BLOCK OVER 
------------------------------------------------------------------------------------ */
.info{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	background:rgba(0,0,0,0.4) url(images/pat-dark.png);
	background-repeat:repeat;
}
.circles{
	float:left;
	margin:40% 10%;
	color:#e0e0d7;
}
/* ------------------------------------------------------------------------------------
--  .CIRCLE-WRAP
------------------------------------------------------------------------------------ */
.circle-wrap{

}
.first{
	position:absolute;
	left:4%;
	top:2%;	
}
.second{
	position:absolute;
	left:16%;
	top:44%;
}
.third{
	position:absolute;
	left:47%;
	top:30%;
}
.fourth{
	position:absolute;
	right:4%;
	top:48%;
}
/* ------------------------------------------------------------------------------------
--  .TRANS + .CIRCLE (1, 2, 3, 4)
------------------------------------------------------------------------------------ */
.trans{
    float:left;
    width:100%;
	min-height:100%;
	position:relative;
}
.trans .circle{
	position:absolute;
	top:0;
	left:0;	
	box-shadow:0 2px 100px #000;
	text-transform:uppercase;
	background:#b93f04;
	text-align:center;
		
	-webkit-transition: margin-left;
	-webkit-transition-timing-function: ease-in;
	-webkit-transition-duration: 250ms;
	
	-moz-transition: margin-left;
	-moz-transition-timing-function: ease-in;
	-moz-transition-duration: 250ms;
	
	-o-transition: margin-left;
	-o-transition-timing-function: ease-in;
	-o-transition-duration: 250ms;
	
	-ms-transition: margin-left;
	-ms-transition-timing-function: ease-in;
	-ms-transition-duration: 250ms;
}
.trans:hover .circle{
	margin-left:100%;
	opacity:0;
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	 transition: all 500ms ease;
}
.circle1{
	width:200px;
	height:200px;
	border-radius:100px;
	line-height:200px;
}
.circle2{
	width:180px;
	height:180px;
	border-radius:90px;
	line-height:180px;
}
.circle3{
	width:220px;
	height:220px;
	border-radius:110px;
	line-height:220px;
}
.circle4{
	width:170px;
	height:170px;
	border-radius:85px;
	line-height:170px;
}
/* ------------------------------------------------------------------------------------
--  .TRANS + .DETAILS (1, 2, 3, 4)
------------------------------------------------------------------------------------ */
.trans.details{
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
}
.details a{
	display:block;
	background:rgba(0,0,0,0.3);
	color:#bab9b1;
    text-transform:uppercase;
    font-size:0.9em;
}
.details a:hover{
	color:#e0e0d7;
}
.details1{
	width:200px;
	height:200px;
	border-radius:100px;
	text-align:center;
	line-height:200px;
	background:url(images/thinking.gif);
	background-repeat:no-repeat;
	background-size:cover;
}
.details2{
	width:180px;
	height:180px;
	border-radius:90px;
	text-align:center;
	line-height:180px;
	background:url(images/movie2.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.details3{
	width:220px;
	height:220px;
	border-radius:110px;
	text-align:center;
	line-height:220px;	
	background:url(images/frank-pic-6.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.details4{
	width:170px;
	height:170px;
	border-radius:85px;
	text-align:center;
	line-height:170px;
	background:url(images/flower.jpg);
	background-repeat:no-repeat;
	background-size:cover;	
}
/* ------------------------------------------------------------------------------------
--  .TRANS + .A (1, 2, 3, 4)
------------------------------------------------------------------------------------ */
.a1{
	width:200px;
	height:200px;
	border-radius:100px;	
}
.a2{
	width:180px;
	height:180px;
	border-radius:90px;	
}
.a3{
	width:220px;
	height:220px;
	border-radius:110px;	
}
.a4{
	width:170px;
	height:170px;
	border-radius:85px;	
}
/* ------------------------------------------------------------------------------------
--  BLOCKS 2, 3, 4, 5, 6, 7 GENERAL
------------------------------------------------------------------------------------ */
.strip{
	float:left;
	width:70%;
	margin:4% 15%;
	clear:both;
}
.bg{
	float:left;
	width:100%;
	background:rgba(0,0,0,0.9);
}
.bg2{
	float:left;
	width:100%;
	background:rgba(0,0,0,0.3);
}
.strip h1{
    color:#bab9b1;
    margin-bottom:60px;
    font-size:1.8em;
    text-transform:uppercase;
    text-align:center;
}
.strip h2{
	background:url(images/circle.png) 0 0;
	background-repeat:no-repeat;
	line-height:26px;
	padding: 0 0 20px 37px;
    color:#bab9b1;
    margin-bottom:40px;
    font-size:1.7em;
    text-transform:capitalize;
	border-bottom:1px solid rgba(255,255,255,0.05);
}
/* ------------------------------------------------------------------------------------
--  ABOUT
------------------------------------------------------------------------------------ */
#about {
	float:left;
	clear:both;
}
#about article{
	float:left;
	width:75%;
	margin:0 12.5%;
}
#about article p{
    margin-bottom:30px;
    text-align:left;
    font-size:1.15em;
}


/* ------------------------------------------------------------------------------------
--  INSTALLING
------------------------------------------------------------------------------------ */

#installing {
    float:left;
    clear:both;
}
#installing article{
    float:left;
    width:75%;
    margin:0 12.5%;
}
#installing article p{
    margin-bottom:30px;
    text-align:left;
    font-size:1.15em;
}



/* ------------------------------------------------------------------------------------
--  USAGE
------------------------------------------------------------------------------------ */

#usage {
    float:left;
    clear:both;
}
#usage article{
    float:left;
    width:75%;
    margin:0 12.5%;
}
#usage article p{
    margin-bottom:30px;
    text-align:left;
    font-size:1.15em;
}

/* ------------------------------------------------------------------------------------
--  OUTPUT
------------------------------------------------------------------------------------ */

#output {
    float:left;
    clear:both;
}
#output article{
    float:left;
    width:75%;
    margin:0 12.5%;

	background: url(images/output.png) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

}
#output article p{
    margin-bottom:30px;
    text-align:left;
    font-size:1.15em;
}

#report {
	float:left;
	clear:both;
}
#report article{
	float:left;
	width:75%;
	margin:0 12.5%;
}
#report article p{
	margin-bottom:30px;
	text-align:left;
	font-size:1.15em;
}

/* ------------------------------------------------------------------------------------
--  GALLERY
------------------------------------------------------------------------------------ */

#gallery{
	float:left;
	width:80%;
	margin-right:2%;
	position:relative;
}

#console-label {
	width:120px;
	height:120px;
	border-radius:60px;
	box-shadow:0 2px 100px #000;
	background:#b93f04;
	position:absolute;
	top:44%;
	right:21%;
}

#html-label {
	width:120px;
	height:120px;
	border-radius:60px;
	box-shadow:0 2px 100px #000;
	background:#b93f04;
	position:absolute;
	top:40%;
	right:21%;
}

/* ------------------------------------------------------------------------------------
--  BLOCK3 MAP + ADDRESS INFO PANEL
------------------------------------------------------------------------------------ */
#map_canvas{
	width:100%;
	height:300px;
	position:relative;
}
#map_canvas img{
	max-width:none;
}
/* ------------------------------------------------------------------------------------
--  PANEL
------------------------------------------------------------------------------------ */
#panel-wrap{
	position:absolute;
	top:-6px;
	left:0;
	width:100%;
	z-index:2;
}
#panel{
	float:left;
	background:#070a08;
	width:60%;
	margin:0 20%;
	display:none;
	border-radius:0 0 20px 20px;
	box-shadow:0 2px 100px #000;
}
/* ------------------------------------------------------------------------------------
--  PANEL CONTENT
------------------------------------------------------------------------------------ */
#panel-content{
	width:92%;
	padding:4%;
	clear:both;
	float:left;
}
#panel-content h2{
	background:url(images/circle.png) 0 0;
	background-repeat:no-repeat;
	line-height:26px;
	padding: 0 0 0 37px;
    color:#bab9b1;
    margin-bottom:20px;
    font-size:1.4em;
    text-transform:capitalize;
}
/* ------------------------------------------------------------------------------------
--  PANEL CONTENT LEFT SIDE
------------------------------------------------------------------------------------ */
.left-content{
	float:left;
	width:46%;
	margin-right:4%;
}
.left-content p{
	padding: 0 0 0 37px;
}
/* ------------------------------------------------------------------------------------
--  PANEL CONTENT RIGHT SIDE
------------------------------------------------------------------------------------ */
.right-content{
	float:right;
	width:50%;
}
.right-content ul{
	float:left;
	padding: 0 0 0 37px;
}
.right-content li{
	float:left;
	margin-right:10px;
}
.small-circle{
	width:40px;
	height:40px;
	border-radius:20px;
	background:#bab9b1;
}
.small-circle img{
	margin:5px;
}
a.tooltip{
    outline: none;
    text-decoration:none;
    color: #bab9b1;
    position:relative;
}
a.tooltip span{
    height: auto;
    pointer-events: none;
    position: absolute;
    left:0;
    bottom:100px;
    z-index:1;
    opacity: 0;
    padding: 10px;
	background:#b93f04;  
    text-align: center;
    font-weight:bold;
    font-size:0.8em;
    display:inline-block;
    white-space:nowrap;
    border: 6px solid #bab9b1;
    border-radius: 5px;
    box-shadow: 2px 10px 10px rgba(0,0,0,0.2);
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
	-ms-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
}
a.tooltip span:before,
a.tooltip span:after{
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    margin-left:-11px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid rgba(0,0,0,0.1);
}
a.tooltip span:after{
    bottom: -14px;
    margin-left: -10px;
    border-top: 10px solid #bab9b1;
}
a.tooltip:hover span{
    opacity: 0.95;
    bottom:50px;
}
.slide{
	margin: 0;
	padding: 0;
	float:left;
	width:100%;
}
.btn-slide{
	text-align: center;
	width: 90px;
	margin: -45px auto 0 auto;
	display: block;
}
/* ------------------------------------------------------------------------------------
--  BLOCK4 PROGRAM
------------------------------------------------------------------------------------ */
#program ul{
	float:left;
	width:100%;
	list-style:none;
	margin-bottom:60px;
}
#program ul.last{
	margin-bottom:0;
}
#program li{
	float:left;
	width:48%;
	margin-right:2%;
}
#program li:last-child{
	margin:0 0 0 2%;
}
.schedule{
	float:left;
	width:100%;
	clear:both;
	margin-bottom:20px;
}
.last{
	margin-bottom:0;
}
.sch-left{
	float:left;
	width:30%;
}
.sch-left p{
	border-bottom:3px solid #b93f04;
	padding-bottom:5px;
}
.sch-right{
	float:right;
	width:64%;
	margin-left:6%;
}
/* ------------------------------------------------------------------------------------
--  BLOCK4 PROGRAM: LAST BLOCK WITH VIDEO
------------------------------------------------------------------------------------ */
#trailer-box{
	float:left;
	width:80%;
	margin:4% 10% 0 10%;
	clear:both;
}
#trailer{
	float:left;
	width:46%;
	margin-right:4%;
	position:relative;
}
.corner{
	position:absolute;
	top:0;
	right:0;
	width: 0;
	height: 0;
	border-top: 100px solid #b93f04; 
	border-left: 100px solid transparent;
}
.video-holder{
	float:left;
	width:84%;
	background:#111;
	padding:8%;
	box-shadow:0 2px 100px #000;
}
.video-container {
	position: relative;
	padding-bottom: 70%;
	height: 0;
	overflow: hidden;
	box-shadow:0 2px 100px #000;
}
.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border:1px solid #000;
}
#trailer-box article{
	float:right;
	width:50%;
}
#trailer-box article p{
	margin-bottom:20px;
	padding:0 0 0 37px;
	border-left:1px solid rgba(255,255,255,0.05);
}
#trailer-box article p:last-child{
	margin-bottom:0;
	font-size:1.15em;
	border-left:none;
}
/* ------------------------------------------------------------------------------------
--  BLOCK5 ORDER
------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------
--  BLOCK5 ORDER: LEFT SIDE
------------------------------------------------------------------------------------ */
.left-order{
	float:left;
	width:48%;
	margin-right:2%;
}
form{
	float:left;
	width:80%;
	padding:10%;
	background:#111;
	box-shadow:0 2px 100px #000;
}
form fieldset{
	width:100%;
	float:left;
}
form label{
	float:left;
	width:100%;
	font-size:0.8em;
	letter-spacing:0.2em;
	text-transform:uppercase;
	color:#808080;
	margin:0 0 20px 0;
}
form input{
	float:left;
	width:92%;
	padding:3% 4%;
	background:#bab9b1;
	margin:0 0 30px 0;
	color:#555;
	border:1px solid #c1c0b8;
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
form input:hover{
	background:#eee;
}
form  input::-webkit-input-placeholder{
	color:#555;
}
form#input:-moz-placeholder{
	color:#555;
}
form button#buttonsubmit{
    padding:2% 4%;
	background:#b93f04;
    border:none;
    cursor:pointer;
    color:#bab9b1;
    font-size:1em;
    text-transform:uppercase;
    border:1px solid rgba(255,255,255,0.2);
    -moz-transition: 500ms ease-in;
    -o-transition: 500ms ease-in;
    -webkit-transition: 500ms ease-in;
    -ms-transition: 500ms ease-in;
    transition: 500ms ease-in; /*note: transition prefixes are required, prefix-free.js does not cover this attribute*/	
}
form button#buttonsubmit:hover{
	background:#a83903;
}
/* ------------------------------------------------------------------------------------
--  BLOCK5 ORDER: RIGHT SIDE
------------------------------------------------------------------------------------ */
.right-order{
	float:right;
	width:48%;
	margin-left:2%;
}
.right-order p{
	margin-bottom:20px;
	padding:0 0 0 37px;
	border-left:1px solid rgba(255,255,255,0.05);
}
.right-order p:last-child{
	margin-bottom:0;
	font-size:1.15em;
	border-left:none;
}

.social{
	float:right;
}
.social a{
	display:inline;
	margin-left:10px;
	text-transform:uppercase;
	font-size:0.8em;
	padding:0 0 5px 0;
	border-bottom:2px solid #b93f04;
}
/*.social styles will repeat on contact block*/
/* ------------------------------------------------------------------------------------
--  BLOCK7 CONTACT
------------------------------------------------------------------------------------ */
#contact{
    clear:both;	
}
#left-contact{
	float:left;
	width:48%;
	margin-right:2%;
} 
#right-contact{
	float:right;
	width:48%;
	margin-left:2%;
}
#contact article p{
	margin-bottom:40px;
	padding:0 0 0 37px;
	border-left:1px solid rgba(255,255,255,0.05);
}
#contact article p.connect{
	border-left:none;
}
#contact article p:last-child{
	margin-bottom:0;
}
/* ------------------------------------------------------------------------------------
--  BLOCK8 FOOTER
------------------------------------------------------------------------------------ */
footer{
	float:left;
	width:70%;
	margin:1.5% 15%;
	clear:both;
}
footer small{
	 color:#bab9b1;
	 text-transform:uppercase;
	 font-size:0.7em;
}
.totop{
	float:right;
	font-size:0.7em;
	text-transform:uppercase;
}


#forkongithub a {
	background: #b93f04;
	color: #fff;
	text-decoration: none;
	font-family: arial, sans-serif;
	text-align: center;
	font-weight: bold;
	padding: 5px 40px;
	font-size: 1rem;
	line-height: 2rem;
	position: relative;
	transition: 0.5s;
}

#forkongithub a:hover {
	background: #b93f04;
	color: #fff;
}

#forkongithub a::before, #forkongithub a::after {
	content: "";
	width: 100%;
	display: block;
	position: absolute;
	top: 1px;
	left: 0;
	height: 1px;
	background: #fff;
}

#forkongithub a::after {
	bottom: 1px;
	top: auto;
}

@media screen and (min-width: 800px) {
	#forkongithub {
		position: fixed;
		display: block;
		top: 0;
		right: 0;
		width: 200px;
		overflow: hidden;
		height: 200px;
		z-index: 9999;
	}

	#forkongithub a {
		width: 200px;
		position: absolute;
		top: 60px;
		right: -60px;
		transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.8);
	}
}


