/* Header */
.large-header { position: relative; width: 100%; background: #333; overflow: hidden; background-size: cover; background-position: center center; z-index: 1; }
.hokcloud-1 .large-header { background-image: url('indeximg/bg.jpg'); }
.main-title { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.hokcloud-1 .main-title { text-transform: uppercase; font-size: 5.2em; letter-spacing: 0em; }
.main-title .thin { font-weight: 200; font-size: 0.9em; letter-spacing: 0em; }
 @media only screen and (max-width : 768px) {
.hokcloud-1 .main-title { font-size: 2.8em; }
}
.main-title-sub { position: absolute; margin: 0; padding: 0; color: #f9f1e9; text-align: center; top: 60%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); }
.hokcloud-1 .main-title-sub { /*text-transform: uppercase; */font-size: 2em; letter-spacing: 0.1em; }
 @media only screen and (max-width : 768px) {
.hokcloud-1 .main-title-sub { font-size: 1.5em; }
}

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

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

.main-title-sub-1 a{color:#F8F8F8;}

@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: 'Raleway', 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"; }

/* 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; }