@charset "utf-8";

:root {
	--primary-color:rgba(58,89,50,1.0);
	--primary-hgh-color:rgba(58,89,50,0.8);
	--primary-med-color:rgba(58,89,50,0.6);
    --primary-low-color:rgba(58,89,50,0.2);
    --primary-elw-color:rgba(58,89,50,0.1);

	--secondary-color:rgba(208,174,92,1.0);
	--secondary-hgh-color:rgba(208,174,92,0.8);
	--secondary-med-color:rgba(208,174,92,0.6);
    --secondary-low-color:rgba(208,174,92,0.2);
    --secondary-elw-color:rgba(208,174,92,0.1);
	
	--light-color:rgba(236,241,244,1.0);
	--light-low-color:rgba(236,241,244,0.3);
	
	--white-color:rgba(255,255,255,1.0);
	
	--dark-color:rgba(22,32,55,1.0);
	--dark-high-color:rgba(22,32,55,0.8);
	--dark-low-color:rgba(22,32,55,0.6);
	
	--extra-color:rgba(208,174,92,1.0);
	--extra-high-color:rgba(208,174,92,0.8);
	--extra-low-color:rgba(208,174,92,0.6);
	
	--icon-color:rgba(208,174,92,0.6);
	
	--text-size:calc(16px + 0.2vw);
	
	--ws-x:5%;
	--ws-x-md:40px;
	--ws-x-sm:20px;
	--ws-x-xs:10px;
    --ws-x-xxs:5px;
	
	--ws-y:80px;
	--ws-y-md:40px;
	--ws-y-sm:20px;
	--ws-y-xs:10px;
    --ws-y-xxs:5px;
	
	--rds-sm:40px;
	--rds-xl:80px;
	
}

/*===========================
VARIA
===========================*/

.wpcc-container, .wpcc-container * { width:100%; margin:0; float:none; }
.no-scrolling { position:fixed; width:100%; }

.eqHWrap { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }


/*===========================
TYPO
===========================*/

h1, h2, h3, h4, label, [class*='button--'], .content > i, .grand-priories .continent td { font-family:"Raleway", Helvetica, Arial, sans-serif; }
h5, h6, p, a, small, .content > ul > li, .grand-priories { font-family:"Quicksand", Helvetica, Arial, sans-serif; }

p, label, small { color:var(--dark-color); }

h1, h2 { font-size:calc(32px + 0.4vw); color:var(--white-color); line-height:1.2; font-weight:900; text-transform:uppercase; }
h2 > small { font-size:calc(32px + 0.4vw); color:var(--white-color); padding-top:5px; }

h3 { font-size:calc(26px + 1.2vw); color:var(--primary-color); line-height:1; font-weight:900; }

h4 { font-size:calc(16px + 0.2vw); color:var(--primary-color); font-weight:900; text-transform:uppercase; line-height:1.2; }

h5 { font-size:calc(18px + 0.25vw); font-weight:400; color:var(--dark-color); line-height:1.2; }
h1 + h5, h2 + h5 { padding-top:10px; color:var(--white-color); }
h3 + h5 { padding-top:10px; }

h6 { font-size:calc(16px + 0.25vw); font-weight:900; color:var(--primary-color); line-height:1.2; }

p, .content table { font-size:var(--text-size); font-weight:400; line-height:1.4; }
h3 + p { max-width:720px; display:inline-block; }

small { display:block; text-transform:none; font-weight:600; }

a { color:var(--dark-color); }
a:hover { color:var(--primary-color); }


/*===========================
HEADER
===========================*/

header { z-index:99; position:fixed; top:0; left:0; width:100%; background:var(--white-color); }
header { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; transition:0.5s ease-out; }
.header--top { background:var(--light-color); }

header > .wrapper { height:80px; }
header > div > a { position:absolute; top:0; left:0; z-index:99; padding:10px 0; }
header > div > a > img { display:block; height:60px; }

header > div > nav { text-align:right; }
header > div > nav > div {}
header > div > nav > div > ul {}
header > div > nav > div > ul > li { display:inline-block; vertical-align:top; padding:0 15px; }
header > div > nav > div > ul > li:last-child { padding-right:0; }
header > div > nav > div > ul > li > a { display:block; position:relative; padding:30px 0; font-size:16px; font-weight:600; }
header > div > nav > div > ul > li > a:after { top:0; left:0; width:0; height:3px; background:var(--secondary-color); }
header > div > nav > div > ul > li > a:after { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; transition:0.5s ease-out; }
header > div > nav > div > ul > li > a:hover:after { width:100%; }
header > div > nav > div > ul > li.current > a { color:var(--primary-color); }
header > div > nav > div > ul > li.current > a:after { top:0; left:0; width:100%; height:3px; background:var(--secondary-color); }

