/* line 1974 added h5 size line 2353 now 1.8 not 2.0 and added !important line 2446 still  1.5 added !important line 1462 and line 1760 added !important // all landscapes need !important now since adding 1 destroys media query hierarchy*/

 html, body {
	overflow-x: hidden; overflow-y: auto;
	background-color: #fff;
}

body {
  background: #FFF;
  padding: 0;
  }

.div2 {
    height: 2000px;
}

@-webkit-keyframes mouse-wheel {
	0% {
		opacity: 1;
		-webkit-transform: translateY(2px);
		transform: translateY(2px);
	}

	100% {
		opacity: 0;
		-webkit-transform: translateY(22px);
		transform: translateY(22px);
	}
}
@-moz-keyframes mouse-wheel {
	0% {
		opacity: 1;
		-moz-transform: translateY(2px);
		transform: translateY(2px);
	}

	100% {
		opacity: 0;
		-moz-transform: translateY(22px);
		transform: translateY(22px);
	}
}
@keyframes mouse-wheel {
	0% {
		opacity: 1;
		transform: translateY(2px);
	}

	100% {
		opacity: 0;
		transform: translateY(22px);
	}
}

@-webkit-keyframes mouse-scroll {
	0%   { opacity: 0;}
	50%  { opacity: .5;}
	100% { opacity: 1;}
}
@-moz-keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}
@keyframes mouse-scroll {
	0%   { opacity: 0; }
	50%  { opacity: .5; }
	100% { opacity: 1; }
}

.carousel-caption h2  {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.8vw;
    font-weight: 700;
    color:#fffdfc;
    margin-top: 0px;
    margin-bottom: 0px;
    text-align: center;
	-webkit-animation-delay: 1.3s;
	animation-delay: 1.3s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
	text-align: center;     /* can be right and left also may need to alter non active state also */
}
.carousel-caption  p {
    font-family: 'roboto', sans-serif;
    font-size: 1.5vw;
    font-weight: 600;
    color:#f9f8f7;
    margin-top: 0px;
    margin-bottom: 5px;   /* sets the distance between bottom of p block and button  */
    text-align: center;
	margin-top:0px;
	-webkit-animation-delay: 2.2s;
	animation-delay: 2.2s;
	-webkit-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: zoomIn;
	animation-name: zoomIn;
}

.carousel-caption .ghost-button {
    font-family: 'roboto', sans-serif;
    background-color: #ff3333;	  /* was #ff6a00 #ff7700 #ff7f00 #e88310 original orange fli button #ef9110 */
    color: #fff;
    border: 0px solid #fafafa;
    border-radius: 0px;
    font-size: 17px;
    padding: 5px 12px 7px 12px;
    font-weight: normal;
    margin: 10px 0px 12px 0px;
    display: inline-block;
    text-decoration: none;
    min-width: 120px;
    font-weight: 400px;
    display: inline-block;
    -webkit-transition: background-color .5s linear;
    -moz-transition: background-color .5s linear;
    -ms-transition: background-color .5s linear;
    -o-transition: background-color .5s linear;
    transition: background-color .5s linear;
	margin-top:0px !important;       /* as part of above 0% fix above set margin-top to 0px so buttomn has no  margins or paddins to interefere with items above and below  */
    text-decoration:none;     /* new */
    margin-bottom: 0;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
		-webkit-animation-delay: 4.6s;
	animation-delay: 4.6;
	-webkit-animation-duration: 1.9s;
	animation-duration: 1.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
	-webkit-transition: background-color .5s linear;
    -moz-transition: background-color .5s linear;
    -ms-transition: background-color .5s linear;
    -o-transition: background-color .5s linear;
    transition: background-color .5s linear;
}

.carousel-caption .ghost-button:hover, .ghost-button:active {         /*  not so important except it shows on slide transition so still need. The active states .ghost-button property is more important since slides change  */
    color:#fff;
    background-color: #d68915;  /* was #fc8e00 #fc9700 #ffa319 #fc9107 #e89510;  */
    text-decoration:none;
}

.carousel-caption .icon-scroll   {
    position:relative;
    margin:auto;
	left: 50%;
	transform: translate(-50%, 0%);     /*  now -50% 0% for -25fix (universal bottom anchored wrapper before was transform: translate(-50%, -20%)  */
	z-index: 99999;
	-webkit-transition: opacity.4s;
	padding-top: 7px;                /*  default fallback if no media query     */
}

.carousel-caption .icon-scroll .mouse {
    height: 28px;
	width: 13px;
	border: 1.5px solid rgba(255,255,255, 0.7);
	border-radius: 19px;
	position:relative;
    margin:auto
}

.carousel-caption .icon-scroll .wheel {
    display: block;
    height: 3px;
    width: 3px;
    margin: 2px auto 0;
    background: rgba(255,255,255,.8);
    -webkit-animation: mouse-wheel 3.0s ease infinite;
    -moz-animation: mouse-wheel 3.0s ease infinite;
    animation: mouse-wheel 3.0s ease infinite;
    border-radius: 50%;
}

.carousel-caption .icon-scroll  h5 {
    font-family: 'roboto', sans-serif;
    text-align:center;
	padding-top:0px;   /* was 2px now 0px */
	padding-bottom:2px;
    color:#fff !important;
    font-family: 'roboto', sans-serif;
	margin-top: 5px !important;
	margin-bottom:0px;
	font-weight: normal !important;
	-webkit-animation-delay: 8.1s;
	animation-delay: 8.1s;
	-webkit-animation-duration: 3.9s;
	animation-duration: 3.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption .icon-scroll  .mouse  {
    height: 28px;
	width: 13px;
	border: 1.5px solid rgba(255,255,255, 0.7);
	border-radius: 15px;
	position:relative;
    margin:auto
	text-align:center;
	-webkit-animation-delay: 5.3s;
	animation-delay: 5.3;
	-webkit-animation-duration: 1.9s;
	animation-duration: 1.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-fade .carousel-inner .item {
    height: 100vh;
    width: 100vw;
}

.carousel-fade .carousel-inner .item img {
  opacity:1 !important;
  -webkit-animation: ken-burns;
  -webkit-animation-duration: 10s;
  animation: ken-burns;
  animation-duration: 10s;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0);      /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0);          /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */

    height: 100vh;
    width:100vw;
    object-fit:cover;
	object-position: 50% 50%; /* default value: image is centered 50% is centered, 30% is 30% up from the bottom 100% = top of viewport*/
}



