body{
    background-color: #000 !important;
    width: 99% !important;
    overflow-x: hidden !important;
	font-family: Verdana,Geneva,sans-serif !important;
	margin-top: 0.5%;
	margin-left: 0.5%;
	margin-right: 0.5%;
	margin-bottom: 0.5%;
	color: #000;
	line-height: 1.2;
}



/*new jj*/

* {
  margin:0;
  padding:0;
  box-sizing:border-box
}
.item_description {
  width:100%;
  color:#fff;
}
.image {
  height:100% !important;
  padding-bottom:30%;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center center;
  width:30%;
}
.desc, .image {
  float:left;
}
.desc {
  width:70%;
  text-align:center;
  padding:10px;
}
@media (max-width:600px) {
  .desc, .image {
    float:none;
    width:100%;
      color:#fff;
      height:100%;
  }
}
/*end new jj*/





.hundredwidthsegment  {
    display: flex;
    align-items: center;
    margin-bottom: 0.5%;
    width:100%;
}

.centre {
    margin: 0px;
}
.card-img-jj {
   width: 100%;
    height: 30vw;
  background: url(/COGA/files/image1.jpg) center no-repeat;
    object-fit: cover;
}

.card-img-intention {
  color: #000;
  height: 24rem;
  background: url(/COGA/files/resources/ANGICOUR/Photos/IN/DSC_0873.jpg) center no-repeat;
  background-size: cover;
}

.welcome-section { 
    padding-top:3px;
    padding-left: 1%;
    padding-right: 1%;
    padding-bottom:3px;
    width: 100%;
    background-color: #efefef !important;
    text-align: left;
    color: 000;
}

/* This sets the size of fonts on screen sizes below laptop size. 
  I have no idea why the my mac desk top was still changing the size at 700px
  the logo on the top right is only 100px so the actual h1 area must be way over 700px but maybe not
  need to check. but this is working now on my mob and the desktop. do not change for the moment. 
  Yep my screen is at the default 1440px width x 900x height */ 

@media (max-width: 100em) {
  
  h1,
  .h1 {
    display: inline-block;
    font-size: calc(0.60rem + 1.0vw);
    font-weight: normal;
    line-height: 1.2;
    margin: 0px;
    color: #dddddd;
    text-align: center;
	vertical-align: center;
	letter-spacing: 6px;
	padding: 12px 0px 0px 15px;
    }
  h2,
  .h2 {
    font-size: calc(0.9rem + 0.9vw);
  }
  h3,
  .h3 {
    font-size: calc(0.7rem + 0.7vw);
  }
  h4,
  .h4 {
    font-size: calc(0.6rem + 0.5vw);
  }
    h5,
  .h5 {
    font-size: calc(0.5rem + 0.4vw);
  }
    h6,
  .h6 {
    font-size: calc(0.4rem + 0.3vw);
  }
}

/*.container-top {
    margin:0px;
    width:100%;
}
.logo {
    width: 100px;
    float: left;
}
.header-one {
    color: #ffffff;
        width:100%;
}*/

.center {
	float: none;
	margin: 0 auto;
	text-align: center;
}
.left {
	float: none;
	margin: 0 auto;
	text-align: left;
}



.text_green {
    color: #008000;
    font-weight: bold;
}

.text_green:hover {
    color: #008000;
}

.spaced {
    letter-spacing: 6px;
}
/*.spaced:nth-child(1) {
    font-weight: 400 !important;
    margin-top: 15px;
}*/

.img-wrapper {
    max-height: 160px;min-height: 160px;
    overflow: hidden;
}
.img-wrapper2 {
    max-height: 260px;
    min-height: 260px;
    overflow: hidden;
}
.font-weight-sb {font-weight:600;}
.alert-warning {
    color: #b7901f;
    background-color: #333332;
    border-color: #ffeeba;
    border: 1px dashed;
}
.alert-success {
    color: #61bd76;
    background-color: #373b39;
    border-color: #c3e6cb;
    border: 1px dashed;
}
.font-weight-bold {
    font-size: 28px;
}

