/*------ [Table of contents]

 0. Mast
 1. Font 
 2. Button 
 3. Social Icons 
 4. Header 
 5. Slider 
 6. About 
 7. Section with Image 
 8. Testimonials 
 9. Contact 
10. Staff 
11. Blog 
12. Start Section 
13. Footer 
14. Responsive Navigation 
15. Video-background
------------------------*/

article {margin:20px 0px 20px 0px;}
aside {margin:0px 0 20px 0px;}

/* [0. Mast Section ] */
#mast {background-color:transparent; background-size:cover; position:relative; width:100%; background-color:#e6e6e6; color:#fff;}
#mast a {color:rgba(255, 255, 255, 0.8) !important; text-decoration:underline;}
#mast a:hover {color:#888 !important; text-decoration:none;}
#mast .gradient {position:absolute; top:0; bottom:0; left:0; right:0; z-index:2; background:rgba(0, 0, 0, 0.3);}
#mast, #mast .text-wrap {height:300px;}
#mast .text-wrap {display:table; width:100%; position:relative; z-index:4;}
#mast .text-inner {display:table-cell; vertical-align:middle;}
#mast .text-inner h1 {margin:130px 0 0 30px; font-size:30px; font-weight:400; color:#FFFFFF; text-transform:uppercase; line-height:40px;}
#mast .text-inner h2 {margin:0 0 0 30px; font-size:15px; font-weight:300; color:rgba(255, 255, 255, 0.8); line-height:normal;}
#services,#testimony,#explore,#faq,#team,#trusted,#footer,#work,#counters,#pricing,#blog,#legal {padding:20px 0;}
@media screen and (max-width:768px) {#mast .text-inner .call-to-action a.demo {margin-bottom:20px;}}
@media screen and (max-width:768px) {#services,#testimony,#explore,#faq,#team,#trusted,#footer,#work,#counters,#pricing,#blog,#legal {padding:20px 0;}}

/* [1. Font ] */
@font-face {font-family:'icomoon'; src:url("../../../assets/fonts/icomoon/icomoon.eot?srf3rx"); src:url("../../../assets/fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../../../assets/fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../../../assets/fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../../../assets/fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg"); font-weight:normal; font-style:normal;}
body{overflow-x:hidden;}
a {color:#333333; -webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
a:hover, a:active, a:focus {color:#333333; outline:none;}
p {margin-bottom:30px;}
h1, h2, h3, h4, h5, h6, figure {color:#000; font-family:"Open Sans", Arial, sans-serif; font-weight:400; margin:0 0 20px 0;}
::-webkit-selection {color:#fff; background:#333333;}
::-moz-selection {color:#fff; background:#333333;}
::selection {color:#fff; background:#333333;}

/* [2. Button ] */
.btn {margin-right:4px; margin-bottom:4px; font-family:"Open Sans", Arial, sans-serif; font-size:12px; font-weight:400; -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; border-radius:30px; -webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
.btn.btn-md {padding:10px 20px !important;}
.btn.btn-lg {padding:18px 36px !important;}
.btn:hover, .btn:active, .btn:focus {box-shadow:none !important; outline:none !important;}
.btn-primary {background:#333333; color:#fff; border:2px solid #333333;}
.btn-primary.btn-outline {background:transparent; color:#333333; border:2px solid #333333;}
.btn-primary.btn-outline:hover, .btn-primary.btn-outline:focus, .btn-primary.btn-outline:active {background:#333333; color:#fff;}
.btn-success {background:#5cb85c; color:#fff; border:2px solid #5cb85c;}
.btn-success:hover, .btn-success:focus, .btn-success:active {background:#4cae4c !important; border-color:#4cae4c !important;}
.btn-success.btn-outline {background:transparent; color:#5cb85c; border:2px solid #5cb85c;}
.btn-success.btn-outline:hover, .btn-success.btn-outline:focus, .btn-success.btn-outline:active {background:#5cb85c; color:#fff;}
.btn-info {background:#5bc0de; color:#fff; border:2px solid #5bc0de;}
.btn-info:hover, .btn-info:focus, .btn-info:active {background:#46b8da !important; border-color:#46b8da !important;}
.btn-info.btn-outline {background:transparent; color:#5bc0de; border:2px solid #5bc0de;}
.btn-info.btn-outline:hover, .btn-info.btn-outline:focus, .btn-info.btn-outline:active {background:#5bc0de; color:#fff;}
.btn-warning {background:#f0ad4e; color:#fff; border:2px solid #f0ad4e;}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active {background:#eea236 !important; border-color:#eea236 !important;}
.btn-warning.btn-outline {background:transparent; color:#f0ad4e; border:2px solid #f0ad4e;}
.btn-warning.btn-outline:hover, .btn-warning.btn-outline:focus, .btn-warning.btn-outline:active {background:#f0ad4e; color:#fff;}
.btn-danger {background:#d9534f; color:#fff; border:2px solid #d9534f;}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active {background:#d43f3a !important; border-color:#d43f3a !important;}
.btn-danger.btn-outline {background:transparent; color:#d9534f; border:2px solid #d9534f;}
.btn-danger.btn-outline:hover, .btn-danger.btn-outline:focus, .btn-danger.btn-outline:active {background:#d9534f; color:#fff;}
.btn-outline {background:none; border:2px solid gray; font-size:16px; -webkit-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.btn-outline:hover, .btn-outline:focus, .btn-outline:active {box-shadow:none;}
.btn.with-arrow {position:relative; -webkit-transition:0.3s; -o-transition:0.3s; transition:0.3s;}
.btn.with-arrow i {visibility:hidden; opacity:0; position:absolute; right:0px; top:50%; margin-top:-8px; -webkit-transition:0.2s; -o-transition:0.2s; transition:0.2s;}
.btn.with-arrow:hover {padding-right:50px;}
.btn.with-arrow:hover i {color:#fff; right:18px; visibility:visible; opacity:1;}
.purch{background-color:transparent; margin:5px; border-color:#00B906;}
.purch:hover, .purch:focus, .purch:active{background-color:#00B906; border-color:#00B906;}
.port{background-color:transparent; border-color:#ffffff; margin:5px;}
.port:hover, .port:focus, .port:active{background-color:#ffffff; border-color:#ffffff; color:#888888;}
.form-control {box-shadow:none; background:transparent; border:2px solid rgba(0, 0, 0, 0.1); height:54px; font-size:18px; font-weight:300;}
.form-control:active, .form-control:focus {outline:none; box-shadow:none; border-color:#333333;}

/* [3. Social Icons ] */
.social {padding:0; margin:0;}
.social li {padding:0; margin:0; list-style:none; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
.social li a {font-size:22px; color:#fff; margin:0; padding:2px; display:-moz-inline-stack; display:inline-block; zoom:1; -webkit-border-radius:7px; -moz-border-radius:7px; -ms-border-radius:7px; border-radius:7px;}
.social li a:hover {color:#333333;}
.social li a:hover, .social li a:active, .social li a:focus {outline:none; text-decoration:none;}

/* [4. Header ] */
.logo {float:left; position:absolute; z-index:1002; margin-top:-72px;}
#header {background-color:rgba(0, 0, 0, 0.5); position:absolute; z-index:1001; width:100%; margin:80px 0 0 0;}
#header .header-inner {height:45px; padding-left:20px; padding-right:20px; float:left; width:100%;}
#header nav {margin:25px 0 0 0;}
#header nav {float:right; padding:0;}
#header nav ul {padding:0; margin:0 -0px 0 0; line-height:0;}
#header nav ul li {padding:0; margin:0; list-style:none; display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline;}
#header nav ul li a {color:rgba(255, 255, 255, 0.7); font-size:18px; padding:10px; position:relative; -webkit-transition:0.2s; -o-transition:0.2s; transition:0.2s;}
#header nav ul li a i {line-height:0; font-size:20px; position:relative; top:3px;}
#header nav ul li a:after {content:""; position:absolute; height:2px; bottom:7px; left:10px; right:10px; background-color:#fff; visibility:hidden; -webkit-transform:scaleX(0); -moz-transform:scaleX(0); -ms-transform:scaleX(0); -o-transform:scaleX(0); transform:scaleX(0); -webkit-transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -moz-transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -ms-transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); -o-transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); transition:all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}
#header nav ul li a:hover {text-decoration:none; color:white;}
#header nav ul li a:hover:after {visibility:visible; -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -ms-transform:scaleX(1); -o-transform:scaleX(1); transform:scaleX(1);}
#header nav ul li a:active, #header nav ul li a:focus {outline:none; text-decoration:none;}
#header nav ul li.active a {text-decoration:none; color:white;}
#header nav ul li.active a:after {visibility:visible; -webkit-transform:scaleX(1); -moz-transform:scaleX(1); -ms-transform:scaleX(1); -o-transform:scaleX(1); transform:scaleX(1);}
@media screen and (max-width:768px){#header {margin:80px 0 0 0;}#header nav {display:none;}}

/* [5. Slider ] */
#hero {min-height:700px; background:#fff url(../../../assets/images/loader.gif) no-repeat center center;}
#hero .btn {font-size:16px;}
#hero .btn.btn-primary {padding:14px 30px !important;}
#hero .flexslider {border:none; z-index:1; margin-bottom:0;}
#hero .flexslider .slides {position:relative; overflow:hidden;}
#hero .flexslider .slides li {background-repeat:no-repeat; background-size:cover; background-position:center center; min-height:700px;}
#hero .flexslider .flex-control-nav {bottom:40px; z-index:1000;}
#hero .flexslider .flex-control-nav li a {background:rgba(255, 255, 255, 0.2); box-shadow:none; width:12px; height:12px; cursor:pointer;}
#hero .flexslider .flex-control-nav li a.flex-active {cursor:pointer; background:rgba(255, 255, 255, 0.7);}
#hero .flexslider .flex-direction-nav {display:none;}
#hero .flexslider .slider-text {display:table; opacity:0; min-height:700px;}
#hero .flexslider .slider-text > .slider-text-inner {display:table-cell; vertical-align:middle; min-height:700px;}
#hero .flexslider .slider-text > .slider-text-inner h2 {font-size:70px; font-weight:400; color:#fff;}
#hero .flexslider .slider-text > .slider-text-inner .lead {font-size:20px; color:#fff;}
#hero .flexslider .slider-text > .slider-text-inner .lead .icon-heart {color:#d9534f;}
#advantages, .services {background-color:#fff; padding:7em 0;}
.fav{color:#ECEFF8;}
.ico{color:#333333;}
@media screen and (max-width:768px){#hero .flexslider .slider-text > .slider-text-inner h2 {font-size:40px;}#advantages, .services {padding:3em 0;}}

/* [6. About ] */
#about .item-block, .services .item-block {margin-bottom:7em; float:left;}
#about .item-block .icon, .services .item-block .icon {display:block; margin-bottom:30px;}
#about .item-block .icon img, .services .item-block .icon img {max-width:inherit; height:90px; margin:0 auto;}
#about .item-block h3, .services .item-block h3 {font-size:20px; line-height:normal;}
#about .item-block p:last-child, .services .item-block p:last-child {margin-bottom:0;}
.heading {margin-bottom:20px;}
.heading h2 {margin-bottom:20px;}

/* [7. Section with Image ] */
.section-with-image {position:relative;}
.section-with-image .box {padding:50px; background:rgba(255, 255, 255, 0.9); position:absolute; z-index:1001; width:40%; right:10%; top:50%;}
.section-with-image h2 {font-size:50px; margin-bottom:20px;}
.section-with-image p {font-size:20px;}
.section-with-image p:last-child {margin-bottom:0;}
@media screen and (max-width:992px){.section-with-image .box {position:relative; right:auto; bottom:auto; width:100%; margin-top:auto !important;}}
@media screen and (max-width:768px){.section-with-image h2 {font-size:32px;}.section-with-image p {font-size:16px;}}
@media screen and (max-width:480px){.section-with-image .box {position:relative; right:auto; bottom:auto; width:100%; padding:15px;}}

/* [8. Testimonials ] */
#testimonial {background:#fff; padding:7em 0;}
#testimonial .item-block {margin-bottom:30px;}
#testimonial .item-block blockquote {margin-bottom:70px; position:relative; border-left:none; padding:20px 20px 20px 20px; background:#fff; float:left; width:100%; -webkit-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px; border-radius:10px; -webkit-box-shadow:0px 15px 95px 5px rgba(0, 0, 0, 0.06); -moz-box-shadow:0px 15px 95px 5px rgba(0, 0, 0, 0.06); -ms-box-shadow:0px 15px 95px 5px rgba(0, 0, 0, 0.06); -o-box-shadow:0px 15px 95px 5px rgba(0, 0, 0, 0.06); box-shadow:0px 15px 95px 5px rgba(0, 0, 0, 0.06);}
#testimonial .item-block blockquote p {font-size:18px; line-height:1.7; color:#000; margin-bottom:10px;}
#testimonial .item-block blockquote p:last-child {margin-bottom:0;}
#testimonial .item-block blockquote .author {color:#b3b3b3; font-size:16px;}
#testimonial .item-block blockquote .author cite {font-style:normal;}
#testimonial .item-block .icon {margin-top:7px;}
.googleplus-color {color:#dc4e41;}
.facebook-color {color:#3b5998;}
.twitter-color {color:#55acee;}
.about, .team, .contact {padding:7em 0;}
.count{font-size:40px;}
@media screen and (max-width:768px){#testimonial {padding:3em 0;}.about, .team,  .contact {padding:3em 0 10px 0;}}

/* [9. Contact ] */
.contact-info {margin-bottom:4em; padding:0;}
.contact-info li {list-style:none; margin:0 0 20px 0; position:relative; padding-left:40px;}
.contact-info li i {position:absolute; top:.3em; left:0; font-size:22px; color:#333333;}
.contact-info li a {color:#333333;}
#map {height:500px; width:100%;}
@media screen and (max-width:768px){#map {height:400px;}}
@media screen and (max-width:480px){#map {height:200px;}}

/* [10. Staff ] */
.staff img {margin-bottom:1em;}
.staff h3 {margin:0 0 10px 0;}
.staff h4 {margin:0 0 20px 0; font-weight:400; color:rgba(0, 0, 0, 0.4);}
.staff .social {text-align:center;}
.staff .social a {color:#000;}
#grid-products {background:#ecf1f5; padding:7em 0 0px 0; float:left; width:100%;}
@media screen and (max-width:768px){#grid-products {padding:3em 0 10px 0;}}

/* [11. Blog ] */
#blog {padding:7em 0; position:relative; clear:both; background:#f7f7f7;}
#blog .entry {margin-bottom:30px; float:left;}
#blog .entry figure {margin-bottom:0px; -webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
#blog .entry figure img {max-width:100%;}
#blog .entry .date {display:block; margin-bottom:15px; font-size:12px; text-transform:uppercase; letter-spacing:2px; font-weight:bold; color:#b3b3b3;}
#blog .entry .copy {padding:30px; background:#fff;}
#blog .entry h3 {margin-bottom:10px; line-height:1.5; color:#333333;}
#blog .entry p {color:#999999;}
#blog .entry p:last-child {margin-bottom:0;}
#blog .entry:hover figure {opacity:.9;}
#blog .entry:hover, #blog .entry:active, #blog .entry:focus {text-decoration:none !important;}
#blog .entry:hover p, #blog .entry:hover figure, #blog .entry:hover h3, #blog .entry:hover span, #blog .entry:active p, #blog .entry:active figure, #blog .entry:active h3, #blog .entry:active span, #blog .entry:focus p, #blog .entry:focus figure, #blog .entry:focus h3, #blog .entry:focus span {text-decoration:none !important;}
@media screen and (max-width:768px){#blog {padding:3em 0;}}

/* [12. Start Section ] */
.cta {background-repeat:no-repeat; background-size:cover; background-position:center center; background-attachment:fixed; padding:7em 0; position:relative;}
.cta .overlay {background:rgba(0, 0, 0, 0.7); left:0; right:0; bottom:0; top:0; position:absolute; z-index:1;}
.cta .container {position:relative; z-index:2;}
.cta p, .cta h3 {color:#fff;}
.cta p:last-child {margin-bottom:0;}
.cta .btn {color:#fff;}
@media screen and (max-width:768px){.cta {padding:3em 0;}}

/* [13. Footer ] */
#footer {padding:30px 0 0 0; float:left; width:100%; position:relative; background:#333333;}
#footer h2, #footer h3, #footer h4 {color:#fff;}
#footer h3 {text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:bold;}
#footer .btn {color:#fff;}
#footer .float {float:left; margin-right:10%;}
#footer ul {padding:0; margin:0;}
#footer ul li {padding:0; margin:0 0 10px 0; list-style:none;}
#footer a{color:rgba(255, 255, 255, 0.5); text-decoration:none !important;}
#footer p{color:rgba(255, 255, 255, 0.5); text-decoration:none !important;}
#footer a:hover {color:#fff;}
.copyright {padding:20px 0 0 0; clear:both;}
.copyright span {display:block;}
.copyright span {display:inline;}
#page {position:relative; z-index:2; background:#fff;}
@media screen and (max-width:768px){#footer {padding:3em 0;}}
@media screen and (max-width:480px){.copyright {text-align:left !important;}}

/* [14. Responsive Navigation ] */
#offcanvas, .nav-toggle, #page {-webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
#offcanvas, .nav-toggle, #page {position:relative;}
#page {z-index:2; -webkit-transition:0.5s; -o-transition:0.5s; transition:0.5s;}
.offcanvas-visible #page {-moz-transform:translateX(-275px); -webkit-transform:translateX(-275px); -ms-transform:translateX(-275px); -o-transform:translateX(-275px); transform:translateX(-275px);}
#offcanvas {display:none; height:100%; right:0; overflow-y:auto; position:fixed; z-index:1; top:0; width:275px; background:black; padding:30px;}
#offcanvas ul {padding:0; margin:0;}
#offcanvas ul li {padding:0; margin:0 0 10px 0; list-style:none; line-height:28px;}
#offcanvas ul li a {font-size:18px; color:rgba(255, 255, 255, 0.7); text-decoration:none !important;}
#offcanvas ul li a:hover {color:#333333;}
#offcanvas ul li.active a {color:#333333;}
#offcanvas ul li.cta {margin-left:0; margin-top:20px; display:block; float:left;}
#offcanvas ul li.cta a {padding-left:16px !important; padding-right:16px !important; padding-top:7px !important; padding-bottom:7px !important; border:2px solid rgba(255, 255, 255, 0.7); -webkit-border-radius:30px; -moz-border-radius:30px; -ms-border-radius:30px; border-radius:30px;}
#offcanvas ul li.cta a:hover {background:#fff; text-decoration:none;}
#offcanvas ul li.cta a:hover:after {display:none;}
.nav-toggle {cursor:pointer; text-decoration:none;}
.nav-toggle.active i::before, .nav-toggle.active i::after {background:#fff;}
.nav-toggle.dark.active i::before, .nav-toggle.dark.active i::after {background:#fff;}
.nav-toggle:hover, .nav-toggle:focus, .nav-toggle:active {outline:none; border-bottom:none !important;}
.nav-toggle i {position:relative; display:-moz-inline-stack; display:inline-block; zoom:1; width:30px; height:2px; color:#fff; font:bold 14px/.4 Helvetica; text-transform:uppercase; text-indent:-55px; background:#fff; transition:all .2s ease-out;}
.nav-toggle i::before, .nav-toggle i::after {content:''; width:30px; height:2px; background:#fff; position:absolute; left:0; -webkit-transition:0.2s; -o-transition:0.2s; transition:0.2s;}
.nav-toggle.dark i {position:relative; color:#000; background:#000; transition:all .2s ease-out;}
.nav-toggle.dark i::before, .nav-toggle.dark i::after {background:#000; -webkit-transition:0.2s; -o-transition:0.2s; transition:0.2s;}
.nav-toggle i::before {top:-7px;}
.nav-toggle i::after {bottom:-7px;}
.nav-toggle:hover i::before {top:-10px;}
.nav-toggle:hover i::after {bottom:-10px;}
.nav-toggle.active i {background:transparent;}
.nav-toggle.active i::before {top:0; -webkit-transform:rotateZ(45deg); -moz-transform:rotateZ(45deg); -ms-transform:rotateZ(45deg); -o-transform:rotateZ(45deg); transform:rotateZ(45deg);}
.nav-toggle.active i::after {bottom:0; -webkit-transform:rotateZ(-45deg); -moz-transform:rotateZ(-45deg); -ms-transform:rotateZ(-45deg); -o-transform:rotateZ(-45deg); transform:rotateZ(-45deg);}
.nav-toggle {position:fixed; top:40px; right:20px; z-index:9999; margin:0 auto; display:none; cursor:pointer;}
@media screen and (max-width:768px){#offcanvas {display:block;} .nav-toggle {display:block; top:20px;}.nav-toggle.dark{display:block; top:20px;}}

/* [15. Video-background ] */
.homepage-hero-module {border-right:none; border-left:none; position:relative;}
.video-container {position:relative; bottom:0%; left:0%; height:100%; width:100%; overflow:hidden; background:#000;}
.video-container .link {position:absolute; bottom:3em; width:100%; text-align:center; z-index:1001; font-size:2em; color:#fff;}
.video-container .link a {color:#fff;}
.video-container video {position:absolute; z-index:0; bottom:0;}
.video-container video.fillWidth {width:100%;}
.overlay{background-color:rgba(0,0,0,0.5);}
.underheading{font-size:18px; font-weight:400; line-height:1.5; color:#8f989f; position:relative; display:block; padding-bottom:30px;}
.heading{font-size:32px; font-weight:400; color:#333; text-transform:uppercase; position:relative; padding-bottom:10px; line-height:1.5; letter-spacing:2px;}