/* Enterprise Private Cloud use cases page styles.

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

/* ==========================================================================
   shared styles
   ========================================================================== */

.section-wrapper .width { padding: 1.5625rem 0 0 0; }

.section-wrapper .row { display: table-row; }

.section-wrapper .column { display: table-cell; }

.section-wrapper .column.right { 
    padding: 0; 
/*    text-align: end;*/
}

#use-cases.subpage .three-columns,
#use-cases.subpage .two-columns {
    display: flex !important;
    justify-content: space-between;
    flex-wrap: nowrap;
}    
#use-cases.subpage .three-columns { gap: 0.5rem;}

/*#use-cases.subpage .two-columns { gap: 1rem; }*/

#use-cases.subpage .two-columns > * {
/*    flex: 1 1 50%;*/
}


#use-cases.subpage .column.left.workflow {
    width: 47.5rem !important;
    max-width: 100%;
}
#use-cases.subpage .column.left.workflow.rapid { width: 43.125rem !important; }

#use-cases.subpage .column.right.rapid-img { margin-top: 1.875rem }

#use-cases.subpage .column.left {
/*    width: 34.375rem !important;*/
/*    max-width: 100%;*/
}

#use-cases.subpage .three-columns > * {
    flex: 1 1 33%;
}



/* ==========================================================================
   landing page styles
   ========================================================================== */

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

#use-cases.landing #heading .width { padding: 3.125rem 0 1.5625rem 0; }
#use-cases.landing #heading p {
    color: #535353;
    font-size: 1.75rem;
    font-weight: 300;
    line-height: 1.5;
    width: 100%;
}
#use-cases.subpage #heading p.rapid {
    width: 100%;
}

#use-cases.subpage #stripe img {
    margin: 2.5rem 0 3.125rem 4.375rem;
}

/* main
   ========================================================================== */

#use-cases.landing #about .column { vertical-align: middle; }

#use-cases.landing #about .column.right {
    padding-left: 3%;
    width: 30%;
}

#use-cases.landing #about hr {
    border: none;
    border-top: 1px solid #b3b3b3;
    height: 0;
    margin: 3.125rem 0;
    padding: 0;
}

#use-cases.landing #about h3 {
    color: #dd1100;
    font-size: 2.0625rem;
    font-weight: 300;
    line-height: 1.3;
    margin-bottom: 0.3125rem;
    width: 100%;
}

#use-cases.landing #about a:hover h3,
#use-cases.landing #about a:active h3 { color: #f77700; }

#use-cases.landing #about p {
    color: #535353;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.5;
    margin-bottom: 0.3125rem;
}

#use-cases.landing .button {
    background: #fff;
    border-radius: 3px;
    border: 1px solid #dd1100;
    color: #dd1100;
    cursor: pointer;
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1;
    padding: 0.25rem 0.75rem;
    text-decoration: none;
}

#use-cases.landing a:hover .button,
#use-cases.landing a:active .button {
    border: 1px solid #f77700;
    color: #f77700;
}

/* ==========================================================================
   shared subpage styles
   ========================================================================== */

#use-cases hr {
    border: none;
    border-top: 1px solid #b3b3b3;
    height: 0;
    margin: 0;
    padding: 0;
}

/* header
   ========================================================================== */

#use-cases.subpage #heading .column { vertical-align: top; }
#use-cases.subpage #heading .background-img{ background: url('/enterprise-private-cloud/use-cases/centralized-computation-and-reporting/img/1.png') no-repeat 560px; }
#use-cases.subpage #heading h2 {
    color: #dd1100;
    font-size: 2.8125rem;
    font-weight: 400;
    line-height: 1.11;
/*    width: 47.5rem;*/
    max-width: 100%;
    margin-bottom: 0.25rem;
}
#use-cases.subpage #heading .column.right.edge{ padding-top:0.9375rem;}

.column.right.edge img {
    margin-right: -4.25rem;
}

#use-cases.subpage #heading h2 span {
    color: #636363;
    font-size: 1.5rem;
    font-weight: 300;
    line-height: 0;
}

#use-cases.subpage #heading h2 span:last-child {
    color: #f77700;
    position: relative;
    top: -0.75rem;
}

#use-cases.subpage #heading p {
    color: #535353;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1.75rem;
    padding: 0.625rem 0rem 2.5rem 0;
    width: 85%;
}

/* stripe
   ========================================================================== */

