html, body, h1, h2, h3, h4, h5, h6, td, tr, th {
  font-family: "Raleway:300", sans-serif;
}

b, strong {
  font-weight: 400;
}

p {
  line-height: 2;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
  margin-top: 0px;
}




/*ul {list-style: none;}
*/

  /* ~~ Element/tag selectors ~~ */
  ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
	  padding-left: 20px;
	  margin: 0;
      padding-right: 10px;
  }



ul li:before {
  /*content: "•";*/
  font-size: 70%;
  padding-right: 10px;
  line-height: 3;
  vertical-align: middle;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 3px;
  font-weight: 400;
  margin-top: 0px;
  margin-bottom: 0px;
}

body, html {
  height: 100%;
  line-height: 1.8;
}

body {
  font-family: "Raleway:300", sans-serif;
  letter-spacing: 1px;
  font-weight: lighter;
  background-color: ;
}

.mySlides {
  display: none
}



/* TABS START ------------------------------ */
div.tab {
    overflow: hidden;
    border: 0px solid #fff;
    background-color: #fff;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: #fff;
    float:left;
    text-align: center;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
    letter-spacing: 1px;
    
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 0px solid #fff;
    border-top: none;
}

/* Style the close button */
.topright {
    float: right;
    cursor: pointer;
    font-size: 20px;
}

.topright:hover {color: red;}
/* TABS END ------------------------------ */




/* Create a Parallax Effect */

.bgimg-1, .bgimg-2, .bgimg-3, .bgimg-4, .bgimg-5, .bgimg-6, .bgimg-7, .bgimg-8, .bgimg-9, .bgimg-10, .bgimg-11, .bgimg-12, .bgimg-13, .bgimg-14, .bgimg-15, .bgimg-16, .bgimg-17, .bgimg-18, .bgimg-19, .bgimg-20 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

a.dark:link {
  color: #fff;
  text-decoration: none;
  /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a.dark:visited {
  color: #fff;
}

a.dark:hover, a:active, a:focus {
  /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: none;
  color: #ffcb00;
}

a.darkrev:link {
  color: #ffcb00;
  text-decoration: none;
  /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a.darkrev:visited {
  color: #ffcb00;
}

a.darkrev:hover, a:active, a:focus {
  /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: none;
  color: #fff;
}

a.darkcopy:link {
  color: #ffcb00;
  text-decoration: none;
  /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a.darkcopy:visited {
  color: #ffcb00;
}

a.darkcopy:hover, a:active, a:focus {
  /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: none;
  color: #fdf3b4;
}

a img {
  /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
  border: none;
}


/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */

a:link {
  color: #a5a5a5;
  text-decoration: none;
  /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
}

a:visited {
  color: #a5a5a5;
}

a:hover, a:active, a:focus {
  /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
  text-decoration: none;
  color: #000000;
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}

.imagezoom {
  position: relative;
  border: 0px;
  margin: 2%;
  overflow: hidden;
  float: right;
  background-position: 100px 100px;
}

.imagezoom img {
  max-width: 100%;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.imagezoom:hover img {
  -moz-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.videobannerzoom {
  position: relative;
  border: 0px;
  margin: 5px;
  overflow: hidden;
  high: 117px;
  float: left;
  background- position: 0px 0px;
}

.videobannerzoom img {
  max-width: 100%;
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.videobannerzoom:hover img {
  -moz-transform: scale(1.05);
  -webkit-transform: scale(1.05);
  transform: scale(1.05);
}

div.fish {
  width: 200px;
  height: 132px;
  position: relative;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: fish;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-direction: alternate;*/
  /* Standard syntax */
  animation-name: fish;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
}

div.catchme {
  width: 142px;
  height: 41px;
  position: relative;
  /* Safari 4.0 - 8.0 */
  -webkit-animation-name: catchme;
  -webkit-animation-duration: 7s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  /*-webkit-animation-direction: alternate;*/
  /* Standard syntax */
  animation-name: catchme;
  animation-duration: 7s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  /*animation-direction: alternate;*/
}


/* Safari 4.0 - 8.0 */

@-webkit-keyframes example {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 95%;
    top: 0px
  }
  100% {
    left: 0px;
    top: 0px;
  }
}


/* Standard syntax */

@keyframes fish {
  0% {
    left: 0px;
    top: 0px;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
  50% {
    left: 95%;
    top: 0px;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
  51% {
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  99% {
    left: 0px;
    top: 0px;
    -moz-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  100% {
    left: 0px;
    top: 0px;
    -moz-transform: scale(-1, 1);
    -webkit-transform: scale(-1, 1);
    -o-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
  }
}

@keyframes catchme {
  0% {
    left: 0px;
    top: 0px;
  }
  50% {
    left: 95%;
    top: 0px;
  }
  99% {
    left: 0px;
    top: 0px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

.marketsPX {
  /* The image used */
  background-image: url("images/Markets/Markets1.jpg");
  /* Full height */
  /* height: 100%; */
  /* height: 300px; */
  width: 100%;
  height: 600px;
  /*width: 100%;*/
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.parallax2 {
  /* The image used */
  background-image: url("images/Markets/Markets1.jpg");
  /* Full height */
  /* height: 100%; */
  /* height: 300px; */
  height: 100%;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Turn off parallax scrolling for tablets and phones. Increase the pixels if needed */

@media only screen and (max-device-width: 1024px) {
  .parallax {
    background-attachment: scroll;
  }