@charset "utf-8";
/* CSS Document */

/* _____ colors _______ */
/*

    light:      #B2B2B2
    medium:     #31373B
    gray:       #1D2428
    dark gray:  #101416  
    light GRAY  #909090

*/
/* _____ structure _______ */ 

body {
    width:100%;
    margin:0;
    padding:0;
    border:0;
    overflow-x:hidden;
    /*background-color:black;*/
}

/*___________ parallax ________________*/
/* this is the fancy scrolling effect found on the homepage and top of individual pages */ 

body, html {
    height: 100%;
    background-color:white;
}

.parallax { 
    /* The image used */
    background-image: url("images/temp_bg.png");

    /* Full height */
    height: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax2 { 
    background-image: url("images/downtown_corner_bg.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax3 { 
    background-image: url("images/downtown_street_bg.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}

/* there's probably a better way to code each page's landing parallax scroll, but this is the best way that I know how */
.parallax_dawn { 
    background-image: url("images/slideshow_family1.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_harley { 
    background-image: url("images/slideshow_family2.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_jake { 
    background-image: url("images/slideshow_family3.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_days { 
    background-image: url("images/slideshow_daymaking.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_colloquium { 
    background-image: url("images/slideshow_colloquium.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_projections { 
    background-image: url("images/slideshow_projections.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}
.parallax_posters { 
    background-image: url("images/slideshow_posters.png");
    height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover;
}


.parallax_quote {
    width:100%;
    padding-left:0%;
    padding-right:0%;
    padding-top:40vh;
    
    /*background-color:rgba(255, 255, 255,0.5);*/
}

.parallax_quote h1 {
    text-align:right;
    background-color:rgba(255, 255, 255,0.5);
    
    margin-left:23%;
    margin-right:1%;
    width:70%;
    padding:3%;
}

/*___________ home page content structure ________________*/


.section_content {
    width:100%;
    margin:0 auto;
    height:auto;
    padding-bottom:10%;;
}

.section_content p {
    width:55%; 
    margin:0 auto;
    margin-top:1em; 
    margin-bottom:3em;
}

.section_image {
	width:60%;
    height:auto;
    margin:0 auto;
	background-color:white;
    padding-top:1em;
    
    -webkit-transition:opacity .5s;
    -moz-transition:opacity .5s;
    -ms-transition:opacity .5s;
    -o-transition:opacity .5s;
    transition:opacity .5s;

    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}


.section_image:hover {
    opacity: .7;
}


.section_content h3 {
    font-family: 'Rammetto One', cursive;
    font-size:1em;
    text-align:center;
    color:black;
    padding:0;
    padding-top:2em;
    margin:0 auto;
}




/*____________  basic structure  _______________*/

#big_wrapper {
    width:100%;
    margin:0 auto;
    display:flex;
    padding:0;
    border:0;
}

#left_col {
    background-color:rgba(0, 0, 0,0.7);
    color:white;
    width:12%;
    height:100vh;
    float:left;
    text-align:center;
    
    position:fixed;
}

#right_col {
    width:100%;
    height:100vh;
    float:left;
    text-align:center;
}

#left_wrapper {
    width:100%;
}
#right_wrapper {
    width:100%;
}


/* ______ text stuff _______*/

h1 {
    font-size:2 em;
    letter-spacing:1px;
    font-family: 'Rammetto One', cursive;
    font-weight:100;
}

h2 {
    font-size:2 em;
    margin-bottom:10%;
    font-family: 'Roboto', sans-serif;
    text-shadow: 1.5px 1.5px 2px black;
    font-weight:100;
    color:white;
}

.nonnavyshade {
    text-shadow: 1.5px 1.5px 5px #102542;
}

p {
    font-size:1em;
    font-family: 'Roboto', sans-serif;
    color:#1D2428;
}


a {
    color:#aaa;
}



/*_____________________________________________________________________________*/
/* ___ left column things ___  */

#logo_circle {
    width:100%;
    padding-top:50vh;
    height:15vh;
    margin:0;
}

#logo_circle img {
    width:70%;
    height:auto;
    margin:0;
}

#mobile_logo {
    display:none;
}


#contact_info {
    width:100%;
    height:0vh;  
}
#contact_info p {
    margin:0;
    padding:0;
    padding-top:10%;
    font-size:1.5em;
    
    letter-spacing:.1em;
}
#contact_info p i {
    -webkit-transition:color .5s;
    -moz-transition:color .5s;
    -ms-transition:color .5s;
    -o-transition:color .5s;
    transition:color .5s;

    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}
#contact_info p i:hover {
    color:cyan;
}


/* _____ NAV _______ */

nav {
    width:100%;
    padding:0;
    padding-top:1%;
    margin:0;
    
    height:50vh;
}

ul {
    margin:0;
    padding:0;
}

