/*Fonts*/

@font-face {
    font-family: 'Gotham-Bold';
    src: url('../fonts/Gotham-Bold/Gotham-Bold.eot?#iefix') format('embedded-opentype'),  url('../fonts/Gotham-Bold/Gotham-Bold.otf')  format('opentype'),
        url('../fonts/Gotham-Bold/Gotham-Bold.woff') format('woff'), url('../fonts/Gotham-Bold/Gotham-Bold.ttf')  format('truetype'), url('../fonts/Gotham-Bold/Gotham-Bold.svg#Gotham-Bold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamMedium';
    src: url('../fonts/GothamMedium/GothamMedium.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamMedium/GothamMedium.woff') format('woff'), url('../fonts/GothamMedium/GothamMedium.ttf')  format('truetype'), url('../fonts/GothamMedium/GothamMedium.svg#GothamMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GothamBook';
    src: url('../fonts/GothamBook/GothamBook.eot?#iefix') format('embedded-opentype'),  url('../fonts/GothamBook/GothamBook.woff') format('woff'), url('../fonts/GothamBook/GothamBook.ttf')  format('truetype'), url('../fonts/GothamBook/GothamBook.svg#GothamBook') format('svg');
    font-weight: normal;
    font-style: normal;
}

/*Reset CSS*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*General Styles*/

body{
    font-family: 'GothamBook';
}

body#loginPage{
    background-color: #161e43;
}
#container .inner{
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}
#logo{
    text-align: center;
    padding-top: 60px;
}
#contentLogin{
    display: table;
    margin-top: 85px;
    width: 100%;
}
#leftLogin{
    display: table-cell;
    vertical-align: middle;
    width: 600px;
}
#login{
    display: table-cell;
    vertical-align: middle;
    color: #ffffff;
}
#login .description{
    font-size: 17px;
    margin-bottom: 30px;
}
#login label{
    color: #bfbfbf;
    font-size: 17px;
}
#login input[type="text"], #login input[type="password"]{
    margin-top: 15px;
    width: calc(100% - 15px);
    padding-left: 15px;
    background-color: #131a3e;
    color: #ffffff;
    border: none;
    height: 50px;
    font-size: 17px;
    border-radius: 10px;
    max-width: 400px;
}
#login input[type="submit"]{
    width: 100%;
    background-color: #ffffff;
    color: #1d285a;
    border: none;
    height: 50px;
    font-size: 17px;
    border-radius: 10px;
    max-width: 400px;
    text-transform: uppercase;
    font-family: 'Gotham-Bold';
    margin-top: 20px;
}
#login .row{
    margin-bottom: 25px;
}
#login .links a{
    color: #bfbfbf;
    font-size: 17px;
    text-decoration: none;
}
#login .error{
    color: #ffce07;
    font-size: 22px;
    margin-bottom: 30px;
}
#footer{
    background-color: #ffffff;
    margin-top: 120px;
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 17px;
    position: fixed;
    bottom: 0;
    width: 100%;
}
#footer span{
    background-color: #1d285a;
    height: 30px;
    padding: 15px 20px;
    margin-left: 75px;
    border-radius: 10px;
    color: #ffffff;
}
#footer span a{
    color: #ffffff;
    text-decoration: none;
}

/*Order Styles*/

#header{
    width: 100%;
    display: table;
}

#header .profile{
    background-color: #ffce07;
    width: 40%;
    display: table-cell;
    color: #1d285a;
    padding-left: 60px;
    vertical-align: middle;
    padding-top: 20px;
    padding-bottom: 20px;
}

#header .profile .title{
    font-family: 'Gotham-Bold';
    font-size: 16px;
    margin-top: 0px;
}
#header .profile .user{
    font-family: 'Gotham-Bold';
    font-size: 30px; 
}

#header .profile .body{
    font-family: 'GothamBook';
    font-size: 16px;
    margin-top: 5px;
}

#header .description{
    display: table-cell;
    width: 60%;
    background-color: #18224c;
    color: #ffffff;
    vertical-align: middle;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 60px;
}
#header .description img{
    width: 65%;
    height: auto;
}
#header .description .title{
    font-family: 'Gotham-Bold';
    font-size: 35px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 5px;
}


