h1 {
    color: black;
    font-weight: normal;
    margin-top: 10px;
}
h2 {
    color: black; 
    font-weight: normal;
}

h3 {
    color: black; 
    font-weight: normal;
}

body {
    box-sizing: border-box;
    font-family: calibri;
}

#container
{
    position:		absolute;
    width:              95%;
    margin-left: 10px;
    margin-bottom:	15px;
    padding-left:	5px;
    padding-bottom:	10px;
} 


#mainPanel
{
    position:           relative;
    width:		100%;
}

/* Home page styles	*/

.homeContent
{
    position:           relative;
    width:		98%;
    text-align:		center;
}

.homeImage {
    width:		83%;
    padding-top:        12px;
    margin:             auto;
}

.homeLeft {
    text-align:         left;
    padding-left:       5px;
}

.homeImage img {
    max-width:          100%;
    height:             auto;
}

.homeFeature {
    position:		relative;
    width:		98%;
    height:             100px;
}

.homeCollectList
{
    position:		relative;
    width:		98%;
}

.homeColImage {
    max-width:          98%;
    height:             auto;
}

.homeColHover {
    max-width:          98%;
    height:             auto;
    opacity:            0.5;
    display:            none;
}

.collectImage img {
    max-width:  100%;
}

.collectText {
    widtb:          46%;
    padding:        30px 0px 10px 0px;
}

.pictureDiv
{
    width:		48%;
    margin-left:    5px;
    margin-right:   5px;
    padding-top:	12px;
    float:		left;
    text-align:		center;
    height:		auto;
}

.pictureDiv img {
    width:          98%;
    height:         290px;
    object-fit:     contain;
}

/*
.pictureDiv button{
    font-size:          18px;
    background-color:	#ffe699;
//    color:		#cc0000; 
    padding:            2px 8px;
}
*/
.collectDiv
{
    width:		98%;
    padding-top:	12px;
    float:		left;
    text-align:		center;
    height:		430px;
}

.featureImg {
    text-align:		center;
    padding:         0px 20% 0px 20%;
    box-sizing:     border-box;
}

.featureTxt {
    width:		90%;
    float:		left;
    
}

.collTxt
{
    position:		relative; 
    top:		-200px;
    padding-left:	20px;
    width:		90%;
    display:		none;
    background-color:	white;
    border:		solid 1px;
    opacity:		1;
}

.picImage               /* Only used in events */
{
    position:		relative;
    float:		left;
    text-align:		center;
    width:		32%;
}

.contact2 {
    width:      350px;
    float:      left;
}

/* For signup popup     */
.signupInner {
    position:       fixed;
    top:            300px;
    height:         250px;
    width:          360px;
    border:         1px solid;
    background-color: white;
    padding:        0px 8px 0 8px;
    visibility: visible;
}

.signupInput {
    position:           absolute;
    left:               140px;
}

/* For signup link on home page */
.signupButton{
    font-size:          16px;
    background-color:	#ffe699;
    color:		#cc0000;
    padding:            2px 8px;
    width:              200px;
}

/* Footer styles ----------- */

.ftcontacts {
    height: auto;
    width:  42%;
    float:  left;
    margin: 0 20px 0 20px;
      box-sizing: border-box;
}

.ftjoin {
    height: auto;
    width:  42%;
    float:  left;
    margin: 0 20px 20px 20px;
    box-sizing: border-box;
}

.ftinput {
    width:  95%;
    margin-bottom: 5px;
    background:#fff;
    color:  #000;
    height: 30px;
}

.lbutton {
    padding:    8px;
    background: crimson;
    color:  white;
}

@media screen and (min-width: 750px) {
    .contact2 {
        width:      48%;
        float:      left;
    }
}

@media screen and (min-width: 850px) {

    .homeImage {
        width:		100%;
        float:          left;
    }

    .homeColImage {
    box-sizing: border-box;
        max-height:     237px; 
        max-width:      95%;
    }
    .collectText {
        width:          70%;
        padding:        25px 5px 10px 5px;
    }
    .pictureDiv {
        width:          31%;
/*        height:          auto; */
    }
    .pictureDiv img {
        height:         350px;
    }

}

@media screen and (min-width: 1100px) {  /* Desktop styles */
    #container {
        width:		1100px;
        left:		50%;
        margin-left:	-550px;
    }

    .homeImage {
        width:		100%;
    }
}

@media screen and (min-width: 650px) and (max-width: 849px) {
    .homeImage {
        width:		27%;
        float:          left;
    }

    .homeLeft {
        width:          71%;
        float:          right;
    }
/*    .pictureDiv {
        height:          auto;
    } */
    .pictureDiv img {
        height:         390px;
    }
}

@media screen and (max-width: 580px) {
/*    .pictureDiv {
        height:          auto;
    } */
}

@media screen and (min-width: 580px) and (max-width: 650px) {
    .pictureDiv {
        height:          auto;
    }
}

/*  Styles for events */

#eventPanel
{
    width:		80%;
    margin-left:	10%;
}

/*	Styles for forms */

.prompt
{
    position:           absolute;
    left:		40px;
    width:		300px;
}

.input
{
    position:           absolute;
    left:		300px;
}

/*	Footer styles	*/
.jlink
{
    text-align: 	center;
    color:		white;
}

p.jlink a 
{
    color: 		#efe8dc;
}

/* ------------- Admin styles ---------- */

.logPrompt
{
        position: 	absolute;
        left:		100px;
}
.logData
{
        position: 	absolute;
        left:		300px;
}
#errors
{
        position: 	absolute;
        left:		100px;
        color:		red;
}

[class*="col-"] {
  float:            left;
  padding:          0px 15px 0px 15px;
  box-sizing:       border-box;
}

/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {
  /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}