/*!
Theme Name: XYPEX
Theme URI: http://graphicallyspeaking.ca
Author: GSSI
Author URI: http://graphicallyspeaking.ca
Description: XYPEX Responsive Theme
Version: 1.0.0
BS: browser-sync start --proxy "xypex.developmentwebsite.ca" --files "css/*.css";
*/


/*--------------------------------------------------------------
# Select2 Plugin
--------------------------------------------------------------*/
.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle}.select2-container .select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--single .select2-selection__rendered{display:block;padding-left:8px;padding-right:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-selection--single .select2-selection__clear{position:relative}.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered{padding-right:8px;padding-left:20px}.select2-container .select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none}.select2-container .select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;white-space:nowrap}.select2-container .select2-search--inline{float:left}.select2-container .select2-search--inline .select2-search__field{box-sizing:border-box;border:none;font-size:100%;margin-top:5px;padding:0}.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:1051}.select2-results{display:block}.select2-results__options{list-style:none;margin:0;padding:0}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none}.select2-results__option[aria-selected]{cursor:pointer}.select2-container--open .select2-dropdown{left:0}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-search--dropdown{display:block;padding:4px}.select2-search--dropdown .select2-search__field{padding:4px;width:100%;box-sizing:border-box}.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{-webkit-appearance:none}.select2-search--dropdown.select2-search--hide{display:none}.select2-close-mask{border:0;margin:0;padding:0;display:block;position:fixed;left:0;top:0;min-height:100%;min-width:100%;height:auto;width:auto;opacity:0;z-index:99;background-color:#fff;filter:alpha(opacity=0)}.select2-hidden-accessible{border:0 !important;clip:rect(0 0 0 0) !important;height:1px !important;margin:-1px !important;overflow:hidden !important;padding:0 !important;position:absolute !important;width:1px !important}.select2-container--default .select2-selection--single{background-color:#fff;border:1px solid #aaa;border-radius:4px}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--default .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--default .select2-selection--single .select2-selection__arrow{height:26px;position:absolute;top:1px;right:1px;width:20px}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow{left:1px;right:auto}.select2-container--default.select2-container--disabled .select2-selection--single{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{display:none}.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text}.select2-container--default .select2-selection--multiple .select2-selection__rendered{box-sizing:border-box;list-style:none;margin:0;padding:0 5px;width:100%}.select2-container--default .select2-selection--multiple .select2-selection__rendered li{list-style:none}.select2-container--default .select2-selection--multiple .select2-selection__placeholder{color:#999;margin-top:5px;float:left}.select2-container--default .select2-selection--multiple .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-top:5px;margin-right:10px}.select2-container--default .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder,.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-search--inline{float:right}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--default.select2-container--focus .select2-selection--multiple{border:solid black 1px;outline:0}.select2-container--default.select2-container--disabled .select2-selection--multiple{background-color:#eee;cursor:default}.select2-container--default.select2-container--disabled .select2-selection__choice__remove{display:none}.select2-container--default.select2-container--open.select2-container--above .select2-selection--single,.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple{border-top-left-radius:0;border-top-right-radius:0}.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa}.select2-container--default .select2-search--inline .select2-search__field{background:transparent;border:none;outline:0;box-shadow:none;-webkit-appearance:textfield}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--default .select2-results__option[role=group]{padding:0}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd}.select2-container--default .select2-results__option .select2-results__option{padding-left:1em}.select2-container--default .select2-results__option .select2-results__option .select2-results__group{padding-left:0}.select2-container--default .select2-results__option .select2-results__option .select2-results__option{margin-left:-1em;padding-left:2em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-2em;padding-left:3em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-3em;padding-left:4em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-4em;padding-left:5em}.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{margin-left:-5em;padding-left:6em}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic .select2-selection--single{background-color:#f7f7f7;border:1px solid #aaa;border-radius:4px;outline:0;background-image:-webkit-linear-gradient(top, #fff 50%, #eee 100%);background-image:-o-linear-gradient(top, #fff 50%, #eee 100%);background-image:linear-gradient(to bottom, #fff 50%, #eee 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic .select2-selection--single:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px}.select2-container--classic .select2-selection--single .select2-selection__clear{cursor:pointer;float:right;font-weight:bold;margin-right:10px}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999}.select2-container--classic .select2-selection--single .select2-selection__arrow{background-color:#ddd;border:none;border-left:1px solid #aaa;border-top-right-radius:4px;border-bottom-right-radius:4px;height:26px;position:absolute;top:1px;right:1px;width:20px;background-image:-webkit-linear-gradient(top, #eee 50%, #ccc 100%);background-image:-o-linear-gradient(top, #eee 50%, #ccc 100%);background-image:linear-gradient(to bottom, #eee 50%, #ccc 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0)}.select2-container--classic .select2-selection--single .select2-selection__arrow b{border-color:#888 transparent transparent transparent;border-style:solid;border-width:5px 4px 0 4px;height:0;left:50%;margin-left:-4px;margin-top:-2px;position:absolute;top:50%;width:0}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear{float:left}.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow{border:none;border-right:1px solid #aaa;border-radius:0;border-top-left-radius:4px;border-bottom-left-radius:4px;left:1px;right:auto}.select2-container--classic.select2-container--open .select2-selection--single{border:1px solid #5897fb}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{background:transparent;border:none}.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{border-color:transparent transparent #888 transparent;border-width:0 4px 5px 4px}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{border-top:none;border-top-left-radius:0;border-top-right-radius:0;background-image:-webkit-linear-gradient(top, #fff 0%, #eee 50%);background-image:-o-linear-gradient(top, #fff 0%, #eee 50%);background-image:linear-gradient(to bottom, #fff 0%, #eee 50%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0)}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;background-image:-webkit-linear-gradient(top, #eee 50%, #fff 100%);background-image:-o-linear-gradient(top, #eee 50%, #fff 100%);background-image:linear-gradient(to bottom, #eee 50%, #fff 100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0)}.select2-container--classic .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;outline:0}.select2-container--classic .select2-selection--multiple:focus{border:1px solid #5897fb}.select2-container--classic .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__clear{display:none}.select2-container--classic .select2-selection--multiple .select2-selection__choice{background-color:#e4e4e4;border:1px solid #aaa;border-radius:4px;cursor:default;float:left;margin-right:5px;margin-top:5px;padding:0 5px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{color:#888;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px}.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{color:#555}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{float:right}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice{margin-left:5px;margin-right:auto}.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove{margin-left:2px;margin-right:auto}.select2-container--classic.select2-container--open .select2-selection--multiple{border:1px solid #5897fb}.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{border-top:none;border-top-left-radius:0;border-top-right-radius:0}.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.select2-container--classic .select2-search--dropdown .select2-search__field{border:1px solid #aaa;outline:0}.select2-container--classic .select2-search--inline .select2-search__field{outline:0;box-shadow:none}.select2-container--classic .select2-dropdown{background-color:#fff;border:1px solid transparent}.select2-container--classic .select2-dropdown--above{border-bottom:none}.select2-container--classic .select2-dropdown--below{border-top:none}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto}.select2-container--classic .select2-results__option[role=group]{padding:0}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:#fff}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px}.select2-container--classic.select2-container--open .select2-dropdown{border-color:#5897fb}


/*--------------------------------------------------------------
# Animation from animate.css
--------------------------------------------------------------*/
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes fadeInUpSmall {
  from {
    opacity: 0;
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInUpSmall {
  animation-name: fadeInUpSmall;
}


/*--------------------------------------------------------------
# Helpers
--------------------------------------------------------------*/

@media screen and ( max-width: 768px ) {
    .mobile-h {
        display: none;
    }
}

@media screen and ( min-width: 768px ) {
    .desktop-h {
        display: none;
    }
}


/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/

html {
  box-sizing: border-box;
  height: 100%;
}
    *, *::before, *::after {
      box-sizing: inherit;
    }

html body {
    min-width: 0;
    height: 100%;
}

#wrapper {
    background: #fff;
    overflow-x: visible;
}

.section-inner,
#bottomlinks {
    max-width: 1200px;
  padding: 0 15px;
    margin: 0 auto;
    position: relative;
}

/* clearfix */
.section-inner::after,
#main::after,
#util ul::after {
    content: "";
    display: table;
    clear: both;
}


/*******************************
Sitefinity
********************************/
@media screen and ( max-width: 767px ) {

  .sf_1col_1_100,
  .sf_2cols_1_25,
  .sf_2cols_2_75,
  .sf_2cols_2_75 .sf_2cols_2in_75,
  .sf_2cols_1_33,
  .sf_2cols_2_67,
  .sf_2cols_2_67 .sf_2cols_2in_67,
  .sf_2cols_1_50,
  .sf_2cols_2_50,
  .sf_2cols_2_50 .sf_2cols_2in_50,
  .sf_2cols_1_67,
  .sf_2cols_2_33,
  .sf_2cols_2_33 .sf_2cols_2in_33,
  .sf_2cols_1_75,
  .sf_2cols_2_25,
  .sf_2cols_2_25 .sf_2cols_2in_25,
  .sf_3cols_1_33,
  .sf_3cols_2_34,
  .sf_3cols_3_33,
  .sf_3cols_2_34 .sf_3cols_2in_34,.sf_3cols_3_33 .sf_3cols_3in_33,
  .sf_3cols_1_25,
  .sf_3cols_2_50,
  .sf_3cols_3_25,
  .sf_3cols_2_50 .sf_3cols_2in_50,.sf_3cols_3_25 .sf_3cols_3in_25,
  .sf_4cols_1_25,.sf_4cols_2_25,.sf_4cols_3_25,.sf_4cols_4_25,
  .sf_4cols_4_25,
  .sf_4cols_2_25 .sf_4cols_2in_25,.sf_4cols_3_25 .sf_4cols_3in_25,.sf_4cols_4_25 .sf_4cols_4in_25,
  .sf_5cols_1_20,.sf_5cols_2_20,.sf_5cols_3_20,.sf_5cols_4_20,.sf_5cols_5_20,
  .sf_5cols_5_20,
  .sf_5cols_2_20 .sf_5cols_2in_20,.sf_5cols_3_20 .sf_5cols_3in_20,.sf_5cols_4_20 .sf_5cols_4in_20,.sf_5cols_5_20 .sf_5cols_5in_20{
    margin: 0!important;
    float: none!important;
    width: auto!important;
  }

}



/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/

#header {
    z-index: 500;
    position: fixed;
    width: 100%;
    background-color: #fff;
}
@media screen and ( min-width: 768px ) {
    #header {
    }
}

.h-w2 {
    padding-bottom: 0;
    position: static;
}

@media screen and ( min-width: 768px ) {
    .h-w2 {
        height: 130px;
        position: relative;
        padding-bottom: 30px;
    }
}

/*--------------------------------
## Logo
----------------------------------*/

@media screen and ( max-width: 767px ) {
    #logo {
        color: #505050;
        display: block;
        padding-top: 10px;
        padding-bottom: 10px;  
    }

    #logo img {
      max-width: 50%;
    }

    #logo div{
      -webkit-transition: all 250ms cubic-bezier(0.575, 0.070, 0.625, 0.960); 
   -moz-transition: all 250ms cubic-bezier(0.575, 0.070, 0.625, 0.960); 
     -o-transition: all 250ms cubic-bezier(0.575, 0.070, 0.625, 0.960); 
        transition: all 250ms cubic-bezier(0.575, 0.070, 0.625, 0.960); /* custom */
    }

    #logo div br {
        display: none;
    }
}

@media screen and ( min-width: 768px ) {
    #logo {
        display: flex;
        vertical-align: middle;
        height: 94px;
        align-items: center;
        position: absolute;
        top: 0px;
        left: 15px;
        max-width: 600px;
    }
    #logo img {
       vertical-align: middle;
       display: block;
    }

    #logo div {
        padding-top: 15px;
        padding-left: 10px;
        line-height: 1.3;
        color: #000;
        font-size:17px;
        max-width: 305px;
    }
}

/*--------------------------------
## Utilities
----------------------------------*/
#util {
    position: absolute;
    right: 15px;
    top: 20px;
    display: none;
}
    #util ul {
        margin: 0;
    }

@media screen and ( min-width: 768px ) {
    #util {
        display: block;
    }
}


#util li {
    float: left;
    position: relative;
    padding-left: 13px;
}
    #util li:not(:first-child) {
        border-left: 1px solid #b7b7b7;
    }
    #util li:not(:last-child) {
        padding-right: 13px;
    }

#util a {
    color: #28aae1;
    font-size: 15px;
    white-space: nowrap;
    line-height: 35px;
    display: block;
}
    #util .can-map a {        
        padding-left: 50px;
        position: relative;
        transition: color 0.2s ease-out;
    }
        #util a:hover {
            color: #000;
        }

    #util .can-map a::before {
        content:"";
        position: absolute;
        left: 0;
        top: 50%;
        width: 44px;
        height: 24px;
        margin-top: -12px;
        background: url(../imgs/util-map.png) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        transition: transform 0.2s ease-out;
    }
        #util .can-map a:hover::before {
            background-position: 0 -24px;
        }

