/* index.css */

/*
	font-family: 'Alice', serif;

    font-family: 'Proza Libre', sans-serif;

	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

	new blue: #5960d6;

	new red: red;

*/


* {
	margin: 0;
	font-size: 0;
	font-weight: 400;
	box-sizing: border-box;
}

.row {
	margin-left: -10px;
	margin-right: -10px;
}

body {
	background-color: #333;
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	color: white;
}

article, aside, footer, header, nav, section {
    display: block;
}

h1 {
	font-family: 'Alice', serif;
	font-size: 11.5vh;
	font-weight: 100;
	letter-spacing: 2px;
	color: #fff;
	text-shadow: 3px 2px 3px black;
}

h2 {
	font-family: 'Proza Libre', sans-serif;
	font-size: 2.75vw;
	font-weight: 400;
    line-height: 1.2;
	color: #fff;
	text-shadow: 2px 2px 2px rgb(0,0,0);
}

h3 {
	font-family: 'Proza Libre', sans-serif;
	font-size: 3vw;
	font-weight: lighter;
	line-height: 1.2;
	color: #f00;
    text-shadow: 1px 0px 0px #f00, 1px 1px 4px rgba(0,0,0,.4);
	margin: 5px 0px;
}

p {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: 2.4vh;
    font-weight: 200;
    line-height: 1.3;
	letter-spacing: .25px;
    color: white;
    text-shadow: 2px 2px 3px black;
    margin-bottom: 20px;
}

a {
	text-decoration: none;
}

p a {
	font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: 2.4vh;
	font-weight: 200;
	line-height: 1.2;
	color: khaki;
	text-shadow: 2px 2px 3px black;
	margin-bottom: 20px;
}

p a:hover {
	color: #f00;
}

a:focus, a:hover, a:active {
	text-decoration: none;
}

li {
		font-family: 'Proza Libre', sans-serif;
	    text-shadow: 1px 1px 4px black;
		margin: 10px 0px;
}

img {
    vertical-align: middle;
	border-style: none;
}

/* ----- End General Elements ----- */

#Wrapper {
	width: 100%;
}

/* ----- Navigation ----- */

#NavButtonBar {
	padding: 0px;
}

.fixed-top {
    /* width: 75.2%; */
    left: 24.8%;
}

.navbar-nav {
    background-color: #333;
	width: 100%;
}

.navbar-nav h2 {
	margin: 0;
}

.navbar-nav h2 a {

}

#SiteTitleBar {
    margin-right: 0px;
    font-family: 'Alice', serif;
}

#NavButtonBar .Button {
    border: .85vh solid transparent;
    box-sizing: content-box;
    display: flex;
    box-shadow: none;
    background: transparent;
	padding-left: 1%;
    padding-right: 1%;
	justify-content: center;
}

#NavButtonBar .Button.Red {
    border-bottom: .85vh solid #f00;
    transition: all .3s;
}

#NavButtonBar .Button a {
    font-family: 'Proza Libre', sans-serif;
	font-size: 2.2vw;
    font-weight: 400;
	line-height: 1.15;
	color: #fff;
	text-shadow: 2px 2px 2px rgb(0,0,0);
	display: flex;
	align-items: flex-end;
}

#NavButtonBar .Button:hover a {
    color: #5960d6;
    transition: all .2s;
}

a:not([href]):not([tabindex]) {
    color: inherit;
    text-decoration: none;
}

[role=button], a, area, button, input, label, select, summary, textarea {
    -ms-touch-action: manipulation;
    touch-action: manipulation;
}
/* ----- Main Logo ----- */

#SiteTitle a {
	display: block;
    position: fixed;
	top: 0;
	width: calc(25% - 2px);
	font-family: 'Alice', serif;
    font-size: 11.5vh;
    font-weight: 100;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 3px 2px 3px black;
	line-height: 1.15;
	text-decoration: none;
	padding: 10px 0 2% 2.5%;
	background: linear-gradient(180deg, #333 90%, transparent);
	z-index: 50;
}

 /* ----- Site Intro ----- */

 header {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
    height: auto;
    min-height: 100vh;
}

