/* Colors */
/* Animation */
*, *:before, *:after {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}



body, input {
  font:   "Titillium Web", sans-serif;
  line-height: 1.5;
}
input {
	font-size:1em;
	cursor: pointer;
}
body {
  
  
}
hr {
  border:none;
  border-top:5px dotted #e32719;
  
  width:100%;
  margin-bottom: 10px;
}
h1 {
font-size: 1.8em;
color: #e32719;
line-height: 1.3;
margin-bottom: 20px;
margin-top: 20px;
float: left; 
margin-left: 10px;
}
.wrap {
	width: 738px;
	margin: 0 auto;
	border: 2px solid #e32719;
	background: url("https://s22.postimg.cc/gzyyouldd/grey-paper-texture.jpg") center top;
}
.logo {
	height: 60px;
	margin-top: 30px;
	margin-left: 70px;
}

label {
  display: block;
  margin-bottom: 1.5em;
  -webkit-tap-highlight-color: transparent;
  font-size:1.5em;
} 

.text {
	display: none;
	font-size: 20px!important;

	margin: 0px 20px 20px 50px;
	background: #fce9e8;
	padding: 10px;
	border-radius:10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.5);



}
.open {
	display: block;

}
form {
  margin-left: 40px;
}



.cb {
  box-shadow: 0 0 0 0.125em rgba(227, 39, 25, 0.75) inset;
  
  display: inline-block;
  position: relative;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin-bottom: 0.2em;
  margin-right: 0.2em;
}
.cb:before, .cb:after {
  content: "";
  display: block;
  position: absolute;
}
.cb:before {
  animation: eraseA 0.5s steps(1) forwards;
  background: url("https://s22.postimg.cc/fi4blx4gx/checkmark.png") 0 100%/1.2em 1.35em no-repeat;
  bottom: 0.2em;
  left: 0.3em;
  width: 0;
  height: 1.35em;
}
.cb:after {
  animation: eraseB 0.5s linear forwards;
  background: linear-gradient(rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 50%) 11.2em 0, linear-gradient(#c8646e, #c8646e) 11.2em 0, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 9.8em 0/0.3em 100%, repeating-linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em) 10.2em 0/0.5em 100%, linear-gradient(90deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6) 0.1em, rgba(255, 255, 255, 0) 0.1em, rgba(255, 255, 255, 0) 0.2em, rgba(0, 0, 0, 0.2) 0.2em, rgba(0, 0, 0, 0.2) 0.3em, rgba(0, 0, 0, 0) 0.3em) 10.8em 0/0.3em 100%, linear-gradient(rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.6) 35%, rgba(255, 255, 255, 0.6) 65%, rgba(255, 255, 255, 0) 65%) 9.7em 0, linear-gradient(#b4b4b4, #b4b4b4) 9.7em 0, linear-gradient(rgba(0, 0, 0, 0.1) 27%, rgba(0, 0, 0, 0) 27%, rgba(0, 0, 0, 0) 73%, rgba(0, 0, 0, 0.2) 73%) 2em 0, linear-gradient(#f0d000, #f0d000) 2em 0, linear-gradient(-14deg, #1e1e1e 18%, rgba(30, 30, 30, 0) 20%) 0 0/0.5em 0.5em, linear-gradient(14deg, rgba(30, 30, 30, 0) 80%, #1e1e1e 83%) 0 0.5em/0.5em 0.5em, linear-gradient(-14deg, #d2a078 48%, rgba(210, 160, 120, 0) 50%) 0 0/2em 0.5em, linear-gradient(14deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, 0.1) 50%) 0 0.5em/2em 0.5em, linear-gradient(14deg, rgba(210, 160, 120, 0) 48%, #d2a078 50%) 0 0.5em/2em 0.5em;
  background-repeat: no-repeat;
  border-radius: 0 0.1em 0.1em 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: 0 0.25em;
  width: 12em;
  height: 1em;
}
.cb:checked {
  background-color: transparent;
}
.cb:checked:before {
  animation: drawA 0.5s linear forwards;
}
.cb:checked:after {
  animation: drawB 0.5s linear;
}
.cb:focus {
  outline: transparent;
}
.cb:focus + span {
  color: rgba(0, 0, 0, 0.75);
  outline: transparent;
}

.pristine:before, .pristine:after {
  animation: none;
}

@keyframes drawA {
  from, 5% {
    width: 0;
    height: 1.35em;
  }
  90%, to {
    width: 1.2em;
    height: 1.35em;
  }
}
@keyframes drawB {
  from {
    opacity: 0;
    transform: translate(0em, -0.5em) rotate(-50deg);
    visibility: visible;
  }
  5% {
    opacity: 1;
    transform: translate(0em, 0.3em) rotate(-60deg);
  }
  17% {
    transform: translate(0.25em, 0.8em) rotate(-65deg);
  }
  79% {
    transform: translate(1.1em, -0.14em) rotate(-63deg);
  }
  90% {
    opacity: 1;
    transform: translate(1.2em, -0.15em) rotate(-63deg);
  }
  to {
    opacity: 0;
    transform: translate(1.25em, -1.7em) rotate(-63deg);
  }
}
@keyframes eraseA {
  from {
    width: 1.2em;
    height: 1.35em;
  }
  10% {
    width: 1.2em;
    height: 1.08em;
  }
  27% {
    width: 1.2em;
    height: 0.81em;
  }
  36% {
    width: 1.2em;
    height: 0.7em;
  }
  45% {
    width: 1.2em;
    height: 0.55em;
  }
  55% {
    width: 1.2em;
    height: 0.35em;
  }
  80%, to {
    width: 1.2em;
    height: 0;
  }
}
@keyframes eraseB {
  from {
    opacity: 0;
    transform: translate(0.6em, -12.2em) rotate(90deg);
    visibility: visible;
  }
  10% {
    opacity: 1;
    transform: translate(1.2em, -12.05em) rotate(90deg);
  }
  20% {
    transform: translate(0.6em, -11.9em) rotate(90deg);
  }
  30% {
    transform: translate(1.2em, -11.75em) rotate(90deg);
  }
  40% {
    transform: translate(0.6em, -11.6em) rotate(90deg);
  }
  50% {
    transform: translate(1.2em, -11.45em) rotate(90deg);
  }
  60% {
    transform: translate(0.6em, -11.3em) rotate(90deg);
  }
  70% {
    transform: translate(1.2em, -11.15em) rotate(90deg);
  }
  80% {
    transform: translate(0.6em, -11em) rotate(90deg);
  }
  90% {
    opacity: 1;
    transform: translate(2em, -12.5em) rotate(100deg);
  }
  to {
    opacity: 0;
    transform: translate(2em, -12.5em) rotate(100deg);
  }
}

.second {
display: none;

}

a {
text-decoration: none;
display: block;
margin:  0 auto;
box-shadow: 0 0 0 0.125em rgba(227, 39, 25, 0.75) inset;
width: 100px;
margin-bottom: 20px;
text-align: center;
font-weight: bold;
font-size: 1.5em;
color: rgba(227, 39, 25, 0.75);
}

@page {
    size: auto;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */

}

@media print {

.text {
display: block!important;
}

input[type=checkbox]:checked {
display: none!important;
}
input[type=checkbox]:checked + span  {
display: none!important;
}
.first, a {
display: none;
}

.second {
display: block;
}
.wrap {
margin-top: 40px;}

label {
page-break-inside: avoid!important;
}
}