/* Reset Styles */
/* iphone 6+ width = 414 */
html, body, div, span {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline; 
    border-style: none;

}

html {
    line-height: 1;
}


ol, ul {
    list-style: none; 
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

caption, th, td {
    text-align: left;
    vertical-align: middle; 
}

q, blockquote {
    quotes: none;
}

q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; 
}

a img {
    border: none;
    border-style: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


/* Base Styles */

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

html {
    -webkit-font-smoothing: antialiased;
    background: #000f2c;
}



.d-none {
    display: none!important;
}
.d-block {
    display: block!important;
}

a {
	text-decoration: none;
	color: #fff;
}
a:hover {
	color: #fff;
    text-decoration: underline;
}

p {
	padding:25px 0 0 0;	
	margin:0;
}
.p-wide-sep {
	padding:2px 0 0 0;	
	margin:0;
	background-color:#050e2b;
}
.animation-true {
	-webkit-transition: all 0.4s ease-in-out!important;
	-moz-transition: all 0.4s ease-in-out!important;
	-o-transition: all 0.4s ease-in-out!important;
	transition: all 0.4s ease-in-out!important;
	-webkit-animation-delay: 0s!important;
	-webkit-transition-delay: 0.0s!important;
	-webkit-animation-duration: 0.5s!important;
	animation-delay: 0s!important;
	transition-delay: 0.0s!important;
	animation-duration: 0.4s!important;
}
.animation-true-fast {
	-webkit-transition: all 0.3s ease-in-out!important;
	-moz-transition: all 0.3s ease-in-out!important;
	-o-transition: all 0.3s ease-in-out!important;
	transition: all 0.3s ease-in-out!important;
	-webkit-animation-delay: 0s!important;
	-webkit-transition-delay: 0.0s!important;
	-webkit-animation-duration: 0.3s!important;
	animation-delay: 0s!important;
	transition-delay: 0.0s!important;
	animation-duration: 0.3s!important;
}

body {
    -webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
	
	background: #050e2b; /*url('images/self_portrait_back8.jpg') center top no-repeat fixed;*/
	
}
.back-container {
	position: relative;

	z-index: 1;
	
	display: block;
	overflow: visible;
	background: transparent;
	max-width: 100%;
	width: 100%;
	margin: 0px auto 0px auto;
	
				font-family: 'Roboto Slab', serif;
				font-weight: 400;
				font-size:  16px;
				line-height: 34px;
				color:  #6699cc;
				padding: 20px 20px 0px 20px;
				letter-spacing: 0.3px;
	
}
.floating-button {
	position:absolute;
	z-index:2;
	display:block;
	overflow:hidden;
	top:130px;
	width: 48px;
	height:48px;
	left:50%;
	margin: 0 0 0 -24px;
	background: url('images/self_portrait_button1.png') center top no-repeat;
}
.floating-head-text {
	position:absolute;
	z-index:1;
	display:block;
	overflow:hidden;
	top:495px;
	width: 100%;
	text-shadow: 0px 0px 12px rgba(0,0,0,0.4), 
		0px 0px 12px rgba(0,0,0,0.4), 
		0px 0px 12px rgba(0,0,0,0.4);
	left:50%;
	max-width:320px;
	margin: 0 0 0 -160px;
	color: #568fd8;
	line-height: 18px;
	text-align: center;
	padding:20px;
	font-size: 14px;
	font-weight:bold;
	letter-spacing: 1.0px;
	font-family: 'Roboto Slab', serif;
	opacity: 1;
}
.floating-head, .bottom-head {
	position: fixed;
	z-index: -1;
	display: block;
	overflow: hidden;
	max-width: 464px;
	width: 464px;
	max-height: 582px;
	top: 0px;
	left: 50%;
	margin: 0 0 0 -232px;
	cursor: pointer;
	/*
	background-image: url('images/self_portrait.png');
	background-position: top right;
	background-size: 350px auto;
	background-repeat: no-repeat;
	background-attachment: fixed;
	*/
}
.bottom-head {
	top: auto;
	bottom: 0px;
	height:289px;
	background-color: #050e2b;
	/*
	background-image: url('images/self_portrait_back16.png');
	background-size: 464px auto;
	background-position: center -301px;
	background-repeat: no-repeat;
	*/
}
	#story_open {
		max-width: 330px;
		height:118px;
		position:relative;
		display:block;
		overflow:hidden;
		padding:12px 0px 20px 0px;
		margin:0 auto 0 auto;
		text-align:center;
	}
    @media (max-width: 500px) {
		.floating-head-text {
		
		}
    	.floating-head {
			/*
			width: 68%;
			left: 100%;
			margin: 0 0 0 calc(-68% - 20px);
			*/
    	}
		.top-site-container {
			
		}
		.back-container {
			padding: 20px 0px 0px 0px;	
		}

    }
