/* =================== Library Home Page styles ======================== 
                        created by jnk on 8/19/2019    ==================== */


@media screen and (max-width: 2800px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        grid-gap: 10%;
        max-width: 1100px;
        background-color: #fff;
        color: #444;
        font-size: 1.6em;
        margin: 1em 0;
    }

    .grid>div {
        background-color: #6bc5c9;
        padding: 1em;
        color: #333;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
        border-radius: 6px;
        text-align: center;
    }

    .grid>div a {
        color: #333;
        text-decoration: none;
    }

    .grid>div a img {
        max-height: 100px !important;
        margin: 1em 0;
    }

    .span-col-6 {
        grid-column: span 6 / auto;
        background-color: #fff !important;
        text-align: left !important;
        font-family: 'Roboto Slab', serif !important;
        color: #fff;
        margin: 1em 0 0 0;
        padding: .25em !important;
    }

    .span-col-3 {
        grid-column: span 3 / auto;
    }

    .span-col-2 {
        grid-column: span 2 / auto;
    }

    .span-col-6 h4 {
        margin: 1em 0 0 0;
        padding:.25em;
        font-size: 3rem;
    }

    .span-col-6 h4:first-of-type {
        margin: 0 0 -1em -.25em !important;
    }

    .main-edit-section h1,
    .main-edit-section h2,
    .main-edit-section h3,
    .main-edit-section h4 {
        font-family: 'Roboto Slab', serif;
        color: #00703c;
        font-weight: 400;
    }

    .search-helin {
        background-color: #e5e5e5;
        padding: 0 2em .5em 2em;
        margin: .5em 0;
        border-radius: 10px;
    }

    .form-control,
    .input-group-text {
        font-size: 1.4em;
    }

    input#query placeholder {
        color: #ccc;
        font-size: 1em;
    }
.btn-dark {
    color: #fff;
    background-color: #343a40!important;
    border-color: #343a40!important;
}
.btn {
	background-image: none;
}
    /*------tabs - aka buttons -----*/
    .btn-group .button {
        background-color: #00703c;
        /* CCRI Green */
        border: 1px solid #000;
        color: white;
        padding: 0;
        margin: 0 .1rem -2rem .1rem;
        text-align: center;
        text-decoration: none;
        font-size: 1em;
        cursor: pointer;
    }

    .btn-group .button a {
        color: #fff;
        text-decoration: none;
        display: inline-block;
		padding:.5em 2em;
    }

    .btn-group .button.black {
        background-color: #000;
		padding:1em 2em;
		cursor:default;
    }

    .btn-group .button:not(:last-child) {
        border-right: none;
        /* Prevent double borders */
    }

    .btn-group .button:hover {
        background-color: #3e8e41;
    }
	.btn-group .button:hover.black {
        background-color: #000;
    }
	.phones {
			padding:1em;
			background-color:#f5f5f5;
			}
}

/* Extra small devices (phones, 600px and down) */
@media screen and (max-width: 600px) {
    .grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-gap: 2px;
        max-width: 375px;
        background-color: #fff;
        color: #444;
        font-size: 1.4em;
        margin: 1em 0;
    }

    .span-col-6 {
        grid-column: span 1 / auto;
        background-color: #fff !important;
        text-align: left !important;
        font-family: 'Roboto Slab', serif !important;
        color: #00703c;
        margin: 1em 0 0 0;
        padding: .25em !important;
    }

    .span-col-3 {
        grid-column: span 1 / auto;
    }

    .span-col-2 {
        grid-column: span 1 / auto;
    }

    .grid>div a img {
        margin: 0 1em 0 0;
        display: inline;
        max-width: 44px;
        text-align: left;
    }

    .span-col-6 h4 {
        margin: 1em 0;
        padding: 0;
        font-size: 2rem;
    }

    .span-col-6 h4:first-of-type {
        margin: 0 0 1em .25em !important;
    }

    .form-control,
    .input-group-text {
        font-size: 1em;
    }

    .search-helin {
        padding: 1em;
    }

    /*------tabs - aka buttons -----*/
    .btn-group {
        max-width: 400px;
    }

    .btn-group .button {
        background-color: #00703c;
        /* CCRI Green */
        border: 1px solid #000;
        color: white;
        padding: 1em;
        margin: 0 .1rem;
        text-align: center;
        text-decoration: none;
        display: block;
        font-size: 1em;
        cursor: pointer;
        width: 100%;
        max-width: 400px;
    }

    .btn-group,
    .btn-group-vertical {
        position: relative;
        display: -ms-inline-flexbox;
        display: inline;
        vertical-align: middle;
    }

    .col-6 {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}