/* =============================================== */
/* ---------------->>> CSS STYLES <<<------------- */
/* =============================================== */ 

/**
	Rocket - Corporate HTML Template
	Author :ThemeTosia
	Copyright 2015
**/

/***** Table Of Contents *****

	1.0 Body and Core Css
		1.1 Body
		1.2 Menu
	2.Elements
  		2.1 Heading
  		2.2 Button and Text
  		2.3 Preload
	3.Slider
	4.Home Page
		4.1 Portfolio
		4.2 Content
		4.3 Contact
		4.4 Testimonial
		4.5 Footer
		4.6 Map
	5.About Page  
	6.What We Do Page
	7.Team Page
	8.Blog Page
	9.Blog Post Page
	10.Portfolio Page
*/

/** 1.0 Body And Core Css **/
/** 1.1 Body Css**/

body {
	font-family: 'Montserrat', sans-serif;
}

.uppercase {
	text-transform: uppercase;
}

a {
	text-decoration: none;
}

/** 1.2 Menu **/

.menu {
	margin-bottom: 120px;
}

@media screen and (max-width: 979px) {
     /* you can reduce font sizes manually as well*/
.menu { margin-bottom: 65px; }
}

.navbar {
	-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
    -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
    transition: background .5s ease-in-out,padding .5s ease-in-out;
}

.navbar-fixed-top {
	transform: translateZ(0);     
	-webkit-transform: translateZ(0);
}

.navbar .navbar-brand {
	padding: 0;
	margin-left: 10px;
}

.navbar-page,
.navbar-custom {
	border-radius:0;
	margin-bottom:0;
	padding:10px 0 0 0;
	z-index:50;  background-image: url('what2.jpg');
  height: 161px;
}

