@charset "UTF-8";
/* CSS Document */
html, body, #index { font-family: 'Open Sans', sans-serif; font-size: 14px; color: #FFF; font-weight: 100 }
.pages { position: relative; overflow: hidden; }
.container { position: relative; z-index: 2; }
.pages .bgimg { position: absolute; left: 0; top: 0; z-index: 1; width: 100%; height: auto; }
.pages .bg-fixed { position: fixed; }
.pages .bg-fixed-bot { bottom: 0px; position: absolute; }
.pages .container { background: rgba(0, 140, 209, .8); }
.page2 .container { background: rgba(250, 186, 0, .8); }
.page3 .container { background: rgba(225, 28, 74, .8); }
.page4 .container { background: rgba(130, 184, 48, .8); }
.page5 .container { background: rgba(31, 159, 140, .8); }
.page6 .container { background: rgba(242, 148, 20, .8); }
.page7 .container { background: rgba(181, 33, 82, .8); }
.page8 .container { background: rgba(5, 92, 145, .8); }
.page9 .container { background: rgba(43, 41, 41, 1); }
* { padding: 0; margin: 0; outline: none; }
.fl { float: left }
.fr { float: right }
.tc { text-align: center; }
.pr { position: relative; }
.pa { position: absolute; }
.clear:before, .clear:after { content: "\0020"; display: block; height: 0; overflow: hidden }
.page-fix { z-index: 2; }
.clear:after { clear: both }
.txtcenter { text-align: center; }
.txtleft { text-align: left; }
.txtright { text-align: right; }
.col30 { width: 30%; }
.col40 { width: 40%; }
.col60 { width: 60%; }
.col70 { width: 70%; }
.col50 { width: 50%; }
.col25 { width: 25%; }
.col75 { width: 75%; }
.pages ol li .spoint { line-height: 2em; padding-left: 30%; text-align: left; }
.pages ol li .spoint i.fa { font-size: 1em; }
.fpage { margin: 0 auto; padding-top: 5%; }
.fpage .fa { font-size: 5em; margin-top: 3%; position: fixed; bottom: 20px; left: 48%; z-index: 3; opacity: .3; }
.fixme-logo { position: fixed; top: 10px; left: 30px; z-index: 6; }
h1 { font-size: 2.5em; line-height: 1em; text-align: center; }
h1 span, .fpage h2 { font-size: 7em; line-height: 1em; text-align: center; font-weight: bold; display: block; }
.fpage h2 { margin-top: 2%; font-size: 6em; }
.page1 .fpage p { font-size: 3em; }
h2 { font-size: 2em; line-height: 1.5em; text-align: center; font-weight: 300; }
h2 span { font-size: 7em; line-height: 1em; text-align: center; font-weight: bold; display: block; }
.pages ol { list-style: none; font-size: 2em; }
.pages ol li { padding-bottom: 50%; text-align: center; }
.pages ol li .fa { font-size: 4em; opacity: .4; }
.pages ol li h3 { font-size: 1.5em; font-weight: 400; }
.pages ol li h3 span { font-size: 2em; font-weight: bold; }
.pages ol li p { font-size: .8em; }
.pages ol li p span { font-weight: bold; }
.pages ol li p a, .pages ol li h3 a, .pages ol li a { color: #FFF; text-decoration: none; }
.pages ol li a:hover { text-decoration: underline; }
.pages .lefts { padding-top: 8%; text-align: center; -webkit-transition: opacity .1s; -moz-transition: opacity .1s; -o-transition: opacity .1s; transition: opacity .1s; position: absolute; left: 0; top: 0; padding-left: 5%; }
.mhead { min-height: 700px; }
.pages .pos-fixed { position: fixed; top: 0; opacity: .6; display: block; }
.pages .lefts .fa { font-size: 15em; opacity: .8; }
.pages p { font-size: 1.5em; text-align: center; }
.pages p.comp-logo { padding-top: 1%; font-size: 1.5em; }
.pages .rights { padding-top: 15%; padding-right: 5%; }
.page1 p { padding: 3% 0 0 0; }
.page1 h2 span { font-size: 2.2em; }
.page2 h2 span { font-size: 4em; }
.page2 ol li h3 span { font-size: 1em; }
.page2 ol li p, .page3 ol li p, .page4 ol li p, .page7 ol li p, .page8 ol li p { font-size: 1em; }
.page2 ol li p { font-size: .8em; margin-bottom: 4%; }
.page2 ol li p span { font-size: 1.5em; font-weight: bold; }
.page6 .rights, .page5 .rights { padding: 10% 0; }
.page6 .rights .fa, .page5 .rights .fa { font-size: 15em; }
.page5 h2, .page5 h2 span, .page6 h2, .page6 h2 span { font-size: 4em; }
.page5 h2 a, .page6 h2 a { color: #FFF; font-weight: bold; text-decoration: none; }
.page5 h2 a:hover, .page6 h2 a:hover { text-decoration: underline; }
.page5 .rights .fa, .page6 .rights .fa { opacity: .4; }
.page5 ol li h3 span { display: block; }
.page7 h2 span { font-size: 3em; }
.page8 .lefts .fa-group { font-size: .5em; position: absolute; right: -13%; bottom: 0%; color: #333; opacity: 1; }
.page9 .rights { padding: 7% 0 3% 0; padding-right: 0px; min-height: 500px; }
.page9 .rights a { color: #FFF; text-decoration: none; }
.page9 h2 { color: #FFF; font-weight: 300; line-height: 1.5em; font-size: 3em; }
.page9 h2 span { color: #82b830; font-weight: bold; display: block; font-size: 2em; padding: 20px 0 4% 0; }
.page9 .fa { color: #FFF; font-size: 2em; text-decoration: none; margin: 3% 1% 0 0; opacity: .5; }
.page9 .fa-facebook-square:hover { color: #3A5797; }
.page9 .fa-twitter-square:hover { color: #55acee; }
.page9 .fa-linkedin-square:hover { color: #0077b5; }
.page9 .fa-google-plus-square:hover { color: #d73d32; }
.page9 .fa-youtube-square:hover { color: #cc181e; }
.share-list { position: fixed; top: 20px; right: 30px; z-index: 5; font-size: 3em; color: #FFF; }
.share-list i { opacity: .7; }
.share-list p { position: absolute; right: 20px; top: 0px; width: 0px; overflow: hidden; height: 40px; -moz-transition: width ease-in-out .5s; -webkit-transition: width ease-in-out .5s; -o-transition: width ease-in-out .5s; transition: width ease-in-out .5s; }
.share-list a { color: #FFF; text-decoration: none; margin-right: 10px; display: inline-block; opacity: .5; }
.share-list a:hover { opacity: 1; }
.share-list:hover p { width: 200px; }
.share-count { padding-top: 3%; }
ul.menu { position: fixed; right: 30px; top: 35%; width: 20px; z-index: 999999999; list-style: none }
ul.menu li { padding: 5px; margin: 0 }
ul.menu li span { width: 15px; height: 15px; border-radius: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; background: #FFF; text-indent: -9999em; display: block; padding: 0; margin: 0; cursor:pointer; opacity:.4; }
ul.menu li span:hover{opacity:.7; }
ul.menu li span.active { opacity:1; }
 @media (max-width: 800px) {
html, body, #index { font-size: 10px; }
.fixme-logo img { width: 70%; height: auto; }
.pages .pos-fixed { padding-top: 15%; }
.share-list:hover p { width: 130px; }
.share-list a{ margin-right:5px;}
}
 @media (max-width: 600px) {
html, body, #index { font-size: 7px; }
.mhead { min-height: 500px; }
.fixme-logo img { width: 50%; height: auto; }
.share-list:hover p { width: 120px; }
.page4 .rights li img, .comp-logo img{ width:50%; height:auto;}
}
 @media (max-width: 480px) {
html, body, #index { font-size: 5px; }
.mhead { min-height: 200px; }
.pages .container { padding-top: 50px; }
.share-list:hover p { width: 80px; }
ul.menu{ display:none;} 
}