*{
    padding: 0; margin: 0;
}

@font-face {
    font-family: 'montreal';
    src: url('fonts/PPNeueMontreal-Book.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --text-color: #302e2e;
    --primary-color: #fd8153;
    --secondary-color: #c0b7f5;
    --corner-radius: 60px;
  }

body, html{
    width: 100vw; 
    min-height: 100vh;
    line-height: 1em;
    font-family: 'montreal', Helvetica, Arial, sans-serif;
	overflow-x: hidden; width: 100%;
	color: var(--text-color);
}

body{overflow-x: hidden; width: 100vw;}

h1, h2, h3, h4, h5{
    font-family: "swear-display", 'Times New Roman', Times, serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3em;
}

p{font-size: 18px; line-height: 1.2em;}

h1 strong{font-weight: 700;}

h1 strong em{font-weight: 400; font-style: italic;}

.h-screen{
    min-height: 100vh;
}

.webwrapper{
    width: calc(100vw - 40px);
    margin: 0 auto;
}

.relative-p{position: relative;}
.relative-a{position: absolute;}
.relative-f{position: fixed;}

.align-left{text-align: left;}
.align-right{text-align: right;}
.align-center{text-align: center;}

#header{
    position: fixed; 
    top: 0; left: 0;
    height: 80px; 
    width: 100vw;
    display: flex; 
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

#header .header_background{
    position: absolute; 
    width: 100%; height: 100%; 
    top: 0; left: 0; 
    background: black;
    opacity: 0;
}

.header_menu{
	display: flex; 
	justify-content: space-between;
	position: relative;
	z-index: 1;
}

.languagebox{
	position: relative;
	z-index: 15;
	margin-left: 20px;
}

#header .languagebox a{
	padding: 5px 10px; 
	background: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 25px; 
    text-decoration: none;
    display: inline-block; 
    transform: translateY(-2px);
    font-size: 18px;
    transition-duration: 0.15s;
}

#header .languagebox:hover a{
	color: white; 
	background: var(--text-color);
}

#header.invert .languagebox a{
	color: white; 
	border: 1px solid white;
}

#header.invert .languagebox:hover a{
	background: white; 
	color: var(--text-color);
}



#header .logo_wrapper{
    position: relative; 
    opacity: 0; 
    transform: translateY(50px);
}

#header .logo_wrapper .logo{
    display: inline-block; 
    width: 280px; height: 40px;
    background: url(images/brand/cause-logo-dark.svg) no-repeat; 
    background-size: contain;
    background-position: center left;
    transition-duration: 0.5s;
    opacity: 1;
    
}

#header.invert .logo_wrapper .logo{opacity: 0;}

#header .logo_wrapper .logo_white{
    display: block; 
    width: 280px; height: 40px;
    position: absolute; 
    top: 0; left: 0;
    background: url(images/brand/cause-logo-white.svg) no-repeat; 
    background-size: contain;
    background-position: center left;
    opacity: 0; 
    transition-duration: 0.5s;
}

#header.invert .logo_wrapper .logo_white{opacity: 1;}

.header_wrapper{
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

#main_menu{

}

#main_menu ul{
    padding: 0; margin: 0; text-align: 0;
}

#main_menu ul li{
    display: inline-block; 
    list-style: none; 
    margin: 0 0 0 20px; 
    opacity: 0; 
    transform: translateY(50px);
}

#header #main_menu ul li a{
    padding: 5px 20px; 
	background: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 25px; 
    text-decoration: none;
    display: inline-block; 
    transform: translateY(-2px);
    font-size: 18px;
    transition-duration: 0.15s;
}

#header #main_menu ul li.btn a{
    border: 1px solid white;
}



#main_menu ul li a:hover{
    background: var(--text-color);
    color: white;
}

#header.invert #main_menu ul li a{
    border: 1px solid white; 
    color: white;
}

#header.invert #main_menu ul li a:hover{
    border: 1px solid white;
    background: white; 
    color: var(--text-color);
}

#header.invert #main_menu ul li.btn a{color: var(--text-color);}
#header.invert #main_menu ul li.btn a:hover{color: white; background: transparent;}

#main_menu ul li.btn a, a.btn{
    border: 1px solid white; 
    background: white; 
    transition-duration: 0.5s;
}

a.btn{
    padding: 5px 20px; 
    color: var(--text-color);
    border: 1px solid white;
    border-radius: 25px; 
    text-decoration: none;
    display: inline-block; 
    font-size: 18px;
    margin-right: 0.5em;
}

#main_menu ul li.btn a:hover, a.btn:hover{
    border: 1px solid var(--text-color);
    background: var(--text-color);
    color: white;
}

a.btn.btn2{
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    transition-duration: 0.5s;
}

a.btn.btn2:hover{
    background: transparent; 
    color: var(--primary-color);
}

.grid{
    display: grid; 
    grid-gap: 3em; 
}

.grid.align-center{
    align-items: center;
}

button {
    all: unset;
  }
  
  button:focus {
    outline: revert;
  }

section#footer{
    background: var(--primary-color);
    padding: 80px 0 40px 0;
}

section#footer .webwrapper{
    max-width: 1080px;
    font-size: 14px; 
}

section#footer .webwrapper p{font-size: 15px; }

section#footer a.logo{
    width: 270px; 
    height: 40px; 
    display: inline-block; 
    background: url(images/brand/cause-logo-dark.svg) no-repeat;
    background-size: contain; 
    background-position: center left;
}

section#footer img{width: 12px; height: 12px; display: inline-block; margin-right: 0.5em;}

#footer a{text-decoration: none; color: var(--text-color);}

section#footer #main_menu ul li.btn a{border: 0px none; background: transparent;}
section#footer #main_menu ul li.btn a:hover{color: white; background: transparent;}

#footer ul li{opacity: 1; transform: translateY(0);}

.hero h1{font-size: 8vh;}
    .hero h2{font-size: 4vh; padding-bottom: 1em; text-align: left;}

@media(min-width: 640px){
    .grid_1_1{grid-template-columns: 1fr 1fr;}
    .grid_4_5{grid-template-columns: 4fr 5fr;}
    .grid_5_4{grid-template-columns: 5fr 4fr;}
    .grid_2_1{grid-template-columns: 2fr 1fr;}
    .grid_1_2{grid-template-columns: 1fr 2fr;}
    .grid_3_6{grid-template-columns: 3fr 6fr;}
    .grid_6_3{grid-template-columns: 6fr 3fr;}
    .grid_2_3{grid-template-columns: 2fr 3fr;}
    .grid_3_2{grid-template-columns: 3fr 2fr;}
	
	
	.grid_1_1.reversed > div:nth-child(1){grid-column: 2/3; grid-row: 1/2;}
	.grid_1_1.reversed > div:nth-child(2){grid-column: 1/2; grid-row: 1/2;}	

    .hero h1{font-size: 8vh;}
    .hero h2{font-size: 5vh; padding-bottom: 1em;}
}

@media(min-width: 1280px){
    .webwrapper{
        width: 1240px;
    }

    #header{height: 120px;}
}

/* -------------- Animation keyframes ---------------*/

@keyframes rotate360 {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.wpml-ls, .otgs-development-site-front-end{display: none;}