/*@import url("http://fonts.googleapis.com/css?family=Roboto:100,100italic,300,300italic,400,400italic,500,500italic&subset=latin,latin-ext");*/
@font-face {
  font-family:"proxima";
  src:url('font/Proxima.otf') format('opentype');font-weight:normal;font-style:normal;}
@font-face {
  font-family:"proxima-italic";
  src:url('font/Proxima-Italic.otf') format('opentype');font-weight:normal;font-style:normal;}
@font-face {
  font-family:"proxima-light";
  src:url('font/Proxima-Light.otf') format('opentype');font-weight:normal;font-style:normal;}
@font-face {
  font-family:"proxima-bold";
  src:url('font/Proxima-Bold.otf') format('opentype');font-weight:normal;font-style:normal;}

/*@font-face {
    font-family: 'glober';
    src: url('/font/glober.otf') format('opentype'),
		 url('/font/glober.eot') format('embedded-opentype'),
		 url('/font/glober.eot?#iefix') format('embedded-opentype'), 
         url('/font/glober.woff') format('woff'), 
         url('/font/glober.ttf')  format('truetype'),
         url('/font/glober.svg#svgFontName') format('svg');
    }
@font-face {
    font-family: 'glober-light';
    src: url('/font/glober-light.otf') format('opentype'),
		 url('/font/glober-light.eot') format('embedded-opentype'),
		 url('/font/glober-light.eot?#iefix') format('embedded-opentype'), 
         url('/font/glober-light.woff') format('woff'), 
         url('/font/glober-light.ttf')  format('truetype'),
         url('/font/glober-light.svg#svgFontName') format('svg');
    }
@font-face {
    font-family: 'glober-bold';
    src: url('/font/glober-bold.otf') format('opentype'),
		 url('/font/glober-bold.eot') format('embedded-opentype'),
		 url('/font/glober-bold.eot?#iefix') format('embedded-opentype'), 
         url('/font/glober-bold.woff') format('woff'), 
         url('/font/glober-bold.ttf')  format('truetype'),
         url('/font/glober-bold.svg#svgFontName') format('svg');
    }*/




html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { margin: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; vertical-align: baseline; }
audio:not([controls]) { display: none; height: 0; }
[hidden], template {
display:none;
}
a { background-color: transparent; }
a:active, a:hover { outline: 0; }
abbr[title] { border-bottom: 1px dotted; }
b, strong { font-weight: bold; }
dfn { font-style: italic; }
h1 { font-size: 2em; margin: 0.67em 0; }
mark { background: #ff0; color: #000; }
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: 1em 40px; }
hr { -moz-box-sizing: content-box; box-sizing: content-box; height: 0; }
pre { overflow: auto; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
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; }
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0;
}
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
height:auto;
}
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;
}
fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }
legend { border: 0; padding: 0; }
textarea { overflow: auto; }
optgroup { font-weight: bold; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }

