@font-face {
    font-family: 'myGaramondItalic';
    src: url('../fonts/GaramondPremrPro-SmbdItCapt.woff2') format('woff2'),
        url('../fonts/GaramondPremrPro-SmbdItCapt.woff') format('woff');
        font-weight: normal;
        font-style: normal;
}

@font-face {
    font-family: 'myGaramondBold';
    src: url('../fonts/GaramondPremrPro-BdCapt.woff2') format('woff2'),
        url('../fonts/GaramondPremrPro-BdCapt.woff') format('woff');
    font-weight: normal;
        font-style: normal;
}

@font-face {
    font-family: 'mySegoeUIBold';
    src: url('../fonts/SegoeUI-Bold.woff2') format('woff2'),
        url('../fonts/SegoeUI-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mySegoeUISemiBold';
    src: url('../fonts/SegoeUI-Semibold.woff2') format('woff2'),
        url('../fonts/SegoeUI-Semibold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mySegoeUIRegular';
    src: url('../fonts/SegoeUI.woff2') format('woff2'),
        url('../fonts/SegoeUI.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

.logoSVG{
	background-image: url('../images/AFES_Logo_small.svg');
	height: 50px;
	width: 200px;
	display: block;
	background-repeat: no-repeat;
	z-index: 1;
}

.logoSVGFull{
	background-image: url('../images/AFES_Logo_large.svg');
	height: 201px;
	width: 189px;
	display: block;
	background-repeat: no-repeat;
	margin-right: 105px;
	z-index: 1;
}

body{
	background-color: #F7f3e3;
	color: #1A140f;
}

.container{
    margin-right: auto;
    margin-left: auto;
    width: 978px;
}

nav{
	font-family: 'mySegoeUIBold';
	font-size: 18px;
	text-transform: uppercase;
	margin-left: auto;
	z-index: 1;
}

.paddingForNav{
	padding-top: 60px;
}

a{
	margin-right: 20px;
	letter-spacing: 1px;
	text-decoration: none;
	color: #F7f3e3;
	font-family: mySegoeUIBold;
	text-transform: uppercase;

}

.hoverEffect{
	background-image: linear-gradient(#6f1a07, #6f1a07);
    background-repeat: no-repeat;
    background-position: 0 50%;
    background-size: 0% 2px;
    transition: background-size 0.3s ease;
}

.hoverEffect:hover{
    background-size: 100% 2px;
}

a:nth-of-type(3){
	margin-right: 0;
}

.heroButton{
	height: 40px;
	padding: 15px;
	outline: 2px solid #F7f3e3;
	color: #F7f3e3;
	margin-right: 0;
	border-radius: 5px;
	transition: background-color 1s;
	cursor: pointer;
}

.heroButton:hover{
	background-color: #6f1a07;
}

.button{
	height: 40px;
	padding: 15px;
	outline: 2px solid #1A140f;
	color: #1A140f;
	border-radius: 5px;
	margin-right: 0;
	transition: background-color 1s;
	cursor: pointer;
}

.button:hover{
	background-color: #a8763e;
}

h1{
	font-family: 'mySegoeUIBold';
	font-size: 64px;
	text-transform: uppercase;
	margin-bottom: 30px;
	width: 622px;
}

h2{
	font-family: 'myGaramondBold';
	font-size: 78px;
	width: 475px;
	margin-bottom: 30px;
}

h3{
	font-family: 'myGaramondItalic';
    font-size: 39px;
    margin-bottom: 30px;
    color: #6f1a07;
}

.heroSection h3{
	margin-bottom: 60px;
}

p{
	font-family: 'mySegoeUIRegular';
	font-size: 18px;
	margin-bottom: 60px;
	line-height: 22px;
}

.smallType{
	font-size: 13px;
}

.flexParent{
	display: flex;

}


.virticalContainer:nth-of-type(3){
	margin-right: 0;
} /*fix*/

.width530{
	width: 530px;
}

.width345{
	width: 345px;
	margin-right: 20px;
}

.width345:nth-of-type(3n){
	margin-right: 0px;
}

.heroSection1 {
	position: relative;            /* anchor for overlay */
	height: 100vh;
	color: #F7f3e3;
	background-image: url('../images/homeCover.webp');
	background-size: cover;
	background-position: center;
	margin-bottom: 160px;
	background-attachment: fixed;
}

.heroSection {
  position: absolute;
  inset: 0;                       /* top/right/bottom/left: 0 */
  background-color: rgba(168, 118, 62, 0.75); /* proper opacity */
  mix-blend-mode: multiply;

}

.heroSection2{
	position: relative;            /* anchor for overlay */
	height: 100vh;
	color: #F7f3e3;
	background-image: url('../images/servicesCover.webp');
	background-size: cover;
	background-position: center;
	margin-bottom: 160px;
	background-attachment: fixed;
}

.heroSection3{
	position: relative;            /* anchor for overlay */
	height: 100vh;
	color: #F7f3e3;
	background-image: url('../images/aboutCover.webp');
	background-size: cover;
	background-position: center;
	margin-bottom: 160px;
	background-attachment: fixed;
}

.heroSection4{
	position: relative;            /* anchor for overlay */
	height: 100vh;
	color: #F7f3e3;
	background-image: url('../images/galleryCover.webp');
	background-size: cover;
	background-position: center;
	margin-bottom: 160px;
	background-attachment: fixed;
}

.heroSectionText{
	position: absolute;
	bottom: 90px;
	/*left: 195px;*/

}

.heroSectionText h3{
	color: #F7f3e3;
	margin-bottom: 60px;
}

footer{
	padding-top: 60px;
	/*padding-bottom: 60px;*/
	background-color: #6f1a07;
	color: #F7f3e3;
	box-shadow: 1px 1px 5px 0px rgba(168, 119, 62, 0.25);
}

footer p{
	font-family: mySegoeUISemiBold;
}

footer h3{
	color: #F7f3e3;
}

.facebookLogo{
	background-image: url('../images/facebookLogo.svg');
	height: 20px;
	width: 20px;
	display: block;
}

.img{
	height: 530px;
	width: 530px;
	margin-bottom: 160px;

	display: block;
	box-shadow: 1px 1px 5px 0px rgba(168, 119, 62, 0.25);
	background-repeat: no-repeat;
	background-size: cover;
}

.img345{
	height: 345px;
	width: 100%;
	margin-bottom: 30px;
	background-color: #ccc;
	display: block;
	box-shadow: 1px 1px 5px 0px rgba(168, 119, 62, 0.25);
	background-repeat: no-repeat;
	background-size: cover;
}

.one{
	margin-right: 20px;
	background-image: url('../images/servicesHome.webp');
}

.two{
	margin-left: 20px;
	background-image: url('../images/galleryHome.webp');
}

.three{
	height: 585px;
	margin-right: 20px;
	background-image: url('../images/ourMission.webp');
	background-repeat: no-repeat;
}

.four{
	margin-left: 20px;
	background-image: url('../images/contactUs.webp');
	background-repeat: no-repeat;
}

.marginBottom{
	margin-bottom: 120px;
}

.five{
	background-image: url('../images/newHorse.webp');
}

.six{
	background-image: url('../images/recondition.webp');
}

.seven{
	background-image: url('../images/ridingTips.webp');
}

.eight{
	background-image: url('../images/basicTrim.webp');
}

.nine {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.nine .img345 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* image 1 */
.nine .img1 {
  background-image: url("../images/hoofRepair2.webp");
}

/* image 2 */
.nine .img2 {
  background-image: url("../images/hoofRepair1.webp");
  animation: fade 8s infinite;
}

@keyframes fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  50%  { opacity: 1; }
  65%  { opacity: 0; }
  100% { opacity: 0; }
}

.ten{
	position: relative;
  	width: 100%;
  	overflow: hidden;
}

.ten .img345 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* image 1 */
.ten .img5 {
  background-image: url("../images/stock2.webp");
}

/* image 2 */
.ten .img6 {
  background-image: url("../images/stock1.webp");
  animation: fade 8s infinite;
}

.eleven{
  position: relative;
  width: 100%;
  overflow: hidden;
}

.eleven .img345 {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

/* image 1 */
.eleven .img3 {
  background-image: url("../images/basicShoe2.webp");
}

/* image 2 */
.eleven .img4 {
  background-image: url("../images/basicShoe1.webp");
  animation: fade 8s infinite;
}


.twelve{
	background-image: url('../images/shoeswithClips.webp');
	
}

.thirteen{
	background-image: url('../images/shoewithPad.webp');

}

.fourteen{
	background-image: url('../images/correctiveShoewithWedge.webp');

}

.fifteen{
	background-image: url('../images/glueShoe.webp');

}