/* html and head */

html{
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
width: 100%;
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
background-color:inherit;
color: white;
font-family: indivisible;
}

html::-webkit-scrollbar {
display: block;
width:6px;
cursor:pointer;
overflow: auto;
background-color:black;
height: 2em;
}


.menuitems{
animation-name:fade;
animation-duration:2s;
}
@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
}

html::-webkit-scrollbar-thumb {
    display: block;
    cursor:pointer;
    overflow: auto;
    background-color:white;
    height: auto;
    border-radius:20px;
}

header{
background-color:#561217;
}

.slider {
    appearance: none; /* removes browser-specific styling */
    width: 150px; /* width of slider */
    height: 20px; /* height of slider */
    background: black ; /* orange background */
    outline: none; /* remove outline */
    border-radius: 12px; /* round corners */
    color: white;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: white; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius: 100;
}

#buttons{
display:flex;
flex-direction:row;
justify-content:space-between;
width:100%;
}

@media screen and (max-width:768px){
#buttons{
display:block;
width:100%;
align-items:left;
}
}

.dynamic2{
display: flex;
flex-direction:row;
width:100%;
margin-left:20px
margin-right:20px;
align-items:top;
justify-content:space-around;
gap:20px;
}


@media screen and (max-width:768px){
.dynamic2 {
display:block;
overflow:hidden;
position:relative;
width:90%;
text-align:left;
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
}
}

.colorblock{
border:2px solid black; 
height:80px; 
width:80px;
border-radius:5px;
}

.colorblock:hover { 
height:85px; 
width:85px;
transition:.3s;
cursor:pointer;
}

.dropcontainer{
width:80%;
height: 200px;
border-radius:5px;
border:2px dashed black;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
padding:20px;
color: rgba(255, 0, 0, 0);
}

.dropcontainer:hover {
width:85%;
background-color:#f5f5f5;
border:2px solid black;
transition: .5s;
}

.drop-area{
width:100%;
height: 200px;
border-radius:5px;
border:2px dashed black;
display:flex;
flex-direction:row;
align-items:center;
justify-content:center;
opacity:0;
color: rgba(255, 0, 0, 0);
}





/* BODY */

html{
background-color:black;
color: white;
font-family: indivisible;
width:100%;
}


#content{
margin:10vw;
}

@media screen and (min-width:768px){
.widecontent{
display:flex;
flex-direction:row;
justify-content:space-between;
gap:30px;
flex:1;
}
}

@media screen and (max-width:768px){
.widecontent{
display:flex;
flex-direction:column;
justify-content:space-between;
gap:20px;
flex:1;
}
}

@media screen and (min-width:768px){
.focus{
width:70%;
margin:auto;
}
}



.widecontent .text{
width:100%;
}

.widecontent .pic{
width:100%;
}

body{
margin:auto;
background-color:#FBE5B6;
color:black;
max-height:auto;
overflow:none;
-ms-overflow-style: -ms-autohiding-scrollbar;  /* IE and Edge */
scrollbar-width: 6px;  /* Firefox */
line-height: 1.5;
}

.page2{
background-color:black;
color:white;
max-height:100%;
max-width:auto;
overflow-y:hidden;
overflow-x:hidden;
}

#parallax1 {
background: url("https://chiefuniversity.s3.amazonaws.com/photos_for_site/b_mercedes_sm.jpg");
background-attachment: fixed;
background-size:cover;
background-blend-mode: overlay;
background-color: rgba(0, 0, 0, 0.7);
height:40vh;
display:flex;
align-items:center;
justify-content:center;
}

#parallax2 {
background: url("https://chiefuniversity.s3.amazonaws.com/photos_for_site/exchange_trio.jpg");
background-attachment: fixed;
background-size:cover;
background-blend-mode: overlay;
background-color: rgba(0, 0, 0, 0.7);
height:40vh;
display:flex;
align-items:center;
justify-content:center;
background-position: 0% 30%;
}

@media screen and (max-width:768px){
#parallax1 {
display:none;
}
}

@media screen and (max-width:768px){
#parallax2 {
display:none;
}
}


@media screen and (min-width:768px){
#join{
width:60%;
margin-right:auto;
margin-left:auto;
}
}




@media screen and (max-width:768px){
#join{
width:100%;
margin-right:auto;
margin-left:auto;
}
}


.page2::-webkit-scrollbar {
    display: none;
}

body::-webkit-scrollbar {
    display: none;
}

#aboutus::-webkit-scrollbar {
    display: none;
}

#aboutus{
background-color:white;
color:black;
font-family: indivisible, avenir, Helvetica;
font-weight:400;
position:relative;
padding-top:0px;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.aboutus{
background-color:white;
color:black;
font-family: indivisible, avenir, Helvetica;
font-weight:800;
max-width:70vw;
position:relative;
padding-top:0px;
-ms-overflow-style: none;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

@media screen and (max-width:500px){
.aboutus{
max-width:100%;
}
}

.aboutus a{
color:#55BBC9;
text-decoration:none;
}

.aboutus a:hover{
color:#FC4445;
text-decoration:none;
}

.aboutus a h3{
color:#55BBC9;
text-decoration:none;
}

.aboutus a h3:hover{
color:#FC4445;
text-decoration:none;
}



.frame{
border:none;
text-align:center;
}

#services {
display:none;
overflow:hidden;
position:relative;
text-align:center;
margin:auto;
}

#servicedrop{
position:fixed;
}

#shopdrop{
position:fixed;
}

