/**
 * sector27 - CSS Styling
 * FCE : GridElements stylings
*/

/* ------------------------- Gridsystem -------------------------- */

div.gridSystem {
    display: table;
    width: 100%;
    box-sizing: border-box;
}

div.gridSystemFlex {
    display: table;
    width: auto;
}

div.gridSystem.columns-flex, div.gridSystem.columns-flex-flex,
div.gridSystem.columns-flex-flex-flex, div.gridSystem.columns-flex-flex-flex-flex {
    /*width:auto;*/
}

div.gridSystem div.gridSystem {
    display: table;
}

div.gridSystem > div {
    display: table-cell;
    vertical-align: top;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

/* column width */
div.gridSystem div.col8 {
    width: 8.333%;
}

div.gridSystem div.col16 {
    width: 16.667%;
}

div.gridSystem div.col20 {
    width: 20%;
}

div.gridSystem div.col25 {
    width: 25%;
}

div.gridSystem div.col33 {
    width: 33.333%;
}

div.gridSystem div.col42 {
    width: 41.667%;
}

div.gridSystem div.col50 {
    width: 50%;
}

div.gridSystem div.col58 {
    width: 58.333%;
}

div.gridSystem div.col66 {
    width: 66.667%;
}

div.gridSystem div.col75 {
    width: 75%;
}

div.gridSystem div.col83 {
    width: 83.333%;
}

div.gridSystem div.col91 {
    width: 91.667%;
}

div.gridSystem div.col100 {
    width: 100%;
}

/* grid layouts */
div.gridSystem .layout1 {
    background-color: transparent;
}

div.gridSystem .layout2 {
    background-color: #fff;
}

div.gridSystem .layout3 {
    background-color: #c9c9c9;
}

div.gridSystem .layout4 {
    background-color: rgb(225,235,237);
}

div.gridSystem .layout4 * {
    color: #444444;
}

div.gridSystem .layout5 {
    background: rgb(0,119,133);
    background: linear-gradient(135deg, rgb(0,119,133) 0%,rgb(0,150,170) 100%);
}

div.gridSystem .layout5 * {
    color: #fff;
}

div.gridSystem .layout6 {
    background-color: rgb(0,150,170);
}

div.gridSystem .layout6 * {
    color: #fff;
}

div.gridSystem .layout7 {
    background-color: rgb(250,250,250);
}

div.gridSystem .layout8 {
    background-color: rgb(246,251,252);
}



/* ------------------------- FCE Backgrounds ----------------------*/
.bgFceContent{
    overflow: hidden;
}



/* ------------------------- FCE-Buttons ------------------------- */
.iconizedButton{ display:block; }
.iconizedButton a{ border-bottom: unset; }
.buttonContent {
    display: table;
    align-items: center;
    padding: 20px 0;
    box-sizing: border-box;
    border-radius: 2px;
    justify-content: center;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.buttonContent i,
.buttonContent span {
    padding: 0 15px;
    display: table-cell;
}

a.buttonContent {
    cursor: pointer;
}

.buttonContent:hover,
a.buttonContent:hover {
    padding: 20px 0;
}

.buttonContent span.smallDescription {
    display: block;
    width: 100%;
    margin: 0.5em 0 0 0;
    padding:0;
    font-size: 0.6em;
}

/* ------------------------ Button sizes ------------------------- */

.buttonContent.buttonSize1 {
    font-size: 1em;
}

.buttonContent.buttonSize2 {
    font-size: 1.1em;
}

.buttonContent.buttonSize3 {
    font-size: 1.5em;
}

.buttonContent.buttonSize4 {
    font-size: 2.2em;
}

/* ----------------------- Button layout 1 ------------------------ */

.buttonContent.btLayout1 {
    background-color: rgb(0,150,170);
}

.buttonContent.btLayout1:hover {
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

.buttonContent.btLayout1 i,
a.buttonContent.btLayout1 span {
    color: #fff;
}

a.buttonContent.btLayout1:hover i,
a.buttonContent.btLayout1:hover span {
    color: white;
}

/* ----------------------- Button layout 2 ------------------------ */

.buttonContent.btLayout2 {
    background: rgb(0,150,170);
    background: linear-gradient(135deg, rgb(0,119,133) 0%,rgb(0,150,170) 100%);
}

.buttonContent.btLayout2:hover {
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

.buttonContent.btLayout2 i,
a.buttonContent.btLayout2 span {
    color: #fff;
}

a.buttonContent.btLayout2:hover i,
a.buttonContent.btLayout2:hover span {
    color: white;
}

/* ----------------------- Button layout 3 ------------------------ */

.buttonContent.btLayout3 {
    background: #efefef;
    border: none;
}

a.buttonContent.btLayout3:hover {
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

.buttonContent.btLayout3 i,
a.buttonContent.btLayout3 span {
    color: #696767;
}

a.buttonContent.btLayout3:hover i,
a.buttonContent.btLayout3:hover span {
    color: rgb(0,150,170);
}

/* ----------------------- Button layout 4 ------------------------ */

.buttonContent.btLayout4 {
    background: #fff;
    border: 1px solid #696767;
}

a.buttonContent.btLayout4:hover {
    border: 1px solid #696767;
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

.buttonContent.btLayout4 i,
a.buttonContent.btLayout4 span {
    color: #000;
}


a.buttonContent.btLayout4:hover i,
a.buttonContent.btLayout4:hover span {
    color: rgb(0,150,170);
}

/* ----------------------- Button layout 5 ------------------------ */

.buttonContent.btLayout5 {
    background: #fff;
    border: 1px solid #fff;
}

.buttonContent.btLayout5 i,
a.buttonContent.btLayout5 span {
    color: #696767;
}

a.buttonContent.btLayout5:hover {
    border: 1px solid rgb(0,150,170);
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

a.buttonContent.btLayout5:hover i,
a.buttonContent.btLayout5:hover span {
    color: rgb(0,150,170);
}

a.buttonContent.btLayout5:hover i.fa-border {
    border-color: rgb(0,150,170);
}

/* ----------------------- Button layout 6 ------------------------ */

.buttonContent.btLayout6 {
    border: 2px solid #fff;
}

.buttonContent.btLayout6 i,
a.buttonContent.btLayout6 span {
    color: #fff;
}

a.buttonContent.btLayout6:hover {
    border: 2px solid #fff;
    background-color: #fff;
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

a.buttonContent.btLayout6:hover i,
a.buttonContent.btLayout6:hover span {
    color: rgb(0,150,170);
}

a.buttonContent.btLayout6:hover i.fa-border {
    border-color: rgb(0,150,170);
}

/* ----------------------- Button layout 7 ------------------------ */

.buttonContent.btLayout7 {
    background: #fff;
}

a.buttonContent.btLayout7:hover {
    background: rgb(0,150,170);
}

.buttonContent.btLayout7 span,
.buttonContent.btLayout7 i {
    color: rgb(0,150,170);
}

a.buttonContent.btLayout7:hover i,
a.buttonContent.btLayout7:hover span {
    color: white;
}

/* ----------------------- Button layout 8 ------------------------ */

.buttonContent.btLayout8 {
    background: #fff;
}

a.buttonContent.btLayout8:hover {
    background: #696767;
}

.buttonContent.btLayout8 span,
.buttonContent.btLayout8 i {
    color: #696767;
}

a.buttonContent.btLayout8:hover i,
a.buttonContent.btLayout8:hover span {
    color: white;
}

/* ----------------------- Button layout 9 ------------------------ */

.buttonContent.btLayout9 i {
    background: rgb(0,150,170);
    background: linear-gradient(135deg, rgb(0,119,133) 0%,rgb(0,150,170) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

a.buttonContent.btLayout9 i ,
a.buttonContent.btLayout9 span {
    color: #696767;
}

a.buttonContent.btLayout9 i.fa-border {
    border-color: #696767;
}

.buttonContent.btLayout9:hover {
    background: rgb(0,150,170);
    background: linear-gradient(135deg, rgb(0,119,133) 0%,rgb(0,150,170) 100%);
}
a.buttonContent.btLayout9:hover i ,
a.buttonContent.btLayout9:hover span {
    color:#fff;
}

a.buttonContent.btLayout9:hover i,
a.buttonContent.btLayout9:hover i:before {
    color:#fff;
    background: unset;
    -webkit-background-clip: text;
    -webkit-text-fill-color: unset;
}

/* ---------------------- Button layout 10 ------------------------ */

.buttonContent.btLayout10 i {
    color: #000;
}

a.buttonContent.btLayout10:hover {
    background: #efefef;
}

a.buttonContent.btLayout10:hover span {
}

a.buttonContent.btLayout10:hover span,
a.buttonContent.btLayout10:hover i {
    color: rgb(0,150,170);
}

/* ---------------------- Button layout 11 ------------------------ */

.buttonContent.btLayout11 {
    background: #efefef;
    border: none;
}

a.buttonContent.btLayout11:hover {
    transform: scale(1.08);
    -webkit-box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
    box-shadow: 0 12px 8px -10px rgba(0,0,0,1);
}

.buttonContent.btLayout11 i{
    color:rgb(0,150,170);
}
a.buttonContent.btLayout11 span {
    color: rgb(0,150,170);
}
a.buttonContent.btLayout11 span.smallDescription {
    color: #696767;
}

a.buttonContent.btLayout11:hover i,
a.buttonContent.btLayout11:hover span {
    color: rgb(0,150,170);
}


/* ---------------------- button alignment ------------------------ */

.buttonContent.buttonCenter {
    margin: 0 auto;
}

.buttonContent.buttonRight {
    margin: 0 0 0 auto;
}

.buttonContent.squareLink.buttonRight .content {
    right: 0;
    left: auto;
}

/* ------------------ button vertical alignment -------------------- */

.buttonContent span.top {
    vertical-align: top;
}

.buttonContent span.middle {
    vertical-align: middle;
}

.buttonContent span.baseline {
    vertical-align: baseline;
}

.buttonContent span.bottom {
    vertical-align: bottom;
}



/* ------------------- FCE topicBox ---------------------*/
.topicBox{}
.topicBox > a{
    display:block;
    background-color: #fff;
    margin-left:1rem;
    border:1px solid rgba(66, 66, 66, 0.28);
    transition: all 50ms ease-in;
    transform: scale(1);
    -webkit-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Standard */
}
.topicBox > a:hover{
    transition: all 200ms ease-in;
    transform: scale(1.04);
    -webkit-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Standard */
    cursor: pointer;
}
.topicBox .minHeight{
    min-height: 27.5rem;
}
.topicBox img{
    width:100%;
    height:auto;
}
.topicBox h2,.topicBox h2 span{
    background-color: rgb(0,150,170);
    color:#fff;
    display:inline-block;
    padding:.3em .6em .3em 2rem;
    position: relative;
    top: -1.2em;
    left: -1rem;
    margin-bottom:0;
    font-size: 1.6rem;
}
.topicBox .text{
    color: #000;

    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 1.5em 0 1.5em;
    position: relative;
    left:-.5em;
}
.topicBox .footer{
    display: block;
    background-color: rgb(225,235,237);
    padding:.2em;
    text-align: center;
    font-family: FontAwesome, fantasy;
    color:rgb(0,150,170);
}
.topicBox .footer p{
    margin: 0.3em 0;
}
.topicBox .footer i{
    color:rgb(0,150,170);
    font-size:140%;
}
.topicBox a:hover .footer{
    background-color: rgb(0,150,170);
}
.topicBox a:hover .footer i{
    color:#fff;
}
/* ------------------- FCE topicBox ---------------------*/




/* ------------------- FCE topicBox ---------------------*/
.shortHint{}
.shortHint > a,
.shortHint > div{
    display:block;
    border:1px solid rgba(66, 66, 66, 0.28);
    transition: all 50ms ease-in;
    transform: scale(1);
    -webkit-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Standard */
}
.shortHint > a:hover{
    transition: all 200ms ease-in;
    transform: scale(1.04);
    -webkit-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Standard */
    cursor: pointer;
}
.shortHint .minHeight{
    min-height: 17rem;
}
.shortHint .header{
    position:relative;
    height: 7rem;
    background-color: #f5f3f3;
}
.shortHint .header span{
    display: block;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    color: rgb(159,215,221);
    text-align: center;
    font-size: 6.5rem;
    font-weight: bold;
    box-sizing: border-box;
    line-height: 100%;
}
.shortHint .header h2{
    color: rgb(0,150,170);
    padding:.3em .6em .3em .6em;
    position: absolute;
    top:0;
    left:0;
    width:100%;
    height:7rem;
    text-align: center;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size:2rem;
}
.shortHint .text{
    color: #000;

    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 1.5em 2.5em;
}
/* ------------------- FCE topicBox ---------------------*/


/* ------------------- FCE offsetcontent ---------------------*/
.offsetContent h2.title span.subline{
    margin-left: 2rem;
}

.offsetContent .imagecontent img{ width:100%;}
.offsetContent.layout1{ background-color: transparent;}
.offsetContent.layout2{ background-color: #fff;}
.offsetContent.layout3{ background-color: #c9c9c9;}
.offsetContent.layout4{ background-color: rgb(225,235,237);}
.offsetContent.layout5{
    background: rgb(0,119,133);
    background: linear-gradient(135deg, rgb(0,119,133) 0%,rgb(0,150,170) 100%);
}
.offsetContent.layout5 *{ color:#fff;}
.offsetContent.layout6{ background-color: rgb(0,150,170);}
.offsetContent.layout6 *{ color:#fff;}
.offsetContent.layout7{ background-color: rgb(250,250,250);}
.offsetContent.layout8{ background-color: rgb(246,251,252);}

.offsetContent.shadow{
    -webkit-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Standard */
}
/* ------------------- FCE offsetcontent ---------------------*/



/* ------------------- FCE reference ---------------------*/
.reference{}
.reference a{
    display:block;
    margin-left:1rem;
    border:1px solid rgba(66, 66, 66, 0.28);
    transition: all 50ms ease-in;
    transform: scale(1);
    -webkit-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 2px 15px -10px rgba(66, 66, 66, 0.75); /* Standard */
    min-height: 22em;
}
.reference a:hover{
    transition: all 200ms ease-in;
    transform: scale(1.04);
    -webkit-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* WebKit */
    -moz-box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Firefox */
    box-shadow: 0 8px 20px -10px rgba(66, 66, 66, 0.75); /* Standard */
    cursor: pointer;
}
.reference > .minHeight > a{
    min-height: 23rem;
}
.reference img{
    width:100%;
    height:auto;
}
.reference h2{
    background-color: rgb(0,150,170);
    color:#fff;
    display:inline-block;
    padding:.3em 0.6em 0.6em;
    margin-bottom:0;
    position: relative;
    top:-1.2rem;
    left:-1rem;
    line-height: 120%;
    font-size: 20px;
    padding-left: 1.8rem;
}
.reference h2 span{ line-height:unset; }
.reference table{
    width: calc(100% - 1em);
    margin: -.8em 0.5em 0.5em;
}
.reference table th{
    vertical-align: top;
    text-align: left;
}
.reference table td{
    width:100%;
}
/* ------------------- FCE reference ---------------------*/