// STYLES ARK 
body {
  display: block;
  // overflow-x: hidden;
}

.container{
display:block;
margin:0 auto;
text-align:center;
border-radius: 0 0 10px 10px;
}

.nav {
  color: ##1a321a;
  font-family: Roboto;
}

.navbar-brand {
  font-size: 16pt;
  color: #1a321a;
  font-family: Cinzel;
}

.nav-link:hover{
background:#000000;
color:#ffffff !important;
border-radius:5px;
}

.navbar {
      margin-bottom: 0;
      border-radius: 0;
}

li,ul,a.ark {
font-size:0.95em;
color:#000;
}

h1 {
color:#1a321a;
font-family: Cinzel;
text-decoration: none !important
margin:1em;
}

h2 {
color:#1a321a;
font-family: Cinzel;
font-size:2.5em;
text-decoration: none !important
margin:2em;
}


h3 {
	color:#1a321a;
	font-family: Roboto;
	font-size:1.5em;
  font-weight:regular;
text-decoration: none !important	
margin:3em;
}

h4 {
color:#c03794;
font-family: Cinzel;
font-size:1.2em;
text-decoration: none !important
margin:4em;
}


p {
  color:#1a321a;
  font-family: 'Roboto';
  font-size: 1.7em;
  font-weight:regular;

}

p.quoted{
color:#1a321a;
  font-family: 'Neuton', Serif;
  font-size: 1.5em;
  font-weight:regular;
  text-align:center;

}

h2.hours{
  margin-top:20px;
  font-family:'Open Sans';
  text-align:center;
  font-weight:regular;
}

table{border:1px solid #777777;
      margin: 0px auto;
      *border-collapse: collapse; /* IE7 and lower */
      border-spacing: 0;
    }
