:root { 

}

.hire_map {position:relative; max-width:1000px; width:90%; margin:0 auto 10px auto;}
.hire_map_inner { position:relative; border:5px solid var(--hire); border-radius:5px; background-color: var(--hire);}
.hire_map .clickable {width:9%; min-width:60px; position:absolute; font-family: tcm_banner_text; font-weight:bolder; color:#888; box-shadow:0px 2px 2px #888;}
.hire_map .clickable:hover {z-index:22;}
.hire_map .clickable:active {z-index:21;}
.hire_map .clickable .inner {cursor:pointer; text-align:center; font-weight:bold; font-size:1.3rem; background-color:#fff; line-height:normal; padding:2px; border-radius:3px;}
.hire_map img {width:100%; display:block; border-radius:3px;}
.hire_map .arrow {width:0; height:0; border-style:solid; position:absolute; z-index:5;}
.hire_map .arrow_down { border-color: #fff transparent transparent transparent;}
.hire_map .arrow_up {border-color: transparent transparent #fff transparent;}


.hire_map .toggle_box > div {position:relative; width:100%; height:100%;}
.hire_map .toggle_box .page_link {width:100%; font-weight:bold; text-align:center; color:blue;}

.hire_map .buxton {bottom: calc(70% + var(--arrow_height)); right:80%; z-index:20;}
.hire_map .buxton .arrow {right:40%; border-width: var(--arrow_height) 0px 0 calc( var(--arrow_height) - 5px);}

.hire_map .beccles {bottom: calc(14% + var(--arrow_height)); right:37%; z-index:19;}
.hire_map .beccles .arrow {right:15%; border-width: var(--arrow_height) 0px 0 calc( var(--arrow_height) - 5px);}

.hire_map .norwich {top: calc(46% + var(--arrow_height)); right:89%; z-index:18;}
.hire_map .norwich .arrow {right:25%; border-width: 0 0px var(--arrow_height) calc( var(--arrow_height) - 10px);}

.hire_map .wroxham {bottom: calc(66% + var(--arrow_height)); right:70%; z-index:17;}
.hire_map .wroxham .arrow {right:47%; border-width: var(--arrow_height) calc(var(--arrow_height) - 18px) 0 8px;}

.hire_map .aylsham {bottom: calc(74% + var(--arrow_height)); right:90%; z-index:14;}
.hire_map .aylsham .arrow {right:60%; border-width: var(--arrow_height) calc( var(--arrow_height) - 10px) 0 5px;}

.hire_map .coltishall {top: calc(32% + var(--arrow_height)); right:76%; z-index:16;}
.hire_map .coltishall .arrow {right:50%; border-width: 0 5px var(--arrow_height) calc( var(--arrow_height) - 20px);}

.hire_map .south_walsham {top: calc(40% + var(--arrow_height)); right:48%; z-index:15;}
.hire_map .south_walsham .arrow {right:50%; border-width: 0 calc( var(--arrow_height) - 15px) var(--arrow_height) 5px;}

.hire_map .horning {bottom: calc(64% + var(--arrow_height)); right:58%; z-index:13;}
.hire_map .horning .arrow {right:60%; border-width: var(--arrow_height) calc( var(--arrow_height) - 10px) 0 0px;}

.hire_map .arrow_down {bottom: calc(-1 * var(--arrow_height)); }
.hire_map .arrow_up {top: calc(-1 * var(--arrow_height)); }


@media screen and (min-width : 1024px){
.hire_map_inner {height:100%;}
.hire_map .toggle_box {font-size:1.4rem;}    
}


@media screen and (min-width : 800px){
:root { --arrow_height : calc(var(--site_width) / 40); }

.hire_map .toggle_box {position:absolute; right:1%; top:5%; width:33%;}
.hire_map .toggle_box {position:absolute; right:1%; top:5%; width:33%; max-width:310px; max-height:90%; background-color:rgba(255,255,255,0.8); z-index:9; padding:5px; box-sizing:border-box; border-radius:3px;}
.hire_map .hire_map_text {padding:5px; text-align:center;}
.hire_map .click_here {display:block; font-weight:bold; margin-top:5px; text-align:center;}
}

@media screen and (min-width : 800px) and (max-width : 1023px){
.hire_map .toggle_box .title {font-size:1.4rem;}
.hire_map .toggle_box {font-size:1.2rem}        
}

@media screen and (min-width : 550px) and (max-width : 799px){
:root {--arrow_height : 15px;}
.hire_map .clickable .small_logo {display:none;}
.hire_map .toggle_box {background-color:#efefef; padding-top:5px; margin-top:5px;}
.hire_map .title {font-size:1.6rem;}
.hire_map .hire_map_text {font-size:1.4rem; padding:5px; text-align:center;}
.hire_map .hire_map_image {display:inline-block; width:50%; max-width:300px; vertical-align:top; box-sizing:border-box; padding:0 5px}
.hire_map .hire_map_list {display:inline-block; width:50%; vertical-align:top; font-size:1.2rem;}
.hire_map .toggle_box .page_link {font-size:1.4rem;}
}

@media screen and (max-width : 549px){
.hire_map {display:none;}


}