/* above removes annoying  horizontal scrollbar on  desktop default  + smaller resolutions  / background-color makes white not navy */


/* Carousel Fading slide */
.carousel-fade .carousel-inner { background: #000; }
.carousel-fade .carousel-control { z-index: 2; }
.carousel-fade .item {
  opacity: 0;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  }

  .carousel-fade .next.left,
  .carousel-fade .prev.right,
  .carousel-fade .item.active { opacity: 1; }

  .carousel-fade .active.left,
  .carousel-fade .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
    }


/* Safari Fix */
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}

/* Carousel Control custom */
.carousel-control .control-icon {
  font-size: 48px;
  height: 30px;
  margin-top: -15px;
  width: 30px;
  display: inline-block;
  position: absolute;
  top: 50%;
  z-index: 5;
  }
  .carousel-control .prev { margin-left:  -15px;  left: 50%; } /* Prev */
  .carousel-control .next { margin-right: -15px; right: 50%; } /* Next */


/* Removing BS background */
.carousel .control-box { opacity: 0; }
a.carousel-control.left  { left: 0; background: none; border: 0;}
a.carousel-control.right { right: 0; background: none; border: 0;}


/* Animation */
.control-box, a.carousel-control, .carousel-indicators li {
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
  /* hardware acceleration causes Bootstrap carousel controlbox margin error in webkit */
  /* Assigning animation to indicator li will make slides flicker */
  }


/* Hover animation */
.carousel:hover .control-box { opacity: 1; }
.carousel:hover a.carousel-control.left { left: 15px; }
.carousel:hover a.carousel-control.right { right: 15px; }


/* Carouse Indicator */
.carousel-indicators li.active,
.carousel-indicators li { border: 0; }

.carousel-indicators li {
  background: #666;
  margin: 0 3px;
  width: 12px;
  height: 12px;
  }

.carousel-indicators li.active {
  background: #fff;
  margin: 0 3px;
  }

@-webkit-keyframes ken-burns {                                        /* !!! scales image ken burns */
  from {
    -webkit-transform: scale(1.0) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.2) translate3d(0px, 0px, 0);
  }
}

@keyframes ken-burns {
  from {
    transform: scale(1.0) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.2) translate3d(0px, 0px, 0);
  }
}

@-webkit-keyframes ken-burns {                                        /* !!! scales image ken burns */
  from {
    -webkit-transform: scale(1.0) translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: scale(1.2) translate3d(0px, 0px, 0);
  }
}

@keyframes ken-burns-2 {
  from {
    transform: scale(1.2) translate3d(0, 0, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, 0px, 0);
  }
}

@-webkit-keyframes portrait-1 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, 30px, 0);                  /* !!! pushes image down 30px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, 30px, 0);
  }
}

@keyframes portrait-1  {
  from {
    transform: scale(1.2) translate3d(0, 30px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, 30px, 0);
  }
}

@-webkit-keyframes portrait-2 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, 40px, 0);                 /* !!! pushes image down 40px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, 40px, 0);
  }
}

@keyframes portrait-2  {
  from {
    transform: scale(1.2) translate3d(0, 40px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, 40px, 0);
  }
}

@-webkit-keyframes landscape-1 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, -8px, 0);          /* !!! pushes image up 8px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, -8px, 0);
  }
}

@keyframes landscape-1  {
  from {
    transform: scale(1.2) translate3d(0, -8px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, -8px, 0);
  }
}

@-webkit-keyframes landscape-2 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, -20px, 0);       /* !!! pushes image up 20px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, -20px, 0);
  }
}

@keyframes landscape-2  {
  from {
    transform: scale(1.2) translate3d(0, -20px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, -20px, 0);
  }
}

@-webkit-keyframes landscape-2b {
  from {
    -webkit-transform: scale(1.3) translate3d(0, -20px, 0);             /* !!! pushes image up  20px and scale increased so image fits viewport */
  }
  to {
    -webkit-transform: scale(1.5) translate3d(0px, -20px, 0);
  }
}

@keyframes landscape-2b  {
  from {
    transform: scale(1.3) translate3d(0, -20px, 0);
  }
  to {
    transform: scale(1.5) translate3d(0px, -20px, 0);
  }
}

@-webkit-keyframes landscape-2c {
  from {
    -webkit-transform: scale(1.2) translate3d(50px, -20px, 0);       /* !!! pushes image up 20px plus 50px to the right */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(50px, -20px, 0);
  }
}

@keyframes landscape-2c  {
  from {
    transform: scale(1.2) translate3d(50px, -20px, 0);
  }
  to {
    transform: scale(1.4) translate3d(50px, -20px, 0);
  }
}

@-webkit-keyframes landscape-3 {
  from {
    -webkit-transform: scale(1.3) translate3d(0, -30px, 0);             /* !!! pushes image up  30px */
  }
  to {
    -webkit-transform: scale(1.5) translate3d(0px, -30px, 0);
  }
}

@keyframes landscape-3  {
  from {
    transform: scale(1.3) translate3d(0, -30px, 0);
  }
  to {
    transform: scale(1.5) translate3d(0px, -30px, 0);
  }
}

@-webkit-keyframes landscape-3b {
  from {
    -webkit-transform: scale(1.3) translate3d(-60px, -30px, 0);             /* !!! pushes image up  30px and to left 60px for Samsung S9 landscape and scale increased so image fits viewport */
  }
  to {
    -webkit-transform: scale(1.5) translate3d(-60px, -30px, 0);
  }
}

@keyframes landscape-3b  {
  from {
    transform: scale(1.3) translate3d(-60px, -30px, 0);
  }
  to {
    transform: scale(1.5) translate3d(-60px, -30px, 0);
  }
}

@-webkit-keyframes landscape-4 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, -40px, 0);             /* !!! pushes image up  40px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, -40px, 0);
  }
}

@keyframes landscape-4  {
  from {
    transform: scale(1.3) translate3d(0, -40px, 0);
  }
  to {
    transform: scale(1.5) translate3d(0px, -40px, 0);
  }
}

@-webkit-keyframes landscape-5 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, 10px, 0);         /* !!! pushes image down 20px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, 10px, 0);
  }
}

@keyframes landscape-5  {
  from {
    transform: scale(1.2) translate3d(0, 10px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, 10px, 0);
  }
}

@-webkit-keyframes landscape-6 {
  from {
    -webkit-transform: scale(1.2) translate3d(0, 20px, 0);         /* !!! pushes image down 20px */
  }
  to {
    -webkit-transform: scale(1.4) translate3d(0px, 20px, 0);
  }
}