#header .description .body{
    font-family: 'GothamBook';
    font-size: 12px;
    text-transform: uppercase;
    margin: 10px 0px;
}
#header .description .underline{
    height: 4px;
    background-color: #ffce07;
    max-width: 400px;
    width: 100%;
}
#contentOrder{
    margin-top: 30px;
    width: 100%;
}
#containerOrder{
    width: 100%;
    display: table;
}
#menu{
    border-right: 1px solid #cccccc;
    width: 40%;
    display: table-cell;
    vertical-align: top;
}
#menu .row h1{
    color: #333333;
    font-size: 26px;
}
#menu .row h1 span{
    background-color: #1c2656;
    height: 20px;
    width: 20px;
    margin-right: 10px;
    display: inline-block;
    border-radius: 35px;
    color: #ffffff;
    font-size: 20px;
    font-family: 'Gotham-Bold';
    padding: 10px;
    text-align: center;
}
#menu .row h2{
    color: #1d285a;
    padding-left: 50px;
    font-size: 17px;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-right: 25px;
}
#menu .row .content{
    margin-left: 50px;;
    width: 100%;
    max-width: 375px;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 30px;
    margin-bottom: 20px;
    position: relative;
}
#menu .row .content.last{
    border-bottom: none;
}
#menu .row .content .option label{
    color: #333333;
    font-size: 20px;
}
#menu .row .content .options .handleOp{
    margin-bottom: 3px;
    background-color: #f5f5f5;
    color: #333333;
    font-size: 18px;
    border: 1px solid #cccccc;
    padding: 20px;
    cursor: pointer;
    border-radius: 5px;
}
#menu .row .content .options .handleOp.selected{
    background-color: #1b2553;
    color: #ffffff;
    background-image: url(../img/arrow.jpg);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: auto 100%;
}
#menu .row .content .options .handleOp:hover{
    background-color: #1b2553;
    color: #ffffff;
}
#info{
    display: table-cell;
    width: 60%;
    vertical-align: top;
    padding-left: 50px;
}
textarea{
    resize: none;
    outline: transparent;
    padding: 20px;
}

#info .sectionTitle{
    font-size: 25px;
    color: #1d285a;
    font-family: 'Gotham-Bold';
    margin-bottom: 15px;
    position: relative;
}
#info .title{
    font-size: 17px;
    color: #343434;
    margin-bottom: 15px;
}
#info input[type="text"]{
    border-radius: 10px;
    border: none;
    background-color: #f5f5f5;
    color: #343434;
    font-family: 'GothamBook';
    height: 50px;
    width: calc(100% - 15px);
    padding-left: 15px;
    font-size: 17px;
    outline: transparent;
}
#info select{
    background-image: url(../img/down-arrow.png);
    background-repeat: no-repeat;
    background-position: 90% center;
    width: 100px;
    height: 50px;
    background-color: #f5f5f5;
    font-size: 12px;
    color: #8c9192;
    border: 1px solid #c3c3c3;
    padding: 0px 0px 0px 15px;
    margin-bottom: 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #343434;
    font-family: 'GothamBook';
    font-size: 17px;
    border-radius: 10px;
    outline: transparent;
}
#info textarea{
    height: 175px;
    width: 100%;
    background-color: #f5f5f5;
    color: #343434;
    font-family: 'GothamBook';
    font-size: 17px;
    border: none;
    border-radius: 10px;
    max-width: 592px;

}
#submitButton{
    margin-bottom: 50px;
    margin-top: 30px;
    width: 50%;
}
#submitButton input[type="submit"]{
    height: 50px;
    width: calc(100% - 10px);
    background-color: #ffce07;
    color: #1d285a;
    font-family: 'Gotham-Bold';
    font-size: 17px;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
}
#info .block{
    margin-bottom: 15px;
}
#pickUpContent, #reception, #drop, #fedex{
    border-top: 2px solid #eeeeee;
    padding-top: 30px;
    margin-top: 30px;
}
#info .pickTitle{
    color: #343434;
    margin-bottom: 15px;
}
#info .pickRow{
    margin-bottom: 15px;
    display: table;
    width: 100%;
}
#info .pickRow .cell{
    display: table-cell;
    vertical-align: top;
}

