/* DEVICE & RESPONSIVE LAYOUT */
.header .nav-open-button {
    display: none; /* removes the nav toggle button for desktop site */
}
#media-query-trigger {
    /* instead of detecting the width of the window in simple/javascript/script.js it detects the visibility of this element (which is set using media queries) 
    instead to trigger the hiding/showing of nav and search in mobile mode */
    display: none;
    visibility: hidden;
}

img {
	max-width: 100%;
}

@media only screen and (max-width: 1400px) { /* laptop size */
	.header .banner {
		position: relative;
		max-width: 1200px;
		padding-top: 10px;
	}
	
	.header .logo img{
		max-height: 50px;
	}
	
	.primary {
		max-width: 1200px;
		padding-top: 5px;
	}
	
	.primary li a {
		padding: 12px 10px;
		font-size: 18px;
	}
	
	.main {
		padding-bottom:35px; /* footer height */
	}
	
	.footer {
		font-size: 18px;
		line-height: 25px;
		padding: 5px 0;
	}
	.footer .inner {
		position: relative;
		max-width: 1200px;
	}
	
	/* HomePage */
	
	.HomePage .slideshow-wrapper {
		max-width: 250px;
	}	
	
	.HomePage .mid-home {
	    max-width: 680px;
		margin: 0 auto;
		
		padding-top: 25px;
		padding-bottom: 40px;
	}
	
	.HomePage .caption {
		line-height:165px;
		font-size:52px;
	}
	
	.HomePage .main {
		background-size: 87%;
	}
	
	.HomePage .main .inner {
		padding-top: 25px;
		padding-bottom: 5px;
	}	
	
	.HomePage .main .icon-strip .inner{
		padding: 8px 20px;
		max-width:750px;
	}
	
	.icon-strip a {
		font-size: 13px;
		margin: 0 65px;
	}
	.icon-strip a img {
		max-height: 40px;
		margin-bottom: 0;
	}
	
	.HomePage .typography .content {
		max-width: 600px;
		margin: 0 auto;
	}
	
	.HomePage .typography .content h2{
		font-size: 17px;
		line-height: 19px;
		margin-bottom: 10px;
	}
	.HomePage .typography .content p{
		font-size: 13px;
		line-height: 15px;
	}
	
}

@media only screen and (max-width: 1200px) {
	
	.header .banner {
		padding: 10px;
	}
	.header .primary {
		padding: 0 10px;
	}
	
	.primary ul li:first-child a{
		padding-left: 10px;
	}
	.primary ul ul li:first-child a {
		padding-right:0;
	}
	
	.footer  {
		padding: 20px 10px;
		font-size: 18px;
	}
	
	/*HomePage */
	.HomePage .main .icon-strip .inner {
		padding: 20px 0;
	}
	.icon-strip a {
		margin: 0;
		width: 24%;
	}
}



/* BREAKPOINT 960px */

@media only screen and (max-width: 960px) {
	body {
		display: block; /* fade in out disabled at this width. script.js does this too, but just in case js is disabled*/
	}
	
	.content img {
	    max-width: 97%;
	    height: auto;
	}
	.header .primary ul {
	    margin-left: -12px;
	    -webkit-padding-start: 0px; /* removes default webkit padding on ul items */
	}
	
	.main {
		padding-bottom:0;
	}
	
	.footer {
		position: relative;
	}
	
	.footer .left,
	.footer .right {
		display: block;
		float: none;
	}
	
	.typography table td.f-country {
		width: auto;
		display: block;
		margin-bottom: 10px;
		margin-left: -20px;
		float: none;
	}
	.f-country div {
		margin-bottom: 20px;
	}
	.typography .f-country a img {
	    margin: 0 auto;
	}
	
	/* GalleryHolderPage */
	.country-img {
		display: block;
		margin: 0 auto !important;
	}
	
	/* Contact sub page */
	.profile {
		float: none;
		max-width: 100%;
	}
	
	.mainText  {
		float: none;
		max-width: 100%;
	}
}

@media only screen and (max-width: 680px) { 
	.HomePage .caption {
		line-height: 100px;
		float: none;
		margin-bottom: 20px;
	}
	
	.HomePage .slideshow-wrapper {
		margin: 0 auto;
		float: none;
	}
}

/* BREAKPOINT 640px */

