
/* gridelements page sections and column layouts */
.ge-section {
    width: 100%;
    background-position: center center !important;
    background-size: cover !important;
    position: relative;
}

.ge-section.bg1 {
    background-position: left center !important;
}

.ge-section.bg2 {
    background-position: right center !important;
}

.ge-section.bg3 {
    background-position: left top !important;
}

.ge-section.bg4 {
    background-position: center top !important;
}

.ge-section.bg5 {
    background-position: right top !important;
}

.ge-section.bg6 {
    background-position: left bottom !important;
}

.ge-section.bg7 {
    background-position: center bottom !important;
}

.ge-section.bg8 {
    background-position: right bottom !important;
}

.ge-section.fixed {
    background-attachment: fixed !important;
}

.ge-section.has-bg-video {
    background-color: transparent !important;
    overflow: hidden;
}

.ge-section .videobuttons  {
    background: var(--rgbwhite20);
    color: var(--white);
    text-transform: uppercase;
    padding: 0.6em;
    font-size: 0.6em;
    line-height: 1em;
    position: absolute;
    bottom: 4em;
    right: 4em;
    z-index: 3;
    width: auto;
}
.ge-section .sound.hasclearframebutton {
    right: 7.5em;
}
.ge-section .videobuttons svg {
    height: 1.5em;
    width: auto;
}
.ge-section .sound .on, .ge-section .clearframe .on {
display: none;
}
.ge-section .sound .off, .ge-section .clearframe .off {
    display: block;
}
.ge-section .sound.active .on, .ge-section .clearframe.active .on {display: block}
.ge-section .sound.active .off, .ge-section .clearframe.active .off {display: none}

.ge-section .bg-video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.ge-section.bg1 .bg-video {
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ge-section.bg2 .bg-video {
    left: auto;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ge-section.bg3 .bg-video {
    left: 0;
    top: 0;
    transform: none;
}

.ge-section.bg4 .bg-video {
    top: 0;
    transform: translateX(-50%);
}

.ge-section.bg5 .bg-video {
    top: 0;
    left: auto;
    right: 0;
    transform: none;
}

.ge-section.bg6 .bg-video {
    left: 0;
    bottom: 0;
    top: auto;
    transform: none;
}

.ge-section.bg7 .bg-video {
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
}

.ge-section.bg8 .bg-video {
    left: auto;
    right: 0;
    bottom: 0;
    top: auto;
    transform: none;
}

.ge-section.vcenter.fullheight .contentWidth {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.ge-section.vbottom.fullheight .contentWidth {
    position: absolute;
    width: 100%;
    bottom: 4%;
    left: 50%;
    transform: translate(-50%, -4%);
    -ms-transform: translate(-50%, -4%);
}

.ge-section.nopadding {
    padding: 0;
}

.ge-section.fullwidth .contentWidth {
    max-width: 100%;
    padding: 0;
    margin: 0;
    width: 100% !important;
}

.ge-section.fullheight {
    min-height: 100vh;
}

.ge-section.align-center {
    text-align: center;
}

.ge-section.align-center p, .ge-section.align-center ol, .ge-section.align-center ul, .ge-section.align-center {
    margin: auto;
}

/* dark and light BG colors are set in template constants */
.ge-section.bg-dark {
    -webkit-font-smoothing: antialiased;
}

.ge-section.bg-black {
    background-color: var(--black);
    color: var(--white);
    -webkit-font-smoothing: antialiased;
}

.ge-section h2 {
	color: var(--secondary);
    font-size: 22px;
    font-weight: 400;
    position: relative;
}

.ge-section h3 {
    text-align: center;
    position: relative;
    color: var(--third);
    font-size: 13px;
	font-family: var(--fontprimary);
}

.ge-section {
	background-color: var(--ge-section-bg-default);
}
.ge-section.bg-light {
	background-color: var(--ge-section-bg-light);
}
.ge-section.bg-dark {
	background-color: var(--ge-section-bg-dark);
	color: var(--ge-section-text-light);
}
.ge-section.text-light {
	color: var(--ge-section-text-light);
}
.ge-section.text-dark {
	color: var(--ge-section-text-dark);
}
.ge-section .videobuttons svg .a, .ge-section .videobuttons svg .st0, .ge-section .videobuttons svg rect {
	fill: var(--ge-section-text-default);
}

.ge-section.text-light .videobuttons  .a, .ge-section.text-light .videobuttons polygon.st0, .ge-section.text-light .videobuttons rect {
	fill: var(--ge-section-text-light);
}
.ge-section.text-dark .videobuttons  .a, .ge-section.text-dark .videobuttons polygon.st0, .ge-section.text-dark .videobuttons rect {
	fill: var(--ge-section-text-dark);
}

/* width of those containers is set in TS constants */
.pageWidth {
    margin: auto;
    clear: both;
}

.contentWidth {
    margin: auto;
    clear: both;
    padding: 0 15px;
    z-index: 1;
}

/* end */

/*  CUSTOM */

.pageWidth {
	max-width: var(--pageWidth);
}

.ce-headline-left {
	text-align: left!important;
}

.ce-headline-center {
	text-align: center!important;
}

.ce-headline-right {
	text-align: right!important;
}

.text-justify {
	text-align: justify!important;
}
