/* Portfolio Page Styles */
body{ 
	padding-top:80px; 
	background: #2c3e50;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	color: #fff;
}
.get-in-touch a{
	color: white;
}
p { font-size: 18px; line-height: 1.5; }
.well {
	border: 0;
	overflow: hidden;
	position: relative;
	height: 300px;	
	z-index: 1; /* Fix bug on webkit browsers */ }
	
.large { height: 620px; } /* Used for main content such as home, about, work and contact */

.fixed-height { height: 300px !important; } /* For spans which you want to stay the same height on devices down to 767px */
@media(max-width: 828px){
  .fixed-height { height: auto !important; }
  i{display: block !important;}
}
.no-padding { padding: 0; } /* Used for items such as sliders */



.overflow-show { overflow: visible; } /* Need when box contains .outer-box or other overlapping items */

.click { cursor: pointer; } /* Used it item is clickable */

.fluid-height { height: 100% !important; }

.tealblue { background: #556270; }
.blue {background: #00B4CC; }
.plum {background: #483e46; } 
.purple { background: #6A5E72 }
.white { background: #fff; }
.black { background: #000; }
.dkb { background: #0e2244; }
.universal { background: #01396a; }
.universal a { color: white; }
.universal a:hover { color: #ffda2f; }
.higherLevel a:hover{	color: #e12d26;}
.warOfTheWhales{
	background: -webkit-linear-gradient(#0089ad, #203072);
	background: -o-linear-gradient(#0089ad, #203072);
	background: -moz-linear-gradient(#0089ad, #203072);
	background: linear-gradient(#0089ad, #203072);

}
.alexBlue{
	background: #3876ae;
}
  

/* Content Styles */
.outer-box { 
	padding: 20px; 
	height: auto; 
	width: 111%;
	margin: 30px 0;
	position: relative;
	left: -5%; 
	left: -33px; 
	border: 5px solid #fff; 
	overflow: hidden; }


.outer-box-work { 
	padding: 20px; 
	height: auto; 
	position: relative;  
	left: -33px;  
	margin: 30px 0;  
	border: 5px solid #fff; 
	overflow: hidden; }	

.panel {
	display: none;
	position: fixed;
	top: 98px;
	width:100%;
	right:0%;
	height: 100%;
	z-index: 3;
	margin: 0;
	overflow-x:hidden;
	overflow-y: scroll;
	background-color:#323232;
	z-index: 90000; }

.panel .work {
	display:none;
	color:white;
	height: 100%;
	font-weight: 500;
	position: relative;
	padding:50px;
	padding-top: 110px;
	overflow-y: scroll;
	margin: 0 auto;

}
.panel .work a{
	color: white;
}
.closeicon {
    position:absolute;
    right: 5%;
    top: 5%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 700;
    color: #fff;
    font-size: 45px;
    cursor: pointer; }
    
.no-scroll { 
	overflow: hidden; }

.imagebg-13,
.imagebg-11,
.imagebg-9,
.imagebg-3,{
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; }
  
.imagebg-3 { background: #323232 url('../images/white-flowers.webp') no-repeat center bottom; }
.imagebg-9 { background: #323232 url('../images/floral.webp') no-repeat center bottom; }
.imagebg-11 { background: #323232 url('../images/best-decision.webp') no-repeat center bottom; }

.imagebg-13 { background: #323232 url('../images/create-your-world.webp') no-repeat center bottom; }

@media (max-width: 979px) {
  .well { height: auto; }
  .large { height: auto; }
 }
	
@media (max-width: 767px) {
  .outer-box { 
  	width: 105%;
  	left: -5%; 
  } 
}



@media(max-width: 787px){
	.portfolio-container{
		clear: both;
		padding: 20px;
	}
}		
@media(max-width: 400px){
	.backstretch{
		background-color: #2c3e50;
	}
	.backstretch img{
		height: auto !important;
		position: static !important;
		width: 100% !important;
	}

	.panel .work{
		padding: 110px 20px;
	}
	.copyright{
		font-size: 18px;
	}
	footer.wrap{
		padding: 10px;
	}
	p{
		font-size: 18px;
	}
	iframe{
		width: 100%;
	}
	.nywebImg{
		padding: 2em 0 !important;
	}
}

.semi-trans-bg::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5); /* Black with 50% opacity */
}
.semi-trans-bg p{
	z-index: 1;
	position: relative;
}