#nav-toggle { position: absolute; right:-5px; top:4px;cursor: pointer; padding: 8px 35px 16px 0;z-index: 2000; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {  cursor: pointer;  border-radius: 1px;  height: 2px;  width: 25px;  background: white;  position: absolute;  display: block;  content: '';  }
#nav-toggle span:before {  top: -10px;  }
#nav-toggle span:after {  bottom: -10px;  }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after {transition: all 500ms ease-in-out;  }
#nav-toggle.active span {  background-color: transparent;  }
#nav-toggle.active span:before, #nav-toggle.active span:after {  top: 0;  }
#nav-toggle.active span:before { transform: rotate(45deg);}
#nav-toggle.active span:after { transform: rotate(-45deg);}
.navbar-default .navbar-toggle {border: 0;}
.ex-logo-xs{    display: inline-block;  position: absolute;  left: 40%; top: 4px;z-index: 2000;}
.ex-logo-xs img{width: 50px;}

#toTop{position:fixed;right:10px;bottom:10px;cursor:pointer;width:35px;height:35px;background-color:#39f;text-indent:-9999px;display:none;-webkit-border-radius:60px;-moz-border-radius:60px;border-radius:60px;z-index:2000}
#toTop span{position:absolute;top:50%;left:50%;margin-left:-7px;margin-top:-10px;height:0;width:0;border:6px solid transparent;border-bottom-color:#fff}
#toTop:hover{background-color:#e74c3c;opacity:1;filter:alpha(opacity=100);-ms-filter:alpha(opacity=100)}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus{background: transparent;}

@media only screen and (min-width: 1025px) and (max-width: 1366px) {

  .ex-devices::after,
  .ex-iphone::after,
  .ex-galaxy::after{ display: table; content:" ";}

  .ex-title-big{font-size:48px;}
  .ex-subtitle-big{margin-top: -20px;}
  #key-features .ex-subtitle-small{margin-bottom: 13px;}
  .ex-youtube >iframe{ width:926px ; height: 520px;  margin: 0 100px;}
  .secreens img { width: 270px;}
  #hero-area .ex-appbar {margin-top:130px;}
  #hero-area{background-size:1600px auto;  background-position: -130px 30px;}
}
@media only screen
and (min-width: 769px)
and (max-width: 1024px) {
  .navbar-nav {margin: 11px -15px 3px -15px;font-size:12px; }
  .navbar-default .navbar-nav > li {margin: 0 5px 4px 5px;}
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {padding: 5px 5px;}
  .navbar-default .navbar-nav li a,
  .navbar-default .navbar-nav li a:hover {padding: 5px 5px;}

  .ex-extratop{ top: 85%;}
  .ex-title-big{font-size:40px}
  .ex-subtitle-big{font-size:20px}
  .secreens img { width: 220px;}
  .ex-feature-img{width: auto}
  .ex-app-secreens{left:64px;}

  .ex-devices{position: relative; width: 340px; height: auto; margin: 0 auto;}
  .ex-iphone{position: absolute; z-index: 20;  left:145px;}
  .ex-galaxy{position: absolute; z-index: 18;}
  .ex-galaxy img, .ex-iphone img{ width: 200px; height: 343px;}
  .ex-iphone::after{width: 200px;}
  .ex-devices::after{}
  .ex-devices::after,
  .ex-iphone::after,
  .ex-galaxy::after{ display: table; content:" ";}
  .paymentIcons-par span{margin: 2px;}

  .ex-feature-item h3{font-size:12px;max-width: 120px;}

  .ex-feature-img img{ width: 390px;}
  .ex-app-secreens{width: 339px;height: 452px; top: 91px;  left: 0;  right: 0;  margin-left: auto; margin-right: auto;}
  .ex-secreen-payment, .ex-secreen-skus, .ex-secreen-search, .ex-secreen-reviews, .ex-secreen-Personalised, .ex-secreen-delivery{background-size: 339px auto; }

  #hero-area .ex-appbar {margin-top:160px;}
  #hero-area{background-size:1520px auto!important;  background-position:-190px -160px!important}
}

