/*
|===========================================================================================================
| app.css
|===========================================================================================================
| 
| ============
| TIPS & USAGE
| ============
| 
| 1. Next and indent your styles.
| 2. Keep styles organized (use headings, comments, and table of contents)
| 3. The name of your theme is placed as a class on the body tag.
| 4. Use that class to prefix and define all your styles within common containers so as not to override required styles in the header and footer.
| 5. The most common containers will be ".page" and ".feature" but you might have others in a unique template.
| 6. Do not use just ".basecci" because it will override the msu-header and msu-footer styles. You must target the inner page container.
| 7. For example, your css rules should be prefixed with ".basecci .page" or ".basecci .feature" and etc.
|
|
| =================
| TABLE OF CONTENTS
| =================
|
| #  Grid
| #  Type
| #  Adjustments to the Header
| #  Adjustments to the Menu
| #  Adjustments to the Footer
| #  Other Template Adjustments
| #  Buttons
| #  Page Headers
| #  Pattern Backgrounds
|
*/




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Grid 
 */

.row, .row>*{
    --bs-gutter-x: 30px;
}

@media (max-width: 767px) {
    .page .row > div {
	margin-bottom: 1em;
    }
}

.container,.container-fluid,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
    --bs-gutter-x: 30px;
}
@media (min-width: 1400px) {
    .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl{
	max-width: 1140px;
    }
}



/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Type 
 */

.basecci .page p {

}

.basecci .page h1 {

}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Adjustments to the Header
 */

/* top menu */
header#msu-header .top-menu-row ul.menu.nav li.nav-item:first-child .nav-link,
header#msu-header .top-menu-row ul.menu.nav li.nav-item.space + li.nav-item .nav-link{
   border-top-left-radius: 25px;
   border-bottom-left-radius: 25px;
}
header#msu-header .top-menu-row ul.menu.nav li.nav-item:last-child .nav-link,
header#msu-header .top-menu-row ul.menu.nav li.nav-item.space .nav-link{
   border-top-right-radius: 25px;
   border-bottom-right-radius: 25px;
}

/* search bar */
header#msu-header .search .search-form .form-group button{
    background-color: #888;
    color: white;
    border-radius: 50%;
    width: calc(1.5em + .75rem + 2px);
    height: calc(1.5em + .75rem + 2px);
    padding: 0;
    margin-left: -17px;

    z-index: 1000;
}
header#msu-header .search .search-form .form-group input{
   padding-right: 17px;
   border-top-left-radius: 15px;
   border-bottom-left-radius: 15px;
}



/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Adjustments to the Menu
 */

nav#main-menu.navbar ul.menu.nav.navbar-nav li.dropdown-item a{
   white-space: break-spaces;
}

nav#main-menu .menu a{
   text-decoration: none;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Adjustments to the Footer
 */




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Other Template Adjustments
 */




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Forms
 */

.basecci .form-control{
   min-height: calc(1.5em + .75rem + 2px);
   border-radius: var(--bs-border-radius);
}
.basecci .form-select:focus{
   border-color: #d6c5c8;
   box-shadow: 0 0 0 .25rem rgba(93, 23, 37, .25);
}



/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Buttons
 */

.true-bulldog .page .btn-primary::before{
   
}

.basecci .page .btn {

}

.basecci .page .btn-primary {
   background-color: #5d1725!important;
}
	.basecci .page .btn-primary:hover, 
	.basecci .page .btn-primary:focus, 
	.basecci .page .btn-primary:active, 
	.basecci .page .btn-primary.active, 
	.basecci .page .open > .dropdown-toggle.btn-primary {

	}


@media screen and (min-width:768px){
	.basecci .navbar{
		padding:0!important;
        }
	.navbar>.container, .navbar>.container-fluid {
		display:block;
        }
}

.basecci #mobile-nav .navbar{
	padding:0!important;
}
                
.basecci #mobile-nav .navbar-toggle{
	margin:.5em;
}
                
.basecci #collapsibleNavbar{
	color:white!important;
}
                
.basecci .mobile-menu{
	background-color:#000;
}
                
.basecci #mobile-menu .dropdown-menu{
	background-color:#222!important;
	padding:0;
	margin:0;
}
                
.basecci #mobile-menu .nav-link{
	color:#fff;
	padding-left:15px;
}
                
.basecci #mobile-menu .nav-link:hover{
	background-color:#555;
}
                
.basecci #mobile-menu .show .nav-link{
	background-color:#333;
}
                
.basecci #mobile-menu .dropdown-item{
	color:#eee;
}
                
.basecci #mobile-menu .dropdown-item:hover{
	background-color:#555!important;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Page Headers
 */

.basecci .header-section{
   width: 100%;
   max-height: 600px;
   overflow: hidden;

   display: flex;
   align-items: center;
   align-content: center;
   justify-content: center;
}
.basecci .header-section .header-video{
   width: 100%;
   max-width: 2000px!important;
}
.basecci .header-section .header-img{
   width: 100%;
   max-width: 2000px!important;
   min-height: 300px;

   background-size: cover;
   background-position: center top;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Section Headers
 */
.basecci .subheader{
   margin: 2rem 0 0.5rem 0;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Sub Menus
 */

.basecci .list-group.submenu .subsubmenu .list-group-item{
   background-color: #5d1725;
   border: none;

   color: white;

   padding-left: 2rem;

   font-size: 85%;
}
.basecci .list-group.submenu .subsubmenu .list-group-item.active{
   background-color: #40101a;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Pattern/color Backgrounds
 */

.basecci .bg-white-pixels{
   background-image: url('../img/patterns/cream_pixels_white.jpg');
}
.basecci .bg-maroon-pixels{
   background-image: url('../img/patterns/cream_pixels_maroon.jpg');
}
.basecci .bg-gray-pixels{
   background-image: url('../img/patterns/cream_pixels_gray.jpg');
}
.basecci .bg-black-pixels{
   background-image: url('../img/patterns/cream_pixels_black.jpg');
}

.basecci .text-bg-gray{
   background-color: #eee!important;
}
.basecci .text-bg-light-gray{
   background-color: #f6f6f6!important;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Research Associates
 */

.basecci #ResearchAssociates a{
   text-decoration: none;
   color: #660000;

   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
}
.basecci #ResearchAssociates .fa{
   font-size: 35px;
}
.basecci #ResearchAssociates .Name{
   font-size: 18px;
   font-weight: bold;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 * 	Round Images
 */

.basecci .roundImgContainer{
   width: 100%;
   padding-top: 100%;
   position: relative;
}
.basecci .roundImgContainer img{
   width: 100%;
   height: 100%;
   border-radius: 50%;

   position: absolute;
   top: 0;
   object-fit: cover;
}




/** ------------------------------------------------------------------------------------------------------- */
/**
 *    Floats
 */

/*
.FloatLeft {
        float:left;
        margin-left:5px;
        margin-right:5px;
        border:1px solid black;
}
.FloatRight {
        float:right;
        margin-left:5px;
        margin-right:5px;
        border:1px solid black;
}

.Caption {
        font-size:12px;
        margin:0px 3px 0px 3px;
        padding:3px;
        text-align:center;
          line-height:14px;
}
*/
.FloatLeft{
        float: left;
        margin: 0 10px;
}

.FloatRight{
    float: right;
    margin: 0 10px;
}

.FloatLeft .Caption, .FloatRight .Caption, .videoCaption .Caption {
      font-size: 12px;
      margin: 3px 3px 5px 3px;
      padding: 0px;
      text-align: left;
}