@import url('meyer-reset.css');
@import url('header.css');
@import url('back-top-menu.css');
@import url('typography.css');
@import url('https://fonts.googleapis.com/css?family=Yantramanav:300,400,500,700');

body {margin: 0 auto; padding: 0; color: #3e3e3e; font-family: 'Yantramanav', sans-serif; background: #fff;}/*#f4f4f4*/
h1 {margin: 0; padding: 0; font-family: 'Yantramanav', sans-serif; font-weight: 400; font-size: 30px; line-height: 1.5; color: #333; text-align: center;
}
h2 {margin: 0; padding: 0; padding-bottom: 10px; font-family: 'Yantramanav', sans-serif; font-weight: 300; font-size: 24px; line-height: 1.5; color: #333; text-align: center;
}
h6 {margin: 0; padding: 0; font-family: 'Yantramanav', sans-serif; font-weight: 300; font-size: 18px; line-height: 1.5; color: #666; text-align: center;
}
p {
  margin: 0; padding: 0; 
  font-size: 16px;
  text-align: left;
}

* {
  list-style-type: none;
  animation: fadein 1s;
/*transition: all 0.2s ease-out !important;
}
@keyframes fadein {
  from { opacity:0; }
  to { opacity:1; }
*/
}

/*Headroom Header plugin*/
.headroom {position: fixed; z-index: 1; transition: transform 200ms linear; left: 0; right: 0; top: 0;}
.headroom--pinned {transform: translateY(0%); opacity: 0.92;}
.headroom--unpinned {transform: translateY(-100%);}

/*PAGE DETAIL*/
/* section-specific styles */
summary#mip { background-image: url("../img/work/ebay_illustration.png"); }

summary#masthead {
  margin: 0;
  text-align: center;
  border-bottom: 1px solid #e6e7e8;
  /*background-image: url("http://derekshirk.com/wp-content/uploads/2015/01/130313-BB-07-2000px-1500x998.jpg");*/
  /*background-image: url("http://virtualphotographystudio.com/wp-content/uploads/2014/05/professional-photographer.jpg");*/
}

.masthead-color{
  /*background-color: rgba(140,198,62,0.65); background-color: rgba(0,154,215,1);*/
  background: rgba(247,248,248,0.8); /*#f7f8f8;*/ /*linear-gradient(to bottom,  #12B0AD 0%, #12B0AD 100%);*/ /*#0084cb*/
  padding: 140px;
}

summary h2 {
  color: #333;
  font-size: 42px;
}
summary h4 {
  color: #666;
  font-size: 20px;
  font-weight: 300;
}
summary h6 {
  padding-bottom: 5px;
  color: #999;
  font-size: 20px;
  font-weight: 300;
  text-align: left;
}

.left-chevron {
    font-size: 20px;
}

main {
  padding: 0;
  zoom: 1;
  max-width: 2560px;
  margin-top: 1em;
  margin-left: 5%;
  margin-right: 5%;
}

summary#description{
  margin: 0;
  border-top: 4px solid #3079AB;
  position: relative;
  padding: 30px;
  line-height: 1.5;
  font-size: 13px;
  color: #555;
  background: #fff;
  border-radius: 4px;
  border: 0;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
  /*box-shadow: 0 1px 4px rgba(0,0,0,0.2);    Dark Shadow from Flat Style*/
  /*box-shadow: 0 2px 0px #E0E0E0;   Flat Style, No Shadow*/
  overflow: hidden;
  margin-top: -60px;
}

summary#description p {
    font-weight: 300; 
    font-size: 16px;
}

section#content {
    float: left;
    margin: 25px 0;
    width: 70%;
    position: relative;
}

section#content p {
    font-weight: 300;
    font-size: 16px;
}

article{
  padding: 30px;
  margin-bottom: 2.5%;
  position: relative;
  line-height: 1.5;
  font-size: 13px;
  color: #555;
  background: #fff;
  border-radius: 4px;
  border: 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}

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

aside h2{ color: #fff; padding-bottom: 20px;}
aside p { font-family: 'Yantramanav', sans-serif; font-weight: 300; padding: 0;}
#top_portion { background-color: rgba(46,48,58,0.96); color: #eee; padding: 20px 30px;}
#bottom_portion { padding: 15px 30px;}

aside#sidebar {
    float: right;
    position: relative;
    margin: 25px 0px;
    width: 27.8%;
    padding: 0px;
    line-height: 1.5;
    text-align: left;
    font-size: 13px;
    color: #333;
    background: #fff;
    border-radius: 4px;
    border: 0;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.35);
    border-top: 4px solid #12B0AD; /*#00C681 Green #0084cb Blue*/
    overflow: hidden;
}

aside#sidebar li a{
  margin-bottom: 5px;
  display: block;
  background-color: #eeeeee;
  color: #4693e2;
  font-size: 14px;
  padding: 10px;
  border-radius: 2px;
}

aside#sidebar li a:hover{ background-color: #aaaaaa; color: #fff; }
aside#sidebar li a:active, aside#sidebar li a.active{ background-color: #4693e2; color: #fff;}

/*EXTRA UI*/
.glyphicon.glyphicon-chevron-left {
    font-size: 14px;
    color: #999999;
    display: inline;
    position: relative;
    float: left;
    padding: 10px 0 0 3.5%;
}
.glyphicon.glyphicon-chevron-left:hover{
  color: #333;
}
.glyphicon.glyphicon-chevron-left:active {
  color: rgb(17, 174, 191);
}


.collection{background-color: rgba(46,48,58,0.96); width: 100%; overflow: hidden;}

.collection ol{ font-size: 0; display: flex; flex-flow: row wrap; }
.collection ol li{ margin: 0px 0px 0px 0px; padding: 0px; width: 50%; }
.collection ol li a img{ width: 100%; }

.collection ol li.item-1{ background-color: #0654ba; }
.collection ol li.item-2{ background-color: rgb(109,25,142); }
.collection ol li.item-3{ background-color: #0096D6; }
.collection ol li.item-4{ background-color: purple; }

figure.collection-item{ overflow: hidden; position: relative; opacity: 0; }
figure.collection-item:hover{ opacity: 0.1; transition: all .5s linear; cursor: pointer; }
figure.collection-item img { transform: scale(1); transition: 1.8s ease-in-out; }
figure.collection-item:hover img { transform: scale(1.15);}

figure:hover{
  opacity: 1;
  transition: all .5s linear; 
}

span h2{
  position: absolute;
  margin: 0 auto;
  padding: 0;
  width: 50%;
  padding: 225px 0;
  vertical-align: baseline;
  text-align: center;
  color: #fff;
  font-size: 42px;
}

footer {
  width: 100%;
  background-color: rgba(46,48,58,0.96);
  overflow: hidden;
  padding: 50px 0px;
}
footer p{text-align: center; color: #fff;}



/*MEDIA QUERIES*/

@media screen and (max-width: 930px) {

 article {
    flex: 40% 1 !important;
    max-width: initial;
  }

 article.full-width {
    flex: 100% !important;
  }
}

@media screen and (max-width: 530px) {
  aside #sidebar{ display: none; }
  
  p {
    padding-left: 0;
  }

section{
    display: block;
  }

article {
    text-align: center;
    flex: 0;
    width: 100% !important;
    display: block;
    margin: 10px;
    padding-right: 0px;
    padding-left: 0px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
}