.hexa_contentArea { position: relative; width: 100%; float: left; overflow: hidden; }
.hexa_contentArea:before,
.hexa_contentArea:after {
	content: '';
	position: absolute; bottom: -31px; width: 100%; height: 100%; z-index: 1;
}
.hexa_contentArea:before {
	background-image: url(../img/hexapuzzle/hexa_bg_lft.png); background-repeat: no-repeat; background-position: left bottom; left: 0;
}
.hexa_contentArea:after {
	background-image: url(../img/hexapuzzle/hexa_bg_rht.png); background-repeat: no-repeat; background-position: right bottom; right:0;
}
.hexa_section { position: relative; width: 100%; float: left; }
.hexa_section:after { content: ''; background-image: url(../img/hexapuzzle/bg_btm.png); background-repeat: no-repeat; background-size: 100%; position: absolute; padding: 0 0 49%; left: 0; bottom: -540px; width: 100%; z-index: 11; }
.hexa_section .container { position: relative; }
.hexa_section .container:before { content: ''; background-image: url(../img/hexapuzzle/planet_sm.png); background-repeat: no-repeat; background-size: 100%; position: absolute; padding: 2.5%; left: 14%; top: 0; z-index: 9; }
.hexa_box { background-color: #d63a53; padding: 70px 0; width: 100%; float: left; background-image: url(../img/hexapuzzle/hexa_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: 100%; margin: 120px 0 0; position: relative; }
.hexa_box:before { content: ''; background-image: url(../img/hexapuzzle/planet_sm.png); background-repeat: no-repeat; background-size: 100%; position: absolute; padding: 8%; left: -3%; top: -2%; z-index: 9; }
.hexa_box:after { content: ''; background-image: url(../img/hexapuzzle/planet.png); background-repeat: no-repeat; background-size: 100%; position: absolute; padding: 12%; right: -9%; top: -2%; z-index: 9; }
.hexa_logo { padding-bottom: 50px; width: 100%; float: left; }
.hexa_logo img { max-width: 400px; }
.description_portfolio p { color: var(--white); font-size: 18px; }
.description_portfolio { clear: both; margin: 30px 0 50px; position: relative; }
.description_portfolio:before { content: ''; background-image: url(../img/hexapuzzle/planet_sm.png); background-repeat: no-repeat; background-size: 100%; position: absolute; padding: 6%; left: -12%; bottom: -15%; z-index: 9; }
.puzzle_store { background-color: #ef6e54; clear: both; background-image: url(../img/hexapuzzle/hexa_snow.png); }
.puzzle_store .store_box:before { display: none; }

.hexa_blocks { width: 100%; float: left; margin: 50px 0 0; }
.tech_block p { color: var(--white); font-size: 18px; }

.graphic_full { margin-left: -3%; margin-right: -3%; text-align: center; }
.graphic_full img { width: 100%; }
.daily_blocks { text-align: center; }
.daily_blocks figure { display: inline-block; width: 33.33%; text-align: center; }
.hexKeyfeat { clear: both; }
.hexa_list li { padding: 0 0 18px 62px; line-height: 1.3; font-size: 20px; color: var(--white); position: relative; }
.hexa_list li:before {
	content: '';
	background-image: url(../img/hexapuzzle/list_icon.png); background-repeat:no-repeat; background-size:100%; position: absolute; left:0; top:-2px; width:41px; height:38px;
}
.beg_block {float: left; margin-left: -3%; }
.end_block {float: right; margin-right: -3%; }
.center_block,.beg_block, .end_block {clear: both;}
.hexagraphics { width: 100%; float: left; text-align: center; margin: 0 0 30px; }
.hexagraphics figure { margin-bottom: 0; }

@media (min-width:1200px) {
	.hexa_section:after { bottom: -540px; background-size: cover;}
}
@media (max-width:1280px) {
	.hexa_contentArea:after, .hexa_contentArea:before, .hexa_section:after {display:none;}
	.graphic_full img { width: 70%; }
	.beg_block { width: 60%; }
}
@media (max-width:991px) {
	.beg_block, .end_block { width: 65%; }
	.beg_block { margin-left: -1%; }
}
@media (max-width:880px) {
  .hexa_box { margin:50px 0 0; padding:70px 0 20px; }
  .hexa_box:after, .hexa_box:before { top: -1%; }
  .hexa_section .container:after { padding: 40px; top: -25px; }
}
@media (max-width:767px) {
	.hexa_logo img {max-width:70%;}
	.hexa_list li {font-size:18px;}
	.hexa_blocks {margin:30px 0 0;}
	.center_block img {width:60%;}
	.hexagraphics { margin: 0; }
}
@media (max-width:575px) {
	.hexa_list li {padding: 0 0 10px 45px;}
}