/*
	Micah Rajunov
	copyright 2018
	My CSS

    ,-. . , , ,-. ,-. ,-. ,-,-. ,-.
    ,-| |/|/  |-' `-. | | | | | |-'
    `-^ ' '   `-' `-' `-' ' ' ' `-'
*/



/*
<link href="https://fonts.googleapis.com/css?family=Rubik|Work+Sans|PT+Sans|Century+Gothic|Francois+One|Harmattan|Mukta+Vaani:200,400,600,700,800|Oswald:200,400,500,700" rel="stylesheet">

font-family: 'Oswald', sans-serif;
font-family: 'Francois One', sans-serif;
font-family: 'Mukta Vaani', sans-serif;
font-family: 'Harmattan', sans-serif;
font-family: 'Rubik', sans-serif;
font-family: 'Work Sans', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: CenturyGothic,CenturyGothic,AppleGothic,sans-serif;
*/

/***** 
    FONTS
*****/

@font-face {
    font-family: 'Lobster13Regular';
    src: url('Lobster_1.3-webfont.eot');
    src: url('Lobster_1.3-webfont.eot?#iefix') format('embedded-opentype'),
         url('Lobster_1.3-webfont.woff') format('woff'),
         url('Lobster_1.3-webfont.ttf') format('truetype'),
         url('Lobster_1.3-webfont.svg#Lobster13Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/***** 
    GLOBAL Adjustments
*****/
#wrapper {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 300;
}
#wrapper h1,
#wrapper h2,
#wrapper h3,
#wrapper h4,
#wrapper h5 {
    font-family: 'Oswald', Arial, sans-serif;
    font-weight: 400;
}
p {
    line-height: 1.5em;
}
h2 {
    font-size: 1.75em;
}
h3 {
    font-size: 1.35em;
}
h4 {
    font-size: 1.1em;
}
h5 {
    font-size: 0.85em;
}
strong {
    font-weight: 400;
}
a {
    border-bottom: none;
    color: #94d2bd;
}
a:hover {
    color: #89bfad;
}
ul {
    margin-bottom: 0;
}
.image {
    border: 8px solid rgba(0 0 0 / 20%);
    margin-top: -8px;
}
@media screen and (max-width: 736px) {
    p {
        font-size: 0.95em;
    }
    h2 {
        font-size: 1.5em;
    }
    h3 {
        font-size: 1.25em;
    }
    h5 {
        font-size: 0.8em;  
    }
    .image,
    .image.left, 
    .image.right {
        max-width: 100%;
        border-width: 3px;
        float:none;
        text-align:center;
        margin: 0 0 1em;
    }
}


/******
    CSS-Only Toggle Show/Hide Button
*****/
/*
#toggle[type="checkbox"] {
    display: none;    
}
#toggle-container {
    display: none;
}
#toggle:checked ~ #toggle-container {
    display: block;
}
#toggle:checked ~ ul.actions {
    display:none;
}
*/
/**** HTML Code for button
    <label for="toggle" class="button">
    <ul class="actions left">
        <li>More awesomeness</li>
    </ul>
    </label>
    <input id="toggle" type="checkbox">
    <p id="toggle-container">show content here</p>
*****/

/******
    INTRO / Main page
*******/

/* Dark Purple BG */
#intro {
    text-align: center;
    background-color: #251c3c;
}
#intro h1,
#intro h2,
#intro h3{
    margin-bottom: 0em;
}
#intro p {
    margin: 0;
    font-size: 1em;
    line-height: 1.5em;
}
#intro h3 {
    font-size: 1.25em;
    color: #94d2bd;
}

#intro .subtitle {
    margin-bottom: 3em;
}
#intro .bio {
    text-align: left;
    margin-bottom: 2em;
}

/*
#intro .headshot.image {
    max-width: 50%;
}
*/
#intro.white-bg .headshot img {
    border-color: rgba(255 255 255 / 25%);
}
#intro h1#name {
    font: 100px/110px 'Lobster13Regular', Arial, sans-serif; letter-spacing: 0;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
}
#intro h1#name {
/*
    color: rgba(58 237 215 / 80%);
    text-shadow: -1px 1px 0px #ebfffd, 0 -2px 0 #111, -1px -1px 0px #777;   
*/
    color: rgb(0 0 0 / .3);
    text-shadow: -1px -2px 0px #80fff3, 0 -2px 0 #111, -1px -1px 0px #777;
}
#intro.dark-red h1#name {
    color: rgba(0 0 0 / .15);
    text-shadow: -1px 1px 0px #b8fdf6, 0 -2px 0 #111, -1px -1px 0px #707070;
}
#intro.white-bg h1#name {
    /* red text w/ white shadow*/
    color: rgba(130, 10, 10, 0.8);
    text-shadow: -1px 2px 0px #fdd, 0 -2px 0 #111, -1px -1px 0px #777;
}
@media screen and (max-width: 736px) {
    #intro h1#name {
        margin: 0;
        font-size: 60px;
        line-height: 50px;
        margin-bottom: .2em;
    }
    #intro h2 {
        font-size: 1.25em;
    }
    #intro h3 {
        font-size: 1em;
    }