/*Special Styles*/
#deliveryDate input, #deliveryDate select, #pickDate select, #pickTime select, #pickTime input{
    margin-right: 10px;
}
#deliveryD{
    width: 65%!important;
}
#deliveryT #deliveryHour{
    width: 48%;
}
#deliveryT #ampm, #pickAm{
    margin-right: 0px;
}

#deliveryT #ampm{
    width: 84px;
}
#deliveryT span, #pickTime span{
    color: #878787;
    font-size: 16px;
}

#deliveryD #deliveryDay{
    width: 30%;
}
#deliveryD #deliveryYear,
#deliveryYear{
    width: 33%;
}
#quantity{
    width: 60%;
}
#quantity  .orderqty{
    /*display: table;*/
    width: 500px;
}
#quantity .orderqty .type{
    display: inline-block;
    width: 104px;
    margin-right: 20px;
}
#quantity .orderqty .type input{
    /*width: calc(100% - 31px);*/
}
#quantity .orderqty .type .qtyTitle{
    color: #878787;
    font-size: 14px;
    margin-bottom: 15px;
}

#quantity .orderqty .type input{
    width: 100%;
}


#quantity .orderqty > .type:first-child {
    margin-right: 28px;
}
#quantity .orderqty > .type:nth-child(2){
    width: 96px;
    margin-right: 25px;
}

#pickMessenger{
    padding-right: 12px;
    width: 65%;
}
#pickCompany{
    padding-left: 0px;
    width: 40%;
}
#pickDate{
    width: 65%;
}
#pickTime{
    width: 40%;
    padding-left: 0px;
}
#pickTime #pickHour{
    width: 48%;
}
#pickDate #pickYear{
    width: 33%;
}
#pickDate #pickDay{
    width: 30%;
}
#receptionFirstName, #dropFristName, #dropAddress, #fedexFristName, #fedexAddress{
    padding-right: 10px;
}
#receptionLastName, #dropLastName, #dropCity, #fedexLastName, #fedexCity{
    padding-left: 10px;
}
.three .cell{
    width: 33.33%;
    padding-left: 10px;
    padding-right: 10px;
}
.three .first{
    padding-left: 0px;
}
.three .last{
    padding-right: 0px;
}
#dropState #dropSt, #fedexState #fedexSt{
    width: 100%;
}
#reception, #drop, #fedex{
    display: none;
}

/*Step Section*/
input[type=radio], input[type=checkbox] {
    position: absolute;
    visibility: hidden;
}

#menu .row .content .option label {
    display: block;
    position: relative;
    font-weight: 300;
    font-size: 1.35em;
    padding: 5px 25px 4px 70px;
    height: 30px;
    z-index: 9;
    cursor: pointer;
    font-family: 'GothamBook';
    font-size: 18px;
    letter-spacing: 0.5px;
    color:  #333333;
    -webkit-transition: all 0.25s linear;
}

.check{
    display: block;
    position: absolute;
    background-color: #cccccc;
    border: solid 3px #cccccc;
    border-radius: 100%;
    height: 10px;
    width: 10px;
    top: 3px;
    left: 30px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

.check::before {
    display: block;
    position: absolute;
    content: '';
    border-radius: 100%;
    height: 0px;
    width: 0px;
    top: 5px;
    left: 5px;
    margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

.order_type2 .check,
.rush2 .check{
    top: 41px;
}

input[type=radio]:checked ~ .check {
    border: 3px solid #cccccc;
    background-color: #ffce07;
}

input[type=radio]:checked ~ .check::before{
    background: #818285;
}
#messages .success{
    color: #18224c;
    font-size: 22px;
}
#messages .success a{
    color: #18224c;
    text-decoration: none;
}
#messages .success a:hover{
    text-decoration: underline;
}
#messages .error{
    color: #18224c;
    font-size: 22px;
}

