/* Competitor page styles.

   developer:   yhechler, tajudeen
   requires:    /enterprise-private-cloud/css/epc-shared.css.ko
   ========================================================================== */

/* heading
   ========================================================================== */

#heading h2 img {
    margin: 0rem 2rem 0rem 0rem;
    display: inline;
    vertical-align: bottom;
}

.width.header h2 {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    align-items: center;
}

/* section
   ========================================================================== */   
.section-wrapper .table { display: table; }

.section-wrapper .row-container {
    display: block;
    border-bottom: 1px solid #b3b3b3;
    padding-bottom: 2.5rem;
    margin-bottom: 2.5rem;
}

.section-wrapper .row-container.first {
/*    display: block;*/
    border-top: 1px solid #b3b3b3 !important;
    padding-top: 2.5rem;
    margin-top: 1.25rem;
}

.section-wrapper .row-container.last {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.section-wrapper .column {
    padding: 0 4.75rem 0 0;
}

.section-wrapper .column.right { padding: 0; }

.section-wrapper .spacer { height: 3.125rem; }

.section-wrapper h3 {
    color: #535353;
    font-size: 1.3125rem;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 0;
    max-width: 38.75rem;
}

.section-wrapper span.note-list {
    display: inline-block;
    margin-top: 0.625rem;
    width: 70%;
}

.section-wrapper.note {
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 2;
}

.section-wrapper h3.first {
 	border-top: none; 
 	max-width: 52.5rem;
 }

.section-wrapper h4.first { border-top: none; }

.section-wrapper h4 {
    margin: 0rem 0 0.3125rem;
    color: #ff7700;
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.25;
}

.section-wrapper img {
    display: block;
    margin: 1.5625rem 2.4375rem 0rem 0;
}

.section-wrapper p {
    margin: 0.375rem 0 0rem 0;
    color: #636363;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.6;
    max-width:38.75rem;
}

.section-wrapper p span { color: #c10000; }

#competitors .section-wrapper .row-container {
    display: flex;
    justify-content: space-between;
    gap: 1rem 6.25rem;
    flex-wrap: nowrap;
}

.section-wrapper .text.left {
    width: 60%;
    padding: 0;
    display: inline-block;
    vertical-align: top;
}

.section-wrapper .img.right {
    padding: 0rem;
    display: inline-block;
    width: 30%;
}

.column.left {
/*    width: 40%;*/
    padding: 0 2.8125rem 0 0;
    max-width: 100%;
    height: auto;
}
/* get help
   ========================================================================== */

#help { border: none; }

/* contact us section overwrite
   ========================================================================== */
   
#contact-us-section { margin-top: 8%; }


/* ==========================================================================
   responsive breakpoint styles
   ========================================================================== */

/* styles for medium screens (1200px)
   ========================================================================== */

   @media all and (max-width: 1200px) {}

   /* styles for medium screens (900px)
      ========================================================================== */
   
   @media all and (max-width: 900px) {
        .section-wrapper .text.left {
/*            width: 80%;*/
        }
        #competitors .section-wrapper .row-container {
            gap: 1rem 2rem;
        }
        .section-wrapper .img.right {
            width: 40%;
        }
        #heading h2 img {
            margin: 0rem 0rem 0rem 0rem;
        }
   }
   
   /* styles for medium screens (600px)
      ========================================================================== */
   
   @media all and (max-width: 600px) {
        #competitors .section-wrapper .row-container {
            flex-wrap: wrap;
            flex-direction: column-reverse;
        }
        .section-wrapper span.note-list,
        .section-wrapper .text.left,
        .section-wrapper p {
            max-width: 100%;
            width: 100%;
        }
        #competitors .row-container img {
            margin: 0rem;
            width: 200px;
            height: auto;
        }
   }
   
   /* styles for medium screens (320px)
      ========================================================================== */
   
   @media all and (max-width: 320px) {}