@keyframes landscape-6  {
  from {
    transform: scale(1.2) translate3d(0, 20px, 0);
  }
  to {
    transform: scale(1.4) translate3d(0px, 20px, 0);
  }
}



/* caption already sits above  ken burns just animate add  position absolute and bottom: 30vh etc... added transition: 2s to .btn-transparent:hover and .btn-transparent {
  transition: 4s;
}*/

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 8vh;
    left: 15%;
    z-index: 10;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
	width: 85vw;
	bottom:0px;
	position: absolute;
	left: 50%;    /* 50 FOR CENTER 20 FOR LEFT match to translate  */
	bottom:0px;
    transform: translate(-50%, 0%);    /* -50 is needed to work with ledt 50% 0 isnt its x, y  */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: 'Roboto', sans-serif;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}


/**
 * Change animation duration
 */
.ani5mated {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(100px, 0, 0);
    transform: translate3d(100px, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
  }
}

.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

/* below used video overlay bookmarked in this folder. I added the div above caption for active itemn then above rest of items. This is also uses ideas from "ULTRA USEFUL AND OVERLAYS PAUSE FULLSCREEN Bootstrap carousel | A complete tutorial - basics, options, modifications" bookmark as well as "Fullscreen Video w/overlay" both in this bookmark folder */

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 60vh;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));

}

.bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 40vh;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0));

}

/* below changes for fullscreen. Top change is from "ULTRA USEFUL AND OVERLAYS PAUSE FULLSCREEN Bootstrap carousel | A complete tutorial - basics, options, modifications" and isnt sufficient for mobile.  */

 /* BELOW REMOVE MIN-HEIGHT or annoying scrollbar on mobile, laptop presumably to scroll dowmn for caption but not necessary absolute / bottom 8vh and fullscreen layout.Deleted "mi5n-height: 600px;" */

.carousel-fade .carousel-inner .item  {
    height: 100vh;
    width:100vw;
}

.carousel-inner .item > img {
    height: 100vh;
    width:100vw;
    object-fit:cover;
}


 /* above converted img src to background image to use background position property to move slides left right up down. used css tricks "Replace the Image in an <img> with CSS" as inspiration. removed pading and border box etc since we r just changing the item from source to a css class to apply background images. We delete originall  image src as duplicated image, bad for seo and bandwidth. We dont worry about zoom effect applied to  non existant image src as its still inheriting. Specifically ".carousel-inner .item > img {
  -webkit-animation: zoom 20s;
  animation: zoom 20s;
}" still works as "background" that we now use instead is shorthand for background-image plus of course inheritance. To summarise we add image class test to 1st slide then under css. carousel slides div not images so can be image src or  background images You need to add [ background-repeat: no-repeat;
    background-size: cover; ]or image  will repeat and wont stretch to fit viewport if larger than base image*/

/* below moves arrows closer to edges from 15% to 2% */


.carousel-control {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 2%;
    font-size: 20px;
    color: #fff;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    filter: alpha(opacity=50);
    opacity: .5;
}

@media only screen and (min-width : 100px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 85vw;
	bottom:0px;
	position: absolute;
	left: 50%;    /* 50 FOR CENTER 20 FOR LEFT match to translate  */
	bottom:0px;
    transform: translate(-50%, 0%);    /* -50 is needed to work with ledt 50% 0 isnt its x, y  */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: 'Roboto', sans-serif;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption h2  {
    font-size: 7.5vw;
    font-weight: 700;
    color:#fffdfc;
    line-height:.9;
}

.carousel-caption p {
    font-size: 4.5vw;
    font-weight: 600;
    color:#f9f8f7;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;    /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll  .mouse  {
    height: 28px;
	width: 13px;
	border: 1.5px solid rgba(255,255,255, 0.7);
	border-radius: 19px;
	position:relative;
    margin:auto
	text-align:center;
	-webkit-animation-delay: 5.3s;
	animation-delay: 5.3;
	-webkit-animation-duration: 1.9s;
	animation-duration: 1.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption .icon-scroll .mouse {
    height: 28px;
	width: 13px;
	border: 1.5px solid rgba(255,255,255, 0.7);
	border-radius: 19px;
	position:relative;
    margin:auto;
}

.carousel-caption .icon-scroll   h5 {
	font-size: 4vw;
	margin-bottom: 0px;
	margin-top: 5px !important;
}

}

  @media
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption  {
	max-width: 80vw;
    position: absolute;
	left: 50%;    /* 50 FOR CENTER 20 FOR LEFT match to translate  */
	bottom:0px;
    transform: translate(-50%, 0%);    /* -50 is needed to work with left 50% 0 isnt its x, y  */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: 'Roboto', sans-serif;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption .category {
    max-width: 70vw;
}

.carousel-caption h2  {
    font-size: 3.6vw;
    font-weight: 700;
    color:#fffdfc;
}

.carousel-caption p  {
    font-size: 2.4vw;
    font-weight: 600;
    color:#f9f8f7;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;	/* new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.5vw !important;
}

}



	/* //////////////////////////// new mobile Landscape retina 2.6 for nexus 5x devices */

  @media
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape),
only screen    and (min-width: 100px) and (max-device-width: 320px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    max-width: 80vw;
    position: absolute;
	left: 50%;    /* 50 FOR CENTER 20 FOR LEFT match to translate  */
	bottom:0px;
    transform: translate(-50%, 0%);    /* -50 is needed to work with ledt 50% 0 isnt its x, y  */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: 'Roboto', sans-serif;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption .category {
    max-width: 70vw;
}

.carousel-caption h2  {
    font-size: 3.6vw;
    font-weight: 700;
    color:#fffdfc;
}

.carousel-caption p {
    font-size: 2.4vw;
    font-weight: 600;
    color:#f9f8f7;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;	/* new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.5vw !important;
}

}


 /* https://css-tricks.com/snippets/css/retina-display-media-query/  */

 /* 320px use 500psd to cover 1.5 retina and non retina*/


