@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: 16px;
	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');

}

.llc{
	padding-top: 30px;
	padding-bottom: 15px !important;
	font-size: 10px;
	text-align: center;
	margin-bottom: 0px ;
}


/* MOBILE STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width: 767px){

    .container{
        width:87.5%;
    }

    nav{
        font-size:4vw;
        /*text-align:center;*/
        top: 7.25vw;
        right: 7.25vw;
        position: absolute;
        line-height: 7.25vw;
    }

    .paddingForNav{
        padding-top:8vw;
    }

    a{
        margin-right:4vw;
        letter-spacing:.2vw;
    }

    .logoSVG{
        width:45vw;
        height:11vw;
        background-size:contain;
    }

    .logoSVGFull{
        width:40vw;
        height:42vw;
        background-size:contain;
        margin-right:0;
        margin:0 auto 6vw;
    }

    h1{
        width:100%;
        font-size:12vw;
        margin-bottom:5vw;
    }

    h2{
        width:100%;
        font-size:13vw;
        margin-bottom:5vw;
    }

    h3{
        font-size:7vw;
        margin-bottom:5vw;
    }

    .heroSection h3{
        margin-bottom:8vw;
    }

    p{
        font-size:3.75vw;
        line-height:6vw;
        margin-bottom:8vw;
    }

    .smallType{
        font-size:3.5vw;
    }

    .heroButton,
    .button{
        display:inline-block;
        padding:4vw 5vw;
        height:auto;
        font-size:4vw;
    }

    .heroSectionText{
        bottom:12vw;
        width:87.5%;
    }

    .heroSection1,
    .heroSection2,
    .heroSection3,
    .heroSection4{
        background-attachment:scroll;
        margin-bottom:20vw;
    }

    .marginBottom{
        margin-bottom:15vw;
    }

    .llc{
        padding-top:6vw;
        padding-bottom:4vw !important;
        font-size:3vw;
    }

        /* Stack all flex layouts */
    .flexParent{
        display:flex;
        flex-direction:column;
    }

    .width530,
    .width345{
        width:100%;
        margin-right:0;
        margin-left:0;
    }

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

    /* Large Images */
    .img{
        width:100%;
        height:70vw;
        margin-bottom:10vw;
        background-position:center;
        background-size:cover;
    }

    /* Small Images */
    .img345{
        width:100%;
        height:70vw;
        margin-bottom:6vw;
        background-position:center;
        background-size:cover;
    }

    /* Remove desktop spacing */
    .one,
    .two,
    .three,
    .four{
        margin-left:0;
        margin-right:0;
    }

    /* Keep the taller image slightly taller */
    .three{
        height:80vw;
    }

    /* Animated image containers */
    .nine,
    .ten,
    .eleven{
        width:100%;
        height:70vw;
        margin-bottom:6vw;
    }

    .nine .img345,
    .ten .img345,
    .eleven .img345{
        height:100%;
    }

        /* Hero Sections */
    .heroSection1,
    .heroSection2,
    .heroSection3,
    .heroSection4{

        height:100svh;
        min-height:600px;
        background-position:center;
        background-size:cover;
        margin-bottom:15vw;
    }

    .heroSection1{
    	background-position: 64% center !important;
    }


    .heroSectionText{
        position:absolute;
        bottom:10vw;
        left:6.25%;
        width:87.5%;
    }


    .heroSectionText h1{
        width:100%;
    }


    /* Footer */
    footer{
        padding-top:10vw;
        /*padding-bottom:5vw;*/
        /*height: 100vh;*/
    }


    footer p{
        font-size:3.75vw;
        line-height:6vw;
    }

    .smallType{
    	font-size:2vw;
    }


    footer h3{
        font-size:7vw;
    }

    .logoSVGFull{
    	margin-bottom: 15vw;
    }


    .facebookLogo{
        width:5vw;
        height:5vw;
        background-size:contain;
        margin-bottom: 2.5vw;
    }


    .hoverEffect{
    	text-align: right;
    	margin-right: 0;
    	margin-bottom: 2vw;

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

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

	.virticalContainer.width530{
		margin-bottom: 30vw;
	}

	.virticalContainer.width530{
        display:flex;
        flex-direction:column;
    }

    /*.order .virticalContainer{
        order:1;
    }

    .order .four {
        order:2;
    }

	.order .two {
        order:2;
    }*/

    .order{
	    flex-direction: column-reverse;
	}

    /*.virticalContainer.width530 p{
        order:3;
    }*/

    .virticalContainer.width530 .button{
        /*order:4;*/
        width:auto;
        align-self:flex-start;
    }


}


/* TABLET STYLES ////////////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (min-width:768px) and (max-width:1024px){

    .container{
        width:93.75%;
    }

    /*nav{
        font-size:2vw;
    }

    .paddingForNav{
        padding-top:5vw;
    }

    a{
        margin-right:2vw;
    }

    .logoSVG{
        width:24vw;
        height:6vw;
        background-size:contain;
    }

    .logoSVGFull{
        width:18vw;
        height:20vw;
        background-size:contain;
        margin-right:6vw;
    }

    h1{
        width:80%;
        font-size:7vw;
        margin-bottom:3vw;
    }

    h2{
        width:65%;
        font-size:8vw;
        margin-bottom:3vw;
    }

    h3{
        font-size:4vw;
        margin-bottom:3vw;
    }

    .heroSection h3{
        margin-bottom:5vw;
    }

    p{
        font-size:2vw;
        line-height:3vw;
        margin-bottom:5vw;
    }

    .smallType{
        font-size:1.6vw;
    }

    .heroButton,
    .button{
        padding:2vw 2.5vw;
        height:auto;
        font-size:2vw;
    }

    .heroSectionText{
        bottom:8vw;
    }

    .heroSection1,
    .heroSection2,
    .heroSection3,
    .heroSection4{
        background-attachment:scroll;
        margin-bottom:12vw;
    }

    .marginBottom{
        margin-bottom:10vw;
    }

    .llc{
        font-size:1.5vw;
    }

    .flexParent{
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
    }

    .width530{
        width:100%;
        margin-bottom:6vw;
    }

    .width345{
        width:48%;
        margin-right:0;
        margin-bottom:4vw;
    }

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

    .img{
        width:100%;
        height:55vw;
        margin-bottom:8vw;
        background-position:center;
        background-size:cover;
    }

    .img345{
        width:100%;
        height:45vw;
        margin-bottom:3vw;
        background-position:center;
        background-size:cover;
    }

    /*.one,
    .two,
    .three,
    .four{
        margin-left:0;
        margin-right:0;
    }

    .three{
        height:60vw;
    }

    .nine,
    .ten,
    .eleven{
        width:100%;
        height:45vw;
        margin-bottom:4vw;
    }

    .nine .img345,
    .ten .img345,
    .eleven .img345{
        height:100%;
    }

    /* Hero Sections 
    .heroSection1,
    .heroSection2,
    .heroSection3,
    .heroSection4{

        height:90vh;
        background-position:center;
        background-size:cover;
        margin-bottom:10vw;
    }


    .heroSectionText{
        bottom:7vw;
        left:3.125%;
        width:93.75%;
    }


    /* Footer */
   /* footer{
        padding-top:7vw;
        padding-bottom:4vw;
    }


    footer p{
        font-size:2vw;
        line-height:3vw;
    }


    footer h3{
        font-size:4vw;
    }


    .facebookLogo{
        width:3vw;
        height:3vw;
        background-size:contain;
    }*/
}