﻿body{line-height:1.2;}
#forumComment p {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 8pt;
}

b {
    font-weight: bold;
    font-weight: 600;
}
#txtSearch, #txtSearch2 {
    resize: none;
}
.barHead {
    font-family: Monsterrat, Montserrat, Verdana, Arial, sans-serif;
    font-size: 11pt;
}

.subHeader {
    font-size: 9pt;
    color: #184259;
    font-family: Monsterrat, Verdana, Arial;
    font-weight: bold;
}
/*a:link,a:visited{color:#034af3;text-decoration:none;}*/
/*.tile{color:Black;border:1px solid #BEBEBE;padding:10px;margin-bottom:10px;box-shadow:2px 2px 2px #dddddd;-moz-box-shadow:2px 2px 2px #dddddd;-webkit-box-shadow:2px 2px 2px #dddddd;}*/
#mainCol {
    padding: 0 20px;
    max-width: 1500px;
    margin: 0 auto;
    background-color: #ffffff;
}

#colOne, #sideCol {
    background-color: #ffffff;
}

.standard-width {
    max-width: 1500px !important;
    margin: 0 auto;
}

#navbarNav {
    padding-top: 9px;
}

.nav-font, .nav-font:visited, .nav-font:active {
    font-size: 11pt;
    font-family: Monsterrat,Verdana,Arial,Helvetica;
    color: #ffffff;
}

    .nav-font:hover {
        color: #c80000;
        cursor: pointer;
    }

.nav-div {
    padding: 8px 16px;
}

.nav-icon {
    width: 17px;
}

#txtSearch {
    width: 230px;
    display: inline;
    background: #000000;
    color: #ffffff;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-left: 0;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: -18px
}

    #txtSearch:focus {
        border-color: #c80000;
        outline: 0;
        /*box-shadow: 0 0 0 0.2rem rgba(200,0,0,.35);*/
        box-shadow: 0 3px 4px -2px rgba(200,0,0,.9);
    }

#txtSearch2 {
    background: #ffffff;
    color: #000000;
    font-size: 11pt;
    width: calc(95% - 125px);
    font-family: Verdana, Arial, Helvetica;
    padding: 0px;
    margin: 0px 7px 5px 7px;
    display: inline;
    border-right: 0;
    border-top: 0;
    border-radius: 0;
    border-left: 0;
    border-color: #000000;
}

    #txtSearch2:focus {
        border-color: #c80000;
        outline: 0;
        /*box-shadow: 0 0 0 0.2rem rgba(200,0,0,.35);*/
        box-shadow: 0 3px 4px -2px rgba(200,200,200,.9);
    }

#btnSearch {
    width: 25px;
    display: inline;
    margin-left: 3px;
    position: absolute;
    left: 234px;
    top: -8px;
}

#searchWrapper {
    width: 100%;
}

#searchResultCount {
    width: 100%;
    padding-bottom: 6px;
}

#lnkListView {
    /*border-color: #ad081e;
    margin-top: -3px;
    margin-left: 8px;*/
    float: right;
    border-color: #ad081e;
    margin-top: 7px;
    margin-bottom: -8px;
    margin-left: 8px;
}

@media (max-width: 1337px) {
    #lnkListView {
        margin-top: 14px;
    }
}

#lnkListView:hover {
    border-color: red;
}

    #lnkListView:hover > #showList, #lnkListView:hover > #showTile,
    #lnkListView:hover > .fa-list-ol *, #lnkListView:hover > .fa-square-o * {
        color: red !important;
    }

#lnkListView, #showList, #showTile, .fa-list-ol, .fa-square-o {
    color: #000000;
}
/*#lnkListView.disabled{color:#cccccc;background-color:#f8f5f0;border-color:#f8f5f0;}*/
#topBox, #topLeft {
    background: #000000;
    color: #ffffff;
    padding: 0px 0px 0px 20px !important;
    margin: 0;
}