.navbar-page:hover,
.navbar-custom:hover {
	background-color: black;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

.navbar-page a {
	color: #545454;
	font-weight: 700;
	font-size:16px;
}

.navbar-custom a{
	color: #ffffff;
	font-weight: 700;
	font-size:16px;
}

.navbar-custom:hover a {
	color: #fff;
}

.navbar .navbar-nav {
    display: inline-block;
    float: none;
}

.navbar .navbar-collapse {
    text-align: center;
}

.navbar .navbar-nav .links {
	padding-top: 32px;
}

.navbar-custom .navbar-nav > li > a:hover {
	color:#525252;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
}

.navbar-page .navbar-nav > li ,
.navbar-custom .navbar-nav > li {
	margin-right: 30px;
}

.navbar-page .navbar-toggle,
.navbar-custom .navbar-toggle {
	background-color: #545454;
	position:relative;
}

.navbar-toggle span {
	background: #ffffff;
}

.navbar .navbar-collapse {
	max-height: 1000px;
	background-color: black;
}

.top-nav-collapse {
	  background-image: url('what2.jpg');
  height: 161px;
}

.top-nav-collapse .navbar-nav > li > a {
	color: #fff;
}

.top-nav-collapse .navbar-nav > li > a:hover {
	color: #fff;
	border-radius: 4px;
	background-color: #525252;
	border:none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-menu {
	text-align: left;
	box-shadow: none;
	border:none;
	background-color: black;
	border-radius: 0px;
}

.dropdown-menu > li {
	margin-top: 10px;
}


.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:active {
	color: #fff;
	background-color: black;
}

.top-nav-collapse .dropdown-menu {
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	transition: all 0.3s;
	background-color: black;
	color: #fff;
}

.top-nav-collapse .dropdown-menu li > a:hover{
	background-color: #525252;
	color: #ffffff;
}

.navbar-page .dropdown-menu {
	background-color: #ffffff;
}
.navbar-page .navbar-nav > li > a:hover {
	color: #ffffff;
	border-radius: 4px;
	background-color: #545454;
	border:none;
}

.navbar-page .dropdown-menu li > a:hover{
	background-color: #545454;
	color: #ffffff;
}

.nav .open > a,
.nav .open > a:hover,
.nav .open > a:focus {
	background-color:transparent; 
}

/** 2.Elements **/
/** 2.1 Heading**/

h1 {
	color: #ffffff;
	font-size: 41px;
	font-weight: 700;
}

h2 {
	color: #ffffff;
	font-size: 30px;
	font-weight: 700;
}

h3 {
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
}

h4 {
	color: #ffffff;
	font-size: 14px;
	font-weight: 700;
}

h5 {
	color: #ffffff;
	font-size: 11px;
	font-weight: 700;
}

h6 {
	font-size: 9px;
	font-weight: 700;
	color: #ffffff;
}

p {
	font-size: 16px;
	color: #bdc3c7;
	font-weight: 300;
	line-height: 24px;
}

.line {
	margin: 0;
	padding: 0;
	width: 50px;
	height: 3px;
	background:#bdc3c7;
	display: inline-block;
}

/**2.2 Button**/
.button {
	color: #e74c3c;
	font-size: 18px;
	border:2px solid #e74c3c;
	background:transparent;
	border-radius: 4px;
	padding: 20px 35px 20px 35px;
	margin-top: 35px;
}

.button:hover,
.button:active {
	background-color: #e74c3c;
	color: #ffffff;
	text-decoration: none;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;

}
.button-green {
	color: #1bbc9b;
	border-color: #1bbc9b;
}

.button-green:hover,
.button-green:active {
	background-color: #1bbc9b;
	color: #ffffff;
}

.button-light-green{
	color:#27ae60;
	border-color: #27ae60;
}

.button-light-green:hover,
.button-light-green:active {
	color: #ffffff;
	background-color: #27ae60;
}

.button-blue {
	color: #2980b9;
	border-color: #2980b9;
}

.button-blue:hover,
.button-blue:active {
	color: #ffffff;
	background-color: #2980b9;
}

.button-dark-blue {
	color: #2c3e50;
	border-color:#2c3e50;
}

.button-dark-blue:hover,
.button-dark-blue:active {
	color: #ffffff;
	background-color: #2c3e50;
}

.button-purple {
	color: #8e44ad;
	border-color: #8e44ad;
}

.button-purple:hover,
.button-purple:active {
	color: #ffffff;
	background-color: #8e44ad;
}

.button-yellow {
	color: #f1c40f;
	border-color: #f1c40f;
}

.button-yellow:hover,
.button-yellow:active {
	color: #ffffff;
	background-color: #f1c40f;
}

.button-light-red {
	color: #e74c3c;
	border-color: #e74c3c;
}

.button-light-red:hover,
.button-light-red:active {
	color: #ffffff;
	background-color: #e74c3c;
}

.button-white {
	color: #ffffff;
	border-color: #ffffff;
}

.button-white:hover,
.button-white:active {
	background-color: #ffffff;
	color: #545454;
}

input[type="text"],
input[type="email"] {
	vertical-align: middle;
 	padding-left:15px; 
	height: 45px;
	color:#000;
	font-size:15px;
	background-color:#BCC2C6;
	width:100%;
	min-height:30px;
	border:2px solid #383838;
	margin-bottom:30px;
	outline:none;
	border-radius: 5px;
}

textarea {
	padding: 10px 0 0 15px;
	height: 130px;
	color:#afafaf;
	font-size:15px;
	background-color:#BCC2C6;
	width:100%;
	min-height:80px;
	height: 200px;
	border:0;
	border:2px solid #383838;
	margin-bottom:30px;
	outline:none;
	border-radius: 5px;
}

input[type="text"]:hover,
input[type="email"]:hover,
textarea:hover {
	color: #ffffff;
	border-color: #ffffff;
}

/** 2.3 Preload **/

#preload {
	background-color:#545454;
	position: fixed;
	top:0;
	left:0;
	width: 100%;
	height: 100%; 
	z-index: 99;
	display:table;
}

.spinner {
	margin: 0 auto;
	width: 50px;
	height: 30px;
	text-align: center;
	font-size: 10px;
	display:table-cell;
	vertical-align:middle;
} 

.spinner > div {
	background-color: #ffffff;
	height: 60px;
  	width: 6px;
  	display: inline-block; 
  	-webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  	animation: stretchdelay 1.2s infinite ease-in-out;
}

.spinner .rect2 {
  	-webkit-animation-delay: -1.1s;
  	animation-delay: -1.1s;
}

.spinner .rect3 {
  	-webkit-animation-delay: -1.0s;
  	animation-delay: -1.0s;
}

.spinner .rect4 {
  	-webkit-animation-delay: -0.9s;
  	animation-delay: -0.9s;
}

.spinner .rect5 {
  	-webkit-animation-delay: -0.8s;
  	animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  	0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

/** 3.Slider **/

#slides .slides-container li .container {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
}

#slides h2 {
	font-size: 60px;
}

