@import url('https://fonts.googleapis.com/css2?family=Gochi+Hand&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
body{
	display:flex;
	/*height: 100vh;*/
	flex-direction:column;
	background-image: url(../image/Background-tiny.png);
	background-repeat: repeat;
    background-size: 40%;
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: "Montserrat", sans-serif;
}

html,
body {
	height: 100%;
}


.container{
	display:flex;
	flex-direction:row;
	/*flex:1;*/
	flex-wrap: wrap;
	align-items:center;
	justify-content: space-evenly;
	height:20%;
	box-shadow: 0 15px 20px -2px #222;
	z-index:9999;

	border-bottom: 8px solid transparent;
    padding: 0px;
	border-image: url("../image/border.jpg") 27 space;
}

.container-map{
	display:flex;
	align-items:center;
	/*padding:0px 10px 15px 10px;*/
	padding:0;
	height:82%;
	
}

.container img{
	width:100%;
}

.logo{
	width:12%;
	padding:0 2%;
	background-color:#fff;
	height:100%;
	margin-left:0;
	display:flex;
	align-items:center;
}

.logo img{ 
	width:100%;
}

.nav{
	width:84%;
	padding:0;
	text-align: center;
}

.nav img{ 
	width:65%;
}

.main{
	position:relative;
	width:70%;
	height:100%;
	background-image:url(../map/mapbg-tiny.jpg);
	padding:0px;
	display:flex;
  padding-right:0;
  flex-grow: 1;
  overflow-y: auto;
  /* for Firefox */
  min-height: 0;
}

.main img{
  width:100%;
	border-radius:15px;
	object-fit: contain;
}

.regionswatch{
	position: absolute;
	color:#222;
	font-size:1.1em;
	font-weight:bold;
	margin:40px;
}

.regiontitle{
	margin-bottom:10px;
}

.NV, .CV, .CB, .ES, .HR, .SV, .SoV, .BH, .HA, .MO{
	display:block; 
	background-color:#ee0000;
	width:20px;
	height:20px;
	margin:0 15px;
	float:left;
}

.NV{
	background-color:#409c8a;
}

.CV{
	background-color:#b2bc6a;
}

.CB{
	background-color:#c5798d;
}

.ES{
	background-color:#c5d7c4;
}

.HR{
	background-color:#849cb6;
}

.SV{
	background-color:#f38397;
}

.SoV{
	background-color:#eec56b;
}

.BH{
	background-color:#dc8f6b;
}

.HA{
	background-color:#6db5b4;
}

.MO{
	background-color:#6ba65c;
}



.search{
	height:100%;
	width:30%;
	background-image:url(../image/bgred-tiny.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	/*display:flex;*/
	color:#fff;
	padding:0;
	/*flex-direction: column;*/
	font-weight:bold;
}

.search label{
	margin-left:40px;
}

.usrregioncont, .usrlocalitycont, .usrregion, .usrlocality, .usrcategory, .usrkeyword {
  /*float: left;*/
  
  width:100%;
  position: relative;
  margin:5% 0 5% 0;
}

.usrsubmit {
	text-align:center;
	margin:10% 0 5% 0;
  width:100%;
}

.searchheader{
  width:100%;
  background-image:url(../image/GrayBG2.jpg);
  color:#fff;
  display:flex;
  align-items: center;
  justify-content:space-between;
}

.hleft{
  margin-left:30px;
}

.hright{
  margin-right:30px;
}

.noresults{
  color:#222;
  font-weight:bold;
  font-size:24px;
  text-align:left;
  padding:30px;
}

.detailleft, .detailright{
  float:left;
  padding:0 3%;
  font-size:18px;
}

.detailleft{
  width:50%;
}

.detailright{
  width:38%;
  
}

.detailleft a{
  font-weight:bold;
  text-decoration:none;
}

.detail-container{
  width:68%;
  overflow-y: scroll;
}

.detail-container h1{
  margin-left:30px;
}

.localmeta{
  font-size:22px;
  font-weight:600;
}

.userback{
  position:static;
  background-image:url(../image/GrayBG2.jpg);
  padding:30px 10px;
  color:#fff;
  font-weight:600;
  font-size:36px;
  border-bottom-right-radius:10px;
}

.userback a{
  color:#fff;
  font-weight:600;
}

/* ----------------- Style Dropdowns -------------------------- */


select::-ms-expand {
display: none;
}

.usrregion:after,  .usrkeyword:after, .usrregioncont:after, .usrlocalitycont:after{
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 40px;
  /*Adjust for position however you want*/
  font-weight:bold;
  top: 50%;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}

.usrcategory::after{
  display:none;
}

.usrlocalityALL:after, .usrlocalityCV:after, .usrlocalityNV:after, .usrlocalityCB:after, .usrlocalityES:after, .usrlocalityHR:after, .usrlocalitySV:after, .usrlocalitySoV:after, .usrlocalityBH:after, .usrlocalityHA:after, .usrlocalityMO:after {
  content: '<>';
  font: 17px "Consolas", monospace;
  color: #333;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
  right: 40px;
  /*Adjust for position however you want*/
  font-weight:bold;
  top: 43%;
  padding: 0 0 2px;
  border-bottom: 1px solid #999;
  /*left line */
  
  position: absolute;
  pointer-events: none;
}


.usrregioncont select, .usrlocalitycont select, .usrregion select, .usrcategory select, .usrkeyword select, .usrlocalityALL select, .usrlocalityCV select, .usrlocalityNV select, .usrlocalityCB select, .usrlocalityES select, .usrlocalityHR select, .usrlocalitySV select, .usrlocalitySoV select, .usrlocalityBH select, .usrlocalityHA select, .usrlocalityMO select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  border-radius:0 30px 30px 0;
  display: block;
  width: 85%;
  height: 50px;

  margin: 5px auto;
  padding: 0px 24px;
  font-size: 1.5em;
  font-weight:bold;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;
}

/*hide dropdowns until region selected */
.usrlocalityCV, .usrlocalityNV, .usrlocalityCB, .usrlocalityES, .usrlocalityHR, .usrlocalitySV, .usrlocalitySoV, .usrlocalityBH, .usrlocalityHA, .usrlocalityMO {
	display:none;
}

/*hide maps until region selected */
#mapCV, #mapNV, #mapCB, #mapES, #mapHR, #mapSV, #mapSoV, #mapBH, #mapHA, #mapMO {
  display:none;
}

