@charset "utf-8";
/* CSS Document */
/*----------helpful reminder for padding/margin:top, right, botton, left----------*/
/*----------Basics----------*/
html, body {
  height: 100%; 
}

body{
  margin:0;
  padding:0;
  font-family: 'Open Sans', sans-serif;
  background: #D1D0CE;
}

h1,h2,h3{
  margin: 0;
  padding: 0;
  font-family: 'Baloo Bhaina', cursive;
  width:100%;/* although this is the default width, I had to declare it or my text-align wouldn't work(!) */
}
h1{
  margin: 0 auto;
  font-size: 3em;
  text-align: center;
  letter-spacing: .1em;
  line-height: 1em;
  margin-top: .5em;
  margin-bottom: .25em;
}
h2{

  text-transform: uppercase;
  font-size: 2.5em;
  text-align: center;
  margin:.5em 0;
}
h3{
  font-size: 2em;
 margin:.5em 0;
  /*One em becomes the value of the parent-tag's font. Since here h2 is 16 px, the margin is 8px. Interesting!*/
}

p{  
  margin: 0;
  padding: 0;
  padding-bottom: .5em;
  line-height: 1.75em;
  font-weight: 500;
  font-size: 1.1em;
  font-family: 'Open Sans', sans-serif;
}

img{
  max-width:100%;
  height:auto;
}

div{ 
  display: block;
  margin: 0;
}

a:link, a:visited a:hover, a:active{
  text-decoration: none;
  border: none;
 }
 ul{
  list-style-type: none;
}

.container{
  padding-top: 0px;
}
/*----------The Nav Bar----------*/

/* Edited NAV ELEMENTS - FROM BOOTSTRAP */

 
  /* navbar bg color and bottom edge*/
  .navbar-default {
    background: #D1D0CE;
    border-bottom: solid #C0C0C0 2px;
  }
  /* navbar text-color */
  .navbar-default .navbar-brand {
    color: #000;
    border:none;
  }
  /* navbar text/hover color */
  .navbar-default .navbar-brand:hover,
  .navbar-default .navbar-brand:focus {
    color: #000;
  }
  /* links, text-color */
  .navbar-default .navbar-nav > li > a {
    color: #000;
  }
  /* links text/hover & background/hover colors */
  .navbar-default .navbar-nav > li > a:hover,
  .navbar-default .navbar-nav > li > a:focus {
    color: #fff;
    background-color: #000;
  }
  /* links text/CURRENT & background/CURRENT colors */
  .navbar-default .navbar-nav > .active > a, 
  .navbar-default .navbar-nav > .active > a:hover, 
  .navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #000;
  }

/*----------container move for navbar----------*/

.move-under{
    position: relative;
    top: 50px;
}
.move-under-that{
    position: relative;
    top: 5em;
}

/*----------The top Banner----------*/

/*STUFF FOR SCALING the TOP BANNER */
/*first the div*/
.top-header{
  height: 480px;
}
 /* Note that the background banner-image 
gets placed using the CSS, not the HTML.
There is no <img src=""> on the HTML side. */
  .bannerBackground{
  background-repeat: no-repeat;
  background-size:cover;
  background-color: #cccccc;
  background-position: center center;
  }

  .onebanner{
    background-image: url("images/rainbow_flowers_banner1.jpg");
  }
  .twobanner{
    background-image: url("images/red_polygon.jpg"); 
  }
  .threebanner{
    background-image: url("images/yellow_polygon.jpg"); 
  }
  .fourbanner{
    background-image: url("images/blue_polygon.jpg"); 
  }

.space{
  margin:15px 5px: 
}
.bottom{
  padding-bottom:3em;
}
/* about margins, this class
uses margin-bottom to work from top down*/
.myborder{
  /* Using this one on every CHILD in all rows */
  /*border:solid 2px;*/
  padding:1em;
  margin-bottom: 0em;
}


/*----------Images----------*/
.polaroid-left {
  max-width: 100%;
  width: 400px;
  height: auto;
  margin:0 20px 20px 0;
  background-color: white;
  box-shadow:4px 4px 4px #7E7F79;
  float:left;
}
.polaroid-right {
  max-width: 100%;
  width: 400px;
  height: auto;
  margin:0 0 20px 20px;
  background-color: white;
  box-shadow:4px 4px 4px #7E7F79;
  float:right;
}

.text p{
  text-align: center;
  padding: 10px 20px;
  font-weight:700;
}
/*----------the drop down menus----------*/
.glyphicon{
  float: left;
  margin:5px;
}
#oneflip,#twoflip,#threeflip,#fourflip,#fiveflip,#sixflip{
  margin:0;
  border: none;

}
#oneflip:hover,#twoflip:hover,#threeflip:hover,#fourflip:hover,#fiveflip:hover,#sixflip:hover{
  cursor: context-menu;
  opacity: 0.8;
}

#onepanel,#twopanel,#threepanel,#fourpanel,#fivepanel,#sixpanel{
  display: none;
}
/*TEST: should change on from tiny screens? */
@media (max-width: 1024px) {
  .onebanner,.twobanner,.threebanner,.fourbanner,.bannerBackground{
    height: 420px;
  }
}
@media (max-width: 800px) {

    h1 {
       font-size: 2em;
       letter-spacing: .05em;
       line-height: 1em;
    }

    h2 {
       font-size: 1.5em;
       margin:0;
    }

    h3 {
       font-size: 1.25em;
    }


    .move-under-that{
    position: relative;
    top: 50px;
    }

    p{
      font-size: .9em;
      line-height: 1.5em;
     /*border:solid 1px;*/
      padding:0 10% .75em;
    }
  .onebanner,.twobanner,.threebanner,.fourbanner,.bannerBackground{
    height: 360px;
  }
}
@media (max-width:640px) {
  .onebanner,.twobanner,.threebanner,.fourbanner,.bannerBackground{
    height: 280px;
  }
}
@media (max-width:480px) {
  .onebanner,.twobanner,.threebanner,.fourbanner,.bannerBackground{
    height: 240px;
  }
}