/*
Theme Name: Periodont
Theme URI: https://poppmedia.dk
Version: 1.0
Description: Developing for Wordpress. Designing for Cavemen. Powered by Flint.
Author: poppmedia
Author URI: https://www.poppmedia.dk
Template: flint-theme
*/



/*
	FONTS:
	font-family: 'DM Sans', sans-serif;
	font-family: 'Playfair Display', serif;
*/


/*
	VARS
	
*/

	:root {
		--font_color: #8D8F94;
		--link_color: #3882F2; /* links, nav btn */
		--nav_color: #1E4785;
		
		--nav_bg_color: #275BAA; /* Nav popup bg */
		
		--canvas_bg_color: #fff;
		--container_bg_color: #fff;
		--header-bg-color: transparent;
		--footer-bg-color: #fff;
		
		--font_family: 'DM Sans';
		
		--nav_height: 225px;
		
		--grid_cols: 3;
		--grid_gap: 140px;
	}


/*
	UNIVERSAL
*/
	
	* {
		box-sizing: border-box;
	}
	
	html {
		scroll-behavior: smooth;
		height: 100%;
	}
	
	body {
		font-family: var(--font_family), 'arial', sans-serif;
		font-size: 20px;
		line-height: 28px;
		
		margin: 0;
		padding: 0;
		
		color: var(--font_color);
		background-color: var(--canvas_bg_color);
		
	}
	
	h1 {
		font-size: 50px;
		line-height: 60px;
	}

	h2 {
		font-family: 'Playfair Display', serif;
		font-size: 44px;
		line-height: 52px;
		font-weight: 400;
		color: #393939;
		margin: 0;
	}
	
	h3 {
		font-size: 34px;
		line-height: 38px;
		color: #363636;
		margin: 0 0 25px;
	}
	
	h4 {
		font-size: 22px;
		line-height: 28px;
		color: var(--font_color);
	}
	
	a {
		color: var(--link_color);
		text-decoration: none;
	}
	
	img.alignleft {
		float: left;
		margin: 0 40px 20px 0;
	}
	
	input[type='submit'], button, .btn_nav a, a.btn {
		color: #fff !important;
		background-color: var(--link_color);
		border: none;
		padding: 12px 24px;
		font-size: 24px;
	}
	button img {
		margin-left: 20px;
	}
	button.btn_light {
		color: var(--link_color);
		background-color: #fff;
	}
	
	span.button {
		background-color: var(--link_color);
		padding: 12px 24px;
	}
	span.button a {
		color: #fff !important;
		1background-color: var(--link_color);
		border: none;
		1padding: 12px 24px;
		font-size: 24px;
	}
	
	/* Form Elements */
	
	input[type='text'], input[type='number'], input[type='email'], input[type='password'], textarea {
		width: 100%;
		padding: 20px;
		font-size: 22px;
		font-weight: bold;
		color: var(--font_color);
		border: none;
		border-bottom: solid 1px #343434;
	}
	input::placeholder {
		color: #ccc;
	}
	textarea {
		border-top: solid 1px #ccc;
		border-left: solid 1px #ccc;
		border-right: solid 1px #ccc;
	}
	
	/* Chrome, Safari, Edge, Opera */
	input::-webkit-outer-spin-button,
	input::-webkit-inner-spin-button {
		-webkit-appearance: none;
		margin: 0;
	}
	
	/* Firefox */
	input[type='number'] {
		-moz-appearance: textfield;
	}
	
	/* https://www.w3schools.com/howto/howto_css_custom_checkbox.asp */
	
	.input_checkbox {
		display: block;
		position: relative;
		padding-left: 35px;
		margin-bottom: 12px;
		cursor: pointer;
		font-size: 22px;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	
	.input_checkbox input {
		position: absolute;
		opacity: 0;
		cursor: pointer;
		height: 0;
		width: 0;
	}
	
	.checkbox_checkmark {
		position: absolute;
		top: 0;
		left: 0;
		height: 25px;
		width: 25px;
		background-color: #eee;
	}
	
	.input_checkbox:hover input ~ .checkbox_checkmark {
		background-color: #ccc;
	}
	.input_checkbox input:checked ~ .checkbox_checkmark {
		background-color: var(--link_color);
	}
	
	.checkbox_checkmark:after {
		content: "";
		position: absolute;
		display: none;
	}
	
	.input_checkbox input:checked ~ .checkbox_checkmark:after {
		display: block;
	}
	
	.input_checkbox .checkbox_checkmark:after {
		left: 9px;
		top: 5px;
		width: 5px;
		height: 10px;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	
	/* The container */
	.input_radio {
	  display: block;
	  position: relative;
	  padding-left: 35px;
	  margin-bottom: 12px;
	  cursor: pointer;
	  font-size: 22px;
	  -webkit-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	/* Hide the browser's default radio button */
	.input_radio input {
	  position: absolute;
	  opacity: 0;
	  cursor: pointer;
	}

	/* Create a custom radio button */
	.radio_checkmark {
	  position: absolute;
	  top: 0;
	  left: 0;
	  height: 25px;
	  width: 25px;
	  background-color: #eee;
	  border-radius: 50%;
	}

	/* On mouse-over, add a grey background color */
	.input_radio:hover input ~ .radio_checkmark {
	  background-color: #ccc;
	}

	/* When the radio button is checked, add a blue background */
	.input_radio input:checked ~ .radio_checkmark {
	  background-color: var(--link_color);
	}

	/* Create the indicator (the dot/circle - hidden when not checked) */
	.radio_checkmark:after {
	  content: "";
	  position: absolute;
	  display: none;
	}

	/* Show the indicator (dot/circle) when checked */
	.input_radio input:checked ~ .radio_checkmark:after {
	  display: block;
	}

	/* Style the indicator (dot/circle) */
	.input_radio .radio_checkmark:after {
		top: 9px;
		left: 9px;
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: white;
	}
	
	
	/* The container must be positioned relative: */
	.custom-select {
	  position: relative;
	}

	.custom-select select {
	  display: none; /*hide original SELECT element: */
	}

	.select-selected {
	  background-color: DodgerBlue;
	}

	/* Style the arrow inside the select element: */
	.select-selected:after {
	  position: absolute;
	  content: "";
	  top: 14px;
	  right: 10px;
	  width: 0;
	  height: 0;
	  border: 6px solid transparent;
	  border-color: #fff transparent transparent transparent;
	}

	/* Point the arrow upwards when the select box is open (active): */
	.select-selected.select-arrow-active:after {
	  border-color: transparent transparent #fff transparent;
	  top: 7px;
	}

	/* style the items (options), including the selected item: */
	.select-items div,.select-selected {
	  color: #ffffff;
	  padding: 8px 16px;
	  border: 1px solid transparent;
	  border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	  cursor: pointer;
	}

	/* Style items (options): */
	.select-items {
	  position: absolute;
	  background-color: DodgerBlue;
	  top: 100%;
	  left: 0;
	  right: 0;
	  z-index: 99;
	}

	/* Hide the items when the select box is closed: */
	.select-hide {
	  display: none;
	}

	.select-items div:hover, .same-as-selected {
	  background-color: rgba(0, 0, 0, 0.1);
	}
	

/*
	TEST

	.flint_section {
		border: solid 1px green;
	}
	
	.flint_container {
		border: solid 1px orange;
	}
*/


/*
	UNIVERSAL
*/

	#flint_body {
		1padding-top: var(--nav_height);
	}
	
	.flint_section {
		padding: 100px 0;
	}
	
	.flint_container {
		width: calc(100vw - 180px);
		max-width: 1440px;
		margin: 0 auto;
	}
	
	.flint_section .content_box {
		max-width: 500px;
		margin: 0 auto;
		text-align: center;
	}
	.flint_section .content_box_alt {
		max-width: 800px;
		margin: 0 auto;
		text-align: left;
	}
	.flint_section .content_box p {
		margin: 25px 0 50px;
	}
	
	
	/* Grid Layout */
	
	.grid_container {
		display: grid;
		1grid-template-columns: repeat(var(--grid_cols), minmax(0, 1fr));
		1gap: var(--grid_gap);
		grid-template-columns: 40% 20% 20%;
		gap: 10%;
		1margin-bottom: var(--grid_gap);
	}
	.grid_container::after {
		content: "";
		clear: both;
		display: block;
	}
	
	.grid_item_span_2 {
		grid-column: span 2;
	}
	.grid_item_span_3 {
		grid-column: span 3;
	}
	
	.grid_item h2 {
		margin-bottom: 45px;
	}
	


	.flint_section .content_box .flint_input_container {
		text-align: left;
	}


/*
	NAVIGATION
*/
	
	
	
	
	#periodont_top {
		
	}
	#periodont_top .flint_container {
		position: relative;
	}
	#periodont_top img#burger_menu_btn {
		position: fixed;
		right: 90px;
		top: 70px;
		background-color: #fff;
		1border: solid 1px #ccc;
		cursor: pointer;
	}
	
	#periodont_top #burger_menu_container {
		display: none;
		position: fixed;
		right: 90px;
		top: 70px;
		width: 400px;
	}
	#periodont_top #burger_menu_container.visible {
		display: block;
	}
	
	#periodont_top img#burger_menu_btn_close {
		float: right;
		cursor: pointer;
	}
	#popin_menu {
		background-color: var(--nav_bg_color);
		color: #fff;
		width: 300px;
		float: right;
		padding-bottom: 35px;
	}
	#flint_nav_container_popin {
		
	}
	#flint_nav_popin {
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-size: 24px;
		line-height: 36px;
		margin: 70px 40px 35px;
	}
	#flint_nav_popin li {
		
	}
	#flint_nav_popin li a {
		color: #fff;
	}
	
	#flint_nav_container_members {
		float: left;
		width: 100%;
		padding-right: 0px;
	}
	#flint_nav_members {
		list-style-type: none;
		margin: 0;
		padding: 0;
		font-size: 24px;
		line-height: 36px;
		margin: 0px 20px 35px;
		text-align: left;
	}
	#flint_flint_nav_membersnav_main li {
		display: block;
		padding: 0;
	}
	#flint_nav_members li a {
		padding: 20px;
		color: #fff;
	}


	