#topLeft {
    border-right: 2px solid #ffffff;
}

#topLeftWrapper {
    border-right: #000000 solid 2px !important;
}

#topRight {
    border-bottom: #000000 solid 2px !important;
}

#topBoxWrapper {
    color: #ffffff;
    padding: 0px 10px !important;
    z-index: 1;
}

#topBox a {
    color: #ffffff !important;
}

#colOne {
    /*border-right: #000000 solid 2px !important;*/
}

.tile {
    width: 100%;
    clear: none;
    margin: 0;
}

.featuredTile {
    padding: 10px 10px;
}
/*.box{
        border-style: solid;
        border-width: 1px;
        border-top-width: 7px;
        border-color: #909090;
}*/
.box:hover {
    /*border-style: solid;
        border-width: 1px;
        border-top-width: 7px;
        border-color: #000000;*/
    background: #f4f4f4;
}

.inner {
    padding: 10px 15px;
    /*display: table-cell;*/
    overflow: hidden;
    display: block;
}

.headline, .headline a, .headline a:visited {
    text-decoration: none;
    color: #585858 !important;
    /*font-family:Verdana, Helvetica, Arial, sans-serif;*/
    font: 10pt Monsterrat, Verdana, Arial, Helvetica, sans serif; /*Montserrat, */
    /*font-size:11pt;*/
    line-height: 1.2;
    margin-top: 10px;
    margin-bottom: 20px;
}

.headlineBlack {
    text-decoration: none;
    color: #000000 !important;
    /*font-family:Verdana, Helvetica, Arial, sans-serif;*/
    font: 11pt Monsterrat, Verdana, Arial, Helvetica, sans serif; /*Montserrat, */
    /*font-size:11pt;*/
    line-height: 1.2;
}

#storyBody a, #storyBody a:visited {
    color: #0645AD;
}

a, a:visited, a:active {
    text-decoration: none !important;
    color: #000000;
}

.redlnks, .redlnks:visited, .redlnks:active {
    text-decoration: none !important;
    color: #ad081e !important;
}

a:hover {
    text-decoration: none !important;
    color: #c80000 !important;
}
/*#headlines hr {
    border: 0;
    padding: 0;
}*/
/*.headline {
    text-decoration: none;
    color: #004990 !important;
    line-height: 1.2;
}*/
/*body{font-family:Verdana, Helvetica, Arial, sans-serif;}*/

#headlines {
    border-style: solid;
    border-width: 0 2px 0 0;
    border-color: #000000;
    font-size: 10pt;
    margin: 0px auto;
    padding: 15px 20px;
}

    #headlines p {
        margin-bottom: 11.5px !important;
    }

.topBox {
    /*width: 98%;*/
    background-color: #ffffff;
    padding: 8px 10px;
    margin: 5px 30px 5px 15px;
    font-size: 10.5pt;
    box-shadow: 3px 3px 8px 1px rgba(132, 132, 132, 0.9);
    -moz-box-shadow: 3px 3px 8px 1px rgba(132, 132, 132, 0.9);
    -webkit-box-shadow: 3px 3px 8px 1px rgba(132, 132, 132, 0.9);
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
}

.dayTitle {
    width: 98%;
    /* height: auto; */
    /* background-color: #909090; */
    /* padding: 2px 0; */
    margin: 0px 0px 5px 0px;
    text-align: left;
    font: 13PT Monsterrat, Verdana, Arial, Helvetica, sans serif !important; /*Montserrat, */
    color: #000000;
    /* border: 1px solid; */
    /* border-color: #757575; */
    /* box-shadow: 3px 3px 3px #111111; */
    /*-moz-box-shadow: 3px 3px 3px #111111;*/
    /* -webkit-box-shadow: 3px 3px 3px #111111; */
    /* border-radius: 6px; */
    /*-moz-border-radius: 6px;*/
    /* -webkit-border-radius: 6px; */
}

