/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Build: Australia Post - SCM
// Version 1.0.0
// File: Global Stylesheet
// Author: Lucas Jordan
// Copyright Owner: Raremedia Pty Ltd (Andrew Davidson)
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/


/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Fonts
# Normalize
# Typography
# Elements
# Forms
# Header
# Accessibility
# Alignments
# Clearings
# Base Structure
# Widgets
# Page Content
# Media queries
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Fonts
--------------------------------------------------------------*/

/* APLetter */
@font-face {
    font-family: "APLetter";
    font-weight: 100;
    font-style: normal;
    src: local("AP Letter Light"), local("APLetter Light"), local("APLetter-Light"), url(/web/fonts/APLetter_Web-Light.otf) format("opentype");
}
@font-face {
    font-family: "APLetter";
    font-weight: 300;
    font-style: normal;
    src: local("AP Letter Regular"), local("APLetter Regular"), local("APLetter-Regular"), url(/web/fonts/APLetter_Web-Regular.otf) format("opentype");
}
@font-face {
    font-family: "APLetter";
    font-weight: 600;
    font-style: normal;
    src: local("AP Letter Medium"), local("APLetter Medium"), local("APLetter-Medium"), url(/web/fonts/APLetter_Web-Medium.otf) format("opentype");
}
@font-face {
    font-family: "APLetter";
    font-weight: 800;
    font-style: normal;
    src: local("AP Letter Bold"), local("APLetter Bold"), local("APLetter-Bold"), url(/web/fonts/APLetter_Web-Bold.otf) format("opentype");
}

/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/

html,
body {
    margin: 0;
    padding: 0;
    display: block;
    position: relative;
    background-color: #f4f3f1;
    color: #382f2d;
    min-height: 100%;
    /* Overwrite default bootstrap 3 font size which is 14px */
    font-size: 15px;
    line-height: 130%;
}
* {
    box-sizing: border-box;
}

p {
    margin: 0 0 12px;
    line-height: 140%;
}

/* Reset Links */
a,
a:link,
a:visited,
a:focus {
    color: #ce1e2c;
    text-decoration: underline;
    outline: 0;
    border: 0;
}
a:hover,
a:active {
    color: #000000;
    text-decoration: underline;
    outline: 0;
    border: 0;
}
.group:after {
    content: "";
    display: table;
    clear: both;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: "APLetter", Arial, sans-serif;
    color: #382f2d;
}
h1,
.h1 {
    font-size: 2.0526315789473686em;  /*38px;*/
    font-weight: 600;
}
h2,
.h2 {
    font-size: 2em; /*39px;*/ /* How it works */
    font-weight: 600;
}
h3,
.h3 {
    font-weight: 600;
}
h4,
.h4 {
    font-weight: 600;
}
h5,
.h5 {
    font-weight: 600;
}
h6,
.h6 {
    font-weight: 600;
}
p,
li,
label {
    font-family: Arial, sans-serif;
}


/* Set H tags into EM's using http://www.w3schools.com/tags/ref_pxtoemconversion.asp */
h1,
.h1 {
    font-size: 2.53em;  /*38px;*/
}
h2,
.h2 {
    font-size: 2em; /*30px;*/
}
h3,
.h3 {
    font-size: 1.33em; /*20px;*/
}
h4,
.h4 {
    font-size: 1.067em; /*16px;*/
}
h5,
.h5 {
    font-size: 0.934em; /*14px;*/
}
h6,
.h6 {
    font-size: 0.8em; /*12px;*/
}



/*--------------------------------------------------------------
# Elements
---------------------------------------------------------------*/

/* BUTTONS */

#address_id label::before {
    content: "Address Line 1";
}


/* Default */
.form-control[readonly] {
    /*background-color:white !important;*/
}
.af_item, .af_footer  {
    margin-bottom:0px !important;
}
ul.af_list {
    width:calc(100% - 30px);
    border-radius: 3px;
}
ul.af_list li.af_item {
    padding: 8px 5px !important;
}
ul.af_list li.af_item.af_hover {
    background-color:#da1f2e !important;
}

.btn_default,
.btn_default:link,
.btn_default:active {
    font-family: "APLetter", Arial, sans-serif;
    color: #414042;
    font-weight: 600;
    font-size: 1.25em /*19px*/;
    text-decoration: none;
    line-height: 120%;
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    padding: 8px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    background-color: #e3e3e3;
    -webkit-transition: background-color 0.30s ease-in-out, background-position 0.30s ease-in-out;
    -moz-transition: background-color 0.30s ease-in-out, background-position 0.30s ease-in-out;
    -o-transition: background-color 0.30s ease-in-out, background-position 0.30s ease-in-out;
    transition: background-color 0.30s ease-in-out, background-position 0.30s ease-in-out;
    outline: 0;
    margin-bottom: 15px;
}

