input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
    *height: 13px; /* 3 */
    *width: 13px; /* 3 */
}
/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

 input {
     font-size: 100%; /* 1 */
     margin: 0; /* 2 */
     vertical-align: baseline; /* 3 */
     *vertical-align: middle; /* 3 */
 }
 
 /*
  * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
  */
 
 input {
     line-height: normal; /* 1 */
 }
 input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

.tn-box {
	width: 30%;
	position: relative;
	margin: 0 auto 10px auto;
	padding: 5px 15px;
	text-align: left;
	border-radius: 5px;
    box-shadow: 0 1px 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.6);  
	opacity: 0;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);	
	cursor: default;
	display: none;
}

.tn-progress {
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	position: absolute;
	bottom: 5px;
	left: 2%;
	border-radius: 3px;
	box-shadow: 
		inset 0 1px 1px rgba(0,0,0,0.05), 
		0 -1px 0 rgba(255,255,255,0.6);
}

.tn-box p {
	font-weight: bold;
	font-size: 16px;
	margin: 0;
	padding: 0 10px 0 60px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.6);
}

.tn-box p:before{
	text-align: center;
	border: 3px solid rgba(255, 255, 255, 1);
	margin-top: -17px;
	top: 50%;
	left: 20px;
	width: 30px;
	content: 'i';
	font-size: 30px;
	color: rgba(255, 255, 255, 1);
	position: absolute;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

input.fire-check{
	width: 100px;
	position: absolute;
	left: 50%;
	top:-10%;
	margin-left: -50px;
	height: 35px;
	cursor: pointer;
	opacity: 0;
	z-index: 100;
}

.tn-box-color-1{
	background: #413a26;
	border: 1px solid rgb(201, 201, 253);
}

.no-cssanimations button.fire,
.no-cssanimations input.fire-check{
	display: none;
}


@-webkit-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -webkit-transform: translateY(0px);}
	99% { opacity: 0; -webkit-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-moz-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -moz-transform: translateY(0px);}
	99% { opacity: 0; -moz-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-o-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -o-transform: translateY(0px);}
	99% { opacity: 0; -o-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-ms-keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; -ms-transform: translateY(0px);}
	99% { opacity: 0; -ms-transform: translateY(-30px);}
	100% { opacity: 0; }
}

@keyframes fadeOut {
	0% { opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; transform: translateY(0px);}
	99% { opacity: 0; transform: translateY(-30px);}
	100% { opacity: 0; }
}

@-webkit-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-moz-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-o-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@-ms-keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

@keyframes runProgress {
	0%{ width: 0%; background: rgba(255,255,255,0.3); }
	100%{ width: 96%; background: rgba(255,255,255,1); }
}

/* Fire the animations */

input.fire-check:checked ~ section .tn-box {
	display: block;
	-webkit-animation: fadeOut 5s linear forwards;
	-moz-animation: fadeOut 5s linear forwards;
	-o-animation: fadeOut 5s linear forwards;
	-ms-animation: fadeOut 5s linear forwards;
	animation: fadeOut 5s linear forwards;
}

input.fire-check:checked ~ section .tn-box .tn-progress {
	-webkit-animation: runProgress 4s linear forwards 0.5s;
	-moz-animation: runProgress 4s linear forwards 0.5s;
	-o-animation: runProgress 4s linear forwards 0.5s;
	-ms-animation: runProgress 4s linear forwards 0.5s;
	animation: runProgress 4s linear forwards 0.5s;
}
/* If you use JavaScript you could add a class instead: */

.tn-box.tn-box-active {
	display: block;
	-webkit-animation: fadeOut 5s linear forwards;
	-moz-animation: fadeOut 5s linear forwards;
	-o-animation: fadeOut 5s linear forwards;
	-ms-animation: fadeOut 5s linear forwards;
	animation: fadeOut 5s linear forwards;
}

.tn-box.tn-box-active .tn-progress {
	-webkit-animation: runProgress 4s linear forwards 0.5s;
	-moz-animation: runProgress 4s linear forwards 0.5s;
	-o-animation: runProgress 4s linear forwards 0.5s;
	-ms-animation: runProgress 4s linear forwards 0.5s;
	animation: runProgress 4s linear forwards 0.5s;
}
/* Last example pauses on hover (causes problems in WebKit browsers) */

.tn-box.tn-box-hoverpause:hover, 
.tn-box.tn-box-hoverpause:hover .tn-progress{
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
	-o-animation-play-state: paused;
	-ms-animation-play-state: paused;
	animation-play-state: paused;
}

.blink {animation: blinker 2s linear infinite; }
 @keyframes blinker {50% { opacity: 0;} }

 .slide_footer {animation: toleft 7s linear forwards, disappear 7s linear forwards }
 .slide_footer:hover {animation-play-state: paused; }

 @keyframes toleft {0% {left: 50%;} 40% {left: 50%;} 60% {left: 75%;} 100% {left: 140%;}}
 @keyframes disappear {0% {opacity: 1;} 40% {opacity: 1;}  70% {opacity: 0.5;} 100% {opacity: 0;}}

 .blinking{
    animation:blinkingText 1.2s infinite;
}
@keyframes blinkingText{
    0%{     color: rgb(0, 133, 138); opacity: 0.4;   }
    20%{    color: rgb(255, 255, 255);opacity: 0.8; }
    40%{    color: transparent; }
    70%{    color:rgb(163, 0, 163);  }
    80%{   color: rgb(1, 80, 14);opacity: 0.8;    }
}