/* start of root css */
:root {
--primary: #fcf9f9;
--dark: #8A3860;
--light: #fff;
--shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
/* end of root css */
/* Start of boxes css */
.boxes {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
margin-bottom: 0.5rem;
}
/* End of boxes css */
#sidebar .button {
margin: 1em 0em 1em 0em;
}
section, article{
margin-bottom: 2px;
}
/* Start of box css */
.box {
background: #fcf9f9;
text-align: left;
padding: 1.5rem 2rem;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
/* Start of box2 css */
.box2 {
background: #fcf9f9;
text-align: left;
padding: 1.5rem 2rem;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
font-size: 13px;
height: 450px;
}
.box2 img {
padding: 1rem;
width: 50%;
}
/* End of box and box2 css */
/* Start of btn css */
.btn {
background: #1B4298;
color: #fff;
padding: 0.6rem 0.5rem;
text-decoration: none;
border: 0;
margin-left: 3px;
}
/* End of btn css */
.button2 {
background: #1B4298;
color: #fff;
padding: 0.4rem 1rem;
text-decoration: none;
border: 0;
}
/* Start of Info CSS */
/* grid-template-columns: repeat(2, 1fr) are 2 columns 1 fractionals */
.info {
background: #fcf9f9;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
display: grid;
grid-gap: 30px;
grid-template-columns: repeat(1, 2fr);
padding: .4rem;
font-size: 13px;
}
.one-half-bumper-container {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(100px, 2fr));
margin-bottom: 1rem;
font-size: 13px;
}
.info2 {
background: var(--primary);
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
grid-gap: 10px;
padding: 1rem;
}
.info .btn {
display: block;
text-align: center;
margin: auto;
}
/* End of Info CSS */
/* Start CSS for Small */
.small ul {
display: grid;
grid-gap: 20px;
padding: 0px;
list-style: none;
grid-template-columns: repeat(4, 1fr);
}
.small a {
background: #8A3860;
color: #fff;
display: block;
text-decoration: none;
padding: 0.4rem;
text-align: center;
text-transform: uppercase;
font-size: 1rem;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
}
.small a:hover {
background: #fff;
color: #8A3860;
}
/* End CSS for Small */
/* .right{
margin-top: 50px;
}
#wrap{
width:100%;
margin:0 auto;
} */
/* button for more events */
.button {
padding: 0.5rem;
width: 100%;
height: auto;
text-align: center;
margin-right: 3rem;
}
.director{
width: 50px important!;
height: 50% important!;
}
/* Start CSS for dark */
.dark {
padding: 15px;
background: #35424a;
color: #ffffff;
margin-top: 10px;
margin-bottom: 10px;
}
.dark a:link {
color: yellow;
}
.dark a:hover {
color: white;
}
/* End CSS for dark */
.white {
background: #fff;
padding: 1rem;
border-radius: 25px;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.9);
}
/*Media Queries for the page */
@media(max-width: 700px) {
.info {
background: #fcf9f9;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.8);
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(1, 1fr);
padding: 1rem;
}
}
/* Media Queries end for the page */
.caption{
font-size: 14px;
}
.contact{
font-size: 12px;
}
/*CSS for carousel 5/15/2019 */
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
object-fit: contain;
top: 0;
left: 0;
max-height: 250px;
}
.carousel {
max-height: 250px;
}
/*.carousel-caption {
background: rgba(184, 61, 0, 0.5);
}*/
/* End of CSS for carousel 5/15/2019 */
/* Start for buttons for modal slider 5/15/2019 */
.button2 {
background: rgba(65, 94, 38, 0.6); /* Green */
border: none;
color: white;
padding: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
margin: 4px 2px 16px 0px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
/* End for buttons for modal slider 5/15/2019 */
/* image hover effect 5/15/2019 */
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
text-align: center;
}
.img-red :hover .image {
opacity: 0.3;
}
.img-red :hover .middle {
opacity: 1;
}
.text {
background-color: #4CAF50;
color: white;
font-size: 16px;
padding: 16px 32px;
}
/* End of image hover effect 5/15/2019 */
/* image responsive 5/16/2019 */
.img-reponsive {
width: 100%;
}
/* End of image responsive 5/16/2019 */
/* Our mission css 5/16/2019 */
.white {
background: #fff;
padding: 1rem;
border-radius: 25px;
box-shadow: 0 1px 5px rgba(104, 104, 104, 0.9);
}
/* End of our mission css 5/16/2019 */
/* CSS for object on modal slider 2 5/29/2019 */
.modal-header2{
padding: 20px;
}
object{
width: 100%;
margin: auto;
height: 100vh;
}
.carousel-indicators li {
background-color: var(--dark);
}
.carousel-indicators .active {
background-color: var(--light);
}
/* CSS for department calendar 6/19/2019 */
.post{
margin: 15px;
padding: 20px;
box-shadow: 1px 2px 0px rgba(89,89,89,0.5)
}
.post p{
pading-bottom: 1rem;
}
.postDate h2{
border-bottom: none;
text-align: center;
}
.postDate h1{
text-align: center;
}