// Base Styles


// box sizing border box
*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

body{
  font-size: 100%;
  line-height:1.5;
}

figure,ul{
  margin:0;
  padding:0;
}

// ----- Typography ---- //

a {
  padding: 1.5em 0;
  text-decoration: none;
  color: white;
  font-family: 'comfortaa';
  font-size: 1.25em;
  display:block;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  font-family: 'Roboto Slab';
  margin:0;
  padding:0;
}

h2 {
  font-weight: 700;
  font-size: 2rem;
}

h3 {
  font-family: 'comfortaa';
  font-weight: 100;
  font-size: 1.5rem;
}

p {
  font-weight: 100;
  font-size: 1.1rem;
    @media screen and (min-width:1100px) {
    	font-size: 1.25rem;
    }
}
// --- End Typography ---- //










// ----- Header & Nav ---- //

#header {
  background-color: black;
  width: 100%;
}


nav {
  width: 90%;
  margin: 0 auto;
  
    @media screen and (min-width:750px) {
    	width: 50%;
      margin:0 0 0 4%;
    }
}

.global-nav{
// Display Flex to make the <li> flex-items
// justify-content : space-between is MAGIC 
  // it evenly distributes the space between the
  // space between nav links no matter the width
  display:flex;
  justify-content:space-between;
}
// ---- End Header & Nav ----- //









// --------- Content Inside "Wrapper" Styles ------ // 


.wrapper{
  @media screen and (min-width:1100px) {
  //display flex on wrapper so aside can float up
  // at big device sizes
  display:flex;
  }
}







  // ---- Main Styles ---- //


main {
  // Set display:flex
   // flex-direction: column
   // column allows us to keep our layout vertical
   // but still have access to switch order among other things.
  display:flex;
  flex-direction:column;
  padding:3.5em 0;
  background-image: url('http://www.designbolts.com/wp-content/uploads/2012/12/Subtle-Dots-White-Tileable-pattern.jpg');
    
    @media screen and (min-width:1100px) {
    	width: 80%;
      flex-grow:1;
    }
  
  .content-3 {
    // This drop the third content block below the image gallery
    // which is currently in order position 4 causing
    // the image gallery to bump up to position 3
    // at  viewport size 700px
    @media screen and(min-width:700px) {
    	order:4;
    }
  }
}

.content-sections {
  width: 95%;
  margin:0 auto 2em;
}



.gallery-container {
  width: 95%;
  margin:0 auto 2em;
}

.gallery {
  // Display flex to make <figures> in gallery flex-items
  // Set direction to row - to make grid
  // Set flex-wrap to wrap to let flex-items flow and wrap
    //to new row when needed
  width: 98%;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  flex-direction:row;
  
    @media screen and (min-width:550px) {
      .gallery-item-1{order:3;}
      .gallery-item-2{order:6;}
      .gallery-item-3{order:1;}
      .gallery-item-4{order:4;}
      .gallery-item-5{order:3;}
      .gallery-item-6{order:2;}
    }
  
    @media screen and (min-width:900px) {
      .gallery-item-1{order:1;}
      .gallery-item-2{order:2;}
      .gallery-item-3{order:3;}
      .gallery-item-4{order:4;}
      .gallery-item-5{order:5;}
      .gallery-item-6{order:6;}  
    }
  
    @media screen and (min-width:1100px) {
      .gallery-item-1{order:6;}
      .gallery-item-2{order:5;}
      .gallery-item-3{order:4;}
      .gallery-item-4{order:3;}
      .gallery-item-5{order:2;}
      .gallery-item-6{order:1;}
    }
} // end gallery style


.gallery-items{
  // at mobile gallery-items will be single col
  //padding provides gutter between items
  position: relative;
  width: 100%;
  padding:.5em;
  
    @media screen and (min-width:550px) {
      // Once room allows gallery with switch
        //to 2 rows 2 cols
      width: 50%;
      
 
    }
    @media screen and (min-width:900px) {
      // At big screens
        // 2 rows 3 cols
      width: 33.333%;
    }
    img{
      width: 100%;
    }
} // end gallery-items style


// numbers that display over gallery-items
.gallery-order{
  color:white;
  font-family: 'Roboto Slab';
  font-size: 8em;
  position:absolute;
  top:0;
  left:50px;
  opacity:.75;
}

// -- End Gallery-Items -- //

// --- End Main Styles ---//











//-- Aside Styles --//
aside{
  padding:1em;
  background-image: url('http://www.designbolts.com/wp-content/uploads/2013/02/Light-aluminum-Grey-Seamless-Pattern-For-Website-Background.jpg');
  
    @media screen and(min-width:1100px) {
  	  padding:3.5em 0;
      
    }
  
  
  
  h2{
    text-align: center;
    margin-bottom:1.75em;
  }
  
} // end aside styles


.blog-container{
  //Set blog container to display flex
  // blog-post become flex-items
  // flex direction:row creates grid structure
  // Wrap allows blog post to wrap to another 
  // row when not enough width in parent container
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  width: 90%;
  margin:0 auto;
  
  @media screen and(min-width:1100px) {
    display:block;
    padding: 0 .75em 0 .75em;
  }
  
}


.blog-post {
  width: 100%;
  padding:.35em;
  margin-bottom:1em;
    @media screen and (min-width:600px) {
      //change to 2 rows 2 cols
      width: 50%;
    }
  
    @media screen and (min-width:1100px) {
      width: 100%;
      margin-bottom:2em;
      padding:0;
    }
    img{
       width: 100%;
    }
}


.blog-titles{
  margin-bottom:.5em;
}



footer{
  width: 100%;
  background-color: black;
  height:4.5em;
}