#slides p {
	margin: 35px 0 10px 0;
	font-size: 18px;
	color: #545454;
}

#slides .slide-one {
	color: #ffffff;
}

#slides .slide-two {
	color: #ffffff;
}

#slides .slide-three {
	color: #ffffff;
}

#slides a {
	margin-right: 20px;
}

#slides i {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #bdc3c7;
	font-size: 20px;
	display: block;
	height: 40px;
	float: left;
	line-height: 40px;
	margin: 0 10px 0 0;
	background-color: #545454;
	-webkit-transition: opacity .2s linear;
	transition: opacity .2s linear;
	text-align: center;
	width: 40px;
}

#slides i:hover {
	background-color: #ffffff;
	color: #545454;
}

#slides .slides-pagination a {
	width: 10px;
	height: 10px;
	margin-right: 10px;
}

/** 4.Home Page **/

#home {
	background-color:#383838;
}

#home h1 {
	padding-top: 100px;
}

#home .subhead {
	margin-top: 10px;
}

#home .detail {
	padding: 40px 0 40px 0;
}

#home .home-content {
	margin-top: 100px;
	text-align: center;
}

#home img {
	margin: 50px 0 50px 0;
}

#home .button {
	margin-bottom: 35px;
}

/** 4.1 Portfolio **/
#portfolio {
	background-color: #545454;
}

#portfolio h1 {
	margin-top: 100px;
	font-size: 122px;
}

@media screen and (max-width: 767px) {
     /* you can reduce font sizes manually as well*/
#portfolio h1 { font-size: 55px; }
}

#portfolio h2 {
	margin:55px 0 30px 0;
	line-height: 47px;
	color: #1bbc9b;
	font-size: 36px;
}

#portfolio p {
	margin-bottom: 20px;
}

#portfolio .browser {
	margin-top: 100px;
	padding: 0;
}

#portfolio .left img {
	height: 320px;
}

#portfolio .center img {
	height: 370px
}

#portfolio .right img {
	height: 320px;
}

#portfolio .left {
	position: relative;
	z-index: 1;
	top: 6px;
}
#portfolio .center{
	top: -367px;
	position: relative;
	z-index: 2;
	margin-bottom:-370px;
}
#portfolio .right {
	top:-320px;
	z-index: 1;
	position: relative;
	margin-bottom:-400px;
	padding: 0;
}

/** 4.2 Content **/

#content {
	background-color:#383838;
}

#content .contents {
	margin:100px 0 100px 0;
}

#content ul {
	list-style-type: none;
}

#content .boxes {
	margin-top: 65px;
	margin-bottom: 30px;
}

#content ul li .box {
	display: table;
}

#content ul li img {
	width: auto;
	height: auto;
	float: left;
	margin-right: 45px;
}

#content ul li p{
	margin-top: 20px;
}

#content .video {
	margin-bottom: 30px;
}

#content .video-picture {
	float: left;
	margin-right: 30px;
}

#content .video-box {
	display: table;
}
#content .video-box p {
	margin-top: 10px;
}

