/**
 * Colin's Portfolio CSS
 * written by Colin To
 * 
 *
 */

html{
    height:100%;
    -webkit-font-smoothing: antialiased
}

body{
    font-family: 'Roboto', sans-serif;
    margin: 0px;
    padding: 0px;
    font-size:18px;
    font-weight:300; 
    line-height: 1.5em;
    letter-spacing:0.25px; 
    height:100%;
}

.myGreen{
    color:#64B645;
}

.navigation{
    position:absolute;
    top:0;
    width:100%;
    z-index: 2000;
}

.navigationShadow{
    border-bottom: 1px solid #efefef;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(181, 181, 181, 0.3); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 0px 5px 1px rgba(181, 181, 181, 0.3);
    box-shadow:         0px 0px 5px 1px rgba(181, 181, 181, 0.3);
}

.nav-up{
    top:-70px;
}


.collapsed{
    position:fixed;
    height:70px;
    background-color: rgba(255, 255, 255, 0.98);
    
    transition: all 0.1s;
        -webkit-transition: all 0.1s;
            -moz-transition: all: 0.1s;
}

.left{float:left}
.right{float:right}
.floatNone{float:none}
.textLeft{text-align:left}
.textRight{text-align:right}
.textCenter{text-align:center}
.marginCenter{margin:0 auto}

.marginBottom{margin-bottom: 100px}
.marginTop{margin-top: 100px}
.marginBottom_half{margin-bottom: 50px}
.marginTop_half{margin-top: 50px}
.marginBottom_quarter{margin-bottom: 25px}
.marginTop_quarter{margin-top: 25px}
.marginBottom_eighth{margin-bottom: 17.5px}
.marginTop_eighth{margin-top: 17.5px}

.paddingTop_double{padding-top:200px;}
ul li{ list-style: none; }


h1{ /* Main-Title */
    text-transform: uppercase;
    margin:0px;
    font-size: 36px;
    font-weight:300;
/*    font-size: 36px;*/
/*    font-weight:300;*/
    letter-spacing: 3px;
    line-height: 1.2em;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.01);
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px -1px 0px rgba(0,0,0,0.3);     /* This Text Shadow Should Only be used for Banners */
    
}

h2{ /* Section-Title */
    margin:0px;
    font-size:18px;
    font-weight:600;
    letter-spacing: 1.5px;
    color:#333;
}

h3{ /* Section-Headings */
    margin:0px;
    padding:0px;
    margin-top:15px;
    margin-bottom:-10px;
    font-size:16px;
    text-transform: uppercase;
    letter-spacing:1.2px;
    opacity:0.3;
    color:#333;
    font-weight:900;
}

h4{ /* Roles */
    margin:0px;
    font-size:14px;
    font-weight:300;
    letter-spacing: 1.5px;
}

h5{ /* Section-Roles */
    font-weight: normal;
    font-size:12px;
    letter-spacing: 1.5px;
    margin:0px;
    margin-bottom:5px;
}

h6{
    margin:0px;
    margin-top:5px;
    font-weight:300;
    font-size:16px; 
}

.h8{
    padding:0px;
    margin:0px;
    margin-top:5px;
    font-size: 12px;
    color:#c4c4c4;
    font-weight:500;
    text-shadow: 0 -1px 1px rgba(255,255,255,0.01);
}

.h10{ /* Main-Description */
    margin:25px 0px;
    font-size: 14px;
    font-weight:300;
    letter-spacing: 1px;
    line-height: 25px;
}

b{
    font-weight:500;
/*    color:#969696;*/
}

.hlinks{
    margin:0px;
    padding:0px;
    font-family:roboto;
    font-size:14px;
    font-weight:500;
    color:#868686;
}

.hlinks li, .hlinksLoci li{
    display:inline-block;
}

.hlinksLoci li{
    padding:10px;
    padding-top:7px;
    padding-bottom:13px;
}

.hlinks li a, .hlinksLoci li span{
    font-family:roboto;
    font-size:14px;
    font-weight:500;
    color:#868686;
    margin:0px 15px;
    padding:5px 0px;
    border-bottom: 1px solid #868686;
    border-bottom: 1px solid rgba(134, 134, 134, 0.15);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
        -moz-transition: all: 0.3s;
    
    
}

.hlinksLoci li{
    margin:0px;
    margin-left:-4px;
    border-right: 1px solid rgba(217, 217, 217, 0.3);
}

.hlinksLoci li:last-child{
    border-right: 1px solid rgba(217, 217, 217, 0);
}

