.home-top-bg {background:url(/images/layout/banner/index-home-topbanner.jpg);background-repeat:no-repeat;background-position:top center;background-color:#010101;background-size:cover;position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;width:100%;height:100%;opacity:1;}
a:link, a:visited{color:#EF8000;outline:none}
.home-banner-subheader2{padding:0px 0px 20px 0px;color:#F5940A;font-size:21px;text-align:center!important}
.ea17, .ea17 a {color: white!important;font-size: 24px;padding-bottom:20px;}
.home-banner-row {min-height:384px;max-width: 1200px;}
html{background-image:url(/images/layout/home/background5.png);background-position:center top;background-repeat:no-repeat;margin:0 auto}

/* ==========================================================================
   HOME PAGE UPDATE - APRIL 2026
   ========================================================================== */

/* 1. FIX: Remove the 525px height constraint on the banner content area */
#homebannercontent {
    width: 100%;
    clear: both;
    position: relative;
    z-index: 0;
    margin-top: 80px;
    max-height: 525px; /* Overriding the 525px limit */


}

/* 2. PRODUCT BOXES CONTAINER (Flexbox for even distribution) */
.home-button-row {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between; /* Distributes items evenly with space between them */
    align-items: center;
    flex-wrap: wrap;               /* Allows wrapping on mobile screens */
    width: 100%;

}

/* Base style for all product boxes */
.product-box {
    flex: 1;
    min-width: 300px;
    height: 110px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.8), rgba(0,0,0,0.9));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Crucial: includes padding/border in width */
}


/* 1. Main wrapper */
.new-banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto; /* This handles the centering */
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;

}

/* 2. Top row row container */
.banner-top-row {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    gap: 15px;           /* 15px horizontal space between EA and Trerado */
    margin-bottom: 15px; /* 15px vertical space above Kernaro */
}
/* Individual button area */
.home-banner-button-area {
    flex: 1;             /* Each column takes equal available space */
    width: 220px;    /* Minimum width to prevent buttons from getting too narrow */
    text-align: center;
}

/* The actual button styling */
.home-banner-button {
    border-radius: 16px !important;
    text-align: center !important;
    text-decoration: none !important;

    /* Using inline-flex to center text and icons perfectly */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    background-color: #426489;
    color: #fff;

    width: 85%;          /* Button width relative to its area */
    max-width: 240px;    /* Prevents buttons from becoming too wide on large screens */
    min-height: 46px;
    padding: 8px 15px !important;
    margin: 10px auto !important;
    transition: background-color 0.3s ease;
}



/* --- BOX 1: EA (Standard White Glow) --- */
.box-ea {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.75);
    width: calc(60% - 9px);
    height: 250px;
    flex: 0 0 calc(60% - 9px); /* Precise 60% minus shared gap */
}

/* --- BOX 2: TRERADO (Softer Spread Glow) --- */
.box-trerado {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.75);
    width: calc(40% - 6px);
    height: 250px;
    flex: 0 0 calc(40% - 6px); /* Precise 40% minus shared gap */
}

/* --- BOX 3: KERNARO (Purple Glow + Gradient + Inline Border) --- */
.box-kernaro {
    width: 100%;
    height: 110px;

    /* Vertical Gradient: Black to a subtle, muted purple */
    background: linear-gradient(to bottom, #000000, #3a2a45);

    /* Combined Shadows:
       1. inset: Creates the 'Inline Border' (subtle white line inside the edge)
       2. outer: Creates the 'Purple Outer Glow' as requested by Henning
    */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 12px 2px rgba(255, 255, 255, 0.75);

    /* Layout: Horizontal alignment for text and the CTA button */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Kernaro Three-Column Layout (1/3 each) */
.kernaro-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* --- SHOW ME BUTTON (Upscaled 50% with Background Image) --- */
.btn-show-me-custom {
    background: url('/images/layout/home/showme-button.png') no-repeat center center;
    background-size: 100% 100%;

    width: 170px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

	padding-top: 3px;
	padding-right: 10px;

    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none !important;
    transition: transform 0.3s ease, filter 0.3s ease;
}


/*   /xtras/lytebox2/lytebox.css    45% used  */
/*   /xtras/lytebox2/lytebox.css    45% used  */
#lbOverlay { position: fixed; top: 0; left: 0; z-index: 99997; width: 100%; height: 100%; }
	#lbOverlay.black { background-color: #000000; }
	#lbOverlay.grey { background-color: #000000; }
	#lbOverlay.red { background-color: #330000; }
	#lbOverlay.green { background-color: #003300; }
	#lbOverlay.blue { background-color: #011D50; }
	#lbOverlay.gold { background-color: #666600; }
	#lbOverlay.orange { background-color: #FFBB48; }

#lbMain { position:absolute;left:0;width:100%;z-index:99998;text-align:center;line-height:0; }
#lbMain a img { border: 1px solid #ffffff; }

#lbOuterContainer {	position: relative; background-color: #fff; width: 200px; height: 200px; margin: 0 auto; }
	#lbOuterContainer.black { border: 2px solid #CCCCCC; background-color: #000000; }
	#lbOuterContainer.grey { border: 2px solid #888888; }
	#lbOuterContainer.red { border: 2px solid #DD0000; }
	#lbOuterContainer.green { border: 2px solid #00B000; }
	#lbOuterContainer.blue { border: 2px solid #5F89D8; }
	#lbOuterContainer.gold { border: 2px solid #B0B000; }
	#lbOuterContainer.orange { border: 2px solid #D15211; }

#lbTopContainer, #lbBottomContainer {
	font: 0.85em Verdana, Helvetica, sans-serif; background-color: #fff; width: 100%; line-height: 1.4em; font-size: 0.9em;
	overflow: hidden; margin: 0 auto; padding: 0; position: relative; z-index: 14; display: none;
}
#lbTopContainer { overflow: hidden; margin-top: 5px; }
#lbTopContainer.black, #lbBottomContainer.black { background-color: #000000; }
#lbTopContainer.grey, #lbTopContainer.red, #lbTopContainer.green, #lbTopContainer.blue, #lbTopContainer.gold, #lbTopContainer.orange,
#lbBottomContainer.grey, #lbBottomContainer.red, #lbBottomContainer.green, #lbBottomContainer.blue, #lbBottomContainer.gold, #lbBottomContainer.orange {
	background-color: #ffffff;
}

