/*
Theme Name: na-mdl
Theme URI: http://www.na-media.com
Author: Marco Herzog
Author URI: http://www.marcoherzog.com
Description: Material Design Lite Basic Wordpress Theme
Version: 0.1
License:
License URI:
Tags:
Text Domain: na
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Normalize
2.0 Accessibility <
3.0 Alignments <
4.0 Clearings
5.0 Typography
6.0 Forms
7.0 Formatting
8.0 Lists
9.0 Tables
10.0 Links <
11.0 Featured Image Hover
12.0 Navigation
13.0 Layout / na-bordered-content
   13.1 Header
   13.2 Front Page
   13.3 Regular Content
   13.4 Posts <
   13.5 Pages
	 13.5.1 Sectional Pages
	 13.5.2 Sideimage Pages
   13.6 Footer
	 13.7 Search < added
14.0 Comments < raw copied, not edited yet
14.1 Social Sharing < added
15.0 Widgets
16.0 Media
   16.1 Galleries
17.0 Customizer
18.0 SVGs Fallbacks
19.0 Media Queries
20.0 Print
--------------------------------------------------------------*/



/*--------------------------------------------------------------
2.0 Accessibility
--------------------------------------------------------------*/

/* Text meant only for screen readers. */

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000; /* Above WP toolbar. */
}

/*--------------------------------------------------------------
3.0 Alignments
--------------------------------------------------------------*/

.alignleft {
	display: inline;
	float: left;
	margin-right: 1.5em;
}