header > div > nav > div > a { display:none; vertical-align:top; margin:0 20px; }
header > div > nav > div > a:hover { -webkit-transform:translateY(-10px); -moz-transform:translateY(-10px); -o-transform:translateY(-10px); transform:translateY(-10px); }
header > div > nav > div > a > i { display:block; padding:20px; background:var(--primary-color); }
header > div > nav > div > a > i > svg { fill:var(--white-color); height:32px; width:32px; }
header > div > nav > div > a > div { display:none; }


/*===========================
HEADLINE
===========================*/

.headline { position:relative; overflow:hidden; z-index:90; background:#000; overflow:hidden; }

.headline > .wrapper { z-index:92; height:70vh; }
.headline > .wrapper:after { top:0; right:40%; width:500%; height:100%; z-index:-1; background:var(--extra-low-color); }
.headline > .wrapper > div { position:relative; z-index:95; width:58%; }
.headline > .wrapper > div { -webkit-animation:text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation:text-focus-in 0.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; }

.headline > span { position:absolute; top:-10%; left:-10%; width:120%; height:120%; z-index:88; background-position:top right; }
.headline > span { opacity:0.8; filter:alpha(opacity=80); -khtml-opacity:0.8; -moz-opacity:0.8; }

.happy-line { position:absolute; bottom:-1px; left:0; right:0; z-index:94; }
.happy-line > svg { fill:var(--white-color); height:4.19921875vw; width:100%; vertical-align:bottom; }


/*===========================
PAGE
===========================*/

#page { overflow:hidden; }

main { position:relative; z-index:90; background:var(--white-color); }


/*===========================
FOOTER
===========================*/

footer { width:100%; position:fixed; left:0; bottom:0; padding:30px 0; z-index:80; background:var(--primary-color); }
footer a, footer p { color:var(--white-color); }
footer a:hover { color:var(--extra-color); }

footer > div {}
footer > div > div {}
footer > div > div > div { padding-bottom:30px; }
footer > div > div > div > nav { padding:0 20%; }
footer > div > div > div > nav > a { display:block; position:relative; border-bottom:1px solid rgba(255,255,255,0.2); line-height:40px; font-size:16px; font-weight:600; }
footer > div > div > div > nav > a:last-child { border:0; }
footer > div > div > div > nav > a.current { color:var(--extra-low-color); }
footer > div > div > div > nav > a > i { position:absolute; top:0; left:0; padding:10px 0; }
footer > div > div > div > nav > a > i > svg { fill:var(--extra-low-color); height:20px; width:20px; }
footer > div > div > div > nav > a > div { white-space:nowrap; text-overflow:ellipsis; overflow:hidden; padding-left:30px; }

footer > div > div > div > p { font-size:16px; padding-top:10px; }

footer > div > div > div > a > img { display:block; height:150px; width:auto; margin:0 auto 20px auto; }

footer > div > div > a:not(:last-child) { margin-right:10px; padding-right:10px; border-right:1px solid rgba(255,255,255,0.2); }

footer > div > a, footer > div > p, footer > div > div > a { display:block; font-size:12px; line-height:16px; margin:0; }
footer > div > a > svg { fill:var(--extra-low-color); height:16px; width:16px; margin:0 3px; }
footer > div > a > svg { -webkit-animation:throb 1.33s ease-in-out infinite; animation:throb 1.33s ease-in-out infinite; }

footer > div > span { position:absolute; bottom:0; right:0; }
footer > div > span > span { -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -o-transform:rotate(-90deg); -ms-transform:rotate(-90deg); transform:rotate(-90deg); }


/*===========================
ITEMS
===========================*/

.row-x { padding-left:var(--ws-x); padding-right:var(--ws-x); }
.row-y { padding-top:var(--ws-y); padding-bottom:var(--ws-y); }
.row-t { padding-top:var(--ws-y); }
.row-b { padding-bottom:var(--ws-y); }
.row-max { max-width:1000px; margin-left:auto; margin-right:auto; }
.y-center { display:flex; display:-webkit-flex; align-items:center; -webkit-align-items:center; }

/* CARD */
.card { position:relative; height:500px; }
.card > span { position:absolute; top:0; width:70%; height:100%; z-index:2; }
.card > span { border-radius:var(--rds-xl); -moz-border-radius:var(--rds-xl); -webkit-border-radius:var(--rds-xl); -o-border-radius:var(--rds-xl); }
.card > div { position:absolute; top:0; width:60%; height:100%; z-index:3; }
.card > div > div { background:var(--white-color); }
.card > div > div { border-radius:var(--rds-sm); -moz-border-radius:var(--rds-sm); -webkit-border-radius:var(--rds-sm); -o-border-radius:var(--rds-sm); }
.card--left > span { left:0; background-position:top left; }
.card--left > div { right:0; }
.card--left > div > div { padding:30px 0 30px 4%; }
.card--right > span { right:0; background-position:top right; }
.card--right > div { left:0; }
.card--right > div > div { padding:30px 4% 30px 0; }

/* SITEMAP */
.sitemap { padding:20px 0 40px 0; }
.sitemap:last-of-type { padding-bottom:0; }
.sitemap > li { display:block; border-bottom:1px solid var(--light-color); }
.sitemap > li:last-child { border:0; }
.sitemap > li > a { display:block; padding:20px 0; font-size:var(--text-size); }

/* CONTENT */
.content {}
.content > i { display:block;margin:auto;background:var(--primary-color);width:100px;height:100px;line-height:100px;font-size:40px;font-weight:900; color:var(--white-color); text-align:center; font-style:normal; }
.content > i + ul, .content > ul + i { margin-top:40px; }
.content > ul {}
.content > ul > li { display:block; position:relative; padding:20px; margin-bottom:2px; font-size:var(--text-size); font-weight:400; line-height:1.4; }
.content > ul > li:nth-of-type(odd) { background:var(--light-low-color); }
.content > ul > li:before { top:0; bottom:0; left:0; width:4px; height:100%; background:var(--secondary-color); }

.image-row { display:flex; gap:20px; max-width:600px; margin:30px auto; }
.image-row > img { width:calc(50% - 10px); height:auto; display:block; }

.image-row1 { display:block; max-width:300px; margin:30px auto; }
.image-row1 > img { width:100%; height:auto; display:block; }

/* table */
.content table { margin:var(--ws-y-md) auto; width:100%; background-color:var(--light-low-color); overflow:hidden; }
.content table thead tr { background:var(--secondary-color); font-weight:600; }
.content table th { padding:var(--ws-y-sm); }
.content table td { padding:var(--ws-y-sm); }
.content table tbody tr {}
.content table tbody tr:nth-of-type(even) { background:var(--secondary-elw-color); }

/* grand-priories */
.grand-priories { width:100%; border-collapse:collapse; margin-top:-20px; font-size:15px; }
.grand-priories td { padding:15px 3px; border-bottom:1px solid #ddd; vertical-align:top; }
.grand-priories .continent td { background:var(--primary-color); border-bottom:20px solid #fff; border-top:20px solid #fff; padding-left:15px; font-size:calc(16px + 0.2vw); color:var(--white-color); font-weight:900; text-transform:uppercase; }
.grand-priories .flag { width:42px; }
.grand-priories .flag img { width:32px; height:auto; display:block; }
.grand-priories .jurisdiction { font-weight:600; }
.grand-priories .sub { margin-top:8px; }
.grand-priories .sub strong { display:block; }

/* CONTACT INFO */
.contact-info { padding:0 5%; }
.contact-info > h3 { margin-bottom:20px; }
.contact-info > a { padding:20px 0; }
.contact-info > a:last-child { padding-bottom:0; }
.contact-info > a > i { display:inline-block; padding:15px; margin-right:30px; background:var(--light-color); }
.contact-info > a > i > svg { fill:var(--secondary-color); height:30px; width:30px; }
.contact-info > a:hover > i > svg { fill:var(--primary-color); }
.contact-info > a > div { font-size:var(--text-size); font-weight:600; line-height:1.4; }

/* MAPS */
#maps { height:40vh; min-height:800px; width:100%; position:relative; z-index:89; }
#maps .leaflet-popup-content > span, .leaflet-popup-content > a { display:none; }
#maps .marker-cluster-medium div { background-color:var(--secondary-color); border-color:var(--secondary-med-color); }

/*===========================
FORM
===========================*/

.form { padding:0 5%; }
.form > ul { padding:30px 0 20px 0; }
.form > ul > li { margin-bottom:20px; }
.form > ul > li > label { display:none; }
.form > h6 { text-align:center; }

input[type=text], textarea, [data-type="select"]:before { background:0; border:0; color:var(--dark-color); padding-left:0; border-bottom:2px solid var(--secondary-color); vertical-align:top; }
input[type=text], textarea, [data-type="select"]:before { border-radius:0; -moz-border-radius:0; -webkit-border-radius:0; -o-border-radius:0; }
select { padding-left:0; }
textarea { height:130px; }
.error-response { border-radius:.3rem; -moz-border-radius:.3rem; -webkit-border-radius:.3rem; -o-border-radius:.3rem; }
.error-input { border:0!important; border-bottom:3px solid #ec3f43!important; }

[data-type="select"]:after { border:0; bottom:0; width:16px; height:16px; margin:auto; top:0; right:10px; background-size:16px 16px; content:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDI1NiAyNTY7IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSJyZ2JhKDIxNCwxMDAsNjIsMS4wKSI+PHBvbHlnb24gcG9pbnRzPSIyMjUuODEzLDQ4LjkwNyAxMjgsMTQ2LjcyIDMwLjE4Nyw0OC45MDcgMCw3OS4wOTMgMTI4LDIwNy4wOTMgMjU2LDc5LjA5MyAiLz48L3N2Zz4='); }


/*===========================
BUTTONS
===========================*/

[class*='button--'].button--primary { background:var(--primary-color); border-color:var(--primary-color); font-weight:900; color:var(--white-color); }
[class*='button--'].button--primary:hover { background:var(--primary-hgh-color); border-color:var(--primary-hgh-color); color:var(--white-color); }

.button--secondary { background:var(--white-color); border-color:var(--secondary-color); border-width:2px; font-weight:900; color:var(--primary-color); }
.button--secondary:hover { background:var(--white-color); border-color:var(--secondary-color); color:var(--secondary-color); }
.button--secondary > svg { fill:var(--primary-color); }
.button--secondary:hover > svg { fill:var(--secondary-color); }

.button--tertiary { background:0; border-color:var(--white-color); border-width:2px; font-weight:900; color:var(--white-color); }
.button--tertiary:hover { background:0; border-color:var(--light-color); color:var(--light-color); }
.button--tertiary > svg { fill:var(--white-color); }
.button--tertiary:hover > svg { fill:var(--light-color); }
.button--tertiary.circle:hover { background:var(--white-color); }
.button--tertiary.circle:hover > svg { fill:var(--primary-color); }

[class*='button--'].button--medium { padding:10px 25px; }
[class*='button--'].button--medium.with-icon--right > svg { margin-left:15px; }
[class*='button--'].button--medium.with-icon--left > svg { margin-right:15px; }

[class*='button--'] { padding:10px 15px; text-transform:none; }
[class*='button--']:not(.circle):hover > svg { -webkit-transform:translateX(20%); -moz-transform:translateX(20%); -o-transform:translateX(20%); transform:translateX(20%); }
[class*='button--'] > svg { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; -ms-transition:0.5s ease-out; transition:0.5s ease-out; }

h5 + [class*='button--'] { margin-top:30px; }

p + [class*='button--'] { margin-top:15px; }

p + [class*='button--'] + [class*='button--'] { margin-top:15px; }

[class*='button--'] + [class*='button--'] { margin-left:30px; }

.center [class*='button--']:not([data-action="send"]) { margin:0 15px 20px 15px; }

[class*='button--'].circle { padding:10px; }


/*===========================
MOBIL NAV
===========================*/

[data-action='nav-button'] { display:none; position:absolute; top:0; bottom:0; margin:auto; right:0; z-index:99; width:30px; height:20px; cursor:pointer; }
[data-action='nav-button'] span { position:absolute; left:0; height:2px; width:100%; background:var(--primary-color); }
[data-action='nav-button']:hover span { background:var(--extra-color); }
[data-action='nav-button'].active span { background:var(--secondary-color); }
[data-action='nav-button'] span { -webkit-transition:.25s ease-in-out; -moz-transition:.25s ease-in-out; -o-transition:.25s ease-in-out; -ms-transition:.25s ease-in-out; transition:.25s ease-in-out; }
[data-action='nav-button'] span:nth-child(1) { top:0; }
[data-action='nav-button'] span:nth-child(2) { top:0; bottom:0; margin:auto; }
[data-action='nav-button'] span:nth-child(3) { bottom:0; }
[data-action='nav-button'].active span:nth-child(1) { -webkit-transform:translateY(10px) translateY(-50%) rotate(45deg); -moz-transform:translateY(10px) translateY(-50%) rotate(45deg); -o-transform:translateY(10px) translateY(-50%) rotate(45deg); -ms-transform:translateY(10px) translateY(-50%) rotate(45deg); transform:translateY(10px) translateY(-50%) rotate(45deg); }
[data-action='nav-button'].active span:nth-child(2) { opacity:0; filter:alpha(opacity=0); -khtml-opacity:0; -moz-opacity:0; }
[data-action='nav-button'].active span:nth-child(3) { -webkit-transform:translateY(-10px) translateY(50%) rotate(-45deg); -moz-transform:translateY(-10px) translateY(50%) rotate(-45deg); -o-transform:translateY(-10px) translateY(50%) rotate(-45deg); -ms-transform:translateY(-10px) translateY(50%) rotate(-45deg); transform:translateY(-10px) translateY(50%) rotate(-45deg); width:100%; }

.open { -webkit-transform:translateX(0); -moz-transform:translateX(0); -o-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); }


/*===========================
KEYFRAMES
===========================*/

@-webkit-keyframes text-focus-in { 0% { -webkit-filter:blur(12px); filter:blur(12px); opacity:0; } 100% { -webkit-filter:blur(0px); filter:blur(0px); opacity:1; }}
@keyframes text-focus-in { 0% { -webkit-filter:blur(12px); filter:blur(12px); opacity:0; } 100% { -webkit-filter:blur(0px); filter:blur(0px); opacity:1; }}

@-webkit-keyframes throb { 0%,100% { -webkit-transform:scale(1); } 50% { -webkit-transform:scale(.8); } }
@keyframes throb { 0%,100% { transform:scale(1); } 50% { transform:scale(.8); } }


/*===========================
RESPONSIVE
===========================*/

@media (max-width: 1300px) {

.wrapper { width:94%; }

#footer-nav { display:none; }
footer > div > div > div > p { padding:0; }


}

@media (max-width: 1150px) {

.card { height:400px; }
#maps { min-height:500px; }

:root {
	--rds-xl:60px;
}

}

@media (max-width: 992px) {

header > .wrapper { height:60px; }
header > div > a > img { height:40px; }

[data-action='nav-button'] { display:block; }

header > div > nav { position:fixed; top:0; bottom:0; left:0; width:100%; padding-top:60px; z-index:92; text-align:center; background:#fff; display:flex; align-items:center; }
header > div > nav { transform:translateX(100%); -webkit-transform:translateX(100%); -moz-transform:translateX(100%); -o-transform:translateX(100%); }
header > div > nav { -webkit-transition:0.5s ease-out; -moz-transition:0.5s ease-out; -o-transition:0.5s ease-out; transition:0.5s ease-out; }

header > div > nav > div { width:100%; }
header > div > nav > div > ul { margin-bottom:60px; }
header > div > nav > div > ul > li, header > div > nav > div > ul > li:last-child { display:block; padding:0; }
header > div > nav > div > ul > li > a { padding:15px 0; font-size:20px; }
header > div > nav > div > ul > li > a:after { width:0; bottom:0; margin:auto; }
header > div > nav > div > ul > li > a:hover:after { width:40px; }
header > div > nav > div > ul > li.current > a:after { bottom:0; margin:auto; width:40px; }
header > div > nav > div > a { display:inline-block; }

.headline > .wrapper { padding-top:60px; }
.headline > .wrapper:after { right:-40%; }
.headline > .wrapper > div { width:100%; }

.headline > .wrapper > .headline__title { width:80%; }

.contact-info { padding:0 2%; }

}

@media (max-width: 768px) {

:root {
	--ws-x:4%;
	--ws-y:60px;
}

.headline > .wrapper > .headline__title { width:100%; }

.card { height:auto; }
.card > span { width:100%; height:260px; position:relative; display:block; }
.card > span { border-radius:var(--rds-sm); -moz-border-radius:var(--rds-sm); -webkit-border-radius:var(--rds-sm); -o-border-radius:var(--rds-sm); }
.card > div { width:100%; height:auto; position:relative; display:block; top:0; }
.card > div > div { padding:30px 0 0 0; }

.form { padding:0 5% 40px 5%; }

footer > div { text-align:center; }
footer > div > div > div > a > img { margin-bottom:0; height:100px; }

}

@media (max-width: 480px) {

header > div > nav > div > a { margin:0 10px; }
header > div > nav > div > a > i { padding:15px; }
header > div > nav > div > a > i > svg { height:24px; width:24px; }

.headline > .wrapper { height:85vh; }

h1 { font-size:26px; }
h2 { font-size:20px; }
h5 { font-size:18px; }

.headline > .wrapper > div, .card > div > div, h3, h3 + p { text-align:center; }

footer { padding:30px 0 85px 0; }
footer > div > span { left:0; bottom:-60px; }
footer > div > div > div > p { font-size:12px; }

.card > span { height:200px; }

#maps { min-height:400px; }

:root {
	--ws-x:4%;
	--ws-y:40px;
	--rds-sm:30px;
}

}