/*** Typography ***/
body {overflow-x: hidden;}
.roboto {
    font-size: 67px;
    font-weight: bold;
}

.caudex {
    font-weight: bold;
    letter-spacing: 4.6px;
    text-transform: uppercase
}

.black {
    color:#212121;
}

.head {
    background-image: url('../img/top-bg.jpg');
    background-repeat: no-repeat;
    background-size:   cover;
    width:100%;
    height: 780px;
}

    .head .caudex {
        font-size: 12px;
    }

/*** Logos ***/
/* Header Logo Bar */

.ribbon-wrapper-green {
    height: 187px;
    overflow: hidden !important;
    position: absolute;
    right: -53px;
    top: -33px;
    width: 379px;
}

.logos {
    margin: 100px 0 0 0;
}

    .logos .antico-logo {
        margin: -15px 20px 0 55px;
    }


.col-centered{
    float: none;
    margin: 0 auto;
    text-align: center;
}

    .col-centered h1, h2 {
        text-transform: uppercase;
        color:#fff;
    }
    
    .col-centered img {
        display: inline !important;
    }
  
/*** Panels ***/
.panels {
    padding: 10px;
    width: 100%;
    box-shadow: inset 0 0.1em 5px #212121;
    height: 220px;
    text-transform: uppercase;
}

    .panels p {
        padding: 20px 0 0 0;
        letter-spacing: 2px !important;
    }
    
    .form-control {
        background-color: #FFFFFF;
        border: 1px solid #CCCCCC;
        border-radius: 4px;
        color: #555555;
        display: block;
        font-size: 14px;
        padding: 8px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        width: 100%;
    }
    
    .form-breaker {
        border:2px solid #fff;
        padding: 10px;
        margin: 10px 0 10px 0;
    }
    
    .long-form {
        width:700px !important;
    }
    
    #appForm label.error {
        width: 200px;
        display: block !important;
        font-size: 8px !important;
        font-family: Arial !important;
        letter-spacing: 1px;
        color: #fff;
        background: #cf372a;
        padding: 2px;
        margin: 4px 0 0 0;
    }

/*Hiring Panel*/
.hiring-panel {
    font-family: Georgia;
    color:#fff;
    background: #CF372A;
    font-size: 27px;
    text-align: center;
    padding: 25px !important;
}

    .hiring-panel .button{
        padding: 5px 10px;
        background: #fff;
        font-size: 35px;
        letter-spacing: 5px;
        color:#CF372A !important;
        float: right;
        margin: -10px -15px 0 0;
    }

.antico-panel{
    font-family: Georgia;
    color:#fff;
    background: #96857b;
    font-size: 11px;
}

    .antico-panel .button {
        padding: 10px 15px;
        background: #fff;
        font-size: 35px;
        letter-spacing: 5px;
        color:#96857b;
        float: right;
        margin: 40px 0 0 0;
    }
    
    
.gio-chicken-panel{
    font-family: Georgia;
    color:#ffcc66;
    background: #1a2948;
    font-size: 11px;
}

    .gio-chicken-panel .button {
        padding: 10px 15px;
        background: #ffcc66;
        font-size: 35px;
        letter-spacing: 5px;
        color:#1a2948;
        float: right;
        margin: 40px 0 0 0;
    }
    
    .gios-chicken-logo {
        margin: 25px 0 0 0;
    }
    
.caffe-gio-panel{
    font-family: Georgia;
    color:#a0857a;
    background: #3a211a;
    font-size: 11px;
}

    .caffe-gio-panel .button {
        padding: 10px 15px;
        background: #a0857a;
        font-size: 35px;
        letter-spacing: 5px;
        color:#3a211a;
        float: right;
        margin: 40px 0 0 0;
    }
    
.bottega-panel{
    font-family: Georgia;
    color:#cf372a;
    background: #f4ebda;
    font-size: 11px;
}

    .bottega-logo {
        margin: 25px 0 0 0;
    }
    
    .bottega-panel .button {
        padding: 10px 15px;
        background: #cf372a;
        font-size: 35px;
        letter-spacing: 5px;
        color:#f4ebda;
        float: right;
        margin: 40px 0 0 0;
    }
    
.bar-amalfi-panel{
    font-family: Georgia;
    color:#66cbff;
    background: #005d9a;
    font-size: 11px;
}

    .bar-amalfi-panel .button {
        padding: 10px 15px;
        background: #66cbff;
        font-size: 35px;
        letter-spacing: 5px;
        color:#005d9a;
        float: right;
        margin: 40px 0 0 0;
    }
 
 
 footer {
    background: #000;
    height: 100px;
    color: #fff;
 }
 
    footer .copyright{
        text-align: center;
        font-size: 25px;
        font-family: 'Caudex', 'serif';
        padding: 25px 0 0 0;
    }
    
    footer .instagram{
        float: right;
        font-size: 20px;
        font-family: 'Caudex', 'serif';
        margin: -30px 35px 0 0;
    }
 
/* Smaller Screens */
@media (min-width: 500px) {

    .panels {
        padding: 10px;
        width: 100%;
        box-shadow: inset 0 0.1em 5px #212121;
        height: 100%;
    }
    
    .hiring-panel .button{
        background: #fff;
        font-size: 35px;
        letter-spacing: 5px;
        color:#000;
        float: right;
    }
    
}

@media (max-width:960px) {
    
    .ribbon-wrapper-green{
        display: none;
    }
    
}

@media (max-width: 820px) {
    
    footer {
        background: #000;
        height: 190px !important;
        color: #fff;
    }
    
    footer .copyright {
        width: 100%;
        margin: 0 0 35px 0;
        float: left;
    }
    
    footer .copyright span {
            word-break: keep-all;
            
        }
    
    footer .instagram {
        width: 100% !important;
        text-align: center;
    }
    
    .long-form {
        width:90% !important;
    }
}

@media (max-width: 700px) {
    .logos .antico-logo {
        margin: 0 0 0 85px;
    }
    
    .head {
        background-image: url('../img/top-bg.jpg');
        background-repeat: no-repeat;
        background-size:   cover;
        width:100%;
        height: auto;
    }
    
    .panels {
        padding: 10px;
        width: 100%;
        box-shadow: inset 0 0.1em 5px #212121;
        height: auto;
    }
    
    .long-form {
        width:100% !important;
    }
    
    .button {
        margin: 0 0 0 25px !important;
    }
    
    footer {
        background: #000;
        height: 180px !important;
        color: #fff;
    }
    
    footer .copyright {
        width: 250px !important;
        text-align: center !important;
        margin: 0 0 0 40px;
    }
    
    footer .instagram {
        width: 100% !important;
        float: left;
        margin: 5px 0 0 0;
    }
}