.alignright {
	display: inline;
	float: right;
	margin-left: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/*--------------------------------------------------------------
6.0 Forms
--------------------------------------------------------------*/

.content-area .mdl-textfield {
	width:100%;
}

/*--------------------------------------------------------------
6.1 Contact Form 7
--------------------------------------------------------------*/

.wpcf7-form-control-wrap {
  width: 100%;
  display: block;
}
span.wpcf7-not-valid-tip {
	font-size: 0.8em;
	position: absolute;
	display: block;
	width: 100%;
}
div.wpcf7-validation-errors {
	width: 100%;
  max-width: 640px;
  margin: 0 auto;
  background-color: #FFF9C4;
  padding: 16px;
  border-radius: 2px;
  color: #212121;
	border: none;
}
span.wpcf7-list-item {
	display: block;
	margin: 0 0 0.25em 1em;
	text-indent: -1.2em;
}

/* following sectional pages with fixed background have problems in chrome */
.inv-recaptcha-holder {
	z-index: 1;
  position: relative;
}


/*--------------------------------------------------------------
10.0 Links
--------------------------------------------------------------*/

a {
	text-decoration: none;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
  opacity: 0.8;
}

/*--------------------------------------------------------------
12.0 Navigation
--------------------------------------------------------------*/


.mdl-layout__header {
  align-items:center;
  background-repeat: no-repeat;
  background-size: cover;
  /*max-height: calc(100vh - 64px);
  max-height: 50vh;
  min-height: 64px;*/
  background-position: left center;
  background-attachment: fixed;
}
.mobile-browser .mdl-layout__header {
	background-attachment: scroll;
}

.na-no-header-scroll .mdl-layout__header {
	padding-right: 15px; /* shift content vertical scrollbar of content */
}
.mdl-layout__header--waterfall.is-casting-shadow {
	position: relative;
}
.mdl-layout__header-row {
  width: 100%;
  align-self: auto;
  -webkit-align-self: auto;
  -ms-flex-item-align: auto;
	padding: 0 16px 0 48px;
}
.mdl-layout--no-desktop-drawer-button .mdl-layout__header-row {
	padding-left: 16px;
}
.mdl-layout__header-row.navigation-top-secondary-row {
	padding-left: 16px;
}
.has-header-image .navigation-top-primary-row {
	min-height: calc(100vh - 64px); /* full height incl. secondary navi */
  min-height: 200px;
  justify-content: center;
}
.has-header-image .is-compact .navigation-top-primary-row {
  min-height: auto;
}
.navigation-top-primary-row-active .navigation-top-primary-row {
	justify-content: flex-start;
}
.navigation-top-primary-hidden-if-compact .navigation-top-primary-row,
.navigation-top-only-secondary .navigation-top-primary-row {
	justify-content: center;
}
.navigation-top-primary-hidden-if-compact .is-compact .navigation-top-primary-row {
	justify-content: flex-start;
}
.navigation-top-primary-row .mdl-layout-spacer,
.navigation-top-only-secondary .mdl-layout-spacer {
  display: none;
}
.navigation-top-primary-row-active .navigation-top-primary-row .mdl-layout-spacer {
  display: block;
}
.navigation-top-primary-hidden-if-compact .navigation-top-primary-row .mdl-layout-spacer {
  display: none;
}
.navigation-top-primary-hidden-if-compact .is-compact .navigation-top-primary-row .mdl-layout-spacer {
  display: block;
}
.has-header-image .navigation-top-primary-row .mdl-navigation {
  align-self: flex-end;
}
.navigation-top-both-menus-seperate .navigation-top-primary-row .mdl-navigation {
  align-self: flex-start;
}
.navigation-top-primary-hidden-if-compact .navigation-top-primary-row .mdl-navigation {
  display: none;
}
.navigation-top-primary-hidden-if-compact .is-compact .navigation-top-primary-row .mdl-navigation {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

.has-header-image .mdl-layout-title {
	align-self: flex-start;
}

.custom-logo-link img {
	max-height: 64px;
	width: auto;
}
.has-header-image .custom-logo-link img {
	max-height: 200px;
}
.has-header-image .is-compact .custom-logo-link img {
	max-height: 64px;
}

.navigation-top-secondary-row {
  justify-content: center;
}
.navigation-top-secondary-row .mdl-layout-spacer {
  display: none;
}

#drawer-nav .current-menu-item {
/*color: red !important;*/
}
.navigation-top-primary-row .current-menu-item {
/*color: red !important;*/
}
.navigation-top-secondary-row .current-menu-item {
border-bottom: 3px solid #fff;
line-height: 58px !important;
border-top: 3px solid transparent;
}

.mdl-layout__drawer .custom-logo-link {
	display: block;
	text-align: center;
	padding-right: 16px;
	padding-top: 16px;
}


@media (max-width:1024px) {

  .mdl-layout__header-row {
    align-self: auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    max-width: none !important;
    padding-left: 16px;
    justify-content: center !important;
  }
  .navigation-top-secondary-row {
    display: none;
  }
  .navigation-top-primary-row .mdl-navigation {
    display: none !important;
  }
  .navigation-top-primary-row .mdl-layout-spacer {
    display: none !important;
  }
  .custom-logo-link img {
  	max-height: 56px;
  }
  .has-header-image .is-compact .custom-logo-link img {
  	max-height: 56px;
  }

}

/* Uses a header that contracts as the page scrolls down. */
.mdl-layout__header-row.navigation-top-primary-row .mdl-navigation__link:last-of-type  {
  padding-right: 0;
}

/*--------------------------------------------------------------
12.1 Breadcrumbs
--------------------------------------------------------------*/

.breadcrumbs {
	list-style: none;
  padding: 0 16px 16px;
  display: block;
  width: 100%;
  margin: 16px 0 -2rem;
	font-size: 0.9rem;
}
.breadcrumbs > li {
	display: inline-block;
	padding-left: 0.35em;
}
.breadcrumbs > li:first-of-type {
	padding-left: 0;
}
.breadcrumbs > li::before {
	content: '\00bb';
	padding-right: 0.35em;
}
.breadcrumbs > li:first-of-type::before {
	content: '';
	padding-right: 0;
}


/*--------------------------------------------------------------
13.0 Layout
--------------------------------------------------------------*/

/* necessary for scrollspy to work
 * https://stackoverflow.com/a/15890945/874048
 */
body {
	height: 100%;
}
*:focus {
    outline: none;
}
.na-no-header-scroll .site-content-contain {
	overflow-y: scroll;
}

.blog.na-content-not-bordered:not(.has-sidebar) .page-wrap,
.archive.na-content-not-bordered:not(.has-sidebar) .page-wrap {
max-width: 100% !important;
}
.blog.na-content-not-bordered:not(.has-sidebar) .page-content,
.archive.na-content-not-bordered:not(.has-sidebar) .page-content {
padding: 0;
}
.blog.na-content-not-bordered:not(.has-sidebar) .page-content>.mdl-cell,
.archive.na-content-not-bordered:not(.has-sidebar) .page-content>.mdl-cell {
margin: 0;
width: 100%;
}
.blog.na-content-not-bordered:not(.has-sidebar) .page-header,
.archive.na-content-not-bordered:not(.has-sidebar) .page-header {
margin-right: auto;
margin-left: auto;
padding-left: 16px;
padding-right: 16px;
}
.blog.na-content-bordered .page-header,
.archive.na-content-bordered .page-header {
max-width: 100% !important;
}
.blog.na-content-not-bordered:not(.has-sidebar) .post,
.archive.na-content-not-bordered:not(.has-sidebar) .post {
display: flex;
}
.blog.na-content-not-bordered:not(.has-sidebar) .post-wrap,
.archive.na-content-not-bordered:not(.has-sidebar) .post-wrap {
margin-right:auto;
margin-left:auto;
width: 100%;
padding-right: 16px;
padding-left: 16px;
}

.single.na-content-not-bordered:not(.has-sidebar) .page-wrap {
max-width: 100% !important;
}
.single.na-content-not-bordered:not(.has-sidebar) .page-content {
padding: 0;
}
.single.na-content-not-bordered:not(.has-sidebar) .page-content>.mdl-cell {
margin: 0;
width: 100%;
}
.single.na-content-not-bordered:not(.has-sidebar) .post {
padding: 16px;
}
.single.na-content-not-bordered:not(.has-sidebar) .post-wrap {
margin-right:auto;
margin-left:auto;
width: 100%;
}

.page-template-page-sectional .page-wrap,
.page-template-page-sectional-navi .page-wrap {
max-width: 100% !important;
}
.page-template-page-sectional.na-content-bordered .page-content,
.page-template-page-sectional-navi.na-content-bordered .page-content {
background-color: transparent;
margin-top: 0;
margin-bottom: 0;
border-radius: 0;
box-shadow: none;
}
.page-template-page-sectional .page-content,
.page-template-page-sectional-navi .page-content {
padding: 0;
}
.page-template-page-sectional .page-content>.mdl-cell,
.page-template-page-sectional-navi .page-content>.mdl-cell {
margin: 0;
width: 100%;
}
.page-template-page-sectional .page,
.page-template-page-sectional-navi .page {
}
.page-template-page-sectional .post-wrap,
.page-template-page-sectional-navi .post-wrap {
margin-right:auto;
margin-left:auto;
width: 100%;
padding: 16px;
box-sizing: border-box;
}

.mdl-tabs .mdl-tabs__tab.current-menu-item {
  color: rgba(0,0,0,.87);
}
.mdl-tabs .mdl-tabs__tab.current-menu-item:after {
  height: 2px;
  width: 100%;
  display: block;
  content: " ";
  bottom: 0;
  left: 0;
  position: absolute;
  background: rgb(96,125,139);
  -webkit-animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
  animation: border-expand .2s cubic-bezier(.4,0,.4,1).01s alternate forwards;
  transition: all 1s cubic-bezier(.4,0,1,1);
}


/**
affix
*/
.affix-top {
}
.affix {
	position: fixed;
}
.na-header-scroll .affix {
	top: 0px;
}
.na-no-header-scroll .affix {
	top: 56px;
}
.affix-bottom {
	position: absolute;
	top: auto !important;
  align-self: flex-end;
  padding-bottom: 2em;
/*
	position: relative !important;
	top: auto !important;
	left: auto !important;
*/
}



/*--------------------------------------------------------------
13.3 Regular Content
--------------------------------------------------------------*/

.page-wrap {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-flow: row wrap;
-ms-flex-flow: row wrap;
flex-flow: row wrap;
margin: 0 auto;
-webkit-align-items: stretch;
-ms-flex-align: stretch;
align-items: stretch;
}
.page-content {
	width: 100%;
	color: rgba(0,0,0,0.87);
	-webkit-font-smoothing: antialiased;
}
.na-content-bordered .page-content {
  background-color: #fff;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
}


/*--------------------------------------------------------------
13.4 Posts
--------------------------------------------------------------*/

.byline,
.cat-links,
.tags-links {
  margin: 0 0 16px;
  display: block;
  margin: 0 0 16px;
}

.posted-on,
.updated-on {
}
.cat-links,
.tags-links {
  display: block;
  text-indent: -14px;
  padding-left: 27px;
}
.cat-links .material-icons,
.tags-links .material-icons {
  vertical-align: middle;
}
.edit-link::before {
  content: ' ';
  display: block;
}



.byline,
.updated:not(.published) {
}

.blog .entry-meta a.post-edit-link,
.archive .entry-meta a.post-edit-link,
.search .entry-meta a.post-edit-link {
	display: inline-block;
	margin-left: 1em;
	white-space: nowrap;
}

.search .page .entry-meta a.post-edit-link {
	margin-left: 0;
	white-space: nowrap;
}

.pagination {
  text-align: center;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.pagination .mdl-button {
  min-width: 32px;
}
.pagination .mdl-button.dots {
  min-width: 16px;
  padding: 0;
}
.comments-pagination {
  text-align: left;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.comments-pagination .mdl-button {
  min-width: 32px;
}
.comments-pagination .mdl-button.dots {
  min-width: 16px;
  padding: 0;
}

/* Posts and Post Navigation */

.posts-navigation {
  margin-top: 5rem;
}
.post-navigation {
  margin: 2rem 0;
}
.nav-subtitle {
display: none;
}
.posts-navigation .nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: flex-start;
}
.post-navigation .nav-links {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}
.nav-links .nav-previous .nav-title .nav-title-icon-wrapper .material-icons,
.nav-links .nav-next .nav-title .nav-title-icon-wrapper .material-icons {
  vertical-align: middle;
}


/*--------------------------------------------------------------
13.5.1 Sectional Pages
--------------------------------------------------------------*/

.page.page-content-above-bg {
    min-height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}
.panel-image {
    height: 100vh;
    max-height: 1200px;
}
/* With panel images 100% of the screen height, we're going to fix the background image where supported to create a parallax-like effect. */
.page.page-content-above-bg,
.panel-image {
    background-attachment: fixed;
}
/* only for retina browsers */
/* background images not displayed on retina screens if fixed */
/*
@media screen and (-webkit-min-device-pixel-ratio:2) {
	.page.page-content-above-bg,
	.panel-image,
	.page.page-content-above-bg:before,
	.panel-image:before {
        background-attachment: scroll !important;
    }
}
*/

.mobile-browser .page.page-content-above-bg,
.mobile-browser .panel-image:
.mobile-browser .page.page-content-above-bg:before,
.mobile-browser .panel-image:before {
    background-attachment: scroll;
}

.panel-image {
    background-position: center center;
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
    position: relative;
}
.page.page-content-above-bg:before,
.panel-image:before {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.3+100 */ /* FF3.6-15 */
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* Chrome10-25,Safari5.1-6 */
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.3)));
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0); /* IE6-9 */
    bottom: 0;
    content: "";
    left: 0;
    right: 0;
    position: absolute;
    top: 100px;
}
/*--------------------------------------------------------------
13.5.2 Sideimage Pages
--------------------------------------------------------------*/

