@charset 'utf-8';



/*******************************************************************************
********************************************************************************
    Author:     Franz Kriner
    Caption:    The Main Styles for the Content Management Area
    Copyright:  (c) Franz Kriner 2018
********************************************************************************
********************************************************************************/



/*******************************************************************************
    Color Table:

    Name			        Hex-Value		RGB-Value

    Accent Orange (Main)	#f55f0f			rgb(245, 95, 15)

    Gray 01		            #202020			rgb(32, 32, 32)
    Gray 02		            #232323			rgb(35, 35, 35)
    Gray 04		            #2d2d2d			rgb(45, 45, 45)
    Gray 05		            #363636			rgb(54, 54, 54)
    Gray 06		            #3d3d3d			rgb(61, 61, 61)
    Gray 07                 #484848         rgb(72, 72, 72)
    Gray 08		            #797979			rgb(121, 121, 121)
    Gray 09		            #848484			rgb(132, 132, 132)
    Gray 10                 #909090         rgb(144, 144, 144)
    Gray 11		            #d4d4d4			rgb(212, 212, 212)
    
    Treuepass Base Red	    #e41f19			rgb(228, 31, 25)
    Treuepass Light Red	    #e95242			rgb(233, 82, 66)
    Treuepass Base Blue	    #1d4353			rgb(29, 67, 83)
    Treuepass Blue Middle	#345665			rgb(52, 86, 101)

    Accent Blau		        #0093d6			rgb(0, 147, 214)
    Accent Crimson		    #be182b			rgb(190, 24, 43)
    Accent Green		    #15bd45			rgb(21, 189, 69)
    Accent Amber		    #f7a700			rgb(247, 167, 0)
    Accent Lime		        #9fc80d			rgb(159, 200, 13)
    Accent Red		        #e9160f			rgb(233, 22, 15)
    Accent Teal		        #00beb5			rgb(0, 190, 181)

    Accent 2017 Purple	    #ae4292			rgb(174, 66, 146)
    Accent 2017 Bright Red	#e6195c			rgb(230, 25, 92)
    Accent 2017 Orange	    #ec6818			rgb(236, 104, 24)

    White                   #ffffff         rgb(255, 255, 255)
    Black                   #000000         rgb(0, 0, 0)

********************************************************************************/


/*******************************************************************************
    Cubic-Bezier Function Table

    Name                    Function

    Slow Fade Out           cubic-bezier(0.250, 0.460, 0.450, 0.940)
    Smooth Fade Out         cubic-bezier(0.275, 0.605, 0.490, 0.895)
    Quarter Circle          cubic-bezier(0.000, 0.990, 0.850, 0.995)

********************************************************************************/



/*******************************************************************************
    Group: Basic Container
********************************************************************************/

.CMMain-Style {
    position: static;
    color: #f55f0f;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    min-height: 300px;
    opacity: 1;
    transition-property: all;
    transition-delay: 0s;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
    overflow: visible;
}

.CMFullscreenBackground-Style {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #202020;
}

.CMFullscreenBackground-Blur-Style {
    position: fixed;
    top: 0px;
    left: 4.5%;
    width: 91%;
    height: 100vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #202020;
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='15');
    filter: blur(15px);
    margin: 0 auto;
    opacity: 0.99;
}

.CMContentContainer-Style {
    position: relative;
    display: block;
    float: left;
    clear: left;
    left: 0px;
    top: 0px;
    width: 100%;
    height: auto;
    min-height: 200px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    opacity: 0;
    background-color: rgba(32, 32, 32, 0.92);
    animation-name: NavigationContentTitleFadeInUp;
    animation-delay: 0ms;
    animation-duration: 1000ms;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-timing-function: cubic-bezier(0.000, 0.990, 0.850, 0.995);
    transition-property: all;
    transition-delay: 0s;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.000, 0.990, 0.850, 0.995);
}

.CMContentWrapper-Style {
    position: relative;
    display: block;
    float: left;
    clear: left;
    width: calc(90% - 100px);
    height: auto;
    min-height: 200px;
    top: 0px;
    left: 5%;
    margin: 0 auto;
    padding: 150px 50px 150px 50px;
    /*background-color: rgba(0, 0, 0, 0.25);
    box-shadow: 0px 0px 50px 50px rgba(0, 0, 0, 0.25);*/
}



/*******************************************************************************
    Group: Basic Elements
********************************************************************************/

.CMPageSection-Style {
    position: relative;
    display: block;
    width: auto;
    height: auto;
    min-height: 50px;
    top: 0px;
    left: 0px;
    margin: 0px auto 80px auto;
    padding: 15px 50px 15px 50px;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(144, 144, 144, 0.5);
}

.CMPageSection-Underline-Style {
    padding: 0px 0px 75px 0px;
    border-top-width: 0px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-bottom-width: 1px;
    border-style: solid;
    border-color: rgba(144, 144, 144, 0.1);
}

.CMPageTitle-Style {
    color: #f55f0f;
    font-size: 72px;
    font-family: 'Roboto-Thin';
    font-weight: 100;
    letter-spacing: 1px;
    word-spacing: 5px;
    margin: 0px 0px 40px 0px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 0px 30px rgba(245, 95, 15, 1);
    cursor: default;
    word-break: break-word;
    word-wrap: break-word;
}