#lbImage, #lbIframe { border: none; }
#lbImage.black, #lbIframe.black { border: 1px solid #CCCCCC; }
	#lbImage.grey, #lbIframe.grey { border: 1px solid #888888; }
	#lbImage.red, #lbIframe.red { border: 1px solid #DD0000; }
	#lbImage.green, #lbIframe.green { border: 1px solid #00B000; }
	#lbImage.blue, #lbIframe.blue { border: 1px solid #5F89D8; }
	#lbImage.gold, #lbIframe.gold { border: 1px solid #B0B000; }
	#lbImage.orange, #lbIframe.orange { border: 1px solid #D15211; }
#lbImageContainer, #lbIframeContainer { padding: 10px; z-index: 12; }
#lbLoading {
	height: 100%; width: 100%; margin-top: -10px;
	background: url('/xtras/lytebox2/images/loading_white.gif') center no-repeat;
}
#lbLoading.black { background: url('/xtras/lytebox2/images/loading_black.gif') center no-repeat; }

#lbHoverNav { position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#lbImageContainer>#lbHoverNav { left: 0; }
#lbHoverNav a { outline: none; }

#lbPrevHov { width: 48%; height: 100%; background: transparent url('/xtras/lytebox2/images/blank.gif') no-repeat; display: block; left: 0; float: left; margin-left: 3px; border: none !important; }
	#lbPrevHov.black:hover, #lbPrevHov.black:visited { background: url('/xtras/lytebox2/images/prev_black_t.png') left 30% no-repeat; }
	#lbPrevHov.grey:hover, #lbPrevHov.grey:visited { background: url('/xtras/lytebox2/images/prev_grey_t.png') left 30% no-repeat; }
	#lbPrevHov.red:hover, #lbPrevHov.red:visited { background: url('/xtras/lytebox2/images/prev_red_t.png') left 30% no-repeat; }
	#lbPrevHov.green:hover, #lbPrevHov.green:visited { background: url('/xtras/lytebox2/images/prev_green_t.png') left 30% no-repeat; }
	#lbPrevHov.blue:hover, #lbPrevHov.blue:visited { background: url('/xtras/lytebox2/images/prev_blue_t.png') left 30% no-repeat; }
	#lbPrevHov.gold:hover, #lbPrevHov.gold:visited { background: url('/xtras/lytebox2/images/prev_gold_t.png') left 30% no-repeat; }
	#lbPrevHov.orange:hover, #lbPrevHov.orange:visited { background: url('/xtras/lytebox2/images/prev_orange_t.png') left 30% no-repeat; }

#lbNextHov { width: 48%; height: 100%; background: transparent url('/xtras/lytebox2/images/blank.gif') no-repeat; display: block; right: 0; float: right; margin-right: 3px; border: none !important; }
	#lbNextHov.black:hover, #lbNextHov.black:visited { background: url('/xtras/lytebox2/images/next_black_t.png') right 30% no-repeat; }
	#lbNextHov.grey:hover, #lbNextHov.grey:visited { background: url('/xtras/lytebox2/images/next_grey_t.png') right 30% no-repeat; }
	#lbNextHov.red:hover, #lbNextHov.red:visited { background: url('/xtras/lytebox2/images/next_red_t.png') right 30% no-repeat; }
	#lbNextHov.green:hover, #lbNextHov.green:visited { background: url('/xtras/lytebox2/images/next_green_t.png') right 30% no-repeat; }
	#lbNextHov.blue:hover, #lbNextHov.blue:visited { background: url('/xtras/lytebox2/images/next_blue_t.png') right 30% no-repeat; }
	#lbNextHov.gold:hover, #lbNextHov.gold:visited { background: url('/xtras/lytebox2/images/next_gold_t.png') right 30% no-repeat; }
	#lbNextHov.orange:hover, #lbNextHov.orange:visited { background: url('/xtras/lytebox2/images/next_orange_t.png') right 30% no-repeat; }

