/* Put it all in one document and use this: */
header.masthead .app-link{
  height: 45px;
  line-height: 35px;
}

.app-link img  {
  max-height: 45px;
  transition: transform .2s;
    margin-left: 30px;
}
.app-link:hover  img  {
  -ms-transform: scale(1.5); /* IE 9 */
  -webkit-transform: scale(1.5); /* Safari 3-8 */
  transform: scale(1.2);
}

#sale_points .libya-img{
  max-width: 100% !important;
}
#mainNav {
  background-color: #12213E;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
}

#vservices img{
  width:100% !important;
  margin: 10px !important;
}

#sec03 img,#sec04 img{
 width: 100% !important;
}



/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
  /* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
  /* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
  /* Styles */
}

 /* home page  */
 @media (max-width: 769px) {

   header.uex {
    background-color: #EE3B54!important;;
    background: linear-gradient(rgba(238, 59, 84, 0.7), rgba(238, 59, 84, 0.7)), url('../img/header-bg-uex.jpg')!important;;
    background-position: center right !important;;
   }


.userexp-img-fx{
  display: block !important;
  width: 100% !important;
}
.userexp-img-fx1, .userexp-img-fx2 , .userexp-img-fx3{
  display: none !important;
}
.userexp img{
  width: 100% !important;
}


.about-section h2,.about-section p{
text-align: center !important;
}
   .app-adv  {
     background :#EE3B54;
      background: linear-gradient(rgba(238, 59, 84, 0.7), rgba(238, 59, 84, 0.7)), url('../img/BannerAdv.png');
      background-position: center left;
      background-repeat: no-repeat;
      background-size:cover;
    }

    header.spt {

      background-image: url("../img/header-bg-spt.jpg")!important;
      background-repeat: no-repeat!important;
      background-attachment: fixed!important;
      background-position: center left !important;
      background-size: cover !important;
    }

      header.spt .container {
        min-height: 300px;
      }

    .apps-links{
        margin: auto;
        text-align: center !important;
    }
    .app-adv .app-link img  {
      max-height: 65px;
      transition: transform .2s;
        margin-left: 30px;
        margin-bottom: 15px;
    }

    .page-footer .container {
        padding-top: 2em;
        padding-bottom: 1em;

    }
    .footer-map{
      display: none;
    }

    footer .brand-logo{
      padding-bottom:0;
      text-align: center;

    }
    footer .brand-logo a img{
        margin: auto;
    }



.page-section{
     height: auto !important;
}
   #vservices{
     height: auto !important;
   }
   .arrow{
     display: none !important;
   }


   header.masthead .intro-text {
     padding: 25px !important;
     padding-top: 35px !important;
     color: rgb(255, 255, 255);
     
   }
   header.masthead .intro-text .intro-lead-in {
     font-size: 22px;

   }
   header.indx {
      background-color: #12213E!important;;
    background: linear-gradient(rgba(18, 33, 62, 0.7), rgba(18, 33, 62, 0.7)), url('../img/header.png')!important;;
    
    background-position:  initial   !important;
   }
   header.masthead .app-link{
     height: 25px;
     line-height: 25px;
   }
   .app-link img  {
     max-height: 55px;
     transition: transform .2s;
       margin-left: 30px;
       margin-bottom: 15px;
   }

   #mainNav {
     background-color: #12213E;
     font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   }

   .page-section h2.section-heading-e {

     font-size: 18px;
     line-height: 32px;
     margin-bottom: 15px;
     margin: auto;
     margin-top: 35px;
     padding-bottom: 55px;

   }

   #vservices img{
     max-width: 250px;
     width: 100% !important;
   }



 }

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
  /* Styles */


    header.masthead .intro-text {
      padding-top: 150px;
      padding-bottom: 200px;
    }
    header.masthead .intro-text .intro-lead-in {
      font-size: 28px;
      line-height: 42px;
      margin-bottom: 25px;
      font-family: 'SwissraMedium';
    }
    header.masthead .intro-text .intro-heading {
      font-size: 75px;
      font-weight: 700;
      line-height: 75px;
      margin-bottom: 50px;
      font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    }



}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 991px)
and (orientation : landscape) {

  .userexp-img-fx{
    display: block !important;
    width: 100% !important;
  }
  .userexp-img-fx1, .userexp-img-fx2 , .userexp-img-fx3{
    display: none !important;
  }
  .userexp img{
    width: 100% !important;
  }

}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
  /* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
  /* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
  /* Styles */
}

