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

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////FONTS*/	
@font-face
	{
		font-family: CenturyGBold;
		src:url(Typos/CenturyGBold.TTF);
	}
	
@font-face
	{
		font-family: CenturyGRegular;
		src:url(Typos/CenturyGRegular.TTF);
	}
/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GENERAL*/
body
{	
	font-family: CenturyGBold;
	background-color:#FFF;
}

a
{
	text-decoration:none;
	color:#B7B1A7;
	-moz-transition: color .2s ease-in;
	-webkit-transition: color .2s ease-in;
	-0-transition: color .2s ease-in;
	transition: color .2s ease-in;	
}

#wrapper
{
	opacity:0;
	display:none;
}


/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////SPECIFICS*/
		#DivMenu
		{						
			height:215px;
			width:425px;
			float:left;
			position:absolute;
			background:#FFF;
			box-shadow: 6px 6px 6px -6px #B7B1A7;
				
		}
		
				#MenuHome h1
				{
					position:absolute;
					font-size:68px;
					margin:140px 0px 0px 0px;					
					border-bottom:solid 1px #B7B1A7;								
					display: inline-block;
					overflow: hidden;									
					line-height:1;				
				}
				
				
				
				
					.MenuHome_inner
					{
						display: inline-block;
						white-space: nowrap;
		 
						 -moz-transform: rotate(-90.0deg) rotate(-90deg);
						-o-transform: rotate(-90.0deg) rotate(-90deg); 
						-webkit-transform: rotate(-90.0deg) rotate(-90deg); 
						transform: translate(0,100%) rotate(-90deg);
	
						-moz-transform-origin: 0 0;
						-o-transform-origin: 0 0;
						-webkittransform-origin: 0 0;
						transform-origin: 0 0;					
					}
					
						.MenuHome_inner:after
						{
							 content: "";
							 float: left;						 					
						}
				
				#DivMenu h1 a
				{
					color:#000;
					-moz-transition: color .2s ease-in;
					-webkit-transition: color .2s ease-in;
					-0-transition: color .2s ease-in;
					transition: color .2s ease-in;
					
									
				}
				
				#MenuContact
				{
					position:absolute;
					font-size:36px;					
					right:280px;
					top:-37px;
					width:70px;
					display: inline-block;
					overflow: hidden;				
					line-height: 1;
				}
				
						#MenuContact a
						{
							color:	#B7B1A7;
									
						}
				
				.MenuContact__inner
				{
					display: inline-block;
     				white-space: nowrap;
	 
					 -moz-transform: rotate(-90.0deg) rotate(-90deg);
                	-o-transform: rotate(-90.0deg) rotate(-90deg); 
                    -webkit-transform: rotate(-90.0deg) rotate(-90deg); 
                    transform: translate(0,100%) rotate(-90deg);

     				-moz-transform-origin: 0 0;
					-o-transform-origin: 0 0;
					-webkittransform-origin: 0 0;
					transform-origin: 0 0;					
				}
				
					.MenuContact__inner:after
					{
						 content: "";
						 float: left;
						 margin-top: 100%;					
					}
				
				#MenuPrincipal
				{
					margin-left:175px;
					margin-top:-80px;
					float:left;
								
				}
				
						#MenuPrincipal h2
						{		
							font-size:80px;					
							color:#3D717A;										
						}
						
								#MenuPrincipal ul
						{
							margin-top:-80px;												
						}
						
								#MenuPrincipal ul li
								{
									font-family:CenturyGRegular;
									list-style-type: none;
									clear:both;
									border-bottom:1px solid #B7B1A7;
									font-size:25px;						
								}
						
				
				#ContenuMenu
				{
					position:absolute;										
					background: "";
					width:1465px;
					height:215px;
					left:447px;
					z-index:0;
								
				}
				
					
		#DivContenu
		{
			width:100%;
			height:700px;
			background-color:#1A1A1A;
			float:left;
			position:relative;
			top:225px;
			box-shadow: 6px 6px 6px -6px #B7B1A7;
			overflow:hidden;
			
		}
				
				
				
				#reel
				{
					margin-left:200px;
					float:left;
					margin-top:135px;					
				}
				
				#profile
				{
					width:500px;
					height:400px;
					margin-left:200px;				
					border-bottom:1px solid #B7B1A7;
					position:relative;
					top:121px;
					float:left;
						
				}
				
				#profile div
				{
					float:left;
					position:absolute;
				}
				
				#title h3
				{
					float:left;
					position:relative;
					font-size:105px;
					color:#B7B1A7;					
					display: inline-block;
					overflow: hidden;				
					line-height:1;
					width:400px;
					top:190px;
					left:-10px;
					z-index:2;
				}
				
					.title_inner
					{
						display: inline-block;
						white-space: nowrap;
		 
						 -moz-transform: rotate(-90.0deg) rotate(-90deg);
						-o-transform: rotate(-90.0deg) rotate(-90deg); 
						-webkit-transform: rotate(-90.0deg) rotate(-90deg); 
						transform: translate(0,100%) rotate(-90deg);
	
						-moz-transform-origin: 0 0;
						-o-transform-origin: 0 0;
						-webkittransform-origin: 0 0;
						transform-origin: 0 0;					
					}
					
						.title_inner:after
						{
							 content: "";
							 float: left;						 					
						}		
				
				#profile div p
				{
					float:right;
					position:relative;
					margin:0px 0px 0px 90px;
					color:#FFF;
					font-size:17px;
					text-align:justify;
					font-family:CenturyGRegular;
					z-index:2;					
				}
				
				#mentions
				{
					background-color:#fff;
					position:absolute;
					width:100%;
					height:20px;					
					z-index:4;
					color:#555;
					top:680px;
					font-size:15px;
					font-family:CenturyGRegular;
					text-align:right;																			
				}
				
				#mentions span
				{
					padding-right:5px;
				}

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////GEOMETRY*/	
				
