* {margin: 0;padding:0}
html {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  /*background-image: linear-gradient(to left top, #eeaed3, #e2b3dd, #d6b8e4, #cabde8, #bfc2e9, #b9c8ed, #b5ceef, #b2d4ef, #b2ddf2, #b5e6f4, #bbeef4, #c4f6f3);*/
  background-image: linear-gradient(to top left, #000000, #121212, #1d1d1d, #282828, #343434);
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  color: #555;
  font-weight: 300;
  font-size: 16px;
}
a {
  text-decoration: none;
}
.m2 {
  margin-top: 2rem;
}
.content {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 1rem -.5rem #000;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  height: 40rem;
  width: 58rem;
  margin: auto;
  border-radius: 4rem;
  display: flex;
  flex-wrap: wrap;
  padding: 1rem;
}
.navi {
  width: 12rem;
  border-radius: 3rem;
  position: relative;
  padding: 2rem 1rem 1rem 2rem;
}
figure {
  background-image: linear-gradient(to right bottom, #000, #555);
  width: 3rem;
  border-radius: 1rem;
  margin-bottom: 1rem;
}
figure i {
  color: #ddd;
  padding: .8rem;
  font-size: 1.5rem;
}
.naviMobile {
  display: none;
}
nav.navmain {
  margin-top: 3rem;
}
nav.navmeta {
  margin-top: 2rem;
}
nav ul.navmeta,
nav ul.navmain {
  margin-left: 1.5rem!important;
}
nav ul li {
  padding: .5rem 0;
}
nav ul li a {
  font-size: .9rem;
  color: #555;
}
.naviMobile nav ul li {
  padding-top: 1rem;
}
.naviMobile nav ul li a {
  font-size: 1.1rem;
  color: #fff;
}
nav ul li span {
  margin-right: 1rem;
}
a:hover,
a:active,
a:focus,
a.active {
  color: #111;
  font-weight: 700;
}
.navmain .fa-ul,
.navmeta .fa-ul {
  margin-left: 1.5rem!important;
}
.togo {
  width: calc(100% - 3rem);
  background-image: linear-gradient(to right bottom, #000, #555);
  border-radius: 1.5rem;
  padding: 1rem;
  color: #fff;
  margin-top: 9rem;
  text-align: center;
}
.togo span {
  font-size: 2rem;
  font-weight: 700;
}
.main {
  width: 39rem;
  padding: 1.5rem;
  margin: 0 0 0 1rem;
  background-color:  rgba(0, 0, 0, 0.1);
  box-shadow: .2rem .2rem 1rem 0 #999 inset,
              -.2rem -.2rem 1rem 0 #eee inset;
  border-radius: 3rem;
  color: #000;
  position: relative;
}
.infobox {
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #d7d7d7;
  box-shadow: .2rem .2rem 1rem 0 #999,
              -.2rem -.2rem 1rem 0 #eee;
  border-radius: 3rem;
}
.infobox:target {
  display: block;
}
.infobox a.closex {
  position: absolute;
  top: 1rem;
  right: 2rem;
  font-size: 2rem;
  font-weight: 300;
  color: #000;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}
.infobox a.closex:hover {
  transform: rotate(-45deg);
}
.infobox h2 {
  margin-top: 4rem!important;
}
.main h1 {
  margin: 2rem 1rem;
  font-size: 1.5rem;
  font-weight: 700;
}
.main h2 {
  margin: 1rem;
  font-size: 1rem;
  font-weight: 500;
}
.main h3 {
  margin: 1rem 0;
  font-size: 1rem;
  font-weight: 300;
}
.main header,
.main header a {
  margin: 0 1rem 0 .5rem;
  color: #fff;
  font-size: .9rem;
}
.main header .left {text-align: left;}
.main header .right {float: right;}
.main form {
  margin: 0 1rem;
}
.main input {
  box-shadow: .2rem .2rem 1rem 0 #999,
              -.2rem -.2rem 1rem 0 #eee;
}
.main input:hover {

  box-shadow: .1rem .1rem .6rem 0 #999 inset,
              -.1rem -.1rem .6rem 0 #eee inset;
}
.main input[type=submit] {
  width: 17rem;
  background-position: center;
  margin: 0;
  background-color: rgba(255,255,255,.6);
  box-shadow: .2rem .2rem 1rem 0 #999,
              -.2rem -.2rem 1rem 0 #eee;
  border: 0;
  border-radius: 1rem;
  height: 6rem;
}
.main input[type=submit]:hover {
  cursor: pointer;
  box-shadow: .1rem .1rem .6rem 0 #999 inset,
              -.1rem -.1rem .6rem 0 #eee inset;
}
.main input[type=submit]:not(:first-of-type) {
  margin-left: 1rem;
}
.main input[type=number] {
  height: 2.5rem;
  width: 5rem;
  margin-left: 2rem;
  border-radius: 1.5rem;
  border: none;
  text-align: center;
  font-size: 1.5rem;
    background-color: rgba(255,255,255,.6);
    box-shadow: .1rem .1rem .3rem 0 #999,
                -.1rem -.1rem .3rem 0 #eee;
}
.main input[type=number]:hover,
.main input[type=number]:active,
.main input[type=number]:focus {
    background-color: rgba(255,255,255,.6);
    box-shadow: .1rem .1rem .3rem 0 #999 inset,
                -.1rem -.1rem .3rem 0 #eee inset;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
#age {
  background-color: rgba(255,255,255,.6);
  box-shadow: .1rem .1rem .3rem 0 #999,
              -.1rem -.1rem .3rem 0 #eee!important;
            }
.form1send {
  height: 3rem!important;
  margin-top: 1.5rem!important;
  border-radius: 3rem!important;
  font-size: 1rem;
  font-weight: 500;
  display: block;
}
.main article {
  margin: 2rem 1rem;
}
.main article p {
  line-height: 1.5rem;
}

/* Customize the label (the container) */
.container {
  display: inline-block;
  position: relative;
  width: calc(7.5rem - 5px);
  height: 1.5rem;
  padding: .5rem .5rem .5rem 3rem;
  line-height: 1.5rem;
  margin-bottom: 1rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-radius: 1.5rem;
    background-color: rgba(255,255,255,.6);
    box-shadow: .1rem .1rem .3rem 0 #999,
                -.1rem -.1rem .3rem 0 #eee;
}
.qb5 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #999;
  padding-right: 1rem;
  width: 17rem;
  margin-right: 1rem;
}
.qair .container {
  width: 0;
  height: 0;
  padding: 0;
  margin-right: 1rem;
}
.qair h3 {
  width: 6rem;
  margin: 0.75rem 0!important;
  font-size: .8rem;
}
.qair {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 1rem!important;
}
.container:not(:first-of-type) {
  margin-left: 1.5rem;
}
/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  top: .5rem;
  left: .5rem;
  height: 1.5rem;
  width: 1.5rem;
    background-color: rgba(255,255,255,.6);
    box-shadow: .1rem .1rem .3rem 0 #999,
                -.1rem -.1rem .3rem 0 #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: rgba(255,255,255,.6);
  box-shadow: .1rem .1rem .3rem 0 #999 inset,
              -.1rem -.1rem .3rem 0 #eee inset;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-image: linear-gradient(to right bottom, #000, #555);
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
  top: .5rem;
  left: .5rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: white;
}

.naviMobile {
  position: absolute;
}
.naviMobile nav {
  margin-top: -1rem;
  height: 100%;

}


#menuToggle {
  display: flex;
  flex-direction: column;
  position: relative;
  top: 2.5rem;
  left: .5rem;
  z-index: 1;
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input {
  display: flex;
  width: 2rem;
  height: 3rem;
  position: absolute;
  cursor: pointer;
  opacity: 0;
  z-index: 2;
}

#menuToggle span.burger {
  display: flex;
  width: 1.5rem;
  height: 2px;
  margin-bottom: 5px;
  position: relative;
  background: #555;
  border-radius: 3px;
  z-index: 1;
  transform-origin: 5px 0px;
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span.burger:first-child {
  transform-origin: 0% 0%;
}

#menuToggle span.burger:nth-last-child(2) {
  transform-origin: 0% 100%;
}

#menuToggle input:checked ~ span.burger {
  opacity: 1;
  transform: rotate(45deg) translate(12px, -9px);
  background: #fff;
}
#menuToggle input:checked ~ span.burger:nth-last-child(3) {
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked ~ span.burger:nth-last-child(2) {
  transform: rotate(-45deg) translate(10px, 12px);
}

