/*
 * Legal Disclaimer
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * arcola.club
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Lineto.com, 2017
 */


/*
 *
 * INSTRUCTIONS
 *
 * Copy the Legal Disclaimer and the @font-faces statements to your regular CSS file.
 * The fonts folder(s) should be placed relative to the regular CSS file.
 *
 * You can use either the complete or subsetted fonts:
 * If you don’t require the entire range of characters, you can use the smaller, subsetted webfonts instead.
 * See "Glyphs & Languages" for an overview of the characters in the *_subsetted.html file in the root directory of this package.
 *
 */


/* Complete */

@font-face {
    font-family: "Circular-Bold";
    src:url("fonts/lineto-circular-bold.eot");
    src:url("fonts/lineto-circular-bold.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-circular-bold.woff2") format("woff2"),
        url("fonts/lineto-circular-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


/* Subsetted */

@font-face {
    font-family: "Circular-Bold-S";
    src:url("fonts_subsetted/lineto-circular-bold.eot");
    src:url("fonts_subsetted/lineto-circular-bold.eot?#iefix") format("embedded-opentype"),
        url("fonts_subsetted/lineto-circular-bold.woff2") format("woff2"),
        url("fonts_subsetted/lineto-circular-bold.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Circular-Book";
    src:url("fonts/lineto-circular-book.eot");
    src:url("fonts/lineto-circular-book.eot?#iefix") format("embedded-opentype"),
        url("fonts/lineto-circular-book.woff2") format("woff2"),
        url("fonts/lineto-circular-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}


/* Subsetted */

@font-face {
    font-family: "Circular-Book-S";
    src:url("fonts_subsetted/lineto-circular-book.eot");
    src:url("fonts_subsetted/lineto-circular-book.eot?#iefix") format("embedded-opentype"),
        url("fonts_subsetted/lineto-circular-book.woff2") format("woff2"),
        url("fonts_subsetted/lineto-circular-book.woff") format("woff");
    font-weight: normal;
    font-style: normal;
}

/* Main */

html, body {
    width: 100%;
    height: 100%;
    font-family: 'Circular-Bold', Helvetica Bold, Sans-Serif;
    overflow: hidden;
    word-spacing: -.1em;
    background-color: #696D5F;

    -webkit-transition: background-color .5s ease;
    -moz-transition: background-color .5s ease;
    transition: background-color .5s ease;
}

span {
    font-family: 'Circular-Book', Helvetica Bold, Sans-Serif;
}

h1 {
    float: left;
    color: #FFF;
    font-size: 1em;
}

a {
    text-decoration: none;
}

#border {
    position: absolute;
    width: 94%; height: 94%;
    left: 3%; right: 3%;
    top: 3%; bottom: 3%;
}

#logo {
    font-size: 2em;
}

.arc {
    position: absolute;
    height: 0%;
    width: 10%;
    top: 0;
    left: 0; right: 0;
    margin: auto;
    z-index: 0;
    animation: expand .275s linear forwards;
    animation-iteration-count: 1;
    animation-delay: .5s;

    -webkit-user-drag: none;
    -moz-user-drag: none;
    user-drag: none;
}

#pseudo {
    font-family: 'Circular-Bold', Helvetica Bold, Sans-Serif;
}

#buttons {
    position: absolute;
    top: 0; right: 0;
}

.select {
    background: none;
    border: none;
    color: #FFF;

    font-size: 1em;
    font-family: 'Circular-Bold', Helvetica Bold, Sans-Serif;

    -webkit-transition: opacity .5s ease;
    -moz-transition: opacity .5s ease;
    transition: opacity .5s ease;

    cursor: pointer;
}

#arrow {
    opacity: 0;
}

#break{
  flex-basis: 100%;
  width: 0px; 
  height: 0px; 
  overflow: hidden;
}

button:hover #arrow {
    opacity: 1;
}

input:focus, select:focus, button:focus {
    outline: none;
}

::placeholder {
    color: #FFF;
    opacity: 1;
}

::-ms-input-placeholder {
   color: #FFF;
}

@keyframes expand {
    from { height: 0%; }
    to   { height: 100%; }
}

@media only screen 
and (min-device-width: 1px)
and (max-device-width: 1024px) {

    h1 {
        font-size: .75em;
    }

    #logo {
        font-size: 1.5em;
    }

    .arc {
        width: 15%;
    }

    #buttons {
        bottom: 0;
    }
}