@media only screen and (min-width: 320px) and (max-device-width: 699px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    min-width: 95vw;       /*  needed to force full-width  */
    position: absolute;
	left: 50%;    /* 50 FOR CENTER 20 FOR LEFT match to translate  */
	bottom:0px;
    transform: translate(-50%, 0%);    /* -50 is needed to work with ledt 50% 0 isnt its x, y  */
	color: white;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	font-family: 'Roboto', sans-serif;
	-webkit-animation-delay: .4s;
	animation-delay: .4s;
	-webkit-animation-duration: .6s;
	animation-duration: .6s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption {
    min-width: 95vw;			 /*  needed to force full-width  */
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 98vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 5.8vw;
    font-weight: 700;
    color:#fffdfc;
	line-height: 1.2;
}

.carousel-caption p {
    font-size: 3.8vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.3;
}

.carousel-caption .icon-scroll   {
    padding-top: 7px;	/* new */
}

}



 /* below for LG Optimus L70 and smallish tablets */


@media
only screen and (-webkit-min-device-pixel-ratio: 1)      and (-webkit-max-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 1)      and (   max--moz-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 1/1)    and (     -o-max-device-pixel-ratio: 2/1)   and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 1)      and (        max-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait),
only screen and (            min-resolution: 96dpi)      and (             max-resolution: 192dpi)   and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait),
only screen and (                min-resolution: 1dppx)  and (                min-resolution: 2dppx) and (min-width: 320px) and (max-device-width: 499px) and (orientation :portrait)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 30%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 15%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
   object-position: 50% 0%;
   opacity:1 !important;
   -webkit-animation: portrait-1 !important;
   -webkit-animation-duration: 10s !important;
   animation: portrait-1 !important;
   animation-duration: 10s !important;
   -webkit-transform: scale(1.4) translate3d(0px, 30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
   transform: scale(1.4) translate3d(0px, 30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption {
    min-width: 95vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 85vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption  h2  {
    line-height: 1.2;
}

.carousel-caption p  {
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;	/* new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 3.0vw;
}

}

/* NEW  added for iphone h5 not to clash with Kindle LG Optimus L70 */

@media
only screen and (-webkit-min-device-pixel-ratio: 1)      and (-webkit-max-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 1)      and (   max--moz-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 1/1)    and (     -o-max-device-pixel-ratio: 2/1)   and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 1)      and (        max-device-pixel-ratio: 2)     and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait),
only screen and (            min-resolution: 96dpi)      and (             max-resolution: 192dpi)   and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait),
only screen and (                min-resolution: 1dppx)  and (                min-resolution: 2dppx) and (min-width: 320px) and (max-device-width: 499px) and (max-device-height: 600px)  and (orientation :portrait)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 40%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 10%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: ken-burns !important;
  -webkit-animation-duration: 10s !important;
  animation: ken-burns !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% -10%;
}

.carousel-caption {
    width: 98vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 94vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    line-height: 1.2;
}

.carousel-caption p  {
    line-height: 1.2;
    padding-bottom:1px;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 14px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 118px;
}

.carousel-caption .icon-scroll   {
    padding-top: 7px;   /* was 5px then 4px now 3px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 4.2vw;
}


}


/* below for larger DPR 1 / 1.5 tablets (Kindles , Samsung Tablets) 699 not to interfere with media query rule for ipad 1st gen (1dpr) roughly line 2628 */

@media
only screen and (-webkit-min-device-pixel-ratio: 1)      and (-webkit-max-device-pixel-ratio: 2)     and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 1)      and (   max--moz-device-pixel-ratio: 2)     and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 1/1)    and (     -o-max-device-pixel-ratio: 2/1)   and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 1)      and (        max-device-pixel-ratio: 2)     and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait),
only screen and (            min-resolution: 96dpi)      and (             max-resolution: 192dpi)   and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait),
only screen and (                min-resolution: 1dppx)  and (                min-resolution: 2dppx) and (min-width: 500px) and (max-device-width: 698px) and (orientation :portrait)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 85vw;
}

.carousel-caption  h2  {
    line-height: 1;
}

.carousel-caption p  {
    line-height: 1.1;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;   /* was 5px then 4px now 3px new */
}

.carousel-caption .icon-scroll   h5 {
   font-size: 2.2vw;
}



}

/* Further Dpr 1.5 Amazon Kindle Fire HD7 fixes */

@media
only screen and (-webkit-min-device-pixel-ratio: 1)      and (-webkit-max-device-pixel-ratio: 2)     and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 1)      and (   max--moz-device-pixel-ratio: 2)     and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 1/1)    and (     -o-max-device-pixel-ratio: 2/1)   and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 1)      and (        max-device-pixel-ratio: 2)     and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait),
only screen and (            min-resolution: 96dpi)      and (             max-resolution: 192dpi)   and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait),
only screen and (                min-resolution: 1dppx)  and (                min-resolution: 2dppx) and (min-width: 699px) and (max-device-width: 767px) and (orientation :portrait)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption p {
    font-size: 3.5vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;   /* was 5px then 4px now 3px new */
}

.carousel-caption .icon-scroll   h5 {
   font-size: 2.2vw;
}

}

@media
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    max-width: 70vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 60vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption  h2  {
   font-size: 3.0vw;
   font-weight: 700;
   color:#fffdfc;
}

.carousel-caption p  {
    font-size: 2vw;
    font-weight: 600;
    color:#f9f8f7;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;   /* was 5px then 4px now 3px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.0vw !important;
}

}

 /* iphone 2 ZTE landscape */

  @media
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 320px) and (max-device-width: 599px) and (max-device-height: 500px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    max-width: 80vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 70vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 3.6vw !important;     /* needed for mediaquery to fire. Quirk  */
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.1;           /* was  .9 */
}

.carousel-caption p  {
    font-size: 2.4vw !important;           /* needed for mediaquery to fire. Quirk  */
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 13px;
    padding: 6px 6px 8px 6px;  /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 110px;
}

.carousel-caption .icon-scroll   {
    padding-top: 6px;
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.0vw !important;
}


}

 /*  LG Optimus G L 70 */

  @media
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape),
only screen     and (min-width: 600px) and (max-device-width: 699px) and (max-device-height: 500px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    max-width: 70vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 60vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 4.4vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: .9;
}

.carousel-caption p  {
    font-size: 2.8vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;	 /* was 1.2 */
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 13px;
    padding: 6px 6px 8px 6px;  /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 110px;
}

