@import url('../fonts/IndieFlower.ttf');
@media only screen and (max-width: 600px) {
	header img {
		margin: 0 auto;
		width: 100%;
	}

	.view-point {
		-moz-column-count: 1;
		-moz-column-gap: 0px;
		-webkit-column-count: 1;
		-webkit-column-gap: 0px;
		column-count: 1;
		column-gap: 0px;
		line-height: 0;
	}

	#btbrowse {
		display: block;
		text-align: center;
		padding: 5% 10%;
		text-decoration: none;
		font-family: 'Indie Flower', cursive;
	}

	.logo-brand {
		width: 100%;
	}

	.cover-upload {
		padding: 5px 10% 25px 35%;
		min-height: 60px;
	}

	.left {
		clear: both;
	}

	.right {
		clear: both;
	}

	.img-preview {
		width: 100%;
		margin: 5px 0px 5px 0px;

	}

	.img-preview img {
		width: 100%;
		height: auto;		
	}

	.img-preview video {
		width: 100%;
		height: auto;		
	}
}

@media only screen and (min-width: 600px) {
	body {
		padding: 10px 100px;
	}

	header {
		min-height: 100px;
	}

	header img {
		width: 210px;
	}

	.view-point {
		line-height: 0;
		-moz-column-count: 8;
		-moz-column-gap: 0px;
		-webkit-column-count: 8;
		-webkit-column-gap: 0px;
		column-gap: 0px;
		column-count: 8;
	}

	.logo-brand {
		width: 75%;
	}

	.left {
		float: left;
	}

	.right {
		float: right;
	}

	#btbrowse {
		margin: 5%;
		float: right;
		padding: 5% 10%;
		text-align: center;
		text-decoration: none;
		font-family: 'Indie Flower', cursive;
	}

	.hidden {
		display: none;
	}

	.show {
		display: block;
	}

	.img-preview {
		/*background: black;*/
		/*width: calc((100% - 40px)/4);*/
		margin: 0px 5px 5px 5px;
	}

	.img-preview img {
		width: 100%;
		height: auto;
		max-height: 400px;
		max-width: 206px;
	}

	.img-preview video {
		width: 100%;
		height: auto;
		max-height: 400px;
		max-width: 206px;
	}
}

#btbrowse {
	color: white;
	background: #1BB76E;
	border: 1px solid #1BB76E;
	border-radius: 3px;
	font-size: 22px;
}