header img {
    display: none;
}

#WhatsNew {
    width: 25%;
    margin: 0;
    min-height: 100vh;
	padding: 44vh 2% 0 2.5%;
}

#HeaderArticle {
	background-image: url(Images/IpanimaHomePage.jpg);
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    width: 75%;
    margin: 0;
}

.Gap {
    position: relative;
	display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    height: 80vh;
    z-index: 30;
}

.GapClear {
    display: block;
    width: 25%;
	height: 80vh;
    background-color: #333;
}

.GapImage {
    display: inline-block;
    width: 75%;
    height: 80vh;
    background-image: url(Images/TrafalgarMermaid_Final.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: 23vw;
}

.RedBar {
    display: none;
}

/* #GalleryJump {
	transform: translateY(-8vh);
} */

#PhotoGallery {
    background: #333;
}

#PhotoGalleryArticle {
    padding-top: 8vw;
    padding-bottom: 30px;
}

#PhotoGallery img {
    display: block;
    width: 100%;
}

.container-fluid {
    padding-right: 10px;
    padding-left: 10px;
}

.PhotoBar {
	height: 40px;
    background-color: #5960d6;
	border-bottom: 1px solid #222;
	margin-bottom: 20px;
}

.PhotoCountry {
	width: 65%;
	float: left;
    font-family: 'Proza Libre', sans-serif;
	font-size: 25px;
    font-weight: 100;
    line-height: 45px;
    color: white;
	text-shadow: 1px 1px 2px black;
    text-decoration: none;
}

.PhotoGo {
    font-family: 'Proza Libre', sans-serif;
    font-weight: 100;
    font-size: calc(15px + .1vw);;
    line-height: 45px;
	text-shadow: 1px 1px 2px black;
	color: khaki;
	text-align: right;
}

.PhotoGo:hover {
	font-family: 'Proza Libre', sans-serif;
	font-weight: 100;
	font-size: calc(15px + .1vw);;
	line-height: 45px;
    color: #f00;
    text-shadow: 1px 1px 2px black;
    text-decoration: none;
	text-align: right;
}

.Soon {
    font-family: 'Proza Libre', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 16px;
    padding-top: 4px;
    color: white;
}

#ResourcesJump {
	transform: translateY(-60px);
}

#ResourcesSection {
	position: relative;
	    display: flex;
	    flex-direction: row;
	    flex-wrap: nowrap;
	    width: 100%;
	    z-index: 45;
}

/* #ResourcesSection img {
	display: none;
} */

#ResourcesAside {
	width: 25%;
	min-height: 100vh;
    padding-bottom: 1%;
	margin-left: 0;
}

#ResourcesArticle {
    min-height: 100vh;
	width: 75%;
	background-image: url(Images/DenverBGChihuly.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	padding-top: 60px;
}

#LeftResources {
    width: 80%;
    margin: 0px 10%;
}

#LeftResources ul {
	padding: 30px 40px;
	background-color: rgba(255, 0, 0, .65);
	margin-bottom: 60px;
}

#LeftResources ul li {
	font-size: 4.7vh;
    color: khaki;
    list-style: none;
}

#LeftResources ul li ul {
	padding: 0;
	background-color: transparent;
	margin-bottom: 0;
}

#LeftResources ul li ul li a {
	font-size: 4vh;
	color: white;
	padding-left: 40px;
}

#LeftResources ul li ul li a:hover {
	color: khaki;
}

#BlogJump {
	transform: translateY(-1vh);
}

#TravelBlog {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
	position: relative;
	min-height: 100vh;
	background-color: #333;
	z-index: 100;
}

#TravelBlog img {
    display: none;
}

#TravelBlog aside {
    width: 25%;
	min-height: 100vh;
    margin: 0;
    padding: 150px 1.5% 0;
    background-color: #333;
}

#TravelBlog article {
    width: 75%;
    background-image: url(Images/HongKong.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
}

#KSUJump {
	transform: translateY(0);
}

