/* Notes:  
1)  CSS-reset is called first, over-riding default styling
2)  Responsive CSS, breaks at ?? (phone), ?? (tablet), ?? (desktop)
*/
/*====================================================================*/
/*===========================  Global/Mobile Styling =================*/
/*====================================================================*/
/*********** Tags & Universal Items (Wrapper, Body, *) *********/
img {
    max-width: 100%;
    height: auto;
}
#wrapper   {
    max-width: 95%;
    margin: 0 auto;
    box-shadow: 12px 12px 8px #022658;
    background-color: #2D8CC5;
    padding: 20px 2%;
}
body {
    zzzbackground-color: #3399CC;
    background-image: linear-gradient(to bottom, #2D8CC5, #D0E0EB, #2D8CC5);
    font-size: 130%;
    font-family: 'Lato', sans-serif;
}
h1,h2,h3,h4,h5,h6 {
        font-family: 'Roboto', sans-serif;
}
h1 {                    /* This is the Mobile-size ... enlarged for tablet/desktop  */
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.3em 0;
}
h2 {
    font-size: 1.25em;
    font-weight: bold;
    margin: 10px 0 5px 0;
}
h3 {
    font-size: 1.15em;
    font-weight: 500;
    text-decoration: underline;
    margin: 5px 0 3px 0;
}
p+p {
    margin-top: 15px;
}

/************  Hero Images  ***************/
/* #hero-pic {       
    display: none;
}
*/
#hero-big,
#hero-small {
    display: none;
}
#hero-pic img {
    width: 100%;
}
/************  Nav & Header  *******/
.navbar-header {
    align-items: center;
}
.navbar-header img {
    height: 50px;
    width: auto;
}
.navbar-default {
    background-color: #FFFFFF;
    background-color: #D0E0EB;
    background-color: #ADD0EC;
    border-color: green;
}
.navbar-default .navbar-toggle {
    border-color: #2D8CC5;
}
.navbar-default .navbar-toggle:hover {
    background-color: #2D8CC5;
}
.nav>li>a {
    padding: 5px 10px;
}
#logo-v {
    display: none;
}
.navbar-default .navbar-nav>li>a {
    color: #777;                    /*********  menu text-color *****************************/
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
    color: #333;                    /*********  menu text-color on HOVER  *******************/
    background-color: #2D8CC5;      /*********  menu background-color for same  *************/
    border-right: 10px solid green;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {
    color: #555;                    /*********  menu text-color for ACTIVE  *****************/
    background-color: #e7e7e7;      /*********  menu background-color for same  *************/
}
#alt-h1  {
    display: none;
}
li.not_ready {text-decoration: line-through; display:none;}
/*********** Main & Aside  *****************/
a {
    color: #D0E0EB;
}
li {
    list-style: square outside;
    margin-left: 15px;
}
div#covid-statement {
    background-color: darkred;
    color: white;
    border: 2px solid #000;
    padding: 4px 3% 20px 3%;
    margin-top: 4px;
    margin-bottom: 20px;
}
div#covid-statement h2 {
    margin-top: 0px;
}
#covid-statement h2,
#covid-statement p {
    font-size: 150%;
}
/*********** Footer  *****************/
footer {
    background-color: #222222;
    color: #EEEEEE;
    text-align: center;
    margin-top: 10px;
    padding: 4px 0;
}
footer.dual-column {
    display: grid;
    grid-template-columns: 1fr 4fr 4fr 1fr;
}
footer p {
    margin-top: 0;
    justify-items: center; 
}
/*********** hyperlink button  *****************/
.link-button {
    background-color: #ADD0EC;
    padding: 5px 10px;
    color: #777
}
.link-button a {  
    color: #777;
}
.link-button:hover {
    color: #333;
    background-color: #2D8CC5;
    border-width: 5px;
    padding: 0 10px;
}
/***********  about-us  *****************/
#credits p {
    margin-bottom: 5px;
}
#credit-table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #DDDDDDAA;
    border: 3px solid black;
}
#credit-table p {
    border: 1px solid black;
    margin: 0;
    padding: 2px 0 2px 5px;
}
.thumbnail {
    max-width: 150px;
}

/*********** Contact Form  *****************/
#contactform label, 
#contactform input, 
#contactform textarea {
    display: block;
    width: 100%;
}
#contactform input, 
#contactform textarea {
    margin-bottom: 10px;
}

/*********** Visitors & News:  side-by-side video  *****************/

#b17-documentary {
    display: none;
}
#b17-documentary h3 {
    text-align: center;
}
.show-tablet,
.show-desktop {
    display: none;
}
.video-link {
    zwidth: 120px;
    zpadding: 10px 0;
    margin-top: 5px;
    border: 2px solid #DDD;
    background-color: blue;
    border-radius: 10px;
}
.video-link a {
    display: inline-block;
    padding: 10px 30px;
    zmargin: 20px;
    color: white;
    font-weight: bold;    
    text-align: center;
}
.video-link:hover {
    background-color: lightblue;
}
.video-link a:hover {
    color: darkblue;
}
/*********** obituary  *****************/
#obituary {	zzbackground-color:yellow;
			background-color: transparent;
			background-color: rgba(0,0,0,.1);
			padding: 10px;}

