/* Clearfix */
.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {

}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

.hidden{
	display: none;
}

/* Para Common Tags */
.text-error{
	padding: 10px 15px;
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
}
.text-info{
	padding: 10px 15px;
	color: #3a87ad;
	background-color: #d9edf7;
	border-color: #bce8f1;

}
.text-success{
	padding: 10px 15px;
	color: #468847;
	background-color: #dff0d8;
	border-color: #d6e9c6;
}

div.collage_main_container_inner{
	/*width: 150%;*/
	width:100%;
}

.canvas {

}

#main {
	background: #f5f0ec; /* Old browsers */
}

.main-color {
	/*background: none!important;*/



}
#header {
	background: none!important;
	background: url('images/top7.jpg') no-repeat bottom center!important;
	-webkit-background-size: cover!important;
	-moz-background-size: cover!important;
	-o-background-size: cover!important;
	background-size: cover!important;
	border-bottom-width: 2px!important;

	/* stick header */
	position: fixed;
	width:100%;
	top:0;

	-webkit-box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.45)!important;
    -moz-box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.45)!important;
    box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.45)!important;


}

#main {
	margin: 6em auto!important;
}

@media only screen and (max-width: 790px) {
	#main {
		margin: 7.5em auto!important;
	}
}

.header-color {
	background-color: rgba(255,255,255,.0)!important;
}

.header-color .kleo-main-header {
	background-color: rgba(255,255,255,.0)!important;
	border:none!important;
}

.social-header {
	border:none!important;
	background-color: rgba(255,255,255,.6)!important;

	color: #fff;
}
.social-header a {
	color: #555!important;
}


.main_collage_background {
	/*background-image: url('images/wall.jpg');*/
	position: absolute;
	width: 100%;
	top:0;
	left:0;
	position: relative;
	height: 89vh;
	padding-top:15px;

	background: url('images/wall3.jpg') no-repeat bottom center;
	/*background-image: url('images/wall.jpg');*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f5f0ec+37,b1b2ac+100 */
	/*background: #f5f0ec; /!* Old browsers *!/*/
	/*/!* IE9 SVG, needs conditional override of 'filter' to 'none' *!/*/
	/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzclIiBzdG9wLWNvbG9yPSIjZjVmMGVjIiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2IxYjJhYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9yYWRpYWxHcmFkaWVudD4KICA8cmVjdCB4PSItNTAiIHk9Ii01MCIgd2lkdGg9IjEwMSIgaGVpZ2h0PSIxMDEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);*/
	/*background: -moz-radial-gradient(center, ellipse cover, #f5f0ec 37%, #b1b2ac 100%); /!* FF3.6+ *!/*/
	/*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(37%,#f5f0ec), color-stop(100%,#b1b2ac)); /!* Chrome,Safari4+ *!/*/
	/*background: -webkit-radial-gradient(center, ellipse cover, #f5f0ec 37%,#b1b2ac 100%); /!* Chrome10+,Safari5.1+ *!/*/
	/*background: -o-radial-gradient(center, ellipse cover, #f5f0ec 37%,#b1b2ac 100%); /!* Opera 12+ *!/*/
	/*background: -ms-radial-gradient(center, ellipse cover, #f5f0ec 37%,#b1b2ac 100%); /!* IE10+ *!/*/
	/*background: radial-gradient(ellipse at center, #f5f0ec 37%,#b1b2ac 100%); /!* W3C *!/*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f0ec', endColorstr='#b1b2ac',GradientType=1 ); /!* IE6-8 fallback on horizontal gradient *!/*/


}

@media only screen and (min-width: 1600px) {
	.main_collage_background {
		height: 92vh;
	}
}

/*@media only screen and (max-width: 900px) {
	.main_collage_background {
		height: 80vh;
	}
}*/

.wallFloor {
	position:fixed;
	bottom:0;
	width:100%;
	height:60px;   /* Height of the footer */
	/*background: url(images/wallFloor.jpg) no-repeat top center;*/
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;


}
.WallCanvas {


	/*background: url(images/canvas.png) no-repeat top center 100%;*/
}



