/* CSS reset */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {margin: 0;  padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; } article, aside, figure, footer, header, hgroup, nav, section {display: block;} img, object, embed {max-width: 100%;} html {overflow-y: scroll;} ul {list-style: none;} blockquote, q {quotes: none;} blockquote:before,  blockquote:after,  q:before,  q:after {content: ''; content: none;} a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} del {text-decoration: line-through;} abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} table {border-collapse: collapse; border-spacing: 0;} th {font-weight: bold; vertical-align: bottom;} td {font-weight: normal; vertical-align: top;} hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0;} input, select {vertical-align: middle;} pre { white-space: pre; white-space: pre-wrap; white-space: pre-line; word-wrap: break-word; } input[type="radio"] {vertical-align: text-bottom;} input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} .ie6 input {vertical-align: text-bottom;} select, input, textarea {font: 99% sans-serif;} table {font-size: inherit; font: 100%;} small {font-size: 85%;} strong, th {font-weight: bold;} td, td img {vertical-align: top;}  sub, sup {font-size: 75%; line-height: 0; position: relative;} sup {top: -0.5em;} sub {bottom: -0.25em;} pre, code, kbd, samp {font-family: monospace, sans-serif;} .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;} button, input, select, textarea {margin: 0;} button {width: auto; overflow: visible;} .ie7 img {-ms-interpolation-mode: bicubic;} .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));} .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
* {outline: none;}
body {font: 13px Tahoma, sans-serif; background-color: #EFEFEF;}
body, select, input, textarea {color: #3F4852;}
a {color: #03f;}
a:hover {color: #69f;}
::-moz-selection{background: #e2b559; color: #fff; text-shadow: none;}
::selection {background: #e2b559; color: #fff; text-shadow: none;} 
a:link {-webkit-tap-highlight-color: #fcd700;} 
ins {background-color: #fcd700; color: #000; text-decoration: none;}
mark {background-color: #fcd700; color: #000; font-style: italic; font-weight: bold;}

/* Define some custom fonts */
@font-face {
  font-family: 'BebasNeue';
  src: url('../font/bebasneue-webfont.eot');
  src: url('../font/bebasneue-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/bebasneue-webfont.woff') format('woff'),
    url('../font/bebasneue-webfont.ttf') format('truetype'),
    url('../font/bebasneue-webfont.svg#NunitoRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 400;
  src: local('Dosis Regular'), local('Dosis-Regular'), url('http://themes.googleusercontent.com/static/fonts/dosis/v1/xIAtSaglM8LZOYdGmG1JqQ.woff') format('woff');
}

.clearfix:after {content: '.'; display: block; height: 0; clear: both; visibility: hidden;}

/* Default paragraphs and headers */
h1 {font-size: 40px; font-family: BebasNeue; color: #3f4752; font-weight: normal;}
h2 {font-size: 28px; font-family: BebasNeue; color: #3f4752; font-weight: normal;}
p {color: #a5a8ab; text-align: justify; margin: 10px 0;}
p strong {color: #8f9193;}

/* Header and footer */
#main-header {height: 556px; background: url('../img/bg-header.jpg') no-repeat scroll 50% 0 transparent; position: relative; z-index: 1;}
#main-footer {height: 65px; background: url('../img/bg-footer.jpg') repeat-x scroll 0 0 transparent; position: relative; z-index: 1;}

/* Inner content of header, boxes and footer */
.inner-content {width: 960px; margin: 0 auto; position: relative;}
.inner-content-width {width: 1000px; margin: 0 auto; position: relative;}

/* Head of document */
#logo {position: absolute; left: 50%; margin-left: -110px; width: 230px;}
#join-via-facebook {position: absolute; width: 180px; top: 20px; right: 0;}
#join-via-facebook a {text-decoration: none; font: 18px BebasNeue; color: #282d33; text-shadow: 1px 1px 1px #4c545e;}
#join-via-facebook img {margin-top: -3px; float: right;}

/* Slider */
#sequence {position: relative; top: 160px;}
#sequence ul {position: relative;}
#sequence ul .active {display: block !important;}
#sequence ul li {display: none; position: relative; padding-left: 250px;}
#sequence ul .active {display: block;}
#sequence ul li article hgroup h1, #sequence ul li article hgroup h2 {font-size: 36px; font-family: BebasNeue; position: relative; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dcdee0), color-stop(100%, #8f959b)); background-image: -webkit-linear-gradient(#dcdee0,#8f959b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: #b5b9bd; font-weight: normal;}
#sequence ul li article hgroup h1:after, #sequence ul li article hgroup h2:after {text-shadow: 1px 1px 3px #262d36; background: none; display: inline-block; content: attr(data-text); left: 0; position: absolute; top: 0; z-index: -2;}
#sequence ul li article hgroup h1:after {text-shadow: 1px 1px 3px #262d36, 0 0 50px #000;}
#sequence ul li article hgroup h1 {font-size: 113px !important;}
#sequence ul li article p {color: #afb3b7; text-shadow: 1px 1px 1px #2c323a; text-align: justify; line-height: 19px;}
#sequence ul li article form {margin-top: 35px;}
#sequence ul li article input[type="text"] {width: 270px; text-shadow: 1px 1px 1px #555e6a; padding: 10px 20px; background: url('../img/bg-input-email.png') repeat-x scroll 0 0 transparent; border: 0; border-radius: 2px; border-bottom: 1px solid #676e76; border-right: 1px solid #676e76; font-size: 18px; font-family: BebasNeue; color: #22272d;}
#sequence ul li article input[type="text"]:focus {color: #f0f0f0; text-shadow: 1px 1px 1px #000;}
#sequence ul li article input[type="submit"] {position: relative; box-shadow: 0 2px 0 #70492b, 0 0 15px #deac54; text-shadow: 1px 1px 1px #e6bc7f; margin-left: 15px; padding: 0 25px; background: url('../img/bg-input-submit.png') repeat-x scroll 0 0 transparent; border: 0; border-radius: 2px; height: 39px; line-height: 39px; font-size: 18px; font-family: BebasNeue; color: #7d592e; margin-top: -1px;}
#sequence ul li article input[type="submit"]:hover {top: 1px; box-shadow: 0 0 15px #deac54;}

/* Slider animation */
#sequence ul li > img {position: absolute; left: -50px; top: -50px; filter: alpha(opacity=0); z-index: -1; opacity: 0; transition: opacity 1s, left 1s; -moz-transition: opacity 1s, left 1s; -webkit-transition: opacity 1s, left 1s; -o-transition: opacity 1s, left 1s;}
#sequence ul .animate > img {opacity: 1; filter: alpha(opacity=100); left: 0;}
#sequence ul li article {position: relative; right: -50px; filter: alpha(opacity=0); opacity: 0; transition: opacity 1s, right1s; -moz-transition: opacity 1s, right 1s; -webkit-transition: opacity 1s, right 1s; -o-transition: opacity 1s, right 1s;}
#sequence ul .animate article {opacity: 1; filter: alpha(opacity=100); right: 0;}

/* Slider navigation */
#sequence-nav {position: absolute; top: 525px;}
#sequence-nav ul {width: 960px; text-align: center;}
#sequence-nav li {cursor: pointer; display: inline-block; margin: 0 10px; height: 7px; background: url('../img/bg-slider-nav.png') repeat-x scroll 0 100% transparent; width: 78px; transition: background-position 1s; -moz-transition: background-position 1s; -webkit-transition: background-position 1s; -o-transition: background-position 1s; *display: inline;}
#sequence-nav li.active {background-position: 0 0;}

/* Footer */
#main-footer ul li a {margin: 15px 0; display: block; width: 33px; height: 34px; background: url('../img/icon-social.png') no-repeat scroll 0 0 transparent;}
#main-footer ul li a.ico-tweet {background-position: 0 0;}
#main-footer ul li a.ico-facebook {background-position: -30px 0;}
#main-footer ul li a.ico-rss {background-position: -60px 0;}
#main-footer ul li a.ico-google {background-position: -90px 0;}
#main-footer ul li a.ico-youtube {background-position: -120px 0;}
#main-footer ul li a:hover {opacity: 0.6}
#main-footer ul li {float: left;}
#main-footer p {float: right; color: #898D93; text-shadow: 1px 1px 1px #2e343d; line-height: 65px; margin: 0;}

/* Section after slider */
#underslider {height: 123px; padding-top: 40px; background: url('../img/bg-header1.png') repeat-x scroll 0 0 transparent;}
#underslider img {float: left; margin-top: 10px;}
#underslider .col-two {float: left; width: 700px; margin-left: 20px;}
#underslider .col-two h1 {font-weight: normal; color: #3f4750; font-size: 28px; font-family: BebasNeue; marbin-bottom: 5px;}
#underslider .col-two p {line-height: 19px; color: #929495; text-shadow: 1px 1px 1px #fff;}
#underslider .col-three {margin-top: 20px; float: right; width: 175px;}

/* PADMA button style */
.button {cursor: pointer; }
.button a {position: relative;display: block; float: left; height: 40px; text-align: center; line-height: 40px; padding: 0 11px; box-shadow: 0px 0px 20px red; }
.button img {margin-top: 13px !important;}
.button a.button-yellow { border-top-left-radius: 3px; border-bottom-left-radius: 3px; box-shadow: 0 2px 0 #70492b; background: url('../img/bg-input-submit.png') repeat-x scroll 0 0 transparent;}
.button a.button-blue { border-top-right-radius: 3px; border-bottom-right-radius: 3px; box-shadow: 0 2px 0 #181d23; background: url('../img/bg-input-submit-blue.png') repeat-x scroll 0 0 transparent; color: #fff; font-size: 18px; font-family: BebasNeue; text-shadow: 1px 1px 1px #2d323b; text-decoration: none;}
.button:hover a.button-yellow {box-shadow: none; top: 2px;}
.button:hover a.button-blue {box-shadow: none; top: 2px;}
.button:hover a.button-blue:after {clear: both; display: block;}

/* MAIN & KEY FEATURES */
#boxes {margin: 35px 0; overflow: hidden;}
#boxes .box {margin: 0 9px; text-align: center; float: left; background: url('../img/bg-box.png') no-repeat scroll 0 100% transparent; width: 302px; height: 279px; position: relative;}
#boxes .box .box-icon {border-radius: 50px; width: 99px; margin: 17px auto 30px auto; height: 97px; background: url('../img/bg-circles.png') no-repeat scroll 0 0 transparent; transition: background-position 0.5s; -moz-transition: background-position 0.5s; -webkit-transition: background-position 0.5s; -o-transition: background-position 0.5s;} 
#boxes .box .box-icon img {padding: 22px 0;}
#boxes .box h1 {margin-bottom: 10px; font-weight: normal; color: #3f4851; text-shadow: 1px 1px 1px #fff; font-size: 23px; font-family: BebasNeue; marbin-bottom: 5px;}
#boxes .box p {text-align: center; color: #8f9499; text-shadow: 1px 1px 1px #fff; line-height: 19px;}
#boxes .box:hover .box-icon {background-position: 0 100%}
#boxes .box:hover h1 {color: #d7d9db; text-shadow: 1px 1px 1px #282d35;}
#boxes .box:hover p {color: #d7d9db; text-shadow: 1px 1px 1px #282d35;}
#boxes .box .box-blue {position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url('../img/bg-box.png') no-repeat scroll 0 0 transparent; filter: alpha(opacity=0); z-index: -1; opacity: 0; transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; -o-transition: opacity 0.5s;}
#boxes .box:hover .box-blue {opacity: 1; filter: alpha(opacity=100)}

/* Three big boxes after underlisder */
.bar-blue {background: url('../img/bg-bar.png') no-repeat scroll 0 0 transparent; width: 900px; height: 218px; padding: 0 50px;}
.bar-white {background: url('../img/bg-bar.png') no-repeat scroll 0 100% transparent; width: 900px; height: 218px; padding: 0 50px;}
.bar-blue img, .bar-white img {padding: 9px; float: left;}
.bar-blue h1 {float: left; font-size: 24px; font-family: BebasNeue; color: #d7d9db; text-shadow: 1px 1px 1px #2b3139; line-height: 52px; font-weight: normal; margin-left: 10px;}
.bar-white h1 {float: left; font-size: 24px; font-family: BebasNeue; color: #414a53; text-shadow: 1px 1px 1px #fff; line-height: 52px; font-weight: normal; margin-left: 10px;}
.bar-content {margin-top: -125px; padding: 0 70px; overflow: hidden; margin-bottom: 20px;}

/* MAIN & KEY FEATURES */
.main-key {width: 260px; height: 150px; float: left; margin: 0 13px;}
.main-key header {overflow: hidden; margin-bottom: 10px;}
.main-key header img {float: left;}
.main-key header h1 {margin-left: 15px; float: left; font-size: 21px; font-family: Dosis; color: #3f4852; text-shadow: 1px 1px 1px #fff; font-weight: normal; line-height: 50px;}
.main-key p {text-align: justify; color: #a2a6aa; text-shadow: 1px 1px 1px #fff;}

/* Testimonials */
#testimonials {height: 119px; margin-top: -30px;}
#testimonials article {display: none; margin-top: 50px; overflow: hidden; margin-bottom: 20px;}
#testimonials article .avatar {float: left; position: relative; background: url('../img/bg-avatar.png') no-repeat scroll 0 0 transparent; width: 123px; height: 109px; padding: 5px;}
#testimonials article .avatar p {margin: 0; background: url('../img/bg-avatar-name.png') repeat-x scroll 0 0 transparent; height: 31px; line-height: 31px; position: absolute; width: 109px; left: 5px; bottom: 5px; font-size: 19px; text-align: center; font-family: BebasNeue; color: #d5d6d7; text-shadow: 1px 1px 1px #363a43;}
#testimonials article .comment-content {text-align: justify; width: 670px; float: right; background: url('../img/bg-comment.png') repeat-x scroll 0 0 transparent; height: 79px; line-height: 25px; padding: 20px; color: #9c9ea0; text-shadow: 1px 1px 1px #fff;}
#testimonials article .comment-content p {margin: 0;}

/* Portfolio */
.portfolio-item {float: left; position: relative; width: 196px; height: 196px; box-shadow: 0 0 20px #aaa; margin: 20px 9px;}
.portfolio-item a {color: #fcf2e2; text-shadow: 1px 1px 1px #bc873b; font-size: 18px; font-family: BebasNeue; text-decoration: none;}
.portfolio-item-hover {cursor: pointer; filter: alpha(opacity=0); opacity: 0; transition: opacity 0.5s, box-shadow 0.5s; -moz-transition: opacity 0.5s, box-shadow 0.5s; -webkit-transition: opacity 0.5s, box-shadow 0.5s; -o-transition: opacity 0.5s, box-shadow 0.5s; position: absolute; height: 52px; width: 196px; top: 0; padding-top: 144px; left: 0; line-height: 52px; background: url('../img/bg-portfolio-item-hover.png') repeat-x scroll 0 144px transparent; text-align: center;}
.portfolio-item-hover img {margin-right: 3px; margin-bottom: -2px; margin-left: -13px;}
.portfolio-item-hover:hover {opacity: 1; filter: alpha(opacity=100); box-shadow: 0 0 20px #fff;}

/* Typography */
#typography .col-one {float: left; width: 400px;}
#typography .col-two {float: left; width: 200px; margin: 0 30px;}
#typography .col-three {float: left; width: 200px;}
.custom-list li {background: url('../img/tick.png') no-repeat scroll 0 6px transparent; color: #858a90; padding: 5px 0 5px 25px;}

/* Contact form */
#contact .col-one {width: 300px; float: left;}
#contact .col-two {width: 500px; float: right;}
#contact .col-one .col-one {float: left; margin-top: -20px; width: 130px}
#contact .col-one .col-two {float: right; width: 170px; line-height: 19px; margin-top: 15px; color: #303843;}
#contact .col-one .col-two a {text-decoration: none; color: #ddac66;}
#contact .col-two .col-one {float: left; width: 150px;}
#contact .col-one p {margin-top: 30px;}
#contact .col-two .col-two {float: left; width: 150px; margin-left: 50px;}
#contact label {color: #61676f; margin-bottom: 7px; display: block;}
#contact input[type="text"] {background-color: #f7f7f7; box-shadow: inset 0 0 10px #ddd; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-bottom: 1px solid #fff; border-right: 0; border-radius: 2px; padding: 10px;}
#contact textarea {background-color: #f7f7f7; box-shadow: inset 0 0 30px #ddd; border-top: 1px solid #ccc; width: 478px; height: 100px; border-left: 1px solid #ccc; border-bottom: 1px solid #fff; border-right: 0; border-radius: 2px; padding: 10px;}

/* Contact select */
#contact .select {font-size: 18px; font-family: BebasNeue; width: 350px; height: 49px; line-height: 49px; position: relative; cursor: pointer; background: url( '../img/bg-select.png' ) repeat-x scroll 0 0 transparent; border-radius: 2px;}
#contact .select-expand {border-radius: 2px 2px 0 0 !important;}
#contact .select input {display: none;}
#contact .select p {padding-left: 20px; float: left; margin: 0; color: #d7d9db; text-shadow: 1px 1px 1px #2d333c;}
#contact .select span {float: right; background: url( '../img/arrow-down.png' ) no-repeat scroll 50% 50% transparent; width: 40px; height: 49px;}
#contact .select .select-options {display: none; color: #595959; width: 100%; position: absolute; left: 0; top: 49px;}
#contact .select .select-options li {font-size: 18px; font-family: BebasNeue; padding-left: 20px; color: #d7d9db; text-shadow: 1px 1px 1px #2d333c; background: url( '../img/bg-select.png' ) repeat-x scroll 0 0 transparent;}
#contact .select .select-options li:hover {color: #FFFFFF; background-color: #3875D7; text-shadow: none;}
#contact .select .select-options li:last-child {border-radius: 0 0 2px 2px;}