#content a {
	color:#ffffff;
	text-decoration: none;
}

#content a:hover {
	color: #1bbc9b;
}

/** 4.3 Contact **/

#contact {
	background-color: #545454;
}

#contact h2 {
	margin-top: 100px;
}

#contact p {
	margin: 30px 0 20px 0;
}

#contact .telephone {
	margin-top: 20px;
}

#contact .address p,
#contact .telephone p {
	margin: 5px 0 5px 0;
} 

#contact button {
	margin-bottom: 30px;
}
/** 4.4 Testimonial **/

#testimonials {
	background-color: #f5f5f5;
}

#testimonials h2 {
	margin-top: 100px;
	color: #545454;
}

#testimonials ul {
	position:relative;
	list-style-type: none;
}

#testimonials img {
	height: auto;
    margin:0 auto;
    display:table;
    margin: 50px 0 200px 0;
}

#testimonials ul li{
	padding: 0px;
	margin: 0;
	float: left;
	width: 20%;
	margin-bottom: 50px;
}

#testimonials ul li .bulut {
    position:absolute;
    padding:10px;
    margin-top: 50px;
	display:none;   
    top:150px;
	left:0px;
    right:0px;
    margin-left:auto;
    width:400px;
    margin-right:auto;
}

#testimonials p {
	margin-bottom: 50px;
}

#testimonials ul li:hover .bulut {
	display:block;
}

#testimonials ul li:first-child .bulut {
	display:block;
}

#testimonials ul:hover li:first-child .bulut {
	display:none;
}

#testimonials ul li:first-child:hover .bulut {
	display:block;
}

/** 4.5 Footer **/

#footers {
	background-color: #ffffff;
}

#footers .content {
	margin: 50px 0 50px 0;
	overflow: hidden;
}

#footers img {
	float: left;
	margin-right: 10px;
}

#footers .footer-menu li {
	list-style-type: none;
	float: left;
	margin: 17px 10px 17px 10px;
}

#footers .footer-menu a {
	font-size: 16px;
	color: #45576a;
	text-decoration: none;
	float: left;
}

#footers .footer-menu a:hover {
	color: #1bbc9b;
}

#footers h3 {
	font-size: 16px;
	margin: 17px 0 17px 0;
	color: #545454;
	float: left;
}

#footers i  {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	color: #ffffff;
	display: block;
	height: 40px;
	float: left;
	line-height: 40px;
	margin: 0 10px 0 0;
	background-color: #545454;
	text-align: center;
	width: 40px;
}

#footers i:hover{

	color: #ffffff;
	background-color: #1bbc9b;
	-webkit-transition: all 0.7s ease;
	-moz-transition: all 0.7s ease;
	-o-transition: all 0.7s ease;
	transition: all 0.7s ease;
}

/** 4.6 Map **/
#gmap_canvas {
	margin: 50px 0 50px 0;
	height:625px;
	width:100%;
	color: #545454;
}

#gmap_canvas img{
	max-width:none!important;
	background:none!important
}

/** 5.About Page **/

#about_us {
	background-color: #545454;
}

#about_us h1{
	color: #1bbc9b;
	margin-bottom: 40px;
}

#about_us h2 {
	margin-top: 50px;
}

#about_us p {
	color: #bdc3c7;
	font-weight: 400;
	font-size: 15px;
	margin: 16px 0 16px 0;
}

#about_us .about_img img {
	width: 100%;
	height: auto;
	margin: 50px 0 50px 0;
}

#about_us h3 {
	margin-bottom: 30px;
	color: #bdc3c7;
}

#about_us .paragraph {
	margin: 30px 0 30px 0;
	text-align: center;
}

/** 6.What We Do Page **/
#what {
	background-color: #383838;
}

#what h2 {
	margin-top: 50px;
}

#what p {
	margin: 16px 0 16px 0;
}

#what h1 {
	margin-bottom: 40px;
	color: #1bbc9b;
}

