html{
    background-color:black;
}
h1, h2, h3, h4, h5, a{
    font-family:"Michroma";
    text-align: center;
}
p{
    font-family:"Arial";
}
.responsive25{
    width:50%;
    height:auto;
}
.red{
    background-color:red;
}
.card{
    color:black;
    margin:auto;
}
.card-title{
    text-decoration-line:underline;
    text-align: center;
}
.leftenter {
	width:100%;
    height:100%;
  position: relative;
  animation-name: leftenter;
  animation-duration: 3s;
}

@keyframes leftenter {
  0%   {left:-800px; top:0px;}
  100% {left:0px; top:0px;}
}
.rightenter {
	width:100%;
    height:100%;
  position: relative;
  animation-name: rightenter;
  animation-duration: 3s;
}

@keyframes rightenter {
  0%   {right:-800px; top:0px;}
  100% {right:0px; top:0px;}
}
.bluetxt{
    color: #3158A6;
}

.links{
    color: #3158A6;
}
/* unvisited link */
a:link {
  color: white;
  text-decoration:none;
}

/* visited link */
a:visited {
  color: white;
  text-decoration:none;
}

/* mouse over link */
a:hover {
  color: #D1D1D1;
}

/* selected link */
button:active, a:active {
  color: white;
  text-decoration:none;
}


.bluebg{
    background-color:#3158A6;
    color:white;
}
.whitebg{
    background-color:white;
    color:black;
}
.blackbg{
    background-color:black;
    color:white;
}
.white{
    color:white;
}

header {
  position: relative;
  background-color: black;
  height: 75vh;
  min-height: 25rem;
  width: 100%;
  overflow: hidden;
}

header video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 0;
  -ms-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}

header .container {
  position: relative;
  z-index: 2;
}

header .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: black;
  opacity: 0.5;
  z-index: 1;
}

/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('http://www.laurenelizabethdesign.com/KOR/images/transmission.png') black no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

.ro3container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}

.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}

.centered {
  position: absolute;
  width:100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gray{
    color: #D1D1D1 !important;
}