/* Create a widget style with this code and apply it to your custom search */
/* This code will hide the H1 & Breadcrumb when your `widget--bcc-page-search-navigation` is the first widget on the page */
 .js .hidden-header .page-heading, .js .hidden-header .nav--breadcrumb {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
}
 .js .hidden-header .site-main {
     padding-top: 0;
}
 .js .hidden-header .site-content__inner {
     margin-top: 0;
}

/* You may wish to-do something different here, but it will stop you guys having to deal with browsers without js. Perhaps after go live, we could revisit this. */
 .no-js div.styles1036 {
     display: none;
}

/* Code required to style your search bar as requested */
 div.styles1036 {
     padding: 3.75rem 0 4.5rem;
     background: transparent;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: center;
     justify-content: center;
     max-width: 63rem;
     position: relative;
     text-align: left;
     width: 100%;
}
 
 div.styles1036::before {
     background:
       /* top, transparent #000000, faked with gradient */ 
       linear-gradient(
         rgba(255, 255, 255, 0.10),
         rgba(255, 255, 255, 0.10)
       ),
      /* bottom, image */
     url("https://www.butlercc.edu/images/matrix_background.jpg");
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
     bottom: 0;
     content: '';
     left: 50%;
     margin-left: -50vw;
     position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
}


 div.styles1036 h2 {
    color: #00ff41;
    font-family: Akzidenz Grotesk Condensed;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-size: 4rem;
    line-height: 3.25rem;
   -webkit-text-stroke: 1px black;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}
 div.styles1036 .awesomplete {
     display: block;
     margin: .5em 0 0;
}
 div.styles1036 .awesomplete > input {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 1.875rem 1.65rem;
     background: #fff;
     border: 0;
     color: #464646;
     display: block;
     width: 100%;
}
 div.styles1036 .awesomplete > ul {
     padding: .3em 0;
     width: 100%;
}
 div.styles1036 .awesomplete > ul > li {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 0.15rem 1.65rem;
}
 div.styles1036 .awesomplete > ul > li:hover {
     background: #7e3d8f;
     color: #fff;
}
 div.styles1036 .awesomplete li:hover mark {
     background: #56006b;
     color: #fff;
}
/* Create a widget style with this code and apply it to your custom search */
/* This code will hide the H1 & Breadcrumb when your `widget--bcc-page-search-navigation` is the first widget on the page */
 .js .hidden-header .page-heading, .js .hidden-header .nav--breadcrumb {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
}
 .js .hidden-header .site-main {
     padding-top: 0;
}
 .js .hidden-header .site-content__inner {
     margin-top: 0;
}

/* You may wish to-do something different here, but it will stop you guys having to deal with browsers without js. Perhaps after go live, we could revisit this. */
 .no-js div.styles1040 {
     display: none;
}

