# Front matter comment to ensure Jekyll properly reads file.


/**

* Models the styles for the website.
* 
* Exclusively made for PREFIRE
* © 2019-2020 University of Wisconsin - Madison. Space Science and Engineering Center. All Rights Reserved.
*/

// Imports @import url(stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css); @import url('fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i'); @import url(stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css);

// Color import $font-size: 50px; $red: red; $light-gray: cfcfcf; $dark-gray: #4a4a4a;

// Master Styles *{

font-family: "Open Sans";
font-weight: 300;

}

.body-container{

border: 1px solid black;
margin: 0;
width: 100%;

}

.pic{ // All parallax Background

height: 100%;
transform: scale(1.5);

}

// Tools .hidden{

display: none;

}

.main-container{

width: 100%;
scroll-behavior: smooth;
background-image: url("bg-picture-2.jpg");

}

.border{

border: 1px solid red !important;

}

.row{

width: 100%;
margin: 0;

}

// Text Styles h1{

color: white;
font-size: 1.25em;
font-weight: 300;
letter-spacing: 0.10em;
margin-top: 1em;
display: block;
text-align: center;

}

h2{

color: white;
font-weight: 300;

}

h3{

font-weight: 300;
font-size: 1.5em;

}

h5{

text-align: center;
margin-top: 1em;
font-weight: 300;
background-color: white;
padding: 0.5em;
border-radius: 1px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
font-weight: 400;

}

h6{

font-size: 1.5em;
text-align: center;

}

// Generic styles .generic-container{

padding: 1em;
margin-top: 3em;
margin-bottom: 3em;

}

.generic-box{

background-color: rgba(white, 1);
border-radius: 1px;
padding: 1em;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.mission-text{

margin-bottom: 0;

}

// Navbar Styles .navbar{

width: 100%;
z-index: 999;
color: white;
position: fixed;
transition:500ms ease;

}

.navbar-scrolled{

background-color: white;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
color: black;

}

.navbar-menu{

list-style-type: none;
width: 100%;
text-align: center;
margin: 0;

}

.navbar-menu-link{

display: inline-block;
padding: 0 2em;

}

.navbar-menu-link-text{

color: white;
transition: 500ms ease;

}

.burger-icon-text{

color: white;
margin: 0;
transition: 500ms ease;

}

.burger-icon-text-scrolled{

color: black;
margin: 0;
transition: 500ms ease;

}

.fa-bars{

font-size: 1.5em;
margin: 0;

}

.burger-icon{

margin: 0;
padding: 0;

}

.burger-icon-btn{

margin: 0;
background-color: transparent;
border: 0;

}

.navbar-fullscreen{

z-index: 10000;
position: fixed;
background-color: rgba(black, 0.75);
width: 100%;
height: 100%;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.2s ease;

}

.navbar-fullscreen-gone{

position: fixed;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.2s ease;

}

.navbar-menu-link-text-scrolled{

color: black;

}

.navbar-menu-link-text:hover{

color: $light-gray;
text-decoration: none;
transition: 200ms ease;

}

.mobile-nav-link{

color: white;

}

.mobile-nav-hover{

color: $light-gray;
text-decoration: none;
transition: 200ms ease;

}

.mobile-nav-link-span{

display: block;
text-align: center;
padding: 1em;

}

.mobile-nav-containers{

margin-top: 5em;

}

.go-to-top-container{

position: fixed;
z-index: 15000;
right: 0;
margin-right: 1em;
margin-top: 4em;
padding-right: 0.4em;
padding-left: 0.4em;
padding-bottom: 0.25em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 100000px;
background-color: white;
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.2s ease;

}

.chevron-white{

padding: 0;
margin: 0;

}

.scroll-top-a{

color: black;
transition: 200ms ease;

}

.scroll-top-a:hover{

color: $dark-gray;
transition: 200ms ease;

}

.scroll-top-a-gone{

position: fixed;
z-index: 15000;
right: 0;
margin-right: 1em;
margin-top: 3.5em;
padding-right: 0.4em;
padding-left: 0.4em;
padding-bottom: 0.25em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
border-radius: 100000px;
background-color: white;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.2s ease;

}

// Main Page Styles .main-page{

min-height: 100vh;
padding-top: 2.5em;

}

.logo{ // Prefire main logo

height: 20vh;
margin-top: 50vh - 20vh;
display: block;
text-align: center;
margin-left: auto;
margin-right: auto;

}

.uw-logo{

height: 6em;
display: block;
margin: 0 auto;

}

.jpl-logo{

height: 7em;
display: block;
margin: 0 auto;

}

.ssec-logo{

height: 6em;
display: block;
margin: 0 auto;

}

.main-logos{

padding-top: 11vh;

}

// Section title header styles .item-header{

background-color: #2B336F;
padding: 2.5em;
padding-left: 4em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

// Overview styles .overview-body{

background-color: rgba(white, 1);
border-radius: 1px;
padding: 1em;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.overview-body-text{

margin-bottom: 0;

}

.overview-container{

padding: 1em;
margin-top: 3em;
height: 100%;
margin-bottom: 3em;
background-image: url("bg-picture-3.jpg");

}