/*
	CONTENT
*/
	
	
	/* Top */
	
	#section_top {
		padding: 0;
	}
	
	#flint_logo {
		float: left;
		width: 175px;
		height: calc(var(--nav_height) - 35px);
		padding-top: 35px;
	}
	#flint_logo img {
		height: 100%;
	}
	
	#flint_nav_container_main {
		float: right;
		width: calc(100% - 175px);
		padding-right: 145px;
	}
	#flint_nav_main {
		list-style-type: none;
		font-size: 20px;
		1line-height: var(--nav_height);
		line-height: 1.4em;
		margin: 0;
		padding: 0;
		1margin-top: var(--nav_padding_h);
		margin-top: 100px;
		text-align: right;
	}
	#flint_nav_main li {
		display: inline;
		padding: 0;
	}
	#flint_nav_main li a {
		padding: 20px;
		color: var(--primary_color);
	}
	#flint_nav_main li a:hover {
		1background-color: var(--secondary_color);
		color: var(--secondary_color);
	}
	
	.btn_nav a {
		padding: 12px 24px !important;
		font-size: 20px;
	}
	
	
	/* Intro */
	
	#section_intro {
		padding-top: 50px;
		padding-bottom: 25px;
	}
	h1#periodont_intro {
		1font-size: 50px;
		1line-height: 60px;
		font-size: 25px !important;
		line-height: 30px !important;
		color: #3172D4;
		width: 70%;
	}
	#section_intro h1, #section_intro p {
		margin: 0;
	}
	
	/* NEWS + Events */
	
	#section_news {
		
	}
	
	
	/* Post Items */
	
	.flint_post {
		border-bottom: solid 1px #d5d5d5;
		margin-bottom: 90px;
	}
	img.featured_img {
		width: 100%;
		height: auto;
		padding-bottom: 35px;
	}
	.flint_post p {
		margin: 0 0 35px;
	}
	.flint_post .event_summary {
		font-weight: bold;
		padding-bottom: 25px;
	}
	.flint_post .news_date {
		color: #BDC1C7;
		padding-bottom: 25px;
	}
	a.post_read_more {
		background-image: url('img/read_more_arrow.svg');
		background-repeat: no-repeat;
		background-position: right;
		padding-right: 40px;
	}
	.button a.post_read_more {
		background-image: url('img/read_more_arrow_light.svg');
	}
	
	
	
	/* Newsletter */
	
	#section_newsletter h2 {
		text-align: center;
	}
	/*
	#section_newsletter input[type='text'] {
		width: 100%;
		padding: 20px;
		font-size: 22px;
		font-weight: bold;
		color: var(--font_color);
		border: none;
		border-bottom: solid 1px #343434;
	}
	*/
	
	/* EFP */
	
	#section_efp {
		background-color: #f5f5f5;
	}
	
	#logo_efp {
		padding-top: 50px;
	}
	
	
	/* Sign Up */
	
	#section_signup {
		background-color: #e6e6e6;
	}
	
	#section_signup h2 {
		text-align: center;
	}
	
	/* Sponsors */
	
	#section_sponsors .flint_container {
		position: relative;
		text-align: center;
	}
	#section_sponsors #sponsorbox {
		margin: 65px 0 0;
	}
	#section_sponsors #btn_top {
		position: absolute;
		bottom: -60px;
		right: 0px;
	}
	
	
	/* Bottom */
	
	#section_bottom {
		background-color: #F5F5F5;
	}
	#section_bottom .flint_container {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 50px;
	}
	#section_bottom ul {
		list-style-type: none;
		padding: 0;
		1margin: 0;
	}
	#section_bottom .grid_item {
		font-size: 20px;
		line-height: 34px;
	}
	#section_bottom #shortcuts a {
		color: #8D8F94;
	}
	#section_bottom #contact b {
		color: #275BAA;
	}
	
	