#ComboBottom {
    display: flex;
    position: relative;
    min-height: 94vh;
    width: 100%;
    z-index: 45;
    background-image: none;
    background-color: #333;
}

#ComboBottom img {
    display: none;
}

#About {
    min-height: 94vh;
    padding: 47vh 2% 0 2.5%;
    margin: 0;
    width: 25%;
}

#KSU {
    width: 75%;
    min-height: 94vh;
    padding-top: 0px;
    background-image: url(Images/ElMoradoPond.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

footer {
    position: relative;
    background-color: #5960d6;
    height: 6vh;
}

footer h3 {
    font-family: 'Proza Libre', sans-serif;
	text-align: center;
    font-weight: 700;
    margin: 0;
    font-size: 3vh;
    padding: 1vh;
	color: khaki;
	text-shadow: 1px 1px 2px black;
}

@media (orientation: portrait) and (min-width: 651px) {

	.row {
		margin-left: -10px;
		margin-right: -10px;
	}

	p {
        font-size: 1.5vh;
        line-height: 1.5;
        letter-spacing: .25px;
    }

    p a {
        font-size: 1.5vh;
        font-weight: 200;
        line-height: 1.5;
    }

	#NavButtonBar .Button {
	    border: .45vh solid transparent;
	}

	#NavButtonBar .Button.Red {
	    border-bottom: .45vh solid #f00;
	}

    #SiteTitle a {
        font-size: 7vw;
    }

    #WhatsNew {
        width: 25%;
        margin: 0;
        min-height: 100vh;
        padding: 24vh 2% 0 2.5%;
    }

    .Gap {
        height: 25vh;
     }

    .GapClear {
        height: 25vh;
    }

    .GapImage {
        height: 25vh;
        background-position: 0;
    }

    #LeftResources ul li ul li a {
        font-size: 3vh;
        color: white;
        margin-left: 40px;
        margin-bottom: 40px;
        display: block;
    }

    #TravelBlog aside {
        padding: 17vh 1.5% 0;
    }

    #About {
        padding: 24vh 2% 0 2.5%;
    }

    footer {
        background-color: #5960d6;
    }

    footer h3 {
        text-align: left;
        margin-left: 25%;
        font-size: 3vh;
        padding: 1vh;
        color: khaki
    }

}

/* ################################################## */

