/* Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.  */
html {-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}

/*----------- apply a natural box layout model to all elements --------------*/
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

body {
	background-color: #fefefe;
	padding: 0;
	margin: 5px;
	text-shadow: none;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

h2 {
    font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    font-size: 30px;
    color: #006199;
	margin: 35px 0px 10px 0px;
	padding: 0px 10px;
}

h3 {
	font-size: 24px;
}

p {
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #003959;
	padding: 0px 18px;
}

header {
	margin: 10px 0px;
}

div {
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
	font-size: 16px;
	color: #003959;
}

nav button {
    margin: .3rem 3%;
    background-color: transparent;
    border: none;
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
    font-size: 1.6rem;
    color: #006199;
}

nav button:hover {
	cursor: pointer;
}

nav {
	display: flex;
    flex-direction: column;
    justify-items: center;
    justify-content: center;
	text-align: center;
	background-color: #F0FFFF;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

nav ul li a {
	display: block;
	padding: .8rem 2%;
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
	text-decoration: none;
	color: #006199;
	border-top: 1px solid rgba(0,97,153,0.3);
}

nav ul li.active a{background-color: rgba(0,97,153,0.6); color: #fff;}

nav ul li a:hover {background-color: rgba(0,97,153,0.9); color: #fff;}

nav ul.hide {display: none;}

header {
	background-color: #fefefe;
	padding: 5px 0 10px 0px;
	display: flex;
	align-items:center;
	justify-content:center;
}

header img {
	width: 64px;
	height: auto;
}

.banner-image {
	margin: 0px 0px 20px 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.headings {
	display: flex;
	flex-direction: column;
}

.headings h1 {
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
    font-size: 36px;
    color: #006199;
	margin: 0 0 0 18px;
}

.motto {
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	letter-spacing: 1pt;
	color: #db3a00;
	margin-left: 20px;
	font-size: 0.9rem;
}

.banner {
	padding: 0px;
}

.weather-summary {
	display: grid;
	grid-template-columns: 120px auto;
	grid-template-rows: 1fr;
	background-color: #fefefe;
	color: #003959;
	padding: 18px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.article-image {
	margin: 0;
	padding: 0px 0px 10px 0px;
	border-radius: 5px 0px 0px 5px;
}

section p {
	margin: 0px;
}

.weather-summary-heading {
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	margin: 0px 0px 5px 0px;
	padding: 0px 10px 10px 10px;
	grid-column: 1/3;
	grid-row: 1/2;
	
}

.left-column-label {
	grid-column: 1/2;
	padding: 0px 0px 8px 18px;
}

.right-column-value {
	grid-column: 2/3;
	padding: 0px 18px 8px 10px;
}

.weather-forecast {
	margin: 20px auto; 
	padding: 18px;
	background-color: #003959;
	color: #fefefe;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.weather-forecast-heading {
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	font-weight: normal;
	text-align: center;
	margin: 0px 0px 15px 0px;
	grid-column: 1/6;
	grid-row: 1/2;
}

.five-day-forecast { 
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(50px,1fr));
    column-gap: 5px;
	row-gap: 8px;
}

.weather-grid-col {
	background-color: #fefefe;
}

div.weather-grid-col:nth-child(1) {
	border-radius: 5px 0px 0px 5px;
}

div.weather-grid-col:nth-child(5) {
	border-radius: 0px 5px 5px 0px;
}

.col-head-1, .col-head-2, .col-head-3, .col-head-4, .col-head-5 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1rem;
	background-color: #006199;
	color: #fefefe;
}

.col-head-1, .col-head-2, .col-head-3, .col-head-4, .col-head-5, .weather-data {
	display: block;
	text-align: center;
	padding: 4px;
}

.col-head-1 {
	border-radius: 5px 0px 0px 0px;
}

.col-head-5 {
	border-radius: 0px 5px 0px 0px;
}

section div img {
	margin: 0px auto;
}

.article-content {
	display: block;
	margin: 20px auto; 
	padding: 18px;
	background-color: #fefefe;
	color: #003959;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

.article-heading {
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	margin: 0px 0px 5px 0px;
	padding: 0px;
}

.article-image {
	margin: 20px 0px 0px 0px;
	padding: 0px 0px 10px 0px;
	border-radius: 5px;
}

.first-paragraph-in-article, .second-paragraph-in-article {
	margin: 0px 0px 15px 0px;
	padding: 0px;
}

.article-button {
	text-decoration: none;
	width: 145px;
	height: 22px;
	font-size: 15px;
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
	color: #fefefe;
	background-color : #db3a00;
	border: #db3a00 solid 1px;
	border-radius: 5px;
	text-align: center;
	padding: 3px;
}

.article-button:hover {
	text-decoration: none;
	color: #fefefe;
	background-color: #006199;
	border: #006199 solid 1px;
	border-radius: 5px;
}

.contact-info {
	display: grid;
	grid-template-columns: 35px auto;
	grid-template-rows: 1fr;
	row-gap: 8px;
	margin: 0px; 
	padding: 18px 18px 15px 18px;
	background-color: #003959;
	color: #fefefe;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px 5px 0px 0px;
}

.contact-info-heading {
	grid-column: 1/3;
	grid-row: 1/2;
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	font-weight: normal;
	margin: 0px;
}

.idahosphere-heading {
	grid-column: 1/3;
	grid-row: 2/3;
	font-family: 'Source Sans Pro', 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: 18px;
	margin: 10px 0px 5px 0px;
}

.address-icon {
	grid-column: 1/2;
	grid-row: 3/4;
}

.address {
	grid-column: 2/3;
	grid-row: 3/4;
}

.email-icon {
	grid-column: 1/2;
	grid-row: 4/5;
}

.email {
	grid-column: 2/3;
	grid-row: 4/5;
}

.phone-icon {
	grid-column: 1/2;
	grid-row: 5/6;
}

.phone {
	grid-column: 2/3;
	grid-row: 5/6;
}

.facebook-icon {
	grid-column: 1/2;
	grid-row: 6/7;
}

.instagram-icon {
	grid-column: 2/3;
	grid-row: 6/7;
}

.location-idahosphere {
	grid-column: 1/3;
	grid-row: 7/8;
	padding: 10px 0px 0px 0px;
}

.address, .email, .phone {
	color: #fefefe;
	padding: 0px;
}

.website-info {
	margin: 0px 0px 20px 0px;
}

footer {
	display: flex;
	flex-direction: column;
	font-family: 'Noto Sans', 'Open Sans', sans-serif;
	background-color: #F0FFFF;
	margin: 0px;
    padding: 0px;
	box-shadow: 0 2px 5px rgba(0,0,0,0.3);
	border-radius: 5px;
}

footer p {
	color: #006199;
	line-height: 1.6;
	margin: 1px 0px;
	padding: 0px 18px 0px 18px;
}

footer section a {
	max-width: 24px;
	max-height: 24px;
}

.website-info-content {
	margin: 15px 0px 5px 0px;
}

em {
	font-style: normal;
	color: #006199;
	padding: 0px 18px 0px 18px;
}

.main-gallery-page {
	margin: 0px 0px 20px 0px;
}

.weather-gallery {
	display: grid;
	grid-template-columns: minmax(250px,1fr);
	background-color: #fefefe;
    box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
}

.weather-gallery img[data-src] {
    filter: blur(0.2em);
}

.weather-gallery img {
	margin: 0 auto;
	filter: blur(0em);
    transition: filter 1s;
}

.figcaption1, .figcaption2, .figcaption4, .figcaption5, .figcaption7, .figcaption8, .figcaption9 {
	padding: 5px 10px 25px 10px;
}

.figcaption3 {
	padding: 5px 10px 25px 10px;
}

.figcaption4, .figcaption5, .figcaption6 {
	color: #fefefe;
}

.figcaption6 {
	padding: 5px 10px 25px 10px;
}

.weather-gallery figure {
	margin: 0px;
}

.weather-gallery figure:nth-child(4) {
	background-color: #003959;
}

.weather-gallery figure:nth-child(5) {
	background-color: #003959;
}

.weather-gallery figure:nth-child(6) {
	background-color: #003959;
}

.image-1 {
	grid-column: 1/2;
	grid-row: 1/2;
}

.image-2 {
	grid-column: 1/2;
	grid-row: 2/3;
	padding: 15px 0px 0px 0px;
}

.image-3 {
    grid-column: 1/2;
	grid-row: 3/4;
	padding: 15px 0px 0px 0px;
}

.image-4 {
	grid-column: 1/2;
	grid-row: 4/5;
	padding: 15px 0px 0px 0px;
}

.image-5 {
    grid-column: 1/2;
	grid-row: 5/6;
	padding: 15px 0px 0px 0px;
}

.image-6 {
    grid-column: 1/2;
	grid-row: 6/7;
	padding: 15px 0px 0px 0px;
}

.image-7 {
	grid-column: 1/2;
	grid-row: 7/8;
	padding: 15px 0px 0px 0px;
}

.image-8 {
    grid-column: 1/2;
	grid-row: 8/9;
	padding: 15px 0px 0px 0px;
}

.image-9 {
    grid-column: 1/2;
	grid-row: 9/10;
	padding: 15px 0px 0px 0px;
}

form {
	margin: 0px 0px 20px 0px;
}

form fieldset {
	background-color: #fefefe;
    margin: 2rem 0;
    padding: 0px;
	border: none;
}

form legend {
	width: 100%;
	font-size: 24px;
    color: #fefefe;
	background-color: #003959;
    margin: 0;
    padding: 5px 18px 5px 18px;
	border-radius: 5px 5px 0px 0px;
}

form label.form-details, form div {
    display: block;
	margin: 0px 18px 3px 18px;
    padding-top: 1rem;
    color: #db3a00;
    font-size: 16px;
}

form label.form-details input, form label.form-details select {
    -webkit-appearance: none;
    display: block;
    font-size: 16px;
    border: solid 1px #003959;
    border-radius: 5px;
    padding: .75rem;
    color: #003959;
    width: 100%;
    background-color: #F0FFFF;
}

form input.submitBtn {
    border: none;
    background-color: #db3a00;
    color: #fefefe;
    border-radius: 5px;
    padding: .75rem 1.5rem;
    margin: 0px 18px 20px 18px;
    width: 80%;
    max-width: 20rem;
}

.submitBtn:hover {
	text-decoration: none;
	color: #fefefe;
	background-color: #006199;
	border: #006199 solid 1px;
	border-radius: 5px;
	width: 80%;
	height: 42px;
    max-width: 20rem;
	cursor: pointer;
}

form label.form-details input:required {
    border-left: red solid 3px;
}

form label.form-details input:required:valid {
    border-left: green solid 3px;
}

.weather-report {
	box-shadow: 0 2px 5px rgb(0 0 0 / 30%);
	border-radius: 5px;
}

form label.storm-rating {
	display: block;
	color: #db3a00;
	padding: 16px 0px 0px 0px;
	margin: 0px 18px 3px 18px;
}

form label.storm-rating input {
	display: block;
	color: #003959;
	width: 100%;
}

#ratingvalue {
	font-size: 24px;
}

form input, select {
	margin: 3px 0px 0px 0px;
}

form label.answer-option {
    display: block;
	margin: 0px 18px 3px 18px;
}

form label.answer-option {
	padding-bottom: 10px;
}

textarea {
	font-size: 16px;
	color: #003959;
	border-color: #003959;
	width: 100%;
	border-radius: 5px;
	padding: 10px;
}

form fieldset:nth-child(1) {
	margin: 1.5rem 0;
}

form fieldset:nth-child(3) {
	background-color: #003959;
}

.form-description2 {
	border-radius: 0px;
}

.form-description3 {
	background-color: #006199;
	border-radius: 0px;
}

.picture-sky {
	display: none;
}

/*----- Clearfix: Force an Element not to collapse -----*/
.clearfix:after {
    content: "";
    display: table;
    clear: both;
}