.page.sideimage .image-area {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center top;
    min-height: 700px;
}
@media screen and (max-width: 1024px) {

    .page.sideimage .image-area {
        min-height: 350px;
    }

}

/*--------------------------------------------------------------
13.6 Footer
--------------------------------------------------------------*/

.mdl-mega-footer__bottom-section,
.mdl-mega-footer__middle-section,
.mdl-mega-footer__top-section {
  margin:0 auto;
}

.mdl-mega-footer__left-section a {
  display: inline-block;
  margin-bottom: 16px;
  color: inherit;
  text-decoration: none;
  line-height: 36px;
  vertical-align: middle;
  margin-right: 16px;
}

.mdl-mini-footer__right-section a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  margin-right: 16px;
  line-height: 36px;
}
.mdl-mini-footer__right-section a:last-of-type {
  margin-right: 0;
}
.site-footer .mdl-grid {
  padding-right: 0;
  padding-left: 0;
}
.mdl-mini-footer .mdl-grid {
  width: 100%;
}
.mdl-mini-footer .wrap {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 auto;
  width: 100%;
}
.site-footer .mdl-grid > .mdl-cell--12-col {
  margin-left: 0;
  width: calc(100% - 8px);
}

@media (min-width:840px) {

  .site-footer .mdl-grid > .mdl-cell--3-col {
    margin-left: 0;
    width: calc(24% - 8px);
  }
  .site-footer .mdl-grid > .mdl-cell--6-col {
    margin-left: 0;
    width: calc(48% - 8px);
  }
  .mdl-mini-footer .mdl-grid > .mdl-cell--3-col {
    margin-left: 0;
    width: calc(25% - 8px);
  }
  .mdl-mini-footer .mdl-grid > .mdl-cell--6-col {
    margin-left: 0;
    width: calc(50% - 8px);
  }

}
@media (min-width:480px) and (max-width:839px) {

  .site-footer .mdl-grid > .mdl-cell--4-col-tablet {
    margin-left: 0;
    width: calc(50% - 8px);
  }

}
@media (max-width:479px) {

  .site-footer .mdl-grid > .mdl-cell--4-col-phone {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

}

/*--------------------------------------------------------------
13.7 Search
--------------------------------------------------------------*/

.navi-search.is-focused + .mdl-navigation {
	/*opacity: 0;*/
	display: none;
}
.mdl-layout__drawer .search-form {
	display: flex;
	padding: 16px 40px;
}
.mdl-layout__drawer .search-form .mdl-textfield {
	padding-bottom: 0;
}
.mdl-layout__drawer .search-form .mdl-textfield__label:after {
	bottom: 0;
}
@media screen and (max-width: 1024px) {

	.mdl-layout__drawer .search-form {
	    padding: 16px;
	}

}

/*--------------------------------------------------------------
14.0 Comments
--------------------------------------------------------------*/

#comments {
}
.comments-title {
	font-size: initial;
	border-bottom: 1px solid #e4e6e8;

}
ol.comment-list,
ol.comment-list ol {
	list-style-type: none;
}
ol.comment-list {
	padding-left: 0;
}
.comment-list > li {
border-bottom: 1px solid #e4e6e8;
padding-bottom: 2rem;
padding-top: 2rem;
}
.comment-list > li:first-of-type {
padding-top: 0;
}
.comment-list ol {
margin-top: 1rem;
}
.comment-list ol li {
padding: 1rem;
padding-right: 0;
border-top: 1px solid #e4e6e8;
}
.comment {
}
.comment-body {
}