@media only screen
and (max-width:768px)
and (min-width:481px)
and (-webkit-min-device-pixel-ratio: 1)
{
  .navbar-nav {margin: 11px -15px 3px -15px;font-size:12px}
  .navbar-default .navbar-nav > li {margin: 0 5px 4px 5px;}
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {padding: 5px 5px;}
  .navbar-default .navbar-nav li a,
  .navbar-default .navbar-nav li a:hover {padding: 5px 5px;}

  .secreens img { width: 220px; margin: 0 auto }
  .ex-feature-img{width: auto; margin-top:0;}
  .ex-feature-img img{width: 343px}
  .ex-feature-item h3{font-size:12px;max-width: 120px;}
  .ex-logo-xs{  left: 45%;}
  #hero-area .ex-appbar {margin-top:275px;}
  #hero-area{background-size:1550px auto;  background-position:-570px -260px;}
  .ex-title-big{font-size: 36px;}
  .ex-subtitle-big{width: 300px;}
  #hero-area .ex-appbar .ex-app{top:20px;}
}
@media only screen
and (min-width: 507px)
and (max-width: 736px)
{
  .row-eq-height{display: inherit;}
  .navbar-nav {margin: 11px -15px 3px -15px;font-size:12px}
  .navbar-default .navbar-nav > li {margin: 0 5px 4px 5px; float: none!important;}
  .navbar-default .navbar-nav > .active > a,
  .navbar-default .navbar-nav > .active > a:hover,
  .navbar-default .navbar-nav > .active > a:focus {padding: 5px 5px;}
  .navbar-default .navbar-nav li a,
  .navbar-default .navbar-nav li a:hover {padding: 5px 5px;}

  .ex-title-big{font-size:30px}
  .ex-subtitle-big{font-size:18px}
  .ex-devices{width: auto; height: auto; margin: 0 auto;}
  .ex-iphone{position: static; z-index: auto; left: auto;}
  section{padding: 0;}
  #hero-area{ background-size:1024px auto;  background-position: 0 0;}
  .ex-devices::after{}
  #key-features .ex-subtitle-small {margin-bottom: 25px;}
  .ex-subtitle-small {padding-bottom: 0;}

  .ex-feature-icon {width: 50px; height: 50px; border-radius: 50%; background:rgba(0, 101, 164, 1); border: 1px solid transparent; color: rgba(255, 255, 255, 1);padding:12px 0 0 0; display: inline-block; cursor: pointer; position: relative; margin:20px; }
  .active-icon {background:rgba(255, 230, 0, 1); border: 1px solid rgba(255, 204, 0, 1); color: rgba(0, 101, 164, 1);}
  .ex-feature-icon i{ font-size: 26px; display: block; width: 50px;height: 30px;}
  .ex-feature-item {color:rgba(102, 102, 102, .9); width: 80px; display: inline-block; margin:0;}
  .ex-feature-mobile-left{float: left;}
  .ex-feature-mobile-right{float: right;}
  #feature-list-item-1,  #feature-list-item-2{  margin:0 auto;}
  #feature-list-item-2{ margin-bottom: 20px;}

  .ex-feature-img{ margin-bottom: 0; overflow: hidden; width: inherit;}
  .ex-feature-img img{ width: 270px;}
  .ex-app-secreens{ width: 234px; height: 313px;  position: absolute;  top: 56px;  left: 0; right:0; margin-left: auto; margin-right: auto;}
  .ex-secreen-payment, .ex-secreen-skus, .ex-secreen-search, .ex-secreen-reviews, .ex-secreen-Personalised, .ex-secreen-delivery{background-size: 234px auto; }

  #secreens{background:rgba(255, 230, 0, 1);}
  #secreens img{width: 270px; margin: 20px auto;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form{padding-top: 40px;}
  #info .payment-icons{float: none; margin: auto 10px;}

}
@media (width:568px){
  #hero-area .ex-appbar span{top:10px;}
}