#lbPrev, #lbPrevTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbPrev.black, #lbPrevTop.black { background: url('/xtras/lytebox2/images/prev_black.png') no-repeat; }
	#lbPrev.blackOff, #lbPrevTop.blackOff { background: url('/xtras/lytebox2/images/prev_black_off.png') no-repeat; cursor: default; }
	#lbPrev.grey, #lbPrevTop.grey { background: url('/xtras/lytebox2/images/prev_grey.png') no-repeat; }
	#lbPrev.greyOff, #lbPrevTop.greyOff { background: url('/xtras/lytebox2/images/prev_grey_off.png') no-repeat; cursor: default; }
	#lbPrev.red, #lbPrevTop.red { background: url('/xtras/lytebox2/images/prev_red.png') no-repeat; }
	#lbPrev.redOff, #lbPrevTop.redOff { background: url('/xtras/lytebox2/images/prev_red_off.png') no-repeat; cursor: default; }
	#lbPrev.green, #lbPrevTop.green { background: url('/xtras/lytebox2/images/prev_green.png') no-repeat; }
	#lbPrev.greenOff, #lbPrevTop.greenOff { background: url('/xtras/lytebox2/images/prev_green_off.png') no-repeat; cursor: default; }
	#lbPrev.blue, #lbPrevTop.blue { background: url('/xtras/lytebox2/images/prev_blue.png') no-repeat; }
	#lbPrev.blueOff, #lbPrevTop.blueOff { background: url('/xtras/lytebox2/images/prev_blue_off.png') no-repeat; cursor: default; }
	#lbPrev.gold, #lbPrevTop.gold { background: url('/xtras/lytebox2/images/prev_gold.png') no-repeat; }
	#lbPrev.goldOff, #lbPrevTop.goldOff { background: url('/xtras/lytebox2/images/prev_gold_off.png') no-repeat; cursor: default; }
	#lbPrev.orange, #lbPrevTop.orange { background: url('/xtras/lytebox2/images/prev_orange.png') no-repeat; }
	#lbPrev.orangeOff, #lbPrevTop.orangeOff { background: url('/xtras/lytebox2/images/prev_orange_off.png') no-repeat; cursor: default; }

#lbNext, #lbNextTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbNext.black, #lbNextTop.black { background: url('/xtras/lytebox2/images/next_black.png') no-repeat; }
	#lbNext.blackOff, #lbNextTop.blackOff { background: url('/xtras/lytebox2/images/next_black_off.png') no-repeat; cursor: default; }
	#lbNext.grey, #lbNextTop.grey { background: url('/xtras/lytebox2/images/next_grey.png') no-repeat; }
	#lbNext.greyOff, #lbNextTop.greyOff { background: url('/xtras/lytebox2/images/next_grey_off.png') no-repeat; cursor: default; }
	#lbNext.red, #lbNextTop.red { background: url('/xtras/lytebox2/images/next_red.png') no-repeat; }
	#lbNext.redOff, #lbNextTop.redOff { background: url('/xtras/lytebox2/images/next_red_off.png') no-repeat; cursor: default; }
	#lbNext.green, #lbNextTop.green { background: url('/xtras/lytebox2/images/next_green.png') no-repeat; }
	#lbNext.greenOff, #lbNextTop.greenOff { background: url('/xtras/lytebox2/images/next_green_off.png') no-repeat; cursor: default; }
	#lbNext.blue, #lbNextTop.blue { background: url('/xtras/lytebox2/images/next_blue.png') no-repeat; }
	#lbNext.blueOff, #lbNextTop.blueOff { background: url('/xtras/lytebox2/images/next_blue_off.png') no-repeat; cursor: default; }
	#lbNext.gold, #lbNextTop.gold { background: url('/xtras/lytebox2/images/next_gold.png') no-repeat; }
	#lbNext.goldOff, #lbNextTop.goldOff { background: url('/xtras/lytebox2/images/next_gold_off.png') no-repeat; cursor: default; }
	#lbNext.orange, #lbNextTop.orange { background: url('/xtras/lytebox2/images/next_orange.png') no-repeat; }
	#lbNext.orangeOff, #lbNextTop.orangeOff { background: url('/xtras/lytebox2/images/next_orange_off.png') no-repeat; cursor: default; }

#lbTopData, #lbBottomData { float: left; text-align: left; padding-left: 10px; }
#lbBottomData { padding-bottom: 0.5em; }
	#lbBottomData.black, #lbTopData.black { color: #ffffff; }
	#lbBottomData.grey, #lbTopData.grey { color: #333333; }
	#lbBottomData.red, #lbTopData.red { color: #620000; }
	#lbBottomData.green, #lbTopData.green { color: #003300; }
	#lbBottomData.blue, #lbTopData.blue { color: #01379E; }
	#lbBottomData.gold, #lbTopData.gold { color: #666600; }
	#lbBottomData.orange, #lbTopData.orange { color: #D15211; }

#lbTopNav, #lbBottomNav { float: right; text-align: right; padding-right: 10px; }
#lbNumTop, #lbNumBottom { font-style: italic; }
#lbDescBottom { display: block; }
#lbTitleTop, #lbTopNav { margin-top: 0.3em; }
#lbTitleTop, #lbTitleBottom { display: block; font-weight: bold; }

#lbClose, #lbCloseTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbClose.black, #lbCloseTop.black { background: url('/xtras/lytebox2/images/close_black.png') no-repeat; }
	#lbClose.grey, #lbCloseTop.grey { background: url('/xtras/lytebox2/images/close_grey.png') no-repeat; }
	#lbClose.red, #lbCloseTop.red { background: url('/xtras/lytebox2/images/close_red.png') no-repeat; }
	#lbClose.green, #lbCloseTop.green { background: url('/xtras/lytebox2/images/close_green.png') no-repeat; }
	#lbClose.blue, #lbCloseTop.blue { background: url('/xtras/lytebox2/images/close_blue.png') no-repeat; }
	#lbClose.gold, #lbCloseTop.gold { background: url('/xtras/lytebox2/images/close_gold.png') no-repeat; }
	#lbClose.orange, #lbCloseTop.orange { background: url('/xtras/lytebox2/images/close_orange.png') no-repeat; }

