/*resets*/
*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

img{
  max-width: 100%;
}
a{
  text-decoration: none;
  color: pink;
}
/* universals*/
body {
  color: rgb(60,60,60);
font-family: Roboto;
font-weight:300;
}

section{
  padding: 5% 5% 8% 5%;
  text-align: center;
  position:relative;

}

.border{
  border: 3px solid pink;
  padding: 3%;
}

section,footer{
  /*padding: 2% 5% 4% 5% ;
  position:relative;*/
}


/* TODO replace all dotted border styles */
/*.dotted-border {
  padding: 3%;
  margin:3%;
  border: 8px dotted black;
}*/

nav{
  text-align: center;
}

.flex-center{
  display:flex;
  align-items:center;
  justify-content: center;
}

/*typography*/

h1,h2,h3,h4,h5,h6{
  text-align:center;
  font-family: "Roboto Slab";
  font-weight:300;
  margin-bottom: 0.5rem;
}
h1{
  font-size:2.0rem;
}

h2{
  font-size:1.5rem;
}

h3{
  font-size: 1.7rem;
}
h3 span{
  display: block;
}

/* modular classes*/

.rel{
  position: relative;
}

.me{
  /*border: 8px dotted black;
  margin: 5%auto;*/
  /*width: 80%;*/
}
.centerText{
  text-align:center;
  background-size: cover;
}

.rightText{
  text-align: right;
}
.blogpic{
height: 20vw;
transition:2s;
}

.blogpic h2{
  opacity:0;
  color: white;
  transition:2s;
}

.blogpic:hover{
  filter:grayscale();
}
.blogpic:hover h2{
  opacity:1;
}

.smalltextfix{
  font-size: 20px;
  /*margin: 5% auto;
  width:60%;*/
}

.full-width{
  /*width: 100%;*/
}
.fancyline{
  display: block;
  /*margin: auto;
  width:300px;*/
}

.button{
  background-color:pink;
  padding:2%;
  border-radius:10px;
  display:inline-block;
  font-size: 16px;
}

.blog-pic{
  background-size: contain;

  min-height: 23vw;
  }


/*header*/

header {
  position: relative;
}

.banner{
  background-size: cover;
  background-position: 50% 50%;
  background-attachment: fixed;
  position:relative;
  z-index: 99;
  padding:0;
  overflow: hidden;
  color: white;
}

.banner a {
  padding: 0.5rem;
  text-transform: uppercase;
  font-weight:400;
  color: white;
  letter-spacing: 1px;
}

.main-nav a:hover,.burger-menu a:hover{
  border-bottom: 3px solid pink;
}

header .main-nav {
  padding: 1% 5%;
}

.main-nav a {

}
.banner.small{
  min-height: 40vh;
  z-index: 0;
}
.banner h2{
  transform: translateY(15%);
}

.lowerbanner{
  min-height: calc(100vh - 226px);
}

.lowerbanner h1{
  transform: translateY(8%);
}

.lowerbanner .centerText{
  padding:0;
}

.fa-angle-double-down {
  font-size: 2rem;
  position: absolute;
  bottom: 6%;
  color: grey;
}

.banner .fa-angle-double-down {
  font-size: 2rem;
  position: absolute;
  bottom: 5px;
  color:grey;
  left: calc(50vw - 1.2rem);
}

.about{
  /*margin:auto;
  width: 80%;
  position: relative;
  border:8px dotted black;*/
}

/*Contact section*/
#contact{
  /*margin:5%auto;
  width: 65%;*/
  /*border:8px dotted black;*/
}
#contact p{
  /*padding: 15%;*/
}

/* footer*/
a.top-button {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 45;
  border: none;
  outline: none;
  background-color: pink;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
}

a.top-button:hover {
  background-color: #555;
}

footer .fa{
  padding:2%;
  font-size: 1.5rem;

}
form{
  position: relative;
}

#contact input,
#contact textarea {
 padding: 0.5rem;
 margin-bottom: 0.3rem;
}