.hlinksLoci li.selected span{
    color:#fff;
    border-bottom: 1px solid #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}


.hlinks a{
    text-decoration:none;
}

.hlinks a, .hlinks a:visited{
    text-decoration:none;
    color:#868686;
}

.hlinks li a:hover, .hlinksLoci li span:hover{
    cursor:pointer;
    color:#64B645;
    border-bottom: 1px solid #64B645;
    border-bottom: 1px solid rgba(100, 182, 69, 0.4);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

.hlinksLoci li.selected span:hover{
    cursor:default;
    color:#fff;
    border-bottom: 1px solid #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    -webkit-background-clip: padding-box; /* for Safari */
    background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}


.rotateIcon svg{
    transition: 350ms linear all;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg); /* Standard syntax */
}

.rotateIcon svg{
    transition: 350ms linear all;
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Safari */
    transform: rotate(180deg); /* Standard syntax */
}

/*
.logo.rotateLogo svg{
    transition: 200ms ease-out 100ms;
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); 
}
*/

.logo svg{
    transition: 200ms ease-in-out 100ms;
    -ms-transform: rotate(0deg); /* IE 9 */
    -webkit-transform: rotate(0deg); /* Safari */
    transform: rotate(0deg); /* Standard syntax */
}

.logo.rotateLogo svg{
    transition: 200ms ease-in-out 100ms;
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Safari */
    transform: rotate(90deg); /* Standard syntax */
}


.shadowAppear{ /* MODIFY THIS SHADOW */
    transition: 200ms ease-out 100ms;
    border: 1px solid rgba(113, 113, 113);
    margin-top: 25px;
    margin-left:25px;
    
    -webkit-box-shadow: 0px 0px 30px 15px rgba(47, 47, 47, 0.6); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 0px 30px 15px rgba(47, 47, 47, 0.6);
    box-shadow:         0px 0px 30px 15px rgba(47, 47, 47, 0.6);
}

.shadowBehind{
    background:rgba(0, 0, 0, 0.05);
    display: none;
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:100%;
    z-index:800;
}


.fadeElement{
    opacity:0;
}


.navigateLinks ul a, .navigateLinks ul a:visited{
    color:#646363;
}

.permaGreen, .permaGreen svg path{
    color:#64B645;
    fill:#64B645;
}

.permaGreenColor{
    color:#64B645 !important;
}

.logo{ margin-left:-70px; }
.menuButton { margin-right:-70px}
.menuProjects{width:80%}

.fullHeight{
    height:100%;
}


/** Set Backgrounds
 ---------------------------------------------------------*/
#bg-home{
/*#bg-home{*/
/*    background: url("../img/backgrounds/home/allicon.jpg") no-repeat center center fixed;*/
    background: url("../img/backgrounds/home/lakesidedusk.jpg") no-repeat center center fixed;
/*    background: url("../img/backgrounds/IMG_7644.jpg") no-repeat center center fixed;*/
/*    background: url("../img/backgrounds/IMG_7621.jpg") no-repeat center center fixed;*/
/*    background-position: top 500px;*/
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-bamboo{
/*
    background: url("../img/backgrounds/works/climb.JPG") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
*/
}

#bg-loci{
    background: url("../img/backgrounds/works/loci.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-wayfarus{
    background: url("../img/backgrounds/works/wayfarus.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-patienttab{
    background: url("../img/backgrounds/works/patienttab.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-viva{
    background: url("../img/backgrounds/works/viva_texture.png") repeat;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-vpops{
    background: url("../img/works/vpops/background.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-amelie{
    background: url("../img/backgrounds/works/lavendar.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}

#bg-me{
    background: url("../img/me/grad3_bw.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;    
}

.myDesign{
    width:100%;
    background: url("../img/me/grad6_bw.jpg") no-repeat center center fixed; 
    background-size:cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
}

.myHobbies{
    width:100%;
    background: url("../img/me/hike_bw.jpg") no-repeat center center fixed; 
    background-size:cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover;
}


/**------ START STYLE.CSS --------**/

/** Home Landing
 ---------------------------------------------------------*/
.maskOverlay{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(11, 11, 11, 0.7); 
        transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all: 0.3s ease-in-out;
}

.maskOverlay.slideup{
    height:0%;
}

#landingHome{
    position:relative;
    padding:0px;
    height:100%;
}


#landingHome .fixedContent{
    height:auto;
}

#myAll{
    position: relative;
    top:50%;
    margin-top:-120px;
}

#myName{
    font-family: 'Roboto', sans-serif; 
    font-size:42px; 
    font-weight:300; 
    letter-spacing:10px; 
    color:white;
}

#myRole{
/*  myRole */
    font-size:14px; 
    font-weight:300;
    margin-top:40px; 
    margin-bottom:10px; 
    margin-left:2px; 
    letter-spacing:0.2em; 

/*  myBlurb */
    color:#c1c1c1; 
    font-weight:500; 
    font-size:14px;
    line-height:1.6em;
    letter-spacing:2.5px;
    
/*  myPage */
    font-weight:500;
    font-size:12px;
    letter-spacing:4px;
}


#myBlurb{
/*    letter-spacing:0.15em; */
/*    font-size:16px; */
/*    line-height:2.0em;*/
    color:white; 
    font-weight:300; 
    font-size:18px;
    line-height:1.6em;
    letter-spacing:0.3px;
    color:rgba(255, 255, 255, 0.9);
    
}

#myPage{
    display:inline-block;
    color:rgba(255, 255, 255, 0.74);
    font-weight:500;
    font-size:12px;
    letter-spacing:4px;
    margin-top:20px;
    text-align: center;
    text-transform: uppercase;
    transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all: 0.2s ease-in-out;
}

#myPage a, #myPage a:visited{
    display:inline-block;
    text-decoration: none;
    padding:10px 30px;
    background-color:rgba(100, 182, 69, 0.99);
    color:rgba(231, 253, 223, 0.99);
/*    border:rgba(100, 182, 69, 0.99) 3px solid; */
    
    border:5px solid rgba(100, 182, 69, 0.99);
    transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all: 0.2s ease-in-out;
}

#myPage:hover a{
/*    padding-right:40px;*/
/*    background-color:rgba(81, 155, 51, 0);*/
    
    border:5px solid rgba(87, 155, 61, 0.99);
    -webkit-box-shadow: 0px 0px 12px 2px rgba(47, 47, 47, 0.5);  /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 0px 12px 2px rgba(47, 47, 47, 0.5);
    box-shadow:         0px 0px 12px 2px rgba(47, 47, 47, 0.5);
}

#tomyPortfolio{
    position:absolute;
    width:100%; 
    text-align: center;
    margin:0 auto;
/*    left:50%; */
/*    margin-left:-25px; */
    top:85%;    
}

#tomyPortfolio img{
    width:50px;
    opacity:0.4;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
    transition: all 0.2s ease-in-out;
        -webkit-transition: all 0.2s ease-in-out;
            -moz-transition: all: 0.2s ease-in-out;
    
    padding:8px;
    height:50px;
    border-radius:50%; 
    border:5px solid #bebebe; 
    background-color: #bebebe;     
}

