* {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 100px; /* Set this to your header's exact height */
  scroll-behavior: smooth;   /* Optional: adds a smooth scroll effect */
}
/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

.so-panel, .widget-header{
	margin-bottom: 0 !important; padding: 0;
}

.u-of-u-marquee-content img.u-of-u-marquee-logo {
    width: auto;
    height: auto;
    margin: 0px auto 50px auto !important;
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}

/* .card */
.card {
        box-shadow: 0px 0px 10px /*#E2E6E6 #707271*/ rgba(0,0,0,.3);
        display: inline-block;
        vertical-align: top;
        border-radius: 7px;
        background: #fff;
        width: 100%;
        padding: 0px !important;
        margin: 0px !important;
        align-items: center;
    }

.card p { font-size: 1em; }

.card p:first-of-type { min-height: 0px; }

.card-image {
    width: 100%;
    height: auto;
    border-radius: 7px 7px 0px 0px;
    border-bottom: 3px solid #be0000;
    margin: 0 !important;
    padding: 0 !important;
}

.card-content {
        width:100%;
        padding: 15px;
    }

.top-card {
    background-color: #E2E6E6 !important;
    font-size: 1.3em;
    line-height: auto !important;
}

.top-card div strong{
    font-size: 1.7em;
    margin-bottom: .5em !important;
    
}

.inset-card-middle {border: 0 1px 0 1px solid #000000;}
/* End cards*/

/* Fonts */
section-header {font-family: Independent !important;}

/* Primary Colors*/
.utah-red {color: #be0000;}
.black {color: #000000;}
.white {color: #ffffff;}
.zion-cinder-cone {color: #707271;}
		
/* Accent Colors*/
.granite-peak {color: #708e99;}
.wasatch-sunrise {color: #ffb81d;}
.red-rocks {color: #890000;}
.mountain-green {color: #6cc24a;}
.great-salt-lake {color: #3abfc0;}
.salt-flat-grey {color: #e2e6e6;}

:root {
		/* Primary Colors*/
		--utah-red: #be0000;
		--black: #000000;
		--white: #ffffff;
		--zion-cinder-cone: #707271;
		
		/*Accent Colors*/
		--granite-peak: #708e99;
		--wasatch-sunrise: #ffb81d;
		--red-rocks: #890000;
		--mountain-green: #6cc24a;
		--great-salt-lake: #3abfc0;
		--salt-flat-grey: #e2e6e6;
}

/* Buttons */
.d-flex { display: flex !important;}

.jump-link {padding: 15px; margin:5px; border-radius:3px; cursor: pointer;}
.jump-link {text-decoration: none !important; }

.primary {background-color: #fff; border: 1px solid var(--utah-red); color: #be0000 !important;transition: all 0.3s ease-in-out;}
.primary:hover {background-color: #be0000; color:#fff !important;}

.secondary {background-color: #be0000; border: 1px solid #be0000; color: #fff; transition: all 0.3s ease-in-out;}
.secondary:hover {background-color: #fff; color: #be0000 !important;}

.team-card {
		display: inline-block; vertical-align: top; margin: 10px; text-align: center; min-width: 275px; width: 31%; height: 450px; background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); border-radius: 7px;
}

th {border: 1px solid var(--salt-flat-grey); background-color: var(--salt-flat-grey); color: black;}


/* Video Container */

.vid-container {
    position: relative;
    max-width: 500px;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}

.vid-container img { 
    border-radius: 10px; 
}

.vid-container:hover {
    background-color: black;
    border-radius: 10px;
}
.vid-container p {display: none; }
.image {
  opacity: 1;
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
}

.middle {
  transition: .5s ease;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

.vid-container:hover .image {
  opacity: 0.3;
}

.vid-container:hover .middle {
  opacity: 1;
}

.middle .btn-primary:hover {
    background-color: #be0000 !important;
    border: 1px solid #fff;
}

.over-btn-text {/*
  background-color: #be0000;
  color: white;
  font-size: 16px;
  padding: 16px 32px;*/
}

.over-text {
	color: white;
}
/* end Video Container */

/* Media Queries */
@media (max-width: 767px) {

		.team-card {display: inline-block; vertical-align: top; margin: 10px; text-align: center; width: 100%; height: 450px; background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}	
}

@media (min-width: 768px) and (max-width: 1034px) {
		.team-card {display: inline-block; vertical-align: top; margin: 10px; text-align: center; width: 46%; height: 450px; background-color: #ffffff; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}
}