.txtHint{
  /*display:none;*/

  position:relative;
  width:100%; /*90%*/
  height:auto;
  background-image:url(../map/mapbg-tiny.jpg);
  padding:0;
  margin:30px;
  display:flex;


}

.results-container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  padding:0;
}

.results-container a{
  text-decoration:none !important;
}

.results {
  width: 30.3%;
  height:520px;
  /*max-height:530px;*/
  margin: 0;
  text-align: center;
  font-size: 18px;
  color:#fff;
  background-image:url(../image/bg-results.jpg);
  border-radius: 20px;
  margin-top:30px;
}

.usrimg{
    border-radius: 20px;

}

.results a{
  color:#fff;
}

.results-title{
  padding:.3em;
}

.results h4{
  margin-block-start: .3em;
  margin-block-end: .3em;
}

.results img{
  border-radius:0;
  
}


/* ================================== ANIMATION OF MAP REGIONS ======================================== */

#mapCV, #mapNV, #mapCB, #mapES, #mapHR, #mapSV, #mapSoV, #mapBH, #mapHA, #mapMO {
    position: absolute;
    left: -100%;
    width: 100%;
    height: 95%;
    /*background: blue;*/
    margin-top:2%;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}


/* ================================== ANIMATION OF MAP REGIONS ======================================== */






.usrkeyword input[type=text] {
  width: 75%;


 -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  /* Add some styling */
  border-radius:0 30px 30px 0;
  display: block;
  
  height: 50px;

  margin: 5px auto;
  padding: 0px 24px;
  font-size: 1.5em;
  font-weight:bold;
  line-height: 1.75;
  color: #333;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #cccccc;
  -ms-word-break: normal;
  word-break: normal;


}

/* submit button */
.subbutton {
  position: relative;
  background-color: #13133F;
  border: 1px solid #fff;
  border-radius:20px;
  margin-top:-20px;
  font-size: 20px;
  color: #FFFFFF;
  padding: 12px;
  width: 90%;
  text-align: center;
  -webkit-transition-duration: 0.8s; /* Safari */
  transition-duration: 0.8s;
  text-decoration: none;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 15px 20px -2px #222;
}

.subbutton:after {
  content: "";
  background: #1125A9;
  display: block;
  position: absolute;
  padding-top: 300%;
  padding-left: 350%;
  margin-left: -20px!important;
  margin-top: -120%;
  opacity: 0;
  transition: all 1.2s
}

.subbutton:active:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}