/* CSS Document */
/* color codes
# Grean link : #b5d335;
# dark #343A40

*/
body{
	overflow-x:hidden;
	overflow-y: auto;
	/*font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;*/
	font-family:Arial,"Helvetica",sans-serif;
	/*background-color: #000;*/
	margin:0;
	padding:0;
}
h2{
	font-size:2rem;
}
h3{
	font-size:1.2rem;
}
/* Navbar css */
.navbar{
	position: fixed;
	top: 4.6rem;
	width: 100%;
	z-index: 88;
	
	/*text-transform: uppercase;*/
	font-weight: 600;
	font-size: .9rem;
	background-color: rgba(87,87,87,1) !important;
	/*background-image: url(../images/slide_cover.png) !important;
	background-repeat: no-repeat;
	background-position: -1.6rem -3rem !important;*/
	color: green !important;
}
nav.active{
	position:fixed;
	top:4.6rem;
	width:100%;
	z-index: 88;
	/*text-transform: uppercase;*/
	font-weight: 600;
	font-size: .9rem;
	background-color:#343A40!important; 
	/*background-image: url(../images/slide_cover.png) !important rgba(153,153,153,1) ;
	background-repeat: no-repeat;
	background-position: -1.6rem -3rem !important;*/
	color:green !important;
	transition:all 0.7s ease-in-out;
}
.navbar-dark, .bg-dark{
	margin:0;
	padding: 0;

	
}
.navbar-brand{
/*	padding-left:14%;*/
	background: transparent url(images/nav-brand.png);
	background-position: left center;
	line-height:24px;
	


}

.navbar-brand{
	color:#b5d335 !important;
	z-index:999;
/*	font-weight: bolder;*/
	font-size:0.9rem;
	position: fixed;
  right: 5px;
/*
	transform:scaleY(1.9);
	-moz-transform:scaleY(1.9);
	-webkit-transform:scaleY(1.9);
	-o-transform:scaleY(1.9);
	-ms-transform:scaleY(1.9);
*/
}
 .navbar-brand .taller small{
	color:#b5d335;
	z-index:999;
	font-weight: 600;
	line-height:.3rem;
	font-size: .7rem;
}
.navbar-brand:hover, .navbar-brand small:hover{
	color:#fff !important;
}
.navbar-nav {
	z-index:999;
	
	line-height: -.4rem;
	padding-top:0rem;
	margin-left:auto;
	margin-right: auto;
}

.navbar-dark .navbar-nav .nav-link{
	color:#b5d335;
	margin-right:3rem;
}
.nav-link:hover{
color:  rgba(255,255,255,.5) !important;
}

/* Carousel section  */
.carousel{
	top: 3.5rem !important;
	/*min-width: 100% !important;*/
	height:91vh !important;
	overflow:hidden !important;  
}
/*
.carousel-item {

	height:91vh;
}

.carousel-item img{

	width:100%;

}
*/
.carousel-indicators{
	/*bottom:8rem !important;*/
	position:absolute;
	bottom:-1vh !important;
}
.carousel-indicators li{
	width:10px;
	height:10px;
	border-radius: 100%;
	background-color: #fff;
}
.carousel-indicators li.active{
	background-color: #809624;
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
    /*display: block !important;*/
}
.carousel-control-prev,.carousel-control-prev-icon,.carousel-control-next,.carousel-control-next-icon{
	z-index:6;
}

.carousel-caption{
	/*background-image: url(../images/slider/pattern1.png);*/
	/* [disabled]background-color: rgba(231,231,231,.5) !important; */
	position:relative;
	vertical-align: top;
	left:0;
	width: 100%;
	height:3rem;
	/*bottom:12rem !important;*/
	bottom:17vh !important;
	background-image: url(../images/slider/pattern.png);
	padding-top:0;
	text-align:left;
	padding-left:100px;
	/*background-color:rgba(231,231,231,.8);*/
	}
	.carousel-caption h3{
	color: #fff;
	font-size:1.8rem; 
	margin-top:0;
	line-height: normal;
	vertical-align: middle;
	}
.wrapper {
  max-width:200px;
  width:100%;
}

/*   top page section  */
/* Logo section  */

