@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Open+Sans:wght@300;400;600;700&display=swap');

:root {
	--teal: #014582;
	--blue: #01456a;
	--red: #bc3225;
	--inner-width: 900px;
}

body, html{width:100%; height: 100%; margin: 0px; padding: 0px; box-sizing: border-box; color:var(--dark-grey); }
body{background-color: #fff; font-size:16px; font-family: 'Open Sans', sans-serif;}

div{background-repeat: no-repeat; background-position: center; background-size: cover; position: relative}

h1, h2, h3{font-weight:normal; line-height: normal; font-family: 'Amiri', serif; color:var(--teal)}
h1{font-size:4rem; padding: 0px; margin: 0px; text-transform: uppercase}
h2{font-size:30px; text-transform: uppercase}
h3{font-size:24px}
h4{font-size:16px}

h1::first-letter {
	font-size:1.3em;
}

a{text-decoration: none; color: var(--red); transition:all 200ms ease}
a:hover{color:var(--teal)}
img{max-width: 100%}

a, a:active, a:focus{outline: none;}

input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password]{border:1px solid #7F959B; padding: 8px; color:#7F959B; margin: 5px 0}

select{padding:10px}
textarea{font-family: 'Open Sans', sans-serif;}
main{min-height: 600px; line-height: 32px}

hr{border:0px; margin: 40px 0; border-bottom:2px solid var(--red); clear: both}

#modal{display: none; justify-content: space-around; align-items: center; background: rgb(255,255,255,0.7); position: fixed; left:0; top:0; width:100%; height: 100vh; z-index: 1000; backdrop-filter: blur(10px)}
#modal > div{border-radius:10px; width: 100%; max-width: 700px; min-height: 300px; padding:30px; background-color: #fff; box-shadow:1px 1px 20px rgb(0,0,0,0.6); text-align: center; max-height: 100vh;  overflow: auto}
#modal h2{font-size:34px; color: #333; padding: 0; margin: 0}
#modal h3{font-size:26px; padding: 0; margin: 0 0 15px; text-transform: uppercase}
#modal hr{border:0; border-bottom: 5px solid #333; margin: 0 auto 15px; max-width:200px}


.greybox{padding:15px 30px; background-color: #f8f8f8; border-radius:10px}

.pagination{max-width:1080px; margin: 60px auto}
.pagination a, .pagination .current{display:inline-block; padding: 2px 16px; background-color: #fff; border-radius:4px}


.flex{display:flex; justify-content: center; align-items: center}
.flex > div{flex-grow: 1}
.center{text-align: center}

.fixedwidth{max-width:1200px; width:96%; margin: 60px auto}

.textblock{max-width:1000px; margin: 60px auto}

/* Buttons */
.button{background-color:var(--teal); display: inline-block; padding: 10px 40px 14px ; transition: background 0.3s ease; font-size:22px; color:#f7f4ec; position: relative; cursor:pointer; line-height: normal; border:0px; border-radius:8px}
.button:hover{background-color: var(--red) !important; color: #fff !important}

.bookButton{margin: 30px 0 0}

#post-28{border: 1px solid var(--teal); padding: 30px}
#post-28 label{display: block}

.memBack{float:right; padding: 30px 0 0 15px}

.menubutton{display:block; margin: 5px auto 30px; padding: 20px; border:2px solid #707070; text-transform: uppercase; letter-spacing: 3px; font-size:18px; max-width: 200px; transition:all 300ms ease}
.menubutton:hover{background-color: #707070; color: var(--tan); transform:scale(1.06)}

.errorfield{border:1px solid red}

.contentTextBlock{text-align: center; padding: 0px}

.heroOuter{overflow:hidden}

.hero{background-color: #efefef; display: flex; justify-content: center; align-items: center; min-height: 300px; max-height:500px; 
	background-size: cover; transition:all 4000ms ease; border:0px; z-index: 1}
.hero > div{text-align: center}
.hero h1{color: #F8F6F4; transition:all 3000ms ease; opacity: 1}
.deep{min-height: 683px; max-height:683px;}

.heroOuter.loaded .hero{transform:scale(1.1)}
.hero h1.loaded{transform:scale(0.4); opacity:0}

.herovideo{ background-color: var(--tan); background-size: cover; transition:all 2s ease; position: relative; overflow: hidden; max-height: 500px; margin-bottom: 10px}
.herovideo iframe{position: absolute; top:0px; left:0px; width:100% !important; z-index: 1}
.heroh1{border-top:3px solid var(--red); display: flex; font-size:30px; justify-content: center; align-items: center; height: 100%; width:100%; position: absolute; top:0px; left:0px; z-index: 4; color: #F8F6F4; transition:all 2s ease-out; opacity: 1}
.herovideo h1{text-align: center; color:#F8F6F4}

	
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	background-color: #000
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#loginform{text-align: center; background: #f8f8f8; border-radius:10px; margin:15px auto; padding: 30px}
#loginform p{}
#loginform p:nth-last-of-type(n+3){}
#loginform p:nth-last-of-type(n+3) label{display: inline-block; width:220px; text-align: right}

#sitetitle{display: flex; justify-content: space-between; align-items: center; max-width:var(--inner-width); margin: 15px auto; font-family: 'Amiri', serif;}
#sitetitle > div{flex-grow:1; text-transform: uppercase; width:100%}
#sitetitle > div:nth-of-type(1){max-width:200px; text-align: center}
#sitetitle > div:nth-of-type(2){font-size:30px; color: var(--teal)}
#sitetitle > div span::first-letter {font-size: 120%; }
#sitetitle > div span{display: inline-block}
#sitetitle > div img{width: 140px}

/* main nav */
#masthead{text-align: center; font-size:14px; font-weight: 700; z-index: 5}
#masthead > ul{list-style: none; position:relative; padding: 0px; margin: 0px; border-radius:6px; display:inline-flex; margin: 0 auto; border:1px solid #ccc; 
box-shadow: 2px 2px 2px 0px rgba(0,0,0, 0.4); transform: translate(0px, 15px);}
#masthead > ul > li{display: inline-block; padding:0px; margin:0px; border-right:1px solid #000; position: relative}
#masthead > ul > li > a{display: block; color: #000; padding: 8px 15px; margin: 0px; color:#3c4684}
#masthead > ul > li > a:hover{background-color: rgb(255,40,0, 0.3); margin: 0px}
#masthead > ul > li:first-of-type > a{border-top-left-radius:6px; border-bottom-left-radius:6px}
#masthead > ul > li:last-of-type > a{border-top-right-radius:6px; border-bottom-right-radius:6px}
#masthead > ul > li:last-of-type{border: 0px; }

/* sub */
#masthead ul > li > ul{list-style:none; padding: 0px; margin:0px; position: absolute; top:37px; left:0px; display: none; background-color: #efefef; 
	border-top-left-radius:0px; border-top-right-radius:0px; min-width:200px; border:1px solid #ccc; background-image: none}
#masthead ul > li > ul > li{border: 0px; display: block; width:100%}
#masthead ul > li > ul > li a{border-radius:0px; padding: 8px 10px; display: block; text-align: left; color: var(--teal); transition:all 300ms ease}
#masthead ul > li > ul > li a:hover{color: var(--red); background-color: #ccc}

#masthead ul > li:hover > ul{display: block}

#masthead ul{
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top,  #ffffff 0%, #ffffff 50%, #e5e5e5 52%, #f2f2f2 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #ffffff 0%,#ffffff 50%,#e5e5e5 52%,#f2f2f2 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#e5e5e5 52%,#f2f2f2 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f2f2',GradientType=0 ); /* IE6-9 */
}



#mobnavbutton{border-radius:2px; width:26px; height: 30px; position: absolute; top:15px; right:15px; cursor:pointer; display:none; z-index: 50; font-size:18px}
#mobnavbutton > div{margin: 5px 0; border:0px; border:2px solid #000}

#mobnav{text-transform: uppercase; background-color: #fff; color: #3A4245; position: fixed; top:0px; left:0px; z-index: 80; display: none;  width:100%; height: 100%; z-index: 1000}
#mobnav ul{list-style: none; margin: 0px; padding: 0px}
#mobnav ul > li{padding: 0px; margin: 0px; display: block; position: relative}
#mobnav a{display:block; padding: 10px; cursor:pointer; text-transform: uppercase; text-align: center; letter-spacing: 4px; border-top:1px solid #ccc}

#mobnav ul > li  ul{display: none}
#mobnav ul > li  ul > li{display:block}
#mobnav ul > li  ul > li > a{background-color: #F7F4EC}
	
#mobnav a i{position: absolute; right:60px; top:15px; transition:all 100ms ease}

#mobnav .logolink{border:0px}
#mobnav img{position: absolute; top:15px; left:15px; width:55px; height: auto}


#mobNavMasthead{display:flex; justify-content: space-between; align-items: center; padding: 15px 0}
#mobNavMasthead > div{flex-grow:1}
#mobNavMasthead > div:first-of-type{width:100px; height: 67px; background-size: contain; background-position: center left 51px; background-repeat: no-repeat; background-image: url(/wp-content/uploads/2020/06/logo-mv-top.png); margin-top: 3px}
#mobNavMasthead > div:last-of-type{padding: 0 36px 0 0; text-align: right}
#mobNavMasthead i{font-size: 30px; color: #000}

.memMenu{display: flex; justify-content: space-around; align-items: stretch; flex-wrap: wrap}

.memMenu > div{width:100%; transition:all 200ms ease; cursor:pointer; max-width: 30%; height: 100px; background-color: crimson; color:#fff; text-shadow:0px 0px 2px rgb(0,0,0,0.3); font-size:28px; padding: 0; border-radius: 10px; margin:15px 0; position: relative; font-family: 'Amiri', serif; box-shadow:2px 2px 6px rgb(0,0,0,0.4); border:2px solid #fff; display: flex; align-items: center; justify-content: space-around; background-image: url(https://rescue-institute.org/wp-content/uploads/2021/12/ISTR-Badge-silver-screen-250x328.png); background-size: 60px; background-repeat: no-repeat; background-position: left 15px center}

.memMenu > div:nth-of-type(2){background-color:darkorange}
.memMenu > div:nth-of-type(3){background-color:forestgreen}
.memMenu > div:nth-of-type(4){background-color:royalblue}
.memMenu > div:nth-of-type(5){background-color:rebeccapurple}
.memMenu > div:nth-of-type(6){background-color:deeppink}
.memMenu > div:hover{transform:scale(1.02)}
.memMenu > div a{color:#fff; text-transform: uppercase; display:block; width:100%; text-align: center; padding: 30px 10px 30px 70px}


.newslist{display: flex; flex-wrap:wrap; justify-content: space-around; align-items: stretch; margin: 0 auto 60px; max-width: 1100px}
.newslist > div{width:100%; min-width:31%; max-width: 31px; margin: 0 0 50px}
.newsPanel h2{color:#545b5e}
.newsInner{min-height:320px; line-height: 24px}

.newsbuttonwrap{border-top:1px solid var(--teal); padding: 10px 0; margin: 30px 0 0}
.newsThumb{display:block; padding-bottom: 100%; background-color: var(--teal); min-height: 100px;background-repeat: no-repeat; background-position: center; background-size: cover}
.newsThumb img{max-width:100%; max-height:100%; width:100%; height:100%; display:none}
.thedate{color:#7F959B; text-transform:uppercase; padding: 0 0 20px; font-weight:normal; font-size:20px; letter-spacing: 3px}

.newsbody{max-width:958px; margin: 0 auto}
.productbody{max-width:1200px; margin: 0 auto; position: relative; border-top:1px solid #fff}

footer{background-color: var(--blue); color:#fff; border-top:4px solid var(--red); padding: 10px}
footer a{color: #fff}
footer ul{font-size:14px}
footer h3{color:#fff; padding: 0 0 10px; margin: 0 0 0 20px; font-family: 'Open Sans', sans-serif; font-size:1.6rem; font-weight:700; color:rgb(255, 255,255, 0.6)}

#footerInner{max-width: 1200px; margin: 40px auto 0}
#footerInner > div{text-align:center}
#footerInner > div img{max-width: 80px}
#footerInner > div:first-of-type{text-align: center}
#footerInner > div:last-of-type{text-align: center !important; font-size:1.5rem; padding: 15px 10px 0}
#footerInner a{transition: all 300ms ease}
#footerInner a:hover{color:var(--red)}

#credit{display:flex; justify-content: center; align-items: center; margin: 30px auto 20px; max-width: 1200px; font-size:12px; color: rgb(255,255,255,0.6)}
#credit > div{flex-grow:1; padding: 10px}
#credit > div:first-of-type{}
#credit > div:last-of-type{text-align: right; padding-right: 10px}
#credit a:hover{color:#fff; opacity: 0.5}

.threeBox{display: flex; align-items: stretch; color: #fff; margin: 0px 0 0}
.threeBox > div{flex-grow: 1; flex-basis: 33%; background-size: cover; background-position: center; padding: 20px 30px 30px; position: relative; box-sizing: border-box; overflow: hidden}
.threeBox > div:nth-of-type(2){margin: 0 10px}
.threeBox h2{margin: 0px; padding: 0px; height: 80px; max-width: 50%; font-size:30px; color: #fff}
.threeBox p{font-size:14px}

.threeBox > div:hover .evCopy{right:0px}

.fourBox{display: flex; align-items: stretch; justify-content: space-between; color: #fff; margin: 30px auto 10px; flex-wrap: no-wrap; max-width: 1200px}
.fourBox > div{flex-grow: 1; background-size: cover; background-position: center; padding: 20px 30px 30px; position: relative; max-width:285px; min-width:285px; height: 400px; cursor:pointer}
.fourBox > div:nth-of-type(3) .button{width:100%}

.fourBox .button{position: absolute; bottom:0px; right:0px}

.twoBox{display: flex; align-items: stretch; margin: 0px; max-width:1200px; margin: 0 auto; flex-wrap:wrap}
.twoBox > div{flex-grow:1; min-height: 500px; padding: 60px 90px 60px; flex-basis: 50%; position: relative}
.twoBox > div:first-of-type{}
.twoBox h2{padding-top: 0px; margin-top: 0px; color: #3A4245}
.twoBox p{}

.bookingform{text-align: center; color: #fff; padding: 15px; z-index: 1; color:#F8F6F4}
.bookingform h2{font-size:38px; color:#F8F6F4}

.teamlist{display:flex; align-items: stretch; justify-content: space-between; flex-wrap: wrap; max-width: 1012px; margin: 60px auto}
.teamlist > div{flex-basis:33%; max-width: 280px; margin: 0 0 60px}
.teamlist h3{font-size:20px; color: #3A4245 !important; padding: 0px; margin: 0px}
.jobtitle{text-transform: uppercase; font-size: 12px; color:#3A4245; letter-spacing: 3px; line-height: normal; padding-top: 10px}
.teamexcerpt{color:#000000; font-size: 14px; line-height: 22px; padding: 15px 0}
.teamThumb{padding-bottom: 100%; background-size: cover; margin: 0 auto 10px; display:none}

.teamlist .flex{font-size:14px; font-weight:600}
.teamlist .flex > div:last-of-type{font-size: 26px; text-align: right}
.teamlist i:hover{opacity:0.8}

.pagelinks{width:100%;; max-width:1080px; margin: 0px auto; display:block; padding: 30px 0}
.pagelinks > a{display: inline-block; border:1px solid #efefef; padding: 2px 10px; border-radius:3px; transition:all 200ms ease}
.pagelinks > a:hover{background-color: var(--teal); color: #fff; border-color:var(--teal)}


/* cookiebar */
#cookiebar{padding: 20px; box-sizing: border-box; margin: 0px; display: flex; position: fixed; bottom:0px; left:0px; justify-content: space-between; align-items: center; font-size:14px; background: #7f959b; color:#fff; max-width: none; width:100%; z-index: 1999}
#cookiebar > div{flex-grow:1; width:100%}
#cookiebar > div:first-of-type{padding-right: 20px; min-width:80%; max-width:90%}
.cookiebutton{padding: 15px; background:#F2ECE4; color:#000; cursor:pointer; font-weight:700; text-align: center; transition:all 300ms ease}
.cookiebutton:hover{color:#fff; background: #333}

.grouplist{display: flex; justify-content: flex-start; align-items: stretch; flex-wrap:wrap}
.grouplist > div{border:1px solid black; margin: 10px; width:100%; max-width: 380px; position: relative; cursor:pointer; transition:all 300ms ease}
.grouplist > div:hover{transform:scale(1.03)}

.grouplist .thumb{padding-bottom: 70%; background: #efefef; background-position: center; background-size: cover}
.grouplist .thumb a{display: block; position: absolute; top:0px; left:0px; width:100%; height: 100%}
.grouplist .title{padding: 7px 0 5px 20px; background-color: rgb(0, 0, 0, 0.8); color:#fff; position: absolute; bottom:0px; left:0px; width:100%; font-family: 'Amiri', serif; font-size:18px}

.groupthumb{width:100%; max-width:45%; margin: 0 0 30px 30px; float:right}

.post-navigation{background: #efefef; border-radius:10px; clear: both; padding: 5px 30px}
.post-navigation h2{display: none}
.post-navigation a{color:var(--red); transition:all 300ms ease}
.post-navigation a:hover{color:var(--blue)}

.nav-previous{display: inline-block; width:50%}
.nav-next{display: inline-block; width:50%; text-align: right}

.contactflex{display: flex; justify-content: space-between; align-items: stretch}
.contactflex > div{flex-basis:50%}
.contactflex > div:first-of-type{padding: 0 30px 0 0}

.contactflex input{width:90%; padding: 10px}
.contactflex textarea{width:90%; padding:10px}
.contactflex input[type=submit]{background:var(--blue); color: #fff; font-weight:700; border:0px; max-width: 140px}
.contactflex h3{font-size:30px; margin: 0px; padding: 0px}
.contactflex label{padding: 0px; margin: 0px; height: auto}

.memlibList > div{display: flex; justify-content: space-around; align-content: center; border:2px solid #ddd; border-radius:5px; padding: 5px 15px; margin-bottom: 15px}
.memlibList > div > div{width:100%}
.memlibList > div > div:first-of-type{max-width:90px; padding-top: 10px}
.memlibList > div > div:last-of-type{padding: 0 0 0 30px}
.memlibList h3{margin: 0px; padding: 0px; font-size:24px}

.dlbutton{display:inline-block; padding:3px 20px; background: var(--blue); color:#fff; border-radius:4px; margin: 10px 0}
.dlbutton:hover{color:#fff; background: var(--teal)}
.memlibList .desc{border-radius:5px; background-color: #f8f8f8; padding: 15px}
.memlibList .author{font-size:16px}

.memFormUpload{background: #f8f8f8; padding: 30px; text-align: center; border-radius:10px}


.libButtons{display: flex; justify-content: space-between; align-content: stretch; flex-wrap:wrap; padding: 5px; border-radius:4px}
.libButtons > div{width:100%; max-width: 23%; border:1px solid #ccc; margin: 0 5px 20px; cursor:pointer; background: #f8f8f8}


.memHeader{display: flex; justify-content: space-between; align-content: center !important; width:100%; max-width: 600px; margin: 0 auto; background: rgb(0,0,0,0.5); border-radius:10px}
.memHeader > div{padding: 15px; width:100%; text-align: left}
.memHeader > div:first-of-type{max-width:150px; text-align: center}
.memHeader h2, .memHeader h3{color:#fff; margin: 0px; padding: 0px; text-transform: none}

.eventslist{margin: 30px 0 0}
.eventslist > div{border-bottom:3px solid #ccc; padding: 15px 0 50px; position: relative; margin: 0 0 30px}
.eventslist > div:last-of-type{border:0}
.eventslist .logo{width:200px; height: 120px;  float:right; margin: 0 0 30px 30px}
.eventslist .logo img{object-fit:contain; object-position: center; width:100%; height: 100%}
.eventslist h2{padding: 0; margin: 0 0 30px; line-height: 1em; font-size:2.4em}

.pricebox{background: #f8f8f8; border-radius:5px; border: 1px solid var(--teal); padding: 10px 10px 10px 15px; display:block; max-width:300px; margin: 10px 0; font-size:2rem}
.pricebox strong{color: var(--teal)}
.pricebox span{font-size:1.4rem; display: block}

.bookflex{display: flex; justify-content: space-around; align-items: center; border-bottom:1px solid #ccc}
.bookflex > div{width:100%; padding: 10px 10px 10px 0px; text-align: left}
.bookflex > div:nth-of-type(1){max-width:180px}
.bookflex:last-of-type{border:0}
.bookflex input[type=text], .bookflex input[type=email]{width:100%}
.bookflex input[type=submit]{background:var(--blue); border:0; color: #fff; padding: 8px 15px; border-radius:4px; transition:all 200ms ease}
.bookflex input[type=submit]:hover{background:var(--red)}
.bookflex input[type=button]{background:#666; border:0; color: #fff; padding: 8px 15px; border-radius:4px; transition:all 200ms ease}
.bookflex input[type=button]:hover{background:#333}

.eventBanner{width: 100%; max-width:728px; height: 90px; background-color: #f8f8f8; margin: 15px auto; box-shadow:2px 2px 3px rgb(0,0,0,0.3)}
.eventBanner img{object-fit: cover; object-position: center; width:100%; height: 100%}


.jobslist{}
.jobslist > div{border-bottom: 2px solid var(--blue); padding: 30px 0}
.jobslist > div:last-of-type{border:0px}
.jobslist h2{padding:0; margin: 0}
.jobslist h3{padding:0; margin: 0}
.jobslist .button{margin:15px 0 0}

.footerLogos{display:flex; justify-content: center; align-items: center; flex-wrap: wrap; margin: 5px}
.footerLogos > div{width:60px; height: 60px;  max-width:60px; max-height: 60px; text-align: center; padding:0; margin: 0 5px 5px}
.footerLogos > div img{object-fit: contain; object-position: center; width:100%; height: 100%}

#translatorWidget{position: relative; max-width:1080px; margin: 0 auto}
#translatorWidget > div{position:absolute; top:30px; left:15px}

@media (max-width: 1300px) {
    .grouplist{justify-content: space-around}
}

@media (max-width: 1100px) {
	#masthead{display:none}
	#mobnavbutton{display: block}
	#wpadminbar{display:none}
	#sitetitle{max-width: 90%}
	#sitetitle > div:first-of-type{max-width: 20%; padding: 0 10px}
	#sitetitle > div:nth-of-type(2){font-size:24px; line-height: 30px}
    .memMenu > div{max-width: 48%}
}

@media (max-width: 900px) {
	.contactflex{flex-direction: column}
	.contactflex > div{flex-basis:100%; padding: 0 0 30px}
    .memMenu > div{max-width: 90%}
}

@media (max-width: 800px) {
	.groupthumb{float:none; clear: both; max-width:100%; margin: 0 auto 30px}
    .eventslist .logo{float: none; margin:0 auto 30px }
    .eventBanner img{object-fit: contain}
}

@media (max-width: 700px) {
	#cookiebar{flex-direction: column}
	#cookiebar > div{min-width:100%; max-width:100%; text-align: center}
	#footerInner{flex-direction: column}
	#footerInner > div{max-width:100% !important; text-align: center !important; padding: 0 0 30px}
    .memHeader{max-width: 96%}
	footer h3{margin: 0}
}
@media (max-width: 600px) {
	.fixedwidth{max-width:100%; width:100%; margin: 60px 0; padding-left: 30px; padding-right: 30px}
	#translatorWidget{position: absolute; margin: 0 auto; top:-40px; left:20px}
	#translatorWidget > div{position:relative; top:auto; left:auto}
	#credit{flex-direction: column}
	#credit > div{text-align:center; padding: 0}
	.alignright{float:none; clear: both; display: block; margin: 30px auto}
	h1{font-size:3.4rem}
}
@media (max-width: 400px) {

}