html,
body {
    width: 100%;
    height: 100%;
    background-color: #fff;

}

p {
	font-family: 'Questrial', sans-serif;
	font-size: 15px;
}

li{
  font-family: 'Questrial', sans-serif;
  font-size: 15px;
}


.titlepad{
  padding-left: 150px;
  padding-right: 150px;
}

.black{
  color: #000;
  font-size: 18px;
}

#top{
  background-image: url('../img/dark_wood.png');
  background-color: none;
  background-repeat: repeat;
}

#project{
  background-color: #D5F4FD;
  padding-bottom: 100px;
}
.headerpad{
  padding-top: 400px;
  padding-bottom: 400px;
}
.navlinks{
	font-family: 'Questrial', sans-serif;
	font-size: 16px;
	text-transform: uppercase;
	font-style: italic;
	font-weight: 900;
}

h3{
  font-family: 'Fredericka the Great', cursive;
  font-size: 26px;
  text-transform: uppercase;
  color: #a7c79c;
}

h2{
  font-family: 'Fredericka the Great', cursive;
  font-size: 18px;
  color: #8EA18C;
}


#calendar {
  height:800px;
  width: 1095px;
  margin-left: auto;
  margin-right:auto;

}

.day{
  height:150px;
  width:150px;
  padding: 15px;
  float: left;
  text-align: center;

}

.buds{
  margin-top: -415px;

}

.peaches{
  margin-top: 165px;
  width: 1100px;
  margin-left: -5%;

}

.falling{
  margin-top: 45px;
  margin-left: 420px;
  width: 600px;

}

.sciencetext{
  height: 800px;
  overflow: scroll;
  padding: 15px;
}

.righto{

  float: right;
}

.arrow{
  position: absolute;
  margin-top:62px;
  margin-left:56px;
  z-index: 30;
}

.forward{
  z-index: 100;
  position: relative;
  margin-top: -130px;
}

/* Custom Button Styles */

.btn-dark {
    border-radius: 0;
    color: rgba(0,0,0,0.4);
   
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    color: rgba(0,0,0,0.7);
 
}

.btn-light {
    border-radius: 0;
    color: #333;

}

.btn-light:hover,
.btn-light:focus,
.btn-light:active {
    color: #444;
   
}

.text-vertical-center {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

.text-vertical-center h1 {
    margin: 0;
    padding: 0;
    font-size: 4.5em;
    font-weight: 700;
}

/* Side Menu */

#sidebar-wrapper {
    z-index: 1000;
    position: fixed;
    right: 0;
    width: 250px;
    height: 100%;
    margin-right: -250px;
    overflow-y: auto;
    background-color: #000;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}

.sidebar-nav {
    position: absolute;
    top: 0;
    width: 250px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-nav li {
    text-indent: 20px;
    line-height: 40px;
}


.sidebar-nav > .sidebar-brand {
    height: 55px;
    font-size: 18px;
    line-height: 55px;
}

.sidebar-nav > .sidebar-brand a {
    color: #999;
}

.sidebar-nav > .sidebar-brand a:hover {
    color: #fff;
    background: none;
}

#menu-toggle {
    z-index: 5;
    position: fixed;
    top: 0;
    right: 0;
}

#sidebar-wrapper.active {
    right: 250px;
    width: 250px;
    -webkit-transition: all 0.4s ease 0s;
    -moz-transition: all 0.4s ease 0s;
    -ms-transition: all 0.4s ease 0s;
    -o-transition: all 0.4s ease 0s;
    transition: all 0.4s ease 0s;
}


.toggle {
    margin: 5px 5px 0 0;
  }

.padding-top15{
  padding-top: 15px;
}

.padding-bottom15{
  padding-bottom:15px;
}

.padding-bottom30{
  padding-bottom:30px;
}
.padding-top30{
  padding-top: 30px;
}

.padding-top60{
  padding-top:60px;
}
∂
.padding-top75{
	padding-top: 75px;
}
.padding-top120{
	padding-top: 120px;
}
.padding-top150{
	padding-top: 150px;
}
.padding-top180{
	padding-top: 180px;
}
.padding-bottom400{
	padding-bottom: 400px;
}

.padding-bottom150{
  padding-bottom: 150px;
}

.padding-top200{
  padding-top: 200px;
}

.padding-top300{
  padding-top: 300px;
}