/*
	EVENTS
*/

	.event_grid {
		display: grid;
		1grid-template-columns: 65% 30%; gap: 5%;
		2grid-template-columns: 30% 65%; gap: 5%;
	}

	.event_infobox {
		background-color: #f6f6f6;
		padding: 20px;
		margin-bottom: 60px;
	}
	
	.event_infobox .btn_signup {
		margin: 60px 0 30px;
	}

/*
	BOTTOM
*/

	#flint_bottom {
		width: 100vw;
	}
	
	#bottombar {
		font-size: 16px;
		background-color: var(--footer-bg-color);
		padding: 30px;
		text-align: center;
		font-size: 0.8em;
	}
	
	#flint_footer_widgets {
		border-top: solid 1px #888;
		background-color: #fff;
	}
	#flint_sidebar_footer {
		display: grid;
		gap: var(--grid_gap);
		1grid-template-columns: repeat(var(--grid_cols), 1fr);
		grid-template-columns: repeat(var(--grid_cols), minmax(0, 1fr));
	}



/*
	STICKY FOOTER
*/
	
	body.flint_sticky_footer_flexbox {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	
	#flint_content.flint_sticky_footer_flexbox {
		flex: 1 0 auto;
	}
	
	#flint_bottom.flint_sticky_footer_flexbox {
		flex-shrink: 0;
	}

	




