@font-face {
  font-family: JunctionLight;
  src: url(/fonts/junction-light.woff);
}

@font-face {
  font-family: JunctionRegular;
  src: url(/fonts/junction-regular.woff);
}

@font-face {
  font-family: JunctionBold;
  src: url(/fonts/junction-bold.woff);
}

html {
  height: 100%;
}

body
{
    background: #d9d6c7;
    margin: 0px;
    min-height: 100%;
    /*background-size: cover;*/
}



#container
{  
    position: absolute;
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);
    padding-left: 5%;
    padding-right: 5%;
    /*height: 80%;*/
    padding-bottom: 5%;

    border-radius: 0% 0% 5% 5%;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);

    background: #53586c;
    background-image: url("../img/background_box.jpg");
    background-size: cover;

    font-size: 6vw;
    color: rgba(255, 255, 250, 0.95);
    text-align: center;
    font-family: JunctionLight,Arial, sans-serif;
}

.name
{
    margin-top: 20%;
    font-family: JunctionLight;
    
}

.punchline
{

    font-family: JunctionRegular;
    line-height: 150%;
    margin-bottom: 35%;
}

.encours
{
    margin-bottom: 35%;
}

.contact
{
    font-size: 0.15em;
}

a.contact
{
    color: rgba(255, 255, 250, 0.95);
    outline: none;
    text-decoration: none;
}

@media (orientation: landscape) {
    body {
        background-size: cover;
        background-image: url("../img/background_lite.jpg");
    }

    #container {
        left: 75%;
        font-size: min(max(22px, 4vw), 44px);
    }

    .name
    {
        font-size: 1em;
    
    }
 
    .punchline
    {
        font-size: 0.35em;

    }
    
    .encours
    {
        font-size: 0.35em;
    }
    
    .contact
    {
        font-size: 0.4em;
    }
}

@media (orientation: portrait) {
    body {
        /*height:200vw;*/
        width:100%;
        background-image: url("../img/portrait_background.jpg");
        /*background-size: cover;*/
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }

    #container {
        left: 50%;
        font-size: 18vw;
        padding-left: 10%;
        padding-right: 10%;
    }
    
    .name
    {
        font-size: 0.75em;
    
    }
 
    .punchline
    {
        font-size: 0.2em;

    }
    
    .encours
    {
        font-size: 0.2em;
    }
    
    .contact
    {
        font-size: 0.15em;
    }
}