.skill {
	width: 100vw;
	max-width: 1000px;
	margin: 3% auto 4% auto;
}
.skill > div{
	display: inline-block;
	vertical-align: top;
	width: 67%;
	padding: 0 0 0 2%;
	margin: 0;
}
.skill img{
	width: 30%;
	display: inline-block;
	vertical-align: top;
}
.video-container{
	position: relative;
    padding-bottom: 14%!important;
    padding-top: 30px!important; 
    height: 0; 
    overflow: hidden;
    width: 30%!important;
    display: inline-block;
	vertical-align: top;
	padding-left: 0!important;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.skill h1{
	margin: 0;
	font-size: 2em;
	font-weight: 200;
}
.skill ul{
	padding: 0 0 0 3%;
	margin: 0;
}
.skill li{
	text-align: left;
	font-size: 0.95em;
	font-weight: 300;
	margin: 0 0 1% 0;
	line-height: 1.4;
}
.projects{
	/*padding: 2% 0 0 2%;*/
}
.projects a{
	text-decoration: none;
	font-weight: 100;
	color: #fff;
	padding: 10px 20px;
	margin: 0.5% 0.25%;
	display: inline-block;
}
.projects a:hover{
	text-decoration: none;
	opacity: 0.8;
}
.projects a:first-child{
	background: #3498db;
}
.projects a:nth-child(2){
	background: #f1c40f;
}
.projects a:nth-child(3){
	background: #e74c3c;
}
.projects a:nth-child(4){
	background: #9b59b6;
}
.projects a:last-child{
	background: #1abc9c;
}

/* Media Queries */

@media only screen and (max-width: 1100px){

}

@media only screen and (max-width: 950px){

}

@media only screen and (max-width: 800px){

}

@media only screen and (max-width: 600px){
	.skills-container > div{
		width: 95vw;
		margin: 0 2vw 4vw 2vw;
	}
	.skill > div{
		width: 100%;
		padding: 0 0 0 2%;
		margin: 0;
	}
	.skill img{
		width: 100%;
	}
	.video-container{
		position: relative;
	    padding-bottom: 50%!important;
	    width: 100%!important;
	}
	.skill ul{
		margin: 0 0 0 4%;
	}
}