.trigger-search {
    display: block;
    width: 22px;
    height: 35px;
    background: red;
    vertical-align: middle;
    text-indent: -999em;
    background: url(../imgs/search-trigger-bg.png) no-repeat ;
    -webkit-background-size: 22px auto;
    background-size: 22px auto;
}
    .trigger-search:hover {
        background-position: 0 -35px;
    }

/*--------------------------------
## Search
----------------------------------*/        
.srch {
    position: fixed;   
    right: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.75);
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    animation-duration: 0.2s;
    animation-fill-mode: both;
}
    .search-is-active .srch {
        display: flex;
        animation-name: fadeIn;
    }
.srch > div {
    padding: 50px 25px;
    background: #fff;
    width: 100%;
    max-width: 600px;
    position: relative;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}
    .search-is-active .srch > div {
        animation-name: fadeInUp;
    }
    .srch > div::before {
        content: "Search XYPEX";
        display: block;
        font-size: 21px;
        font-weight: 700;
        text-align: center;
        margin-bottom: 25px;
        text-transform: uppercase;
    }



@media screen and ( min-width: 768px ) {
    .srch > div {
        padding: 50px 50px;
    }
}

.fieldset {
    width: 260px;
}
.srch .sfsearchBox {
    position: relative;
    padding-right: 70px;
    border:  1px solid #b7b7b7;
    
}

.srch input[type="text"] {
    display: inline-block;
    background: #fff;
    height: 50px;
    padding: 0 10px;
    width: 100%;
    font-size: 16px;
    border: 0;
    font-weight: 700;
}
    .srch input[type="text"]:focus {
        outline:  none;
    }

/*.sfsearchSubmit {
    background: url(../imgs/search-bg.png) #0082c8;
    background-size: 200px 50px;
    color: #fff;
    border: none;
    position: absolute;
    right: 0;
    top: -1px;
    bottom: -1px;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px!important;
    width: 100px;
    overflow: hidden;
    cursor: pointer;
    text-indent: -999em;
    transition: all 0.2s ease-out;
}
    .sfsearchSubmit:hover,
    .srch--search-ready:hover .sfsearchSubmit {
        background-position: -100px 0;
    }
        .sfsearchSubmit:hover {
            background-color: #28aae1;
        }*/

.srch .sfsearchBox input.sfsearchSubmit{
  padding:0 10px;
  margin:0;
  color:#fff;
  position: absolute;
  top:0;
  right:0;
  height:100%;
}

.close-search {
    position: absolute;
    right: 0;
    top: 0;
    width: 36px;
    height: 36px;
    display: block;
    background: #0082c8;
    color: #fff!important;
    text-align: center;
    font-weight: 700;
    line-height: 36px;
}
    .close-search:hover {
        background-color: #28aae1;
    }


/*--------------------------------------------------------------
# Mobile Navigation
--------------------------------------------------------------*/
.mobilenav-triggers {
    background: #0082c8;
    color: #fff;
    left: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    position: relative;
    top: 0;
    bottom: 0;
    right: 50%;
    width: 100vw;
    padding: 0 15px;
    height: 40px;
    line-height: 30px;
    float: left;
}

  .mobilenav-triggers > div{
    display: flex;
    align-items:center;
  }

.mobilenav-triggers .tb-menu {
    color: #fff;
    text-transform: uppercase;
    font-size: 14px;
    display: inline-block;
    height:39px;
    line-height: 39px;
    width:50%;
    width:calc(100% - 50px);
}

.mobilenav-triggers .tb-region {
    display: block;
    width: 45px;
    height: 28px;
    background: red;
    float: right;
    text-indent: -9999em;
    overflow: hidden;
    position: relative;
    top: 0px;
    border-left: 1px solid #fff;
    background: url(../imgs/mobile-util-map.png) no-repeat right center;
    background-size: auto 23px;
}


/*--------------------------------------------------------------
# Main Navigation Mobile Version
--------------------------------------------------------------*/


@media screen and ( max-width: 767px ) {



    #mainnav ul{
        list-style: none;
        padding: 0;
        margin: 0;
        clear:both;
        display: none;
    }

    #util {
        display: block;
    }
    #util a {
        display: none;
    }
        #util li:last-child {
            border-left: 0;
            float: right;
        }
        #util a.trigger-search {
            display: block;
        }

    #mainnav ul.navlevel-3>li>a {
      text-transform: capitalize;
    } 

    #mainnav ul.navlevel-4>li {
      height: 39px;
    }

    #mainnav ul.navlevel-4>li>a {
          padding: 13px 25px;
          margin-left: 20px;
          font-size: 12px;
    }

/*
  You can easily change the direction by inverting the numbers
  and replacing the left by right.
*/

  /*
    Normal Navigation State
  -------------------------------*/
  #navsection{
    width: 270px;
    position: absolute;
    overflow: hidden;
    top:0;
    left: -270px;
    height: 1000vh;  
    z-index:9000;
    transition: 0.3s all ease-out;
  }

    /*enhance if possible*/
    #navsection{
      opacity: 0.7;
      transition: transform 300ms ease;
      transform: translate3d(0, 0, 0) scale3d(0.9, 0.9, 0.9);
      transform-origin: 50% 0%;
    }

  /*
    Active Navigation State
  -------------------------------*/
  .activate-nav #navsection{
    left: 0;
  }
    /*enhance if possible*/
   .activate-nav #navsection{
      left: -270px;
      opacity: 1;
      transform: translate3d(-100%, 0, 0);
    }
  

  /*
    Activate if you wish to push 
    the content when menu opens
  -------------------------------*/
    
  .w-w1{
    position: relative;
    width: 100%;
    left: 0;
  }
  .activate-nav .w-w1 {
    left: 270px;
  }

  .w-w1 {
    left: 0 !important;
    /* transform: translate3d(0, 0, 0); */
    transition: transform 300ms ease;
    backface-visibility: hidden;
  }
    .activate-nav .w-w1 {
      transform: translate3d(270px, 0, 0) scale3d(1, 1, 1);
    }
  
  #navsection{
    left: -270px;
  }
    .activate-nav #navsection{
      left: -270px;
      opacity: 1;
      transform: translate3d(0, 0, 0);
      width: 300px;
    }  


    
  /*
    Inner Nav Wrapper
  -------------------------------*/
  .navblock{
    overflow: auto;
    height: 100%;
    background:  #0082c8;
    padding: 0;
  }
      .no-js #mainnav .active>ul{display: block;}

    #mainnav li{
      position: relative;
      display: block;
    }

    /*
      Untrigger
    -------------------------------*/    
    .overlaytrigger{
      position: absolute;
      left: 30px;
      top: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
      display: none;
      background: rgba(0, 0, 0, 0.7);
    }
      /*activate*/
      .activate-nav .overlaytrigger{
        display: block;
      }


  /*
    Main Navigation Styles Drop Icons
  -------------------------------*/
  #mainnav .droptrigger{
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 40px;
    text-align: center;
    cursor: pointer;
    display: block;
    text-align: right;
  }
    #mainnav .navlevel-1 {
        background: none;
    }
    /*first level version*/
    #mainnav .navlevel-1>li>.droptrigger::before{
        content:"";
        display: inline-block;
        width: 0; 
        height: 0; 
        position: relative;
        right: 10px;
        top: 12px;
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid #fff;
    }
      #mainnav .navlevel-1>li.active>.droptrigger::before{
        transform: rotate(-180deg);
      }

       #mainnav .navlevel-1>li.active {
        background: #28aae1;
       }

    /*second level version*/

    #mainnav .navlevel-2 {
        margin: 0;
        padding-bottom: 15px;
    }

        #mainnav .navlevel-2 .droptrigger {
            
        }

    #mainnav .navlevel-2>li>.droptrigger::before,
    #mainnav .navlevel-2>li>.droptrigger::after{      
      font-family: Arial, sans-serif;
      font-size: 17px;
      color: #fff;
      font-weight: 700;
      line-height: 24px;
      margin-right: 10px;
    }
      /*Plus*/
      #mainnav .navlevel-2>li>.droptrigger::before, #mainnav .navlevel-3>li>.droptrigger::before{
        display: inline-block;
        content:"\2B";
      }

      #mainnav .navlevel-2>li>.droptrigger::before {
        position: relative;
        top: 7px;
      }

      #mainnav .navlevel-3>li>.droptrigger::before {
        position: relative;
        top: 8px;
        left: -9px;
      }

       #mainnav .navlevel-2>li>.droptrigger::after {
        position: relative;
        top: 6px;
        left: -1px;
       }

        /*on active*/
        #mainnav .navlevel-2>li.active>.droptrigger::before, #mainnav .navlevel-3>li.active>.droptrigger::before{display: none;}

      /*Minus*/
      #mainnav .navlevel-2>li>.droptrigger::after, #mainnav .navlevel-3>li>.droptrigger::after{
        display: none;
        content:"\2D";
        width: 8px;
        height: 2px;
      }

      #mainnav .navlevel-3>li>.droptrigger::after {
        position: relative;
        top: 8px;
        left: -11px;
      }

        /*on active*/
        #mainnav .navlevel-2>li.active>.droptrigger::after, #mainnav .navlevel-3>li.active>.droptrigger::after{
          display: inline-block;
        }

      #AutoNavMainnav_T3E0BEDF3011_ctl00_ctl00_ctl02_ctl04_ctl01_ctl01_childNodesContainer > li {
        display: none;
      }

      #AutoNavMainnav_T3E0BEDF3011_ctl00_ctl00_ctl02_ctl04_ctl01_childNodesContainer > li:nth-child(1) > span {
        display: none;
      }

  /*
    Main Navigation Styles First Level + Utility
  -------------------------------*/
  #mainnav .navlevel-1{ display: block; }
  #mainnav .navlevel-1>li {
    transition: 0.2s all ease-out;
  }
  #mainnav .navlevel-1>li,
  #topUtility a {
    border-bottom: 1px solid #28aae1;
    border-right: 0;
    width:100%;
  }
    #mainnav .navlevel-1>li>a,
    #topUtility a {
      display: block;
      color: #fff;
      text-transform: uppercase;
      font-weight: 700;
      padding: 15px 13px;
      font-size: 16px;
      line-height: 1;
      text-decoration: none;
    }
       #topUtility a{
        display: block;
       }

  

  /*
    Main Navigation Styles Second Level
  -------------------------------*/
  #mainnav .navlevel-2>li {
    border-right: 0;
  }
    #mainnav .navlevel-2>li + li {
        margin-top: 5px;
    }
    #mainnav .navlevel-2>li:first-child { border-top: 0; }

  #mainnav .navlevel-2>li>a {
    padding: 9px 5px 4px 25px;
    font-weight: 400;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    display: inline-block;
  }

   /*
    Main Navigation Styles Third Level
  -------------------------------*/
  #mainnav .navlevel-3>li {
    background: #eee;
    border-top: 1px solid #ddd;
  }
  #mainnav .navlevel-3>li>a {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 400;
    padding: 13px 25px;
    font-size: 12px;
    line-height: 1;
    text-decoration: none;
    color: #111;
    margin-left: 10px;
  }

}

/*--------------------------------------------------------------
# Dekstop Navigation
--------------------------------------------------------------*/


