/* Reset */
a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,embed,fieldset,figcaption,figure,font,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,main,mark,menu,meter,nav,object,ol,output,p,pre,progress,q,rp,rt,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video,xmp{border:0;margin:0;padding:0;font-size:100%}html,body{height:100%}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section{display:block}b,strong{font-weight:bold}img{color:transparent;font-size:0;vertical-align:middle;-ms-interpolation-mode:bicubic}ol,ul{list-style:none}li{display:list-item}table{border-collapse:collapse;border-spacing:0}th,td,caption{font-weight:normal;vertical-align:top;text-align:left}q{quotes:none}q:before,q:after{content:'';content:none}sub,sup,small{font-size:75%}sub,sup{line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}svg{overflow:hidden}

/* Font */
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,300italic|Open+Sans:700);*/

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 300;
  src: local('Lato Light'), local('Lato-Light'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/kcf5uOXucLcbFOydGU24WALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 300;
  src: local('Lato Light Italic'), local('Lato-LightItalic'), url(http://themes.googleusercontent.com/static/fonts/lato/v6/2HG_tEPiQ4Z6795cGfdivLO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}

/* Main */


/*font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif;*/

body { font-family: 'Open Sans', sans-serif; background:#333333; }

.wrap { width:940px; margin:0 auto; }
.wrap:after { clear:both; }

header { width:100%; height:135px; position:fixed; z-index:1; }
#header-bg { width:100%; height:135px; background:#444; opacity:0; position:fixed; top:0; z-index:-1; } 
#header-bg-fixed { width:100%; height:135px; background:#444; opacity:.65; position:fixed; top:0; z-index:-1; }

#logo { width:160px; height:103px; }
#logo h1 { width:160px; height:103px; background:url('../img/belCH_logo.png') center no-repeat; }
#logo h1 a { width:160px; height:103px; display:block; text-indent:-9999px; }

#toolbar { background:rgba(117, 117, 117, 0.65); height:32px; }
#tool-nav { text-align:right; }
#tool-nav li { display:inline; font-size:12px; padding:0 10px; }
#tool-nav li a { height:32px; line-height:32px; text-transform:uppercase; text-decoration:none; color:#ffffff; font-weight:700; }
#tool-nav li a:hover, #tool-nav li.current a { color:#333333; }
#tool-nav li.lang { padding-right:0px; border-left:1px solid #ffffff; }
#tool-nav li.lang a { color:#ffffff; }
#tool-nav li.lang a:hover { color:#11a8ab; }

#navbar { float:right; margin-top:-74px; height:auto; }
#main-nav { text-align:right; }
#main-nav li { display:inline-block; font-size:12px; line-height:14px; }
#main-nav li a { margin:1px; text-align:left; display:block; padding:7px 11px; text-transform:uppercase; text-decoration:none; color:#ffffff; font-weight:700; }
#main-nav li a:hover, #main-nav li.current a { border:1px solid #d5d6d6; margin:0; }

#banner { padding-top:135px; height:334px; background:url('../img/home_bg.jpg') center no-repeat; background-size:cover; }
#hero-text { width:420px; padding:44px 0 0 50px; }
#banner h2 { font-family: 'Lato', sans-serif; color:#ffffff; font-weight:300; font-size:55px; line-height:58px; padding-bottom:17px; }

a.green-btn, a.blue-btn { font-family: 'Open Sans', sans-serif; font-size:14px; line-height:45px; text-transform:uppercase; text-decoration:none; color:#ffffff; height:45px; padding:0 58px 0 13px; font-weight:700; display:block; width:100px; margin:0 auto; }
.green-btn { background:#11a8ab url('../img/green-btn_bg.png') no-repeat top right; }
.green-btn:hover { color:#006666; background-position:bottom right; }
.blue-btn { background:#3399cc url('../img/blue-btn_bg.png') no-repeat top right; }
.blue-btn:hover { color:#1a709b; background-position:bottom right; }

#services { font-family: 'Lato', sans-serif; font-size:14px; line-height:21px; color:#ffffff; height:100em; margin-top:5em; }
#services h4 { font-size:36px; line-height:50px; font-weight:300; padding-top:160px; }
.green { color:#11a8ab; }
.blue { color:#3399cc; }

#services li p { padding-bottom:20px; }

#process {
    background-image: url("../img/bg-process.jpg");
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.process-flow>li {
    margin-bottom: 3.2em;
    max-width: 35em;
    margin: 0 auto 0 auto;
    -webkit-transition: opacity .5s ease-out;
    -moz-transition: opacity .5s ease-out;
    transition: opacity .5s ease-out;
    -webkit-opacity: .2;
    -moz-opacity: .2;
    opacity: .2;
	text-align: center;
}

.process-flow>li.active {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.process-flow>li p {
    margin-bottom: 0
}

.process-gem {
    position: relative;
    width: 11px;
    height: 11px;
    margin: auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background:  rgba(230, 230, 230, 0.1);
    -webkit-transition: background .7s ease-out;
    -moz-transition: background .7s ease-out;
    transition: background .7s ease-out
}

.process-gem.special {
    width: 103px;
    height: 103px
}

.process-gem.special img {
    left: 21px;
    width: 62px
}

.process-gem img {
    position: absolute;
    top: 70px;
    left: -45px;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
    -webkit-transition: opacity .7s ease-out;
    -moz-transition: opacity .7s ease-out;
    transition: opacity .7s ease-out
}

.process-gem img:last-child {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0
}

.process-gem.active {
    background: #e6e6e6
}

.process-gem.active img:first-child {
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0
}

.process-gem.active img:last-child {
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1
}

.bar {
    background: rgba(255, 255, 255, 0.1);
    width: .1em;
    height: 7em;
    margin: auto
}

.bar.active .progress {
    height: 7em
}

.progress {
    background: #8b8b8b;
    width: 100%;
    height: 0;
    -webkit-transition: height 1s ease-out;
    -moz-transition: height 1s ease-out;
    transition: height 1s ease-out
}

.process-flow {
        padding-top: 3.2em
    }

    .process-flow>li {
        float: left;
        clear: right;
        margin: 0;
        height: 17.45em;
        position: relative;
        width: 35em
    }

    .process-flow>li .bar {
        position: absolute;
        height: 27.5em;
        right: 14.5%;
        top: -6.65em;
        -webkit-transform: rotate(-61.5deg);
        -moz-transform: rotate(-61.5deg);
        transform: rotate(-61.5deg)
    }

    .process-flow>li .bar.active .progress {
        height: 35.9em
    }

    .process-flow>li:nth-child(2n) {
        float: right;
        clear: left
    }

    .process-flow>li:nth-child(2n) .bar {
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        transform: rotate(45deg);
        left: -56.5%;
        -webkit-transform: rotate(61.5deg);
        -moz-transform: rotate(61.5deg);
        transform: rotate(61.5deg)
    }

.service { padding:186px 0 50px; }
.service h2 { font-family: 'Open Sans', sans-serif; font-weight:700; text-transform:uppercase; font-size:18px; padding-bottom:30px; margin-bottom:26px; float:left; width:auto; }
.service h2.green { border-bottom:1px solid #11a8ab; }
.service h2.blue { border-bottom:1px solid #3399cc; }
.service h3 { font-family: 'Lato', sans-serif; font-weight:700; font-size:14px; }
.service p { width:460px; clear:both; font-family: 'Lato', sans-serif; font-size:14px; line-height:21px; color:#ffffff; padding-bottom:20px; }
.service img { padding:20px 0; }

.callbox { background:#424141; padding:30px; width:auto; }
.callbox h3 { font-family: 'Lato', sans-serif; font-weight:300; font-size:36px; padding-bottom:15px; }
.callbox h3 span { font-size:14px; color:#ffffff;  display:block; }

footer { background:#424141; height:200px; display:block; padding-top:25px; font-family: 'Lato', sans-serif; color:#ffffff; font-size:14px; line-height:18px; }
footer h5 { font-family: 'Open Sans', sans-serif; font-weight:700; text-transform:uppercase; padding-bottom:25px; }
footer li { font-family: 'Open Sans', sans-serif; font-weight:700; text-transform:uppercase; padding-bottom:6px; }
footer li a { text-decoration:none; color:#11a8ab; }

.link { font-family: 'Open Sans', sans-serif; font-weight:700; text-transform:uppercase; text-decoration:none; color:#11a8ab; font-size:10px; }
.link:hover { color:#ffffff; }
.mail { font-family: 'Open Sans', sans-serif; font-weight:700; color:#11a8ab; text-decoration:none; }
.mail:hover, li a:hover { color:#ffffff; }
.legal { font-size:10px; text-align:right; padding-top:35px; clear:both; line-height:12px; }

.contactform { float:right; width:500px; color:#ffffff; padding:68px 0 0; }

input, select, textarea { font-family:'Lato', sans-serif; font-size:14px; line-height:36px; color:#ffffff; border:1px solid #ffffff; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; background:none; margin:0 0 18px 0; padding:0 0 0 12px; }
input, textarea { width:491px; max-width:491px; display:block; }
select { width:505px; height:36px; float:left; background:transparent url('../img/select_arrow.png') no-repeat 98% center; -webkit-appearance:none; }
input[type="submit"] { font-family: 'Open Sans', sans-serif; width:84px; background-color:#11a8ab; border:none; color:#ffffff; text-transform:uppercase; padding:0 10px; font-weight:700; }
input[type="submit"]:hover { background-color:#666666; cursor:pointer; }
::-webkit-input-placeholder { /* WebKit browsers */ color:#ffffff; }
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:#ffffff; }
::-moz-placeholder { /* Mozilla Firefox 19+ */ color:#ffffff; }
:-ms-input-placeholder { /* Internet Explorer 10+ */ color:#ffffff; }

.unstyled { margin:0; padding:0; list-style-type:none; }

.hide { display:none !important; visibility:hidden; }