.font-lg {font-size:24px;}

#coga__summary-header {
    text-align: left;
    margin: 0px 15px;
    padding: 12px;
    background-color: #efefef !important;
    background-color: rgba(255, 255, 255, 0.8);
    border-bottom: 10px solid black;
}
/*
#splash {
    margin: 0px 15px 15px 0px !important;
    width: 100% !important;
}

#splash p {
    line-height: 19px;
}
*/
#coga__subscribe-div-override {
    border: none !important;
    padding: 0px !important;
    flex-direction: column;
	text-align: left;
}

#coga__home-page-logo {
    position: absolute;
    left: 15px;
    top: 0px;
}


.button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #4CAF50;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px #999;
}

.button:hover {background-color: #3e8e41}

.button:active {
background-color: #3e8e41;
box-shadow: 0 5px #666;
transform: translateY(4px);
}


/* iPhone 5 display resolution is 1136 x 640 pixels.*/
/* mac 1440 x 900 */
/* ipad  2048 x 1536 pixels */
/* how is this possible??? my ipad is way smaller than my laptop screen*/
.pie-chart a {text-decoration:none;}

#findchurch {top: 50px;left: 90px;}
#wherethey {top: 98px;left: 90px;}
#explore {top: 190px;left: 90px;}
#compare {top: 118px;right: 90px;}
#carving {top: 175px;right: 70px;}
#studies {top: 214px;right: 100px;}

/*ipad lansdcape, no idea what portrait is*/
@media only screen and (max-width: 1300px) {
    #findchurch {left: 45px;}
    #wherethey {left: 20px;}
    #studies {right: 30px;}
    #explore {left: 25px;}
    #carving {right: 30px;}
    #compare {right: 30px;}
}

/*iphone not the text size is still px so this needs to change still to fix */
@media only screen and (max-width: 767px) {
    .john-header { text-align: center }
    .pie-chart a {font-size: 100%;}
     #findchurch {left: -5px;top: 40px;}
    #wherethey {left: -10px;top: 80px;}
    #compare {right: -5px;top: 75px;}
    #explore {left: -15px;top: 115px;}
    #carving {right: -15px;top: 105px;}
    #studies {right: -5px;top: 125px;}
    .banner{ display: flex; }
    #coga__home-page-logo {display: none;}
    #splash { display: none !important }
    .scroll-content {
    overflow-y: hidden !important;
    font-size: 0.5rem;}
}

/*@media (min-width: 992px) {
    img {
        width: 200px;
    }
}*/

/*John phone*/
@media (max-width: 500px) {
    .subscribe-button{ 
        display: block;
        width: 100%;
        }
         .scroll-content {
    overflow-y: hidden !important;  
}
}

/*BASIC*/


.img-wrapper {
    max-height: 160px;min-height: 160px;
    overflow: hidden;
}
.img-wrapper2 {
    max-height: 260px;
    min-height: 260px;
    overflow: hidden;
}

.alert-warning {
    color: #b7901f;
    background-color: #333332;
    border-color: #ffeeba;
    border: 1px dashed;
}
.alert-success {
    color: #61bd76;
    background-color: #373b39;
    border-color: #c3e6cb;
    border: 1px dashed;
}
.font-weight-bold {
    font-size: 28px;
}



#coga__subscribe-div-override {
    border: none !important;
    padding: 0px !important;
    flex-direction: column;
    
}

#coga__home-page-logo {
    position: absolute;
    left: 15px;
    top: 0px;
}

a{
color: #dddddd;
text-decoration: none;

}

input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.donate-button input {
  position: relative;
  top: 0;
  left: 0;
}

label {
  display: block;
  height: 500px;
  width: 40px;
  background: #999;
  text-align: center;
  float: left;
  overflow: hidden;

  -webkit-transition: width 0.5s ease, background 0.5s ease;
  -moz-transition: width 0.5s ease, background 0.5s ease;
  -o-transition: width 0.5s ease, background 0.5s ease;
  -ms-transition: width 0.5s ease, background 0.5s ease;
  transition: width 0.5s ease, background 0.5s ease;
}

