/* Header --------------------------------------- */
.hdr{
    /*
    margin:0 auto;
    max-width:940px
    */
}


/* HERO ----------------------------------------- */
.heroCarousel{
    will-change:background
}
.heroCarousel.u-gradientNighthawk{
    background:-webkit-linear-gradient(to bottom right,#2980b9,#2c3e50);
    background:linear-gradient(to bottom left,#2980b9,#2c3e50)
}
.ua-ms .heroCarousel{
    overflow-y:hidden
}

.heroCarousel a{
    color:#fff
}
.heroCarousel .carousel-item{
    color:#000000;
    height:540px;
    overflow-y:hidden
}

.heroCarousel-pane1{
  background: url("/media/img/taxamo-home.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width: 100%;
}
.os-iphone .heroCarousel{
  height:540px
}
.os-iphone .heroCarousel-pane1{
  background-attachment: scroll;
  height:100vh!important;
  left:0;
  position:fixed;
  top:0;
  width:100vw;
  z-index:-1
}


.box{
  background-color:#fff;
  padding: 25px 25px 25px 25px;
  width: 34%;
  opacity: 0.9;
}
.heroCarousel-pane1 h1{
  font-size:4.3rem;
  left:0px;
  line-height:1em;
  margin:0 0 10px 0;
  width:100%
}

.heroCarousel-pane1 h2{
    font-size:3rem;
    margin-bottom:20px
}
.heroCarousel-pane1 h2 strong{
    font-weight:900;
    margin-bottom:20px
}
.heroCarousel-pane1 h3{
    font-size:1.6rem;
    margin-bottom:10px;
    width:100%
}


@media (max-width:900px) {
    .button--large{
        display:block;
        font-size:2.4rem;
        margin-bottom:20px;
        text-align:center;
        width:100%
    }


    .box{
      background-color:#fff;
      padding: 25px 25px 25px 25px;
      width: 100%;
      opacity: 0.9;
    }

    .integrations h3 img{
        display:inline-block;
        height:28px;
        margin-top: 5px;
        margin-left: 5px;
        width:auto;
        vertical-align:middle;
    }

    .heroCarousel .carousel-item{
      height:460px;
      padding:0 70px
    }

    .heroCarousel h2,
    .heroCarousel h3{
        text-align: center;
    }

    .heroCarousel-pane1 h1{
        font-size:3.2rem;
        margin-bottom:20px;
        text-align: center;
        width:auto
    }
}


/* Features-------------------------------------- */
.featureSection{
    background:#efefef;
    padding:60px 0
}
.featureSection > div > h2{
    margin-left:10px;
    padding:0 0 10px
}
.featureSecion-feature{
    background:#fff;
    border-radius:2px;
    display:block;
    height:226px;
    padding:30px 0 0;
    text-align:center;
    top:0;
    transition:top .3s, transform .3s
}
.featureSecion-feature:after{
    display:none!important
}
.featureSecion-feature:hover{
    background:#2c3e50;
    color:#fff;
    text-decoration:none;
    -ms-transform:scale(1.2);
    transform:scale(1.2);
    top:-20px;
    z-index:3
}
.featureSecion-feature > .fa{
    display:block;
    font-size:8rem
}
.featureSecion-feature > strong{
    display:block;
    font-size:1.4rem;
    font-weight:600;
    line-height:1.3em;
    padding:20px;
    z-index:2
}
.featureSecion-feature > div{
    background:#fff;
    bottom:10px;
    font-size:1.4rem;
    left:0;
    padding-bottom:10px;
    position:absolute;
    transition:bottom .3s;
    width:100%
}
.featureSecion-feature:hover > div{
    background:#2c3e50;
    bottom:-46px
}
.featureSecion-feature span{
    transition:.3s;
    transition-delay:.2s;
    opacity:0
}
.featureSecion-feature:hover span{
    opacity:1
}
@media (max-width:900px) {
    .featureSection h2{
        text-align:center
    }
    .page-homepage .featureSecion-feature{
        clear:none!important;
        float:left!important;
        margin:0;
        width:50%!important
    }
}
@media (min-width:900px) {
    .featureSection{
        height:433px;
        overflow:visible
    }
}


/* Merchants------------------------------------- */
.page-homepage .merchantSection{
    border-bottom:1px #eee solid;
    padding:60px 0 0px
}
.page-homepage .merchantSection ul:after{
    clear:both;
    content:'';
    display:block;
    height:40px
}
.page-homepage .merchantSection .theWorld{
    height:auto;
    left:-320px;
    opacity:.25;
    position:absolute;
    top:-120px;
    width:100%;
    z-index:-1
}
@media (max-width:900px) {
    .merchantSection h2,
    .merchantSection h3{
        padding:0 30px
    }
    .merchantSection h2 span{
        display:block
    }
    .page-homepage .merchantSection ul::after{
        display:none
    }
    .merchantSection .col-3of12{
        clear:none;
        display:inline-block!important;
        margin-left:0!important;
        margin-right:0!important;
        padding:0 30px!important;
        vertical-align:top;
        width:48%!important;
    }
}


/* Testimonials---------------------------------- */
.page-homepage .testimonialSection{
    background:#000 url(../img/mood-hand.jpg) center center fixed no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    color:#fff;
    text-shadow:0 0 3px #000
}
.page-homepage .testimonialSection .carousel{
    height:300px
}
.ua-ms.page-homepage .testimonialSection .carousel{
    overflow-y:hidden
}
.page-homepage .testimonialSection blockquote{
    padding:10% 0 10% 30%;
    width:100%
}
.page-homepage .testimonialSection blockquote > img{
    height:auto;
    left:0;
    padding:6px;
    position:absolute;
    width:25%;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
    top:50%
}
.page-homepage .testimonialSection blockquote > p{
    font-size:1.8rem;
    line-height:2.8rem;
    margin-bottom:20px
}
.page-homepage .testimonialSection blockquote > p:before{
    content:'❛';
    font-size:4rem;
    left:-24px;
    margin-top:4px;
    opacity:.7;
    position:absolute
}
.ua-ms.page-homepage .testimonialSection blockquote > p:before{
    left:-33px;
    margin-top:-3px
}
.page-homepage .testimonialSection blockquote > p:after{
    content:'❜';
    font-size:4rem;
    margin-top:4px;
    opacity:.7;
    position:absolute
}
.ua-ms.page-homepage .testimonialSection blockquote > p:after{
    margin-top:-3px
}
.page-homepage .testimonialSection blockquote > cite{
    font-size:1.8rem;
    font-weight:900;
    font-style:normal
}
.page-homepage .testimonialSection .arrow{
    color:#fff;
    font-size:2.6rem
}
.page-homepage .testimonialSection .arrow--left{
    left:10%
}
.page-homepage .testimonialSection .arrow--right{
    right:10%
}
@media (max-width:900px) {
    .page-homepage .testimonialSection .arrow--left{
        left:-8px
    }
    .page-homepage .testimonialSection .arrow--right{
        right:-8px
    }
    .page-homepage .testimonialSection .carousel{
        height:460px
    }
    .page-homepage .testimonialSection blockquote{
        padding:5% 50px;
        width:100%
    }
    .page-homepage .testimonialSection blockquote img{
        display:none
    }
}


/* Clients--------------------------------------- */
.page-homepage .clientSection{
    background:#efefef;
    padding:30px;
    text-align:center
}
.page-homepage .clientSection img{
    display:inline-block;
    height:80px;
    margin:0 9px;
    width:auto
}