/*
    #intro .headshot.image {
        max-width: 80%;
    }
*/
}


@media screen and (max-width: 980px) {
    #research .split #topics {
        margin-top: 0em;
        padding-top: 0em;
    }
}

/******
    SIDEBAR // NAV 
******/
@media screen and (max-width: 1280px) {
    #sidebar .short {
        display: none;
    }
}
#sidebar nav a:before {
    height: 1px;
}
#sidebar ul.icons li {
    font-size: 1.2em;
}
#sidebar ul.icons a:before {
    height: 0;
}

@media screen and (max-width: 1280px) {
    #sidebar ul.icons {
        margin-left: 1em;
    }
    #sidebar ul.icons li {
        margin-left: 1em;
    }
}
@media screen and (max-width: 736px) {
    #sidebar {
        display: block;
    }
    #sidebar nav > ul > li {
        margin-left: 1em;
    }
    #sidebar ul.icons li {
        display: none;
    }
    #sidebar ul.icons li:last-child {
        display: block;
    }
}
@media screen and (max-width: 480px) {
    #sidebar li.hide-me-mobile {
        display:none;
    }
}



/**** 
    General Style changes 
*****/

/* Rows with headers */
.wrapper .row h2 {
    margin-top: 1em;
}

.wrapper h1.major {
    margin-bottom: 0.3em;
}
@media screen and (max-width: 1680px)
.wrapper > .inner {
    padding-top: 3em;
}

/* FEATURES is the 4x4 with border */

.features { 
    border: solid 1px #ffeecd;
    margin: 1em 0;
}
.features section {
    padding: 2em;
}
#wrapper .features section p{
    margin-bottom: 1em;
    line-height: 1.3em;
}
#wrapper .features section li {
    line-height: 1.3em;
    padding: 0 1em 0.5em 0;
    padding-bottom: 0.5em;
    font-size: 0.9em;
}
@media screen and (max-width: 736px) {
    .split > * {
        margin-top: 0;
        padding-top: 0;
    }
    ul {
        font-size: 0.9em;
    }
}


/*******
    BACKGROUND COLORS
********/

/*****
    BACKGROUND SIDEBAR 
*****/

/*** DARK RED :: DEFAULT ***/
#sidebar {
    background-color: #660011;
}
#sidebar nav a{
    color: rgba(255, 255, 255, 0.65);
}
#sidebar nav a.active {
    color: #edf2f4;
}
#sidebar nav a:before {
    height: 1px;
    background: #f1f1f133;
}
#sidebar nav a:after {
    background-image: linear-gradient(to right, #da8c8c, #b72b2b);
}

/*** BRIGHT RED ***/
#sidebar.red-bg {
    background-color: #a32433;
}
#sidebar.red-bg nav a {
    color: #f1f1f1;
}
#sidebar.red-bg nav a:before {
    background: #b93434;
}
#sidebar.red-bg nav a:after {
    background-image: linear-gradient(to right, #f0f0f0, #bb2300);
}
#sidebar.red-bg nav a:hover {
    color: #fff;
}

/*** WHITE ****/
#sidebar.white-bg {
    background-color: #fff7f7;
}
#sidebar.white-bg nav a {
    color: #7C0F1C;
}
#sidebar.white-bg nav a:before {
    background-color: #ffe0e0;
}
#sidebar.white-bg nav a:after {
    background-image: linear-gradient(to right, #f1f1f1, #bb2300);
}
#sidebar.white-bg nav a:hover {
    color: #fb2323;
}

/*** TURQUOISE ****/
#sidebar.turq-bg {
    background-color: #2ec4b6;
}
#sidebar.turq-bg nav a.active {
    color: #fbecdd;
}
#sidebar.turq-bg nav a:before {
    background-color: rgba(255,255,255,50%);
}
/*#sidebar.turq-bg nav a.active:after,*/
#sidebar.turq-bg nav a:after {
    background-image: linear-gradient(to right, #b8beff, #312550);
}
#sidebar.turq-bg nav a.active:before {
    background-color: #edf2f4;
}
#sidebar.turq-bg nav a:hover {
    color: #edf2f4;
}



/**** 
    Background Colors
*****/

/**** 
    WHITE Background 
*****/
.wrapper.white-bg {
    background-color: #fafafa;
    color: rgba(0, 0, 0, 0.85);
}
.wrapper.white-bg h2,
.wrapper.white-bg h3,
.wrapper.white-bg h4{
    color: rgba(0, 0, 0, 0.85);
}
.wrapper.white-bg a {
    color: #2ec4b6;
}
.wrapper.white-bg a:hover {
    color: #94d2bd;
}