.site-container {
	position: relative;
	display: block;
	overflow: visible;
	max-width: 100%;
	width: 500px;
	padding: 0;
	margin: 0 auto 0 auto;
}
.gallery-popup {
	position: fixed;
	overflow: visible;
	z-index: 20;
	background: rgba(5,14,43,0.75);
	top:0;
	left:0%;
	width:100%;	
	margin: 0 0 0 0;
	padding: 0;
	height: 0;
	opacity:0;
	cursor:pointer;
}
.gallery-hint-popup {
	position: absolute;
	z-index: 100;
	display: block;
	overflow: hidden;
	width: calc(100% - 40px);
	top: 63px;
	opacity: 0;
	height: 0;
	margin: 0;
	border-radius: 8px;
	background-color: rgba(5,14,43,0.9);
	background-image: url('images/self_portrait_btn_text.png');
	background-size: 327px 173px;
	background-position: center center;
	background-repeat: no-repeat;
}
	.top-site-container {
		margin-top: 256px;
	}
	.logo-ss {
		position: relative;
		display: block;
		overflow: hidden;
		width: 205px;
		height: 159px;
		margin: 40px auto 10px auto;		
		background: url('images/logo_ss_new2.png') left top repeat-x;
	}
	.logo-ss-name {
		position: relative;
		display: block;
		overflow: hidden;
		width: 290px;
		height: 40px;
		margin: 0px auto 0 auto;		
		background: url('images/logo_ss_new_name2.png') left top repeat-x;
		margin-bottom: 60px;
	}
    @media (max-width: 320px) {
    	.logo-ss {

    	}
    	.logo-ss-name {
			margin-bottom: 20px;
    	}
		#story_open {
			max-width: 300px;
		}
    }

	    
	    

		.tab_container {
			position: relative;
			display: block;
			overflow: hidden;
			width: 100%;
			max-width: 630px;
			margin: 0px auto 0 auto;
			padding: 40px 0 0 0;
		}

			.tab_content {
				position: relative;
				display: block;
				overflow: hidden;		
				font-family: 'Roboto Slab', serif;
				font-weight: 400;
				font-size:  16px;
				line-height: 28px;
				color:  #568fd8;
				width: 100%;
				max-width: 500px;
				margin: 0px auto 0px auto;
				padding: 0px;/*20px 20px 20px 20px;*/
				letter-spacing: 0.3px;
				background-color: #12275a;
				/*
				border-bottom-left-radius:0px;
				border-bottom-right-radius:0px;
				*/
				border-radius: 8px;
				text-align: justify;
			}
		    @media (max-width: 700px) {
		    	.tab_content {
				
		        }
		    }
		    @media (max-width: 320px) {
		    	.tab_content {
					
		        }
		    }
		    .section-title, .section-title-popup {
				position:relative;
				display:block;
				overflow:hidden;
				width:100%;
				padding: 20px;
				cursor: pointer;
				color:#568fd8; /*#99ccff*/;
			}
			.section-title-popup {
				padding: 20px 0 20px 0;
				cursor: default;
			}
				.title-left, .title-right {
					position:relative;
					display:block;
					overflow:visible;
					font-weight:bold;
					
					float: left;
					font-size:20px;
					line-height:20px;
				}
				.title-right {
					float: right;
					font-size:16px;
					line-height:23px;
				}

				.tab-content-container {
					position: relative;
					display:block;
					overflow:hidden;
					height: 0px;
					/*padding: 0 20px 0px 20px;*/
					padding: 0 20px 0px 20px;
				}
					.tab-content-for-size {
						position: relative;
						display:block;
						overflow:hidden;
						margin-top: -8px;
						color:  #568fd8!important;
					}
			.collapse, .gallery-collapse {
				position: relative;
				overflow: hidden;
				clear: both;
			}
				.gallery-collapse {
					height:0px;
					
				}

			.collapse.in {
				clear:both;	
			}
			.tab-image {
				position: relative;
				display: block;
				overflow: hidden;
				margin: 0 auto 0 auto;x
			}
				.image-next {
					position: absolute;
					z-index: 10;
					display: block;
					overflow: hidden;
					width: 50%;
					height: 100%;
					background: rgba(0,0,0,0.0);
					cursor: pointer;
					right: 0px;
					top: 63px;
				}
				.image-prev {
					position: absolute;
					z-index: 10;
					display: block;
					overflow: hidden;
					width: 50%;
					height: 100%;
					background: rgba(0,0,0,0.0);
					cursor: pointer;
					left: 0px;
					top: 63px;
				}
				.image-gallery-container {
					position: relative;
					display: block;
					overflow: hidden;
					float: left;
				}
				.image-gallery {
					position: relative;
					display: block;
					overflow:hidden;
					border-radius: 8px;
					max-width:460px;
					width:100%;
					height:auto;
					margin: 0 auto 0 auto;
				}
				.tab-image-on {
					opacity: 1;
				}
				.tab-image-off {
					opacity: 0;
				}
				.text-description {
					position: relative;
					display: block;
					overflow:hidden;
					max-width:460px;
					width:100%;
					height:auto;
					font-size:15px;
					line-height: 24px;
					padding: 12px 0 0 0;
				}
				@media (max-width: 413px) {
					.text-description {
						line-height: 20px;
					}
				}
				.text-d-on {
					opacity: 1;
				}
				.text-d-off {
					opacity: 0;
				}

				.image-btn-main-container {
					position:relative;
					display: block;
					overflow: hidden;
					margin: 0 auto 0 auto;
					width: 100%;
					text-align: center;
					padding: 0px;
					height: 35px;
				}
					.image-btn-container {
						position:relative;
						display: inline-block;
						overflow: hidden;
						margin: 0 auto 0 auto;
						text-align: center;
						padding: 0px;
						width:100%;
					}
						.image-btn-single {
							position:relative;
							display: inline-block;
							overflow: hidden;
							/*width: 12.5%;*/
							float: left;
							cursor:pointer;
						}
						.image-btn {
							position:relative;
							display: block;
							overflow: hidden;
							width: 35px;
							height:35px;
							padding: 0px;
							font-size:18px;
							font-weight: bold;
							text-align: center;
							line-height: 26px;
							margin: 0 auto 0 auto;
							font-family: Helvetica, Arial, 'sans-serif';
							border-radius: 50%;
							vertical-align: middle;
						}
						.image-btn-on {
							color: #000;
							border:solid 8px rgba(18,39,90,1);
							background: #b3fb2d url('images/self_portrait_btn_on.png') center center no-repeat;
							opacity: 1;
						}
						.image-btn-off {
							color: rgba(179,251,45,0.7);
							border: solid 3px rgba(179,251,45,0.1);
							background: rgba(0,0,0,0.0) url('images/self_portrait_btn_off.png') center center no-repeat;
							opacity: 0.7;
						}


			.tab_content a {
				color: #b3fb2d;
				font-weight: 700;
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
				box-shadow: inset 0 -1px 0 #b3fb2d;
				/*
				padding: 1px 6px 2px 6px;
				background: #b3fb2d;
				*/
				text-decoration: none;
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
				font-weight:normal;
				cursor: pointer!important;
			}
			.outside-link {
				color: #79a8e2!important;
				border-bottom: 1px solid #79a8e2!important;
				box-shadow: inset 0 -1px 0 #79a8e2!important;
				font-weight:normal!important;
				cursor: pointer!important;
			}
			.email-link {
				color: #79a8e2!important;
				border-bottom: 1px solid #79a8e2!important;
				box-shadow: inset 0 -1px 0 #79a8e2!important;
				font-weight:normal!important;
				cursor: pointer!important;
			}
			.text-link {
				line-height: 22px;
				color: #b3fb2d;
				font-weight: 700;
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
				box-shadow: inset 0 -1px 0 #b3fb2d;
				font-weight:normal;
				text-decoration: none;
				cursor: pointer;
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
			}
