* {padding: 0; margin: 0; border:0}
.ringing-totals td a,header .cvrs,.home a#ste,.general ul,.desc ul li,.desc ul,footer div.col a,input,select,textarea,article,aside,div,figure,form,h1,h2,h3,h4,h5,p,header,main,nav,section,span,nav,nav ul,nav ul li, nav ul li a,header #topLinks a{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;position:relative;float:left;display:inline-block;width:100%;max-width:100%}
html, body {height: 100%;}

/* color white */
nav a{color:#fff}


.circle{border-radius: 50%;display: inline-block;text-align:center;transition:.3s;}

body{display: flex;flex-direction: column;font-family: 'Open Sans', sans-serif;font-size:15px;font-weight:400;line-height:22px;color:#555}
main,section,article{display:block;width:100%;}
main{flex: 1 0 auto;width: 100%;float:left;z-index:100;margin-bottom:40px}

hr{margin-bottom:25px !important;border-bottom:1px #ccc dotted  !important}
h1{font-weight:700;font-size:24px;margin-bottom:10px;line-height:30px}
h2,h3{font-weight:600;font-size:20px;margin-bottom:7px}
a{color:#555;text-decoration:none;width:auto;transition:0.3s}
button{transition:.4s;cursor:pointer;color:white;}
button.icon{padding-left:55px !important;}
button.icon i{left:18px;font-size:22px;position:absolute;top:0px;line-height:46px}
button.standard {
    font-size: 16px;
    height: 46px;
    line-height: 46px;
    font-weight: 600;
    padding: 0 20px;
    float: none;
	background:#8e124e
}

.btn-wrap {
    text-align: center;
    margin-top: 20px;
}
ul.general {padding: 0 20px 20px 30px}
input{outline:none}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0 30px white inset}
.container {display:block;width:100%;margin: auto; float: none;padding: 0 25px;max-width:100% !important;}
.container-l {width:1600px;}
header .container,footer .container{width:100%;padding:0}
 header .inner {
    padding-right: 10px;
    background: #669966;
    float: left;
    margin: 0 !important;
    border-radius: 30px 0px 0 30px;
}

header .cvrs {
    /* border-radius: 30px 0px 0 30px; */
    padding: 0 25px 0 70px!important;
    background: #006666;
    color: #fff;
    float: left;
    font-weight: 600;
    width: auto;
    height: 62px;
    line-height: 57px;
    font-size: 26px;
	position:relative;
	display:block;
	float:left;
}
header a.cvrs img{position:absolute;float:none;top:5px;left:7px;transition:.6s;}
header a.cvrs:hover{background:#0e334f}
header a.cvrs:hover img{transform: rotate(360deg);}
header a.cvrs span{display:inline;float:none;width:auto}

.btn{display: flex;align-items:center;float:left;transition:.3;padding:0 20px;height:44px;background:#336699;color:#fff;font-size:16px;border-radius:4px}
.btn:hover{background:#669966 !important}

.reports .general p:first-of-type{margin-bottom:10px}
.reports .general div.wrap .btn:first-of-type{background:#cc6600;}
.reports .general div.wrap .btn{margin:0 20px 20px 0}

.reports .general div.wrap ul{margin:5px 0 18px}
.reports .general div.wrap{margin-bottom:10px}

input[type="text"]{height:40px;line-height:40px;padding:0 10px;border:1px #ddd solid}
.field-wrap{width:48%;margin-bottom:10px}
.field-wrap span:first-of-type{margin-bottom:4px;}
.field-wrap span.field-msg{position:absolute;float:none;top:0px;right:0px;width:auto;font-size:12px;color:red}
.pop .btn-wrap{text-align:center;margin-top:20px}
.pop h2{font-size:20px;font-weight:600;}
.pop button{float:none;margin:auto;display:block}
.pop i.close {z-index:1200;position:absolute;float:none;top:-20px;right:-20px;color:#333;font-size:22px}
.pop {
	display:none;
    border-radius: 6px;
    box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .2);
    background-color: #fff;
    float: none;
    padding: 30px;
    z-index: 1100;
	position:absolute;float:none;top:0px;left:0px;
	cursor:pointer
}

.type-of-membership h1{margin-bottom:25px}
.type-of-membership table{margin:5px 0 30px}

#pop-bg{display:none;background:#000;opacity:0.3;position: absolute;z-index:1000;height:100%;width:100%}

.general h1{margin-top:30px}
.constitution h1{margin-bottom:20px}
.general ul li{margin-bottom:2px}
.general ul {
    padding-left: 30px;
    margin-bottom: 20px;
}
.general a{font-weight:600;}
.general h3{font-size:16px;margin-bottom:3px;color:#777}
.general p{font-size:16px;line-height:26px}
.general img.top{max-width:100%;margin:5px 0 20px}

nav a:hover,nav a.active{color:#ffff99 !important;}
nav{height:62px;width:100%;padding-right:10px;}
nav ul{list-style:none;height:100%;width:auto;float:right;}
nav ul li{height:100%;line-height:100%;width:auto; display: flex;align-items: center;justify-content: center;}
nav ul li a{height:16px;line-height:16px;width:auto;font-weight:400;font-size:15px;margin-right:18px;padding-right:20px;border-right:1px #fff solid}
nav ul li:nth-of-type(8) a{margin-right:0}
nav ul li:last-child{float:right}
nav ul li:last-child a{margin-right:0;padding:0;border:0}
nav li.sub{position: relative;}
nav li ul {
	position: absolute;
	top: 62px;
	left:-20px;
	height: auto;
	float: none;
	background: #006666;
	width:204px;
	z-index: 1000;
	display:none;
	max-width:none
}
nav li ul div{width:48%}
nav li ul div:last-of-type{float:right;}
nav li ul li,nav li ul a{width:100%;}
nav li ul li{line-height:normal;height:auto;}
nav li ul a{line-height:normal;height:auto;color:#fff;padding:10px 20px !important;margin:0;border-right:none;font-weight:400;border-bottom:1px #efefef solid}
nav li ul span{padding:0 10px 10px 10px;font-weight:600;}
nav li ul li a:hover{background:#669966;color:#fff !important}

.steWrap{text-align:center;margin-top:40px}
.home a#ste{margin:30px auto;border:1px #E0E0E0 solid;width:500px;padding:30px;border-radius:8px;display:block;text-align:center;float:none}
.home a#ste span{transition:.3s;padding-top:30px;font-size:20px;float:none;line-height:26px}
.home a#ste img{border-radius:8px;transition:.6s;}
.home a#ste:hover img{transform: rotate(-360deg);}
.home a#ste:hover span{color:#fff}
.home a#ste:hover{background:#333}
.home{padding:30px 75px 0}
.home .left {width: 70%;}
.twitterWrap {
    width: 27%;
    float: right;
	padding: 20px !important;border:none !important
}

.home .left h1{font-size:28px;margin-bottom:20px}
.home .left p{font-size:16px;}
a{color:#4795cf;font-weight:600;}
.home .left a:hover,.contact .col a:hover{color:#006666}
.home .left .block{margin-top:10px;}

#hero{height:550px;background:url(../images/hero-reed-warbler.jpg) top 0 center;margin-bottom:30px}
#hero .inner{position:absolute;float:none;top:170px;padding-left:70px;color:#fff;max-width:100%}
#hero .inner h1{font-size:40px;margin-bottom:20px}
#hero .inner p {
	font-size: 26px;
	font-weight: 600;
	width: 400px;
	line-height: 36px;
}

.nests div span{text-align:center}
.nests div{width:100%;}
.nests div img{width:100%;float:left;margin-bottom:8px}
.nests{
		display: grid;
		grid-template-columns: repeat(5, 18%);
		row-gap:20px;
		column-gap:2%;
}

#carousel{height:100px}
#carousel div.wrap{height:100px}
#menu-phone{display:none}
p{margin-bottom:20px;line-height:26px}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active {background: #C3CF21 !important}
.bx-wrapper .bx-pager.bx-default-pager a {background: #5E6971 !important}
.bx-wrapper .bx-viewport {left: 0 !important;box-shadow:none !important; border:none !important; }
.bx-wrapper .bx-pager.bx-default-pager{text-align:center} 
.bx-wrapper {margin: 0 auto !important}
.bx-wrapper li{margin: 0 !important}
.bx-wrapper .bx-pager .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {float:none;width:auto}
.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {position: absolute;bottom:35px !important;width: 100%;}
.bx-wrapper .bx-pager.bx-default-pager a {background: #fff !important;width: 12px; height: 12px;margin: 0 20px 0 0  !important;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px }
.bx-wrapper .bx-pager.bx-default-pager a.active {background: #c7b308 !important}

#breadcrumbs{margin-top:20px;}
#breadcrumbs a,#breadcrumbs li,#breadcrumbs span{display:inline-block;float:left;font-size:14px;width:auto}
#breadcrumbs span.chevrons{margin:0 5px;width:auto;}
#breadcrumbs span.name{color:#666;}

.block{
    padding: 30px;
    border-radius: 8px;
	background:#F8F8F8
}
.home .block img{width:70%}
.home .block h2{margin-bottom:30px;background:#eee;padding:15px}

.contact h1{margin-bottom:20px}
.contact .wrap {display: flex;justify-content: space-between;margin-top:10px;width:80%;}
.contact .col {
    width:49%;
	float:none;
}

.contact .col a{
    font-weight: 400;
    padding-left: 30px;
    position: relative;
    float: left;
    width: 100%;
    margin-bottom: 20px;
	font-size:16px;
    webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
}

.contact .col a i{
    position: absolute;
    top: 1px;
    left: 0px;
    line-height: inherit;
    font-size: 20px;
    color: #333;
}

#map_canvas{height:500px !important}
.check-wrap{margin-top:10px;cursor:pointer}
.check-wrap input{width:30px;height:30px;float:left;margin-right:10px;border:none}
.check-wrap label{line-height:30px;height:30px;float:left;font-weight:600;}

footer{display:block;flex-shrink: 0;}
footer .inner{padding:20px;background:#006666}
footer div.col{width:300px;padding:0 40px;border-right:1px #fff solid}
footer *{color:#fff}
footer div.col h4{font-size:16px;margin-bottom:10px}
footer div.col a{font-size:14px;margin-bottom:10px}
footer div.col:first-of-type{padding-left:0}
footer div.col:last-of-type{padding-right:0;border:none}
footer div.col:nth-of-type(4){width:21%}
footer div.address{line-height:27px}
footer div.address div{margin-bottom:23px}
footer div.address h4{margin-bottom:4px}
footer div.address a{margin:0 0 2px}
footer div.fsc img{position:absolute;float:none;top:45px;left:40px;}
footer div.fsc div{float:right;width:90px;font-size:13px;line-height:18px;text-align:center;margin:20px 0 55px}

.hide{display:none !important}
.pointer{cursor:pointer}
.right{float:right !important}

::-webkit-input-placeholder{color:#999;font-weight:400;font-size:14px}
:-moz-placeholder{color:#999;opacity:1;font-weight:400;font-size:14px}
::-moz-placeholder{color:#999;opacity:1;font-weight:400;font-size:14px}
:-ms-input-placeholder{color:#999;font-weight:400;font-size:14px}	
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; } /* FF 4-18 */
input:focus::-moz-placeholder { color:transparent; } /* FF 19+ */
input:focus:-ms-input-placeholder { color:transparent; } /* IE 10+ */
textarea:focus::-webkit-input-placeholder { font-weight:400;color:transparent; }
textarea:focus:-moz-placeholder { font-weight:400;color:transparent; } /* FF 4-18 */
textarea:focus::-moz-placeholder {font-weight:400; color:transparent; } /* FF 19+ */
textarea:focus:-ms-input-placeholder { font-weight:400;color:transparent; } /* IE 10+ */

textarea{
    height: 200px;
  
    padding:10px;
    border: 1px #ddd solid;
}

.fwl{width:100%}

table {border-collapse: collapse;border-spacing: 0;width:48%;float:left;margin-bottom:20px}
table:nth-of-type(even){float:right;}
td img{float:none !important}
td ul{margin:0 !important}

table tr:first-of-type th {
    background: #efefef;
  
}

tr:hover td {
   background: #F8F8F8;
}

td {transition:.2s;}

th, td {
    padding: 8px;
    vertical-align: top;
    border: 1px #ddd solid;
    text-align: left;
}

#message{width:40%;left:30%;top:20px;}

@media only screen and (max-width:1550px) {
		#hero {
			background-position:top 0 right -350px;
		}
	}
	
	@media only screen and (max-width:1320px) {
		#hero {
			background-position:top 0 right -450px;
		}
		
		.nests{

			grid-template-columns: repeat(4, 23%);
		
		}
	}
	
	@media only screen and (max-width:1180px) {
		#hero {
			background-position:top 0 right -550px;
		}
		
		.contact .wrap {width:100%;}
		
		.home .block img {width: 100%;}
		
		#menu-phone{display:inline;position:absolute;right:15px;top:15px;z-index:400;cursor:pointer;color:white;font-size:32px}	
		
		header .inner,nav{padding-right:0}
		nav ul {
			position: absolute;
			top: 62px;
			right:0;
			height: auto;
			float: none;
			background:#669966;
			width:100%;
			z-index: 1000;
			display:none
		}
		nav ul li,nav ul li a{padding:0;width:100% !important;border-right:none;line-height:24px;height:auto}
		nav ul li a{margin:0;border-top:1px white solid  !important;padding:15px 0 !important;font-size:20px;text-align:center  !important} 
		nav ul li:last-child a {border-bottom:1px white solid  !important;}
		nav ul a:hover{background:#666}
		
		nav li.sub ul *{border:0 !important}
		nav li.sub ul {
			width:100%;left:0;float:left;position:relative;top:auto;right:auto
		}
		nav li.sub{display:block}
		nav li.sub li,nav li.sub a{height:auto;line-height:22px;}
		nav li.sub a{padding:10px 0;border-bottom:1px #fff solid !important}
	}
	
	@media only screen and (max-width:1080px) {
		#hero {
			background-position:top 0 right -650px;
		}
		div.container{margin:0;float:left;width:100%;padding:0 20px}
		
		.nests{

			grid-template-columns: repeat(3, 32%);
		
		}
	}
	
	@media only screen and (max-width:980px) {
		#hero {
			background-position:top 0 right -750px;
		}
		.contact .wrap {display:block}
		.contact .col{width:100%;float:left;margin-bottom:30px}

		#hero {
			background-position:top 0 right -800px;
		}
		
		
		div.container-np{padding:0}
		
		#carousel{display:none}
		header{height:auto}
		body{background:white}
		table {width:100%;}
		table:nth-of-type(even){float:left}
		header .cvrs {width:100%}
		.home .left {
			width: 60%;
		}
		.twitterWrap {
			width: 35%;
			float: right;
			padding: 10px !important;
			border: none !important;
		}
		.block {padding: 15px;}
	}
	@media only screen and (max-width:800px) {
		#hero {
			background-position:top 0 right -700px;
		}
		
		#hero .inner{top:50px;}
		#hero .inner p {width: 500px;}
		
		#message{width:94%;left:3%;}
		
		.nests{

			grid-template-columns: repeat(2, 49%);
		
		}
	}
	
	@media only screen and (max-width:630px) {
		#hero {
			background-position:top 0 right -800px;
		}
		#hero .inner{padding:0 70px}
		#hero .inner p {width: 100%;}
		.twitterWrap,.home .left {
			width: 100%;
		}
	}
	
	@media only screen and (max-width:560px) {
		#hero{height:300px;background:url(../images/hero-reed-warbler2.jpg) top 0 center}
		#hero .inner{top:20px;padding:0 20px }
		#hero .inner h1{font-size:30px;margin-bottom:10px}
		#hero .inner p {
			font-size: 20px;
			line-height: 28px;
		}
		
		.field-wrap { width:100%;}
		
		header .cvrs {font-size:18px}
		#menu-phone{right:10px}
	}
	
	
	@media only screen and (max-width:400px) {
		table{box-sizing: border-box;webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
		td {padding: 4px;}
		.ringing-course {padding:0 !important}
		.ringing-course p,.ringing-course h1{padding:0 15px !important}
		
		.nests{

			grid-template-columns: repeat(1, 100%);
		
		}
	}
	
	@media only screen and (max-width:380px) {
		header .cvrs {font-size:15px}	
	}
	
	@media only screen and (max-width:340px) {
		header .cvrs {font-size:20px}
	}
	@media only screen and (max-width:330px) {
		
		#hero .inner h1{font-size:24px;line-height:30px}
		#hero .inner p {
			font-size: 18px;
			line-height: 26px;
		}
	}
