﻿html,
body,
.wrap {
    height: 100%;
}

    body > .wrap {
        height: auto;
        /*min-height: 100%;*/
    }

section.wrap {
    position: relative;
    width: 100%;
}


/* ===== HEADER ===== */

header {
    position: relative;
    width: 100%;
    height: 53px;
    margin-bottom: 20px;
}

@media (min-width: 992px) {
    header {
        height: 90px;
    }
}

@media only screen and (min-width: 640px) and (max-width: 767px) {
    header {
        height: 121px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    header {
        height: 50px;
        margin-bottom: 0;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    header {
        height: 188px;
    }
}


/* ========== MAIN ========== */

main {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    padding-top: 55px;
}


/* -- DESKTOP MEDIO -- */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    /*main {
        padding: 0 0 256px 0;
    }*/
}


/* -- TABLETS -- */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    main {
        padding-top: 158px;
    }
}


/* -- PHONES -- */

@media only screen and (max-width: 767px) {
    /*main {
        padding: 0;
    }*/
    padding-top: 0px;
}


/* ========== FOOTER ========== */

footer {
    /*position: relative;
    width: 100%;
    height: 220px;
    margin-top: -220px;*/
}


/* -- DESKTOP MEDIO -- */

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    footer {
        /* height: 256px;
        margin-top: -256px;*/
    }
}


/* -- TABLETS -- */

@media only screen and (min-width: 768px) and (max-width: 991px) {
    footer {
        /*height: 230px;
        margin-top: -230px;*/
    }
}


/* -- PHONES -- */

@media only screen and (max-width: 767px) {
    footer {
        /*height: auto;
        margin-top: 0;*/
    }
}


/* ========== COMPONENTS ========== */

.flag-cards {
    background: url('../images/ico/32/sprite-flag-cards.png') no-repeat top left;
    width: 32px;
    height: 32px;
}

    .flag-cards.amex-disable {
        background-position: 0 0;
    }

    .flag-cards.amex-enable {
        background-position: -32px 0;
    }

    .flag-cards.mastercard-disable {
        background-position: -64px 0;
    }

    .flag-cards.mastercard-enable {
        background-position: -96px 0;
    }

    .flag-cards.visa-disable {
        background-position: -128px 0;
    }

    .flag-cards.visa-enable {
        background-position: -160px 0;
    }

select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
}
/* -- DESKTOP -- */


/*@media only screen and (min-width: 1200px) {}*/


/* -- DESKTOP MEDIO -- */


/*@media only screen and (min-width: 992px) and (max-width: 1199px) {}*/


/* -- TABLETS -- */


/*@media only screen and (min-width: 768px) and (max-width: 991px) {}*/


/* -- PHONES -- */


/*@media only screen and (max-width: 767px) {}*/
@media (max-width: 638px) {
    main {
        /*padding-top: 70px;*/
        padding-top: 26px;
    }
}

@media (max-width: 375px) {
    main {
        /*padding-top: 78px;*/
        padding-top: 9px;
    }
}

@media (max-width: 320px) {
    main {
        /*padding-top: 90px;*/
        padding-top: 0px;
    }
}
