@media only screen and (max-width: 1279px) {
	#works article {
		width: 33.32%;
	}
	#works article.large {
		width: 66.65%;
	}

	#works article .description,
	#work header .description,
	#work header .details,
	#html div {
		font-size: 12px;
	}
	#html div h2 {
		font-size: 15px;
	}
	#works article .description h2,
	#work header h1, #html h1{
		font-size: 20px;
	}
}

@media only screen and (max-width: 1023px) {
	
	/* Works */
	#works article {
		width: 100%;
		overflow: hidden;
		float: none;
	}
	#works article.large {
		position: static !important;
		width: 100%;
		height: auto !important;
	}
	#works article.small{
		display: inline-block;
		overflow: hidden;
		width: 49.9%;
		height: auto !important;
		vertical-align: super;
	}
	#works article.large .thumbnail, #works article.small .thumbnail {
		position: static !important;
		width: auto;
		height: auto;
	}
	#works article .description {
		position: static !important;
		width: 100%;
		display: inline-block;
		padding: 0 0 20px 0;
	}
	#works article.large .description, #works article.small .description {
		width: 100%;
		height: auto;
	}
	#works article .description h2, #works article .description .catcher {
		padding: 0 10px;
		height: auto;
	}
	#works article .thumbnail img {
		position: static !important;
		width: 100%;
		height: auto;
	}
	#works article.large img, #works article.small img {
		width: 100% !important;
		height: auto !important;
	}
	/* Infos */
	#html {
	width: 100%;
	}
	/* Medias */

	#work header {
	width: 50%;
	}
	#work .medias {
	margin-left: 50%;
	}
	#work .medias article {
		position: static !important;
		overflow: visible;
		float: none;
		width: 49%;
		height: auto;
	}
	#work .medias article.large {
		position: static !important;
		width: 100%;
		height: auto !important;
	}
	#work .medias article.small{
		position: static !important;
		display: inline-block;
		vertical-align: top;
		width: 100%;
		height: auto !important;
	}
	#work .medias article.large .thumbnail, #work .medias article.small .thumbnail {
		position: static !important;
		width: auto;
		height: auto;
	}
	#work .medias article .thumbnail img {
		position: static !important;
		width: 100%;
		height: auto;
		display: block;
	}
	#work .medias article .thumbnail .description {
		display: none;
	}
	#work .medias article.large .video video {
		display: block;
	}
	#work .medias article.large img, #work .medias article.small img {
		width: 100% !important;
		height: auto !important;
	}
	
}
@media only screen and (max-width: 900px) {
	#works article.small{
		width: 49.9%;
	}
}
@media only screen and (max-width: 767px) {
	#btn_menu {
        display: flex;
    }
    #header {
        height: auto;
    }
    #header #logo {
        float: left;
        margin: 20px 0;
        height: auto;
        line-height: 38px;
    }
    #header nav {
        background: white;
        position: relative;
        left: 0;
        top: 0;
        z-index: 40;
        width: 100%;
        clear: both;
        overflow: hidden;
        max-height: 0;
        text-align: center;
        transition: all 0.5s ease;
    }
    #header nav.open {
        max-height: 1000px;
        text-align: center;
    }
    #header nav #menu {
        text-align: center;
        padding-left: 0;
        float: none;
    }
    #menu li {
        display: block;
        line-height: normal;
        margin-left: 0;
        padding: 7px 0px;
        border-top: solid #8c8c8c 1px;
    }
	#menu li a {
		font-size: 20px;
		color: #8c8c8c;
	}
	
	/* Medias */
	#work header {
	position: static !important;
	width: 100%;
	padding-bottom: 20px;
	}
	#work .medias {
	margin-left: 0;
	}
	#work .medias article {
		width: 100%;
	}
	/* Works */
	#works article.small {
		width: 100%;
	}
}
@media only screen and (max-width: 350px) {
	#btn_menu {
		width: 50px;
		height: 40px;
		margin-top: 14px;
		margin-right: -9px;
	}
	#btn_menu.close {
		width: 25px;
		height: 25px;
	}
	#header #logo {
		font-size: 18px;
		margin: 16px 0;
	}
	#menu li a {
		font-size: 16px;
	}
}