/*-- layout --*/

* {
	margin: 0;
	padding: 0;
}

html {
	overflow-y:scroll;
}

html, body {
	width: 100%;
	float: left;
	font-family: "effra";
	font-size: 16px;
	background: #ffffff;
}

img {
	width: 100%;
	height: auto;
	border: none;
}

header, nav, #container, .container, .special-container, .container-no-padding, .no-bottom-padding, footer {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
	position: relative;
}

#container {
	overflow: hidden;
}

.special-container {
	width: 50%;
	position: absolute;
	top: 50%;
}

.container:nth-child(odd) .special-container, .container:nth-child(odd) .two-no-padding h5 {
	right: 0;
}

.container:nth-child(even) .special-container, .container:nth-child(even) .two-no-padding h5 {
	left: 0;
}

.container, .no-bottom-padding {
	padding: 40px 0;
	margin: 0 0 30px 0;
}

.no-bottom-padding {
	padding: 40px 0 0 0;
}

.content, .special-container .content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
	position: relative;
}

.special-container .content {
	max-width: 600px;
}

.container:nth-child(odd) .special-container .content, .container:nth-child(odd) .special-container .content .button, .container:nth-child(odd) .two-no-padding, .container:nth-child(even) .two-no-padding h5 {
    float: left;
    text-align: left;
}

.container:nth-child(even) .special-container .content, .container:nth-child(even) .special-container .content .button, .container:nth-child(even) .two-no-padding, .container:nth-child(odd) .two-no-padding h5 {
    float: right;
    text-align: right;
}

.container:nth-child(odd) .special-container .content, .container:nth-child(even) .special-container .content, .container:nth-child(odd) .two-no-padding h5, .container:nth-child(even) .two-no-padding h5 {
	margin: 75px;
}

.container:nth-child(odd) .two-no-padding h5, .container:nth-child(even) .two-no-padding h5  {
    max-width: 600px;
    width: auto;
    line-height: 60px;
    top: 50%;
    position: absolute;
}

.container-no-padding {
	padding: 0;
}

.container-no-margin {
	margin: 0;
}

.center-small .content {
	max-width: 800px;
}

h1, h2, h3, h4, h5, h6, p, .quote {
	width: 100%;
	float: left;
	font-size: 3.3em;
	letter-spacing: 2px;
	line-height: 100px;
	font-weight: 900;
	color: #3e5160;
}

p {
	font-size: 1em;
	letter-spacing: normal;
	line-height: normal;
	font-weight: normal;
	color: #899caa;
}

.quote {
	width: auto;
	float: none;
	font-size: 1.8em;
	font-style: italic;
	line-height: 40px;
	margin-bottom: 50px;
	padding-left: 50px;
	text-align: justify;
}

.small {
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: 2px;
	line-height: 25px;
	margin-bottom: 30px;
}

.small-bold {
	font-size: 1em;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 30px;
	margin-bottom: 30px;
}

.medium, .medium-2 {
	font-size: 1.2em;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 35px;
	margin-bottom: 30px;
}

.medium-2 {
	font-size: 1.6em;
}

.large {
	font-size: 1.7em;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 35px;
	margin-bottom: 40px;
}

.title, .extra-large, .extra-large-heavy {
	font-size: 2.3em;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 2px;
	margin-bottom: 10px;
}

.extra-large, .extra-large-heavy {
	font-size: 2.2em;
	text-transform: none;
}

.extra-large {
	font-weight: 500;
}

p a {
	text-decoration: underline;
}

iframe {
	width: 100%;
	height: 393px;
}

.one, .one-no-padding,
.two, .two-no-padding,
.three, .three-no-padding,
.four, .four-no-padding,
.third, .third-no-padding,
.two-thirds, .two-thirds-no-padding {
	width: 20%;
	float: left;
	margin: 0;
	padding: 0 2.5%;
	position: relative;
}

.one-no-padding {
	width: 25%;
	padding: 0;
}

.two {
	width: 45%;
}

.two-no-padding {
	width: 50%;
	padding: 0;
}

.three {
	width: 70%;
}

.three-no-padding {
	width: 75%;
	padding: 0;
}

.four {
	width: 95%;
}

.four-no-padding {
	width: 100%;
	padding: 0;
}

.third {
	width: 28%;
}

.third-no-padding {
	width: 33.33%;
	padding: 0;
}

.two-thirds {
	width: 61%;
}

.two-thirds-no-padding {
	width: 66%;
	padding: 0;
}

.center {
	text-align: center;
}