#use-cases.subpage #stripe {
    background: #f2f2f2;
    border-bottom: 1px solid #b0b0b0;
    border-top: 1px solid #b0b0b0;
    color: #dd1100;
    font-size: 2.0625rem;
    font-weight: 300;
    line-height: 1.18;
    padding: 1.25rem 0;
}

#use-cases.subpage #stripe .width { padding: 0; }

#use-cases.subpage #stripe .center{
	width: 52.5rem;
	margin: 0 auto;
	display: block;
    max-width: 100%;
}

/* main
   ========================================================================== */

#use-cases.subpage #main .width { padding: 2.5rem 0; }
#use-cases.subpage #main .section-wrapper:last-child .width { padding: 1.875rem 0 0 0; }

/*#use-cases.subpage #main .background-img{ 
    background: url('/enterprise-private-cloud/use-cases/centralized-computation-and-reporting/img/3.png') no-repeat 580px; 
}
*/
#use-cases.subpage #main .background-img p{ 
    width:560px;
    max-width: 100% !important;
}

#use-cases.subpage #main .column.left.wide{ width:1015px;}
#use-cases.subpage #main .column { vertical-align: top; }
#use-cases.subpage #main .column.right.align-left { padding-left:80px; }
#use-cases.subpage #main h3 {
    color: #333;
    font-size: 33px;
    font-weight: 300;
    line-height: 2.5rem;
    margin-bottom: 1.25rem;
}

#use-cases.subpage #main p.main {
    color: #535353;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.5625rem;
    margin-bottom: 1.25rem;
}

#use-cases.subpage #main p.main,
#use-cases.subpage #main p.notes{
	max-width: 556px;
}

#use-cases.subpage #main p.essentials {
    color: #535353;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    margin-bottom: 10px;
}

#use-cases.subpage #main p.notes {
    color: #727272;
    font-size: 15px;
    font-weight: 400;
    line-height: 21px;
    margin-bottom: 10px;
}

#use-cases.subpage #main p.notes span { color: #ff7700; }
#use-cases.subpage #main .left img {
    display: inline-block;
    margin:60px 60px auto 2.5rem;
}
#use-cases.subpage #main .more-margin-right img {
    display: inline-block;
    margin:60px 100px auto auto;
}
#use-cases.subpage #main .left.margin-more img {
/*	margin-right: 176px;*/
    margin-right: 16rem;
}
#use-cases.subpage #main .right img {
    display: inline-block;
/*    margin-left: 130px;*/
    margin-top: 3.75rem;
}

#use-cases.subpage #main .table .table .column { vertical-align: top; }

#use-cases.subpage #main .two-columns .table .column:first-child { padding-right: 10px; }

#use-cases.subpage #main i.circle-green,
#use-cases.subpage #main i.circle-orange,
#use-cases.subpage #main i.circle-blue,
#use-cases.subpage #main i.circle-purple {
    color: #fff;
    display: inline-block;
    font-size: 1.75rem;
    font-style: normal;
    font-weight: 400;
    height: 2.5rem;
    letter-spacing: -2px;
    line-height: 36px;
    text-align: center;
    width: 2.5rem;
}

#use-cases.subpage #main i.circle-green { background: url('/enterprise-private-cloud/use-cases/img/circle-green.png') no-repeat; }
#use-cases.subpage #main i.circle-orange { background: url('/enterprise-private-cloud/use-cases/img/circle-orange.png') no-repeat; }
#use-cases.subpage #main i.circle-blue { background: url('/enterprise-private-cloud/use-cases/img/circle-blue.png') no-repeat; }
#use-cases.subpage #main i.circle-purple { background: url('/enterprise-private-cloud/use-cases/img/circle-purple.png') no-repeat; }

/* footer
   ========================================================================== */

#subpage-footer .table {
    font-size: 1.25rem;
    line-height: 21px;
    vertical-align: middle;
}

#subpage-footer .table img {
    display: inline-block;
    margin-right: 10px;
}

#use-cases.subpage #subpage-footer .table .table .column { vertical-align: middle; }
#use-cases.subpage #subpage-footer .table .table .column:first-child { padding-right: 0; }

#subpage-footer .table1 > .column { width: 33%; }
#subpage-footer .table2 > .column:nth-child(odd) { width: 2.5rem; }

