body
{
    overflow-x:hidden;
    background-attachment:fixed;
    background-size:cover;
    font-family: 'Quattrocento Sans', sans-serif;
    position:relative;
    z-index:1;
}
*
{ 
    font-size:1em;
}
h2
{
    color:#408faf;
    padding-bottom:10px;
/*     border-bottom:1px solid #408faf; */
}
h3 a
{
    color:#333;
}
address
{
    font-weight:bold;    
}
address div
{
    clear:both;
    padding-bottom:10px;
}
address span
{
    float:right;
    font-weight:normal;
    text-align:right;
}
img 
{
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
em
{
    color:#777;
}
#navigation
{
    background-color:#333;
    border:none;
    background-image:none;
    border-radius:0px;
    
}
#portrait
{
    margin:auto;
    width:200px;
    display:block;
}
.well > h3
{
       margin-top:0;
       margin-bottom:20px;
}
.row > div:last-child:not(:first-child)
{
    padding-left:4px;
}
.active-square
{
    background-color:red;
    background-position:50% 50% !important;
    line-height:300px !important;
    text-shadow: 0px 0px #000 !important;
}
.date
{
    color:#777;
    font-size:.8em;
}
.divider
{
    background-color:#999;
}
#root
{
    padding:15px 15px 10px 15px;
    background-image:url('/style/alpha_50.png');
}
#header,#content
{
    display:inline-block;
    position:relative;
    width:100%;
    left:15px;
}
#content
{
    margin-top:-6px;
}
#header > div
{
}
#header.affix
{
    position:fixed;
    height:70px;
    z-index:2;
    overflow:hidden;
}
#header
{
    height:150px;
    color:white;
}
#header h1
{
    font-family: 'Quattrocento Sans', sans-serif;
    margin-top:0;
    font-size:4.5em;
}
#header h1 a
{
    color:white;   
}
#header h1 a:hover
{
    color:white;   
    text-decoration:none;
}
#header h2
{
    font-family: 'Quattrocento Sans', sans-serif;
    padding-top:20px;
    padding-bottom:0px;
    font-size:2.5em;
    color:white;
}
#header:after,#content:after
{
    padding-top:16.6666666666666%;
    display:block;
    content:'';
}
#header > div,#content > div
{
    top:0;
    bottom:0;
    right:0;
    left:0;
    position:absolute;
}
#header > div.no-abs,#content > div.no-abs
{
    top:auto;
    bottom:auto;
    right:auto;
    left:auto;
    position:static;
}
#content:after
{
    padding-top:33.333333%; 
}
#content.no-after:after
{
    padding:0;
}

#content #text
{
       background-color:white;
       
}
#text > div
{
       padding: 15px 0;
       text-align:justify;
       font-size:1.2em;
       height:auto;
}
#resume
{
       background-color:#84b7cc;
}
#resume > a
{
       background-image:url("/style/resume.png");   
}
#portfolio
{
       background-color:#3a8cad;
}
#portfolio > a
{
       background-image:url("/style/portfolio.png");   
}
#linkedin
{
       background-color:#6ba9c1;
}
#linkedin > a
{
       background-image:url("/style/linkedin.png");    
}
#facebook
{
       background-color:#9dc5d6;
}
#facebook > a
{
       background-image:url("/style/fb.png");
}
#contact
{
        background-color:#539ab7;
}
#contact > a
{
       background-image:url("/style/contact.png");       
}
#extra
{
       background-color:#9dc5d6;
   
}

.square
{
       height:100%;
       min-height:32px;
       overflow:hidden;
       padding:0;
}
.square > a
{
       display:block;
       height:100%;
       width:100%;
       border-spacing:0;
       background-position:50% 50%;
       background-repeat:no-repeat;
       line-height:300px;
       padding-top:20px;
       color:white;
       text-align:center;
       font-size:2em;
       text-decoration:none;
        text-shadow: 2px 2px #3a8cad;

}
.fullHeight
{
       height:100%;
}
.halfHeight   
{
       height:50%;
}
/*.row
{
       margin-bottom:0;
}
.row div
{
    -webkit-transition: width 0.3s ease, margin 0.3s ease;
    -moz-transition: width 0.3s ease, margin 0.3s ease;
    -o-transition: width 0.3s ease, margin 0.3s ease;
    transition: width 0.3s ease, margin 0.3s ease;    
}*/

@media (max-width: 768px) 
{
    .fullHeight   
    {
           height:auto;
    }
    #header:after
    {
        display:none;
    }
    #header
    {
        display:block;
        position:static;
        margin-left:0px;
    }
    #header > div
    {
        position:static;
    }
/*    #header > div.affix
    {
        position:relative;
        height:auto;
        z-index:2;
        overflow:hidden;
    }*/
    .square
    {
        display:none;
    }
    
}
@media (max-width: 992px) 
{
    body
    {
        padding-top:0 !important;
    }
    .row > div:last-child
    {
        padding-left:15px;
    }
    .halfHeight   
    {
        height:auto;
    }
    .square a
    {
        line-height:20px !important;
        background-position:50% 130% !important;
    }
    #squares .square
    {
        max-height:64px;    
    }
    #squares .square a
    {
        height:64px;
        line-height:64px !important;
        color:white;
        font-size:1.2em;
        background-position:top right !important;
        padding-left:10px;
        text-align:left;
    }
    #header h2
    {
        padding-top:0px;
        margin-top:0;
        padding-bottom:5px;
        font-size:2em;
    }

    #root
    {
        padding-left:0;
    }
    #content
    {
        display:block;
        position:static;
        margin-left:0px;
    }
    #content > div
    {
        position:static;
    }
    #content:after
    {
        display:none;
    }
    

}