ul li {
    width:100%;
    margin:0;
    list-style:none;
    padding-left:23%;
    text-align: left;
}
ul li a {
    display:block;
    font-size:1.3em;
    padding:5%;
    text-decoration:none;
    
    font-family: 'Roboto', sans-serif;
    /*color:#909090;*/
    color:white;
    text-shadow: 1.5px 1.5px 5px black;
    font-weight:400;
    letter-spacing: 1px;
    text-align:left;

    -webkit-transition:color .5s,background .5s;
    -moz-transition:color .5s,background .5s;
    -ms-transition:color .5s,background .5s;
    -o-transition:color .5s,background .5s;
    transition:color .5s,background .5s;

    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}

ul li a:hover {
    color:cyan;
}

ul li a:active {
    color:black;
}


/* _____ responsive NAV _______ */

.topnav {
    display:none;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: left;
    display: block;
    color: white;
    text-align: center;
    padding: 3%;
    padding-left:5%;
    text-decoration: none;
    font-size: 1em;
    font-family: 'Roboto', sans-serif;
    letter-spacing: 2px;
    
}

/* Change the color of links on hover */
.topnav a:active {
    color: black;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
    display: none;
}

.mobile_backtop {
    display:none;
}



/*_____________________________________________________________________________*/
/* ______ right column things _______*/


#welcome {
    width:100%;
    height:100vh;
    padding:0;
    margin:0;
    background-color:white;
}

/* images between sections */
.spacerImage {
    width:100%;
    height:100vh;
    padding:0;
    margin:0;
    background-color:white;
}

#concentration_greeting {
    width:100%;
    height:30vh;
    padding:0;
    margin:0;
    background-color:white;
}

#project_greeting {
    width:100%;
    height:4em;
    padding-top:2%;
    padding-bottom:2%;
    margin:0;
    background-color:white;
}

#greetings {
    font-size:4em;
    font-family: 'Montserrat', sans-serif;
    color:white;
    padding-top:18%;
    margin:0;
}



.concentration {
    width:100%;
    /*height:100vh;*/
    height:auto;
    padding-bottom:5%;
    text-align:center;
}

.concentration2 {
    width:100%;
    height:auto;
    text-align:center;
    background-color:white;
}

.concentration3 {
    width:100%;
    height:auto;
    text-align:center;
    background-color:white;
}

/* this contains our facts and gradient bg sections */
.slogan_space {
    width:100%;
    padding-top:1%;
    padding-bottom:1%;
    text-align:right;
    color:#31373B;
    
    background: black; /* For browsers that do not support gradients */
    background: -webkit-linear-gradient(left,rgba(255,0,0,0),rgba(0,255,255,1)); /*Safari 5.1-6*/
    background: -o-linear-gradient(right,rgba(0,0,0,0),rgba(0,255,255,1)); /*Opera 11.1-12*/
    background: -moz-linear-gradient(right,rgba(0,0,0,0),rgba(0,255,255,1)); /*Fx 3.6-15*/
    background: linear-gradient(to right, rgba(255,0,0,0), rgba(0,255,255,1)); /*Standard*/
}

.slogan_space a {
    color:magenta;
    font-size:1em;
    text-decoration:none;
    padding-right:1%;
    margin:0;
}

/* this contains the darker solid titles */
.slogan_space2 {
    width:100%;
    padding-top:1%;
    padding-bottom:1%;
    text-align:right;
    color:#848484;
    text-shadow: 1.5px 1.5px 5px black;
    background-color:#101416;
}


.slogan_space_wrapper2 {
    width:83%;
    padding-left:12%;
    padding-right:5%;
    padding-top:3em;
    padding-bottom:3em;
}

.slogan_space_wrapper {
    width:83%;
    padding-left:12%;
    padding-right:5%;
}

.concentration_title {
    width:100%;
    margin:0 auto;
    margin-top:0;
    padding-top:3em;
    padding-bottom:0em;
    text-align:center;
    color:#101416;
}

.concentration_description {
    width:60%;
    margin:0 auto;
    margin-bottom:1.5em;
    padding-top:1%;
    padding-bottom:1%;
    text-align:left;
    color:black;
    font-size: 1em;
}

.content_img {
    width:60%;
    height:auto;
}

.section_wrapper {
    width:88%;
    padding-left:12%;
}


 
/* this is so that the title will appear on mobile without the hover feature*/
.mobile_only_text {
    display:none;
}


.row_buttons {
    width:100%;
    margin:0 auto;
    padding:0;
    display:flex;
}

.link_button {
    padding-top:1%;
    padding-bottom:1%;
    width:60%;
    margin:0 auto;
    margin-bottom:1%;
    text-decoration:none;
    font-family: 'Roboto', sans-serif;
    border:2px solid #31373B;
    color:white;
    background-color:#31373B;
    
    -webkit-transition:color .5s,background .5s;
    -moz-transition:color .5s,background .5s;
    -ms-transition:color .5s,background .5s;
    -o-transition:color .5s,background .5s;
    transition:color .5s,background .5s;

    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
}

.link_button:hover {
    color:#31373B;
    background-color:white;
    border:2px solid #31373B;
}




/* ______ footer stuff!!! _______*/


footer {
    background-color:black;
    margin-top:0;
    padding-top:3%;
    padding-bottom:8%;
    
    width:88%;
    padding-left:12%;
    
    color:white;
    font-family: 'Roboto', sans-serif;
    
}