.dayListTitle {
    /*font: 9pt Verdana, Arial, Helvetica, sans serif;*/
    font: 11pt Monsterrat, Verdana, Arial, Helvetica, sans serif; /*Montserrat, */
    font-weight: bold;
    padding: 3px 0;
}

.listViewTitle {
    font-size: 12px;
    width: calc( 100% - 108px);
    margin-left: 108px;
}

.tileTitle {
    width: 100%;
    margin: 20px 0 10px 0;
}

.tileTime {
    color: #909090;
    font-size: 8pt !important;
}

.linkButton {
    width: 20px;
    background-color: #C80000;
    cursor: pointer;
    padding: 2px 10px 5px 10px;
    color: #ffffff !important;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
}

    .linkButton:hover {
        color: #000000 !important;
    }

#storyTitleHeader, #storyTitleHeader a, #storyTitleHeader div {
    /*display: inline;*/
    color: #004990;
    font-size: 10pt;
    vertical-align: text-top;
    /*padding: 4px;*/
    padding-right: 4px;
    float: right;
}

.row {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
}
/*.innerCol{width:50%;display:inline;float:left;padding:10px;}*/
/*.innerCol{padding:0 10px;}*/
#storyTitleHeader, #storyTitleHeader a, #storyTitleHeader div {
    color: #004990;
    font-size: 10pt;
    vertical-align: text-top;
    float: right;
    padding: 0 4px 4px 0;
}

#storyTitleHeader {
    width: 50%;
}

#storyTitleHeaderParent {
    width: 100%;
    min-height: 40px;
    margin-top: 20px;
    margin-bottom: 8px;
}
#pageMasterDiv a, #pageMasterDiv a:visited, #pageMasterDiv a:active {
    color: #004276;
}
.btn-primary, .btn-primary.a, .btn-primary.a:visited, .btn-primary.a:active {
    color: #ffffff !important;
}
.imageWrap {
    padding: 2.5%;
}

.emailIcon, .emailIconWrapper {
    display: inline;
}

.vid {
    padding-bottom: 62%;
    display: block;
    position: relative;
    text-align: left;
}

#lad {
    text-align: center;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 5px;
}

.regTile table:not(.TableAnalysis) * {
    color: #000000 !important;
    font-size: 12px !important;
}
    /*.regTile span strong, .regTile strong div, .regTile p strong {color:#000000 !important;font-size: 18px !important;}*/
    .regTile table:not(.TableAnalysis) * strong {
        color: #000000 !important;
        font-size: 12px !important;
    }

.forumNote {
    font-size: 8pt !important;
}

 .regFontSize, #storyBody div, #storyBody span, #storyBody p,
.inner span, .inner div, .inner p {
    font-size: 11pt;
}

#storyBody {
    margin-top: 5px;
}
/*@media (min-width: 768px) {
    #mainCol {
        margin:0 -10px;
    }
}@media (min-width: 501px) and (max-width: 767px) {
    #mainCol {
        margin:0 -20px;
    }
}@media (max-width: 500px) {
    #mainCol {
        margin:0 -30px;
    }
}*/
/*.featuredTile{
        border-style: solid;
        border-width: 1px;
        border-top-width: 7px;
        border-color: #ad081e;
     }*/
.featuredTitle {
    font: 13PT Monsterrat, Montserrat, Verdana, Arial, Helvetica, sans serif !important; /*Montserrat, */
    color: #000000;
    font-weight: 500 !important;
}

.featuredHR {
    border-top: 1px solid black;
    margin: 16px 0
}

@media all and (max-width: 1400px) {
    .featuredTitle, .dayTitle {
        font-size: 16pt !important;
    }
}

.tileSubLink {
    z-index: 2;
    position: relative;
}

.timeSrc {
    font-size: 10px;
    width: 110px;
    /*display:inline-block;*/
    float: left;
    padding-right: 8px;
    max-height: 80px;
    overflow-y: hidden;
}