#tomyPortfolio a:hover img{
    opacity:1;
    border:5px solid #bebebe; 
    background-color: #bebebe; 
}

/** Main - Works
 ---------------------------------------------------------*/

#works{
    background-color:white;
}

.ul_works{
    padding:0px;
    margin:0px;
    margin-bottom:25px;
    text-align: center;
}

.li_works{
    width:340px;
    height:340px;
    margin:0.3%;
    display:inline-block;
    text-align: left;
}

.li_works a{
    opacity:0.5;
    display:block;
    height:340px;
    width:340px;
    box-shadow: #000 0em 0em 0em; /*FLICKER ON HOVER FIX*/
    transition: all 0.3s ease-in-out;
        -webkit-transition: all 0.3s ease-in-out;
            -moz-transition: all: 0.3s ease-in-out;
}

.li_works a:hover{
    opacity:1.0;
}

.unfinished a:hover{
    opacity:0.5;
}

#amelieWorks {background: url("../img/thumbnails/amelie.png") center center no-repeat; background-size: 100%;}
#amelieWorks:hover {background: url("../img/thumbnails/amelie.png") center center no-repeat; background-size:105%;}
#wayfarusWorks {background: url("../img/thumbnails/wayfarus.png") center center no-repeat; background-size: 100%;}
#wayfarusWorks:hover {background: url("../img/thumbnails/wayfarus.png") center center no-repeat; background-size: 105%;}
#lociWorks {background: url("../img/thumbnails/LOCI.png") center center no-repeat; background-size: 100%;}
#lociWorks:hover {background: url("../img/thumbnails/LOCI.png") center center no-repeat; background-size: 105%;}
#bambooWorks {background: url("../img/thumbnails/bamboo.png") center center no-repeat; background-size: 100%;}
#bambooWorks:hover {background: url("../img/thumbnails/bamboo.png") center center no-repeat; background-size: 105%;}
#patientTabWorks {background: url("../img/thumbnails/patienttab.png") center center no-repeat; background-size: 100%;}
#patientTabWorks:hover {background: url("../img/thumbnails/patienttab.png") center center no-repeat; background-size: 105%;}
#vivaWorks {background: url("../img/thumbnails/viva.png") center center no-repeat; background-size: 100%;}
#vivaWorks:hover {background: url("../img/thumbnails/viva.png") center center no-repeat; background-size: 105%;}

#cursrWorks {background: url("../img/thumbnails/extra/cursr.png") center center no-repeat; background-size: 100%;   
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#cursrWorks:hover {background: url("../img/thumbnails/extra/cursr.png") center center no-repeat; background-size: 105%;}*/
#revisitWorks {background: url("../img/thumbnails/extra/revisit.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#revisitWorks:hover {background: url("../img/thumbnails/extra/revisit.png") center center no-repeat; background-size: 105%;}*/
#spokesWorks {background: url("../img/thumbnails/extra/spokes.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#spokesWorks:hover {background: url("../img/thumbnails/extra/spokes.png") center center no-repeat; background-size: 105%;}*/
#notifWorks {background: url("../img/thumbnails/extra/notif.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#notifWorks:hover {background: url("../img/thumbnails/extra/notif.png") center center no-repeat; background-size: 105%;}*/
#harpWorks {background: url("../img/thumbnails/extra/harp.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#novemberWorks:hover {background: url("../img/thumbnails/extra/harp.png") center center no-repeat; background-size: 105%;}*/
#glimpseWorks {background: url("../img/thumbnails/extra/glimpse.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#glimpseWorks:hover {background: url("../img/thumbnails/extra/glimpse.png") center center no-repeat; background-size: 105%;}*/
#bermudaWorks {background: url("../img/thumbnails/extra/bermuda.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#bermudaWorks:hover {background: url("../img/thumbnails/extra/bermuda.png") center center no-repeat; background-size: 105%;}*/
#novemberWorks {background: url("../img/thumbnails/extra/november.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#novemberWorks:hover {background: url("../img/thumbnails/extra/november.png") center center no-repeat; background-size: 105%;}*/
#arapacisWorks {background: url("../img/thumbnails/extra/arapacis.png") center center no-repeat; background-size: 100%;
    -webkit-filter: grayscale(1); /* Old WebKit */ filter: grayscale(1);}
/*#arapacisWorks:hover {background: url("../img/thumbnails/extra/arapacis.png") center center no-repeat; background-size: 105%;}*/


/** Navigation
 ---------------------------------------------------------*/
nav{
    height:50px;
    margin:0px;
    margin-top:200px;
    padding:0px;
    margin-left:23%;
    width:77%;
}

nav ul a, nav ul a:visited{
    text-decoration:none;
}
    

nav ul li{
    font-family: 'Lato', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-size:16px;
    letter-spacing:0.5px;
    display:inline;
    padding:15px;
    transition: all 0.3s ease;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

nav ul {
    width:100%;
    padding:0;
    margin:0 auto;
    margin-top:15px;
}


.nextOverlay{
    background: rgba(200, 54, 54, 0.5);
}


.nextViva{
    background: url("../img/backgrounds/works/viva_texture.png") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

/**------ AFTER STYLE.CSS --------**/

/** About Landing
 ---------------------------------------------------------*/
#landingAbout{
    position:relative;
    padding:0px;
    height:100%;
}

.aboutOverlay{
    background: rgba(11, 11, 11, 0.7);
}

#myBio{
    position:absolute;
    font-weight:300;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-175px;
    color:#eee;
    line-height:1.6em;
}


#myBio p{
    font-size:18px;
    letter-spacing:0.3px;
    color:rgba(255, 255, 255,0.6);
}

#myBio .bioHighlights{
    color:rgba(255, 255, 255, 0.9);
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
        -moz-transition: all: 0.3s;
}

