/***********************************
* General
***********************************/
html, body {
   height: 100%;
}

.wrapper, .row {
   height: 100%;
   margin-left:0;
   margin-right:0;
}

#main {
	height: 100%;
   /* background: linear-gradient(270deg, #000000, #2196f3);
    background-size: 400% 400%;
	-webkit-animation: AnimGradient 20s ease infinite;
	-moz-animation: AnimGradient 20s ease infinite;
	-o-animation: AnimGradient 20s ease infinite;
	animation: AnimGradient 20s ease infinite;*/
}

#puzzleArea {
	width: 608px;
	height: 1080px;
	overflow: hidden;
}
.landscape #puzzleArea {
	width: 1920px;
	height: 1080px;
	overflow: hidden;
}

.wrapper:before, .wrapper:after,
.column:before, .column:after {
    content: "";
    display: table;
}

.wrapper:after,
.column:after {
    clear: both;
}


@-webkit-keyframes AnimGradient {
    0%{background-position:92% 0%}
    50%{background-position:9% 100%}
    100%{background-position:92% 0%}
}
@keyframes AnimGradient { 
    0%{background-position:92% 0%}
    50%{background-position:9% 100%}
    100%{background-position:92% 0%}
}

/***********************************
* Particule
***********************************/

#particles-js {
	position: absolute;
    top: 0;
    left: 0;
	width: 608px;
    height: 1080px;
	z-index: 0;
}
.landscape #particles-js {
	width: 1920px;
    height: 1080px;
	z-index: 0;
}

/***********************************
* Hexa Grid
***********************************/
#hexagrid,
#hexagridHint {
    width: 608px;
    height: 444px;
    position: absolute;
    top: 164px;
    left: 0px;
    z-index: 300;
}

.landscape #hexagrid,
.landscape #hexagridHint {
    /*top: 115px;*/
    left: calc(50% - 304px);
}

#hexagridHint {
	z-index: 400;
	pointer-events: none;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

.hexagon {
	position: relative;
    display: inline-block;
    margin: 0px -8px;
    text-align: center;
    width: 81px;
    height: 74px;
	background-size: contain;
	background-repeat: no-repeat;
}

#pieces .hexagon { 
	position: absolute;
}
.honeycomb {
    z-index: 100;
    position: absolute;
    top: 0px;
    left: 11px;
    margin: 0 auto;
    text-align: center;
    display: block;
}
.hexagon:nth-child(even) {
  top: 38px;
}
.ibws-fix {
  /* inline-block whitespace fix */
  font-size: 0;
}

[data-color='none']{
	background: url(tiles/none.png) no-repeat;
    background-size: contain;
	visibility: hidden;
}

[data-color='hidden']{
	background: url(tiles/none.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
#hexagridHint [data-color='hidden']{
	visibility: hidden;
}


[data-color='red'] {
	background: url(tiles/red.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='green'] {
	background: url(tiles/green.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='yellow'] {
	background: url(tiles/yellow.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='blue'] {
	background: url(tiles/blue.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='purple'] {
	background: url(tiles/purple.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='orange'] {
	background: url(tiles/orange.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='brown'] {
	background: url(tiles/brown.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='teal'] {
	background: url(tiles/teal.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='blocker1'] {
	background: url(tiles/blocker.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='blocker2'] {
	background: url(tiles/blocker.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}
[data-color='blocker3'] {
	background: url(tiles/blocker.png) no-repeat;
    color: #ffffff47;
    background-size: contain;
}

#hexagridHint [data-color='blocker1'],
#hexagridHint [data-color='blocker2'],
#hexagridHint [data-color='blocker3'] {
	background: none;
}

#loadLevelJson {
    margin-right: 60px;
}

/* Hint */
.hexagon.hint {
	background: url(tiles/hover.png) no-repeat;
	background-size: contain;
	animation: fadeAnim 1s linear infinite alternate;
	z-index: 550;
	visibility: visible !important;
}
@keyframes fadeAnim {
    from { opacity: 0.4; }
    to { opacity: 1 }
}

/***********************************
* Pieces 
***********************************/
#pieces {
    width: 608px;
    height: 360px;
    position: absolute;
    top: 708px;
    left: 0px;
    z-index: 380;
}

#dropzoneLeft {
	display:none
}
#dropzoneRight {
	display:none
}
.landscape #dropzoneLeft {
    width: 638px;
    height: 927px;
    position: absolute;
    top: 164px;
    left: 0px;
    z-index: 380;
    display: block;
}
.landscape #dropzoneRight {
    width: 638px;
    height: 927px;
    position: absolute;
    top: 164px;
    right: 0px;
    z-index: 380;
    display: block;
}
.landscape #pieces {
    top: 701px;
    left: calc(50% - 304px);
	padding: 0 0 0 40px;
}
#piecesBack {
    width: 608px;
    height: 405px;
    position: absolute;
    top: 680px;
    left: 0px;
    z-index: 10;
	background: url("black-transparent.png") repeat;
}
.landscape #piecesBack {
    width: 100%;
}

.piece { 
    width: 10px;
    height: 10px;
    position: absolute;
    top: 10px;
    left: 40px;
	/*border: 1px solid #2dff07d1;*/
	-webkit-transform-origin: 50% 50% 0;
	    -ms-transform-origin: 50% 50% 0;
	        transform-origin: 50% 50% 0;
	-webkit-transform: scale(1);
	    -ms-transform: scale(1);
	        transform: scale(1);
	display: none;
}
/*.landscape #pieces .piece:not([data-ingrid='true']) { 
    width: 180px;
    height: 300px;
    position: relative;
    top: 73px !important;
    left: 0px !important;
    float: left;
}*/

#hexagrid .ui-state-hover{
	/*background-color: none !important;
	background: url(tiles/hover.png) no-repeat !important;
    color: #ffffff47;
    background-size: contain !important;*/
}
#hexagrid .ui-state-active{
	/*background-color: none !important;
	background: url(tiles/hover.png) no-repeat !important;
    color: #ffffff47;
    background-size: contain !important;*/
}

.ui-state-highlight{
	/*background: teal !important;
	border: 2px solid green !important;*/
}
.piece.dragging {
	z-index: 999 !important;
}
#pieces .hexagon {
	position: absolute;
	top: 0px;
    left: 0px;
}
#levelCompleted {
	display: none;
    background: url(levelCompleted.png) no-repeat;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 9999;
    height: 100%;
    background-size: contain;
    background-color: #000000ba;
    background-position: -5px 144px;
    pointer-events: none;
    font-size: 48px;
    text-align: center;
    line-height: 183px;
    color: white;
    text-transform: uppercase;
}
#dragZone {
	position: absolute;
    bottom: 0;
    left: 0px;
    width: 100%;
    height: 94%;
}