.biglnks {
    margin-bottom: .8em;
}

    .biglnks a {
        line-height: 1.3em;
    }

        .biglnks a:link {
            color: #000000;
            font-size: 11pt;
            font-weight: bolder;
        }

        .biglnks a:hover {
            color: #115e94;
        }

        .biglnks a:visited {
            color: #000000;
        }

        .biglnks a:active {
            color: #115e94;
        }

.relatedLink, .relatedLink:active {
    color: #0645AD;
}

    .relatedLink:visited {
        color: purple;
    }

#storyTitle > * {
    color: #000000;
    font-weight: bolder !important;
}

.backTo, .backTo:visited {
    color: #004276 !important;
    font-size: 15pt;
}

/*OLD master alignment fixes.  DEL when new master is implemented. */
#mainCol {
    padding-left: 0px !important;
    margin: 0 !important;
    background-color: #ffffff;
}

#parent-container {
    background-color: #f0f0f0
}

#NewsSearchBarWrapper {
    margin: 0 !important;
    padding-left: 10px !important;
}

#news2, #news2 .inner {
    padding-bottom: 0 !important;
}

#news4 {
    padding-top: 0 !important;
}

#boxAd1 {
    padding-top: 0 !important;
}






a.headlineBold:hover {
    color: #c80000;
}

a.headlineBold:link {
    font-weight: bold;
}

a.headlineBold {
    font-weight: bold;
}

.headlineBold {
    font-weight: bold;
}


/*A.headlineNormal  { FONT-WEIGHT: normal; }
A.headlineNormal:link { FONT-WEIGHT: normal; }
A.headlineNormal:visited { COLOR: purple; text-decoration:none;}
A.headlineNormal:hover { COLOR: #C80000; text-decoration:none;}
A.headlineNormal:active { COLOR: #C80000; text-decoration:none;}*/

A.headlineBold {
    FONT-WEIGHT: bold;
}

    A.headlineBold:link {
        FONT-WEIGHT: bold;
    }

A.headlineBoldItalic {
    FONT-WEIGHT: bold;
    TEXT-DECORATION: none;
    font-style: italic;
}

    A.headlineBoldItalic:link {
        FONT-WEIGHT: bold;
        TEXT-DECORATION: none;
        font-style: italic;
    }

    A.headlineBoldItalic:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineBoldItalic:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineBoldItalic:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineItalic {
    FONT-WEIGHT: normal;
    TEXT-DECORATION: none;
    font-style: italic;
}

    A.headlineItalic:link {
        FONT-WEIGHT: normal;
        TEXT-DECORATION: none;
        font-style: italic;
    }

    A.headlineItalic:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineItalic:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineItalic:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineUnderline {
    FONT-WEIGHT: normal;
    TEXT-DECORATION: underline;
}

    A.headlineUnderline:link {
        FONT-WEIGHT: normal;
        TEXT-DECORATION: underline;
    }

    A.headlineUnderline:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineUnderline:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineUnderline:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineBlack {
    FONT-WEIGHT: normal;
    COLOR: #000000 !important;
}

    A.headlineBlack:link {
        FONT-WEIGHT: normal;
        COLOR: #000000 !important;
    }

    A.headlineBlack:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineBlack:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineBlack:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineBlackBold {
    FONT-WEIGHT: bold;
    COLOR: #000000 !important;
}

    A.headlineBlackBold:link {
        FONT-WEIGHT: bold;
        COLOR: #000000 !important;
    }

    A.headlineBlackBold:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineBlackBold:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineBlackBold:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineRed {
    FONT-WEIGHT: normal;
    COLOR: Red !important;
}

    A.headlineRed:link {
        FONT-WEIGHT: normal;
        COLOR: Red !important;
    }

    A.headlineRed:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineRed:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineRed:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineRedBold {
    FONT-WEIGHT: bold;
    COLOR: Red !important;
}

    A.headlineRedBold:link {
        FONT-WEIGHT: bold;
        COLOR: Red !important;
    }

    A.headlineRedBold:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineRedBold:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineRedBold:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineGreen {
    FONT-WEIGHT: normal;
    COLOR: Green !important;
}

    A.headlineGreen:link {
        FONT-WEIGHT: normal;
        COLOR: Green !important;
    }

    A.headlineGreen:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineGreen:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineGreen:active {
        COLOR: #C80000;
        text-decoration: none;
    }