@media screen and ( min-width: 768px ) {
    #mainnav {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding:0 15px;
    }


    .topnav,
    .country-nav-list {
        position: relative;
        padding: 0 15px 6px 15px;
    }
        .topnav::before,
        .country-nav-list:before {
            content: "";
            left: 50%;
            margin-left: -50vw;
            margin-right: -50vw;
            position: absolute;
            top: 0;
            bottom: 0;
            right: 50%;
            width: 100vw;
            background-color: #0082c8;
            z-index: 5;
            border-bottom: 6px solid #28aae1;
        }
}
/*--------------------------------
## First Level
----------------------------------*/
@media screen and ( min-width: 768px ) {
    .topnav > ul,
    .country-nav-list > ul {
        display: flex;
        flex-direction: row;
        position: relative;
        z-index: 10;
        background: none;
    }

    .topnav > ul > li,
    .country-nav-list > ul > li {
        display: block;
        flex-grow: 1;
        border: 0;
        position: relative;
    }
        .topnav > ul > li:not(:first-child),
        .country-nav-list > ul > li:not(:first-child) {
            border-left: 1px solid #28aae1;
        }

    .topnav > ul > li > a,
    .country-nav-list > ul > li > a{
        display: block;
        text-align: center;
        line-height: 30px;
        white-space: nowrap;
        font-size: 14px;
        font-weight: 700;
        text-transform: uppercase;
        color: #fff;
        border-bottom: 6px solid transparent;
        margin-bottom: -6px;
        transition: background 0.2s ease-out;
    }
        .topnav > ul > li:hover a,
        .topnav > ul > li > a.sfSel,
        .country-nav-list > ul > li:hover a,
        .country-nav-list > ul > li > a.sfSel {
            background: #28aae1;
            color: #fff;
        }
}
/*--------------------------------
## Second Level
----------------------------------*/
@media screen and ( min-width: 768px ) {
    .topnav > ul > li ul,
    .country-nav-list > ul > li ul{
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        background: #28aae1;
        width: 200px;
        border: 0;
        margin-top: 6px;
        z-index: 10;
        animation-duration: 0.3s;
        animation-name: fadeInUpSmall;
    }
        .topnav > ul > li:hover > ul,
        .country-nav-list > ul > li:hover > ul{
            display: block;
            animation-fill-mode: both;
        }
        .topnav > ul > li:last-child:hover > ul,
        .country-nav-list > ul > li:last-child:hover > ul{
            left: auto;
            right: 0;
        }

    .topnav > ul > li ul > li,
    .country-nav-list > ul > li ul > li{
        border:  0;
    }
        .topnav > ul > li ul > li:not(:first-child),
        .country-nav-list > ul > li ul > li:not(:first-child){
            border-top: 1px solid #0082c8;
        }

    .topnav > ul > li ul > li > a,
    .country-nav-list> ul > li ul > li > a{
        display: block;
        color: #fff;
        padding: 10px;
        font-weight: 700;
        transition:  background 0.2s ease-out;
    }

    .topnav > ul > li ul > li:hover > a,
    .country-nav-list > ul > li ul > li:hover > a{
        background: #0082c8;
        color: #fff;
    }
      
}
/*--------------------------------------------------------------
# Content Banner
--------------------------------------------------------------*/
#ph_bannner_ctl00_ctl00_ctl00_detailContainer > a {
    display: none;
}

@media screen and ( min-width:768px ) {
    #ph_bannner_ctl00_ctl00_ctl00_detailContainer > a {
        display: block;
        margin-bottom: 15px;
    }
}

.home-banner-content {
    background: url(https://www.xypex.com/images/home/concrete-waterproofing.jpg) no-repeat center;
    width: 100%;
    max-width: 960px;
    margin:  auto;
    height: 81px;
    font-size: 12px;
    color: #fff;
}
    .home-banner-content p {
        padding: 42px 0px 0px 31px;
        line-height: 15px;
    }


/*--------------------------------------------------------------
# CTAs
--------------------------------------------------------------*/

#ctas > ul {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
}

#ctas > ul > li {
    width: 100%;
}

@media screen and ( min-width: 768px ) {
   #ctas {
        margin-bottom: 15px;
        margin-left: -15px;
        margin-right: -15px;
    }
    #ctas > ul > li {
        width: 33%;
        padding: 0 15px;
    }
      #ctas > ul > li.social{
          width: 100%;
          margin-top: 15px;
      }
        #ctas > ul > li.mobile-social {
            display: none;
        }
}

@media screen and ( min-width: 960px ) {
     #ctas > ul > li,
      #ctas > ul > li.social{
      width:25%;
      margin-top:0;
    }
}

/*--------------------------------
##  Find a Product CTA
----------------------------------*/

#learn-more-link a{
  background: #0082c8;
  display: inline-block;
  padding:0 10px;
   color: #fff!important;
}

@media screen and ( min-width: 768px ) {
    li.cta-links {
        position: relative;
    }
        .cta-find-a-product {
            height: 100%;
            padding: 15px;
            border-radius: 5px;
            background: url(https://www.xypex.com/imgs/skin/bg/cta-products.jpg) no-repeat center bottom / cover;
        }

        #or-link {
          color: #fff;
        }
}

#prod-list select {
  width: 100%;
  padding: 2px 5px;
}

/*--------------------------------
## Regular List CTA
----------------------------------*/

@media screen and ( max-width: 767px ) {
    .cta-content {
        background: #0082c8;
        margin-bottom: 15px;
        left: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        position: relative;
        right: 50%;
        width: 100vw;
        padding: 15px;
        color: #fff;
        font-size: 17px;
    }
}
@media screen and ( min-width: 768px ) {
    .cta-links > div {
        height: 100%;
    }
    #ctas .cta-content {
        background: url(https://www.xypex.com/imgs/skin/bg/cta-article.jpg) no-repeat right bottom;
        height: 100%;
        border-radius: 5px;
        padding: 15px;
    }
}

#ctas .cta-content h3,
.cta-find-a-product h3 {
    color: #fff;
    border-bottom: 0;
    margin: 0;
    font-size: 20px;
    padding: 0;
    margin-bottom: 10px;
} 

.cta-find-a-product h3 {
  color: inherit;
}

.cta-find-a-product-content{
  
  line-height: 1.2em;
  margin-bottom: 10px;
  max-width: 175px;
}

@media screen and ( min-width: 768px ) {
  .cta-find-a-product-content{
    color:#fff;
  }
}

.cta-find-a-product {
  margin-bottom: 20px;
}

@media screen and ( min-width: 768px ) {
    #ctas .cta-content h3,
    .cta-find-a-product h3 {
        margin-bottom: 5px;
    }

    .cta-find-a-product h3 {
      color: #fff;
    }

    .cta-find-a-product {
      margin-bottom: 0;
    }


}

#ctas .cta-content ul {
    margin: 0;
}

.cta-content li {
    list-style: disc;
    line-height: 1.4;
}

@media screen and ( min-width: 768px ) {
    .cta-content li {
        color: #0081c6;
    }
}

@media screen and ( max-width: 767px ) {
  .cta-content a{
      color: #fff !important;
  }
}

@media screen and ( min-width: 768px ) {
    .cta-content a:link {
        color: #0081c6;
    }
}

/*--------------------------------
## Distributor CTA
----------------------------------*/

@media screen and ( min-width: 768px ) {
    li.cta.map {
        position: relative;
    }
        li.cta.map #footerLinks {
            height: 100%;
            min-height: 124px;/*fixes weird firefox bug*/
            padding: 15px;
            border-radius: 5px;
            background: url(https://www.xypex.com/imgs/skin/bg/cta-location.jpg) no-repeat center bottom / cover;
        }
        li.cta.map #footerLinks::after {
            content: "";
            height: 100%;
        }
}

.cta.map h3 {
    display: none;
}
@media screen and ( min-width: 768px ) {
    .cta.map h3 {
        display: block;
        color: #fff;
        border-bottom: 0;
        margin: 0;
        font-size: 20px;
        padding: 0;
        margin-bottom: 5px;
        line-height: 1;
    }
}

.cta.map select {
    display: inline-block;
    width: 70%!important;
    float: left;
    height: 32px!important;
    font-size: 17px;
    padding: 0 10px;
}

.cta.map img {
    width: 250px;
    width: 100%;
    max-width: 250px;
    height: 23px;
    height: auto;
    margin-bottom: 5px;
}

.cta.map .jqTransformButton {
   /* width: 30%;*/
    float: left;
    margin: 0;
    padding-left: 10px;
}

.cta.map .jqTransformButton{
   
    background: none;
    padding: 0;
    height: 32px;
    background: #0082c8;
    line-height: 33px;
    text-align: center;
    color: #fff;
    font-size: 17px;
    font-weight: normal;
    margin-left:5px;
    padding:0 10px;
}
    .cta.map .jqTransformButton span::before {
        content: "GO";
    }
    .cta.map .jqTransformButton span span {
        display: none;
    }


/*--------------------------------
## Upcoming Events CTA
----------------------------------*/  
li.cta.social {
    padding: 15px 0;
    font-size: 17px;
    font-weight: 400;
    color: #505050;
}

@media screen and ( max-width: 767px ) {
    li.cta.social {
        order: -1;
        margin-bottom: 15px;
        margin-top: -40px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
    }
}
@media screen and ( min-width: 768px ) {
    li.cta.social .event{
        padding: 15px;
        border-top: 1px solid #999;
        border-bottom: 1px solid #999;
        line-height: 1;
        font-size: 15px;
        height: 100%;
    }
    li.cta.social .sfContentBlock {
        height: 100%;
    }
}

.cta.social h3 {
    color: #ec2227;
    margin: 0;
    text-transform: uppercase;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 0;
}
.cta.social h3 + br {
    display: none;
}

.cta.social strong {
    font-size:  17px;
    font-weight: 700;
    color: #505050;
}
@media screen and ( min-width: 768px ) {
    .cta.social strong {
        font-size: 15px;
    }
}
@media screen and ( min-width: 960px ) {
    .cta.social strong {
        font-size: 17px;
    }
}
.cta.social a:link {
    color: #0081c6!important;
}


/*--------------------------------
## Mobile Social
----------------------------------*/ 
.mobile-social {
    padding: 20px 0;
}

.contact-head-office{
  display: block;
  margin-bottom: 10px;
}


/*--------------------------------------------------------------
# Main
--------------------------------------------------------------*/
#main {
    position: relative;
    top: 130px;
}

#main .m-w1 {
    padding-top: 98px;
    background: #fff;
}

    #main .m-w1.content {
        padding-top: 0px;
    }

#main .m-w2 {
    background: #fff;
  padding-top: 0;
}

@media screen and ( min-width: 768px ) {

    #main .m-w2 {
        padding-top:12px;
    }

}

/* #subnav, #content {
    float: left;
}

    #subnav ul li {
        border-bottom: 1px solid #999999;
    }

        #subnav ul li a {
            color: #231f20;
            font-weight: bold;
            display: block;
            padding: 7px 0;
        }

            #subnav ul li a.active, #subnav ul li a:hover {
                color: #345b88;
                text-decoration: none;
            }

    #subnav h3 {
        background-color: #939598;
        color: white;
        font-size: 1.1em;
        padding: 2px 10px;
    }
 */


/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
#footer {
    background: #a7a9ac;
    padding: 15px 0;
    position: relative;
    top: 130px;
}

@media screen and ( min-width: 769px ) {
    #footer {
        padding: 0;
    }
}
#bottomlinks {
    margin-bottom: 15px;
}
    #bottomlinks .sfNavHorizontalDropDown {
        background: none;
    }
    #bottomlinks .sfNavHorizontalDropDown li {
        border: none;
    }

@media screen and ( min-width: 769px ) {
    #bottomlinks {
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 30px;
    }
}

@media screen and (max-width: 767px){
  #bottomlinks {
    display: none;
  }
}

/*--------------------------------
## First Level
----------------------------------*/
#bottomlinks .sfNavList > li {
    border-bottom: 1px solid #fff;
    position: relative;
}
    #bottomlinks .sfNavList > li:first-child {
        border-top: 1px solid #fff;
    }

    #bottomlinks .sfNavList > li .droptrigger {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        height: 45px;
    }

@media screen and ( min-width: 769px ) {
    #bottomlinks .sfNavList > li .droptrigger {
        display: none;
    }
    #bottomlinks .sfNavList {
        display: flex;
        width: auto;
        margin-left: -15px;
        margin-right: -15px;
        flex-wrap: wrap;
    }
    #bottomlinks .sfNavList > li {
        border: none;
        width: 16.6%;
        padding: 0 15px;
    }
        #bottomlinks .sfNavList > li:first-child {
            border: none;
        }
}

#bottomlinks .sfNavList > li > a {
    font-size:  21px;
    color: #000;
    display: block;
    padding: 12px 15px;
    line-height: 1;
    background: none!important;
}
    #bottomlinks .sfNavList > li > a::before {
        content: "+";
        font-size: 21px;
        display: inline-block;
        margin-right: 10px;
    }

@media screen and ( min-width: 769px ) {
    #bottomlinks .sfNavList > li > a {
        font-size: 20px;
        padding: 0;
        margin-bottom: 15px;
    }
    #bottomlinks .sfNavList > li > a::before {
        display: none;
    }
}

/*--------------------------------
## Second Level
----------------------------------*/
#bottomlinks .sfNavList > li > ul {
    display: none;
}

@media screen and ( min-width: 769px ) {
    #bottomlinks .sfNavList > li > ul {
        display: block!important;
    }
}

#bottomlinks .sfNavList > li > ul > li {
    line-height: 1.3;
}
    #bottomlinks .sfNavList > li > ul > li + li {
        margin-top: 6px;
    }
#bottomlinks .sfNavList > li > ul > li > a {
    color: #fff;
     background: none!important;
     font-size: 14px;
    line-height: 1.3em;
    display: block;
}

@media screen and ( min-width: 769px ) {
    #bottomlinks .sfNavList > li > ul > li > a {
        line-height: 1.3em;
    }
    #bottomlinks .sfNavList > li > ul > li > a:hover {
        text-decoration: underline;
    }
}