/*End Step Section*/

/*Alignment*/

#deliveryMonth,
#pickMonth{
    width: 120px!important;
    margin-right: 12px!important;
}
#deliveryDay,
#pickDay{
    width: 112px!important;
}

#quantity .orderqty .type.last{
    width: 121px!important;
}

#info .pickRow #pickTime .pickContent #pickAm{
    width: 84px;
    margin-right: 0px;
}


#customDescription{
    display: none;
}

#rushLabel{
    position: absolute;
    top: 0;
    right: 0;
    color: #19234e;
    font-size: 20px;
    text-transform: uppercase;
    padding: 10px 30px;
    background-color: #ffce07;
    border-radius: 10px;
    display: none;
}

/*End Alignment*/

/*List Styles*/
#containerTable{
    padding-left: 60px;
    padding-right: 60px;
}
#containerTable h1{
    font-family: 'Gotham-Bold';
    font-size: 30px;
    margin-bottom: 20px;
}
.containerList table{
    width: 100%;
}
.containerList table tr{
    border-bottom: 2px solid #eeeeee;
}
.containerList table th{
    text-align: left;
    color: #021d49;
    font-family: 'GothamMedium';
    font-size: 20px;
    padding: 7px 15px;
}
.containerList table td{
    color: #343434;
    font-family: 'GothamBook';
    font-size: 18px;
    padding: 10px 15px;
}
.containerList table td a{
    color: #343434;
    text-decoration: none;
}
.containerList table td a:hover{
    text-decoration: underline;
    color: #021d49;
}
.containerList table tbody tr:hover{
    background-color: #e6e2e7;
}
#mainMenu ul{
    width: 100%;
    background-color: #ececec;
}
#mainMenu ul li{
    display: inline-block;
    font-family: 'Gotham-Bold';
    font-size: 17px;
    text-transform: uppercase;
    padding: 20px;
    border-right: 1px solid #cccccc;
}
#mainMenu ul li.last{
    border-right: none;
}
#mainMenu ul li.active{
    background-color: #e3e3e3;
}
#mainMenu ul li a{
    color: #1d285a;
    text-decoration: none;
}

/*Responsive*/

/*since 801px until 1024px*/
@media (min-width:50.0625em) and (max-width:64em){
    
       
           /*Login*/
    #contentLogin{
        display: block;
        margin-bottom: 40px;
    }
    #contentLogin > div{    
        display: block;
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
    #logo{
        max-width: 550px;
        width: 100%;
        margin: 0 auto;
    }

    #leftLogin img,
    #logo img{
        width: 100%;
        height: auto;
    }

    #login .description{
        text-align: center;
    }

    /*End Login*/

    /*Order*/
    #containerOrder{
        width: 95%;
        margin: 0 auto;
    }

    #menu .row .content.last,
    #menu .row .content{
        margin-left: 0px;
    }


    #info textarea{
    max-width: 492px;
    }
    
    #info .pickRow,
    #info .pickRow > div{
        display: block!important;        
    }
    
    #deliveryD,
    #pickDate{
        width: 100%!important;
    }
    
    #pickTime{
        width: 100%;
    }
    
    #deliveryT #deliveryHour,
    #pickTime #pickHour{
        width: 44%;
    }
    
    .block .pickRow .cell{
        width: 100%!important;
        padding-right: 0px!important;
        padding-left: 0px!important;
        margin-bottom: 10px;
    }
    
/*End Order*/

/*Footer*/

#footer{
    position: relative;
}
#footer .inner{
    text-align: center;
}
/*End Footer*/
}

/*since 901px until 960px*/
@media (min-width:56.3125em) and (max-width:60em){

    /*Order*/
/*    #deliveryD, #pickDate{
        width: 82%!important;
    }*/
    
    #deliveryT #deliveryHour, #pickTime #pickHour{
        width: 47%!important;
    }
    
    #info textarea{
        max-width: 460px;
    }
    
    #menu .row .content{
        margin-left: 0px;
    }
    
    #menu .row .content.last{
        max-width: 300px;
        margin: 0 auto;
    }
    
    /*End Order*/
}

