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

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

/*------------------------------------------------------------------
[1. Font ]
*/
@font-face {  font-family: 'icomoon';  src: url("../fonts/icomoon/icomoon.eot?srf3rx");  src: url("../fonts/icomoon/icomoon.eot?srf3rx#iefix") format("embedded-opentype"), url("../fonts/icomoon/icomoon.ttf?srf3rx") format("truetype"), url("../fonts/icomoon/icomoon.woff?srf3rx") format("woff"), url("../fonts/icomoon/icomoon.svg?srf3rx#icomoon") format("svg");  font-weight: normal;  font-style: normal;}

a {  color: #333333;  -webkit-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

a:hover, a:active, a:focus {  color: #333333;  outline: none;}
#footer a.blue-link {color:#1E90FF}
#footer a.blue-link:hover {color:#fff}
p {  margin-bottom: 30px;}

.doc{font-size: 25px;font-style: italic;font-weight: 500;}

h1, h2, h3, h4, h5, h6, figure {  color: #000;  font-family: "Open Sans", Arial, sans-serif;  font-weight: 400;  margin: 0 0 30px 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;  padding: 0;  margin: 0;  padding: 2px;  display: -moz-inline-stack;  display: inline-block;  zoom: 1;  *display: inline;  -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 ]
*/

#header {  position: absolute;  z-index: 1001;  width: 100%;  margin: 40px 0 0 0;}

@media screen and (max-width: 768px) {  #header {    margin: 0px 0 0 0;  }

}

#header .header-inner {  height: 80px;  padding-left: 20px;  padding-right: 20px;  float: left;  width: 100%;  -webkit-border-radius: 7px;  -moz-border-radius: 7px;  -ms-border-radius: 7px;  border-radius: 7px;}
#header h1 {  float: left;  padding: 0;  font-weight: 700;  line-height: 0;  font-size: 30px;}
#header h1 a {  color: white;}
#header h1 a > span {  color: #00B906;}
#header h1 a:hover, #header h1 a:active, #header h1 a:focus {  text-decoration: none;  outline: none;}
#header h1, #header nav {  margin: 38px 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.cta {  margin-left: 20px;}
#header nav 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;}
#header nav ul li.cta a:hover {  background: #fff;  color: #888888;}
#header nav ul li.cta a:hover:after {  display: 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);}

.nav-sticky#header {position: sticky; top: 0;}
.nav-sticky#header nav ul li a {color: rgba(0, 0, 0, 0.7);} 
.nav-sticky#header nav ul li a:after {background-color: #000; }
.nav-sticky#header nav ul li a:hover {  text-decoration: none;  color: rgb(59, 15, 15);}
.nav-sticky#header nav ul li.active a {  text-decoration: none;  color: #000;}

@media screen and (max-width: 768px) {  
  #header nav {    display: none;  }
  .nav-sticky#header {position: absolute; top: initial;}
}

/*------------------------------------------------------------------
[5. Slider ]
*/

#hero {  min-height: 700px;  background: #fff url(../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;}

@media screen and (max-width: 768px) {  #hero .flexslider .slider-text > .slider-text-inner h2 {    font-size: 40px;  }

}

#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;}

@media screen and (max-width: 768px) {  #advantages, .services {    padding: 3em 0;  }

}

.fav{color: #ECEFF8;}

.ico{color: #333333;}

/*------------------------------------------------------------------
[6. Advantages ]
*/

#advantages .item-block, .services .item-block {  margin-bottom: 7em;  float: left;}

#advantages .item-block .icon, .services .item-block .icon {  display: block;  margin-bottom: 30px;}

#advantages .item-block .icon img, .services .item-block .icon img {  max-width: inherit;  height: 90px;  margin: 0 auto;}

#advantages .item-block h3, .services .item-block h3 {  font-size: 20px;}

#advantages .item-block p:last-child, .services .item-block p:last-child {  margin-bottom: 0;}

.heading {  margin-bottom: 30px;}

.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%;}

@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: 480px) {  .section-with-image .box {    position: relative;    right: auto;    bottom: auto;    width: 100%;    padding: 15px;  }

}

.section-with-image h2 {  font-size: 50px;  margin-bottom: 20px;}

@media screen and (max-width: 768px) {  .section-with-image h2 {    font-size: 32px;  }

}

.section-with-image p {  font-size: 20px;}

@media screen and (max-width: 768px) {  .section-with-image p {    font-size: 16px;  }

}

.section-with-image p:last-child {  margin-bottom: 0;}

/*------------------------------------------------------------------
[8. Testimonials ]
*/

#testimonial {  background: #fff;  padding: 7em 0;}

@media screen and (max-width: 768px) {  #testimonial {    padding: 3em 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) {  .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. Portfolio ]
*/

#grid-products .v-align {  display: table;  height: 100%;  width: 100%;  background: rgba(0, 0, 0, 0.1);  position: relative;  -webkit-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

#grid-products .v-align .v-align-middle {  display: table-cell;  vertical-align: middle;  text-align: center;}

#grid-products .v-align .v-align-middle h3 {  color: white;  margin-bottom: 10px;  font-size: 24px;}

#grid-products .v-align .v-align-middle h5 {  color: rgba(255, 255, 255, 0.8);  font-size: 16px;}

#grid-products .col-1, #grid-products .col-2 {  float: left;  width: 50%;}

@media screen and (max-width: 768px) {  #grid-products .col-1, #grid-products .col-2 {    width: 100%;  }

}

#grid-products .col-1 {  border-right: 5px solid #ecf1f5;}

@media screen and (max-width: 768px) {  #grid-products .col-1 {    border-right: none;  }

}

#grid-products .col-1.reverse {  float: right !important;  border-right: none !important;  border-left: 5px solid #ecf1f5;}

@media screen and (max-width: 768px) {  #grid-products .col-1.reverse {    border-left: none;  }

}

#grid-products .col-2 {  float: right;  border-left: 5px solid #ecf1f5;}

@media screen and (max-width: 768px) {  #grid-products .col-2 {    border-left: none;  }

}

#grid-products .col-2.reverse {  float: left !important;  border-left: none !important;  border-right: 5px solid #ecf1f5;}

@media screen and (max-width: 768px) {  #grid-products .col-2.reverse {    border-right: none;  }

}

#grid-products .item-grid {  width: 100%;  float: left;  background-size: cover;  background-position: center center;  text-decoration: none;  border-bottom: 10px solid #ecf1f5;}

#grid-products .item-grid .icon {  -webkit-transition: 0.5s;  -o-transition: 0.5s;  transition: 0.5s;}

#grid-products .item-grid .title, #grid-products .item-grid .icon, #grid-products .item-grid .category {  top: 50px;  position: relative;  opacity: 0;  visibility: hidden;}

#grid-products .item-grid .title {  -webkit-transition: 0.8s;  -o-transition: 0.8s;  transition: 0.8s;}

#grid-products .item-grid .category {  -webkit-transition: 0.8s;  -o-transition: 0.8s;  transition: 0.8s;}

#grid-products .item-grid:hover {  text-decoration: none !important;}

#grid-products .item-grid:hover .icon, #grid-products .item-grid:hover .title, #grid-products .item-grid:hover .category {  top: 0;  opacity: 1;  visibility: visible;}

#grid-products .item-grid:hover .v-align {  background: rgba(0, 0, 0, 0.4);}

#grid-products .item-grid .icon {  display: block;  background: #ECEFF8;  width: 90px;  height: 90px;  margin: 0 auto 30px auto;  padding-top: 19px;  -webkit-border-radius: 50%;  -moz-border-radius: 50%;  -ms-border-radius: 50%;  border-radius: 50%;}

#grid-products .item-grid .icon img {  max-width: inherit;  height: 50px;  margin: 0 auto;}

#grid-products .one, #grid-products .three {  height: 450px;}

@media screen and (max-width: 768px) {  #grid-products .one, #grid-products .three {    height: 450px;  }

}

#grid-products .two {  height: 900px;}

@media screen and (max-width: 768px) {  #grid-products .two {    height: 450px;    border-top: 5px solid #ecf1f5;    background-position: center;  }

}

#grid-products .one {  border-bottom: 5px solid #ecf1f5;}

#grid-products .three {  border-top: 5px solid #ecf1f5;}

@media screen and (max-width: 768px) {  #grid-products .three {    border-bottom: 5px solid #ecf1f5;  }

}

/*------------------------------------------------------------------
[12. Blog ]
*/

#blog {  padding: 7em 0;  position: relative;  clear: both;  background: #f7f7f7;}

@media screen and (max-width: 768px) {  #blog {    padding: 3em 0;  }

}

#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;}

/*------------------------------------------------------------------
[13. Start Section ]
*/
.cta {  background-repeat: no-repeat;  background-size: cover;  background-position: center center;  background-attachment: fixed;  padding: 7em 0;  position: relative;}

@media screen and (max-width: 768px) {  .cta {    padding: 3em 0;  }

}

.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;}

#footer {  padding: 7em 0;  float: left;  width: 100%;  position: relative;  background: #333333;}

@media screen and (max-width: 768px) {  #footer {    padding: 3em 0;  }

}

/*------------------------------------------------------------------
[14. Footer ]
*/

#footer h2, #footer h3, #footer h4 {  color: #fff;}

#footer h3 {  text-transform: uppercase;  letter-spacing: 2px;  font-size: 12px;  font-weight: bold;}

#footer [class*="col"] {  padding-bottom: 30px;}

#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 {  border-top: 1px solid rgba(255, 255, 255, 0.1);  clear: both;  margin-top: 40px !important;  padding: 40px 0 0 0;}

.copyright span {  display: block;}

@media screen and (max-width: 480px) {  .copyright {    text-align: left !important;  }

  .copyright span {    display: inline;  }

}

#page {  position: relative;  z-index: 2;  background: #fff;}

/*------------------------------------------------------------------
[15. 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;}

@media screen and (max-width: 768px) {  #offcanvas {    display: block;  }

} 

#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;  *display: inline;  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;  display: block;  margin: 0 auto;  display: none;  cursor: pointer;}

@media screen and (max-width: 768px) {  .nav-toggle {    display: block;    top: 20px;  }

}

/*------------------------------------------------------------------
[16. Pricing ]
*/

.pricing {  padding: 7em 0;  background: #f7f7f7;}

@media screen and (max-width: 768px) {  .pricing {    padding: 3em 0;  }

}

.pricing .pricing {padding: 0 !important;display: block;  float: left;}

.pricing .price-box {  text-align: center;  padding: 30px;  background: #fff;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  -ms-border-radius: 5px;  border-radius: 5px;  margin-bottom: 40px;  position: relative;}

.pricing .price-box.popular .btn-select-plan {  background: #333333;}

.pricing .price-box.popular .price {  color: #333333;}

.pricing .price-box .btn-select-plan {  padding: 10px 20px;  background: #5bc0de;  color: #fff;}

.pricing .pricing-plan {  margin: 0 0 50px 0;  padding: 0;  font-size: 13px;  letter-spacing: 2px;  text-transform: uppercase;  font-weight: 700;  color: #888f94;}

.pricing .pricing-plan.pricing-plan-offer {  margin-bottom: 24px;}

.pricing .pricing-plan span {  display: block;  margin-top: 10px;  margin-bottom: 0;  color: #d5d8db;}

.pricing .price {font-size: 72px;color: #6d6d6d;line-height: 50px;}

.pricing .price .currency {font-size: 30px;top: -0.9em;padding-right: 10px;}

.pricing .price small { font-size: 13px;display: block;text-transform: uppercase;color: #888f94;}

.js .animate-box {opacity: 0;}

.img-responsive {margin: 0 auto;}

.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;}

.overlay {background: rgba(0, 0, 0, 0.5);  left: 0;  right: 0;  bottom: 0;  top: 0;  position: absolute;  z-index: 0;}