label:hover {
  background: #232323;
  color: #fff;
  cursor: pointer;
}

 /* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
*/


/*
// Medium devices (tablets, 48em and up)
// 
// At this point you have overridden Bootstraps rem's and are
// into module based font sizes should you require it. 
//
// I took a while over this change because I felt that there
// is no reason why I cant use a modified scale on another 
// device size. So I did, the headings have now taken on
// "Perfect Fourth" and the dislpay-* has been put to the
// Bootstrap defaults.
//
//------------------------------------------------------------*/
/*@media (min-width: 48em) {
	h1 {
	  font-size: 1.0em;
	}
	h2 {
		font-size: 0.5em;
	}
	h3 {
		font-size: 1.563em;
	}
	h4 {
		font-size: 1.25em;
	}

}*/


#search{
float: left;
margin: 0px 0px 0px 0px;
}

#search label{
color: #111111;
font-size: 11px;
}

.srch input {
background-color: #000; 
font-size: 8px; 
border: 1px solid #999; 
text-transform: uppercase; 
margin: 20px 10px 0px 0px; 
color: #dddddd; 
letter-spacing: 1px; 
padding: 4px 8px;
}

#srchbtn {
height: 20px;
color: #dddddd; 
}

#srchbox {
height: 12px;
width: 206px;
}

input[type=checkbox].css-checkbox {
	display:none;
}

input[type=checkbox].css-checkbox + label.css-label.cb0 {
	padding-left:18px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:10px;
	vertical-align:middle;
	cursor:pointer;

}

input[type=checkbox].css-checkbox:checked + label.css-label.cb0 {
	background-position: 0 -15px;
}

label.css-label.cb0 {
background-image:url(../files/graphics/Maps/legend/checkbox.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type=radio].css-radio {
	display:none;
}

input[type=radio].css-radio + label.css-label.rb0 {
	padding-left:18px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:10px;
	vertical-align:middle;
	cursor:pointer;

}

input[type=radio].css-radio:checked + label.css-label.rb0 {
	background-position: 0 -15px;
}

label.css-label.rb0 {
background-image:url(../files/graphics/Maps/legend/checkbox2.png);
width: 40px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

input[type="text"] {
  display: block;
  background-color: #dddddd;
  width: 210px;
  height: 22px;
  font-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-border-radius: none;
  -moz-border-radius: none;
  -ms-border-radius: none;
  -o-border-radius: none;
  border-radius: none;
  padding: 0px 0px 0px 5px !important;
  border: none;
  -webkit-transition: box-shadow 0.3s, border 0.3s;
  -moz-transition: box-shadow 0.3s, border 0.3s;
  -o-transition: box-shadow 0.3s, border 0.3s;
  transition: box-shadow 0.3s, border 0.3s;
  margin:0px;
}
input[type="text"]:focus {
  background-color: #eeeeee;
  outline: none;
  color: #555;
  padding-left:5px;
}

button {
  color: #eeeeee;
  background: #654669;
  border: none;
  width: 220px;
  height: 20px;
  padding:0px;
  outline: none;
}

.ui-menu .ui-menu-item {
      font-size: 14px;
        background-color: #dddddd;
}

.ui-autocomplete-input {
          padding-left: 0px 0px 0px 5px;

}

/*	.top-nav-menu {
			display: block;
			width: 100%;
			height: 33px;
			clear: both;
			background-color: #069;
			margin-bottom: 5px;
		}

		
	.search-bar {
			width: 210px;
			float: left;
            padding: 5px 5px;
            padding-right:0px;
            margin-right: 10px;
		}*/

#footer{
width: 100%;
color: #ddd;
background-color: #444444 !important;
/*text-align: center;*/
padding: 5px 0px 0px 0px;
margin-top: 5px;
height: 33px;
float: left;

}

#footer a{
color: #ddd;
text-align: center;
padding: 5px 0px 0px 0px;
margin-top: 5px;
letter-spacing: normal;
vertical-align: top;
}