.padding-top400{
  padding-top: 400px;
}

.padding-top600{
  padding-top: 600px;
}

.padding-bottom100{
	padding-bottom: 100px;
}

.padding-left50{
  padding-left: 50px;
}
.bgwhite{
	background-color:#fff;
}

.floweringbg{
  background-color: #F2F2F2;
}

.fruitingbg{
  background-color:#FFEFF1;
}

.fallingbg{
  background-color:#F7FFE7;
}

#science{
  background-image:url('../img/graphybig.png');
  background-repeat: repeat;
  background-color: none;
}

#artist{
  background-color: #672152;
  color: #fff;
  font-size: 16px;
  padding-left: 5%;
  padding-right: 5%;
}

#quiz{
  background-color: #D8CBC3;
  height: 1100px;
  padding-bottom: 100px;
}

.white{
  color: #fff;
}

.examples{
    border: 1px solid;
    border-color:#000;
    border-radius: 5px;
    padding: 20px;
    color: #666;
    margin-top: 50px;
}    

.btn-custom {
  background-color: hsl(0, 0%, 0%) !important;
  font-family: 'Questrial', sans-serif;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000", endColorstr="#000000");
  background-image: -khtml-gradient(linear, left top, left bottom, from(#000000), to(#000000));
  background-image: -moz-linear-gradient(top, #000000, #000000);
  background-image: -ms-linear-gradient(top, #000000, #000000);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000000), color-stop(100%, #000000));
  background-image: -webkit-linear-gradient(top, #000000, #000000);
  background-image: -o-linear-gradient(top, #000000, #000000);
  background-image: linear-gradient(#000000, #000000);
  border-color: #000000 #000000 hsl(0, 0%, 0%);
  color: #fff !important;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.00);
  -webkit-font-smoothing: antialiased;
}


/* Pulse */
@-webkit-keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

@keyframes pulse {
  25% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  75% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
}

.pulse {
  display: inline-block;
  color: #F2700C;
  cursor:pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.pulse:hover, .pulse:focus, .pulse:active {
	color: #94C2A0;		
  -webkit-animation-name: pulse;
  animation-name: pulse;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}


/* Buzz Out */
@-webkit-keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

@keyframes buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }

  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }

  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }

  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }

  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }

  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.buzz-out {
  display: inline-block;
  cursor:pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.buzz-out:hover, .buzz-out:focus, .buzz-out:active {
  -webkit-animation-name: buzz-out;
  animation-name: buzz-out;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}



/* Wobble Vertical */
@-webkit-keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes wobble-vertical {
  16.65% {
    -webkit-transform: translateY(8px);
    transform: translateY(8px);
  }

  33.3% {
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
  }

  49.95% {
    -webkit-transform: translateY(4px);
    transform: translateY(4px);
  }

  66.6% {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
  }

  83.25% {
    -webkit-transform: translateY(1px);
    transform: translateY(1px);
  }

  100% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

.wobble-vertical {
  display: inline-block;
  cursor:pointer;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}
.wobble-vertical:hover, .wobble-vertical:focus, .wobble-vertical:active {
  -webkit-animation-name: wobble-vertical;
  animation-name: wobble-vertical;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}



.padding-left15{
  padding-left:15px;
}

.padding-right15{
  padding-right: 15px;
}


.grey{
  color: #ccc;
}


.frame {
    overflow-y: auto;
    height: 750px;
}

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 1px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

/*sticky footer*/

 #wrap {
        min-height: 100%;
        height: auto !important;
        height: 100%;
        /* Negative indent footer by it's height */
        margin: 0 auto -60px;
      }

      /* Set the fixed height of the footer here */
      #push,
      #footer {
        height: 60px;
      }
      #footer {
        background-color: #fff;
       
      }

      /* Lastly, apply responsive CSS fixes as necessary */
      @media (max-width: 767px) {
        #footer {
          margin-left: -20px;
          margin-right: -20px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }


/* Smartphones (portrait and landscape) ----------- */
@media (min-device-width : 320px) and (max-device-width : 480px) {

    #top{
      visibility: hidden;
    }
    #about{
      visibility: hidden;
    }

    #project{
      visibility: hidden;
    }

    #artist{
      visibility: hidden;
    }

    #contact{
      visibility: hidden;
    }

    #wrap{
      visibility: hidden;
    }

    footer{
      visibility:hidden;
    }