A.headlineGreenBold {
    FONT-WEIGHT: bold;
    COLOR: Green !important;
}

    A.headlineGreenBold:link {
        FONT-WEIGHT: bold;
        COLOR: Green !important;
    }

    A.headlineGreenBold:visited {
        COLOR: purple;
        text-decoration: none;
    }

    A.headlineGreenBold:hover {
        COLOR: #C80000;
        text-decoration: none;
    }

    A.headlineGreenBold:active {
        COLOR: #C80000;
        text-decoration: none;
    }

.storyTitleIcons {
    float: right !important;
    margin-right:3px !important;
}
.storyTitleHeader {
    padding-top: 3px;
    /*float:left;*/
}
#divSearch2, #divSearch2 * {
    font-size: 10.5pt !important;
    color: #000000;
}

#sideCol, .innerCol, #topBoxWrapper, #mainCol, #parent-container {
    margin: 0 !important;
    padding: 0 !important;
}
/*#colTwo {
    border-style: solid;
    border-left-width: 1px;
    border-right-width:0;
    border-top-width: 0px;
    border-color: #909090;
}*/
.nopadd {
    padding: 0;
}
#pageMasterDiv {
    margin: 0 auto;
    background-color: #ffffff;
    max-width: 1500px;
    width: 100%;
}
.headBanner {
    height: 300px;
    overflow: hidden;
    background-size: cover;
}
.commonpadding {
    padding: 40px;
}
.bBorderBottom {
    border-bottom: 2px solid #000000;
}

.bBorderLeft {
    border-left: 2px solid #000000;
}

.bBorderRight {
    border-right: 2px solid #000000;
}
#leftNavDivWrapper {
    display: inline-block;
    vertical-align: top;
    padding: 0;
}
#leftNavDiv {
    /*width: 400px;*/
    vertical-align: top;
}
.insideDivHead {
    border-bottom: 1px solid #000000;
    margin-bottom: 15px;
    padding-bottom: 3px;
    font-size: 15pt;
    font-weight: 600;
}
.insideNavDiv {
    padding-bottom: 15px;
}

    .insideNavDiv a {
        color: #585858;
        font-size: 15pt;
    }

.insideNavDivHead {
    border-bottom: 1px solid #000000;
    margin-bottom: 15px;
    padding-bottom: 3px;
    font-size: 15pt;
    font-weight: 600;
}
#mainNav {
    height: 70px;
}

