@font-face {
font-family: 'Futura Next';
src: url('/Files/App_002/Fonts/FuturaNext-Light.eot');
src: url('/Files/App_002/Fonts/FuturaNext-Light.eot?#iefix') format('embedded-opentype'),
url('/Files/App_002/Fonts/FuturaNext-Light.woff2') format('woff2'),
url('/Files/App_002/Fonts/FuturaNext-Light.woff') format('woff'),
url('/Files/App_002/Fonts/FuturaNext-Light.ttf') format('truetype'),
url('/Files/App_002/Fonts/FuturaNext-Light.svg#FuturaNext-Light') format('svg');
font-weight: 300;
font-style: normal;
}
#timeline {
width: 100vw;
margin: 15vw auto;
margin-bottom: 0;
position: relative;
background: url(/Files/App_002/images/dot.png) left 2px repeat-x;
}
#timeline li a:hover {
color: #07357a;
}

#dates {
width: 100vw;
/*min-height: 515px;
overflow: hidden;*/
display: flex;
}
#dates li {
list-style: none;
float: left;
width: 20vw;
/*height: 400px;*/
font-size: 24px;
text-align: center;

}
#dates li a:before {
background: #07357a;
    position: absolute;
    width: 8px;
    height: 8px;
    top: -1px;
    content: '';
    border-radius: 50%;
}
#dates li a.selected:before {
display: none;
}
/*#dates a {
line-height: 38px;
padding-bottom: 10px;
}
#dates .selected {
font-size: 38px;
}*/

#issues {
width: 100vw;
/*min-height: 400px;*/
overflow: hidden;
padding-top: 45px;
}	
#issues li {
width: 100vw;
/*min-height: 350px;*/
list-style: none;
float: left;
}

#issues li p {
font-size: 16px;
font-family: 'futura_nextbook';
color: #383838;
}

/*#grad_left,
#grad_right {
width: 100px;
height: 350px;
position: absolute;
top: 0%;
}
#grad_left {
left: 0;
background: url(/Files/App_002/Images/arrow-left-slider.png) no-repeat;
}
#grad_right {
right: 0;
background: url(/Files/App_002/Images/arrow-right-slider.png) no-repeat;
}*/

#next,
#prev {
position: absolute;
top: 0;
top: 50%;
width: 24px;
height: 19px;
background-position: 0 0;
background-repeat: no-repeat;
text-indent: -9999px;
overflow: hidden;
}
#next {
right: 3%;
background-image: url(/Files/App_002/Images/arrow-right-slider.png);
}
#prev {
left: 3%;
background-image: url(/Files/App_002/Images/arrow-left-slider.png);
}
#next.disabled,
#prev.disabled {
opacity: 0.2;
}

.title-timeline {
display: none;
padding-top: 40px;
}
.person img {
display: none;
box-shadow: 0 0px 14px rgba(0,0,0,0.2);
margin-top: -50%;

}

.person.selected img, .person.selected .title-timeline {
display: block;
text-align: left;
width: 100%;
}
.person .title-none {
display: block;
}
.person.selected .title-none {
display: none;
}
.title-none h3 {
font-family: 'Futura Next';
font-weight: 300;
font-style: normal;
font-size: 18px;
padding-top: 30px; 
margin: 0;
text-transform: uppercase;
}
.title-none h4 {
font-weight: 900;
font-style: normal;
font-size: 18px;
margin: 0;
padding-top: 10px;
text-transform: uppercase;
padding: 0 20px;
line-height: 26px;
}

.title-timeline h2 {
font-weight: bold;
font-size: 2.6rem;
font-weight: 700;
line-height: 1.2;
font-size: 16px;
color: #e2001a;
padding-bottom: 1vh;
position: relative;
margin: 0;
padding: 0 20px;
line-height: 26px;
}
.title-timeline h2:before {
content: '';
background: #e2001a;
position: absolute;
left: 0;
width: 50px;
height: 2px;
bottom: 0;
}
.title-timeline h1 {
color: #07357a;
font-size: 30px;
text-transform: uppercase;
padding-bottom: 2vh;
margin-bottom: 0;
margin-top: 20px;
font-weight: 900;
}
.paragOne {
border-right: 1px solid #c9c9c9;
padding-right: 50px !important;
text-align: justify;
}
.paragTwo {
padding-left: 50px !important;
text-align: justify;
position: relative; 
padding-right: 30px !important;
}
.paragTwo:before {
position: absolute;
color: #07357a;
top: -25px;
right: 0;
content: "\f10e";
font-family: 'FontAwesome';
font-size: 30px;
}
.wrapper3 h1.right {
    position: relative;
    padding: 0;
    display: flex;
    float: right;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-bottom: 18vh;
}
.wrapper3 h1.right:before {
    content: '';
    flex: auto;
    display: block;
    width: 185px;
    border: 1px solid #e2001a;
    margin-left: 70px;
    margin-right: 30px;
}
.wrapper3 h1.right span{
    font-size: 60px;
    text-transform: uppercase;
    color: #07357a;
    font-family: 'futura_nextlight';
    text-align: right;
    position: relative;
    display: block;
    width: 100%;

}
.wrapper3 h1.right span {
    order: -1;
    padding-left: 0;
}
@media (max-width: 991px) {
#timeline {
display: none;
}
}
@media (max-width: 991px){
.wrapper3 h1.right {
    margin-bottom: 7vh;
}
}


@media (max-width: 768px){
.wrapper3 h1.right span {
    font-size: 30px;
}
}
@media (max-width: 768px){
.wrapper3 h1.right:before {
    width: 100px;
    margin-left: 40px;
    margin-right: 15px;
}
.wrapper3 h1.right span {
    font-size: 30px;
}
}