@media screen and (max-width:576px){
#services {
display:none;
overflow:hidden;
position:relative;
text-align:center;
margin-left:auto;
margin-right:auto;
}
}

@media screen and (min-width:768px){
.start{
width:50%;
position:relative;
text-align:left;
margin-right:20px;
margin-left:auto;
margin-top:20px;
height:100%;
}
}

@media screen and (min-width:768px){
.start h1{
line-height:1;
margin-top:0px;
}
}

@media screen and (min-width:768px){
.introtext{
font-size:20px;
}
}

@media screen and (max-width:768px){
.introtext{
text-align:left;
}
}


@media screen and (max-width:768px){
.start{
max-width:80%;
margin:auto;
position:relative;
}
}

.start2{
max-width:80%;
margin:auto;
position:relative;
text-align:center;
}


#hbmenu {
display:none;
}

@media screen and (max-width:768px){
#hbmenu {
display:block;
}
}

@media screen and (max-width:768px){
#navmenu {
display:none;

}
}

@media screen and (min-width:768px){
.dynamic {
width:50%;
margin-left:auto;
margin-right:auto;
}
}

#output{
margin-left:auto;
margin-left:right;
}

#filmgrain{
background:url(https://chiefuniversity.s3.amazonaws.com/sitephotos/35mmTexture1.png);
z-index:1;
position:relative;
background-size:cover;
background-blend-mode: overlay;
}

@media screen and (max-width:768px){
.dynamic {
width:80%;
margin-left:auto;
margin-right:auto;
}
}

#canv {
width:100%;
display:flex; 
flex-direction:row; 
justify-content:center; 
align-items:middle; 
vertical-align:middle;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}

#mycanvas {
margin-left:auto;
margin-right:auto;
margin-top:auto;
margin-bottom:auto;
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}

#mycanvas:hover {
cursor:pointer;
}


#output{
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}


.nav{
display:flex; 
justify-content:space-between;
align-items:center;
margin-right:30px;
margin-top:auto;
margin-bottom:auto;
animation-name:fade;
animation-duration:1s;
animation-name:stretch;
animation-duration:1s;
}

.breakdwonrow{
display:flex; 
justify-content:space-between;
align-items:center;
margin-right:auto;
margin-left:auto;
width:40%;
}

@media screen and (max-width:768px){
.breakdwonrow{
display:flex; 
justify-content:space-between;
align-items:center;
margin-right:auto;
margin-left:auto;
width:100%;
}
}

.navitems{
display:flex; 
gap:40px; 
color:white; 
font-size:16px;
background-color:inherit;
}

.navitems a {
color:white; 
}

.menu{
height:44px;
top:15px;
right:15px;
position:absolute;
font-family: indivisible;
}

.menu:hover{
opacity:60%;
cursor:pointer;
color: #FFACA9;
}

.menuitems {
color:black;
text-decoration:none;
}

@media screen and (min-width:768px){
.menuitems{
font-size:35px;
}
}

.menuitems:hover{
color:white;
}


#dropmenu{
display:none;
position:relative;
margin:auto;
width:100%;
height:100vh;
background-color:#F8B735;
color:white;
font-family: indivisible;
font-weight:700;
text-align:center;
scroll-behavior:smooth;
transition: transform 0.5s ease-in-out;
z-index: 1;
animation-name:fade;
animation-duration:1s;
}
@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}



@media screen and (max-width:576px){
.logo{
padding-top:15px;
padding-bottom:20px;
padding-left:20px;
max-width:30%;
}
}

@media screen and (min-width:576px){
.logo{
padding-top:20px;
padding-bottom:30px;
padding-left:30px;
max-height:100px;
top:15px;
left:15px;
}
}

@media screen and (min-width:768px){
.logo2{
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
max-width:200px;
top:15px;
left:15px;
display:none;
}
}

@media screen and (max-width:576px){
.logo2{
padding-top:15px;
padding-bottom:20px;
padding-left:20px;
max-width:30%;
display:none;
}
}

@media screen and (min-width:576px){
.logo2{
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
max-width:200px;
top:15px;
left:15px;
display:none;
}
}

@media screen and (min-width:768px){
.logo{
padding-top:20px;
padding-bottom:20px;
padding-left:20px;
max-width:200px;
top:15px;
left:15px;
}
}

.button{
color:white;
background-color:#55BBC9;
border-radius: 3px;
font-family: indivisible;
font-weight:700;
font-size:16px;
width: 150px;
height:50px;
border:0px;
cursor:pointer;
margin:auto;
}

.button-label{
display:flex;
flex-direction:column;
align-items:middle;
}

.button2{
color:black;
background-color:white;
font-weight:700;
font-size:13px;
width: 120px;
height:50px;
border:0px;
cursor:cell;
}

.button3{
color:black;
background-color:white;
font-weight:700;
font-family: indivisible;
font-size:18px;
width: 150px;
height:auto;
border:3px solid black;
cursor:pointer;
padding:10px;
border-radius:5px;
}

.button3:hover {
color:white;
background-color:black;
font-weight:700;
}

.button4{
color:black;
max-height:57px;
background-color:inherit;
font-weight:700;
font-family: indivisible;
font-size:16px;
width: 120px;
height:auto;
border:3px solid black;
cursor:cell;
padding:10px;
border-radius:5px;
margin:5px;
text-align:center;
}

.button4:hover {
color:white;
background-color:#000;
font-weight:700;
}

.button5{
color:black;
background-color:white;
font-weight:700;
font-family: indivisible;
font-size:12px;
width: 80px;
line-height:1.5;
border:2px solid black;
cursor:pointer;
border-radius:5px;
margin:5px;
}

