/*  ==========================================================================
    Table of Content
    ==========================================================================

    1.0 Hero
    2.0 Portfolio
    3.0 Info Box
    4.0 About Info
    5.0 Skills
    6.0 Team
    7.0 Subscribe Form
    8.0 Blog
    9.0 Sidebar Widgets
    10.0 Contact Page
    11.0 Footer
    12.0 Scroll To Top
    13.0 Footer Widget
    14.0 Clients
    15.0 Scroll To Top

    ==========================================================================
    Stephen Robert
    ========================================================================== */

/* Import Google Fonts */
  @import url('https://fonts.googleapis.com/css?family=Cabin|Montserrat:300,400,600,700,800,900');

/* Import CSS Files */
  @import url('base.css');

/* ==========================================================================
  1.0 Hero
   ========================================================================== */
.hero-angle{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.hero-angle .hero-content{
  padding-top: 40px;
}
.hero-angle:before,
.hero-angle:after{
  background-color: #fff;
  content: '';
  position: absolute;
  z-index: -1;
}
.hero-angle::before {
  width: 150%;
  height: 80px;
  left: -80px;
  bottom: -77px;
  -webkit-transform: rotate(4deg);
  transform: rotate(4deg);
}
.hero-angle::after {
  width: 60%;
  height: 300px;
  right: -67px;
  bottom: -290px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.hero-angle.angle-center::before{
    left: -460px;
    bottom: -60px;
    -webkit-transform: rotate(6deg);
  transform: rotate(6deg);
}
.hero-angle.angle-center::after{
    width: 150%;
    height: 80px;
    bottom: -60px;
    right: -460px;
    -webkit-transform: rotate(-6deg);
  transform: rotate(-6deg);
}

/* ==========================================================================
  2.0 Portfolio
   ========================================================================== */
.filter-menu{
    display: block;
    padding: 21px 0;
}
.filter-menu li{
    display: inline-block;
    margin-left: 20px;
    font-size: 13px;
    font-family: 'Montserrat', sans-serif;
    color: #111;
    opacity: 0.5;
    padding: 0 2px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: -0.3px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease-in-out 0s;
}
.filter-menu li:before{
    background-color: #111;
    content: '';
    width: 0;
    height: 1px;
    position: absolute;
    left: 0;
    top: calc(50% - 0.5px);
    opacity: 0;
    transition: all 0.2s ease-in-out 0s;
}
.filter-menu li.active:before{
    width: 100%;
    opacity: 1;
    transition: all 0.5s ease-in-out 0s;
}
.filter-menu li.active{
    opacity: 1;
    transition: all 0.2s ease-in-out 0s;
}
.portfolio-items{}
.portfolio-item{
    position: relative;
}
.portfolio-item .overlay{
    background-color: rgba(255,255,255,0.5);
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease 0s;
}
.portfolio-item:hover .overlay{
    opacity: 1;
    visibility: visible;
    transition: all 0.3s 0s;
}
.portfolio-item h3{
    margin-bottom: 5px;
}
.portfolio-item a.lightbox {
    display: block;
    color: #111;
    font-size: 35px;
    opacity: 0;
    visibility: hidden;
    transform: scale(0.5);
    transition: all 0.3s ease-in-out 0s;
}
.portfolio-item:hover a.lightbox{
    visibility: visible;
    opacity: 0.5;
    transform: scale(1);
    transition: all 0.3s ease-in-out 0s;
    transition-delay: 0.2s;

}
.portfolio-item a.lightbox:hover{
    text-decoration: none;
    opacity: 1;
    transition: all 0.2s ease-in-out 0s;
}
.portfolio-info ul li span{
    font-weight: 800;
    min-width: 90px;
    display: inline-block;
    color: #111;
}

/* ==========================================================================
    3.0 Info Box
 ========================================================================== */
.info-box{}
.info-box h4{
  padding-right: 50px;
}
.info-box h4::before {
  content: attr(data-text);
  font-size: 24px;
  color: #111;
  opacity: 0.2;
  position: absolute;
  right: 50px;
  top: -20px;
  width: 100%;
  font-weight: 800;
}

/* ==========================================================================
    4.0 About Info
 ========================================================================== */
 .about-info{
   margin-top: -100px;
   overflow: hidden;
 }
 .contact-info span{
   min-width: 80px;
   font-weight: 800;
   letter-spacing: -0.06em;
   color: #111;
   font-family: 'Montserrat', sans-serif;
   text-transform: uppercase;
 }

 /* ==========================================================================
   5.0 Skills
    ========================================================================== */
 .skill-items{}
 .skill-items .skill-item{
     margin-bottom: 20px;
     overflow: hidden;
 }
 .skill-items .skill-item h5{
     font-size: 10px;
     margin: 0 0 7px;
 }
 .skill-items .skill-item .progress {
     height: 12px;
     box-shadow: none;
     margin-bottom: 0;
     overflow: visible;
     padding: 3px;
     border: 1px solid #ddd;
 }
 .skill-items .skill-item .progress,
 .skill-items .skill-item .progress .progress-bar{
     border-radius: 3px;
 }
 .skill-items .skill-item .progress .progress-bar {
     line-height: 5px;
     background-color: #111;
     position: relative;
 }
 .skill-items .skill-item .progress .progress-bar span{
     position: absolute;
     top: -15px;
     right: -15px;
     color: #666;
     font-size: 10px;
     font-weight: 600;
 }
.skill-items .skill-item .progress .progress-bar span:before{
   content: '';
   width: 8px;
   height: 8px;
   -webkit-transform: rotate(45deg);
   transform: rotate(45deg);
   position: absolute;
   left: calc(50% - 4px);
   bottom: -4px;
}

/* ==========================================================================
 6.0 Team
  ========================================================================== */
.member-info .social-links{}
.member-info .social-links li{
  display: inline-block;
  margin: 0 3px;
}
.member-info .social-links li a{
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 16px;
  color: #111;
  border: 1px solid #111;
}
.member-info .social-links li a:hover{
  text-decoration: none;
  background-color: #111;
  color: #fff;
}

/* ==========================================================================
  7.0 Subscribe Form
   ========================================================================== */
.subscribe-form{}
.subscribe-form .form-control {
    height: auto;
    display: block;
    padding: 15px 15px;
    color: #777;
    border-radius: 0;
    transition: all 0.3s ease 0s;
}
.subscribe-form input[type="submit"]{
    width: 100%;
}
.subscribe-form .form-control:focus{
    box-shadow: none;
    outline: none;
    border: 1px solid #ddd;
    border-radius: 3px;
    transition: all 0.3s ease 0s;
}

/* ==========================================================================
  8.0 Blog
   ========================================================================== */
.post-item{
  overflow: hidden;
    margin-bottom: 20px;
}
.post-items .post-item:last-child{
    margin-bottom: 0;
}
.bg-img-wrap{
	position: absolute;
	top: 0;
	left: 0;
	width: 50%;
	height: 100%;
}
.bg-img-wrap.w-55{
  width: 55%;
}
.bg-color.pos-right,
.bg-img-wrap.pos-right{
	left: auto;
	right: 0;
}
.bg-img-wrap div{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
.bg-img-wrap div.atts-scroll{
	background-attachment: scroll;
}
@media all and (max-width: 767px) {
  .bg-img-wrap.w-55,
	.bg-img-wrap{
		position: inherit;
		width: 100%;
		height: auto;
		min-height: 250px;
	}
}
.bg-color{
	width: 50%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: -1;
}
.blog-section{}
.blog-wrapper{}
.article-box{
	padding-bottom: 5px;
}
.article-box .post-thumb{
	max-height: 220px;
}
.article-box .entry-content{}
.article-box .entry-content .date{
	display: block;
	color: #262626;
	opacity: 0.6;
}
.article-box .entry-content .date:hover{
	color: #262626;
	opacity: 0.9;
	text-decoration: none;
}
.article-box .entry-content .read-more{
	color: #262626;
}
.article-box .entry-content .read-more:hover{
	color: #262626;
	opacity: 0.8;
	text-decoration: none;
}
.post-thumb{
	position: relative;
}
.post-thumb .video-post{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
}
blockquote{
	padding: 20px;
	border-left: 4px solid #ddd;
	margin-bottom: 15px;
}

/* Social Share */
.social-share-wrap{
	overflow: hidden;
	margin: 40px 0;
}
.share-icon{
	display: inline-block;
	margin-left: 15px;
}
.share-icon li{
	display: inline-block;
	margin-right: 10px;
}
.share-icon li:nth-child(1) a{ background-color: #3B5998; }
.share-icon li:nth-child(2) a{ background-color: #999; }
.share-icon li:nth-child(3) a{ background-color: #DB4A39; }
.share-icon li a{
	display: inline-block;
	font-size: 13px;
	color: #fff;
	padding: 5px 10px;
	border-radius: 3px;
}
.share-icon li a:hover{
	text-decoration: none;
	opacity: 0.8;
}

/* Meta Info */
.meta-info{
	border-bottom: 1px solid #999;
	display: block;
	padding-bottom: 25px;
}
.meta-info span{
	display: inline-block;
	margin-right: 15px;
	font-size: 14px;
}
.meta-info span i{}
.meta-info span a{
	display: inline-block;
	color: #262626;
	font-weight: 600;
}
.meta-info span a:hover{
	text-decoration: none;
	opacity: 0.8;
}

/* Comments Wrap */
.comments-wrap{}
.comment-list{}
.comment-list .media-list{}
.comment-list .media-list .media{
	margin-top: 25px;
}
.comment-list .media-list li .media-body{}
.comment-list .media-list li .media-body h4{
    margin: 0 0 -3px;
}
.comment-list .media-list li .media-body h4 a{
    color: #262626;
}
.comment-list .media-list li .media-body h4 a:hover{
    opacity: 0.8;
}
.comment-list .media-list li .media-body .coment-date{
    color: #262626;
    opacity: 0.5;
}
.comment-list .media-list li .media-body .coment-date:hover{
    opacity: 1;
    text-decoration: none;
}
.comment-list .media-list li .media-body .reply{
	color: #444;
	margin-left: 10px;
	font-weight: 600;
}
.comment-list .media-list li .media-body .reply:hover{
    color: #111;
}
.coment-form{}
.coment-form .form-control {
	border: none;
	border-bottom: 1px solid #ddd;
	box-shadow: none;
    border-radius: 0;
    height: 45px;
    color: #444;
    position: relative;
}
.coment-form .form-control:hover,
.coment-form .form-control:focus{
	border-bottom: 1px solid #444;
}
.coment-form .form-control:before{
	background-color: #444;
	display: block;
	content: '';
	width: 100%;
	height: 1px;
}
.coment-form textarea.form-control{
    height: auto;
}
.coment-form input::-webkit-input-placeholder,
.coment-form textarea::-webkit-input-placeholder{
   color: #666 !important;
}
.coment-form input:-moz-placeholder,
.coment-form textarea:-moz-placeholder{ /* Firefox 18- */
   color: #666 !important;  
}
.coment-form input::-moz-placeholder,
.coment-form textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #666 !important;  
}
.coment-form input:-ms-input-placeholder,
.coment-form textarea:-ms-input-placeholder{  
   color: #666 !important;  
}
/* Pagination */
.pagination-wrap{}
.pagination-wrap li{
    display: inline-block;
    margin: 0 5px;
}
.pagination-wrap li a{
    border: 1px solid #111;
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 38px;
    text-align: center;
    color: #777;
    font-weight: 600;
}
.pagination-wrap li a:hover{
opacity: 1;
text-decoration: none;
}
.pagination-wrap li a.active{
    background-color: #111;
    border: 1px solid #111;
    color: #fff;
}

/* 9.0 Sidebar Widgets
   ==========================*/
.sidebar{}
.sidebar-widget{
	overflow: hidden;
}
/* Search Form */
.search-form{
	position: relative;
}
.search-form .form-control{
	box-shadow: none;
	width: 100%;
	display: block;
	border: 1px solid #ddd;
	clear: #444;
	height: auto;
	padding: 15px 20px;
	border-radius: 3px;
	padding-right: 60px;
}
.search-form .search-btn{
    background-color: transparent;
    font-size: 24px;
    color: #888;
    width: 60px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    padding: 13px 0;
    opacity: 0.6;
}
.search-form .search-btn:focus,
.search-form .search-btn:hover{
	opacity: 1;
}
.search-form input::-webkit-input-placeholder{
   color: #888 !important;
}
.search-form input:-moz-placeholder{ /* Firefox 18- */
   color: #888 !important;  
}
.search-form input::-moz-placeholder{  /* Firefox 19+ */
   color: #888 !important;  
}
.search-form input:-ms-input-placeholder{  
   color: #888 !important;  
}

/* Category List */
.cat-list{}
.cat-list li{
	display: block;
}
.cat-list li:last-child a{
	border-bottom: 1px solid #ddd;
}
.cat-list li a{
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
	display: block;
	padding: 10px 14px;
	color: #444;
	font-size: 13px;
    text-transform: uppercase;

}
.cat-list li a:hover{
	text-decoration: none;
	background-color: #111;
    color: #fff;
	padding-left: 18px;
}

/* Tag List */
.tag-list{}
.tag-list li{
	display: inline-block;
	margin: 3px;
}
.tag-list li a{
	border: 1px solid #ddd;
	display: inline-block;
	padding: 5px 10px;
	font-size: 13px;
	border-radius: 3px;
	color: #777;
}
.tag-list li a:hover{
	background-color: #111;
	color: #fff;
	text-decoration: none;
}

/* ==========================================================================
   10.0 Contact Page
   ========================================================================== */
.form-control {
    height: 45px;
    border: 1px solid #ddd;
    border-radius: 3px;
}
.form-control:focus,
.form-control:hover{
    outline: none;
}
.form-control{
	box-shadow: none;
}
.form-control:focus,
.form-control:hover{
	box-shadow: none;
	outline: none;
	border: 1px solid #bbb;
}
.cf-wrapper .form-control{
    background: none;
    border: 1px solid #ddd;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    box-shadow: none;
    color: #282828;
    padding: 10px;
}
.form-box .form-control{
    border: 1px solid #ddd;
}
.cf-wrapper .form-control:hover,
.cf-wrapper .form-control:focus{
    border-bottom: 1px solid #999;
    box-shadow: none;
}
#form-messages{
    display: none;
}
#form-messages.alert-danger,
#form-messages.alert-success{
    display: block;
}
.cf-wrapper input::-webkit-input-placeholder,
.cf-wrapper textarea::-webkit-input-placeholder{
   color: #888 !important;
}
.cf-wrapper input:-moz-placeholder,
.cf-wrapper textarea:-moz-placeholder{ /* Firefox 18- */
   color: #888 !important;  
}
.cf-wrapper input::-moz-placeholder,
.cf-wrapper textarea::-moz-placeholder{  /* Firefox 19+ */
   color: #888 !important;  
}
.cf-wrapper input:-ms-input-placeholder,
.cf-wrapper textarea:-ms-input-placeholder{  
   color: #888 !important;  
}

/* Campaign Form */
.campaign-form{}
.campaign-form .form-control{
	background-color: #fff;
	border: 1px solid #ccc;
	box-shadow: none;
	color: #444;
	height: 60px;
	width: 100%;
	border-radius: 3px;
}
.reg-form .form-control:focus,
.campaign-form .form-control:focus{
	outline: none;
}
.campaign-form .b-btn{
	width: 100%;
	font-weight: 500;
	font-family: 'Montserrat', sans-serif;
	padding: 15px 0;
}

.campaign-form input::-webkit-input-placeholder{
   color: #888 !important;
}
.campaign-form input:-moz-placeholder{ /* Firefox 18- */
   color: #888 !important;  
}
.campaign-form input::-moz-placeholder{  /* Firefox 19+ */
   color: #888 !important;  
}
.campaign-form input:-ms-input-placeholder{  
   color: #888 !important;  
}

/* Google Map */
.google-map{
  width: 100%;
  height: 400px;
}

/* ==========================================================================
  11.0 Footer
   ========================================================================== */
body{
  margin-bottom: 367px;
}
.footer-wrap{
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
}


/* ==========================================================================
  12.0 Scroll To Top
   ========================================================================== */
.scroll-to-top{
	display: block;
	text-align: center;
	background-color: #111;
	font-size: 10px;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #fff;
	border-radius: 3px;
	position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 999;
}
.scroll-to-top:hover{
    color: #fff;
	-webkit-transform: translateY(-5px);
	transform: translateY(-5px);
	text-decoration: none;
}

/* ==========================================================================
  Typed Cursor Style
   ========================================================================== */
.typed-cursor {
    font-weight: 100;
    padding: 0 2px;
    -webkit-animation: blink 1s infinite;
    -moz-animation: blink 1s infinite;
    -ms-animation: blink 1s infinite;
    -o-animation: blink 1s infinite;
    animation: blink 1s infinite;
}

@-webkit-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-moz-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-ms-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@-o-keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
@keyframes blink {
    0% {
        opacity: 1
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}