/* 
Table of Content:

1. Color References
2. Reset & General Styles Import
3. PreLoader CSS
4. Header Styles
5. Hero Section, Static, Slider, Video 
6. Skills Styles
7. Services Styles
8. Portfolio Styles
9. Testimonial Styles
10. Team Styles
11. Plans Styles
12. Blog Styles
13. Contact Styles
14. Map Styles
15. Footer Styles
16. Media Query for Responsive Design
*/


/*########## 1. Color References ############*/

/* 
Selected Menu, Skill Bar, Button, Services Icon Background, Plans Color
#EB215D

Button Hover Color
#D61C53

Sticky Header Background, Skill Bar Background, Plans Background, Footer Background Color
#1B1A1C

Sections with White Background Heading Color
#333333

Sections Subtitle Paragraph Color
#B5B5B5

Portfolio Hover Main Background Color
rgba(248, 33, 93, 0.6)

Portfolio Hover Bottom Background Color
rgba(29, 31, 38, 0.9)

Plans Card Background Color
#1f1f1f

Plans Card Hover Background Color
#151314

Team Picture Hover Background Color
rgba(0, 0, 0, 0.4)

Team Name and Position Color
#1d1f26

Team Member Social Profile Color
#1d1f26

Footer Social Button Color
#1b1e25

*/

/*########## Color References Close ############*/

/*########## 2. Reset & General Styles ############*/

@import url('https://fonts.googleapis.com/css?family=Raleway:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:200,400,600,700');


html, body, header, footer, ul, ol, article, 
figure, figcaption, strong {
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
  width: 100%;
}
body {
  font-family: "Open sans",sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: raleway;
  font-weight: 600;
}

h1 {
  font-weight: 800;
}

p {
  font-size: 16px;
  line-height: 24px;
}
a:focus, a:active, a.btn:focus, a.btn:active, 
.btn:active:focus, .btn:focus  {
  outline: 0;
}
.btn.active, .btn:active {
  background-image: none;
  outline: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
}

.section-title-container {
  margin-bottom: 45px;
}
.section-title-container h1{
  font-size: 44px;
  margin-bottom: 20px;
}
.section-title-container .dark-section{
  font-size: 16px;
  color: #B5B5B5;
}
.section-title-container .light-section{
  font-size: 16px;
  color: #555555;
}
.img-center {
  margin:0 auto;
}
.skill-section, .hero-background-img, .service-section, .contact-section,
.plan-section, .blog-section, .testimonial-section,
.team-section, .portfolio-section{
  padding-top: 85px;
  padding-bottom: 115px;
}

/*############ Reset & General Styles Close ############*/


/*############ 3. PreLoader CSS ############*/

