/* see general.css for default styles for all sizes*/
.header-slider__content.story-bar {
    background-image: linear-gradient(to right, #46542b, #485c29, #4c7025, #4b5d22, #473f1e);
}
.home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
    top: 16%;
    left: 0;
    padding-top: 12%;
    padding-left: 12%;
    background: rgb(255, 255, 255, .6);
}
div.header-slider__slide .header-slider__content.page-title-text div.title {
    width: 95%;
}
div.header-slider__slide .header-slider__content.page-title-text div.title img {
    width: 12%;
    float: left;
    margin-right: 1em;
    margin-bottom: 1em;
}
div.header-slider__slide .header-slider__content.page-title-text div.title h1, 
div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
    color: #46542b;
    font-size: 130%;
    text-transform: none;
    text-align: left;
    line-height: .5em;
    font-style: italic;
}
.icon-custom {
	margin-top: -2%;
}
.home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
    position: absolute;
    top: 35%;
    margin: auto;
    font-size: 120%;
    width: 50%;
    text-align: left;
    font-family: 'Avenir-book';
    font-weight: bold;
    color: #64422d;
}
div.header-slider__content.page-title-text a.info-circle {
    position: absolute;
    left: 1em;
    bottom: 14%;
    width: 40px;
    height: 40px;
    padding: .1em;
    background-color: #fff;
    box-shadow: 2px 2px 4px #000;
    border-radius: 50px;
    font-size: 1.25em;
    font-weight: bold;
    z-index: 1000;
}
.fade.show {
    background: transparent;
}
.modal.show .modal-dialog {
    top: 25%;
    left: 0;
    max-width: 70%;
}
.modal-content {
    width: 100%;
    padding: 1em;
    border-radius: 20px;
}
.modal-content .close {
    margin-top: 2em;
    clear: both;
}
section.story-content-wide {
    background-image: linear-gradient(#677e2a, #517525, #32681e, #005412);
    padding-top: 3em;
    margin-top: -2em;
}
div.story-content-inner {
    width: 90%;
    margin: 3em auto;
    padding: 2em;
    border-radius: 50px;
    background-color: #c3c999;
    border: 5px solid #fff;
}
img.story-content-tree {
   
    display: none;
}
#story-begin > div > div:nth-child(2) {
    padding-right: 0;
    padding-left: 0;
}
div.sidebar {
    background-color: #005412;
    padding: 3em 1em;
    border-radius: 40px;
}
div.sidebar img {
    margin-bottom: 2em;
}
div.sidebar p, div.sidebar h2 {
    color: #fff;
}
div.sidebar .white-box {
    background-color: #fff;
    color: #000;
    padding: 1em;
    border-radius: 25px;
    box-shadow: -5px -5px #64422d;
    text-align: center;
    margin: 2em 0;
}
.icon.color--lt-green {
	color: #C3C999;
}
p.top-photo-credit {
		position: absolute;
		top: 80%;
		width: 70%;
	}
#section > div > div > section > p:nth-child(3) {
	display: none;
}
p.to-top {
    margin-left: 10%;
    margin-top: 10px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	landscape phone (620px+)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 620px) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 8%;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title h1, div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
        font-size: 150%;
        line-height: .75em;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title img {
        width: 8%;
        margin-right: .5em;
    }
	p.top-photo-credit {
		width: 80%;
		color: #666;
		top: 85%;
	}
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 60%;
        width: 70%;
    }
    div.sidebar {
        padding: 3em;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Medium devices (tablets, 750px and up) 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 750x) {
    div.header-slider__slide .header-slider__content.page-title-text div.title h1, 
	div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
		font-size: 130%;
	}
	.icon-custom {
		margin-top: 0;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Large devices (desktops, 976px and up
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 976px) {
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 6%;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title {
        width: 100%;
        padding-left: 6%;
    }
	div.header-slider__slide .header-slider__content.page-title-text div.title h1, 
	div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
		font-size: 180%;
	}
   p.top-photo-credit {
	   right: 5%;
	   width: 30%;
	   top: 80%;
   }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 45%;
        left: 30%;
        width: 50%;
    }
    div.header-slider__slide .header-slider__content.page-title-text img {
        width: 20%;
        float: left;
        margin-right: 1em;
    }
    .modal.show .modal-dialog {
        top: 40%;
    }
    div .story-content-inner {
        padding: 2em 2em 24em 2em;
    }
    img.story-content-tree {
        display: block;
        width: 55%;
        position: absolute;
        bottom: 2%;
        left: 25%;
    }
	#section > div > div > section > p:nth-child(3) {
		display: block;
		position: absolute;
		bottom: 3%;
		width: 30%;
		right: 0;
		color: #000;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	styles for laptop devices - 1440px +
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1400px) {
    div.header-slider__content.page-title-text a.info-circle {
        top: 53%;
    }
    .modal.show .modal-dialog {
        width: 60%;
        left: -12%;
    }
    .modal-content {
        width: 65%;
        float: left;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {
        padding-top: 0;
        background: none;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title {
        padding-left: 0;
    }
	.icon-custom {
		margin-top: -1%;
	}
	div.header-slider__slide .header-slider__content.page-title-text div.title h1, div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
		font-size: 200%;
	}
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 20%;
        left: 20%;
        width: 25%;
    }
	p.top-photo-credit {
		color: #fff;
		width: 20%;
	}
    section.story-content-wide {
        padding-bottom: 12em;
    }
    div .story-content-inner {
        width: 80%;
    }
    img.story-content-tree {
        width: 40%;
        bottom: 9%;
        left: 30%;
    }
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	styles for large desktop monitors - 1920 wide x 1080 tall
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 1900px) {
    div.header-slider__content.page-title-text a.info-circle {
        top: 65%;
    }
    .modal.show .modal-dialog {
        top: 75%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content.page-title-text {}
    div.header-slider__slide .header-slider__content.page-title-text div.title h1, div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
        font-size: 250%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        top: 23%;
        width: 20%;
        left: 18%;
    }
    img.story-content-tree {
        left: 15%;
        bottom: 8%;
    }
	#section > div > div > section > p:nth-child(3) {
		right: 22%;
		bottom: 12%;
	}
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
	Large MAC desktop - 2560 wide x 1440 tall
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
@media screen and (min-width: 2500px) {
    div.header-slider__slide .header-slider__content.page-title-text div.title {
        padding-left: 2%;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title h1, div.header-slider__slide .header-slider__content.page-title-text div.title div.h1.title-with-icon {
        font-size: 300%;
        padding-left: 2%;
    }
    div.header-slider__slide .header-slider__content.page-title-text div.title img {
        width: 5%;
    }
    .home-page-header-slider .header-slider__slide .header-slider__content .header-slider__content__desc {
        font-size: 220%;
        width: 25%;
        left: 17%;
        top: 24%;
    }
	p.top-photo-credit {
		position: absolute;
		top: 95%;
		right: 5%;
	}
    div.header-slider__content.page-title-text a.info-circle {
        top: 80%;
    }
    .modal-dialog {
        top: 62%;
    }
    .modal-content {
        width: 42%;
    }
	.icon-custom {
		margin-top: 0;
	}
    div.sidebar .white-box {
        margin-right: -2em;
        margin-left: 6em;
        width: 100%;
    }
    img.story-content-tree {
        width: 30%;
        position: absolute;
        top: 62%;
        left: 24%;
    }
    section.story-content-wide {
        padding-top: 4em;
        margin-top: 0;
    }
    div .story-content-inner {
        padding: 2em 2em 12em 2em;
        width: 60%;
    }
}