@media screen and ( max-width: 769px ) {
    #bottomlinks .sfNavList > li > ul {
        padding-left: 38px;
        margin-bottom: 20px;
        margin-top: 10px;
    }
    
    #bottomlinks .sfNavList > li > ul > li + li {
        margin-top: 15px;
    }
    #bottomlinks .sfNavList > li > ul > li > a {
        font-size: 16px;
    }
}

/*--------------------------------
## Third Level
----------------------------------*/
#bottomlinks .sfNavList > li > ul > li ul {
    display: none;
}

/*--------------------------------
## Bottom Links
----------------------------------*/
.f-w2 {
    margin-top: 0!important;
} 
.f-w2 .top-util {
    margin: 0;
    padding: 0;
   color: #fff;
}


.f-w2 #copyright {
    margin: 0!important;
}
    .f-w2 #copyright .sfContentBlock{
        margin: 0!important;
    }

@media screen and ( min-width: 769px ) {
    .f-w2 #copyright {
        border-top: 1px solid #fff;
        padding: 15px 0;
    }
}

#footer .f-w2 a {
    color: #fff;
    position: relative;
    display: block;
    background: none!important;
}

    #footer .f-w2 a::after {
        content: "";
        width: 1px;
        height: 10px;
        background: #fff;
        position: absolute;
        right: -10px;
        top: 50%;
        margin-top: -5px;
    }

    .top-util > li:last-child a::after {
        display: none;
    }


.top-util > li {
    display: inline-block;
    clear: none;
    margin-right: 15px;
    font-size: 14px;
}
    .top-util > li:first-child {
     /*   display: block;
        clear: both;
        margin: 0;*/
    }
    .top-util > li:first-child + li {
        padding-left: 0;
    }

#footer .f-w2 a.switchlink {
    display: none;
}

.homepagebd #ctas {
    padding-top: 20px;
}



#content {
    width: 744px;
    position: relative;
    left: 200px; /* Positive width of #subnav */
    top: 0;
    border-left: 1px solid #999999;
    padding: 0 0 0 16px;
    min-height: 380px;
    margin-bottom: 30px;
}
.video-img {
    padding: 8px 5px 0;
}

.content-general {
  background: url(https://www.xypex.com/imgs/skin/bg/left-content-grey-bg.jpg) no-repeat scroll 0 0 transparent;
    float: left;
    margin: 0 10px 38px 15px;
    margin-left: 0;
    overflow: hidden;
    padding-bottom: 11px;
    position: relative;
    width: 207px;

}

.content-general h3 {
  /*  color: #fff;
    margin-left: 10px;
    margin-top: 8px;
    width: 192px; as breaks this http://xypex.developmentwebsite.ca/products/installations/coating
}

.content-general {
    /* background: url(../imgs/skin/bg/left-content-grey-bg.jpg) no-repeat scroll 0 0 transparent;
    float: left;
    margin: 0 10px 38px 15px;
    overflow: hidden;
    padding-bottom: 11px;
    position: relative;
    width: 207px; */
    padding-left: 0 !important;
    width: auto!important;
    /*width: 100% !important;*/
    margin-right: 30px!important;
}

.play-video {
    clear: both;
    /* float: left; */
    margin: 0 0 0 10px;
}

    .play-video a {
        color: #fff !important;
        background: url(../imgs/skin/bg/play-btn.png) no-repeat left 0;
        display: block;
        float: left;
        padding: 2px 0 2px 26px;
    }

        .play-video a:hover {
            background: url(../imgs/skin/bg/play-btn.png) no-repeat left -22px;
            color: #e2e2e2 !important;
        }

.content-right {
   /* float: right;
    width: 495px;
    margin-bottom: 30px;*/
    clear:both;
}

    .content-right p img {
        float: left;
        margin: 0 11px 5px 0;
    }

    .content-right p strong, strong.dark {
        color: #1a1a1a;
    }

    .content-right ol {
        margin-left: 1.8em;
    }

        .content-right ol li {
            margin-bottom: 1.3em;
        }

.breadcrumb-area {
    padding-top: 10px;
}

.bread-crumb {
    font-size: .95em;
    padding-bottom: 5px;
}
    .bread-crumb .sfBreadcrumbNodeSeparator {
        display: none;
    }
    .bread-crumb a, .bread-crumb a:visited {
        color: #666 !important;
        background: url(../imgs/skin/bg/breadcrumb-arrow.png) right center no-repeat;
        margin-right: 2px;
        padding: 0 12px 0 0!important;
        font-size:12px;
    }
      @media all and (min-width: 640px){
        .bread-crumb a{
          font-size:14px;
        }
      }

        .bread-crumb a:hover {
            color: #345b88;
            text-decoration: underline;
            background: url(../imgs/skin/bg/breadcrumb-arrow.png) right center no-repeat!important;
            border-color: transparent !important;
        }

        .bread-crumb a.active {
            color: #345b88;
            background: none;
            padding: 0;
            margin: 0;
        }

.log {
    float: left;
}

    .log img {
        padding: 10px 20px 10px 0;
    }

.pr-1 a {
    padding: 0 4px;
}

    .pr-1 a.first {
        padding-left: 0;
    }



.overviewWrap {
    padding-top: 20px;
    padding-bottom: 20px;
    list-style-type: none !important;
    overflow: hidden;
   /* border-bottom: 1px solid #857f7f;*/
    border-top: 1px solid #b1acac;
}

  .overviewWrap:last-of-type{
    border-bottom: 1px solid #b1acac; /*works for http://xypex.developmentwebsite.ca/products/coating-products */
  }

  .buckets .overviewWrap:last-of-type{
    border-bottom:none;
  }

.overviewBody {
    min-height: 130px;
    margin-left: 143px;    
}

.overviewWrap img {
    float: left;
    /*padding-right: 50px;*/
}

.overviewWrap h2 {
    color: #000000 !important;
    font-size: 17px !important;
    font-weight: bold;
    margin-bottom: 8px !important;
}

.overviewWrap p.sep {
    padding: 20px 0;
    margin: 0;
}

.overviewWrap .readmore, .buckets .readmore {
    /*background: url(../imgs/skin/bg/read-more-btn.png) no-repeat;
    background: #335B88;
    border-radius: 4px;
    text-align: left;
    display: block;
    padding: 5px 10px;
    display: inline-block;
    color: #fff;
    font-weight: bold;
    font-size: 0.95em;*/
    font-size: 16px;
    color: #0081c6;
}

  /*  .overviewWrap .readmore:hover, .buckets .readmore:hover {
        color: #fff;
    }*/

.buckets .readmorefloat {
    float: left;
    margin-right: 15px;
}
  /*breaks product page*/
   /* .overviewWrap .readmore:hover {
        color: #fff;
    }

.overviewWrapEducation img {
    padding: 0 !important;
    max-width: 140px;
    margin-right: 15px;
    margin-bottom: 15px;
}

.overviewWrapEducation h2 {
    color: #0081C6 !important;
    font-size: 12px !important;
    font-weight: bold !important;
    margin: 0 !important;
}

.overviewWrapEducation .readmore {
    background: url(../imgs/skin/bg/read-more-btn2.png) no-repeat;
    background: none;
    width:  auto;
    height: auto;
    border-radius: 4px;
    padding: 5px 10px;
    margin: 20px 0;
    font-size: 16px;
    color: #0081c6!important;
    font-weight: 400;
    padding: 0;
    margin: 0;
    margin-top: 20px;
}

.content-blts {
    margin: 0 !important;
}

    .content-blts li {
        list-style-type: none !important;
        background: url(../imgs/skin/bg/cta-bullet.png) no-repeat left 7px;
        padding-left: 9px;
    }

ol.faq {
    font-weight: bold;
    display: block;
}

    ol.faq a {
        background: url("../imgs/skin/bg/read-link.jpg") no-repeat scroll 0 0 transparent;
        overflow: hidden;
        text-indent: -1900px;
        display: inline-block;
        width: 60px;
        line-height: 9px;
        cursor: pointer;
    }

        ol.faq a.close {
            background: url("../imgs/skin/bg/close-link.jpg") no-repeat scroll 0 0 transparent;
            display: inline-block;
            line-height: 9px;
            overflow: hidden;
            text-indent: -1900px;
            width: 60px;
            cursor: pointer;
        }

        ol.faq a:hover {
            color: #658ebe;
        }

    ol.faq li {
        padding-bottom: 10px;
        border-bottom: 1px solid #B3B3B3;
    }

    ol.faq li li {
        padding-bottom: 5px;
        margin-bottom:0;
        border-bottom: 0;
    }

    ol.faq .faqDesc a {
        background: none;
        display: inline;
    }

    ol.faq .faqDesc {
        display: none;
        font-weight: normal;
        padding-top: 6px;
    }





div.sepline {
    border-bottom: 1px solid #B3B3B3;
    float: none;
    margin: 10px 0 16px;
}

.content-right ul {
    margin: 0 !important;
    padding: 0 !important;
}

    .content-right ul li {
        list-style-type: none !important;
        background: url(/imgs/skin/bg/cta-bullet.png) no-repeat left 7px;
        padding-left: 15px;
        line-height: 1.5em;
    }

.side-bulleted li {
    list-style-type: none !important;
    background: url(/imgs/skin/bg/cta-bullet.png) no-repeat left 7px;
    padding-left: 11px;
}


/* Banners */
.bannerImgWrap {
    display: none;
}

.bannerLarge {
    width: 744px;
    height: 184px;
    background-repeat: no-repeat;
    width: auto;
    margin-bottom: 15px;
    background-size: 100% auto;
}

.bannerSmall {
    width: 744px;
    height: 83px;
    background-repeat: no-repeat;
    margin-bottom: 30px;
}

.banner-content .bannerLarge h1.sfitemTitle, .banner-content .bannerSmall h1.sfitemTitle {
    color: #fff;
    font-size: 30px !important;
    font-weight: bold;
    font-family: Arial;
    text-transform: capitalize;
    padding: 16px 0 0 16px;
    width: 298px;
    line-height: 32px !important;
}

.banner-content .bannerSmall h1.sfitemTitle {
    width: 360px;
}

.banner-content .sfitemShortTxtWrp .sfitemShortTxt {
    color: #fff;
    font-size: 30px !important;
    font-weight: bold;
    font-family: Arial;
    text-transform: capitalize;
    padding: 10px 0 0 16px;
}

.banner-content .sfitemRichText {
    color: #fff;
    font-size: 12px;
    width: 309px;
    padding: 2px 0 0 16px;
    margin: 0 !important;
    line-height: 16px !important;
    width:  auto!important;
}

#content .sfimageWrp {
    margin-top: 0px;
}

.banner-content .sfitemPublicationDate {
    display: none;
}


/* STICKY FOOTERS: Uncomment to enable */
/*
html,body { height:100%; }
#wrapper { min-height: 100%; position: relative; }
#footer { 
  position: absolute; bottom: 0; left: 0; width: 100%; 
  height: 60px; 
}
#main { padding-bottom: 60px; }
*/
/* END STICKY FOOTERS */

/* Video Details */
#cr-1 {
    display: block;
    float: left;
    margin-bottom: 30px;
    width: 485px;
}

.content-left {
    background: url(https://www.xypex.com/imgs/skin/bg/left-content-grey-bg.jpg) no-repeat;
    width: 189px;
    overflow: hidden;
    margin: 0 10px 30px 10px;
    padding-bottom: 11px;
    position: relative;
    float: left;
}

    .content-left.no-bg {
        background: none;
    }

    .content-left ul {
        margin: 0;
    }

    .content-left li {
        list-style-type: none !important;
        padding: 1px 0;
    }


div.content-left.comp-tect {
    background: none repeat scroll 0 0 #BCBDC0;
    overflow: visible;
    height: 495px;
    width: 228px;
}

    div.content-left.comp-tect div.select-product {
        padding: 8px 10px;
    }

div.content-right.comp-tect p.share-vid {
    overflow: hidden;
    margin: 10px 0 8px;
}

    div.content-right.comp-tect p.share-vid a {
        float: right;
    }

        div.content-right.comp-tect p.share-vid a img {
            margin: 0;
        }

div.content-right.comp-tect div.share-vid {
    overflow: hidden;
    margin: 10px 0 8px;
}

div.content-right.comp-tect div.addthis_toolbox a {
    float: right;
}

div.content-left.comp-tect .jqTransformSelectWrapper {
    width: 161px !important;
}

    div.content-left.comp-tect .jqTransformSelectWrapper ul {
        width: 158px !important;
    }

#mcs3_container .customScrollBox p img, 
#mcs3_container .customScrollBox input {
    border: none;
    float: left;
    margin: 0 12px 0 8px;
}

#mcs3_container .customScrollBox p:hover img, #mcs3_container .customScrollBox p:hover input {
    border: 2px solid #00aeef;
    width: 79px !important;
    height: 45px !important;
}

#mcs3_container .customScrollBox p:hover a {
    color: #658ebe;
}