/*since 801px until 900px*/
@media (min-width:50.0625em) and (max-width:56.25em){
  /*Order*/
/*    #deliveryD, #pickDate{
        width: 82%!important;
    }*/
    
    #deliveryT #deliveryHour, #pickTime #pickHour{
        width: 47%!important;
    }
    
    #info textarea{
        max-width: 460px;
    }
    
    #menu .row .content{
        margin-left: 0px;
    }
    
    #menu .row .content.last{
        max-width: 280px;
        margin: 0 auto;
    }
    
    #info{
        padding-left: 25px;
    }
    
    /*End Order*/
}


/*until 800px*/
@media screen and (max-width: 50em){
    /*Login*/
    #contentLogin{
        display: block;
        margin-bottom: 40px;
    }
    #contentLogin > div{    
        display: block;
        max-width: 400px;
        width: 100%;
        margin: 0 auto;
    }
    #logo{
        max-width: 550px;
        width: 100%;
        margin: 0 auto;
    }

    #leftLogin img,
    #logo img{
        width: 100%;
        height: auto;
    }

    #login .description{
        text-align: center;
    }

    /*End Login*/

    /*Order*/
    #containerOrder{
        display: block;
        width: 100%;

    }
    #containerOrder > div{
        display: block;
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        padding-left: 0px;
    }

    #menu{
        border-right: none;
    }

    #info .pickRow,
    #info .pickRow > div{
        display: block!important;
        width: 100%!important;
        padding-left: 0px;
    }

    #info textarea{
        max-width: 560px;
        width: 100%;
    }
    #pickMessenger,
    #receptionFirstName,
    .pickRow > div{    
        margin-bottom: 10px;
        padding-right: 0px;
    }

    .pickRow{
        margin-bottom: 0px;
    }
    /*End Order*/

    /*Footer*/
    #footer{
        margin-top: 0px;      
        padding: 20px 0px;
        position: relative;
    }   

    #footer .inner{
        display: block;
        width: 100%;
        text-align: center;
        max-width: 100%;
    }
    #footer .inner span{
        margin-left: 0px;
        height: auto;
        display: flex;
        max-width: 150px;
        width: 100%;
        justify-content:center;
        align-items:center;
        display: -webkit-flex; /* Safari */
        -webkit-align-items: center; /* Safari 7.0+ */
        -webkit-justify-content: center; /* Safari 6.1+ */
        margin: 20px auto 0px;

    }
    /*End Footer*/
}

/*since 737px until 768px*/
@media (min-width:46.0625em) and (max-width: 48em){

}

/*since 668px until 736px*/
@media (min-width:41.75em) and (max-width: 46em){

}

/*since 641px until 667px*/
@media (min-width:40.0625em) and (max-width:41.6875em){

}

/*since 601px until 640px*/
@media (min-width:37.5625em) and (max-width:40em){
    /*Order*/
    #header .profile{
        width: 40%;
        padding-left: 30px;
    }   
    #header .profile .title,
    #header .profile .body{
        font-size: 14px;
    }

    #header .profile .user{
        font-size: 20px;
    }
    #header .description{
        padding-left: 30px;
    }
    /*End Order*/
}

/*since 541px until 600px*/
@media (min-width:33.8125em) and (max-width:37.5em){

    /*Login*/
    #logo{
        max-width: 450px;
    }
    /*End Login*/

    /*Order*/
    #header .profile{
        width: 40%;
        padding-left: 30px;
    }   
    #header .profile .title,
    #header .profile .body{
        font-size: 14px;
    }

    #header .profile .user{
        font-size: 20px;
    }
    #header .description{
        padding-left: 30px;
    }

    #containerOrder > div{
        max-width: 500px;
    }
    #info textarea{
        max-width: 460px;
    }
    /*End Order*/


}

