@charset "UTF-8";
/* CSS Document */

body {
  
    transition: background-color .5s;
}

.sidenav {
	
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
	background-image: url("../img/slider/ddp-sidebar.png");
    background-color: #000000;
    overflow-x: hidden;
	
    transition: 0.5s;
    padding-top: 20px;
}


		
	

.sidenav a {
    padding:  8px 8px 16px;
    text-decoration: none;
    font-size: 1.0em;
    color: #000000;
    display: block;
    transition: 0.3s;
	text-align: center;
	padding-bottom: 32px;
	font-weight: 500;
	letter-spacing: 0.3em;
}

.sidenav hr
{
	width: 54%;
	margin-left: 23%;
	
	border: thin;
	background-color:#5C5C5C;
	color:#5C5C5C;
	border-color:#5C5C5C;
	height: 1px;

}
.dialogue-side-icon
{
	width: 95%;
	height: 25%;
	padding-left: 3%;
	margin-top: -15px;
	
}


.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
  
}
#content-wrapper
{
	transition: margin-left  .5s;
	margin-left: 5%;
	

	
	
}
 

			.horizonatallLine {
				
  				margin-left: 20%;
				
				width: 60%;
				height:0.05%;
				background: #000000
}
			
			.social-icons-bottom a {
				
			  display: inline-block;
				
				
			
				margin-top: 100%;
				
				
				
				 
 
					
			
			}

.menu-btn-white
{
	
	width: 55%;margin: auto;height: 6%;
	
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 0;}
  .sidenav a {font-size: 12px;margin: auto;}
	
	.dialogue-side-icon{
	width: 60%;height: 20%;padding-left: 0;margin-top: -10px;margin-left: 20%;
}

	
	.menu-btn-white
{
	
	width: 100%;margin: auto;height: 10%;
	
}
}
			
			@media screen and   (min-width: 450px) {
				.mySidenav {width: 100%;
				height: 100%;
				overflow: scroll;}
}
			
			@media screen and (max-width: 450px) {
  .vertical-image {visibility: hidden;}
.sidenavtemp{background-color: transparent;}
				#vanilla-slideshow-previous{margin-left: 0;	}
				.social-icons-bottom a img{visibility: hidden;}
				.menu-btn-white{width: 2.5em;margin-left: 5px;padding-right: 5px;height: 10%;}
				.men-white-visibi{display: none;}
				
 
}
			
				@media screen and (max-height: 550px) {
  .vertical-image {visibility: hidden;}
				.sidenavtemp{background-color: transparent;}
					#vanilla-slideshow-previous{margin-left: 0;}
					.social-icons-bottom a img{visibility: hidden;}
 
}
	
			
			.mySlides {display:none; height: 100%}
			
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

			 #content-main{
	text-align: justify;
    text-justify: inter-word;
	text-align:center;
				 letter-spacing: .1em;
	
				 font-size: 1.2em;
}
#content-main2{
	text-align: justify;
	padding:0 8% ;
	letter-spacing:0.1em;
	padding-top:2%;
		font-family: 'Open Sans', sans-serif;
	}
#content-head{
	font-size:25px;
	letter-spacing:0.1em;
	text-align:center;
	font-weight:500;
}

#service-space{
	letter-spacing:0.1em;
}

#bullets
{
	color:#b40000;
}


#content-wrapper {
	
	overflow-y: scroll;
	position: relative;
	
}

#tempnav {
	
	position: fixed;
	text-align: center;
	
}

#full-sidebar {
	
}


	.center-image{
		align-content:center;
		margin:auto;
		display:block;
		padding-top:6%;	
	}



	
