a{
    color:#111;
}
a:hover, a:active {
    color:rgb(20,70,255);
}

body{
    background-color:#222;
}
#wrapper{
    position:relative;
}


[role="banner"]{
    position:fixed;
    width:100%;
    top:0;
    z-index:100;
    background-color:#333;
    border-bottom:1px solid transparent;
    color:#f0f0f0;  
    
  -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; 
}
[role="banner"].active{
  -webkit-box-shadow: 0px 0px 8px 5px rgba(100,100,100,0.3);
          box-shadow: 0px 0px 8px 5px rgba(100,100,100,0.3);
    border-bottom:1px solid rgba(50,50,150,0.5);
}
[role="banner"] h1{
	margin-top:0;
	font-size:3em;
	text-align:center;
    margin-bottom:0;
}

.job-title-wrap{
    margin-top:-5em;
    text-align:center;
    width:100%;
    
-webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    perspective: 1000px;
}
.csstransforms3d .job-title{

    color:#f0f0f0;
-webkit-transition: all 1s ease-in-out; 
     -moz-transition: all 1s ease-in-out; 
       -o-transition: all 1s ease-in-out; 
          transition: all 1s ease-in-out; 

   -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
          
        transform-origin:center bottom;
    -ms-transform-origin:center bottom;
-webkit-transform-origin:center bottom;
   -moz-transform-origin:center bottom;
     -o-transform-origin:center bottom;
     
  -webkit-transform: rotateX(0deg); 
     -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
          transform: rotateX(0deg);
}
.csstransforms3d .job-title.active{
    color:#222;
  -webkit-transform: rotateX(90deg); 
     -moz-transform: rotateX(90deg);
      -ms-transform: rotateX(90deg);
          transform: rotateX(90deg);
          
          -webkit-box-shadow: 5px 10px 40px 0px #000; 
          box-shadow:  5px 10px 40px 0px #000;
}
[role="main"]{
    padding-bottom:50px;
    margin-top:10em;
    position:relative;
    z-index:15;
}
ul.g{
    margin:0;
    padding:0;
}

/* content blocks */
.content-block-wrap{
    list-style:none;
    margin:0;
    padding:0;
}
.content-block{
    background-color:rgba(248,248,248,0.5);
    margin-bottom:1em;
    position:relative;
    
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.5); 
          box-shadow:  5px 5px 5px 0px rgba(0,0,0,0.5);
}
.content-block > .inner{
    padding:1em;
    padding-top:30px;
}
.content-block .h3-wrap{
    position:absolute;
	z-index:10;
}
.content-block h3{
    margin:0;
    padding:.5em .8em;
    background-color:rgba(20,70,255,0.75);
    color:#f0f0f0;
}
.content-block p{
    line-height:1.6;
}

/* rotate ul */
.rotate-wrap{	
	margin:0;
	padding:0;
	list-style:none;
}

.rotate-wrap > li{

 -webkit-perspective: 2000px;
    -moz-perspective: 2000px;
      -o-perspective: 2000px;
         perspective: 2000px;
    
    margin-bottom:.5em;
	margin-top:1.5em;
}

.rotate-wrap > li > .inner{
	padding:.5em .8em;
	background-color:rgba(75,75,75,0.6);
}
.csstransforms3d .rotate-wrap > li > .inner{
-webkit-transition: all 0.5s ease-in-out; 
     -moz-transition: all 0.5s ease-in-out; 
       -o-transition: all 0.5s ease-in-out; 
          transition: all 0.5s ease-in-out; 

   -webkit-transform-style: preserve-3d;
     -moz-transform-style: preserve-3d;
      -ms-transform-style: preserve-3d;
          transform-style: preserve-3d;
          
        transform-origin:center top;
    -ms-transform-origin:center top;
-webkit-transform-origin:center top;
   -moz-transform-origin:center top;
     -o-transform-origin:center top;
          
  -webkit-transform: rotateX(86.2deg); 
     -moz-transform: rotateX(86.2deg);
      -ms-transform: rotateX(86.2deg);
          transform: rotateX(86.2deg);
    
    position:relative;
    top:40px;
    opacity:0;
}
.csstransforms3d .rotate-wrap > li.active > .inner{
  -webkit-transform: rotateX(0deg); 
     -moz-transform: rotateX(0deg);
      -ms-transform: rotateX(0deg);
          transform: rotateX(0deg);
    top:0px;
    opacity:1;
}


/*# Media Queries/2: 768px  #*/
@media only screen and (min-width: 48em) {
	.csstransforms3d .rotate-wrap > li > .inner{
      -webkit-transform: rotateX(88.6deg); 
         -moz-transform: rotateX(88.6deg);
          -ms-transform: rotateX(88.6deg);
              transform: rotateX(88.6deg);   
    }
}


/* bricks override */
.brick-wrap {
    background-color: #222;
}