.content-circle-image {
	border-radius: 100%;
	height: 240px;
	margin: 30px 2.5% 0 2.5%;
	padding: 0;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

.story .content-circle-image {
	width: 60%;
	border-radius: 100%;
	margin: 50px 20% 0 20%;
}

.no-float {
	width: auto !important;
	float: none !important;
}

.background-image, .background-image-third {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	overflow: hidden;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
	-webkit-opacity: 0.2;
	-moz-opacity: 0.2;
	opacity: 0.2;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.button {
	padding: 10px 30px;
	background: #ffffff;
	-webkit-opacity: 0.8;
	-moz-opacity: 0.8;
	opacity: 0.8;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	text-transform: uppercase;
	text-decoration: none;
	font-size: 1.1em;
	font-weight: 700;
	letter-spacing: 1px;
	border-radius: 20px;
	float: left;
	position: relative;
	z-index: 1000;
}

.button:hover, .button.selected {
	color: #ffffff;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
}

.center .button {
	float: none;
	margin: 0 auto;
}

.red h1, .red h2, .red h3, .red h4, .red h5, .red h6, .red p,
.purple h1, .purple h2, .purple h3, .purple h4, .purple h5, .purple h6, .purple p,
.blue h1, .blue h2, .blue h3, .blue h4, .blue h5, .blue h6, .blue p,
.green h1, .green h2, .green h3, .green h4, .green h5, .green h6, .green p {
	color: #ffffff;
}

a {
	color: #b8c9d5;
}

.red a, .purple a, .blue a, .green a {
	color: #ffffff;
}

.gray {
	background: #f3f6f8;
}

.dark {
	background: #3e5160;
}

.dark-color {
	color: #3e5160;
}

.red, .red-button {
	background: #d8607c;
}

.purple, .purple-button {
	background: #aa61d6;
}

.blue, .blue-button {
	background: #5fbdda;
}

.green, .green-button {
	background: #9ddb5d;
}

.red-text, .red .button, .red a:hover {
	color: #d8607c;
}

.purple-text, .purple .button, .purple a:hover {
	color: #aa61d6;
}

.blue-text, .blue .button, .blue a:hover {
	color: #5fbdda;
}

.green-text, .green .button, .green a:hover {
	color: #9ddb5d;
}

.red .red-text, .red-button {
	color: #ffd9de;
}

.purple .purple-text, .purple-button {
	color: #eed2ff;
}

.blue .blue-text, .blue-button {
	color: #bfeeff;
}

.green .green-text, .green-button {
	color: #d2ffa4;
}

.red-disc, .purple-disc, .blue-disc {
	width: 24%;
	padding: 0 2.5% 0 6.5%;
}

.colored-box {
	height: 32vw;
	position: relative;
}

.colored-box .background-image {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	background-blend-mode: multiply;
}

.colored-box.red .background-image {
	background-color: #d8607c !important;
}

.colored-box.purple .background-image {
	background-color: #aa61d6 !important;
}

.colored-box.blue .background-image {
	background-color: #5fbdda !important;
}

.colored-box.green .background-image {
	background-color: #9ddb5d !important;
}

.colored-box:hover .background-image {
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	opacity: 0.5;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.colored-box h5 {
	margin-top: 25%;
}

.colored-box p {
	width: 80%;
	padding: 0 10%;
}

.red-disc {
	background: url(../images/red-disc.png) no-repeat top left;
	background-size: 28px;
	background-position: 9% 0;
}

.purple-disc {
	background: url(../images/purple-disc.png) no-repeat top left;
	background-size: 28px;
	background-position: 9% 0;
}

.blue-disc {
	background: url(../images/blue-disc.png) no-repeat top left;
	background-size: 28px;
	background-position: 9% 0;
}

.colour-bg {
	height: 50px;
	background: url(../images/banner-art.jpg) repeat-x center;
	background-size: auto 50px;
	border-bottom: 5px solid #ffffff;
	padding: 0;
	margin: 0;
}

p img {
	max-width: 50% !important;
	height: auto !important;
	float: left;
	margin: 10px 10px 10px 0;
}

#mobile-nav a {
	width: 40%;
	float: left;
	margin: 10px 2.5%;
	text-align: center;
	padding: 20px 2.5%;
}

/*-- location check --*/

#location-check {
	background: #ce385b;
	padding: 15px 0;
	margin: 0;
	display: none;
}

#location-check:hover {
	padding: 15px 0;
}

#location-check .content .image {
	width: 20px;
	height: 20px;
	float: left;
	padding: 0;
	margin: 0 5px 0 0;
	border-radius: 100%;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

#location-check .content p {
	width: 95%;
	text-transform: uppercase;
	font-weight: 400;
	font-size: 0.8em;
	letter-spacing: 0.5px;
	border-left: 1px solid #ffffff;
	margin: 0;
	padding: 0 0 0 5px;
}

/*-- search --*/

#search {
	background: #d4dee5;
	padding: 0;
}

#search #form {
	float: right;
	cursor: pointer;
}

#search #form input, #search #form button {
	width: auto;
	float: right;
	border: none;
	background: none;
	font-weight: 400;
	text-transform: capitalize;
	font-size: 1em;
	letter-spacing: 1px;
	font-family: "effra";
	color: #86959f;
}

#search #form input {
	width: 65px;
    -webkit-transition: width ease-in 0.5s;
    -moz-transition: width ease-in 0.5s;
    -o-transition: width ease-in 0.5s;
    transition: width ease-in 0.5s;

    padding: 5px 15px;
    margin: 10px 0 0 0;
}

#search #form button {
	height: 100%;

	color: #b5c0c8;

	font-size: 1em;
	padding: 15px 5px 15px 15px;
}

#search:hover #form input, #search #form input:focus {
	width: 125px;
    -webkit-transition: width ease-in 0.5s;
    -moz-transition: width ease-in 0.5s;
    -o-transition: width ease-in 0.5s;
    transition: width ease-in 0.5s;

    border-bottom: 1px solid #b5c0c8;
}

/*-- navigation --*/

header .content nav, header .content nav ul, header .content nav ul li a, header .content nav ul li a span {
	width: 100%;
	float: left;
	margin: 0;
	padding: 0;
}

header .content nav {
	margin: 10px 0 60px 0;
}

header .content nav ul li {
	width: 20%;
	float: left;
	list-style: none;
	padding: 30px 0;
	position: relative;
	text-align: center;
}

header .content nav ul .logo {
	padding: 0;
}

header .content nav ul .logo a img {
	width: 120px;
	height: auto;
}

header .content nav ul li:hover ul {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	visibility: visible;
}

header .content nav ul li a {
	text-align: center;
	font-size: 0.9em;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 500;
	color: #85a0b3;
	text-decoration: none;
}

header .content nav ul li a span {
	font-size: 2em;
	letter-spacing: 3px;
	font-weight: 900;
	color: #3e5160;
}

header .content nav ul .logo a span {
	font-size: 0.9em;
	letter-spacing: 1px;
	font-weight: 500;
	color: #85a0b3;
    position: absolute;
    left: 0;
    bottom: 0;
    margin: 0 0 -20px 0;
}

header .content nav ul li img {
	width: 17px;
	margin-top: 5px;
}

header .content nav ul li ul {
	width: 180px;
	background: #b2c6d4;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	opacity: 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	position: absolute;
	top: 105px;
	left: 50%;
	z-index: 3000;
	margin-left: -90px;
	border-radius: 5px;
	overflow: hidden;
	visibility: hidden;
}

header .content nav ul li ul li {
	width: 100%;
	float: left;
	padding: 0;
}

