@import url('reset.css');
@import url('basic.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css');
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
@import url('http://fonts.googleapis.com/css?family=Amatic+SC');
@import url('http://fonts.googleapis.com/css?family=Josefin+Sans');
@import url('http://fonts.googleapis.com/css?family=Josefin+Slab');


/* ********************************************************** */
/* *********************** HEADER *************************** */

header {
margin: 0;
z-index: 9999;
position: relative;
display: block;
top: 0;
width: 100%;
height: 100px;
border-bottom: 1px solid white;
border-bottom: none;
background: #666666;
text-align: center;
}

.headerBorder {
margin: 0;
z-index: 999;
position: relative;
display: block;
top: 0;
margin-bottom: 0;
width: 100%;
height: 10px;
background: #595858;
}

header img {
height: 250px;
padding: 0;
margin: 0 auto;
}

header .blueBlock {
height: 100%;
background: #7accc8;
width: 65px;
position:absolute;
top: 0;
right: 67px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


header .orangeBlock {
height: 100%;
background: #e67c48;
width: 40px;
position:absolute;
top: 0;
right: 27px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

header .goldBlock {
height: 100%;
background: #ebab22;
width: 27px;
position:absolute;
top: 0;
right:0px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.headerBorder .blueBlock {
height: 100%;
background: #6b9f9c;
width: 65px;
position:absolute;
top: 0;
right: 67px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.headerBorder .orangeBlock {
height: 100%;
background: #c27047;
width: 40px;
position:absolute;
top: 0;
right: 27px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.headerBorder  .goldBlock {
height: 100%;
background: #c2933a;
width: 27px;
position:absolute;
top: 0;
right:0px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


header h1 {
top: 18px;
position: absolute;
font-size: 58px;
font-family: 'Amatic SC', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
color: white;
padding-left: 15px;
display: none;
}

header h1 img{
height: 80px;
}

header ul {
position: absolute;
background-color: white;
right: 20px;
margin: 0;
padding: 0;
font-weight: normal;
}

header ul li {
list-style-type: none;
font-size: .875em;
float: left;
margin-left: 32px;
}

header ul li a {
display: block;
padding-top: 40px;
border-top: 2px solid transparent;
}

header ul li a.toggle {
border-top: 2px solid #f67d34;
}

@media screen and (max-width: 660px) {
header{

}

header img {

}

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 399px) {

}

/* ********************************************************** */
/* ************************ MARQUEE ************************* */

#marquee {
width: 100%;
max-height: 800px;
margin-bottom: -8px;
background: url("../img/marquee.jpg") no-repeat;
background-size: 100%;
text-align: center;
}

#marquee img {
}

#marquee h1 {
bottom: 18px;
right: 20px;
position: relative;
font-size: 58px;
font-family: 'Amatic SC', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
color: white;
padding-left: 15px;
}

#marquee h1 img{
height: 80px;
}

.box{
	position: relative;
	width: 100%;		/* desired width */
}
.box:before{
	content: "";
	display: block;
	padding-top: 54%; 	/* initial ratio of 1:1*/
}


@media screen and (max-width: 775px) {
.box:before{
	padding-top: 45%; 	/* initial ratio of 1:1*/
}
}

@media screen and (max-width: 450px) {
.box:before{
	padding-top: 40%; 	/* initial ratio of 1:1*/
}
}

.marqueeBorder {
margin: 0;
z-index: 999;
position: relative;
display: block;
top: 0;
margin-bottom: 0;
width: 100%;
height: 10px;
background: #b6b6b6;
}

.marqueeBorder .blueBlock {
height: 100%;
background: #98a8a8;
width: 65px;
position:absolute;
top: 0;
right: 67px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.marqueeBorder .orangeBlock {
height: 100%;
background: #aa9487;
width: 40px;
position:absolute;
top: 0;
right: 27px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.marqueeBorder  .goldBlock {
height: 100%;
background: #aea185;
width: 27px;
position:absolute;
top: 0;
right:0px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.bannerBox {
width: 100%;
text-align: center;
z-index:99999;
margin-top:-70px;
position:relative;
}

#titleBanner {
height: 150px;

}



/* ********************************************************** */
/* *********************** SECTION ************************** */

.section {
	width: 100%;
	position: relative;
	display:block;
	padding: 20px 0;
	margin:0;
	overflow: hidden;
}

.section .blueBlock {
height: 100%;
background: #b2c8c7;
width: 65px;
position:absolute;
top: 0;
right: 67px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


.section .orangeBlock {
height: 100%;
background: #c7b2a8;
width: 40px;
position:absolute;
top: 0;
right: 27px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.section .goldBlock {
height: 100%;
background: #ccbea2;
width: 27px;
position:absolute;
top: 0;
right:0px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

.sectionContainer {
max-width: 80%;
margin-left: 10%;
}

.section h1 {
font-size: 52px;
line-height: 58px;
font-family: 'Amatic SC', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
color: black;
padding-left: 15px;
margin-bottom: 5px;
text-align: center;
}

.section h2 {
font-size: 32px;
line-height: 38px;
font-family: 'Amatic SC', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
color: #686868;
padding-left: 15px;
margin-bottom: 20px;
text-align: center;
}

.section p {
font-size: 22px;
line-height: 28px;
font-family: 'Josefin Sans', Helvetica, sans-serif;
font-weight: 300;
color: black;
padding-left: 20px;
}

.centeredGraph{
padding-top: 40px;
text-align: center;
}

.section p img{
max-width: 60%;
margin: auto;
}

.section p.time{
font-size: 18px;
font-family: 'Josefin Sans', Helvetica, sans-serif;
font-weight: 600;
color: black;
padding-left: 20px;
}

.videoDesc {
	display: inline-block;
	width: 28%;
	text-align: top;
	vertical-align: top;
	padding-left: 1%;
	
}

.videoBlock {
	display: inline-block;
	width: 68%;
}

video {
	max-width: 100%;
	margin-bottom: 40px;
}

@media screen and (max-width: 1250px) {
	
	.videoDesc {
	display: block;
	width: 100%;
	margin-bottom: 20px;
}

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

.section h1 {
font-size: 42px;
line-height: 48px;
}

.section p {
font-size: 20px;
}

.section p.time{
display: none;
}

video {
	margin-bottom: 20px;
}

}

@media screen and (max-width: 549px) {

.section h1 {
font-size: 36px;
line-height: 40px;
}

.section p {
font-size: 18px;
}

}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 399px) {

}


/* ********************************************************** */
/* *********************** SOCIAL *************************** */

.social {
padding: 30px 0 10px 0;
display:inline-block;
text-align: top;
vertical-align: top;
}

.social ul {
margin: 0;
padding: 0;
font-weight: normal;

}

.social ul li {
list-style-type: none;
font-size: .875em;
display: inline-block;
margin-left: 12px;
margin-right: 30px;
}

.social ul li a {
color:#000000;
}

.social ul li a:hover {
color:white;
}




@media screen and (max-width: 600px) {

.social ul li {
font-size: .875em;
}

}


@media screen and (max-width: 545px) {

.social ul li {
font-size: .775em;

}
}


@media screen and (max-width: 520px) {

.social ul li {
font-size: .645em;
margin-left: 8px;
margin-right: 35px;
}

}

@media screen and (max-width: 400px) {

.social ul li {
font-size: .545em;
margin-left: 8px;
margin-right: 25px;
}

}



/* ********************************************************** */
/* ********************** CONTACT *************************** */


/* @end */


/* ********************************************************** */
/* *********************** FOOTER *************************** */

footer {
background: #666666;
color:#C7C7C7;
min-height: 150px;
padding: 30px 0 0 40px;
font-size: 14px;
line-height: 22px;
font-family: 'Josephin Sans', Helvetica, sans-serif;
font-weight: 100;
position: relative;
}



footer .blueBlock {
height: 100%;
background: #7accc8;
width: 65px;
position:absolute;
top:0;
right: 67px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


footer .orangeBlock {
height: 100%;
background: #e67c48;
width: 40px;
position:absolute;
top: 0;
right: 27px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}

footer .goldBlock {
height: 100%;
background: #ebab22;
width: 27px;
position:absolute;
top: 0;
right:0px;
-webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}


footer img {
height: 140px;
margin-right: 30px;
display: inline-block;
margin-bottom: 30px;
}

footer h1 {
font-size: 36px;
line-height: 40px;
font-family: 'Amatic SC', 'Open Sans', 'Helvetica Neue', Helvetica, sans-serif;
font-weight: 300;
color: white;
padding-left: 0;
margin-bottom: 10px;
text-align: center;
}

footer .social {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	vertical-align: top;
	margin-top: -10px;
	padding-bottom:30px;
}


footer .caption {
display: inline-block;
margin-right: 40px;	
width: 30%;
text-align: top;
vertical-align: top;
margin-top: 10px;
padding-right: 30px;
border-right: 1px solid #DBDBDB;
}

footer a.btn {
width: 100px;
height: 25px;	
float: right;
margin-right: 20px;
padding-bottom: .4em;
padding-top: .8em;
position: absolute;
right: 0;
top: 0;
}

@media (max-width: 1080px) {

footer {
min-height: 130px;
font-size: 12px;
line-height: 18px;
}

footer img {
height: 120px;
}
}

@media (max-width: 950px) {

footer img{
display: none;
}

footer .caption{
display: block;
text-align:center;
width: 60%;
margin-left:20%;
border-right: none;
}

footer .social {
	width: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

}

@media (max-width: 1250px) {

header .blueBlock, .section .blueBlock, .marqueeBorder .blueBlock, .headerBorder .blueBlock, footer .blueBlock {
width: 55px;
right: 55px;
}


header .orangeBlock, .section .orangeBlock, .marqueeBorder .orangeBlock, .headerBorder .orangeBlock, footer .orangeBlock {
width: 35px;
right: 20px;
}

header .goldBlock, .section .goldBlock, .marqueeBorder .goldBlock, .headerBorder .goldBlock, footer .goldBlock {
width: 20px;
}
}

@media (max-width: 1080px) {

header .blueBlock, .section .blueBlock, .marqueeBorder .blueBlock, .headerBorder .blueBlock, footer .blueBlock {
width: 45px;
right: 35px;
}


header .orangeBlock, .section .orangeBlock, .marqueeBorder .orangeBlock, .headerBorder .orangeBlock, footer .orangeBlock {
width: 25px;
right: 15px;
}

header .goldBlock, .section .goldBlock, .marqueeBorder .goldBlock, .headerBorder .goldBlock, footer .goldBlock {
width: 15px;
}
}

@media (max-width: 840px) {

header .blueBlock, .section .blueBlock, .marqueeBorder .blueBlock, .headerBorder .blueBlock, footer .blueBlock {
width: 38px;
right: 36px;
}


header .orangeBlock, .section .orangeBlock, .marqueeBorder .orangeBlock, .headerBorder .orangeBlock, footer .orangeBlock {
width: 24px;
right: 12px;
}

header .goldBlock, .section .goldBlock, .marqueeBorder .goldBlock, .headerBorder .goldBlock, footer .goldBlock {
width: 12px;
}
}

@media (max-width: 650px) {

header .blueBlock, .section .blueBlock, .marqueeBorder .blueBlock, .headerBorder .blueBlock, footer .blueBlock {
width: 30px;
right: 26px;
}


header .orangeBlock, .section .orangeBlock, .marqueeBorder .orangeBlock, .headerBorder .orangeBlock, footer .orangeBlock {
width: 18px;
right: 8px;
}

header .goldBlock, .section .goldBlock, .marqueeBorder .goldBlock, .headerBorder .goldBlock, footer .goldBlock {
width: 8px;
}
}