/* beaubearsoutfitters style */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Open+Sans+Condensed&family=Oswald&family=Roboto&display=swap');

* {
	margin:0;
	padding:0;
/*	box-sizing:border-box;*/
}

html, body {
	height:100%;
	background:#fff;
	font-family:'Open Sans', sans-serif;
	font-size:18px;
	font-weight:normal;
	color:#000;
	margin:0;
	padding:0;
}

.home-title {
	font-family:'Oswald', sans-serif;
	font-size:40px;
	font-weight:bold;
	color:#74350a;
	margin:0;
	padding:0;
	text-align:center;
	letter-spacing:1px;
}

hr.fade {
    background-image:linear-gradient(90deg, #814f50, transparent);
    border:0;
    height:2px;
}

a:link {
	text-decoration:none;
}
a:visited {
	text-decoration:none;
}
a:hover {
	text-decoration:underline;
}

ul li {
	list-style-position:inside;
	list-style-type:disc;
}

img.photo {
	width:auto;
	height:auto;
	background-color:#d6d1ce;
	padding:10px;
/*	border:4px solid #e6e2e0;*/
	-pie-box-shadow:none;
	-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow:1px 1px 5px -1px rgba(0, 0, 0, 0.1);
	box-shadow:1px 1px 5px rgba(0, 0, 0, 0.1);
	vertical-align:top;
	margin:7px 0 7px 10px;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes fade-in {
	from {opacity:0.1;}
	to {opacity:1.0;}
}

/* Standard syntax */
@keyframes fade-in {
	from {opacity:0.1;}
	to {opacity:1.0;}
}


/* BANNER */
#mainbanner {
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	align-self:center;
	background-image:url("/images/banners/topbanner.jpg");
	background-color:#eee;
	min-height:100vh;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-attachment:scroll;
	background-position:top center;
	-webkit-animation:fade-in 2s;
	animation:fade-in 2s;
	z-index:-1;
}


/* BOUNCE ARROW */
.arrow-down{
	width:60px;
	height:40px;
	margin:0;
	position:absolute;
	left:49%;
	bottom:0px;
	-webkit-animation: arrow 0.5s 1s infinite ease-out alternate; 
}
.arrow-down:hover{
	-webkit-animation-play-state: paused;
}
.left{
	position:absolute;
	height:10px;
	width:40px;
	background:#e9e8ef;
	-webkit-transform:rotate(240deg);
	top:10px;
	left:10px;
	-webkit-border-radius:4px;
	-webkit-transform-origin:5px 50%;
	-webkit-animation: leftArrow 0.5s 1s infinite ease-out alternate;
}
.right{
	position:absolute;
	height:10px;
	width:40px;
	background:#e9e8ef;
	-webkit-transform:rotate(-60deg);
	top:10px;
	left:10px;
	-webkit-border-radius:4px;
	-webkit-transform-origin:5px 50%;
	-webkit-animation: rightArrow 0.5s 1s infinite ease-out alternate;
}


/* HEADER */
#header-container {
	position:fixed;
	width:100%;
	height:100px;
	top:0;
	background-color:rgba(191,220,219,0.9);
	margin:0;
	padding:5px 0;
	-webkit-animation:fade-in 2s;
	animation:fade-in 2s;
	z-index:3;
}
#header-container.shrink {
	position:fixed;
	width:100%;
	height:100px;
	top:0;
	background-color:#bfdcdb;
	margin:0;
	padding:5px 0;
	-webkit-animation:fade-in 2s;
	animation:fade-in 2s;
	z-index:3;
}

#header {
	width:70%;
	height:auto;
	margin:0 auto;
	padding:0;
}

#header-nav {
	float:left;
	width:65%;
	height:auto;
	margin:5px 0 0 0;
	padding:0;
}

