body {
	opacity: 1;
	transition: 5s opacity;
  }
  
  body.fade-out {
	opacity: 0;
	transition: none;
  }
  
  .hero-image {
	  background-image:url("images/newImages/treeSm.png");
	  height: 800px;
	  background-color:white;
	  width: 100%;
	  background-position-x: 0;
	  margin-top: -50px;
	  background-repeat: no-repeat;
	  position: relative;
	  animation-name: FadeInOut;
	  animation-timing-function: ease-in-out;
	  animation-duration: 5s;
	  animation-fill-mode: forwards;
  }
			
  @keyframes FadeInOut {
	  0% { opacity: 0; }
	  100% { opacity: 1; }
  }
  
  a {
	  color: white;
	  font-size: 12pt;
  }
  
  .icon--arrow-right, .icon--arrow-left, .icon--zoom {
	  color: black;
  }
  
  .pink {
	  margin-top: -455px; 
	  padding: 672px 400px 0 210px; 
	  margin-left: -220px; 
	  background: transparent; 
	  position: absolute;
	  z-index: 1000;
  }
  
  .arrow {
	  margin: 242px 60px 0 60px;
  }
  
  .content__item-img {
	  border-top: solid white 0;
	  border-right: solid white 20px;
	  border-bottom: solid white 0;
  }
  
  .navbar-inverse .navbar-nav > li > a {
	  color: #fff;
	  font-size: 9pt;
	  padding-left: 30px;
  }
  
  .navbar-inverse .navbar-nav > li > a:hover {
	  text-decoration: underline;
  }
  
  h2 {
	  display: none;
  }
  
  h1 {
	  font-size: 15pt;
	  color:goldenrod;
  }
  
  .slider {
	  margin-top: 90px;
  }
  
  .container {
	  margin-top: 50px;
	  overflow: hidden;
	  background: transparent;
  }
  
  .slider__nav {
	  color: black;
	  background: white;
	  margin-top: -50px;
  }
  
  .navbar-inverse {
	  margin-top: -50px;
  }
  
  .button--close {
	  margin-top: 100px;
  }
  
  .content__item-img {
	  margin-top: 20px;
  }
  
  .icon--circle-cross {
	color:white;
  }
  
  .icon--circle-cross:hover {
	color: goldenrod;
  }
  
  .icon--arrow-right, .icon--arrow-left, .icon--zoom {
	  color: black;
  }
  
  .icon-bar {
	  width: 150px;
  }
  
  .slider__nav {
	  bottom: 4em;
	  width: 100%;
	  text-align: center;
  }
  
  .tag, .logo {
	  color: #18191b;
  }
  
  .tag {
	  font-weight: 500;
	  animation: moveInTag;
	  animation-duration:4s;
	  animation-fill-mode:forwards;
	  margin-left: -25px;
  }
  
  .logo {
	  font-weight: 500;
	  animation: moveIn;
	  animation-duration:3s;
	  animation-fill-mode:forwards
  }
  
  .row {
	  margin-right: 0;
	  margin-left: -145px;
	  margin-top: -130px;
  }
  
  @keyframes moveIn {
	  0% {left: -1090px;}
	  100% {left:0;}
  }
		
  @keyframes moveInTag {
	  0% {left:  -1090px;}
	  100% {left: 0;}
  }
  
  .navbar {
		border:none;
		padding-right: 0;
		animation: moveMenu;
		animation-duration:5s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
	  padding-top: 0;
		margin-top: -50px;
  }
		
  @keyframes moveMenu {
	  0% { right: -120px;}
	  100% {right: 0px;}
  }
  
  @media screen and (min-width: 683px) {
  
	  body {
		  overflow: visible;
	  }
  
	  .hero-image {
		  background-image:url("images/newImages/tree1600.png");
		  background-position-x: -200px;
		  overflow: visible;
	  }
  
	  .preview {
		  box-shadow: 5px 5px 5px #2c2b2b;
		  padding: 100px 50px 100px 50px;
		  background: white;
		  z-index: 10000;
		  margin-top: 80px;
	  }
  
	  .slider__nav {
		  width: 100%;
		  text-align: center;
		  background: transparent;
		  bottom: 0;
		  z-index: 10000;
		  bottom: 0;
	  }
  
	  .row {
		  margin-right: 0;
		  margin-left: -115px;
		  margin-top: 0;
	  }
  
	  .navbar {
		  font-weight: 600;
		  z-index: 10000;
		  background: #222222;
	  }
  
	  .navbar-inverse .navbar-nav > li > a {
		  color: #fff;
		  font-size: 11pt;
		  padding-left: 30px;
	  }
  
	  .zoomer__image {
		  margin-top: 100px;
	  }
  
	  h1 {
		  font-size: 20pt;
		  color:goldenrod;
	  }
  
	  @keyframes moveMenu {
		  0% { right: -1200px;}
		  100% {right: 70px;}
	  }
  }
  
  @media screen and (min-width: 911px) {
  
	  .hero-image {
		  background-image:url("images/newImages/tree1600.png");
		  background-position-x: -400px;
		  background-position-y: -30px;
	  }
  
	  .preview {
		  box-shadow: 5px 5px 5px #2c2b2b;
		  padding: 50px 50px 50px 50px;
		  background: white;
		  z-index: 10000;
		  margin-top: 30px;
	  }
  
	  .zoomer__image {
		  margin-top: 40px;
	  }
  
  
	  .slider__nav {
		  top: 270px;
		  width: 100%;
		  text-align: center;
		  background: transparent;
		  bottom: 0;
	  }
		  
	  .content__item {
		  margin-top: -100px;
	  }
  
	  h1 {
		  margin-left: -50px;
	  }
  
	  p {
		  margin-left: -50px;
		  font-size: 12pt;
	  }
  
	  .row {
		  margin-right: 0;
		  margin-left: -125px;
		  margin-top: -120px;
	  }
  }
  
  @media screen and (min-width: 1600px) {
  
  .hero-image {
	  background-position-x: 0;
	  background-position-y: -70px;
  }
  
  .row {
		  margin-right: 0;
		  margin-left: -15px;
		  margin-top: -120px;
  }
  
  .pink {
	  margin-top: -180px; 
	  padding: 700px 300px 50px 300px; 
	  margin-left: 250px; 
	  background: transparent; 
	  position: absolute;
	  color: transparent;
  }
  
  .slider__nav {
		  background:transparent; 
		  z-index: 10000; 
		  color: white; 
		  margin: -300px -570px; 
		  padding: 30px; 
		  position: absolute;
  }
  
  .preview {
	  box-shadow: 5px 5px 5px #2c2b2b;
	  padding: 300px 50px 200px 50px;
	  background: white;
	  z-index: 10000;
  }
  
  .navbar {
		border:none;
		padding-right: 0;
		animation: moveMenu;
		animation-duration:5s;
		animation-timing-function: ease-in-out;
		animation-fill-mode:forwards;
	  padding-top: 0;
		margin-top: -50px;
  }
		
  @keyframes moveMenu {
	  0% { right: -1200px;}
	  100% {right: 300px;}
	  }
  }
  
  .tag, .logo {
	font-family: Arial, Helvetica, sans-serif;
	color: #18191b;
	font-size: 11pt;
	z-index:1000
  }
  
  .tag {
	margin-top: 0px;
	font-weight: 500;
	animation: moveInTag;
	animation-duration:4s;
	animation-fill-mode:forwards;
  }
  
  .logo {
	margin-top: 100px;
	font-weight: 600;
	animation: moveIn;
	animation-duration:3s;
	animation-fill-mode:forwards
  }
  
  @keyframes moveIn {
	0% {left: -1090px;}
	100% {left: 150px;}
  }
		
  @keyframes moveInTag {
	0% {left:  -1090px;}
	100% {left: 190px;
	  }
  }
  
  @media screen and (min-width: 1920px) {
	  
	  .hero-image {
		  background-image:url("images/newImages/tree1940.png");
		  background-position-x: 0;
		  background-position-y: 0;
	  }
  }