.collage_main_container{
	/*width:85%;*/
	height: 80%;

	min-height: 200px!important;

	/*overflow: auto;*/
	/*overflow-y: scroll;*/

	margin: 0 auto;
	overflow-y: hidden;

	-ms-overflow-style: -ms-autohiding-scrollbar;
	-webkit-overflow-scrolling: touch;


	-webkit-box-shadow: -1px 20px 18px 15px rgba(0,0,0,0.48);
	-moz-box-shadow: -1px 20px 18px 15px rgba(0,0,0,0.48);
	box-shadow: -1px 20px 18px 15px rgba(0,0,0,0.48);

	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#edeae5+31,d6d5d3+98 */
	/*background: #edeae5; /!* Old browsers *!/*/
	/* IE9 SVG, needs conditional override of 'filter' to 'none' */
	/*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMzElIiBzdG9wLWNvbG9yPSIjZWRlYWU1IiBzdG9wLW9wYWNpdHk9IjEiLz4KICAgIDxzdG9wIG9mZnNldD0iOTglIiBzdG9wLWNvbG9yPSIjZDZkNWQzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);*/
	/*background: -moz-radial-gradient(center, ellipse cover, #edeae5 31%, #d6d5d3 98%); /!* FF3.6+ *!/*/
	/*background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(31%,#edeae5), color-stop(98%,#d6d5d3)); /!* Chrome,Safari4+ *!/*/
	/*background: -webkit-radial-gradient(center, ellipse cover, #edeae5 31%,#d6d5d3 98%); /!* Chrome10+,Safari5.1+ *!/*/
	/*background: -o-radial-gradient(center, ellipse cover, #edeae5 31%,#d6d5d3 98%); /!* Opera 12+ *!/*/
	/*background: -ms-radial-gradient(center, ellipse cover, #edeae5 31%,#d6d5d3 98%); /!* IE10+ *!/*/
	/*background: radial-gradient(ellipse at center, #edeae5 31%,#d6d5d3 98%); /!* W3C *!/*/
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edeae5', endColorstr='#d6d5d3',GradientType=1 ); /!* IE6-8 fallback on horizontal gradient *!/*/


	/*position: relative;*/

	/*height: 80%;
	min-height: 80%;
	position: relative;
	top: 0;
	right: 0;
	bottom: 0;
	width: 300px;*/

	background: url(images/wallCanvas.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

}

div.collage_main_container .inner_single {

	position: relative;
	/*transition: 1s all;*/
	/*display: inline-flex;*/

	-webkit-flex-direction: column;
	float: left;





	/*-webkit-animation-name: spinnerWall;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 6s;

	animation-name: spinnerWall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;*/


	/*animation: switch 6s steps(1) infinite;*/

}

div.collage_main_container .inner_single2 {

	position: relative;
	/*transition: 1s all;*/
	display: inline-flex;

	-webkit-flex-direction: column;
	float: left;





	/*-webkit-animation-name: spinnerWall;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-duration: 6s;

	animation-name: spinnerWall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: 6s;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	transform-style: preserve-3d;*/


	/*animation: switch 6s steps(1) infinite;*/

}


div.collage_main_container .inner_single img {
	/*width: 100%;*/
	/*height: 100%;*/

}

@-webkit-keyframes spinnerWall {
	from { -webkit-transform: rotateY(0deg);    }
	to   { -webkit-transform: rotateY(-360deg); }
}

/* all other browsers */
@keyframes spinner {
	from {
		-moz-transform: rotateX(0deg);
		-ms-transform: rotateX(0deg);
		transform: rotateX(0deg);
	}
	to {
		-moz-transform: rotateX(-360deg);
		-ms-transform: rotateX(-360deg);
		transform: rotateX(-360deg);
	}
}


@keyframes switch {
	50% {
		-webkit-transform: rotateY(130deg); /* Safari */
		transform: rotateY(130deg);
	}
}

@media only screen and (min-width: 900px) {
	div.collage_main_container .inner_single {
		width: 1%;
		height: 1%;
	}

	div.collage_main_container .inner_single2 {
		width: 1%;
		height: 1%;
	}
}

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




	.wallFloor {
		height: 40px;
	}
	div.collage_main_container .inner_single {
		width: 2%;
		height: 2%;
	}
	div.collage_main_container .inner_single2 {
		width: 2%;
		height: 2%;
	}
}

@media only screen and (max-width: 599px) {
	.wallFloor {
		height: 40px;
	}
	div.collage_main_container .inner_single {
		width: 5%;
		height: 5%;
	}

	div.collage_main_container .inner_single2 {
		width: 5%;
		height: 5%;
	}

	div.collage_main_container {
		height: 65%!important;
	}
}

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

	.wallFloor {
		height: 30px;
	}
	div.collage_main_container {
		height: 65%!important;
	}


	div.collage_main_container .inner_single {
		width: 10%;
		height: 10%;
	}

	div.collage_main_container .inner_single2 {
		width: 10%;
		height: 10%;
	}
}



div.collage_main_container .inner_single .loading_image{
	position: absolute;
	top: 34%;
	left: 34%;
	width: 30%;
	height: 30%;
}

div.collage_main_container .html_loading{
	opacity: 0.5;
}

div.collage_main_container div.absolute_container{
	 /* position: absolute;*/
/*	  bottom: 0%;
	  right: 45%;*/
	  z-index: 1000;
}

