/* modals */
#blocker {opacity: 0; position: fixed; top:0; left:0; width:0; height:0; overflow: hidden; z-index: -1; background: #000000; }
#blocker.on { width:100%; height:100%; z-index:1000; }
#blocker.active { width:100%; height:100%; z-index:1000; opacity:0.85; }

.modal {
	display:none;
	opacity: 0;
	position: fixed; 
	top:0; 
	left:0; 
	transform: translate(0, 0);
	width:0; 
	overflow: hidden; 
	z-index: -1; 
	background: #ffffff; 
}

.modal.on {
	display:block;
	width: 100%;
	height:auto;
	max-width: 1100px;
	min-width:300px;
	top:40%;
	left:50%; 
	transform: translate(-50%, -50%);
	z-index: 10000;
}

.modal .container {
	padding:5%;
	margin:auto;
	position:relative;
	width:100%;
	height: auto; /* necessary to make modal full height on tablet and mobile */
	color:#000000;
}

.modal .container img.closer {
	position: absolute;
	top: 42px;
	right: 42px;
}

.modal .container h3 {
    font: 300 35px/35px 'Source Sans Pro', sans-serif;
    color:#003366;
    margin-bottom: 1em;
    margin-top: 0;
}
.modal .container p {
  font: 300 17px/24px 'Source Sans Pro', sans-serif;
  color: #333333;
  max-width: 569px;
}

/********** map **********/
.google-maps iframe {
	height: 250px;
	width: 100%;
}

/* layout of blocks of content within the modal */
.modal-content {
	margin-top: 48px;
}
.modal-flag,
.modal-text,
.google-maps {
	display: inline-block;
	vertical-align: top;
}

.modal-flag {
	margin-right: 14px;
}

.modal-text {
	width: 40%;
}

.google-maps {
	width: 54%;
}

/********** showing and hiding the modal content **********/
/* I'm sure there is a better way to do this, and I will find it if I have time */
/* Austria */
.modal .modal-content.modal-austria { display: none; }
.modal.modal-austria .modal-content.modal-austria { display: block; }

/* Belgium */
.modal .modal-content.modal-belgium-dutch { display: none; }
.modal.modal-belgium-dutch .modal-content.modal-belgium-dutch { display: block; }

.modal .modal-content.modal-belgium-french { display: none; }
.modal.modal-belgium-french .modal-content.modal-belgium-french { display: block; }

/* Brazil */
.modal .modal-content.modal-brazil { display: none; }
.modal.modal-brazil .modal-content.modal-brazil { display: block; }

/* Canada */
.modal .modal-content.modal-canada-english { display: none; }
.modal.modal-canada-english .modal-content.modal-canada-english { display: block; }

.modal .modal-content.modal-canada-french { display: none; }
.modal.modal-canada-french .modal-content.modal-canada-french { display: block; }

/* Denmark */
.modal .modal-content.modal-denmark { display: none; }
.modal.modal-denmark .modal-content.modal-denmark { display: block; }

/* France */
.modal .modal-content.modal-france { display: none; }
.modal.modal-france .modal-content.modal-france { display: block; }

/* Germany */
.modal .modal-content.modal-germany { display: none; }
.modal.modal-germany .modal-content.modal-germany { display: block; }

/* Italy */
.modal .modal-content.modal-italy { display: none; }
.modal.modal-italy .modal-content.modal-italy { display: block; }

/* Japan */
.modal .modal-content.modal-japan { display: none; }
.modal.modal-japan .modal-content.modal-japan { display: block; }

/* Luxembourg */
.modal .modal-content.modal-luxembourg-french { display: none; }
.modal.modal-luxembourg-french .modal-content.modal-luxembourg-french { display: block; }

.modal .modal-content.modal-luxembourg-german { display: none; }
.modal.modal-luxembourg-german .modal-content.modal-luxembourg-german { display: block; }

.modal .modal-content.modal-luxembourg-portuguese { display: none; }
.modal.modal-luxembourg-portuguese .modal-content.modal-luxembourg-portuguese { display: block; }

/* Netherlands */
.modal .modal-content.modal-netherlands { display: none; }
.modal.modal-netherlands .modal-content.modal-netherlands { display: block; }

/* Portugal */
.modal .modal-content.modal-portugal { display: none; }
.modal.modal-portugal .modal-content.modal-portugal { display: block; }

/* Spain */
.modal .modal-content.modal-spain { display: none; }
.modal.modal-spain .modal-content.modal-spain { display: block; }

/* Sweden */
.modal .modal-content.modal-sweden { display: none; }
.modal.modal-sweden .modal-content.modal-sweden { display: block; }

/* Switzerland */
.modal .modal-content.modal-switzerland-french { display: none; }
.modal.modal-switzerland-french .modal-content.modal-switzerland-french { display: block; }

.modal .modal-content.modal-switzerland-german { display: none; }
.modal.modal-switzerland-german .modal-content.modal-switzerland-german { display: block; }

/* United Kingdom (UK) */
.modal .modal-content.modal-uk { display: none; }
.modal.modal-uk .modal-content.modal-uk { display: block; }

/* United States (USA) */
.modal .modal-content.modal-usa { display: none; }
.modal.modal-usa .modal-content.modal-usa { display: block; }


/********** MOBILE **********/
@media only screen and (max-width: 600px) {

	.modal.on {
        width:95%;
        min-width:300px;
	}
	
	.modal .container img.closer {
		top: 16px;
		right: 16px;
	}

	/* so that the .closer 'X' doesn't overlap the copy on small screen sizes */
	.modal .container .modal-content {
		margin-top: 2.5em;
	}
    
    /* layout of blocks of content within the modal */	
	.modal-flag,
	.modal-text {
		display: block;
	}

	/* .google-maps {
		display: none;
	} */

	.modal-flag {
		margin-bottom: 14px;
	}

	.modal-text {
		width: 100%;
	}
}

/********** TABLET **********/
@media only screen and (min-width: 601px) and (max-width: 1024px) {

	.modal.on {
        width:95%;
    }

    /* layout of blocks of content within the modal */
    .modal-flag,
	.modal-text {
		display: inline-block;
		vertical-align: top;
	}

	/* .google-maps {
		display: block;
		width: 100%;
	}

	.modal-flag {
		margin-right: 14px;
	}

	.modal-text {
		width: 60%;
	} */
}

/********** LARGER **********/
@media only screen and (min-width: 1025px) and (max-width: 1140px) {
    .modal.on {
        width:95%;
    }
}


/* CONTACT PAGE STYLES */
.country-contact {
	display:block;
	padding:60px 0;
	border-bottom:1px solid #003366;
}

.country-contact:last-child {
	border-bottom:none;
}

.country-contact .flag {
	margin-right:14px;
	margin-top:9px;
}

.flag, 
.contact-info {
	display: inline-block;
	vertical-align: top;
}

.contact-info h3 {
	font-size:35px;
	font-weight:300;
	color: #003366;
	margin-bottom: 15px;
	margin-top: 0;
}

.contact-info p {
	font-size:17px;
	line-height:24px;
	font-weight:300;
	color:#333333;
}

.map {
	width: 100%;
	display:block;
}

.map iframe {
	width: 100%;
}

@media (min-width:768px) {
	.contact-info {
		width: 40%;
	}

	.map {
		width: 50%;
		display:inline-block;
	}
}

@media (min-width:1200px) {
	.map {
		width: 55%;
	}
}