.logo{
	position:fixed;
	top:0;
	left:0;
	height:100px;
	width:100%;
	z-index:77;
	background:rgba(231,231,231,1);		
}
img.logo{
	position:fixed;
	width: 30rem;
	height: auto;
	z-index:99;
	background-color:transparent;
	top:1.7rem;

}
/* Side cover section  */
.side-cover{
	position:absolute;
	left:0rem;
	top:-.8rem;
	width:14%;
	height:100%;
	z-index: 6;
	opacity:.7;
}

.carousel .side-cover{
	position:absolute;
	left:0rem;
	top:-.8rem;
	width:14%;
	height:102%;
	z-index: 6;
	opacity:.7;
}



 #services, #about,#contact,#gallery{
	
	/*border:2px solid #ccc;*/
	
}
.services,.gallery,.contact,.about,.apartment, .commercial{
	width: 100%;
	min-height: 90vh !important;
	/*top:20%;*/
	padding-top:80px;
	color:#b5d335;
	background-color: #343A40;
}

.about h2{
	color:#000;
	margin-top:100px;
	position:relative;
	top:10px;
	
	
}


/*.services .container{
	color: #b5d335;
	min-height:81vh;
	margin-top:-1rem;
	padding-top:3rem;
	margin-bottom:1px;
	 background-color:#343A40; 
}*/
.services h3{
	color:#b5d335;
	/*margin-top:100px;*/
	position:relative;
	margin-top:10px;
	padding-left:25px;
	font-size:1.5rem;
}
.gallery h2{
	color:#000;
	/*margin-top:100px;*/
	/*position:relative;
	top:110px;*/
}
.contact h2{
	color:#b5d335;
	/*margin-top:100px;*/
	position:relative;
	top:110px;
}

.building-type{
	height:80rem;
	padding-top:8rem;
	overflow-x:hidden;
}
/* gallery  */
.main-gallery{
	background-color:#212529 !important;
    width:100%;
    height:auto;
    padding-top:4rem;

	}
.main-gallery .row .img_{

    padding-bottom:10px;
    position:relative;
}
.main-gallery .row .img_ a img{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	border:1px solid #666;
	padding:4px;
	box-shadow:0px 2px 3px #CCCCCC;
	
}
.main-gallery .row .img_ a img:hover{
	-webkit-filter: none;
	filter: none;
	-moz-filter: none;
	-o-filter: none;
	-ms-filter: none;
}
.main-gallery .row .img_ a p:hover{
	
	color:#fff;
	font-weight: bold;
}
.main-gallery .row .img_ a:hover{
	text-decoration: none;
	}
.main-gallery .row .img_ p {
	/* [disabled]background: rgba(0, 0, 0, 1); */
	margin-top:.2rem;
	color: #b5d335;
	font-weight: bold;
	text-decoration: none;
	}
.content-bg{
	position:relative;
	background-color: #212529;
	border: 1px solid #666;
	padding: 4px;
	box-shadow: 0px 2px 3px #ccc;
	margin: 0rem auto 3px auto !important;
	bottom:-.4rem;
	z-index:7;
	min-width:70% !important;
	}
 h3.heading{
	border-bottom: 1px solid #999;
	box-shadow: 0px 10px 10px -5px #999;
	/*0px 15px 10px -15px #111*/
	margin-bottom:15px !important;
	width:100%;
	padding:20px 0px 20px 30px;
	text-align: left;
	font-size: 1rem;
	font-weight: bold;
     color: #b5d335 !important;
	/*margin-bottom:5px;line-height:3rem;*/
}
.img-display h4{
	font-size:1.1rem;
}
#multi-dwellings,#apartments,#commercial,#outdoor-entertainment,#double-triple-storey,#single-storey,#interior-design,#videos{
	min-height:88vh;
	padding-top:65px;
	background-color: #343A40 !important;
	
}

.img-bg{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	border:1px solid #666;
	padding:4px;
	box-shadow:0px 1px 2px #CCCCCC;
	margin:6px;
}
.img-bg:hover{
	-webkit-filter: none;
	filter: none;
	-moz-filter: none;
	-o-filter: none;
	-ms-filter: none;
}
.img-display{
	min-height:88vh;
	padding-top:80px;
}
.img-display h3{
	color:#b5d335;
	width:80%;
	margin:auto;
	font-size:1rem;

}
.img-display img{
		filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	-o-filter: grayscale(100%);

}

.img-display img:hover{
	filter: grayscale(0%);
	-webkit-filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
	-o-filter: grayscale(0%);
}
/*  Navbar brand  */

