.config_container{
	display:flex;
	flex-direction:wrap;
	height:100%;
	text-align:left;
	position:relative;
	overflow:hidden;
	transition:all ease-in-out 0.8s;
}

.config_container ul{
	list-style:none !important;
	padding:0px !important;
}

.config_container.blur div:not(.config_info){
	-webkit-filter: blur(2px);
	filter: blur(2px);
}

.config_container .config_view{
	flex:6;
	position:relative;
}

.config_container .config_buttons{
	flex:1;
	overflow:hidden;
	height:100%;
	position:relative;
}

.config_container .config_buttons .loader{
	position:absolute;
	z-index:99999;
	height:100%;
	width:100%;
	background-color:rgba(255,255,255,0.7);
	color:#00b2f4;
	font-size:2.0vmin;
	display:none;
}

.config_container .config_buttons .loader.open{
	display:block;
}

.config_container .config_buttons .loader img{
	width:30%;
}

.config_container .config_view .background{
	height:100%;
	width:100%;
	background-size:cover !important;
}

.config_container .config_buttons .drag_button{
	padding:0px 2vmin 1vmin 2vmin;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	/* Required to make elements draggable in old WebKit */
	-khtml-user-drag: element;
	-webkit-user-drag: element;
	cursor: move;
	max-width:38.2vmin;
	overflow:hidden;	
}

.config_container .config_buttons .drag_button.done{
	background:url(/images/config_done_icon.png) top 10.5vmin left 2vmin no-repeat;
	background-size:2.2vmin;
}

.config_container .config_buttons .drag_button .title{
	font-size:2.2vmin;
	line-height:2.5vmin;
	color:#009fe3;
	text-transform:uppercase;
	padding-top:10px;
}

.config_container .config_buttons .drag_button .image{
	text-align:center;
}

.config_container .config_buttons .drag_button .image img{
	width:75%;
}

.config_container .animated{
	/*animation: MoveUpDown 5s ease-in-out infinite;*/
	position: absolute;
	right:0;
  	top:0;
	z-index:2;
}

.config_container .animated img{
	width:11vw;
}

.config_container .config_view .layer,
.config_container .config_view .layer_finish{
	height:100%;
	width:100%;
	background-size:cover !important;
	position:absolute;
	top:0px;
	/*clip-path:polygon(0px 0px, 100% 0%, 0% 40%, 0% 100%);*/
}

.config_container .config_view .layer div,
.config_container .config_view .layer_finish div{
	position:absolute;
}

.config_container .config_view .layer.lr,
.config_container .config_view .layer_finish.lr,
.config_container .config_view .layer.lr div,
.config_container .config_view .layer_finish.lr div,
.config_container .config_view .layer.tb div,
.config_container .config_view .layer_finish.tb div{
	left:0px;
	top:0px;
}

.config_container .config_view .layer.rl,
.config_container .config_view .layer_finish.rl,
.config_container .config_view .layer.rl div,
.config_container .config_view .layer_finish.rl div{
	right:0px;
	top:0px;
}

.config_container .config_view .layer.bt,
.config_container .config_view .layer_finish.bt,
.config_container .config_view .layer.bt div,
.config_container .config_view .layer_finish.bt div{
	left:0px;
	top:auto;
	bottom:0px;
}

.config_container .config_view .layer_finish.animate{
	opacity:1 !important;
	transition:opacity ease-in-out 1s;
}

.config_container .config_view .layer.animate,
.config_container .config_view .layer.lr.animate,
.config_container .config_view .layer.rl.animate,
.config_container .config_view .layer.tb.animate,
.config_container .config_view .layer.bt.animate{
	width:100% !important;
	height:100% !important;
	opacity:1 !important;
	transition:height ease-in-out 3s,width ease-in-out 5s,clip-path ease-in-out 5s,top ease-in-out 0.5s;
}

.config_container .config_view .layer.lr.animate,
.config_container .config_view .layer.rl.animate,
.config_container .config_view .layer.tb.animate,
.config_container .config_view .layer.drop.animate{
	top:0 !important;
}

.config_container .config_view .layer.bt.animate{
	bottom:0 !important;
}

.config_container .config_view .layer.lr.animate{
	clip-path:polygon(0% 0%, 100% 0%, 85% 100%, 0% 100%) !important;
}

.config_container .config_view .layer.rl.animate{
	clip-path:polygon(15% 0%, 100% 0%, 500% 100%, 0% 100%) !important;
}

