@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono:wght@700&display=swap');

html,body { 
	font-family: 'Inter', sans-serif; 
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

.bg-blue {
	/* background-color: #003399; */
	background: linear-gradient(250deg, rgba(0,51,153,1) 0%, rgba(0,36,108,1) 100%);
	color: white;
}

.bg-yellow { 
	/* background-color: #ffcc00; */
	background: linear-gradient(45deg, rgba(255,230,0,1) 30%, rgba(255,204,0,1) 100%);
}

.bg-light-blue {
	background-color: #1c509b;
	color: white;
}

.bg-light-yellow {
	background: linear-gradient(45deg, rgba(255,230,0,0.25) 30%, rgba(255,204,0,0.25) 100%);
	color: #222;
}

.btn-warning {
	background: linear-gradient(45deg, rgba(255,230,0,1) 10%, rgba(255,204,0,1) 100%);
	border: none;
}

.hamburger-inner, .hamburger-inner::after, .hamburger-inner::before {
	background-color: white !important;
	width: 30px;
	height: 2px;
}

@media (min-width: 1000px) {
	.hamburger {
		padding-right: 0em;
		margin-right: -10px;
	}
}

/* .top-area {
	min-height: 70vh; 
} */

.big-headline {
	font-weight: bold;
	line-height: 1.1em;
	padding-bottom: 0.2em;
	letter-spacing: -0.02em;
}

@media (min-width: 1000px) {
	.big-headline {
		font-size: 4em;
		max-width: 12em;
	}
	.slogan {
		font-size: 1.75em;
	}
}

.slogan {
	line-height: 1em;
	letter-spacing: -0.01em; 
}

.logo {
	color: white;
	font-weight: 700;
	font-size: 1.75rem;
}

.yellow {
	color: #ffcc00;
}

@media (max-width: 500px) {
	.p-5 {
		padding-left: 1.5em !important;
		padding-right: 1.5em !important;
	}
	.ps-5 {
		padding-left: 1.5em !important;
	}
	.pe-5 {
		padding-right: 1.5em !important;
	}
}

.btn {
	box-shadow: 2px 2px black;
}

.bg-blue .btn {
	box-shadow: 2px 2px white;
}

#counter {
	font-family: 'Overpass Mono', monospace;
}


h6 {
	text-transform: uppercase;
}

#offcanvas-menu {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 999;
	height: 100%;
	/* background: radial-gradient(circle, rgba(255,230,0,1) 30%, rgba(255,204,0,1) 100%); */
	background-color: rgba(0,51,153,1);
	width: 80vw;
	transform: translateX(80vw);
}

#offcanvas-menu a {
	color: white;
}

body {
	transition: transform 0.5s;
}

body.oc-menu-open {
	transform: translateX(-80vw); 
}

@media (min-width: 1000px) {
	#offcanvas-menu {
		width: 40vw;
		transform: translateX(40vw);
	}
	body.oc-menu-open {
		transform: translateX(-40vw);
	}
}

#oc-menu-items {
	position: absolute;
}

.menu {
	position: absolute;
}

.nav {
	line-height: 3em;
	font-size: 1.2em;
	font-weight: 500;
}

.nav a {
	color: #222;
	text-decoration: none;
}

.nav a:hover {
	text-decoration: underline;
}

.nav li {
	border-bottom: 1px solid white;
}

.nav li:last-child {
	border-bottom: none;
}

.footer {
	margin-top: 5em;
}

.footer .nav {
	line-height: 2em;
}

.footer .nav li {
	border-bottom: none;
}

h1, .bold {
	font-weight: 700;
}

.main-content {
	max-width: 55em;
	line-height: 1.5em;
}

a {
	text-decoration: none;
}

p a {
	color: #003399;
}

.bg-blue a {
	color: white;
}

p a:hover, .bg-blue a:hover { 
	text-decoration: underline;
}

.social-media a:hover {
	text-decoration: none;
}

blockquote {
	font-size: 1.5em;
	line-height: 1.25em;
}

@media (min-width: 1200px) {
	blockquote {
		position: absolute;
		right: 60px;
		width: 300px;
		min-height: 200px;
		background-image: url('/wp-content/themes/stayeuropean/img/star-tr.png');
		background-repeat: no-repeat;
		background-position: right;	
	}
}

@media (min-width: 1300px) {
	blockquote {
		right: 120px;
	}
}

.main-what, .main-timeline {
	border-left: 1px solid #003399;
}

.main-what h6, .main-timeline h6 {
	background-color: #003399;
	color: white;
	display: inline-block;
	padding: 0.5em 1em;
	margin-left: -0.75rem;
	margin-bottom: 0.25rem;
	margin-top: 1rem;
}

.main-timeline h6 {
	margin-bottom: 1rem;
	margin-top: 2rem;
}

.main-what h2, .main-timeline h2 {
	margin-bottom: 0.5em;
	margin-left: 0rem;
	margin-top: 0.5rem;
	padding-left: 2rem;
}