.bottom-tbl{
    background-color:#343A40 !important;
    width:100%;
    height:auto;
    padding-top:4rem;
    z-index:8;


}
.bottom-tbl .row{
    padding-left:0rem;
    padding-bottom:0px;
    margin:auto;
}
.bottom-tbl .row .img_{

    padding-bottom:10px;
}
.bottom-tbl .row .img_ a img{
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	-o-filter: grayscale(100%);
	-ms-filter: grayscale(100%);
	border:1px solid #666;
	padding:4px;
	box-shadow:0px 2px 3px #CCCCCC;
	display:none;
}
.bottom-tbl .row .img_ a img:hover{
	-webkit-filter: none;
	filter: none;
	-moz-filter: none;
	-o-filter: none;
	-ms-filter: none;
}
.bottom-tbl .row .img_ a p:hover{
	
	color:#fff;
	font-weight: bold;
}
.bottom-tbl .row .img_ a:hover{
	text-decoration: none;
	}
.bottom-tbl .row .img_ p {
	/* [disabled]background: rgba(0, 0, 0, 1); */
	margin-top:.2rem;
	color: #b5d335;
	font-weight: bold;
	text-decoration: none;
	display:none;
}
.row{
    width:100%;
    padding:0;
    top:0;
    left:0;
    margin:0px 0px !important;
}

span.icon-bar{
    z-index: 9999;
    overflow: visible;
    color: #0f0f0f;
}
.fb-like{
    background-color: #000000;
    height:35px;
    width:100%;
    float:right;
    padding:0 3rem 0 0;
    text-align:right;
}
div.fb-like{
	float: right;
	padding-right:50px;
	padding-top:0px;
	margin-top:0px;
	background-color: #000000;
}
div.footer{
    background:url(../images/footer.jpg) repeat-x;/*rgba(0,0,0,1);*/
    width:100%;
    height:7rem;
    z-index:6;
    color:#ffffff;
    position:relative;
    bottom:0;
    padding-top:1rem;
    vertical-align: bottom;
    border-top:4px solid #fff;
    margin-top:-4px;
	display: flex;
	justify-content: center;

}
.footer small{
    width:100%;
    font-size: 0.8rem;
   position:absolute;
	color:#a69e9e;
    bottom:1.2rem;
    text-align: center;
}
.responsive {
  width: 100%;
  height: auto;
}

.contact-form{


	padding-top:1rem;
}

.contact-form label{
	color:#fff;
}
.top-sec{
	position:absolute;
	width:100%;
	height:150px;
	top:280px;
}
.contact-form {
	width:100%;
	
}

.map{

	/*box-shadow: 3px 6px #ccc;
	border-radius: .5rem;
	border: solid .1rem #ccc;*/
	padding:3rem 1rem;
	margin-right:25px;
}
.gmap_canvas{
overflow:hidden;
}
.gmap_canvas iframe{
	width:100%;
	height:100%;
}
.gmap_canvas iframe:hover{
	width:100%;
	height:100%;
}
.g-map{
	position:relative;
	/*width:50%;
	height:50%;
	top:0px;*/

}
.form label{
	font-size: .8rem;
}
.form input[placeholder]{
	 height:2.5rem;
}
.form button span{
	width:5rem;
	font-size:2.5rem;
}
.form{
	/* [disabled]display:none; */
	min-height: 60vh;
	width: 60%;
	position: fixed;
	top: 50% !important;
	left:50%;
	margin-left:auto;
	margin-right: auto;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	border: 2px solid #666;
	border-radius: 20px;
	padding: 10px;
	z-index: 999999999;
	background-color: rgba(247,247,247,1);
	overflow:auto;
}
.form label{
	color:#666;
}
.content-wrapper{
	min-width: 70%;
	/* [disabled]height: auto; */
	background-color: #212529;
	margin: 15px auto;
	/*min-height:94vh;*/
	/* [disabled]box-shadow: 1px 2px 3px s2px #999; */
}
.contact-info{
/*	position:relative;*/
	border:2px solid #ccc;
	margin:20rem auto;
   /*	top:8rem;*/
	width:50%;
	height:85%; 	
}
.contact-info h3{
	font-size:16px;
	font-weight:bolder;
	line-height:3rem;
	font-stretch:narrower;
}
.content-wrapper .row{
	/* [disabled]background-color: #30353A; */
	color: #b5d335;
	/* [disabled]border: 1px solid #30353A; */
	/* [disabled]box-shadow: 0px 3px 3px #333; */
	padding-bottom: 20px;
	madding-top: 20px;
}
#myBtn2,#myBtn{
	color: #000;
    background-color:#b5d335;
    padding-left: 10px;
    padding-right: 40px;
    text-align: left;
    border-radius: 3px !important;
    
}
#myBtn2:hover{
    text-decoration: none;
}