header .content nav ul li ul li a {
	color: #ffffff;
	text-transform: capitalize;
	font-size: 0.95em;
	font-weight: 400;
	padding: 10px 0;
	border-top: 1px solid #ffffff;
	margin-top: -1px;
}

header .content nav ul li ul li a:hover {
	background: #9db4c4;
}

/*-- banner --*/

#banner, #banner-static {
	width: 100%;
	height: 460px;
	float: left;
	background: #37acd1;
	position: relative;
	z-index: 0;
}

#banner-static {
	height: auto;
}

#banner .background-image {
    opacity: 0.9;
}

#banner-static .background-image {
    opacity: 1;
}

#banner div .two {
	width: 50%;
	height: 100%;
	padding: 0;
}

#banner div .align-right {
	float: right;
}

#banner .content {
    width: 1150px;
	height: 100%;
    margin: 0 0 0 -575px;
    padding: 0;
    position: absolute;
    left: 50%;
	bottom: -460px;

    -webkit-animation: slide 1.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 1.5s forwards;
    animation-delay: 1s;
}

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

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

#banner .content div p {
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#banner .content div .large-text, #banner-static .content div p, #banner .content div .small-text  {
	width: 90%;
	text-align: left;
	font-weight: 900;
	font-style: italic;
	font-size: 5.6em;
	letter-spacing: 2px;
	line-height: 77px;
	color: #ffffff;
	clear: both;
	position: relative;
	z-index: 1000;
}

#banner-static {
	overflow: hidden;
}

#banner-static .content .four {
	width: auto;
	padding: 0;
	margin: 0;
}

#banner-static .content .four p {
	width: 100%;
	min-width: 20%;
	padding: 50px 5%;
}

#banner-static .red-bg .four #left-spacer,
#banner-static .purple-bg .four #left-spacer,
#banner-static .green-bg .four #left-spacer,
#banner-static .blue-bg .four #left-spacer {
	width: 200px;
	height: 354px;
	position: absolute;
	left: -200px;
	background: url(../images/banner-static-left-red.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .purple-bg .four #left-spacer {
	background: url(../images/banner-static-left-purple.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .green-bg .four #left-spacer {
	background: url(../images/banner-static-left-green.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .blue-bg .four #left-spacer {
	background: url(../images/banner-static-left-blue.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .red-bg .four p {
	background: rgba(216,96,124,0.4);
}

#banner-static .purple-bg .four p {
	background: rgba(170,97,214,0.4);
}

#banner-static .green-bg .four p {
	background: rgba(157,219,93,0.4);
}

#banner-static .blue-bg .four p {
	background: rgba(95,189, 218,0.4);
}

#banner-static .red-bg .four #right-spacer,
#banner-static .purple-bg .four #right-spacer,
#banner-static .green-bg .four #right-spacer,
#banner-static .blue-bg .four #right-spacer {
	width: 200px;
	height: 354px;
	position: absolute;
	left: 110%;
	background: url(../images/banner-static-right-red.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .purple-bg .four #right-spacer {
	background: url(../images/banner-static-right-purple.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .green-bg .four #right-spacer {
	background: url(../images/banner-static-right-green.png) no-repeat;
	background-size: 100% auto;
}

#banner-static .blue-bg .four #right-spacer {
	background: url(../images/banner-static-right-blue.png) no-repeat;
	background-size: 100% auto;
}

#banner .content div .large-text {
	margin-top: 100px;
}

#banner .content div .small-text {
	font-size: 1em;
	font-style: normal;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1.5px;
	margin-top: 30px;
}

#banner div .align-right .large-text, #banner div .align-right .small-text  {
	text-align: right;
	float: right;
}

#banner .background-container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#banner .banner-background {
	width: 40%;
	height: 100%;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	background: url(../images/banner-text-bg.png) repeat;
}

#banner .background-right {
	left: auto;
	right: 0;
}

#banner .banner-angle {
	width: 348px;
	height: 100%;
	position: absolute;
	z-index: 0;
	top: 0;
	left: 40%;
	background: url(../images/banner-text-bg-left.png) no-repeat top left;
	background-size: auto 100%;
}

#banner .angle-right {
	left: auto;
	right: 40%;
	background: url(../images/banner-text-bg-right.png) no-repeat top left;
	background-size: auto 100%;
}

#banner-navigation, #story-navigation {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#banner-navigation #banner-left, #banner-navigation #banner-right, #story-navigation #story-left, #story-navigation #story-right {
	width: 50px;
	height: 50px;
	background: #9ddb5d;
	color: #ffffff;
	font-size: 1.3em;
	border: none;
	margin-top: -25px;
	cursor: pointer;
	position: absolute;
	top: 50%;
	z-index: 2000;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
}

#banner-navigation #banner-left:hover, #banner-navigation #banner-right:hover, #story-navigation #story-left:hover, #story-navigation #story-right:hover {
	background: #b7df8d;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
}

#banner-navigation #banner-right, #story-navigation #story-right {
	right: 0;
}

#banner-navigation ul {
	width: 100%;
	position: absolute;
	bottom: 30px;
	text-align: center;
}

#banner-navigation ul li {
	display: inline;
	padding: 0 5px;
}

#banner-navigation ul li button {
	width: 14px;
	border: none;
	background: none;
	cursor: pointer;
}

/*-- stories banner --*/

#regions a {
	margin: 10px;
    line-height: 60px;
}

#stories-list {
	min-height: 1000px;
}

#stories-list h5 {
	font-size: 2em;
	height: 70px;
    line-height: 35px;
	margin: 0 0 20px 0;
}

#stories-list p {
	height: 100px;
}

.third.story {
	padding-bottom: 60px;
}

.story img {
	border-radius: 100%;
}

.story .circle-image {
	width: 60%;
	height: 200px;
	float: left;
	position: relative;
	padding: 0;
	margin: 0 20% 20px 20%;
	border-radius: 100%;
	opacity: 0.8;
}

.story .one.circle-image {
	width: 20%;
	height: 240px;
	margin: 0 2.5%;
}

.story .circle-image img {
	border: none;
}

