/* XX-SMALL MOBILE: LIGHT BLUE; ************************************/

@media only screen and (min-width: 20em) {

	/****************************** STRUCTURE ************************************/

	/* full-width wrapper with grey background*/
	#profile_intro-wrapper{
		width: 100%;
		background-color: #f7f7f7;
		padding-top: 50px;
		margin: 2em 0 2em 0;
		float: left;
	}

	/* partial-width wrapper with grey background*/
    #profile_intro{
       /* border: 1px solid lightblue;*/
        width: 95%;
        margin: 0 2.5%;
		padding-bottom: 30px;
        float: left;
    }
    .profile_label{
       /* border: 1px solid red;*/
        font-family: "Roboto";
        font-weight: 300;
        font-size: 1.25em;
        border-bottom: 5px solid black;
        display: inline-block;
        margin-bottom: 1em;
    } 
    .profile{ 
        color: lightgrey;
        border-bottom: 5px solid #CDCDCD;
    }

	/****************************** MEDIA TYPES (TABLE) ************************************/

    table.media_types{
		/*border: 1px solid lightblue;*/
        font-family:'Roboto', sans-serif;
        font-size: .9em;
        line-height: 1.25em;
        font-weight: 300;
        color: #676767;
    	width: 45%;
    	margin: 0 0 1em 2em;
    	float: right;
    }
    .media_types tr{
    	vertical-align: top;
    	padding-bottom: 10px; 
    	display: block;
    }
    .media_types td{
    	vertical-align: top;
    }
    .media_types img{
    	width: 15px;
    	height: 15px;
    	margin-right: 7px;
	}

	/****************************** SOCIAL MEDIA PULLOUT SHELF ************************************/
	
	.social_dropdown{
		/*border: 1px solid lightblue;*/
		width: 100%;
		margin: 1em auto 0 auto;
		position: relative;
		display: inline-block;
		cursor: pointer;
	}
	.social_dropbtn{
		background-color: none;
		border: none;
		margin-left: 40px;
		display: block;
	}	
	.social_dropdown-content{
		/*border: 1px solid cyan;*/
		position: absolute;
		top: 0;
		left: 100px;
		float: left;
		display: none;
		z-index: 1;
	}
	.social_dropdown-content a{
		/*border: 1px solid cyan;*/	
		text-decoration: none;
		padding: 5px 0 0 0;
		float: left;
		display: block;
	}
	/* Show the dropdown menu on hover */
	.social_dropdown:hover .social_dropdown-content {cursor: pointer;}
	/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
	.show {display: block;}
	img#social_btn{
		/*border: 1px solid red;*/
		width: 40px;
		height: 40px;
		margin: 0 auto;
		padding: 0;
	}
	img#social-media_logos{
		/*border: 1px solid red;*/
		width: 25px;
		height: 25px;
		margin: 0 10px;
		padding: 0;
	}


	/****************************** PORTFOLIO ************************************/

    #port_content{
        /*border: 1px solid red;*/
        width: 100%;
        margin: 0;
        float: left;
        background-color: white;
    }	
	/*container for headline, copy, artwork*/
	.port_content-block{
		width: 100%;
		padding: 50px 0 20px 0;
		float: left;
		margin-top: 1em;
	}
	.port_block-hed{
		/*border: 1px solid pink;*/
		font-family: "Roboto Slab", serif;
		font-size: 1.25em;
		line-height: 1.5em;
		font-weight: 500;
    	color: #838bb1;
		margin-bottom: 1em;
		width: 100%;
		float: left;
	}
	.profile_text, .port_block-text{
		font-family: "Roboto", sans-serif;
		font-size: 1em;
		line-height: 1.5em;
		font-weight: 300;
		padding: 0 0 1em 0;
		/*margin-bottom: 1em;*/
 	   	color: #676767;
 	   	width: 100%;

	}

}

/** X-SMALL: SMARTPHONES LANDSCAPE: LIME *************************************/

@media only screen and (min-width: 30em) {

    #profile_intro{
        /*border: 1px solid lime;*/
        width: 90%;
        margin: 0 5%;
        float: left;
    }
    .profile_label{
        font-size: 1.5em;
    } 
	.port_block-hed{
		font-size: 1.5em;
	}
    table.media_types{
    	width: 140px;
    }
    .promo_text{font-size: 1.25em;}	
	img#social-media_logos{	margin: 0 30px;	}
}

/** SMALL: TABLETS PORTRAIT: PINK; *************************************/

@media only screen and (min-width: 48em) {

    #profile_intro{
       /* border: 1px solid pink;*/
        width: 80%;
        margin: 0 10%;
        float: left;
    }
    table.media_types{
    	width: 140px;
    }
	.promo_text{font-size: 1.25em;}	

}

/** MEDIUM: TABLET LANDSCAPE / DESKTOP: YELLOW; *************************************/

@media only screen and (min-width: 64em) {

    #profile_intro{
       /* border: 1px solid yellow;*/
        width: 700px;
        margin: auto;
        display: block;
        float: none;
    }
    table.media_types{
    	width: 140px;
    }
	.promo_text{font-size: 1.5em;}	
}

/* LARGE: DESKTOP: ORANGE; ************************************/

@media only screen and (min-width: 85.375em) {

    #profile_intro{
    	/*border: 1px solid orange;*/
	}
    table.media_types{
    	width: 140px;
    }
	.promo_text{font-size: 2em;}		
}

/* X-LARGE: DESKTOP: CYAN; ************************************/

@media only screen and (min-width: 120em) {

    #profile_intro{
    	/*border: 1px solid cyan;*/
    }
}

/* XX-LARGE: DESKTOP: RED; ************************************/

@media only screen and (min-width: 160em) {

    #profile_intro{
    	/*border: 1px solid red;*/
    }
}