/* typefaces */
@import url('https://fonts.googleapis.com/css?family=Merriweather:700');

/* page setup */ 

.bg-home {
min-height: 100%; 
    height: auto !important; 
    margin: 0 auto;

    
    background-color: #fff;
    background: -webkit-linear-gradient(45deg, #d4e7ff, #ffd3ea, #d4e7ff, #ffd3ea, #c6ffff, #fdffdb) fixed;
    background: linear-gradient(45deg, #d4e7ff, #ffd3ea, #d4e7ff, #ffd3ea, #c6ffff, #fdffdb) fixed;
    background-size: 1000% 1500%; /* X Y -- Y must be longer than height of page */
        background-repeat: no-repeat;

    -webkit-animation: HomeGradient 40s ease infinite;
    animation: HomeGradient 40s ease infinite;
    }
    @-webkit-keyframes HomeGradient {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%}
    }
    @keyframes HomeGradient {
        0%{background-position:0% 50%}
        50%{background-position:100% 50%}
        100%{background-position:0% 50%} 
}



body > .container-fluid { overflow: hidden; }        /* width fix */
body > .container-fluid > * { overflow: visible; }   /* reset back to normal */

.col-sm-2 {
    padding-right: 2em;
    padding-left: 1em;
} 
.col-sm-3 {
    width: 23%;
}
.centre-col {
    width: 18%;
}
.about-page {
    background-color: #fff;
    position:absolute;
    height: 105%;
    width: 62%;
    top: 65%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -26%);
    border: 1px solid #fff;
}
.row {
        margin-left: 0px;
    margin-right: 0px
}
.row-1 {
    height:35em; 
    padding-top:20vh;
    padding-bottom: 20vh;
}
.row-2 {
    padding-bottom: 10em;
}
.row-3 {
    height:15em; 
    padding-top:10em
    }
.header-small {
    position: relative;
}
.row-height-about {
    height: 30em;
} 

/* header */

.row-height {
    height: 0em;
} 
.container-fluid {
    padding: 0px;
}

#header-container {
    padding: 1.9em 0em 1.2em 0em;
    z-index: 20;
}
#header:hover {
    background-color: #fff;
    padding: 2px 0px;
}

/* intro */

.intro-about {
    position: fixed;
    left:50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%,0%);
    padding-top: 24vh;
    font-size: 1.45rem;
    line-height: 1.55;
    /*min-width: 42em; */
    max-width: 28em;
}
    .intro-about > p {
    display: inline; 
    background: #fff;
    padding: 2px 0px 2px 0px;
    color: #414141
}
.intro-height {
    height: 50vh
}


/* typography */

p {
    font-family: 'Inconsolata', Courier, "Lucida Grande", monospace;
    color: #000;
} 
h2 {
    margin: 0em 0em 3em 0em;
    font-family: 'Merriweather', "Lucida Grande", serif; 
    font-size:0.9em;
    font-weight: 400; 
    line-height:1; 
    letter-spacing:0.01em 
}
h5 {
        margin: 0em 0em 0.6em 0em;
    font-family: 'Merriweather', "Lucida Grande", serif; 
    font-size:0.8em;
    font-weight: 400; 
    line-height:1.4; 
    letter-spacing:0.01em 
}

.sidebar {
    font-size: 0.78em
}
.sidebar a:hover {
    text-decoration: none;
}
.sidebar p {
    display: inline;
}
#sidebar1 {
    background-color: #f3f8fe;
    width: 12em;
    margin: 0.5em 0em;
}
#sidebar2 {
    background-color: #f7f7f7;
    width: 12em;
    margin: 0.5em 0em;
}
#sidebar3 {
    background-color: #f7f7f7;
    width: 12em;
    margin: 0.5em 0em 1.5em 0em;
}
#sidebar4 {
    background-color: #fff;
    width: 12em;
    margin: 0.5em 0em;
}
#sidebar1:hover, #sidebar2:hover, #sidebar3:hover, #sidebar4:hover {
    background-color: #ffe4f2;
}
.currently {
    font-size: 0.9em;
    line-height: 1.4;
    max-width: 20em
}
.useful {
    font-size: 0.75em;
    line-height: 1.1;
    display: block;
    padding: 1px 0px;    
}
.details {
    font-size: 0.75em;
    color: #525252;
    letter-spacing:0.02em;
    margin-bottom: 3em
}

.spacer {
    margin-bottom: 3.7em
}
.kern-tighter {
    letter-spacing: -0.05em
}
.kern-looser {
    letter-spacing: 0.1em
}
a, a:link, a:visited, a:hover {
    color: #000;
    text-decoration: none;   
}
.underline {
display: inline-block;
  position: relative;     
}
.underline::after {
content: '';
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 3px solid #e8f1fd;
  margin-top: 6px;
}
.baselineshift {
    position: relative; 
    top: -.12rem
}
.arrowsize {
    font-size: 1.5rem;
}