.story .container .content .extra-large-heavy {
	color: #3e5160;
}

#story-navigation #story-left, #story-navigation #story-right {
	background: #d8607c;
	opacity: 0.8;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

#story-navigation #story-left:hover, #story-navigation #story-right:hover {
	background: #d8607c;
	opacity: 1;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

/*-- values --*/

#tabs .circle {
	cursor: pointer;
	margin-bottom: 20px;
}

#tabs li {
	width: 18.5%;
	height: auto;
	float: left;
	list-style: none;
	border: 25px solid;
	border-radius: 200px;
	position: relative;
	margin: 20px 1%;
}

#tabs li a {
	width: 88%;
	height: 88%;
	float: left;
	border: 4px solid;
	border-radius: 125px;
	margin: 4%;
	-webkit-opacity: 0.5 !important;
	-moz-opacity: 0.5 !important;
	opacity: 0.5 !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#tabs .circle:hover a, #tabs .selected a {
	-webkit-opacity: 1 !important;
	-moz-opacity: 1 !important;
	opacity: 1 !important;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

#tabs li a span {
	width: 85%;
	float: left;
	font-size: 1.6em;
	font-weight: 500;
	text-transform: uppercase;
	border-top: 4px solid;
	border-bottom: 4px solid;
	margin: 40% 7.5%;
}

#tabs li p a {
    border-radius: 0 !important;
}

#tabs li p a:hover {
    text-decoration: underline !important;
    border: none !important;
}


.red-circle, .red-circle a, .red-circle a span {
	border-color: #d8607c;
	color: #d8607c;
}

.purple-circle, .purple-circle a, .purple-circle a span {
	border-color: #aa61d6;
	color: #aa61d6;
}

.blue-circle, .blue-circle a, .blue-circle a span {
	border-color: #5fbdda;
	color: #5fbdda;
}

.green-circle, .green-circle a, .green-circle a span {
	border-color: #9ddb5d;
	color: #9ddb5d;
}

#tabs .circle-image, .circle-image {
	width: 13%;
	float: left;
	border: none;
	margin: 20px 3.5%;
	cursor: pointer;
}

#tabs .circle-image span, .circle-image span {
	width: 100%;
	height: 50px;
	float: left;
	text-align: center;
	font-size: 1.3em;
	font-weight: 900;
	color: #3e5160;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 10px 0 0 0;
}

#tabs .circle-image .image, .circle-image .image {
	width: 100%;
	height: 160px;
	float: left;
	border-radius: 200px;
	-webkit-opacity: 0.7;
	-moz-opacity: 0.7;
	opacity: 0.7;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
	border: 3px solid #e4e8ea;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
    -webkit-background-size: cover !important;
    -moz-background-size: cover !important;
    -o-background-size: cover !important;
    background-size: cover !important;
}

#tabs .circle-image:hover .image, .circle-image:hover .image {
	-webkit-opacity: 1;
	-moz-opacity: 1;
	opacity: 1;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.tabs {
	width: 100% !important;
	padding-top: 100px;
	border: none !important;
	border-radius: 0 !important;
	margin: 0 !important;
	position: relative;
}

.tabs .tabs-arrow {
	width: auto;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2000;
}

.dark {
	padding-top: 0;
}

.tabs div {
	border: none !important;
	border-radius: 0 !important;
}

/*-- region tabs --*/

.region-background-container {
	width: 100%;
	float: left;
	background: #6ba1b8;
	margin-bottom: 50px;
	height: 175px;
	position: relative;
	z-index: 0;
}

.region-background-container .background-image-third {
	width: 33.3%;
	float: left;
	opacity: 0.6;
	position: relative;
	top: auto;
	left: auto;
}

.region-background-container p {
	width: 1200px;
	position: absolute;
	z-index: 1000;
	top: 50%;
	left: 50%;
	padding: 0 2.5%;
	margin: -10px 0 0 -600px;
}

.container .content ul, .container .content ol {
    font-size: 1.2em;
	width: 100%;
	float: left;
	margin: 0 0 30px 0;
}


.tabs .two ul {
    font-size: 1em;
	width: 100%;
	float: left;
	margin: 0 0 30px 0;
}

.container .content ul li, .container .content ol li {
	width: 95%;
	float: left;
	border: none;
	background: url(../images/grey-disc.png) no-repeat;
	background-size: 18px;
	border-radius: 0;
	margin: 0;
	list-style: none;
	padding: 0 0 15px 30px;
	background-position: 0 5px;
    line-height: 30px;
}

.tabs .tab-section ul li {
	width: 95% !important;
	float: left;
	border: none !important;
	background: url(../images/grey-disc.png) no-repeat;
	background-size: 18px;
	background-position: 0 0;
	padding: 0 0 15px 6%;
	border-radius: 0 !important;
	margin: 0 !important;
	line-height: 20px;
	list-style: none;
}

.tabs .tab-section ul li a, .tabs .tab-section ol li a, .tabs .tab-section p a {
	border: none !important;
	float: none !important;
	margin: 0 !important;
	color: #899caa !important;
	text-decoration: none;
	border-bottom: none;
	transition: border-bottom .3s ease-in-out;
	-moz-transition: border-bottom .3s ease-in-out;
	-webkit-transition: border-bottom .3s ease-in-out;
}

.tabs .tab-section ul li a:hover, .tabs .tab-section ol li a:hover, .tabs .tab-section p a:hover {
	border-radius: 0;
	border-bottom: 1px solid #899caa !important;
	transition: border-bottom .3s ease-in-out;
	-moz-transition: border-bottom .3s ease-in-out;
	-webkit-transition: border-bottom .3s ease-in-out;
}

.container .content ol li {
	list-style-type: decimal;
	list-style-position: inside;
	background: none;
	padding: 0 0 15px 0;
}

.dark .small, .dark .small-bold, .dark .medium, .container .content ul li, .container .content ol li, .tabs .two ul li  {
	color: #899caa !important;
}

.no-float-ul ul, .no-float-ul ol, .no-float-ul ul li, .no-float-ul ol li {
	float: none !important;
}