/* IMPORTANT FOR HOVER ON DEVICES */
		@media(hover: hover) and (pointer: fine) {
			.tab_content a:hover {
				color: #000000;
				border-radius: 3px;
				background: #b3fb2d;
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
			    text-decoration: none;
			    cursor: pointer;
				font-weight:normal;
				cursor: pointer!important;
			}
			.text-link:hover {
				color: #000000;
				border-radius: 3px;
				background: #b3fb2d; /*003b85;*/
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
				font-weight:normal;
			    text-decoration: none;
			    cursor: pointer;

			}
			.outside-link:hover {
				color: #000000!important;
				border-radius: 3px!important;
				background: #79a8e2!important;
				padding: 1px 2px 0px 2px!important;
				border-bottom: 1px solid #79a8e2!important;
			    text-decoration: none!important;
			    cursor: pointer!important;
				font-weight:normal!important;
			}
			
			.email-link:hover {
				color: #000000!important;
				border-radius: 3px!important;
				background: #79a8e2!important;
				padding: 1px 2px 0px 2px!important;
				border-bottom: 1px solid #79a8e2!important;
			    text-decoration: none!important;
			    cursor: pointer!important;
				font-weight:normal!important;
			}
		}
			
			
			
			.guys_all {
				position: relative;
				display: block;
				overflow: hidden;
				width: 160px;
				height: 100px;
			}
				#guys_story {
					background: url('images/guys_story3.png') left top no-repeat;
					float: left;
				}
				#guys_work {
					background: url('images/guys_work.png') left top no-repeat;
					float: right;
				}
				#guys_posts {
					background: url('images/guys_posts.png') left top no-repeat;
					float: left;
				}
				#guys_pitch {
					background: url('images/guys_pitch.png') left top no-repeat;
					float: right;
				}
				
		    @media (max-width: 320px) {
		    	.guys_all {
		    		width: 120px;
		    		height: 75px;
		        }
				#guys_story {
		    		margin: 25px 0 0 10px;
					background-size: 100%;
				}
				#guys_work {
		    		margin: 25px 10px 0 0;
					background-size: 100%;
				}
				#guys_posts {
		    		margin: 25px 0 0 10px;
					background-size: 100%;
				}
				#guys_pitch {
		    		margin: 25px 10px 0 0;
					background-size: 100%;
				}
		    }
			.tabs_all {
				position: relative;
				display: block;
				overflow: hidden;
				width: 250px;
				height: 40px;
				color: #b9dcff;
				margin: 34px auto 0 auto;
				padding: 14px 0 0 0;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
				font-family: 'Roboto Slab', serif;
				font-weight: bold;
				font-size:  30px;
				line-height: 30px;
				text-align:  center;
				vertical-align: middle;
				/*letter-spacing: 1.5px;*/
				background-color: #12275a;
			}
		    @media (max-width: 700px) {
		    	.tabs_all {

		        }
		    }
		    @media (max-width: 320px) {
		    	.tabs_all {

		        }
		    }
			#tabs_story {
				background: #061d49;
			}
			#tabs_work {
				background: #12275a;
			}
			#tabs_posts {
				background: #11376b;
			}
			#tabs_pitch {
				background: #254c82;
			}

				.tabs_small_text {
					position: relative;
					display: block;
					overflow: hidden;
					font-size:  15px;
					line-height: 18px;
					margin: 8px 0 0 0;
					letter-spacing: 0px;
				}
			    @media (max-width: 700px) {
			    	.tabs_small_text {
			    
					
			        }
			    }
			    @media (max-width: 320px) {
			    	.tabs_small_text {
						
			        }
			    }
	    .footer-spacer {
	    	position: relative;
	    	display: block;
	    	overflow: hidden;
	    	height: 20px;
	    	width: 100%;
	    }
	    @media (max-width: 700px) {
	    	.footer-spacer {
		    
	        }
	    }
	    @media (max-width: 320px) {
	    	.footer-spacer {
		    	
	        }
	    }
		.footer-text {
			width: 98%;
			line-height: 20px;
			font-family:'Roboto Slab', serif;
			font-size: 12px;
			line-height:24px;
			font-weight: bold;
			margin: 0px 0 5px 0;
			text-align: center;	
			color:#3565a2;
			letter-spacing: 0.6px;
		}
		
		
		
		
		
		
	.logo-all {
		position: relative;
		display: block;
		overflow: hidden;
		width: 100%;
		max-width: 768px;
		min-height: 200px;
		margin: 0px auto 6px auto;
		padding:  0 0 0 0;
	}
		.logo-group {
			position: relative;
			display: block;
			overflow: visible;
			width: 630px;
			min-height: 100px;
			margin: 0 auto 0 auto;
		}
	    @media (max-width: 650px) {
	    	.logo-group {
	    		width: 510px;
				margin: 0 auto 0 auto;
	        }
	    }			
	    @media (max-width: 500px) {
	    	.logo-group {
	    		width: 378px;
				margin: 0 auto 0 auto;
	        }
	    }
	    @media (max-width: 320px) {
	    	.logo-group {
	    		width: 360px;
				margin: 0 0 0 -5px;
				padding-top: 5px;
	        }
	    }
			.logo-single {
				position: relative;
				display: block;
				overflow: visible;
				width: 100px;
				height: 100px;
				margin: 13px;
				float: left;
				border-radius: 50%;
				box-shadow: 0px 0px 0px 8px rgba(102, 153, 204, 0.14);
			}
		    @media (max-width: 320px) {
		    	.logo-single {
					margin: 5px;
				box-shadow: 0px 0px 0px 5px rgba(102, 153, 204, 0.14);
		        }
		    }
			#logo-78L {
				background: url('images/logo_100_78l.png') left top no-repeat;
			}
			#logo-trc {
				background: url('images/logo_100_trc.png') left top no-repeat;
			}
			#logo-galluzzo {
				background: url('images/logo_100_galluzzo.png') left top no-repeat;
			}
			#logo-gsc {
				background: url('images/logo_100_gsc.png') left top no-repeat;
			}
			#logo-rgl {
				background: url('images/logo_100_rgl.png') left top no-repeat;
			}
			#logo-closetdrape {
				background: url('images/logo_100_closetdrape.png') left top no-repeat;
			}
			#logo-synergy {
				background: url('images/logo_100_synergy.png') left top no-repeat;
			}
			#logo-pnk {
				background: url('images/logo_100_pnk.png') left top no-repeat;
			}
			#logo-njcfca {
				background: url('images/logo_100_njcfca.png') left top no-repeat;
			}
			#logo-aj {
				background: url('images/logo_100_aj.png') left top no-repeat;
			}
			.text-copy {
				position: relative;
				display: block;
				overflow: hidden;
	        	width: 90%;
				color: #000000;
				margin: 0 auto 0 auto;
				padding: 20px;
				border-radius: 6px;
				font-family: 'Roboto Slab', serif;
				font-weight: 400;
				font-size:  16px;
				line-height: 22px;
				background: linear-gradient(rgba(255,255,255,0.90) 50px, rgba(255,255,255,0.55) 250px);
				box-shadow: 0px 0px 6px 4px rgba(0, 0, 0, 0.35);
				
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
	
			}
			
		    @media (max-width: 767px) {
		    	.text-copy {
		        	padding: 10px;
		        	width: 90%;
		        }
		    }
		    
			.text-copy a {
				color: #000000;
				font-weight: 700;
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
				box-shadow: inset 0 -2px 0 #b3fb2d;
				/*
				padding: 1px 6px 2px 6px;
				background: #b3fb2d;
				*/
				text-decoration: none;
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
			}
			.text-copy a:hover {
				border-radius: 3px;
				background: #b3fb2d;
				padding: 1px 2px 0px 2px;
				border-bottom: 1px solid #b3fb2d;
			    text-decoration: none;
			    cursor: pointer;

			}

		    .show-hide-element {
				position: relative;
				display: block;
				overflow: hidden;
				padding: 0 0 2px 0;
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
		    }	

		    .footer {
				position: relative;
				display: block;
				overflow: hidden;
			    -webkit-font-smoothing: antialiased;
				background: #5a849c url('images/back_tile_bottom.jpg') center bottom repeat-x;
				margin: 0px 0 0 0;
				padding: 0;
				height: 500px;
				color: rgba(255, 255, 255, .35);
				text-align: center;
		    }
			.footer a {
				color: rgba(255, 255, 255, 1.0);
				font-weight: 700;
				padding: 1px 3px 0px 3px;
				border-bottom: 3px solid #b3fb2d;
				text-decoration: none;
			}
			.footer a:hover {
				border-radius: 3px;
				background: #b3fb2d;
				color: #050e2b;
				padding: 1px 3px 2px 3px;
				border-bottom: none;
			    text-decoration: none;
			    cursor: pointer;
			}
			.story_1_href {
				/*
			    -webkit-transition: all 0.35s ease-in-out!important;
			    -moz-transition: all 0.3.5s ease-in-out!important;
			    -o-transition: all 0.35s ease-in-out!important;
			    animation-delay: 0s!important;
			    transition-delay: 0.0s!important;
			    animation-duration: 0.35s!important;
			    transition: all 0.35s ease-in-out!important;
			    */
			}