/* footer */


.footer-about > p {
    display: inline-block; 
    font-size: 1rem;
    letter-spacing: 0.01rem;
    background: #fff;
    padding: 0.1em 0.8em 0.15em 0.8em;
    color: #414141
}


/* media queries ================================================ */


/* XS ----------- */
@media only screen and (max-width: 760px) {
    .container, .col-xs-12 .container-fluid, .visible-xs-block { 
    padding: 0px ;
        margin: 0px;
}
    .bg-home {
    -webkit-animation: HomeGradient 25s ease infinite;
    animation: HomeGradient 25s ease infinite;
    }
    
    body > .container-fluid { overflow: hidden; } /* width fix */
    body > .container-fluid > * { overflow: visible; } /* reset back to normal */
    
    body {
    z-index: 1;
    font-size: 1.5em;  
    display:block;
    height: 100%;
    width: 100%;
}
    a, a:link, a:visited {
    color: none;
    text-decoration: none;   
}
    a:hover {
    text-decoration: none;   
    padding: 0px;
}
    a:active {
    color: none;
    text-decoration: none;  
}
    .row-height {
    height: 10.5em;
}
    #header-container {   
    position: fixed;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
    padding: 5.75em 0em 4em 0em
}
.about-page {    
    width: 96%;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
    display:none
} 
.row-1 {
    width: 96%;
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
    background-color: #fff;
    height:58em; 
    padding-top:0em;
    padding-bottom: 0em;
    margin-bottom: 0em;
} 
.row-2 {
    width: 96%;
    -webkit-transform: translate3d(2%, 0, 0);
    transform: translate3d(2%, 0, 0);
    height: 62em;
    padding-bottom: 0em;
    background-color: #fff;
 
}
.row-3 {
    height:9em; 
    padding-top:6em
    }    
.col-sm-3 {
    width: 11%;    
    background-color: #fff
}
.col-sm-2 {
    width: 100%;
    padding: 0em 0em 4em 17vw;
    background-color: #fff
}  
.firstblock {
    padding-top: 10em;
}    
.lastblock {
    padding-bottom: 3em;
}    
.xs-spacer {
    display: block;
    height: 0em;
}  
.intro-height {
    height: 15em;  
} 
.intro-about {
    padding-top: 1.75em;
    padding-left: 0.75em;
    font-size: 1.32rem;
    line-height: 1.8;
    width: 82%;
    max-width: 19em;
}
.intro-about > p {
    padding: 3px 0px 3px 0px;
}    
h2 {
    font-size:0.85em;
}
h5 {
    font-size:0.75em;
}
.underline::after {
  margin-top: 7px;
}    
.sidebar {
    font-size: 0.78em
}
.sidebar a:hover {
    text-decoration: none;
}
.sidebar p {
    display: inline;
}
#sidebar1 {
    background-color: #fff;
    border-bottom: 3px solid #f3f8fe;
    width: 19.5em;
    padding-bottom: 0.25em;
    margin: 0em 0em 1.25em 0em;
}
#sidebar2 {
    background-color: #fff;
    border-bottom: 3px solid #f7f7f7;
    width: 19.5em;
    padding-bottom: 0.25em;
    margin: 1.25em 0em;
}
#sidebar3 {
    background-color: #fff;
    border-bottom: 3px solid #f7f7f7;
    width: 19.5em;
    padding-bottom: 0.25em;
    margin: 1.25em 0em 0em 0em;
}
#sidebar1:hover, #sidebar2:hover, #sidebar3:hover, #sidebar4:hover {
    background-color: #fff;
}    
.sidebar-arrow {
    float: right
}    
.spacer {
    margin-bottom: 0em
}    
.currently {
    font-size: 0.86em;
    line-height: 1.4;
    max-width: 18em
}   
.useful {
    font-size: 0.86em;
    line-height: 1.1;
    display: block;
    padding: 1px 0px;    
}    
    .last {
        margin-bottom: 0px;
    } 
}

/**
 * iPhone 5
 * To combat vh bug
 */
@media screen and (device-aspect-ratio: 40/71) {
    .about-page {    
    width: 96%;
    -webkit-transform: translate3d(-50%, 3%, 0);
    transform: translate3d(-50%, 3%, 0);     
    display:none

} 
}

