/* Marketing - Contact Us CSS */

/* new header styles */

#bodyContainer {
    max-width: 100% !important
}
#breadcrumb {
    display:none
}
#article,
#article > section {
    margin: 0 !important;
    padding: 0 !important;
}

.new-page-header {
    width:100%;
    background: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/carat-new-header.png) no-repeat bottom left;
}

.new-page-header-inner {
    padding-right:50%;
    padding-top:24px;
    padding-bottom:30px;
    padding-left:32px;
    margin-bottom:24px;
}

.new-contact-us-img {
    background: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/headers/contact-us-img.png) no-repeat right top; }
.new-contact-us-color { background-color: #cee6ef; }

.hero-banner-panel h1{
    font-size: 48px !important;
}

.hero-banner-panel p{
    font-size: 18px !important;
}

.mkt .panel-body p,
.live-agent-panel p{
    Font-size: 15px !important;
}

.text-white{
    color: #ffffff !important;
    opacity: 95%;
}

.hero-banner-panel,
.contact-us-methods,
.avnet-global,
.contact-information,
.other-links,
.pf-programs {
    padding: 0 30px;
    max-width: 1290px;
    margin-left: auto !important;
    margin-right: auto !important;
}
.contact-information .panel-heading {
    padding: 13px 30px !important;
}

.help-center-panel,
.customer-service-panel,
.live-agent-panel {
    margin:5px 15px;
    background-color:#fff;
    border-radius: 10px;
    box-shadow: 0 3px 20px rgba(0,0,0,.2);
    overflow:hidden;
    min-height:180px;
    width: 28%;
}
.contact-us-methods .panel-body {
    padding: 30px !important;
}
.mkt .panel-body h4 {
   font-size: 18px !important;
}
.help-center-panel p,
.customer-service-panel p,
.live-agent-panel p {
    min-height:48px;
}
.help-center-panel .panel-body {
    color:#fff !important;
}
.help-center-panel {
    width: 38%;
    background-color: #24A148 !important;
}
.help-center-panel #searchInput {
    border-radius: 21px 21px;
    padding-left: 20px;
    margin-top: 10px;
    font-size: 15px;
}
.help-center-panel .text-white span{
    display: none;
}
.customer-service-panel {
    background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/plane-outline.svg);
    background-repeat: no-repeat;
    background-position:  right bottom;
}

.live-agent-panel  {
    background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/chat-panel-bg.svg);
    background-repeat: no-repeat;
    background-position: right bottom;
}

.contact-us-methods {
    display:flex;
    justify-content:space-between;
    margin-bottom: 25px;
    margin-top: -90px;
    padding: 0 10px !important;
}

.hero-banner {
    background-image: linear-gradient(to right, rgba(255,255,255, 1), rgba(255,255,255, .5) 30%, rgba(255,255,255, 0) 50%), url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/robot-assistant-jumbotron.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    padding:100px 120px 140px;
    background-size: cover;
}

.other-links {
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: space-around;
    margin: 0 20% !important;
}
.other-links .panel-body {
    display:flex;
    flex-flow: row;
    justify-content: space-around;
}
.other-links .card {
    width: 20%;
}
.other-links .card img {
    margin-bottom:6px;
}
.other-links .card a:hover span {
    text-decoration: underline;
}

.contact-information {
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    margin-bottom: 36px;
}
.contact-information .address-info,
.contact-information .panel-heading {
    width: 33.3331%;
}
.contact-information .address-info {
    padding: 30px;
    flex-direction: column;
    display: flex;
}
.contact-information .address-info {
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
}
.contact-information .address-info:last-child {
    border-top: 1px solid #cfcfcf;
    border-bottom: 1px solid #cfcfcf;
    border-right: 1px solid #cfcfcf;
    border-radius: 0 10px 10px 0;
}
.contact-information .panel-heading {
    background-color: #24A148;
    border-radius: 10px 0  0 10px;
}
.contact-information .address-info > div {
    min-height: 130px;
}

.avnet-global{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 36px;
}
.avnet-global .corporate-hq,
.avnet-global .global-offices {
    border-radius: 10px;
    border: 1px solid #cfcfcf;
    overflow:hidden;
}