.loader-container {
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: #ffffff;
}
.loader {
  z-index: 9999;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -110px 0 0 -40px;
  border: 10px solid #1B1A1C;
  border-radius: 50%;
  border-top: 10px solid #eb215d;
  width: 80px;
  height: 80px;
  animation: spin .8s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/*############ PreLoader CSS Close ############*/


/*############ 4. Header Styles ############*/

.navbar a {
  font-family: raleway;
}
.navbar.navbar-fixed-top {
  background-color: transparent;
  -webkit-transition: all .35s;
  -moz-transition: all .35s;
  -ms-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.navbar.navbar-fixed-top .navbar-brand {
  font-size: 26px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2px;
  text-transform: uppercase;
  -webkit-transition: all .200s;
  -moz-transition: all .200s;
  -ms-transition: all .200s;
  -o-transition: all .200s;
  transition: all .200s;

}
.navbar.navbar-fixed-top .navbar-nav > li > a {
  font-family: sans-serif;
  font-weight: 400;
  font-size: 14px;
  padding-left: 18px;
  padding-right: 18px;
  text-transform: uppercase;
  transition: all .5s;
  color: #ffffff;
  -webkit-transition: all .30s;
  -moz-transition: all .30s;
  -ms-transition: all .30s;
  -o-transition: all .30s;
  transition: all .30s;
}
.navbar.navbar-fixed-top .navbar-nav > li > a:hover {
  color: #d2d2d2;
}
.navbar.navbar-fixed-top .navbar-nav > li.active a, 
.navbar.navbar-fixed-top .navbar-nav > li.active a:hover {
  font-weight: bold;
  color: #eb215d;
}
.navbar-default {
  border-color: transparent;
  box-shadow: 0 2px 4px -1px rgba(57, 57, 57, 0.50);
  -webkit-transition: all .30s;
  -moz-transition: all .30s;
  -ms-transition: all .30s;
  -o-transition: all .30s;
  transition: all .30s;
}
.navbar {
  padding-top: 18px;
  padding-bottom: 12px;
  -webkit-transition: all .30s;
  -moz-transition: all .30s;
  -ms-transition: all .30s;
  -o-transition: all .30s;
  transition: all .30s;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: transparent;
}
.affix {
  position: initial;
}
.affix .navbar {
  padding-top: 0px;
  padding-bottom: 0px;
}
.affix .navbar.navbar-fixed-top {
  background-color: #1B1A1C;
}
.affix .navbar.navbar-fixed-top .navbar-brand {
  font-size: 25px;
}
.affix .navbar.navbar-fixed-top .navbar-nav > li.active a {
  font-weight: 400;
  color: #ffffff;
  background-color: #eb215d;
}
.affix .navbar.navbar-fixed-top .navbar-nav > li.active a:hover {
  font-weight: 400;
  color: #ffffff;
  background-color: #eb215d;
}
.affix .navbar.navbar-fixed-top .navbar-nav > li > a {
  font-family: sans-serif;
  font-weight: 400;
  color: #ffffff;
  text-transform: uppercase;
  font-size: 14px;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
.affix .navbar.navbar-fixed-top .navbar-nav > li > a:hover {
  color: #d2d2d2;
}

/*############ Header Styles Close ############*/


/*############ 5. Hero Styles ############*/

.hero-text-container{
  color: #ffffff;
}
.hero-text-container h1{
  font-size: 60px;
}
.hero-text-container h2{
  color: #908f90;
}
.hero-text-container h2 span{
  padding: 8px;
  color: white;
  background-color: #eb215d;
  border-radius: 5px;
}
.hero-background-img {
  height: 100%; 
  background-image: url("../images/slide3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.hero-img-container img {
  max-width: 250px;
}
.img-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  background: rgba(0,0,0,0.8);
  -webkit-backface-visibility: hidden;
}
.hero-block {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  padding: 0 15px;
  z-index: 10;
  -webkit-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  -o-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
}
.hero-block .btn.action-btn {
  font-size: 16px;
  font-weight: 600;
  padding: 8px 28px;
  text-transform: uppercase;
  color: #ffffff;
  border: 2px solid #fff;
  background: none;
  transition: all 0.3s ease 0s;
}
.hero-block .btn.action-btn:hover {
  color: #ffffff;
  background: #eb215d;
}
.hero-block .action-btn-inverse {
  font-size: 16px;
  font-weight: 600;
  padding: 8px 28px;
  text-transform: uppercase;
  color: #ffffff;
  border: 2px solid #eb215d;
  background: #eb215d;
  transition: all 0.3s ease 0s;
}
.hero-block .action-btn-inverse:hover {
  border: 2px solid #d61c53;
  background: #d61c53;
  color: #f1f1f1;
}
.hero-text-container h2 {
  font-size: 60px;
  font-weight: 600;
  line-height: 60px;
  color: #ffffff;
  text-transform: uppercase;
}
.hero-text-container p {
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  margin-top: 36px;
  font-style: italic;
  letter-spacing: 0.7px;
}
.hero-text-container .btn {
  margin-right: 10px;
  margin-left: 10px;
  color: #ffffff;
}
.hero-text-btn {
  margin-top: 48px;
}

/*############ 5.1 Hero Slider ############*/

#slide {
  height: 100%;
  position: relative;
}
.hero-background-slider, .hero-slide-item{
  height: 100vh;
}
.hero-slide-item {
  position: relative;
  z-index: 1;
}
.hero-slide-item:after {
  position: absolute;
  background: rgba(0, 0, 0, .8);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  content: "";
  z-index: -1;
}
.slide-1 {
  background: url("../images/slide3.jpg") scroll 0 0;
  background-size: cover;
  background-position: center;
}
.slide-2 {
  background: url("../images/slide2.jpg") scroll 0 0;
  background-size: cover;
  background-position: center;
}
.slide-3 {
  background: url("../images/slide1.jpg") scroll 0 0;
  background-size: cover;
  background-position: center;
}
.carousel-indicators li {
  margin-right: 8px;
  border-radius: 0;
}
.carousel-indicators .active {
  margin-right: 8px;
}
.carousel-fade .carousel-inner .item {
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
}
.carousel-fade .carousel-inner .item,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  opacity: 0;
  filter: alpha(opacity=0);
}
.carousel-fade .carousel-inner .active,
.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
  filter: alpha(opacity=100);
}
.carousel-fade .carousel-inner .next,
.carousel-fade .carousel-inner .prev,
.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*############ Hero Slider Close ############*/