#lbPrint, #lbPrintTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbPrint.black, #lbPrintTop.black { background: url('/xtras/lytebox2/images/print_black.png') no-repeat; }
	#lbPrint.grey, #lbPrintTop.grey { background: url('/xtras/lytebox2/images/print_grey.png') no-repeat; }
	#lbPrint.red, #lbPrintTop.red { background: url('/xtras/lytebox2/images/print_red.png') no-repeat; }
	#lbPrint.green, #lbPrintTop.green { background: url('/xtras/lytebox2/images/print_green.png') no-repeat; }
	#lbPrint.blue, #lbPrintTop.blue { background: url('/xtras/lytebox2/images/print_blue.png') no-repeat; }
	#lbPrint.gold, #lbPrintTop.gold { background: url('/xtras/lytebox2/images/print_gold.png') no-repeat; }
	#lbPrint.orange, #lbPrintTop.orange { background: url('/xtras/lytebox2/images/print_orange.png') no-repeat; }

#lbPlay, #lbPlayTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbPlay.black, #lbPlayTop.black { background: url('/xtras/lytebox2/images/play_black.png') no-repeat; }
	#lbPlay.grey, #lbPlayTop.grey { background: url('/xtras/lytebox2/images/play_grey.png') no-repeat; }
	#lbPlay.red, #lbPlayTop.red { background: url('/xtras/lytebox2/images/play_red.png') no-repeat; }
	#lbPlay.green, #lbPlayTop.green { background: url('/xtras/lytebox2/images/play_green.png') no-repeat; }
	#lbPlay.blue, #lbPlayTop.blue { background: url('/xtras/lytebox2/images/play_blue.png') no-repeat; }
	#lbPlay.gold, #lbPlayTop.gold { background: url('/xtras/lytebox2/images/play_gold.png') no-repeat; }
	#lbPlay.orange, #lbPlayTop.orange { background: url('/xtras/lytebox2/images/play_orange.png') no-repeat; }

#lbPause, #lbPauseTop { width: 26px; height: 28px; float: right; margin: 0 0 1px 8px; border: none !important; }
	#lbPause.black, #lbPauseTop.black { background: url('/xtras/lytebox2/images/pause_black.png') no-repeat; }
	#lbPause.grey, #lbPauseTop.grey { background: url('/xtras/lytebox2/images/pause_grey.png') no-repeat; }
	#lbPause.red, #lbPauseTop.red { background: url('/xtras/lytebox2/images/pause_red.png') no-repeat; }
	#lbPause.green, #lbPauseTop.green { background: url('/xtras/lytebox2/images/pause_green.png') no-repeat; }
	#lbPause.blue, #lbPauseTop.blue { background: url('/xtras/lytebox2/images/pause_blue.png') no-repeat; }
	#lbPause.gold, #lbPauseTop.gold { background: url('/xtras/lytebox2/images/pause_gold.png') no-repeat; }
	#lbPause.orange, #lbPauseTop.orange { background: url('/xtras/lytebox2/images/pause_orange.png') no-repeat; }

/* Some extra padding on the bottom buttons so it's not too close to the border. */
#lbClose, #lbPrint, #lbPlay, #lbPause { margin: 0 0 6px 8px; }

