/*
 charlesboyd.me
 
 File: style.css
 Type: CSS
 Author: Charles Boyd
 
 NOTICE: Site content, graphics, and source copyright (c)2015-2016 Charles Boyd unless otherwise noted.
 
 Publicly visible site layout (CSS and HTML tags) and also publicly visible site scripts (JavaScript) are openly licensed under the GNU General Public License v2.0 (http://www.gnu.org/licenses/gpl-2.0.txt). Attribution to Charles Boyd with link to charlesboyd.me is required (e.g. "Charles Boyd / charlesboyd.me").
 
 This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
 
 Note that this site's content (text, images, graphics, etc.) is NOT openly licensed and may NOT be republished, distributed, etc. unless the copyright holder (Charles Boyd) grants explicit and written permission; all rights reserved. Please just link to charlesboyd.me if you find something you wish to share. Thank you!
 
*/

/* -- Notes -- */
/*
 Theme Colors:
     Teal (Primary): #247C82
     Dark Blue (Shade 1): #2B363D
     Silver (Accent 1): #E4E3E8
     Dark Pink (Accent 2): #94415E
     Dark Lime Green (Accent 3):#739E5D

 Breakpoints:
     850px (Custom)
     768px (Custom and Bootstrap)
     400px (Custom)
     340px (Custom)
*/

/* -- Universal -- */
html, body{
    margin:0px;
    padding:0px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 1.05em;
    font-weight: 400;
    background: #FFF;
}

@viewport{
    zoom: 1.0;
    width: device-width;
}

.bounded{
    width: 850px;
    margin-left: auto;
    margin-right: auto;
    padding-left:10px;
    padding-right:10px;
}

.bounded-wide{
    width: 900px;
    margin-left: auto;
    margin-right: auto;
    padding-left:10px;
    padding-right:10px;
}

.centered{
    text-align: center;
}

.container {
    max-width: 850px;
}

.centered-sm{
    text-align: inherit;
}

.noscroll{
    position:relative !important;
    overflow:hidden !important;
}

#wrapper{
    position:relative;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    height: 100%;
}

h2{
    font-size: 3em;
    text-align: center;
    font-weight: 300;
}

a:link, a:visited {
    color: #FFF;
    text-decoration: underline;
}

a:hover, a:active {
    color: #EEE;
    text-decoration: underline;
}

