@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");





/* RESET RULES

–––––––––––––––––––––––––––––––––––––––––––––––––– */



:root {

  --white: #afafaf;

  --body: #292a2b;

  --border: hsl(0, 0%, 10%);

  --element: hsl(0, 0%, 14%);

  --focus: hsl(207, 35%, 20%);

}



* {

  padding: 0;

  margin: 0;

  box-sizing: border-box;

  outline: none;

}



a {

  color: inherit;

}



input,

select,

textarea,

button {

  font-family: inherit;

  font-size: 100%;

}



button,

label {

  cursor: pointer;

}



select {

  appearance: none;

}



/* Remove native arrow on IE */

select::-ms-expand {

  display: none;

}



/*Remove dotted outline from selected option on Firefox*/

/*https://stackoverflow.com/questions/3773430/remove-outline-from-select-box-in-ff/18853002#18853002*/

/*We use !important to override the color set for the select on line 99*/

select:-moz-focusring {

  color: transparent !important;

  text-shadow: 0 0 0 var(--white);

}



ul {

  list-style: none;

}



h1 {

  text-align: center;

}



body {

  font: 12px/1.5 "Open Sans", sans-serif;

  background: var(--body);

  color: var(--white);

  margin: 0;

}



.container {

  width: 800px;

  margin: 0 auto;

  padding: 1rem 1.5rem;

}



h1 {

  margin-bottom: 1.5rem;

}



li,

.input-field > *:not(:last-child) {

  margin-bottom: 1.5rem;

}



input,

button {

  width: 100%;

  line-height: 1.5;

  padding: 15px 10px;

  border: 2px solid var(--border);

  color: var(--white);

  background: var(--element);

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}

#name-and-button {

  display: grid;

  grid-gap: 1.5rem;

  grid-template-columns: 1fr 1fr 1fr;

  font: 15px/1.5 "Open Sans", sans-serif;

}



#audience-name {

  margin: 0;

  width: 160%;

} 



#save-button {

  margin: 0 0 0 60%;

  width: 70%;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



#export-button {

  width: 70%;

  margin: 0 0 0 30%;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



#save-button:hover, #export-button:hover {

  background: var(--focus);

}



select:focus,

input:focus{

  transform: scale(1.02);

}



input[type="text"]:focus {

  background-color: var(--focus);

}



.checkboxes {

  padding-left: 27px;

}

.checkbox-container {

  display: inline-block;

  position: relative;

  padding-left: 50px;

  margin-bottom: 12px;

  margin-right: 27px;

  cursor: pointer;

  font-size: 22px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;



}



.checkbox-container input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 35px;

  width: 35px;

  background-color: var(--element);

  border: 2px solid var(--border);

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.checkbox-container:hover input ~ .checkmark {

  background-color: var(--focus);

}



.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.container input:checked ~ .checkmark:after {

  display: block;

}



.checkbox-container .checkmark:after {

  left: 11px;

  top: 7px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



.box {

  padding: 15px 10px 0 10px;

  border: 2px solid var(--border);

}



.box button, .box input {

  font: 15px/1.5 "Open Sans", sans-serif;

}



.condition-box {

  display: grid;

  grid-gap: 1.5rem;

  grid-template-columns: 1fr 1fr;

}



.dropdown {

  position: absolute;

  display: none;

  opacity: 0;

  z-index: 1;

}



.condition-select:hover .condition-button {

  display:none;

}



.condition-select:hover .dropdown {

  display: inline-flex;

  position: relative;

  opacity: 1;

  width: 100%;

  background: var(--element);

  text-align: center;

  border: 2px solid var(--border);

}





.dropdown button {

  line-height: 1.5;

  padding: 15px 10px;

  border: none;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.dropdown button:hover {

  background: var(--focus);

}



.condition-write input {

  line-height: 1.5;

  padding: 15px 10px;

  text-align: center;

  border: 2px solid var(--border);

  color: var(--white);

  background: var(--element);

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.condition-or {

  width: 100%;

  text-align: center;

}



.condition-or-hidden {

  width: 0;

  height: 0;

  display: none;

}



.condition-or button {

  width: 30%;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.condition-or button:hover {

  background: var(--focus);

}



.condition-and {

  margin-left: -10px;

}



.condition-and button {

  width: 102.8%;

  margin-bottom: 0;

  text-align: center;

  border-bottom: none;

  border-left: none;

  border-right: none;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.condition-and button:hover {

  background: var(--focus);

}



#condition-box-2, #condition-or-2, #condition-box-3, #condition-or-3, #condition-box-5, #condition-or-5, #condition-box-6, #condition-or-6, #condition-box-8, #condition-or-8, #condition-box-9, #condition-or-9 {

  visibility: hidden;

}



#box-2 {

  margin-top: 3rem;

  visibility: hidden;

}



#box-3 {

  margin-top: 3rem;

  visibility: hidden;

}



.checkmark {

  font-size: 0px;

}



.modal {

  display: none; /* Hidden by default */

  position: fixed; /* Stay in place */

  z-index: 11; /* Sit on top */

  left: 0;

  top: 0;

  width: 100%; /* Full width */

  height: 100%; /* Full height */

  overflow: auto; /* Enable scroll if needed */

  background-color: rgb(0,0,0); /* Fallback color */

  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}



/* Modal Content/Box */

.modal-content {

  background-color: var(--body);

  margin: 15% auto; /* 15% from the top and centered */

  border: 2px solid rgba(240, 240, 240, 0.2);

  width: 50%; /* Could be more or less, depending on screen size */

}



.modal-header {

  height: 4rem;

  position: relative;

  width: 100%;

  padding: 1rem;

  font: 25px/1.5 "Open Sans", sans-serif;

  font-weight: bold;

  

}



.modal-body {

  height: 200px;

  position: relative;

  font: 22px/1.5 "Open Sans", sans-serif;

  

}



.modal-body-center {

  top: 50%;

  left:50%;

  position: absolute;

  -ms-transform: translate(-50%, -50%);

  transform: translate(-50%, -50%);

  text-align: center;

}



.modal button {

  width: 50%;

  margin-top: 4rem;

  font-size: 15px;

  transition: background-color 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25),

    transform 0.3s cubic-bezier(0.57, 0.21, 0.69, 1.25);

}



.modal button:hover {

  background: var(--focus);

  cursor: pointer;

}



/* The Close Button */

.close {

  color: var(--white);

  float: right;

  z-index: 11;

  font-size: 28px;

  margin-top: -1rem;

  font-weight: bold;

  transition: color 0.3s;

}



.close:hover,

.close:focus {

  color: var(--focus);

  text-decoration: none;

  cursor: pointer;

}



#myBtn {

  display: none; /* Hidden by default */

  position: fixed; /* Fixed/sticky position */

  bottom: 20px; /* Place the button at the bottom of the page */

  right: 30px; /* Place the button 30px from the right */

  z-index: 10; /* Make sure it does not overlap */

  border: none; /* Remove borders */

  outline: none; /* Remove outline */

  cursor: pointer; /* Add a mouse pointer on hover */

  background: var(--focus);

  border-radius: 50px;

  font-size: 30px;

  width: 120px;

  background-repeat: no-repeat;

}



#myBtn:hover{

  background: var(--element);

}



#consent {

width:100%; background:#fff; padding-top: 100px; margin-bottom:100px;

}