.button5:hover {
color:white;
background-color:#000;
font-weight:700;
}

.button6{
color:black;
background-color:white;
font-weight:700;
font-family: indivisible;
border:none;
font-size:16px;
width: auto;
height:auto;
cursor:pointer;
border-radius:5px;
margin:5px;
text-align:left;
flex-direction:row;
justify-content:center;
}

.button6:hover {
color:white;
background-color:#000;
font-weight:700;
}

.button6:hover img{
filter: invert(100%);
}



.button:hover{
background-color:black;
color:#FFF;
}

.icon{
width:24px;
cursor:pointer;
}

.icon-lg{
width:32px;
cursor:pointer;
}

.icon-lg-inv{
width:32px;
cursor:pointer;
filter:invert(100%);
}

.icon-inv{
width:24px;
cursor:pointer;
filter:invert(100%);
}

.icon-inv-top{
width:24px;
cursor:pointer;
filter:invert(100%);
top:5;
right:5;
position:fixed;
}

.icon2{
width:24px;
cursor:pointer;
}


.icon:hover,
.icon2:hover,
.icon-inv:hover,
.icon-lg-inv:hover,
.icon-lg:hover {
opacity:.7;
}


/* TEXT */
@media screen and (max-width:768px){
p{
font-size:16px;
font-family: indivisible, avenir, Helvetica;
}
}

@media screen and (max-width:768px){
h3{
font-size:18px;
font-family: indivisible, avenir, Helvetica;
}
}

@media screen and (max-width:768px){
#gallerystart h2{
font-size:20px;
font-family: indivisible, avenir, Helvetica;
}
}

@media screen and (max-width:768px){
#gallerystart h3{
font-size:18px;
font-family: indivisible, avenir, Helvetica;
}
}

p{
font-size:18px;
font-family: indivisible, avenir, Helvetica;
}

h4{
font-family: indivisible, avenir, Helvetica;
font-size:20px;
}

h3{
font-family: indivisible, avenir, Helvetica;
font-size:24px;
}

h2{
font-family: indivisible, avenir, Helvetica;
font-size:30px;
}

h1{
font-size: 34px;
font-family: indivisible, avenir, Helvetica;
}

.lg{
font-size:36px;
font-family: indivisible, avenir, Helvetica;
}

@media screen and (max-width:768px) {
.lg {font-size: 30px;
font-family: indivisible, avenir, Helvetica;
}
}

.centered{
text-align:center;
display:flex;
flex-direction:row;
align-items:center;
}

.centered{
text-align:center;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
}

@media screen and (max-width:768px) {
h1 {font-size: 30px;
font-family: indivisible, avenir, Helvetica;
}
}

#services h3{
color:#FC4445;
}

.smalltext{
font-family: indivisible, avenir, Helvetica;
font-size:12px;
text-decoration:none;
}

.chamelion{
color:white;
}

.chamelion2{
color:black;
}

.chamelion:hover {
color:#FC4445;
}

.chamelion2:hover {
color:#FC4445;
}

#openings a {
color:black;
text-decoration:none;
}


.black a {
color:#3FEEE6;
text-decoration:none;
}

a {
color:#04100F;
text-decoration:none;
}

footer a {
text-decoration:none;
}

#gallerystart {
.chamelion:hover{
color:55BCC9;
}
}


a:hover {
color:#FC4445;
text-decoration:none;
}



.schedule {
color:#55BBC9;
text-decoration:underline;
}

.schedule:hover {
color:#FC4445;
}


/* GALLERY */

#gallerystart{
width:auto;
background-color:white;
padding:none;
overflow:none;
font-family: indivisible, avenir, Helvetica;
max-height:100%;
overflow:none;
-ms-overflow-style: -ms-autohiding-scrollbar;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

#gallerystart: hover{
max-height:100%;
width:auto;
background-color:#ffefef;
padding:none;
font-family: indivisible, avenir, Helvetica;
overflow:none;
-ms-overflow-style: -ms-autohiding-scrollbar;  /* IE and Edge */
scrollbar-width: none;  /* Firefox */
}

.flex-container{
display:flex;
flex-direction: row;
flex-wrap: wrap;
align-items:flex-start;
}

.flex-container2{
display:flex;
flex-direction:row;
flex-wrap: wrap;
align-items:center;
margin:auto;
max-width:70%;
}

.right{
flex:1;
height:auto;
}

.left{
flex:1;
height:auto;
}

.tiles{
display:flex;
flex-direction:row;
background-color:inherit;
}

.tiles2{
display:flex;
flex-direction:row;
background-color:#000;
}

.servicetiles{
display:flex;
flex-direction:row;
background-color:white;
margin:10px;
}

@media screen and (max-width:768px){
.servicetiles{
display:block;
background-color:white;
max-width:70vw;
}
}



@media screen and (min-width:768px){
.servicetiles{
display:flex;
flex-direction:row;
background-color:white;
max-width:70vw;
}
}


ul {
list-style-type:none;
}

.servicetiles .p{
width:90%;
font-size:16px;
text-align:left;
}

.servicetiles a{
color:#FC4445;
}

.servicetiles a:hover{
color:#5BCCC9;
}

.box3{
display:none;
}

@media screen and (min-width:768px){
.box3{
display:block;
}
}

@media screen and (min-width:768px){
#widegallery{
display:block;
}
}

@media screen and (min-width:768px){
.box{
display:none;
}
}