hr{
	padding:0px;
	margin:-7px;
	color:#000000;
	border-height:10%;
	border-color:#000000;
	 border-width: .2em;
	 margin-left:.1%;
}
.text-content{
	 text-align: justify;
    text-justify: inter-word;
	padding-left: 0;
	margin-left: 0;
	padding-right: 1em
}
@media screen and (max-width: 768px)
{
	.text-content{
		text-align: center;
	}
	.cust-text{
		text-align: center;
	}
	.row{
		margin-right: -18px !important;
    	margin-left: 8px !important;
	}
}
.text-education{
	font-size:14px;
	letter-spacing: 0.3em;
}
.center-text{
	align-content:center;
	text-align:center;
		margin:auto;
		display:block;
	
		padding-top:5%;
	
	margin-left: 0;
		
}

.name-main{
	letter-spacing: 0.3em;
	padding-top: 2%;
	font-size: 1.3em;
	color: black;
	margin-bottom: 8px;
}

.portfolio-item {
    margin-bottom: 0;
}
.img{
	align:right;
}

#my-img
{
	/* background: url(../img/slider/Slider1080_2.jpg); */
	width: 100%;
	height: 92%;
	
	align-content: center;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	
	
	
	
	
					
}
@media screen and (max-width: 768px)
{
	#my-img{
		height: 20em;
		
		
	}
}
					

@media screen and (max-width: 768px)
{
	#team-portrait{
		height: 75%;
		width: 75%;
		margin-right: 0;
		padding-right: 0;
		
	}
	
	#name-main{
	
	font-size: 1.3em;
}


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

.padding-up-thought
{
	margin-right: 3%;
	padding-top: 3%;
	
}
}

.mono-mask 
{
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
	
	transition: filter 600ms ease;
	-webkit-transition: -webkit-filter 600ms ease;
	
}

.mono-mask:hover
{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
}
	

.category-font
{
	font-size: 0.8em;
	color:#717171;
	font-style:normal;
	margin-top: -7px;
		
		
		
		
}


.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

#map{
	
	height: 25em;

}
.text-center{
	list-style-type:none;
	text-align:justify;
	padding:10% 25%;	
	
	}
	
#icon{
	align-content:center;
	width: 30px;
	height: 30px;
	}
.center-font{
	padding:6% 30%;
	}
	.space{
		padding-left:5%;
	}
	
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
    width: 100%; /* Full width */
    padding: 12px; /* Some padding */  
    border: 1px solid #ccc; /* Gray border */
    border-radius: 8px; /* Rounded borders */
    box-sizing: border-box; /* Make sure that padding and width stays in place */
    margin-top: 6px; /* Add a top margin */
    margin-bottom: 16px; /* Bottom margin */
    resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
    background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 10px;
}
.pad{
	padding-left:20%;
	padding-top:1%;
	font-size:16px;
	}

#right-color{
	color:#A49E9F;
	

}
#spread{
	
	font-size:1.0em;
	padding-left: 10px;
	}

#phone{
	color:#A49E9F;
	font-size:0.6em;	}


#addr
{
	align-content:center;
	color: #404040
}


html,body
{
	font-family: 'Open Sans', sans-serif;
		background-color: transparent;overflow-x:hidden;
overflow-x:hidden;
	
	
}
					




.social-icons-bottom {
	
	position: absolute;
	bottom: 12px;
	left: 0;
	text-align: center;
	width: 100%;
	
}

.social-icons-bottom a img{

width: 20px;height: 20px;
	
	
}



.top-padding {
	padding-left: 5%;
	padding-top: 2%;
}

#project-name {
	font-weight: 300;
	font-size: 1.2em;
	margin-top: 20px;
}

.project-name {
	font-weight: 500;
	font-size: 1.0em;
	color: #101010;
}



  #splash {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-color: red;
    z-index: 99;
}
		
