/*-----------------------------
		LAYOUT
-----------------------------*/

.clear {
clear:both;
}


section {
position: relative;
}


.fullscreen {
width:100vw;
height:100vh;
}
.fulldiv {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}


.v-centered {
position:relative;
top:50%;
left:0;
transform:translateY(-50%);
-webkit-transform:translateY(-50%);
-ms-transform-origin: 50% 50%; /* IE 9 */
-webkit-transform-origin: 50% 50%; /* Chrome, Safari, Opera */
transform-origin: 50% 50%;
}

/*******************
 flex
*******************/

.flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex-w {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: calc(100% + (var(--g) * 2));
    margin: calc(var(--g) * -1);
}
.flex-w > * {
    padding: var(--g);
}
.flex__col {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex__sb {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
.flex__wrap {
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex__no-wrap {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.flex__centerV {
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.flex__column {
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}
.flex__row {
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
}
.flex__center {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.flex__end {
    -webkit-align-items: flex-end;
    -ms-flex-align: end;
    align-items: flex-end;
/*    justify-content: flex-end;
*/}
.flex__start {
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    align-items: flex-start;
}
.flex__stretch {
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    align-items: stretch;
}
.flex__expand {
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.flex__c {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.col__3-4 {
flex: 0 0 75%;
width:75%;
}
.col__2-3 {
flex: 66.666%;
width:66.666%;
}
.col__1-2 {
flex: 50%;
width:50%;
}
.col__1-3 {
flex:33.333%;
width:33.333%;
}
.col__1-4 {
flex: 25%;
width:25%;
}

/*******************
 css columns
*******************/

.simpleCols.cols--2 {
    column-count: 2;
}

/*******************
 flex grid
*******************/

.grid {
  display: flex;
  flex-wrap: wrap;
  --g: 1em;
  margin-left: calc(var(--g) * -1);
  width: calc(100% + (var(--g) * 2));
}
.grid.no-gap { --g: 0; }
.grid.gap-small { --g: 0.5em; }
.grid.gap-plus { --g: 2em; }
.grid.gap-h-plus { --g: 1em 2em; }
.grid.gap-big { --g: 3em; }
.grid.gap-h-big { --g: 1em 3em; }
.grid.gap-bigger { --g: 4em; }
.grid.gap-h-bigger { --g: 1em 4em; }
.grid.gap-gutter { --g: calc(var(--gutter) * 1) }
.grid > * {
    position: relative;
    flex: 1;
    padding: var(--g);
}
.grid--2 > * {
    flex: 0 0 50%;
}
.grid--3 > * {
    flex: 0 0 33.333%;
}
.grid--4 > * {
    flex: 0 0 25%;
}
.grid--2.mainCol2 > *:nth-child(odd),
.grid--2.mainCol1 > *:nth-child(even) {
    flex: 0 0 40%;
}
.grid--2.mainCol2 > *:nth-child(even),
.grid--2.mainCol1 > *:nth-child(odd) {
    flex: 0 0 60%;
}
@media screen and (max-width: 1200px) {
    .grid.gap-bigger { --g: 3em; }
    .grid.gap-gutter { --g: calc(var(--gutter) * 1.5) }
}
@media screen and (max-width: 600px) {
    .grid.gap-bigger { --g: 2em; }
    .grid.gap-gutter { --g: calc(var(--gutter) * 1) }
}

@media screen and (max-width: 900px) {
    .grid.default-responsive > * {
        flex: 0 0 100%;
    }
}

/*******************
 flex columns
*******************/

.flex__2cols, .flex__4cols {
    margin: 0 -1em -2em -1em;
    width: calc(100% + 2em);
    flex-wrap: wrap;
}
.flex__2cols > div {
    position: relative;
    flex: 0 0 50%;
    padding: 0 1em;
    margin-bottom: 2em;
}
    .flex__2cols.more-gap {
        margin: 0 -3em -3em -3em;
        width: calc(100% + 6em);
    }
    .flex__2cols.more-gap > div {
        padding: 0 3em;
    }
    .flex__2cols.big-gap {
        margin: 0 -5em -5em -5em;
        width: calc(100% + 10em);
    }
    .flex__2cols.big-gap > div {
        padding: 0 5em;
    }
.flex__4cols > div {
    flex: 0 0 25%;
    padding: 0 1em;
    margin-bottom: 2em;
}
.flex__2cols.flex__mainCol2 > div:first-child, .flex__2cols.flex__mainCol1 > div:last-child {
    flex: 0 0 40%;
}
.flex__2cols.flex__mainCol2 > div:last-child, .flex__2cols.flex__mainCol1 > div:first-child {
    flex: 0 0 60%;
}
    @media screen and (max-width: 800px) {
        .flex__2cols > div,
        .flex__2cols.flex__mainCol2 > div:first-child,
        .flex__2cols.flex__mainCol2 > div:last-child,
        .flex__2cols.flex__mainCol1 > div:first-child,
        .flex__2cols.flex__mainCol1 > div:last-child,
        .flex__4cols > div {
            flex: 0 0 100%;
        }
        .flex__2cols.big-gap {
            margin: 0 -3em -3em -3em;
            width: calc(100% + 6em);
        }
        .flex__2cols.big-gap > div {
            padding: 0 3em;
        }
    }
    @media screen and (max-width: 450px) {
        .flex__2cols.more-gap,
        .flex__2cols.big-gap {
            margin-left: -2em;
            margin-right: -2em;
            width: calc(100% + 4em);
        }
        .flex__2cols.more-gap > div,
        .flex__2cols.big-gap > div {
            padding: 0 2em;
        }
    }


.deported-on-left {
    width: calc(var(--wrapper) + (100vw - var(--wrapper)) / 2 + var(--gutter));
    padding-right: calc(var(--gutter) * 2);
}
.deported-on-right {
    width: calc(var(--wrapper) + (100vw - var(--wrapper)) / 2 + var(--gutter));
    padding-left: calc(var(--gutter) * 2);
    margin: auto 0 auto auto;
}
@media screen and (max-width: 1200px) {
    .deported-on-left {
        width: 100%;
        padding-right: calc(var(--gutter) * 1.5);
    }
    .deported-on-right {
        width: 100%;
        padding-left: calc(var(--gutter) * 1.5);
    }
}
@media screen and (max-width: 850px) {
    .deported-on-left .grid > .content {
        padding-left: calc(var(--gutter) * 2);
    }
    .deported-on-right .grid > .content {
        padding-right: calc(var(--gutter) * 2);
    }
}
@media screen and (max-width: 600px) {
    .deported-on-left { padding-right: calc(var(--gutter) * 1); }
    .deported-on-right { padding-left: calc(var(--gutter) * 1); }
}