body {
  font-family: "Open Sans", sans-serif;
  color: white;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url('../img/background/ccc_hanging.jpg') no-repeat top left fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



::-moz-selection { background: #8542a0; color: #fff; text-shadow: none; }
::selection { background: #8542a0; color: #fff; text-shadow: none; }



/***** General style, all sections *****/

.section-container { margin: 0 auto; padding-bottom: 80px; }

.section-container-gray-bg { background: #f8f8f8; }

.section-container-image-bg, 
.section-container-image-bg h2, 
.section-container-image-bg h3 { color: #fff; }

.section-container-image-bg .divider-1 span { border-color: #fff; }

.section-description { margin-top: 60px; padding-bottom: 10px; }

.section-description p { margin-top: 20px; padding: 0 120px; }
.section-container-image-bg .section-description p { opacity: 0.8; }

.section-bottom-button { padding-top: 60px; }


/***** Top content *****/

.top-content { width: 100%; padding: 60px 0 120px 0; }

.top-content h1 { padding-top: 60px; color: #fff; }
.top-content .description { margin: 30px 0 0 0; padding-bottom: 30px; }
.top-content .description p { color: #fff; color: rgba(255, 255, 255, 0.8); }
.top-content .description a { color: #fff; color: rgba(255, 255, 255, 0.8); border-color: #fff; border-color: rgba(255, 255, 255, 0.8); }
.top-content .description a:hover,
.top-content .description a:focus { color: #fff; color: rgba(255, 255, 255, 0.8); }

.top-content .carousel { box-shadow: 0 0 15px 0 #444; }
.top-content .carousel-control-prev { left: -110px; border-bottom: 0; }
.top-content .carousel-control-next { right: -110px; border-bottom: 0; }
.top-content .carousel-indicators { bottom: -80px; }
.top-content .carousel-indicators li { width: 16px; height: 16px; margin-left: 5px; margin-right: 5px; border-radius: 50%; }



.youtubevid {
    width: 560px; /* you have to have a size or this method doesn't work */
    height: 315px; /* think about making these max-width instead - might give you some more responsiveness */
    top: 0; right: 0; /* confuse it i guess */
    bottom: 0; left: 0;
    margin: auto; /* make em equal */
}
.toprow {
    margin-top: 10px;
    margin-bottom: 10px;
    color: white;
    font-weight: bold; 
    text-shadow: 1px 1px 10px black; 
    text-align: center;
    padding-bottom: 0;
    justify-content: center;
    align-items: center; 
}

a: {
  color: white;
  text-decoration: none;
}
a:hover {
  color: white;
  text-decoration: none;
}
a:visited {
  color: white;
  text-decoration-color: none;
}
a:link {
  color: white;
  text-decoration-color: none;
}
.flex-box {
  display: flex;
  flex-flow: row wrap;
}

.flex-box #myCarousel{
  flex: 1 1 50%
}

.flex-box #desc {
  flex: 1 1 50%;
}

.fa-brands, .fab {
    font-weight: 400;
    vertical-align: bottom;
}
.carousel {
   -webkit-filter: grayscale(100%);
   -moz-filter: grayscale(100%);
   -ms-filter: grayscale(100%);
   -o-filter: grayscale(100%);
   filter: grayscale(100%);
}