.overview-preview{

margin-bottom: 3em;

}

.overview-images-point{

max-width: 8em;
margin: 0 auto;
display: block;
margin-bottom: 0.5em;
background-color: rgba(white, 1);
padding: 0.5em;
border-radius: 10000px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
z-index: 50;
position: relative;
margin-right: -2em;

}

.overview-view-picture{

padding: 0;

}

.overview-point-text{

background-color: rgba(white, 1);
border-radius: 1px;
padding: 1em;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin-left: -2em;
margin-right: 6em;
padding-left: 4em;

}

.overview-point-container{

margin-bottom: 2em;

}

// Mission styles .mission-container{

padding: 1em;
margin-top: 3em;
margin-bottom: 3em;

}

.mission-container-row{

margin-top: 2.5em;
margin-bottom: 2.5em;

}

.mission-box{

background-color: rgba(white, 1);
border-radius: 1px;
padding: 1em;
margin: 0 auto;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.earth-picture{

max-width: 15em;
display: block;
margin: 0 auto;

}

.earth-picture-container{

margin: 0 auto;
background-color: rgba(white, 1);
padding: 1em;
width: 17em;
border-radius: 100000px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.mission-text{

margin-bottom: 0;

}

// Instrument styles .instrument-container{

padding: 2.5em;
margin-top: 3em;
margin-bottom: 3em;

}

.tirs-image-container{

background-color: rgba(white, 1);
padding: 1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
margin-bottom: 1em;

}

.tirs-info-container{

background-color: rgba(white, 1);
padding: 1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.tirs-picture{

max-width: 15em;
padding: 0;
margin: 0 auto;
display: block;

}

.technical-container{

background-color: rgba(white, 1);
padding: 1em;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.technical-sub{

text-align: right;
display: block;
font-size: 1.25em;
font-weight: 350;

}

.technical-divider{

border-right: 1px solid $light-gray;

}

.technical-infos{

padding: 0.5em;

}

// Custom media resolution (for responsivity) @media(max-width: 1090px){

.uw-logo{
        height: 5em;
        display: block;
        margin: 0 auto;
}
.jpl-logo{
        height: 6em;
        display: block;
        margin: 0 auto;
}
.ssec-logo{
        height: 5em;
        display: block;
        margin: 0 auto;
}
.overview-point-text{
        background-color: rgba(white, 1);
        border-radius: 1px;
        padding: 1em;
        margin: 0 auto;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        margin-left: -2em;
        margin-right: 3em;
        padding-left: 4em;
}
.earth-picture{
        max-width: 12em;
        display: block;
        margin: 0 auto;
}
.earth-picture-container{
        margin: 0 auto;
        background-color: rgba(white, 1);
        padding: 1em;
        width: 14em;
        border-radius: 100000px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.tirs-picture{
        max-width: 10em;
        padding: 0;
        margin: 0 auto;
        display: block;
}

}

@media(max-width: 850px){

.jpl-logo{
        height: 5em;
        display: block;
}
.ssec-logo{
        height: 4.5em;
        display: block;
        margin: 0 auto;
}
.uw-logo{
        height: 4.5em;
        display: block;
        margin: 0 auto;
}

}

@media(max-width: 991px){

.mission-question-container{
        margin-bottom: 3em;
}
.earth-picture-orbit-container{
        margin-top: 3em;
}
.earth-picture{
        max-width: 15em;
        display: block;
        margin: 0 auto;
}
.earth-picture-container{
        margin: 0 auto;
        background-color: rgba(white, 1);
        padding: 1em;
        width: 17em;
        border-radius: 100000px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.tirs-picture{
        max-width: 15em;
        padding: 0;
        margin: 0 auto;
        display: block;
}
.tirs-info-container{
        background-color: rgba(white, 1);
        padding: 1em;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        margin-bottom: 3em;
}

}

@media(max-width: 767px){

.main-logos{
        margin-bottom: 3em;
}
.jpl-logo{
        height: 5em;
        display: block;
        margin-bottom:: 1.25em;
}
.ssec-logo{
        height: 4.5em;
        display: block;
        margin: 0 auto;
}
.uw-logo{
        height: 4.5em;
        display: block;
        margin: 0 auto;
        margin-bottom:: 1.25em;
}
.overview-images-point{
        max-width: 8em;
        margin: 0 auto;
        display: block;
        margin-bottom: 0.5em;
        background-color: rgba(white, 1);
        padding: 0.5em;
        border-radius: 10000px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        z-index: 50;
        position: relative;
        margin-bottom: -2em;
}
.overview-point-text{
        background-color: rgba(white, 1);
        border-radius: 1px;
        padding: 1em;
        margin: 0 auto;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
        padding-top: 2.5em;
}
.overview-container{
        padding: 1em;
        margin-top: 3em;
        margin-bottom: 3em;
}
.pic{
        height: 100%;
        transform: scale(2);
}
.overview-body{
        background-color: rgba(white, 1);
        border-radius: 1px;
        padding: 1em;
        margin: 0 auto;
        margin: 1em;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
h2{
        margin: 0 auto;
}
.item-header{
        background-color: #2B336F;
        padding: 2.5em;
        box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

}