/*@import bourbon*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700);

/*, *:before, *:after {
    box-sizing: border-box;
}*
div{
    display: block;
body {
    display: block;
    margin: 8px;
}

}*/
body {
    /*display: block;
    margin: 8px;*/
    background-color: gainsboro;
}
/*
.container {
    margin: 50px 1px;
    text-align: center;
    border: 2px solid #E0E0E0;

    -webkit-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    -moz-box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
    box-shadow: 0 0 65px rgba(0,0,0, 0.5) inset;
  /*
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.4);
}
 */


.letters {
    display: inline-block;
}

.letter {
    font-family: "Roboto Condensed";
    float: left;
    width: 1em;
    font-weight: 300;
    font-size: 7em;
    opacity: 1;
    visibility: visible;
    transition: all 0.4s;
    overflow: hidden;
    color: #0b0b0b;
}
.letter::after{
    clear: both;
    content: "";
    display: table;
}

.is-hidden{
    opacity: 1;
    width: 0;
    visibility: hidden;
}

.inputs {
    text-align: center;
}
@media (max-width: 1300px){
    .letter3{
        width: 1.5em;
    }
    .letter{
        font-family: "Roboto Condensed";
        float: left;
        width: 1em;
        font-weight: 300;
        font-size: 6em;
        opacity: 1;
        visibility: visible;
        transition: all 0.4s;
        overflow: hidden;
        color: #0b0b0b;
    }
}
@media (max-width: 1100px){
    .letter3{
        width: 1.2em;
    }
    .letter{
        font-family: "Roboto Condensed";
        float: left;
        font-weight: 300;
        font-size: 6em;
        opacity: 1;
        visibility: visible;
        transition: all 0.4s;
        overflow: hidden;
        color: #0b0b0b;
        width: 4em;
    }
}