/*   /xtra/css/common/base-reset.css   41% used */
html{background-image:none;background-position:center bottom;background-repeat:repeat-y;margin:0 auto}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;color:#666;}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit}
li{list-style:none}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:400}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{font-size:100%}
body{font:13px/1.231 calibri,arial,helvetica,clean,sans-serif;font-size:small;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif}
table{font-size:inherit;}
strong{font-weight:700}
.clear{clear:both}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif}
/*   /xtra/css/common/home-spacer.css   31% used */
h2{color:#555!important;}
div{border:0 solid red}
.epictext{text-align:center}
body{background-position:center top;background-repeat:repeat-x}
.technologyboxes{margin-top:50px!important}
.technologyboxes h3{font-size:18px;text-align:center;margin-bottom:20px}
.technologyboxes p{padding:5px 9px;font-size:14px}
.section{clear:both;padding:0;margin:0}
.col{display:block;float:left;margin:1% 0 1% 1.6%;border:0 solid grey;/*height:232px*/}
.col:first-child{margin-left:0}
.group:before,.group:after{content:"";display:table}
.group:after{clear:both}
.group{zoom:1}
.span_1_of_4{width:23.5%}
.span_1_of_3 { width: 31.26%; }
/*   /xtra/css/common/w4.css   43% used */
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.w3-padding-16,.w3-padding-hor-16{padding-top:16px!important;padding-bottom:16px!important}
.w3-padding-24,.w3-padding-hor-24{padding-top:24px!important;padding-bottom:24px!important}
.w3-row,.w3-row-padding {padding:0px;margin:0px auto;max-width:1350px;}
.w3-container{padding:0px}
.w3-responsive{overflow-x:auto}
.w3-rest{overflow:hidden}
.w3-section{margin-top:8px!important;margin-bottom:3px!important}
.w3-container:after,.w3-row:after,.w3-row-padding:after,.w3-topnav:after,.w3-clear:after,.w3-btn-group:before,.w3-btn-group:after,.w3-btn-bar:before,.w3-btn-bar:after{content:"";display:table;clear:both}
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
/* animation  images*/
.w3-display-container{position:relative}
.w3-badge {background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center;border-radius:50%;height:13px;width:13px;padding:0;}
.w3-left{float:left!important}
.w3-right{float:right!important}
.w3-transparent{background-color:transparent!important}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-large{font-size:30px!important}
.w3-center{text-align:center!important}
.w3-btn-floating{width:40px;height:40px;line-height:36px}
.w3-text-white, .w3-hover-text-white:hover {color: #fff !important;}
.w3-hover-text-khaki { transition: background-color 0.3s ease 0s, color 0.15s ease 0s, box-shadow 0.3s ease 0s, opacity 0.3s ease 0s;}
.w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#999;position:relative;overflow:hidden;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-btn-floating:hover {text-decoration-line:none!important;}
.w3-border { border: 1px solid #555 !important;}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
/* animation  images*/
.w3-animate-fading {
  position:absolute;  left:0;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out;  transition: opacity 1s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);}
.opaque {  opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}
.rollercenter {height: 400px;background-position:top center;}
#slider {background-size: cover;height:400px;max-width:1920px;margin:0 auto;}
/*   /xtra/css/common/home13.css   */
html{background-image:none;margin:0 auto;color:#666}
.w3-row #navbar{max-width:1300px;}
#navbar-inner{max-width:1200px;margin:0 auto;}
a{color:#ef8000;text-decoration:none}
.technologyboxes img{display:block;margin-left:auto;margin-right:auto;margin-top:5px;max-width:179px;width:80%}
/*   /xtra/css/home/update2016-09-16.css   50% used */
h1{font-weight:300!important;font-size:46px!important}
#headspacer{clear:both;content:"";display:table}
#enterprise{color:#0c3a7e}
#architect{color:#f59816}
.downloadpurchase{clear:both;padding-left:0px;text-align:center;margin-top:15px}
td{vertical-align:top}
.w3-padding-24,.w3-padding-hor-24{padding-bottom:24px!important;padding-top:0!important}
.finalhook{font-size:25px;text-align:center}
img{border:0}
.home-top-bg {background:url(/images/layout/banner/index-banner-2026.jpg);background-repeat:no-repeat;background-position:top center;background-color:#010101;background-size:cover;position:absolute;z-index:-1;top:0;bottom:0;left:0;right:0;width:100%;height:100%;opacity:1;}
a:link, a:visited{color:#EF8000;outline:none}
.home-banner-subheader2{padding:0px 0px 0px 0px;color:#F5940A;font-size:21px;text-align:center!important}
.ea17, .ea17 a {color: white!important;font-size: 24px;padding-bottom:20px;}
.home-banner-row {min-height:384px;max-width: 1200px;padding-top:1px}

/* ==========================================================================
   HOME PAGE UPDATE - APRIL 2026
   ========================================================================== */

/* 1. FIX: Remove the 525px height constraint on the banner content area */
#homebannercontent {
    width: 100%;
    clear: both;
    position: relative;
    z-index: 0;
    margin-top: 80px;
    max-height: 525px; /* Overriding the 525px limit */


}

/* 2. PRODUCT BOXES CONTAINER (Flexbox for even distribution) */
.home-button-row {
    display: flex;
    display: -webkit-flex;
    justify-content: space-between; /* Distributes items evenly with space between them */
    align-items: center;
    flex-wrap: wrap;               /* Allows wrapping on mobile screens */
    width: 100%;

}

/* Base style for all product boxes */
.product-box {
    flex: 1;
    min-width: 300px;
    height: 110px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    background: linear-gradient(to right, rgba(0,0,0,0.7), rgba(0,0,0,0.8), rgba(0,0,0,0.9));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box; /* Crucial: includes padding/border in width */
}


/* 1. Main wrapper */
.new-banner-container {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto; /* This handles the centering */
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;

}

/* 2. Top row row container */
.banner-top-row {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    gap: 15px;           /* 15px horizontal space between EA and Trerado */
    margin-bottom: 15px; /* 15px vertical space above Kernaro */
}
/* Individual button area */
.home-banner-button-area {
    flex: 1;             /* Each column takes equal available space */
    width: 220px;    /* Minimum width to prevent buttons from getting too narrow */
    text-align: center;
}

/* The actual button styling */
.home-banner-button {
    border-radius: 16px !important;
    text-align: center !important;
    text-decoration: none !important;

    /* Using inline-flex to center text and icons perfectly */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    font-size: 20px;
    background-color: #426489;
    color: #fff;

    width: 85%;          /* Button width relative to its area */
    max-width: 240px;    /* Prevents buttons from becoming too wide on large screens */
    min-height: 46px;
    padding: 8px 15px !important;
    margin: 10px auto !important;
    transition: background-color 0.3s ease;
}
/* --- BOX 1: EA (Standard White Glow) --- */
.box-ea {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.75);
    width: calc(60% - 9px);
    height: 250px;
    flex: 0 0 calc(60% - 9px); /* Precise 60% minus shared gap */
}

/* --- BOX 2: TRERADO (Softer Spread Glow) --- */
.box-trerado {
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.75);
    width: calc(40% - 6px);
    height: 250px;
    flex: 0 0 calc(40% - 6px); /* Precise 40% minus shared gap */
}

/* --- BOX 3: KERNARO (Purple Glow + Gradient + Inline Border) --- */
.box-kernaro {
    width: 100%;
    height: 110px;

    /* Vertical Gradient: Black to a subtle, muted purple */
    background: linear-gradient(to bottom, #000000, #3a2a45);

    /* Combined Shadows:
       1. inset: Creates the 'Inline Border' (subtle white line inside the edge)
       2. outer: Creates the 'Purple Outer Glow' as requested by Henning
    */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.2),
        0 0 12px 2px rgba(255, 255, 255, 0.75);

    /* Layout: Horizontal alignment for text and the CTA button */
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
}

/* Kernaro Three-Column Layout (1/3 each) */
.kernaro-section {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* --- SHOW ME BUTTON (Upscaled 50% with Background Image) --- */
.btn-show-me-custom {
    background: url('/images/layout/home/showme-button.png') no-repeat center center;
    background-size: 100% 100%;

    width: 170px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none !important;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.col-internal p{text-align:center; max-width: 64%;margin-left:auto; margin-right:auto;}
.w3-col p{text-align:left}
.white-widebox-flex{height:auto;text-align:center;overflow:hidden;padding:0;}
#slider{background-size:cover;height:480px;max-width:800px;margin:0 auto}
#sliderborder{height: 420px;border: 10px solid #333;border-radius: 0px;margin-top:14px;}
#slider h5{font-size:16px;padding-top:20px;margin-bottom:-40px;font-weight:700;width:100%;text-align:center}
.flexheading{position:absolute;bottom:-35px;color:#333;font-weight:400;margin:0 auto;width:100%;text-align:center}
.w3-grey,.w3-hover-grey:hover{color:#fff!important;background-color:#ccc!important}
#top-pro-cloud{color:#0c3a7e;}
#top-server{color:#f59816;}
.opening-header{text-align:left!important;padding:6px 0px 0px 22px;margin:0px 50px;}
.opening-paragraph{text-align:center!important;font-size:18px;padding:10px 0px 30px 0px;margin:0px 50px;}
.bk-alt{background:#F6F6F6}
.topic-container{overflow:hidden;padding:36px 0}
.topic-container h2{font-size:44px!important;line-height:1.07724;font-weight:200;letter-spacing:-.016em;font-family:"Roboto",sans-serif;text-align:center}
.border-radius-5 {border-radius:5px}
.width-50per {width:50%;}
.product-name-header{font-size:36px!important;line-height: 1.07724;font-weight:200;letter-spacing:-.016em;/*font-family:"Roboto",sans-serif;*/text-align: center;}
.pcs-blurb-paragraph{text-align:left!important;font-size:19px;}
.boxshots100-corporate,.boxshots100-procloudserver,.boxshots100-professional,.boxshots100-ultimate,.boxshots100-unified
{background-image: url(/images/boxshots/boxshots100-sprite.png);background-repeat: no-repeat;display: block;}
.boxshots100-corporate {width: 83px;height: 100px;background-position: -2px -2px;margin:0px auto;}
.boxshots100-procloudserver {width: 197px;height: 100px;background-position: -2px -106px;margin:0px auto;}
.boxshots100-professional {width: 83px;height: 100px;background-position: -89px -2px;margin:0px auto;}
.boxshots100-ultimate {width: 83px;height: 100px;background-position: -176px -2px;margin:0px auto;}
.boxshots100-unified {width: 83px;height: 100px;background-position: -203px -106px;margin:0px auto;}
/*   extra selectors required to remove all inline attribute styles   */
.text-align-center {text-align:center;}
.top-padding-50 {padding: 50px 0px 0px 0px;}
.top-padding-36 {padding: 36px 0px 0px 0px;}
.top-padding-20 {padding: 20px 0px 0px 0px;}
.left-right-pad-25 {padding:0px 25px; max-width:100%;}
.img-pcs-logo-pos {margin: 0px 0px 15px 0px;}
.margin-0-auto {margin: 0 auto;}
.slider1-image1 {background-image: url('/images/ea_screenshots/ea13/uml2.png');background-size:cover;}
.maxwidth-100 {max-width:100%}
.width-100 {width:100%}
.slider1-blue-text {color:#003460;font-size: 16px;padding-top: 20px;margin-bottom: -40px;font-weight: 700;width: 100%;text-align: center;}
.bmd-header-text {text-align: left;font-size:65px!important; padding:30px 0px 10px 0px;color:#555;line-height: 48px;}
.ebs-col5 {padding-top:10px;width:20%;min-width:200px;float:left;min-height:134px}
.ebs-col4 {padding-top:10px;width:25%;min-width:250px;float:left;min-height:160px}
.eam-col1{padding-top:10px;width:48%;min-width:250px;float:left;min-height:160px}
.eam-col2{padding-top:10px;padding-left:70px;width:48%;min-width:250px;float:left;min-height:160px}
.mbse-col1{padding-left: 25px;}
.mbse-section{padding-left: 25px;}
.eam-head{padding-bottom:35px;}
.eam-paragraph{padding-bottom: 6px;}
.padding-top-10 {padding-top:10px;}
.get-started-today {padding:20px 0 0 0; clear:both}
.editions-5col-header {width:100%;padding:11px 0px 4px 0px;text-align: center;color:#222;font-size: 18px;display: inline-block;font-weight: 700;}
.editions-5col-text {padding: 14px 0 0 17px;text-align: left;font-size: 15px; height:75px;}
.main-section-header {padding-top:12px;font-size: 28px !important; line-height: 1.07724;font-weight: 200;letter-spacing: -.016em;font-family: "Roboto",sans-serif;text-align: center;}
.technology-colhead {font-size:24px;font-weight: 700;margin: 5px 0px 0px 0px;padding-left: 0px;}
.technology-colhead1 {text-align: left;padding: 0px 0px 6px 0px;}
.technology-colhead2 {text-align: left;padding: 0px 0px 6px 0px;}
.technology-colhead3 {text-align: left;padding: 0px 0px 6px 0px;}
.technology-colhead4 {text-align: left;padding: 0px 0px 6px 0px;}
.home-library-image, .home-requesttrial, .home-buynow, .home-download, .home-learnmore, .home-closequote, .home-openquote, .home-pdf-icon, .home-smallopenquote, .home-smallclosequote, .home-sparxlogo, .home-pcslogo, .home-earose24, .home-earose46, .home-buynow-icon , .home-download-icon, .home-learnmore-icon
{ display: inline-block; background: url('/images/sprites/sprite-home.png?v=201901') no-repeat; overflow: hidden; text-indent: -9999px; text-align: left; }
.home-requesttrial { background-position: -0px -175px; width: 120px; height: 44px; }
.home-buynow { background-position: -120px -175px; width: 106px; height: 44px; }
.home-download { background-position: -0px -219px; width: 106px; height: 44px; }
.home-learnmore { background-position: -0px -409px; width: 120px; height: 44px; }
.home-pcslogo { background-position: -2px -312px; width: 180px;height: 98px; }
.home-earose46 { background-position: -210px -318px; width: 46px;height: 46px; }
.home-buynow-icon { background-position: -150px -422px; width: 23px; height: 23px; margin:2px 10px 0px 0px; }
.home-buynow:hover{color:#000;background-color:#ccc}
.home-download:hover{color:#000;background-color:#ccc}
.home-requesttrial:hover{color:#000;background-color:#ccc}
.home-learnmore:hover{color:#000;background-color:#ccc}
.ea-30min-tour-section {text-align:center;font-size:18px;padding:0px 0px 60px 0px;margin-top:5px;}
.bottom-padding-50 {padding-bottom:50px;}
.italic-text { font-style: italic; }
.text-align-left {text-align: left;}
.margin-top-22px {margin-top:22px!important;}
.bmd-header-text{text-align: center;}
.home-head-title{font-size:80px;text-align: center;padding-top: 40px;}
.opening-header{text-aign:center;}
.head_screenshots{margin-top:0px;}
.version-text{font-size: 14px;}


/*Slider*/
.slider-prev-button {position:absolute!important;top:42%;left:5px}
.slider-next-button {position:absolute!important;top:42%;right:5px;}
.slider-back-image01 {background-image: url('/images/layout/slider/800px/d4-strategic-model-800px.jpg');}
.slider-back-image02 {background-image: url('/images/layout/slider/800px/d4-mindmap-800px.jpg');}
.slider-back-image03 {background-image: url('/images/layout/slider/800px/d1-requirements-800px.jpg');}
.slider-back-image04 {background-image: url('/images/layout/slider/800px/d2-specification-manager-800px.jpg');}
.slider-back-image05 {background-image: url('/images/layout/slider/800px/d3-use-case-800px.jpg');}
.slider-back-image06 {background-image: url('/images/layout/slider/800px/d5-process-model1-800px.jpg');}
.slider-back-image07 {background-image: url('/images/layout/slider/800px/d5-process-model3-800px.jpg');}
.slider-back-image08 {background-image: url('/images/layout/slider/800px/archimate-800px.jpg');}
.slider-back-image09 {background-image: url('/images/layout/slider/800px/d6-wireframes1-800px.jpg');}
.slider-back-image10 {background-image: url('/images/layout/slider/800px/d6-wireframes2-800px.jpg');}
.slider-back-image11 {background-image: url('/images/layout/slider/800px/kanban-800px.jpg');}
.slider-back-image12 {background-image: url('/images/layout/slider/800px/d7-relationship-matrix-800px.jpg');}
.slider-back-image13 {background-image: url('/images/layout/slider/800px/data-models-800px.jpg');}
.slider-back-image14 {background-image: url('/images/layout/slider/800px/d8-code-engineering-800px.jpg');}
.slider-back-image15 {background-image: url('/images/layout/slider/800px/d9-code-eng-vea-800px.jpg');}
.slider-back-image16 {background-image: url('/images/layout/slider/800px/d9-profile-800px.jpg');}
.slider-back-image17 {background-image: url('/images/layout/slider/800px/d12-software-release-roadmap-800px.jpg');}
/* animation  images*/
.w3-display-container{position:relative}
.w3-badge {background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center;border-radius:50%;height:13px;width:13px;padding:0px;}
.w3-left{float:left!important}
.w3-right{float:right!important}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-transparent{background-color:transparent!important}
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
.w3-large{font-size:30px!important}
.w3-center{text-align:center!important}
.w3-btn-floating{width:40px;height:40px;line-height:40px;opacity: 0.7;}
.w3-text-white, .w3-hover-text-white:hover {color: #fff !important;}
.w3-hover-text-khaki { transition: background-color 0.3s ease 0s, color 0.15s ease 0s, box-shadow 0.3s ease 0s, opacity 0.3s ease 0s;}
.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
.w3-btn-floating,.w3-btn-floating-large{display:inline-block;text-align:center;color:#fff;background-color:#999;position:relative;overflow:hidden
;z-index:1;padding:0;border-radius:50%;cursor:pointer;font-size:24px}
.w3-border { border: 1px solid #555 !important;}
.w3-grey,.w3-hover-grey:hover{color:#fff!important;background-color:#ccc!important}
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
.w3-centertext {position:absolute; bottom:30px;text-align:center; color:white;background-color:#555;margin: 0 auto; width:50%;margin-left:25%;padding: 0 20px;opacity: 0.65;    filter: alpha(opacity=65); }
/* animation  images*/
.w3-animate-fading {
  position:absolute;  left:0;  -webkit-transition: opacity 1s ease-in-out;  -moz-transition: opacity 1s ease-in-out;  -o-transition: opacity 1s ease-in-out;  transition: opacity 1s ease-in-out;  opacity:0;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);}
.opaque {  opacity:1;  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";  filter: alpha(opacity=1);}
.rollercenter {height: 449px;background-position:top center; max-width:800px;width:100%;}
#slider {	background-size: cover;height:520px;	max-width:800px;margin:0 auto; } /* dot point*/
#sliderborder{height:451px; border:1px solid black;}
.slider-image-caption{font-size:16px; padding-top:20px;margin-bottom:-45px;font-weight:700;width:100%;text-align:center;color:#003460}
.caption{max-width:100%;  min-width: 350px;display:block}
.flexheading{position: absolute ; bottom:0px;color:#333; font-weight:400;margin:0 auto; width:100%;text-align:center;}
.previewdots{top:493px;}
.slider-pause-btn{width:40px;display: inline-block; text-align: center; color: #fff;background-color: #999; position: absolute; overflow: hidden; z-index: 1; padding-top:8px; cursor: pointer; font-size: 14px;white-space: nowrap; vertical-align: middle; text-decoration:none;font-weight:bold;border-radius:50%; height: 40px; position: absolute!important; top: 75%; left:45%;opacity: 0.7;font-family: Arial,Helvetica,sans-serif!important;line-height:24px;padding-right:5px;}
.slider-play-btn{font-size: 24px;display:block;line-height:24px;padding-left:11px;}
.slider-pause-btn:hover,  .slider-play-btn:hover{ color: #b4aa50!important; text-decoration:none;}
.background-title-image-section{position: absolute;}
.background-title-image{width:1350px}


.whitebg{background: #fff;}
.technology-colhead {font-size:24px;font-weight: 500;margin: 5px 0px 0px 0px;padding-left: 0px;}
.technology-colhead1 {text-align: center;padding: 0px 0px 6px 0px;}
.technology-colhead2 {text-align: center;padding: 0px 0px 6px 0px;}
.technology-colhead3 {text-align: center;padding: 0px 0px 6px 0px;}
.technology-colhead4 {text-align: center;padding: 0px 0px 6px 0px;}
.explore-gallery{font-size: 16px;}

.righteditionsection{height:388px;}
.ebs-col5 {padding-top:0px;padding-left:91px;width:48%;min-width:200px;float:left;min-height:134px; margin-top:0px;}
.ebs-col4 {padding-top:45px;width:13%;min-width:150px;float:left;min-height:160px}
.version-header{padding-left:0px;font-size:33px;text-align: center;}
.version-text{font-size: 18px;}
.rich-palette-head{margin-bottom:20px;font-size: 33px!important;}
.pattern-thumbs img{width:100px;max-height: 54px;}
.pattern-thumbs{display: inline-block!important;max-height: 60px;float:none!important;}
.thumbs{text-align: center; margin-top:10px!important;}
.complex-info-section{min-height:450px;}
.manage-complexity-list li {    background-image: url("/images/icons/tick.png");    background-position: 1px 2px;    background-repeat: no-repeat;    font-size: 18px;    list-style-type: none;    margin: 5px 0px;    padding-left: 25px;}
.cloud-majorhead{	margin-bottom: 20px;}
.cloud-heading{	text-align: center;	vertical-align: center;	font-size: 26px;	margin-top:20px;}
.cloud{	border: 1px solid #ccc;	border-radius: 16px;	height:258px;}
.cloud-icon{	text-align: center;	margin-top:20px;}
.img-pcs-logo-pos {	max-width: 169px;}
.open-enterprise{max-width: 80%;margin-left:auto; margin-right:auto; margin-bottom:20px;}

.block{overflow: -webkit-paged-y;}


/*  SECTIONS  */
.section {clear: both;padding: 0px;	margin: 0px;}

/*  COLUMN SETUP  */
.col {display: block;	float:left;	margin: 1% 0 1% 1.6%;}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_1_of_2 {width: 49.2%;}
/* Flexible and rich*/
.technologyboxes {min-height: 550px;}
.technologyboxes img {
    width: 240px;
}
.technologyboxes P{font-size: 18px;}
.technologyboxes h3 {
	font-weight: 270;
	font-size: 26px !important;
    line-height: 36px;
    color: #666;
    font-family: "Roboto",sans-serif;
    font-size: 20px;
    font-weight: 200;
    margin-top: 40px;
    line-height: 22px;}

.high-performance{
	font-weight: 270;
	font-size: 26px !important;
    line-height: 36px;
    color: #666;
    font-family: "Roboto",sans-serif;
    font-size: 20px;
    font-weight: 200;
    margin-top: 15px;
		margin-bottom: 10px;
    line-height: 22px;
}

.thousands-of-patterns{
	font-weight: 270;
	font-size: 21px !important;
    color: #666;
    font-family: "Roboto",sans-serif;
    font-weight: 600;
    margin-top: 15px;
		margin-bottom: 10px;
    line-height: 22px;
}

.dressed-image {
  border-radius: 16px;         /* Smooth curved edges */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);  /* Soft shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}