/* when changing the breakpoint below, change it ito the same value in the script.js file as well */
@media only screen and (max-width: 980px) { 
	body {
	    
	}
	#media-query-trigger {
	    visibility: visible;
	}
	
	.header .logo img{
		max-height: 100%;
	}

	/* Navigation*/
	.header .primary {
		padding: 0;
	}
	.primary .nav-open-button { /* styling and positioning of the nav toggle button */
		z-index: 100;
		width: 20px;
		height: 20px;
		position: absolute;
		left: 5px;
		top: 5px;
		display: block;
		cursor: pointer;
		font-family: 'WebSymbolsRegular';
		font-size: 20px;
		color: #a59468;
	}
	.primary ul {
		z-index: 10;
		position: relative;
		display: none; /* initially hiding the navigation */
		margin: 0;
		padding: 0;
		white-space: normal;
		text-align: left;
	}
		.primary ul li {
			width: 100%;
			margin: 0;
			padding: 0;
			float: none; /* displays list items vertically */
			background: none;
			position: relative;
			list-style-type: none;
			
		}
		.primary ul li:after { /* creates the arrow for the primary nav links */
		}
		.primary ul li a,
		.primary ul li.current a,
		.primary ul li.section a { /* styling the  top level nav links */
			padding: 0;
			padding-left: 22px !important;
			line-height: 45px;
			font-weight: bold;
			border-bottom: 1px solid #2e2b2f;
			color: #FFF;
			background: #c9af35;
			
			text-decoration: none;
			width: 100%;
			display: block;
			box-sizing: border-box;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
		}
		.primary ul li.current a,
		.primary ul li.section a {
			background: #c9af35; /* makes background on current top level page slightly darker */
			line-height: 45px;
		}
		.primary ul li a:hover {
			color: inherit;
		}
		.primary li.section:after,
		.primary li.current:after {
			display: none; /* hides the link arrow on current top level page */
		}
		.tablet-nav nav.primary ul li {
			padding: 0;
		}
		.primary ul li ul { 
			display: none !important;
			position: relative;
			padding: 0;
		}
		
		
		.primary ul li.menu-parent a span {
			display: inline-block;
			width: 40px;
			text-align: center;
			height: 100%;
			float: right;
			font-family: 'WebSymbolsRegular';
			font-size: 20px;
			background: #a69234;
		}
		
		.primary ul li.menu-parent.open a span{
			content: '[';
		}
		
		.primary li.open ul {
			display: block !important;
		}
		.primary li.open ul {
			top: auto;
			margin: 0 !important;
		}
		.primary li.open ul li {
			text-align: left !important;
		}
		.primary li.open ul li:first-child{
			
		}
		.primary li.open ul li:last-child{
			border-bottom: none;
		}
		.primary li.open ul li a{
			padding-left: 20px !important;
			background: #a69234;
			border-bottom: 1px solid #2e2b2f;
		}
		
	/* Search Form */
	.search-bar { /* adds new styling to mobile search bar */
	    width: 100%;
	    position: relative;
	    top: 0;
	    right: 0;
	    display: none; /* hides searchbar initially */
	    padding: 20px 0;
	    margin: 0;
	    background-color: #E7E7E7;
	}
	.search-dropdown-icon { /* styling for search toggle button */
	    display: block;
	    cursor: pointer;
	    width: 20px;
	    height: 20px;
	    position: absolute;
	    right: 60px;
	    top: 34px;
	    font-family: 'WebSymbolsRegular';
	    font-size: 20px;
	    color: #F00;
	    text-align: center;
	    line-height: 20px;
	}
	.search-bar form {
	    margin: 0;
	    width: 100%;
	}
		.search-bar form fieldset {
		    padding: 0 18px;
		    left: 0;
		    right: 0;
		    position: relative;
		}
	.search-bar div.field {
	    margin-bottom: 0;
	}
	.search-bar form input.text {
	    width: 89%; /* makes search input full width - allowing for space either side */
	    max-width: 89%;
	    padding: 8px 10% 8px 1%;
	    text-indent: 15px;
	    position: relative;
	    display: block;
	    right: 0;
	    left: 0;
	    border: 1px solid #e5e5e5;
	    background: #fff;
	    font-size: 17px;
	    -moz-border-radius: 20px; /* increase border radius due to increased padding */
		border-radius: 20px;
	}
	.search-bar form input.action {
	    right: 5%;
	    top: 2px;
	    font-size: 18px;
	}
}

@media only screen and (max-width: 500px) {
	.GalleryLandingPage .gal-link {
		margin: 0 auto;
		margin-bottom: 30px;
		width: 100%;
		text-align: center;
	}
	
	.GalleryLandingPage .gal-link div {
		height: auto;
		line-height: inherit;
	}
	
	/* HomePage */
	.HomePage .main {
		background-size: contain;
		background: #000 !important;
	}
	.HomePage .inner .mid-home {
		/*padding-top: 25px;*/
	}
	
	.HomePage .main .inner {
		padding: 30px 20px;
	}
	
	.HomePage .caption {
		font-size: 35px;
		line-height: 40px;
	}
	
	.HomePage h2 {
		font-size: 27px;
		line-height: 30px;
	}
	
	.HomePage .icon-strip {
		padding: 20px;
		padding-bottom: 0;
	}
	
	.HomePage .icon-strip a {
		width: 48%;
		font-size: 20px;
		margin-bottom: 20px;
	}
	
	/* GalleryHolderPage */
	.GalleryHolderPage .main .inner .container{
		
	}
	
	.GalleryHolderPage .galleryBox_text {
	}
	.GalleryHolderPage .galleryBox p {
		font-size: 16px;
	}
}

@media only screen and (max-width: 370px) { 
	.GalleryImagePage  .typography p{
		font-size: 21px;
	}
}