@CHARSET "UTF-8";

@media all and (max-width:1680px){
	.frontpage {
	    margin-bottom:20%;
	}
	
	.frontpage .feel2 {
		top:5%;
    }
    .frontpage .content {
    	width: 100%;
    	top:90%;
    	transform: translateX(-48%);
    }
}

@media all and (max-width:1200px){
    .frontpage {
        margin-bottom:25%;
    }
    
    h2 {
	   font-size: 100px;
       line-height: 100px;
    }
}

@media all and (max-width:980px){
	h2 {
	    /*white-space: normal;
	    position: relative;
	    margin: 0;
	    right: auto;
	    top: auto;
	    transform: none;*/
		right: 5%;
		font-size: 70px;
		line-height: 70px;
	}
	
	header {
		position: fixed;
		width: 100%;
		background-color:#30000c;
		height: 80px;
		padding-top: 20px;
		-webkit-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.05);
		-moz-box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.05);
		box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.05);
	}
	
	header #logo {
		width: 150px;
		z-index: 1;
		top: -11px;
		right: 30px;
	}
	
	header nav {
		display: none;
		position:fixed;
		height: 100%;
		top: 80px;
		width: 100%;
		padding: 0px 50px 100px;
		overflow: auto;
		background-color:#30000c;
	}
	header nav ul li ul {
		display: block;
	}
	.mobile_navi_toggle{
		display: block !important;
		cursor:pointer;
		width:32px;
		z-index:1;
		border: none;	    
		position:absolute;
		left:20px;
		top:10px;
	}
	
	.mobile_navi_toggle .icon-bar{
		width:100%;
		max-width: 32px;
		background-color:#fe0000;
		height:4px;
		display:block;
		margin:4px 0px;
		-webkit-transition: all 0.2s linear;
		-moz-transition: all 0.2s linear;
		transition: all 0.2s linear;
		-webkit-border-radius: 2px;
		-moz-border-radius: 2px;
		border-radius: 2px;
	}
	
	.mobile_navi_toggle .icon-bar.top-bar{
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		transform: rotate(0);
	}
	
	.mobile_navi_toggle .icon-bar.middle-bar{
		opacity: 1;
	}
	
	.mobile_navi_toggle .icon-bar.bottom-bar{
		-webkit-transform: rotate(0);
		-moz-transform: rotate(0);
		transform: rotate(0);
	}
	
	.mobile_navi_toggle.open .icon-bar.top-bar{
		-moz-transform: rotate(42deg);
		-webkit-transform: rotate(42deg);
		transform: rotate(42deg);
		-moz-transform-origin: 10% 10%;
		-webkit-transform-origin: 10% 10%;
		transform-origin: 10% 10%;						
		margin-left:4px;
	}
	
	.mobile_navi_toggle.open .icon-bar.middle-bar{
		opacity:0;
	}
	
	.mobile_navi_toggle.open .icon-bar.bottom-bar{
		-moz-transform: rotate(-42deg);
		-webkit-transform: rotate(-42deg);
		transform: rotate(-42deg);
		-moz-transform-origin: 10% 90%;
		-webkit-transform-origin: 10% 90%;
		transform-origin: 10% 90%;						
		margin-left:4px;
	}
	.frontpage {
	   margin-bottom: 5%;
	}
	.frontpage .feel-wrap {
	   width: 100% !important;
       left: 0 !important;
       right: auto !important;
       top: auto !important;
       height: 100%;
	   max-width: 100%;
	   padding:0;
	   overflow: hidden;
	   aspect-ratio: 3 / 2;
	}
	.frontpage .feel-wrap .feel2 {
	   display: none;
	}
	.frontpage .feel-wrap img {
	   width: 100%;
	   height: 100%;
	   object-fit: cover;
	   object-position: top;
	   display: block;
	}
	.frontpage .content {
		top: 20% !important;
		transform: none;
		left: 0;
	}

    .content-row {
        flex-wrap: wrap;
    }
	.content-row > .col {
	    flex: 0 0 100% !important;
	    max-width: 100% !important;
	}
		
	.content-row > .col.img {
	  order: -1;
	}
	footer {
		margin-top: 0px;
		padding-top: 50px;
	}
}

@media all and (max-width:768px){
	body {font-size: 14px;}
	h1 {font-size: 45px;line-height:40px;}
	.frontpage h1 {font-size: 26px;line-height:40px;}
	h2 {font-size: 50px;line-height: 50px;white-space: normal;text-align: right;top: 40%;}
	h3 {font-size: 18px;}
	h4 {font-size: 14px;}
	strong.bigger {font-size: 18px;}
	
	header nav ul {font-size: 18px;}
	header .lang-container {margin: 20px 0px;}
	header .menu-container {margin: 30px 0px;}
	.frontpage .feel-wrap {
        aspect-ratio: 1 / 1;
    }
}