@media (orientation: portrait) and (max-width: 650px) {

	nav.fixed-top {
	    width: 100%;
		height: unset;
	    left:  0;
		background-color: #333;
	}

	.navbar-toggler-right {
	    top: 4.85vw;
	    right: 13px;
	}

	#NavButtonBar .Button.Red {
    border-bottom: .85vh solid transparent;
}

	#NavButtonBar .Button a {
		font-size: 5vw;
		color: red;
    	padding: 7px;
	}

	#Hamburger {
	    display: inline-block;
	    color: white;
	    font-weight: 100;
	    font-size: 25px;
	    padding-top: 5px;
		transform: rotate(90deg);
	}

	#SiteTitle {
	    display: none;
	}

	#SiteTitleBar {
	    margin-right: 0px;
	    padding-left: 4%;
	    padding-top: 1.3%;
	}

	#SiteTitleBar a {
	    display: inline-block;
	    font-family: 'Alice', serif;
	    font-size: 8.5vw;
		line-height: 61px;
	    color: white;
	}

	header {
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    position: relative;
	    width: 100%;
	    height: unset;
	    min-height: 100vh;
	    z-index: 10;
	}

	header img {
	    display: block;
	    width: 100%;
		margin-top: 7vh;
	}

	#WhatsNew, #About {
	    position: relative;
	    width: 100%;
	    height: unset;
	    min-height: unset;
		display: flex;
		flex-direction: column;
		flex: 1 0 auto;
	    margin-left: 0px;
	    padding: 4%;
		background-color: #929544;
	    z-index: 100;
	}

	#WhatsNew p, #TravelBlog p, #ComboBottom p {
	    font-size: 16pt;
	    line-height: 18pt;
	    margin: 0 0 20px 0;
	}

	#WhatsNew p a, #TravelBlog p a, #ComboBottom p a {
		font-size: 16pt;
	    line-height: 18pt;
	}

	.Gap {
	    display: none;
	}

	#GalleryJump {
		transform: translateY(-62px);
	}

	div#BarPhotoGallery {
		    margin-top: 0;
		}

	div .RedBar {
	    display: block;
	    position: relative;
	    background: red;
	    width: 100%;
	    font-family: 'Proza Libre', sans-serif;
	    font-size: 7vw;
	    font-weight: 700;
	    color: khaki;
	    padding-left: 4%;
		padding-top: 7px;
	    z-index: 1000;
	}

	#PhotoGallery {
	    background: #333;
	    display: flex;
	    flex-direction: column;
	}

	#PhotoGalleryArticle {
	    padding-top: 30px;
	    padding-bottom: 30px;
	}

	#PhotoGallery .row {
	    margin-left: -7px;
	    margin-right: -7px;
	}

	.PhotoBar {
	    height: 65px;
	    margin-bottom: 30px;
	}

	.PhotoCountry {
		width: 70%;
	    font-size: 8vw;
	    font-weight: 100;
	    line-height: 70px;
	}

	.PhotoGo {
	    font-size: 5vw;
	    line-height: 70px;
	    text-align: left;
	}

	.Soon {
	    font-size: 5vw;
	    line-height: 25px;
	    padding-top: 10px;
	}

	#ResourcesJump {
		transform: translateY(-62px);
	}

	#ResourcesSection {
	    position: relative;
	    margin-top: 0;
	    background-image: none;
	    background-size: unset;
	    background-position: unset;
	    height: unset;
	    overflow: hidden;
	    z-index: 100;
	}

	#ResourcesAside {
	    display: none;
	}

	#ResourcesArticle {
		height: unset;
	    min-height: unset;
	    width: 100%;
	    background-image: url(Images/DenverBGChihuly.jpg);
	    background-repeat: no-repeat;
	    background-size: cover;
	    background-position: top center;
	    padding-top: 60px;
	    padding-bottom: calc(60px - 5%);
	}

	#LeftResources {
	    float: none;
	    width: 80%;
	    margin: 5% 10%;
	}

	#LeftResources ul li {
	    font-size: 9vw;
		font-weight: 600;
	}

	#LeftResources ul li ul li a {
		font-family: 'Proza Libre', sans-serif;
	    font-size: 6vw;
		line-height: 8vw;
	    color: white;
		padding-left: 10px;
	    margin-left: 10px;
	    margin-bottom: 30px;
	    display: block;
	}

	#BlogJump {
		transform: translateY(-62px);
	}

	#TravelBlog {
	    position: relative;
	    width: 100%;
	    height: unset;
	    min-height: unset;
	    background-image: none;
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	}

	#TravelBlog img {
	    display: block;
	    position: relative;
	    margin-top: 0;
	    width: 100%;
	}

	#TravelBlog aside {
	    position: relative;
	    float: none;
	    width: 100%;
	    height: unset;
	    min-height: unset;
	    margin-left: 0px;
	    padding: 5%;
	    background-color: #929544;
	}

	#TravelBlog article {
	    display: none;
	}

	#KSUJump {
		transform: translateY(-61px);
	}

	#ComboBottom {
		display: flex;
		flex-direction: column;
	    position: relative;
	    height: unset;
	    min-height: unset;
	    width: 100%;
	    background-image: none;
	    width: 100%;
	}

	#ComboBottom img {
	    display: block;
	    width: 100%;
	}

	#ComboBottom h3 {
		/* font-size: 33px; */
		display: none;
	}

	#KSU {
		display: none;
	}

	footer {
	    position: relative;
	    background-color: #5960d6;
	    height: 50px;
	    width: 100%;
	    margin-top: 0;
	    padding-top: 0px;
	}

	footer h3 {
	    text-align: center;
	    margin: 0;
	    font-size: 4vw;
	    padding: 10px;
	    color: khaki;
	}

}