/*---------------------------------
@media all and (min-width: 1024px) and (max-width: 1280px)
@media all and (max-width: 480px)

-----------------------------------*/



/*---------------------------------
	IMPORTS
-----------------------------------*/
@import url(css/reset.css);

/*---------------------------------
	HTML ELEMENTS
-----------------------------------*/

a{color:#4D99E0;outline:0;cursor: pointer}
a:active{color:inherit;}
a:visited{}
a:hover{}

strong,b{color:#ff6d02;font-weight:bold;}
em,i{font-style: italic;}


/*---------------------------------
	LAYOUT
-----------------------------------*/
*{}

body{
margin:0;
padding:0;
color:#efefef;
background:#0f132f;
font-size: 100%;
line-height: 150%;
font-weight: normal;
text-shadow: 0 0 1px transparent; /* google font pixelation fix */
font-family: 'Josefin Sans', sans-serif;
}

wrap{ 
width:100%;
height: auto;
}

/*---------------------------------
	hamburger menu
-----------------------------------*/

#nav-btn{     
cursor: pointer;     
height: 9%;    
opacity: 0;     
position: absolute;     
left: 0;     
width: 8%;     
z-index: 100; } 

#nav-btn + label{     
display: block;     
height: 0.6%;     
height: 5%;     
left: 2%;     
position: absolute;     
right: 6%;     
top: 5%;     
width: 3.95%; } 

#nav-btn + span{     
background-color: #ff6d02;     
cursor: pointer;     
display: block;     
height: 0.6%;     
position: absolute;     
left: 2%;     
top: 5%;     
width: 3.95%;     
z-index: 99; } 

#nav-btn + span::before, 
#nav-btn + span::after{     
background-color: #ff6d02;     
content: "";     
display: block;     
height: 100%;     
left: 0;     
position: absolute;     
width: 100%; } 

#nav-btn + span::before{     
top: -300%; } 

#nav-btn + span::after{     
bottom: -300%; } 

#nav-btn:checked + span{     
background-color: #0f132f; } 

#nav-btn + span::before, 
#nav-btn + span::after{     
transition-delay: 0.3s, 0s;     
transition-duration: 0.3s, 0.3s; } 

#nav-btn + span::before{     
transition-property: top, transform; } 

#nav-btn + span::after{     
transition-property: bottom, transform; } 

#nav-btn:checked + span{     
background: none; } 

#nav-btn:checked + span::before{     
top: 0;     
transform: rotate(45deg); } 

#nav-btn:checked + span::after{     
bottom: 0;     
transform: rotate(-45deg); } 

#nav-btn:checked + span::before, 
#nav-btn:checked + span::after{     
transition-delay: 0s, 0.3s; } 

#nav-btn:checked ~ nav{     
left: 0px;     
opacity: 100;     
position: fixed;     
visibility: 1;     
z-index: 98; } 

#nav-btn:checked ~ nav ul{     
transform: translate(-50%, -50%); } 

nav{     
background: #0f132f none repeat scroll 0% 0%;     
height: 100%;     
opacity: 0;     
position: absolute;     
top: 0%;     
transition: opacity 0.5s ease 0s, 
visibility 0s ease 0.5s;     
visibility: 0;     
width: 100%;     
z-index: -1; } 

nav ul{     
left: 50%;     
moz-transition: all 1s ease-in-out;     
o-transition: all 1s ease-in-out;     
position: absolute;     
top: 50%;     
transform: translate(-50%, 0%);     
transition: all 1s ease-in-out;     
webkit-transition: all 1s ease-in-out; } 

nav li{     
font-family: 'Josefin Sans', sans-serif;
font-weight: 600;
font-size: 3em;     
list-style: none;     
padding-bottom: 20%;     
text-align: center; } 

nav ul li a:hover{     
color: #ff6d02; } 

nav li a{     
color: #ccc;     
text-decoration: none; }


/*---------------------------------
	HEADER
-----------------------------------*/

#header{
background-color: #0f132f;
color: #ff6d02;
text-align: center;
height: 10%; 
}