body{
      background-color: #000;
    }
    .ifmobile{
    height: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    text-align: center; 
    visibility: visible;
    position:fixed;
    top: 0px;

}

}

/* Smartphones (landscape) ----------- */
@media (min-width : 321px) {
    #top{
      visibility: hidden;
    }
    #about{
      visibility: hidden;
    }

    #project{
      visibility: hidden;
    }

    #artist{
      visibility: hidden;
    }

    #contact{
      visibility: hidden;
    }

    #wrap{
      visibility: hidden;
    }

    footer{
      visibility:hidden;
    }

body{
      background-color: #000;
    }
    .ifmobile{
    height: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    text-align: center; 
    visibility: visible;
    position:fixed;
    top: 0px;
}
}

/* Smartphones (portrait) ----------- */
@media (max-width : 320px) {
    #top{
      visibility: hidden;
    }
    #about{
      visibility: hidden;
    }

    #project{
      visibility: hidden;
    }

    #artist{
      visibility: hidden;
    }

    #contact{
      visibility: hidden;
    }

    #wrap{
      visibility: hidden;
    }

    footer{
      visibility:hidden;
    }
    body{
      background-color: #000;
    }

    .ifmobile{
    height: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    text-align: center; 
    visibility: visible;
    position:fixed;
    top: 0px;
}
}

/* iPads (portrait and landscape) ----------- */
@media (min-device-width : 768px) and (max-device-width : 1024px) {
    #top{
     visibility: hidden;
    }
    #about{
      visibility: hidden;
    }

    #project{
      visibility: hidden;
    }

    #artist{
      visibility: hidden;
    }

    #contact{
      visibility: hidden;
    }

    #wrap{
      visibility: hidden;
    }
    body{
      background-color: #000;
    }

    footer{
      visibility:hidden;
    }

   .ifmobile{
    height: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    text-align: center; 
    visibility: visible;
    position:fixed;
    top: 0px;
}
}

/* iPads (landscape) ----------- */
@media (min-device-width : 768px) and (orientation : landscape) {
.ifmobile{
  visibility: hidden;
}
 #top{
      visibility: visible;
    }
    #about{
      visibility: visible;
    }

    #project{
      visibility: visible;
    }

    #artist{
     visibility: visible;
    }

    #contact{
      visibility: visible;
    }

    #wrap{
      visibility: visible;
    }

 


    #calendar {
      height:800px;
      width: 950px;

    }

    .buds{
      margin-top:-370px;
    }

  

    footer{
     visibility:visible;
    }

/* iPads (portrait) ----------- */
@media (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
    #top{
      visibility: hidden;
    }
    #about{
      visibility: hidden;
    }

    #project{
      visibility: hidden;
    }

    #artist{
     visibility: hidden;
    }

    #contact{
      visibility: hidden;
    }

    #wrap{
      visibility: hidden;
    }


    footer{
     visibility:hidden;
    }

    body{
      background-color: #000;
    }

  .ifmobile{
    height: 100%;
    width: 100%;
    background-color: #000;
    color: #fff;
    font-family: 'Fredericka the Great', cursive;
    font-size: 24px;
    text-align: center; 
    visibility: visible;
    position:fixed;
    top: 0px;
}
}

@media (min-width : 1224px) {
  .ifmobile{
  visibility: hidden;
}
 #top{
      visibility: visible;
    }
    #about{
      visibility: visible;
    }

    #project{
      visibility: visible;
    }

    #artist{
     visibility: visible;
    }

    #contact{
      visibility: visible;
    }

    #wrap{
      visibility: visible;
    }

    footer{
     visibility:visible;
    }
}


.navbar{
  font-family: 'Questrial', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 900;
  z-index:3;
  
}

.navbar-nav > li > a {
  color: #F2700C;
  background-color: none;
}
.navbar-nav > li > a:hover {
  background-color: rgba(0,0,0,0);
}


.nav{
  background-color: none;
}

/* Center Top Bar */
.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

.navbar .navbar-collapse {
  text-align: center;
}

/* Fullscreen Bootstrap Modal */

.modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content {
  height: 100%;
  border-radius: 0;
  background-color: rgba(51,51,51,.3);
}

.modal-header{
  border:none;
  padding-bottom: 5%;
}

button.close{
  color: #F2700C;
}