.dark .large, .dark .extra-large, .dark .title {
	color: #ffffff !important;
}

.download, .link {
	width: 93% !important;
	background: url(../images/download.png) no-repeat;
	background-size: 27px;
	background-position: 0 5px;
	border: none !important;
	margin: 0 !important;
	padding: 5px 0 10px 9%;
	border-radius: 0 !important;
	font-size: 1.5em;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 35px;
	margin-bottom: 40px;
	color: #ffffff;
	text-decoration: none;
	transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
	-webkit-transition: color .3s ease-in-out;
	line-height: 25px;
}

.download span, .link span {
	width: auto !important;
	height: auto !important;
	border: none !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	font-size: 1em !important;
	text-transform: none !important;
	border-bottom: 2px solid rgba(157, 180, 196, 1) !important;
	color: #9db4c4;
	transition: border .3s ease-in-out;
	-moz-transition: border .3s ease-in-out;
	-webkit-transition: border .3s ease-in-out;
}

.link {
	background: url(../images/link.png) no-repeat;
	background-size: 27px;
	background-position: 0 5px;
}

.download:hover, .link:hover {
	color: #9db4c4;
	transition: color .3s ease-in-out;
	-moz-transition: color .3s ease-in-out;
	-webkit-transition: color .3s ease-in-out;
}

.download:hover span, .link:hover span {
	border-bottom: 2px solid rgba(157, 180, 196, 0) !important;
	transition: border .3s ease-in-out;
	-moz-transition: border .3s ease-in-out;
	-webkit-transition: border .3s ease-in-out;
}

/*-- map --*/

#map-container {
	width: 100%;
	float: left;
	margin-top: 50px;
}

#map {
	max-width: 1000px;
	width: 95%;
	position: relative;
	margin: 0 auto;
	clear: both;
}

#map a {
	height: auto;
	position: absolute;
}

#map a img {
	opacity: 0;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

#map a ul {
	width: 150px;
	position: absolute;
	list-style: none;
	background: #5fbdda;
	opacity: 0;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
	border-radius: 10px;
	color: #ffffff;
	padding: 10px;
	top: 10%;
	left: 50%;
	margin: 0 0 0 -75px;
	pointer-events: none;
	z-index: 1000;
}

#map a:hover ul {
	opacity: 1;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

#map a:hover img {
	opacity: 1;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

#map a ul li {
	width: 50%;
	float: left;
	font-size: 0.8em;
}

#map a ul li:nth-of-type(1) {
	width: 100%;
	font-size: 1em;
}

#map a ul li img {
	visibility: visible;
}

#map a ul .map-arrow {
	width: 20px;
	height: 20px;
	position: absolute;
	bottom: -30px;
	left: 75px;
	margin: 30px 0 0 0;
}

#europe {
	width: 48.2%;
	top: 1.9%;
	left: 41.2%;
}

#africa {
	width: 19%;
	top: 53.1%;
	left: 42%;
}

#americas {
	width: 44.5%;
	top: 0.2%;
	left: 0.1%;
}

#asia {
	width: 20.6%;
	top: 30.9%;
	left: 65.6%;
	z-index: 2000;
}

#central-asia {
	width: 15.6%;
	top: 32.1%;
	left: 53.5%;
	z-index: 2000;
}

#middle-east-north-africa {
	width: 21.8%;
	top: 43.7%;
	left: 42.2%;
}

#oceana {
	width: 22.2%;
	top: 58.1%;
	left: 77.8%;
}

/*-- search page --*/

#search-page h1 {
    width: 95%;
    margin: 0 2.5% 30px 2.5%;
}

#search-page p {
	width: 95%;
	float: left;
	margin: 0 2.5% 30px 2.5%;
}

#search-page ul {
	margin: 0;
}

#search-page ul li {
    width: 45%;
    float: left;
    border: none;
    background: none;
    background-size: 18px;
    border-radius: 0;
    margin: 0 2.5% 25px 2.5%;
    list-style: none;
    padding: 0;
    background-position: 0 5px;
    line-height: 30px;
}

#search-page ul li h2 {
    font-size: 1.7em;
    line-height: 40px;
    padding-bottom: 10px;
}

#search-page ul li a {
    color: #3e5160 !important;
    text-decoration: none;
}

#search-page ul li p {
    display: none;
    line-height: 25px;
    margin: 0;
}

#search-page ul li .excerpt {
    display: block;
}

#search-page ul li a:hover {
    text-decoration: underline;
}

#search-page #form-search {
	width: 95%;
	float: left;
	margin: 0 2.5%;
}

#search-page #form-search label {
	display: none;
}

#search-page #form-search input {
	width: 200px;
	float: left;
	margin: 0;
	padding: 11px;
	font-family: "effra";
	font-size: 1.2em;
	border: 1px solid #9db4c4;
	border-right: none;
	color: #3e5160;
}

#search-page #form-search input:placeholder {
	color: #9db4c4;
}

#search-page #form-search button {
	float: left;
	margin: 0;
	padding: 17px 20px;
	border: none;
    background: #3e5160;
    opacity: 1;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
    color: #ffffff;
}

#search-page #form-search button:hover {
    opacity: 0.8;
	transition: opacity .3s ease-in-out;
	-moz-transition: opacity .3s ease-in-out;
	-webkit-transition: opacity .3s ease-in-out;
}

/*-- core download --*/

#core-download {
	margin: 0 0 0 2.5%;
}

/*-- footer --*/

footer {
	background: #3e5160;
	padding: 0 0 60px 0;
	position: relative;
}

footer .colour-bg {
	margin: 0 0 60px 0;
}

footer p {
	width: 95%;
	color: #ffffff;
	font-weight: 300;
	text-transform: uppercase;
	font-size: 0.8em;
	letter-spacing: 1px;
	padding: 0 2.5%;
}

footer #facebook {
	width: 206px;
	height: 32px;
	float: left;
	background: url(../images/facebook.png) no-repeat top right;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
	margin: 0 0 30px 2.5%;
}

footer #facebook:hover {
	background: url(../images/facebook-hover.png) no-repeat top right;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out;
}

