/*
When setting the primary font stack, apply it to the Pure grid units along
with `html`, `button`, `input`, `select`, and `textarea`. Pure Grids use
specific font stacks to ensure the greatest OS/browser compatibility.
*/
html, button, input, select, textarea,
.pure-g [class *= "pure-u"] {
    /* Set your content font stack here: */
    font-family : 'Oswald', sans-serif;
}

html {
    height : 100%;
    width : 100%;
}

body { 
    height : 100%;
    width : 100%;
}

#main-container {
    width : 100%;
    max-width : 1200px;
    margin : 0 auto;
    height : 100%;
    position : relative;
}

#container {
    position : relative;
    background-color : white;
    max-width : 950px;
    margin : 1em auto 1em auto;
}

#unsupported-browser { 
    display : none;   
}

/*  Nav
*****************************************************************/
#navbar {
    z-index : 6;
    width : 100%;
    max-width : 1200px;
    height : 55px;
    position: fixed;
}

.solid-background {
    background-color : white;
}

nav.main {    
    position : absolute;
    z-index : 5;
    top : 0.5em;
    left : 0.5em;
}

nav.language-bar  {    
    position : absolute;
    z-index : 5;
    top : 0.5em;
    right : 0.5em;
    text-transform : uppercase;
}

.dropmenu {    
    padding : 0;
    margin : 0;
    list-style-type : none;
    height : 50px;
}

.dropmenu .dropmenu-item { 
    float : left;     
}

.dropmenu .dropmenu-item .dropmenu-link {
    padding : 11px 20px;
    display : block;    
    text-decoration : none;
    text-transform : uppercase;
    cursor : pointer;
}

.dropmenu .dropmenu-item .dropmenu-link:hover {
    font-weight : bold;
}

.dropmenu .submenu {
    position : absolute;
    display : none;
    list-style-type : none;
    background-color : white;
}

.dropmenu .dropmenu-item:hover { 
    position : relative;     
}

.dropmenu .dropmenu-item:hover .submenu {
    display : block;
    left : 0;
    top : 20px;    
    padding : 0 13px;
}

.dropmenu .dropmenu-item:hover .submenu .submenu-item .submenu-link {
    padding : 2px 5px;
    display : block;
    width : 168px;    
    cursor : pointer;
    text-transform : uppercase;
    text-decoration : none;
}

.submenu-link:hover {
    font-weight : bold;
}

.dropmenu .dropmenu-item:hover .submenu  .submenu-item .submenu {
    display : none;
}

.dropmenu .dropmenu-item:hover .submenu .submenu-item:hover   .submenu {
    display : block;
    left : 160px;
    top : -5px;
}

.align-fix {
    padding : 17px 0 0 0 !important;
}

/* header ========================================================================= */
#header {
    text-transform : uppercase;
    position : relative;
    height : 100%;
    min-height : 600px;
}

#header .header-container {
    z-index : 1;
    position : absolute;
    width : 900px;
    height : 360px;
    margin : auto;
    padding-top : 15%;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
}

#header  .logo-container {
    z-index : 1;    
    width : 267px;    
    padding : 1em;
    margin : 0 auto;
}

#header .logo-container .logo {
    width : 100%;
    height : auto;
}

/* animation in the header, the 3 circles need a crazy tween */
#header-animation {
    z-index : 1;   
    width : 900px;
    height : 360px;
    margin : auto;
    top : 0;
    left : 0;
    bottom : 0;
    right : 0;
}

#header-animation .circle {
    position : absolute;
    width : 38%;
    height : auto;
}

#header-animation .circle .container {
    position : relative;    
}

#header-animation .circle .container img {    
    width : 100%;
    height : 100%;
    opacity : 0.85;
}

#header-animation  .circle .container .tagline {
    position : absolute;
    z-index : 4;
    top : 42%;
    width : 100%;
    text-align : center;
    color : white;
    font-size : 2em;
}

#header-animation .yellow-circle {
    left : 35%;
    z-index : 2;
}

#header-animation .red-circle {
    left : 35%;
    z-index : 3;
}

#header-animation .blue-circle {
    left : 35%;
    z-index : 1;
}

