body, html
{
    padding: 0px;
    margin: 0px;
    float: none;
    border-width: 0px;
    border-style: none;
    font-size: 1em;
    background-color: white;   
    font-family: 'Dosis', sans-serif;
    color: #444444;
    font-weight: 100;
    text-align: center;
    text-decoration: none;
}


H1, H2, H3, H4, H5, H6, p, a
{
    
    padding: 0px;
    margin: 0px;
    line-height: 1em;
    font-size: 1em;
     font-weight: 100;
}


a
{
    color: #444444;
    text-align: center;
    text-decoration: none;
}


a   
{
    opacity: 0.5å;   
    -webkit-transition: all 0.5s ease; /* Firefox */
    -moz-transition: all 0.5s ease; /* WebKit */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease; /* Standard */
}

a:hover   
{
    opacity: 1;
    -webkit-transition: all 0.5s ease; /* Firefox */
    -moz-transition: all 0.5s ease; /* WebKit */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease; /* Standard */
}


H1
{
    width: 100%;
    text-align: center;
    font-size: 42px;
    color: #506c80;
}

H2
{
    width: 100%;
    text-align: center;
    
}

/*-------------------------------*/
/* BACKGROUND IMAGE */
/*-------------------------------*/


.bg
{
    width: 100vW;
    height: 100vH;
    background-size: contain;
    background-repeat:no-repeat;
    position: fixed;
    top:0px;
    left: 0px;
}



@media (orientation: portrait) 
{
.bg
{
    background-image: url(img/Karen.jpg);
    background-position:top;
    background-size: cover;
}
    
H1
{
    width: 100%;
    text-align: center;
    font-size: 32px;
}
    
    
}


@media (orientation: landscape) 
{

.bg
{
    width:50vW;
    background-image: url(img/Karen.jpg);
    background-size: cover;
    background-position: center;
    position: fixed;
    top:0px;
    left:50vW;
}
}




/*-------------------------------*/
/* KONTAKT FIELD IMAGE */
/*-------------------------------*/

.contactContainer
{
    width:220px;
    height:340px;
    background-color: white;
    padding: 40px;
    position: fixed;
    top: 50%;
    margin-top: -220px;
    left: 15vW;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
    opacity: 0.9;
    
    -webkit-transition: all 0.5s ease; /* Firefox */
    -moz-transition: all 0.5s ease; /* WebKit */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 0.5s ease; /* Standard */

}

.contactContainer:hover
{
    opacity: 1;
    -webkit-transition: all 0.5s ease; /* Firefox */
    -moz-transition: all 0.5s ease; /* WebKit */
    -o-transition: all 0.5s ease; /* Opera */
    transition: all 1s0.5sease; /* Standard */
    
}




@media (orientation: portrait) 
{
.contactContainer
{
    position: absolute;
    top:110vH;
    left:50%;
    margin-left: -150px;
    opacity: 1;
}
}



/*-------------------------------*/
/* Icons */
/*-------------------------------*/



.icon
{
    width: 42px;
    height: 42px;
    margin-left: 3px;
    margin-right: 3px;
    text-align: center;
}



.quoteline
{
    width: 30vW;
    height: auto;
    position: fixed;
    top:50%;
    left: 45%;
    margin-left: -15vW;
    margin-top: -2vH;
}

@media (orientation: portrait)  {   .quoteline{visibility: collapse;}   }




/*-------------------------------*/
/* LOGO */
/*-------------------------------*/


.logoIcon
{
    width: 64px;
    height: 64px;
    text-align: center;
    
}
.logo
{
 
    width:300px;
    position: fixed;
    top: 50%;
    margin-top: -260px;
    left: 5vW;
}

@media (orientation: portrait)  
{
 .logo
{
    position: absolute;
    top:110vH;
    left:50%;
    margin-left: -150px;
}
}


/*-------------------------------*/
/* DISTANCE */
/*-------------------------------*/
.distance1em    {   height: 1em;    }
.distance2em    {   height: 2em;    }
.distance3em    {   height: 3em;    }
.distance5em    {   height: 5em;    }