/*****************************************/
/********** MAIN BODY ELEMENTS ***********/
/*****************************************/
body{background-color: #ffffff;color: #FFFFFF;font-family: Arial,Helvetica,sans-serif;font-size: 16px;margin: 0px 0px 0px 0px;}
/*****************************************/
/********** DESIGN ELEMENTS***************/
/*****************************************/
.thumbnail{ color: #000000; padding: 10px; }
hr.style1 {display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 100%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 1px solid white;}
hr.style2 {display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 75%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 1px solid white;}
hr.style3 {display: block; position: relative; padding: 0; margin: 8px auto; height: 0; width: 50%; max-height: 0; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 1px solid black;}
hr.style4 {margin: 0px; width: 75%; font-size: 1px; line-height: 0; clear: both; border: none; border-top: 1px solid black;}
hr.style5 {display: block; position: relative; padding: 0px; margin: 30px auto; height: 0; width: 50%; max-height: 0; font-size: 2px; line-height: 0; clear: both; border: none; border-top: 2px solid orange;}
hr.style6 {display: block; position: relative; padding: 0px; margin: 30px auto; height: 0;max-height: 0; font-size: 2px; line-height: 0; clear: both; border: none; border-top: 2px solid orange;}
.darken {box-shadow: inset 2000px 0 0 0 rgba(0, 0, 0, 0.5);}
.sectionHero{height:238px;width:100%;}
.homeHero{height:400px;width:100%;}
.container-hover{position:relative;width:100%;}
.image{color: #322938;opacity:1;display:block;width:100%;height:auto;transition:.5s ease;backface-visibility:hidden;}
.middle{transition:.5s ease;opacity:1;position:absolute;top:55%;left:50%;transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);text-align:center;}
.container-hover:hover .image{opacity:0.3;}
.container-hover:hover .middle{opacity:1;}
.btn-xlarge {
    padding: 18px 28px;
    font-size: 22px;
    line-height: normal;
    -webkit-border-radius: 0px;
       -moz-border-radius: 0px;
            border-radius: 0px;
    min-width:60%;
}
.btn-warning{color:#fff;background-color:#f26822;border-color:#005a5a}

.btn-warning:hover{color:#fff;background-color:#ed8855;border-color:#ed8855}
.btn-warning:focus,.btn-warning.focus{box-shadow:0 0 0 .2rem rgba(237, 136, 85,0.5)}
.btn-warning.disabled,.btn-warning:disabled{color:#fff;background-color:#f26822;border-color:#005a5a}
.btn-warning:not(:disabled):not(.disabled):active,.btn-warning:not(:disabled):not(.disabled).active,.show>.btn-warning.dropdown-toggle{color:#fff;background-color:#ed8855;border-color:#000}
.btn-warning:not(:disabled):not(.disabled):active:focus,.btn-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,90,90,0.5)}

.btn-outline-warning{color:#f26822;background-color:transparent;background-image:none;border-color:#f26822}.btn-outline-warning:hover{color:#fff;background-color:#f26822;border-color:#f26822}
.btn-outline-warning:focus,.btn-outline-warning.focus{box-shadow:0 0 0 .2rem rgba(235, 64, 52,0.5)}
.btn-outline-warning.disabled,.btn-outline-warning:disabled{color:#f26822;background-color:transparent}
.btn-outline-warning:not(:disabled):not(.disabled):active,.btn-outline-warning:not(:disabled):not(.disabled).active,.show>.btn-outline-warning.dropdown-toggle{color:#fff;background-color:#cc261b;border-color:#f26822}
.btn-outline-warning:not(:disabled):not(.disabled):active:focus,.btn-outline-warning:not(:disabled):not(.disabled).active:focus,.show>.btn-outline-warning.dropdown-toggle:focus{box-shadow:0 0 0 .2rem rgba(0,128,128,0.5)}
/*****************************************/
/********** SPACING **********************/
/*****************************************/
@media (min-width: 320px) {.topspacing{padding-top: 80px;}}
@media (min-width: 992px) {.topspacing{padding-top: 150px;}}
@media (min-width: 0px) {.doubleNavSpacing{padding-top: 100px;}}
@media (min-width: 992px) {.doubleNavSpacing{padding-top: 220px;}}
@media (min-width: 0px) {.doubleNavCareerSpacing{padding-top: 100px;}}
@media (min-width: 992px) {.doubleNavCareerSpacing{padding-top: 220px;}}
.containerMax{max-width:1440px;}
.paddingLeftNav{padding-left:20px;}
.sectionBottom50{padding-bottom:50px;}
.sectionTop30{padding-top:30px;}
.section30{padding-top:30px;padding-bottom:30px;}
.section50{padding-top:50px;padding-bottom:50px;}
.section100{padding-top:100px;padding-bottom:100px;}
.cardBuffer{padding:5px;}
.linkspacing{line-height: 30px;}
.padding-0{padding-right:0;padding-left:0;}
/*****************************************/
/********** TEXT *************************/
/*****************************************/
.robotoFont{font-family: 'Roboto Mono', monospace;}
h1{color: #333; font-family: Arial Black, Arial Black, Gadget, sans-serif;}
h2{color: #333;}
h3{color: #333;}
h4{color: #333;}
.text-primary{color:#333;}
.whiteText{color:#ffffff;}
.orangeText{color:#f26822;
    text-transform: uppercase;
}
.orangeTextNoCap{color:#f26822;}
.cardTitleText{font-size:28px; font-weight:bolder;}
@media (min-width: 0px){
.homeHeroPos{margin-left: auto;margin-right: auto;position: relative;top: 100%;transform: translateY(-100%); text-shadow: 2px 2px #333333;}   
.hugeText {font-size: 40px;} 
}
@media (min-width: 768px){
.homeHeroPos{margin-left: auto;margin-right: auto;position: relative;top: 80%;transform: translateY(-50%); text-shadow: 2px 2px #333333;}   
.hugeText {font-size: 60px;} 
}
@media (min-width: 0px){.section-text{margin-left: auto;margin-right: auto;position: relative;top: 50%;transform: translateY(-50%); text-shadow: 2px 2px #333333;}}
@media (min-width: 768px){.section-text{margin-left: auto;margin-right: auto;position: relative;top: 50%;transform: translateY(-50%); text-shadow: 2px 2px #333333;}}
@media (min-width: 320px){.section-text h1 {font-size: 40px;} .section-text h3 {font-size: 20px;}}
@media (min-width: 576px){.section-text h1 {font-size: 60px;} .section-text h3 {font-size: 30px;}}
.small-text{font-size:14px;}
/*****************************************/
/********** FILLS AND BACKGROUNDS ********/
/*****************************************/
.black{background-color: #000000; color: #FFFFFF;}
.grayLight{background-color:#CCCCCC; color:#000000;}
.grayDark{background-color:#333333; color:#FFFFFF;}
.white{background-color: #FFFFFF; color: #000000;}
.purplebg{background-color: #322938; color: #FFFFFF;}
.bg-orange{background-color: #f26822; color:#000;}
.bluegradient{
background: rgb(9,83,184);
background: -moz-linear-gradient(180deg, rgba(9,83,184,1) 0%, rgba(64,112,176,1) 100%);
background: -webkit-linear-gradient(180deg, rgba(9,83,184,1) 0%, rgba(64,112,176,1) 100%);
background: linear-gradient(180deg, rgba(9,83,184,1) 0%, rgba(64,112,176,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0953b8",endColorstr="#4070b0",GradientType=1);
}
.headbg{background-color: #333333; padding-top:30px; padding-bottom:30px; padding-left: 20px; padding-right: 20px;} /*Color used behind main page headings <h1> tags*/
.fencebg{background-image: url("pictures/steel-pipe-fencing-agriculture-fence-contractor-flying-o-montana.webp");width: 100%;min-height: 238px; background-position: center;background-repeat: no-repeat;background-size: cover;}
.careersbg{background-image: url("pictures/careers-section-bg.jpg");width: 100%;min-height: 238px; background-position: center;background-repeat: no-repeat;background-size: cover;}
.topimage{background-image: url("/pictures/flying-o-enterprise-fence-products-and-installs-helena-montana-mobile.webp"); width: 100%;min-height: 300px;background-position: center;background-repeat: no-repeat;background-size: cover;}
.fencecorrallbg{background-image: url("pictures/new-bg-for-flying-o-cta.webp");width: 100%;min-height: 450px; background-position: center;;background-repeat: no-repeat;background-size: cover;}
@media (min-width:992px){.fencecorrallbg{background-image: url("pictures/new-bg-for-flying-o-cta.webp");width: 100%;min-height: 450px; background-position: center;background-attachment: fixed;background-repeat: no-repeat;background-size: cover;}}
@media (min-width:401px){.topimage{background-image: url("/pictures/flying-o-enterprise-fence-products-and-installs-helena-montana-tablet-v2.webp"); width: 100%;min-height: 500px;background-position: center;background-repeat: no-repeat;background-size: cover;}}
@media (min-width:769px){.topimage{background-image: url("/pictures/flying-o-enterprise-fence-products-and-installs-helena-montana-v2.webp"); width: 100%;min-height: 700px;background-position: center;background-repeat: no-repeat;background-size: cover;}}
/*****************************************/
/********** LINKS ************************/
/*****************************************/
a.a1:link{   color: #000000; font-size: 16px; text-decoration: none;}
a.a1:visited{color: #000000; font-size: 16px; text-decoration: none;}
a.a1:hover{  color: #cc3333; font-size: 16px; text-decoration: none;}
a.a2:link{   color: #333; font-size: 16px; text-decoration: underline; font-weight:bolder;}
a.a2:visited{color: #333; font-size: 16px; text-decoration: underline; font-weight:bolder;}
a.a2:hover{  color: #ffffff; font-size: 16px; text-decoration: underline; font-weight:bolder;}
a.a3:link{   color: #ffffff; font-size: 16px; text-decoration: underline;}
a.a3:visited{color: #ffffff; font-size: 16px; text-decoration: underline;}
a.a3:hover{  color: #999999; font-size: 16px; text-decoration: underline;}
a.a4:link{color:#FFFFFF;font-size:50px;text-decoration:none;text-shadow:2px 2px #000000;font-family: Arial Black, Arial Black, Gadget, sans-serif;line-height: 26pt;}
a.a4:visited{color:#FFFFFF;font-size:50px;text-decoration:none;text-shadow:2px 2px #000000;font-family: Arial Black, Arial Black, Gadget, sans-serif;line-height: 26pt;}
a.a4:hover{color:#333;font-size:50px;text-decoration:none;text-shadow:2px 2px #000000;font-family: Arial Black, Arial Black, Gadget, sans-serif;line-height: 26pt;}
/*****************************************/
/********** NAVIGATION BARS **************/
/*****************************************/
/*MAIN NAVIGATION BAR STYLE*/
#navbar{
    background: rgb(219,219,219);
    background: -moz-linear-gradient(180deg, rgba(219,219,219,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 81%, rgba(219,219,219,1) 100%);
    background: -webkit-linear-gradient(180deg, rgba(219,219,219,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 81%, rgba(219,219,219,1) 100%);
    background: linear-gradient(180deg, rgba(219,219,219,1) 0%, rgba(255,255,255,1) 23%, rgba(255,255,255,1) 49%, rgba(255,255,255,1) 81%, rgba(219,219,219,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#dbdbdb",endColorstr="#dbdbdb",GradientType=1);
    padding: 10px 10px;width: 100%;top: 0;z-index: 99;}
#navbar a.nav-link {float: left;color: #000;text-align: center;text-decoration: none;padding: 12px;font-size: 18px; font-family: 'Roboto Mono', monospace;font-weight: 400;}
/*Fancy SHMANCY Left To Right Hover Effect
#navbar a.nav-link::before {transition: 300ms;height: 5px;content: "";position: absolute;background-color: #031D44;}
#navbar a.nav-link-ltr::before {width: 0%;bottom: 10px;}
#navbar a.nav-link-ltr:hover::before {width: 100%;}
/*END OF SHMANCY*/
#navbar a.nav-fa {float: left;color: #000;text-align: center;text-decoration: none;padding: 5px;font-size: 40px;}
#navbar a.nav-main {float: left;color: #000;text-align: center;text-decoration: none;padding: 12px 20px;font-size: 20px;background-color: #333333; font-family: 'Roboto Mono', monospace}
#navbar a:hover {color: #cccccc;}
#navbar .navbar-brand{padding: 0px;}
#navbar #logo {transition: 0.4s;}
@media screen and (max-width: 580px) {
  #navbar {padding: 10px 10px !important;}
  #navbar a {float: none;display: block;text-align: left;  }
  #navbar-right {float: none;}
}
/*SECONDARY NAVIGATION BAR STYLE ONLY CHANGE ID FOR STYLES KEEP CLASS AS NAVBAR*/
#navbar-2{background-color: #f26822;padding: 2px 2px;transition: 0.4s;width: 100%;top: 0;z-index: 99;}
#navbar-2 a.nav-link {float: left;color: #fff;text-align: center;text-decoration: none;padding: 8px 5px;font-size: 15px; font-family: 'Roboto Mono', monospace;font-weight: 700;}
.secondaryIcons{font-size:20px;}
.verticalLine{border-right:1px solid #fff; margin:4px 25px; height:28px;}
#navbar-2 a.nav-fa {float: left;color: #cccccc;text-align: center;text-decoration: none;padding: 2px 5px;font-size: 12px;}
#navbar-2 a.nav-main {float: left;color: white;text-align: center;text-decoration: none;padding: 12px 20px;font-size: 20px;background-color: #333333; font-family: 'Roboto Mono', monospace;}
#navbar-2 a:hover {color: #4a4058;}
#navbar-2 .navbar-brand{padding: 0px;}
#navbar-2 #logo-2 {transition: 0.4s;}
@media screen and (max-width: 580px) {
  #navbar-2 {padding: 10px 10px !important;}
  #navbar-2 a {float: none;display: block;text-align: left;  }
  #navbar-right-2 {float: none;}
}
@media (min-width: 992px){
.second-nav-spacing{
  margin-top:43px;  
}}
.custom-toggler .navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(235, 64, 52, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");}
.custom-toggler .navbar-toggler {border-color: rgb(235, 64, 52);} 

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu>a:after {
  content: "\f0da";
  float: right;
  border: none;
  font-family: 'FontAwesome';
}

.dropdown-submenu>.dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0px;
  margin-left: 0px;
}

/*****************************************/
/********** YOUTUBE VIDEO SIZING *********/
/*****************************************/
.videoWrapper {position: relative;padding-bottom: 56.25%;padding-top: 25px;height: 0;}
.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
/*****************************************/
/********** Header Video CSS *************/
/*****************************************/

.videoHero {
  position: relative;
  height: 89vh;
  width: 100%;
  overflow: hidden;
}

.videoHero video{
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

/*****************************************/
/********** CAROUSEL SLIDER  *************/
/*****************************************/
.carousel {min-height: 200px;}
@media (min-width:401px){.carousel {min-height: 400px;}}
@media (min-width:769px){.carousel {min-height: 300px;}}
.carousel-indicators li{background-color:#AAAAAA;}
.carousel-indicators li.active{background-color:#000000;}
/*****************************************/
/********** PICTURE ASPECT RATIOS ********/
/*****************************************/
.aspect-ratio-box-inside { position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.aspect-ratio-box-16-9 {height: 0;overflow: hidden;padding-top:56.25%;position: relative;}
.aspect-ratio-box-4-3 {height: 0;overflow: hidden;padding-top:75%;position: relative;}
.aspect-ratio-box-1-1 {height: 0;overflow: hidden;padding-top:100%;position: relative;}
.aspect-ratio-box-hero {height: 0;overflow: hidden;padding-top:41.6666667%;position: relative;}
.aspect-ratio-box-thumbnail {height: 0;overflow: hidden;padding-top:38%;position: relative;}
/*****************************************/
/********** PARALLAX EFFECTS *************/
/*****************************************/
.parallax-container {
  position: relative;
  overflow: hidden;
  height: 500px;
}

.parallax-container .parallax {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}

.parallax-container .parallax img {
  opacity: 0;
  position: absolute;
  left: 50%;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
/*****************************************/
/******* CAREERS SECTION FLUID POSITIONS */
/*****************************************/
hr.style8 { border: 0;height: 1px;background-image: linear-gradient(to right, rgba(51, 102, 51, 0), rgba(0, 0, 0, 0.75), rgba(51, 102, 51, 0));}
.sectionPictures{width:100%;padding:0;}
@media (min-width: 1px){.sectionDetails{padding-left:10px;padding-top:30px;}}
@media (min-width: 992px){.sectionDetails{padding-left:10%;padding-top:30px;padding-right:2%;}}
@media (min-width: 1px){.sectionDetailsRight{padding-top:30px;}}
@media (min-width: 992px){.sectionDetailsRight{padding-top:30px;padding-left:2%;}}