.avnet-global .corporate-hq {
    width: 48%;
    display: flex;
    border-radius: 10px;
}
.avnet-global .corporate-hq .address-info {
    width:70%;
    padding: 30px;
}
.avnet-global .corporate-hq .location-info {
    width:60%;
}

.avnet-global .global-offices {
    width: 48%;
}
.avnet-global .global-offices .address-info {
    padding: 30px
}
.avnet-global .location-info {
    background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/newark-sign-ver1.jpg);
    background-size: cover;
    background-repeat: no-repeat;
}

.pf-programs{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.pf-insiders__panel,
.pf-affiliates__panel {
    width:48%;
    border-radius: 10px;
    color: #fff;
    display: flex;
    padding: 30px 30px;
    justify-content: center;
}

.pf-insiders__panel img,
.pf-affiliates__panel img {
    margin: 16px 0;
}


.pf-insiders__panel {
    background-color: #022D0D;
}

.pf-affiliates__panel {
    background-color: #198038;
}

.svg-inline-icons {
    margin-top: -2px
}

/* Help Center Styles for interaction */
.results-total,
.help-search-answer-content{
    display:none;
}
.mkt .search-container-inner {
    width: auto !important;
}
.search-container-inner.active {
    position: absolute;
    background: #fff;
    z-index: 10;
    padding: 0 20px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,.3);
    border-radius: 20px;
    width:90% !important;
    left:0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    padding-top: 15px;
    margin-top:-15px;
    max-width: 1290px;
}
.search-container-inner .search-close {
    display:none;
}
.search-container-inner.active .search-close {
    display:block;
    position: absolute;
    right: 34px;
    top: 32px;
}
.search-container-inner input {
    width: 100%;
    margin-top:20px
}
.help-search-question {
    padding: 12px;
    border-radius: 10px;
    cursor: pointer;
    border: 1px solid #cfcfcf;
}
.help-search-question:after {
    content: ' ';
    float:right;
    background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/chevron-down.svg);
    display: block;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    height: 24px;
    width: 24px;
}
.help-search-answer-content.display-answer {
    display:block !important;
}
.suggestions > div:last-child {
    border-bottom: none;
}
.suggestions p {
   min-height: auto !important;
}


/* 
@media (min-width: 768px) {}
@media (min-width: 992px) {}
@media (min-width: 1200px) {} 
*/