#mcs3_container .customScrollBox p {
    font-size: .94em;
    line-height: 1.15em;
    min-height: 50px;
}

div.content-left.comp-tect form.jqtransformdone label {
    color: #231f20;
}

div.content-left.comp-tect .scroll-container {
    background: #fff;
}

/* -------------
 * Buttons
 * ------------- */
a.jqTransformButton {
    margin: 2px 10px 0 9px;
    padding: 0px;
    border: none;
    background-color: transparent;
    cursor: pointer;
    overflow: visible;
    font-family: Arial;
    float: right;
}

.content-general a.jqTransformButton {
    padding-right: 0;
    display: inline-block;
    margin-right: 10px;
}

  a.sfSave,
  a.sfCancel,
  a.jqTransformButton:link,
  input[type="submit"]{/*updates on distributor*/
     background: #00adef;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    padding: 0px 20px;
    height: 25px;
    line-height: 26px;
    display: inline-block;
    font-weight: bold;
    margin:10px 0;
    border:none;
  }



  
   
  a.sfSave:hover,
  a.sfCancel:hover,
  a.jqTransformButton:hoveR{
    color:#fff;
  }

    /*a.jqTransformButton span {
        background: transparent url(/css/img/btn_right.png) no-repeat right top;
        display: block;
        float: left;
        padding: 0px 4px 0px 0px; 
        margin: 0px;
        height: 18px;
    }

        a.jqTransformButton span span {
            background: transparent url(/css/img/btn_left.png) no-repeat top left;
            color: #fff;
            padding: 0 5px 0px 8px;
            font-weight: bold;
            font-size: 12px;
            line-height: 16px;
            display: block;
            text-decoration: none;
            height: 18px;
        }*/

.content-general .select-filters .last a.jqTransformButton, .content-general .select-filters .last input {
    float: left;
    float:  none;
}


.buttonFind {
    background: #00adef;
    color: #fff;
    text-transform: uppercase;
    font-size: 13px;
    padding: 0px 20px;
    height: 25px;
    line-height: 26px;
    display: inline-block;
    font-weight: bold;
    border:none;
    cursor:pointer;

    font-size:11px;
    height: 20px;
    line-height: 20px;
}

/*project search */
#ph_left_C002_txtKeyword{
  background:#e8e9ea;
  border:none;
  width:237px !important;
}

/*hover*/
a.jqTransformButton_hover span span {
    background-position: left -18px;
}

a.jqTransformButton_hover span {
    background-position: right -18px;
}

div.content-general.comp-tect form.jqtransformdone label {
    color: #231F20;
}

form.jqtransformdone label {
    display: block;
    float: left;
    margin-right: 8px;
    margin-top: 4px;
}

form.jqtransformdone label {
    font-size: 0.95em;
}

label.select-product {
    display: block;
    float: none !important;
    margin-bottom: 5px;
    margin-top:20px;
}

/*  Video Overview */
body ul.building {
    margin-left:0;
    margin-top: -8px;
    padding:0;
}

    ul.building li {
        border-bottom: 1px solid #B3B3B3;
        height: 131px;
        height: auto;
        list-style-type: none !important;
        overflow: hidden;
        padding: 20px 0;
        position: relative;
    }

        ul.building li.last {
            border: none;
        }

        ul.building li a.more-videos {
            margin-left: 39px;
        }

        ul.building li img {
          
        }

         @media all and (min-width: 768px){
            ul.building li{
              padding-left:calc(29.6% + 40px);
            }
            ul.building li img {
                float: left;
              padding-left: 1px;
              position: absolute;
              left:10px;
              top:20px;
              width:29.6%;
            }
        }

       

        ul.building li h2 {
            color: #000000 !important;
            font-size: 17px;
            font-weight: bold;
            margin-bottom: 8px;
            margin-top: -3px;
            margin-left: 258px;
        }

        ul.building li p {
            overflow: hidden;
        }

        ul.building p.sep{
            padding-top: 13px;
        }
       

         ul.building li .vidpop{
          background: none;
          padding:0;
          color:#1193d0;
          font-weight: normal;
              font-size: 17px;
        }
         /* ul.building li .vidpop:before{
            content:'»';
            padding-right: 5px;
          }*/

.play {
   /* background: url(../imgs/skin/bg/play-button.jpg) no-repeat scroll 0 0 transparent;
    color: #FFFFFF;
    display: block;
    float: left;
    font-size: 0.95em;
    font-weight: bold;
    height: 18px;
    text-align: center;
    width: 67px;*/
}


.sfitemFieldLbl {
    display: none !important;
}

.sfitemShortTxt {
    display: none !important;
}

/* News Module */
.select-filters {
    clear: both;
    margin-bottom: 12px;
}
    .select-filters::after {
        content:  "";
        display: table;
        clear:  both;
    }
    .select-filters label {
        color: #1A1A1A;
    }

    .select-filters input[type=text] {
        font-size: 14px;
        padding: 0 3px;
        height: 20px;
    }
    body .select-filters ul{
      padding-left:0;
    }
    .RadComboBoxDropDown .rcbList>li {
        font-size: 14px;
        padding: 5px;
    }

    .select-filters > div > ul ,
    .select-filters > ul {
        margin: 0;
        padding:0;
        list-style: none;
    }
    .select-filters > div > ul > li,
    .select-filters > ul > li {
        list-style: none;
    }
@media screen and (min-width: 768px) {
    .select-filters > div > ul,
    .select-filters > ul {
        margin: 0;
        display: table;
    }
        .select-filters > div > ul > li,
        .select-filters > ul > li {
            display: table-cell;
            vertical-align: top;
            padding-right: 20px;
        }
}

.select-product + input{
  height:25px !important;
}

.select-filters input[type="submit"]{margin:0;}
/*     .select-filters > ul > li, .select-filters > div > ul > li {
        float: left;
        list-style-type: none;
        border-right: 1px solid #918f8f;
        padding: 0 13px 0 8px;
    }

        .select-filters > ul > li.last, .select-filters > div > ul > li.last {
            padding-right: 0;
            border: none;
        }

            .select-filters > div > ul > li.last input, .select-filters > div > ul > li.last a {
                float: left;
            } */

.f-case-study {
    background: #7d7d7d;
    font-weight: bold;
    line-height: 1;
    color: #000;
    padding: 10px;
    margin: 0 0 21px;
    clear: both;
    position: relative;
    color: #fff;
}

.f-case-study2 {
   
}

.title-link {
    position: absolute;
    right: 10px;
    top: 0px;
}

.case-image {
    float: left;
    width: 208px;
    padding: 0 9px;
}

.case-image-news {
    float: left;
    width: 208px;
    padding-left: 10px;
    padding-right: 32px;
}

    ul.buckets li .case-image-news img {
        padding: 0;
    }

.case-content {
    float: right;
    width: 495px;
}

.case-content-news {
    width: 484px;
}

    .case-content h1 {
        width: 350px;
    }

    .case-content h3 {
        color: #0081C6 !important;
        font-size: 13px !important;
        margin: 0 !important;
        padding: 0 0 5px;
        width: auto !important;
    }

ul.pager li {
    float: left;
    margin-right: 15px;
  line-height: 22px;
}
    ul.pager li a {
        text-decoration: underline;
    }

    ul.pager li.active a {
        font-weight:bold;
        text-decoration: none;
    }
.c-w1 ul.buckets {
    margin: 0;
    padding: 0;
}

.c-w1 ul.buckets.paginationlist{
  margin-bottom:30px;
}
  .c-w1 ul.buckets li{
    position: relative;
  }

    ul.buckets li img {
        
        max-width:100%;
        height: auto;
    }
    @media screen and (min-width:768px){
        ul.buckets li img {
            width:34.4%;
            float: left;
            padding-left: 10px;
            padding-right: 32px;
        }
    }

    /*flag*/
    ul.buckets li .overview img{
      padding-right: 12px;
      margin-top: 5px;
      padding-left:0;
      width:auto;
    }

    /*ul.buckets li .prod-right img{
      margin:20px 0;
    }*/

    /*@media all and (min-width: 768px){
       ul.buckets li .prod-right img{
        position: absolute;
        right:10px;
        bottom:35px;
      }
    }*/

    ul.buckets li .imgWrap {
        float: left;
        width: 250px;
    }

        ul.buckets li .imgWrap img {
            padding-bottom: 10px;
            width: 100%;
        }

    ul.buckets .overview {
        
    }
       @media screen and (min-width:768px){
            ul.buckets .overview {
                float: left;
                width: 65.6%;
            }
        }

    ul.buckets li, ul.pager li {
        list-style-type: none !important;
        overflow: hidden;
    }

        ul.buckets li h2 {
            color: #000000 !important;
            font-size: 17px !important;
            margin-bottom: 8px !important;
        }

        ul.buckets li h3 {
            color: #0081C6 !important;
            font-size: 13px !important;
            width: auto !important;
            margin: 0 0 5px;
            overflow: hidden;
        }

        ul.buckets li h3 span, ul.buckets li h3 div{
            display: inline-block;
            float: left;
        }

            ul.buckets li h3 div ul.sfCategoriesList, ul.buckets li h3 div ul.sfCategoriesList li {
                margin: 0;
                padding: 0;
            }

        ul.buckets li p.sep {
            border-bottom: 1px solid #857f7f;
          border-top: 1px solid #b1acac;
            margin-bottom: 22px;
            clear: both;
        }

        ul.buckets li{
          position: relative;
          padding:20px 0;
          border-bottom: 1px solid #b1acac;
        }
          /*ul.buckets li:after{
            content:'';
            display: block;
            position:absolute;
            bottom:0;
            left:0;
            width:100%;
            border-bottom: 1px solid #857f7f;
          }

          ul.buckets li:last-child,
          ul.buckets li:last-child:after{

            border: none;
          }*/

        ul.buckets .grade-links {
            margin-bottom: 5px;
            overflow: hidden;
        }

        ul.buckets .grade-links .b-grade div {
            display: inline-block;
            float: none !important;
            margin: 0 !important; 
        }

        ul.buckets .grade-links a, ul.buckets .grade-links .sociallink {
            float: right;
            margin-left: 7px;
            padding: 0;
        }
            ul.buckets .grade-links div {
                float: right;
                margin-left: 7px;
                padding: 0;
            }
                ul.buckets .grade-links div div {
                    margin-left: 0;
                }

                ul.buckets .grade-links div div.sfdownloadFileWrp a {
                    background: url(https://www.xypex.com/imgs/skin/bg/pdf-button.jpg) top left no-repeat;
                    width: 50px;
                    height:0;
                    padding-top: 19px;
                    overflow:hidden;
                    margin:0;
                }

            ul.buckets .grade-links .sociallink a {
                margin-left: 0;
            }

        ul.buckets .grade-links img {
            float: right;
            padding: 0;
        }

    ul.buckets .overview p {
        margin-top: 15px;
    }

/* Distributor */
.bt-1 img {
    float: right;
}

.c-pic {
    width: 742px;
    background: url(https://www.xypex.com/imgs/skin/bg/grey-bar-for-images.jpg) repeat-x scroll 0 91px transparent;
    height: 116px;
}

    .c-pic ul {
        display: block;
        margin-left: 0;
    }

        .c-pic ul li {
            float: left;
            list-style-type: none;
        }

            .c-pic ul li img {
                padding: 1px;
            }

            .c-pic ul li h3 {
                font-weight: normal;
                text-align: center;
                color: #58595B;
                width: auto;
                margin-top: 3px;
            }
.distributorList td {
    width: 20%;
    color: #345B88;
}

    .distributorList td a {
        display: inline-block;
        padding-left: 10px;
        background: url(../imgs/skin/bg/cta-bullet.png) no-repeat scroll left 6px transparent;
    }

    .distributorList li {
        width: 19%;
        color: #345B88;
        display: inline-block;
        padding-bottom: 3px;
    }

        .distributorList li a {
            display: inline-block;
            padding-left: 10px;
            background: url(../imgs/skin/bg/cta-bullet.png) no-repeat scroll left 6px transparent;
        }

.distributorImgWrap {
    position: relative;
}

    .distributorImgWrap .distributorName {
        width: auto;
        position: absolute;
        font-weight: bold;
        font-size: 11px;
        top: 4px; left: 63px;
    }

.nofloat {
    float: none !important;
}

.hiddenCountry {
    display: none;
}


.distributor-login{
}
  .distributor-login h2{
    margin-bottom: 20px !important;
  }

.distributor-lostpass ol.sfFormList{padding:0;}
  .distributor-lostpass ol.sfFormList li{
    list-style: none;
  }

  .distributor-lostpass a{
    margin: 0 10px;
  }
    .distributor-lostpass a:first-of-type{
      margin-left:0;
    }




/* Zoom Map */

#map-usa{display:none;}

#mapCanada:after{
  content:'';
  display: table;
  clear: both;
}

#mapCanada .zoom-map{
  max-width: 399px;
  width: calc(100% - 230px);
}
@media screen and (max-width:768px){
  #mapCanada .zoom-map{
    position: absolute;
      left:80px;
      right:0;
      width:auto;
  }
  #mapCanada .div-z2{
    display: none;
  }
}