/* ----------- iPhone 6 ----------- */
@media only screen
and (min-width: 375px)
and (max-width: 414px)
and (max-height: 736px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
  .navbar-default .navbar-nav > li {float: none!important;}
  .row-eq-height{display: inherit;}
  .ex-title-big{font-size:30px; padding: 10px; margin:0;}
  .ex-subtitle-big{font-size:18px; padding:10px 0; margin:10px 0;}
  .ex-devices{width: auto; height: auto; margin: 0 auto;}
  .ex-iphone{position: static; z-index: auto; left: auto;}
  section{padding: 0;}
  #hero-area .ex-appbar span{top:10px;}
  #key-features .ex-subtitle-small {margin-bottom: 25px;}
  .ex-subtitle-small {padding-bottom: 0;}
  .ex-hero-inner:before {height: 50%;  top: 50%;}
  .ex-custom-title{position: absolute; top: 50%; font-size: 28px;  line-height: 1.2em; right:30px; }

  .ex-extratop{position: absolute; top: 85%; right:50px;}

  .ex-feature-icon {width: 50px; height: 50px; border-radius: 50%; background:rgba(0, 101, 164, 1); border: 1px solid transparent; color: rgba(255, 255, 255, 1);padding:12px 0 0 0; display: inline-block; cursor: pointer; position: relative; margin:20px; }
  .active-icon {background:rgba(255, 230, 0, 1); border: 1px solid rgba(255, 204, 0, 1); color: rgba(0, 101, 164, 1);}
  .ex-feature-icon i{ font-size: 26px; display: block; width: 50px;height: 30px;}
  .ex-feature-item {color:rgba(102, 102, 102, .9); width: 80px; display: inline-block; margin:0;}
  .ex-feature-mobile-left{float: left;}
  .ex-feature-mobile-right{float: right;}
  #feature-list-item-1,  #feature-list-item-2{  margin:0 auto;}
  #feature-list-item-2{ margin-bottom: 20px;}

  .ex-feature-img{ margin-bottom: 0; overflow: hidden; width: inherit;}
  .ex-feature-img img{ width: 270px;}
  .ex-app-secreens{ width: 234px; height: 313px;  position: absolute;  top: 56px;  left: 0; right:0; margin-left: auto; margin-right: auto;}
  .ex-secreen-payment, .ex-secreen-skus, .ex-secreen-search, .ex-secreen-reviews, .ex-secreen-Personalised, .ex-secreen-delivery{background-size: 234px auto; }

  #secreens{background:rgba(255, 230, 0, 1);}
  #secreens img{width: 270px; margin: 20px auto;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form{margin-top: 50px;float: left!important; width: 110% ;}
  #info .payment-icons{float: none; margin: auto 10px;}
  #info h2, #info h3{font-size: 32px; font-weight: 400; padding: 0 20px;}
  .ex-feature-item h3{font-size: 12px;}

  .ex-title::after{height: 610px;}


  #hero-area{background-position:-340px 0; background-size:1326px auto;}

}

/* ----------- iPhone 6+ ----------- */
@media only screen
and (min-width: 414px)
and (max-width: 426px)
and (orientation: portrait) {
  .ex-title::after{height: 680px;}
  #hero-area{background-position:-590px -281px; background-size:1550px auto;}
  #hero-area .ex-appbar {margin: 0;}

  .navbar-default .navbar-nav > li {float: none!important;}
  .row-eq-height{display: inherit;}
  .ex-title-big{font-size:30px; padding: 10px; margin:0;}
  .ex-subtitle-big{font-size:18px; padding:10px 0; margin:10px 0;}
  .ex-devices{width: auto; height: auto; margin: 0 auto;}
  .ex-iphone{position: static; z-index: auto; left: auto;}
  section{padding: 0;}
  #hero-area .ex-appbar span{top:10px;}
  #key-features .ex-subtitle-small {margin-bottom: 25px;}
  .ex-subtitle-small {padding-bottom: 0;}
  .ex-hero-inner:before {height: 50%;  top: 50%;}

  .ex-custom-title{position: absolute; top: 50%; font-size: 28px;  line-height: 1.2em; right:30px; }

  .ex-extratop{position: absolute; top: 88%; right:50px;}

  .ex-feature-icon {width: 50px; height: 50px; border-radius: 50%; background:rgba(0, 101, 164, 1); border: 1px solid transparent; color: rgba(255, 255, 255, 1);padding:12px 0 0 0; display: inline-block; cursor: pointer; position: relative; margin:20px; }
  .active-icon {background:rgba(255, 230, 0, 1); border: 1px solid rgba(255, 204, 0, 1); color: rgba(0, 101, 164, 1);}
  .ex-feature-icon i{ font-size: 26px; display: block; width: 50px;height: 30px;}
  .ex-feature-item {color:rgba(102, 102, 102, .9); width: 80px; display: inline-block; margin:0;}
  .ex-feature-mobile-left{float: left;}
  .ex-feature-mobile-right{float: right;}
  #feature-list-item-1,  #feature-list-item-2{  margin:0 auto;}
  #feature-list-item-2{ margin-bottom: 20px;}

  .ex-feature-img{ margin-bottom: 0; overflow: hidden; width: inherit;}
  .ex-feature-img img{ width: 270px;}
  .ex-app-secreens{ width: 234px; height: 313px;  position: absolute;  top: 56px;  left: 0; right:0; margin-left: auto; margin-right: auto;}
  .ex-secreen-payment, .ex-secreen-skus, .ex-secreen-search, .ex-secreen-reviews, .ex-secreen-Personalised, .ex-secreen-delivery{background-size: 234px auto; }

  #secreens{background:rgba(255, 230, 0, 1);}
  #secreens img{width: 270px; margin: 20px auto;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form{margin-top: 50px;float: left!important; width: 110% ;}
  #info .payment-icons{float: none; margin: auto 10px;}
  #info h2, #info h3{font-size: 32px; font-weight: 400; padding: 0 20px;}
  .ex-feature-item h3{font-size: 12px;}
}