.config_container .config_view .layer.tb.animate{
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 85%) !important;
}

.config_container .config_view .layer.bt.animate{
	clip-path:polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important;
}


svg{
	position:absolute;
	top:0px;
	left:0px;
	z-index:99;
}

.config_info{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	height:100%;
	overflow:hidden;
	font-size:2.0vmin;
	font-family:"Avenir Roman", sans-serif;
	bottom:-100%;
	transition:all ease-in-out 0.8s;
	opacity:0;
	z-index:99999;
}

.config_info.open{
	opacity:1;
	bottom:0px !important;
}

.config_info table{
	vertical-align:bottom;
}

.config_info table tr td{
	position:relative;
}

.config_info table tr td img{
	width:35vmin;
	height:auto;
	position:absolute;
	bottom:0px;
	z-index:99;
}

.config_info table tr td table tr td table tr td img{
	height:15vmin !important;
	width:auto !important;
	position:relative !important;
}

.config_info table tr td table tr td table tr td a{
	color: #fff;
	background-color: #009fe3;
	display: inline-block;
	position: absolute;
	bottom: -6vmin;
	padding: 1vmin 4vmin;
	text-decoration: none;
	font-family: "Avenir Black", sans-serif;
}

.config_info table tr td table tr td table{
	background-color:#fff;
	border-radius:10px;
	margin-left:35vmin;
}

.config_info table tr td table tr td table tr td{
	padding:2vmin;
}

.config_info table tr td table tr td table tr td:nth-child(1){
	padding-left:8vmin;
}

.config_info .info_close{
	margin-left:35vmin;
	position:absolute;
	z-index:9999;
	display:inline-block;
	left:0px;
	top:0px;
}

.config_info .info_close img{
	width:5vmin;
	margin-left:-1vmin;
}

.config_info h4{
	font-size:2.0vmin;
	color:#00a551;
	margin:0px;
	font-family:"Avenir Black", sans-serif;
}

#layer_finish_result{
	width:100%;
	height:100%;
	background-color:#fff;
	display:none;
}

#layer_finish_result.animate{
	display:block;
}

.config_container .popup_holder{
	visibility:hidden;
	opacity: 0;
	position: absolute;
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	transition:all ease-in 0.3s;
	z-index:999;
	background-color:rgba(0,0,0,0.5);
}

.config_container .popup_holder .popup{
	width:85.3vmin;
	height:70vmin;
	margin:5vmin auto auto auto;
	position:relative;
}

.config_container .popup_holder.open{
	visibility:visible !important;
	opacity:1 !important;
}

.config_container .popup_holder .popup_layer{
	position:absolute;
	top:0px;
	left:0px;
	/*transition:width linear 0.1s;*/
}

.drag_icon{
	position:absolute;
	left:-24px;
	width:10vmin;
	height:10vmin;
	background-image:url(/images/move_icon.png);
	background-size:contain;
	/*animation: dragAnim 2s ease-in-out infinite;
	animation-fill-mode: forwards*/
}

#guidelines .click_button{
	opacity:0;
	transition:all ease-in-out 0.3s;
	position:absolute;
	cursor:pointer;
	width:4vmin !important;
	height:4vmin !important;
	margin-top:-1vmin;
	margin-left:-1vmin;
	display:block;
	text-align:center;
}

#guidelines .click_button img{
	width:2.5vmin;
	vertical-align:middle;
	margin-top:0.8vmin;
}

#guidelines .click_button.active{
	opacity:1;
}

.arrow_down {
    width: 0px;
    height: 0px;
    border-left: 3vmin solid transparent;
    border-right: 3vmin solid transparent;
    border-top: 2vmin solid #fff;
	position:absolute;
	top:2vh;
	left:50%;
	margin-left:-1.5vmin;
}

.arrow_up {
    width: 0px;
    height: 0px;
    border-left: 3vmin solid transparent;
    border-right: 3vmin solid transparent;
    border-bottom: 2vmin solid #fff;
	position:absolute;
	top:2vh;
	margin-left:-1.5vmin;
}

@keyframes dragAnim {
  0% {
    left:-2vmin;
	 opacity:1;
  }
  99% {
	 left:5vmin;
    opacity:0;
  }
  100% {
	 left:-2vmin;
    opacity:0;
  }
}

@keyframes MoveUpDown {
  0%, 100% {
    top:0px;
  }
  50% {
    top:1vh;
  }
}