#menu {
  position: absolute;
  border-radius: 2.5rem;
  width: 10rem;
  height: 20rem;
  margin: -1.5rem -.5rem;
  padding: 3rem;
  padding-top: 4rem;
  background-image: linear-gradient(to right bottom, #000, #555);
  -webkit-font-smoothing: antialiased;
  box-shadow: .1rem .1rem .3rem 0 #555 inset,
              -.1rem -.1rem .3rem 0 #000 inset;
  transform-origin: 0% 0%;
  transform: translate(-200%, 0);
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li {
  transition-delay: 2s;
}

#menuToggle input:checked ~ ul {
  transform: none;
}

figure.fontimg,
figure.fontimg img {
  width: 100%;
}

.fontmain a {
  color: #000;
  text-decoration: underline;
}

@media only screen and (max-width: 1023px) {
  .navi {
    width: 9rem;
  }
  .content {
    width: 55rem;
  }
}
@media only screen and (max-width: 973px) {
  .navi {
    display: none;
  }
  .naviMobile {
    display: block;
  }
  .main {
    margin-left: 3rem;
  }
  .content {
    padding-left: 1rem;
    width: 46.5rem;
  }
}
@media only screen and (max-width: 819px) {
  .content {
    padding-left: 1rem;
    width: 31.5rem;
  }
  .container:first-of-type {
    margin-right: .5rem;
  }
  .container:not(:first-of-type){
    margin-left: 0;
  }
  article {
    margin-bottom: .5rem!important;
  }
  input[type=submit]#img1,
  input[type=submit]#img2 {
    margin-left: 0;
    margin-top: .5rem;
    width: 100%;
  }
}
@media only screen and (max-width: 575px) {
  .content {
    margin: 0;
    padding: 0;
    border-radius: 1rem;
    width: 100%;
  }
  .main {
    margin-left: 0;
    padding: .5rem;
    background: #ddd;
    border-radius: 1rem;
  }
  #menuToggle {
    top: 2rem;
    left: 1.5rem;
  }
  #menu {
    margin: -1.5rem;
    padding: 3rem 4rem;
  }
  span.left {
    display: none;
  }
  span.right {
    padding-top: .5rem;
    color: #555;
  }
  h1 {
    margin-top: 3rem!important;
  }
  .container {
    width: calc(50% - 4.5rem)
  }
}
@media only screen and (max-height: 685px) {
  .content {
    margin: 1rem auto;
  }
}