.main-what p:not(.no-indent), .main-timeline p:not(.no-indent) {
	padding-left: 2rem;
}

.front-page-quotes {
	background-image: url('/wp-content/themes/stayeuropean/img/star-tr.png');
	background-repeat: no-repeat;
	background-position: bottom right;
	font-size: 1.4em;
}

.signup-container, .bg-star {
	/* background-image: url('/wp-content/themes/stayeuropean/img/star-tr.png');
	background-repeat: no-repeat;
	background-position: left; */
}

.bg-pos-right {
	background-position: right;
}



/* FORMS === */

.join-form label.amount {
	padding: 1em;
	border: 1px solid grey;
	transition: background-color 500ms;
}

.join-form input[type=radio] {
	display: none;
}

.join-form input:checked + label.amount {
	background-color: #ffcc00;
}

.census-counter {
	font-size: 4em;
}

/* census step by step box */

.arrow-1, .arrow-2, .arrow-3, .arrow-4, .arrow-5, .arrow-none {
	position: relative;
}

.arrow-1 {
	background-color: #01308b;
}

.arrow-2 {
	background-color: #1c509b;
}

.arrow-3 {
	background-color: #2b5e9d;
}

.arrow-4 {
	background-color: #1c509b;
}

.arrow-5 {
	background-color: #2b5e9d;
}

@media (min-width: 992px) {

	.arrow-1::after, .arrow-2::after, .arrow-4::after, .arrow-5::after {
		content: "";
		position: absolute;
		right: -0.5em;
		top: 50%;
		border: 1em solid blue;
		border-color: transparent #01308b #01308b transparent;
		transform-origin: 0 0;
		transform: rotate(-45deg);
		z-index: 999;
	}

	.arrow-1::after {
		border-color: transparent #01308b #01308b transparent;
	}

	.arrow-2::after {
		border-color: transparent #1c509b #1c509b transparent;
	}	

	.arrow-4::after {
		border-color: transparent #1c509b #1c509b transparent;
	}	

	.arrow-5::after{
		border-color: transparent #2b5e9d #2b5e9d transparent;
	}


}

@media (max-width: 991px) {

	.arrow-1::after, .arrow-2::after, .arrow-3::after, .arrow-4::after, .arrow-5::after {
		content: "";
		position: absolute;
		bottom: -2em;
		left: 45%;
		height: 0px;
		width: 0px;
		border: 1em solid blue;
		transform-origin: 0 0;
		transform: rotate(-45deg);
		z-index: 999;
	}

	.arrow-1::after {
		border-color: transparent transparent #01308b #01308b;
	}

	.arrow-2::after {
		border-color: transparent transparent #1c509b #1c509b;
	}	

	.arrow-3::after {
		border-color: transparent transparent #2b5e9d #2b5e9d;
	}	

	.arrow-4::after {
		border-color: transparent transparent #1c509b #1c509b;
	}	

	.arrow-5::after{
		border-color: transparent transparent #2b5e9d #2b5e9d;
	}

}

.big-number {
	font-size: 3em;
	display: block;
	float: left;
	font-weight: 100;
	margin-left: -0.2em;
	margin-top: -0.2em;
	margin-right: 0.2em;
	margin-bottom: 0.5em;
}

.step-by-step svg {
	fill: #ffcc00; 
	margin-top: 1em; 
	margin-left: -5%;
	position: absolute;
	bottom: 0px;
	right: 10px;
}

.step-by-step h4 {
	min-height: 7rem;
}

@media (min-width: 1000px) {
	.big-number {
		margin-bottom: 1em;
	}
	.step-by-step svg {
	}
}

.census-quotes {
	height: 30vh;
}

@media (min-width: 768px) {
	.census-quotes {
		height: 20vh;
	}
}

.logo-star {
	display: inline-block;
	transition: transform 1s;

}

a:hover > .logo > .logo-star {
	transform: rotate(360deg);
	transition: transform 5s;

} 

.bg-star-rotate {
	position: relative;
}

.bg-star-rotate::before {
    content: "★";
    color: #ffcc00;
    font-size: 15em;
    position: absolute;
    z-index: -1;
    right: 0;
    top: -0.5em;
	opacity: 0.3;
	animation: 30s rotate infinite;
	animation-timing-function: linear;  
}
@keyframes rotate {
    0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@media (max-width: 767px) {
	.bg-star-rotate::before {
		left: 0.5em;
		bottom: -0.5em;
		top: unset;
		right: unset;
	}
}

.btn {
	transition: transform 200ms;
}
.btn:hover {
	transform: scale(1.05);
}


/* === WP fixes */

.wp-block-image img {
	height: auto;
}

.has-medium-font-size {
	line-height: 1.5em;
}

/* === Special pages */

.main-routes-to-rejoin h2 {
	margin-top: 1em;
	font-size: 1.5em;
	font-weight: 600;
}