/**** 
    Default (no style): dark purple
*****/
.wrapper h1.major:after {
    background-image: linear-gradient(to right, #525252, #3AEDD7);
    height: 2px;
}

/**** 
    ALL dark backgrounds
*****/
.wrapper.dark-bg h2,
.wrapper.dark-bg h3,
.wrapper.dark-bg h4,
.wrapper.dark-bg h5 {
    color: #ddf1ef;
}
.wrapper.dark-bg a {
    color: #3AEDD7;
}
.wrapper.dark-bg a:hover {
    color: #2ec4b6;
}

/**** 
    DARK RED Background
******/
.wrapper.dark-red {
    background-color: #40080e;
    color: #ffdede;
}

/**** 
    Dark blue-gray background
*****/
.wrapper.blue-gray {
    background-color: #2b2d42ff;
    color: #edf2f4;
}

/**** 
    ALL Light backgrounds; dark blue font
*****/
.wrapper.light-bg,
.wrapper.light-bg p,
.wrapper.light-bg ul li {
  color: #2b2d42ff; 
}
.wrapper.light-bg h1,
.wrapper.light-bg h2,
.wrapper.light-bg h3,
.wrapper.light-bg h4,
.wrapper.light-bg h5 {
    color: #14726a;
}
.wrapper.light-bg strong {
    color: #312550;
}
.wrapper.light-bg a {
    color: #1f847a;
}
.wrapper.light-bg a:hover {
    color: #2ec4b6;
}

.wrapper.lighter-green {
    background-color: #eaf6ea;
}
.wrapper.lighter-green h1.major {
    text-align: center;
}
.wrapper.lighter-green h1.major:after{
    background-image: linear-gradient(to right, #fff7e8, #31AD9D, #fff7e8);
}


/**** 
    Light yellow bg
*****/
.wrapper.yellow {
    background-color: #fbfbed;
}

/**** 
    Light-bg cyan + Dark Blue font
*****/
.wrapper.cyan {
    background-color: #ddf1ef;
}
.wrapper.cyan h1.major:after{
    background-image: linear-gradient(to right, #3099AE, #ddf1ef);
}
.wrapper.cyan p {
    color: #2b2d42ff;
}
.wrapper.cyan h1,
.wrapper.cyan h2,
.wrapper.cyan h3,
.wrapper.cyan h4,
.wrapper.cyan h5 {
    color: #312550;
}



/**** 
    Medium slate gray
*****/
.wrapper.med-gray {
    background-color: #717989; 
}
.wrapper.med-gray h1.major:after{
    background-image: linear-gradient(to right, #94d2bd, #8d99ae);
}
.wrapper.med-gray h3 {
    color: #2b2d42ff;
}
.med-gray .features.gray {
/*    background-color: #919aab;*/
    background-color: #7b869b;
}

/* #e5f0f5; light blue  */

/**** 
    light-red / pink / off-white 
*****/
.wrapper.pinkish {
    background-color: #fff7f7;
}
.wrapper.pinkish h1.major:after {
    background-image: linear-gradient(to right, #f2f2f2, #fb2323);   
}
.wrapper.gray h1.major:after{
    background-image: linear-gradient(to right, #f2f2f2, #28a99d); 
    
}
/**** 
    light slate gray bg
*****/
.wrapper.gray {
    background-color: #edf2f4;
}
.wrapper.gray hr {
    border-color: #dde1e3;
}

/**** 
    FOOTER
****/
#footer {
    background-color: #edf2f4;
   
}
#footer .inner {
	padding: 0.5em;
}
#footer .inner .menu {
    margin: 0;
    color: #8d99ae;
}
#footer .inner .menu li {
    font-size: 0.9em;
    line-height: 1.4;
}



/*****
    COLOR PALETTES 
*****/
/*

// DARK
$space-cadet: #2b2d42ff;    // dark blue (fonts)
$ddark-purple: #312550;     // dark (medium) purple
$darker-purple: #251c3c;    // darker purple (black)
$manatee: #8d99ae;          // slate gray blue
$dark-red: #660011;         // darker red
$dark-turquoise: #14726a;   // dark green-ish
$med-gray: #717989;

// BRIGHT
$yellow-orange: #ee9b00;    // bright yellow-orange
$ruby-red: #7c0216;         // dark-ish red
$bright-turquoise: #3AEDD7;
$turquoise: #2ec4b6;        // turquoise (green-ish)
$green: #94d2bd;            // opaque-mid green

// LIGHT
$cultured: #edf2f4;         // white / blui-sh gray
$light-yellow: #ffe8bd;
$lighter-yellow: #ffeecd;
$lightest-yellow: #fbecdd;
$light-purple: #b8beff;
$cyan: #ddf1ef;             // lighter blue
$light-green #d0ebd0;
$lighter-green: #eaf6ea;

// Not used
$lighter-purple: #cacfff;
$lightest-purple: #dfe2ff;
$lighter-pink: #fff7f7;
$light-pink: #ffdede;

*/