@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700&subset=latin-ext');


body {
	font-family: 'Open Sans', sans-serif;
	color: #005941;
	font-size: 14px;
	overflow-x: hidden;
}

a { color: #005941; }
a:hover, a:focus { color: #579f57; text-decoration: none; }

#logo {
	margin: 0 auto;
}

/**
 * TIMELINE
 */

#timeline {
	margin-top: 50px;
}

#timeline_line {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 100%;
	min-height: 784px;
	height: 1565px;
	background-image: url('img/timeline.png');
	background-repeat: repeat-y;
	background-position: center top;
}

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

.box_wrapper .box hr {
	display: none;
	position: absolute;
    top: -30px;
    border: none;
    border-top: 11px dotted #005941;
    border-bottom: 0;
    border-right: 0;
    border-left: 0;
    height: 1px;
    width: 185px;
    border-style: dotted;
    border-spacing: initial;
}

.box_wrapper .box hr.left {
    /* webkit render fix */
    -webkit-transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
    -webkit-transform: translateZ(0);
}

.box_wrapper .box {
	display: none;
	position: relative;
	margin-top: 130px;
	width: 300px;
	border-radius: 45px;
    padding-top: 20px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    z-index: 1;
}

.box_wrapper .box .year {
	width: auto;
    height: auto;
    position: absolute;
    top: -65px;
    right: 0px;
    color: #b2b2b2;
    font-size: 47px;
    font-weight: bold;
    text-align: right;
}

.box_wrapper .box .dot {
	display: none;
	width: 89px;
	height: 90px;
	position: absolute;
	top: -50px;
	left: -50px;
	background-image: url('img/dot_mask.png');
	background-repeat: no-repeat;
}

.box_wrapper .box .dot span {
	position: relative;
	display: block;
	left: 18px;
    top: 21px;
    width: 50px;
    height: 50px;
	background-color: #005941;
	border-radius: 50%;
	z-index: -1;
}

.box_wrapper .box p {
    font-size: 17px;
    line-height: 24px;
}

.box_wrapper .box h2 {
	/*font-size: 30px;*/
	font-size: 25px;
	font-weight: bold;
	margin-top: 0px;
	margin-bottom: 5px;
}