.carousel-caption .icon-scroll   {
    padding-top: 7px;
}

.carousel-caption .icon-scroll   h5 {
   font-size: 2.0vw !important;
}

}


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 599px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 599px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px) and (max-width: 599px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-width: 599px) and (orientation :portrait),
only screen and (                min-resolution: 192dpi) and (min-width: 320px) and (max-width: 599px) and (orientation :portrait),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) and (max-width: 599px) and (orientation :portrait) {

  /* 2x retina for 320 devices */

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 30%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: portrait-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: portrait-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 40px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 40px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

}

.carousel-fade .carousel-inner .item .slide-4 img {
	object-position: 50% 5%;
}

.carousel-caption {
    width: 98vw;
}

.carousel-caption .category {
    margin-left: auto;
    margin-right: auto;
    max-width: 94vw;
}

.carousel-caption h2 {
    font-size: 5.8vw;
    font-weight: 700;
    color: #fffdfc;
    line-height: 1.15;
	padding-bottom: 1px;
}

.carousel-caption p {
    font-size: 4.3vw;
    font-weight: 400;
    color: #f9f8f7;
    line-height: 1.3;
	margin-bottom: 3px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6.5px;   /* was 5px now 4px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 3.3vw;
}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 600px) and (max-width: 699px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 600px) and (max-width: 699px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 600px) and (max-width: 699px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 600px) and (max-width: 699px) and (orientation :portrait),
only screen and (                min-resolution: 192dpi) and (min-width: 600px) and (max-width: 699px) and (orientation :portrait),
only screen and (                min-resolution: 2dppx)  and (min-width: 600px) and (max-width: 699px) and (orientation :portrait) {

  /* 2x retina for 320 devices */

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 85vw;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;   /* was 5px now 4px new */
}

.carousel-caption .icon-scroll   h5 {
	font-size: 2.4vw;
	margin-bottom: 0px;
}

}

	/* //////////////////////////// new mobile Landscape retina 320-tablet */

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (                min-resolution: 192dpi) and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    min-width: 70vw;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 60vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 4.4vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: .9;
}

.carousel-caption p  {
    font-size: 2.6vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;  /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;   /* was 5px now 4px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.0vw !important;
}

}


@media
only screen and (-webkit-min-device-pixel-ratio: 3)      and (min-width: 320px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 3)      and (min-width: 320px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 3/1)    and (min-width: 320px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 3)      and (min-width: 320px) and (orientation :portrait),
only screen and (                min-resolution: 288dpi) and (min-width: 320px) and (orientation :portrait),
only screen and (                min-resolution: 3dppx)  and (min-width: 320px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 25%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: portrait-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: portrait-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 40px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 40px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

  /* 320 use 1500psd for 3x 4x retina */
.carousel-caption {
    width: 98vw;
}

.carousel-caption  h2  {
    line-height: 1.1;
}

.carousel-caption .category {
	width: 95vw;
}


.carousel-caption p  {
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;	/* new  */
}

.carousel-caption .icon-scroll   h5 {
	font-size: 3.3vw;
	margin-bottom: 0px;
}

}

 /* iphone 4 landscape */


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (-webkit-max-device-pixel-ratio: 3)     and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (   max--moz-device-pixel-ratio: 3)     and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (     -o-max-device-pixel-ratio: 3/1)   and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (        max-device-pixel-ratio: 3)     and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape),
only screen and (            min-resolution: 192dpi)     and (             max-resolution: 288dpi)   and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (                min-resolution: 3dppx) and (min-width: 320px) and (max-device-width: 599px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    min-width: 90vw;
    bottom:0px;
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 80vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 3.6vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.1;           /* was  .9 */
}

.carousel-caption p  {
    font-size: 2.4vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 14px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 118px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.2vw !important;	 /* was 2.5 */
}

}

 /* below added for Nexus 5X dpr 2.6 and google Pixel devices landscape devices since strict landscape rules are good only if your in correct dpr range like 2 or 3 */

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (-webkit-max-device-pixel-ratio: 3)     and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (   max--moz-device-pixel-ratio: 3)     and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (     -o-max-device-pixel-ratio: 3/1)   and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (        max-device-pixel-ratio: 3)     and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape),
only screen and (            min-resolution: 192dpi)     and (             max-resolution: 288dpi)   and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (                min-resolution: 3dppx) and (min-width: 600px) and (max-device-width: 899px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: ken-burns !important;
  -webkit-animation-duration: 10s !important;
  animation: ken-burns !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-2 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: ken-burns !important;
  -webkit-animation-duration: 10s !important;
  animation: ken-burns !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: ken-burns !important;
  -webkit-animation-duration: 10s !important;
  animation: ken-burns !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: ken-burns !important;
  -webkit-animation-duration: 10s !important;
  animation: ken-burns !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.2) translate3d(0px, 0px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.2) translate3d(0px, 0px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-caption {
    max-width: 80vw;
    bottom: 12px;          /* was first 2vh then 20px now 12px because of collapsed navbar line over h5 */
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    max-width: 80vw;           /* must be max-width not width to center inside outer div  */
}

.carousel-caption h2  {
    font-size: 3vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.1;           /* was  .9 */
}

.carousel-caption p  {
    font-size: 1.8vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;   /* was 5px now 4px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.0vw !important;	 /* was 2.5 */
}

}


/* //////////////////////////// new mobile Landscape HD / Super retina 320-tablet */

@media
only screen and (-webkit-min-device-pixel-ratio: 3)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 3)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 3/1)    and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 3)      and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (                min-resolution: 288dpi) and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape),
only screen and (                min-resolution: 3dppx)  and (min-width: 320px) and (max-device-width: 699px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption h2  {
    font-size: 4.0vw;    /* was 5.0 */
    font-weight: 700;
    color:#fffdfc;
    line-height: .9;
}

.carousel-caption p {
    font-size: 2.5vw;    /* was 3.2 */
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;   /* was 5px now 4px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.0vw !important;	 /* was 2.5 */
}

}

/* kindlefire only fix width 600px no retina to make slidewrapper higher than iphone 3 */

@media only screen and (min-width: 479px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 40%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 20%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: portrait-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: portrait-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 40px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 40px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}


.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption h2  {
    font-size: 6.0vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1
}