footer #author {
	/* width: 100px; */
	width: 140px;
	height: 50px;
	float: right;
	position: absolute;
	/* top: 115px; */
	top: 105px;
	right: 2.5%;
	/* background: url(../images/david-henderson-design.png) no-repeat top right; */
	/* -webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out; */

	color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 12px;
    display: flex;
    align-items: center;
	justify-content: flex-end;
	transition: all .25s ease-in-out;
}

footer #author svg {
	width: 35px;
	height: auto;
	margin-left: 10px;
}

footer #author:hover {
	color: #8aa2b2;
}

footer #author:hover svg path {
	/* background: url(../images/david-henderson-design-hover.png) no-repeat top right; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	transition: background .3s ease-in-out;
	-moz-transition: background .3s ease-in-out;
	-webkit-transition: background .3s ease-in-out; */
	fill: #8aa2b2;
}

#footer-nav {
    padding: 10px 0 0 2.5%;
}

#footer-nav a {
    margin-right: 15px;
    float: left;
}

.fade, .fade-after {
	visibility: hidden;
    opacity: 0;
}

@media only screen and (min-width: 0px) and (max-width: 1300px) {
	/*-- banner --*/

	#banner .content {
		margin: 0;
    	padding: 0 5%;
		left: auto;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1250px) {
	/*-- layout --*/

	.colored-box p {
		width: 95%;
		padding: 0 2.5%;
	}

	/*-- location check --*/

	#location-check {
		width: 95%;
		padding: 15px 2.5% !important;
	}

	/*-- search --*/

	#search {
		width: 95%;
		padding: 0 2.5%;
	}

	/*-- banner --*/

	#banner .banner-content {
		width: 85%;
		padding: 0 7.5%;
	}

	/*-- story --*/

	.story .container .content {
		margin: 0 5%;
	}

	.story .one.circle-image {
		height: 18vw;
	}

	#tabs .circle-image .image, .circle-image .image {
		height: 13vw;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1200px) {
	/*-- layout --*/

	iframe {
		height: 32vw;
	}

	.colored-box h5 {
		margin-top: 20%;
	}

	.region-background-container p {
		width: 95%;
		margin-left: -50%;
	}

	/*-- location check --*/

	#location-check .content p {
		margin: 0;
	}

	/*-- stories --*/

	.story .circle-image {
		height: 16vw;
	}

	.content-circle-image {
		border-radius: 100%;
		height: 20vw;
	}

	/*-- values --*/

	#tabs li {
		width: 19%;
		border: 20px solid;
	}

	#tabs li a span {
		font-size: 1.4em;
	}

	.container .content ul li, .container .content ol li, .tabs .two ul li {
		width: 95%;
		border: none;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1110px) {
	/*-- layout --*/

	.colored-box, .red-disc, .purple-disc, .blue-disc {
		font-size: 0.7em;
	}

	.red-disc, .purple-disc, .blue-disc {
		padding: 0 1.5% 50px 7.5%;
	}

	.colored-box h5 {
		line-height: 70px;
	}

	/*-- values --*/

	#tabs li {
		width: 19.5%;
		border: 16px solid;
	}

	#tabs li a span {
		font-size: 1.2em;
	}
}

@media only screen and (min-width: 0px) and (max-width: 1000px) {
	/*-- layout --*/

	.medium-2 {
		font-size: 1em;
	}

	/*-- banner --*/

	#banner div .align-left, #banner div .align-right {
		width: 50%;
	}

	#banner .content div .large-text  {
		font-size: 5em;
	}

	#banner .banner-background {
		width: 60%;
	}

	#banner .banner-angle {
		left: 60%;
	}

	#banner .angle-right {
		left: auto;
		right: 60%;
	}

}

@media only screen and (min-width: 0px) and (max-width: 990px) {
	/*-- layout --*/

	.colored-box h5 {
		line-height: 50px;
	}

	/*-- location check --*/

	#location-check {
		width: 100%;
	}

	#location-check .content p {
		width: 90%;
	}

	/*-- values --*/

	#tabs li {
		width: 18%;
		border: 15px solid;
		margin: 50px 0 50px 2.8%;
	}

	#tabs li a {
		width: 86%;
		height: 86%;
	}

	#tabs li a span {
		font-size: 1em;
	}
}