#header p{
font-family: 'Josefin Sans', sans-serif;
font-size: 2.5em;
letter-spacing: 0.7em;
line-height: 0.4em;
margin-left: 3%;
}

#header a{
text-decoration: none;
color: #ff6d02;  
}

/*---------------------------------
	BODY
-----------------------------------*/

#main{
text-align: center;
padding-top: 8%;
}

#resume_main{
text-align: center;
padding-top: 8%;
}

#main a{
text-decoration:underline;
color:#ffffff;
}

#main a:hover{
color: #ff6d02;  
}

#main h4{
color: #ff6d02;  
padding-bottom: 2%;
}

#resume_main h4{
color: #ff6d02;  
padding-bottom: 2%;
}

#main h2{
color: #ff6d02; 
padding-top: 14%;
letter-spacing: 0.3em;
font-family: 'Josefin Sans', sans-serif;
}

#main p{
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
line-height: 1.6em;
margin-top: -1%;
padding: 0 12%;
letter-spacing: 0.01em;
}

#resume_main p{
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
line-height: 1.6em;
margin-top: -1%;
padding: 0 23%;
letter-spacing: 0.01em;
}

#download a{
background-color:#ff6d02;
color:#ffffff;
font-family: 'Josefin Sans', sans-serif;
font-size:1em;
padding: 0.9% 0.7% 0.6% 0.7%;
text-decoration:none;
}

#download{
padding-top: 3%;
text-align: center;   
}

#social_icons{
text-align: center;
}

#social_icons img{
padding: 1%;
width:3%;
}

.bottom{
text-align: center;
color: #ff6d02;  
padding-top: 9%;
padding-bottom:1%;
}

.bottom a{
color:#ff6d02;
text-decoration: none;
}

#work{
color: #ff6d02;  
text-align: center; 
margin-top: 1%;
}

#work .col_3{
width:25%;
}

.thumbnails{
padding: 0% 20%;
}

.thumbnails .col_6{
width:45%;
padding-left: 1.5%;
}

.thumbnail{
position: relative; 
}

.thumbnail img{
width:100%;
}

.thumbnail_text{
position: absolute; 
background-color: #0f132f; 
opacity:0.9; 
max-width:100%;
width:100%;
bottom: 1.3%;
padding: 1% 0% 0% 0%;
}

.thumbnail .thumbnail_text a{
font-size: 1.5em;
text-decoration: none;
color: #ffffff;
}

.thumbnail_text a:hover{
color: #ff6d02;
}

.thumbnail_subhead{
color:#808080;
font-size: 0.8em;
}

#intro{
margin-top: 10%;
padding-left: 6%;
width: 97%;
}

#intro h3{
color: #ff6d02;
margin-left: 8%;  
}

#intro .col_6{
width: 50%;
margin:0;
padding:0;
}

#intro img{
width:100%; 
}

#intro .project_title{
margin-top: 0.5%; 
}

.project_title p{
margin-left: 8%;  
margin-right: 20%;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
line-height: 1.4em;
}

.quizzical_mockuptext{
text-align: center;
padding: 0 20%;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.5em; 
line-height: 1.4em;
}

.project_sub_container{
display:inline-block;
max-width: 50%;
vertical-align: baseline;
padding: 4%;
}

.project_sub_title{
display: inline-block;
color: #808080;
margin-bottom: 6%;
font-size: 1em;
letter-spacing: .09em;
text-transform: uppercase;
}

.project_sub_description{
font-style: italic; 
}

#mac_view{
padding-bottom: 10%;
}

#mac_view img{
width:100%;
height: auto; 
}

#mac_view h4{
color:#ff6d02;
font-size: 1.5em;
margin-left: 8%;
margin-top: 2%;
}

#mac_view p{
text-align: center;    
}

.mac_picture_purejoy{
text-align: center;
width:60%;
margin-left:20%;
}

.mac_picture_artvan{
text-align: center;
width:60%;
margin-left:20%;
}

#ipad_view{
margin-left: 8%;
margin-top: 10%;
}

#ipad_view h4{
color:#ff6d02;
font-size: 1.5em;
}