@media only screen and (max-width: 767px) {
	.desktop_only {
		display: none;
	}
	.mobile_only {
		display: block;
	}
	
	.event_grid {
		display: block;
	}
	
	h1#periodont_intro {
		font-size: 35px;
		line-height: 42px;
		width: 100%;
	}
	
	.grid_container {
		display: block;
		margin-bottom: 60px;
	}
	
	
	/* General */
	
	h1 {
		font-size: 36px;
		line-height: 48px;
	}
	
	.flint_container {
		width: calc(100vw - 40px);
	}
	
	#flint_logo {
		height: 125px;
		padding-top: 10px;
	}
	
	#section_bottom .flint_container {
		display: flex;
		flex-direction: column;
	}
	#section_bottom .flint_container .empty_grid_item {
		display: none;
	}
	
	
	/* Navigation */
	
	#periodont_top img#burger_menu_btn {
		right: 0px;
		top: 0px;
	}
	#periodont_top #burger_menu_container {
		right: 0px;
		top: 0px;
		width: 100vw;
		height: 100vh;
		background-color: var(--nav_bg_color);
		z-index: 9999999;
	}
	#periodont_top #burger_menu_container.visible {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	#periodont_top img#burger_menu_btn_close {
		float: none;
		position: absolute;
		top: 0;
		right: 0;
	}
	#popin_menu {
		text-align: center;
		width: 100%;
		height: 100%;
		float: none;
		padding-top: 60px;
	}
	
	#flint_nav_container_main {
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	#flint_nav_main {
		margin-top: 0px;
		text-align: center;
	}
	#flint_nav_main li {
		display: block;
		padding: 10px;
	}
	
}


@media only screen and (min-width: 768px) {
	.desktop_only {
		display: none;
	}
	.mobile_only {
		display: block;
	}
	
	.event_grid {
		grid-template-columns: 40% 55%; gap: 5%;
	}
	
	h1#periodont_intro {
		font-size: 40px;
		line-height: 48px;
		width: 90%;
	}
	
	.grid_container {
		display: block;
		margin-bottom: 60px;
		1display: grid;
		1grid-template-columns: 30% 30% 30%;
		1gap: 5%;
	}
	
	
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
	#flint_nav_container_main {
		float: none;
		width: 100%;
		padding-right: 0px;
	}
	#flint_nav_main {
		margin-top: 0px;
		text-align: left;
	}
	#flint_nav_main li {
		display: block;
		padding: 10px 40px;
	}
	
}


@media only screen and (min-width: 992px) {
	.desktop_only {
		display: block;
	}
	.mobile_only {
		display: none;
	}
	
	.event_grid {
		grid-template-columns: 30% 65%; gap: 5%;
	}
	h1#periodont_intro {
		font-size: 50px;
		line-height: 60px;
		width: 70%;
	}
	
	.grid_container {
		display: grid;
		grid-template-columns: 40% 25% 25%;
		gap: 5%;
	}
	
}





 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
}