#what h3 {
	margin-bottom: 30px;
	color: #7f8c8d;
}

#what .what_img img {
	width: 100%;
	height: auto;
	margin: 50px 0 50px 0;
}

#what .works {
	margin-top: 50px;
}

#what .works .title {
	color: #545454;
	margin-top: 50px;
	margin-bottom: 30px;
}

#what .works .img-size {
	width: 100px;
	height: 100px;
	vertical-align: middle;
}

#what .works .img-size img {
	position: absolute;
    margin: auto;
    left: 0;
    right: 0;
}

#what .works .box {
	margin-bottom: 50px;
}

/** 7.Team Page **/
#team {
	background-color: #545454;
}

#team h2 {
	margin-top: 50px;
}

#team p {
	margin: 16px 0 16px 0;
}

#team .team_img img {
	width: 100%;
	height: auto;
	margin: 50px 0 50px 0;
}

#team .member {
	margin-bottom: 50px;
}

#team .member img {
	-webkit-border-radius: 100px;
	-moz-border-radius: 100px;
	border-radius: 100px;
	width:160px;
	height:160px;
}

#team .member .social {
	margin: 35px 0 35px 0;
}

#team .member .title {
	font-size: 24px;
	color: #ffffff;
	font-weight: 700;
	margin-bottom: 20px;
}

#team .member .detail {
	font-size: 14px;
	color: #b2bcc6;
	line-height: 24px;
}

#team i {
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px;
	color: #ffffff;
	display: block;
	height: 40px;
	float: left;
	line-height: 40px;
	margin: 0 10px 0 0;
	background-color: #383838;
	opacity: .35;
	filter: alpha(opacity=35);
	-webkit-transition: opacity .2s linear;
	transition: opacity .2s linear;
	text-align: center;
	width: 40px;
}

#team i:hover,
#team i:active {
	opacity: 1;
	color: #545454;
	background-color: #ffffff;
}

/** 8.Blog Page **/

#blog {
	background-color: #545454;
}
#blog h2 {
	margin-top: 50px;
}

#blog p {
	margin: 16px 0 16px 0;
}

#blog .blog_img img {
	width: 100%;
	height: auto;
	margin: 50px 0 50px 0;
}

#blog .content .category {
	font-weight: 700;
	color: #1abc9c;
	font-size: 16px;
	margin-bottom: 30px;
}

#blog .content a {
	color: #ffffff;
	font-size: 36px;
	font-weight: 700;
	margin-bottom: 25px;
	text-decoration: none;
}

#blog .content a:active,
#blog .content a:hover {
	color: #1bbc9b;
}

#blog .content h2 {
	margin-bottom: 25px;
}

#blog .content ul {
	list-style-type: none;
}

#blog .content ul li {
	float: left;
}

#blog .content .user p {
	margin-right: 45px;
}

#blog .content .user img{
	margin-right: 25px;
}

#blog .content .comment img {
	margin-right: 25px;
}

#blog .content .detail {
	font-size: 16px;
	line-height: 24px;
	color: #bdc3c7;
	font-weight: 300;
	margin-bottom: 30px;
}

#blog .pagination > li > a{
	color: #bdc3c7;
	background-color: #2c3e50;
	border: 1px solid #2c3e50;
}

#blog .pagination > li > a:hover,
#blog .pagination > li > a:active{
	color: #ffffff;
	background-color: #1abc9c;
}

#blog button {
	margin-bottom: 35px;
}

/** 9.Blog Post Page **/

#comment img {
	border-radius: 4px;
	margin-right: 10px;
	float: left;
}

#comment h4 {
	float: left; 
	margin-right: 10px;
}

#comment .label {
	font-size: 12px;
	color: #ffffff;
	background-color: #e74c3c;
	padding: 5px 10px 5px 10px;
}

#comment p {
	margin-top: 20px;
}

#comment .activite {
	margin-bottom: 40px;
}

#comment .activite img {
	margin-right: 25px;
}