@media screen and (max-width:768px){
#shopoverlay{
display:none;
}
}

@media screen and (min-width:768px){
#mobileoverlay{
display:none;
}
}



@media screen and (max-width:768px){
.bigoverlay{
display:none;
}
}


.servicebox{
height:auto;
width:70%;
overflow:hidden;
background-color:white;
justify-content:center;
margin-left:auto;
margin-right:auto;
}


/* IMAGE BOXES - Mobile */

.box{
height:50vw;
width:50vw;
overflow:hidden;
background-color:inherit;
justify-content:center;
}

.box2{
height:auto;
width:50vw;
overflow:hidden;
align-items:center;
background-color:inherit;
}

.box3a{
height:50vw;
width:50vw;
overflow:hidden;
background-color:inherit;
}

.sqbox{
height:50vw;
width:50vw;
overflow:hidden;
background-color:inherit;
justify-content:center;
}

.sqbox .img{
height:100%;
width:auto;
margin-left:auto;
margin-right:auto;
}

.sqbox3b .img{
height:100%;
width:auto;
margin-left:auto;
margin-right:auto;
}

/* IMAGE BOXES - Desktop */
.box3{
height:33.3vw;
width:33.3vw;
overflow:hidden;
background-color:inherit;
}


.box3c{
height:33.3vw;
width:33.3vw;
overflow:hidden;
background-color:inherit;
}


.box3b{
height:33.3vw;
width:33.3vw;
overflow:hidden;
background-color:inherit;
}

.box3flex{
height:33.3vw;
width:33.3vw;
overflow:hidden;
}

.box3flex img{
height:100%;
width:auto;
}

.box3flex:hover{
height:33.3vw;
width:33.3vw;
overflow:hidden;
display:flex; 
align-items:center; 
opacity:100%;
cursor: pointer;
}

.box3flex:hover img{
height:auto;
width:100%;
opacity:100%;
border-radius:20px;
margin-left:0px;
}

.sqbox3b{
height:33.3vw;
width:33.3vw;
overflow:hidden;
background-color:inherit;
}

.box3a:hover .overlay{
display:block;
}

.box3b:hover .overlay{
display:block;
}

.sqbox3b:hover .overlay{
display:block;
}

.sqbox:hover .overlay{
display:block;
}

@media screen and (min-width:768px){
.sqbox{
display:none;
}
}

@media screen and (max-width:768px){
.box3flex{
display:none;
}
}

@media screen and (max-width:768px){
.box3{
display:none;
}
}

@media screen and (max-width:768px){
.sqbox3b{
display:none;
}
}

@media screen and (max-width:768px){
.box2{
width:auto;
height:auto;
overflow:hidden;
max-width:100%;
max-height:100%;
}
}

@media screen and (max-width:768px){
.box:active img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}



@media screen and (max-width:768px){
.box3a:active img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (max-width:768px){
.sqbox:active img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (max-width:768px){
.sqbox3b:active img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (max-width:768px){
.box3c:active img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (min-width:768px){
.box:hover img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (min-width:768px){
.sqbox:hover img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (min-width:768px){
.box3c:hover img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (min-width:768px){
.box3:hover .img{
height:100%;
width:auto;
opacity: 100%;
margin-left:auto;
margin-right:auto;
border-radius:20px;
}
}

@media screen and (max-width:768px){
#lastrow {
display:none;
}
}

.img{
padding:0px;
width:100%;
height:auto;
display:block;
transition:.5s;
}

.imgwide{
padding:0px;
height:auto;
width:100%;
margin-left:auto;
display:block;
transition:.5s;
}

.img2{
padding:0px;
width:100%;
height:auto;
display:inline-block;
transition:.5s;
}

#gallerystart:hover img{
opacity:.7;
}

.row{
display:flex;
flex-direction:row;
justify-content:start;
margin-left:auto;
margin-right:auto;
flex-wrap:wrap;
width:100%;
}

.iconheading{
display:flex;
flex-direction:row;
justify-content:start;
align-items: center;
width:100%;
gap:10px;
}


.row2{
display:flex;
flex-direction:row;
justify-content:start;
margin-left:auto;
margin-right:auto;
}

@media screen and (min-width:768px){
.row2{
display:flex;
flex-direction:row;
justify-content:start;
margin-left:auto;
margin-right:auto;
}
}

#intro {
background-color:white;
}


@media screen and (min-width:768px){
#intro{
display:flex;
flex:1;
flex-direction:row;
background-color:white;
justify-content:space-between;
align-items:center;
gap:30px;
margin-top:40px;
margin-bottom:40px;
height:40%;
margin-left:20px;
margin-right:20px;
}
}

#widegallery:hover img{
opacity:.7;
}

#bigrow1:hover .img{
opacity:1;
}


#bigrow2:hover .img{
opacity:1;
}

#bigrow3:hover .img{
opacity:1;
}

#bigrow4:hover .img{
opacity:1;
}

#lastrow:hover img{
opacity:.2;
}

#gallerystart:hover .box:hover img{
opacity:100%;
cursor: pointer;
}

#gallerystart:hover .box3:hover img{
opacity:100%;
cursor: pointer;
}

@media (hover:none) and (pointer:coarse) {
#gallerystart:hover .img:hover{
opacity: 100%;
}
}

@media screen and (max-width:768px){
#gallerystart{
max-height:100vh;
overflow:auto;
}
}

@media screen and (max-width:768px){
#gallerystart:hover .flex-container{
flex-direction:column;
}
}

