/* Header */
.large-header { position: relative; width: 100%; background: #333; overflow: hidden; background-size: cover; background-position: center center; z-index: 1; }
.goochr .large-header { background-image: url('../img/goochr.jpg?t=123456'); }

.goochr .main-title { background-image: url('../img/goochrlogo.png?t=123456');background-size: cover; position: absolute;  margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 110px; left: 210px; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0);}
.goochr .main-title { width:314px; height:184px;}
.main-title .thin { font-weight: 200; font-size: 0.9em; letter-spacing: 0em; }
 @media only screen and (max-width : 768px) {
	.goochr .main-title { width:200px; height:120px;top: 60px;left: 120px;}
}
 @media only screen and (max-width : 640px) {
	.goochr .main-title { width:160px; height:95px;top: 50px;left: 100px;}
}

/* .main-title-sub { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 50%; left: 20%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.goochr .main-title-sub {font-size: 2.6em; letter-spacing: 0.22em; }
  @media only screen and (max-width : 768px) {
	.goochr .main-title-sub { font-size: 1.0em; top: 32%; left: 30%;letter-spacing: 0.45em;}
} */


.main-title-sub-1 { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 50%; left: 20%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.goochr .main-title-sub-1 { /*text-transform: uppercase; */font-size: 2em; letter-spacing: 0.22em; }
 @media only screen and (max-width : 768px) {
	.goochr .main-title-sub-1 { font-size: 1.5em; }
}

.main-title-sub-1 a{ color:#FFF;}
.goochr .hide{display:none;}

@font-face { font-weight: normal; font-style: normal; font-family: 'codropsicons'; src: url('indexfonts/codropsicons/codropsicons.eot'); src: url('indexfonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),  url('indexfonts/codropsicons/codropsicons.woff') format('woff'),  url('indexfonts/codropsicons/codropsicons.ttf') format('truetype'),  url('indexfonts/codropsicons/codropsicons.svg#codropsicons') format('svg'); }
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
body { background: #fff; color: #383a3c; font-weight: 400; font-size: 1em; line-height: 1.25; font-family: 'Microsoft YaHei', Calibri, Arial, sans-serif; }
a, button { outline: none; }
a { color: #566473; text-decoration: none; }
a:hover, a:focus { color: #34495e; }
section { padding: 1em; text-align: center; }
p.ref { text-align: center; padding: 2em 1em; }
/* Header */
.codrops-header { margin: 0 auto; padding: 2em; text-align: center; max-width: 900px; }
.codrops-header h1 { margin: 0; font-size: 4.5em; line-height: 1; font-weight: 200; }
.codrops-header h1 span { display: block; padding: 1em 0 1.5em; font-size: 36%; color: #95a5a6; line-height: 1.4; }
/* To Navigation Style */
.codrops-top { width: 100%; text-transform: uppercase; font-weight: 700; font-size: 0.69em; text-align: center; padding: 3em 0; }
.codrops-top a { display: inline-block; padding: 1.5em; text-decoration: none; letter-spacing: 1px; }
.codrops-icon:before { margin: 0 4px; text-transform: none; font-weight: normal; font-style: normal; font-variant: normal; font-family: 'codropsicons'; line-height: 1; speak: none; -webkit-font-smoothing: antialiased; }
.codrops-icon-drop:before { content: "\e001"; }
.codrops-icon-prev:before { content: "\e004"; }
/* Buttons Style */
.codrops-footer{
	padding-top: 1em;
	font-size: 0.9em;
	line-height: 1.5em;
	text-align:center;
	border-top:1px solid #777;
	color:#566473;
}
.codrops-footer a{
	line-height: 1.5em;
	text-align:center;
	color:#566473;
}

.codrops-goochr {
	padding-top: 1em;
	font-size: 0.8em;
	text-align:center;
}
.codrops-goochr a {
	display: inline-block;
	margin: 0.35em 0.1em;
	padding: 0.5em 1.2em;
	outline: none;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 700;
	border-radius: 2px;
	font-size: 110%;
	border: 2px solid transparent;
}

.codrops-goochr a:hover,
.codrops-goochr a.current-demo {
	border-color: #383a3c;
}

.codrops-goochr h3 {
	margin: 0;
	padding: 1em 0 0.5em 0;
	font-size: 0.9em;
	float: left;
	min-width: 90px;
	clear: left;
}

.codrops-goochr div:not(:first-child) h3 {
	padding-top: 2em;
}
.codrops-goochr a:hover,
.codrops-goochr a.current-demo {
	color: inherit;
	border-color: initial;
}

/* Related hokclouds */
.related { padding: 10em 0; }
.related p { font-size: 1.5em; }
.related > a { display: inline-block; text-align: center; margin: 20px 10px; padding: 25px; vertical-align: middle; }
.related a img { max-width: 100%; opacity: 0.8; border-radius: 10px; }
.related a:hover img, .related a:active img { opacity: 1; }
.related a h3 { margin: 0; min-height: 63px; padding: 0.5em 0 0.3em; max-width: 300px; text-align: center; font-weight: 400; font-size: 1em; }
 @media screen and (max-width: 40em) {
.codrops-header h1 { font-size: 2.5em; }
}

/*****/
article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary { display: block; }
audio, canvas, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
[hidden] {
display:none;
}
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
a:focus { outline: thin dotted; }
a:active, a:hover { outline: 0; }
h1 { font-size: 2em; margin: 0.67em 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
mark { background: #ff0; color: #000; }
code, kbd, pre, samp { font-family: monospace, serif; font-size: 1em; }
pre { white-space: pre-wrap; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
img { border: 0; }
svg:not(:root) { overflow: hidden; }
figure { margin: 0; }
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: 100%; margin: 0; }
button, input { line-height: normal; }
button, select { text-transform: none; }
button, html input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled], html input[disabled] { cursor: default; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
-webkit-appearance:none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0;
}
textarea { overflow: auto; vertical-align: top; }
table { border-collapse: collapse; border-spacing: 0; }