#header-animation .final-line {
    position : absolute;
    color : white;
    font-family : 'Oswald', sans-serif;
    font-size : 2em;
    line-height : 1.2em;
    text-align : center;
    width : 250%;
    top : 38%;
    margin-left : -75%;
    z-index : 6;
}              

.logo {
    width : 250px;
    height : auto;
}

.logo-small {
    width : 200px;
    height : auto;
    margin : 1em;
}

.pull-right {
    text-align : right;
    float : right;
}

.pull-left {
    text-align : left;
    float : left;
}

.align-center {
    margin : 0 auto;
    text-align : center;
}

/* sections -----------------------------------------------------------------*/
.company-section {
    position : relative;    
    min-height : 430px;
    overflow : hidden;
}

.company-section.no-split {
	height : 100%;
}

.company-section.split { 
    height : 50%;
}

section  {
    
}

section .bg {
    position : absolute;
    left : 0;
    top : 0;
    width : 100%;
    height : 100%;
	overflow : hidden;
}

section .bg img {
    width : 100%;
    min-height : 100%;
    height : auto;
	overflow : hidden;
}

.company-section .container, .slideshow  {
    position : relative;
    width : 795px;
    z-index : 2;
    margin : 0 auto;
    padding : 4em 1em 1em 1em;
}

.company-section .section-container {
    width : 795px;
    text-align : center;
}

.company-section .section-container-1 {
    width : 795px;
}

.company-section .section-container-3 {
    width : 795px;
}

.company-section .section-container-4 {
    width : 265px;
}

.company-section .container h1 {
    font-family : 'Oswald', sans-serif;
    text-transform : uppercase;
    text-align : center;
    font-size : 2.7em;
    line-height : 1.1em;
    margin : 0 0 0.6em 0;
    color : white;
}

.company-section p {
    color : white;
    margin : 0;
}

.company-section a {
    color : white;
}

.company-section .companies {
    color : white;
    padding : 0;
    font-size : 1.5em;
    position : absolute;
    left : 0;
    bottom : 0;
    margin : 1em;
    text-transform : uppercase;
}

.company-section .companies   li {
    display : inline-block;
    padding-right : 1em;
}

.company-section .companies   li .small {
    font-size : 1em;
    line-height : 1.1em;
    margin : 0;
}

.company-section .companies   li .large {
    font-size : 1.3em;
    line-height : 1em;
    margin : 0;
}

.company-section .contact-icons {
    color : white;
    padding : 0;
    font-size : 2em;
    text-align : center;
    margin : 0.8em;
}

.company-section .contact-icons  li {
    display : inline-block;
    padding-right : 0.5em;
}

.company-section .contact-icons li:last-child {
    padding-right : 0;
}

.company-section .contact-icons li a {
    text-decoration : none;
}

.hidden-on-load {
    display : none;
}

.no-break {
    white-space : nowrap;
}

.tall-address {
    display : none;
}

.hide {
    display : none;    
}

/* colors -------------------------------------------------------------------*/
.yellow {
    color : #fbbd09 !important;
}

.red {
    color : #d22027 !important;
}

.blue {
    color : #303277 !important;
}

.white {
    color : white !important;
}

.yellow-bg {
    background-color : #fbbd09 !important;
}

.red-bg {
    background-color : #d22027 !important;
}

.blue-bg {
    background-color : #303277 !important;
}

.white-bg {
    background-color : #ffffff !important;
}

/* override q-tip styles */
.qtip {
    text-transform : uppercase;
}

.qtip-light {
    background-color: transparent;
    border: none;
    color: white;
}

.qtip .qtip-tip canvas {
    display : none;
}

.qtip-content {
    padding : 0px; 
    font-size : 11px;
    text-align : center;
}

@media screen and (max-width:900px) {
	
    #header .header-container {
        width : 560px;
        padding-top : 20%;
    }
    
    #header  .logo-container {
        width : 180px;    
    }
    
    #header-animation  .circle .container .tagline {
        font-size : 1.3em;
    }
    
	#header-animation {
		width : 560px;
	}
	
    #header-animation  .final-line {
        font-size : 1.3em;
    }
    
    .company-section .container, .slideshow  {
        width : 560px;
    }
    
    .company-section .section-container {
        width : 560px;
    }
    
    .tall-address {
        display : none;
    }
}