@media screen and (max-width:768px){
#gallerystart:hover .right{
width: 100%;
}
}

@media screen and (max-width:768px){
#gallerystart:hover .img{
opacity:35%;
}
}

@media screen and (max-width:768px){
#gallerystart:hover .img:hover{
opacity:100%;
}
}

#gallerystart::-webkit-scrollbar {
    display: none;
    width:6px;
    cursor:pointer;
    overflow: auto;
    background-color:black;
    height: 2em;
}

#gallerystart::-webkit-scrollbar-thumb {
    display: none;
    cursor:pointer;
    overflow: auto;
    background-color:white;
    height: auto;
    border-radius:20px;
}

#lightbox1{
display:none
transition: .5s;
overflow:auto;
}

.lightboxexit {
top:10px;
right:10px;
color:white;
position:fixed;
font-family:indivisible;
cursor:pointer;
width:30px;
}


.playbutton {
top:50%;
margin:auto;
z-index:999999;
}

.next {
top:50vh;
right:5px;
color:white;
position:fixed;
cursor:pointer;
}

.next2 {
top:50vh;
right:5px;
color:white;
position:fixed;
cursor:pointer;
}


.overlayexit {
top:10px;
right:10px;
color:white;
position:absolute;
font-family:indivisible;
cursor:pointer;
font-size:25px;
}


.lightboxtext {
bottom:10vh;
right:10px;
color:white;
position:fixed;
font-family:indivisible;
cursor:pointer;
font-size:20px;
max-width: 30vw;
}


.toplbtext {
top:10px;
left:10px;
margin:auto;
color:white;
position:fixed;
text-align:left;
font-family:indivisible;
cursor:pointer;
font-size:20px;
max-width: 30vw;
}

.midlbtext {
top:50vh;
left:10px;
margin:auto;
color:white;
position:fixed;
text-align:left;
font-family:indivisible;
cursor:pointer;
font-size:20px;
max-width: 30vw;
}

@media screen and (min-width:500px){
.midlbtext {
top:10px;
left:10px;
color:white;
position:fixed;
text-align:left;
font-family:indivisible;
cursor:pointer;
font-size:20px;
max-width:30vw;
}
}

.blklbtext {
top:10px;
left:10px;
color:black;
position:fixed;
text-align:left;
font-family:indivisible;
cursor:pointer;
font-size:20px;
max-width: 30vw;
}


.lightboxtext:hover{
color: #FC4445;
}

.lightboxexit2 {
top:5px;
right:5px;
color:white;
position:fixed;
font-family:indivisible;
cursor:pointer;
}

.lightboxexit3 {
bottom:5px;
right:5px;
color:white;
position:fixed;
opacity:75%;
font-family:indivisible;
cursor:pointer;
}

.lightboxexit3:hover {
opacity:.7;
}


.lightbox {
height: 100%;
width:100%;
top:0;
left:0;
position:fixed;
overflow:auto;
display:none;
margin-left:auto;
margin-right:auto;
scrollbar-width:none;
background-color: rgba(255, 255, 255, 0.5);
z-index:999;
}

.lightbox .img {
height: 100%;
width:auto;
margin-right:auto;
margin-left:auto;
margin-bottom:20px;
}

@media screen and (max-width:768px){
.lightbox .img {
height: auto;
width:70%;
margin-right:auto;
margin-left:auto;
margin-top:30%;
margin-bottom:30%;
}
}


.vidbox {
height: 100%;
width:100%;
top:0;
position:fixed;
overflow:auto;
display:none;
margin-left:auto;
margin-right:auto;
scrollbar-width:none;
z-index:999;
}

@media screen and (min-width:700px){
.lightbox {
height: 100vh;
backgornd-color:black;
top:0;
position:fixed;
overflow:auto;
display:none;
margin-left:auto;
margin-right:auto;
scrollbar-width:none;
z-index:999;
}
}

.slideshow{
height:100vh;
width:100%;
overflow:auto;
}



#slideshow1{
height:100vh;
width:100%;
overflow:auto;
display:none;
top:0;
left:0;
margin-left:auto;
margin-right:auto;
position:fixed;
z-index:999;
-ms-overflow-style: none;
}

#slideshow2{
height:100%;
width:100%;
overflow:auto;
display:none;
top:0;
left:0;
margin-left:auto;
margin-right:auto;
position:fixed;
z-index:999;
-ms-overflow-style: none;
}

#slideshow3{
height:100vh;
width:100%;
overflow:auto;
display:none;
top:0;
left:0;
margin-left:auto;
margin-right:auto;
position:fixed;
z-index:999;
-ms-overflow-style: none;
}



#ms2{
display:none;
}

#ms3{
display:none;
}

#ms4{
display:none;
}

#ms5{
display:none;
}

#ms6{
display:none;
}

#ms7{
display:none;
}

#ms8{
display:none;
}

#ms9{
display:none;
}

#ms10{
display:none;
}

#ms11{
display:none;
}

#ms12{
display:none;
}

#ms13{
display:none;
}

#ms14{
display:none;
}

#ms15{
display:none;
}

#ms16{
display:none;
}

#blkcontent{
-ms-overflow-style: none;
}



@media screen and (min-width:768px){
.thumbnails{
height:auto;
width:50%;
display:flex;
flex-direction:column;
border-radius:5%;
justify-content:center;
align-items:center;
z-index:999;
}
}

@media screen and (max-width:768px){
.wideiframe {
display:none;
}
}

@media screen and (min-width:768px){
.mobileiframe {
display:none;
}
}