#myBio .bioHighlights:hover{
    color:rgba(100, 182, 69, 0.99);
    cursor: default;
}

#myBio .bioHighlights a{ text-decoration:none; color:rgba(255, 255, 255, 0.9); }
#myBio .bioHighlights a:hover{ color:rgba(100, 182, 69, 0.99); }

#myBio h1{
    font-size:42px; 
    font-weight:300; 
    letter-spacing:10px; 
    
    font-weight:300;
    font-size:42px;
    letter-spacing: 10px;
}


/** Portfolio Landing
 ---------------------------------------------------------*/

#landingWork{
    margin:0 auto;
    padding:0px;
    width:100%;
    height:500px;
    color:#FFF;
}

#mylogo{
    padding-top:15px;
}

/** Main Content
 ---------------------------------------------------------*/
#main {
    font-family: 'Lato', sans-serif;
    width:100%;
    background-color:white;
    transition: all 0.2s ease-out;
        -webkit-transition: all 0.2s ease-out;
            -moz-transition: all: 0.2s ease-out;
}

#fixedContent{
    width:70%;
    margin:0 auto;
    padding-top:50px;
    background-color:white;
}

.fixedContent{
    width:70%;
    margin:0 auto;
}


/** Overlay Navigation
 ---------------------------------------------------------*/
.navOverlay, .navigateLinks{
    height:50px;
    margin:0px;
    padding:0px;
    width:100%;
    background-color:white;
    border-top: solid #cbcbcb 2px;
    border-bottom: solid #cbcbcb 2px;
}

.navOverlay ul a, .navOverlay ul a:visited{
    text-decoration:none;
    border-bottom: 0px;
}

.navOverlay ul li{
    font-family: 'Lato', sans-serif;
    font-family: 'Source Sans Pro', sans-serif;
    font-weight:300;
    font-size:16px;
    letter-spacing:0.5px;
    display:inline;
    padding:15px;
    transition: all 0.3s ease;
    border-bottom: 0px;
}

.navOverlay ul li a:hover{
    background: rgba(76, 136, 54, 0.5);
    border-bottom: 0px;
}

.navOverlay ul {
    padding:0;
    margin:0 auto;
    text-align:center;
}



/** Overlay
 ---------------------------------------------------------*/
.menuButton{
    display:block;
}

.menuButton:hover{
    cursor: pointer;
}

.overlay, .navigateOverlay, .modalOverlay{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1500;
}

.overlay{ background: rgba(100,182,69, 0.8); }
.navigateOverlay{ background: rgba(255, 255, 255, 0.95); }
.modalOverlay{ background: rgba(38, 38, 38, 0.8); }

.modalClose{ 
    position:absolute;
    color:#c9c9c9; 
    top:4%;
    right:4%;
    font-size:48px;
}

.modalClose:hover{ cursor:pointer; }


.modalPackage{
    position:absolute;
    width:100%;
    padding:60px;
    background-color:#f0efef;
}

.modalBambooStairwellPosition{
    transform:translateY(25%);
}

.modalBambooPosterPosition{
    transform:translateY(2%);
}

.modalBambooPoster{
    background: url("../img/works/bamboo/poster.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.modalBambooStairwell{
    background: url("../img/works/bamboo/stairwell.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.modalIcon {
    display: block;
    top:2.5%;
    right:2.5%;
    width: 40px;
    height: 40px;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    cursor: pointer;
/*    background-color:#e5e5e5;*/
/*    border-radius: 50%;*/
}

.modalIcon span {
    display: inline-block;
    position: absolute;
    height: 5px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 12.5%;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
}

.modalIcon span:first-child { top: 16px; }
.modalIcon span:last-child { top: 16px; }

.modalIcon span:first-child{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.modalIcon span:last-child{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}


.overlay nav, .navigateLinks {
    position: relative;
    top: 15%;
    height: 60%;
    background: rgba(0,0,0,0);
    border:0px;
}

.navigateLinks{
    top:100px;
    right:0;
}

.navigateLinks ul{
    width:auto; /* Used to cancel nav ul=width:100 to float right */
    float:right;
}

.navigateLinks ul li{
    margin-top:-3px;
    opacity:0.01;
    text-align: right;
    margin-bottom: 50px;
}

.navigateLinks ul li a{
    font-size:48px;
    position:relative;
/*    z-index:9999999999px;*/
    box-shadow: #000 0em 0em 0em;   
    -webkit-backface-visibility: hidden; /*FLICKER ON NAVIGATE FIX*/
	-webkit-transform: scale(1);
    
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
        -moz-transition: all: 0.3s;
}

.navigateLinks ul li a:hover{
    color:#64B645;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
        -moz-transition: all: 0.3s;
}

.overlay nav{
    text-align: center;
}

.overlay ul, .navigateOverlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
}

.overlay ul li, .navigateOverlay ul li {
    display: block;
    padding:0px;
}

.overlay ul li a {
    font-weight: 300;
    text-decoration: none;
    display: inline-block;
    color:white;
    margin-right: 40px;
    list-style: none;
    font-size: 80px;
    width:100%;
    height:100%;
    padding:15px;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    line-height: 1.2em;
}


.overlay-state, .navigate-state, .modal-state {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility: 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.3s;
}

.overlay-open, .navigate-open, .modal-open {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

#navIcon {
    display: block;
    margin-top:2px;
    width: 40px;
    height: 40px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#navIcon span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#navIcon span:nth-child(1) { top: 0px; }
#navIcon span:nth-child(2) { top: 12px; }
#navIcon span:nth-child(3) { top: 12px; }
#navIcon span:nth-child(4) { top: 24px; }

#navIcon.open span:nth-child(1) {
    top: 12px;
    width: 0%;
    left: 50%;
}

#navIcon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

#navIcon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

#navIcon.open span:nth-child(4) {
    top: 15px;
    width: 0%;
    left: 50%;
}

.superimposeBackground{
    background-color: rgba(255, 255, 255, 0.95);
    background: rgba(100,182,69, 0);
}

.noscroll{ overflow: hidden; }

.white{
    color:#fff;
    background: #fff;
}

.grey{
    color:#c3c3c3;
    background:#c3c3c3;
}

/** NavBack
 ---------------------------------------------------------*/
.roboto{
    font-family: 'Roboto Condensed', sans-serif;
    font-size:14px;
    opacity:0.6;
    font-weight:500;
    letter-spacing:1.2px;
}

#navBack{
    position: absolute;
    text-align: center;
    display:none;
    top:0;
    left:50%;
    margin-left:-100px;
    width:200px;
    font-size:16px;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight:800;
}

