/*  
Theme Name: Eucope
Theme URI: 
Description: Custom WP Theme for Eucope

Version: 2.0
Author: Oliver Hulisz	
Author URI:  http://72dpi.de/
*/


:root {

  --font-serif: 'Roboto Slab', 'Times New Roman', Times, serif;
  --font-copy: 'Open Sans', Verdana, Arial, sans-serif;
  --fontawesome: 'Font Awesome 5 Pro';

  --eu-blue: rgba(0,60,113); /* 003c71 */
  --eu-blue-30: rgba(0,60,113,.3);
  
  --eu-yellow: rgba(250,169,6); /* #faa906 */
  --eu-yellow-70: rgba(250,169,6,.7);
  --eu-yellow-50: rgba(250,169,6,.5);
  --eu-yellow-30: rgba(250,169,6,.3);
  --eu-yellow-20: rgba(250,169,6,.2);
  --eu-yellow-10: rgba(250,169,6,.1);
  
  --eu-lightgrey: rgba(245,245,245); /* #f5f5f5 */
  --eu-middlegrey: rgba(217,220,221); /* #D9DCDD */
  --eu-darktgrey: rgba(150,150,150); /* # */
  
  --eu-lineheight: 150%;

}


body {
	color: #333;
	font-family: var(--font-copy);
	font-size: 1rem;
	background-color: #fff;
	text-rendering: optimizeLegibility;
}
  img {
    max-width: 100%;
    height: auto;
  }
  a {
    color: var(--eu-blue);
    text-decoration: none;
  }
    a:hover {
      text-decoration: underline;
    }


/* grid
-------------------------------------------------------------------------------------------------- */
.wrap {
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

@media only screen and (max-width: 720px) {
	.hide-on-mobile {
		display: none;
	}
}


/* defaults
-------------------------------------------------------------------------------------------------- */
.eu-blue 				{ color: #003c71; }
.eu-bg-blue 		{ background-color: #003c71; }
.eu-yellow 			{ color: var(--eu-yellow); }
.eu-bg-yellow		{ background-color: var(--eu-yellow); }


/* navigation
-------------------------------------------------------------------------------------------------- */
.row-header {
  background-color: none;
  transition: all 0.2s ease-out 0s;
}

  .site-header {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: top;
    justify-content: space-between;
    width: 100%;
  }

.logo {
  width: 180px;
  transition: all 0.5s ease-out 0s;
}

.navigation {
  width: 100%;
  background: #fff;
}

.burger {
  text-decoration: none;
  margin-left: auto;
  margin: 0;
  padding: 0;
  line-height: 1;
}
  a.burger::before {
    display: inline-block;
    font-family: var(--fontawesome);
    content: "\f0c9";
    font-size: 2rem;
    padding: .3em 0;
    font-weight: 900;
  }
    a.burger.active::before {
      font-family: var(--fontawesome);
      content: "\f00d";
      font-weight: 900;
    }



@media(min-width: 900px) {

  .row-header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
  }
  .logo {
    width: 280px;
  }
  .navigation {
		order: 2;
		width: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    background: transparent;
	}
	.burger {
    display: none;
  }


  ul#globalnav > li a {
    font-size: 1.2rem;
  }
    ul#globalnav > li a span {
      display: block;
      font-size: .8rem;
    }

}
ul#globalnav > li a span {
  margin-right: .35rem;
}

/* Meta Menu
-------------------------------------------------------------------------------------------------- */
ul.metamenu  {
	display: flex;
  margin: .5rem 0;
	padding: 0;
	list-style: none;
  font-size: .75rem;
  text-transform: uppercase;
}
  ul.metamenu a {
    display: inline-block;
    margin-right: 5px;
    color: var(--eu-blue);
  }
  .metamenu li.current_page_item a,
  .metamenu li.current-menu-item a,
  body.single-post li.current_page_parent a,
  body.single-membersonly li#menu-item-40 a {
    font-weight: bold;
  }