header{margin:40px;height:30px;}
#lgo{width:102px;height:25px;float:left;background:url(img/logo.png) no-repeat;}
#lgo:hover{width:102px;height:25px;float:left;background:url(img/logo_hov.png) no-repeat;}
nav{float:left;font-family:'proxima-light', sans serif;font-size:11px;text-transform:uppercase;color:#000;letter-spacing:0.1em;}
nav ul{display:block;margin-top:6px;}
nav ul li{display:inline-block;padding:0 20px;list-style-type:none;}
nav ul li a{color:#000;text-decoration:none;}
nav ul li a:hover{color:#666;}
#name1{float:right;margin-top:-15px;}
#name2{float:right;}
#name1 h1, #name2 h1{font-family:'proxima-bold', sans serif;font-size:11px !important;text-transform:uppercase;color:#000;letter-spacing:0.1em;}

#content{float:left;margin:20px 0 0 50px;width:300px;}
#content #line{display:block;overflow:hidden;width:50px;height:1px;background:#000;margin-top:-3px;margin-bottom:30px;}
#content h1{font-family:'proxima-bold', sans serif;font-size:16px !important;text-transform:uppercase;color:#000;letter-spacing:0.3em;}
#content h2{font-family:'proxima-italic', sans serif;font-size:12px;text-transform:none;color:#666;letter-spacing:0.1em;margin-top:-10px;}
#content p{font-family:'proxima-light', sans serif;font-size:12px;text-transform:none;color:#000;letter-spacing:0.1em;line-height:1.6em;}
#content a{font-family:'proxima-italic', sans serif;color:#666;text-decoration:none;}
#content a:hover{font-family:'proxima-italic', sans serif;text-decoration:underline;color:#000;}
#pictures{margin:20px 50px 0 450px;max-width:1000px;min-width:350px;}
#pictures img{width:100%;max-width:100%;height:auto !important;margin-bottom:20px;}
#content2{text-align:center;margin:0 auto;max-width:750px;}
#content2 h1{font-family:'proxima-bold', sans serif;font-size:17px !important;text-transform:uppercase;color:#000;letter-spacing:0.3em;}
#content2 p{font-family:'proxima-light', sans serif;font-size:14px;text-transform:none;color:#000;letter-spacing:0.1em;line-height:1.7em;}
#content2 a{font-family:'proxima-italic', sans serif;color:#666;text-decoration:none;}
#content2 a:hover{font-family:'proxima-italic', sans serif;text-decoration:underline;color:#000;}

#share{margin:20px 0;}
.a2a_s_facebook{width:24px !important;height:24px !important;background:url(img/fb.png) no-repeat !important;}
.a2a_s_twitter{width:24px !important;height:24px !important;background:url(img/tw.png) no-repeat !important;}
.a2a_s_google_plus{width:24px !important;height:24px !important;background:url(img/gp.png) no-repeat !important;}
.a2a_s_linkedin{width:24px !important;height:24px !important;background:url(img/in.png) no-repeat !important;}
.a2a_s_pinterest{width:24px !important;height:24px !important;background:url(img/pi.png) no-repeat !important;}
.a2a_s_tumblr{width:24px !important;height:24px !important;background:url(img/tb.png) no-repeat !important;}

.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { -moz-border-radius: 0 0 0 0!important; -webkit-border-radius: 0 0 0 0!important; background: none!important; border: 0!important; bottom: auto!important; float: none!important; height: auto!important; left: auto!important; line-height: 1.1em!important; margin: 0!important; outline: 0!important; overflow: visible!important; padding: 0!important; position: static!important; right: auto!important; text-align: left!important; top: auto!important; vertical-align: baseline!important; width: auto!important; box-sizing: content-box!important; font-family:"proxima-light", arial !important; font-weight: normal!important; font-style: normal!important; font-size: 1em!important; min-height: inherit!important; min-height: auto!important; }
.syntaxhighlighter { width: 100%!important; margin: 1em 0 1em 0!important; position: relative!important; overflow: auto!important; font-size: 1em!important; }
.syntaxhighlighter.source { overflow: hidden!important; }
.syntaxhighlighter .bold { font-weight: bold!important; }
.syntaxhighlighter .italic { font-style: italic!important; }
.syntaxhighlighter .line { white-space: pre!important; }
.syntaxhighlighter table { width: 100%!important; }
.syntaxhighlighter table caption { text-align: left!important; padding: .5em 0 0.5em 1em!important; }
.syntaxhighlighter table td.code { width: 100%!important; }
.syntaxhighlighter table td.code .container { position: relative!important; }
.syntaxhighlighter table td.code .container textarea { box-sizing: border-box!important; position: absolute!important; left: 0!important; top: 0!important; width: 100%!important; height: 100%!important; border: none!important; background: white!important; padding-left: 1em!important; overflow: hidden!important; white-space: pre!important; }
.syntaxhighlighter table td.gutter .line { text-align: right!important; padding: 0 0.5em 0 1em!important; }
.syntaxhighlighter table td.code .line { padding: 0 1em!important; }
.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { padding-left: 0em!important; }
.syntaxhighlighter.show { display: block!important; }
.syntaxhighlighter.collapsed table { display: none!important; }
.syntaxhighlighter.collapsed .toolbar { padding: 0.1em 0.8em 0em 0.8em!important; font-size: 1em!important; position: static!important; width: auto!important; height: auto!important; }
.syntaxhighlighter.collapsed .toolbar span { display: inline!important; margin-right: 1em!important; }
.syntaxhighlighter.collapsed .toolbar span a { padding: 0!important; display: none!important; }
.syntaxhighlighter.collapsed .toolbar span a.expandSource { display: inline!important; }
.syntaxhighlighter .toolbar { position: absolute!important; right: 1px!important; top: 1px!important; width: 11px!important; height: 11px!important; font-size: 10px!important; z-index: 10!important; }
.syntaxhighlighter .toolbar span.title { display: inline!important; }
.syntaxhighlighter .toolbar a { display: block!important; text-align: center!important; text-decoration: none!important; padding-top: 1px!important; }
.syntaxhighlighter .toolbar a.expandSource { display: none!important; }
.syntaxhighlighter.ie { font-size: .9em!important; padding: 1px 0 1px 0!important; }
.syntaxhighlighter.ie .toolbar { line-height: 8px!important; }
.syntaxhighlighter.ie .toolbar a { padding-top: 0px!important; }
.syntaxhighlighter.printing .line.alt1 .content, .syntaxhighlighter.printing .line.alt2 .content, .syntaxhighlighter.printing .line.highlighted .number, .syntaxhighlighter.printing .line.highlighted.alt1 .content, .syntaxhighlighter.printing .line.highlighted.alt2 .content { background: none!important; }
.syntaxhighlighter.printing .line .number { color: #bbbbbb!important; }
.syntaxhighlighter.printing .line .content { color: black!important; }
.syntaxhighlighter.printing .toolbar { display: none!important; }
.syntaxhighlighter.printing a { text-decoration: none!important; }
.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a { color: black!important; }
.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a { color: #008200!important; }
.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a { color: blue!important; }
.syntaxhighlighter.printing .keyword { color: #006699!important; font-weight: bold!important; }
.syntaxhighlighter.printing .preprocessor { color: gray!important; }
.syntaxhighlighter.printing .variable { color: #aa7700!important; }
.syntaxhighlighter.printing .value { color: #009900!important; }
.syntaxhighlighter.printing .functions { color: #ff1493!important; }
.syntaxhighlighter.printing .constants { color: #0066cc!important; }
.syntaxhighlighter.printing .script { font-weight: bold!important; }
.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a { color: gray!important; }
.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a { color: #ff1493!important; }
.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a { color: red!important; }
.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a { color: black!important; }
.syntaxhighlighter { background-color: #1b2426!important; }
.syntaxhighlighter .line.alt1 { background-color: #1b2426!important; }
.syntaxhighlighter .line.alt2 { background-color: #1b2426!important; }
.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: #323e41!important; }
.syntaxhighlighter .line.highlighted.number { color: #b9bdb6!important; }
.syntaxhighlighter table caption { color: #b9bdb6!important; }
.syntaxhighlighter .gutter { color: #afafaf!important; }
.syntaxhighlighter .gutter .line { border-right: 3px solid #435a5f!important; }
.syntaxhighlighter .gutter .line.highlighted { background-color: #435a5f!important; color: #1b2426!important; }
.syntaxhighlighter.printing .line .content { border: none!important; }
.syntaxhighlighter.collapsed { overflow: visible!important; }
.syntaxhighlighter.collapsed .toolbar { color: #5ba1cf!important; background: black!important; border: 1px solid #435a5f!important; }
.syntaxhighlighter.collapsed .toolbar a { color: #5ba1cf!important; }
.syntaxhighlighter.collapsed .toolbar a:hover { color: #5ce638!important; }
.syntaxhighlighter .toolbar { color: white!important; background: #435a5f!important; border: none!important; }
.syntaxhighlighter .toolbar a { color: white!important; }
.syntaxhighlighter .toolbar a:hover { color: #e0e8ff!important; }
.syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: #b9bdb6!important; }
.syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: #878a85!important; }
.syntaxhighlighter .string, .syntaxhighlighter .string a { color: #5ce638!important; }
.syntaxhighlighter .keyword { color: #5ba1cf!important; }
.syntaxhighlighter .preprocessor { color: #435a5f!important; }
.syntaxhighlighter .variable { color: #ffaa3e!important; }
.syntaxhighlighter .value { color: #009900!important; }
.syntaxhighlighter .functions { color: #ffaa3e!important; }
.syntaxhighlighter .constants { color: #e0e8ff!important; }
.syntaxhighlighter .script { font-weight: bold!important; color: #5ba1cf!important; background-color: none!important; }
.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: #e0e8ff!important; }
.syntaxhighlighter .color2, .syntaxhighlighter .color2 a { color: white!important; }
.syntaxhighlighter .color3, .syntaxhighlighter .color3 a { color: #ffaa3e!important; }
html { color: #222; font-size: 1em; line-height: 1.4; }
::-moz-selection {
background:#b3d4fc;
text-shadow:none;
}
::selection { background: #b3d4fc; text-shadow: none; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
audio, canvas, iframe, img, svg, video { vertical-align: middle; }
fieldset { border: 0; margin: 0; padding: 0; }
textarea { resize: vertical; }
.browserupgrade { margin: 0.2em 0; background: #ccc; color: #000; padding: 0.2em 0; }
.container { max-width: 1000px; padding: 0 20px; margin: 0 auto; }
body { font-family: "proxima-ight", Arial, sans-serif; }
.revealed #top-header { background: #fff; border-bottom: 2px solid #eee; }
.revealed #top-header #logo img.b { opacity: 1; }
.revealed #top-header #logo img.w { opacity: 0; }
.revealed #top-header nav { opacity: 1; }
#top-header { position: fixed; top: 0; width: 100%; left: 0; z-index: 100; font-family: "proxima-ight"; height: 60px; }
#top-header #logo { position: relative; margin-left: 20px; display: block; top: 4px; }
#top-header #logo img { position: absolute; top: 0; left: 0; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; }
#top-header #logo img.b { opacity: 0; }
#top-header nav { text-align: center; opacity: 0; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; margin-top: 18px; }
#top-header nav ul { margin: 0; padding: 0; }
#top-header nav ul li { display: inline-block; margin-right: 2%; position: relative; height: 44px; }
#top-header nav ul li:last-of-type { margin-right: 0; }
#top-header nav ul li a { text-decoration: none; text-transform: uppercase; font-size: 16px; font-size: 1rem; color: #333; border-bottom: 0px solid #333; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; display: block; height: 28px; }
#top-header nav ul li:hover a { border-bottom-width: 5px; color: #000; }
#top-header nav ul li:hover .submenu { display: block; }
#top-header nav ul li .submenu { display: none; position: absolute; top: 42px; left: -15px; width: 400px; background: #fff; border-right: 2px solid #eee; border-bottom: 2px solid #eee; border-left: 2px solid #eee; }
#top-header nav ul li .submenu li { display: block; text-align: left; margin-right: 0; height: auto; }
#top-header nav ul li .submenu li a { height: auto; border: 0; padding: 8px 10px; display: block; text-transform: none; font-size: 14px; }
#top-header nav ul li .submenu li a:hover { background: #eee; border: 0; }
#top-header .hamburger { color: #333; position: absolute; right: 20px; top: 15px; text-decoration: none; font-size: 24px; display: none; }
#top { z-index: 1; padding: 0; overflow: hidden; position: relative; }
#top .bg { position: absolute; opacity: 0; -webkit-transition: opacity 1s ease-out; transition: opacity 1s ease-out; -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
#top .inner { background: url(../img/retino.png); -webkit-transition: background-color 1s ease-out; transition: background-color 1s ease-out; position: absolute; top: 0; left: 0; right: 0; height: 100vh; text-align: center; color: #fff; font-family: "proxima-ight". sans-serif; display: table; width: 100%; opacity: 0; }
#top .inner .cell { display: table-cell; vertical-align: middle; }
#top .inner h1 { font-weight: 900; text-transform: uppercase; font-size: 4rem; margin-bottom: 0; -webkit-transition: opacity 1s ease-out; transition: opacity 1s ease-out; }
#top .inner p { margin-top: 0; font-weight: 300; font-size: 22px; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; }
.revealed #top .inner h1, .revealed #top .inner p { opacity: 0; }
#top #arrows { position: absolute; bottom: 10px; left: 50%; margin-left: -25px; text-decoration: none; box-shadow: #000 0px 0px 3px; background: rgba(0,0,0,0.8); border-radius: 10px; padding: 10px; }
#top #arrows i { color: #eee; display: block; opacity: 0; font-size: 25px; line-height: 20px; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; }
#top #arrows i.on { opacity: 1; }
#video { width: auto; overflow: hidden; min-width: 100%; height: 100vh; }
#video video { height: auto; width: auto; min-width: 100%; min-height: 100vh; }
section { margin-bottom: 30px; padding: 20px 0; }
section section { margin: 0; padding: 0; }
section.hl { background: #f0f0f0; }
.demo-page #page h3 { margin-top: 80px; margin-bottom: 5px;}


#page { font-size: 12px; font-size:.8rem;
color: #333;}
#page h1 { font-weight: 300; font-size: 38px; font-size: 2rem; }
#page h3 { font-weight: 900; font-size: 16px; font-size: 1rem; margin-bottom: 40px; text-transform: uppercase; color: #555; text-align: center; }
#page h4 { font-family: "proxima-ight". sans-serif; text-transform: uppercase; font-size: 20px; font-size: 1.2rem; font-weight: 900; color: #666; letter-spacing: 1px; }
#page h5 { font-family: "proxima-ight". sans-serif; font-weight: 700; font-size: 18px; font-size: 1.1rem; color: #888; padding-top: 20px; }
#page .features { list-style-type: none; margin: 0; padding: 0; }
#page .features li { float: left; width: 33.33%; height: 180px; -webkit-transition: background-color 1s ease-out; transition: background-color 1s ease-out; background-color: #fff; border-radius: 6px; }
#page .features li:hover { background-color: #f0f0f0; }
#page .features li.hl { background-color: #c7deff; }
#page .features li .fa { width: 20px; font-size: 20px; color: #77beff; }
#page .features li h4 { margin-left: 20px; }
#page .features li p { color: #666; font-size: 16px; font-size: 1rem; font-size: 400; padding: 0 40px 0 20px; cursor: default; line-height: 1.5; }
#page .text { font-size: 18px; font-size: 1.1rem; line-height: 1.6; color: #444; font-family: "proxima-ight". sans-serif; font-weight: 300; }
#page .text a, #page a.text { display: inline-block; text-decoration: none; border-bottom: dashed 1px #000; color: #000; }
#page .text a:hover, #page a.text:hover { color: #666; border-bottom-style: dotted; }
#page .examples { padding-left: 20px; padding-bottom: 20px; }
#page .examples li { list-style: none; }
#page .examples a { display: block; font-size: 16px; font-size: 1rem; color: #666; text-decoration: none; padding: 10px; font-weight: 300; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; border-bottom: 1px solid #ccc; border-left: 1px solid #ccc; margin-bottom: 2px; }
#page .examples a:nth-child(2n+1) { background: #fafafa; }
#page .examples a:hover { padding-left: 20px; color: #77beff; }
#page .scroll { overflow: scroll; }
#page table { width: 100%; margin: 40px 0; }
#page table tr { border-bottom: solid 1px #ddd; }
#page table tr td, #page table tr th { padding: 20px; text-align: left; font-size: 16px; font-size: 1rem; font-weight: 400; }
#page table tr th { font-weight: 700; }
#page table tr th[scope=row] { font-family: monaco, courier new, monospace; font-weight: 400; }
#page table tr td { font-weight: 300; }
.breadcrumbs div { display: inline-block; color: #999; }
.breadcrumbs div:after { content: " > "; display: inline-block; margin: 0 5px; }
.breadcrumbs div:last-of-type:after { display: none; }
.breadcrumbs div a { text-decoration: none; font-weight: bold; color: #888; }
footer { border-top: 6px solid #333; font-family: "proxima-ight". sans-serif; background: #111; color: #fff; padding: 40px 0; font-size: 12px; font-size:.7rem;
font-weight: 300; }
footer h3 { font-weight: 700; }
footer .col { width: 33.33%; float: left; }
footer ul { list-style-type: none; margin: 0; padding: 0; }
footer ul li { line-height: 2; }
footer a { color: #fff; font-weight: 400; text-decoration: none; }
footer a:hover { text-decoration: underline; }
.buttons { text-align: center; padding-bottom: 20px; }
.buttons a { width: 15%; height: 50px; line-height: 50px; border: 1px solid #77beff; color: #fff; background: #454545; display: inline-block; text-align: center; text-decoration: none; text-transform: uppercase; font-family: "proxima-ight". sans-serif; font-size: 18px; -webkit-transition: all 0.5s ease-out; transition: all 0.5s ease-out; margin-right: 10px; }
.buttons a:last-of-type { margin-right: 0; }
.buttons a:hover { background: #fff; color: #666; }
.touch .no-mobile { display: none; }
@media all and (max-width: 1250px) {
#top-header nav { text-align: right; margin-right: 20px; }
}
@media all and (max-width: 960px) {
.full-width #page { padding: 0; }
table, thead, tbody, th, td, tr { display: block; }
#top-header { background: #fff; border-bottom: 2px solid #EEE; }
#top-header #logo img.w { opacity: 0; }
#top-header #logo img.b { opacity: 1; }
#top-header nav { text-align: center; margin-right: 0; -webkit-transition: none 1s ease-out; transition: none 1s ease-out; display: none; background: #fff; margin-top: 62px; }
.revealed #top-header nav.open { opacity: 1; display: block; }
#top-header nav.open { display: block; opacity: 1; }
#top-header nav ul li { display: block; margin: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; height: auto; }
#top-header nav ul li:hover { background: #fff; }
#top-header nav ul li a { border-bottom: 0; font-size: 1.4rem; padding: 10px 0; }
#top-header nav ul li a:hover { border-bottom: 0; }
#top-header nav ul li .submenu { position: static; width: 100%; border: 0; }
#top-header nav ul li .submenu li { text-align: center; }
#top-header nav ul li .submenu li a { font-size: 1rem; padding: 2px 0; }
#top-header .hamburger { display: block; }
#page { padding: 0 20px; }
#page .features li { width: 50%; }
.buttons a { font-size: 14px; }
table th, table td { font-size: 12px; }
}
@media all and (max-width: 580px) {
#top .inner h1 { font-size: 2rem; }
#top .inner p { font-size: 1rem; padding: 0 10%; }
#top-header #logo img { width: 150px; top: 12px; }
#page h3 { font-size: 20px; }
#page .features li { width: 100%; height: auto; margin-bottom: 20px; padding: 10px; }
#page .features li h4 { margin: 0 0 10px 0; font-size: 18px; }
#page .features li p { margin: 0; }
#page table td, #page table th { font-size: 10px; }
.buttons a { width: 50%; margin: 0 0 10px; }
}
.demo-page h3 { margin-top: 50px; }
body:after { content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png); display: none; }
.lightboxOverlay { position: absolute; top: 0; left: 0; z-index: 9999; background-color: black; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
opacity: 0.8; display: none; }
.lightbox { position: absolute; left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0; font-weight: normal; }
.lightbox .lb-image { display: block; height: auto; max-width: inherit; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.lightbox a img { border: none; }
.lb-outerContainer { position: relative; background-color: white; *zoom:1;
width: 250px; height: 250px; margin: 0 auto; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; }
.lb-outerContainer:after { content: ""; display: table; clear: both; }
.lb-container { padding: 4px; }
.lb-loader { position: absolute; top: 43%; left: 0; height: 25%; width: 100%; text-align: center; line-height: 0; }
.lb-cancel { display: block; width: 32px; height: 32px; margin: 0 auto; background: url(../img/loading.gif) no-repeat; }
.lb-nav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
.lb-container>.nav { left: 0; }
.lb-nav a { outline: none; background-image: url("data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="); }
.lb-prev, .lb-next { height: 100%; cursor: pointer; display: block; }
.lb-nav a.lb-prev { width: 34%; left: 0; float: left; background: url(../img/prev.png) left 48% no-repeat; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; }
.lb-nav a.lb-prev:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
.lb-nav a.lb-next { width: 64%; right: 0; float: right; background: url(../img/next.png) right 48% no-repeat; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0; -webkit-transition: opacity 0.6s; -moz-transition: opacity 0.6s; -o-transition: opacity 0.6s; transition: opacity 0.6s; }
.lb-nav a.lb-next:hover {
filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; }
.lb-dataContainer { margin: 0 auto; padding-top: 5px; *zoom:1;
width: 100%; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
.lb-dataContainer:after { content: ""; display: table; clear: both; }
.lb-data { padding: 0 4px; color: #ccc; }
.lb-data .lb-details { width: 85%; float: left; text-align: left; line-height: 1.1em; }
.lb-data .lb-caption { font-size: 13px; font-weight: bold; line-height: 1em; }
.lb-data .lb-number { display: block; clear: left; padding-bottom: 1em; font-size: 12px; color: #999999; }
.lb-data .lb-close { display: block; float: right; width: 30px; height: 30px; background: url(../img/close.png) top right no-repeat; text-align: right; outline: none; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
opacity: 0.7; -webkit-transition: opacity 0.2s; -moz-transition: opacity 0.2s; -o-transition: opacity 0.2s; transition: opacity 0.2s; }
.lb-data .lb-close:hover { cursor: pointer; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1; }
.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size: 16px!important; }
.syntaxhighlighter table td.code .container { padding: 4px!important; }
.toggle-code span:before { content: "Show"; }
.toggle-code.on span:before { content: "Hide"; }
.example-code { display: none; }
.final-tiles-gallery { margin-top: 20px; }
.final-tiles-gallery { position: relative; }
.final-tiles-gallery .tile img.item { -moz-transition: -moz-transform .2s, opacity .2s linear; -o-transition: -o-transform .2s, opacity .2s linear; -webkit-transition: -webkit-transform .2s, opacity .2s linear; transition: transform .2s linear; display: block; position: relative; width: 100%; }
.final-tiles-gallery .tile.ftg-enlarged img { display: block; margin: auto; }
.final-tiles-gallery .tile { float: left; overflow: hidden; margin: 0; background: #000; opacity: 0; }
.final-tiles-gallery .tile.ftg-loaded { opacity: 1; }
.final-tiles-gallery .tile.ftg-hidden { transform: scale(0.5); }
.final-tiles-gallery .edge { position: absolute; z-index: 1000; background: #333; color: #fff; font-size: 11px; padding: 4px; font-family: sans-serif; }
.final-tiles-gallery .edge.enlarged-true { color: yellow; }
.final-tiles-gallery .ftg-social { position: absolute; transition: all .5s; z-index: 10; }
.final-tiles-gallery .ftg-social a { color: #fff; text-decoration: none; text-align: center; font-size: 16px; transition: all .3s; }
.final-tiles-gallery .ftg-social a:hover { color: #ccc; }
.final-tiles-gallery .hover { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: #000; background-color: rgba(0,0,0,0.7); transition: all .3s; opacity: 0; display: table; width: 100%; height: 100%; }
.final-tiles-gallery .hover .icon { display: table-cell; text-align: center; vertical-align: middle; color: #fff; font-size: 20px; }
.final-tiles-gallery .tile:hover .hover { opacity: 1; }
.final-tiles-gallery .tile iframe.item { width: 100%; }
.final-tiles-gallery .ftg-filters { position:absolute;top:-53px;right:30px;}
.final-tiles-gallery .ftg-filters p {display:inline-block;color:#000;margin:0px;padding:4px 10px;text-decoration:none;outline:0; text-shadow: none; box-shadow: none; font-family:'proxima-bold', sans serif;font-size:12px;text-transform:uppercase;color:#000;letter-spacing:0.1em;}
.final-tiles-gallery .ftg-filters a {display:inline-block;color:#000;padding:4px 10px;text-decoration:none;outline:0; text-shadow: none; box-shadow: none; font-family:'proxima-light', sans serif;font-size:12px;text-transform:uppercase;color:#000;letter-spacing:0.1em;}
.final-tiles-gallery .ftg-filters a:hover, .final-tiles-gallery .ftg-filters a.selected { color: #666;text-decoration: none; }
.final-tiles-gallery.effect-fade-out .tile img { transition: all 0.5s; opacity: 1; }
.final-tiles-gallery.effect-fade-out .tile:hover img { opacity: .5; }
.final-tiles-gallery.effect-zoom .tile img { transition: all 0.5s; -moz-transform: perspective(1000px) translate3d(0, 0, 0); -webkit-transform: perspective(1000px) translate3d(0, 0, 0); -ms-transform: perspective(1000px) translate3d(0, 0, 0); transform: perspective(1000px) translate3d(0, 0, 0); position: relative; display: block; }
.final-tiles-gallery.effect-zoom .tile:hover img { -ms-transform: perspective(1000px) translate3d(-20px, -10px, 180px); -webkit-transform: perspective(1000px) translate3d(0px, 0px, 180px); -moz-transform: perspective(1000px) translate3d(-20px, -10px, 180px); transform: perspective(1000px) translate3d(-20px, -10px, 180px); }
.final-tiles-gallery.effect-dezoom .tile:hover img { opacity: .8; }
.final-tiles-gallery.effect-dezoom .tile { display: block; background: #000; }
.final-tiles-gallery.effect-dezoom .tile img { opacity: 1; transition: all 0.35s; -webkit-transform: scale(1.12); -ms-transform: scale(1.12); -moz-transform: scale(1.12); transform: scale(1.12); display: block; }
.final-tiles-gallery.effect-dezoom .tile:hover img { -webkit-transform: scale(1); -ms-transform: scale(1); -moz-transform: scale(1); transform: scale(1); }
.final-tiles-gallery.caption-top .tile:hover span { opacity: .8; }
.final-tiles-gallery.caption-top .tile:hover span.title { top: 20px; opacity: .9; }
.final-tiles-gallery.caption-top .tile:hover span.subtitle { top: 52px; }
.final-tiles-gallery.caption-top .tile { display: block; background: #000; }
.final-tiles-gallery.caption-top .tile span { font-family: 'Lato', sans-serif; display: block; position: absolute; width: 68%; left: 20px; color: #fff; z-index: 10; font-size: 18px; opacity: 0; transition: all .5s; }
.final-tiles-gallery.caption-top .tile span.title { font-weight: 900; top: 10px; letter-spacing: 1px; text-transform: uppercase; }
.final-tiles-gallery.caption-top .tile span.subtitle { top: 70px; font-size: 14px; font-weight: 300; }
.final-tiles-gallery.caption-bottom .tile:hover span { opacity: .8; }
.final-tiles-gallery.caption-bottom .tile:hover span.title { bottom: 46px; opacity: .9; }
.final-tiles-gallery.caption-bottom .tile:hover span.subtitle { bottom: 20px; }
.final-tiles-gallery.caption-bottom .tile { display: block; background: #000; }
.final-tiles-gallery.caption-bottom .tile span {display: block; position: absolute; width: 60%; padding:0 20%;left: 50%;margin-left:-50%;text-align:center; color: #fff; z-index: 10; opacity: 0; transition: all .5s; }
.final-tiles-gallery.caption-bottom .tile span.title { font-family: 'proxima-bold', sans-serif;font-size:44px;top: 38%; letter-spacing: 1px; text-transform:uppercase;}
.final-tiles-gallery.caption-bottom .tile span.title p { font-family: 'proxima-light', sans-serif;margin-top:-5px; font-size: 18px; font-weight: 300; text-transform:none;}
.final-tiles-gallery.effect-frame .tile:hover:before { opacity: 1; -moz-transform: scale(1); -ms-transform: scale(1); -webkit-transform: scale(1); transform: scale(1); }
.final-tiles-gallery.effect-frame .tile:before { opacity: 0; border: 1px solid #fff; position: absolute; top: 10px; left: 10px; bottom: 10px; right: 10px; z-index: 10; content: ""; display: block; -moz-transform: scale(0.5); -webkit-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); transition: all .35s; }
.final-tiles-gallery.caption-bg .tile span { background: #fff; background: rgba(255,255,255,0.7); color: #333; padding: 2px 6px; }
.final-tiles-gallery.social-icons-bg .ftg-social { background: #fff; box-shadow: 0px 0px 10px #000; }
.final-tiles-gallery.social-icons-bg .ftg-social a { color: #333; }
.final-tiles-gallery.social-icons-bg .ftg-social a:hover { color: #555; }
.final-tiles-gallery.social-icons-bg.social-icons-bg-dark .ftg-social { background: #333; }
.final-tiles-gallery.social-icons-bg.social-icons-bg-dark .ftg-social a { color: #333; }
.final-tiles-gallery.social-icons-bg.social-icons-bg-dark .ftg-social a:hover { color: #eee; }
.final-tiles-gallery.social-icons-right .ftg-social { width: 40px; top: 0; height: 100%; right: -50px; }
.final-tiles-gallery.social-icons-right .ftg-social a { margin: 10px 0; display: block; }
.final-tiles-gallery.social-icons-right .tile:hover .ftg-social { right: 0; }
.final-tiles-gallery.social-icons-bottom .ftg-social { width: 100%; bottom: -40px; height: 30px; text-align: right; }
.final-tiles-gallery.social-icons-bottom .ftg-social a { margin: 0 5px; display: inline-block; }
.final-tiles-gallery.social-icons-bottom .ftg-social a:last-of-type { margin-right: 15px; }
.final-tiles-gallery.social-icons-bottom .tile:hover .ftg-social { bottom: 0; }
.final-tiles-gallery.social-icons-bottom.social-icons-circle .ftg-social { height: 36px; }
.final-tiles-gallery.social-icons-bottom.social-icons-bg .ftg-social { height: 40px; }
.final-tiles-gallery.social-icons-bottom.social-icons-bg .ftg-social a { margin: 10px 5px; }
.final-tiles-gallery.social-icons-circle .ftg-social a { margin: 5px; border-radius: 50%; width: 24px; height: 24px; line-height: 29px; text-align: center; display: inline-block; background: #fff; color: #333; }
.final-tiles-gallery.social-icons-circle .ftg-social a:hover { color: #fff; background-color: #333; }
.hidden { display: none!important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
@media print {
*, *:before, *:after { background: transparent!important; color: #000!important; box-shadow: none!important; text-shadow: none!important; }
a, a:visited { text-decoration: underline; }
a[href]:after { content: " (" attr(href) ")"; }
abbr[title]:after { content: " (" attr(title) ")"; }
a[href^="#"]:after, a[href^="javascript:"]:after { content: ""; }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
thead { display: table-header-group; }
tr, img { page-break-inside: avoid; }
img { max-width: 100%!important; }
p, h2, h3 { orphans: 3; widows: 3; }
h2, h3 { page-break-after: avoid; }
}