#subpage-footer .table a { color: #333; }
#subpage-footer .table a:hover,
#subpage-footer .table a:active { color: #f77700; }


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

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

   @media all and (max-width: 1200px) {
        #use-cases.landing #about .column.right {
            padding-left: 0%; 
        }
        #use-cases.subpage #main i.circle-green, 
        #use-cases.subpage #main i.circle-orange, 
        #use-cases.subpage #main i.circle-blue, 
        #use-cases.subpage 
        #main i.circle-purple  {
            height: 3rem;
            letter-spacing: 3px;
            width: 3rem;
        }
        #use-cases.subpage #main .left img {
            margin: 60px 60px auto 0rem !important;
        }
        .two-columns.rev .column.right,
        .column.right.img.interface img {
            margin-left: 1rem;
        }
        #use-cases.subpage #heading .column.right.edge {
            padding-top: 5.9375rem;
        }
        #use-cases.subpage #stripe img {
            margin: 2.5rem 0 3.125rem 0rem;
        }
   }

   /* styles for medium screens (900px)
      ========================================================================== */
   
   @media all and (max-width: 900px) {
        /* MAIN PAGE - USE CASES*/
        #about .width img {
            max-width: 100%;
            height: auto;
        }
        
        /*  SUB-PAGES     */
        #use-cases.subpage .table {
            font-size: 1.1rem;
        }
        #use-cases.subpage #heading p {
            padding: 0.625rem 0rem 2.5rem 0;
            width: unset; 
        }
        #use-cases.subpage #heading h2 {
            width: auto;
        }
        /* SUB PAGES */
        #use-cases.subpage #main .column.right.align-left { padding-left: 1rem; }
        .column.left.margin-more { margin-right: 1rem; }
        #use-cases.subpage .column.left.workflow {
            width: 47rem !important;
        }
        #use-cases.subpage #main .background-img p {
            width: unset; 
        }
   }
   
   /* styles for medium screens (600px)
      ========================================================================== */
   
   @media all and (max-width: 600px) {
        /* MAIN PAGE - USE CASES*/
        #about .width .table {
            display: flex;
            flex-direction: column-reverse;
        }
        #about .width img {
            max-width: 200px;
            height: auto;
        }
        #use-cases.landing #about .column.right {
            padding-left: 0%;
            width: 100%;
            margin-bottom: 1rem;
        }

        /*  SUB-PAGES     */
        /*  Common sub pages style     */
        #use-cases.subpage #heading p {
            padding: 0.625rem 0rem 1rem 0;
        }
        #use-cases.subpage .column.left {
            width: 100% !important;
        }
        #use-cases.subpage #main .two-columns .table .column:first-child { 
            padding-right: 0rem; 
        }
        #use-cases.subpage .header .two-columns img,
        #use-cases.subpage #main .two-columns img {
            width: 200px;
            height: auto;
            margin-top: 1rem !important;
        }
        #use-cases.subpage .three-columns,
        #use-cases.subpage .two-columns {
            flex-wrap: wrap;
            flex-direction: column;
        }
        #use-cases.subpage #main .right img {
            margin-top: 0rem;
        }
        #use-cases.subpage .two-columns.rev {
            flex-direction: column-reverse !important;
        }
        #use-cases.subpage #main i.circle-green, #use-cases.subpage #main i.circle-orange, #use-cases.subpage #main i.circle-blue, #use-cases.subpage #main i.circle-purple {
            height: 4rem;
            letter-spacing: 13px;
            width: 4rem;
        }
        #use-cases.subpage #main .left img {
            margin: 1rem 0 0 0 !important;
        }
        #subpage-footer .table2 > .column:nth-child(odd) {
            width: 5.5rem;
            text-align: center;
        }
        #subpage-footer .table1 > .column {
             width: 100%; 
             margin-bottom: 0.5rem;
        }
        #use-cases.subpage #main .column {
            vertical-align: middle;
        }
        /*    Centralized-computation-and-reporting    */
        #use-cases.subpage #main .column.right.align-left { 
            padding-left: 1rem; 
        }
        .two-columns.rev .column.right, .column.right.img.interface img,
        .column.right.img.interface img {
            margin-left: 0rem;
        }
        #use-cases.subpage #heading .column.right.edge {
            padding-top: 0rem;
        }
        #use-cases.subpage #main .column.right.align-left { 
            padding: 0rem  
        }
/*        .two-columns.rev .column.right, .column.right.img.interface img {
            margin-left: 0rem;
        }*/

   }
   
   /* styles for medium screens (320px)
      ========================================================================== */
   
   @media all and (max-width: 320px) {}