article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary {
    display: block;
}

audio,canvas,video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

audio:not([controls]) {
    display: none;
    height: 0;
}

[hidden] {
    display: none;
}

/* ==========================================================================
Base
========================================================================== */
html {
    font-size: 100%;
/* 1 */
    -webkit-text-size-adjust: 100%;
/* 2 */
    -ms-text-size-adjust: 100%;
/* 2 */
}

html,html a {
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

html,button,input,select,textarea {
    font-family: 'Helvetica,Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic,“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”, “メイリオ”,Meiryo, sans-serif',sans-serif;
    -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

/* * Addresses margins handled incorrectly in IE 6/7. */
body {
    margin: 0;
    font-family: 'Helvetica,Arial, Roboto, “Droid Sans”, “游ゴシック”, YuGothic,“ヒラギノ角ゴ ProN W3″,“Hiragino Kaku Gothic ProN”, “メイリオ”,Meiryo, sans-serif',sans-serif;
    -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a:focus {
    outline: thin dotted;
}

a:active,a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: .67em 0;
    color: #353535;
}

h2 {
    font-size: 1.5em;
    margin: .83em 0;
}

h3 {
    font-size: 1.17em;
    margin: 1em 0;
}

h4 {
    font-size: 1em;
    margin: 1.33em 0;
}

h5 {
    font-size: .83em;
    margin: 1.67em 0;
}

h6 {
    font-size: .75em;
    margin: 2.33em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

b,strong {
    font-weight: 700;
}

blockquote {
    margin: 1em 40px;
}

dfn {
    font-style: italic;
}

mark {
    background: #ff0;
    color: #000;
}

p,pre {
    margin: 1em 0;
}

code,kbd,pre,samp {
    font-family: monospace,serif;
    _font-family: 'courier new',monospace;
    font-size: 1em;
}

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

q {
    quotes: none;
}

q:before,q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

sub,sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -.5em;
}

sub {
    bottom: -.25em;
}

dl,menu,ol,ul {
    margin: 1em 0;
}

dd {
    margin: 0 0 0 40px;
}

menu,ol,ul {
    padding: 0 0 0 40px;
}

nav ul,nav ol {
    list-style: none;
    list-style-image: none;
}

img {
    border: 0;
/* 1 */
    -ms-interpolation-mode: bicubic;
/* 2 */
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

form {
    margin: 0;
}

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em;
}

legend {
    border: 0;
/* 1 */
    padding: 0;
    white-space: normal;
/* 2 */
    *margin-left: -7px;
/* 3 */
}

button,input,select,textarea {
    font-size: 100%;
/* 1 */
    margin: 0;
/* 2 */
    vertical-align: baseline;
/* 3 */
    *vertical-align: middle;
/* 3 */
}

button,input {
    line-height: normal;
}

button,html input[type="button"],/* 1 */
input[type="reset"],input[type="submit"] {
    -webkit-appearance: button;
/* 2 */
    cursor: pointer;
/* 3 */
    *overflow: visible;
/* 4 */
}

button[disabled],input[disabled] {
    cursor: default;
}

input[type="checkbox"],input[type="radio"] {
    box-sizing: border-box;
/* 1 */
    padding: 0;
/* 2 */
    *height: 13px;
/* 3 */
    *width: 13px;
/* 3 */
}

input[type="search"] {
    -webkit-appearance: textfield;
/* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
/* 2 */
    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;
/* 1 */
    vertical-align: top;
/* 2 */
}

/* ==========================================================================
Tables
========================================================================== */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
Global Styles
========================================================================== */
a {
    color: #353535;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

a:hover,a:focus {
    color: #3dc9b3;
    text-decoration: none;
}

p {
    color: #8c9398;
    word-spacing: 1px;
    line-height: 25px;
    font-size: 14px;
}

p.left {
	text-align: left;
}

h2 {
    font-size: 18px;
    color: #353535;
    text-transform: uppercase;
    font-weight: 700;
}

h2::after {
    content: " ";
    border: solid 2px #0099FF;
    display: block;
    width: 35px;
    margin: 25px auto;
}

.section-padding {
    padding: 90px 0 100px;
}

.dark-bg {
    background: #f3f5f8;
}

.light-bg {
    background-color: #fff;
}

.dark-box {
    background: #f3f5f8;
    -webkit-box-shadow: 0 3px 0 0 #f0f2f4;
    -moz-box-shadow: 0 3px 0 0 #f0f2f4;
    box-shadow: 0 3px 0 0 #f0f2f4;
}

.light-box {
    background-color: #fff;
    -webkit-box-shadow: 0 3px 0 0 #f0f2f4;
    -moz-box-shadow: 0 3px 0 0 #f0f2f4;
    box-shadow: 0 3px 0 0 #f0f2f4;
    padding: 20px 0;
}

.light-box:hover,.light-box:focus {
    -webkit-box-shadow: 0 3px 0 0 #0099FF;
    -moz-box-shadow: 0 3px 0 0 #0099FF;
    box-shadow: 0 3px 0 0 #0099FF;
}

.box-hover {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}

.box-hover:hover,.box-hover:focus {
    transform: translate(0,-15px);
    -webkit-transform: translate(0,-15px);
    -ms-transform: translate(0,-15px);
}

.wrapper {
    height: 650px;
}

.nopadding {
    padding: 0;
}

.inner {
    padding-top: 170px;
}

/* ==========================================================================
Navigation
========================================================================== */
nav {
    background-color: #242830;
    margin-top: -1px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    color: rgba(255,255,255,0.6);
    display: block;
    border-bottom: 1px dotted rgba(255,255,255,0.2);
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    padding-left: 0;
    position: relative;
}

nav ul li:last-child {
    border: none;
}

nav ul li a {
    color: rgba(255,255,255,0.6);
    display: block;
    padding: 20px;
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
    padding-left: 0;
    position: relative;
}

nav ul li a:hover,nav ul li a:focus {
    text-decoration: none;
    color: rgba(255,255,255,1);
}

#nav-toggle {
    position: absolute;
    left: 15px;
    top: 0;
}

#nav-toggle {
    cursor: pointer;
    padding: 10px 35px 16px 0;
}

#nav-toggle span,#nav-toggle span:before,#nav-toggle span:after {
    cursor: pointer;
    border-radius: 1px;
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    -o-border-radius: 1px;
    height: 5px;
    width: 35px;
    background: #353535;
    position: absolute;
    display: block;
    content: '';
}