.bg-cover{
	width:100%;
	height:100vh;
	background-color:rgba(0,0,0,1);
	position:fixed;
	top:0;
	left:0;
	margin:0;
	padding:0;
	z-index:9999;
	overflow:hidden;
}
.myicon-tel{
	background: url(../images/tel.png) no-repeat;
	background-position: left top;
	background-size:1.2rem 1.2rem;
	padding-left:1.7rem;
	margin-top:1px;
	margin-bottom:4px;
	/* [disabled]padding-left:4rem; */	
}
.myicon-mob{
	background: url(../images/mobile.png) no-repeat;
	background-position: left top;
	background-size:1.2rem 1.2rem;
	padding-left:1.7rem;
	/* [disabled]padding-left:4rem; */	
}
.main-flex{
	background-color: #000;
	/*min-height: 94vh;*/
	width: 100 wh!important;
	/*margin: 15px;*/
	padding: 0px;
	margin-top:0rem;
}
#form{
	width:100%;
	height:100vh;
}
.form textarea {
	margin-top:4px;
	margin-bottom: 2;
	height:130px !important;
	padding:4px;
	font-size:.8rem;
	}
	.form button span{
	width:3rem;
	font-size:2rem;
	float:right;
}

/********************************************************************************************************************************/
.modal{
	z-index:999999999 !important;
	max-width:85% !important;
}
.modal-content,.modal-body{
	width:96% !important;
	margin:auto;
	
}
.modal-backdrop
{
    opacity:0.9 !important;
}

.modal-dialog{
	max-width:74vw !important;
	max-height:70vh !important;
	width:75% !important;
	position: absolute !important;
	top: 40% !important;
	z-index:999999999 !important;
	left:50% !important;
	transform:translate(-40%,-50%) !important;
	-webkit-transform:translate(-40%,-50%)!important;
	-moz-transform:translate(-40%,-50%)!important;
	-ms-transform:translate(-40%,-50%)!important;
	-o-transform:translate(-40%,-50%)!important;
}
.img-info{
	text-transform: capitalize;
	font-weight:bold;
	color: #b5d335;
}
.map{
		-webkit-filter: grayscale(80%);
	filter: grayscale(100%);
	-moz-filter: grayscale(80%);
	-o-filter: grayscale(80%);
	-ms-filter: grayscale(80%);
}
.map:hover,.map:after{
		-webkit-filter: grayscale(00%);
	filter: grayscale(0%);
	-moz-filter: grayscale(0%);
	-o-filter: grayscale(0%);
	-ms-filter: grayscale(0%);
}
/*******       Social Media buttons         *************/
 /* Style all font awesome icons */
 .icon-bar {
  position: absolute;
  bottom: 1.2rem;
  left:85%;
 /* -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);*/
}

.icon-bar a {
  display: inline;
  text-align: right;
  padding:12px 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 15px;
}

.icon-bar a:hover {
  background-color: #000;
}

.facebook {
  background: #3B5998;
  color: white;
}

.twitter {
  background: #55ACEE;
  color: white;
}

.google {
  background: #dd4b39;
  color: white;
}

.linkedin {
  background: #007bb5;
  color: white;
}

.youtube {
  background: #bb0000;
  color: white;
}

.content {
  margin-left: 75px;
  font-size: 30px;
}
.fab{		
	transition: 0.2s linear;
	font-size:36px;
	margin-right: 5px;
	color:#999;
}
.fab:hover{
	transform: scale(1.3);
	color:#b5d335;
}
.copy-right{
       display: absolute;
       justify-content: center;
	  font-size: .6rem;
	   z-index: 99999;
	   margin:auto;
          }