.triangle1
{
	position:absolute;
	float:left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 700px 200px 0 0;
	border-color: #000 transparent transparent transparent;
	z-index:1;
}

.triangle2
{
	
	float:right;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 700px 200px;
	border-color: transparent transparent #3D717A transparent;
	z-index:1;
}

.parallelogram 
{
   width: 500px; 
   height: 178px;
   background: #555;
   -webkit-transform: skew(-17deg); 
   -moz-transform: skew(-17deg); 
   -o-transform: skew(-17deg);
   transform: skew(-17deg);
   top:401px;
   left:-27px;
   z-index:2;
}

.trapezoid 
{
   width: 180px; 
   height: 579px;
   background: #3D717A;      
   left:-180px;
   z-index:0;
 
   
}
.trapezoidMask
{	
	float:left;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 578px 180px 0 0;
	border-color: #1A1A1A transparent transparent transparent;
	left:-180px;
	z-index:0;
}
			

/*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////BEHAVIORS*/		
a:hover
{
	color:#3D717A;	
}

#MenuContact a:hover
{
	color:#3D717A;		
}

#DivMenu h1 a:hover
{
	color:#3D717A;		
}



    #slideshow
    {
    width:1465px;
    height:215px;
    overflow: hidden;
    position: absolute;
    background:#1A1A1A;
	left:447px;
	z-index:1;
	box-shadow: 6px 6px 6px -6px #B7B1A7;
    }
    .slid_1, .slid_2, .slid_3, .slid_4
    {
    position: absolute;
    width:1465px;
    height:215px;
    }
    .slid_1{left: 0;}
    .slid_2{left: 1465px;}
    .slid_3{left: 2930px;}
	.slid_4{left: 4395px;}
	
    .slider
    {
    width: 1465px;
    height: 215px;
    left:0px;
    position: absolute;
    -webkit-animation-duration: 20s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-name: anim_slide;
    -moz-animation-duration: 20s;
    -moz-animation-iteration-count:infinite;
    -moz-animation-name: anim_slide;
    -ms-animation-duration: 20s;
    -ms-animation-iteration-count:infinite;
    -ms-animation-name: anim_slide;
    animation-duration: 20s;
    animation-iteration-count:infinite;
    animation-name: anim_slide;	
	animation-play-state: running; 
    }
	
    @-webkit-keyframes anim_slide
    {
    0% {left:0px;}
	20% {left:0px;}
    25% {left:-1465px;}
	45% {left:-1465px;}
    50% {left:-2930px;}
	70% {left:-2930px;}
    75% {left:-4395px;}
	95% {left:-4395px;}    
    }
    @-moz-keyframes anim_slide
    {
   	0% {left:0px;}
	20% {left:0px;}
    25% {left:-1465px;}
	45% {left:-1465px;}
    50% {left:-2930px;}
	70% {left:-2930px;}
    75% {left:-4395px;}
	95% {left:-4395px;}
    }
    @-ms-keyframes anim_slide
    {
  	0% {left:0px;}
	20% {left:0px;}
    25% {left:-1465px;}
	45% {left:-1465px;}
    50% {left:-2930px;}
	70% {left:-2930px;}
    75% {left:-4395px;}
	95% {left:-4395px;}
    }
    @keyframes anim_slide
    {
    0% {left:0px;}
	20% {left:0px;}
    25% {left:-1465px;}
	45% {left:-1465px;}
    50% {left:-2930px;}
	70% {left:-2930px;}
    75% {left:-4395px;}
	95% {left:-4395px;}
    }