@media (max-width: 992px) {

    .contact-us-methods {
        flex-wrap: wrap;
    }
    .customer-service-panel,
    .live-agent-panel {
        width: 48% !important;
        flex-direction: row;
        flex: 1;
        margin-bottom: 30px !important;
    }
    .help-center-panel {
        width: 100%
    }
}
@media only screen and (max-width: 768px) {
    /* Overrides core framework style */
    #page-header {
        margin: 0;
    }
    #page-container{
        padding: 0;
    }
    
    .help-center-panel,
    .customer-service-panel,
    .live-agent-panel,
    .customer-service-panel,
    .live-agent-panel,
    .contact-us-methods,
    .other-links,
    .contact-information,
    .pf-programs,
    .avnet-global{
        width:100% !important;
        max-width: 768px !important;
        display: flex;
        flex:1;
        flex-direction: column;
        padding: 0 15px;
        margin-left: 0;
        margin-right: 0;
    }
    .panel-body .btn-primary,
    .pf-affiliates__panel .btn-ghost,
    .pf-insiders__panel .btn-ghost,
    .address-info .btn-primary {
        margin-bottom:0 !important
    }
    .hero-banner {
        background-position: -188px center;
        padding: 100px 36px 309px 36px;
    }
    .hero-banner-panel {
        padding:0;
        margin: 0;
    }
    .contact-us-methods {
        margin-top: -288px !important;
        margin-bottom: 0 !important;
    }
    .live-agent-panel,
    .customer-service-panel {
        background-image: none;
    }
    .live-agent-panel span br {
        display:none;
    }
    .help-center-panel {
        position: relative;
        border-radius: 0;
        display: block;
        width: 110% !important;
        margin-left: -5%;
        margin-right: -5%;
    }
    .help-center-panel .panel-body {
        padding: 30px !important;
    }
    .help-center-panel .panel-body h4 {
        margin-top: 0 !important;
    }
    .other-links {
        display: block !important;
        flex-flow: column;
        margin: 0 auto !important;
        width: 100%;
    }
    .other-links h2 {
        font-size: 20px !important;
    }
    .other-links .card {
        width: 100% 
    }
    .contact-information > div {
        border-radius: 10px 10px 0 0  !important;
        border-width: 0px;
    }
    .contact-information .address-info {
        border-radius: 0 !important;
        border-top: 1px solid #cfcfcf;
        border-left: 1px solid #cfcfcf;
        border-right: 1px solid #cfcfcf;
        border-bottom: none;
        padding-bottom: 0;
    }
    .contact-information .address-info:last-child {
        border-top: none;
        border-bottom: 1px solid #cfcfcf;
        border-radius: 0 0 10px 10px !important; 
        padding-top: 0 !important;
    }
    .contact-information .address-info > div {
        height: auto;
        margin-bottom: 20px !important;
    }
    .contact-information .address-info, 
    .contact-information .panel-heading {
        width: 100% !important;
    }

    .pf-insiders__panel, 
    .pf-affiliates__panel,
    .avnet-global .corporate-hq, 
    .avnet-global .global-offices {
        width: 100% !important;
        margin-bottom: 20px
    }
    
    .avnet-global .corporate-hq .address-info {
        width: 100% !important;
    }
    .location-info {
        display:none;
    }
    
    .avnet-global .global-offices,
    .pf-insiders__panel {
        margin-bottom: 0;
    }
    .avnet-global,
    .pf-programs,
    .avnet-global .corporate-hq,
    .pf-affiliates__panel {
        margin-bottom: 36px
    }

    /* Search overwrite stuff */

    .help-center-panel {
        overflow:visible;
    }

    .mkt .search-container-inner {
        width: auto !important;
    }
    .search-container-inner.active {
        width: 100% !important;
        left: 0%;
    }
    .search-container-inner.active .search-close {
        display:block;
        position: absolute;
        right: 30px;
        top: 34px;
    }
    .search-container-inner input {
        width: 100%;
        margin-top:20px;
        padding: 8px
    }
    .mkt .suggestions {
        top: 0 !important;
    }
    .help-search-question {
        font-size: 14px !important;
        padding-right: 20px !important;
    }
    .help-search-question:after {
        position: relative;
        right: -16px
    }
    .help-search-answer-content.display-answer {
        display:block !important;
        padding: 0 8px
    }
    .pf-insiders__panel,
    .pf-affiliates__panel,
    .mkt .panel-body > p,
    .mkt .panel-body > h4 {
        flex-direction: column;
        text-align: center;
    }
    .mkt .panel-body .btn-primary {
        display:block;
        margin: 0 auto;
    }
    .customer-service-panel .btn:before,
    .live-agent-panel .btn:before {
        content: '';
        height: 24px;
        width:24px;
        position: relative;
        display:inline-block;
        margin-top: -8px;
        margin-right: 6px;
        top: 5px;
        background-repeat: no-repeat;
        background-position: center;
        background-size: scale; 
    }

    .customer-service-panel .btn:before {
        background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/paper-place-icon-white.svg);
    }
    .live-agent-panel .btn:before {
        background-image: url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/live-agent-icon-white.svg);
        width:28px;
    }



    .pf-insiders__panel .panel-body,
    .pf-affiliates__panel .panel-body {
        padding-bottom:0 !important
    }
    .pf-insiders__panel img, 
    .pf-affiliates__panel img {
        margin: 0 auto;
    }
    .suggestions > div:last-child {
        border-bottom: none;
    }
    .suggestions p {
       min-height: auto !important;
        
    }
    .hero-banner {
        background-image: linear-gradient(to right, rgba(255,255,255, .7) 80%,  rgba(255,255,255, 0)), 
          url(/wcsstore/ExtendedSitesCatalogAssetStore/cms/asset/images/common/contact_us/robot-assistant-jumbotron.jpg);
        background-position: left;
        background-size: cover;
    }

    /* Live Agent not availablew on mobile */

    .live-agent-panel,
    .liveagent-link {
        display:none;
    }
}