.socials{
	position:absolute;
	z-index: 99999;
	width:98%;
	text-align: right;
	margin-right:5%;
	bottom:8px !important;
}
.badges{
position:absolute;
	z-index: 99999;
	width:98%;
	text-align: left;
	margin-right:5%;
	bottom:8px !important;	
	margin-left:3em;
}
a.logout{
	color:#999;
	display:block;
	margin-top:10px;
}
a.logout:hover{
	color:#fff;
	display:block;
}
.txt-error{
	background-color:#FC0509;
}
.mycard{
    display:inline-block;
    width:100px;
}
		.modal-footer{
			overflow-x: scroll;
		}
			#prev{
			left:-6% !important;
			z-index: 1000;
			top:40% !important;
			position: absolute;
			opacity:0.8;
				width:12% !important;
		}
		#next{
			right:-7% !important;
			z-index: 1000;
			top:40% !important;
			position: absolute;
			opacity:0.8;
			width:12% !important;
		}
		
span {
  display:inline-flex;
  flex-grow:1;
}
.play{
    background-color: black;
    height: 25px;
    width: 40px;
    padding: 0px;
    float: left;
    margin-right: 40px;
    border-radius: 8px;
    align-content: center;
}
.ic_play{
    width: 0px;
    height: 5px;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    border-left: 15px solid #fff;
    top:10px;
    left: 26px;
    margin-left:15px;   
}
.contact-us{
    display: flex;
    width: 100%;
    height: auto;
}
.adresses{
    width: 20%;
    height: auto;
    display: grid;  
}
.map{
    width: 78%;
    height: auto; 
    padding-top: 3PX;
}
.item{
    padding: 8px 10px;
    height: 33%;
    width: 98%;   
}
.item p{
    font-size: 0.8em;
    color:white;
}
a.ph-link{
    text-decoration:none;
    color: white !important;
}
.carousel-inner img {
  object-fit: cover;
}
/*------------------------------- screen size mobile ---------------------------*/ 
@media screen and (max-device-width: 415px) and (orientation: portrait){
	
/* start of phone styles */
      img.logo{
          position:fixed;
          width: 80%;
          height: auto;
          z-index:99;
          background-color:transparent;
          top:2rem;

      }
          .socials{
              display:flex;
              justify-content: center;
			  margin-top:-1.3rem;
			  bottom: 2.4rem !important;
          }

          .badges{
             /* display:flex !important;*/
              justify-content: center;
              margin-left:1em;
          }
          .badge-img{
              max-height:3rem;
			  height:1.8rem;
          }
          .copy-right{
              display: flex;
              justify-content: center;
			  font-size: .6rem;
    		  margin-top: -.4rem !important;
          }
	.footer{
		height: 50rem;
		display: grid;
		flex-direction: column;
	}
          .footer small{
              align-content:center; 
              vertical-align: middle;
          }
      .logo{
          position:fixed;
          top:0;
          left:0;
          height:100px;
          width:100%;
          z-index:77;
          background:rgba(231,231,231,1);		
      }
      .navbar-brand{
          padding-left:20%;
          margin-left:0;
      }
      /* Carousel section  */
      .side-cover{
          display:none !important;
      }
	/*
      .carousel{
          top:10%;
          width:100%;
          min-height:100%;
      }
	*/
	/*
      .carousel-item img{
        
          width:100%;
          height:94vh;
      }
*/
	
      /*  form section  */
      .form{
          display:flex;
          flex-direction: column;
          top:0;
      }
      .form label{
          display:none;
      }
      .form input{
          margin-top:4px;
          margin-bottom: 2;
          height:40px !important;
          padding:4px;
          font-size:.8rem;
      }
      .form select {
          font-size: .8rem;
          padding:4px;
          color:#5c5c5c;
          }
      .main-flex{
          min-height:80vh;
          width:100 wh!important;
          margin:0px;
          padding:0px;

      }
      .form-head strong,.form-head p{
          font-size:1rem;
      }
      .form-head strong{
          color:#b5d335;
          lineheight:2rem;
      }
      .form-head p{
          color:#bcbcbc;
      }
      .modal-footer img{
          width: 25px !important;
      }
	.map{
		margin-right:1px;
		padding-right: 1px;
		width:auto;
	}
	.adresses{
		width: 7rem;
	}
	/*
	.img-fluid{
		max-height: 100% !important;
		width: auto !important;
		display: block !important;
	}
	*/
	}
@media screen and (max-device-width: 810px) and (orientation: portrait){
	.badges{
		
		align-items: center;
	}
	.socials{
		
	}
	.copy-right{
              display: flex;
              justify-content: center;
			  margin-top: .4rem;
          }
	.footer{
		height: 50rem;
		display: grid;
		flex-direction: column;
	}
	.carousel-item img{
	/*height:90vh;*/
	width:100%;
	height:94vh;
}
}