@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,700');

/* temporary */

.container {
    background-color: #bbbbbb;
}

.container-fluid {
    background-color: #bbbbbb;
}


.certtable {
    font-size: .9rem ;
}



.progisnt h5 {padding-top: 0rem;}
.progis h5 {  padding-top: 0rem;}
/* temporary end */

html,body {
    height:100%;
    width:100%;
    font-family: 'Poppins', sans-serif;
}

.navbar-brand {
    font-size: 325%;
    padding-right:2rem;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.navbar-brand img {
    max-width: 3.7rem;
    height: auto;
}

.carousel-caption {position: absolute; top: 45%; transform: translateY(-65%); margin:auto; padding:0;}
.carousel-caption h1 { text-shadow: 1px 1px 13px #000000 }
.carousel-caption h3 { text-shadow: 1px 1px 13px #000000}
.carousel-caption p { margin-bottom:0; text-shadow: 1px 1px 8px #000000}

.jumbocont {
    color : #000000;
    background-color: #eeeeee;
}

.jumboprog {
    white-space: nowrap;
}


.list-group {
    list-style-type: none;
}

.slidecont {
    padding: 0;
}


.socmedia {
    width:15rem;
    margin-left:2rem;
    display: inline-block ;
}
.socmedia img {
    height:2.2rem; 
    float: justify;
    margin-left:.8rem;
    margin-bottom: .2rem;
}

.social {font-size:3rem}
.social img {height: 3rem;}
.socialcont {background-color: rgb(39, 39, 39); border:1px solid white; padding-top:1rem; color:white;} 

.alt-width {width:65%; }

/* gallery definition */
.container-fluid {
   background-color: #bbbbbb;

}
 
#gallerywall {
    width:98%;
    padding-top: 1.3rem ;
    margin-bottom: 5rem;
}

#gallerywall {
    width:98%;
    padding-top: 1.3rem ;
    margin-bottom: 5rem;
}

.gallerycols {
    -moz-column-count:3;
    -webkit-column-count:3;
    column-count: 3;
    padding-bottom: 1rem;
}

.gallimgdiv {

    border:3px solid #000;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid-column;
    margin:0;
    margin-bottom:1rem;

}

.gallimg { width:100%; }

.resume {font-size:1.1rem; color: rgb(250, 220, 163);}



.modal-content {
    height: inherit;
    width: max-content;
}
 
.modal-body {
    height: inherit;
    width: max-content;
    padding-top:3rem;
}

.embed-responsive {
    height: inherit;
    width: max-content;

}
.modimg {
    width: 100%;
    height: auto;
}

.nxtpge {
    width:2.5em;
    height:2.5em;
}

.main-wrapper {
    height: 68vh;
    overflow: hidden;
  }


.poptable {
    width:100%;
    margin-top: 20px;
}

.townindex h3 { 
    margin-bottom: 20px;
}

.poptable td {
    vertical-align:top;
}

.townindexdata {
    display:block;
    height: 64vh;
    overflow-x: hidden;
}

.towndata {
    width:90%;
    padding-top:15px;
    text-align : center;
}




/* container breakpoints are not the same as window breakpoints in Bootstrap5 */
/* (dont know about i dont know about prior releases) */

    /* XS Extra small devices (portrait phones, less than 576px) */
    @media (max-width: 575px) { /* contaner width becomes fluid */
        /* .container {background-color: rgb(245, 230, 14) ;} */
        .navbar-brand { font-size: 190%; padding-right:1rem; }
        .navbar-brand img { max-width: 2rem; }
        .socmedia {
            position:relative;
            inline-size: 10rem;
        }
        .socmedia img {
            height:1.5rem; 
            margin-left:.1rem;
            margin-bottom: .3rem;
            margin-top: .3rem;
        }
        .socmedia br { display: none; }
        .carousel-caption p { font-size: 65%;}
        .carousel-caption h1 { font-size: 75%;}
        .carousel-caption h3 { font-size: 50%;}
        .carousel-indicators {display:none;}
        .cgrp1 {display:block;}
        .cgrp2 {display:none;}

        .cgrp3 {display:block;}
        .cgrp4 {display:none;}


        .socialcont h2 {font-size: 1.3rem;}
        .socialcont {margin-top:.5rem;}
        .social {font-size:1.5rem;}
        .social img {height: 1rem;}

        .botcentcol {display:none;}
        .botnav {margin-top:1rem; margin-bottom:1rem;}
        .botleftcol {font-size:1rem; padding-bottom:1rem;}
        .botleftcol img {height:8rem}
        .bottexttd {padding:1rem;}
        .resume { font-size: 1rem ;}
        .botrightcol {font-size:1rem; padding-left:3rem; padding-right:3rem;}
        .botrightcol h5 {text-align:center}
        .botrightcol hr {padding:0rem; margin:.0rem; margin-bottom:.2rem;}
        .botrightcol img {height: 1.3rem; vertical-align: middle;}

        .jumboprog {
            margin-top:1rem;
            margin-bottom:1rem;
            padding-left: 4rem;
            padding-right: 4rem;
        } 
        .jumboprog h5 {font-size: 130%;}
        .jumbowelcome h5 {font-size: 130%;}
        .gallerycols {
            -moz-column-count:3;
            -webkit-column-count:3;
            column-count: 3;
            padding-bottom: 1rem;
        }

        .gmeinfo {font-size:4vw; }
        .gmeinfo h5 {font-size:4vw; font-weight: 800; }

    }
    
    /* SM Small devices (landscape phones, less than 768px) */
    @media (min-width: 576px) { /* container becomes 540  */
        /* .container {background-color: rgb(14, 245, 14) } */
        .navbar-brand { font-size: 240%; }
        .navbar-brand img { max-width: 2.8rem; }
        .socmedia {
            position:relative;
            inline-size: 10rem;
        }
        .socmedia img {
            height:1.5rem; 
            margin-left:.1rem;
            margin-bottom: .3rem;
            margin-top: .3rem;
        }
        .carousel-caption p { font-size: 65%; text-justify: auto;}
        .carousel-caption h1 { font-size: 85%; }
        .carousel-caption h3 { font-size: 65%;}
        .cgrp1 {display:block;}
        .cgrp2 {display:none;}
        .socialcont {margin-top:.5rem;} 
        .social {font-size:2rem;}
        .socialcont h2 {font-size: 1.5rem;}
        .social img {height: 1.3rem;}

        .botcentcol {display:none;}
        .botnav {margin-top:1rem; margin-bottom:1rem;}
        .botleftcol {font-size:1rem; padding-bottom:1rem;}
        .botleftcol img {height:8rem}
        .bottexttd {padding:1rem;}
        .resume { font-size: 1rem ;}
        .botrightcol {font-size:1rem; padding-left:3rem; padding-right:3rem;}
        .botrightcol h5 {text-align:center}
        .botrightcol hr {padding:0rem; margin:.0rem; margin-bottom:.2rem;}
        .botrightcol img {height: 1.3rem; vertical-align: middle;}

        .jumboprog {
            margin-top:1rem;
            margin-bottom:1rem;
            padding-left: 5rem;
            padding-right: 5rem;
        } 
        .jumboprog h5 {font-size: 140%;}
        .jumbowelcome h5 {font-size: 140%;}

        .gallerycols {
            -moz-column-count:5;
            -webkit-column-count:5;
            column-count: 5;
            padding-bottom: 1rem;
        }
        .gmeinfo {font-size:3vw; }
        .gmeinfo h5 {font-size:3vw; font-weight: 800; }
    }
    
    /* MD Medium devices (tablets, less than 992px) */
    @media (min-width:768px) { /*container becomes 720  */
        /* .container {background-color: rgb(14, 245, 245) } */
        .navbar-brand { font-size: 300%; }
        .navbar-brand img { max-width: 3.4rem; }
        .socmedia img {
            height:1.6rem; 
            margin-left:.1rem;
            margin-bottom: .3rem;
            margin-top: .3rem;
        }
        .carousel-caption p { font-size: 75%; text-justify: auto; }
        .carousel-caption h1 { font-size: 110%; }
        .carousel-caption h3 { font-size: 90%; }
        .cgrp1 {display:none;}
        .cgrp2 {display:flex;}
        .socialcont {margin-top:.5rem;}
        .social {font-size:2.5rem;}
        .social img {height: 2rem;}
        .socialcont h2 {font-size: 2rem;}
        .card-title { font-size: 120%;  }
        .card-text { font-size: 90%;  }

        .botcentcol {display:none;}
        .botnav {margin-top:0; margin-bottom:0;}
        .botleftcol {font-size:.9rem; padding-bottom:1rem;}
        .botleftcol img {height:8rem}
        .bottexttd {padding:1rem;}
        .resume { font-size: .9rem ;}
        .botrightcol {font-size:.8rem; padding-left:4rem; padding-right:0rem;}
        .botrightcol h5 {font-size:1rem;text-align:center; margin-top:.8rem;}
        .botrightcol hr {padding:0rem; margin:.1rem;}
        .botrightcol img {height: 1rem; vertical-align: middle;}

        .jumboprog {
            margin-top:.5rem;
            margin-bottom:2rem;
            padding-left: 3rem;
            padding-right: 3rem;
        } 
        .jumboprog h5 {font-size: 130%;}
        .jumbowelcome h5 {font-size: 160%;}
        
        .gallerycols {
            -moz-column-count:6;
            -webkit-column-count:6;
            column-count: 6;
            padding-bottom: 1rem;
        }
        .gmeinfo {font-size:2.5vw; }
        .gmeinfo h5 {font-size:2.5vw; font-weight: 800; }
    }

    /* LG Large devices (desktops, less than 1200px) */
    @media (min-width: 991px) { /* container becomes 960 */
        /* .container {background-color: rgb(14, 14, 245) } */
        .navbar-brand { font-size: 310%; }
        .navbar-brand img { max-width: 3.8rem; }
        .carousel-caption p { font-size: 85%; text-justify: auto; }
        .carousel-caption h1 { font-size: 130%;}
        .carousel-caption h3 { font-size: 105%; }       
        .cgrp2 {display:none;}
        .cgrp1 {display:flex;}
        .socialcont {margin-top:.5rem;}
        .social {font-size:3rem;}
        .social img {height:2.7rem; vertical-align: -5%;}
        .socialcont h2 {font-size: 2.7rem;}
        .card-title { font-size: 110%;  }
        .card-text { font-size: 90%;  }

        .botcentcol {display:block;}
        .botnav {margin-top:0; margin-bottom:0;}
        .botleftcol {font-size:1.0rem; padding-bottom:1rem;}
        .botleftcol img {height:8rem}
        .bottexttd {padding:1rem;}
        .botrightcol {font-size:.8rem; padding-left:9rem; padding-right:0rem;}
        .botrightcol h5 {font-size:1rem;text-align:center; margin-top:.3rem;}
        .botrightcol hr {padding:0rem; margin:.1rem;}
        .botrightcol img {height: 1rem; vertical-align: middle;}
    
        .jumboprog {
            margin-top:.5rem;
            margin-bottom:2rem;
            padding-left: 3rem;
            padding-right: 3rem;
        } 
        .jumboprog h5 {font-size: 130%;}
        .jumbocont { font-size: 120%; }
        .jumbowelcome h5 {font-size: 150%;}
        .gallerycols {
            -moz-column-count:8;
            -webkit-column-count:8;
            column-count: 8;
            padding-bottom: 1rem;
        }
    }

    /* XL Large devices (desktops, less than 1200px) */
    @media (min-width: 1199px) { /* container becomes 1140 */
        /* .container {background-color: rgb(245, 14, 245) } */
        .carousel-caption p { font-size: 100%; text-justify: auto; }
        .carousel-caption h1 { font-size: 150%;}
        .carousel-caption h3 { font-size: 110%;}    
        .cgrp2 {display:none;}
        .cgrp1 {display:flex;}
        .card-title { font-size: 130%;  }
        .card-text { font-size: 100%;  }

        .jumboprog {
            margin-top:.5rem;
            margin-bottom:2.5rem;
            padding-left: 2rem;
            padding-right: 2rem;
        } 
        .jumboprog h5 {font-size: 120%;}
        .jumbocont { font-size: 120%; }
        .jumbowelcome h5 {font-size: 150%;}
        .gallerycols {
            -moz-column-count:10;
            -webkit-column-count:10;
            column-count:10;
            padding-bottom: 1rem;
        }
        .gmeinfo {font-size:2vw; }
        .gmeinfo h5 {font-size:2vw; font-weight: 800; }
    }

    /* XXL Large devices (desktops, less than 1200px) */
    @media (min-width: 1400px) { /* container becomes 1320 */
        /* .container {background-color: rgb(235, 79, 79) } */
        .carousel-caption p { font-size: 110%; text-justify: auto; }
        .carousel-caption h1 { font-size: 170%; }
        .carousel-caption h3 { font-size: 120%; } 
        .cgrp2 {display:none;}
        .cgrp1 {display:flex;}
        .card-title { font-size: 150%;  }
        .card-text { font-size: 110%;  }

        .gallerycols {
            -moz-column-count:13;
            -webkit-column-count:13;
            column-count: 13;
            padding-bottom: 1rem;
        }
      }


/* border:1px solid red; */