@media(min-width: 800px) {
  .metamenu {
    float: right;
  }
  .metamenu li a {
    background: rgba(255,255,255,.7);
    padding: .15rem .4rem;
    margin: 0 1px;
    color: var(--eu-blue);
  }
   .metamenu li.current_page_item a,
   .metamenu li.current-menu-item a,
   body.single-post li.current_page_parent a,
   body.single-membersonly li#menu-item-40 a {
     font-weight: normal;
     color: rgba(250,169,6,1);
   }
}



/* Frontpage - Swiper Slider
--------------------------------------------------------------------------------------------- */
.swiper-container {
	width: 100%;
	max-height: 500px;
}
	.swiper-slide {
		text-align: center;
		font-size: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
		.swiper-pagination-bullet {
			background-color: #FAC400;
		}
    .swiper-pagination-bullet-active {
			background-color: #003C70;
		}

.swiper-button-prev,
.swiper-button-next {
    color: var(--eu-blue); 
}


/*Frontpage - Feature Boxes
-------------------------------------------------------------------------------------------------- */
.row-feature {
  position: relative;
  margin-top: -2rem;
  z-index: 2;
}
  .feature-box {
    box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
    background-color: rgba(236,179,4,.95);
    padding: 1rem 1rem .5rem 1rem;
    height: 100%;
  }
  .feature-box > * {
    margin-top: 0;
  }
  .feature-box h2 {
    margin-top: 0;
  }
  .feature-box p {
    font-size: .9rem;
		margin: .7rem 0;
  }

  @media screen and (min-width: 720px) {
    .row-feature {
      margin-top: -5rem;
    }
  }

.feature-box ul {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
	.feature-box ul li {
		position: relative;
		padding: 0 0 0 1em;
		margin: 0;
		list-style: none;
		line-height: 150%;
	}
		.feature-box ul li:before {
			position: absolute;
			top: .1em;
			left: 0;
			content: '\f054';
			font-family: var(--fontawesome);
			margin-right: .3em;
			font-size: .9em;
			color: var(--eu-blue);
		}


/* Frontpage Specials
-------------------------------------------------------------------------------------------------- */
.teaser-media-wrapper {
  margin: 1.5rem 0 0 0;
  display: flex;
  flex-direction: column;
}
  .teaser-media-wrapper aside  {
    position: relative;
    margin: 0 0 1.5rem 0;
    padding: 1.5rem 1.5rem 0 6rem;
    background-color: var(--eu-yellow-20);
    border-radius: .5rem;
    flex: 0 1 50%;
  }
    .teaser-media-wrapper aside i {
      position: absolute;
      left: 1rem;
      top: 2rem;
      font-size: 3rem;
      color: var(--eu-blue);
    }
    .teaser-media-wrapper h2 {
      margin-top: 0;
      font-size: 1.3rem;
    }

@media only screen and (min-width: 480px) {
  .teaser-media-wrapper {
    flex-direction: row;
  }
  .teaser-media-wrapper aside:first-child {
    margin-right: 2rem;
  }
}






/* rows
-------------------------------------------------------------------------------------------------- */
.row-content {
   margin-top: 2rem;
}
  body.home .row-content {
     margin-top: 1rem;
  }





/* Visuals
-------------------------------------------------------------------------------------------------- */
.hero-image {
  position: relative;
  margin: 0 auto;
}
 .hero-image img {
   margin: 0 auto;
   width: 100%;
   height: 220px;
   object-fit: cover;
   object-position: center center;
  }

  @media only screen and (min-width: 720px) {
    .hero-image img {
      height: 400px;
    }
  }
  @media only screen and (min-width: 1024px) {
    .hero-image img {
      height: 500px;
    }
  }




/* Typographie
-------------------------------------------------------------------------------------------------- */
h1, h2, h3, h4 {
	font-family: var(--font-serif);
  font-weight: 700;
	line-height: 135%;
	color: var(--eu-blue);
}
  article :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
  }
h1 {
  margin-top: 0;
  font-size: 1.3rem;
}
h2 {
  font-size: 1.1rem;
	font-weight: normal;
}
h3, h4 {
  font-size: 1rem;
	font-weight: normal;
}


@media (min-width: 720px) {
  h1 {
    font-size: 1.8rem;
  }
  h2 {
    font-size: 1.6rem;
  }
  h3 {
    font-size: 1.4rem;
  }
  h4,
  p.intro {
    font-size: 1.2rem;
  }  
}


h1 span,
h2 span {
  color: var(--eu-yellow);
}


p {
  margin: 1rem 0;
	line-height: var(--eu-lineheight);
}

	p.intro {
		margin: .5rem 0;
		color: var(--eu-yellow);
		font-size: 1.1rem;
    font-weight: 600;
	}
	p.type {
		margin: .5rem 0;
		color: var(--eu-yellow);
		text-transform: uppercase;
		letter-spacing: .05rem;
		font-size: .8rem;
	}
	p.type + h1,
	p.type + h2 {
		margin: 0 0 0 0;
	}
  p.meta  {
		margin: 0;
    padding: 0;
    font-size: .8rem;
    color: #999;
	}
  h3 + p.meta {
    margin-top: -.5rem;
  }

strong {
	font-weight: 700;
}

blockquote {
	margin: 0 0 2rem 0;
	padding-left: 1rem;
	border-left: .3rem solid #faa906;
	font-style: italic;
}



address {
	font-style: normal;
}

mark {
  background-color: var(--eu-yellow-30);
  padding: .1rem .3rem;
  color: var(--eu-blue);
}

hr {
	margin: 1rem 0;
	height: 1px;
	border-style: none;
	color: #ddd;
	background-color: #ddd;
}


aside.sidebar {
  border-top: 1px solid #ddd;
  padding-top: .5rem;
}
  aside.sidebar h3 {
    font-size: 1.3rem;
  }
  aside.sidebar h4 {
    margin-bottom: 0;
  }




/* News, Tags, Specials
-------------------------------------------------------------------------------------------------- */
article {
  margin: 0 0 1.5rem 0;
}


.mce ul {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
	.mce ul li {
		position: relative;
		padding: 0 0 .5rem 1rem;
		line-height: 150%;
	}
		.mce ul li:before {
			position: absolute;
			top: 0;
			left: 0;
			content: '\f054';
			font-family: var(--fontawesome);
			color: #faa906;
		}


article ol {
	margin: 1rem 0;
	padding: 0;
}
	article ol li {
		line-height: 150%;
		padding: 0 0 .5rem 1rem;
	}


ul.simple {
	margin: 1rem 0;
	padding: 0;
	list-style: none;
}
	ul.simple li {
		margin: .5rem 0;
		padding: 0;
	}


dl.showhide {
	margin: 1rem 0;
}
	dl.showhide dt {
		display: flex;
    border-top: 1px solid #ddd;
		padding: .5rem 0;
		position: relative;
		cursor: pointer;
		line-height: 145%;
		padding-right: 2rem;
    color: var(--eu-blue);
    font-size: 1.1rem;
}
		dl.showhide dt:after {
			font-family: var(--fontawesome);
			content: "\f078";
			position: absolute;
			right: .5em;
			top: .5em;
			color: var(--eu-blue);
		}
			dl.showhide dt.expanded {
				font-weight: bold;
			}
				dl.showhide dt.expanded:after {
					font-family: var(--fontawesome);
          content: "\f077 ";
				}

	dl.showhide dd {
		margin: 0;
		padding-right: 2em;
	}



/* Pseudo Elements */
.mce a.external {
	position: relative;
	margin-right: 1.5rem;
}
	.mce a.external:after {
		position: absolute;
		top: 0;
		right: -1.3rem;
		content: '\f08e';
		font-family: var(--fontawesome);
		color: #faa906;
	}

.mce a.mailto {
  position: relative;
  margin-left: 1.2rem;
}
  .mce a.mailto:before {
    font-family: var(--fontawesome);
    position: absolute;
    top: 0;
    left: -1.2rem;
    content: '\f0e0';
    color: #faa906;
  }




ul.downloads {
 margin: 0;
}
  ul.downloads li {
   padding: .2rem 0 .2rem 1.5rem;
  }
    ul.downloads li:before {
      font-family: var(--fontawesome);
      content: "\f019";
      margin-top: .2rem;
    }



.date-short {
	margin: 0 .5rem 0 0;
  font-size: .75rem;
	background-color: rgba(250,169,6,.8);
	padding: 0 .3rem;
	color: #fff;
  white-space: nowrap;
	text-transform: uppercase;
  font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", "monospace";
}

.filter-group {
  margin: 1rem 0;
  padding: 0;
  border: none;
}
  .filter-group legend {
    margin: 0 0 .5rem 0;
    text-transform: uppercase;
    font-size: .8rem;
  }

.category-select select {
  margin: 0 0 1.5rem 0;
  padding: .3rem;
  background-color: var(--eu-yellow-70);
  border: none;
  color: #fff;
}




ul.filter-by-cat {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
  ul.filter-by-cat li a {
    display: inline-flex;
    color: #fff;
    background-color: var(--eu-blue-30);
    padding: .3rem .5rem;
    margin: 0 .5rem .5rem 0;
    text-decoration: none;
    border-radius: 1rem;
  }
  ul.filter-by-cat li a:hover,
  ul.filter-by-cat li.current-cat a {
    background-color: var(--eu-blue);
  }



.posts-by-category {
  margin: 0 0 1.5rem 0;
  padding: 1rem;
  background-color: var(--eu-yellow-10);
}

.filter-result {
  display: inline-flex;
  margin: 0 0 1.5rem 0;
  padding: .5rem;
  background-color: var(--eu-lightgrey);
}
  .filter-reset {
    margin-left: .75rem;
    color: var(--eu-yellow);
  }
    .filter-reset:hover {
      color: var(--eu-blue);
    }




.tags {
	display: flex;
	flex-wrap: wrap;
  margin-bottom: 1rem;
}
  .single-tag,
  .tags a {
    display: inline-flex;
    color: #fff;
    background-color: var(--eu-yellow-50);
    padding: .2rem .5rem;
    margin: 0 .5rem .5rem 0;
    text-decoration: none;
    border-radius: 1rem;
  }
    .tags a:hover,
    .tags a.active-tag {
      background-color: var(--eu-yellow);
    }





/* Post Tags */
.post-tags a {
  display: inline-flex;
  margin: 0 1px 1px 0;
  padding: .3rem;
  background-color: var(--eu-yellow-70);
  font-size: .8rem;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  color: #fff;
}
  .post-tags a:hover {
    background-color: var(--eu-yellow);
  }


.tags-front a {
  background-color: rgba(255,255,255,.5);
  color: var(--eu-blue);
}
  .tags-front a:hover {
    color: #fff;
  }


@media only screen and (min-width: 1000px) {
  figure.large {
    margin-left: -3rem;
    margin-right: -3rem;
  }
}

img.alignleft {
  float: left;
  margin: 0 1.5rem 1rem 0;
}

img.alignright {
  float: right;
  margin: 0 0 1rem 1.5rem;
}


article.post img.size-thumbnail {
  max-width: 150px;
}


/* EUCOPE Staff
-------------------------------------------------------------------------------------------------- */
.staff-group {
  margin-bottom: 2.5rem;
}

.card-stuff {
  padding: 1rem 0 0 0;
  border-top: 1px solid #ddd;
}
  figure.portrait img {
    margin-bottom: 1rem;
    width: 6rem;
    border-radius: .3rem;
  }
  .card-stuff div hgroup * {
    margin: 0;
  }
  .bio {
    margin-top: 1rem;
    line-height: var(--eu-lineheight);  
  }
  /* Profile Links */
  .card-profile {
    display: flex;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
  }
    .card-profile li {
      margin-right: 1rem;
    }
    .card-profile li i {
      color: var(--eu-yellow-70);
    }

@media (min-width: 720px) {
  .card-stuff {
    display: flex;
  }
    .card-stuff figure {
      flex: 0 1 15%;
      margin-right: 1.5rem;
    }
    .card-stuff div {
      flex: 0 1 85%
    }
  .card-profile {
    display: flex;
  }

}

/* styling buttons */
.show-more-btn {
  margin: auto;
  cursor: pointer;
  color: var(--eu-yellow);
  white-space: nowrap;
  transition: color 300ms ease-in-out;
  border: 0;
  background: transparent;
}
  .hidden {
    display: none;
  }

/* EUCOPE Member Logos
-------------------------------------------------------------------------------------------------- */
figure.member {
  margin: 0 .5rem .5rem 0;
  border: .5rem solid white;
  position: relative;
}
  figure.member:hover {
    z-index: 1;
}
  figure.member img {
    display: block;
    width: 100%;
  }

p.member-title {
  font-size: .8rem;
}


.status-public {
	display: inline-block;
	font-size: .7rem;
	padding: .1rem .3rem;
	background-color: #92d400;
	color: #fff;
	text-transform: uppercase;
}
.status-private {
	display: inline-block;
	font-size: .7rem;
	padding: .1rem .3rem;
	background-color: #CB0E0E;
	color: #fff;
	text-transform: uppercase;
}

.has-shadow {
  -webkit-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
  box-shadow: 0px 0px 3px 0px rgba(0,0,0,0.1);
}
  .has-shadow:hover {
    -webkit-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .15);
    -moz-box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .15);
    box-shadow: 0px 0px 3px 3px rgba(0, 0, 0, .15);
  }



.infobox {
  margin: 0 0 2rem 0;
  background-color: var(--eu-yellow-30);
  padding: 1rem;
}
  .infobox > p {
    margin: 0;
  }


/* Footer
---------------------------------------------------------------------------------------- */
.row-footer {
	margin-top: 2rem;
	background: #ededed;
}

ul.social {
  display: flex;
  margin: 1rem 0;
  padding: 0;
  list-style: none;
}
  ul.social li {
    display: inline;
    font-size: .75rem;
  }
    .linkedin-color {
      color: #0077b5;
    }
    .twitter-color {
      color: #1da1f2;
    }
    .youtube-color {
      color: #FF0000;
    }
    .rss-color {
      color: #ff8c00;
    }


.row-admin ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
  .row-admin li {
    margin: .3rem 0;
  }


/* Buttons
---------------------------------------------------------------------------------------- */
.btn {
  display: inline-block;
	border: none;
  background-color: var(--eu-yellow);
  padding: .3rem .75rem;
  color: #fff;
  cursor: pointer;
  text-decoration: none !important;
}
  .btn:hover{
    box-shadow: 0 0 3px rgba(0,0,0,.30);
  }
  .btn-blue {
    background-color: var(--eu-blue);
  }


input[type=submit] {
  padding: .5rem 1rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: .1rem;
  font-size: .9rem;
  border: none;
  background: var(--eu-middlegrey);
  cursor: pointer;
}
  input[type=submit]:hover {
    box-shadow: 0 0 0 rgba(0,0,0,0);
    background-color: #CBCFD0;
  }



a.post-edit-link {
  text-decoration: none;
  color: var(--eu-middlegrey);
}
  a.post-edit-link:hover {
    color: var(--eu-darkgrey);
  }


.browse {
  margin: 1.5rem 0;
  display: flex;
  align-items: center;
}
  .browse a {
    color: var(--eu-yellow);
  }
  .browse div {
    display: flex;
    flex: 1;
    padding: 1rem;
    justify-content: center;
    align-items: center;
  }
    .browse div:first-child {
      justify-content: flex-start;
    }
    .browse div:last-child {
      justify-content: flex-end;
    }
  .browse div i {
    font-size: 2rem;
  }



/* forms
---------------------------------------------------------------------------------------- */

.global-search {
  display: flex;
}



fieldset {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid #ededed;
}

dl.cform {
	margin: 0;
	padding: 0;
}
	dl.cform dt {
		margin: 1rem 0 0 0;
		padding: 0;
	}
	dl.cform dd {
		margin: .5rem 0 0 0;
		padding: 0;
	}
label {
	display: block;
	font-size: .9rem;
}

input[type=text],
input[type=email],
input[type=password],
textarea {
	width: 100%;
	padding: .5rem;
	color: #333;
	background: #f5f5f5;
	border: 3px solid #D9DCDD;
}

textarea {
	min-height: 14em;
}

.screen-reader-response {
	display: none;
}
.wpcf7-response-output {
  font-weight: bold;
  color: var(--eu-blue);
}

	.wpcf7-not-valid-tip {
		margin-top: .3rem;
    display: block;
		color: var(--eu-blue);
	}
	input[type=text].wpcf7-not-valid,
	input[type=email].wpcf7-not-valid,
	input[type=password].wpcf7-not-valid,
	textarea.wpcf7-not-valid {
		border: 3px solid #003C72;
	}

.wpcf7-mail-sent-ok {
	background: #ECB304;
	padding: .5em;
	-webkit-border-radius: 3px; /* Safari */
	-moz-border-radius: 3px; /* Firefox */
	border-radius: 3px; /* default */
}


/* cf7 loading dots
------------------------------------------------------- */
.wpcf7 .wpcf7-spinner {
	display: none;
}
  .wpcf7 form.submitting .wpcf7-spinner {
    display: block;
    margin: 1rem 0 0 0;
    width: 100%;
    height: .75rem;
    background-image: url(svg/loading-dots.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
  }


/* Mailchimp Newsletter
---------------------------------------------------------------------------------------- */
.newsletter-container {
  border-radius: 1rem;
  overflow: hidden;
}
  .newsletter-container header {
    background-color: var(--eu-yellow);
    padding: .5rem 1.5rem;
  }
    .newsletter-container header h2 {
      color: #fff;
    }
  .newsletter-container .inner {
    padding: .5rem 1.5rem;
    background-color: #ffF;
  }


/*
 * WP-Paginate - WordPress Pagination Function
 * Revision: $Id: wp-paginate.css 1044618 2014-12-14 23:43:29Z emartin24 $
 * Copyright 2014 Studio Fuel (http://www.studiofuel.com)
 */
.wp-paginate {padding:0; margin:0; text-align: center;}
.wp-paginate li {display:inline; list-style:none;}
.wp-paginate a {background: #FAA906; color:#fff; margin-right:4px; padding:4px 8px; text-align:center; text-decoration:none;}
.wp-paginate a:hover, .wp-paginate a:active {background: #00294D; color:#fff;}
.wp-paginate .title {color:#555; margin-right:4px;}
.wp-paginate .gap {color:#999; margin-right:4px;}
.wp-paginate .current {color:#fff; background: #00294D; margin-right:4px; padding:4px 8px;}
.wp-paginate .page {}
.wp-paginate .prev, .wp-paginate .next {}

/* style overrides for comments pagination */
.wp-paginate-comments {}
.wp-paginate-comments li {}
.wp-paginate-comments a {}
.wp-paginate-comments a:hover, .wp-paginate-comments a:active {}
.wp-paginate-comments .title {}
.wp-paginate-comments .gap {}
.wp-paginate-comments .current {}
.wp-paginate-comments .page {}
.wp-paginate-comments .prev, .wp-paginate-comments .next {}

ol.wp-paginate li {
	line-height: 3em;
  /*white-space: nowrap;*/
}



/* Dirty Little Helpers
-------------------------------------------------------------------------------------------------- */
/* hide Google Recaptcha badge */
body:not(.page-id-29) .grecaptcha-badge {
	display: none;
}

.map {
	width: 100%;
	height: 500px;
}


.mfp-bg {
	background: rgba(0,60,114,1);
	opacity: .9;
}

.shariff {
	margin: 1rem 0;
}
	.shariff .shariff-buttons li {
		margin: 0 !important;
	}