.box_wrapper.n1 .box { color: #242424; float: right; background-color: #eef5dc; border-top-left-radius: 0px; border-bottom-right-radius: 0px; }
.box_wrapper.n1 .box .dot span { background-color: #005941; }
.box_wrapper.n1 .box hr { border-color: #005941; right: 355px; }
.box_wrapper.n1 .box .year { text-align: right; }

.box_wrapper.n2 .box { margin-top: 105px; color: #fff; float: left; background-color: #328662; border-top-right-radius: 0px; border-bottom-left-radius: 0px; }
.box_wrapper.n2 .box .dot { left: auto; right: -50px; }
.box_wrapper.n2 .box .dot span { background-color: #d5e6a0; }
.box_wrapper.n2 .box hr { border-color: #d5e6a0; left: 355px; }
.box_wrapper.n2 .box .year { text-align: left; left: 0; right: auto; }

.box_wrapper.n3 .box { margin-top: 110px; color: #fff; float: right; background-color: #005941; border-top-left-radius: 0px; border-bottom-right-radius: 0px; }
.box_wrapper.n3 .box .dot {}
.box_wrapper.n3 .box .dot span { background-color: #579f57; }
.box_wrapper.n3 .box hr { border-color: #579f57; right: 355px; }
.box_wrapper.n3 .box .year {}
.box_wrapper.n3 .box a { color: #d5e6a0; }
.box_wrapper.n3 .box a:hover,
.box_wrapper.n3 .box a:focus { color: #eef5dc; }

.box_wrapper.n4 .box { margin-top: 80px; color: #242424; float: left; background-color: #eef5dc; border-top-right-radius: 0px; border-bottom-left-radius: 0px; }
.box_wrapper.n4 .box .dot { left: auto; right: -50px; }
.box_wrapper.n4 .box .dot span { background-color: #005941; }
.box_wrapper.n4 .box hr { border-color: #005941; left: 355px; }
.box_wrapper.n4 .box .year { text-align: left; left: 0; right: auto; }
.box_wrapper.n4 .box h2 { font-size: 22px; }

.box_wrapper.n5 .box { margin-top: 60px; color: #fff; float: right; background-color: #328662; border-top-left-radius: 0px; border-bottom-right-radius: 0px; }
.box_wrapper.n5 .box .dot {}
.box_wrapper.n5 .box .dot span { background-color: #d5e6a0; }
.box_wrapper.n5 .box hr { border-color: #d5e6a0; right: 355px; }
.box_wrapper.n5 .box .year {}
.box_wrapper.n5 .box a { color: #d5e6a0; }
.box_wrapper.n5 .box a:hover,
.box_wrapper.n5 .box a:focus { color: #242424; }

.box_wrapper.n6 .box { margin-top: 90px; color: #fff; float: left; background-color: #005941; border-top-right-radius: 0px; border-bottom-left-radius: 0px; }
.box_wrapper.n6 .box .dot { left: auto; right: -50px; }
.box_wrapper.n6 .box .dot span { background-color: #579f57; }
.box_wrapper.n6 .box hr { border-color: #579f57; left: 355px; }
.box_wrapper.n6 .box .year { text-align: left; left: 0; right: auto; }
.box_wrapper.n6 .box a { color: #d5e6a0; }
.box_wrapper.n6 .box a:hover,
.box_wrapper.n6 .box a:focus { color: #eef5dc; }

/**
 * GRAPH
 */

#graph {
	margin-top: 50px;
	margin-bottom: 50px;
}

#graph_wrapper {
	position: relative;
	margin-bottom: 50px;
    margin-top: 20px;
}

#graph_wrapper .n1 {
	display: none;
    position: absolute;
    left: 50%;
    margin-left: -66px;
    top: 142px;
    font-weight: bold;
    color: #579f57;
    font-size: 35px;
    line-height: 41px;
}

#graph_wrapper .n2 {
	display: none;
    position: absolute;
    left: 50%;
    margin-left: -376px;
    top: 72px;
    font-weight: bold;
    color: #d6e7a0;
    font-size: 25px;
    line-height: 28px;
}

#graph_wrapper .n2 hr {
	display: none;
    position: absolute;
    left: 65px;
    top: 80px;
    border-top: 7px dotted #d6e7a0;
    height: 1px;
    width: 155px;
}

#graph_wrapper .n3 {
	display: none;
    position: absolute;
    left: 50%;
    margin-left: -376px;
    top: 240px;
    font-weight: bold;
    color: #005941;
    font-size: 25px;
    line-height: 28px;
}

#graph_wrapper .n3 hr {
	display: none;
    position: absolute;
    left: 105px;
    top: 10px;
    border-top: 7px dotted #005941;
    height: 1px;
    width: 120px;
}

#graph_wrapper .n4 {
	display: none;
    position: absolute;
    left: 50%;
    margin-left: 256px;
    top: 50px;
    font-weight: bold;
    color: #579f57;
    font-size: 25px;
    line-height: 28px;
}

#graph_wrapper .n4 hr {
	display: none;
    position: absolute;
    right: 105px;
    top: 10px;
    border-top: 7px dotted #579f57;
    height: 1px;
    width: 120px;
}

#graph_wrapper .n5 {
	display: none;
    position: absolute;
    left: 50%;
    margin-left: 280px;
    top: 240px;
    font-weight: bold;
    color: #328662;
    font-size: 25px;
    line-height: 28px;
}

#graph_wrapper .n5 hr {
	display: none;
    position: absolute;
    right: 105px;
    top: 10px;
    border-top: 7px dotted #328662;
    height: 1px;
    width: 120px;
}


#svg {
  width: 500px;
  height: 360px;
  margin-left: 100px;
}

/**
 * TEXTS
 */

p.n1 {
	display: none;
    font-size: 47px;
    line-height: 51px;
    color: #579f57;
    font-weight: bold;
    width: 530px;
    margin: 0 auto;
}

p.n7 {
	display: none;
    font-size: 19px;
    line-height: 27px;
	color: #005941;
	font-weight: bold;
    margin: 0 auto;
}

/**
 * FLYCONS
 */

.flycon { background-image: url('img/flycons.png'); background-repeat: no-repeat; position: absolute; display: block; }

.flycon.n1 { background-position: 0px 0px; width: 270px; height: 200px; left: -1700px; }
.flycon.n2 { background-position: -470px 0px; width: 185px; height: 200px; right: -210px; margin-top: 50px; display: none; }
.flycon.n3 { background-position: -290px 0px; width: 160px; height: 200px; left: -1700px; margin-top: 80px; }
.flycon.n4 { background-position: -685px 0px; width: 255px; height: 200px; right: -2100px; margin-top: 50px; }
.flycon.n6 { background-position: -965px 0px; width: 255px; height: 200px; right: 20px; margin-top: 50px; display: none; }

.hide-it,
.mobile-legend { display: none; }

.mobile-legend {
	margin-bottom: 20px;
    margin-top: 20px;
    background-color: #005941;
    border-radius: 45px;
    padding-top: 20px;
    padding-left: 25px;
    padding-right: 25px;
    padding-bottom: 20px;
    list-style: none;
}
.mobile-legend li {
    font-size: 20px;
    font-weight: bold;
    text-align: center;
}
.mobile-legend .n1 { color: #fff; text-transform: uppercase; font-size: 26px; line-height: 28px; padding-bottom: 20px; }
.mobile-legend .n2 { color: #d6e7a0; }
.mobile-legend .n3 { color: #fff; /*005941*/ }
.mobile-legend .n4 { color: #579f57; }
.mobile-legend .n5 { color: #eef5dc; }



/**
 * RESPONSIVE
 */

@media(max-width:1800px) {
	.flycon { display: none !important; }
}

@media(max-width:1199px) {
	.box_wrapper .box hr { width: 85px; }
}

@media(max-width:991px) {
	.box_wrapper .box hr { display: none !important; }
	.box_wrapper .box .dot { display: none !important; }
	.box_wrapper .box { margin-top: 70px; }
}

@media(max-width:769px) {
	.box_wrapper .box { width: 100%;  margin-top: 70px !important; margin-bottom: 30px; }
	#timeline_line { background-image: none; height: auto; }
	#graph { margin-top: 30px; }
	#graph_wrapper div { display: none !important; }
	#svg { margin-left: 0; }
	.hide-it { display: block; }
	p.n1 { width: 100%; font-size: 40px; }
	.row { margin: 0; }
}

@media(max-width:480px) {
	#svg { width: 100%; height: auto; padding-bottom: 50px; }
	p.n1 { font-size: 23px; line-height: 32px; }
	p.n7 { font-size: 14px; line-height: 24px;}
}

@media(max-width:320px) {
	#svg { display: none; }
	.mobile-legend { display: block; }
	#graph_wrapper { margin-top: 10px; margin-bottom: 10px; }
	p.n1 { font-size: 27px; line-height: 31px;}
	p.n7 { font-size: 13px; line-height: 22px;}
}

@media only screen and (min-width : 375px) and (max-width : 720px) {
	#svg { display: none; }
	.mobile-legend { display: block; }
	#graph_wrapper { margin-top: 10px; margin-bottom: 10px; }
	p.n1 { display: block; font-size: 32px; line-height: 40px;}
	p.n7 { display: block;}
}