.carousel-caption p  {
    font-size: 3.5vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height:1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   {
    padding-top: 7px;   /* was 5px then 4px now 3px new */
}

.carousel-caption .icon-scroll   h5 {
    font-size: 2.5vw;	 /* was 2.5 */
}

}


@media only screen and (min-width: 559px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 25%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption {
	width: 90vw;
	bottom:0px;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll  {
    padding-top: 7px;
}

}


	 /* ipad devices no retina, was old min-width: 700px */


@media only screen and (min-width: 700px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 20%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
   object-position: 50% 0%;
   opacity:1 !important;
   -webkit-animation: portrait-2 !important;
   -webkit-animation-duration: 10s !important;
   animation: portrait-2 !important;
   animation-duration: 10s !important;
   -webkit-transform: scale(1.4) translate3d(0px, 40px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
   transform: scale(1.4) translate3d(0px, 40px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption {
    width: 70vw;
	bottom: 0px;
}

.carousel-caption  h2  {
    font-size: 5.4vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: .9;
    letter-spacing: 2px;
}

.carousel-caption p  {
    font-size: 3.5vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;
	padding-bottom: 1px;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   h5 {
	font-size: 1.8vw;
	margin-top: 5px !important;
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;	/* new was .3vw;*/
}

}

/* Landscape */

@media
only screen and (-webkit-max-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (   max--moz-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (     -o-max-device-pixel-ratio: 1/1)    and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (        max-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (                max-resolution: 96dpi)  and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (                max-resolution: 1dppx)  and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption  h2  {
    font-family: 'Roboto', sans-serif;
    font-size: 3.4vw;                  /* was 3.8 2.6 was too large in 1.7.1*/
    font-weight: 600;                      /* 600 not 700 as before*/
    color:#fffdfc;                  /* NEW less vertical gap with p*/
    line-height: .9;              /* NEW less vertical gap with h2*/
}

.carousel-caption p {
    font-size: 2.3vw;
    font-weight: 500;
    color:#f9f8f7;
    line-height:1.2;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll  h5 {
	font-size: 1.6vw !important;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

}

/*  before no max device value for media query. Always have max values or it becomes open ended inheritance and newer rules wont necessarily work namely specific landscape rules*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait),
only screen and (                min-resolution: 192dpi) and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px)  and (max-device-width: 799px) and (orientation :portrait) {

  /* ipad retina / Pro? Medium screen, retina, stuff to override above media query possible make separate psd? Added buttons below to stop a wobbly state from no explicit  values ipad dpi 2.0*/

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 25%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 10%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: portrait-1 !important;
  -webkit-animation-duration: 10s !important;
  animation: portrait-1 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
  object-position: 50% 0%;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;    /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6.5px;	/* new was .3vw;*/
}

}

/* below, retina, uses landscape first image since looks better */


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape),
only screen and (                min-resolution: 192dpi) and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (min-width: 700px) and (max-device-width: 799px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-2 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-3 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-3 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.5) translate3d(0px, -30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.5) translate3d(0px, -30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
	max-width:80vw;
}

.carousel-caption {
	max-width:70vw;
}

.carousel-caption h2  {
    font-size: 2.8vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.0;       /* was .9vw;*/
}

.carousel-caption p  {
	font-size: 2.0vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.2;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.8vw !important;
	margin-bottom: 0px;
}

}


    /* Xperia 3x landscape */

   @media
only screen and (-webkit-min-device-pixel-ratio: 3)      and (min-width: 550px)  and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 3)      and (min-width: 550px)  and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 3/1)    and (min-width: 550px)  and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 3)      and (min-width: 550px)  and (orientation :landscape),
only screen and (                min-resolution: 288dpi) and (min-width: 550px)  and (orientation :landscape),
only screen and (                min-resolution: 3dppx)  and (min-width: 550px)  and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-3b !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-3b !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.5) translate3d(-60px, -30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.5) translate3d(-60px, -30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-2 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2c !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2c !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(50px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(50px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-3 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-3 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.5) translate3d(0px, -30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.5) translate3d(0px, -30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
  object-position: 50% 0%;
}

.carousel-caption {
	min-width: 90vw;
}

.carousel-caption .category {
	max-width: 80vw;
    padd5ing-left: 5vw;
    padd5ing-right: 5vw;
}

.carousel-caption h2  {
    font-size: 3vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.1;      /* was 1 */
}

.carousel-caption p  {
	font-size: 2.0vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 14px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 118px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
	font-size: 1.8vw !important;
}

}

      /* new iphone 3x landscape set to min width 700 (actually 725 x 325) not 800 because ios clips both sides so width is smaller at 700 not 800 like android*/

   @media
only screen and (-webkit-min-device-pixel-ratio: 3)      and (min-width: 700px)  and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 3)      and (min-width: 700px)  and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 3/1)    and (min-width: 700px)  and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 3)      and (min-width: 700px)  and (orientation :landscape),
only screen and (                min-resolution: 288dpi) and (min-width: 700px)  and (orientation :landscape),
only screen and (                min-resolution: 3dppx)  and (min-width: 700px)  and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-2 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-2 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-2 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, -20px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, -20px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: landscape-5 !important;
  -webkit-animation-duration: 10s !important;
  animation: landscape-5 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 10px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 10px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-caption {     /* added so content on one line for thinner landscape iphoneX / Xperia etc */
    min-width: 90vw;
    bottom: 12px;          /* was 0px then 20px now 12px because of collapsed navbar line over h5 */
}

.carousel-caption .category {
	max-width: 80vw;
	padding-left: 0vw;
    padding-right: 0vw;
    padding-top:2px;
}

.carousel-caption h2  {
    font-size: 3vw;           /* was 3.2 with line-height .9 now 3.4 line height: 1 */
    font-weight: 700;
    color:#fffdfc;
    line-height: 1;        /* was 1 */
}

.carousel-caption p  {
	font-size: 1.8vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new */
}

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;   /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.5vw !important;
}

}


/* laptop devices no retina, set at min-width: 968px not to catch  non retina  ipads */

