#boxbuttons {
	text-align: center;
	margin: 10px;
	display: block;
}

#boxbuttons .button {
	text-transform: uppercase;
	font-weight: bold;
	background: #a5d7d2;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 8px;
	margin: 8px;
	cursor: pointer;
	color: #2d373c;
}

#boxbuttons .button:hover {
	background: #2d373c;
	color: white;
}

#boxbuttons .button_icon {
	text-transform: uppercase;
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 4px;
	margin: 8px;
	cursor: pointer;
	color: #a5d7d2;
}

#boxbuttons .button_info {
	font-weight: bold;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 8px;
	padding-right: 4px;
	margin: 8px;
	color: #a5d7d2;
}

#boxbuttons .button_icon:hover {
	color: white;
}

.js-zooming-overlay {
	position:absolute;
	top:0; bottom:0;
	left:0; right:0;
	z-index:200;  
	background: rgba(255, 255, 255, 0.5);
	cursor:pointer;
}

.js-zooming-overlay_img, .js-zooming-overlay_div{
	position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: black;
}

label {
	display: inline-block;
	cursor: pointer;
	position: relative;
	padding-left: 20px;
	margin-right: 8px;
	margin-left: 8px;
	color: #a5d7d2;
	font-weight: bold;
}

label:hover {
	color: white;
}



input[type=checkbox] {
	display: none;
}

label:before {
	content: "";
	display: inline-block;
	height: 32px;
	position: absolute;
	left: 0;
	bottom: -4px;
}



input[type=checkbox]:checked + label:hover:before {
	color: white;
}

input[type=checkbox] + label:hover:before {
	color: white;
}


input[type=checkbox]:checked + label:before {
	font-family: FontAwesome;
	content: "\f046";
	color: #a5d7d2;
	text-align: left;
    line-height: 32px;
}

input[type=checkbox] + label:before {
	font-family: FontAwesome;
	content: "\f096";
	color: #a5d7d2;
	text-align: left;
    line-height: 32px;
}

/*  SECTIONS  */
body, html {
	height: 100%;
	background-color: #2d373c;
	font-family: Helvetica;
	line-height:1.4em;
}

.left{
  float:left;
}

.box{
	position: relative;
	width: 100%;   /* desired width */
	max-width: 800px;
    margin: 0 auto;
}

.box:before{
	content: "";
	display: block;
	padding-top: 100%;  /* initial ratio of 1:1*/
}

@media (orientation: landscape) and (max-aspect-ratio: 3/2) and (max-device-height: 850px) { 
	.box{
		position: relative;
		width: 200%;   /* desired width */
		margin: 0 auto;
	}
}

.sectionholder {
	position: absolute;
	top: 0; right: 0; bottom: 50px; left: 0;
}

.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 0 1%;
	cursor:pointer;
}

.col:first-child {
	margin-left: 0;
}


/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}

.group:after {
	clear:both;
}

.group {
	zoom:1; /* For IE 6/7 */
}
                                                     
/*  GRID OF TWO  */
.span_1_of_2 {
	width: 49.5%;
	height: 100%;
	opacity: 1;
	background-color: white;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.section_2{
	height: 49.5%;
}

.span_1_of_4 {
	width: 24.25%;
	height: 100%;
	opacity: 1;
	background-color: white;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center; 
}

.section_4{
	height: 24.25%;
}

.span_1_of_6 {
	width: 15.83%;
    height: 100%;
    opacity: 1;
    background-color: white;
	background-size: contain;
    background-repeat: no-repeat;
    background-position: center; 
}

.section_6{
	height: 15.83%;
}

#maincontentcontainer {
	width: 100%;
}
  
#maincontent{
	clear: both;
	width: 80%; /* 1000px / 1250px */
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1200px / 13 */
	margin: 0 auto;
 	padding: 1em 0px;
 	color: #333;
	line-height: 1.5em;
	position: relative;
}
    
.maincontent{
	clear: both;
	width: 80%; /* 1000px / 1250px */
	font-size: 0.8125em; /* 13 / 16 */
	max-width: 92.3em; /* 1200px / 13 */
	margin: 0 auto;
 	padding: 1em 0px;
	color: #333;
	line-height: 1.5em;
	position: relative;
}