/* ==========================================================================
   Base styles
   ========================================================================== */

html {
    color: black;
    font-size: 1em;
    line-height: 1.4;
    background: white;
}

::-moz-selection {
    background: #94b8fc;
    text-shadow: none;
}

::selection {
    background: #94b8fc;
    text-shadow: none;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}

/* ==========================================================================
   Overall
   ========================================================================== */

nav, main, #tours, #bookfeature, #resources {
	max-width: 1120px;
	margin: 0 auto;
}

nav {
	font-family: 'skolar-sans-latin';
	text-align: center;
}

nav h1 {
	line-height: 1;
	font-size: 2.7em;
	display: inline-block;
	font-weight: 500;
}

nav a {
	text-decoration: none;
	color: black;
	line-height: 1.1;
	transition: border-bottom-color 0.4s linear, color 0.4s linear;
	border-bottom: 3px solid;
	display: inline-block;
}

nav span:nth-child(1) a {
	color: black;
	border-bottom-color: #309bdb;
}

nav span:nth-child(1) a:hover {
	color: #205edb;
	border-bottom-color: #205edb;
}

nav span:nth-child(1) a:active, nav span:nth-child(1) a.active {
	color: #123edb;
	border-bottom-color: #123edb;
}

nav span:nth-child(2) a {
	color: black;
	border-bottom-color: #12cb79;
}

nav span:nth-child(2) a:hover {
	color: #25c05e;
	border-bottom-color: #25c05e;
}

nav span:nth-child(2) a:active, nav span:nth-child(2) a.active {
	color: #3aac53;
	border-bottom-color: #3aac53;
}

nav span:nth-child(3) a {
	color: black;
	border-bottom-color: #ebb82d;
}

nav span:nth-child(3) a:hover {
	color: #dfab36;
	border-bottom-color: #dfab36;
}

nav span:nth-child(3) a:active, nav span:nth-child(3) a.active {
	color: #ce8529;
	border-bottom-color: #ce8529;
}

nav span:nth-child(4) a {
	color: black;
	border-bottom-color: #f63c5a;
}

nav span:nth-child(4) a:hover {
	color: #dc4558;
	border-bottom-color: #dc4558;
}

nav span:nth-child(4) a:active, nav span:nth-child(4) a.active {
	color: #c52631;
	border-bottom-color: #c52631;
}

main, #tours, #resources {
	padding: 0 20px;
}

main p, #tours, #bookfeature, #resources {
	font-family: 'skolar-latin', Georgia, serif;
}

main p {
	text-align: justify;
}

main a {
	text-decoration: none;
	color: black;
	line-height: 1.1;
	transition: border-bottom-color 0.4s linear, color 0.4s linear;
	border-bottom: 2px solid;
	border-bottom-color: black;
	display: inline-block;
}

main a:hover {
	color: #205edb;
	border-bottom-color: #205edb;
}

main a:active {
	color: #123edb;
	border-bottom-color: #123edb;
}

aside {
	text-align: center;
}

aside img {
	width: 500px;
}


/* ==========================================================================
   HOME
   ========================================================================== */

main#home {

}

#home p:nth-child(1) {
	font-size: 20px;
	text-align: center;
}

#tours ul {
	column-count: 3;
	list-style: none;
	padding: 0;
	column-rule: 1px solid #ccc;
	column-gap: 25px;
}

#tours li {
	margin-bottom: 15px;
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
}

#tours li span {
	display: inline-block;
}

#tours li span:nth-child(1) {
	font-weight: bold;
}

#tours li span:nth-child(2) {
	padding-bottom: 5px;
}

#tours li span:nth-child(2), #tours li span:nth-child(3), #tours li span:nth-child(4) {
	padding-left: 10px;
}

#tours li span:nth-child(3), #tours li span:nth-child(4) {
	font-style: italic;
}

#tours .strike {
	text-decoration: line-through;
	color: #e13434;
}

a {
	text-decoration: underline;
	color: #1856d2;
	line-height: 1.1;
	transition: color 0.4s linear;
}

a:hover {
	color: #123edb;
}

#bookfeature {
	padding: 0 20px;
}

#syf {
	background: url(../img/syftear.png) no-repeat;
	background-size: 550px; 
	padding: 0px 30px 0px 30px;
	width: 490px;
	height: 400px;
	transform: rotate(-2deg);
}

#endling {
	background: url(../img/endlingtear.png) no-repeat;
	background-size: 550px; 
	padding: 15px 30px 0px 40px;
	width: 480px;
	height: 385px;
	transform: rotate(2deg);
}

#bookfeature section:hover {
	transform: rotate(0);
}

#bookfeature section {
	float: left;
	transition: transform 0.2s linear;
}

#bookfeature p {
	margin: 0;
	line-height: 1.4;
}

#bookfeature p:nth-last-child(1) {
	margin:10px 0px 0px 0px;
}

#endling p:nth-child(2), #syf p:nth-child(3) {
	margin-bottom: 10px;
}

#endling p:nth-child(2), #syf p:nth-child(2), #syf p:nth-child(3) {
	font-style: italic;
}

#bookfeature h3 {
	font-family: 'skolar-sans-latin';
	font-size: 30px;
	margin: 20px 0px 5px 0px;
}

#bookfeature h3 a {
	text-decoration: none;
}

#bookfeature img {
	float: left;
	padding-right: 10px;
}

#endling img {
	width: 140px;
}

#syf img {
	width: 190px;
}

#resources em {
	font-weight: bold;
}

h2 {
	font-family: 'skolar-sans-latin';
	font-size: 30px;
	margin: 0;
	text-align: center;
}

/* ==========================================================================
   ABOUT/FAQ
   ========================================================================== */


/* ==========================================================================
   BOOKS
   ========================================================================== */


/* ==========================================================================
   CONTACT/SOCIAL
   ========================================================================== */


/* ==========================================================================
   Helper classes
   ========================================================================== */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media screen and (max-width: 1139px) {
	nav span:nth-child(4) {
		display: block;
	}
	#syf {
		float: right !important;
	}
}

@media screen and (max-width: 670px) {
	nav span {
		display: block;
	}
	nav h1 {
		text-align: left;
	}
	nav {
		text-align: center;
	}
	#endling, #syf {
		float: none !important;
		clear: both !important;
		margin: 0 auto !important;
	}
	#syf {
		padding-top: 5px;
	}
	#tours ul {
		column-count: 2;
	}
}

@media screen and (max-width: 600px) {
	#syf {
		background: none;
		width: calc(100% - 40px);
		transform: rotate(0);
		padding: 0 !important;
		height: auto;
	}

	#endling {
		background: none;
		width: calc(100% - 40px);
		transform: rotate(0);
		padding: 0 !important;
		height: auto;
	}
	#tours ul {
		column-count: 1;
	}
	aside img {
		width: calc(100% - 100px);
	}
	nav h1 {
		font-size: 2.0em;
		padding-left: 5px;
	}
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre {
        white-space: pre-wrap !important;
    }
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}