@media all and (max-width: 1400px) {
    .headBanner {
        height: 250px;
    }
}
@media all and (max-width: 1340px) {
    #powered {
        display: none;
    }
}
@media all and (max-width: 1250px) {
    #poweredDiv{display:none;}
}
@media all and (max-width: 1200px) {
    #navbarBrandImg {
        width: 160px !important;
    }
    #reportNavDiv {
        width: auto;
        vertical-align: top;
    }
    .commonpadding {
        padding: 20px;
    }
    .headBanner {
        height: 200px;
    }
}
@media all and (max-width: 1100px) {
    #brandWrapper/*, .navbar-collapse*/ {
        flex-wrap: wrap;
    }
    #navbarBrandImg {
        width: 230px !important;
    }
    #mainNav {
        height: auto;
    }
    #topBar, #barMaster {
        display: none;
    }
    #space {
        height: 62px !important;
    }
    #navbarNav.show {
        display: block !important;
        -ms-flex-preferred-size: auto;
        -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
        -ms-flex-positive: 1;
        flex-grow: 1;
        -ms-flex-align: center;
        align-items: center;
    }
    #searchBoxNav {
        padding-bottom: 18px;
    }
    .dropdown-menu{
        position:static !important;
        width:100%;
    }
    .dropdown > .dropdown-toggle:active {
        pointer-events: auto !important;
    }
    .nav-div {
        padding: 17px 16px;
        height: 18px;
    }
    #searchButton, #searchBoxNav {

    }
    #poweredDiv {
        height: 62px;
    }




    .navbar .navbar-brand {
        float: none;
        display: inline-block;
    }

    .navbar .navbar-nav > .nav-item {
        float: none;
        margin-left: .1rem;
    }

    .navbar .navbar-nav {
        float: none !important;
    }

    .nav-item {
        width: 100%;
        text-align: left;
        padding-bottom: 8px;
    }

    .navbar-toggler {
        display: block !important;
    }

    .navbar-toggleable-sm.collapse {
        display: none !important
    }

        .navbar-toggleable-sm.collapse.in {
            display: block !important
        }

    .collapse:not(.show) {
        display: none !important;
    }



}
@media all and (max-width: 500px) {

    .insideNavDiv {
        padding-bottom: 7px;
    }

        .insideNavDiv a {
            font-size: 13pt;
        }

    .insideNavDivHead {
        margin-bottom: 7px;
        padding-bottom: 1px;
        font-size: 13pt;
    }
    .bBorderLeft {
        border-left: none;
    }

    .bBorderRight {
        border-right: none;
    }

    .headBanner {
        height: 150px;
    }
}

#bigImg {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
}

.dayHr {
    margin-top: 0;
    border-color: black;
}

.search-menu {
    background-color: rebeccapurple;
}

.index-change {
    color: #ffffff !important;
}

.indexLink {
    cursor: pointer;
    height: 26px;
}

#indexTable tr:nth-child(even) {
    border-bottom: 1px solid lightgray;
}

.indexColor {
    padding: 0 8px;
    width: 63px;
    text-align: right !important;
}

.line1 {
    line-height: 1;
}

.commonPadding {
    padding: 20px !important;
}

#disclaimerTitle {
    font-size: 9pt;
    font-weight: 500;
    text-align: center;
}

#disclaimerText {
    font-size: 7pt;
    font-weight: 400;
}

#bigFoot {
    padding: 25px 20px;
}

    #bigFoot, #bigFoot a, #bigFoot a:visited {
        background-color: #000000 !important;
        color: #ffffff !important;
    }

        #bigFoot a:hover {
            color: #c80000 !important;
        }

.socialIconFoot {
    width: 35px;
    height: auto;
    display: inline;
    margin-left: 4px;
}

.footerLink {
    font-weight: 600;
}

.indentPadding {
    padding-left: 5px;
}

.footerItemDiv {
    padding-bottom: 5px;
}

/*flip container code*/
.socialIconFootFlipper, .socialIconFootFlipper .front, .socialIconFootFlipper .back {
    width: 35px;
    height: 35px;
}

.socialIconFootFlipper {
    display: inline-block;
    margin-right: 1px;
}





/* entire container, keeps perspective */
.flip-container {
    perspective: 1000px;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when hovered */
    .flip-container:hover .back {
        transform: rotateY(0deg);
    }

    .flip-container:hover .front {
        transform: rotateY(180deg);
    }


/* flip speed goes here */
.flipper {
    transition: 0.4s;
    transform-style: preserve-3d;
    position: relative;
}

/* hide back of pane during swap */
.front, .back {
    backface-visibility: hidden;
    transition: 0.4s;
    transform-style: preserve-3d;
    position: absolute;
    top: 0;
    left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
    z-index: 2;
    transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
    transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
    position: relative;
}

.vertical .back {
    transform: rotateX(180deg);
}

.vertical.flip-container:hover .back {
    transform: rotateX(0deg);
}

.vertical.flip-container:hover .front {
    transform: rotateX(180deg);
}