/* ----------- iPhone 5 and 5S ----------- */
@media only screen
and (min-width: 320px)
and (max-width: 375px)
and (orientation: portrait)  {

  .tooltip { display: none !important; }

  #hero-area{background-position:-450px -230px!important; background-size:1230px auto}
  .ex-title::after{height: 510px;}
  #hero-area .ex-appbar a > i {margin: 0;}
  #hero-area .ex-appbar {margin: 0;}
  #hero-area .ex-appbar span{top:10px;}
  .ex-custom-title{position: absolute; top: 50%; font-size: 28px;  line-height: 1.2em; right:20px; }
  .ex-extratop{position: absolute; top: 90%;}

  .navbar-default .navbar-nav > li {float: none!important;}
  .row-eq-height{display: inherit;}
  .ex-title-big{font-size:26px;}
  .ex-subtitle-big{font-size:18px;}
  .ex-title-big,.ex-subtitle-big{ padding:0; margin:5px 0;}

  .ex-devices{width: auto; height: auto; margin: 0 auto;}
  .ex-iphone{position: static; z-index: auto; left: auto;}
  section{padding: 0;}

  #key-features .ex-subtitle-small {margin-bottom: 25px;}
  .ex-subtitle-small {padding-bottom: 0;}
  .ex-hero-inner:before {height: 50%;  top: 50%;}


  .ex-feature-icon {width: 50px; height: 50px; border-radius: 50%; background:rgba(0, 101, 164, 1); border: 1px solid transparent; color: rgba(255, 255, 255, 1);padding:12px 0 0 0; display: inline-block; cursor: pointer; position: relative; margin:20px; }
  .active-icon {background:rgba(255, 230, 0, 1); border: 1px solid rgba(255, 204, 0, 1); color: rgba(0, 101, 164, 1);}
  .ex-feature-icon i{ font-size: 26px; display: block; width: 50px;height: 30px;}
  .ex-feature-item {color:rgba(102, 102, 102, .9); width: 80px; display: inline-block; margin:0;}
  .ex-feature-mobile-left{float: left;}
  .ex-feature-mobile-right{float: right;}
  #feature-list-item-1,  #feature-list-item-2{  margin:0 auto;}
  #feature-list-item-2{ margin-bottom: 20px;}

  .ex-feature-img{ margin-bottom: 0; overflow: hidden; width: inherit;}
  .ex-feature-img img{ width: 270px;}
  .ex-app-secreens{ width: 234px; height: 362px;  position: absolute;  top: 13px;  left: 0; right:0; margin-left: auto; margin-right: auto;}
  .ex-secreen-payment, .ex-secreen-skus, .ex-secreen-search, .ex-secreen-reviews, .ex-secreen-Personalised, .ex-secreen-delivery{background-size: 234px auto; }

  #secreens{background:rgba(255, 230, 0, 1);}
  #secreens img{width: 270px; margin: 20px auto;}
  .navbar-default .navbar-collapse, .navbar-default .navbar-form{margin-top: 50px;float: left!important; width: 110% ;}
  #info .payment-icons{float: none; margin: auto 10px;}
  #info h2, #info h3{font-size: 32px; font-weight: 400; padding: 0 20px;}
  .ex-feature-item h3{font-size: 12px;}

}


/* ----------- Galaxy S5 ----------- */
@media screen
and (min-width: 568px)
and (max-width: 736px)
and (orientation: landscape)  {
#hero-area{background-position:-450px -210px; background-size:1200px auto}
.ex-hero-inner:before {height: 25%; top: 75%;}
.ex-custom-title{position: absolute; top: -230px;  right: 20px; }
#hero-area .ex-appbar {margin-top: 250px;}
.ex-subtitle-big {width:auto; padding: 0;}
}

@media only screen and (min-width: 320px) and (max-width: 768px) {
  .tooltip { display: none !important; }
}
@media only screen
and (width: 375px){
  .ex-extratop{right:50px;}
}