#navBack a{
    color:#c7c7c7;
    text-decoration:none;
}

#navBack a:hover{
    color:#64B645;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}



#navBack a:hover svg path{
    fill:#64B645;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.top{
    display:block;
    padding:0px 20px;
/*    top:-20;*/
/*    margin-top:0px;*/
/*    margin-top:-22px;*/
}

.top svg, .top .backtotop{
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.top .backtotop{
    -webkit-transition-property: color .01s ease-in-out;
    -moz-transition-property: color .01s ease-in-out;
    -o-transition-property: color .01s ease-in-out;
    transition-property: color .01s ease-in-out;
}

.top svg{ /* TOP ARROW */
    position:absolute;
    margin-top:-5px;
    opacity:0.3;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}


.top:hover svg{ 
    margin-top:0px;
    opacity:1;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.top svg path{ fill:#c7c7c7; }

.backtotop{ /* TOP TEXT */
    padding-top:5px;
    font-size:14px;
    font-weight:300;
    letter-spacing: 1.2px;
    opacity:0.8;
    text-transform: uppercase;
}

.top:hover .backtotop{
    opacity:1;
    transform:translateY(-2px);
    -webkit-transition-property: color .01s ease-in-out;
    -moz-transition-property: color .01s ease-in-out;
    -o-transition-property: color .01s ease-in-out;
    transition-property: color .01s ease-in-out;
}




/** Wayfarus
 ---------------------------------------------------------*/
.wayfarusWebsite img{
/*
    -webkit-box-shadow: 0px 7px 15px 1px rgba(47, 47, 47, 0.2);  x,y,blur,spread,color 
    -moz-box-shadow:    0px 7px 15px 1px rgba(47, 47, 47, 0.2);
    box-shadow:         0px 7px 15px 1px rgba(47, 47, 47, 0.2);
*/
}


/** Loci
 ---------------------------------------------------------*/
.lociApplication{
    width:100%;
    background: url("../img/works/loci/application.png") no-repeat center center fixed; 
    background-size:cover;
}

.lociOverlay{
    height:100%;
    width:100%;
    margin:0px;
}

blockquote{
    font-size:24px;
    font-weight:300;
    opacity:0.4;
    letter-spacing:0.12em;
}

.quote{
    padding:5px;
    font-size:24px;
    font-family: 'Cabin', sans-serif;
    font-weight:500;
}

.anatomyList ul li{
    z-index:100;
    position:absolute;
}

.anatomyDescription h1{
    font-size:18px; 
    font-weight:500; 
}

.anatomyMacbook{
    position:relative; 
    height:400px;
}

.anatomyMacbook .gif{
    position:absolute; 
    top:170px; 
    left:225px; 
    width:385px;
    opacity:0;
}

.anatomyMacbook .gif2{
    position:absolute;
    top:0; 
    left:0;
    width:360px; 
    opacity:0;
}

.anatomyList ul li{opacity:0;}

.anatomyList ul li h3{ font-size:16px; }
.anatomyList ul li p{ font-size:12px; }

.anatomyList ul li:first-child{ left:400px; top:5px; }
.anatomyList ul li:nth-child(2){ left:400px; top:90px; }
.anatomyList ul li:nth-child(3){ left:400px; top:240px; }
.anatomyList ul li:nth-child(4){ left:400px; top:395px; }
.anatomyList ul li:nth-child(5){ left:400px; top:470px; }
.anatomyList ul li:nth-child(6){ left:18px; top:398px; }
.anatomyList ul li:nth-child(7){ left:18px; top:425px; }

.anatomyList ul .anatomyBackdrop h3{
    font-size:16px; 
    background: rgba(255, 255, 255, 0.7);  
    padding:5px 20px; 
    -moz-box-shadow: 1px 2px 3px rgba(255,255,255, .8);
    -webkit-box-shadow: 1px 2px 3px rgba(255,255,255,.8);
    box-shadow: 1px 2px 3px rgba(255,255,255,.8);
    opacity:1; 
    color:#c7c7c7;
}

.anatomyList ul .anatomyBackdrop_2 h3{
    font-size:16px; 
    background: rgba(255, 255, 255, 0.95); 
    padding:23px 20px; 
    padding-bottom:80px; 
    padding-right:17px;
    -moz-box-shadow: 1px 2px 3px rgba(255,255,255, .8);
    -webkit-box-shadow: 1px 2px 3px rgba(255,255,255,.8);
    box-shadow: 1px 2px 3px rgba(255,255,255,.8);
    opacity:1; 
    color:#c7c7c7;
}

.anatomyList ul .anatomyBackdrop_2 p{
    font-size:12px; 
    padding-left:20px; 
    margin-top:-78px;
}



/** Bamboo
 ---------------------------------------------------------*/
.bambooPoster{
    background-color:#fafafa;
}

.bambooPoster img{
    transition: all 0.4s;
        -webkit-transition: all 0.4s;
            -moz-transition: all: 0.4s;
    -webkit-box-shadow: 0px 5px 10px 1px rgba(47, 47, 47, 0.7); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 5px 10px 1px rgba(47, 47, 47, 0.7);
    box-shadow:         0px 5px 10px 1px rgba(47, 47, 47, 0.7);
}

.bambooPoster img:hover{
    cursor:pointer;
    width:35%;
    transform: translateY(-25px);
    -webkit-box-shadow: 0px 25px 20px 1px rgba(47, 47, 47, 0.4); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 25px 20px 1px rgba(47, 47, 47, 0.4);
    box-shadow:         0px 25px 20px 1px rgba(47, 47, 47, 0.4);
}

.bambooUs{
    opacity:0.8;
}

.stairwell, .stairwellInner img, .stairwellOuter img{
    width:100%;
    transition: all 0.4s;
        -webkit-transition: all 0.4s;
            -moz-transition: all: 0.4s;    
}

.stairwell{ cursor:pointer; position:relative;}
.stairwell img{ position:absolute; }

.stairwell .stairwellInner img{
    opacity:0.85;
    margin-left:6%;
    margin-top:5%;
    width:89%;
}

.stairwell:hover .stairwellOuter img{ opacity:0.03; }
.stairwell:hover .stairwellInner img{    
    transform: translateY(-15px);
    opacity:1;
    -webkit-box-shadow: 0px 8px 15px 1px rgba(47, 47, 47, 0.7); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 8px 15px 1px rgba(47, 47, 47, 0.7);
    box-shadow:         0px 8px 15px 1px rgba(47, 47, 47, 0.7);
}

.stairwell:hover .stairwellInner img{
 
/*    filter: opacity(0.5);*/
}




.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


/** Next Project
 ---------------------------------------------------------*/
.nextAmelie{
    background: url("../img/backgrounds/works/lavendar.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextWayfarus{
    background: url("../img/backgrounds/works/wayfarus.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextLoci{
    background: url("../img/backgrounds/works/loci-small.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextBamboo{
    background: url("../img/backgrounds/works/bambooBW.JPG") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextPatientTab{
    top:0%;
    background: url("../img/backgrounds/works/patienttab.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextViva{
    background: url("../img/backgrounds/works/viva_texture.png") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextExtra{
    background: url("../img/works/inktober/0.png") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;
}

.nextCursr{
    background: url("../img/backgrounds/works/cursr.jpeg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
        -moz-background-size: cover;
            -o-background-size: cover; 
    background-attachment: scroll;
    text-decoration: none;    
}


.nextProject_text{
    color:white;
    padding-top:0px;
    line-height: 250px; /* This is overwritten by H1 */
    height:250px;
}

.nextProject a{
    display:block;
    text-decoration: none;
}

.nextProject{
    position: relative;
    z-index:999;
    -webkit-transition: .23s ease-in-out;
    -moz-transition: .23s ease-in-out;
    -o-transition: .23s ease-in-out;
    transition: .23s ease-in-out;
}

.nextProject:hover{
    -webkit-transition: .23s ease-in-out;
    -moz-transition: .23s ease-in-out;
    -o-transition: .23s ease-in-out;
    transition: .23s ease-in-out;
    -webkit-box-shadow: 0px 0px 12px 5px rgba(47, 47, 47, 0.3); /* x,y,blur,spread,color */
    -moz-box-shadow:    0px 0px 12px 5px rgba(47, 47, 47, 0.3);
    box-shadow:         0px 0px 12px 5px rgba(47, 47, 47, 0.3);    
}

/** Overlay
 ---------------------------------------------------------*/

.amelieOverlay{ background: rgba(54, 200, 178, 0.6); }
.wayfarusOverlay{ background: rgba(105, 201, 82, 0.5); }
.lociOverlay{ background: rgba(227, 176, 6, 0.7); }
.bambooOverlay{ background: rgba(33, 146, 208, 0.6); }
.patientTabOverlay{ background: rgba(140, 78, 173, 0.57); }
/*.vivaOverlay{ background: rgba(149, 54, 200, 0.5); }*/
.cursrOverlay{ background: rgba(105, 201, 82, 0.2); }
/*.extraOverlay{ background: rgba(153, 167, 80, 0.71); }*/
.extraOverlay{ background: rgba(80, 90, 26, 0.73); }

.blackOverlay{
    height:100%;
    color:#f5f5f5;
    background: rgba(16, 16, 16, 0.9);
}

/** LightBackground
 ---------------------------------------------------------*/
.lightBackground{
    height:100%;
    color:#959595;
    background:#fafafa;
}

/** OverLogo Animation & Menu Navigation
 ---------------------------------------------------------*/

.logo svg:hover path, .logo svg:hover polyline {
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.logo{ 
    height:40.336px; 
}

.logo a{
    margin:0px;
    padding:0px;
    display:inline-block;
    height:40.336px;
    width:40.336px;
}

.logo img{
    opacity:1;
}

.menu ul, .navigateMenu ul{
    width:100%;
    margin:0px;
    margin-top:6px;
    padding:0px;
    font-size:18px;
}

.menu ul{
    float:left;
}

.menu ul li, .navigateMenu ul li{
    display:inline-block;
    text-align: center;
    margin-left:3%;
}

.menu ul li:first-child{
    margin-left:0;
}

.menu ul li a{
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    margin:0px 2px;
    font-weight:500;
    color:#c7c7c7;
    
    text-shadow: 0 -1px 1px rgba(255,255,255,0.01);
    -webkit-font-smoothing: antialiased;
    
    text-decoration: none;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigateMenu ul li{
    font-family: 'Roboto Condensed', sans-serif;
    letter-spacing: 1px;
    margin:0px 2px;
    font-weight:500;
/*    color:#c7c7c7;*/
    
    text-shadow: 0 -1px 1px rgba(255,255,255,0.01);
    -webkit-font-smoothing: antialiased;
    
    text-decoration: none;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigateMenu ul li svg{
    margin-left:5px;
    fill:#c7c7c7;
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

.navigateMenu ul li svg:path{
    margin-top:-20px;
}

.navigateMenu ul li:hover, .navigateMenu ul li:hover svg{
    cursor:pointer;
    color:#64B645;
    fill:#64B645;
}


/* GREEN Nav Hovers */
.menuGreen ul li a:hover{ color:#64B645; }
.navigateGreen ul li a:hover{ color:#64B645; }
.navigateGreen ul li { color:#c7c7c7; }
.logoGreen svg:hover path, .logoGreen svg:hover polyline{ fill: #64B645; }


/** Bamboo Video
 ---------------------------------------------------------*/
video#bgvid{ 
    position:fixed;
    top:25%; /** Was at 50% Before. May not be responsive still.  **/
    left:50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
/*    background: url(img/backgrounds/works/bamboo.JPG) no-repeat;*/
/*    background-size: cover; */
}


/** Patient Tab
 ---------------------------------------------------------*/
.features ul{
    margin:0px;
    padding:0px;
    margin-top:25px;
}

.features ul li{
    margin:0px;
    padding-bottom:25px;
}

.slideshow{
/*    height:768px;*/
    width:75%;
    height:0;
    padding-bottom:60%;
    overflow:hidden;
    position:relative;
    margin:0 auto;
}

.slideshow ul{
    margin:0px;
    padding:0px;
    list-style: none;
    position: absolute;
    width:1700%;
    height:100%;
    top:0;
}

.slideshow ul li{
/*    overflow:hidden;*/
    position:absolute;
    margin:0;
    padding:0;
}

.slideshow li img{
    border:none;
    width:100%;
}



.slideshowNav{
    position:absolute;
    top:50%;
    left:0px;
    width:100%;
    height:10px;
}

.prev{
    position:absolute;
    float:left;
    margin-left:5%;
}

.next{
    float:right;
    margin-right:5%;
}

ul.triggers{
    margin:0px;
    padding:0px;
}

ul.triggers li{
    display:inline-block;
    margin:0 5px;
    font-size:12px;
    font-weight:900;
    cursor:pointer;
    background-color:#f7f7f7;
    color:#848484;
    padding:3px 10px;
    transition: all 0.3s;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

ul.triggers li:hover{
    background-color:#e3e3e3;    
}

ul.triggers li.selected, li.selected{
    background-color:#64B645;
    color:#ffffff;
}

.control{
    position:absolute;
    cursor:pointer;
    opacity:0.2;
    transition: all 0.3s;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

.control:hover{
    opacity:0.5;
    transition: all 0.3s;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

.prev{ left:0px; }
.next{ right:0px; }


.subcontent{
    font-size:14px;
    letter-spacing:0.5px;
}

.swot{
    font-size:36px;
    font-weight:500;
    color:#eaeaea;
    opacity:0.55;
    margin-bottom:0px;
    padding-bottom:15px;
}

.swotSubtitle{
    font-size:14px;
    font-weight:900;
    letter-spacing: 3px;
    text-transform: uppercase;
    color:#848484;
}

.surveyList_h, .surveyList_v{
    margin:0px;
    padding:0px;
}

.surveyList_h li{
    display:inline;
    margin-right:1%;
}


textarea{ 
    font-family: 'Roboto', sans-serif; 
    font-size:14px;
    resize: none;
    height:100px; 
    width:616px; 
    padding:5px;
    font-weight:300;
    letter-spacing:0.5px;
}

::-webkit-input-placeholder { opacity:0.5; }
:-moz-placeholder { /* Firefox 18- */  opacity:0.5; }
::-moz-placeholder {  /* Firefox 19+ */ opacity:0.5; }
:-ms-input-placeholder {  opacity:0.5; }

/** VIVA
 ---------------------------------------------------------*/
.dimensionText{ font-size:12px; }
.dimensionTitle{ font-size:16px; }
.questionText{
    font-size:14px;
    line-height: 1.5em;
}

/** Logo, Nav, Icon, Navigate Recolor Classes
 ---------------------------------------------------------*/
.navigationTransparent{ background-color:transparent; }
.navIcon span{ background: #c7c7c7; }
.navIcon:hover span{ background: #64B645; }

/* Amelie Overrides navIcon's Colors */
.amelie-navIcon span{ background: #9cdede; }
.amelie-navIcon:hover span{ background: #fff; }
.amelieMenu ul li a{ color:#c4eaea; }
.amelieMenu ul li a:hover{ color:#fff; }
.amelieLogo svg path, .amelieLogo svg polyline{ fill: #9cdede; }
.amelieLogo svg:hover path, .amelieLogo svg:hover polyline{ fill: #fff; }
.amelieNavigate ul li:hover, .amelieNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.amelieNavigate ul li, .amelieNavigate ul li svg{ color:#a9e6e6; fill:#a9e6e6; }

/* Wayfarus Overrides navIcon's Colors */
.wayfarus-navIcon span{ background: #cfd9c3; }
.wayfarus-navIcon:hover span{ background: #fff; }
.wayfarusMenu ul li a{ color:#cfd9c3; }
.wayfarusMenu ul li a:hover{ color:#fff; }
.wayfarusLogo svg path, .wayfarusLogo svg polyline{ fill: #b0c697; }
.wayfarusLogo svg:hover path, .wayfarusLogo svg:hover polyline{ fill: #fff; }
.wayfarusNavigate ul li:hover, .wayfarusNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.wayfarusNavigate ul li, .wayfarusNavigate ul li svg{ color:#d4e3c1; fill:#d4e3c1; }

/* Loci Overrides navIcon's Colors */
.loci-navIcon span{ background: #deae52; }
.loci-navIcon:hover span{ background: #fff; }
.lociMenu ul li a{ color:#e3ba6c; }
.lociMenu ul li a:hover{ color:#fff; }
.lociLogo svg path, .lociLogo svg polyline{ fill: #e3ba6c; }
.lociLogo svg:hover path, .lociLogo svg:hover polyline{ fill: #fff; }
.lociNavigate ul li:hover, .lociNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.lociNavigate ul li, .lociNavigate ul li svg{ color:#f8d592; fill:#f8d592; }

/* Bamboo Overrides navIcon's Colors */
.bamboo-navIcon span{ background: #7eacdb; }
.bamboo-navIcon:hover span{ background: #fff; }
.bambooMenu ul li a{ color:#a4c3e3; }
.bambooMenu ul li a:hover{ color:#fff; }
.bambooLogo svg path, .bambooLogo svg polyline{ fill: #a4c3e3; }
.bambooLogo svg:hover path, .bambooLogo svg:hover polyline{ fill: #fff; }
.bambooNavigate ul li:hover, .bambooNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.bambooNavigate ul li, .bambooNavigate ul li svg{ color:#a4c3e3; fill:#a4c3e3; }

/* PatientTab Overrides navIcon's Colors */
.patientTab-navIcon span{ background: #c48dd8; }
.patientTab-navIcon:hover span{ background: #fff; }
.patientTabMenu ul li a{ color:#c48dd8; }
.patientTabMenu ul li a:hover{ color:#fff; }
.patientTabLogo svg path, .patientTabLogo svg polyline{ fill: #c48dd8; }
.patientTabLogo svg:hover path, .patientTabLogo svg:hover polyline{ fill: #fff; }
.patientTabNavigate ul li:hover, .patientTabNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.patientTabNavigate ul li, .patientTabNavigate ul li svg{ color:#c48dd8; fill:#c48dd8; }

/* Viva Overrides navIcon's Colors */
.viva-navIcon span{ background: #d67d6d; }
.viva-navIcon:hover span{ background: #fff; }
.vivaMenu ul li a{ color:#d67d6d; }
.vivaMenu ul li a:hover{ color:#fff; }
.vivaLogo svg path, .vivaLogo svg polyline{ fill: #d67d6d; }
.vivaLogo svg:hover path, .vivaLogo svg:hover polyline{ fill: #fff; }
.vivaNavigate ul li:hover, .vivaNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.vivaNavigate ul li, .vivaNavigate ul li svg{ color:#d67d6d; fill:#d67d6d; }

/* Me Overrides navIcon's Colors */
.meMenu ul li a{ color:#fff; /* From eee */ }
.meMenu ul li a:hover{ color:#fff; }
.meLogo svg path, .meLogo svg polyline{ fill: #fff; /* From eee */ }
.meLogo svg:hover path, .meLogo svg:hover polyline{ fill: #fff; }
.meNavigate ul li:hover, .meNavigate ul li:hover svg{ color:#fff; fill:#fff; }
.meNavigate ul li, .meNavigate ul li svg{ color:#f8d592; fill:#f8d592; }

/* Override navIcon and all class's colors*/
.open span{ background: #fff; }
.open:hover span{ background: #fff; }

/** About
 ---------------------------------------------------------*/
.skills {
    margin:25px 0px;
    padding:0px;
    text-align: center;
}

.skills li{
    display:inline-block;
    padding:25px 25px;
    height:130px;
    width:130px;
/*    width:inherit;*/
    text-align: center;
/*    background-color:#aaa;*/
}

.futureSkills{
    margin:0px;
    padding:0px;
    margin-bottom:50px;
}

.futureSkills li{
    display:inline;
    padding:0px 20px;
}


/** Projects
 ---------------------------------------------------------*/
.projectsBody .projectsDescription{
    color:rgba(0, 0, 0, 0.8);
}

.projectsBody a{
    cursor: default;
}


/** Footer
 ---------------------------------------------------------*/
footer{
    font-family: 'Roboto', sans-serif;
    padding:50px 0px;
    width:100%;
    background-color: #393939;
    background-color: #d4d4d4;
    border-top: solid #d4d4d4 1px;
    margin:0 auto;
    text-align: center;
}

footer ul a, footer ul a:visited{
    text-decoration:none;
    color:#ccc;
}

footer ul {
    display:block;
    padding:0px;
    margin:0px;
/*    margin-top:30px;*/
}

footer ul li{
    display:inline-block;
    padding:5px 10px;
    border-radius: 50%;
}

footer ul li:nth-child(2){
    transform: translateX(5%);
}

#contact{ color:#848484; }
#contact h1{ font-weight:300; }
#contact p{ margin-top:10px; font-style:italic;}

footer ul li a svg path{
    fill:#ebebeb;
    fill:#eee;
    fill:#212121;
    fill:#64B645;
    fill:#393939;
    opacity:0.5;
/*    stroke:#64B645;   */
    transition: all 0.3s;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

footer ul li a:hover svg path{
    opacity:1;
    fill:#eee;
    fill:#64B645;
}

.resume a, .resume a:visited{
    background-color:#6c6c6c;
/*    background-color:#505050;*/
/*    background-color:#64B645;*/
    font-size:16px;
    font-weight:500;
    border:2px solid #6c6c6c;
/*    border:2px solid #505050;*/
/*    border:2px solid #64B645;*/
    padding:15px 75px;
    color:#626262;
    color:#eee;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    
    font-size:14px;
    letter-spacing:4px;
    
    transition: all 0.3s;
        -webkit-transition: all 0.3s;
            -moz-transition: all: 0.3s;
}

.resume{ margin-top:30px; }

.resume a:hover{
    background-color:#505050;
    background-color:#64B645;
    border:2px solid #eee;
    border:2px solid #505050;
    border:2px solid #64B645;
    color:#eee;
}

.allrights{
    margin-top:50px;
    font-size:14px;
}