/* ==========================================================================
   Author's custom styles
   ========================================================================== */



.navbar{

background-color:#FFF;

width: 100%;
z-index: 9999 !important;
 position: fixed;
}

.navbar-nav li a{
color:#797575;

}

.navbar-nav li a:hover{
color:#e67e22;
background-color:white;
border-bottom:2px double red;
line-height:2em;

}

.navbar-brand{
width:385px;
height:52px;

}

.icon-bar{
background-color:#4e2916;
}

.navbar-nav li.active, .navbar-nav li.active a{
background-color:white;
border-bottom:2px double red;

color:#e67e22;
}

/*
Bootstrap Image Carousel Slider with Animate.css
Code snippet by Hashif (http://hashif.com) for Bootsnipp.com
Image credits: unsplash.com
*/
@import url(https://fonts.googleapis.com/css?family=Century Gothic:400,700);
@import url(https://fonts.googleapis.com/css?family=Open sans:400,700);
body {
    font-family: 'Century Gothic', sans-serif;
    font-weight:700;
}

h1,h2,h3,h4,h5,h6{ font-family: 'Century Gothic', sans-serif;
    font-weight:700;}

p{font-family: 'Century Gothic', sans-serif; font-size:20px; font-weight:200; line-height:30px;}

.white_text{font-family: 'Century Gothic', sans-serif; font-size:18px; font-weight:200; line-height:30px; color:#FFF;}

.white{ color:#FFF;}
.brown{ color:#4e2916;}

.other_font_head{font-family: 'Open sans', sans-serif; font-size:48px; font-weight:200; line-height:30px; color:#FFF; font-weight:700;}
.other_font_para{font-family: 'Open sans', sans-serif; font-size:18px; font-weight:200; line-height:30px; color:#FFF;}




/********************************/
/*          Media Queries       */
/********************************/
@media screen and (min-width: 980px){
      
}
@media screen and (max-width: 640px){
      
}


.carousel-control .fa-angle-right {
    right: 50%;
    width: 38px;
    height: 38px;
    margin-top: -15px;
    font-size: 30px;
    color: #fff;
    border: 3px solid #ffffff;
    -webkit-border-radius: 23px;
    -moz-border-radius: 23px;
    border-radius: 53px;
}



.section1,
.section1-colored {
  padding: 71px 0;
}


/* my styles */
.welcome{
	
    background:url(../img/wlcome_bg.png);
    
    background-size: 100% 100%px;
	
	}
	
.section2,
.section1-colored {
  padding: 107px 0;
}


/* my styles */
.service_box{
	
    background:url(../img/brown_bg.png);
	  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
	
	}
	
.service_box2{
	
    background:url(../img/servicebg.jpg);
	  background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
   
	
	}	
	
	

.about{padding-top:55px; text-align:justify;}


	
#myFooter {
     background:url(../img/foot_bg.png);
    background-size: cover;
    background-position: center;
    color: white;
	
    
	border-top:#4e2916 solid 10px;
	
	
}

#myFooter .footer-copyright {
    background-color: #4e2916;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: center;
}

#myFooter .row {
    margin-bottom: 10px;
}

#myFooter .navbar-brand {
    margin-top: 45px;
    height: 65px;
}

#myFooter .footer-copyright p {
    margin: 10px;
	font-size:15px;
    color: #ccc;
}

#myFooter ul {
    list-style-type: none;
    padding-left: 0;
    line-height: 1.7;
}

#myFooter h5 {
    font-size: 25px;
    color: white;
    font-weight:300;
    margin-top: 30px;
}

#myFooter h2 a{
    font-size: 15px;
    text-align: center;
    color: #fff;
	 
}

#myFooter a {
    color: #d2d1d1;
    text-decoration: none;
	 font-size: 15px;
	 font-weight:200px;
}

#myFooter a:hover,
#myFooter a:focus {
    text-decoration: none;
    color: white;
}

