﻿@font-face {
    font-family: 'bebas_neuebold';
    src: url('/fonts/bebasneue_bold-webfont.eot');
    src: url('/fonts/bebasneue_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bebasneue_bold-webfont.woff2') format('woff2'),
         url('/fonts/bebasneue_bold-webfont.woff') format('woff'),
         url('/fonts/bebasneue_bold-webfont.ttf') format('truetype'),
         url('/fonts/bebasneue_bold-webfont.svg#bebas_neuebold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'bebas_neuebook';
    src: url('/fonts/bebasneue_book-webfont.eot');
    src: url('/fonts/bebasneue_book-webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/bebasneue_book-webfont.woff2') format('woff2'),
         url('/fonts/bebasneue_book-webfont.woff') format('woff'),
         url('/fonts/bebasneue_book-webfont.ttf') format('truetype'),
         url('/fonts/bebasneue_book-webfont.svg#bebas_neuebook') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'HelveticaNeueLTPro-Cn';
    src: url('/fonts/HelveticaNeueLTPro-Cn.eot');
    src: url('/fonts/HelveticaNeueLTPro-Cn.eot?#iefix') format('embedded-opentype'),
         url('/fonts/HelveticaNeueLTPro-Cn.woff') format('woff'),
         url('/fonts/HelveticaNeueLTPro-Cn.ttf') format('truetype'),
         url('/fonts/HelveticaNeueLTPro-Cn.svg#HelveticaNeueLTPro-Cn') format('svg');
}

@font-face {
    font-family: 'HelveticaNeueLTPro-LtCn';
    src: url('/fonts/HelveticaNeueLTPro-LtCn.eot');
    src: url('/fonts/HelveticaNeueLTPro-LtCn.eot?#iefix') format('embedded-opentype'),
         url('/fonts/HelveticaNeueLTPro-LtCn.woff') format('woff'),
         url('/fonts/HelveticaNeueLTPro-LtCn.ttf') format('truetype'),
         url('/fonts/HelveticaNeueLTPro-LtCn.svg#HelveticaNeueLTPro-LtCn') format('svg');
}

body {
    background-color:#1b2d57;
    background-image:url(/Content/Images/background.jpg);
    background-size:cover;
    font-family:HelveticaNeueLTPro-Cn;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    background-color:#1b2d57;
    color:#fff;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    /*max-width: 280px;*/
}

a {
    color:#fff;
    text-decoration: underline;
}

a:focus, a:hover {
    color: #fff;
}

.master-content {
    background-color:#1b2d57;
    color:#fff;
    margin:0 auto;
    padding-bottom:20px;
}

.rosella-logo {
    padding:15px;
}

.main-image {
    position:relative;
    margin:0 auto;
}

#main-image-desktop {
    max-width:100%;
}

#main-image-mobile {
    max-width:100%;
    display:none;
}

.big-msg {
    font-size:1.4em;
    min-height:400px;
    padding-top:60px;
    text-align:center;
}

.big-msg h2 {
    font-weight:bold;
}

.content {
    background-color:#1b2d57;
    color:#fff;
    padding-bottom:20px;
}

.logos {
    width:620px;
    margin:20px auto;
    text-align:center;
}

.page1-header {
    text-align:center;
    font-family:bebas_neuebold;
    font-size:5.3em;
    text-transform:uppercase;
}

.page1-header img {
    margin-left:20px;
    /*margin-bottom:8px;*/
}

#mobileBtns{
    display:none;
}

.page1-subheader {
    text-align:center;
    font-family:bebas_neuebook;
    font-size:1.7em;
    margin:0 85px 15px 85px;
    font-weight:bolder;
}

.page1-fineprint {
    font-family:HelveticaNeueLTPro-LtCn;
    text-align:left;
    margin:0 85px;
    font-size:1.3em;
}

.page2-header {
    text-align:center;
    font-family:bebas_neuebold;
    font-size:4em;
    text-transform:uppercase;
}

.page2-subheader {
    text-align:center;
    font-family:bebas_neuebook;
    font-size:1.65em;
    margin-bottom:15px;
}

.page2-form {
    margin:0 40px;
}

.page2-checkboxes {
    text-align:center;
    margin-top:20px;
    vertical-align:middle;
}