#nav-toggle span:before {
    top: -10px;
}

#nav-toggle span:after {
    bottom: -10px;
}

#nav-toggle span,#nav-toggle span:before,#nav-toggle span:after {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}

#nav-toggle.active span {
    background-color: transparent;
}

#nav-toggle.active span:before,#nav-toggle.active span:after {
    top: 0;
}

#nav-toggle.active span:before {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

#nav-toggle.active span:after {
    transform: translateY(-10px) rotate(-45deg);
    -webkit-transform: translateY(-10px) rotate(-45deg);
    -ms-transform: translateY(-10px) rotate(-45deg);
    top: 10px;
}

.navicon {
    position: relative;
    height: 26px;
}

.indicator {
    position: absolute;
    right: 0 !important;
}

.pull {
    display: none;
}

/* ==========================================================================
Hero
========================================================================== */
.hero {
    background: url(../img/hero-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    padding: 65px 0 300px;
    height: auto;
}

.hero h1 {
    font-size: 40px;
    letter-spacing: 12px;
    margin: 10px;
}

.hero h1 span {
    color: #a1a9b0;
    display: inline-block;
}

.hero p {
    letter-spacing: 1px;
}

.learn-more-btn {
    background: rgba(61,201,179,1);
    padding: 20px 40px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -o-border-radius: 5px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block;
    -webkit-box-shadow: 0 3px 0 0 #309383;
    -moz-box-shadow: 0 3px 0 0 #309383;
    box-shadow: 0 3px 0 0 #309383;
    margin: 60px 0 0;
    font-weight: 700;
}

.learn-more-btn:hover,.learn-more-btn:focus {
    background: rgba(61,201,179,0.6);
    color: #fff;
}

/* ==========================================================================
Intro
========================================================================== */
.intro {
    background: #f3f5f8;
}

.intro p {
    margin: 50px 0 0;
}

h1.arrow {
    font-size: 15px;
    text-transform: uppercase;
    color: #353535;
    letter-spacing: 1px;
    background: url(../img/h1-bg.png) no-repeat center bottom;
    padding-bottom: 30px;
    font-weight: 700;
}

/* ==========================================================================
Features
========================================================================== */
.features-wrapper,.team-wrapper {
    margin: 70px 0 0;
}

.icon {
    height: 175px;
    width: 175px;
    line-height: 175px;
    max-width: 100%;
    background: #0099FF;
    border-radius: 50%;
    -o-border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    display: block;
    color: #fff;
    font-size: 55px;
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 0 auto 50px;
}

/* ==========================================================================
iPhone Section
========================================================================== */
.iphone {
    width: 50%;
    background: #f3f5f8;
    float: left;
    height: 100%;
    box-shadow: inset -15px -11px 40px -6px rgba(0,0,0,0.1);
    -moz-box-shadow: inset -15px -11px 40px -6px rgba(0,0,0,0.1);
    -webkit-box-shadow: inset -15px -11px 40px -6px rgba(0,0,0,0.1);
    z-index: 1;
}

.fluid-white {
    width: 50%;
    background: #fff;
    float: right;
    height: 100%;
    z-index: 2;
}

.responsive-services {
    position: relative;
}

/* ==========================================================================
Swag
========================================================================== */
.swag {
    background: url(../img/plants-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px 0;
}

.swag h1 {
    color: #fff;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 5px;
}

.swag h1 span {
    display: block;
    font-size: 25px;
    margin-top: 20px;
}

.down-arrow-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #0099FF;
    display: inline-block;
    margin: 10px auto 20px;
    color: #fff;
    font-size: 16px;
    line-height: 40px;
    text-align: center;
}

.down-arrow-btn:hover,.down-arrow-btn:focus {
    color: #fff;
    background: rgba(61,201,179,1);
}

/* ==========================================================================
Portfolio
========================================================================== */
.effects {
    padding-left: 15px;
}

.effects .img {
    position: relative;
    margin-bottom: 50px;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.effects .img:nth-child(n) {
    margin-right: 5px;
}

.effects .img:first-child {
    margin-left: -15px;
}

.effects .img:last-child {
    margin-right: 0;
}

.effects .img img {
    display: block;
    margin: 0;
    padding: 0;
    height: auto;
}

.overlay {
    display: block;
    position: absolute;
    z-index: 20;
    background: rgba(100,194,158,0.8);
    overflow: hidden;
    transition: all .5s;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
}

a.close-overlay {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 100;
    width: 45px;
    height: 45px;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 45px;
    text-align: center;
    background-color: #000;
    cursor: pointer;
}

a.close-overlay.hidden {
    display: none;
}

a.expand {
    display: block;
    position: absolute;
    z-index: 100;
    text-align: center;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    line-height: 30px;
}

.overlay-effect .img i {
    font-size: 30px;
}

.overlay-effect .overlay {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.overlay-effect .overlay a.expand {
    left: 0;
    right: 0;
    bottom: 47%;
    margin: 0 auto -30px;
}

.overlay-effect .img.hover .overlay {
    height: 100%;
    opacity: 1;
}

.img img {
    width: -webkit-calc(100% + 40px) !important;
    width: calc(100% + 40px) !important;
    -webkit-transition: opacity 0.35s,-webkit-transform .35s;
    transition: opacity 0.35s,transform .35s;
    -moz-transition: opacity 0.35s,-moz-transform .35s;
    -o-transition: opacity 0.35s,-o-transform .35s;
    -webkit-transform: translate3d(-40px,0,0);
    transform: translate3d(-40px,0,0);
    -ms-transform: translate3d(-40px,0,0);
}

.img:hover img {
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -ms-transform: translate3d(-40px,0,0);
}

.designs {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    top: 50px;
}

/* ==========================================================================
Subscribe
========================================================================== */
.subscribe {
    background: url(../img/keyboard-bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment: fixed;
    padding: 150px 0 160px;
}

.subscribe h1 {
    color: #fff;
    margin-bottom: 40px;
}

.subscribe h1 span {
    display: block;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 20px;
    letter-spacing: 1px;
}

.subscribe input[type=text] {
    background-color: rgba(255,255,255,0.1);
    border: solid 1px #fff;
    padding: 10px;
    margin: 0 0 15px 0;
    width: 50%;
    color: #fff;
}

.subscribe textarea {
    background-color: rgba(255,255,255,0.1);
    border: solid 1px #fff;
    padding: 10px 10px 70px 10px;
    margin: 0 0 0 0;
    width: 50%;
    color: #fff;
}

.subscribe input[type=submit] {
    background: #0099FF;
    border: solid 1px rgba(61,201,179,0.5);
    margin-top: 20px;
    padding: 10px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}

.subscribe input[type=submit]:hover {
    background: rgba(61,201,179,1);
    border: solid 1px rgba(61,201,179,1);
    color: #fff;
}

/* ==========================================================================
CTA
========================================================================== */
.ignite-cta {
    background-color: #242830;
    padding: 70px 0;
}

.ignite-btn {
    display: inline-block;
    padding: 25px 40px;
    color: #fff;
    border: solid 1px #fff;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 1px;
}

.ignite-btn:hover,.ignite-btn:focus {
    color: #3dc9b3;
    border: solid 1px #3dc9b3;
}

/* ==========================================================================
Team
========================================================================== */
.team img {
    margin-bottom: 40px;
}


/* ==========================================================================
Contact
========================================================================== */
.up-btn {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #0099FF;
    display: block;
    margin: 0 auto;
    color: #fff;
    font-size: 18px;
    line-height: 46px;
    text-align: center;
    position: absolute;
    top: -26px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.up-btn:hover,up-btn:focus {
    color: #fff;
    background: rgba(61,201,179,1);
}

.contact-details {
    margin: 20px 0;
}

.contact-details h2 {
    font-size: 20px;
}

.contact-details h2 span {
    display: block;
    color: #0099FF;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
    margin-top: 15px;
}

.contact-wrap {
    position: relative;
}

/* ==========================================================================
Footer
========================================================================== */
footer a {
    color: #a1a9b0;
}

footer {
    background-color: #242830;
    padding: 40px 0 30px;
}

footer p {
    color: #fff;
}

ul.legals {
    list-style: none;
    color: #fff;
    line-height: 25px;
}

ul.legals li {
    display: inline-block;
}

ul.legals li::after {
    content: " |";
}

ul.legals li:last-child::after {
    content: "";
}

.legals {
    text-align: left;
}

.credit {
    text-align: right;
}

/* ==========================================================================
FlexSlider Custom CSS
========================================================================== */
#servicesSlider {
    margin-top: 70px;
}

ul.slides li {
    margin-bottom: 20px;
}

/* ==========================================================================
Waypoints
========================================================================== */
.wp1,.wp2,.wp3,.wp4,.wp5,.wp6 {
    visibility: hidden;
}

.bounceInLeft,.bounceInRight,.fadeInUp,.fadeInUpDelay,.fadeInDown,.fadeInUpD,.fadeInLeft,.fadeInRight {
    visibility: visible;
}

.delay-05s {
    animation-delay: .5s;
    -webkit-animation-delay: .5s;
}

.delay-1s {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.wp3 {
    background: url(../img/iphone-bg.png) no-repeat center center;
    background-position: 200px 10px;
    height: 100%;
}