.comment-footer {
display: flex;
justify-content: space-between;
align-items: flex-start;
align-content: flex-start;
}
.comment-functions {

}
/* if has_children*/
.comment-list .parent > .comment-footer .comment-meta {
background: #f9f9f9;
padding: 0.5rem;
border-radius: 5px;
border: 1px solid #e4e6e8;
}
.comment-reply-link,
.comment-edit-link,
.comment-time,
.comment-author {
color: #848d95;
font-size: 13px;
padding-right: 0.5em;
}
.comment-author:not(.vcard) {
padding-right: 0;
padding-left: 0.5em;
border-left: 1px solid #848d95;
}
.comment-awaiting-moderation {
font-style: italic;
background-color: #FFF9C4;
padding: 1em;
border-radius: 2px;
}
/* changes below */
.comment-form {
	max-width: 800px;
}



/*--------------------------------------------------------------
14.1 Social Sharing
--------------------------------------------------------------*/
.social-sharing {
	list-style: none;
	padding: 0;
}
.social-sharing-link {
	display: inline-block;
}
.social-sharing-link > a {
	display: block;
	margin-right: 6px;
	width: 50px;
	height: 50px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #ddd;
}
.social-sharing-link.linkedin > a {
	background-image: url('assets/images/icon-linkedin.png');
}
.social-sharing-link.facebook > a {
	background-image: url('assets/images/icon-facebook.png');
}
.social-sharing-link.twitter > a {
	background-image: url('assets/images/icon-twitter.png');
}
.social-sharing-link.google > a {
	background-image: url('assets/images/icon-googleplus.png');
}
.social-sharing-link.pinterest > a {
	background-image: url('assets/images/icon-pinterest.png');
}
.social-sharing-link.whatsapp > a {
	background-image: url('assets/images/icon-whatsapp.png');
}
.social-sharing-link.email > a {
	background-image: url('assets/images/icon-mail.png');
}