.ipad_picture1{
width:90%;
margin-top: -5%;
}

.panache_pic2{
width:60%;
margin-left:20%;
padding-bottom: 10%;
}

#viewport_label{
color: #ff6d02;
margin-left: 8%;
}

#viewport_label h4{
padding-top: 1%;
}

#viewport_label p{
width:75%;
color:#ffffff;
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
line-height: 1.4em;
padding-top: -5%;
}

#viewport_label img{
width:60%;
padding-top: 10%; 
margin-left:15%;
}

#pure_joy_extras{
padding-top: 10%;
color: #ff6d02;
margin-left: 8%;
}

#pure_joy_extras .chakras_img{
width:50%;
padding-top: 2%;
margin-left: 25%;
}

#pure_joy_extras .social_img{
width:50%;
padding-top: 10%;
margin-left: 25%;
}

#color_palette{
margin-left: -5%;
}

#panache_color_palette{
margin-left: -5%;
}

#quizzical_color_palette h4{
text-align: center;
color: #ff6d02;
}

#quizzical_color_palette{
text-align: center;
margin-bottom: -8%;
}

#quizzical_color_palette img{
width:10%;
}

#quizzical_allcolors{
margin-left: -3%;
}

.color_palette_header h4{
text-align: center;
}

.color_block{
display: inline-block;   
padding-left: 5%;
}

.color_circle1{
background-color: #b8b2b2;
height: 4em;
width: 4em;
border-radius: 50%;
}

.panache_color_circle1{
background-color: #63337D;
height: 4em;
width: 4em;
border-radius: 50%;
}

.quizzical_color_circle1{
background-color: #716254;
height: 4em;
width: 4em;
border-radius: 50%;
}

.color_circle2{
background-color: #a81e3a;
height: 4em;
width: 4em;
border-radius: 50%;
}

.panache_color_circle2{
background-color: #eeeeee;
height: 4em;
width: 4em;
border-radius: 50%;
}

.quizzical_color_circle2{
background-color: #bf4d28;
height: 4em;
width: 4em;
border-radius: 50%;
}

.color_circle3{
background-color: #fafafa;
height: 4em;
width: 4em;
border-radius: 50%;
}

.panache_color_circle3{
background-color: #f7f7f6;
height: 4em;
width: 4em;
border-radius: 50%;
}

.quizzical_color_circle3{
background-color: #80bca3;
height: 4em;
width: 4em;
border-radius: 50%;
}

.quizzical_color_circle4{
background-color: #e5ac27;
height: 4em;
width: 4em;
border-radius: 50%;
}

.color_title{
color:#808080;
font-size: 0.9em;
text-align: center;
padding-top: 5%;
}

#typography .type_title{
color:#808080;
font-size: 0.8em;
text-align: left;
}

#typography .type_description1{
color:#ffffff;
font-size: 0.9em;
text-align: left;
font-family: font88857;
padding-bottom: 2%;
}

#typography .type_description2{
color:#ffffff;
font-size: 0.9em;
text-align: left;
font-family: 'Open Sans', sans-serif;
padding-bottom: 2%;
}

#art_van_mobile{
color: #ff6d02;
padding-top: 5%;
}

#art_van_mobile h4{
margin-left: 8%;
padding-bottom: 5%;
}

#art_van_mobile img{
width:60%;
height: auto;
padding-left: 20%;
}

#intro .style1{
width:45.5%;    
}

#style_view{
padding-top: 10%;
padding-left: 10%;
width:90%; 
padding-bottom: 4%;
}

#style_view img{
width:90%;
}

#mockup_view{
padding-top: 5%;
padding-left: 10%;
width:90%;   
}

#mockup_view img{
width:90%;
}

.project_title h3{
line-height:1em;    
}

.view_book{
color: #ffffff;
text-align: center; 
font-size: 2em;
}

.view_book a{
text-decoration: none;
color: #ff6d02;
}

#intro .panache1{
width:44%;       
}

#mac_view1{
padding-top: 4%;
width:100%;
height:45em;
background-size:70%;
position: relative; 
}

#mac_view1 img{
width:100%;
height: auto; 
}