@media only screen and (min-width: 0px) and (max-width: 850px) {
	/*-- layout --*/

	.colored-box h5 {
		margin-top: 10%;
		line-height: 50px;
	}

	/*-- banner --*/

	#banner .banner-content {
		width: 80%;
		padding: 0 10%;
	}

	#banner div .align-left, #banner div .align-right {
		width: 70%;
	}
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
	/*-- layout --*/

	html, body {
		font-size: 12px;
	}

	.container .special-container {
		width: 100%;
		padding-bottom: 200px;
		top: 70% !important;
	}

	.container .special-container .content {
		width: 100%;
		text-align: center !important;
		float: none !important;
		margin: 0 auto !important;
	}

	.container .two-no-padding h5, .container .special-container .content p {
		color: #ffffff !important;
		text-align: center !important;
	}

	.container .two-no-padding h5 {
		width: 95% !important;
		position: relative !important;
		right: auto !important;
		left: auto !important;
		margin: 0 !important;
		padding: 0 2.5% !important;
		top: 30% !important;
	}

	.container .special-container .content .button {
		float: none !important;
		text-align: center !important;
		margin: 0 auto !important;
	}

	.one {
		width: 45%;
	}

	.one-no-padding {
		width: 50%;
	}

	.two {
		width: 95%;
	}

	.four .two {
		width: 100%;
		padding: 30px 0;
	}

	.two-no-padding {
		width: 100%;
	}

	.three {
		width: 45%;
	}

	.three-no-padding {
		width: 50%;
	}

	.third {
		width: 95%;
	}

	.third-no-padding {
		width: 100%;
	}

	.two-thirds {
		width: 95%;
	}

	.two-thirds-no-padding {
		width: 100%;
	}

	.content-circle-image {
		width: 35%;
		height: 35vw;
		margin: 15px 2.5% 20px 2.5%;
		float: left;
	}

	iframe {
		height: 71vw;
		margin-top: 50px;
	}

	h1, h2, h3, h4, h5, h6, p {
		letter-spacing: 1px;
		line-height: 50px;
	}

	.small {
		letter-spacing: 0.5px;
		line-height: 25px;
		margin-bottom: 15px;
	}

	.medium {
		letter-spacing: 0.5px;
		line-height: 25px;
		margin-bottom: 15px;
	}

	.medium-2 {
		font-size: 1.6em;
	}

	.large {
		letter-spacing: 0.8px;
		line-height: 25px;
		margin-bottom: 20px;
	}

	.colored-box {
		height: auto;
		padding-bottom: 100px;
	}

	.red-disc, .purple-disc, .blue-disc {
		width: 41%;
		background-position: 4% 30px;
		padding-top: 25px;
	}

	.colored-box, .red-disc, .purple-disc, .blue-disc {
		font-size: 1.1em;
	}

	.colored-box h5 {
		margin-top: 15%;
		line-height: 100px;
	}

	p img {
		max-width: 100% !important;
		width: 100% !important;
		margin: 30px 0;
	}

	/*-- location check --*/

	#location-check .content p {
	    line-height: 15px;
	}

	/*-- search --*/

	#search {
		margin: 0;
	}

	/*-- navigation --*/

	header nav {
    	margin: 20px 0 !important;
	}

	header .content nav ul li {
	    width: 21.25%;
	}

	header .content nav ul .logo {
		width: 15% !important;
	}

	.logo img {
		width: 100% !important;
		float: left;
	}

	/*-- banner --*/

	#banner {
		height: 360px;
	}

	#banner .content div .large-text {
		width: 70%;
		line-height: 57px;
		margin-top: 50px;
	}

	#banner .content div .small-text {
		width: 70%;
	}

	#banner .banner-background {
		width: 40%;
	}

	#banner .background-right {
		left: auto;
		right: 0;
	}

	#banner .banner-angle {
		left: 40%;
	}

	#banner .angle-right {
		left: auto;
		right: 40%;
		background: url(../images/banner-text-bg-right.png) no-repeat top right;
		background-size: auto 100%;
	}

	#banner-static .content .four p {
		width: 100%;
		padding: 25px 2.5%;
	}

	#banner-static .content .four #right-spacer {
		left: 105%;
	}

	/*-- story --*/

	.story .container .content {
		margin: 0 10%;
	}

	.story .container .content .one {
		width: 56%;
		padding: 0 22%;
	}

	.story .container .content .three {
		width: 95%;
		text-align: center;
	}

	.story .container .content .three a {
		float: none;
		margin: 0 auto;
	}

	.story.third {
		width: 45%;
	}

	.story .circle-image {
		height: 27vw;
	}

	.story .one.circle-image {
		width: 60% !important;
		height: 46vw;
		margin: 0 20% !important;
		padding: 0 !important;
	}
	
	#tabs .circle-image span, .circle-image span {
	    height: 40px;
	}

	/*-- values --*/

	#tabs {
		width: 100%;
	}

	#tabs li {
		width: 35%;
		border: 20px solid;
		margin: 30px 4%;
	}

	#tabs li a {
		width: 88%;
		height: 88%;
		float: left;
		border: 4px solid;
		border-radius: 125px;
		margin: 4%;
	}

	#tabs li a span {
		width: 85%;
		float: left;
		font-size: 2.5em;
		font-weight: 500;
		text-transform: uppercase;
		border-top: 4px solid;
		border-bottom: 4px solid;
		margin: 40% 7.5%;
	}

	.tabs {
		margin: 10px 0 0 0 !important;
	}

	#tabs .circle-image {
		width: 26%;
	}

	#tabs .circle-image .image, .circle-image .image {
		height: 26vw;
	}

	/*-- map --*/

	#map img {
		display: none;
	}

	#map a {
		width: 28%;
		height: auto;
		float: left;
		position: relative;
		top: 0;
		left: 0;
		padding: 10px 0;
		margin: 0 2.5%;
	}

	#map a ul {
		width: 95%;
		float: left;
		position: relative;
		background: #d2ffa4;
		transition: background .3s ease-in-out;
		-moz-transition: background .3s ease-in-out;
		-webkit-transition: background .3s ease-in-out;
		text-align: left;
		opacity: 1;
		border-radius: 30px;
		color: #9ddb5d;
		text-align: center;
		padding: 0 2.5%;
		top: 0;
		left: 0;
		margin: 0;
		pointer-events: all;
	}

	#map a:hover ul {
		opacity: 1;
		background: #ffffff;
		transition: background .3s ease-in-out;
		-moz-transition: background .3s ease-in-out;
		-webkit-transition: background .3s ease-in-out;
	}

	#map a:hover img {
		display: none;
	}

	#map a ul li {
		width: 50%;
		float: left;
		font-size: 1.2em;
	}

	#map a ul li:nth-of-type(1) {
		width: 100%;
	    font-size: 2em;
    	font-weight: 700;
    	margin: 10px 0;
	}

	#map a ul li img {
		visibility: visible;
	}

	#map a ul .map-arrow {
		width: 20px;
		height: 20px;
		position: absolute;
		bottom: -30px;
		left: 75px;
		margin: 30px 0 0 0;
	}

	/*-- search page --*/

	#search-page ul li {
	    width: 95%;
	}

	#search-page ul li .excerpt {
	    line-height: 20px;
	}

	#search-page #form-search button {
	    padding: 14px 16px 15px 16px;
	}

	/*-- content --*/

	.quote {
		padding-left: 0;
		margin-bottom: 25px;
		text-align: left;
	}

	/*-- stories banner --*/

	#regions a {
		float: left;
    	line-height: 20px;
	}
}