/* Code required to style your search bar as requested */
 div.styles1040 {
     padding: 3.75rem 0 4.5rem;
     background: #ffffff;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: center;
     justify-content: center;
     max-width: 63rem;
     position: relative;
     text-align: left;
     width: 100%;
     height: 425px;
}
 @media (min-width: 46.25em) {
     div.styles1040 {
         min-height: 10em;
    }
}
 div.styles1040::before {
     background-color: #ffffff;
     background-position: center center;
     background-size: cover;
     bottom: 0;
     content: '';
     left: 50%;
     margin-left: -50vw;
     position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
}
 div.styles1040 h2 {
    color: #a08e63;
    font-family: Akzidenz Grotesk Condensed;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-size: 4rem;
    line-height: 2.25rem;
}
 div.styles1040 .awesomplete {
     display: block;
     margin: .5em 0 0;
}
 div.styles1040 .awesomplete > input {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 1.875rem 1.65rem;
     background: #fff;
     border: 0;
     color: #464646;
     display: block;
     width: 100%;
}
 div.styles1040 .awesomplete > ul {
     padding: .3em 0;
     width: 100%;
}
 div.styles1040 .awesomplete > ul > li {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 0.15rem 1.65rem;
}
 div.styles1040 .awesomplete > ul > li:hover {
     background: #7e3d8f;
     color: #fff;
}
 div.styles1040 .awesomplete li:hover mark {
     background: #56006b;
     color: #fff;
}
div.styles1040 .item-list {
    font-size: 1.5rem;
    line-height: 2.25rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    margin: 0;
    text-transform: uppercase; }

  div.styles1040 li {
    margin: 0.75rem 0 0;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
    @media (min-width: 32.5em) and (max-width: 46.24em) {
      div.styles1040 li {
        padding: 0 1.5rem; } }
    @media (min-width: 32.5em) {
      div.styles1040 li {
        padding: 0 0.75rem;
        /*width: 50%;*/ } }
    @media (min-width: 61.25em) {
      div.styles1040 li {
        padding: 0 1.5rem; } }

  div.styles1040 a {
    font-size: 1.5rem;
    line-height: 2.25rem;
    padding: 0.375rem 1.125rem;
    background-color: #008f11;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: "Akzidenz Grotesk Condensed";
    text-align: center;
    text-transform: uppercase;
    transition: background-color .125s ease-in-out, color .125s ease-in-out;
    text-decoration: none;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-positive: 1;
        flex-grow: 1;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center; }
    div.styles1040 a:hover,
    div.styles1040 a:active,
    div.styles1040 a:focus {
      background-color: #003b00;
      opacity: 1; }
   div.styles1040 a:visited {
      color: #ffffff;
   }
/* Create a widget style with this code and apply it to your custom search */
/* This code will hide the H1 & Breadcrumb when your `widget--bcc-page-search-navigation` is the first widget on the page */
 .js .hidden-header .page-heading, .js .hidden-header .nav--breadcrumb {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
}
 .js .hidden-header .site-main {
     padding-top: 0;
}
 .js .hidden-header .site-content__inner {
     margin-top: 0;
}

/* You may wish to-do something different here, but it will stop you guys having to deal with browsers without js. Perhaps after go live, we could revisit this. */
 .no-js div.styles1039 {
     display: none;
}

/* Code required to style your search bar as requested */
 div.styles1039 {
     padding: 3.75rem 0 4.5rem;
     background: #e5e5e5;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: center;
     justify-content: center;
     max-width: 63rem;
     position: relative;
     text-align: left;
     width: 100%;
     height: 425px;
}
 @media (min-width: 46.25em) {
     div.styles1039 {
         min-height: 10em;
    }
}
 div.styles1039::before {
     background-color: #e5e5e5;
     background-position: center center;
     background-size: cover;
     bottom: 0;
     content: '';
     left: 50%;
     margin-left: -50vw;
     position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
}
 div.styles1039 h2 {
    color: #a08e63;
    font-family: Akzidenz Grotesk Condensed;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-size: 4rem;
    line-height: 2.25rem;
}
 div.styles1039 .awesomplete {
     display: block;
     margin: .5em 0 0;
}
 div.styles1039 .awesomplete > input {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 1.875rem 1.65rem;
     background: #fff;
     border: 0;
     color: #464646;
     display: block;
     width: 100%;
}
 div.styles1039 .awesomplete > ul {
     padding: .3em 0;
     width: 100%;
}
 div.styles1039 .awesomplete > ul > li {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 0.15rem 1.65rem;
}
 div.styles1039 .awesomplete > ul > li:hover {
     background: #7e3d8f;
     color: #fff;
}
 div.styles1039 .awesomplete li:hover mark {
     background: #56006b;
     color: #fff;
}
div.styles1039 .item-list {
    font-size: 1.5rem;
    line-height: 2.25rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    margin: 0;
    text-transform: uppercase; }

  div.styles1039 li {
    margin: 0.75rem 0 0;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
    @media (min-width: 32.5em) and (max-width: 46.24em) {
      div.styles1039 li {
        padding: 0 1.5rem; } }
    @media (min-width: 32.5em) {
      div.styles1039 li {
        padding: 0 0.75rem;
        /*width: 50%;*/ } }
    @media (min-width: 61.25em) {
      div.styles1039 li {
        padding: 0 1.5rem; } }

  div.styles1039 a {
    font-size: 1.5rem;
    line-height: 2.25rem;
    padding: 0.375rem 1.125rem;
    background-color: #008f11;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: "Akzidenz Grotesk Condensed";
    text-align: center;
    text-transform: uppercase;
    transition: background-color .125s ease-in-out, color .125s ease-in-out;
    text-decoration: none;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-positive: 1;
        flex-grow: 1;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center; }
    div.styles1039 a:hover,
    div.styles1039 a:active,
    div.styles1039 a:focus {
      background-color: #003b00;
      opacity: 1; }
   div.styles1039 a:visited {
      color: #ffffff;
   }
/* Create a widget style with this code and apply it to your custom search */
/* This code will hide the H1 & Breadcrumb when your `widget--bcc-page-search-navigation` is the first widget on the page */
 .js .hidden-header .page-heading, .js .hidden-header .nav--breadcrumb {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
}
 .js .hidden-header .site-main {
     padding-top: 0;
}
 .js .hidden-header .site-content__inner {
     margin-top: 0;
}

/* You may wish to-do something different here, but it will stop you guys having to deal with browsers without js. Perhaps after go live, we could revisit this. */
 .no-js div.styles1037 {
     display: none;
}

/* Code required to style your search bar as requested */
 div.styles1037 {
     padding: 3.75rem 0 4.5rem;
     background: transparent;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: center;
     justify-content: center;
     max-width: 63rem;
     position: relative;
     text-align: left;
     width: 100%;
}
 @media (min-width: 46.25em) {
     div.styles1037 {
         min-height: 10em;
    }
}
 div.styles1037::before {
     background-color: #003b00;
     background-position: center center;
     background-size: cover;
     bottom: 0;
     content: '';
     left: 50%;
     margin-left: -50vw;
     position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
}
 div.styles1037 h2 {
    color: #a08e63;
    font-family: Akzidenz Grotesk Condensed;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-size: 4rem;
    line-height: 2.25rem;
}
 div.styles1037 .awesomplete {
     display: block;
     margin: .5em 0 0;
}
 div.styles1037 .awesomplete > input {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 1.875rem 1.65rem;
     background: #fff;
     border: 0;
     color: #464646;
     display: block;
     width: 100%;
}
 div.styles1037 .awesomplete > ul {
     padding: .3em 0;
     width: 100%;
}
 div.styles1037 .awesomplete > ul > li {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 0.15rem 1.65rem;
}
 div.styles1037 .awesomplete > ul > li:hover {
     background: #7e3d8f;
     color: #fff;
}
 div.styles1037 .awesomplete li:hover mark {
     background: #56006b;
     color: #fff;
}
div.styles1037 .item-list {
    font-size: 1.5rem;
    line-height: 2.25rem;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-pack: center;
        justify-content: center;
    margin: 0;
    text-transform: uppercase; }

  div.styles1037 li {
    margin: 0.75rem 0 0;
    -ms-flex-align: center;
        align-items: center;
    display: -ms-flexbox;
    display: flex;
    width: 100%; }
    @media (min-width: 32.5em) and (max-width: 46.24em) {
      div.styles1037 li {
        padding: 0 1.5rem; } }
    @media (min-width: 32.5em) {
      div.styles1037 li {
        padding: 0 0.75rem;
        /*width: 50%;*/ } }
    @media (min-width: 61.25em) {
      div.styles1037 li {
        padding: 0 1.5rem; } }

  div.styles1037 a {
    font-size: 1.5rem;
    line-height: 2.25rem;
    padding: 0.375rem 1.125rem;
    background-color: #008f11;
    border: 0;
    color: #fff;
    cursor: pointer;
    font-family: "Akzidenz Grotesk Condensed";
    text-align: center;
    text-transform: uppercase;
    transition: background-color .125s ease-in-out, color .125s ease-in-out;
    text-decoration: none;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-positive: 1;
        flex-grow: 1;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center; }
    div.styles1037 a:hover,
    div.styles1037 a:active,
    div.styles1037 a:focus {
      background-color: #003b00;
      opacity: 1; }
   div.styles1037 a:visited {
      color: #ffffff;
   }
/* Create a widget style with this code and apply it to your custom search */
/* This code will hide the H1 & Breadcrumb when your `widget--bcc-page-search-navigation` is the first widget on the page */
 .js .hidden-header .page-heading, .js .hidden-header .nav--breadcrumb {
     border: 0;
     clip: rect(0, 0, 0, 0);
     height: 1px;
     margin: -1px;
     overflow: hidden;
     padding: 0;
     position: absolute;
     width: 1px;
}
 .js .hidden-header .site-main {
     padding-top: 0;
}
 .js .hidden-header .site-content__inner {
     margin-top: 0;
}

/* You may wish to-do something different here, but it will stop you guys having to deal with browsers without js. Perhaps after go live, we could revisit this. */
 .no-js div.styles1038 {
     display: none;
}

/* Code required to style your search bar as requested */
 div.styles1038 {
     padding: 3.75rem 0 4.5rem;
     background: transparent;
     display: -ms-flexbox;
     display: flex;
     -ms-flex-direction: column;
     flex-direction: column;
     -ms-flex-pack: center;
     justify-content: center;
     max-width: 63rem;
     position: relative;
     text-align: left;
     width: 100%;
}
 @media (min-width: 46.25em) {
     div.styles1038 {
         min-height: 27em;
    }
}
 div.styles1038::before {
     background-color: #003b00;
     background:
       /* top, transparent #a08e63, faked with gradient */ 
       linear-gradient(
         rgba(0, 59, 0, 0.45),
         rgba(0, 59, 0, 0.45)
       ),
       /* bottom, image */
       url("https://www.eldoks.com/ImageRepository/Path?filePath=%2Fdocuments%5CIntranet%5C58%2Fwelcome+center_201411251509191823.jpg");
     background-position: center center;
     background-size: cover;
     background-attachment: fixed;
     background-repeat: no-repeat;
     bottom: 0;
     content: '';
     left: 50%;
     margin-left: -50vw;
     position: absolute;
     top: 0;
     width: 100vw;
     z-index: -1;
}


 div.styles1038 h2 {
    color: #42235e;
    font-family: Akzidenz Grotesk Condensed;
    font-weight: 600;
    text-transform: uppercase;
    margin: 0;
    font-size: 4rem;
    line-height: 3.25rem;
}
 div.styles1038 .awesomplete {
     display: block;
     margin: .5em 0 0;
}
 div.styles1038 .awesomplete > input {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 1.875rem 1.65rem;
     background: #fff;
     border: 0;
     color: #464646;
     display: block;
     width: 100%;
}
 div.styles1038 .awesomplete > ul {
     padding: .3em 0;
     width: 100%;
}
 div.styles1038 .awesomplete > ul > li {
     font-size: 1.25rem;
     line-height: 1.6875rem;
     margin: 0;
     padding: 0.15rem 1.65rem;
}
 div.styles1038 .awesomplete > ul > li:hover {
     background: #7e3d8f;
     color: #fff;
}
 div.styles1038 .awesomplete li:hover mark {
     background: #56006b;
     color: #fff;
}

  div.styles1038 a {
    font-size: 1.5rem;
    line-height: 2.25rem;
    padding: 0.375rem 1.125rem;
    background-color: #008f11;
    align: center;
    width: 300px;
    border: 0;
    color: #ffffff !important;
    cursor: pointer;
    font-family: "Akzidenz Grotesk Condensed";
    text-align: center;
    text-transform: uppercase;
    transition: background-color .125s ease-in-out, color .125s ease-in-out;
    text-decoration: none;
    color: #fffffff;
    display: -ms-flexbox;
    display: inline-block;
    -ms-flex-direction: column;
        flex-direction: column;
    -ms-flex-positive: 1;
        flex-grow: 1;
    height: 100%;
    -ms-flex-pack: center;
        justify-content: center; }
    div.styles1038 a:hover,
    div.styles1038 a:active,
    div.styles1038 a:focus {
      background-color: #003b00;
      opacity: 1; }
   div.styles1038 a:visited {
      color: #ffffff;
   }