.inputdiamond{
  position: absolute;
  bottom: -22px;
  right:0;
  transform: rotateZ(45deg);
  background-color: pink;
  color: white;
  height: 40px;
  width: 40px;
  display:flex !important;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
#contact .inputdiamond input{
  transform: rotateZ(-45deg);
  background-color: rgba(0,0,0,0);
  border: 0px;
  margin: 0;
  color: white;
}
/* quote section*/

.quotes-banner h1{
  margin: 23vh 0 -23vh 0;
}

.reverser .fa{
  bottom: -16px;
    left: 50%;
}

.reverser{
  padding:0;
}
.reverser .grid-middle-center{
  margin:5%;
}

.reverser .grid-middle-center:nth-child(odd){
  flex-direction: row-reverse;
}


.thequote{
  /*padding: 2%;
  position: relative;
  border:8px dotted black;*/
}

.quoted {
  font-size: 15px;
}

.reverser p{
  /*text-align: center;
  padding: 5%;*/
}

.quotediamond{
  color: white;
  position: absolute;
  bottom: -25px;
  right: 26px;
  transform: rotateZ(45deg);
  background-color: pink;
  height: 50px;
  width: 50px;
  display:flex !important;
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.quotediamond span{
  transform: rotateZ(-45deg);
  background-color: rgba(0,0,0,0);
  border: 0px;
  margin: 0;
}

.quotediamond:hover,.inputdiamond:hover{
    background-color: #555;
   }




.quotes-pic{
    background-image: url(/Images/Roosevelt.tif);
    min-height: 300px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.Pinterest > span{
    width:548px!important;
    margin:auto;
}



/*hamburger menu*/

.burger-menu {
    display: none;
    position: fixed;
    top: 0;
    left:0;
    right: 0;
    bottom: 0;
    background-color: #f9f9f9;
    padding:5px;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
    z-index: 99999999;
}
.burger-menu a {
  text-decoration: none;
  padding: 15px 11px;
  font-size: 20px;
  font-weight: 300;
  color: #C3BFBC;
  font-family: 'Alegreya Sans SC', sans-serif;
  display:block;
  padding:5px 15px;
  text-align:center;
  white-space:nowrap;
}
.burger-menu li{list-style:none}
/* this is where you style the button if you want to add more space between the spans than add padding to this div but make sure you also add it to the top and bottom active classes on there top/bottom or else your cross wont line up*/
.burger-button {
  position:fixed;
  top: 2vh;
  right: 2vh;
  z-index: 9999999999;
  padding: 8px;
}
/*this is where you can chand the color of the buttons*/
.burger-button span{
  width: 25px;
  border: 2px solid black;
  background-color: black;
  display: block;
  border-radius: 22px;
  transition: 2s;
}
.burger-top, .burger-bottom{
  position: absolute;
}
.burger-top{
  top: 02px;
}
.burger-bottom{
  bottom: 02.5px;
}

/* target the burger top when the button has the active class and give it a transform: rotateZ(45deg);*/
.active .burger-top{
  transform: rotateZ(45deg);
  top:8px;
  border-color:green;
}


/* now do the same f
or the bottom but with a negitive rotate */
.active .burger-bottom{
  transform: rotateZ(-45deg);
  bottom:8px;
}


/* now press your button and see whats wrong? go back and add a top to the .burger-top on active to push it down and a bottom to the .burger-bottom to push it up */

/*.subscribe{
  position:fixed;
  bottom: 5px;
  left:-100%;
  transition: 2s
}

.offscreen{
left:5px;
}*/


/* now try and make the middle line disapeare */

.active .burger-middle{
  opacity: 0;
}
/*media for hamburger*/
.mob-show{
  display:none;
}
@media all and (max-width:465px){
  .mob-hide{
    display:none;
  }

  .mob-show{
    display:block;
  }

  .fa-angle-double-down{
    display: none;
  }


}