.noselect{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

.clickable{
    cursor: pointer
}

/* -- Colors -- */
.text-primary { color: #247C82; } /* Teal */
.text-shade1 {  color: #2B363D; } /* Dark Blue */
.text-accent1 { color: #E4E3E8; } /* Silver */
.text-accent2 { color: #94415E; } /* Dark Pink */
.text-accent3 { color: #739E5D; } /* Dark Lime Green */
.text-white {   color: #FFF; }    /* White */
.text-black {   color: #000; }    /* Black */

.text-primary a:link, .text-primary a:visited { color: #247C82; } /* Teal */
.text-shade1 a:link, .text-shade1 a:visited {  color: #2B363D; } /* Dark Blue */
.text-accent1 a:link, .text-accent1 a:visited { color: #E4E3E8; } /* Silver */
.text-accent2 a:link, .text-accent2 a:visited { color: #94415E; } /* Dark Pink */
.text-accent3 a:link, .text-accent3 a:visited { color: #739E5D; } /* Dark Lime Green */
.text-white a:link, .text-white a:visited {   color: #FFF; }    /* White */
.text-black a:link, .text-black a:visited {   color: #000; }    /* Black */

.text-primary a:hover, .text-primary a:active { color: #247C82; } /* Teal */
.text-shade1 a:hover, .text-shade1 a:active {  color: #2B363D; } /* Dark Blue */
.text-accent1 a:hover, .text-accent1 a:active { color: #E4E3E8; } /* Silver */
.text-accent2 a:hover, .text-accent2 a:active { color: #94415E; } /* Dark Pink */
.text-accent3 a:hover, .text-accent3 a:active { color: #739E5D; } /* Dark Lime Green */
.text-white a:hover, .text-white a:active {   color: #DDD; }    /* White (off) */
.text-black a:hover, .text-black a:active {   color: #333; }    /* Black (off) */

.bg-primary { background-color: #247C82; } /* Teal */
.bg-shade1 {  background-color: #2B363D; } /* Dark Blue */
.bg-accent1 { background-color: #E4E3E8; } /* Silver */
.bg-accent2 { background-color: #94415E; } /* Dark Pink */
.bg-accent3 { background-color: #739E5D; } /* Dark Lime Green */
.bg-white {   background-color: #FFF; }    /* White */
.bg-black {   background-color: #000; }    /* Black */

/* -- Home (Banner and Tag) -- */
#home{
    background:url(img/stock2.jpg);
    background-size:cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    min-height: 460px;
    max-height: 600px;
    height: 85vh;
}

#tag{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.75);
    font-size:1.2em;
    padding:10px;
}

#home h1.hiddentitle{
    display:none;
}

#home #backgroundalt{
   display: none;
}

#home #title-container {
    position: absolute;
    top: 30%;
    color: white;
    /*
    left: 50%;
    transform: translate(-50%, 0);
    */
    /* font-size: 20px; */
    /* border: 1px white solid; */
    padding: 10px;
    /* background-color: rgba(0, 0, 0, 0.26); */
    text-shadow: 3px 3px 14px #000000;
    text-align: center;
    width: 100%;
}

#home #title-container h1 {
    font-size: 7vw;
    margin: 0;
}

#home #title-container h3 {
    margin: 0;
    font-size: 3vw;
}

/* -- Principles -- */
.value-box{
    font-size:1.3em;
    position:absolute;
    top:0px;
    width:25%;
    text-align:center;
}

.value-box img{
    width:100%;
}


/* -- Projects -- */
.divtile-inner{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    background-size:100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    position: relative;
    cursor:pointer;
}

.divtile-outer{
    width:33%;
    height:170px;
    margin:0px;
    padding:3px;
    display:inline-block;
}

.tiletitle{
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: left;
    color:#fff;
    background-color: rgba(0, 0, 0, 0.6);
    font-size:0.9em;
    font-weight:500;
    padding-top:2px;
    padding-bottom:2px;
    padding-left:5px;
}

#projectdetails{
    position:fixed;
    background-color: rgba(0, 0, 0, 0.5);
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    bottom:0px;
    right:0px;
    display:none;
}

.pd{
    max-width:850px;
    width:90%;
    background-color:#FFF;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    display:none;
    -webkit-box-shadow: 10px 10px 26px -12px rgba(0,0,0,0.7);
    -moz-box-shadow: 10px 10px 26px -12px rgba(0,0,0,0.7);
    box-shadow: 10px 10px 26px -12px rgba(0,0,0,0.7);
    border-top:0px;
    overflow:hidden;
}

.pd-title{
    width:100%;
    padding:15px;
    cursor:default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.pd-content{
    padding:20px;
    color:#000;
    font-size:0.9em;
    overflow-y: scroll;
    position:static;
    width:100%;
    max-height: 70vh;
}

.pd-close{
    float:right;
    cursor:pointer;
    width:30px;
    height:30px;
    background:url(img/ic_close_white_32dp_2x.png);
    background-size:100%;
    background-position: center center;
    background-repeat: no-repeat;
}

.pd-links{
    text-align: right;
    width:100%;
    line-height: 170%;
}

.pd-links a{
    color:#000;
    text-decoration:none;
    font-weight:500;
}

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 0px;
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* -- Posts -- */
#posts .posttitle{
    font-size: 1.5em;
    font-weight: 300;
}

#posts a:link, a:visited{
    text-decoration:none;
}

#posts a:hover {
    font-weight:500;
}

/* -- Contact -- */
#contact .contacttitle{
    font-size:1.4em;
    font-weight:400;
}

#contact p{
    font-weight:300;
}

#contact .socialicon{
    width:50px;
    height: 50px;
    margin-right:5px;
}

#contact .socialicon:hover{
    opacity: 0.8;
}

#contact .contactinfoimg{
    height: 28px;
}

#contact .contactinfoimg:hover{
    opacity: 0.75;
}

#contact .setoficons{
    padding:0px;
    display:inline-block;
    margin-bottom:10px;
}

/* -- Footer -- */
#footer{
    background-color: #222;
    color: #666;
    text-align:right;
    padding:10px;
    font-size:0.8em;
}



/* --|| Responsive CSS ||-- */


/* Screens <850px */
@media screen and (max-width: 850px){
    html, body{
        font-size: 1.0em;
    }
    
    .bounded{
        width: 100%;
        padding-left:15px;
        padding-right:15px;
    }
    
    .bounded-wide{
        width: 100%;
        padding-left:15px;
        padding-right:15px;
    }
    
    #home{
        height: 500px;
        min-height: inherit;
        max-height: inherit;
    }
    
    #tag{
        font-size:1.0em;
    }
}

/* Screens <768px */
@media screen and (max-width: 767px) {
    .centered-sm{
        text-align: center;
    }
    
    .divtile-outer{
        width: 49%;
    }
}

/* Large Smartphone (Screens <=400px) */
@media screen and (max-width: 450px) {
    #home{
        height: 450px;
    }
    #home #title-container h1 {
        font-size: 11vw;
    }
    #home #title-container h3 {
        font-size: 5vw;
    }
    #tag{
        font-size:0.85em;
    }
    .value-box{
        font-size:1.1em;
    }
}

/* Small Smartphone (Screens <=340px) */
@media screen and (max-width: 340px) {
    #home{
        height: 400px;
    }
    #tag{
        font-size:0.8em;
    }
}