@charset "utf-8";

@font-face {
  font-family: 'mufi-med';
  src:  url('mufi-med.woff2') format('woff2'),
        url('mufi-med.woff') format('woff');
}

body { 
	font-family: 'Open Sans', sans-serif;
}

.white{
	color: #fff;
}

.float{
	position:fixed;
	width:40px;
	height:40px;
	bottom:5.4rem;
	right:3.3rem;
	background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(223, 239, 255, 0.1));
	background-color: rgba(0, 0, 0, 0.1);
	color:#FFF;
	border-radius:20px;
	text-align:center;
	box-shadow: 0px 0px 2px rgba(255, 255, 255, 1);
}

.my-float{
	margin-top:10px;
}

.item-at{
	color: rgb(30,100,255);
}

.item-q{
	color: rgb(255,30,0);
}

.pos-herotxt {
	margin-left:5.3rem;
	margin-top:6rem;
}

.obj-wrap{
	background-color: #f7f707;
}

.worsted{
	background-color: #9a9790;
}

.nearblack{
	background-color: #070709;
}

.p-mal{
	padding-top:7rem;
}
@media (max-width: 480px){
	.p-mal{
		padding-top:11rem;
	}
}

/*----------------------
 	cards
----------------------*/

.card {
	line-height: 1.25rem;
	font-size: 0.75rem;
//	padding-right: 1.75rem;
//	margin-bottom: 1.5rem;
//	min-width: 275px;
//	width: 100%;
//	flex-grow: 1;
}

.texteinzug {
//	margin-left: 1.5rem;
//	margin-right: 1.5rem;
//	border-left: 1px solid rgba(0,0,0,0.15);
//	padding-left: 1.5rem;
}

.card-mal-img {
	box-shadow: 0.15rem 0.15rem 0.7rem rgba(0,0,0,0.5);
	height: 100%; 
	width: 100%; 
	object-fit: contain;
	margin-bottom: 0.85rem;
}

.card-home-img {
	height: 100%; 
	width: 100%; 
	object-fit: contain;
//	padding-bottom: 1.5rem;
}

.card-text {
	padding-left: 0.1rem;
}

.card-title {
	color: rgba(255,255,255,1);
	font-family: 'EB Garamond', serif;
	font-size: 1.2rem;
	white-space: auto;
}

.card-sub {
	color: rgba(0,0,0,0.5);
}

.card-sub-white {
	color: rgba(255,255,255,0.5);
}

.card-sub-red {
	color: rgb(230, 0, 0);
}

.h-card-text {
	font-size: 0.9rem;
//	padding-top: 0.75rem;
	opacity: 0.82;
	margin: 1.44vw;
	margin-top: 0.62vw;
}

.h-card-title {
	color: rgba(0,0,0,1);
	font: 600 1.42rem 'Open Sans', sans-serif;
	letter-spacing: 0.007rem;
//	line-height: 1.7rem;
	margin: 1.44vw;
	position: relative;
	top: 0.62vw;
}

.h-card-sub {
	color: rgba(0,0,0,0.5);
	font-size: 0.8rem;
	margin: 1.44vw;
}

/*----------------------
 	blog-page
----------------------*/

.blog-wrap {
	display: flex; 
	flex-direction: row; 
	flex-wrap: wrap;
	align-items: flex-start;
}

.blog-card {
	line-height: 1.25rem;
	font-size: 0.75rem;
	width:300px; 
	flex-grow: 1;
//	background-color: #bada55;
	padding: 0.75rem;
	font-size: 1rem;
	font-weight: 200;
	color: #222;
	letter-spacing: 0.009rem;
}
.card-blog-img {
	box-shadow: none;
	height: 100%; 
	width: 100%; 
	object-fit: contain;
}
.card-ski-img {
	box-shadow: 0.06rem 0.1rem 0.2rem rgba(255,255,255,1), -0.06rem -0.03rem 0.09rem rgba(0,0,0,0.3); 
	height: 100%; 
	width: 100%; 
	object-fit: contain;
}

.p-blog {
	padding-top: 2rem;
}

.blog-inline-header{
	text-align: left;
	font-size: 1.35rem;
	font-weight: 600;
	text-align: left !important;
}

.blog-header{
	font-family: 'EB Garamond', serif;
	font-weight: 400;
	font-size: 1.25rem;
	padding: 0.65rem 1.5rem 0;
	color: #aaa;
	
}

/* secondary nav */

		#container {
			width: 100%;
			position: absolute;
			background: transparent;
			z-index: 9;			
		}
	
		.main_nav {
			font-family: 'EB Garamond', serif;
			font-variant-ligatures: common-ligatures;
			font-size: 1.66rem;
			display: none;
			position: relative;
			left: 0;
			top: 4.66rem;
			background-color: #9a9790;
//			background: rgba(0,0,0,0.7);
			color: white;
			width: 100%;
			padding: 0 100px;
			line-height: 38px;
		}
		
		
		@media (max-width: 1024px){
			.main_nav {
				left: 0;
				top: 3.25rem;
				padding: 0 31px;
				font-size: 1.24rem;
				line-height: 33px;
			}
		}
		
		@media (max-width: 575px){
			.main_nav {
				position: fixed;
				right: 0;
				left: auto;
				top: 4.2rem;
				width: 165px;
				line-height: 33px;
				text-align: left;
				padding:0;
				font-size: 1.4rem;
			}
			#container{
				z-index: 12;
			}
		}
		
/* color change */

.color-change {
     color: #f2f2f2;
     -webkit-animation: random 12s infinite;
     animation: random 12s infinite;
//	 text-shadow: 0px 0px  3px rgba(0,0,0,0.15);
}
@keyframes  random {
//    10% { color: #ff5fa7; } 
    30% { color: yellow; } 
    35% { color: #9cfd1f; } 
    25% { color: #00a8ff; }
    0% { color: white; }  
}