span.can-map-hovers {
  background:url(https://www.xypex.com/imgs/skin/bg/map-canada-cutup.jpg) no-repeat; 
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  overflow:hidden; 
  display:block;
  max-width: 399px;
  width: 100%;
  height: 0;
  padding-top: 62.66%;
  position: relative;
}
span.can-map-hovers > img{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
}
    span.can-map-hovers.z1 {background-position:0px 24.9% !important;}
    span.can-map-hovers.z2 {background-position:0px 49.9% !important;}
    span.can-map-hovers.z3 {background-position:0px 74.8% !important;}
    span.can-map-hovers.z4 {background-position:0px 99.7% !important;}

.map-nav {
  float:left;
  margin-top:20px;
  margin-right:20px;
  width:210px;
}
    #content .nav-zones{
      margin:0;
      padding-left:0;
    }
   #content .map-nav li {list-style:none;}
.zoom-map {float:left;}

/*USA Map */





.div-z1 {float:left;}
.div-z2 {
    float:left;
    border-top:1px solid #5a5757;
    width:145px;
    font-size:11px;
}
.div-z2 ul {
  display:none;
  padding:8px 0px 0px 8px !important;
}
  .div-z2 h2{
    font-size:12px;
  }

.map-desc {font-weight:bold;font-size:12px;color:#1a1a1a;}
.nav-zones a {color:#1a1a1a;font-weight:bold;font-size:14px;text-transform:uppercase;border-bottom:1px solid #5a5757;padding:8px 0px 8px 4px;display:block;}
    .nav-zones a:hover {color:#f26522;}
    .nav-zones a.active {color:#f26522;}
.nav-zones {border-top:1px solid #5a5757;border-right:1px solid #5a5757;padding:0px 8px 0px 0px;min-height:150px;margin-top:0px !important;}
.div-z2 ul h2 {color:#1a1a1a !important;font-weight:bold;}
.div-z2 ul a {color:#1a1a1a !important;}

.sfsearchResultStatistics {
    font-size: 19px;
    margin-bottom: 15px;
}

.sfsearchReultTitleSnippetUrl {
    line-height: 1.2;
}

.sfsearchReultTitleSnippetUrl .sfsearchResultTitle {
    font-size: 13px;
    font-weight: bold;
    margin-top: 30px;
}

.sf_pagerNumeric {
    font-size: 13px;
    margin-top: 15px;
}

.sf_pagerNumeric a:link, .sf_pagerNumeric a:visited, .sf_pagerNumeric a:hover, .sf_pagerNumeric a:active {
    border: 1px solid #FFFFFF;
    color: #105CB6;
    padding: 1px 6px;
}


.sf_pagerNumeric a.sf_PagerCurrent:link, .sf_pagerNumeric a.sf_PagerCurrent:visited, .sf_pagerNumeric a.sf_PagerCurrent:hover, .sf_pagerNumeric a.sf_PagerCurrent:active {
    background-color: #105CB6;
    border-color: #105CB6;
    color: #FFFFFF;
    cursor: default;
}

.register-news
{
    width:100%;
}


/* .register-news ul {
    float: right;
}
 */
.register-for-news {
/*     float: left; */
    margin-left: 15px;
    margin-top: 10px;
    margin-bottom: 15px;
    margin-left: 0;
}

@media screen and (min-width: 768px) {
  .register-for-news {
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
    margin-bottom: 15px;
  }
  .register-for-news + ul {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 15px;
  }
}

.register-for-news a.reg-news-link {
    background: url("https://www.xypex.com/css/img/RegisterForNews.gif") no-repeat scroll left top transparent;
    display: block;
    height: 31px;
    width:196px;
}

.sfPublicWrapper {
    background-color: #FFFFFF;
    margin: 20px auto;
    padding: 30px;

}

/* Language Selection */
.languageSel {
    overflow: hidden;
    width: 100%;
    margin-bottom: 10px;
}

    .languageSel .RadComboBox, .languageSel a {
        float: left;
    }

        .languageSel a.jqTransformButton span span {
            padding: 0 12px 0 16px;
        }

.sfPageEditor.country #ctas div {margin-top:0px} 

.sfitemSorting{display:none;}

.prod-summary { padding-top:10px;}
/*.country-flag { float: left; padding-right:10px !important;  padding-left:0px !important;}*/
.read-more {color: #1193d0; text-decoration: none;}
.prod-left { float: left; margin-top:20px;}
.prod-right { float: right; margin-top:20px;}
.prod-right img { padding-right: 0px !important;}

.prod-detail-header 
{
    border-top: 1px solid #B3B3B3;
    border-bottom: 1px solid #B3B3B3;
    float:left; 
    width: 100%; 
    min-height: 80px;
    margin-bottom:30px;
    margin-top: 5px;
}

.buckets .overview h3 { color: #000000 !important;}
.prod-detail-header-left { float: left; padding-top: 5px; width:340px;}
.prod-detail-header-right { float: right; }
.prod-detail-header-right table:first-child { height:78px; width: 108px; margin-left:10px;}
.prod-detail-header-right table:first-child td { border-left: 1px solid #B3B3B3;}
.prod-detail-header-right img { padding-left: 0px !important; padding-right: 0px !important; float: none !important;}
.ProjectBannerLarge  
{
    background-repeat: no-repeat;
    height: 239px;
    /*width: 744px;*/
    margin-bottom: 25px;
    background-size:cover;
}
.ProjectBannerLarge h1.sfitemTitle {
    color: #fff;
    font-size: 30px !important;
    font-weight: bold;
    font-family: Arial;
    text-transform: capitalize;
    padding: 16px 0 0 16px;
    width: 365px;
    line-height: 32px !important;
}

.ProjectBannerLarge .sfitemRichText {
    width: 375px;
}

.pro-bottom-wrap  
{
    clear: both;
    float: right;
    margin-top: 202px;
    position: absolute;
    width: 100%;
    right: 15px;
}
.pro-banner-text { float:right; color: #000000; font-size: 17px; font-weight: bold; font-family:Arial !important;}
.pro-banner-link  
{
    float: right;
    background: url("img/project-learn-more.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 0;
    height: 18px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 90px;
}
.pro-banner-link-click-here  
{
    float: right;
    background: url("img/project-click-here.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: medium none;
    color: #FFFFFF;
    cursor: pointer;
    font-size: 0;
    height: 18px;
    margin: 0 0 0 10px;
    padding: 0;
    width: 78px;
}

#slider {height:348px !important;}
a.switchlink {display:none;}

#ctl00_cph_util_country_RadDockZonecph_util_country { top: -70px; left:240px;}
#ctl00_cph_top_left_RadDockZonecph_top_left { left: 850px; top: -42px; }
#ctl00_chp_top_right_RadDockZonechp_top_right { left: 245px;}
#ctl00_slider_RadDockZoneslider { left: 200px; top: 30px;}
#ctl00_ph_play_RadDockZoneph_play { left: 348px;}
#ctl00_cph_util_distributo_login_RadDockZonecph_util_distributo_login { top: -81px;}

.paginationWrap {

 line-height: 23px;
}




/*.paginationWrap > span a {
    display: block;
    float: left;
    width: 25px;
}
.paginationWrap > span span {
    display: block;
    float: left;
    width: 25px;
}*/





@media screen and (max-width: 959px) {
  #content .content-general {
      overflow:visible;
      width:  auto;
      float: none;
      margin: 0;
      margin-bottom: 30px!important;
  }

  #content .content-right {
      width: auto;
      float:  none;
  }
}



.formButton {
    position: static!important;
}

ul.paginationlist + span {
    display: block;

}
  ul.paginationlist + span:after{
    content:'';
    display: table;
    clear:both;
  }
ul.paginationlist + span span,
ul.paginationlist + span a
 {
    display: block;
    float: left;
    height: 30px;
    width: 27px;
    text-align: center;
    line-height: 22px;
    font-size: 12px;
}
ul.paginationlist + span a {
    text-decoration: underline;
}
ul.paginationlist + span span {
    font-weight: bold;
}

/*--------------------------------------------------------------
# Layout
--------------------------------------------------------------*/
#content {
    float:  none;
    left: auto;
    border: 0;
    width: auto;
    padding: 0;
}
@media screen and (min-width: 768px) {
    #content {
        float: left;
        position: relative;
        left: 25%;
        width: 75%;
        border-left: 0;
    }

    #subnav {
        float: left;
        position: relative;
        right: 75%;
        width: 25%;    
    }
}




#subnav ul.sfNavList > li > a,
#subnav ul.sfNavList > li > ul {
    display: none;
}

#subnav ul.sfNavList > li > a.sfSel + ul {
    clear:both;
    display: block;
    border-top: 2px solid #0082c8;
    /* max-width: 240px; */
    margin-bottom: 30px;
}

@media screen and ( min-width: 768px) {
    #subnav ul.sfNavList > li > a.sfSel + ul {
        margin-right: 20px;
        margin-bottom: 0;
    }
}

@media screen and ( min-width: 940px) {
    #subnav ul.sfNavList > li > a.sfSel + ul {
        margin-right: 60px;
    }
}

#mobile-also-in-this-section p {
  font-size: 18px;
  color: #0081c6 !important;
  font-weight: bold !important;
  margin: 0 !important;
}

#subnav ul.sfNavList > li > ul > li > ul {
    display: none;
}
    #subnav ul.sfNavList > li > ul > li {
        border-bottom: 1px solid #bdbec0;
    }
    #subnav ul.sfNavList > li > ul > li > a {
        display: block;
        padding: 10px 0;
        font-size: 16px;
        font-weight: 400;
        color:  inherit;
    }
        #subnav ul.sfNavList > li > ul > li > a.sfSel {
            /*font-weight: 700;*/
            color: #0081c6;
        }

#subnav ul.sfNavList > li > ul > li > a.sfSel + ul {
    display: block;
}
    #subnav ul.sfNavList > li > ul > li > ul > li {
        margin-bottom: 10px;
    }

    #subnav ul.sfNavList > li > ul > li > ul > li > a {
        font-size: 16px;
        font-weight: 400;
        position: relative;
        padding-left: 11px;
    }
        #subnav ul.sfNavList > li > ul > li > ul > li > a::before {
            content: "-";
            position: absolute;
            left: 0;
            top: 0;
        }

    #subnav ul.sfNavList > li > ul > li > ul > li > a.sfSel {
        color: #0082c8;
        text-decoration: underline;
    }

#subnav .navlevel-2 > .haschildren  {
    position: relative;
    padding-right: 32px;
}

#subnav .navlevel-2 > .haschildren > .droptrigger {
    position: absolute;
    right: 0;
    top: 2px;
    height: 32px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}  
    #subnav .navlevel-2 > .haschildren > .droptrigger::before {
        content: "\2B";
        display: block;
        font-size: 16px;
        text-align: center;
    }
    #subnav .navlevel-2 > .haschildren.active > .droptrigger::before,
    #subnav .navlevel-2 > .active-trail.haschildren > .droptrigger::before {
        content: "\2D";
        color: #0081c6;
        font-weight: 700;
    }

    #subnav .navlevel-2 > .active-trail.haschildren > .droptrigger {
        cursor: default;
    }


.navlevel-3 ul {
    display: none;
}

#subnav .sfNavHorizontalDropDown {
    background:  none;
}

/*--------------------------------------------------------------
# Video Styles
--------------------------------------------------------------*/
.vidpop {
    z-index: 999;
}

/*--------------------------------------------------------------
# Home
--------------------------------------------------------------*/
.homepagebd #content {
    float:  none;
    left: auto;
    border: 0;
    width: auto;
    padding: 0;
}

.homepagebd #subnav {
    display: none;
}

/*--------------------------------------------------------------
# Slider
--------------------------------------------------------------*/