.CMPageSubtitle-Style {
    color: #909090;
    font-size: 30px;
    font-family: 'Roboto-Thin';
    font-weight: 100;
    letter-spacing: 1px;
    word-spacing: 5px;
    margin: 0px 0px 0px 0px;
    text-transform: uppercase;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    text-shadow: 0px 0px 30px rgba(245, 95, 15, 1);
    cursor: default;
    word-break: break-word;
    word-wrap: break-word;
}



/*******************************************************************************
    Group: LargeNavigation Item
********************************************************************************/

.CMNavigation-LargeArticleLink-Style {
    position: static;
    display: block;
    float: left;
    clear: both;
    width: 100%;
    min-width: 100px;
    height: auto;
    min-height: 300px;
    margin: 0px 0px 80px 0px;
    padding: 0px 0px 0px 0px;
    text-shadow: 0;
    overflow: hidden;
}

.CMNavigation-LargeArticleLink-Style:first-child {
    margin-top: 80px;
}

.CMNavigation-LargeArticleLink-Style:last-child {
    margin-bottom: 0px;
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Title-Style, .CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Title-Style {
    text-shadow: 0px 0px 10px #f55f0f;
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Description-Style, .CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Description-Style {
    text-shadow: 0px 0px 0px #f55f0f;
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Link-Style, .CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ContentWrapper-Style .CMNavigation-LargeArticle-Link-Style {
    text-shadow: 0px 0px 10px #f55f0f;
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ImageWrapper-Style .CMNavigation-LargeArticle-Image-Style, .CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ImageWrapper-Style .CMNavigation-LargeArticle-Image-Style {
    transform: scale(1.15);
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ImageWrapper-Style .CMNavigation-LargeArticle-Image-Style, CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style .CMNavigation-LargeArticle-ImageWrapper-Style .CMNavigation-LargeArticle-Image-Style {
    transform: scale(1.15);
}

.CMNavigation-LargeArticleLink-Style:hover .CMNavigation-LargeArticle-Style, .CMNavigation-LargeArticleLink-Style:focus .CMNavigation-LargeArticle-Style {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #f55f0f;
}

.CMNavigation-LargeArticle-Style {
    position: static;
    display: flex;
    float: left;
    clear: both;
    width: 100%;
    min-width: 100px;
    height: auto;
    min-height: 300px;
    line-height: 1.2;
    text-align: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 30px 0px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #3d3d3d;
    transition-property: all;
    transition-delay: 0s;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.275, 0.605, 0.490, 0.895);
    overflow: hidden;
}

.CMNavigation-LargeArticle-ImageWrapper-Style {
    flex-grow: 1;
    flex-shrink: 5;
    flex-basis: 0;
    width: auto;
    height: auto;
    min-height: 300px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    overflow: hidden;
}

.CMNavigation-LargeArticle-ContentWrapper-Style {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    width: auto;
    height: auto;
    min-height: 300px;
    margin: 0px 0px 0px 0px;
    padding: 0px 30px 30px 0px;
    overflow: hidden;
}

.CMNavigation-LargeArticle-Image-Style {
    position: static;
    float: left;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    border: 0;
    outline: none;
    visibility: visible;
    opacity: 1;
    color: #f55f0f;
    text-decoration: none;
    object-fit: cover;
    background-size: cover;
    background-position: center;
    transition-property: all;
    transition-delay: 0s;
    transition-duration: 2s;
    transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    overflow: hidden;
}

.CMNavigation-LargeArticle-Title-Style {
    display: block;
    width: 100%;
    height: auto;
    color: #f55f0f;
    font-size: 36px;
    font-weight: 100;
    text-decoration: none;
    text-transform: uppercase;
    margin: 0px 0px 20px 0px;
    padding: 0px 0px 0px 0px;
    word-break: break-word;
    word-wrap: break-word;
}

.CMNavigation-LargeArticle-Description-Style {
    display: block;
    width: 100%;
    height: auto;
    color: #848484;
    font-size: 20px;
    margin: 0px 0px 15px 0px;
    padding: 0px 0px 0px 0px;
}

.CMNavigation-LargeArticle-Link-Style {
    font-family: 'Roboto-Thin', 'HelveticaNeue-Thin', 'Lato-Light', Helvetica, Verdana, Arial, sans-serif;
    font-size: 22px;
    font-weight: normal;
    color: #f55f0f;
    text-rendering: optimizeLegibility;
    display: block;
    opacity: 1;
    margin: 0px 0px 0px 15px;
    padding: 0px 0px 0px 0px;
    transition-property: all;
    transition-delay: 0s;
    transition-duration: 750ms;
    transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
    word-break: break-word;
    word-wrap: break-word;
}

.CMNavigation-LargeArticle-Link-Style i {
    display: inline;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px 0px 0px;
}



/*******************************************************************************
    Group: Image Container
********************************************************************************/

.CMImage-Container {
    display: block;
    width: 100%;
    height: auto;
    min-height: 100px;
    margin-top: 8rem;
    margin-bottom: 0rem;
    object-fit: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}

.CMImage-Container img {
    position: relative;
    display: block;
    width: 35%;
    height: auto;
    top: 0px;
    left: 32.5%;
    object-fit: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
}



/*******************************************************************************
    Group: Page Control Container
********************************************************************************/

.CMPageControl-Container {
    display: block;
    width: 100%;
    height: auto;
    min-height: 20px;
    margin-top: 0rem;
    margin-bottom: 0rem;
}