html, body, div, p{
	margin: 0;
	padding: 0;
	overflow:  hidden;
}

html{
	background: #fff;
}
body{
	background: #000;
	opacity: 0.8;
	width: 100%;
	height: 100vh;
}



/* radio */
.dark {
  --primary: hsl(1, 100%, 68%);
  --other: hsl(0, 0%, 90%);

	background: #000;
	padding:15px;
	opacity: 0.9;
}


/* label */
label {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;

  margin: 12px 0;

  cursor: pointer;
  position: relative;
}



input {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
}


/* .design */
.design {
  width: 16px;
  height: 16px;

  border: 1px solid var(--other);
  border-radius: 100%;
  margin-right: 16px;

  position: relative;
}

.design::before,
.design::after {
  content: "";
  display: block;

  width: inherit;
  height: inherit;

  border-radius: inherit;

  position: absolute;
  transform: scale(0);
  transform-origin: center center;
}

.design:before {
  background: var(--other);
  opacity: 0;
  transition: .3s;
}

.design::after {
  background: var(--primary);
  opacity: .4;
  transition: .6s;
}


/* .text */
.text {
	color: #fff;
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 28px;
    text-shadow: 1px 1px 1px #000;
}


/* checked state */
input:checked+.design::before {
  opacity: 1;
  transform: scale(.6);
}


/* other states */
input:hover+.design,
input:focus+.design {
  border: 1px solid var(--primary);
}

input:hover+.design:before,
input:focus+.design:before {
  background: var(--primary);
}

input:hover~.text {
  color: var(--primary);
}

input:focus+.design::after,
input:active+.design::after {
  opacity: .1;
  transform: scale(2.6);
}
/* radio */



.dl-header{
	padding-right: 20px;
	padding-top: 5px;
	text-align: right;
}

#dl-close{
	color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 20px;
    line-height: 28px;
	padding-right: 30px;
	background: url("style/assets/icon.png") no-repeat top right;
	cursor: pointer;
}

.dl-body{
	opacity: 1;
	margin: 0 auto;
	padding-top: 1%;
	text-align: center;
	width: 95%;
}

.dl-body p, .dl-modal p{
	color: #fff;
    font-family: 'Didact Gothic', sans-serif;
    font-size: 20px;
    line-height: 28px;
    text-shadow: 1px 1px 1px #000;
}

.dl-body a{
	color: #39abfe;
    text-decoration: none;
}

.dl-modal{
	width: 274px;
    position: absolute;
    border-radius: 4px 4px 0 0;
}

#chrome, #explorer{
    bottom: 20px;
    left: -9999px;
}

#safari, #firefox{
	top: 20px;
	right: -9999px;
}

.dl-modal p{
	font-size: 16px !important;
    line-height: 18px !important;
	padding: 15px;
	color: #363636 !important;
	text-shadow: none;
	text-align: center;
	border-radius: 4px 4px 0 0;
    background-color: #fffcaf;
}

.dl-modal img{
	width: 274px;
	border-radius: 0 0 4px 4px;
}