/*!
 * Global Style for almost every project
 * Defines rows and cols for the basic structure of any HTML template
 * Useful Classes are included
 *
 * APTO GR
 */

body {

    background-color: #eee;
    font-family: Roboto,serif;
    margin: 0;
    overflow-x: hidden;
}

.container {
    padding: 0;
    max-width: 1300px;
    margin: 0 auto;

}

main {

    padding: 60px 0;

}
/*********************************
  Structure Style - Rows and Cols
**********************************/
.col .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.row.no-margin-row {
    margin-bottom: 0;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 0.75rem;
    min-height: 1px;
}

.row .col.no-pad-col {
    padding:0;
}

.row .col[class*="push-"], .row .col[class*="pull-"] {
    position: relative;
}

.row .col.s1 {
    width: 8.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s2 {
    width: 16.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s4 {
    width: 33.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s5 {
    width: 41.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s7 {
    width: 58.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s8 {
    width: 66.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s10 {
    width: 83.3333333333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s11 {
    width: 91.6666666667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}


.clearfix {
    clear: both;
}

.card {
    position: relative;
    margin: 0.5rem 0 1rem 0;
    background-color: #fff;
    -webkit-transition: -webkit-box-shadow .25s;
    transition: box-shadow .25s;
    border-radius: 4px;
    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
}

.card:hover {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

/*********************************
  Input Fields
**********************************/

.input-field {
    position:relative;
}

.input-field > h5 {

    font-family: Montserrat, serif;
    font-weight: 700;
    color: #5a5d65;
    font-size: 0.9rem;
    display: block;
    margin: 5px 0;

}

.input-field:not(:first-child) {

    margin-top: 10px;

    padding-top: 10px;

}

.input-field label {

    display: block;
    margin-bottom: 5px;
    font-weight: 700;
    font-size: 0.9rem;
}

.input-field input {

    background-color: #ddd;
    border: 0;
    height: 45px;
    line-height: 45px;
    border-radius: 4px;
    margin-top: 2px;
    padding: 0 15px;
    width: calc(100% - 30px);
    transition: 0.2s ease-in;
    color: #222;
    font-size: 0.9rem;

}

.input-field input:focus {

    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    background-color: #fff;

}

.login-wrapper.card {

    padding: 35px 25px;
    max-width: 500px;
    display: block;
    margin: 0 auto;

}

.logo {

    text-align: center;
    font-size: 2rem;
    margin: 0 0 25px 0;
    color: #07f;

}

.login-wrapper.card h1 {

    font-size: 1.3rem;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 15px;
}

.btn {

    margin-top: 10px;
    padding: 13px 40px;
    border: 0;
    background-color: #07f;
    color: #fff;
    border-radius: 4px;
    font-weight: 700;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-decoration: none;
    transition:0.2s ease-in;
    width:100%;
}

.btn:hover {
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    background-color: #0468da;
}

.register-wrapper {

    border-top: 1px solid #e5e5e5;
    margin-top: 20px;

}

.register-wrapper h4 {

    font-size: 0.9rem;
    margin-bottom: 5px;
    color: #656060;
    font-weight: 400;

}

.btn.register {

    background-color: #ddd;
    color: #222;

}

.btn.login {

    margin-top: 25px;

}
.apto-logo img{
    display: block;
    margin: auto;
    width: 200px;
}
.insta-powered-by {
    text-align: center;
    font-size: 17px;
    color: #584d4d;
}