@font-face {
  font-family: 'Mathilde';
  src: url("Mathilde.eot?#iefix") format("embedded-opentype"), url("Mathilde.otf") format("opentype"), url("Mathilde.woff") format("woff"), url("Mathilde.ttf") format("truetype"), url("Mathilde.svg#Mathilde") format("svg");
  font-weight: normal;
  font-style: normal; }

@font-face {
  font-family: 'VeteranTypewriter';
  src: url("VeteranTypewriter.eot?#iefix") format("embedded-opentype"), url("VeteranTypewriter.woff") format("woff"), url("VeteranTypewriter.ttf") format("truetype"), url("VeteranTypewriter.svg#VeteranTypewriter") format("svg");
  font-weight: normal;
  font-style: normal; }

  @font-face {
    font-family: 'underwood_championregular';
    src: url('underwood_champion-webfont.eot');
    src: url('underwood_champion-webfont.eot?#iefix') format('embedded-opentype'),
         url('underwood_champion-webfont.woff2') format('woff2'),
         url('underwood_champion-webfont.woff') format('woff'),
         url('underwood_champion-webfont.ttf') format('truetype'),
         url('underwood_champion-webfont.svg#underwood_championregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html, body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background-size: 100px 100px;
  background-position: center;
  background-repeat: no-repeat;
  background: url("img/bg-1.jpeg"); }



body {
  overflow-y: scroll; }

/*h2
    font-family: 'Spectral', serif;
    color: rgb(255, 225, 58);
    font-size: 4em;
    margin-top:0em;
    margin-left: 8em;
    letter-spacing: 50px;
} */
h1 {
  color: goldenrod;
  font-family: 'Stardos Stencil', cursive;
  font-family: 'cutoutsflfregular';
  font-size: 4em;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: center; }

.trademarkR {
  font-size: .45em;
  position: relative;
  bottom: 1em; }

.video {
  border: none; }

.collage {
  background-color: #c0dfa7;
  padding: 2em; }

.information {
  background-color: rgba(255, 99, 71, 0.63); }

.section {
  margin-bottom: 3em; }

.caribbeingLogo {
  padding-bottom: 1em;
  background-color: rgba(0,0,0,1) }

.nav {
  background-color: rgba(7, 7, 7, 1);
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 1.5em 1.25em .5em 1.25em;}

.header-logo {
  margin-top: 2em; }

.header {
  margin-top: 0em;
  z-index: 3; }

.carib-header {
  border-left: 0px;
  border-right: 0px; }

.masonry {
  background-color: rgba(0, 0, 0, .9);
  background: radial-gradient(ellipse farthest-corner at right bottom, #FEDB37 0%, #FDB931 8%, #9f7928 30%, #8A6E2F 40%, transparent 80%), radial-gradient(ellipse farthest-corner at left top, #FFFFFF 0%, #FFFFAC 8%, #D1B464 25%, #5d4a1f 62.5%, #5d4a1f 100%);
  border-radius: 6px;
  width: 100%;
  padding: 1em;
  margin-top: 2rem; }

.masonry-item {
  margin: 1.5%; 
  transition: all 5s;
}

.masonry-item--width3 {
  width: 21%; }

.masonry-item--width5 {
  max-width: 50%; }

.masonry {
  /*border-bottom: 3px solid #fffffb;*/ }





.section h2 {
  font-size: 6.5em;
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fceabb+0,fccd4d+50,f8b500+51,fbdf93+100 */
  color: #d49500;
  /* Old browsers */
  font-family: 'Stardos Stencil';
  font-weight: 700;
  font-size: 6.5em;
  top: 4em;
  left: 2em;
  position: absolute;
  transform: rotate(-90deg);
  transform-origin: left bottom 0; }

.card {

  border: 5px outset black;
  background: none;
  color: rgba(255, 255, 255, 0.767);
  font-family: 'VeteranTypewriter';
  font-size: 1.5em;
  padding: .25em; }

.nav ul {
  font-size: 1.5em;
  font-family: 'Stardos Stencil', cursive;
  list-style: none; }

.nav li {
  display: inline-block;
  margin-right: 2em;
  color: goldenrod;
  cursor: pointer; }

.nav li:hover {
  color: goldenrod; }

.nav li a {
  color: goldenrod; }

.nav li a:hover {
  color: #ffbe26; }

.nav .active {
  color: rgba(255, 190, 38, 0.514) !important; }

.carib-footer{
  font-size: 1em;
  color: #EEE;
  font-style: italic;
}

.carib-footer p{
  background-color: black;
  padding: .25em;
}

.footer{
  text-align: center;
  display: flex;
  justify-content: center;
}


.tagline{
  margin-top: 2em;
  background-color: black;
  color: white;
  font-size: 2em;
  /*font-family: 'VeteranTypewriter', cursive; */
  font-family: 'underwood_championregular', cursive;

}

.attribution{
  padding: 1em 0em 0em 2em;
  margin-top: 1em;
  background-color: black;
  color: white;
  font-size: 1rem;
  font-family: 'underwood_championregular', cursive;
}

.services{
    background-color: black;
    color: white;
    padding: 1em 0em 1em 3em;
}

.timeline-container{
  padding-top: 4em;
  display: flex;
  justify-content: center;
}



@media only screen and (max-width: 500px) {
  .masonry-item--width3 {
    width: 80%;
  }

  .tagline{
    font-size: 1.5rem;
  }

  .nav{
    padding: .5rem;
  }
}