@media only screen and (min-width: 968px) and (orientation :portrait) {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 25%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 15%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
  object-position: 50% 0%;
  opacity:1 !important;
  -webkit-animation: portrait-1 !important;
  -webkit-animation-duration: 10s !important;
  animation: portrait-1 !important;
  animation-duration: 10s !important;
  -webkit-transform: scale(1.4) translate3d(0px, 30px, 0) !important;         /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
  transform: scale(1.4) translate3d(0px, 30px, 0)!important;               /* !!! add this end-point (make sure it matches  keyframes end state) to stop resize wobble at end and to ensure animation stops */
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption {
    width: 50vw;
	bottom:0px;
}

.carousel-caption  h2  {
    font-size: 2.8vw;
    font-weight: 600;
    color:#fffdfc;
    line-height: 1;
}

.carousel-caption p {
    font-size: 1.5vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.4;
}

.carousel-caption .ghost-button {
	border-radius: 0px;
    font-size: 17px;
	margin: 10px 0px 0px 0px;
    padding: 5px 12px 7px 12px;
}

.carousel-caption .icon-scroll {
    padding-top: 6.5px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.2vw;
}

}

/* set below to max dpr: 2 not min so doesn't overwrite dpr 3.0 code above*/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-max-device-pixel-ratio: 2)  {

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
	width: 80vw;	    /* was 80vw was 50vw but too wide compared to live slider */
	bottom: 20px;          /* was first 2vh then 0px now 20px because of collapsed navbar line over h5 */
}


.carousel-caption h2  {
    font-size: 3.4vw;                  /* not 2.6 was too large in 1.7.1*/
    font-weight: 700;                      /* 600 not 700 as before*/
    color:#fffdfc;
    line-height: 1.0;                 /* was .9 NEW less vertical gap with p*/
}

.carousel-caption p {
    font-size: 2.0vw;
    font-weight: 500;
    color:#f9f8f7;
    line-height: 1.1;        /* was 1.2 */
}

.carousel-caption .ghost-button {
	min-width: 132px;	/* new added to widen button  desktops laptops originally 130px lines 1503 1483 */
    border-radius: 0px;   /* was 19px now 30px */
    font-size: 17px;          /* was 17px now 20px */
    margin: 10px 0px 0px 0px;
    padding: 5px 12px 7px 12px;
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.4vw !important;
}

}

/* below is default media query for desktop and laptop images. Note slidewrapper is set for laptops (lower) and we use  media query 1900 for desktops */


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

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 50vw;	    /* was 42 then was 50vw but too wide compared to live slider */
		bottom: 2vh;      /* NEW 14/09/2019 was 0px now 2vh  */
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    width: 40vw;
}

.carousel-caption  h2  {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.2vw;          /* was 2.4 */
    font-weight: 600;
    color:#fffdfc;
    line-height: 1.0;    /* was .9 was .85 and 1.0 now matched apple macbook air / pro  and desktop */
	letter-spacing: 0px;    /* was 2px new added to widen title more professional */
}

.carousel-caption p {
	line-height: 1.2;
	font-weight:400;
	font-size: 1.2vw;
	margin-bottom: 2px;
}

.carousel-caption .buttonwrapper  {
	padding-top: .2vw;   /* was 2px now .1vw new */
}

.carousel-caption .buttonwrapper .ghost-button {
    min-width: 132px;	/* new added to widen button  desktops laptops originally 130px lines 1503 1483 */
    border-radius: 0px;   /* was 19px now 30px */
    font-size: 17px;          /* was 17px now 20px */
    margin: 10px 0px 0px 0px;
	padding: 5px 15px 7px 15px;    /* was padding: 5px 12px 7px 12px; */
}

.carousel-caption .icon-scroll    {
    padding-top: 6.5px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll  h5 {
    font-size: 1.0vw;   /* was .8vw but  blurred on laptop  but not desktop*/
	padding-top:0px;     /* default line 330 is 5px  here its 2 to make gap more symmetrical*/
	text-align:center;
	pa5dding-top:5px;
    color:#a1a3a7;
    letter-spacing: 1.0px;	 /* new added to widen typography */
}

}


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

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 50vw;	   /* was 42vw was 50vw but too wide compared to live slider */
	  bottom: 6vh;      /* NEW 14/09/2019 was 2vh now 6vh  */
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    width: 40vw;
}

.carousel-caption  h2  {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.2vw;           /* was 2.4vw */
    font-weight: 600;
    color:#fffdfc;
    line-height: 1.0;    /* was .9 was .85 and 1.0 now matched apple macbook air / pro  and desktop */
    letter-spacing: 1.3px;    /* was 1.3px */
}

.carousel-caption p {
	line-height: 1.2;
	font-weight:400;
	font-size: 1.2vw;         /* was 1.2vw */
	margin-bottom: 3px;
}

.carousel-caption .buttonwrapper  {
    padding-top: .15vw;   /* was 2px now .3vw new */
}

.carousel-caption .buttonwrapper .ghost-button {
    min-width: 150px;		 /* new added to widen button  desktops laptops originally 130px lines 1503 1483 */
    border-radius: 0px;   /* was 19px now 30px */
    font-size: 20px;          /* was 17px now 20px */
    margin: 10px 0px 0px 0px;
    padding: 5px 25px 7px 25px;     /* was padding: 5px 12px 7px 12px; */
}

.carousel-caption .icon-scroll  .mouse  {
	height: 32px;
	width: 15px;
	border: 2px solid rgba(255,255,255, 0.7);
	border-radius: 15px;
	position:relative;
    margin:auto
	text-align:center;
	-webkit-animation-delay: 5.3s;
	animation-delay: 5.3;
	-webkit-animation-duration: 1.9s;
	animation-duration: 1.9s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}

.carousel-caption .icon-scroll .mouse {
    height: 32px;
	width: 15px;
	border: 2px solid rgba(255,255,255, 0.7);
	border-radius: 15px;
	position:relative;
    margin:auto
}

.carousel-caption .icon-scroll  {
    padding-top: 8.5px;     /* was 7.5 was .45vw but gets too large when moving from desktyop 1900 to apple huge screens so use fixed pixels instead */
}

.carousel-caption .icon-scroll   h5 {
    letter-spacing: 1.5px;	 /* new */
	font-size: 0.8vw;   /* new*/
    margin-top: 5px !important;
}

}


/* Portrait ipad pro 11 fix. We try to avoid specific rules but needed to avoid nav bar over h5in ios 12. Note min max values are same to target ONLY ipad pro 11 */
@media only screen
  and (min-device-width: 834px)
  and (max-device-width: 834px)
  and (orientation: portrait)
  and (-webkit-min-device-pixel-ratio: 2) {

.carousel-caption {
    width: 70vw;
	bottom:20px;                    /* was 0px but Ipad Pro ios 12 has annoying white expanding  bar that covers h5 so need to add padding for h5 height*/
}

}

