/* first for IE 4–8 */
@font-face {
  font-family: MetaWeb-Bold;
  src: url("../fonts/MetaWeb-Bold.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: MetaWeb-Bold;
  src: url("../fonts/MetaWeb-Bold.woff") format("woff");
}

/* first for IE 4–8 */
@font-face {
  font-family: MetaWeb-Normal;
  src: url("../fonts/MetaWeb-Normal.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: MetaWeb-Normal;
  src: url("../fonts/MetaWeb-Normal.woff") format("woff");
}

/* first for IE 4–8 */
@font-face {
  font-family: MetaScWeb-Bold;
  src: url("../style/fonts/MetaScWeb-Bold.eot");
}

/* then for WOFF-capable browsers */
@font-face {
  font-family: MetaScWeb-Bold;
  src: url("../fonts/MetaScWeb-Bold.woff") format("woff");
}


* {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
  }


body {
        /* make the body full height*/
        height: 100vh;
        /* set font */
    	font-family: MetaWeb-Normal, sans-serif;
		letter-spacing: -0.05em;
    	font-size: 1em;
    	line-height: 1.42857143;
    	color: #333333;
    	background-color: #0DFA04;        
        display:flex;
    }


#wrapper {
        width: 1000px;
        /* this will help center it*/
        margin:auto;
	    margin-top: 10px;
        background-color: #ffffff;
		/* round the edges */
        border-radius: 0px;
        /* make it a grid container*/
        display: grid;
  		grid-template-columns: auto auto;
		grid-template-rows: 210px auto auto;
 		grid-template-areas:
   		'topLeft topRight'
    	'middle middle'
		'bottom bottom';
        padding: 18px 18px;
    }

    #logo { grid-area: topLeft;
		/*padding: 5% 5%;*/
		padding: 5% 0%;
     
    }
   #logo img {
	   
        width: 300px;
        height: 190px;
    }
   #button01 {
	   grid-area: topRight;
	   padding: 5% 5%;
	   text-align: right;
	   
   
    }
#content {
	
		grid-area: middle;
        /*padding: 2% 5%;*/
		padding: 2% 0%;
    }
	
#Posten
{
       font-family: MetaScWeb-Bold, sans-serif;
}
video#video {
    margin-top: 1em;
    padding: 1em;
    width: 100%;
}
#content img
	{
        width: 100%;
		
    }

	h1
	{
        font-family: MetaWeb-Bold, sans-serif;
		font-size: 1.5em;
		font-weight: bold;
		text-align: left;
		line-height: 180%;
    }

	h2
	{
        font-family: MetaWeb-Normal, sans-serif;
		font-size: 1em;
		font-weight: bold;
		text-align: left;
		line-height: 120%;
    }

	p
	{
        font-family: MetaWeb-Normal, sans-serif;
		text-align: left;
		line-height: 120%;
    }
	
    a 
	{
		text-align: center;
        /* remove default underline */
        text-decoration: none;
        /*color: #FFFFFF;*/
    }
#fett
{
       font-family: MetaWeb-Bold, sans-serif;
}

.button {
		
    	background-color: #000000;
 		border: none;
		color: white;
		padding: 15px 25px;
		text-align: center;
		cursor: pointer;
		font-family: MetaWeb-Normal, sans-serif;
		font-size: 15px;
		margin-top: 20px;		
}

.button:hover {
  background-color: #0DFA04;
  color: #000000;
}

/* make it responsive */
    @media screen and (max-width:768px) {

        /* make the layout  a single column and add some margin to the wrapper */
        #wrapper {
			grid-template-rows: 80px auto 40px;
            margin-left: 10px;
            margin-right: 10px;
        }
        /* resize images*/
        #logo img {
        	width: 120px;
        	height: 76px;
        }
		
		#button01 img {
        	width: 76px;
        	height: 76px;

        }
		.button {
				font-size: 14px;
				padding: 10px 15px;
		}
		
    }
.clue {
}

 /* Sprachauswahl*/
img.country_flag {
    margin-bottom: 2%;
}

 /* Disclaimer*/
#startinfo{
	display:none;
}