#mac_view1 h4{
color:#808080;
font-size: 1.5em;
text-align: center;
margin-top: 19%;
}

.mac_picture1{
text-align: center;
width:51.35%;
height:50.9%;
overflow: scroll;
position: relative;
top:19.5%;
left:24.42%;
}

#mac_view2{
margin-top: -10%;
width:100%;
height:45em;
background-size:70%;
position: relative; 
}

#mac_view2 img{
width:100%;
height: auto; 
}

#mac_view2 h4{
color:#808080;
font-size: 1.5em;
text-align: center;
margin-top: 21%;
}

.mac_picture2{
text-align: center;
width:51.35%;
height:51%;
overflow: scroll;
position: relative;
top:22.9%;
left:24.42%;
}

.panache_article{
padding-left:10%;
width:90%;
height:43em; 
}

.panache_article img{
width:90%;   
margin-top: 2%;
margin-left: 6%;
}

.panache_article h4{
color:#808080;
font-size: 1.5em;
margin-top: 2%;
margin-left: 30%;
}

.contri_title{
color:#808080;
font-size: 1.5em;
margin-left: 12%;
}

#ipad_view .col_6{
float: left;
}

#ipad_view img{
width:100%;
height: auto;
}

#viewport_label .panache_contri{
width:90%;
margin-left: -10%;
}

#quizzical_mockup1{
padding-top: 10%;
padding-left: 10%;
width:90%; 
padding-bottom: 10%;
}

#quizzical_mockup1 img{
width:90%;
}

#intro .quizzical_intro{
margin-top: -2%;    
}

#logos_intro .col_6{
width:30%; 
padding-left: 9%;
padding-right: 3%;
}

#logos_all{
padding-top: 10%;
margin-bottom: -15%;
}

#logo_pics1 .col_6{
width:40%;
margin-left: 6%;
padding-bottom: 5%;
margin-top: -3%;
}

#logo_pics2 .col_6{
width:40%;
margin-left: 6%;
padding-bottom: 5%;
}

#logo_pics3 .col_6{
width:35%;
margin-left: 10%;
padding-bottom: 5%;
}

#logo_pics4 .col_6{
width:40%;
margin-left: 3%;
padding-bottom: 5%;
}

#logo_pics5 .col_6{
width:40%;
margin-left: 5%;
padding-bottom: 6%;
}

#logo_pics1 .vespa1{
padding-top: 12%;    
}

#logo_pics1 h4{
color: #ff6d02;
margin-left: 6%; 
padding-top: 5%;
}

#logo_pics2 h4{
color: #ff6d02;
margin-left: 6%; 
padding-top: 5%;
padding-bottom: 3%;
}

#logo_pics3 h4{
color: #ff6d02;
margin-left: 6%; 
padding-top: 5%;
padding-bottom: 3%;
}

#logo_pics3 .quizzical1{
padding-top: 12%;    
}

#logo_pics4 h4{
color: #ff6d02;
margin-left: 6%; 
padding-top: 5%;
padding-bottom: 3%;
}

#logo_pics4 .artvan1{
padding-top: 10%;  
width:50%;
}

#logo_pics5 h4{
color: #ff6d02;
margin-left: 6%; 
padding-top: 5%;
padding-bottom: 5%;
}

#logo_pics5 .purejoy1{
padding-top: 5%;    
}



/*---------------------------------
	HEADINGS
-----------------------------------*/
h1,h2,h3,h4,h5,h6{
line-height: 150%;
margin:0 0 18px 0;
font-weight: 900;
}

h1{
font-size:48px;
font-weight: 900;
}

h2{
font-size:4em;
}

h3{
font-size:2.5em;   
}

h4{
font-size:1.5em;
letter-spacing: 0.05em;
}

h5{
font-size:1.3em;
letter-spacing: 0.05em;
}

h6{
font-size:1.2em;
}


/*---------------------------------
	PARAGRAPHS
-----------------------------------*/
p {
margin:10px 0;
}

/*---------------------------------
	LISTS
-----------------------------------*/
ul, ol{
display:block;
padding:0;
margin:0;
list-style: none;
float: left;
}