#comment h5{
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	float: right;
	vertical-align: middle;
	padding-top: 16px;
	margin: 0;
}

#comment .rating h5 {
	padding: 0;
}
#comment .reply {
	margin-right: 45px;
	float: left;
	margin-bottom: 20px;
}

#comment .user_comment {
	margin: 50px 0 50px 0;
}

#comment .reply-send {
	margin-top: 50px;
}

/** 10.Portfolio Page **/
#portfolio_page {
	background-color: #545454;
}

#portfolio_page h2 {
	margin-top: 50px;
}

#portfolio_page .cbp-l-filters-alignCenter,
#portfolio_page .cbp-panel {
	margin-top: 50px;
}

#portfolio_page p {
	margin: 16px 0 16px 0;
}

#portfolio_page .portfolio_prev_img img {
	width: 100%;
	height: auto;
	margin: 50px 0 50px 0;
}

#portfolio_page ul {
	list-style-type: none;
	margin-bottom: 30px;
}

#portfolio_page ul li {
	margin-bottom: 20px;
}

#portfolio_page .head {
	color: #1bbc9b;
}

#portfolio_page .projects {
	margin-bottom: 30px;
}

#portfolio_page .projects h3 {
	font-size: 34px;
	color: #1bbc9b;
	font-weight: 700;
}

#portfolio_page .sidebar {
	margin-left: 20px;
}

#portfolio_page .cbp-l-filters-button .cbp-filter-item {
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #1bbc9b;
	border-color: #1bbc9b;
	background-color: transparent;
	border-radius: 4px;
	padding: 5px 10px 5px 10px;
}

#portfolio_page .cbp-l-filters-button .cbp-filter-item.cbp-filter-item-active {
	color: #ffffff;
	background-color: #1bbc9b;
}

#portfolio_page .cbp-l-filters-button .cbp-filter-counter {
	background-color: #1bbc9b;
}

.cbp-l-filters-button .cbp-filter-counter:before {
	border-top: 4px solid #1bbc9b;
}

.cbp-l-filters-alignCenter .cbp-filter-item {
	font-family: 'Montserrat',sans-serif;
	font-size: 16px;
	color: #1bbc9b;
	font-weight: 700;
}

.cbp-l-filters-alignCenter .cbp-filter-item.cbp-filter-item-active {
	color:#ffffff;
}

.cbp-l-filters-alignCenter {
	color: #1bbc9b;
}

.cbp-l-filters-alignCenter .cbp-filter-counter {
	background-color: #1bbc9b;
	font-family: 'Montserrat',sans-serif;
}

.cbp-l-filters-alignCenter .cbp-filter-counter:before {
	border-top: 4px solid #1bbc9b;
}

.cbp-nav-next, .cbp-nav-prev {
	background-color: #1bbc9b;
}

#related-container {
	margin-bottom: 30px;
}

.cbp-l-filters-button {
	text-align: center;
}

.cbp-l-loadMore-button .cbp-l-loadMore-link, 
.cbp-l-loadMore-button .cbp-l-loadMore-button-link {

	color: #1bbc9b;
	border-color: #1bbc9b;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 50px;
}

.cbp-l-loadMore-button:hover .cbp-l-loadMore-link:hover , 
.cbp-l-loadMore-button:hover  .cbp-l-loadMore-button-link:hover {
	color: #ffffff;
	background-color: #1bbc9b;
}

.cbp-l-loadMore-text .cbp-l-loadMore-link, .cbp-l-loadMore-text .cbp-l-loadMore-text-link {
	font-family: 'Montserrat',sans-serif;
	font-weight: 700;
	color: #1bbc9b;
	margin-bottom: 50px;
}

.cbp-l-grid-projects-desc { 
	color: #1bbc9b;
}

.cbp-l-grid-projects-title {
	color: #ffffff;
}
#owl-demo .item{
  margin: 3px;
}
#owl-demo .item img{
  display: block;
  width: 100%;
  height: auto;
}

/** End Css **/