footer h1 {
    font-size:2 em;
    letter-spacing:1px;
    font-family: 'Rammetto One', cursive;
    font-weight:100;
    width:62%;
    margin:0 auto;
    background-color:rgba(0, 0, 0,0.7);
    padding:1%;
    padding-top:5%;
    padding-bottom:0%;
}

#footer_description {
    width:62%;
    margin:0 auto;
    margin-bottom:1.5em;
    text-align:left;
    font-size: 1.2em;
    text-shadow: 1.5px 1.5px 5px black;
    background-color:rgba(0, 0, 0,0.7);
    padding:1%;
    padding-bottom:5%;
}

footer p {
    color:white;
    margin-top:2%;
}


#footer_links ul {
    margin:0 auto;
    padding:0;
    padding-top:1%;
}

#footer_links ul li {
    width:31.33%;
    margin:0;
    list-style:none;
    padding-left:.5em;
    text-align: center;
    display:inline-block;
    background-color:rgba(0, 0, 0,0.7);
}

#footer_links ul li a {
    display:block;
    font-size:1em;
    padding-left:5%;
    padding-right:5%;
    padding-top:2%;
    padding-bottom:2%;
    text-decoration:none;
    
    font-family: 'Roboto', sans-serif;
    color:white;
    

    -webkit-transition:color .5s,background .5s;
    -moz-transition:color .5s,background .5s;
    -ms-transition:color .5s,background .5s;
    -o-transition:color .5s,background .5s;
    transition:color .5s,background .5s;

    -webkit-transition-timing-function:ease-out;
    -moz-transition-timing-function:ease-out;
    -ms-transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out;
    transition-timing-function:ease-out;
    
    border:3px solid white;
}

#footer_links ul li a:hover {
    color:#101416;
    background-color:white;
    text-shadow:none;
}







/*_________________________________________________________________________________________________*/
/*_______________________________    media queries   ______________________________________________*/

/* Turn off parallax scrolling for tablets and phones. Increase/decrease the pixels if needed - from W3 Schools */
/* responsiveness!!!! */ 
@media only screen and (max-width: 768px) {
    
    /* MAIN PAGE STUFF */
    /* parallax is not friendly on mobile so it gets turned off here */
    .parallax, .parallax_dawn, .parallax_harley, .parallax_jake, .parallax_days, .parallax_colloquium, .parallax_projections, .parallax_posters {
        background-attachment: scroll;
    }

    .parallax_quote {
    width:100%;
    padding-left:0%;
    padding-right:0%;
    padding-top:1em;
}

    .parallax_quote h1 {
        text-align:center;
        background-color:rgba(255, 255, 255,0.5);
        
        margin: 0 auto;
        width:94%;
        padding:3%;
        
        font-size:1.3em;
    }
    
    /* no need for the filler div to keep right coloumn right anymore */
    #left_col_empty {
        display:none;
    }
    #left_col {
        width:100%;
        position:static;
        height:auto;
    }
    #right_col {
        width:100%;
        height:auto;
    }
    #logo_circle {
        display:none;
    }
    #contact_info {
        width:100%;
        color:#102542;

        height:auto;

    }


    #contact_info p {
        /*margin:0;
        padding:0;
        padding-top:.5em;
        padding-bottom:.5em;
        font-size:1.5em;

        letter-spacing:.1em;
        color:#102542;*/
        display:none;
    }

    #contact_info p i {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;

    }
    
    /* _____ NAV _______ */

    nav {
        display:none;
    }
    
    #welcome {
        /*display:none;*/
    }
    
    #big_wrapper {
        display:block;
    }
    

    #footer_links ul {
        margin:0 auto;
        padding:0;
        padding-top:1%;
        text-align: center;
    }

    #footer_links ul li {
        width:60%;
        margin:0 auto;
        list-style:none;
        text-align: center;
        display:block;
    }

    #footer_links ul li a {
        display:block;
        font-size:1em;
        padding:5%;
        text-decoration:none;
        margin-bottom:.8em;

        font-family: 'Roboto', sans-serif;
        color:black;
        background-color:white;
    }
    
    footer p {
        padding-top:1em;
    }
    
    
    
    .text {
        display:none;
    }
    
    .mobile_only_text {
        display:inherit;
        color:black;
    }
    
    
    /* responsive nav  */
    .topnav {
        display:block;
        width:100%;
        background-color: #1D2428;
        overflow: hidden;
        z-index:998;
    }
    
    .topnav a:not(:first-child) {display: none;}
      .topnav a.icon {
        float: right;
        display: block;
      }
    
    .topnav.responsive {position: relative;}
      .topnav.responsive a.icon {
        position: absolute;
        right: 0;
        top: 0;
      }
    
      .topnav.responsive a {
        float: none;
        display: block;
        text-align: left;
      }
    
    .mobile_backtop {
        display:block;
    }
    
    .mobile_backtop a {
        text-decoration: none;
        color:magenta;
    }
    
    #mobile_logo {
        display:block;
        margin:0 auto;
        width:3em;
    }
    
    #greetings {
        font-size:3em;
        padding-top:15%;
    }
}