/*
Theme Name: Pat's Theme
Description: Custom theme developed for Pat Moore
Author: Ben
Version: 1.0

License:
License URI:

*/

/** FONT FACES **/
@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.svg#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* General styling */

.wrapper {
    min-width: 360px;
	min-height: 100%;
    width: 100%;
    display: block;
    justify-content: flex-start;
}

#navigation {
	ul {
		display: flex;
        justify-content: center;
		/* gap: 20px; */

		li {
			list-style: none;

			a {
				color: #364b56;
				text-decoration: none;
				font-size: 20px;
				text-decoration: underline;

				&:hover {
					text-decoration: none;
				}
			}
		}
	}
}

body {
  background: #fff;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p, a, li {
 font-family: sans-serif;
}

h1, h2 {
	margin: 0;
}

h1 {
	font-size: 64px;
}

p {
	font-size: 20px;
}

.outline {
  color: #dae4e3;
  background-color: #dae4e3;
  text-shadow: -1px -1px 0 #364b56, 1px -1px 0 #364b56, -1px 1px 0 #364b56, 1px 1px 0 #364b56;
}

.wrapper {
	display: flex;
	background-color: #364b56;
}

/* Homepage Style */
.wrapper-inner {
	max-width: 1600px;
	height: 100%;
	

	.inner-container {
		min-height: 600px;
		padding: 2rem;
		display: flex;
		justify-content: space-between;
		background-image: url(../pat-theme/images/weather-background-4.jpg);
    	background-size: cover;

		.left, .right {
			padding: 0rem 1rem 1rem 1rem;
		}

		.left {
			height: fit-content;
			display: flex;
			align-items: center;
			flex-basis: 50%;
			color: #364b56;

			.description {
				margin-left: 60px;
			}

			p {
				margin-top: -10px;
				margin-left: 30px;
				margin-bottom: 0;
				border-radius: 30px;
				padding: 1rem;
			}

			a {
				color: #fff;
				margin-left: 60px;
			}

			.button {
				width: fit-content;
				background-color: #fff;
				border: 2px solid #364b56;
				padding: 1rem 2rem;
				margin-bottom: 2rem;

				a {
					font-size: 24px;
					color: #364b56;
					text-decoration: none;
					margin-left: 0;
					text-decoration: underline;
				}

				a:hover {
					text-decoration: none;
				}
			}
		}

		.right {
			background-image: url(../pat-theme/images/cover-2-3.jpg);
            background-size: contain;
            background-repeat: no-repeat;
            flex-basis: 30%;
            display: flex;
            align-items: flex-end;
            justify-content: center;
		}
	}

	.slider {
		background-color: #364b56;
	

		#metaslider-id-7 {
			display: flex;
			background: url(../pat-theme/images/layered-peaks-red-white.svg);
			background-size: cover;
            background-repeat: no-repeat;

			li.ms-image {
				display: flex!important;
				flex-direction: row-reverse;
				justify-content: space-around;
				padding: 2rem 0;
			}

			.slides {
				.caption-wrap {
					position: relative;
					width: 50%;
					background-color: transparent;
					color: #364b56;

					.caption {
						text-align: left;

						div {
							font-size: 18px;
							font-weight: bold;
						}
					}
				}

				img {
					width: 40%;
				}
			}

			.flex-control-nav {

				li a {
					width: 100px;
					height: 15px;
				}
			
			}
		}

		.text {
			flex-basis: 50%;
			margin: 1rem 0;
			color: #364b56;

			p {
				font-family: serif;
			}
		}

		.image {
			background-image: url(../pat-theme/images/cover-2-3.jpg);
			background-size: contain;
            background-repeat: no-repeat;
			background-position: center;
            flex-basis: 50%;
			margin: 1rem 0;
		}
	}

	.slider-buttons {
		text-align: center;
		margin-bottom: 3rem;

		a {
			color: #364b56;
			padding: 1rem 2rem;
			background-color: #fff;
		}
	} 
}

/* Inner page styling */

.wrapper-inner-color {
	max-width: 1420px;
	max-height: 830px;
	height: 100%;
	padding: 1rem 0rem 4rem 0;

	.wp-block-columns-is-layout-flex {
		display: flex;
		background-color: #4A6675;
		padding: 2rem 1rem 2rem 2rem;
		color: #fff;
	}
}