/*********** Tributes & Galleries  *****************/
#tribute-reels a img 	{	height: 100px; 
							width: auto;}
#picture-galleries ul li a img {	height: 100px; width:auto;}
/*********** Admin Stuff  *****************/
#BofA_accounting a img 	{	height: 200px; 
							width: auto;}
/*********** Mita/Popi Pics  *****************/
#fav_pics img 			{	width: 45%; height: auto; 
							margin: 1px;	}
#memorials a img 		{	width: 25%; height: auto;}
/*********** Music Table  *****************/
#music_table, #music_table td, #music_table th 		{	border: 1pt solid black; padding: 0px;}
#music_table tbody tr th 							{	font-weight: bold; padding: 15px;}
#music_table tbody tr td 							{	padding: 0 10px 0 15px;}
button.mctrl img, img.mctrl							{	height: 20px; width: 20px; margin:0px;}
/*********** something else  *****************/
/*********** something else  *****************/
/*********** something else  *****************/
/*********** something else  *****************/

/*====================================================================*/
/*===========================  Responsive  Styling ===================*/
/*====================================================================*/
/***********************
      Video & Calendar
************************/

.video-container, #calendar {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
    margin: 1px;
}

.video-container iframe,
#calendar iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

/***********************
      Desktop Media Querries
************************/
@media (min-width: 768px){
    #wrapper {
        max-width: 1100px;
        zmax-width: 75%;
        margin-top: 10px;
        margin-bottom: 100px;
    }
    body {
        font-size: 130%;
    }
    h1 {
        font-size: 2em;
    }
    #logo-h {
        display: none;
    }
    #logo-v {
        display: block;
        grid-column: 1/2;
        width: auto;
        height: 100px;
    }
    .navbar-default {
        /*background-color: lightskyblue;    */    /******************    DELETE THIS:  only for debugging responsiveness **************************/
    }
    .navbar-header {
        display: grid;
        grid-template-columns: 1fr 5fr;
    }
    #logo-v             {grid-area: logo;       }
    .container-fluid    {grid-area: nav-menu;   }
    #alt-h1             {grid-area: alt-h1;     }
    #test-a             {grid-area: test-a;     }
    #test-b             {grid-area: test-b;     }
    nav {
        display: grid;
        grid-template-columns: 1fr 8fr;
        grid-template-areas:    "logo   nav-menu"
                                "logo   alt-h1";
    }
    #primary-h1 {
        display: none;
    }
    #alt-h1 {
        zcolor: yellow;
        display: block;
        text-align: center;
        zalign-items: center;
        zposition: relative;
        zjustify-content: center;
		font-size: 2.3em;
    }
    .navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>a {
        margin-bottom: 10px;            /*********  no-hover  **********************************/
    }
    .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus {
        border-right: none;             /*********  HOVER  *************************************/
        border-bottom: 10px solid green;
        margin-bottom: 0;
    }
    nav img {
        height: 100px;
    }

    aside {
        margin-right: 20px;
    }
    
    /************  Hero Images  ***************/
    #hero-pic {
        display: block;
    }
/*    #hero-small {
        display: none;
    }
    */
    #hero-micro     {   display: none;  }
    #hero-small     {   display: none;  }
    #hero-big       {   display: block; }

    /*  Contact Form Styling  */
    #contactform {
        display: grid;
        grid-template-columns: 25% 75%;
    }
    #contactform label {
        width: auto;
        text-align: right;
        margin-right: 10px;
    }
    #contactform button {
        grid-column: 2 / 3;
        max-width: 110px;
    }

    /************  Side-by-side Video's  ***************/
    #b17-documentary {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
    .show-desktop {
        display: block;
    }
    .show-phone {
        display: none;
    }
    
    
} /* end-media-querry for DESKTOP */


/***********************
      Tablet Media Querries
************************/
@media (min-width:600px) and (max-width:767px){
    #wrapper {
        max-width: 85%;
        margin-top: 10px;
        margin-bottom: 30px;

    }
    
        navbar-default {
    /*    background-color: lightgreen;   */     /******************    DELETE THIS:  only for debugging responsiveness **************************/
    }
    
    body {
        font-size: 110%;
    }
    h1 {
        font-size: 2em;
    }

    /************  Hero Images  ***************/
    #hero-micro     {   display: none;  }
    #hero-small     {   display: block;  }
    #hero-big       {   display: none; }
    
    /*  Contact Form Styling  */
    #contactform {
        display: grid;
        grid-template-columns: 40% 60%;
    }
    #contactform label {
        width: auto;
        text-align: right;
        margin-right: 10px;
    }
    #contactform button {
        grid-column: 2 / 3;
        max-width: 110px;
    }
    /************  Side-by-side Video's  ***************/
    #b17-documentary {
        display: block;
    }
    .show-tablet {
        display: block;
    }
    .show-phone {
        display: none;
    }

    
} /* end-media-querry for TABLET */