div.action_button_container{
	/*position: fixed;*/
	background: rgba(255,255,255,0.3);
	padding: 10px;

}

div.action_button_container {
	background-color: rgba(0,0,0,0);
	position: fixed;
	z-index: 10000;
	left: 2%;
	bottom: 4%;
	z-index: 300;




}

div.drawImage {
	background: rgba(255,255,255,0.3);
	padding: 10px;
	background-color: rgba(0,0,0,0);
	position: fixed;
	z-index: 10000;
	bottom: 4%;
	z-index: 300;
	right: 2%;
}

div.drawImage span{
	font-size: 40px;
	padding: 0px 20px;
	/*background: rgba(0,0,0,0.5);*/
	/*color: white;*/
	margin: 1px;
	cursor: pointer;

	/*transition: 0.7s all;*/
}

#collage_thickbox_id {
	position:fixed!important;
	top: 1%!important;
	/*position:fixed;*/
	width: 100%;
	height: 100%!important;
}

#collage_thickbox_id .modal-content{
	padding-left: 10px;
	padding-right: 10px;
	max-height: 90vh;
	overflow:hidden;

}

#collage_thickbox_id > div.modal-dialog {
	width: 78%;
	/*max-width: 1100px;*/
}

.detailed_image_container .image_wrap {
	max-width:87%;
	-webkit-box-shadow: -1px 10px 18px 5px rgba(0,0,0,0.28)!important;
    -moz-box-shadow: -1px 10px 18px 5px rgba(0,0,0,0.28)!important;
    box-shadow: -1px 10px 18px 5px rgba(0,0,0,0.28)!important;
}

#collage_thickbox_id .wallWindowComments {
	height:83vh;
	overflow-y:scroll;

  -webkit-overflow-scrolling: touch;
}



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

	#collage_thickbox_id .modal-content{
		overflow: auto!important;
		 -webkit-overflow-scrolling: touch;
	}

	#collage_thickbox_id .wallWindowComments {
		height:64vh;
		overflow-y:visible;
	}
}





.zoomBtn {
	width:54px!important;
	height:54px!important;
	font-size: 25px!important;
	border-radius: 2%!important;
	font-weight: 200;
	border: none!important;
	outline:none!important;

	min-width: 0px!important;
	/*background-color: rgba(255,255,255,.3);*/

	background-color: rgba(0,0,0,.4)!important;
	border: none!important;
	color: #bbb!important;

	border-radius: 5px!important;

	/*background-color: #4DD0E1;*/

	color: rgba(0,0,0,.6);

	-webkit-box-shadow: 0px 4px 5px 0px rgba(50, 50, 50, 0.4);
	-moz-box-shadow:    0px 4px 5px 0px rgba(50, 50, 50, 0.4);
	box-shadow:         0px 4px 5px 0px rgba(50, 50, 50, 0.4);
}

.zoomBtn:hover {
	background-color: rgba(0,0,0,.6)!important;
	color: #eee!important;
}

div.action_button_container span{
	font-size: 40px;
	padding: 0px 20px;
	/*background: rgba(0,0,0,0.5);*/
	/*color: white;*/
	margin: 1px;
	cursor: pointer;

	/*transition: 0.7s all;*/
}
/*
div.collage_main_container span img{
  width: 100% !important;
  height: 100% !important;
}
*/
div.action_button_container span:hover{
	/*background-color: rgba(255,255,255,.6);*/
}


/*
div.collage_main_container::-webkit-scrollbar {
    width: 5px;
}

div.collage_main_container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

div.collage_main_container::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  outline: 1px solid slategrey;
}*/

/* My Brick Wall Temp CSS */
.detailed_image_container .image_wrap{
	position: relative;
  	display: inline-block;
}
.detailed_image_container .image_wrap a.wall_image{
	position: absolute;
	text-decoration: none;
	color: rgb(245, 97, 97);
	font-weight: bold;
	font-size: 22px;
  	right: 15px;
  	top: 10px;
	font-family: cursive;
}
/*
#TB_ajaxContent .single_image_popup_container .image_wrap img{
	width: 90%;
}
*/
/* For mobile Version */
@media only screen and (max-width: 768px) {

	#TB_window{
        left: 1% !important;
        margin-left: 0px !important;
        width: 93% !important;

        top: 3% !important;
        margin-top: 0px !important;
        height: 90%;
        overflow-y: scroll;

    }
    #TB_ajaxContent{
        width: 98% !important;
    }
    #TB_ajaxContent textarea{
        width: 75%;
    }
}
@media only screen and (max-width: 1100px) {
    div.collage_main_container{
		/*overflow: scroll;*/
	}
}