#myFooter .social-networks {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 16px;
}

#myFooter .social-networks a {
    font-size: 32px;
    color: #f9f9f9;
    padding: 10px;
    transition: 0.2s;
}

#myFooter .social-networks a:hover {
    text-decoration: none;
}

#myFooter .facebook:hover {
    color: #0077e2;
}

#myFooter .google:hover {
    color: #ef1a1a;
}

#myFooter .twitter:hover {
    color: #00aced;
}

#myFooter .btn {
    color: white;
    background-color: #d84b6b;
    border-radius: 20px;
    border: none;
    width: 150px;
    display: block;
    margin: 0 auto;
    margin-top: 10px;
    line-height: 25px;
}

@media screen and (max-width: 767px) {
    #myFooter {
        text-align: center;
    }
}

.background-image {
    background-image:url(../img/about-us-bannerold.jpg);
    background-size: cover;
    background-position: center;
}
.breadcrumb {
    border-radius: 0;
    background-color: transparent;
    padding: 94px 0 4% 0;

}
.breadcrumb li a {
	margin-top:50px;
    font-size: 15px;
    color: white;
}
.btn-lbrown {
	width:250px;
    color:#FFF;
    background-color: transparent;
    border-color:#FFF;
}
.btn-lbrown:hover {
    color: #fff;
    background-color:#c77139;
    border-color: #785447;
}

#counter {
    position: relative;
}
.section_padding {
    padding: 80px 0;
}
.counter-box {
    color: #fff;
}
.counter-digit {
    font-size: 32px;
    font-weight: bold;
    display: block;
    margin-bottom: 30px;
}
.counter-box h4 {
    font-weight: 400;
    font-size: 18px;
    color: #ffffff;
    font-family: 'Lato', sans-serif;
}
.icon-s {
    color : #fe4819;
    padding:32px;
    font-size:50px;
}	
.box{background-color:#CCC;
border:solid #930 2px;


}




.gallery
{
    display: inline-block;
    margin-top: 20px;
}




/*=========================
  Icons
 ================= */

/* footer social icons */
ul.social-network {
	list-style: none;
	display: inline;
	margin-left:0 !important;
	padding: 0;
}
ul.social-network li {
	display: inline;
	margin: 0 5px;
}


/* footer social icons */
.social-network a.icoRss {
	background-color: #F56505;
}
.social-network a.icoRss:hover {
	background-color: #F56505;
}

.social-network a.icoFacebook {
	background-color:#3B5998;
}

.social-network a.icoFacebook:hover {
	background-color:#3B5998;
	
}
.social-network a.icoTwitter {
	background-color:#33ccff;
}
.social-network a.icoTwitter:hover {
	background-color:#33ccff;
}
.social-network a.icoGoogle {
	background-color:#BD3518;
}
.social-network a.icoGoogle:hover {
	background-color:#BD3518;
}
.social-network a.icoVimeo{
	background-color:#0590B8;
}
.social-network a.icoVimeo:hover {
	background-color:#0590B8;
}
.social-network a.icoLinkedin {
	background-color:#007bb7;
}
.social-network a.icoLinkedin:hover {
	background-color:#007bb7;
}
.social-network a.icoRss:hover i, .social-network a.icoFacebook:hover i, .social-network a.icoTwitter:hover i,
.social-network a.icoGoogle:hover i, .social-network a.icoVimeo:hover i, .social-network a.icoLinkedin:hover i {
	color:#fff;
}


a.socialIcon:hover, .socialHoverClass {
	color:#44BCDD;
}