/* Slider */
.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list {
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus {
    outline: none;
}
.slick-list.dragging {
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track {
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track::before,
.slick-track::after {
    display: table;

    content: '';
}
.slick-track::after {
    clear: both;
}
.slick-loading .slick-track {
    visibility: hidden;
}

.slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide {
    float: right;
}
.slick-slide img {
    display: block;
}
.slick-slide.slick-loading img {
    display: none;
}
.slick-slide.dragging img {
    pointer-events: none;
}
.slick-initialized .slick-slide{
    display: block;
}
.slick-loading .slick-slide {
    visibility: hidden;
}
.slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}


@media screen and ( max-width: 767px ) {
    .slider-wrapper  {
        content: "";
        left: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        position: relative;
        top: 0;
        bottom: 0;
        right: 50%;
        width: 100vw;
    }
}

/*--------------------------------------------------------------
# Home Slider
--------------------------------------------------------------*/

.x-homebanner {
    position: relative;
}
    .x-homebanner__item {
        position: relative;
        overflow: hidden;
    }

@media screen and ( min-width: 768px ) {
    .x-homebanner {
        margin-bottom: -30px;
    }
}

/*--------------------------------
## Background
----------------------------------*/    
.x-homebanner__item__img {
    height: 240px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    z-index: 10;
    background-repeat: no-repeat;
    background-position: center top;
    background-color: #eee;
    -webkit-background-size: cover;
    background-size: cover;
}
    .x-homebanner__item__img img {
        display: none;
    }
@media screen and ( min-width: 480px ) {
    .x-homebanner__item__img {
        height: 300px;
    }
}
@media screen and ( min-width: 768px ) {
    .x-homebanner__item__img {
        height: auto;
        bottom: 0;
        right: auto;
        width: 64%;
        background-position: left top;
    }
}

/*--------------------------------
## Content
----------------------------------*/    
.x-homebanner__item__content-area {
    position: relative;
    z-index: 20;
    padding: 240px 15px 15px 15px;
}

@media screen and ( min-width: 480px ) {
    .x-homebanner__item__content-area {
        padding-top: 300px;
    }
}

@media screen and ( min-width: 768px ) {
    .x-homebanner__item__content-area {
        padding: 0;
        margin-left: 37.5%;
        background: url(../imgs/x-homebanner__item__contentbg--desktop.png) no-repeat;
        background-position: left bottom;
    }
}

@media screen and ( min-width: 960px ) {
    .x-homebanner__item__content-area {
        padding: 0;
        margin-left: 47.5%;
    }
}

.x-homebanner__item__content {
    position: relative;
    z-index: 10;
}
    .x-homebanner__item__content div {
        font-size: 17px;
        color: #505050;
        line-height: 1.176;
    }

    .x-homebanner__item__content a {
        display: inline-block;
        background: #0082c8;
        color: #fff !important;
        font-size: 17px;
        padding: 6px 12px;
    }

@media screen and ( min-width: 768px ) {
    .x-homebanner__item__content {
        height: 460px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-left: 200px;
        padding-right: 35px;
    }

    .x-homebanner__item__content div {
        font-size: 14px;
        color: #505050;
        line-height: 1.375;
    }

    .x-homebanner__item__content br + br {
        display: none;
    }

    .x-homebanner__item__content a {
        background: none;
        color: #0082c8!important;
        padding: 0;
        font-size: 16px;
        margin-top: 10px;
    }
}

@media screen and ( min-width: 960px ) {
    .x-homebanner__item__content div {
        font-size: 16px;
    }
}

.x-homebanner__item__content h2 {
    font-size: 23px!important;
    color: #231f20!important;
    line-height: 1.08;
    font-weight: 400;
    margin: -180px -15px 16px -15px!important;
    padding-left: 15px;
    padding-right: 15px;
   padding-bottom: 20px;
    padding-top: 232px;
    position: relative;
    background: url(../imgs/x-homebanner__item__contentbg--mobile.png) no-repeat;
    background-position: 60% -40px;
    text-transform: capitalize;
}

@media screen and ( min-width: 480px ) {
    .x-homebanner__item__content h2 {
        background-position: 100% -10px;
        padding-top: 250px;
    }
}

@media screen and ( min-width: 768px ) {
    .x-homebanner__item__content h2 {
        background: none;
        margin: 0 0 10px 0!important;
        padding: 0;
    }
}

@media screen and ( min-width: 1140px ) {
    .x-homebanner__item__content h2 {
        font-size: 30px!important;
        line-height: 1;
    }
}    

/*--------------------------------
## Social Media
----------------------------------*/  
.x-homebanner__social {
    display: none;
}

@media screen and ( min-width: 768px ) {
    .x-homebanner__social {
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        z-index: 50;
    }
}

.newsocial a {
    background-image: url( ../imgs/i-social.png);
    background-repeat: no-repeat;
    background-size: auto 62px;
    position: relative;
    display: inline-block; 
    width: 32px;
    height: 31px;
    text-indent: -999em;
    color: #fff;
}
    .newsocial a:before {
        content: "";
        position: absolute;
        left: -1px;
        top: -1px;
        right: -1px;
        bottom: -1px;
        display: block;
        background: #fff;
        z-index: -1;
        border-radius: 50%;
    }
    .newsocial a.likdn { background-position: 0 0; }
        .newsocial a.likdn:hover { background-position: 0 -31px; }
    .newsocial a.yt { background-position:  -32px 0; }
        .newsocial a.yt:hover { background-position:  -32px -31px; }
    .newsocial a.twtr { background-position:  -64px 0; }
        .newsocial a.twtr:hover { background-position:  -64px -31px; }
    .newsocial a.fb { background-position:  -96px 0; }
        .newsocial a.fb:hover { background-position:  -96px -31px; }

/*--------------------------------
## Controls
----------------------------------*/    
.x-homebanner__controls {
    position: relative;
    margin: 0 15px;
}
@media screen and ( min-width: 768px ) {
    .x-homebanner__controls {
        position: absolute;
        margin: 0;
        right: 0;
        top: 0;
        z-index: 50;
        padding-top: 15px;
    }
}

/*-----------------------
### Bullets
-------------------------*/   
.x-homebanner__controls__bullets {
    display: none;
}

@media screen and ( min-width: 768px ) {
    .x-homebanner__controls__link {
        display: inline-block;
        margin-right: 15px;
    }
    .x-homebanner__controls__bullets {
        display: inline-block;
        margin-right: 10px;
    }
        .x-homebanner__controls__bullets .slick-dots {
            margin: 0;
            display: inline-block;
        }
        .x-homebanner__controls__bullets .slick-dots li {
            list-style: none;
            display: inline-block;
        }
        .x-homebanner__controls__bullets .slick-dots button {
            display: block;
            background: #bdbec0;
            border: 0;
            height: 25px;
            width: 25px;
            border-radius: 50%;
            overflow: hidden;
            margin: 0 2px;
            color: #fff;
            font-weight: 700;
            font-size: 14px;
            /*line-height: 25px;*/
            vertical-align: middle;
            cursor: pointer;
            outline: none!important;
        }
            .x-homebanner__controls__bullets .slick-dots .slick-active button {
                background: #959799;
            }
}

/*-----------------------
### CTA
-------------------------*/   
.x-homebanner__controls__action {
    position: absolute;
    right: 0;
    top: -43px; /*mn: random negative pixels needed to push the text up*/
    font-size: 17px;
    color: #0081c6;
    display: inline-block;
}
    .x-homebanner__controls__action em {
        font-style: normal;
    }

@media screen and ( min-width: 768px ) {
    
    .x-homebanner__controls__action {
        position: relative;
        top: auto;
        background: red;
        font-size: 18px;
        color: #fff;
        display: inline-block;
    }
        .x-homebanner__controls__action::before {
            content: "";
            display: block;
            border-top: 30px solid #88171b;
            border-left: 15px solid transparent;
            border-right: 15px solid transparent;
            height: 0;
            width: 30px;
            position: absolute;
            right: 100%;
            margin-right: -15px;
            z-index: 5;
        }
        .x-homebanner__controls__action::after {
            content: "";
            display: block;
            position: absolute;
            left: 100%;
            top: 100%;
            margin-top: -4px;
            margin-left: -1px;
            width: 0; 
            height: 0; 
            border-top: 5px solid transparent;
            border-bottom: 5px solid transparent; 
            border-right: 5px solid #7b1316;
            transform: rotate(45deg);
        }
        .x-homebanner__controls__action a {
            color: #fff!important;
            display: inline-block;
            padding: 0 10px;
            height: 30px;
            line-height: 30px;
            white-space: nowrap;
            position: relative;
            z-index: 10;
            margin-right: -7px;

            background: #88171b;
            background: -moz-linear-gradient(left,  #88171b 0%, #cf342f 100%);
            background: -webkit-linear-gradient(left,  #88171b 0%,#cf342f 100%);
            background: linear-gradient(to right,  #88171b 0%,#cf342f 100%);
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#88171b', endColorstr='#cf342f',GradientType=1 );

        }

            .x-homebanner__controls__action a::before {
                content: "";
                display: inline-block;
                width: 0;
                height: 0;
                border-top: 6px solid transparent;
                border-bottom: 6px solid transparent;
                border-left: 6px solid white;
                vertical-align: middle;
                margin-right: 5px;
                transform: translateY(-1px);
            }

            /*.x-homebanner__controls__action a.default{display: none;}*/
            .x-homebanner__controls__action a.country{display: none;}

            .x-homebanner__controls__action a em {
                font-style: italic;
                font-weight: 700;
                display: inline-block;
                margin-left: -2px;
            }
}

body .overviewWrap .sfimageWrp img {
  
}
@media screen and (min-width:768px){
  body .overviewWrap .sfimageWrp img {
    margin-right: 32px !important;
  /*  margin-bottom: 30px !important;*/

    width:34.4%;
    float: left;
    margin-left: 10px;
    padding:0;
  }
}



.overviewWrap .overviewBodyBottom{
  margin-top:25px;
}
  .overviewWrap .overviewBodyBottom a{
    color:#1193d0;
  }

@media screen and (max-width: 767px) {
    .overviewWrap .sfimageWrp img {
        float: none;
        display: none;
    }
    .overviewWrap .overviewBody {
        margin-left: auto!important;
    }  

    div.news-form .txtInput,
    div.news-form .selectInput {
        width:  100%!important;
        margin-bottom: 10px!important;
    }

    div.news-form .l-label {
        margin-left: 0!important;

    }
}


/*--------------------------------------------------------------
# Distributors
--------------------------------------------------------------*/

.content-heading-intro-area {
    margin-bottom: 25px!important;
}

.content-heading-intro-area h1 {
    
    line-height: 1!important;
    margin-top: 0 !important;
    font-weight: 400!important;
}

@media screen and (min-width: 768px) {
    .content-heading-intro-area h1 {
       
    }
}

.content-heading-intro-area p {
    /*margin-bottom: 5px !important;*/
    font-size: 16px;
    line-height: 1.272;
    color: #868686;
}

@media screen and (min-width: 768px) {
    .content-heading-intro-area p {
        font-size: 22px;
    }
}

#responsive-distselect-area-id-1{display: none;}

.c-w1 ul.distributors-banner {
    display: flex;
    flex-wrap: wrap;
    width:  100%;
    list-style: none;
    list-style: none;
    margin: 0 0 40px 0!important;
    background: url(../imgs/being-there-simple.png) no-repeat right top;
    padding: 35px 0 0 0;
}
    .distributors-banner > li {
        width: 33.33%;
        text-align: center;
        background-color: #7d7d7d;
        color: #fff;
        text-transform: uppercase;
        list-style: none!important;
        height: 120px;
        background-repeat: no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
        background-position: center center;
    }
        .distributors-banner_europe {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_europe.jpg);
        }
        .distributors-banner_australia {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_australia.jpg);
        }
        .distributors-banner_asia {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_asia.jpg);
        }
        .distributors-banner_africa {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_africa.jpg);
        }
        .distributors-banner_north-america {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_north-america.jpg);
        }
        .distributors-banner_south-america {
            background-image: url(https://www.xypex.com/imgs/distributors-banner/distributors-banner_south-america.jpg);
        }

    .distributors-banner span {
        display: block;
        font-size: 11px;
        line-height: 1;
        padding: 8px 2px;
        background-color: #7d7d7d;
    }

@media screen and (min-width: 768px) {
    .distributors-banner > li {
        width: 16.6%;
        height: 140px;
        background-position: center 20px;
    }
        .distributors-banner span {
            font-size: 12px;
        }
}


#content .distributorList {
    display: none;
}

.c-w1 ul.responsive-distlist {
    width: auto;
    column-count: 2;
    display: none;
    margin: 0 -10px!important;
    display: block;
    padding:0;
}

@media screen and (min-width: 420px) {
    .c-w1 ul.responsive-distlist {
        column-count: 4;
    }
}

.responsive-distlist-area li {
    padding: 5px 10px;
    list-style: none!important;
}

.responsive-distlist-area a{
    color: #0081c6;
}

.select2-container--default {
    margin-bottom: 15px;
}