.play_commands 
{        
    position: absolute;  
    top: 25px; right: 25px;  
    z-index: 10;      
    width: 22px;  
    height: 22px;  
    text-indent: -9999px;  
    border:0 none;      
    opacity: 1;       
    transition: opacity 1s, right 1s;  
}  
 
	.play 
	{ 
		right: 55px; 
		cursor: default; 
	}  
		 
		.pause:after,  
		.pause:before 
		{  
			position: absolute;  
			display: block;  
			content: " ";  
			top:0;  
			width:38%;  
			height: 22px;  
			background: #fff;  
			background: rgba(255,255,255,0.5);  
		}
		.pause:after 
		{ 
			right:0; 
		}  
		.pause:before 
		{ 
			left:0; 
		}  
	   
	
	.play
	{  
		width: 1px;   
		height: 1px;    
		border-top: 10px solid transparent; 
		border-bottom: 10px solid transparent;  
		border-left: 20px solid #fff;   
		border-left: 20px solid rgba(255,255,255,0.5);      
		opacity: 0;
	}  


.sl_command:target ~ #slideshow .slider,  
.sl_command:target ~ #slideshow figcaption,  
.sl_command:target ~ #slideshow #timeline,  
.sl_command:target ~ #slideshow .dots_commands li:first-child a:after 
{  
	-moz-animation-play-state: paused; 
	-webkit-animation-play-state: paused; 
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused; 
	animation-play-state: paused;  
}  

#sl_play:target ~ #slideshow .slider,  
#sl_play:target ~ #slideshow figcaption,  
#sl_play:target ~ #slideshow #timeline,  
#sl_play:target ~ #slideshow .dots_commands li:first-child a:after 
{  
    animation-play-state: running;
	-moz-animation-play-state: running; 
	-webkit-animation-play-state: running; 
	-o-animation-play-state: running;
	-ms-animation-play-state: running; 
	animation-play-state: running;  
}  

.sl_command:target ~ #slideshow .pause
{ 
	opacity:0;
}

#sl_play:target ~ #slideshow:hover .pause,  
#sl_play:target ~ #slideshow .pause:focus   
{
	opacity:1;
} 

.sl_command:target ~ #slideshow .play       
{
	opacity:1; right: 25px; cursor: pointer; 
} 
 
#sl_play:target ~ #slideshow .play          
{
	opacity:0; right: 55px; cursor: default;
}