.social-circle li a {
	display:inline-block;
	position:relative;
	margin:0 auto 0 auto;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border-radius:50%;
	text-align:center;
	width: 35px;
	height: 35px;
	font-size:20px;
}
.social-circle li i {
	margin:0;
	line-height:36px;
	text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
	-moz-transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-ms--transform: rotate(360deg);
	transform: rotate(360deg);
	-webkit-transition: all 0.2s;
	-moz-transition: all 0.2s;
	-o-transition: all 0.2s;
	-ms-transition: all 0.2s;
	transition: all 0.2s;
}
.social-circle i {
	color: #fff;
	-webkit-transition: all 0.8s;
	-moz-transition: all 0.8s;
	-o-transition: all 0.8s;
	-ms-transition: all 0.8s;
	transition: all 0.8s;
}

.brd {border:#FFF 1px solid; padding:30px; height:520px;

}

.fond{position:absolute;padding-bottom:0px;top:0;left:0; right:0;bottom:0;
  
}

.style_prevu_kit
{
	
	
	
  
    border:0;
    width:60px;
    height:60px;
    position: relative;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1); 
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1); 
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1);
    transition: all 200ms ease-in;
    transform: scale(1);  
	 margin-top:-50px;
	

}
.style_prevu_kit:hover
{
	
	
    box-shadow: 0px 0px 100px #000000;
    z-index: 2;
    -webkit-transition: all 200ms ease-in;
    -webkit-transform: scale(1.5);
    -ms-transition: all 200ms ease-in;
    -ms-transform: scale(1.5);   
    -moz-transition: all 200ms ease-in;
    -moz-transform: scale(1.5);
    transition: all 200ms ease-in;
    transform: scale(1.5);
    border-radius: 0px;
	
	width:180px;
    height:180px;
	position: relative;
	
	 
	 margin-top:-200px;
}

 /* carousel */
.media-carousel 
{
  margin-bottom: 0;
  padding: 0 40px 30px 40px;
  margin-top: 30px;
}
/* Previous button  */
.media-carousel .carousel-control.left 
{
  left: -12px;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 86px;
}
/* Next button  */
.media-carousel .carousel-control.right 
{
  right: -12px !important;
  background-image: none;
  background: none repeat scroll 0 0 #222222;
  border: 4px solid #FFFFFF;
  border-radius: 23px 23px 23px 23px;
  height: 40px;
  width : 40px;
  margin-top: 86px;
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators 
{
  right: 50%;
  top: auto;
  bottom: 0px;
  margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li 
{
  background: #c0c0c0;
}
.media-carousel .carousel-indicators .active 
{
  background: #333333;
}
.media-carousel img
{
  width: 320px;
    height: 216px;
}
/* End carousel */ 
       







a { 
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
    color: inherit;
}
a:hover,
a:focus,
a.active { 
    color: #757575;
    text-decoration: none;
}
a:focus {
  outline: none;
  outline: none;
  outline-offset: 0;
}






/* Modal Popup Styles
===========================================*/
.modal-open {
  overflow: auto;
  padding-right: 0 !important;
}

#menuTwo .modal,
#menuOne .modal{
  -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateY(-350px);
      -moz-transform: translateY(-350px);
        -ms-transform: translateY(-350px);
          -o-transform: translateY(-350px);
            transform: translateY(-350px);
  -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
  transition: all 0.5s;
}
#menuTwo .modal.fade.in,
#menuOne .modal.fade.in {
  -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -ms-transform: translateY(0);
          -o-transform: translateY(0);
            transform: translateY(0);
}
#menuOne .modal-ovelay{
 position: fixed;
  background-color: #000000;
  opacity: 1 !important;
  width: 50%;
  margin-right: 0;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
}

