/* Table of Contents
––––––––––––––––––––––––––––––––––––––––––––––
- General Content
- Typography
- Header & Navigation
- Images & Media
- Footer
- Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */

/* General Content
–––––––––––––––––––––––––––––––––––––––––––––– */
.main{padding-top:3%;}
.row{padding: 2% 0;}

.main_nav {
	background-color:#eee;
}
.biography
{background-color:#eee;
	border-bottom:2px solid #ccc;
}

a {
  color: #1EAEDB; }
a:hover {
  color: #0FA0CE; }


.collection-heading a {
	text-decoration: none;
	color:#555;
}

.collection-heading h3 {
   margin-bottom:0;
}
/*
.collection-heading h3 a {
   border-bottom:1px solid #eee;
}
*/

.collection-heading h3:hover a,
.collection-heading h3.unselected:hover a {
	text-decoration: none;
	border-bottom:1px solid #8edaf1;
	color: #0FA0CE;
}

.collection-heading h3.selected:hover a,
.collection-heading h3.selected a {
	color:#555;
	border-bottom:none;
	font-weight:bold;
}

.collection-heading p {
   text-align: center;
   color:#666;
   margin-bottom:0;
   font-weight:300;
}

.collection-heading h3.unselected a {
	color:#aaa;
}

.instructions {
	color:#009900;
	font-weight:300;
	font-size: 2rem;
	text-align:center;
	margin-bottom:0;
}

.secondary.instructions {
	color:#3289f3;
}

.folio-item-details p.company {
	font-size:0.9em;
	color:#666;
	margin-bottom:1rem;
	font-style: italic
}
.folio-item-details p.company b {
   font-style: normal;
}
.folio-item-details p{
	margin-bottom:1rem;
}

.folio-item-details .customer-quote {
	font-style: italic;
	font-size: 0.9em;
	color:#cd3d3d
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––– */
body{
	font-family: 'Open Sans',sans-serif;
	font-size: 1.5em;
	color: #000;
}
h2{
	font-family: 'Open Sans',sans-serif;
	font-weight:600;
	font-size: 2em;
	margin: 0.0em;
}
h3 { letter-spacing: 3px;
   text-align: center;
   font-size:1.6em;
   margin-top: 2rem;
   margin-bottom: 1rem;
   cursor: pointer;

}
h3:hover { color:#0FA0CE;}

h2.bio{color:#990000;}
p.bio{color: #555; margin-bottom:0.7rem;}

/* Header & Navigation
–––––––––––––––––––––––––––––––––––––––––––––– */
header.main_nav{
	padding: 1% 0;
	display: block;
}
div.logo{
	margin: 2% auto 0;
	text-align: center;
	border: 2px solid #bbb;
	background-color:#fff;
	font-size: 2em;
	color: #999;
	text-decoration: none;
	text-transform: uppercase;
	padding: 2px 10px 0 10px;
	font-weight:300;
   line-height: 1.3em;
}
/*
.logo a:hover{
	background-color: #fff;
	color: #7accc8;
}
*/
/* Images & Media
–––––––––––––––––––––––––––––––––––––––––––––– */
img{max-width: 100%;}
img.avatar{
/* 	border-radius: 400px; */
	border: 5px solid #fff;
}
img:hover{opacity:0.8;}
figure img:hover{opacity:1;}

.open-popup-link img, .image-link img,
.optim-link img, .dashboard-link img, .website-link img, .diagram-link img {
	border:1px solid #ccc;
}

/* Footer
–––––––––––––––––––––––––––––––––––––––––––––– */
ul.social{
	display: block;
	margin: 5% 0;
	list-style-type: none;
	text-align: center;
}
ul.social li{
	font-size: 3em;
	display: inline;
	padding: 0 2%;
}
ul.social li a{
	color: #666;
}
ul.social li.facebook a:hover{color: rgb(59,89,152);}
ul.social li.twitter a:hover{color: rgb(0,172,237);}
ul.social li.instagram a:hover{color: rgb(81,127,237);}
ul.social li.youtube a:hover{color: rgb(187,0,0);}
ul.social li.flickr a:hover{color: rgb(255,0, 132);}
ul.social li.linkedin a:hover{color: rgb(0, 123,182);}

p.copyright{
	text-align: center;
	color: #666;
	font-size: 1em;
}

/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––– */
/* Larger than mobile */
@media (max-width: 479px) {
	.logo a{font-size: 2em;}
	.main{padding-top:15%;}
	.portfolio img{margin-bottom: 10%;}
	img.avatar{margin-top: 15%;}
	h2.bio{font-size: 2.5em;}
	p.bio{font-size: 1.1em;}
	ul.social li a{font-size: .75em;}
}


/* ANIMATION
–––––––––––––––––––––––––––––––––––––––––––––– */

      /* Styles for dialog window */
      #small-dialog {
        background: white;
        padding: 20px 30px;
        text-align: left;
        max-width: 400px;
        margin: 40px auto;
        position: relative;
      }


      /**
       * Fade-zoom animation for first dialog
       */
      
      /* start state */
      .my-mfp-zoom-in .zoom-anim-dialog {
        opacity: 0;

        -webkit-transition: all 0.2s ease-in-out; 
        -moz-transition: all 0.2s ease-in-out; 
        -o-transition: all 0.2s ease-in-out; 
        transition: all 0.2s ease-in-out; 



        -webkit-transform: scale(0.8); 
        -moz-transform: scale(0.8); 
        -ms-transform: scale(0.8); 
        -o-transform: scale(0.8); 
        transform: scale(0.8); 
      }

      /* animate in */
      .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
        opacity: 1;

        -webkit-transform: scale(1); 
        -moz-transform: scale(1); 
        -ms-transform: scale(1); 
        -o-transform: scale(1); 
        transform: scale(1); 
      }

      /* animate out */
      .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
        -webkit-transform: scale(0.8); 
        -moz-transform: scale(0.8); 
        -ms-transform: scale(0.8); 
        -o-transform: scale(0.8); 
        transform: scale(0.8); 

        opacity: 0;
      }

      /* Dark overlay, start state */
      .my-mfp-zoom-in.mfp-bg {
        opacity: 0;
        -webkit-transition: opacity 0.3s ease-out; 
        -moz-transition: opacity 0.3s ease-out; 
        -o-transition: opacity 0.3s ease-out; 
        transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-zoom-in.mfp-ready.mfp-bg {
        opacity: 0.8;
      }
      /* animate out */
      .my-mfp-zoom-in.mfp-removing.mfp-bg {
        opacity: 0;
      }



      /**
       * Fade-move animation for second dialog
       */
      
      /* at start */
      .my-mfp-slide-bottom .zoom-anim-dialog {
        opacity: 0;
        -webkit-transition: all 0.2s ease-out;
        -moz-transition: all 0.2s ease-out;
        -o-transition: all 0.2s ease-out;
        transition: all 0.2s ease-out;

        -webkit-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -moz-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -ms-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        -o-transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );
        transform: translateY(-20px) perspective( 600px ) rotateX( 10deg );

      }
      
      /* animate in */
      .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {
        opacity: 1;
        -webkit-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -moz-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -ms-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        -o-transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
        transform: translateY(0) perspective( 600px ) rotateX( 0 ); 
      }

      /* animate out */
      .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {
        opacity: 0;

        -webkit-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -moz-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -ms-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        -o-transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
        transform: translateY(-10px) perspective( 600px ) rotateX( 10deg ); 
      }

      /* Dark overlay, start state */
      .my-mfp-slide-bottom.mfp-bg {
        opacity: 0;

        -webkit-transition: opacity 0.3s ease-out; 
        -moz-transition: opacity 0.3s ease-out; 
        -o-transition: opacity 0.3s ease-out; 
        transition: opacity 0.3s ease-out;
      }
      /* animate in */
      .my-mfp-slide-bottom.mfp-ready.mfp-bg {
        opacity: 0.8;
      }
      /* animate out */
      .my-mfp-slide-bottom.mfp-removing.mfp-bg {
        opacity: 0;
      }
    
    
.show-more {text-align:center;}

.secondary.instructions {display:none;}
.collection{display:none;}


/* PROJECT DETAIL
–––––––––––––––––––––––––––––––––––––––––––––– */

.folio-item-panel {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 960px;
  margin: 20px auto;
  text-align: center;
}
.folio-item-panel img {max-width: 100%;margin-bottom: 10px;}
.folio-item-meta { text-align: left;}
div.folio-item-meta div.row {
   margin-bottom:0;
   padding-bottom:1rem;   
}
.folio-item-services { color: #666;
   font-size:1.4rem;
}
.folio-item-services h5 {
   text-transform: uppercase;
   font-size:1.2rem;
   margin-bottom:0;
   letter-spacing: 0.2em;
   color:#000;
   margin-left:-1.6em;
}
.folio-item-services li {
   margin-bottom:0.2em;
   line-height: normal;
   list-style: circle;
/*    margin-left:1.3em; */
}

.folio-item-meta .row { margin-bottom:20px; }
.folio-item-media img:hover { opacity:1; }
hr { margin-top:1.5rem; margin-bottom:1.5rem;}

@media (max-width: 550px) {
	.avatar { width:100px; margin:0 auto;}
	.avatar-wrapper	{margin:0 auto;width:100px;}
	p.bio {text-align:center;}
}