/* iPhone 6 landscape needs special handling */
@media screen and (width:667px) {
	#navbar {
		display : none;
	}
    
	#header .header-container {
        width : 450px;
        padding-top : 8%;
    }
    
	#header-animation {
		width : 450px;
	}
	
    #header-animation  .circle .container .tagline {
        font-size : 0.8em;
    }
    
    #header-animation  .final-line {
        font-size : 0.8em;
    }
	
	section {
	}
	
	.company-section .container, .slideshow  {
		padding : 2em 1em 1em 1em;
	}
	
    .company-section .container, .slideshow  {
        width : 500px;
    }
    
    .company-section .container, .slideshow  {
        width : 475px;
    }
    
    .company-section .section-container {
        width : 475px;        
    }
    
    section .bg {
        position : absolute;
        left : 0;
        top : 0;
        width : auto;
        height : 100%;
    }

    section .bg img {
        width : auto;
        min-height : 100%;
        height : auto;
    }
    
	/* fine tune trading section background */
	#section-4 .bg img {
		width : auto;
		height : 700px;
		margin-top : -320px;
		margin-left : -180px;
	}
	
    #section-7.company-section.split {
		min-height : 0;
		height : 150px;
    }
	
	.company-section.split {
	  height: 100%;
	}
	
	.logo-small {
		width : 125px;
	}
        
}

@media screen and (max-width:568px) {
	#navbar {
		display : none;
	}
    
	#header .header-container {
        width : 450px;
        padding-top : 8%;
    }
    
	#header-animation {
		width : 450px;
	}
	
    #header-animation  .circle .container .tagline {
        font-size : 0.8em;
    }
    
    #header-animation  .final-line {
        font-size : 0.8em;
    }
	
	section {
	}
	
	.company-section .container, .slideshow  {
		padding : 2em 1em 1em 1em;
	}
	
    .company-section .container, .slideshow  {
        width : 500px;
    }
    
    .company-section .container, .slideshow  {
        width : 475px;
    }
    
    .company-section .section-container {
        width : 475px;        
    }
    
    section .bg {
        position : absolute;
        left : 0;
        top : 0;
        width : auto;
        height : 100%;
    }

    section .bg img {
        width : auto;
        min-height : 100%;
        height : auto;
    }
    
	/* fine tune trading section background */
	#section-4 .bg img {
		width : auto;
		height : 700px;
		margin-top : -320px;
		margin-left : -80px;
	}
	
	
    #section-7.company-section.split {
		min-height : 0;
		height : 150px;
    }
	
	.company-section.split {
	  height: 100%;
	}
	
	.logo-small {
		width : 125px;
	}
    
    .wide-address {
        display : none;
    }
    
    .tall-address {
        display : block;
    }
}

@media screen and (max-width:375px) {
	#navbar {
		display : none;
	}
    
	#header .header-container {
        width : 320px;
        padding-top : 30%;
    }
    
	#header-animation {
		width : 320px;
	}
	
    #header-animation  .circle .container .tagline {
        font-size : 0.8em;
    }
    
    #header-animation  .final-line {
        font-size : 0.8em;
    }
	
	.company-section .container, .slideshow  {
		padding : 3em 1em 1em 1em;
	}
    .company-section .container, .slideshow  {
        width : 500px;
    }
    
    .company-section .container, .slideshow  {
        width : 290px;
    }
    
    .company-section .section-container {
        width : 290px;        
    }
    
    section .bg {
        position : absolute;
        left : 0;
        top : 0;
        width : auto;
        height : 100%;
    }
	
	/* fine tune trading section background */
	#section-4 .bg img {
        width: auto;
		min-height: 100%;
		height: auto;
		margin-top : 0;
		margin-left: -315px;
    }

    section .bg img {
        width : auto;
        min-height : 100%;
        height : auto;
    }
    
    #section-7.company-section.split {
		min-height : 0;
		height : 150px;
    }
	
	#section-7.company-section .container  {
		padding : 1em;
	}
	
	.company-section.split {
	  height: 100%;
	}
	
	.logo-small {
		width : 125px;
	}
    
    .wide-address {
        display : none;
    }
    
    .tall-address {
        display : block;
    }
}