@charset "utf-8";
/* CSS Document */

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	margin:0;
	background:url(tick.jpg) -999px no-repeat;
}

.logo {
	background-color:#000;
	background-image: url(ggg_logo.jpg);
	background-position: center center;
	background-size: auto 100%;
	height:0px;
	width:32%;
	padding-bottom:25%;
	float:left;
}

.intro_outer {
	padding-top:25%;
	width:100%;
	height:auto;
	background:url(upload_icon_hover.png) -999px no-repeat;
}

.intro_inner {
	width:94%;
	height:auto;
	padding:6%;
	padding-right:0%;
	font-size: 3.2vw;
	line-height:5.5vw;
	font-weight: 600;
	background:url(tick_white.jpg) -999px no-repeat;
	background-color:#e7e7e7;
}

.checklist_item {
	display: inline-block;
	border-bottom:2px solid #e7e7e7;
	cursor:pointer;
}

.checklist_item:hover {
	background-color:#f4f4f4;
}

.checklist_item_number {
	float:left;
	width:14%;
	font-size: 18.7vw;
	padding-left:2%;
	color: #cfcfcf;
}

.checklist_item_text {
	float:left;
	width:59%;
	font-size: 3.2vw;
	line-height:5.5vw;
	padding-top:5%;
	padding-bottom:5%;
	padding-right:5%
}

.checklist_item_checkbox {
	float:right;
	width:20%;
}

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

input[type="checkbox"] + label span {
    display:inline-block;
    width:45%;
    padding-bottom:45%;
	border:2px solid #dfdfdf;
	background-color:#f5f5f5;
    margin:-1px 4px 0 0;
    vertical-align:middle;
	cursor:pointer;
	margin-top:60%;
	margin-left:10%;
	background:url(tick_light.jpg) no-repeat;
	background-size:auto 100%;
}

input[type="checkbox"]:checked + label span {
    background:url(tick.jpg) no-repeat;
	background-size:auto 100%;
	border:2px solid #000;
}

.checklist_item_transformation_outer {
	width:70%;
	margin-left:16%;
	margin-right:14%;
	display:inline-block;
	max-height:0px;
	transition: max-height 1.5s cubic-bezier(0, 1, 0, 1);
	overflow:hidden;
}

.checklist_item_transformation_outer_open {
	max-height:1500px;
	transition: max-height 1s ease;
}

.checklist_item_transformation_inner {
	width:100%;
	height:auto;
	margin-bottom:10vw;
	background-color:transparent;
}

.checklist_item_transformation_invert img {
	width:100%;
	height:100%;
	-webkit-filter:  invert(100%);
	filter: invert(100%);
	background-color:#fff;
}

.checklist_item_transformation_greyscale img {
	width:100%;
	height:100%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	background-color:#fff;
}

.checklist_item_transformation_contrast img {
	width:100%;
	height:100%;
	opacity: 0.2;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	background-color:#fff;
}

@keyframes blink {
    0%   {opacity:0;}
    49%  {opacity:0;}
    50%  {opacity:1;}
    51%  {opacity:0;}
    100% {opacity:0;}
}

.checklist_item_transformation_blink_wrapper {
	border:1px solid #CCC;
	display:inline-block;
	max-width:400px;
}

.checklist_item_transformation_blink img {
	width:100%;
	height:100%;
	background-color:#fff;
	animation-name: blink;
    animation-duration: 3s;
	animation-iteration-count: infinite;
}

.checklist_item_transformation_small img {
	width:20%;
	height:20%;
	margin: 0 40%;
	background-color:#fff;
}

.checklist_item_transformation_flipped img {
	width:100%;
	height:100%;
	transform: rotate(180deg);
	background-color:#fff;
}

.span_invisible {
	display:none;
}

.span_visible {
	display:block;
}

.checklist_result {
	background-color:#000;
	height:auto;
	display:inline-block;
	padding:6%;
	color:#fff;
}

.checklist_result_text {
	width:59%;
	float:left;
	font-size: 3.2vw;
	line-height:5.5vw;
	padding-top: 2%;
	padding-right:3%;
}

.checklist_result_number {
	width: auto;
	float:right;
	font-size: 18.7vw;
	line-height: 18.7vw;
	padding-left:2%;
	color: #cfcfcf;
}

.checklist_result_source {
	font-size: 2.2vw;
	line-height:3.8vw;
	padding-top:5vw;
    display: inherit;
	color:#999;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    width:51%;
	padding-top:4%;
	padding-bottom:4%;
	padding-left:0%;
	padding-right:6%;
	text-align:center;
	margin-left:5.1%;
	margin-right:4.5%;
	margin-bottom: 6%;
	margin-top:5.5%;
	border:1px solid #888;
	border-right:2px solid #888;
	border-bottom:2px solid #888;
	float:left;
	font-size: 3.8vw;
	background-image:url(upload_icon.png);
	background-position: 88% center;
	background-repeat:no-repeat;
	background-size: 7.5%;
	font-weight:500;
	color:#000;
}

.inputfile:focus + label,
.inputfile + label:hover {
    color:#fff;
	background-color:#000;
	border:1px solid #000;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	background-image:url(upload_icon_hover.png);
	cursor:pointer;
}

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

.inputfile + label * {
	pointer-events: none;
}