/*############ 5.2 Hero Section Video styles ############*/

.hero-background-video {
  width: 100%;
  height: 100%;
}
.video-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.video-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 5;
  background: rgba(0,0,0,0.8);
  -webkit-backface-visibility: hidden;
}

/*############ Hero Section Video styles close ############*/

/*############ Hero Styles Close ############*/


/*############ 6. Skills Styles ############*/

.skill-column h2 {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 8px;
}
.skill-column p {
  text-align: center;
}
.skill-container {
  margin-top: 22px;
  margin-left: auto;
  width: 97%;
  margin-right: auto;
  height: 36px;
  background-color: #1B1A1C;
}
.skill-identifier {
  width:10%; 
  height: 100%;
  background-color: #eb215d;
}
.percentage, .count span{
  font-size: 15px;
  position: absolute;
  left: 38px;
  line-height: 36px;
  color : white;
}

/*############ Skills Styles Close ############*/


/*############ 7. Services Styles ############*/

.service-section {
  position: relative;
  color: #ffffff;
  background: #1B1A1C url("../images/handinlaptop.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  padding-bottom: 60px;
}
.service-icon {
  float: left;
  width: 18%;
  margin-top: 5px;
}
.service-description {
  float: right;
  width: 82%;
  margin-bottom: 40px;
}
.service-description h4 {
  font-size: 24px;
  margin-top: 8px;
  margin-bottom: 14px;
}
.service-description p {
  font-size: 15px;
  color: #bdbdbd;
  padding-right: 10px;
  line-height: 25px;
}
.service-section span.fa {
  display: inline-block;
  cursor: pointer;
  font-size: 20px;
  width: 40px;
  line-height: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #ffffff;
  background: #eb215d;
  -webkit-transition: background 0.2s, color 0.2s;
  -moz-transition: background 0.2s, color 0.2s;
  -ms-transition: background 0.2s, color 0.2s;
  -o-transition: background 0.2s, color 0.2s;
  transition: background 0.2s, color 0.2s;
}
.service-section span.fa:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: -5px;
  left: -5px;
  padding: 5px;
  box-shadow: 0 0 0 2px #fff;
  opacity: 0;
  -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
  -moz-transition: -moz-transform 0.4s, opacity 0.4s;
  -ms-transition: -ms-transform 0.4s, opacity 0.4s;
  -o-transition: -o-transform 0.4s, opacity 0.4s;
  transition: transform 0.4s, opacity 0.4s;
  -webkit-transform: scale(.8);
  -moz-transform: scale(.8);
  -ms-transform: scale(.8);
  -o-transform: scale(.8);
  transform: scale(.8);
  -webkit-box-sizing: content-box; 
  -moz-box-sizing: content-box; 
  -ms-box-sizing: content-box; 
  -o-box-sizing: content-box; 
  box-sizing: content-box;
}
.service-hover:hover {
  cursor: pointer;
}
.service-hover:hover .service-icon span.fa {
  background: #eb215d;
  color: #ffffff;
}
.service-hover:hover .service-icon span.fa:after {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/*############ Services Styles Close ############*/

/*############ 8 Portfolio Styles Start ############*/

.portfolio-container ul {
  margin: 0 auto;
  padding: 0 0;
  list-style: none;
}
.portfolio-container ul li{
  position: relative;
  margin: 0 0;
  width: 33.33%;
  float: left;
  overflow: hidden;
}
.portfolio-container ul li img{
  width: 100%;
}
.portfolio-hover {
  position: absolute;
  left: 0px;
  top: 0px;
  height: 100%;
  width: 100%;
  text-align: center;
  background: rgba(248, 33, 93, 0.60);
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  opacity: 0;
  z-index: 999;
}
.portfolio-icon {
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: calc(100%  - 60px);
  display: table;
  transform: scale(0)
}
.portfolio-icon a {
  font-size: 28px;
  color: #ffffff;
  display: table-cell;
  vertical-align: middle;
}
.portfolio-details {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 70px;
  padding: 10px 10px;
  background: rgba(29, 31, 38, 0.9);
  transform: translate(0, 100%);
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -ms-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}
.portfolio-details h4 {
  font-size: 14px;
  margin-top: 9px !important;
  margin-bottom: 5px !important;
}
.portfolio-details h4 a {
  font-size: 14px;
  margin-bottom: 0px;
  color: #ffffff;
  text-transform: uppercase;
}
.portfolio-details span a {
  font-size: 12px;
  color: #afaeae;
  font-weight: 400;
  text-transform: none;
  display: block;
}
.portfolio-container ul li:hover .portfolio-hover{
  opacity: 1;
}
.portfolio-container ul li:hover .portfolio-icon {
  transform: scale(1);
}
.portfolio-container ul li:hover .portfolio-details {
  transform: translate(0, 0);
}

/*############ Portfolio Styles Close ############*/


/*############ 9. Testimonial Styles ############*/

.testimonial-section {    
  position: relative;
  color: #ffffff;
  background: #1B1A1C url("../images/laptop.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.testimonial-wrapper {
  padding: 3px 25px 0px 25px;
}
.testimonial-wrapper img{
  border-radius: 50%;
  width: 64px;
}
.testimonial-wrapper h3{
  font-size: 18px;
  margin-bottom: 6px;
}
.client-twitter {
  font-size: 14px;
  color: #b7b7b7;
}
.testimonial-section {
  position: relative;
  background-color: #f2f2f2;
}
.tiny-img {
  float: left;
  margin-right: 20px;
}
.tiny-info {
  padding-top: 15px;
}
.testimonial-section {
  clear: both;
}
.tiny-title {
  font-family: raleway;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 2px;
}
.testimonial-section .client-comment {
  font-size: 15px;
  margin-top: 13px;
  margin-bottom: 0px;
  line-height: 28px;
  color: #e8e8e8;
}

/*############ Testimonial Styles Close ############*/


/*############ 10. Team Styles ############*/

.single-team {
  width: 330px;
  height: 330px;
  margin: 0 auto !important;
  display:block;
  transition: all 0.5s;
  -webkit-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -moz-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -ms-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -o-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
}
.team-fig {
  background-color: #ffffff;
  display: block;
  width: 330px;
  height: 330px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 0 0 #555;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 1;
  filter: alpha(opacity=100);
}
.team-fig img {
  height: 100%;
  width: 100%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.team-fig:before {
  content: '';
  background-color: rgba(0, 0, 0, 0);
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
.team-fig:hover {
  cursor: pointer;
}
.team-fig:hover:before {
  background-color: rgba(0, 0, 0, .4);
  z-index: 109;
}
.team-fig:hover .team-caption {
  -webkit-transform: translateY(0%) scale(1);
  -moz-transform: translateY(0%) scale(1);
  -o-transform: translateY(0%) scale(1);
  -ms-transform: translateY(0%) scale(1);
  transform: translateY(0%) scale(1);
  z-index: 119;
}
.team-fig:hover img {
  -webkit-transform: scale(1.15);
  -moz-transform: scale(1.15);
  -o-transform: scale(1.15);
  -ms-transform: scale(1.15);
  transform: scale(1.15);
}
.team-fig .team-caption {
  background-color: rgba(255, 255, 255, 0.8);
  bottom: 0;
  left: 0;
  position: absolute;
  padding: 17px 10px 14px 12px;
  right: 0;
  text-align: left;
  z-index: 99;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translateY(150%) scale(1.5);
  -moz-transform: translateY(150%) scale(1.5);
  -o-transform: translateY(150%) scale(1.5);
  -ms-transform: translateY(150%) scale(1.5);
  transform: translateY(150%) scale(1.5);
}
.team-fig .team-caption .team-info {
  float: left;
}
.team-fig .team-caption .team-info h4 {
  color: #1d1f26;
  font-size: 18px;
  font-weight: bolder;
  margin-top: 0px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.team-fig .team-caption .team-info p {
  color: #565656;
  font-size: 12px;
  margin-bottom: 0px;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 16px
}
.team-fig .team-caption ul {
  float: right;
  display: inline-block;
  margin-top: 10px;
}
.team-fig .team-caption ul li {
  display: inline-block;
}
.team-fig .team-caption ul li a {
  background-color: #1d1f26;
  border-radius: 50%;
  color: #ffffff;
  display: inline-block;
  margin: 0 3px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  width: 25px;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}
.team-fig .team-caption ul li a:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

/*############ Team Styles Close ############*/


/*############ 11. Plans Styles ############*/

.plan-section {
  background-color: #1B1A1C;
  color: white;
}
.pricing-table-container {
  background-color: #252525; 
  margin: auto 10px;
  padding: 20px 30px 40px 30px;
  vertical-align: baseline;
  border-radius: 4px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05), 0 15px 30px -10px rgba(0,0,0,0.3);
  -webkit-transition: background 0.3s;
  -moz-transition: background 0.3s;
  -ms-transition: background 0.3s;
  -o-transition: background 0.3s;
  transition: background 0.3s;
}
.pricing-table-container:hover{
 background-color: #151314;
}
.pricing-table-container h2, .pricing-table-container p{
    text-align: center;
}
h2.price {
  line-height: 100px;
  margin: 35px auto;
  color: white;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #eb215d;
  border: 2px solid white;
  font-size: 30px;
}
.pricing-table-container ul {
  margin-top: 22px;
  margin-bottom: 40px;
  list-style: none;
  padding-left: 0px;
}
 .pricing-table-container p{
  font-size: 18px;
  margin-bottom: 24px;
}
.pricing-table-container ul li{
  text-align: center;
  font-size: 15px;
  margin-bottom: 12px;
  letter-spacing: .5px;
  font-weight: 200;
}
span.pricing-separator {
  height: 3px;
  background-color: #eb215d;
  display: block;
}
.pricing-table-btn, .pricing-table-btn:focus, .pricing-table-btn:active {
  font-size: 14px;
  font-family: sans-serif;
  font-weight: bold;
  color: #ffffff !important;
  width: 100%;
  text-transform: uppercase;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 0;
  border-color: #eb215d !important;
  background-color: #eb215d !important;
  border-radius: 4px;
  transition: all 0.3s ease 0s;
}
.pricing-table-btn:hover {
  border-color: #d61c53;
  background-color: #d61c53;
  color: #f1f1f1;
}

/*############ Plans Styles Close ############*/


/*############ 12 Blog Styles ############*/

.post-content {
  position: relative;
  width: 100%;
  border-radius: 4px;
  -webkit-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -moz-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -ms-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  -o-box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
  box-shadow: 0px 4px 12px 0px rgba(140,140,140,1);
}
.post-content:before {
  border-radius: 4px;
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: all 0.3s;
}
.post-content img {
  border-radius: 4px;
  width: 100%;
}
.post-header {
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
  padding: 0 30px;
}
.post-title {
 font-size: 26px;
 font-weight: 700;
 color: #ebebeb;
 margin-top: 15px;
 margin-bottom: 20px;
}
.post-title a{
 color: #ffffff;
}
.post-date{
  color: #ddd;
}
.post-date {
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 20px;
}
.post-excerpt{
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 26px;
  letter-spacing: .5px;
  line-height: 26px;
  color: #dedede;
}
.read-more-btn {
  font-size: 12px;
  font-weight: bold;
  padding-top: 8px;
  padding-bottom: 8px;
  width: 130px;/*era 120*/
  text-align: center;
  border-radius: 5px;
  display: inline-block;
  color: #ffffff;
  background-color: #eb215d;
  text-transform: uppercase;
  transition: all 0.3s ease 0s;
}
.read-more-btn:hover {
  color: #f1f1f1;
  background-color: #d61c53;
  border-color: #eb215d;
  text-decoration: none;
}

/*############ Blog Styles Close ############*/


/*############ 13. Contact Styles ############*/

.emptyHide { display:none; }

.contact-section {
  position: relative;
  color: #ffffff;
  background: #1B1A1C url("../images/womanhand.jpg");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}
.overlay  {
  content: '';
  position: absolute;
  background-color: #000;
  left: 0px;
  right: 0px;
  bottom: 0px;
  top: 0px;
  opacity: 0.9;
}
.contact-section h4,.contact-sub-section {
  margin-bottom: 25px;
}
.contact-sub-section, .contact-sub-section p,.contact-sub-section a {
  font-size: 14px;
  font-weight: 400;
  color: #ebebeb;
}
.contact-section h4 {
  font-size: 18px;
  font-family: raleway;
  font-weight: 600;
  color: #ebebeb;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 25px;
  margin-top: 0px;
}
.contact-title {
  display: block;
  margin-bottom: 3px;
  text-transform: uppercase;
  font-size: 14px;
  color: #97999a;
  font-weight: 600;
}
.form-group {
    margin-bottom: 25px;
}
.form-control {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  border-color: #ebebeb;
  border-radius: 2px;
  border-width: 2px;
  background-color: transparent;
  min-height: 32px;
  color: #ebebeb !important;
}
.submit-button {
  font-size: 14px;
  font-family: raleway;
  font-weight: bold;
  color: #ffffff;
  width: 100%;
  text-transform: uppercase;
  border-radius: 4px;
  border-color: #eb215d;
  background-color: #eb215d;
  transition: all .3s;
}
.submit-button:active, .submit-button:focus {
  color: #ffffff !important;
  background-color: #eb215d !important;
  border-color: #eb215d !important;
}
.submit-button:hover {
  color: #f1f1f1;
  border-color: #eb215d;
  background-color: #d61c53;
}
textarea.form-control {
  resize: none;
}
.form-control:focus {
  border-color: #eb215d;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(235, 33, 93, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(235, 33, 93, 0.6);
  -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(235, 33, 93, 0.6);
  -o-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(235, 33, 93, 0.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(235, 33, 93, 0.6);
}
#contactsec .fa{
  margin:0 auto;
  width: 15px;
  margin-right: 15px;
  text-align: center;
}

/*############ Contact Styles Close ############*/


/*############ 14. Map Styles ############*/
    
#map {
  width: 100%;
  height: 450px;
}
.google-map-section {
  overflow: hidden;
}

/*############ Map Styles End ############*/


/*############ 15. Footer Styles ############*/

footer {
  padding-top: 50px;
  padding-bottom: 50px;
  color: #ffffff;
  background-color: #1B1A1C;
}
footer h3 {
  
}
footer ul {
  margin-top: 20px;
  margin-bottom: 22px;
}
footer ul li a {
  padding: 12px 12px 10px;
  color: #1b1e25;
  display: inline-block;
  background-color: #ffffff;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
footer ul li:first-child a {
  padding-right: 16px;
  padding-left: 16px;
}
footer ul li a span.fa {
  font-size: 26px;
}
footer ul li a:hover {
  color: #000;
  background-color: #ffffff; 
}
footer ul li a.fb-color:hover {
  color: white;
  background-color: #3b5998;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
footer ul li a.tt-color:hover {
  background-color: #00aced;
  color: white;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
footer ul li a.inst-color:hover {
  color: white;
  background-color: #517fa4;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}
footer ul li a.yt-color:hover {
  color: white;
  background-color: #bb0000;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  -ms-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

/*############ Footer Styles Close ############*/


/*############ 16. Responsive Design & Media Queries Start ############*/

@media only screen and (max-width: 1199px) {
.single-team {
    width: 290px;
    height: 290px;
}
.team-fig {
    width: 290px;
    height: 290px;
}
.team-fig .team-caption ul {
    padding-left: 0px;
}

}


@media only screen and (max-width: 1199px) and (min-width: 767px) {
.post-content {
    background-color: #252525;
}
.post-content:before {
    background: none;
}
.post-header {
    position: relative; 
    top: 50%;
    padding: 20px 20px 25px;
    transform: translate(0, 0%); 
}
.post-title {
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 15px;
}
.post-excerpt {
    font-size: 14px;
    margin-bottom: 20px;
}
.read-more-btn {
    width: 120px;
}
.post-content img {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

}


@media only screen and (max-width: 991px) {
.navbar.navbar-fixed-top .navbar-nav > li > a {
    padding-left: 14px;
    padding-right: 14px;
}
.skill-container {
    margin-top: 15px;
    margin-bottom: 40px;
}
.portfolio-container ul li {
    width: 50%;
}
.single-team {
    width: 225px;
    height: 225px;
}
.team-fig {
    width: 225px;
    height: 225px;
}
.pricing-table-container {
    margin-bottom: 25px;
}
.pricing-table-container ul li{
    margin-bottom: 12px;
}
.skill-container {
    height: 30px;
}
.percentage, .count span{
    font-size: 14px;
    line-height: 30px;
}

}


@media only screen and (max-width: 991px) and (min-width: 767px){
.team-fig .team-caption ul {
    float: right;
    margin-top: 8px;
}
  .team-fig .team-caption {
    padding-bottom: 7px;
}

.team-fig .team-caption .team-info h4 {
    font-size: 16px;
    margin-bottom: 8px;
}

.team-fig .team-caption ul li a {
   margin: 0 0; 
}

}



@media only screen and (max-width: 767px) {
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
    border-color: #e7e7e7;
    background-color: rgb(27, 26, 28);
    border-color: transparent;
}
.navbar.navbar-fixed-top .navbar-nav > li {
    border-bottom: 1px solid #2f2f2f;
}
.navbar.navbar-fixed-top .navbar-nav > li > a {
    text-align: center;
}
.navbar {
    padding-bottom: 0px;
}
.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover {
    background-color: transparent;
}
.navbar-default .navbar-toggle {
    border-color: transparent;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #ffffff;
}
.hero-text-container h2 {
    font-size: 45px;
    line-height: 55px;
}
.section-title-container h1 {
    font-size: 36px;
}
.section-title-container .dark-section {
    font-size: 16px;
}
.section-title-container {
    margin-bottom: 30px;
}
.skill-section, .hero-background-img, .service-section, 
.plan-section, .blog-section,.team-section, .testimonial-section,
.portfolio-section {
    padding-top: 40px;
    padding-bottom: 55px;
}
.testimonial-section {
  padding-bottom: 72px;
}
.skill-section h2 {
    font-size: 24px;
    margin-top: 14px;
    margin-bottom: 4px;
}
.skill-container {
    width: 100%;
}
.single-team {
    width: 400px;
    height: 400px;
    margin-bottom: 25PX !important;
}
.team-fig {
    width: 400px;
    height: 400px;
}
.team-fig img {
    width: 100%;
}
.team-fig:before {
    background-color: transparent;
}
.team-fig:hover:before {
   background-color: transparent;
}
.team-fig .team-caption {
    -moz-transform: translateY(0%) scale(1);
    -o-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    -webkit-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
}
.service-icon {
    width: 100%;
    text-align: center;
}
.service-description {
    width: 100%;
    text-align: center;
}
.post-content {
    margin-bottom: 20px;
}
.post-header {
    padding: 20px 20px;
}
.post-title {
    font-size: 20px;
    margin-top: 8px;
    margin-bottom: 10px;
}
.post-excerpt {
    font-size: 14px;
    margin-bottom: 12px;
}
.contact-section {
    padding-top: 40px;
    padding-bottom: 72px;
}
.contact-form-section:last-child {
    margin-top: 28px;
}
.contact-sub-section {
    margin-bottom: 18px;
}
.contact-section h4 {
    font-size: 18px;
}
.pricing-table-btn {
    padding-top: 7px;
    padding-bottom: 7px;
}
.pricing-table-btn, .pricing-table-btn:focus, 
.pricing-table-btn:active {
    padding-top: 7px;
    padding-bottom: 7px;
}
.pricing-table-container ul li {
    text-align: center;
    font-size: 14px;
    margin-bottom: 7px;
    font-weight: 200;
}
.skill-container {
    margin-top: 10px;
    margin-bottom: 20px;
}
.service-description {
    margin-bottom: 18px;
}
.service-section span.fa {
    width: 50px;
    line-height: 50px;
    height: 50px;
}
.service-description h4 {
    margin-bottom: 12px;
    margin-top: 18px;
}
.service-description p {
    line-height: 22px;
}
.testimonial-wrapper p {
    margin-top: 12px;
}
.testimonial-wrapper h3 {
   margin-top: 18px;
   margin-bottom: 2px;
}
.testimonial p.client-comment {
    font-size: 14px;
    line-height: 24px;
}
#map {
    height: 250px;
}
footer {
    padding-top: 40px;
    padding-bottom: 40px;
}
footer ul li a span.fa {
    font-size: 22px;
}
footer ul li a {
    padding: 8px;
}
footer ul li:first-child a {
    padding-right: 8px;
    padding-left: 8px;
}
footer .list-inline>li {
    padding-right: 2px;
    padding-left: 2px;
}

}


@media only screen and (max-width: 600px) {
.portfolio-container ul li {
  width: 100%;
  margin-bottom: 25px;
}
.single-team {
    width: 400px;
    height: 400px;
    margin-bottom: 25PX !important;
}
.team-fig {
    width: 400px;
    height: 400px;
}

}


@media only screen and (max-width: 480px) {
.hero-text-container h2 {
    font-size: 32px;
    line-height: 40px;
}
.hero-text-container p {
    font-size: 16px;
    margin-top: 0px;
}
.hero-text-btn {
    margin-top: 20px;
}
.hero-text-container .btn {
    margin-right: 5px;
    margin-left: 5px;
}
.hero-block .btn.action-btn ,.hero-block .btn.action-btn-inverse {
    font-size: 14px;
    padding: 6px 12px; 
    margin-bottom: 20px;
}
.portfolio-container ul li {
    width: 100%;
    margin-bottom: 20px;
}
.single-team {
    width: 100%;
    height: 100%;
}
.team-fig {
    width: 100%;
    height: 100%;
}
.team-fig .team-caption ul {
    float: right;
}
.team-fig .team-caption {
    padding-bottom: 10px;
}
.testimonial-wrapper {
    padding: 20px;
    padding-top: 0px;
}
.post-content {
    background-color: #252525;
}
.post-content:before {
    background: none;
}
.post-header {
    position: relative; 
    top: 50%;
    transform: translate(0, 0%); 
    padding: 20px 20px 25px;
}
.post-title {
    font-size: 20px;
    margin-top: 12px;
    margin-bottom: 15px;
}
.post-excerpt {
    font-size: 14px;
    margin-bottom: 20px;
}
.read-more-btn {
    width: 120px;
    padding-top: 6px;
    padding-bottom: 6px;
}
.post-content img {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

}


@media only screen and (max-width: 325px) {
.team-fig .team-caption ul {
    float: none;
    margin-top: 6px;
    margin-bottom: 6px;
}
.team-fig .team-caption .team-info {
   float: none; 
}
.team-fig .team-caption {
    padding-top: 6px;
    padding-bottom: 0px;
}
.copyright-text {
    font-size: 14px;
}

}


@media (max-width: 640px) and (orientation: landscape) {
.hero-text-container h2 {
    font-size: 28px;
    line-height: 36px;
}
.hero-text-container p {
    font-size: 14px;
    margin-top: 0px;
}
.hero-text-btn {
    margin-top: 16px;
}
.hero-block .btn.action-btn ,.hero-block .btn.action-btn-inverse {
    padding: 6px 12px; 
    margin-bottom: 20px;
    font-size: 14px;
}
.hero-text-container .btn {
    margin-right: 5px;
    margin-left: 5px;
}

}

/*############ Responsive Design & Media Queries End ############*/