:root {
    --profricktal-red: #CD1719;
    --profricktal-blue: #273583 ;
    --profricktal-lightblue: #D5E4FA;
    --profricktal-skyblue: #C5D5FF;
    --profricktal-darkblue: #0A144E;
    --profricktal-lightgrey: #EEEFF2;
    --profricktal-black: #111111;
    --transition: all 0.3s cubic-bezier(.25,.1,.25,1);
}

/* Media Query
--------------------*/
@media screen {

	body {
        font-family: roboto, sans-serif;
		line-height: 1.4;
		color: #fff;
		background: #fff;
        background: linear-gradient(180deg, #0A144E 0%, #273583 100%);
        font-style: normal;
        font-size: 1.25rem;
        font-weight: 300;
		-webkit-font-smoothing: auto;
        --block-padding: 0.75;
        --bg-height: 0.75rem;
    }
    
    #header:after,
    #container:after {
        position: absolute;
        top: 100%;
        bottom: 0;
        z-index: 1;
        display: block;
        content: "";
        height: var(--bg-height);
        width: 100%;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center bottom;
        background-image: url(../images/bg/border.svg);
    }

    #container {
        padding-bottom: var(--bg-height);
    }
  
    #container:after {
        top: auto;
        bottom: -1px;
        transform: scaleX(-1) rotate(180deg);
    }

    .logo .caption {
        font-size: 1rem;
        text-align: right;
        font-weight: 400;
        margin: 0;
        padding: 0;
        line-height: 1;
        position: relative;
        right: -3.25rem;
        color: var(--profricktal-black);
    }
    
    #footer .logo .caption {
        top: 0.25rem;
        right: auto;
        text-align: left;
    }

    .ce_text li {
        margin-bottom: 1rem;
    }
}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    body{
        --bg-height: 1.85rem;
    }

    .logo .caption {
        font-size: 1.6rem;
        right: -5rem;
    }
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
    body{
        --bg-height: 2.5rem;
    }
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
    body{
        --bg-height: 3.5rem;
    }
}
/* Media ends
--------------------*/


/* X-border Article
--------------------*/
@media screen {
    .xarticle {
        background: #fff;
        color: var(--profricktal-black);
        position: relative;
        --x-bg-height: 1.5rem;
        margin-top: var(--x-bg-height);
        --link-color1: var(--profricktal-blue);
    }


    .xarticle:before,
    .xarticle:after {
        position: absolute;
        z-index: 2;
        display: block;
        content: "";
        height: var(--x-bg-height);
        width: 100%;
        background-color: transparent;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .xarticle:before {
        margin-top: calc(var(--x-bg-height) * -0.35);
        top: 0;
        bottom: auto;
        background-position: center top;
        background-image: url(../images/bg/x-top.svg);
    }

    .xarticle:after {
        margin-bottom: calc(var(--x-bg-height) * -0.75);
        top: auto;
        bottom: 0;
        background-position: center bottom;
        background-image: url(../images/bg/x-bottom.svg);
    }    

}

/* Mobile-landscape (and larger) lansacape */
@media only screen and (min-width: 480px) {
    .xarticle {
        --x-bg-height: 2.75rem;
    }

    .xarticle .container {
        padding-top:  calc(var(--x-bg-height) / 2);
    }
}


/* min-width:768px Tablet-portrait (and larger) */
@media only screen and (min-width: 768px) {
    .xarticle {
        --x-bg-height: 4rem;
    }
}


/* Tablet-landscape (and larger) for width 992px */
@media only screen and (min-width: 992px) {
}

/* min-width:1100 */
@media only screen and (min-width:1100px) {
    .xarticle {
        --x-bg-height: 5rem;
    }    
}

/* min-width:1300 Laptops (and larger) for width 1300px */
@media only screen and (min-width:1300px) {
    .xarticle {
        --x-bg-height: 6rem;
    }
}

@media only screen and (min-width:1600px) {
    .xarticle {
        --x-bg-height: 7rem;
    }

    .xarticle {
        --x-bg-height: calc(100vw * 0.065)
    }
}
/* X-border Article ends
--------------------*/