/* -------------------------------------------------- 
   flexbox layout styles
-----------------------------------------------------*/
body {
	width: 90%;
	margin: 0 auto;
}
figure {
    align-content: center;
}
figcaption {
    font-size: small;
    text-align: center;
}
/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav ul {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
nav li {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
}
nav li.search-form {
	margin-right: 1em;
    margin-left:auto;
}
/* -------------------------------------------------- 
   header styles
-----------------------------------------------------*/
header hgroup {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
    -webkit-justify-content: center; 
    -ms-flex-pack: center;
    justify-content: center;
}

/* -------------------------------------------------- 
   main content styles
-----------------------------------------------------*/
section.main {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 2em;
}
.mine {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 2em;
    -webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
    -webkit-justify-content: center; 
    -ms-flex-pack: center;
    justify-content: center;
}
   .rev {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 2em;
    -webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
    -webkit-justify-content: center; 
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}    
.featured {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
	-webkit-flex: 3;
	-ms-flex:3;
	flex:3;
}
.sidebar {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
	-webkit-flex: 1;
	-ms-flex:1;
	flex:1;
	margin-right: 2em;
} 
ul.social {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
    -webkit-justify-content: space-around; 
    -ms-flex-pack: justify;
    justify-content: space-around;
}
/* -------------------------------------------------- 
   spotlight content styles
-----------------------------------------------------*/
.spotlight {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
}
.latest {
	-webkit-flex: 1;
	-ms-flex:1;
	flex:1;
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-flow: column;
	-ms-flex-flow: column;
	flex-flow: column;
	flex-direction: column;
}
/* -------------------------------------------------- 
   footer  styles
-----------------------------------------------------*/
footer {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	min-height: 4em;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
}

/* -------------------------------------------------- 
   Smaller screen styles
-----------------------------------------------------*/
@media only screen and (max-width: 720px) {

/*set direction to single column, set ordinal values*/
body {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
nav {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
}
header {
	-webkit-order: 0;
	-ms-flex-order: 0;
	order:0;
}
.main {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order:2;
}
    
.spotlight {
	-webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
footer {
	-webkit-order: 5;
	-ms-flex-order: 5;
	order: 5;
}

/* -------------------------------------------------- 
   top navigation styles
-----------------------------------------------------*/
nav ul {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
nav li.search-form {
	-webkit-order: -1;
	-ms-flex-order: -1;
	order: -1;
	margin: 0 0 2em;
	-webkit-align-self: center;
	-ms-flex-item-align: center;
	align-self: center;
}
/* -------------------------------------------------- 
  header styles
-----------------------------------------------------*/
header hgroup {
	-webkit-justify-content: space-around;
	-ms-flex-pack: space-around;
	justify-content: space-around;
	-webkit-align-items: space-around;
	-ms-flex-align: space-around;
	align-items: space-around;
    -webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
/* -------------------------------------------------- 
   main content styles
-----------------------------------------------------*/
section.main {
	display: block;
	margin-bottom: 2em;
}
.mine {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 2em;
    -webkit-align-items: center;
	-ms-flex-pack: center;
	align-items: center;
    -webkit-justify-content: center; 
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.rev {
    display:none;
}    
.sidebar {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
	margin-right: 0;
} 
.intro {
	-webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
	margin-top: 2em;
}
.social {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
	margin-top: 1em;
}
.newsletter {
	-webkit-order: 0;
	-ms-flex-order: 0;
	flex-order: 0;
	margin-bottom: 1em;
}
.events {
	-webkit-order: 1;
	-ms-flex-order: 1;
	flex-order: 1;
}
/* -------------------------------------------------- 
   spotlight content styles
-----------------------------------------------------*/
.spotlight {
	-webkit-flex-direction: column;
	-ms-flex-direction: column;
	flex-direction: column;
}
.synth {
    -webkit-order: 0;
	-ms-flex-order: 0;
	order: 0;
}
.etch {
    -webkit-order: 1;
	-ms-flex-order: 1;
	order: 1;
}
.maint {
    -webkit-order: 2;
	-ms-flex-order: 2;
	order: 2;
}
.cuts {
	-webkit-order: 3;
	-ms-flex-order: 3;
	order: 3;
}

}