/* Landscape ipad pro 11 fix. We try to avoid specific rules but needed to avoid nav bar over h5in ios 12. Note min max values are same to target ONLY ipad pro 11 */
@media only screen
  and (min-width: 1112px)
  and (max-width: 1112px)
  and (orientation: landscape)
  and (-webkit-min-device-pixel-ratio: 2)
 {


}


 /* ipad pro 12 etc retina min 968 YOU HAVE to put at end or despite the device pixel ratio its over ruled by normal 968 rule*/

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait),
only screen and (                min-resolution: 192dpi) and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait),
only screen and (                min-resolution: 2dppx)  and (min-width: 968px) and (max-device-width: 1229px) and (orientation :portrait)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 20%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 10%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 0%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 0%;
}

.carousel-caption {
    width: 70vw;
	bottom:20px;                    /* was 0px but Ipad Pro ios 12 has annoying white expanding  bar that covers h5 so need to add padding for h5 height*/
}

.carousel-caption h2  {
    font-size: 4.0vw;
    font-weight: 700;
    color:#fffdfc;
    line-height: 1.0;	/* was .9vw */
}

.carousel-caption p  {
	font-size: 2.3vw;
    font-weight: 600;
    color:#f9f8f7;
    line-height: 1.1;	 /* was 1.2vw */
}

/* ipad retina / Pro added buttons below to stop a wobbly state from no explicit  values ipad dpi 2.0*/

.carousel-caption .ghost-button {
    border-radius: 0px;
    font-size: 16px;
    padding: 6px 6px 8px 6px;  /* was 6 6 6 6 but 6 6 8 6 more centered vertically on ios and same on android...*/
    font-weight: normal;
    margin: 10px 0px 0px 0px;
    min-width: 130px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6.5px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.4vw;
}

}


@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1298px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1298px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 968px) and (max-device-width: 1298px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 968px) and (max-device-width: 1298px) and (orientation :landscape),
only screen and (                min-resolution: 192dpi) and (min-width: 968px) and (max-device-width: 1298px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (min-width: 968x)  and (max-device-width: 1298px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 70vw;
    bottom: 20px /* was 0px but Ipad Pro ios 12 has annoying white expanding  bar that covers h5 so need to add padding for h5 height*/
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    width: 60vw;
}

.carousel-caption h2  {
    font-size: 3.2vw;
    font-weight: 600;
    color: #fffdfc;
    line-height: 1;        /* was .9 was 0.8 */
	font-weight: 700 /* NEW */
}

.carousel-caption p  {
	font-size: 1.9vw;
    font-weight: 500;
    color: #f9f8f7;
	line-height: 1.1;	/* was 1.2 */
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.2vw !important;
}

}


 /* below media queries for landscape ipad pro... note 1230px to pick up from last media query... */

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape),
only screen and (                min-resolution: 192dpi) and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape),
only screen and (                min-resolution: 2dppx)  and (min-width: 1299px) and (max-width: 1999px) and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 70vw;      /* was 60vw */
    bottom: 20px /* was 0px but Ipad Pro ios 12 has annoying white expanding  bar that covers h5 so need to add padding for h5 height*/
}

.carousel-caption .category{
    margin-left: auto;                 /* NEW */
    margin-right: auto;
    width: 60vw;
}

.carousel-caption h2  {
    font-family: 'roboto condensed', sans-serif;
    font-size: 3.2vw;
    font-weight: 600;
    color: #fffdfc;
    line-height: 1.0;               /* was .9 was 0.8 */
    letter-spacing: 2px;
}

.carousel-caption p  {
	font-size: 2.0vw;
    font-weight: 600;
    color: #f9f8f7;
	line-height: 1.0;    /* was 1.1vw */
	padding-bottom:3px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6.5px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.0vw !important;
    padding-top: 1px;
}

}

@media
only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 2000px),
only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 2000px),
only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 2000px),
only screen and (        min-device-pixel-ratio: 2)      and (min-width: 2000px),
only screen and (                min-resolution: 192dpi) and (min-width: 2000px),
only screen and (                min-resolution: 2dppx)  and (min-width: 2000px) {

   /* below for MacBook Pro 13 15 inch retina ((2pr display) add large screen retina 4k in future... */

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 40vw;
    bottom:  0px;  /* was -2.3vh before universal bottom anchor */
}

.carousel-caption h2  {
    font-family: 'roboto condensed', sans-serif;
    font-size: 2.0vw;
    font-weight: 600;
    color: #fffdfc;
    line-height: .9;         /* was .8 */
    letter-spacing: 2px;
}

.carousel-caption p  {
	font-size: 1.2vw;
    font-weight: 600;
    color: #f9f8f7;
	line-height: 1;      /* was 1.1 */
}

.carousel-caption .icon-scroll    {
    padding-top: 7px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: .5vw;
    padding-top: 0px;
}

}

 /* at bottom for kindle fire landscape. Despite landscape rule it gets overwrtitten so its here... mobile-first ordering overrides landscape... */

@media
only screen and (-webkit-max-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (   max--moz-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (     -o-max-device-pixel-ratio: 1/1)    and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (        max-device-pixel-ratio: 1)      and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (                max-resolution: 96dpi)  and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape),
only screen and (                max-resolution: 1dppx)  and (min-device-width : 768px) and (max-device-width : 1024px)  and (orientation :landscape)
{

.carousel-fade .carousel-inner .item .slide-1 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-2 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-3 img {
        object-position: 50% 50%;
}

.carousel-fade .carousel-inner .item .slide-4 img {
        object-position: 50% 50%;
}

.carousel-caption {
    width: 50vw;
    bottom: 0px;   /* was -2.3vh */
}

.carousel-caption h2 {
    font-family: 'roboto condensed', sans-serif;
    font-size: 3.4vw;
    font-weight: 600;
    color: #fffdfc;
    line-height: .9;
    letter-spacing: 2px;
}

.carousel-caption p  {
	font-size: 1.6vw;
    font-weight: 600;
    color: #f9f8f7;
	line-height: 1.2;
	padding-bottom:2px;
}

.carousel-caption .icon-scroll    {
    padding-top: 6px;	/* new was .3vw;*/
}

.carousel-caption .icon-scroll   h5 {
    font-size: 1.4vw !important;
}

}