/* styles.css */

html,
body {
    background: url('http://p7.cms.usssa.net/wp-content/uploads/2018/01/UFE-Background_XL.jpg') no-repeat top center #141414;
    height: 100%
}

/* cover */

.bg-dark {
  border-color: #141414 !important;
  background-color: #141414 !important;
  padding-top: 40px;
  padding-bottom: 30px;
  width: 100%;
}

#cover-caption {
        display: flex
        align-items: center
}

.jumbotron {
   background: rgb(51, 51, 51); /* This is for ie8 and below */
   background: rgba(51, 51, 51, 0.8); 
}

.card {
   background: rgb(203, 34, 38); /* This is for ie8 and below */
   background: rgba(203, 34, 38, 0.7); 
    margin-bottom: 50px
}

.card-title {
   color: rgb(255, 255, 255); /* This is for ie8 and below */
}

.card-text {
   color: rgb(255, 255, 255); /* This is for ie8 and below */
}

.btn-primary {
    color: #fff;
    background-color: #e31d1a;
    border-color: #e31d1a; 
    border-radius: var(--border-radius);
    margin-bottom: 20px;
    margin-top: 5px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
    color: #fff;
    background-color: #e34b49;
    border-color: #e31d1a; 
}

.btn-sm {
    color: #fff;
    border-color: #e31d1a;
    margin-top: 10px;
    margin-bottom: 20px;
}

.btn-outline-primary
.btn-outline-primary:hover {
    color: #fff
    border-color: #e31d1a;

}

.row.vdivide [class*='col-']:not(:last-child):after {
  background: #d2d2d2;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 370px;
}

.row.rdivide [class*='col-']:not(:last-child):after {
  background: #d2d2d2;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top: 0;
  bottom: 1;
  right: 0;
  min-height: 170px;
}

.my-4 {
       background: rgba(203, 34, 38, 0.0);
      width: 2px;
}

.left_vid {
    display:block;
    margin-left:auto;
    margin-right:auto;
    width: 80%;
    height:auto;
 }
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}

.flip-container, .front, .back {
    width: 225px;
    height: 225px;
}

.flipper {
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;

    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;


    position: absolute;
    top: 0;
    left: 0;
}

.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}

.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


.front {
    z-index: 2;
}

.logo-container {
    padding-bottom: bottom: 40px;
}

.btn-outline,
.btn-outline:hover {
    color: #fff;
    border-color: #e31d1a; 
    margin-bottom: 20px;
}

.btn-outline {
  border-radius: var(--border-radius);
}

.btn-outline:hover {
  box-shadow: inset 0 0 0 20rem var(--darken-1);
  background-color: #e31d1a;
}

.btn-outline:active {
  box-shadow: inset 0 0 0 20rem var(--darken-2),
    inset 0 3px 4px 0 var(--darken-3),
    0 0 1px var(--darken-2);
}

.btn-outline:disabled,
.btn-outline.is-disabled {
  opacity: .5;
}

.btn-xl {
    font-size: 35px;
    border-radius: var(--border-radius);
}

.lead {
  font-size: 18px;
  font-weight: 400; 
}

.text-white-gray {
  color: rgba(255, 255, 255, 0.8) !important; 
}

hr {
    border: none;
    height: 4px;
    /* Set the hr color */
    color: #fff; /* old IE */
    background-color: #fff; /* Modern Browsers */
}

.video-responsive{
    overflow:hidden;
    padding-bottom:45.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
    max-height: 315px;
    max-width: 560px;
}

@media screen and (max-width: 520px) {
    img {
         max-width: 350px;
    }
}