.btn_default:hover {
    text-decoration: none;
}

.btn_default:active {
    -webkit-transition: none;
    -webkit-box-shadow: inset 1px 2px 8px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: inset 1px 2px 8px 0 rgba(0,0,0,0.2);
    box-shadow: inset 1px 2px 8px 0 rgba(0,0,0,0.2);
}
.btn_default.disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.65;
}

.btn_wide {
    display: block;
    width: 100%;
}

.btn_default.btn_tall {
    padding: 30px 20px;
    -webkit-transition:.4s ease all;
    -o-transition:.4s ease all;
    transition:.4s ease all;
}

.btn_default.btn_medium {
    padding: 20px 20px;
    -webkit-transition:.4s ease all;
    -o-transition:.4s ease all;
    transition:.4s ease all;
    color:white;
}

.btn_default.btn_small {
    font-size: 1.15em /*18px*/;
    font-weight: 400;
}
.btn_default.btn_small:hover {
    background-position: 0 -25px;
}

.btn_default.btn_medium:hover {
    background:none;
    background-color:white;
    color:#da1f2e;
}


/* Dark Gray */
.btn_darkgrey,
.btn_darkgrey:link,
.btn_darkgrey:visited {
    color: #ffffff;
    background-color: #333333;
    background-image: -moz-linear-gradient(#414042, #333333);
    background-image: -webkit-linear-gradient(#414042, #333333);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#414042), to(#333333));
    background-image: -o-linear-gradient(#414042, #333333);
    background-image: linear-gradient(#414042, #333333);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: repeat-x;
    border: 2px solid #333333;
}
.btn_darkgrey:hover {
    background:none;
    background-color:white !important;
    color:#333333;
}
.btn_darkgrey:active {
    color: #ffffff;
    background-color: #382f2d;
    border: 2px solid #333333;
}

/* Red */
.btn_red,
.btn_red:link,
.btn_red:visited,
.btn_red_open {
    color: #ffffff;
    background-color: #da1f2e;
    background-image: -moz-linear-gradient(#c71d2b, #da1f2e);
    background-image: -webkit-linear-gradient(#c71d2b, #da1f2e);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#c71d2b), to(#da1f2e));
    background-image: -o-linear-gradient(#c71d2b, #da1f2e);
    background-image: linear-gradient(#c71d2b, #da1f2e);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: repeat-x;
    border: 2px solid #da1f2e;
}
.btn_red:hover {
    color: #da1f2e;
    background:none;
    background-color: white;
}
.btn_red:active {
    color: #ffffff;
    background-color: #da1f2e;
    border: 2px solid #da1f2e;
}

/* Clear */
.btn_clear,
.btn_clear:link,
.btn_clear:visited {
    color: #da1f2e;
    background-color: #f7f7f7;
    background-image: -moz-linear-gradient(#ffffff, #f7f7f7);
    background-image: -webkit-linear-gradient(#ffffff, #f7f7f7);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f7f7f7));
    background-image: -o-linear-gradient(#ffffff, #f7f7f7);
    background-image: linear-gradient(#ffffff, #f7f7f7);
    background-position: 0 0;
    background-size: 100% 100%;
    background-repeat: repeat-x;
    border: 2px solid #da1f2e;
}
.btn_clear:hover {
    color: white;
    background:none;
    background-color: #da1f2e;
}
.btn_clear:active {
    color: #da1f2e;
    background-color: #f7f7f7;
    border: 2px solid #da1f2e;
}

/* Remove */
.btn_remove {
    padding: 4px 7px 4px 6px !important;
    white-space: nowrap;
    font-weight: 300 !important;
    line-height: 100% !important;
    margin-bottom: 0 !important;
}
.btn_remove i {
    border: 2px solid #ffffff;
    border-radius: 16px;
    font-size: 15px;
    padding: 5px 4px 4px 4px;
    width: 24px;
    height: 24px;
    line-height: 10px;
    margin-right: 5px;
}

.btn_remove span {
    vertical-align: top;
    display: inline-block;
    padding-top: 3px;
}

.btn_post {
    display: block;
    position: relative;
    padding: 5px 10px;
    margin: 0 0 10px 0;
    border-radius: 3px;
    font-family: "APLetter", Arial, sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-decoration: none !important;
    text-align: center;
}
.btn_dark {
    background-color: #414042;
    color: #ffffff !important;
    padding: 17px 46px;
    height: 85px;
}

/* Join mailing list button*/
.btn_red_outline {
    color: #da1f2e !important;
    border: solid 2px #da1f2e !important;
    padding: 26px 46px;
    height: 85px;
}

/* add product to wishlist button*/
.btn_product,
.btn_thanks {
    display: block;
    position: relative;
    padding: 5px 10px;
    margin: 10px 0;
    border-radius: 3px;
    font-family: "APLetter", Arial, sans-serif;
    font-weight: 700;
    font-size: 14px;
    text-indent: 1%;
    text-decoration: none !important;
    color: #da1f2e !important;
    border: solid 2px #da1f2e !important;
    -webkit-transition: background 0.4s ease-out;
    -moz-transition: background 0.4s ease-out;
    -o-transition: background 0.4s ease-out;
    transition: background 0.4s ease-out;
}

.btn_thanks:hover {
    color:white !important;
    background-color:#da1f2e !important;
}

/* Background heart logo for product buttons "Add to wish list"*/
.logo_heart {
    background-image: url("../image/logo_heart01a.svg");
    background-position: 98% 50%;
    background-repeat: no-repeat;
    background-size: 19.457px 17.473px;
    -webkit-transition: background 0.4s ease-out;
    -moz-transition: background 0.4s ease-out;
    -o-transition: background 0.4s ease-out;
    transition: background 0.4s ease-out;
}

/* When a link is active/ given active class switch out heart logo for solid version */
.active.logo_heart {
    background-image: url("../image/logo_heart01b.svg");
    background-size: 19.457px 17.473px;
}
.product_item .processing {
    background-image: url("../image/logo_heart02a.svg");
}
.product_item .processing.active {
    background-image: url("../image/logo_heart02b.svg");
}

/*clear-fix class */
.group:after {
    content: "";
    display: table;
    clear: both;
}


/* GLOBAL STYLES */

.container {
    padding-left: 30px;
    padding-right: 30px;
}

.how-it-works-h2 h2 {
    margin-top:0px;
}

.list_un_indent {
    padding-left: 25px;
}
.indent_paragraph {
    text-indent: 25px;
}
.social_icon {
    width: auto;
    height: 65px;
}
.clr {
    clear: both;
    height: 0;
    line-height: 0;
}

/* font weight (fw-) */
.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}

/* column padding (cp-) */
.cp-none {
    padding: 0 0 0 0;
}
.cp-right {
    padding: 0 0 0 20px;
}
.cp-left {
    padding: 0 20px 0 0;
}

/* column structure */
.col-main-left .col-left {
    border-right: solid 1px #d1d3d4;
    padding-right: 30px;
}
.col-main-left .col-right {
    padding-left: 30px;
}
.col-main-right .col-right {
    border-left: solid 1px #d1d3d4;
    padding-left: 30px;
}
.col-main-right .col-left {
    padding-right: 30px;
}

/* Row with equal height columns */
.row-eq-height {
    display: block !important; /* fall back for ie*/
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -ms-flexbox !important;
    display: flex !important;
}

/* CONTENT STRUCTURE */

main {
    position: relative;
    display: block;
    margin-top: -5%;
    z-index: 1000;
}
main .content_container {
    background-color: #ffffff;
    border-color: #ffffff;
    border-radius: 6px;
    padding: 30px;
    -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,0.20);
    -moz-box-shadow: 0 0 8px 0 rgba(0,0,0,0.20);
    box-shadow: 0 0 8px 0 rgba(0,0,0,0.20);
}
.content_container h1 {
    margin: 20px 0 30px 0;
}

main .content_container > .row > .col-md-8 {
    padding-right: 30px;
}

main .content_container ol > li {
    padding: 0 0 15px 5px;
}
main.subpage-content {
    padding-top: 25px;
}

main ol,
ul {
    margin: 0 0 15px 0;
    padding-left: 25px;
}
main ul li {
    margin-bottom: 16px;
}
.right_content_container .list-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-around;
}
.list-inline li {
    margin-bottom:0px !important;
}

.non-negative-margin {
    margin-right: 0;
    margin-left: 0;
}

@media screen and (min-width: 1024px) {
    .heart {
        width:19.457px;
        height:17.473px;
        position: absolute;
        top: 22.5px;
        right: 31px;
        opacity:0;
        position:absolute;
        -webkit-animation: xAxis 1s cubic-bezier(.05,.76,.43,.47);
        animation: xAxis 1s cubic-bezier(.05,.76,.43,.47);
        transform-origin: center;
        z-index: 10;
    }

    @keyframes xAxis {
      0% {
        transform: scale(1);
        opacity:100;
      }
      100% {
        transform: scale(2.2);
        opacity:0;
      }
    }

    .heart2 {
        width:19.457px;
        height:17.473px;
        position: absolute;
        top: 22.5px;
        right: 31px;
        opacity:0;
        position:absolute;
        -webkit-animation: xAxis 1.5s cubic-bezier(.16,.5,.43,.47);
        animation: xAxis 1.5s cubic-bezier(.16,.5,.43,.47);
        transform-origin: center;
        z-index: 10;
    }

    @keyframes xAxis {
      0% {
        transform: scale(1);
        opacity:70;
      }
      100% {
        transform: scale(2.2);
        opacity:0;
      }
    }
}