/*--------------------------------------------------------------
16.0 Media
--------------------------------------------------------------*/

img,
video {
	height: auto; /* Make sure images are scaled correctly. */
	max-width: 100%; /* Adhere to container width. */
}

img.alignleft,
img.alignright {
	float: none;
	margin: 0;
}

.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure embeds and iframes fit their containers. */

embed,
iframe,
object {
	margin-bottom: 1.5em;
	max-width: 100%;
}



/*--------------------------------------------------------------
16.1 Galleries
--------------------------------------------------------------*/
.gallery {
}
.gallery .mdl-card__title {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: top center;
	min-height: 120px;
	padding: 0;
}
.gallery .mdl-card__title > a {
	flex-grow: 1;
	align-self: stretch;
}
.gallery .mdl-card__supporting-text {
  width: auto;
}


/* CSS Animations */
.fade-in {
  opacity: 0;
}

.fade-in:not(.start-animation) {
  .animation(none)
}

.start-animation {
  animation-name: wpb_btt;
	animation-duration: 0.7s;
	/*animation-iteration-count:1;*/
	animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
}

.wpb_appear, .appear {
  .animation(wpb_appear 0.7s 1 cubic-bezier(0.175, 0.885, 0.320, 1.275));
  .scale(1);
}

.fade-in.start-animation {
  opacity: 1;
}

