/*=
homepage.css

Description:
Styles for paishau custom homepage layout
-------------------------------------------*/


/* Browser Reset
-------------------------------------------*/

html, body {
    margin: 0px;
    font-family: arial;
}

img{
    width:100%;
    height:auto;
}

/*= Helper Classes
-------------------------------------------*/


/* Grid */

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

.medium-6 {
    width: 46%;
    padding: 10px 5%;
    text-align:center;
}


/* Alignment */

.valign {
    display: table-cell;
    vertical-align: middle;
}

.text-center{
  text-align:Center !important;
}

@media(max-width:768px) {
    .columns {
        float: none !important;
    }
    .medium-6 {
        display: block;
        width: 90% !important;
    }

}





/*= Coupon Navigation
-------------------------------------------*/

#home-navigation {
    position: relative;
    background-color: #554d99;
    z-index: 999;
}

#home-navigation #navigation {
    padding-left: 0px !important;
    width: auto;
    display: table;
    margin: 0 auto;
}

#home-navigation #navigation li {
    display: table-cell;
    text-align: center;
    margin: 0 auto;
    padding: 0px;
}

#home-navigation #navigation li:first-child a {
    border-left: 1px solid #5b52a8;
}

#home-navigation #navigation li a {
    text-decoration: none;
    color: #ffffff;
    display: block;
    padding: 30px 20px !important;
    border-right: 1px solid #5b52a8;
    transition: ease-in-out 0.2s;
    -webkit-transition: ease-in-out 0.2s;
    -moz-transition: ease-in-out 0.2s;
    -o-transition: ease-in-out 0.2s;
}

#home-navigation #navigation li a:hover {
    background-color: #5b52a8;
}

#home-navigation #navigation li i {
    font-size: 30px;
}

#home-navigation #navigation li span {
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    margin-top: 10px;
    font-size: 1.04em;
    font-family: 'Raleway', sans-serif;
    font-weight: 400;
}

.navigationCoupon {
    background-color: #e2c388;
    position: absolute;
    height: 100%;
    display: flex;
    right: 0px;
    top: 0px;
    padding: 0px 30px;
    text-transform: uppercase;
    align-items: center;
}

.navigationCoupon span {
    display: block;
    text-align: center;
    color: #ffffff;
}

.couponTitle {
    font-size: 23px;
    letter-spacing: 0.5px
}

.couponAmt {
    font-size: 30px;
    font-weight: bold;
    margin-top: 1px;
    margin-bottom: 5px;
    letter-spacing: -2px;
}

.couponCta {
    font-size: 15px;
}

@media (max-width:768px) {

    #mobileTrigger {
        width: 90px;
        height: 90px;
        position: relative;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        background-color: #554d99;
    }
    #mobileTrigger .bar {
        width:100%;
        max-width: 30px;
        display: block;
        height: 3px;
        margin: 0 auto 7px;
        background-color: #ffffff;
    }
    #home-navigation #navigation li span {
       font-size:12px;
    }
    #mobileTrigger .bar:last-child {
        margin-bottom: 0px;
    }
    #home-navigation #navigation {
        display: block;
    }
    #home-navigation #navigation li {
        display: block;
    }
    #home-navigation #navigation li a {
        border: none;
        padding: 15px 0px !important;
        border-bottom:1px solid #5b52a8;
    }
    #navigation {
        position: absolute;
        background-color: #554d99;
        top: 90px;
        transition: ease-in-out 0.2s;
        height: 0px;
        opacity: 0 !important;
        width: 120px !important;
    }
    #navigation.active {
        height: auto;
        opacity: 1 !important;
    }
    .navigationCoupon {
        padding: 0px 15px;
    }
    .couponTitle, .couponAmt, .couponCta {
        font-size: 17px;
    }
    .couponAmt {
        font-size: 25px;
        font-weight: bold;
        margin-top: 1px;
        margin-bottom: 5px;
        letter-spacing: -2px;
    }
    .couponCta {
        font-size: 13px;
    }
}


/*= Page Sections
-------------------------------------------*/

.home-section:nth-child(even){
    background-color:#efefef;
}

.sectionContainer{
    max-width:1140px;
    margin:0 auto;
    padding: 30px 0px;
}

/* Text */

.home-section h3{
    font-size:35px;
    font-family:avenir;
    margin-bottom:10px !important;
}

.home-section p{
    font-size:15px;
    font-weight:100;
    line-height:1.6em;
}



/*= Buttons
-------------------------------------------*/

.btn{
   text-decoration:none;
   color:#ffffff;
   font-weight:bold;
   background-color:#e2c388;
   padding:15px 0px;
   text-align:center;
   text-transform:uppercase;
   width:100%;
   display:block;
   max-width:250px;
   font-size:20px;
   margin:30px auto 0px;
   transition:ease-in-out 0.2s;
   -webkit-transition:ease-in-out 0.2s;
   -moz-transition:ease-in-out 0.2s;
   -o-transition:ease-in-out 0.2s;
}

.btn:hover{
    opacity:0.9;
}


/*= Featured
-------------------------------------------*/

.featuredTitle, .featuredLogos{
    display:inline-block;
    vertical-align:top;
}

.featuredLogos{
    width: 80%;
}

.featuredLogos ul{
    margin:0px;
    padding:0px;
}

.featuredLogos li{
    display:inline-block;
    vertical-align: top;
    padding:0px 2%;
}

.featuredLogos li img{
    max-width: 140px;
}

.featuredTitle{
    margin-right:20px;
}


.featuredTitle h4{
    text-transform:uppercase;
    font-family:avenir;
    margin:0px !important;
}


@media(max-width:768px){
    .featuredTitle{
        text-align:center;
        width:100%;
        display:block;
    }
    .featuredLogos{
        width:100%;
    }
    .featuredLogos li{
        vertical-align: top;
        margin-top:20px;
        text-align:center;
        display:block;
    }

     .featuredLogos li img{
        width: 100% !important;
     }
}