body {font-size: 14px; background: #f5f5f5}
p {font-family: 'Roboto', sans-serif; font-size: 14px}
a {text-decoration: none; outline: none;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;-ms-transition: all 0.2s linear}
a:hover {text-decoration: none;-moz-transition: all 0.2s linear;-webkit-transition: all 0.2s linear;-o-transition: all 0.2s linear;-ms-transition: all 0.2s linear}
a:focus {outline: none; text-decoration: none}
h1,h2,h3,h4,h5,h6 {font-family: 'Roboto Slab', serif}

ul li {list-style: none}
ul {padding: 0; margin: 0}

blockquote {border: none; padding: 0; margin: 0}

blockquote.about {position: relative;}
blockquote.about:before,
blockquote.about:after {content: "“"; font-size: 45px; font-family: Georgia; position: absolute; line-height: 1; color: #c4c4c4; font-weight: bold;}
blockquote.about:after { content: "”"; bottom: -0.5em; right: 0}
blockquote.about:before {left: 0; top:-30px}

blockquote.testi {position: relative;}
blockquote.testi:before,
blockquote.testi:after {content: "“"; font-size: 70px; font-family: Georgia; position: absolute; line-height: 1; color: #868f90; font-weight: bold;}
blockquote.testi:after { content: "”"; bottom: -0.9em; right: -50px}
blockquote.testi:before {left: -50px; top: -18px}


header {background: #000000	;}
.logo {float: left; margin: 15px 0}
.menu-wrapper {float: right; position: relative; z-index: 99999}

.menu-wrapper .navbar {margin: 0; padding: 20px 0}
.menu-wrapper .navbar-inner {background: none; border: none; border-radius: 0}
.menu-wrapper .navbar .btn-navbar {background: #F15E5E!important}
.menu-wrapper .navbar .brand {color: #fff; text-shadow: none; font-family: 'Roboto Slab', serif; font-weight: 400; float: right}
.nav-collapse .nav {background: #F15E5E; font-family: 'Roboto', sans-serif; font-weight: 300}
.navbar .nav > li > a {text-shadow: none; color: #fff;background: #F15E5E; border-radius: 0; font-weight: 400}
.nav-collapse .nav > li > a, .nav-collapse .dropdown-menu a {color: #fff; border-radius: 0; font-weight: 400;}


.nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover {color: #e54b4b; background: none}
.navbar .nav > li > a:hover {background: #e54b4b; color: #fff}
.navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {background: none; color: #e54b4b}
.nav-collapse .nav > li > a:hover, .nav-collapse .nav > li > a:focus, .nav-collapse .dropdown-menu a:hover, .nav-collapse .dropdown-menu a:focus {background: none}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {background: none; color: #e54b4b}
.navbar .nav > li > a:focus{color: #fff}
.nav-collapse .nav > li > a:hover, .nav-collapse .dropdown-menu a:hover {color: #e54b4b}
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus {background: none; color: #e54b4b!important}
.navbar .nav > li.dropdown > a.active {color: #e54b4b}



/*===========main========*/

.home-tile {margin-top: 60px; text-align: center; margin-bottom: 50px; padding-top: 40px; background: url(../img/bg-home-tile.png) no-repeat scroll top;}
.home-tile h2 {font-size: 30px; text-transform: uppercase;color: #333; margin: 15px 0; font-weight: 700}
.home-tile p {color: #666; font-weight: 300; font-size: 18px; line-height: 25px}

.page-tile {background: #e54b4b;}
.page-tile h1{ color: #fff; font-weight: 700; font-size: 48px; line-height: 90px; text-transform: uppercase;}
/*solution*/
.solution {text-align: center; margin-top: 60px}
.solution .span3 {margin-top: 40px}
.solution-icon {background: url(../img/icon.png) no-repeat scroll ; width: 87px; height: 96px; text-align: center; display: inline-block;

}
.solution .span3:hover .solution-icon {background-position: -87px 0;

}
.solution-icon i {color: #fff; font-size: 36px; display: inline-block; margin-top: 30px}
.solution h4 {color: #333; font-weight: 400; margin-top: 35px}
.solution p {color: #666; margin-top: 20px; font-weight: 300}
.solution a {background: #fff; padding: 10px 20px; color: #333; margin-top: 28px; display: inline-block; margin-top: 18px}
.solution a:hover {background: #e54b4b; color: #fff}

/*pricing table*/
.pricing {text-align: center;}


.pricing ul.wrapper {margin-top: 80px}
.pricing ul.wrapper li{display: inline; float: left}

.pricing ul.table:hover {margin-top:-27px;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;}

.pricing ul.table li.top {background: #EF3A3A; font-family: 'Roboto Slab', serif; font-size: 18px; text-transform: uppercase; font-weight: 700}
.pricing ul.table {width: 300px; text-align: center; color: #fff;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.pricing ul.table li {display: block; float: none; padding: 20px; background: #222; border-bottom: 1px solid #2e2e2e; font-family: 'Roboto', sans-serif; font-weight: 300}
.pricing ul.table li.price {font-size: 30px; font-weight: 400}
.pricing ul.table li.price span {font-size: 18px}
.pricing ul.table li.bot {padding: 30px 50px}
.pricing ul.table li.bot a {background: #e54b4b;display: inline-block; padding: 10px 60px; color: #fff}
.pricing ul.table li.bot a:hover {background: #000}

.pricing ul.wrapper li.mid {margin: -27px 20px 0 20px} 
.pricing ul.wrapper li.mid ul.table li {background: #e54b4b; border-bottom: 1px solid #e96666}
.pricing ul.wrapper li.mid ul.table li.top {background: #c84343}
.pricing ul.wrapper li.mid ul.table li.bot a {background: #222}
.pricing ul.wrapper li.mid ul.table li.bot a:hover {background: #000}

/*features*/
.features .item {margin-bottom: 35px}
.features i {background: url(../img/icon.png) no-repeat scroll 0 -107px; color: #fff; font-size: 18px; padding-top:14px; display: inline-block; margin-right: 5px; width: 44px; height: 34px; text-align: center;

}
.features .item:hover i{background-position: -44px -107px;

}
.features h4 {color: #333; font-family: 'Roboto Slab', serif; font-weight: 400; text-transform: capitalize; display: inline;}
.features p{margin-top: 5px; color: #666; font-weight: 300}
.feature-btn-group {text-align: center; margin-top: 2px; margin-bottom: 70px}
.feature-btn-group input {background: #333; border: none; font-size: 14px; text-transform: uppercase; font-weight: 500; color: #fff; font-family: 'Roboto', sans-serif; padding: 15px 40px;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.feature-btn-group input:hover {background: #e54b4b;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.feature-btn-group input.left {margin-right: 18px}

/*Testimonial*/
.home-testi {text-align: center; background: url(../img/bg-testi.html) no-repeat; padding: 50px 0 60px; overflow: hidden;}
.home-testi h2{color: #fff; font-size: 30px; text-transform: uppercase; font-weight: 700}
.home-testi p{font-weight: 300; color: #fff; font-size: 18px; margin: 35px 0; line-height: 30px}
.home-testi span{display: block; color: #fff; font-weight: 300}
.home-testi a{display: block; color: #fff; font-family: 'Roboto Slab', serif; text-transform: capitalize; margin: 15px 0; font-weight: 400}

/*Contact Page*/
.contact-page {margin-top: 30px}
.contact-page h2{font-size: 24px; color: #333; font-weight: 300; text-transform: capitalize;}
.contact-page p {margin: 20px 0; font-weight: 300; color: #666}
.contact-page .contact {width: 60%; margin-top: 15px; display: inline-block;}
.contact-page .contact label {font-size: 12px; color: #333; font-weight: 300; font-family: 'Roboto', sans-serif; margin-bottom: 10px}
.contact-page .contact input {border-radius: 0; border: 1px solid #e5e5e5; box-shadow: none; height: 38px}
.contact-page .contact textarea {border-radius: 0; border: 1px solid #e5e5e5; box-shadow: none}
.contact-page .contact input:focus,
.contact-page .contact textarea:focus {border: 1px solid #e54b4b}
.contact-page .contact .btn-large {height: auto; margin-top: 20px; border: none!important}

.btn-large {background: #333; color: #fff; text-transform: uppercase; padding: 10px 80px; height: auto; font-family: 'Roboto', sans-serif; font-weight: 400;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.btn-large:hover {background: #e54b4b;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.btn-med {
background: #e54b4b; color: #fff; padding: 10px 25px; font-family: 'Roboto', sans-serif; font-weight: 300; border: none;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.btn-med:hover {background: #333;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

.map{margin-top: 40px; position: relative;}
#map-canvas {height: 383px}
.map .map-info {background: #fff; padding: 10px 30px 20px; width: 280px; position: absolute; top:60px;}
.map .map-info h4{text-transform: uppercase; color: #333; font-weight: 700;}
.map .map-info p{color: #666; font-weight: 300; margin: 15px 0 20px; line-height: 25px}
.map .map-info ul li {color: #666; font-weight: 300;font-family: 'Roboto', sans-serif; margin-bottom: 10px}
.map .map-info ul li i {color: #333; margin-right: 10px}

/*404 Page*/
.oop {max-width: 940px; width: 100%; margin: 0 auto; text-align: center; margin-top: 100px}
.oop .oop-txt {font-family: 'Roboto', sans-serif; font-size: 240px; font-weight: 700; color: #333; margin: 100px 0 150px; display: inline-block;}

.oop p {text-transform: uppercase;color: #666; font-weight: 400; font-size: 18px; margin-bottom: 40px}
.oop .btn-med {cursor: pointer}

/*About Page*/
#about {margin-top: 70px}
#about .header-image {margin-bottom: 20px}
#about h3 {font-size: 24px; color: #333; font-weight: 300}
#about p {font-weight: 300; color: #666; line-height: 25px; font-size: 14px}
#about .top-content,
#about .mid-content {background: url(../img/bg-home-tile.png) no-repeat scroll bottom; padding-bottom: 50px} 
#about .bot-content {margin-bottom: 60px;}
#about .staff .item {text-align: center; margin-top: 50px}
#about .staff .item .name {display: block; font-size: 18px; font-family: 'Roboto Slab', serif; font-weight: 300; color: #333; margin-top: 40px; margin-bottom: 20px}
#about .staff .item .name:hover {color: #e54b4b}
#about .staff .item span {display: block;color: #999; font-weight: 300;font-family: 'Roboto', sans-serif; margin-bottom: 10px}
#about .staff .item p{font-weight: 300; margin-bottom: 20px}
#about .staff .item ul li {display: inline; margin: 2px; text-align: center;}
#about .staff .item ul li a{font-size: 18px; color: #ddd; background: url(../img/icon.png) no-repeat scroll 0 -162px; width: 35px; height: 38px; display: inline-block;
 -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
#about .staff .item ul li a:hover {background-position: -35px -162px;
 -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s;
}
#about .staff .item ul li a i {margin-top: 10px; display: inline-block;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
#about .staff .item ul li a:hover i {color: #fff;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}

#about .bot-content i{color: #c4c4c4; font-size: 18px; margin-top: 5px; display: inline-block;}
#about .bot-content p {margin-top: 50px; font-weight: 300}
#about .bot-content p i {float: right;}
#about .bot-content h4 {font-size: 14px; color: #000; font-weight: 400; margin-top: 20px; margin-bottom: 5px}
#about .bot-content span {font-family: 'Roboto', sans-serif; font-weight: 300; color: #999}

/*Blog List Page*/
#blog-list img.header-image{margin-top: 50px}
.post-info {margin-top: 27px}
.post-info img {margin-right: 20px}
.post-info h3 {text-transform: uppercase; font-size: 24px; color: #333; font-weight: 400; margin: 5px 0}
.post-info p{font-weight: 300; color: #999; font-size: 12px}
.post-info span, .post-info a{color: #333}
.post-info a:hover {color: #e54b4b}
#blog-list p.desc {margin-top: 15px; font-weight: 300; color: #666; margin-bottom: 50px}
#blog-list .btn-med {background: #333; font-size: 400; font-size: 12px; padding: 10px 20px}
#blog-list .btn-med:hover {background: #e54b4b; color: #fff}
#blog-list .post-item {border-bottom: 1px solid #ddd; padding-bottom: 55px}

.pagination {margin: 30px 0 60px}
.pagination ul {box-shadow: none;}
.pagination ul > li > a, .pagination ul > li > span {background: #e54b4b; border: none; border-right: 1px solid #fff; color: #fff;font-family: 'Roboto', sans-serif; font-weight: 300; padding: 6px 13px}
.pagination ul > li > a:hover, .pagination ul > li > a:focus, .pagination ul > .active > a, .pagination ul > .active > span {background: #333; color: #fff}

.pagination ul > li:hover > a, .pagination ul > li:hover > span {background: #333}
.pagination ul > li:first-child > a, .pagination ul > li:first-child > span,
.pagination ul > li:last-child > a, .pagination ul > li:last-child > span {border-radius: 0; box-shadow: none}

/*Sidebar*/
.sidebar {margin-top: 50px}
.sidebar .block {background: #fff; padding: 17px; margin-bottom: 20px}
.sidebar .black {background: #222}
.sidebar .block a{display: inline-block; font-family: 'Roboto', sans-serif; font-size: 12px; color: #333; font-weight: 300}
.sidebar .block ul li:hover a {color: #e54b4b}
.sidebar .block ul li {border-bottom: 1px solid #eee; padding: 15px 0; }
.sidebar .block ul li.last {border: none; padding-bottom: 10px}
.sidebar .block h4{color: #333; font-size: 14px; font-weight: 700; text-transform: uppercase;}

.sidebar .black a {color: #999}
.sidebar .black ul li {border-bottom: 1px solid #333}
.sidebar .black h4 {color: #fff}

.sidebar .nav-tabs {border:none; margin-bottom: 0}
.sidebar .block .nav-tabs li {border: none}
.sidebar .nav-tabs li a{border: none; border-radius: 0; font-family: 'Roboto Slab', serif; font-size: 12px; font-weight: 700; text-transform: uppercase; color: #999; padding: 7px 15px}
.sidebar .nav-tabs li a:hover,
.sidebar .nav-tabs li.active a{background: #333; border: none; color: #fff!important}
.sidebar .tab-content li a{float: left; display: inline; font-size: 12px; color: #333; font-weight: 500}
.sidebar .tab-content li span {color: #999; font-weight: 300; font-size: 12px; margin-top: 3px; display: inline-block; display: block;}
.sidebar .tab-content li .block-li-content {max-width: 165px; padding-left: 15px; display: inline; float: left; width: 100%}

/*Blog Entry*/
#blog-entry {margin-top: 50px}
#blog-entry .entry-content {margin-top: 20px}
#blog-entry .entry-content p{font-weight: 300; color: #666; line-height: 25px}
#blog-entry .entry-content blockquote {margin: 50px 0 0 0}
#blog-entry .entry-content blockquote p{font-weight: 500; font-style: italic; font-size: 14px}
#blog-entry .pagi {margin: 30px 0 40px 0; padding-bottom: 30px; border-bottom: 1px solid #ddd}
#blog-entry .pagi a{color: #333; font-weight: 300; font-style: italic; font-family: 'Roboto', sans-serif}
#blog-entry .pagi a:hover {color: #e54b4b}

#blog-entry .comment {margin-bottom: 50px}
#blog-entry .comment h2 {font-weight: 400; color: #333; text-transform: uppercase; font-size: 24px; margin-bottom: 20px}
#blog-entry .comment input{height: 38px; margin-bottom: 20px; border: 1px solid #ddd;border-radius: 0; box-shadow: none; font-size: 12px}
#blog-entry .comment textarea:focus,
#blog-entry .comment input:focus {border: 1px solid #e54b4b}
#blog-entry .comment textarea {border: 1px solid #ddd; border-radius: 0; box-shadow: none; font-size: 12px; height: 154px}
#blog-entry .comment .btn-large {padding: 10px 50px}

/*slider*/
#sequence .controls {background: none}
.sequence-next, .sequence-prev, .sequence-pause {display: none!important}
.slider-wrapper:hover .sequence-next,
.slider-wrapper:hover .sequence-prev {display: block!important}

.sequence-next,
.sequence-prev {
  color: white;
  cursor: pointer;
  display: none;
  font-weight: 700;
  padding: 20px 27px;
  position: absolute;
  top: 50%;
  z-index: 1000;
  margin-top: -47.5px;
}
.sequence-prev {
  left: 0;
}

.sequence-next {
  right: 0;
}

.sequence-prev img,
.sequence-next img {
  height: 100%;
  width: auto;
}

.sequence-next,
.sequence-prev {
  position: absolute;
  opacity: 0.6;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  background: #000; font-size: 48px; color: #fff
}

.sequence-next:hover,
.sequence-prev:hover {
  opacity: 1;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -ms-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}



/*Portfolio*/
.portfolio #mix {width: 100%;
  text-align: justify;}

  .portfolio #mix:after {
content: '';
  display: inline-block;
  width: 100%;

  }
.mix{opacity: 0;display: none;}
.portfolio {margin: 80px 0 40px 0}
.portfolio h3 {text-align: center; font-weight: 700; color: #333; font-size: 30px; text-transform: uppercase;}
.portfolio p.top {font-size: 18px; font-weight: 300; font-family: 'Roboto', sans-serif; color: #666; text-align: center; margin: 35px 0}

.portfolio-3col ul.mix-item li {width: 300px}
.portfolio-4col ul.mix-item li.mix {width: 24%}
.portfolio-2col ul.mix-item li.mix {width: 49%}

.portfolio-2col ul.mix-item li.mix img {width: 100%}

.portfolio-4col ul .gap {width: 24%; display: inline-block;}
.portfolio-2col ul .gap {width: 49%; display: inline-block;}

.break {
width: 100%;
height: 0;
margin: 0;}
.ib {display: inline-block;}
.portfolio-4col ul .gap {display: inline-block;}

.portfolio .controls  {margin: 55px 0}
.portfolio .controls ul {text-align: center;}
.portfolio .controls li{cursor: pointer; background: #fff; padding: 10px; display: inline; margin-right: 10px; color: #333;
font-family: 'Roboto Slab', serif; text-transform: uppercase; font-weight: 700;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.portfolio .controls li.active,
.portfolio .controls li:hover {background: #e54b4b; color: #fff;
-webkit-transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -ms-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  transition-duration: 0.4s;
}
.portfolio li.mix {margin-bottom: 30px;}
.portfolio li.mix .img {position: relative; overflow: hidden;}
.portfolio li.mix .img img {width: 100%}
.portfolio li.mix:hover .mix-content {background: #fff}
.portfolio li.mix:hover .mix-content h5 a{color: #e54b4b}
.portfolio .mix-content {text-align: center; padding: 15px; height: 50px; overflow: hidden;}
.portfolio .portfolio-4col .mix-content {padding: 10px}
.portfolio .portfolio-2col .mix-content {padding: 20px; height: 100px}

.portfolio .mix-content h5 {margin: 0}
.portfolio .mix-content h5 a{margin: 0 0 10px 0; font-weight: 400; color: #333; display: inline-block;}
.portfolio .portfolio-2col .mix-content h5 a {font-size: 18px}
.portfolio .mix-content p {color: #666; font-weight: 300; font-family: 'Roboto', sans-serif; margin: 0;}
.portfolio .portfolio-2col .mix-content p {font-size: 18px}

.portfolio .mix .mask {position: absolute;top: 0; left: 0; width: 100%; height: 100%;}
.portfolio .mix .mask a.image-link {width: 0px; position: absolute; left: 0; top:0; visibility: hidden;
height: 0px;
border-style: solid;
border-width: 110px 110px 0 0;
border-color: rgb(229, 75, 75) transparent transparent transparent;
border-color: rgba(229, 75, 75, 0.8) transparent transparent transparent;
}
.portfolio .portfolio-4col .mix .mask a.image-link {border-width: 82px 82px 0 0;}
.portfolio .portfolio-2col .mix .mask a.image-link {border-width: 167px 167px 0 0}

.portfolio .mix .mask a.ex {
width: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 110px 110px;
border-color: transparent transparent rgb(229, 75, 75) transparent;
border-color: transparent transparent rgba(229, 75, 75, 0.8) transparent;
position: absolute;
right: 0; bottom: 0; visibility: hidden;
}
.portfolio .portfolio-4col .mix .mask a.ex {border-width: 0 0 82px 82px;}
.portfolio .portfolio-2col .mix .mask a.ex {border-width:0 0 167px 167px}

.portfolio .mix .mask:hover a.image-link {top:0; bottom: auto; margin:0; visibility: visible;

}
.portfolio .mix .mask:hover a.ex {top: auto; bottom: 0; visibility: visible;

}

.portfolio .mix .mask a.image-link i{color: #fff; position: absolute; left: 24px; top: -83px}
.portfolio .portfolio-4col .mix .mask a.image-link i {left: 15px; top: -67px;}
.portfolio .portfolio-2col .mix .mask a.image-link i {font-size: 20px; left: 39px; top: -130px;}

.portfolio .mix .mask a i.icon-link {color: #fff;position: absolute; right: 24px; top: 75px}
.portfolio .portfolio-4col .mix .mask a i.icon-link {right: 15px; top: 54px}
.portfolio .portfolio-2col .mix .mask a i.icon-link {font-size: 20px; right: 38px; top: 110px}


/*Zoom*/
.mfp-with-zoom .mfp-container,
.mfp-with-zoom.mfp-bg {
  opacity: 0;
  -webkit-backface-visibility: hidden;
  /* ideally, transition speed should match zoom duration */
  -webkit-transition: all 0.3s ease-out; 
  -moz-transition: all 0.3s ease-out; 
  -o-transition: all 0.3s ease-out; 
  transition: all 0.3s ease-out;
}

.mfp-with-zoom.mfp-ready .mfp-container {
    opacity: 1;

}
.mfp-with-zoom.mfp-ready.mfp-bg {
    opacity: 0.8;
}

.mfp-with-zoom.mfp-removing .mfp-container, 
.mfp-with-zoom.mfp-removing.mfp-bg {
  opacity: 0;
}

/*Flex slider*/
.flexslider {background: none; border: none; box-shadow: none; margin: 0}
.flexslider .slides img {width: auto; display: inline-block;}
.flex-direction-nav a {background: none; text-indent: inherit;
height: auto; width: auto; margin: -40px 0 0!important; color: #fff
}
.flex-direction-nav a.pgl { padding: 20px 27px; background: rgba(0, 0, 0, 0.5); font-weight: 700; font-size: 48px; margin-left: 0;margin-right: 0}
.flexslider:hover .flex-next {opacity: 0.8; right: 0;}
.flexslider:hover .flex-prev {opacity: 0.8; left: 0}

/*=========================Footer=============================*/
footer {background: #222; padding-top: 45px}
footer h4 {color: #fff; text-transform: uppercase; font-weight: 400; line-height: 45px}
footer p,
footer a{color: #999; font-size: 12px; margin-bottom: 10px}
footer a {display: inline-block;}
footer a:hover{color: #e54b4b; margin-left: 5px}
footer .footer-col {padding-bottom: 25px; border-bottom: 1px solid #333}
footer .mail-form {position: relative;}
footer .mail-form input {border-radius: 0; border: none; height: 26px;}
footer .mail-form input.btn-mail,
 footer .mail-form i{position: absolute; top:0; left: 183px; width: 34px; height: 34px; background: transparent;; z-index: 99}
 footer .mail-form i {z-index: 98; font-size: 20px; text-align: center; color: #999; top: 7px}
footer .mail-form input.txt-mail {width: 205px}

footer .address {padding: 30px 0}
footer .address p{color: #666; margin-bottom: 5px}
footer .address a{margin: 0; }

footer .address .social li{display: inline; float: left; background: url(../img/icon.png) no-repeat scroll -88px -107px; width: 44px; height: 48px; margin-left: 8px; text-align: center;}
footer .address .social li:hover {background-position: -44px -107px}
footer .address .social li a {color: #333; font-size: 18px; margin-top: 13px}
footer .address .social li:hover a {color: #fff}





@media only screen and (max-width: 515px) {
.pricing ul.table {width: 100%}
.pricing ul.table li {padding: 20px 10px}
.pricing ul.table li.bot {padding: 30px 45px}
.oop .oop-txt {font-size: 120px}
}

@media only screen and (max-width: 515px) {
.feature-btn-group input.left {margin: 0 0 20px 0}
.portfolio-2col ul.mix-item li.mix {width: 100%; display: block;}
.portfolio-4col ul.mix-item li.mix {width: 100%!important}
}

@media only screen and (max-width: 640px) {
footer .address .pull-right,footer .address .pull-left {float: none}
footer .address {text-align: center;}
footer .address .social li {float: none; display: inline-block;}
footer .address .social {margin-top: 20px}
.portfolio .controls li {display: block;}

.portfolio-4col ul.mix-item li.mix {width: 50%}
.portfolio #mix {text-align: center;}
.portfolio-4col ul .gap {display: none}

.flex-direction-nav a.pgl {padding: 10px 15px;}
}


@media only screen and (max-width: 767px) {
.pricing ul.wrapper li.mid {margin: 20px 0; float: none!important}
.pricing ul.wrapper li {float: none}
.pricing ul.wrapper {text-align: center; display: inline-block;}
}


@media only screen and (max-width: 767px) {
header, footer,.page-tile, .map {position: relative; left: 20px; margin-left: -40px; padding: 0 20px}
.home-testi {position: relative; left: 20px; margin-left: -40px; padding-left: 20px; padding-right: 20px}
.slider-wrapper {position: relative; left: 20px; margin-left: -40px}
}

@media only screen and (max-width: 801px) {
.subtitle, .slide-btn-group {display: none;}
.title {margin: 0; bottom: 0; padding: 20px; background: rgb(0, 0, 0); background: rgba(0, 0, 0, 0.6); font-size: 24px; text-align: left;}
#sequence {height: 315px}
.sequence-next, .sequence-prev {font-size: 24px; padding: 10px 15px}

.menu-wrapper {width: 80%;}
}

@media only screen and (max-width: 985px) {
.pricing ul.wrapper li.mid {float: right; margin-right: 0; margin-top: 0}
.slide-btn-group input {padding: 5px 20px; font-size: 12px}
blockquote.testi:before,
blockquote.testi:after {color: transparent;}
}
@media only screen and (min-width: 785px) and (max-width: 996px) {
.sidebar .tab-content li .block-li-content {width: 95px}
footer .mail-form input.txt-mail {width: 154px}
footer .mail-form input.btn-mail, footer .mail-form i {left: 132px}
}