/* ==========================================================================
   Tossed together by James Little. 
   ========================================================================== */



/* over-riding global tags */

html {
    /* for sticky footer */
    position: relative;
    min-height: 100%;
}

body {
    background-color: #424647;
    margin-bottom: 120px; /* Margin bottom by footer height */
}

sup {
    padding: 0;
    margin: 0;
    font-size: 75%;
}

/* over-riding bootstrap (JL) */
.shadow-lg { 
    box-shadow: 0 0.1rem 3rem rgba(0, 0, 0, 1) !important;
}


/* JL's doings */

div.comm-item {
    padding: 2rem;
}

.comm-title {
    text-decoration: underline;
}

div.spacer {
    padding:1.5rem;
}

#content-body {
    background-color: #f0f0f0;
    padding: 1rem;
}

div.thumb {
    margin-top: 15px;
    margin-bottom: 15px; 
}

.gallery-item {

    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 1) !important;
    position: relative;
    float: left;
    width:  239px;
    height: 239px;
    background-position: 50% 50%;
    background-repeat:   no-repeat;
    background-size:     cover;
}

div#text-logo {
    font-size: 2.5rem;
    font-weight: bolder;
    font-family: 'Nanum Gothic', sans-serif;
    margin-right: 2.00rem;
    margin-left: 1.00rem;
    padding:0;
    /*text-shadow: 0 0.1rem 3rem rgba(0, 0, 0, 1);*/
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: transparent;
}

.email-icon {
    color :#3c3c3c;
}

#contact-form {
    background: inherit;
}

/* Image things */

/*
 * Pure CSS aspect ratio with no spacer images or js! :)
 */

div.sixteen-by-nine {
	width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
}

div.sixteen-by-nine > .fluid-img {
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	font-size: 24px;
	text-align: center;
}

/* Other aspect ratios to try:
 * 56.25% = 16:9
 * 75% = 4:3
 * 66.66% = 3:2
 * 62.5% = 8:5
 */

/* 
Sticky footer styles:
    https://getbootstrap.com/docs/4.1/examples/sticky-footer/sticky-footer.css
*/
footer.global {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 120px; /* Set the fixed height of the footer here */
    /*line-height: 60px; */ /* Vertically center the text there */
    text-align: center;
    font-size: 0.8rem;
    background-color:#3c3c3c;
    padding-top: 20px;
    border-top: 5px solid #4a4a4a;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 1) !important;
}
    
footer.global > div.container#footer-container {
    width: auto;
    max-width: 680px;
    padding: 0 15px;
    background: inherit;
}

div.footer-sep {
    color: #6c757d;
}

div.footer-sep > a {
    color: inherit;
    text-decoration: underline;
}

div#footer-links > a:hover,
div#footer-info > a:hover {
    text-decoration: none;
    color: #f5a869;
}

div#footer-links {
    font-size: 0.8rem;
}

div#footer-info {
    font-size: 0.8rem;
}
  
.social:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
}
.social {
    -webkit-transform: scale(0.8);
    /* Browser Variations: */
    
    -moz-transform: scale(0.8);
    -o-transform: scale(0.8);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}


.social-main:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
}
.social-main {
    -webkit-transform: scale(1);
    /* Browser Variations: */
    
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
}

.social-main-i {
    width: 45px;
}

.social-main-text {
    line-height: 2rem;
}

.social-main-text,
.link,
.link:hover {
    color: #7a2e4d; 
}

.link:hover {
    text-decoration: underline;
}

div#social-media > a {
    color: inherit;
}

#social-fb-main,
div#social-media > a > i#social-fb:hover {
    color: #3B5998;
}

#social-tw-main,
div#social-media > a > i#social-tw:hover {
    color: #4099FF;
}

#social-insta-main,
div#social-media > a > i#social-insta:hover {
    color: #d6249f;
}

#social-yt-main,
div#social-media > a > i#social-yt:hover {
    color: #ff0000;
}





/* 
Navbar colors generated using: 
    https://work.smarchal.com/twbscolor/4.0.0/css/f5a869e58e47ecf0f10202020 
*/
.navbar {
    background-color: #f5a869;
    margin-bottom: 2.00rem;
}
.navbar .navbar-brand {
    color: #ecf0f1;
}
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
    color: #020202;
}
.navbar .navbar-text {
    color: #ecf0f1;
}
.navbar .navbar-text a {
    color: #020202;
}
.navbar .navbar-text a:hover,
.navbar .navbar-text a:focus {
    color: #020202; 
}
.navbar .navbar-nav .nav-link {
    color: #ecf0f1;
    border-radius: .25rem;
    margin: 0 0.25em;
}
.navbar .navbar-nav .nav-link:not(.disabled):hover,
.navbar .navbar-nav .nav-link:not(.disabled):focus {
    color: #020202;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item.active .nav-link:hover,
.navbar .navbar-nav .nav-item.active .nav-link:focus,
.navbar .navbar-nav .nav-item.show .nav-link,
.navbar .navbar-nav .nav-item.show .nav-link:hover,
.navbar .navbar-nav .nav-item.show .nav-link:focus {
color: #020202;
    background-color: #e58e47;
}
.navbar .navbar-toggle {
    border-color: #e58e47;
}
.navbar .navbar-toggle:hover,
.navbar .navbar-toggle:focus {
    background-color: #e58e47;
}
.navbar .navbar-toggle .navbar-toggler-icon {
    color: #ecf0f1;
}
.navbar .navbar-collapse,
.navbar .navbar-form {
    border-color: #ecf0f1;
}
.navbar .navbar-link {
    color: #ecf0f1;
}
.navbar .navbar-link:hover {
    color: #020202;
}

@media (max-width: 575px) {
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #ecf0f1;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #020202;
    }
    .navbar-expand-sm .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #020202;
        background-color: #e58e47;
    }
}

@media (max-width: 767px) {
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #ecf0f1;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #020202;
    }
    .navbar-expand-md .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #020202;
        background-color: #e58e47;
    }
}

@media (max-width: 991px) {
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #ecf0f1;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #020202;
    }
    .navbar-expand-lg .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #020202;
        background-color: #e58e47;
    }
}

@media (max-width: 1199px) {
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item {
        color: #ecf0f1;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:hover,
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item:focus {
        color: #020202;
    }
    .navbar-expand-xl .navbar-nav .show .dropdown-menu .dropdown-item.active {
        color: #020202;
        background-color: #e58e47;
    }
}

.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item {
    color: #ecf0f1;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:hover,
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item:focus {
    color: #020202;
}
.navbar-expand .navbar-nav .show .dropdown-menu .dropdown-item.active {
    color: #020202;
    background-color: #e58e47;
}

.navbar-toggle:hover,
.navbar-toggle:focus {
  background-color: red;
}
 .navbar-toggle .icon-bar {
  background-color: red;
}
.navbar-toggle:hover .icon-bar,
.navbar-toggle:focus .icon-bar {
  background-color: white;
}