#nav {
	margin:0;
	padding:34px 0 0 0;
    -webkit-transition:height 0.5s;
    -moz-transition:height 0.5s;
    -ms-transition:height 0.5s;
    -o-transition:height 0.5s;
    transition:height 0.5s;
}
#nav ul {
	width:100%;
    list-style:none;
	margin:0;
	padding:0;
	font-family:'Oswald',sans-serif;
	font-size:22px;
	font-weight:normal;
	letter-spacing:1px;
	text-align:center;
}
#nav li {
	display:inline-block;
	margin:0 25px;
	padding:0;
}
#nav ul li a,
#nav ul li a:after,
#nav ul li a:before {
	transition:all .5s;
}
#nav ul li a {
	position:relative;
	font-weight:600;
	color:#74350a;
	letter-spacing:1px;
	text-decoration:none;
	padding:0 0 5px 0;
	margin:0;
}
#nav ul li a:after {
	position:absolute;
	bottom:-2px;
	left:0;
	right:0;
	margin:auto;
	width:0%;
	content:'.';
	color:transparent;
	background:#964b2b;
	height:2px;
}
#nav ul li a:hover {
	color:#74350a;
}
#nav ul li a:hover:after {
	width:100%;
}
#nav .highlight {
	color:#be1e2d;
	border-bottom:2px solid #be1e2d;
}
#nav .highlight:hover {
	color:#be1e2d;
	border-bottom:2px solid #be1e2d;
}


/* RESPONSIVE HEADER */
#responsive-logo {
	display:none;
	position:fixed;
	width:100%;
	height:110px;
	top:0;
	background:#d6d1ce;
	text-align:center;
	z-index:99;
	margin:0;
	padding:5px 0;
}
#responsive-logo img {
	width:245px;
	height:100px;
	margin:0;
	padding:0;
}

#responsive-menu {
	display:none;
	position:fixed;
	width:100%;
	height:auto;
	top:110px;
	background:#bfdcdb;
	padding:10px 0;
	margin:0;
	text-align:center;
	color:#964b2b;
	z-index:99;
	border-bottom:1px solid #7f7d7e;
}
#responsive-menu ul {
	width:100%;
    list-style:none;
	font-family:'Oswald',sans-serif;
	font-size:22px;
	font-weight:600;
	color:#964b2b;
	letter-spacing:1px;
	text-align:center;
}
#responsive-menu li {
	display:inline-block;
	margin:0 25px;
	padding:0;
}

#responsive-menu a {
	text-decoration:none;
	color:#964b2b;
}
#responsive-menu a:hover {
	text-decoration:none;
	color:#be1e2d;
}

#responsive-menu a.highlight {
	text-decoration:none;
	color:#be1e2d;
}
#responsive-menu a.highlight:hover {
	text-decoration:none;
	color:#be1e2d;
}


/* WELCOME */
#welcome-container {
	clear:both;
	width:100%;
	background:#d6d1ce;
	margin:0;
	padding:40px 0;
	overflow:hidden;
/*	border-bottom:1px solid #ccc;*/
}
#welcome {
	width:70%;
	font-family:'Open Sans', sans-serif;
	font-size:22px;
	font-weight:500;
	margin:0 auto;
	padding:0;
	text-align:left;
}


#page-error {
	width:96%;
	font-family:'open sans', sans-serif;
	font-size:22px;
	font-weight:400;
    color:#333;
	margin:0 auto;
	padding:0 2%;
	text-align:center;
}


/* FOOTER */
#footer-container {
	background:#193126;
	width:100%;
	margin:0;
	padding:0;
}
#footer {
	overflow:hidden;
	width:70%;
	margin:auto;
	padding:30px 0;
	font-size:18px;
	font-weight:normal;
	color:#eee;
	text-align:center;
}


/* CREDITS */
#credits-container {
	clear:both;
	width:100%;
	margin:0;
	padding:0;
}
#credits {
	overflow:hidden;
	width:70%;
	margin:auto;
	padding:30px 0;
	font-size:18px;
	font-weight:normal;
	color:#fff;
	text-align:center;
}
#credits a {
	color:#eee;
	margin:0;
	padding:0;
}
#credits a:hover {
	text-decoration:underline;
	color:#00a146;
}
#credits a.credits-highlight {
	text-decoration:none;
	color:#00a146;
}
#credits h1 {
	font-size:20px;
	font-weight:normal;
	color:#c3e5de;
	margin:0;
	padding:0;
	text-align:center;
}
#credits img {
	width:250px;
	height:110px;
	padding:0;
	margin:0;
}


@-webkit-keyframes arrow{
  0% {
    bottom:0px;
  }
  100%{
    bottom:40px;
  }
}

@-webkit-keyframes leftArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(225deg);
  }
}

@-webkit-keyframes rightArrow{
  0% {
  }
  100%{
    -webkit-transform:rotate(-45deg);
  }
}