* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/*
* -- BASE STYLES --
* Most of these are inherited from Base, but I want to change a few.
*/

a {
  text-decoration: none;
  color: #000000;
  
}
h1,
h2,
h3 {
  color: rgb(0, 0, 0);
  line-height: 1em;
  
}
h4,
h5,
h6,
label {
  color: #000000;
  line-height: 1em;
}
#titlepad{
  padding: 0.3em;
  font-size: 45;
  padding-left: 1.7em;
}
.pure-img-responsive {
  max-width: 100vw;
  height: auto;
  
}
.greyblock{
  background-color: slategrey;
  border-radius: 2em;
}
header {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  max-width: 100vw;
}
#title {
  font-size: 45;
  text-decoration: none;
  padding: 2em;
  padding-bottom: 0;
}
#size img {
  max-width: 34vw;
  min-width: 34vw;
}

#logo {
  max-height: 4.2em;
  align-self: flex-start;
  margin: 0.5em;
  transform: translateX(-1em);
  font-size: 35;
  line-height: 1em;
}
.MADAO {
  padding-top: 1.5em;
}
.Secpad {
  padding: 4em;
}
figure img {
  padding: 0.5em;
}

article {
  padding: 12vw;
  font-size: x-large;
  font-weight: 500;
}
article h1 {
  font-weight: 500;
}
#flexthis {
  display: flex;
  flex-flow: row wrap;
  justify-content: flex-start;
}
#Bquote {
  padding: 15%;
}
#topline {
  border-top: solid grey 2px;
  padding-top: 0.5em;
}
ul {
  line-height: 1.5em;
}
#Uline:hover {
  text-decoration: underline;
}
#topD {
  justify-self: flex-end;
  border-radius: 50%;
  height: 5em;
  margin-top: 3em;
}
#flexbase {
  display: flex;
  justify-content: baseline;
}
figcaption {
  font-size: xx-large;
  line-height: 1em;
}
p,
pre {
  font-size: x-large;
  line-height: 2em;
  
}
#faq {
  line-height: 1.5em;
  padding: 0.25em;
}
body {
  line-height: 1.5em;
  color: rgb(0, 0, 0);
  font-weight: bold;

  font-family: "EB Garamond", serif;

  text-align: left;

  background: whitesmoke;
}
#grey {
  background-color: rgb(172, 169, 169);
  padding: 1.5em;
  font-size: larger;
}
.btn {
  padding: 1em;
  margin: 1.5em;
  background-color: #9fefa6;
  border-radius: 14px;
  font-weight: bolder;
}
.btn:hover,
.btn:active {
  background-color: #473544;
  color: whitesmoke;
}
#bttn {
 font-size: x-large;
  
}

#flexcenter {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#alignend {
  align-self: flex-end;
}
blockquote {
  font-size: xx-large;
  line-height: 1.5em;
}
.formtime {
  display: flex;
  
}
.col{
  flex-direction: column;
}
.paddingleft {
 padding-left: 8vw;

}
.maxform {
  max-width: 350px;
  display: flex;
  justify-content: center;
}
.formbox {
  display: flex;
 
  flex-wrap: wrap;
  max-width: 35vw;
 padding-left: 2em;
}
input[type=radio] {
  border: 0px;
  width: 100%;
  height: 4em;
}
input{
  width: 500px;
}
.formside {
  display: flex;
  justify-content: flex-start;
  padding-right: 5vw;
}
input {
  margin: 1em;
  padding: 00.5em;
}
#width {
  width: 100vw;
}
@media screen and (max-width: 1300px) {
  #zero {
    margin: 0;
    padding: 0;
  }
  #Bquote {
    padding: 0;
  }
  #size img {
    max-width: 80vw;
    min-width: 80vw;
  }
  header {
    justify-content: space-around;
  }
  #logo {
    transform: translateX(0.25em);
    margin: 0;
  }
  #topD {
    margin-right: 2em;
  }
  #title {
    padding: 0.5em;
    margin: 0;
  }
  figcaption {
    max-width: 95%;
  }
  blockquote {
    font-size: x-large;
  }
  #flexbase {
    flex-wrap: wrap;
  }
  .formbox {
    margin-left: 2em;
    max-width: 90vw;
    min-width: 90vw;
  }
  #smallbar {
    max-width: 60vw;
    min-width: 60vw;
  }
  #followalong{
    min-width: 70vw;
    max-width: 70vw;
  }
}