@media screen and (min-width:768px){
.mobile {
display:none;
}
}

.hidden {
display:none;
position: fixed;
background-color:#561217;
padding:20px;
}


@media screen and (max-width:768px){
.desktop {
display:none;
}
}

.mainslide{
display:block;
height:100%;
}


.mainbox{
height:100%;
width:auto;
overflow:hidden;
background-color:inherit;
justify-content:center;
margin-left:auto;
margin-right:auto;
animation-name:fade;
animation-duration:1s;
}
@keyframes fade {
  from {opacity: 0;}
  to {opacity: 1;}
}
}

.mainbox2{
height:100%;
width:70vw;
overflow:hidden;
background-color:black;
justify-content:center;
border-radius:5%;
margin-left:auto;
margin-right:auto;
}

.thumbnails{
height:auto;
width:auto;
margin-left:auto;
margin-right:auto;
display:flex;
flex-direction:row;
border-radius:5%;
justify-content:center;
align-items:center;
padding-bottom:20px;
}

.thumbnails2{
height:auto;
width:auto;
display:flex;
flex-direction:column;
border-radius:5%;
justify-content:center;
align-items:center;
}

.thumb{
height:10vw;
width:10vw;
overflow:hidden;
border-radius:5%;
justify-content:center;
margin-left:auto;
margin-right:auto;
cursor:pointer;
}

@media screen and (max-width:768px){
.thumb{
height:19vw;
width:19vw;
overflow:hidden;
border-radius:5%;
justify-content:center;
margin-left:auto;
margin-right:auto;
cursor:pointer;
}
}

@media screen and (max-width:768px){
.thumb-lg {
height:15vw;
width:15vw;
overflow:hidden;
border-radius:5%;
justify-content:center;
margin-left:auto;
margin-right:auto;
cursor:pointer;
}
}

.thumb:hover{
opacity:.7;
}
}


.lightbox::-webkit-scrollbar {
  display: none;
  width:0px;
}

#blkcontent::-webkit-scrollbar {
  display: none;
}

#slideshow1::-webkit-scrollbar {
  display: none;
}

#slideshow2::-webkit-scrollbar {
  display: none;
}

#slideshow3::-webkit-scrollbar {
  display: none;
}

.lbpic{
margin-left:auto;
margin-right:auto;
scrollbar-width:none;
}

@media screen and (min-width:500px){
.lbpic2{
display:none;
}
}

@media screen and (min-width:900px){
.lbpic{
margin:auto;
height:auto;
}
}

.smallbox{
overflow:hidden;
max-width:20vw;
max-height:20vw;
margin:auto;
padding-bottom:10px;

}

.smallbox{
overflow:hidden;
max-width:20vw;
max-height:20vw;
margin:auto;

}

.featured3{
width:50%;
height:auto;
}


@media screen and (max-width:900px){
.featured3{
width:90%;
height:auto;
}
}

/*CONTENT*/

@media screen and (max-width:768px){
#nowplaying{
background-color:white;
height:auto;
margin-left:20px;
width:80%;
font-family:indivisible;
color: white;
}
}

@media screen and (min-width:768px){
#nowplaying{
background-color:white;
margin-top:20px;
margin-right:auto;
margin-left:20px;
margin-bottom:auto;
width:100%;
}
}



@media screen and (max-width:500px){
#nowplaying{
padding-left: 10px;
padding-right:10px;
padding-top:0px;
background-color:white;
max-height:auto;
margin:auto;
width:auto;
font-family:indivisible;
color: white;
}
}

#mobile{
display:none;
border-radius:20px;
}

@media screen and (max-width:1080px){
#mobile{
display:block;
overflow:hidden;
border-radius:20px;
}
}

@media screen and (max-width:1080px){
#desktop{
display:none;
border-radius:20px;
}
}


/*FOOTER & OTHER ELEMENTS*/

.line {
background-color:white;
height:1px;
z-index:999;
border:none;
width:100%px;
padding:none;
}

.line2{
background-color:black;
height:1px;
z-index:999;
border:none;
width:100%;
padding:none;
}

.icons-white{
clear:both;
background-color:black;
padding:20px;
max-width:100%;
display: flex;
flex-direction:row;
column-gap:5px;
position:relative;
margin: auto;
justify-content:center;
}

#icons2{
clear:both;
background-color:black;
padding:20px;
max-width:100%;
display: inline-block;
position:relative;
margin: auto;
left:0;
right:0;
}

.iconrow {
width:100%;
display: block;
position:relative;
margin: auto;
text-align:center;
}


iframe {
height:360px;
width:100%;
margin:0px;
display:block;
border:none;
overflow:hidden;
-ms-overflow-style: none;
scrollbar-width:0px;
animation-name:fade;
animation-duration:1s;
}


.iframe {
height:360px;
width:100%;
margin:0px;
display:block;
border:none;
overflow:auto;
-ms-overflow-style: none;
}

.iframe200 {
height:200px;
width:100%;
margin:0px;
display:block;
border:none;
-ms-overflow-style: none;
}

@media screen and (min-width:1080px){
.contactform {
height:10vh;
width:100%;
margin:0px;
display:block;
border:none;
-ms-overflow-style: none;
overflow:hidden;
}
}

.iframe400 {
height:400px;
width:100%;
margin:0px;
display:block;
border:none;
overflow:hidden;
-ms-overflow-style: none;
}

.iframe450 {
height:450px;
width:100%;
margin:0px;
display:block;
border:none;
overflow:hidden;
-ms-overflow-style: none;
}