li{
padding:5px 0;
margin:0;
}

ul.alt1 li {}
ul.alt2 li {}


/*---------------------------------
	HR
-----------------------------------*/
hr{clear:both;border-bottom:0;border-top:1px dotted  #572e21;border-right:0;border-left:0;margin:30px 0;min-height: 0;height:1px;}
hr.alt1{border-style: solid; background-color: #572e21; margin-left: 1%; margin-right:1%; margin-top: 5%;}
hr.alt2{border-style: dashed;}


/*---------------------------------
	FOOTER
-----------------------------------*/

#footer{
padding:15% 8% 5% 8%;  
}

#footer a{
padding-top: 10%;
padding-bottom: 5%;
font-size: 1.3em;
text-decoration: none;
color:#ff6d02;
}

#footer .previous{
float:left;
}

#footer .next{
float:right;
}

/*---------------------------------
	GRID
-----------------------------------*/
.grid{
max-width:1280px;
margin:0 auto;
padding:0 2em;
}

.grid.flex {
width:100%;
max-width:100%;
padding:0;
margin: 0;
}

.row{
display:block;
overflow:hidden;
clear:both;
}

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}


/* ---------------------------------
	
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
	
----------------------------------- */

@media all and (min-width: 768px) and (max-width: 1024px) {

#header p{
font-size: 2em;
line-height: 1em;
letter-spacing: 0.6em;
margin-left: 5%;
}

#intro .col_6{
width:100%;
margin:0;
padding:0;
}

#intro p{
margin-left: 3%;    
}
    
#intro h3{
color: #ff6d02;
margin-left: 3%; 
padding-top: 5%;
}
          
.project_sub{
margin-left: -1%;    
}

#menu{
width:100%;
height:100%;
}

#work .col_3{
width:100%;
}
    
.thumbnails{
margin: 0 auto;
padding: 0% 25%;
}
    
.thumbnail{
position: relative; 
margin-bottom: 8%;
}

#ipad_view h4{
width:70%;  
}
    
#viewport_label{
margin-left: 8%;   
}
    
#viewport_label p{
width:85%;
}
    
#pure_joy_extras{
padding-bottom: 10%;   
}

#color_palette{
margin-left: -5%;    
}

.panache_article{
padding-bottom: 70%;    
}

#panache_color_palette{
padding-left: -1%;       
}
    
#viewport_label .panache_contri{
width: 65%;
margin-left: 3%;
}
    
#intro .style_1{
padding-bottom: 5%;    
}

#style_view{
width:110%;  
margin-left: -5%;
}
    
#logos_intro{
width:70%;  
margin-left: 8%;
}
    
#logos_all{
margin-left: 8%;
}
    
#logo_pics3 h4{
margin-bottom: -5%;    
}

hr.alt1{
margin-top: -5%;    
}


    
}

/* ---------------------------------
	
iPad
	
----------------------------------- */


@media all and (min-width: 480px) and (max-width: 768px) {

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 480px;}{
	}

    
#header p{
font-size: 2em;
line-height: 0.5em;
letter-spacing: 0.6em;
margin-left: 5%;
}

#intro .col_6{
width:100%;
margin:0;
padding:0;
}
    
#intro p{
margin-left: 3%;    
}
    
#intro h3{
color: #ff6d02;
margin-left: 3%; 
padding-top: 5%;
}
          
.project_sub{
margin-left: -1%;    
}

#menu{
width:100%;
height:100%;
}

#work .col_3{
width:100%;
}
    
.thumbnails{
margin: 0 auto;
padding: 0% 25%;
}
    
.thumbnail{
position: relative; 
margin-bottom: 8%;
}

#ipad_view h4{
width:70%;  
}
    
#viewport_label{
margin-left: -2%;   
}
    
#pure_joy_extras{
padding-bottom: 10%;   
}
    
#color_palette{
margin-left: -5%;    
}

.panache_article{
padding-bottom: 70%;
}
    
#panache_color_palette{
margin-left: -1%;       
}
    