.fade,
.modal,
.fade.in {
  opacity: 1;
  background-color: transparent;
}
ul.menu-lists li {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 900;
  line-height: 50px;
  letter-spacing: 2px;
  color: #FFFFFF;
  text-align: right;
}
ul.menu-lists li.active > a{ color: #757575}
ul.menu-lists {
  position: absolute;
  top: 30%;
  left: 10%;
}

.close-text {
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 14px;
  cursor: pointer;
  line-height: 55px;
  letter-spacing: 1px;
  position: absolute;
  right: 30px;
  top: 30px;
  color: #ffffff;
}



/* Portfolio
===========================================*/
.content-area{ 
  padding: 6% 0;
}
.portfolio-item {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
  margin-bottom: 10px;
}

.portfolio-item h4 {
  font-weight: 900;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1px;
  color: #ffffff;
}
.portfolio-item span{
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 100;
}
.hover-bg {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
  opacity: 0;
  -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
  transition: all 0.5s;
}

.hover-txt {
  padding: 30px 30px 40px 30px;
  position: absolute;
  bottom: 0;
  color: #ffffff;
  -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform: translateY(-100px);
      -moz-transform: translateY(-100px);
        -ms-transform: translateY(-100px);
          -o-transform: translateY(-100px);
            transform: translateY(-100px);
}

.portfolio-item:hover .hover-bg{
  opacity: 1;
}
.portfolio-item:hover .hover-bg .hover-txt{
  -webkit-transform: translateY(0);
      -moz-transform: translateY(0);
        -ms-transform: translateY(0);
          -o-transform: translateY(0);
            transform: translateY(0);
}

.mdle{ margin-left:147px;}
@media (max-width:768px) {
.mdle{ margin-left:4px;}
}

@media (max-width:480px) {
.mdle{ margin-left:4px;}
}

@media (max-width:690px) {
.mdle{ margin-left:4px;}

}
@media (min-width:380px) {
.mdle{ margin-left:4px;}
}

@media (min-width:240px) {
.mdle{ margin-left:4px;}
}

@media (min-width:961px)  { 
.mdle{ margin-left:4px;}
}
@media (min-width:1025px) { 
.mdle{ margin-left:147px;}

}
@media (min-width:1281px) { 
.mdle{ margin-left:147px;}

}




@media screen and (min-width: 1400px) {

.mdle{ margin-left:147px;}
}
@media screen and (min-width: 1600px) {
	
.mdle{ margin-left:147px;}

}





@media (min-width:1900px) {


.mdle{ margin-left:147px;}


}





/*Portfolio===============================*/
#portfolio {  
    margin: 1rem 0;
    -webkit-column-count: 3; 
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
    -webkit-column-width: 33.33333333333333%;
    -moz-column-width: 33.33333333333333%;
    column-width: 33.33333333333333%;
}
#portfolio-container .tile { 
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 350ms ease;
    transition: all 350ms ease;

}
#portfolio-container .tile:hover { 

}

#portfolio-container .scale-anm {
  transform: scale(1);
}


#portfolio-container p{ 
  padding:10px; 
  border-bottom: 1px #ccc dotted; 
  text-decoration: none; 
  font-family: lato; 
  text-transform:uppercase; 
  font-size: 12px; 
  color: #333; 
  display:block; 
  float:left;
}

#portfolio-container p:hover { 
  cursor:pointer; 
  background: #333; 
  color:#eee; }

#portfolio-container .tile img {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
  
}

#portfolio-container .btn {
    font-family: Lato;
    font-size: 18px;
    font-weight: normal;
    text-decoration: none;
    cursor: pointer;
    display: inline-block;
    line-height: normal;
    padding: 5px 10px;
    margin: 0;
    height: auto;
    border: 1px solid;
    vertical-align: middle;
    -webkit-appearance: none;
    color: #555;
    background-color: rgba(0, 0, 0, 0);
}



#portfolio-container .btn:hover {
  text-decoration: none;color:#fff;background-color:#FF1351;
}

#portfolio-container .btn:focus {
  outline: none;
  border-color: var(--darken-2);
  box-shadow: 0 0 0 3px var(--darken-3);
}
/*Portfolio===============================*/


#portfolio-container .active {
   background-color:#FF1351;color:#fff;
    outline: 0;
    box-shadow: none; 
}

#portfolio-container .active:active{
   background-color:#FF1351;color:#fff;
    outline: 0;
    box-shadow: none; 
}