/*--------------------------------------------------------------
# Xypex Advantage
--------------------------------------------------------------*/
.xypex-advantage-list {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.xypex-advantage-list__area {
    display: table-cell;
    vertical-align: top;
    line-height: 1.5;
    padding-top:40px;
}
    .xypex-advantage-list__area:first-child {
        padding-right: 15px;
    }
    .xypex-advantage-list__area:nth-child(2) {
        padding-left: 15px;
    }

@media screen and (min-width: 768px) {
    .xypex-advantage-list__area {
        font-size: 16px;
    }
}

.xypex-advantage-list__area h2{
    font-size: 19px!important;
    color: #0081c6;
    line-height: 1!important;
    margin-bottom: 10px!important;
}

@media screen and (min-width: 768px) {
    .xypex-advantage-list__area h2{
        font-size: 22px!important;
    }

}

.xypex-advantage-list__area li + li {
    margin-top: 10px !important;
}


.sfimageWrp img {
    max-width: 100%;
}
.content-right h2 {
    font-style: normal;
   
    font-size: 18px !important;
}

.content-right .xypex-advantage-list h2 {
    color: #0081c6!important;
}

@media screen and (min-width: 768px) {
    .content-right h2 {
        font-size: 22px !important;
    }
}


.content-right .xypex-page-nav {
    font-size: 18px;
    border-bottom: 1px solid #969696;
    margin-bottom: 40px;
}

@media screen and (min-width: 768px) {
    .content-right .xypex-page-nav {
        font-size: 22px;
    }
}

.content-right .xypex-page-nav ul {
    margin-left: -23px!important;
    /* margin-right: -23px!important;
    margin-top: 23px !important;
     margin-bottom: 23px !important; */
     padding:0;
}
.content-right .xypex-page-nav ul li {
    background: none;
    padding: 0;
    display: inline-block;
    padding: 0 23px;
    position: relative;
    margin-bottom: 20px;
}

    .content-right .xypex-page-nav ul li+li::before {
        width: 6px;
        height: 6px;
        content:  "";
        display: block;
        border-radius: 50%;
        background-color: #505050;
        position: absolute;
        left: -3px; /* mn: half of width */
        top: 50%;
        margin-top: -4px; /* mn: height size */
    }

.content-right .xypex-page-nav ul a {
    
    color: #0081c6;
}

.content-general-right {
  float: left!important;
}

.content-right iframe {
  width: 100%;
}


#mcs3_container .customScrollBox .content p {
  min-height: 0;
  padding: 0!important;
}

#mcs3_container .customScrollBox .content {
  font-size: 11px;
}

#mcs3_container .customScrollBox .content > div::after {
  content: "";
  display: table;
  clear: both;
}




@media screen and ( min-width: 768px) {
  #mcs3_container #mobileItem {
    display: none;
  }

  #mcs3_container #desktop-item {
    margin-bottom: 5px;
    display: block;
  }
}

@media screen and ( max-width: 767px) {
  #mcs3_container #desktop-item {
      display: none;
  }

  #mcs3_container .customScrollBox .container {
    width: auto!important;
    float:  none!important;
  }

  #mcs3_container {
    position: static!important;
    height: auto!important;
    width:  auto!important;
  }

  div.content-left.comp-tect {
    width:  100%;
    background: none;
    padding: 0;
    border:  0;
    margin: 0;
    height: auto;
  }

  .content-right.comp-tect {
    display: none!important;
  }

  #mcs3_container .customScrollBox img {
    border: 0!important;
    max-width: 130px;
    float:  left;    
    margin-right: 10px!important;
    margin-left: 0 !important;
  }

  #mobileItem {
    margin-bottom: 10px;
    font-size: 12px;
  }

  .play {
    background: #345b88;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    padding: 5px 10px;
    height: auto;
    margin-top: 10px;
  }

  div.content-left.comp-tect div.select-product {
    border-bottom: 1px solid #ccc;
    padding: 0 0 10px 0;
    margin-bottom: 15px;
  }

  a.jqTransformButton {
    float: none;
    vertical-align: middle;
  }
}





/********************************
Video Box
********************************/

.videoWrap{
  padding:13px;
  background: #e8e9eb;
  margin:20px 0;
  clear:both;
}

  .videoWrap:after{
    content:'';
    display: table;
    clear:both;
  }



  .videoWrap .videoThumbnail{
    
    position: relative;
   
  }

  @media all and (min-width: 640px){
    .videoWrap .videoThumbnail{
      float:left;
      width:385px;
      max-width: 50%;
      margin-right: 20px;
    }
  }
    

    .videoWrap .videoThumbnail a{
      display: block;
      
    }

    .videoWrap .videoThumbnail img{
      width:100%;
      height:auto; 
    }

    .videoWrap .videoThumbnail span{
      position: absolute;
      right:0;
      bottom:5px;
      background: #39393b;
      padding:2px;
      border-radius: 3px;
      color:#fff;
     
    }

    .videoWrap .type-t{
      color:#0081c6;
      font-size:15px;
      text-transform: uppercase;
      font-weight: bold;
      display: block;
      margin-bottom: 5px;
    }

    .videoWrap h2{
      color:#505050 !important;
      margin-bottom: 8px !important;
    }

    .videoWrap .videoDesc{
      font-size:16px;
      line-height: 1.5em;
      overflow: hidden;
    }

/********************************
Events List
********************************/

.content-right ul.events-list{
  margin:0;
}
  .content-right ul.events-list li{
    list-style: none;
    padding-left:0;
    background: none;
    margin-bottom: 30px;
  }

  .content-right ul.events-list li a{
    color:#0f93d1;
  }



/********************************
Mobile Toggle
**********************************/
.tb-menu{
  padding-left:35px;
  position: relative;
}
.menu-icon{
  position: absolute;
  left:0;
  top:4px;
  display: block;
  height:30px;
  line-height: 30px;
   overflow: hidden;
  width:25px;/*set to 1 to hide text*/
         
}
.menu-icon:after, .menu-icon span:before, .menu-icon span:after {
  border-radius: 1px;
  height: 2px;
  width: 35px;
  background: #fff;
  display: block;
  content: '';
  position: absolute;
  left:0px;
  cursor: pointer;
}

.menu-icon:after{
  top:14px;
}
.menu-icon span:before {
  top: 8px;
}
.menu-icon span:after {
  bottom: 8px;
} 
.menu-icon span:before, .menu-icon span:after {
  transition: all 500ms ease-in-out;
}
  .activate-nav .menu-icon:after {
    transform: translate(-999px, 0)
  }

.activate-nav .menu-icon span:before {
  transform: translate(0, 8px) rotate(45deg);

}
.activate-nav .menu-icon span:after {
  transform: translate(0, -8px) rotate(-45deg);

}


/*--------------------------------
## Literature and News
----------------------------------*/

.dropdown-list{
  padding:20px 0 32px 0;
  border-bottom: 1px solid #857f7f;

}
  .dropdown-list h2{
    color: #505151 !important;
    font-size: 15px !important;
    margin-bottom: 10px !important;

  }

.select-filters.register-news{
  border-bottom: 1px solid #b1acac;
  margin-bottom: 0;
  padding-bottom: 20px;
}



.register-for-news{
  display: block;
/*  margin:30px 0;*/
}

  .register-for-news a.reg-news-link{
    display: block;
    height:75px;
    width: 100%;
    background:url(../imgs/register-for-enews.png) no-repeat;
    background-size: contain;
  }

/*news dropdown*/
  .select-filters.register-news .btn-blue{
    background: #28ace2;
    padding: 4px 20px;
    color: #fff;
    height: auto;
    width: auto;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    margin-left:10px;
  }

/******************************/

.f-case-study{
  /*display: none;*/
  margin-top: 30px;
}

.overviewWrap h2{
  font-size:22px !important;
  color:#505151 !important;
}

.overviewWrap .country-name{
  font-style:italic;
  color:#505151;
  margin: 0;
  font-size: 17px;
  margin-bottom: 3px;
}

/*--------------------------------
## Installations
----------------------------------*/

.dropdown-instructions.dropdown-list{
  padding-top:0;
}
  .dropdown-instructions.dropdown-list h4{
    margin-top:0;
    margin-bottom: 5px;
  }

/*--------------------------------
## Specifications
----------------------------------*/

.specifications-block{
  margin:33px 0;
}

  .specifications-block h2{
    color:#585657 !important;
    margin-bottom: 25px !important;
  }

  .c-w1 .specifications-block ul{
    padding-left:0;
  }

  .specifications-block ul li{
    
    display: inline-block;
  }
    .specifications-block ul li:before{
      content:'';
      width:5px;
      height: 5px;
      background: #505050;
      border-radius: 50%;
      display: inline-block;
      vertical-align: middle;
      margin-top:-2px;
      margin:0 15px 5px 15px;
    }
    .specifications-block ul li:first-child:before{
      display: none;

    }
    .specifications-block ul li a{
      color:#0182c6;
      font-size:20px;
    }

  .download-box{
    padding-top:8px;
    border-top:1px solid #878787;
  }
  .download-box a{
    color:#0182c6;
  }


/*******************************
Product Detail (http://xypex.developmentwebsite.ca/products/coating-products/concentrate)
*******************************/

.product-resource-block{
  border-bottom:1px solid #ccc;
}

.p-b-left{
  
  display: block;
  height: 90px;
  background: #28aae1;
  padding:7px 20px 15px 20px;
  margin-bottom: 10px;
  
}
 .p-b-left .dropdown-list-select h3{
    color:#fff;
    margin:0 0 10px 0;
    font-weight: normal;
  }

  .dropdown-list-select .grammarly-disable-indicator{display: none;}

@media all and (min-width: 960px){
  .p-b-left{
    display: inline-block;
    vertical-align: top;
    margin-right: 10px;
    width:380px;
  }
  .p-b-right{
    display: inline-block;
    vertical-align: top;
  }
}
.p-b-right a{
  display: inline-block;
  vertical-align: top;
  color:#fff;
  background:#0081c6;
  text-decoration: none;
  font-size:14px;
  line-height: 19px;
  padding:10px 0px 10px 15px;
   margin-bottom: 10px;
  
   width:100%;
}

  .p-b-right a:after{
    content: '»';
    width: 30px;
    height: 20px;
    float:right;
    text-align: center;
    border-left: 1px solid #fff;
    display: inline-block;
    vertical-align: middle;
    margin-left: 11px;
  }

  .p-b-right a:hover, .p-b-right a:visited{
    color:#fff;
  }

  @media all and (min-width: 960px){
    .p-b-right a{
       margin-left:-4px;
    }

     .p-b-right .btn-install{
      width:100%;
    }

    .p-b-right .btn-video,
    .p-b-right .btn-find-distribuor{
      width:49%;
    }


    .p-b-right .btn-video{
      margin-right: 2%;
    }
  }

/*************************************
Scroll to top
**************************************/

#btn-scrolltop{
  position: fixed;
  bottom:20px;
  right:20px;
  background: #0082c8;
  color:#fff;
  width:40px;
  height:40px;
  line-height: 37px;
  text-align: center;
  border-radius: 10px;
      font-size: 20px;
  font-size: 0;
}
  #btn-scrolltop:before{
    content:'\276e';
    font-size: 18px;
    font-weight: 400;
    display: inline-block;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
  }



.article-wrap > select{
  margin-left:2px;
}

/*--------------------------------
Additive Schematics
----------------------------------*/  

@media screen and (min-width: 768px){

  br.hide {
    display: none;
  }
}


/*--------------------------------
Sticky Menu Changes
----------------------------------*/

@media screen and (max-width: 767px){

  #main {
    top: 146px;
  }

  #footer{
    top: 146px;
  }

}  


@media screen and (max-width: 767px){

  div.rcbScroll.rcbWidth.RadTouchExtender{
    overflow-y: scroll !important;
  }

  div.rcbScroll.rcbWidth.RadTouchExtender{
    overflow-y: scroll !important;
  }

}

/*===========Side Nav================*/

#mobile-also-in-this-section {
  display: none;
}

@media screen and (max-width: 767px) {
   #mobile-also-in-this-section {
    display: block;
  } 
}


#ph_left_C010_Col00 {
   margin-left: 12px;
}



/* Slider text highlight */
.slick-slider
{
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

#fancybox-wrap{
max-width:1105px !important;
width:auto !important;
margin: 0 15px;
padding:25px !important;

}

#fancybox-content{
max-width:1025px !important;
width: 82vw !important;
border-width:20px !important;
}

#wrapper .alert{
position: relative !important;
width: 55% !important;
margin: 0 auto !important;
}

#fancybox-overlay {
overflow: hidden;
}


/***************************
GSSI - Offsite - 20200625
*****************************/
.sf_cols.offsite-main{
  max-width: 875px;
  width:100%;
  margin:0 auto;
  padding: 20px 0;
}
#content .sf_cols.offsite-main .sfimageWrp{
  margin:15px 0 20px;
}
.sf_cols.offsite-main .sfimageWrp img{
  width:100%;
  display: block;
}
.offsite-main .btn{
  display: inline-block;
  background-color: #0863AA;
  text-transform: uppercase;
  padding: 15px 22px;
  margin:5px 0;
    letter-spacing: 1px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
}
  .offsite-main .btn:hover{
    background-color: #28aae1;
  }
@media screen and (max-width: 767px){
  .sf_cols.offsite-main{
    padding: 30px 0 20px;
  }
}