#viewport_label .panache_contri{
width: 65%;
margin-left: 3%;
}
    
#intro .style_1{
padding-bottom: 5%; 
width:30%;
}

#style_view{
width:110%;  
margin-left: -5%;
}
    
#logos_intro{
width:70%;  
margin-left: 8%;
}
    
#logos_all{
margin-left: 8%;
}
    
#logo_pics3 h4{
margin-bottom: -5%;    
}

    
}

/* ---------------------------------
	
iPhone
	
----------------------------------- */



@media all and (max-width: 480px) {
	
	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*320*/}{
	}

#intro .col_6{
width: 100%;
margin:0;
padding:0;
}
    
#intro h3{
color: #ff6d02;
margin-left: 8%; 
padding-top: 5%;
}
   
#header p{
font-size: 2em;
line-height: 01em;
letter-spacing: 0.1em;
margin-left: 10%;
}

#menu{
width:100%;
height:100%;    
}

#work .col_3{
width:100%;
text-align: center;
}

.thumbnails{
margin: 0 auto;
padding: 0% 6%;
}
    
.thumbnail{
position: relative; 
margin-bottom: 8%;
}  

.mac_picture_purejoy{
text-align: center;
width:80%;
margin-left:5%;
}

#ipad_view h4{
width:70%;  
}
    
#viewport_label img{
margin-left: 12%;
}
    
.project_sub{
margin-left: 5%;    
}
      
#pure_joy_extras{
padding-bottom: 10%;
}
    
#pure_joy_extras .chakras_img{
margin-left: 15%;        
}
    
#pure_joy_extras .social_img{
margin-left: 15%;        
}
    
.mac_picture_artvan{
text-align: center;
width:90%;
margin-left:5%;
}
    
.ipad_picture1{
width:130%;
margin-top: -5%;
margin-left: -20%;
}
    
#art_van_mobile img{
width:100%;
height: auto;
padding-left: 0;
}

.panache_pic2{
width:100%;  
margin-left: -5%;
}
    
#quizzical_color_palette .quizzical_logo{
width:20%;    
}
    
.quizzical_mockuptext{
padding: 0 10%;
}
    
#intro .style_1{
padding-bottom: 5%;    
}
    
#intro{
padding-left: 1%;    
}

#style_view{
width:100%;
padding-top: 10%;
padding-left: 5%;
}
    
.view_book{
font-size: 1.5em;
}
    
.project_title h3{
line-height:1em;
margin-top: 5%;
}
    
#logos_intro{
width:70%;  
margin-left: 8%;
}
    
#logo_pics1  .col_6{
width:80%;
}
    
#logo_pics2  .col_6{
width:80%;
}
    
#logo_pics3  .col_6{
width:80%;
}
    
#logo_pics4  .col_6{
width:80%;
}
    
#logo_pics5 .col_6{
width:80%;
}
    
#logos_all{
margin-left: 3%;
}
    
#logo_pics3 h4{
margin-bottom: -5%;    
}
    
#main h2{
color: #ff6d02; 
padding-top: 10%;
letter-spacing: 0.2em;
line-height: 1em;
font-family: 'Josefin Sans', sans-serif;
}
    
#main h5{
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
}
    
#resume_main p{
font-family: 'Josefin Sans', sans-serif;
font-size: 1.2em; 
line-height: 1.3em;
margin-top: -1%;
padding: 0 15%;
letter-spacing: 0.01em;
}
    
#download a{
padding: 1.3% 0.7% 0.4% 0.7%;
}

hr.alt1{
top: 3%;    
}
    
.project_title p{
margin-left: 8%;  
margin-right: 8%;
}
    
.panache_article h4{
color:#808080;
font-size: 1em;
margin-top: 2%;
margin-left: 30%;
}

.contri_title{
color:#808080;
font-size: 1em;
margin-left: 12%;
}
    
#social_icons img{
padding: 1%;
width:8%;
}
    
    
}

/*---------------------------------
	ADD-ONS
-----------------------------------*/

::-moz-selection { color:#ffffff; background: black; }
::selection { color:#ffffff; background: black; }


.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}