:root{
    --linkColor: #6f6f5d;
    --linkColorHover: #dfdfcd;
    --linkColor: #6f6f5d;
    --linkColorHover: #dfdfcd;
    --linkColorHoverDark: #2f2f1d;
    --defaultBGColor: #fafaf8;
    --productBoxBGColor: #e8e8e3;
    --productBoxBorderColor: #cecec9;
    --tableProductBGColor: #D6C9BE;
    --tableRowDark: rgba(0,0,0,0.04);
    --europian: "Gelasio";
}

body{
    background-color: var(--defaultBGColor);
}

.mainSession > .inner{
    padding-bottom: 128px;
}

.securityArea{
    position: relative;
    z-index: 0;
}

.securityFlex{
    width: 990px;
    margin: 0 auto;
    display: flex;
}
.securityLeft{
    width: 618.75px;
    padding: 85.5px 67.5px;
}
.securityCaption{
    font-size: 3.5em;
    margin-bottom: 27px;
    line-height: 1.2;
}

.securityLeftContentRow{
    margin: 20.25px 0;
}

.securityLeftItemsFlex{
    display: flex;
    margin-bottom: 20.25px;
    gap: 0.5em;
}
.securityLeftItem{
    padding: 9px 16px;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.125em var(--linkColor);
    border-radius: 8px;
}
.securityLeftItemBlack{
    background-color: var(--linkColor);
    color: #fff;
}
.securityLeftItem:hover{
    background-color: var(--linkColorHover);
}
.securityLeftItemBlack:hover{
    background-color: var(--linkColorHoverDark);
}
.securityRight{
    background-image: url(../img/networkSecurity/T80_Stack_Front_Back.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    width: 371.25px;
}

.productArea{
    padding: 10.25px 0;
}
.productArea > .inner{
    width: 990px;
    margin: 0 auto;
}
.productCaption{
    font-size: 2.5em;
    margin-bottom: 36px;
    padding: 0 67.5px;
}
.productFlowFlex{
    display: flex;
    padding-left: 67.5px;
    padding-bottom: 85.5px;
}
.productFlowNumber{
    display: grid;
    place-content: center;
    width: 40.5px;
    height: 40.5px;
    margin-top: 20.25px;
    border: var(--productBoxBorderColor) 1px solid;
    background-color: var(--productBoxBGColor);
    border-radius: 8px;
    margin-right: 27px;
}
.productFlowContent{
    width: 360px;
    padding-top: 20.25px;
}
.productFlowCaption{
    font-size: 1.4em;
    margin-bottom: 10.25px;
}
.productFlex{
    display: flex;
}
.productLeft{
    width: 371.25px;
    background-image: url(../img/networkSecurity/Firebox_Stack_Tseries_Mseries_AP_Dimension-smaller-1024x819.png);
    background-size: cover;
    background-position: top;
}
.productRight{
    width: 618.75px;
    padding: 87.5px 67.5px;
}
.productRightCaption{
    font-size: 2.5em;
    margin-bottom: 20.25px;
    letter-spacing: 4px;
}
.productRightCaption > span{
    display: inline-block;
    transform: scale(1.5,1.0);
}
.productExplanation{
    margin-bottom: 10.25px;
}
.productExplanationControl{
    display: flex;
    align-items: flex-start;
    margin-bottom: 10.25px;
    cursor: pointer;
    user-select: none;
}
.btnOpenClose{
    margin-right: 10.25px;
    cursor: pointer;
}
.openCloseTriangle{
    transform: rotate(90deg);
    user-select: none;
}
.productExplanationSummary{
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    margin-left: 10px;
    border-left: 1px solid var(--linkColorHover);
    padding-left: 10.25px;
}
.productExplanationSummary.on{
    max-height: 100vh;
}
.productExplanationSummary > ul{
    padding-left: 20px;
}
.productExplanationSummary > ul > li{
    list-style: disc;
}

.watchGuardArea{
    position: relative;
    z-index: 0;
}

.watchGuardFlex{
    width: 990px;
    margin: 0 auto;
    display: flex;
}
.watchGuardLeft{
    width: 100%;
    padding: 85.5px 67.5px;
}
.watchGuardCaption{
    font-size: 3.5em;
    margin-bottom: 27px;
    line-height: 1.2;
}

.watchGuardLeftContentRow{
    margin: 20.25px 0;
}

.watchGuardLeftItemsFlex{
    display: flex;
    margin-bottom: 20.25px;
    gap: 0.5em;
}
.watchGuardLeftItem{
    padding: 9px 16px;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.125em var(--linkColor);
    border-radius: 8px;
}
.watchGuardLeftItemBlack{
    background-color: var(--linkColor);
    color: #fff;
}
.watchGuardLeftItem:hover{
    background-color: var(--linkColorHover);
}
.watchGuardLeftItemBlack:hover{
    background-color: var(--linkColorHoverDark);
}
.watchGuardDetail{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.btnWatchGuardDetail{
    padding: 10.8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    background-color: var(--linkColorHover);
    color: var(--linkColor);
}
.btnWatchGuardDetail:hover{
    background-color: var(--linkColor);
    color: #fff;
}

.virusArea{
    position: relative;
    z-index: 0;
}

.virusFlex{
    width: 990px;
    margin: 0 auto;
    display: flex;
}
.virusLeft{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 371.25px;
    background-image: url('../img/networkSecurity/WithSecure-696x312.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
    border-radius: 6px;
}
.withsecureImage{
    width: calc(100% - 64px);
    height: auto;
    background-position: center;
    border-radius: 6px;
}

.virusRight{
    width: 618.75px;
    padding: 85.5px 67.5px;
}
.virusCaption{
    font-size: 2.5em;
    margin-bottom: 27px;
    line-height: 1.2;
}

.virusLeftContentRow{
    margin: 20.25px 0;
}

.virusLeftItemsFlex{
    display: flex;
    margin-bottom: 20.25px;
    gap: 0.5em;
}
.virusLeftItem{
    padding: 9px 16px;
    background-color: #fff;
    box-shadow: inset 0 0 0 0.125em var(--linkColor);
    border-radius: 8px;
}
.virusLeftItemBlack{
    background-color: var(--linkColor);
    color: #fff;
}
.virusLeftItem:hover{
    background-color: var(--linkColorHover);
}
.virusLeftItemBlack:hover{
    background-color: var(--linkColorHoverDark);
}
.virusExplanation{
    margin-bottom: 10.25px;
}
.virusExplanationControl{
    display: flex;
    align-items: flex-start;
    margin-bottom: 10.25px;
    cursor: pointer;
    user-select: none;
}
.btnOpenClose{
    margin-right: 10.25px;
    cursor: pointer;
}
.openCloseTriangle{
    transform: rotate(90deg);
    user-select: none;
}
.virusExplanationSummary{
    max-height: 0;
    overflow: hidden;
    transition: 200ms;
    margin-left: 10px;
    border-left: 1px solid var(--linkColorHover);
    padding-left: 10.25px;
}
.virusExplanationSummary.on{
    max-height: 100vh;
}
.virusExplanationSummary > ul{
    padding-left: 20px;
}
.virusExplanationSummary > ul > li{
    list-style: disc;
}
.withsecureDetail{
    display: flex;
    width: 100%;
    justify-content: flex-end;
}
.btnWithsecureDetail{
    padding: 10.8px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 1.1em;
    background-color: var(--linkColorHover);
    color: var(--linkColor);
}
.btnWithsecureDetail:hover{
    background-color: var(--linkColor);
    color: #fff;
}