/* iPhone 4 - 5s ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
  /* Styles */
}

/* iPhone 6 ----------- */
@media
only screen and (max-device-width: 667px)
only screen and (-webkit-device-pixel-ratio: 2) {
  /* Styles */
}

/* iPhone 6+ ----------- */
@media
only screen and (min-device-width : 414px)
only screen and (-webkit-device-pixel-ratio: 3) {
  /*** You've spent way too much on a phone ***/
}

/* Samsung Galaxy S7 Edge ----------- */
@media only screen
and (-webkit-min-device-pixel-ratio: 3),
and (min-resolution: 192dpi)and (max-width:640px) {
 /* Styles */
}
/* .userexp-img-fx1{
  max-width: 500px;
  z-index: -1;
  position:absolute;
  display: block;
  top: -9.2rem;
  right: 0;
}
.userexp-img-fx2{
  max-width: 370px;
  position:fixed;
  bottom:11%;
  left:59%;
  z-index: -2;
}
.userexp-img-fx3{
  max-width: 500px;
  position:absolute;
  display: block;
  top: -9.2rem;
    right: 0;
} */

.btm-brand{
 max-width:  250px !important;
}

@media only screen
and (min-width : 992px) {
  .userexp-img-fx1{
    max-width: 500px;
    z-index: -1;
    position:absolute;
    display: block;
    top: -15.2rem;
    right: 0;
  }
  .userexp-img-fx2{
    max-width: 370px;
    position:fixed;
    bottom:26%;
    left:54%;
    z-index: -2;
  }
  .userexp-img-fx3{
    max-width: 500px;
    position:absolute;
    display: block;
    top: -15.2rem;
      right: 0;
  }
}

@media only screen
and (min-width : 1200px) {

  .userexp-img-fx1{
    max-width: 500px;
    z-index: -1;
    position:absolute;
    display: block;
    top: -12.2rem;

  }
  .userexp-img-fx2{
    max-width: 370px;
    position:fixed;
    bottom:18%;
    left:61%;
    z-index: -2;
  }
  .userexp-img-fx3{
    max-width: 500px;
    position:absolute;
    display: block;
    top: -12.2rem;

  }
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:19.5%;
      left:61%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
}

@media only screen
and (min-width : 1360px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:20%;
      left:60%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
}

@media only screen
and (min-width : 1440px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:18%;
      left:59%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -12.2rem;

    }
}


/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:24%;
      left:57.5%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}

@media only screen
and (min-width : 2048px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:24%;
      left:56.5%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}

@media only screen
and (min-width : 2048px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:24%;
      left:56.5%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}

@media only screen
and (min-width : 2560px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:24%;
      left:55.5%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}
@media only screen
and (min-width : 3440px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:30.5%;
      left:54%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}
@media only screen
and (min-width : 3840px) {

    .userexp-img-fx1{
      max-width: 500px;
      z-index: -1;
      position:absolute;
      display: block;
      top: -9.2rem;
      right: 0;
    }
    .userexp-img-fx2{
      max-width: 370px;
      position:fixed;
      bottom:37%;
      left:53.5%;
      z-index: -2;
    }
    .userexp-img-fx3{
      max-width: 500px;
      position:absolute;
      display: block;
      top: -9.2rem;
        right: 0;
    }
}



.fade-in {

animation: fadeIn ease 1s;
-webkit-animation: fadeIn ease 1s;
-moz-animation: fadeIn ease 1s;
-o-animation: fadeIn ease 1s;
-ms-animation: fadeIn ease 1s;
}
@keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-moz-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-webkit-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-o-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}
}

@-ms-keyframes fadeIn {
0% {
  opacity:0;
}
100% {
  opacity:1;
}


}


.fade-out {
animation: fadeOut ease 2s;
-webkit-animation: fadeOut ease 2s;
-moz-animation: fadeOut ease 2s;
-o-animation: fadeOut ease 2s;
-ms-animation: fadeOut ease 2s;
}
@keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-moz-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-webkit-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-o-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}

@-ms-keyframes fadeOut {
0% {
  opacity:1;
}
100% {
  opacity:0;
}
}