@charset "utf-8";
/* CSS Document */
.ia_collection label {vertical-align: top;}
.ia_collection input, .ia_collection select, .ia_collection textarea {display: block; width: 100%; margin-bottom: 10px;}
.ia_collection select {height: 30px;}
.ia_collection .button {display: block; width: 100%; margin-bottom: 10px; padding: 0 10px;}

#collectionForm, #inspirationForm {margin-bottom: 20px;}

.addCollection {
	width: 46%;
	max-width: 100%;
	min-height: 144px;
	height: 144px;
	overflow: hidden;
	margin: 0 0.5% 10px 5px;
	position: relative;
	display: inline-block;
	background: #fff;
	padding: 1em;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-shadow: 2px 2px 4px 0 #ccc;
	text-align: center;
	border: 1px solid #b9a238;
	text-transform: uppercase;
}

.addCollection a {
	display: block;
	color: #b9a238;
	height: 115px;
	padding-top: 35px;
}

.masonry {
    margin: 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
}

.sortable {margin: 0; padding: 0;}
.item {
    list-style-type: none;
    display: inline-block;
    background: #fff;
    padding: 1em;
    margin: 0 0 1.5em;
    width: 100%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item img {display: block; margin: 0 auto;}
.item a {display: block; position: relative; color: #000;}
.item a:hover {font-weight: normal;}
.addImage {text-align: center; height: 200px; padding: 0; border: 1px solid #b9a238; font-family: "Proxima Nova", Arial, Helvetica, sans-serif; text-transform: uppercase;}
.addImage a {display: block; line-height: 200px; color: #b9a238;}
.addImage a:hover {font-weight: bold;}
.item .caption {display: block; padding-top: 10px; margin-bottom: 0;}
.item a span {display: none;}
.item a:hover span {display: block; background: #fff; padding: 5px; position: absolute; left: 2px; border: 1px solid;}
.item a:hover span:hover {color: #b9a238;}
.item a span.glyphicon-pencil {top: 2px;}
.item a span.glyphicon-send {top: 30px;}

#imageLargeView {display: none; border: 1px solid #ccc;}
#imageLargeView img {max-width: 100%; max-height: 100%; width: 100%; margin-top: 10px; display: block;}

#imageDetails {display: none; margin-top: 20px;}
#imageDetails input  {display: block; width: 100%;}
#imageDetails textarea {display: block; width: 100%; margin-bottom: 10px;}

.modal-body {min-height: 150px; display: table; width: 100%; table-layout: fixed;}
.modal-left, .modal-right {display: table-cell; width: 5%; vertical-align: middle; font-size: 20px;}
.modal-image {display: table-cell; width: 90%;}
.canvas {overflow: auto;}
.info-note {text-align: center; padding: 0 10px;}

.uploadImageForm {margin-bottom: 20px;}
.uploadImageForm {margin-bottom: 20px;}
#logoPreview {max-width: 187px;}

.remoteImages img {max-width: 48%; display: inline-block; margin: 0 2% 20px 0;}

.newImage img {margin-bottom: 10px;	max-width: 100%;}

.newImageForm {display: none;}
.newImageForm label, .newImageForm input, .newImageForm textarea {display: block; width: 100%;}
.newImageForm textarea {margin-bottom: 10px;}

/* Dropzone drag and drop images */
#collectionDropzone, #inspirationDropzone {
	border: 1px dashed #aea391;
	min-height: 150px;
	padding: 10px;
	margin-bottom: 10px;
}
.dz-clickable {
	cursor: pointer;
}
.dz-message {
	text-align: center;
	margin-top: 50px;
	color: #aea391;
}
.dz-max-files-reached .dz-message {display: none;}
.dz-details, .dz-success-mark, .dz-error-mark {display: none;}

@media screen and (min-width: 480px) {
	.addCollection {
		min-height: 190px;
    height: 190px;
	}
	.addCollection a {
    height: 160px;
    padding-top: 70px;
	}
	
	.ia_collection label {display: inline-block; width: 32%; margin-right: 2%;}
	.ia_collection input, .ia_collection select, .ia_collection textarea {display: inline-block; width: 66%;}
	.ia_collection .buttons {float: right; width: 66%;}
	.ia_collection .button {display: inline-block; width: 49%;}
	.ia_collection .button.third {width: 32%;}
	.ia_collection .button.wideWidth {width: 100%;}
	.ia_collection .marginRight {margin-right: 2%;}
	
	.ia_collection .modal-body .button {width: 100%;}

	.masonry {
			-moz-column-count: 2;
			-webkit-column-count: 2;
			column-count: 2;
	}
	
	.urlForm input, .uploadImageForm input {width: 65%; margin-right: 2%;}
	.ia_collection .modal-body .urlForm .button, .ia_collection .modal-body .uploadImageForm .button {width: 33%; margin: 0;}
	
	.remoteImages img {max-width: 30%;}
	
	.newImage {float: right; width: 49%;}
	.newImageForm {float: left; width: 49%;}
	.newImageForm label, .newImageForm input, .newImageForm textarea {display: block; width: 100%;}
	.newImageForm textarea {margin-bottom: 10px;}
	.newImageForm .button	 {display: block; width: 100%;}
}

@media screen and (min-width: 768px) {
	.addCollection {width: 31.4%;}
	
	.ia_collection label {display: inline-block; width: 23%; margin-right: 2%;}
	.ia_collection input, .ia_collection select, .ia_collection textarea {display: inline-block; width: 43%; margin-right: 2%;}
	.ia_collection .inputs {float: left; width: 70%;}
	.ia_collection .buttons {float: right; width: 30%;}
	.ia_collection .button.wideWidth {width: 50%;}

	#collectionForm label {width: 21%;}
	#collectionForm input, #collectionForm select, #collectionForm textarea {width: 36%;}
	#collectionForm .buttons {width: 39%;}

	.ia_collection .modal-body input, .ia_collection .modal-body select, .ia_collection .modal-body textarea {display: inline-block; width: 75%; margin-right: 0;}

	.masonry {
			-moz-column-count: 3;
			-webkit-column-count: 3;
			column-count: 3;
	}	
	
	.ia_collection .modal-body .urlForm input, .ia_collection .modal-body .uploadImageForm input {width: 65%; margin-right: 2%;}
	.ia_collection .modal-body .urlForm .button, .ia_collection .modal-body .uploadImageForm .button {width: 33%; margin: 0;}
	
	.ia_collection .modal-body .newImageForm label, .ia_collection .modal-body .newImageForm input, .ia_collection .modal-body .newImageForm textarea {display: block; width: 100%;}
	.ia_collection .modal-body .newImageForm .button {width: 100%;}	
}

@media screen and (min-width: 960px) {
	.addCollection {width: 23.2%;}
	
	#imageDetails .buttons {width: 100%;}
	#imageDetails .button {width: 100%;}	

	.masonry {
			-moz-column-count: 4;
			-webkit-column-count: 4;
			column-count: 4;
	}	
}