/*		#overlay{*/
/*    	display: none;*/
/*	position: fixed;*/
/*	top: 0%;*/
/*	left: 0%;*/
/*	width: 100%;*/
/*	height: 100%;*/
/*	background-color: #EDEEF0;*/
/*			background-image: url(https://dialoguedesignpartners.b-cdn.net/projects/home_banner_1771431194989.png);*/
/*	opacity: 1;*/
/*			background-repeat:no-repeat;*/
/*background-size:cover;*/
/*background-position:center;*/
/*			background-size: 100%;*/
/*			padding: 0;*/
/*	z-index:1001;}*/
		
		#image-home
		{
			position: absolute;
			top: 0;
			left: 5px;
			width: 100%;
			height: 100%;
			
			
		}
		.sidenavtempnew {
	height: 100%;
    width: 5%;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #000000;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 20px;
}
		#vanilla-slideshow
		{
			height: 100%;
		}
		#content-wrapper
		{
			height: 100%;
		}

/*

.port-img {
	
	
}

#nopadding {
	padding-top: 0;
	margin-top: 0;
	padding-left: 5%;
}

.team-line {
	padding-top: 4px;
	margin-top: 4px;
	
	
}

#team-line {
	padding-left: 40px;
	margin-left: 40px;
}

#padding-up-thought-pr {
	margin-right: 3%;
	padding-top: 0;
	margin-top: 0;
}

#no-padding {
	
}
	
	
*/


.no-padding-left {
	
}

.name-dist-img {
	height: 8px;
	padding: 0;
	margin: 0;
}

ul#filters
{
	margin-bottom: 3%;
}

.padding-up-thoughtn {
	margin-right: 3%;
	
}

#content-wrapper-portfolio {
		transition: margin-left  .5s;
	margin-left: 0;
}

/*scroll bar style */

::-webkit-scrollbar
{
  width: 2px;  /* for vertical scrollbars */
  height: 0px; /* for horizontal scrollbars */
}

::-webkit-scrollbar-track
{
  background: rgba(0, 0, 0, 0.1);
}

::-webkit-scrollbar-thumb
{
  background: rgba(0, 0, 0, 0.5);
}     

/*scroll bar style end*/

.class-ddp-addr {
	font-size: 1.0em;
	padding-top: 0;
	margin-top: 0;
}

.ddp-addr-h3 {
	font-size: 1.3em;
	padding-bottom: 0;
	margin-bottom: 0;
}

.ddp-add-subaddr {
	font-size: 0.9em;
}

.map-height {
	height: 25%;
}

.cont-height {
	height: 75%;
}

/* Small Menu */

.menu-small {
    display: inline-block;
    cursor: pointer;
					
					
}

.bar1, .bar2, .bar3 {
    width: 80%;
    height: 2px;
    background-color: #FFFFFF;
	letter-spacing: 0;
    margin: 6px 0;
    transition: 0.4s;
	
	z-index: 6666;
	
}
	
	
#menu-text {
	color: white;
	margin-left: -12%;
	font-size: 0.7em;
	letter-spacing: 0.3em;	
	
}



@media screen and (max-height: 650px) {
	
	.bar1, .bar2, .bar3 {background-color: black;}
	#menu-text {margin-left: -12%;
	font-size: 0.6em;
	letter-spacing: 0;
	}
	
	
}
@media screen and (max-width: 650px) {
	
	.bar1, .bar2, .bar3 {background-color: black;}
	#menu-text {margin-left: 0;
	}.sidenavtemp{width: 10%;}

	
}


.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;
					}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

/* Small Menu end */


	
#city-text {
	margin-top: 10%;
	font-size: 0.9em;
}

#email-text {
	font-size: 0.9em;
}

::-webkit-input-placeholder{
	color:#C6C6C6;
}

.no-pad-cont {
	margin-top: -200px;
}



#menu-main {
	letter-spacing: 0;
	
}

.form-pad {
	padding: 10px;
}

#spreadn {
	font-size:1.0em;
}

.social-icons-bottoma {
	display: inline-block;
}

.tileMe li{
	display: inline;
	float: left;
}

.tileMe {
	
	bottom: 12px;
	display: block;
	margin: auto;
	margin-left: 30%;
	
}