tr{border:1px solid #777777;border-radius: 5px}
th{padding:0.5em;background:#dddddd;;}
td{padding:0.5em;background:transparent;border:1px solid #777777;}

tr.line1{background:#fafafa;}
tr.line2{background:#eeeeee;}

.arkacc{
color:#1a321a;
font-family: Open Sans;
font-weight:normal;
background-image: url("assets/grad_01.png");
background-repeat: repeat;
background-position: bottom;
text-align:left;
width:100%;
text-decoration:none;
}

.arkacc:hover{
color:#dddddd;
background:#333333;
text-decoration:none;
}
.arkacc:visited{
text-decoration:none;
}

.sml:hover{
background-image: none;
background-color:blue;


}

.sml_green:hover{
background-image: none;
background-color:green;
}

.arkacc:active{
  text-decoration:none;
}

.footer{
  color:#1a321a;
   padding:5px;
}

a.footer:hover{
  color:#cccccc;
  background:#333333;
  border-radius:4px;

}

h1.section{
  text-align: center;width:100%;
  text-decoration:underline;
  font-weight:regular;
  margin: 5px auto 15px auto;
}

h2.section{
  text-align: left;
  width:100%;
  text-decoration:none;
  font-weight:regular;
  margin: 3px auto 10px auto;
}


a {
  text-decoration: none !important
}

.jumbotron{
color: #FFFFFF;
background-color:#ffffff;
}


div.anouncement{
 margin:20px;
 border:2em solid #efc0fe; 
 padding:2em;
 border-radius: 10px; 
 background-color: #efc0fe;
 }

h1.anouncement{
font-size:2.0em;
font-family: Roboto;
font-weight:bold;
color:#1a321a;
margin: 10px auto auto 1em;
}

h2.anouncement{
font-size:1.7em;
font-family: Roboto;
font-weight:bold;
color:#1a321a;
margin: 1em auto auto 2em;
}

h3.anouncement{
font-size:1.5em;
font-family: Roboto;
font-weight:bold;
color:#1a321a;
margin: 1em auto auto 2em;
}

div.border{
 margin:0.2em;
 border:1em solid #eeeeee; 
 padding:0.2em;
 border-radius: 10px; 
 background-color: #eeeeee;
 }



div.border_white{
 margin:0.2em;
 border:0.5em solid #eaeaea; 
 padding:0.2em;
 border-radius: 10px; 
 background-color: #eeeeee;
}

div.border_black{
width:90%;
margin:5%;
background-color: #000000;
border-radius: 10px; 
}




span.bubble0{
 width:100%;
 margin:0 auto 5px auto;
 padding:0.5em;
 border:1px solid #d7d7d7;
 border-radius: 0.5em; 
 background-color: #ffffff;
 display:block;
 z-index:10;
 
 }

span.bubblen{
 width:100%;
 margin:0 auto 5px auto;
 padding:0.5em;
 border:0px solid #ffffff;
 border-radius: 0.5em; 
 background-color: #ffffff;
 display:block;
 z-index:10;
 
 }


span.bubble1{
 width:100%;
 margin:0em auto 5px auto;
 padding:0.5em;
 border:1px solid #e7e7e7;
 border-radius: 0.5em; 
 background-color: #e7e7e7;
 display:block;
 z-index:10;
 }

span.bubble2{
 width:100%;
 margin:1em auto 5px auto;
 padding:1.5em;
 border:1px solid #FFe7e7;
 border-radius: 0.5em; 
 background-color: #FFe7e7;
 display:block;
 z-index:10;
 }


span.arkform{
 width:100%;
 margin:0em auto 5px auto;
 padding:0.5em;
 border:1px solid #e7e7e7;
 border-radius: 0.5em; 
 display:block;
 z-index:10;
 float:left;
 
 }


 div.bubble2{
 width:90%;
 margin:2em;
 border:2em solid #ffffff; 
 padding:2em;
 border-radius: 2em; 
 background-color: #ffffff;
 display:block;
 z-index:2000;
 }

 div.bubble_black{
 width:90%;
 margin:2em;
 border:2em solid #000000; 
 padding:2em;
 border-radius: 2em; 
 background-color: #000000;
 display:block;
 z-index:2000;
 color:#ffffff;
 }


span.arkbuttonbig  {
width:70%;
border:1px solid #1a321a;
border-radius: 25px;
background-color: #1a321a;
text-align: center;
padding:10px;
margin:1.5em auto 1.5em auto;
display:inline-block;
color:white;
z-index:1000;
font-size:2.0em;
font-family: Roboto;
font-weight:bold;

}


p.arkhighlight  {
width:95%;
border:1px solid #ffffff;
border-radius: 15px;
background-color: #ffffff;
text-align: left;
padding:5px;
margin:0.5em auto 0.5em auto;
display:inline-block;
color:#222222;
z-index:1000;
font-size: 1.7em;
font-family: Roboto;

}

label.contact-form{
text-align:left; 
font-family: Roboto !important;

}



a.arkbutton, span.arkbutton {
width:90%;
border:1px solid #dddddd;
border-radius: 10px;
background-color: #dddddd;
background-image: url("assets/grad_01.png");
background-repeat: repeat;
background-position: bottom;
text-align: center;
padding:10px;
margin:2px auto 2px auto;
display:inline-block;
color:#222222;
z-index:1000;
font-family: Open Sans;
font-weight:normal;
}

a.arkbutton_blue, span.arkbutton_blue {
width:90%;
border:1px solid #dddddd;
border-radius: 10px;
background-color: #dddddd;
background-image: url("assets/grad_blue.png");
background-repeat: repeat;
background-position: bottom;
text-align: center;
padding:10px;
margin:2px auto 2px auto;
display:inline-block;
color:#222222;
z-index:1000;
font-family: Open Sans;
font-weight:normal;
} 

a.arkbutton:hover, span.arkbutton:hover {
background-color: #cceecc;
background-image: url("assets/grad_02.png");
// text-shadow: 0px 1px 2px #222, 0px 1px 2px #333;
color:green !important;
}

a.arkbutton_blue:hover, span.arkbutton_blue:hover {
background-image: url("assets/grad_01.png");
color:white !important;
text-shadow: 0px 1px 2px #222, 0px 1px 2px #333;
}

.arkmenu {
font-family: Roboto;
font-size:1.2em;
}

a.arkbutton {
  text-decoration: none !important;
  color:#1a321a !important;
  font-weight:bold;
  font-family:Arial;
}

a.arkbutton:hover {
  text-decoration: none !important;
  color:green !important;
  font-weight:bold;
  font-family:Arial;
}

.ark-section{
text-align: center;
}

.info{
text-align:center;
color:#eeeeee;
}

.info:hover{
color:#ffffff;
}

.info_bar{
  background:#000000;height:3em;
  vertical-align:middle;
  border-top: 2px solid #dddddd;
  padding-top:8px;
  padding-left:32px;
  padding-right:36px;
}

.accordion, .accordion *, .card, .card-body {
  border:none;
}

@media (min-width: 444px) {  
  h1 {font-size:2rem;}
  h4 {font-size:0.8rem;}
  p  {font-size:0.9rem;}
  .arkacc{font-size:1rem;}
  .footer{font-size:0.8rem;}
  h1.section{font-size:1.0rem;}
  h2.section{font-size:0.9rem;}
  h2.hours  {font-size:1.2rem;}
  }
/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {  
  h1 {font-size:2.0rem;}
  h4 {font-size:1.2rem;}
  p  {font-size:0.9rem;}
  .arkacc{font-size:1rem;}
  .footer{font-size:0.8rem;} 
  h1.section{font-size:1.6rem;}
  h2.section{font-size:1.3rem;}
  h2.hours  {font-size:1.3rem;}
}
 
/* Large devices (desktops, 992px and up) */
@media (min-width: 951px) { 
  h1 {font-size:3.5rem;} /*1rem = 16px*/    
  h4 {font-size:1.5rem;}
  p  {font-size:1rem;}
  .arkacc{font-size:1.5rem;}
  .footer{font-size:1.1rem;}
  h1.section{font-size:1.8rem;}
  h2.section{font-size:1.6rem;}
  h2.hours  {font-size:1.6rem;}
  }
 
/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1281px) {  
  h1 {font-size:3.5rem;} /*1rem = 16px*/    
  h4 {font-size:1.8rem;}
  p  {font-size:1rem;}
  .arkacc{font-size:1.8rem;}
  .footer{font-size:1.2rem;}
  h1.section{font-size:2rem;}
  h2.section{font-size:1.8rem;}
  h2.hours  {font-size:1.8rem;}

}


#myBtn {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 20px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: #111; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 1rem; /* Increase font size */
}

#myBtn:hover {
  background-color: #555; /* Add a dark-grey background on hover */
}

.video-wrapper {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}