.page2-buttons {
    text-align:center;
    margin-bottom:20px;
}

.tandc {
    color:#fff;
}

.tandc a {
    color:#fff;
}

.tandc a:focus !important, .tandc a:hover !important {
    color:#fff;
    text-decoration:underline;
}

.page3-header {
    text-align:center;
    font-family:bebas_neuebold;
    font-size:4.5em;
    text-transform:uppercase;
}

.page3-info {
    margin:0 40px 20px 40px;
    font-size:1.3em;
}

.page3-social {
    text-align:right;
}

.page3-rosella {
    text-align:center;
}

.fb-share {
    width:680px;
    margin:0 auto;
    font-size:20px;
}

ul.share-buttons {
  list-style: none;
  padding: 0;
}

ul.share-buttons li {
  display: inline;
}

.footer {
    /*background-color:#ffffff;*/
    padding:10px;
}

.footer-links {
    color:#1b2d57;
    padding-top:20px;
    font-weight:bold;
    font-size:1.4em;
    float:right;
    padding:10px 0;
}

.footer-links a {
    color:#1b2d57;
    text-decoration:none;
}

.footer-links a:hover {
    color: #1b2d57;
    text-decoration: underline;
}

.contact-popup table {
    margin-left:40px;
    font-size:20px;
}

.contact-popup td {
    padding:5px;
}

.contact-popup i {
    font-size:30px;
}

.contact-popup {
    color:#1b2d57;
}

.contact-popup a {
    color:#1b2d57;
    text-decoration:none;
}

.field-validation-error {color: #f00;}
.field-validation-valid { display: none;}
.input-validation-error { border: 1px solid #f00; background-color: #fee; }
.validation-summary-errors { font-weight: bold; color: #f00;}
.validation-summary-valid { display: none;}

@media (max-width: 767px) {

    body {
        background-image:none;
        background-size:auto;
    }

    /*.container {
        padding:0;
    }

    .content {
        padding:10px;
    }*/

    .rosella-logo img {
        height:50%;
        width:50%;
    }

    #main-image-desktop {
        display:none;
    }

    #main-image-mobile {
        display:block;
    }

    .page1-header {
        font-size:1.1em;
    }

    .page1-header img {
        display:none;
    }

    .page1-subheader {
        display:none;
    }

    .page1-fineprint {
        margin:10px 0;
        padding:0 15px;
        font-size:.7em;
    }

    .page1-woolworths {
        display:none;
    }

    #mobileBtns {
        text-align:center;
        display:block;
    }

    #mobileBtns img {
        height:40%;
        width:40%;
    }
    
    .page2-soup-cans {
        height:71px;
        width:92px;
        top:-80px;
        right:0;
    }

    .page2-soup-cans img {
        height:71px;
        width:92px;
    }

    .page2-header {
        font-size:1.1em;
    }

    .page2-subheader {
        margin:10px 0;
        font-size:.6em;
    }

    .page2-form {
        margin:0;
        font-size:.6em;
    }

    .page2-checkboxes {
        padding-top:5px;
        text-align:left;
        
    }

    .page2-buttons img, .page2-buttons input {
        height:40%;
        width:40%;
    }

    .boot-size {
        width:100%; 
        display:block; 
        margin-right:0;
    }

    .page3-soup-cans {
        height:68px;
        width:127px;
        top:-75px;
        right:0;
    }

    .page3-soup-cans img {
        height:68px;
        width:127px;
    }

    .page3-header {
        font-size:1.1em;
    }

    .page3-info {
        font-size:.6em;
        margin:0 40px 20px 40px;
    }

    .page3-info img {
        height:40%;
        width:40%;
    }

    .page3-social {
        text-align:center;
        margin:20px;
    }

    .page3-rosella {
        text-align:center;
    }

    .page3-rosella img {
        height:50%;
        width:50%;
    }

    .fb-share {
        width:auto;
        font-size:.8em;
    }

    .footer {
        text-align:center !important;
    }

    .footer img {
        height:40%;
        width:40%;
    }

    .footer-links {
        color:#fff;
        font-size:.7em;
        text-align:center !important;
        float:none;
    }

    .footer-links a {
        color:#fff;
    }

    .logos img {
        width:30%;
        height:30%;
    }

    .logos {
        width:300px;
        margin:20px auto;
    }
}