/* Bottom to top keyframes */
@-webkit-keyframes wpb_btt {
  0% {
    -webkit-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -webkit-transform: translate(0, 0);
    opacity: 1;
  }
}

@-moz-keyframes wpb_btt {
  0% {
    -moz-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -moz-transform: translate(0, 0);
    opacity: 1;
  }
}

@-o-keyframes wpb_btt {
  0% {
    -o-transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    -o-transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes wpb_btt {
  0% {
    transform: translate(0, 10%);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

/* Preloader */
 #preloader {
  height: 100%;
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 10000;
  overflow: hidden;
}
.no-js #preloader {
	display: none;
}
.loader {
  height: 20px;
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.loader--dot {
  animation-name: loader;
  animation-timing-function: ease-in-out;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background-color: black;
  position: absolute;
  border: 2px solid white;
}
.loader--dot:first-child {
  background-color: #8cc759;
  animation-delay: 0.5s;
}
.loader--dot:nth-child(2) {
  background-color: #8c6daf;
  animation-delay: 0.4s;
}
.loader--dot:nth-child(3) {
  background-color: #ef5d74;
  animation-delay: 0.3s;
}
.loader--dot:nth-child(4) {
  background-color: #f9a74b;
  animation-delay: 0.2s;
}
.loader--dot:nth-child(5) {
  background-color: #60beeb;
  animation-delay: 0.1s;
}
.loader--dot:nth-child(6) {
  background-color: #fbef5a;
  animation-delay: 0s;
}
.loader--text {
  position: absolute;
  top: 200%;
  left: 0;
  right: 0;
  width: 4rem;
  margin: auto;
}
.loader--text:after {
  content: "Loading";
  font-weight: bold;
  animation-name: loading-text;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@keyframes loader {
  15% {
    transform: translateX(0);
  }
  45% {
    transform: translateX(230px);
  }
  65% {
    transform: translateX(230px);
  }
  95% {
    transform: translateX(0);
  }
}
@keyframes loading-text {
  0% {
    content: "Loading";
  }
  25% {
    content: "Loading.";
  }
  50% {
    content: "Loading..";
  }
  75% {
    content: "Loading...";
  }
}