.iframe700 {
height:700px;
width:100%;
margin:0px;
display:block;
border:none;
overflow:hidden;
-ms-overflow-style: none;
}

.iframe2 {
height:700px;
width:100%;
margin-left:auto;
margin-right:auto;
display:block;
border:none;
-ms-overflow-style: none;
}

.iframefull {
height:150vh;
margin-left:auto;
margin-right:auto;
display:block;
border:none;
-ms-overflow-style: none;
overflow: hidden;
}



footer{
width: auto;
background-color:#2C6E63;
font-family:indivisible;
color: white;
max-height: auto;
overflow-x:hidden;
overflow-y:hidden;
padding: 20px;
text-align:center;
clear: both;
bottom:0px;
}

.featured{
width:auto;
padding:auto;
}

.featured2{
width:auto;
padding:auto;
}


#reviews{
color:white;
background-color:black;
width:70%;
}

.spacer{
height:40px;
width:100;
background-color:inherit;
}

.spacer1{
height:40px;
width:auto;
background-color:white;
}

.spacer2{
height:60px;
width:auto;
background-color:inherit;
}

@media screen and (min-width:768px){
.spacer2{
height:60px;
width:auto;
background-color:white;
}
}

.spacer3{
height:10px;
width:auto;
background-color:inherit;
}



/* OVERLAYS */

.caption{
position:relative;
transition: .5s;
}

.caption1{
position:relative;
transition: .5s;
width:100%;
height:100%;
}

#overlay {
  position: absolute;
  display: none;
  margin: auto;
  width: 100%;
  max-height: auto;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
  transition:1s;
}

.overlay {
  position: absolute;
  display: none;
  margin: auto;
  width: 100%;
  max-height: auto;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.7);
  z-index: 2;
  cursor: pointer;
  transition:1s;
}

#shop {
  position: absolute;
  display: none;
  margin: auto;
  width: 100%;
  max-height: auto;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 2;
  cursor: pointer;
  transition:1s;
}


.container{
position: absolute;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
width:100%;
height:100%;
}

.overlaytext{
display:block;
margin-top:50%;
transition:.5s;
font-size: auto;
line-height:1.5;
font-family:indivisible;
color:white;
font-weight:400;
vertical-align:middle;
overflow:hidden;
}

#bio{
transition:.5s;
}

#head{
transition:.5s;
}

.exit{
	width:4vh;
position:relative;
}

.chamelion{
color:white;
}

.chamelion:hover {
color:#55BCC9;
cursor:pointer:
}

/* Content Block */

.blkcontent{
font-family:indivisible;
background-color:black;
color:white;
width:50%;
}

.blkcopy{
margin-left:auto;
margin-right:auto;
}

#splitview .blkcopy{
margin-left:auto;
margin-right:auto;
}

.whitecontent{
background-color:white;
font-family:indivisible;
color:black;
width:50%;
}

#content2 img{
margin:auto;
}


.black{
background-color:black;
}

#mobilecontent{
background-color:black;
font-family: indivisible;
color:white;
width:90%;
}

#mobilecontent3{
background-color:white;
font-family: indivisible;
color:black;
width:90%;
}

.pgcolor2{
background-color:#f5edeb;
font-family: indivisible;
color:black;
}


@media screen and (min-width:900px){
#mobilecontent{
background-color:black;
font-family: indivisible;
color:white;
width:100%;
display:none;
}
}


#framecontent{
background-color:#faf7f7;
font-family:indivisible;
color:black;
width:100%;
}

#framecontent2{
background-color:black;
font-family:indivisible;
color:#FFF4D6;
width:100%;
}


#mobilecontent2{
background-color:white;
font-family: indivisible;
color:black;
width:100%;
}

@media screen and (min-width:768px){
.content-container {
display:flex;
flex-direction:row;
padding:15px;
max-width:70%;
margin:auto;
align-items:flex-start;
height:100%;
}
}

@media screen and (max-width:768px){
.content-container {
display:block;
padding:15px;
max-width:80%;
margin:auto;
}
}

.content-container2 {
display:block;
max-width:80%;
margin:auto;
height:auto;
}

@media screen and (min-width:768px){
.content-container2 {
display:block;
padding:20px;
max-width:50%;
margin:auto;
height:auto;
}
}

.content-container3 {
display:block;
max-width:100%;
margin:auto;
height:auto;
}

@media screen and (min-width:768px){
.content-container3 {
display:block;
max-width:100%;
display:flex;
flex-direction:row;
margin:auto;
height:auto;
}
}


.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slide-container {
display:flex;
flex-direction:column;
padding:15px;
max-width:100%;
margin-left:auto;
margin-right:auto;
align-items:center;
justify-content:center;
overflow:auto;
}

.slide-container2 {
display:flex;
flex-direction:row;
padding:15px;
max-width:100%;
margin-left:auto;
margin-right:auto;
align-items:flex-start;
justify-content:center;
overflow:auto;
}

@media screen and (min-width:768px){
.content-photo {
max-width:40%;
margin-right:30px;
margin-top:0px;
}
}

@media screen and (min-width:768px){
.content-photo3 {
max-width:50%;
margin-right:30px;
}
}

.content-photo2 {
max-width:350px;
max-height:350px;
overflow:hidden;
margin-right:30px;
}