@media only screen and (min-width: 0px) and (max-width: 685px) {
	/*-- navigation --*/

	.logo {
		width: 100% !important;
		float: left;
		margin: 0;
		text-align: center;
	}

	.logo img {
		width: 80px !important;
		float: none;
	}

	#menu {
		width: 100%;
		float: left;
		border: none;
		background: none;
		color: #3e5160;
		font-family: "effra";
	    font-size: 1.5em;
	    letter-spacing: 3px;
        font-weight: 900;
        text-transform: uppercase;
		margin: 18px 0 0 0;
		padding: 15px 0;
		clear: both;
	}

	header .content nav ul {
		padding: 12px 0;
		background: url(../images/nav-arrow.png) no-repeat top center;
		background-size: 17px auto;
		background-position: 50% auto;
		margin: 17px 0 0 0;
	}

	header .content nav ul li {
		width: 50%;
		float: left;
		background: #f3f6f8;
	}

	header .content nav ul li img {
		display: none;
	}

	header .content nav ul ul {
		width: 100%;
		visibility: visible;
		position: relative;
		top: 0;
		left: 0;
		margin: -17px 0 0 0;
		border-radius: 0;
		background: none;
		padding-top: 0;
	}

	header .content nav ul ul img {
		width: 12px;
		height: auto;
		margin: -17px 0 0 -6px;
		opacity: 0;
	}

	header .content nav ul ul:nth-child(2n+1) img {
		position: relative;
		left: 25%;
	}

	header .content nav ul ul:nth-child(2n+2) img {
		position: relative;
		left: 75%;
	}

	header .content nav ul ul li {
		width: 100%;
		opacity: 0;
		-webkit-transition: opacity 0.5s ease;
		-moz-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		-o-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
	}

	header .content nav ul ul li:hover {
		width: 100%;
		opacity: 1 !important;
		-webkit-transition: opacity 0.5s ease;
		-moz-transition: opacity 0.5s ease;
		-ms-transition: opacity 0.5s ease;
		-o-transition: opacity 0.5s ease;
		transition: opacity 0.5s ease;
	}

	header .content nav ul ul li:nth-child(4n+2) {  
		background: #ce385b;
	}

	header .content nav ul ul li:nth-child(4n+3) {  
		background: #aa61d6;
	}

	header .content nav ul ul li:nth-child(4n+4) {  
		background: #5fbdda;
	}

	header .content nav ul ul li:nth-child(4n+5) {  
		background: #9ddb5d;
	}

	header .content nav ul ul li a {
		color: #ffffff;
		font-size: 1em;
	}

	header .content nav ul li ul li a {
		padding: 20px 0;
	}

	/*-- banner --*/

	#banner {
		height: 320px;
	}

	#banner .banner-content {
	    width: 75%;
	    padding: 0 12.5%;
	}

	#banner .content div .large-text, #banner-static .content div p {
		font-size: 4em;
	}

	#banner .content div .small-text {
		margin-top: 20px;
	}

	#banner div p {
	    width: 85% !important;
	}

	#banner-static .content .four p {
		line-height: 50px;
	}

	/*-- values --*/

	#tabs li {
		margin: 25px 3%;
	}

	#tabs li a span {
		font-size: 1.8em;
	}

	/*-- map --*/

	#map a {
		width: 45%;
	}
}

@media only screen and (min-width: 0px) and (max-width: 480px) {
	/*-- layout --*/

	.one, .three {
		width: 95%;
	}

	.content-circle-image {
		width: 60%;
		height: 57vw;
		margin: 15px 20% 20px 20%;
	}


	.red-disc, .purple-disc, .blue-disc {
		width: 88%;
		background-position: 2% 30px;
		padding: 25px 0 25px 12%;
	}

	#mobile-nav a {
		width: 90%;
	}

	/*-- location check --*/

	#location-check .content p {
		width: 80%;
	}

	/*-- banner --*/

	#banner .banner-content {
	    width: 75%;
	    padding: 0 12.5%;
	}

	#banner .banner-content div {
	    width: 100% !important;
	}

	#banner .banner-content div p {
	    width: 75% !important;
	}

	#banner .banner-background {
	    width: 50%;
	}

	#banner .angle-left {
	    left: 50%;
	}

	#banner .angle-right {
	    right: 50%;
	}

	#banner-navigation #banner-left, #banner-navigation #banner-right, #story-navigation #story-left, #story-navigation #story-right {
	    width: 30px;
	    height: 30px;
	    margin-top: -15px;
	}

	/*-- story --*/

	.story .container .content {
		margin: 0 12%;
	}

	.story.third {
		width: 95%;
	}

	.story .circle-image {
		height: 55vw;
	}

	/*-- values --*/

	#tabs li {
		width: 37%;
		margin: 25px 3%;
		border-width: 10px;
	}

	#tabs li a {
		border-width: 2.5px;
	}

	#tabs li a span {
		font-size: 1.6em;
		border-width: 2.5px;
	}

	#tabs .circle-image {
		width: 43%;
		padding: 0;
	}

	#tabs .circle-image .image, .circle-image .image {
		height: 43vw;
	}

	/*-- region tabs --*/

	.container .content ul li, .container .content ol li, .tabs .two ul li {
		padding: 0 0 10px 8%;
	}

	.download, .link {
	    padding: 5px 0 10px 10%;
	}

	/*-- map --*/

	#map a {
		width: 95%;
	}

	/*-- footer --*/

	footer #facebook {
		position: relative;
		left: 50%;
		margin: 0 0 30px -103px;
	}

	footer p {
		width: 80%;
		text-align: center;
		line-height: 20px;
		padding: 0 10%;
	}

	footer #author {
		float: left;
		position: relative;
		top: 25px;
		right: auto;
		left: 50%;
		/* margin: 0 0 0 -50px; */
		justify-content: center;
		transform: translateX(-50%);
	}

	footer p#footer-nav {
		display: flex;
		justify-content: center;
		padding: 0 10%;
		margin-top: 35px;
		flex-direction: column;
	}
}

@media only screen and (min-width: 0px) and (max-width: 380px) {
	/*-- banner --*/


	#banner .banner-content div {
	    width: 100% !important;
	}

	#banner .banner-content div p {
	    width: 100% !important;
	}

	/*-- values --*/

	#tabs li a span {
		font-size: 1.3em;
	}
}