/* 1175ish is the breakpoint stick w/ vw minmax, replace w/ px when necessary clean up later */ /***** BEGIN RESET *****/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { background: transparent; border: 0; margin: 0; padding: 0; } html, body { overflow-x: hidden; } * { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently                                    supported by Chrome, Edge, Opera and Firefox */ } ol, ul { list-style: none; } table { border-collapse: collapse; width: 100%; } td { vertical-align: top; } /* Make HTML 5 elements display block-level for consistent styling */ header, nav, article, footer, address { display: block; } /***** END RESET *****/ ::-moz-selection { background: var(--neutral2); text-shadow: none; } ::selection { background: var(--neutral2); text-shadow: none; } /* Clearfix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /*-------- BODY STYLES --------*/ .container.cf { margin: 135px auto !important; margin: 7.03125vw auto !important } body *:not(h1 *):not(h2 *):not(h3 *):not(nav a) { font-family: "adelle-sans", sans-serif; ; } .headersurround { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5625vw; } .headersurround img { width: 160px; } .rightfinancing { padding-left: 150px; box-sizing: border-box; height: 890px; } .rightfinancing img { object-fit: cover; height: 100%; width: 100%; } main {} h1, h2, h3, h4, h5, h6 { font-family: 'Mohave', sans-serif; } h1:not(.container.cf *) { text-shadow: 0px 0px 33px #fff; text-shadow: 0px 0px 1.71875vw #fff; /* text-shadow: 0px 0px 1.71875vw #fff; */ text-transform: uppercase; font-family: 'Mohave', sans-serif; font-weight: 500; font-size: 72px; font-size: max(42px, 3.75vw); line-height: 79px; line-height: max(46px, 4.11458vw); text-align: center; color: #000; text-shadow: 0px 0px 25px #fff; text-shadow: 0px 0px 1.30208vw #fff; margin-top: 0px; } .contactUsPage h1.heading-sm.offwhite { text-align: left; } .headersurround h1.heading-sm.offwhite { margin-bottom: 0; } h1.heading-sm.offwhite {} h2:not(.container.cf h2) { text-transform: uppercase; font-family: 'Mohave', sans-serif; font-weight: normal; font-size: 64px; font-size: max(37px, 3.33333vw); line-height: 78px; line-height: max(46px, 4.0625vw); color: #434343; /* text-align: center; */ } .flexfooter h2.separateAreas { color: #717171 !important; line-height: 60px !important; line-height: max(35px, 3.125vw) !important; } .whiteArea h2:not(.container.cf *) { text-align: center; } .family h2:not(.container.cf *) { opacity: 0.78; } h3:not(.container.cf *) { text-align: left; font-family: 'Mohave', sans-serif; font-weight: normal; font-size: 55px; font-size: max(32px, 2.86458vw); line-height: 67px; line-height: max(39px, 3.48958vw); text-transform: uppercase; z-index: 2; } .gridbox h3 { color: #fff; position: absolute; bottom: 0; padding-left: 75px; padding-left: 3.90625vw; padding-bottom: 25px; padding-bottom: max(13px, 1.30208vw); padding-right: 30px; } .leftinfo>.gridbox:first-of-type:after, .rightinfo>.gridbox:first-of-type:after { position: absolute; left: 0; content: ''; width: 365px; /* width: 19.01042vw; */ background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='365.044' height='160.358' viewBox='0 0 365.044 160.358'%3E%3Cpath id='Path_1763' data-name='Path 1763' d='M-661,6942.718s205.46-10.973,365.044,160.217H-661Z' transform='translate(661 -6942.576)'/%3E%3C/svg%3E%0A"); height: 160px; height: max(95px, 8.33333vw); bottom: 0; z-index: 0; } p:not(.container.cf *) { font-family: "adelle-sans", sans-serif; font-weight: normal; font-size: 24px; font-size: max(15px, 1.25vw); line-height: 43px; line-height: max(25px, 2.23958vw); color: #434343; } .darkArea p:not(.container.cf *) {} a:link, a:visited, a:active { text-decoration: none; } a:hover { text-decoration: none; } hr { border: var(--neutral2) 1px solid; } /* loader */ #loader-wrapper { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999999 } #loader-wrapper .loader-section { position: fixed; top: 0; width: 100%; bottom: 0; background: #a8d1ff; z-index: 9999999; height: 125vh; } .aboutUsPage #loader-wrapper .loader-section { /* background: #C7C9CB; */ } #loader { position: fixed; height: 125vh; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999999; background: #ffffff; } .aboutUsPage #loader { background: #ffffff; } .loadedUp #loader { -webkit-transform: translateY(-130%); transform: translateY(-130%); -webkit-transition: 1.75s cubic-bezier(.075, .82, .165, 1); transition: 1.75s cubic-bezier(.075, .82, .165, 1) } .loadedUp #loader-wrapper { visibility: hidden; -webkit-transform: translateY(-175%); transform: translateY(-175%); -webkit-transition: 1.45s cubic-bezier(.075, .82, .165, 1); transition: 1.45s cubic-bezier(.075, .82, .165, 1); transition-delay: .55s; } #fadeInStuff { opacity: 0 } .aboutUsPage section#fadeInStuff { opacity: 1; } .contactUsPage section#fadeInStuff { /* display: flex; */ flex-direction: column; justify-content: space-between; } .otherPage #content, .invSurround { background: radial-gradient(farthest-side at bottom right, #5c5c5c, transparent), radial-gradient(farthest-corner at bottom left, #333333, transparent 400px); background: radial-gradient(farthest-side at bottom right, #5c5c5c, transparent), radial-gradient(farthest-corner at bottom left, #333333, transparent 20.83333vw); } .notInvPage .invSurround { background: none; } /* Slider Buttons */ /*-------- HERO STYLES --------*/ .hero.darkArea { height: 1010px; height: max(710px, 52.60417vw); overflow: hidden; } .whiteArea { /* background: white; */ } section.hero.darkArea { /* background: radial-gradient(rgba(67, 67, 67, 0.79) 0%, #000 100%); */ background-size: contain; background-repeat: no-repeat; background-position: center; /* max-height: 91vh; */ } .aboutUsPage section.hero.darkArea { background: none; height: auto !important; } .heroContain { position: relative; z-index: 999; } .contactUsPage .heroContain { border-bottom: .5px solid lightgrey; padding-bottom: 10px; } .contactUsPage footer { border-top: .5px solid lightgrey; /* padding-top: 65px !important; */ } .heroContain, .heroContain * {} .parallax-content { bottom: -2.66667vw; position: relative; } section.hero.darkArea { /* overflow-y: hidden; */ /* overflow-x: hidden; */ /* width:  100vw; */ position: relative; overflow: initial; } .otherPage section.hero.darkArea { background: none; height: auto; z-index: 999999; } .hero .topStuff { z-index: 999; position: relative; } .flexDisplay { display: flex; justify-content: center; position: absolute; width: 100%; bottom: 40px; bottom: 2.08333vw; flex-direction: column; align-items: center; } .separateAreas {} .separateAreas br {} .doublecta { background: transparent; filter: drop-shadow(0px 0px 26px rgba(0, 0, 0, 0.45)); filter: drop-shadow(0px 0px 1.35417vw rgba(0, 0, 0, 0.45)); margin-top: 40px; margin-top: 2.08333vw; display: flex; justify-content: center; transition: all ease .25s; } .financepage .doublecta { justify-content: flex-start; } .doublecta:hover { filter: drop-shadow(0px 0px 0.65417vw rgba(0, 0, 0, 0.45)); } .doublecta .cta { padding: 11px 60px; padding: max(11px, 0.57292vw) max(35px, 2.125vw) max(7px, 0.57292vw); border: 6px solid #000; border: 0.3125vw solid #000; font-family: 'Mohave', sans-serif; font-weight: 500; font-size: 21px; font-size: max(13px, 1.09375vw); letter-spacing: 0.02em; color: black; text-transform: uppercase; transition: all ease .25s; } .aboutArea .doublecta .cta { border-color: #004CE2; background: none !important; color: black !important; } .aboutArea .doublecta .cta:hover { background: #004CE2 !important; border-color: transparent !important; color: white !important; } .aboutArea .doublecta .cta:first-of-type {} .doublecta .cta:first-of-type { background: black; margin-right: -4px; margin-right: min(-2px, -0.20833vw); color: #fff; } .doublecta .cta:first-of-type:hover { background: white; color: black; border-color: white; } .doublecta .cta:last-of-type:hover { background: white; border-color: white; } .hero .primary ul { display: flex; align-items: center; justify-content: space-between; } li.homeException img { width: 216px; width: 11.25vw; width: 300px; width: 15.625vw; } .aboutUsPage li.homeException img, .aboutUsPage .heroContain div.homeException img {} .hero .primary li:last-of-type { display: flex; } .hero .primary li li:last-of-type { display: block; } .hero .primary li#socialIcons:last-of-type a {} .hero .primary a { display: flex; flex-direction: column; overflow-x: hidden; } .hero #heroGraphic { width: 771px; width: 40.15625vw; width: 360px; width: max(240px, 18.75vw); /* opacity: 0; */ filter: drop-shadow(0px 1px 86px rgba(0, 0, 0, 0.1)); margin-bottom: 20px; } .hero .separateAreas { display: flex; justify-content: center; /* position: absolute; */ /* bottom: 36px; */ /* bottom:  1.875vw; */ width: 100%; right: -120px; right: min(-70px, -6.25vw); } .backgroundGrunge { width: 100%; display: flex; justify-content: center; height: 100%; align-items: center; position: absolute; z-index: -1; bottom: -170px; bottom: min(-100px, -8.85417vw); bottom: min(-150.7552px, 11.85417vw); } .backgroundGrunge.diamondone { justify-content: flex-end; right: -180px; right: min(-105px, -9.375vw); } footer .backgroundGrunge { MARGIN-BOTTOM: -180PX !important; } .backgroundGrunge.diamondtwo { justify-content: flex-start; left: -180px; left: min(-105px, -9.375vw); /* margin-bottom: 32px; */ /* margin-bottom: 1.66667vw; */ } .backgroundGrunge.diamondtwo img { transform: scaleX(-1) !important; } .invPage .backgroundGrunge:not(footer .backgroundGrunge) { bottom: 0; justify-content: flex-end; mix-blend-mode: plus-lighter; } .realInvPages .backgroundGrunge:not(footer .backgroundGrunge) { margin-top: min(-158px, -14vw); } footer .backgroundGrunge { justify-content: flex-start; bottom: 20px; bottom: 1.04167vw; align-items: flex-end; } .forSale .backgroundGrunge { bottom: 30px; bottom: 1.5625vw; justify-content: flex-end; align-items: flex-end; } .backgroundGrunge img { width: 930px; width: 48.4375vw; /* margin-top: 0vw; */ } footer img.grungy3 { width: 300px; width: max(275px, 15.625vw); } .forSale .backgroundGrunge img { width: auto; width: 1485px; width: 77.34375vw; } .separateSeparate {} .supraText { text-align: left; opacity: 0.9 !important; font-style: normal; text-shadow: none; } .pets .supraText {} .hero .supraText { margin-left: -75px; margin-left: min(-44px, -3.90625vw); margin-left: min(-40.0391px, 3.90625vw); } .h2Opacity { opacity: 0.68; } .smallerHeader {} .locationText { text-align: left; text-shadow: none; font-style: normal; bottom: 8px; bottom: 0.41667vw; position: relative; } /*--- HEADER STYLES ---------------------*/ /*.notInventory {*/ body { margin: 0; } body, #viewport { overflow-x: hidden; } body#fadeIn>main { margin: 175px 0; margin: 9.11458vw 0; } body.otherPages { background: radial-gradient(farthest-side at bottom right, #727272, transparent), radial-gradient(farthest-corner at bottom left, #333333, transparent 400px) #333333; background: radial-gradient(farthest-side at bottom right, #727272, transparent), radial-gradient(farthest-corner at bottom left, #333333, transparent 20.83333vw) #333333; } /*for demo purposes only*/ .clear { clear: both; } /***** Nav underline ******/ .primary ul li.active a, .primary ul li a:hover { text-decoration: none; background: url(../images/menu_a.jpg) no-repeat center top; } /***** Start of primary nav ******/ #menu-button { display: none; } nav.mobile { display: none; } nav.primary { padding: 0; display: inline-block; margin: 0; width: 100%; position: relative; margin: 35px 0 0; margin: 1.82292vw 0 0; margin: 1.82292vw 0 1.12292vw; padding: 0 130px; padding: 0 6.77083vw; box-sizing: border-box; } .negativeColors div#socialIcons a {} nav.primary ul { margin: 0; padding: 0; } nav.primary ul li { display: inline-block; margin: 0; list-style-type: none; width: auto; } li.active>a:first-child:after, li:hover>a:first-child:after { content: ""; width: 83%; height: 1.89px; height: 0.09844vw; background: #156AF9 !important; transform: translateX(0); transition: all ease 0.2s; } .negativeColors li.active a:after { /* background: #383634 !important; */ } li a:after { transform: translateX(calc(-85% + -25px)); transform: translateX(calc(-85% + -1.30208vw)); transform: translateX(calc(-85% + min(-13.3463px, -1.30208vw))); } li.active>a:first-child:after, li>a:first-child:after { content: ""; width: 83%; height: 1.89px; height: 0.09844vw; background: #c7c9cb00; } li li>a:first-child:after { content: none !important; } .mobile li.active a:after { content: none; } li#socialIcons a:after { content: none; } li.homeException a:after { content: none !important; } li.active a:after, nav.primary ul li a { text-decoration: none; display: block; margin: 0; text-align: center; text-transform: uppercase; padding: 0 12px; padding: 0 0.625vw; font-weight: normal; font-size: 19px; font-size: max(13px, 0.98958vw); color: #000; } nav.primary ul:first-of-type li a { -webkit-transition: .4s ease-in; -moz-transition: .2s ease-in; -o-transition: .2s ease-in; transition: .2s ease-in; } nav.primary ul li a:hover {} nav.primary ul ul li a:hover { background: #f0f0f0; } .negativeColors nav.primary ul ul li a:hover { background: #dddddd !important; } /* Appearance of the sub-level links */ nav.primary ul li li a { padding: 20px 15px; padding: 1.04167vw 0.78125vw; /* background: #181818; */ text-align: left; border-right: none; border-left: none; /* border-bottom: #303030 solid 1px; */ } /* Appearance of the sub-level links on hover */ /* This controls the Primary nav dropdowns for sublinks. Should not have to edit this too muuch */ nav.primary ul ul { display: none !important; position: absolute !important; flex-direction: column; } nav.primary ul ul ul { position: absolute !important; left: 100%; top: 0; } nav.primary ul li:hover>ul { display: block !important; /* z-index: 99999999; */ background: white !important; margin-left: 0.625vw; box-shadow: 0px 0px 33px rgb(0 0 0 / 15%); box-shadow: 0px 0px 1.71875vw rgb(0 0 0 / 15%); } .negativeColors nav.primary ul li:hover>ul { background: hsl(0deg 0% 96%) !important; box-shadow: 0px 0px 33px rgb(0 0 0 / 5%); box-shadow: 0px 0px 1.71875vw rgb(0 0 0 / 5%); z-index: 1; } nav.primary ul li:hover>ul ul { margin-left: 0 !important; } nav.primary ul ul li { float: none; width: 270px; width: 14.0625vw; position: relative; margin: 0; display: block; /* border-bottom: #156AF9 solid 2px; */ } /* Negative Colors */ .negativeColors li:hover a:after { /* background: #383634 !important; */ } .negativeColors li a:after { background: #c7c9cb00 !important; } .negativeColors nav.primary ul li a {} .negativeColors nav.primary ul li a:hover {} @media screen and (max-width: 1000px) { .negativeColors #menu-button a {} } @media only screen and (max-width: 1000px) { .negativeColors .heroContain div#socialIcons a {} } /* End Negative Colors */ /******** End of primary Nav ***************/ @media screen and (max-width: 1000px) { .heroContain .mobileFlex { text-transform: uppercase; } .heroContain .mobileFlex * { color: #000000; } /*==============================  	Mobile Nav Styles			  ================================*/ nav.primary { display: none; } #menu-button { /* width: 100%; */ display: inline-block; position: relative; z-index: 400; /* needs to be lower than nav.mobile, adjust as needed */ /* background: #000; */ /* text-align: right; */ padding-right: 10px; } #menu-button a { text-decoration: none; /* padding: 0 0 0 .8em; */ padding-bottom: 3px; } nav.mobile { display: block; position: fixed; /* top: 0; */ top: -100%; width: 100%; height: 100%; z-index: 99999; /* needs to be higher than #menu-button, adjust as needed */ overflow: auto; overflow: hidden; opacity: 0; } nav.mobile:after { background: #C7C9CB; width: 100%; height: 115vh; /*         content: ""; */ position: absolute; z-index: -1; } /* MENU HEADER SOCIAL MEDIA */ nav.mobile .social-media { position: relative; text-decoration: none; display: inline-block; word-spacing: 13px; padding: 0 0 0 15px; } nav.mobile .social-media a:link, nav.mobile .social-media a:visited { text-decoration: none; } nav.mobile .social-media a:hover, nav.mobile .social-media a:active { text-decoration: underline; } /* MENU HEADER STYLES */ nav.mobile .mobile_top { position: relative; display: block; padding: 0; margin: 50px 0 10px 0; } .actualMenu { position: absolute; width: 100%; height: 120%; background: white; } .actualMenu a:not(ul li li a) { color: black; } .actualMenu ul li li a { color: white; } /* MENU CLOSE 'X' BUTTON */ nav.mobile .menu-toggle { position: absolute; padding: 0px 8px 0px; /* background: #222; */ text-decoration: none; top: -38px; right: 13px; font-size: 40px; } nav.mobile .menu-toggle:hover { /* Menu close button on hoveer */ } /* MENU LIST STYLE */ nav.mobile ul { list-style: none; margin: 0; padding: 0; } nav.mobile ul li { /* border-top: 1px solid #454545; */ /* border-bottom: 1px solid #151515; */ position: relative; } /* FIRST LEVEL */ nav.mobile ul li a { position: relative; display: block; padding: 18px 30px; text-decoration: none; /* border-left: 4px #333 solid; */ /* text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); */ text-align: left; } nav.mobile ul li a:hover, nav.mobile ul li.active a { /* background: rgba(45, 45, 45, 0.5); */ /* border-left: 4px #CB1C1C solid; */ } /* SECOND LEVEL */ nav.mobile ul li li:last-child { border: none; } nav.mobile ul li li a { background: #444; position: relative; display: block; padding: 18px 30px; /* border-left: 4px #444 solid; */ text-decoration: none; } nav.mobile ul li li a:hover { background: rgba(65, 65, 65, 0.5); } /* THIRD LEVEL */ nav.mobile ul li li li:last-child { border: none; } nav.mobile ul li li li a { background: #555; position: relative; display: block; padding: 10px 10px 10px 25px; text-decoration: none; border-left: 4px #555 solid; } nav.mobile ul li li li a:hover { background: rgba(85, 85, 85, 0.5); /* border: none; */ /* padding: 18px 30px; */ } nav.mobile ul li li li a { border: none; padding: 18px 30px; } nav.mobile ul li .click { /* dropdown menu idicator arrow be sure to include this image with your image files */ position: absolute; display: block; cursor: pointer; z-index: 12399994; top: 0; right: 0; width: auto; height: auto; padding: 17px 20px; } .nav-footer { position: relative; text-align: center; padding: 15px 0; } /* FONT AWESOME ICONS */ nav.mobile ul li a .fa { width: 25px; padding: 8px 3px; margin: 0 6px 0 0; text-align: center; background: #292929; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); } nav.mobile ul.list li .fa-chevron-down {} } @media screen and (max-width: 1020px) {} @media screen and (max-width: 450px) { #menu-button { width: 100%; } } /*}*/ /*---BODY--------------------------------*/ /*.notInventory {*/ .family.whiteArea { height: 1115px; height: 58.07292vw; /* opacity: 0.2; */ } .contactUsPage .family.whiteArea { height: 62vw; } .giveMargin { /* margin: 0 200px; */ /* margin: 0  10.41667vw; */ position: relative; height: 100%; display: flex; justify-content: center; align-items: center; } .family .aboutArea { /* position: absolute; */ right: 0; /* top: 90px; */ /* top: 4.6875vw; */ } .contactUsPage .family .aboutArea { width: 100%; } .bottomSecStuff { margin: 80px 0 0 200px; margin: 4.16667vw 0 0 10.41667vw; margin: 10px 10.41667vw; } .family p { width: 893px; width: 46.51042vw; width: 720px; width: 37.5vw; text-align: center; margin: 0 auto; } .family #mainImg { margin-left: -220px; margin-left: min(-129px, -11.45833vw); margin-left: min(-117.4479px, 11.45833vw); width: 1217px; width: 63.38542vw; } /*! CSS Used from: http://mayerfarmequipment.com.hdev/css/style.css?v=1.0 */ a.standardbtn { padding: 20px 60px; padding: max(18px, 1.04167vw) 3.125vw; text-align: center; text-transform: uppercase; transition: all ease .25s; } .gridbox .standardbtn { margin: 0 15px; margin: 0 0.78125vw; } .standardbtn:first-of-type { margin-left: 0 !important; } .gridbox .standardbtn { background: #000000; } .gridbox .standardbtn:hover { background: #2e2e2e; } a.standardbtn { text-decoration: none; } .gridbox .standardbtn { margin-bottom: 10px; margin-bottom: 0.52083vw; margin-top: 35px; margin-top: 1.82292vw; font-family: 'Mohave', sans-serif; font-weight: 500; font-size: 26px; font-size: max(17px, 1.35417vw); letter-spacing: 0.02em; color: #fff; } .foursec { display: flex; flex-wrap: wrap; } .leftinfo, .rightinfo { width: 50%; } .foursec .gridbox { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; background: #1D263E; } .foursec>div>div.gridbox { position: relative; } .foursec>div+.gridbox { position: relative; } .gridbox.hasinfo { padding: 90px 80px 80px 80px; padding: 4.6875vw 4.16667vw 4.16667vw 4.16667vw; padding: 130px 130px 150px; padding: 6.77083vw 6.77083vw 7.8125vw; display: flex; flex-direction: column; align-items: stretch; } .gridbox.hasinfo:nth-of-type(3) { background: #B32B2B; } .gridbox.hasinfo:nth-of-type(3) * {} .gridbox.hasinfo:nth-of-type(3) .standardbtn { background: white; } .gridbox.hasinfo:nth-of-type(3) .standardbtn:hover { background: #2e2e2e; } .gridbox.hasinfo p { text-align: left; color: #EBEBEB; } .gridbox.hasinfo h3 {} .foursec .gridbox img { width: 100%; object-fit: cover; /* height: max(260px, 60vw); */ } @media only screen and (max-width: 1300px) { .gridbox .standardbtn { width: 100%; display: block; margin: 15px 0; box-sizing: border-box; } } @media only screen and (max-width: 767px) { /*      .gridbox, .gridbox * { order: 2; } */ .gridbox .standardbtn { width: 100% !important; } .foursec { background-repeat: no-repeat; background-size: cover; flex-direction: column; } .flexfooter { flex-direction: column; text-align: center; } .contactUsPage footer { /*     border-top: .5px solid lightgrey; */ padding-top: 65px !important; } .contactUsPage .heroContain { padding-bottom: 30px; } .leftinfo, .rightinfo { width: 100%; } .flexfooter h2.separateAreas { margin-bottom: 45px; } .foursec .gridbox { width: 100%; } .leftinfo>.gridbox:first-of-type:after, .rightinfo>.gridbox:first-of-type:after { width: 100%; } .gridbox:nth-of-type(1) { order: 2; } .gridbox:nth-of-type(2) { order: 1; } .gridbox:nth-of-type(3) { order: 3; } .gridbox:nth-of-type(4) { order: 4; } .gridbox .standardbtn { margin-right: 0 !important; } } .aboutUsPage img#mainImg { opacity: .5; } .contactUsPage img#mainImg { filter: grayscale(100%) sepia(100%) brightness(84%) opacity(14%); -webkit-filter: grayscale(100%) sepia(100%) brightness(84%) opacity(34%); -moz-filter: grayscale(100%) sepia(100%) brightness(84%) opacity(14%); width: 50.520833333333336vw; margin-top: 10.416666666666668vw; /* position: absolute; */ } .forSale { background: url(/siteart/grunge2.png), radial-gradient(rgba(0, 0, 0, 0.79) 0%, #000 100%); background: radial-gradient(rgba(0, 0, 0, 0.79) 0%, #000 100%); background-position: right bottom; background-repeat: no-repeat; background-size: initial; position: relative; /* opacity: 0.7 !important; */ opacity: .1; } .notHero .separateAreas { display: flex; } .rotateNormal { position: absolute; right: 0; } .pets .rotateNormal { right: 415px; right: 21.61458vw; } .footer .rotateNormal { right: 0; } /*! CSS Used from: http://southerniowawholesale.com.hstg/css/style.css?v=1.8 */ .btn-yellow { text-align: center; display: block; max-width: 200px; max-width: 10.41667vw; padding: 16px 20px; padding: 0.83333vw 1.04167vw; box-sizing: border-box; border: none; outline: none; cursor: pointer; background: #791e18; -moz-transition: ease 0.2s all; -o-transition: ease 0.2s all; -webkit-transition: ease 0.2s all; transition: ease 0.2s all; } .btn-yellow:hover { background: #fff; color: black; } .btn-yellow:hover i {} .btn-yellow i { padding-left: 16px; padding-left: 0.83333vw; } .btn-yellow:hover i { -webkit-animation: arrowBounce 0.3s; animation: arrowBounce 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .btn-yellow i { -webkit-animation: arrowBounceBack 0.3s; animation: arrowBounceBack 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .inventory-search button.btn-yellow i { padding-left: 0; animation: none; } form.inventory-search { display: flex; margin: 0; z-index: 1; height: 110px; height: max(65px, 5.72917vw); box-shadow: 0px 0px 99px rgba(0, 0, 0, 0.52); box-shadow: 0px 0px 5.15625vw rgba(0, 0, 0, 0.52); transition: all ease .25s; } form.inventory-search:hover, form.inventory-search:active, form.inventory-search:focus { box-shadow: 0px 0px 3.15625vw rgba(0, 0, 0, 0.52); } form.inventory-search input { border: unset !important; outline: unset !important; background: white; padding-top: unset !important; padding-bottom: unset !important; padding-left: 60px !important; padding-left: max(30px, 3.125vw) !important; width: 695px !important; width: 36.19792vw !important; font-family: 'Mohave', sans-serif; font-weight: 500; font-size: 30px !important; font-size: max(18px, 1.5625vw) !important; color: #707070 !important; display: flex !important; align-items: center; height: 100% !important; } form.inventory-search input::placeholder { text-transform: uppercase; } form.inventory-search button { width: 130px; width: 6.77083vw; text-align: center; padding-top: unset !important; padding-bottom: unset !important; height: 110px; height: max(65px, 5.72917vw); background: #1D263E; border: none; } form button.btn-yellow { width: 100%; cursor: pointer; width: 175px; width: 9.11458vw; font-size: 25px; font-size: max(15px, 1.30208vw); color: white; } @media only screen and (max-width: 767px) { form.inventory-search { width: 100%; box-shadow: 0px 0px 99px rgba(0, 0, 0, 0.52); } form.inventory-search input { width: 100% !important; } .footer .topBusiness { width: 100%; align-items: center !important; } form.inventory-search button { width: 100px; max-width: 100%; } } .rotateSec { position: absolute; margin: 110px 0 0 170px; margin: 5.72917vw 0 0 8.85417vw; } .notHero .supraText { opacity: 1; } .forSale .paragraphPart { width: 897px; width: 46.71875vw; } .forSale .buttons { display: flex; margin-top: 36px; margin-top: 1.875vw; margin-left: 55px; margin-left: 2.86458vw; } .forSale .outlineButton, .forSale a.outlineButton { display: flex; /* width: 100%; */ justify-content: center; min-width: 140px; min-width: 7.29167vw; } .outlineButton, a.outlineButton { text-align: center; border: 2px solid #dbd2cd; border: 0.10417vw solid #dbd2cd; padding: 22px 32px; padding: 1.14583vw 1.66667vw; padding: 1.14583vw 1.66667vw !important; margin: 0 25px; margin: 0 1.30208vw; } .outlineButton.lightButton, a.outlineButton.lightButton {} .outlineButton.lightButton:hover {} .outlineButton.lightButton.hbtn.hb-fill-top-bg:hover { border: #ffffff00 2px solid; border: #ffffff00 0.10417vw solid; } .forSale .heeHaw { position: absolute; right: 0; bottom: -30px; bottom: min(-18px, -1.5625vw); bottom: min(-16.0156px, 1.5625vw); pointer-events: none; } .forSale .heeHaw img { width: 1080px; width: 56.25vw; } .pets.whiteArea { height: 675px; height: 35.15625vw; position: relative; } .fadeInStuffAgain { opacity: 0; } .pets #mainImg { opacity: 0.8; position: absolute; margin-left: 95px; margin-left: 4.94792vw; width: 613px; width: 31.92708vw; } .pets .diagonal { display: block; } .pets h2 { display: flex; } .pets p { display: block; margin: 60px 0 60px auto; margin: 3.125vw 0 3.125vw auto; width: 800px; width: 41.66667vw; } .pets .outlineButton { display: block; position: absolute; right: 40px; right: 2.08333vw; } /*}*/ /*--------FORM STYLES--------------------*/ /*.notInventory {*/ /*}*/ /*-------- FOOTER STYLES ----------------*/ /*.notInventory {*/ section.footer.darkArea { background: url(/siteart/grunge3.png), radial-gradient(rgba(0, 0, 0, 0.79) 0%, #000 100%); background: radial-gradient(rgba(0, 0, 0, 0.79) 0%, #000 100%); background-position: left bottom; background-repeat: no-repeat; position: relative; } .fullwidth { width: 100%; display: flex; justify-content: center; margin-bottom: 65px; margin-bottom: 3.38542vw; margin-top: 250px; margin-top: 13.02083vw; } .realInvPages section.footer.darkArea.notHero { margin-top: min(-68px, -6vw); } .footer footer { height: 100%; position: relative; padding: 115px 0 40px; padding: 5.98958vw 0 2.08333vw; overflow: hidden; } .flexfooter { display: flex; justify-content: space-between; align-items: center; padding: 0 150px; padding: 0 7.8125vw; } footer .heeHaw2 { position: absolute; bottom: -160px; bottom: min(-94px, -8.33333vw); bottom: min(-85.4166px, 8.33333vw); } .heeHaw2 img { width: 445px; width: 23.17708vw; } .footer .topBusiness { right: 0; /* margin: 110px 170px 0 0px; */ /* margin:  5.72917vw max(47.7552px, 8.85417vw 0 0px; */ display: flex; flex-direction: column; align-items: flex-end; } .footer .outlineButton { margin-top: 20px; margin-top: 1.04167vw; } .footer .paragraphPart { text-align: right; margin-right: 195px; margin-right: 10.15625vw; } .footer .paragraphPart * {} a.footerlink:link, a.footerlink:visited, a.footerlink:active { text-decoration: underline; } a.footerlink:hover { text-decoration: none; } .footertext {} .smallfootertext {} .divfooter { max-width: 450px; max-width: 23.4375vw; text-align: center; margin: 0 auto; } /*}*/ /*---------- RESPONSIVE STYLES ----------*/ /*.notInventory {*/ @media only screen and (max-width: 786px) { .invpage footer { margin-bottom: 75px; } } @media only screen and (min-width: 1000px) { .mobileFlex { display: none } } @media only screen and (max-width: 1000px) { .hero .separateAreas { right: min(-34px, -3vw) } .heroContain .hero { overflow: hidden !important; } .heroContain .mobileFlex { display: flex; justify-content: space-between; align-items: center; margin: 25px 6.25vw 0; } .heroContain #menu-button { width: auto; /* height: 29px; */ /* display: flex; */ /* align-items: center; */ border-bottom: #156af9 solid 1.5px; } .heroContain div.homeException img { width: 260px; } .heroContain div#socialIcons a { padding: 0 4px; } .mobile .list a {} .contactUsPage .family.whiteArea { height: 1300px !important; } #fadeInStuff .giveMargin { margin: 0 5vw; } #fadeInStuff .giveMargin, #fadeInStuff .giveMargin * {} .family p { width: 100%; } .contactUsPage #fadeInStuff .aboutArea { width: 100%; } #fadeInStuff .bottomSecStuff { margin-left: 40px; margin-right: 40px; } #fadeInStuff #mainImg { opacity: 0.7; } .contactUsPage img#mainImg { display: none; } .heeHaw { right: -200px !important; } .forSale .heeHaw { right: calc(-11.5rem - ((1vw - 7.47px) * -85.7759)); } .fadeInStuffAgainContain .pets { /* height: 330px; */ } .pets #mainImg { width: 34vw; margin-left: 4vw; bottom: min(-79px, -7vw); } .fadeInStuffAgainContain .rotateNormal { right: calc(5rem + ((1vw - 7.67px) * 60.3448)); } } @media only screen and (max-width: 767px) { #trigger1 { top: 60vw } #trigger6 { top: 50vw } .realInvPages section.footer.darkArea.notHero { margin-top: calc(-10.625rem - ((1vw - 3.2px) * -29.0828)); } .realInvPages .backgroundGrunge:not(footer .backgroundGrunge) { margin-top: min(-338px, -30vw); } #loader, #loader-wrapper .loader-section, div#html {} .otherPage #content, .invSurround { margin-top: calc(-6.875rem - ((1vw - 3.2px) * -20.1342)); } .hero .separateAreas { right: 0; padding: 0 7.8125vw 50px; box-sizing: border-box; margin-bottom: -30px; padding-top: 10px; } .hero .separateAreas * { text-align: center !important; } .heroContain .hero { /* height: 755px; */ } .otherPage section.hero.darkArea { height: 170px; } .heroContain .mobileFlex { flex-wrap: wrap; flex-direction: row-reverse; margin: 25px 6.25vw 0; max-width: 260px; margin-left: auto; margin-right: auto; text-transform: uppercase; } .heroContain #menu-button { order: 1; } .heroContain div.homeException { /* order: 1; */ width: 100%; display: flex; justify-content: center; margin-bottom: 3vw; } .heroContain #heroGraphic { padding-top: 3vw; width: min(70vw, 300px); } .doublecta .cta { font-size: 19px; } .heroContain .supraText { bottom: -5px !important; position: relative; } .heroContain .locationText { display: block; margin-top: 15px; } .heroContain .backgroundGrunge { /* bottom: 165px; */ } .backgroundGrunge img { width: 600px; } .backgroundGrunge.diamondone { right: -420px; /* margin-bottom: 42px; */ } .backgroundGrunge.diamondtwo { left: -420px; } .doublecta { flex-direction: column; width: 100%; text-align: center; max-width: 300px; padding-top: 0px; margin-top: 0; margin: 0 auto; } .doublecta * { margin: 0 !important; } #fadeInStuff.family { display: flex; flex-direction: column; height: calc(37.5rem + ((1vw - 5px) * -56.1798)); } #fadeInStuff div { position: relative; } .contactUsPage .family .aboutArea { top: -20px; } #fadeInStuff .giveMargin { position: relative; margin: 0 7.8125vw; } #fadeInStuff .bottomSecStuff { margin-left: 0; margin-right: 0; } #fadeInStuff p { width: 100%; margin-bottom: 20px; } #fadeInStuff #mainImg { position: relative; } .forSale.darkArea { /* height: 800px; */ } .forSale .rotateSec { margin: 8.72917vw 0 0 8.85417vw; } .forSale .anteSlam, .forSale .anteSlam * { text-align: left; } .forSale .paragraphPart { width: 85%; } .forSale p { margin-left: 0 !important; } .forSale .buttons { margin-left: 0; display: flex; flex-direction: column; width: 175px; } .forSale .buttons .outlineButton { margin-left: 0; margin-bottom: 20px; } .forSale img { /* width:  105vw !important; */ height: 260px; } .fadeInStuffAgainContain .pets { display: flex; flex-direction: column-reverse; height: 480px; bottom: -130px; } .fadeInStuffAgainContain .rotateNormal { position: relative; right: 0; margin: 2.72917vw 8.85417vw; } .pets #mainImg { position: relative; top: -60px; bottom: 0; } .fadeInStuffAgainContain .separateSeparate { display: flex; flex-direction: column; } .fadeInStuffAgainContain .separateSeparate div { /* height: 1px !important; */ } .fadeInStuffAgainContain .separateSeparate br { display: none; } .fadeInStuffAgainContain .supraText { padding-bottom: 7px; } .fadeInStuffAgainContain p { width: 100%; } .footer.darkArea {} } @media only screen and (max-width: 1500px) { .contactUsPage img#mainImg { margin-top: calc(32.5rem + ((1vw - 10px) * -46)); width: 44.345898004434595vw; } } @media screen and (max-width: 475px) { .pets #mainImg { top: 20px; } .fadeInStuffAgainContain .pets { height: 570px; bottom: -50px; } /* loader */ /*     #loader-wrapper {          display: none !important      } */ .border, .logo h1, .logo p, .about-wrapper { animation: none !important; opacity: 1 !important } /* loader */ .footer-links a { padding-top: 25px } .footer div.diagonal .separateSeparate { text-align: center; } .footer.darkArea { height: 920px; } footer .heeHaw2 { z-index: -1; width: 100%; position: absolute; } footer .backgroundGrunge { z-index: -2; } .footer .paragraphPart { margin: 0; text-align: center; } .footer p { margin: 4.16667vw 4.16667vw !important; } .footer .topBusiness { align-items: center; margin: 5.72917vw 8.85417vw; } footer .topBusiness .outlineButton { /* margin-top: 30px; */ } } /*! CSS Used from: http://southerniowawholesale.com.hstg/css/style.css?v=1.8 */ .formsurround hr { border: #000 1px solid; } @media screen and (max-width: 1530px) { .formsurround .panel { padding-left: 135px !important; padding-right: 135px !important; } .formsurround .bg-dark { padding-top: 50px !important; /* padding-bottom: 370px !important; */ } } @media screen and (max-width: 1200px) { .formsurround .panel { padding: 50px !important; } } .formsurround .relative { position: relative; } .formsurround .flex { display: flex; } .formsurround .flex-wrap { flex-wrap: wrap; } .formsurround .col50 { width: 50%; } .formsurround .bg-offwhite .wrapper { padding-top: 200px; padding-top: 10.41667vw; } .formsurround .nopad-bottom { padding-bottom: 0 !important; } .formsurround .wrapper { padding-left: 8%; padding-right: 8%; position: relative; } .formsurround .wrapper-sm { padding-left: 9%; padding-right: 9%; } .formsurround .panel-offset { /* padding-bottom: 400px; */ } .formsurround .panel-offset-margin { /* margin-top: -400px; */ } .formsurround .panel { position: relative; padding: 120px 170px; padding: 6.25vw 8.85417vw; background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); box-shadow: 0 0 0.52083vw 0 rgba(0, 0, 0, 0.2); box-sizing: border-box; } .formsurround .hr-sm-left { max-width: 80%; margin: 50px 0 !important; margin: 2.60417vw 0 !important; border-top: none; border-left: none; border-right: none; border-bottom: solid 1px #dbdbdb; display: block; } .formsurround .bg-dark .hr-sm-left { max-width: 80%; margin: 50px 0 !important; margin: 2.60417vw 0 !important; border-top: none; border-left: none; border-right: none; border-bottom: solid 1px #555; display: block; } .formsurround .darkred { color: #791e18; } .formsurround .offwhite { color: #cccccc; } .formsurround .bg-offwhite { color: #333333; z-index: 1; position: relative; } .formsurround .bg-dark { /* color: #fff; */ /* background: black; */ /* padding-top: 500px; */ } .formsurround .btn-yellow { text-align: center; display: block; max-width: 200px; /* max-width: 10.41667vw; */ padding: 16px 20px; /* padding: 0.83333vw 1.04167vw; */ box-sizing: border-box; border: none; outline: none; cursor: pointer; background: #004CE2; color: white; -moz-transition: ease 0.2s all; -o-transition: ease 0.2s all; -webkit-transition: ease 0.2s all; transition: ease 0.2s all; } .formsurround .btn-yellow:hover { background: #fff; color: #791e18; } .formsurround .btn-yellow:hover i { -webkit-text-stroke-color: #791e18 !important; } .formsurround .btn-yellow i { padding-left: 16px; padding-left: 0.83333vw; } .formsurround .btn-yellow:hover i { -webkit-animation: arrowBounce 0.3s; animation: arrowBounce 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .formsurround .btn-yellow i { -webkit-animation: arrowBounceBack 0.3s; animation: arrowBounceBack 0.3s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .formsurround .heading { margin-bottom: 20px; /* margin-bottom: 1.04167vw; */ } .formsurround .heading-sm { margin-bottom: 30px; margin-bottom: 1.5625vw; } .formsurround .bg-offwhite a:not(.btn-yellow) { display: inline-block; padding: 10px; padding: 0.52083vw; color: #333; } .formsurround .hero-img-parallax { /* position: absolute; */ left: 0; top: 0; right: 0; bottom: 0; -moz-background-position: 90% 50% !important; -o-background-position: 90% 50% !important; -webkit-background-position: 90% 50% !important; background-position: 90% 50% !important; } .formsurround .hero-img-parallax .parallax-content { -moz-background-position: 90% 50% !important; -o-background-position: 90% 50% !important; -webkit-background-position: 90% 50% !important; background-position: 90% 50% !important; } .formsurround .section-parallax { position: relative; width: 100%; height: 100%; overflow: hidden; } .formsurround .parallax-content { background-size: cover; position: relative; background-repeat: no-repeat; width: 100%; height: 120%; background-position: center center !important; opacity: 0.6; } .formsurround #search-section .copy { max-width: 550px; max-width: 28.64583vw; margin-bottom: 45px; margin-bottom: 2.34375vw; display: block; } .formsurround .contact-info a { color: black; display: block; margin-bottom: 0; padding: 10px 0 10px 44px; padding: 0.52083vw 0 0.52083vw 2.29167vw; position: relative; } .financepage a.cta { padding: 0.52083vw 2.29167vw 0.52083vw 2.29167vw; } .formsurround .contact-info a i { position: absolute; left: 0; } .formsurround .custom-form input:not(.check-container *) { padding: 20px; /* padding: 1.04167vw; */ color: #454a49; resize: none; outline: none; border: none; background: #f9f9f9; box-sizing: border-box; width: 100%; margin-bottom: 10px; /* margin-bottom: 0.52083vw; */ } .formsurround .custom-form input {} .check-container input {} .formsurround .custom-form .flex { gap: 10px; gap: 0.52083vw; } .formsurround .custom-form textarea { width: 100%; box-sizing: border-box; padding: 20px; /* padding: 1.04167vw; */ color: #000; resize: none; margin-bottom: 10px; margin-bottom: 0.52083vw; outline: none; border: none; background: #f9f9f9; } .formsurround .CaptchaPanel { text-align: left !important; } .formsurround .CaptchaPanel, .formsurround .CaptchaAnswerPanel, .formsurround .CaptchaImagePanel, .formsurround .CaptchaMessagePanel { padding-left: 0 !important; padding-right: 0 !important; } .formsurround .CaptchaWhatsThisPanel a { color: #000 !important; } .formsurround form button.btn-yellow { width: 100%; cursor: pointer; } @media only screen and (max-width: 1170px) { .formsurround h1:not(.container.cf *) { /* font-size: 55px; */ } .formsurround .contact-info a { padding: 10px 0 10px 0; } .formsurround .contact-info a i { position: relative; padding-right: 20px; } .formsurround .col50 { width: 100%; } .formsurround .copy { /* text-align: center; */ max-width: unset !important; } } @media only screen and (max-width: 767px) { .formsurround .copy { text-align: left; } .formsurround .flex-wrap { display: flex; justify-content: center; } .formsurround .wrapper { width: 100%; padding: 0; } .formsurround .panel { padding: 80px 40px; } .formsurround .custom-form .flex { flex-wrap: wrap; gap: 0; } .formsurround .bg-offwhite a:not(.btn-yellow) { width: 100%; margin-bottom: 10px; } .formsurround .bg-dark .hr-sm-left { margin: 50px auto !important; } } @media only screen and (max-width: 480px) { .formsurround .panel { padding: 80px 30px; } } /*}*/