/* Global Rules start */
* {     box-sizing: border-box;
-webkit-box-sizing: border-box;
   -moz-box-sizing: border-box}
.container {width: 1200px; margin: auto} /*  The standard width for large screens in Bootstrap =1170px + 30px padding = 1200px  */
ul {list-style: none; padding: 0; margin: 0} /* List Reset */
/* Global Rules end */


/* Navigation Bar start */
.navbar {font-size: 18px; color: #fff; position: relative; z-index: 2; height: 0}/* the zero height to make the navbar transparent */
.navbar .brand {float: left; width: 50%; text-transform: uppercase; margin-top: 10px}
.navbar .links {float: left; width: 50%; margin-top: 25px}
.navbar .links li {display: inline-block; text-transform: uppercase; font-weight: bold; padding: 10px 0; margin: 0 10px; border-bottom: 2px solid transparent}
.navbar .links li a {color: #fff; text-decoration: none}

/* Another way to make the line using after pseudoelement other than the border bottom way */
/* .navbar .links li.active::after {content: ""; display: block; height: 2px; width: 100%; background-color: #1abc9c; margin-top: 10px} */

.navbar .links li.active,
.navbar .links li:hover     {border-bottom: 2px solid #1abc9c}

.navbar .links li.active a,
.navbar .links li a:hover     {color: #1abc9c}
/* Navigation Bar end */

/* Header start */
.header {background-image: url("../images/header2.jpg"); position: relative}
.header .overlay {background-color: rgba(0, 0, 0, .7); color: #fff; width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 1}
.header .bx-wrapper {box-shadow: none; border: 0; background: none; height: 100%; text-align: center}
.header .bx-wrapper .bx-viewport {height: 100% !important}
.header .bxslider {color: #fff; height: 100%}
.header .bxslider li {display: block}
.header .bxslider li h2 {font-size: 60px; margin-bottom: 20px; margin-top: 0}
.header .bxslider li h2 span {color: #1abc9c}
/* Header end */

/* Services start */
.services {padding: 80px 20px 40px}
.services h2 {margin: 0 0 50px; font-weight: normal}
.services .item {float: left; width: 33.33333%; margin-bottom: 20px}
.services .item i {color: #1abc9c; float: left; width: 17%; margin-right: 8%; margin-top: 10px}
.services .item .info {float: left; width: 75%}
.services .item .info h3 {font-weight: normal; color: #585353; margin-bottom: 10px}
.services .item .info p {margin-top: 0; color: #888}
.our-team {padding: 40px 20px}
.our-team .box {float: left}
.our-team .box:first-child {width: 35%}
.our-team .box:not(:first-child) {width: 15.25%; margin-left: 1%; position: relative}
.our-team .box:not(:first-child) .overlay {position: absolute; top: 0; left: 0; bottom: 0; right: 0 ; width: 100%; height: 100%; background-color: rgba(26, 188, 156, .85); color: #fff; text-align: center; font-size: 20px; font-weight: bold; line-height: 183px; transition: all 1.5s ease; opacity: 0}
.our-team .box:not(:first-child):hover .overlay {opacity: 1}
.our-team .box:not(:first-child) img {width: 100%}
.our-team .box p {color: #888; line-height: 1.4; font-size: 14px}
.our-team h2 {font-weight: normal; padding: 0 0 15px}
/* Services end */

/* Testimonias start */
.testimonials {text-align: center; position: relative; background-image: url("../images/keyboard.jpg"); height: 400px; background-size: cover;
                                                                                                               -webkit-background-size: cover;
                                                                                                                  -moz-background-size: cover;
                                                                                                                    -o-background-size: cover;
padding: 80px 0}
.testimonials .t-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; color: #fff; background-color: rgba(0, 0, 0, .8)}
.testimonials h2 {font-size: 40px; margin: 80px 0 10px}
.testimonials q {font-size: 20px; line-height: 2; color: #d0d0d0; display: block; margin-top: 60px}
.testimonials p {font-size: 30px; color: #1abc9c}
.testimonials .slider > div {display: none}
.testimonials .slider .active {display: block}
/* Testimonias end */

/* Projects start */
.projects {padding: 60px 0}
.projects h2 {font-weight: normal}
.projects ul {margin-top: 50px}
.projects ul li {display: inline-block; border: 2px solid #d4cccc; color: #a7a7a7; padding: 10px; border-radius: 5px; margin-right: 5px}
.projects ul li.selected {background-color: #1abc9c; color: #fff; border: 2px solid #1abc9c}
.projects .gallery {margin-top: 50px; overflow: hidden}
.projects .gallery .row > div:nth-child(2) {margin-right: 1%; margin-left: 1%}
.projects .gallery .row > div {float: left; width: 32.66666%; margin-bottom: 12px; position: relative}
.projects .gallery .row > div .p-overlay {position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; line-height: 231px; font-size: 20px; font-weight: bold; text-align: center; color: #fff; background-color: rgba(28, 188, 156, .85); transition: all 1.5s ease; opacity: 0}
.projects .gallery .row > div .heart {position: absolute; bottom: 20px; right: 20px; color: #fff; transition: all 1.5s ease; opacity: 0}
.projects .gallery .row > div:hover .p-overlay, .projects .gallery .row > div:hover .heart {opacity: 1}
.projects .gallery .row > div img {width: 100%}
.projects .shuffle li {cursor: pointer}
/* Projects end */

/* Ultimate Footer start */
.ultimate-footer {background-color: #232323; color: #6c6c6c; padding: 40px 0; overflow: auto}
.ultimate-footer .col {width: 25%; float: left}
.ultimate-footer .col h2 {color: #fff; font-weight: normal; font-size: 18px}
.ultimate-footer .col p {margin-bottom: 30px; line-height: 1.6}
.ultimate-footer .col i {display: inline-block; color: #6c6c55; border: 1px solid #6c6c55; padding: 10px; width: 40px}
.ultimate-footer .tags span {display: inline-block; border: 1px solid #979797; padding: 10px; color: #ccc; margin-right: 5px; margin-bottom: 10px}
.ultimate-footer .recent div {overflow: hidden; margin-bottom: 15px}
.ultimate-footer .recent div img {float: left; margin-right: 10px}
.ultimate-footer .recent div h4 {margin: 8px 0; color: #ccc; font-weight: normal}
.ultimate-footer ul li {padding: 15px; border-bottom: 1px solid #979797; color: #ccc}
.ultimate-footer .copyright {margin-top: 30px}
/* Ultimate Footer end */


/* My Own Framework start */
.clearfix {clear: both}

.special-heading {position: relative}
.special-heading::after {content: ""; display: block; width: 40px; border-bottom: 2px solid #333; position: absolute; top: 40px; left: 0}
/*  Another way for .special-heading::after  */
/* .special-heading::after {content: ""; display: block; width: 40px; height: 2px; background-color: #333; position: absolute; top: 40px; left: 0} */

.separator {border: 1px solid #eee}
/* My Own Framework end */