@charset "UTF-8";
/* CSS Document */

html {	}
body { 
	 background-color:#FFF;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
		background-repeat: no-repeat;
		min-width: 400px; 
		/*force horizontal scroll for widths <800*/ 
		width:expression(document.body.clientWidth < "1000px" "998px" : "auto" ); 
		/*set min-width for ie*/  
		font-family: 'Quicksand', sans-serif;
		font-family: 'Titillium Web', sans-serif;
		font-family: 'Alegreya Sans SC', sans-serif;
		font-family: 'Amiri', serif;
		font-family: 'Crimson Text', serif;}

/*Headings*/

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: 'Questrial', sans-serif;}

h1 { font-weight: normal; font-family: 'Questrial', sans-serif;}
h2 { font-size: 12px; color: #999; font-family: 'Quicksand', sans-serif;}
h3 { font-size: 10px; font-family: 'Gruppo', cursive;  }

p { 	font-family: 'Titillium Web', sans-serif;
	font-size:12px;
	color: #333;
	text-decoration: none;
}

a
a:link 		{ color: #000;	}
a:visited 	{ color: #000;	}
a:active 	{ color: #000;  }
a:hover 	{ color: #000;  }

/*Conteiners*/
#shell 		 { width:100%; height: auto; padding-top:10px; margin:0px auto 0px auto;}
#shell-contact { width:700px; height: 800px; padding-top:0px; margin:30px auto 0px auto; }


#header 	 { width:680px; height: 100px;  margin:10px auto 0px auto; padding:10px 20px }
#logo 		 { width:680px; height: 60px; margin:0px auto; color: #000;
	font-family:  'Alegreya Sans SC', sans-serif;
	font-size:24px;
	text-decoration: none;
	font-weight: bolder;
	letter-spacing:0.02em;
	line-height:.5em;
	text-align:center;  }

#logo a:link 		{ color: #000; font-family:  'Alegreya Sans SC', sans-serif; }
#logo a:visited 	{ color: #000; font-family:  'Alegreya Sans SC', sans-serif; }
#logo a:active 		{ color: #000; font-family:  'Alegreya Sans SC', sans-serif; }
#logo a:hover 		{ color: #000; font-family:  'Alegreya Sans SC', sans-serif; }

#menu 			{ width:800px; height:20px; padding-left:0px; margin:0px auto 0px auto; font-family: 'Titillium Web', sans-serif; }
#menu ul 		{ display: inline; vertical-align:baseline; margin-left:0px;}
#menu ul li		{ display: inline;padding:20px 10px 0px 10px; vertical-align:baseline; }
#menu ul li a 	{  padding: 0px 0px 0px 0px;text-decoration:none;}

#menu a:link 		{ color: #000;}
#menu a:visited 	{ color: #000;}
#menu a:active 		{ color:#000;}
#menu a:hover 		{ color: #666}

	
#main 				{ width:90%; height: auto; margin:10px auto; padding:0 40px; min-width: 1000px }
#video 				{ width:90%; height:auto; margin: 10px auto 0px auto;  }
#video-social 		{ width:890px ; height:auto; margin: 10px auto 0px auto;  }
#video-vertical 	{ width:20%; height:auto; margin: 0px 180px 0px 0px; float:right }
#video-instagram 	{ width:32%; height:auto; margin: 0px 160px 20px 5px; float:left }
#video-instagram3 	{ width:32%; height:auto; margin: 0px 5px 20px 5px; float:left }

#description	{ width:98%; height:auto; padding:5px; margin:20px auto;  background-color:#FFF; alignment-adjust:central }
#description a:link 		{ color: #000; text-decoration: none}
##description a:visited 	{ color: #000;}
#description a:active 		{ color:#000;}
#description a:hover 		{ color: #666}

#resume			{ width:800px; height: auto; padding:20px 0px; margin:0px auto; }

#content-wrapper { width:100%; height:auto; margin: 0px auto 20px auto; min-width: 1000px  }
#content		{ width:33.3%; height: auto; margin:10px 0px 10px 0px; float: left }
#content2		{ width:33.3%; height: auto; margin:10px 0px 10px 0px; float:left}
#content3		{ width:33.3%; height: auto; margin:10px 0px 10px 0px; float: left }
#thumbs-left	{ width:100%; height: auto; margin:5px; float: left;  }
#thumbs-center	{ width:100%; height: auto; margin:5px; float:left }
#thumbs-right	{ width:100%; height: auto; margin:5px; float:left;  }


#content-graphic{ width:50%; height: auto; margin:10px auto 10px auto; }
#graphic		{ width:600px; height: auto; margin:10px auto 10px  auto;}
#graphic-des	{ width:600px; height:100px; padding:0px 20px; margin:0px auto 30px auto;  border-width:0.1em; border-style: none none dotted none; border-color: #CCC ;}


#column1	{ width:80px; height:270px; margin:100px 10px 10px 0px; float:left; position:absolute; }
#column2	{ width:280px; height:270px; margin:100px 10px 10px 90px; float:left; position:absolute }
#column3	{ width:500px; height:270px; margin:100px 10px 10px 380px; float:left; position:absolute }

#column4	{ width:200px; height:500px; margin:410px 10px 10px 0px; float:left; position:absolute; }
#column5	{ width:150px; height:500px; margin:410px 10px 10px 220px; float:left; position:absolute }
#column6	{ width:250px; height:500px; margin:410px 10px 10px 380px; float:left; position:absolute }
#column7	{ width:250px; height:500px; margin:410px 10px 10px 640px; float:left; position:absolute }

#education	{ width:800px; height:20px; padding-top:15px; margin:40px 0px 10px 0px; padding-left:10px; padding-bottom:10px; float:left; border-width:0.1em; border-style: dotted none dotted none; border-color: #CCC }
#work		{ width:800px; height:20px; padding-top:15px; margin:250px 0px 20px 0px; padding-left:10px; padding-bottom:10px; float:left; border-width:0.1em; border-style: dotted none dotted none; border-color: #CCC }
#skill		{ width:800px; height:20px; padding-top:15px; margin:940px 0px 20px 0px; padding-left:10px; padding-bottom:10px; float:left; border-width:0.1em; border-style: dotted none dotted none; border-color: #CCC }
#skill-text	{ width:800px; height:50px; padding-top:5px; margin:0px 0px 100px 0px; padding-left:10px; padding-bottom:10px; float:left; }


#contact	{ width:300px; height:10px; margin:50px auto;  text-align: center }


#web	{ width:800px; height: auto; padding-top:15px; margin:30px 0px 10px -20px; padding-left:10px; padding-bottom:10px; float:left; border-width:0.1em; border-style: dotted; border-color: #CCC }
#web2	{ width:800px; height: auto; padding-top:15px; margin:10px 0px 10px -20px; padding-left:10px; padding-bottom:10px; float:left; border-width:0.1em; border-style: dotted; border-color: #CCC }
#web-description		{ width:600px; height: auto; margin:10px 0px 0px 0px; float:left; }
#web-description-rated	{ width:520px; height: auto; margin:10px 0px 0px 0px; float:left; }
#web-thumb				{ width:150px; height: auto; margin:0px 20px 0px 10px; float:left;}
#web-thumb-rated		{ width:228px; height: auto; margin:0px 20px 0px 10px; float:left; border-width:0.1em; border-style: dotted; border-color: #CCC }
#press			{ width:1200px; height: auto; margin: 80px auto 60px auto; text-decoration:none;}

#press ul 		{ margin-left:0px; list-style:none}
#press ul li		{padding:0px 0px 0px 0px; vertical-align:baseline; }
#press ul li a 	{  padding: 0px 0px 0px 0px;text-decoration:none;}
#press a:link 		{ color: #000;}
#press a:visited 	{ color: #000;}
#press a:active 		{ color:#000;}
#press a:hover 		{ color: #666}

#thanks	{ width:640px; height: auto; margin:150px auto 10px auto;  }


/*STYLE*/

.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.menu {
	color: #000;
	font-family: 'Questrial', sans-serif;
	font-size: 10px;
	text-decoration: none;
	font-weight: 100;
	letter-spacing: 0.3em;
}


.content {
	color: #000;
	font-family: 'Questrial', sans-serif;
	font-size: 10px;
	text-decoration: none;
	font-weight: 100;
	letter-spacing: 0.3em;
	text-align:center;
}

.description {
	color: #333;
	font-family: 'Questrial', sans-serif;
	font-size:12px;
	text-decoration: none;
	line-height:8px;
	letter-spacing:0.15em;	
	
}


.vale {
	color: #000;
	font-family: 'Alegreya Sans SC', sans-serif;
	font-size:24px;
	text-decoration: none;
	font-weight: bolder;
	letter-spacing:0.02em;
	line-height:.5em;
	text-align:center;

}

.editor {
	color: #666;
	font-family: 'Crimson Text', sans-serif;
	font-style:italic;
	font-size:12px;
	text-decoration: none;
	font-weight:100;
	letter-spacing:0.1em;
	text-align:center;
	line-height:.5em;

}

.email {
	color: #666;
	font-family: 'Crimson Text', sans-serif;
	font-style:italic;
	font-size:14px;
	text-decoration: none;
	font-weight:100;
	letter-spacing:0.1em;
	text-align:center;
	line-height:.5em;

}

.bold {
	color: #000;
	font-family: 'Questrial', sans-serif;
	font-size:14px;
	text-decoration: none;
	font-weight: normal;
	letter-spacing:0.02em;

}

.web {
	color: #333;
	font-family: 'Questrial', sans-serif;
	font-size:12px;
	text-decoration: none;
	line-height:8px;	
	
}

.thanks {
	color: #333;
	font-family: 'Questrial', sans-serif;
	font-size:14px;
	text-decoration: none;
	line-height:8px;
	text-align:center;	
	
}

.bio {
	font-family: 'Questrial', sans-serif;	text-decoration: none;
	line-height:14px;
	font-size:14px;
	color: #999;
	text-decoration:none;
	font-weight:normal;
}

.logo {
	color: #333;
	font-family: 'Questrial', sans-serif;
	font-size:14px;
	text-decoration: none;
	line-height:8px;
	text-align:center;	
	
}

.received {
	color: #999;
	font-family: 'Questrial', sans-serif;
	font-size:12px;
	text-decoration: none;
	line-height:8px;
	text-align:center	
	
}


.rollover a {     display : block;
                     width : **px;
                     height : **px;
                     background-image:url( IMG-1 ); }

.rollover a:hover { display : block;
                      width : **px;
                      height : **px;
                      background-image:url( IMG-2 ); }
					  
					  
					  
#left 				{ width:700px; margin:20px auto; }
#left-shell 				{ width:100%; margin:auto; background-color:#000 }