@media screen and (max-width:768px){
.content-photo2 {
max-width:100vw;
max-height:50vw;
overflow:hidden;
display:block;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
}

@media screen and (max-width:768px){
.content-photo2 img{
width:100%;
object-position: 0px -125px;
}
}


.content-text {
text-align:left;
flex:2;
height:100%;
padding-top:0px;
}

@media screen and (min-width:768px){
.content-text {
text-align:left;
flex:2;
height:100%;
padding-top:0px;
max-width:60%;
}
}


.sociallinks{
font-family: indivisible, helvetica;
color:#FC4445;
text-decoration:none;
display:flex;
flex-direction:row;
text-align:center;
align-items:center;
width:70%;
}

.omnes{
font-family:OmnesPro;
}

@font-face{
font-family: OmnesPro;
src: url(https://chiefuniversity.s3.amazonaws.com/fonts/OmnesPro.otf)
format ("opentype");
}

/* Opportunities*/

#openings a:hover {
color:#F42300;
}


@font-face { 
font-family: "icomoon"; 
src: url("https://chiefuniversity.s3.amazonaws.com/fonts/icomoon.ttf");
format("truetype");
}


/* Media Queries*/


@media screen and (max-width:768px){
.content-text h2{
text-align:left;
flex:2;
}
}

@media screen and (min-width:768px){
.content-text h2{
text-align:left;
margin-top:0px;
}
}

@media screen and (max-width:768px){
.content-text p{
font-size: 16px;
text-align:left;
flex:2;
}
}


@media screen and (min-width:768px){
#photo {
display:none;
}
}


@media screen and (max-width:768px){
#desktopslide {
display:none;
}
}

@media screen and (min-width:768px){
#mobileslide {
display:none;
}
}


@media screen and (min-width:768px){
#framecontent2 p{
margin-left:auto;
margin-right:auto;
max-width:50%;
}
}

@media screen and (min-width:768px){
#framecontent2 h2{
text-align:center;
}
}

@media screen and (min-width:768px){
#mobilecontent2{
background-color:white;
font-family: indivisible;
color:black;
width:100%;
display:none;
}
}


@media screen and (min-width:768px){
#mobilecontent2{
display:none;
}
}

@media screen and (min-width:768px){
#mobilecontent3{
display:none;
}
}



@media screen and (max-width:768px){
#content2{
display:none;
}
}

@media screen and (min-width:768px){
#framecontent h2{
text-align:center;
}
}

@media screen and (min-width:768px){
#framecontent p{
margin-left:auto;
margin-right:auto;
max-width:50%;
}
}

@media screen and (max-width:768px){
.container{
max-width:auto;
max-height:auto;
padding-top:auto;
padding-bottom:auto;
display:block;
margin:auto;
<p2>:3vw;
}
}

@media screen and (min-width:768px){
.featured{
max-width:10%;
}
}

@media screen and (max-width:768px){
.iframe {
height:175vh;
width:100%;
margin:0px;
display:block;
border:none;
}
}

/*FORMS*/

#chiform {
color: #fff;
background-color:#2C6E63;
padding: 20px;
margin:auto;
max-width:300px;
text-align:center;
max-height:100px;
font-family:indivisible, helvetica;
}

.field {
  margin-bottom: 10px;
  text-align:center;
}

.field label {
  display: block;
  font-size: 12px;
  color: #ffff;
}

.field input {
  display: block;
  background-color:white;
  min-width: 250px;
  line-height: 1.5;
  font-size: 14px;
  border-radius:5px;
  border: none;
  font-weight:500;
  padding-left:5px;
}

#chibutton[type="submit"] {
  display: block;
  padding: 6px 30px;
  font-size: 14px;
  background-color: #0000;
  border-radius:5px;
  color: #fff;
  border: 2px solid #fff;
  margin: 0 auto;
}

#chibutton:hover {
  cursor: pointer;
  background-color: #2C6E63;
  color: #fff;
}


.bigfield input {
  display: block;
  width: 100%;
  line-height: 5;
  font-size: 14px;
  border-radius:5px;
  border: none;
  font-family:indivisible, Helvetica, Arial, sans-serif;
  font-weight:500;
  padding-left:20px;
  padding-top: 10px;
  background-color:#fff;
  margin-left: auto;
  margin-right:auto;
}

textarea {
  display: block;
  width: 99%;
  height:100px;
  resize: none;
  font-size: 14px;
  border-radius:5px;
  border: none;
  font-family:indivisible, Helvetica, Arial, sans-serif;
  font-weight:500;
  padding-left:10px;
  background-color:#fff;
  
}

.shortfield {
  display: flex;
  width: 100%;
}

.shortfield2 {
  display: flex;
  width: 100%;
}

.shortfield input {
  display: block;
  width: 50%;
  line-height: 3;
  font-size: 14px;
  border-radius:5px;
  border: none;
  font-family:indivisible, Helvetica, Arial, sans-serif;
  font-weight:500;
  padding-left:10px;
  background-color:#fff;
}

.shortfield2 input {
  display: block;
  width: 30%;
  line-height: 3;
  font-size: 14px;
  border-radius:5px;
  border: none;
  font-family:indivisible, Helvetica, Arial, sans-serif;
  font-weight:500;
  padding-left:10px;
  background-color:#fff;
}


.formbutton {
  display: block;
  padding: 6px 30px;
  font-size: 14px;
  background-color: #0000;
  border-radius:5px;
  color: #000;
  border: 2px solid #000;
}

.formbutton:hover {
  cursor: pointer;
  background-color: #000;
  color: #ffff;
}

#form h3{
color:black;
}

label{
text-align:left;
}

.margin{
margin-left:10px;
margin-right:10px;
}

body a{
color:black;
}

footer a{
color:white;
}