/*since 481px until 540px*/
@media (min-width:30.0625em) and (max-width:33.75em){
    /*Login*/
    #logo{
        max-width: 450px;
    }
    /*End Login*/

    /*Order*/
    #header .profile{
        width: 40%;
        padding-left: 30px;
    }   
    #header .profile .title,
    #header .profile .body{
        font-size: 14px;
    }

    #header .profile .user{
        font-size: 20px;
    }
    #header .description{
        padding-left: 30px;
    }

    #containerOrder > div{
        max-width: 500px;
    }
    #info textarea{
        max-width: 460px;
    }
    /*End Order*/
}

/*until 480px*/
@media screen and (max-width:30em){
    /*Login*/
    #logo{
        max-width: 350px;
    }

    #contentLogin > div{
        max-width: 300px;
    }
    /*End Login*/

    /*Order*/
    #header .profile{
        display: block;
        width: 100%;
        float: left;
        margin-top: 110px;
        padding-left: 0px;
    }   
    #header .profile p{
        text-align: center;
    }
    #header .profile .title,
    #header .profile .body{
        font-size: 14px;
    }
    #header .description img{
        width: 65%;
        height: auto;
        margin: 0 auto;
        display: block;
    }

    #header .profile .user{
        font-size: 20px;
    }
    #header .description{
        display: block;
        width: 100%;
        float: left;
        position: absolute;
        padding-left: 0px;
    }

    #containerOrder > div{
        max-width: 400px;
    }
    #info textarea{
        max-width: 360px;
    }

    #menu .row .content.last{
        margin-left: 0px;
    }
    #quantity{
        width: 100%;
    }

    #quantity .orderqty{
        max-width: 500px;
        width: 100%;
    }

    #quantity .orderqty .type,
    #quantity .orderqty .type.last{
        display: block;
        margin-right: 0px!important;
        margin-bottom: 10px;
        width: 48%!important;
    }

    #deliveryD .pickContent select,
    #pickDate .pickContent select{
        display: block;
        width: 52%!important;
    }
    /*End Order*/


}

/*since 376px until 414px*/
@media (min-width:23.5em) and (max-width:25.875em){

    /*Order*/
    #containerOrder > div{
        max-width: 350px;
    }
    #info textarea{
        max-width: 310px;
    }
    #menu .row .content{
        margin-left: 0px;
    }
    #header .profile{
        margin-top: 100px;
    }
    
    /*End Order*/    
}

/*since 361px until 375px*/
@media (min-width:22.5625em) and (max-width:23.4375em){
    /*Order*/
    #containerOrder > div{
        max-width: 325px;
    }
    #info textarea{
        max-width: 285px;
    }
    #menu .row .content{
        margin-left: 0px;
    }
    #header .profile{
        margin-top: 92px;
    }
    
    /*End Order*/   
}

/*since 321px until 360px*/
@media (min-width:20.0625em) and (max-width:22.5em){
    /*Login*/
    #logo{
        max-width: 250px;
    }

    #contentLogin > div{
        max-width: 280px;
    }

    #login input[type="submit"]{
        font-size: 15px;
        height: 35px;
    }
    /*End Login*/
    
        /*Order*/
    #containerOrder > div{
        max-width: 325px;
    }
    #info textarea{
        max-width: 285px;
    }
    #menu .row .content{
        margin-left: 0px;
    }
    #header .profile{
        margin-top: 92px;
    }
    
    /*End Order*/ 

    /*Footer*/
    #footer{
        font-size: 14px;
    }
    #footer .inner span{
        padding: 10px 20px;
    }
    /*End Footer*/
}

/*0px until 320px */
@media screen and (max-width: 20em){
    /*Login*/
    #logo{
        max-width: 250px;
    }

    #contentLogin > div{
        max-width: 280px;
    }

    #login input[type="submit"]{
        font-size: 15px;
        height: 35px;
    }
    /*End Login*/
    
    /*Order*/
    #containerOrder > div{
        max-width: 290px;
    }
    #info textarea{
        max-width: 250px;
    }
    #menu .row .content{
        margin-left: 0px;
    }
    #header .profile{
        margin-top: 85px;
    }

    /*End Order*/ 

    /*Footer*/
    #footer{
        font-size: 14px;
    }
    #footer .inner span{
        padding: 10px 20px;
    }
    /*End Footer*/
}
/*End Responsive*/