.upload_success {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:active {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:focus {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:hover {
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#000!important;
	background-color:#000!important;
}

@media (min-width:800px){

body {background-color:#000;}

.logo {
	background-color:#000;
	background-image: url(ggg_logo.jpg);
	background-position: center center;
	background-size: auto 100%;
	height: 7px;
	width:130px;
	padding-bottom:100px;
	float:left;
}

.intro_outer {
	padding-top:0;
	width:100%;
	height:auto;
	background:url(upload_icon_hover.png) -999px no-repeat;
}

.intro_inner {
	width:100%;
	height:auto;
	padding:22px 0;
	padding-right:0%;
	font-size: 13px;
	line-height:21px;
	background:url(tick_white.jpg) -999px no-repeat;
	background-color:#e7e7e7;
}

.checklist_item {
	display: inline-block;
	border-bottom:2px solid #e7e7e7;
	cursor:pointer;
    width: 100%;
	background-color:#fff;
}

.checklist_item:hover {
	background-color:#f4f4f4;
}

.checklist_item_number {
	float:left;
	width:90px;
	font-size: 80px;
	padding-left:50px;
	color: #cfcfcf;
}

.checklist_item_text {
	float:left;
	width:60%;
	font-size: 14px;
	line-height:20px;
	padding-top:26px;
	padding-bottom:30px;
	padding-right:30px;
}

.checklist_item_checkbox {
	float:left;
	width:90px;
}

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

input[type="checkbox"] + label span {
    display:inline-block;
    width:50px;
    padding-bottom:0px;
	height:50px;
	border:2px solid #dfdfdf;
	background-color:#f5f5f5;
    margin:-1px 4px 0 0;
    vertical-align:middle;
	cursor:pointer;
	margin-top:28px;
	margin-left:10px;
	background:url(tick_light.jpg) no-repeat;
	background-size:auto 100%;
}

input[type="checkbox"]:checked + label span {
    background:url(tick.jpg) no-repeat;
	background-size:auto 100%;
	border:2px solid #000;
}

.checklist_item_transformation_outer {
	width:70%;
	margin-left:231px;
	display:inline-block;
	max-height:0px;
	transition: max-height 1.5s cubic-bezier(0, 1, 0, 1);
	overflow:hidden;
}

.checklist_item_transformation_outer_open {
	max-height:1500px;
	transition: max-height 1s ease;
}

.checklist_item_transformation_inner {
	width:100%;
	height:auto;
	margin-bottom:60px;
	background-color:transparent;
}

.checklist_item_transformation_invert img {
	width:100%;
	height:100%;
	-webkit-filter:  invert(100%);
	filter: invert(100%);
   	max-width: 400px;
	background-color:#fff;
}

.checklist_item_transformation_greyscale img {
	width:100%;
	height:100%;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	max-width: 400px;
	background-color:#fff;
}

.checklist_item_transformation_contrast img {
	width:100%;
	height:100%;
	opacity: 0.2;
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	max-width: 400px;
	background-color:#fff;
}

.checklist_item_transformation_small img {
	width:20%;
	height:20%;
	background-color:#fff;
	max-width: 80px;
	margin:0;
}

.checklist_item_transformation_flipped img {
	width:100%;
	height:100%;
	transform: rotate(180deg);
	max-width: 400px;
	background-color:#fff;
}

.span_invisible {
	display:none;
}

.span_visible {
	display:block;
}

.checklist_result {
	background-color:#000;
	height:auto;
	display:inline-block;
	color:#fff;
	width:100%;
	padding:0;
}

.checklist_result_text {
	width:59%;
	float:left;
	font-size: 13px;
	line-height:21px;
	margin-top:39px;
	margin-right:30px;
	margin-left:25px;
	padding:0;
}

.checklist_result_number {
	width: auto;
	float: left;
	font-size: 80px;
	line-height: 80px;
	margin-top: 30px;
	margin-right: 30px;
	margin-left: 32px;
	color: #cfcfcf;
	padding: 0;
	padding-left:20px;
}

.checklist_result_source {
	font-size: 11px;
	line-height:15px;
	padding-top:130px;
	padding-left:57px;
    display: block;
	color:#999;
	margin-bottom:20px;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

.inputfile + label {
    width:220px;
	height:auto;
	text-align:center;
	margin-left:20px;
	margin-right:20px;
	margin-bottom:20px;
	margin-top:20px;
	border:1px solid #888;
	border-right:2px solid #888;
	border-bottom:2px solid #888;
	float:left;
	font-size: 17px;
	background-image:url(upload_icon.png);
	background-position: 85% center;
	background-repeat:no-repeat;
	background-size: 7%;
	background-color:#fff;
	font-weight:500;
	color:#000;
	padding:20px;
	padding-right:40px
}

.inputfile:focus + label,
.inputfile + label:hover {
    color:#fff;
	background-color:#000;
	border:1px solid #000;
	border-right:2px solid #000;
	border-bottom:2px solid #000;
	background-image:url(upload_icon_hover.png);
	cursor:pointer;
}

.inputfile + label {
	cursor: pointer; /* "hand" cursor */
}

.inputfile + label * {
	pointer-events: none;
}

.upload_success {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:active {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:focus {
	background-color:#888!important;
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#888!important;
}
.upload_success:hover {
	color:#fff!important;
	background-image:url(tick_white.png)!important;
	background-position: 84% center!important;
	background-repeat:no-repeat!important;
	background-size: 11%!important;
	border-color:#000!important;
	background-color:#000!important;
}


.checklist_span_closed img {width:10px;}

.checklist_span_open img {width:10px;}

}