/* S ----------- */
@media (min-width: 768px) and (max-width: 991px) {
    #header-container {   
    padding: 13vh 0em 0.5em 0.5em;
     /*background-color:antiquewhite; */
}
    body {
    background-size: 1000% 1600%; /* X Y -- Y must be longer than height of page */
    font-size: 1.25em;        
}
    .about-page {
    margin-top: 40vh;
    width: 85%;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);        
}
    .intro-about {
    padding-top: 27vh;
    font-size: 1.3rem;
    line-height: 1.65;
}
    .intro-height {
    height: 46vh;

}
.col-sm-3 {
    width: 12%;
}
.col-sm-2 {
    width: 22%
}
.col-sm-pull-2 {
    right: 29%; /* centre-col value */
} 
.col-sm-push-2 {
    left: 22%; /* col-sm-2 value */
}     
.centre-col {
    padding-left: 2em;
    width: 29%;
}
.row-2 {
    padding-bottom: 11em;
}    
.row-3 {
    height:5em; 
    padding-top:0em
}     
    .baselineshift {
    top: 0.05em;
    font-family: 'Inconsolata', "Times New Roman", Times, serif;
}
@media (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
    .about-page {
    margin-top: 40vh;
    width: 85%;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);        
}
    }}


/* M ----------- */
@media (min-width: 992px) and (max-width: 1199px) {
    #header-container {   
        padding: 13vh 0em 0.5em 0.5em;
        /* background-color:beige; */
}
    body {
    background-size: 900% 1200%; /* X Y -- Y must be longer than height of page */
    font-size: 1.25em;        
}
    .about-page {
    margin-top: 40vh;
    width: 75%;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);        
}
    .intro-about {
    padding-top: 27vh;
    font-size: 1.3rem;
    line-height: 1.65;
}
    .intro-height {
    height: 46vh
}
.col-sm-3 {
    width: 17%;
}
    .col-sm-2 {
    width: 20%    
    }
    
.col-sm-pull-2 {
    right: 28%; /* centre-col value */
} 
.col-sm-push-2 {
    left: 20%; /* col-sm-2 value */
}     
.centre-col {
    padding-left: 3.5em;
    width: 28%;
}
.row-2 {
    padding-bottom: 11em;
}    
.row-3 {
    height:5em; 
    padding-top:0em
}     
    .baselineshift {
    top: 0.05em;
    font-family: 'Inconsolata', "Times New Roman", Times, serif;
}
}



/* L ----------- */
@media (min-width: 1200px) and (max-width: 1499px) {
    #header-container {   
        padding: 13vh 0em 0.5em 0em;
        /*background-color:darkseagreen; */
}
    body {
    background-size: 900% 1900%; /* X Y -- Y must be longer than height of page */
    font-size: 1.25em;    
}
    .about-page {
    margin-top: 42vh;
    width: 68%;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);        
}
    .intro-about {
    padding-top: 27vh;
    font-size: 1.3rem;
    line-height: 1.65;
}
    .intro-height {
    height: 46vh
}
.col-sm-3 {
    width: 21%;
}
.centre-col {
    padding-left: 3.5em;
    width: 24%;
}
.col-sm-pull-2 {
    right: 24%; /* centre-col value */
}
    .row-1 {
    height:32em; 
    padding-top:20vh
    }    
    .row-2 {
    padding-bottom: 12em;
}     
.row-3 {
    height:10em; 
    padding-top:5em
}      
    .useful {
    font-size: 0.77em;
    line-height: 0.95;
}
    .details {
    font-size: 0.8em;
    letter-spacing:0.01em;
}
    .baselineshift {
    top: 0.02rem;
    font-family: 'Inconsolata', "Times New Roman", Times, serif;
}
}


/* XL ----------- */
@media (min-width: 1500px) {
    #header-container {   
        padding: 14vh 0em 0em 0em;
        /* background-color: aliceblue; */
    }
    body {
    background-size: 900% 1700%; /* X Y -- Y must be longer than height of page */
        }
    .container-fluid {
        max-width: 1900px
    }
    .about-page {
    margin-top: 42vh;
    width: 62%;
    max-width: 80em;
    top: 0%;
    left: 50%;
    -webkit-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);        
}
    .baselineshift {
    top: -0.12em;
    font-family: 'Inconsolata', Courier, "Lucida Grande", monospace;
    position: relative;
}
    .row-1 {
    height:34em; 
    padding-top:18vh;
    padding-bottom: 22vh;
    margin-bottom: 0vh
    }
    .row-2 {
    padding-bottom: 15em;
}     
.row-3 {
    height:5em; 
    padding-top:0em
}     
    .centre-col {
        width: 18%;
        margin-right: 1em;
    }
    .col-sm-pull-2 {
    right: 17%; /* centre-col value */
}
}