/* @font-face {
  font-family: jfFontO;
  src: url(../fonts/jf-openhuninn-1.1.woff);
} */

@font-face {
    font-family: 'jfFontO';
    src: url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.eot); /* IE9 Compat Modes */
    src: url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.eot?#iefix) format("embedded-opentype"), /* IE6-IE8 */
    url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.woff) format("woff"), /* Modern Browsers */
    url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.ttf) format("truetype"), /* Safari, Android, iOS */
    url(https://cdn.jsdelivr.net/gh/marsnow/open-huninn-font@1.1/font/jf-openhuninn.svg#SealmemoryHeader) format("svg"); /* Legacy iOS */
}	

*{
	font-family: jfFontO , Helvetica , sans-serif;
	text-decoration:none;
}

.bg{
	background-color: #F2F2F2;
	justify-content: center;
	margin: 0 10% 10% 10%;
}

.titlelogo{
    float: left;
}

.content{
	display: inline-block;
	margin: 2em;
	
}

.years {
    min-width: 1040px;
}

.timeBlock {
    background-color: #F15824;
    border-radius: 100px;
    text-align: left;
}


.timeBlock img {
    height: 60%;
    padding: 1.6em;
    text-align: left;
    padding-left: 3em;
}


.content ul{
	white-space: nowrap;
  	transition: all 1s;
}
.years.content ul{
	white-space: initial;
  	transition: all 1s;
}

.content li{
	display: inline-block;
    height: 7.5em;
    width: 29em;
    vertical-align: top;
}
.years.content li{
	display: inline-block;
    height: 240px;
    /* width: 29em; */
    vertical-align: top;
}

.content p {
    color: #808080;
    font-size: .9em;
    font-weight: bold;
    letter-spacing: .02em;
    margin: .6em 0 3em 3em;
}



li.timeBlock{
	margin-left: -8em;
}

li:nth-child(1).timeBlock{
	margin-left: 0;
}

.t2{
	background-color: #FF7F4D;
}
.t3{
	background-color: #FF9368;
}
.t4{
	background-color: #FFAA00;
}
.t5{
	background-color: #C3DE00;
}
.t6{
	background-color: #22B573;
}
.t7{
	background-color: #6CBC64;
}
.t8{
	background-color: #8CC63F;
}
.t9{
	background-color: #FF7F4D;
}
.t10{
	background-color: #3FA2CC;
}
.t11{
	background-color: #5654A2;
}

h4 {
    color: grey;
    text-align: center;
    margin: .8em;
}

.photo {
    width: 10em;
    margin: 1.5em 1em;
}

.photo img {
    width: 100% !important;
    height: 10em !important;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    object-fit: cover;
}

/*
.page{
	margin: 10% 20%;
}*/



.page li {
    width: 15em;
    /* min-height: 240px; */
}

.float_l{
	float: left;
}

.timelinebar {
    height: 7.5em;
    vertical-align: top;
    display: flex;
    padding: 0 37%;
    min-width: 100%;    
}
.years .timelinebar {
    height: 7.5em;
    vertical-align: top;
    display: flex;
    padding: 0;
    min-width: 100%;    
}

.page p.time {
    margin: 3.7em 1em;
    color: #fff;
}

.page .timeBlock img {
    height: 60%;
    padding: 1.6em 0;
    text-align: center;
    padding-left: 3em;
}
h1 {
    font-size: 3em;
    color: #666;
    margin-left: 1em;
}
h3 {
    color: #4c4c4c;
    font-size: 1.5em;
    font-weight: bold;
    letter-spacing: .02em;
    text-align: center;
    margin: .5em 0 0 0;
}

.page .photo p {
    text-align: center;
    margin: 5px !important;
}

/* .info, .page{
	left: 50%;
    top: 40%;
    position: absolute;
    transform: translate(-50%, -50%);
    width: 63em;
} */
.info, .page{
    /* margin-top: 10em; */
    margin-left: 5em;
}
.info .photo {
    width: 14em;
    margin: 0 22%;
}

.info .photo img {
    height: 14em !important;
}

.info h3 {

    font-size: 2.2em;
}

.info.content p {
    text-align: center;
    margin: .6em 2em;
}

.row {
    display: inline-flex;

}

.col-4{
	width: 33.3%;
}

.col-8{
	width: 66.6%;
}

.infoT{
    margin: 0;
	/* margin: 8% 0; */
    /* margin: 5% 0; */
}

.info .infoT p {
    text-align: left;
    font-size: 1.5em;
    line-height: 1.7em;
    letter-spacing: 0;
    color: #4c4c4c;
    font-weight: normal;
}

.info a {
    margin: 2em;
    border-radius: 100px;
    padding: 1em 1.5em;
    color: #fff;
    background-color: gray;
    font-size: 1.3em;
    font-weight: bold;
}

.info a:hover{
	opacity: .9;
}

.blue{
	background-color: #29ABE2 !important;
}

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

.green{
	background-color: #22B573 !important;
}

.link{
	text-align: center;
}

.link li {
    width: auto;
}

.prev {
    width: 3.5em;
    position: fixed;
    left: 2em;
    bottom: 3%;
    z-index: 999;
}

ul.zoom {
    bottom: 0%;
    position: fixed;
    list-style-type: none;
    display: inline-block;
    left: -1em;
}

.zoom li {
    padding: .2em;
    position: relative;
    width: 3em;
    z-index: 999;
}

.timeline_topBlock{
    margin-top: 12em;
}

.timeBlock h2 {
    font-size: 3em;
    color: #fff;
    margin: 0.75em 0 1.1em .9em;
}

/* .yeartitle{
    color: white;
    font-size: 3em;
    height: 60%;
    text-align: left;
    padding-left: 1em;
} */
/* .syeartitle{
    color: white;
    font-size: 3em;
    height: 60%;
    text-align: left;
    padding-left: 1em;
    min-width: 100px;
    margin-block-start: 0;
    margin-block-end: 0;
    display: inline-flex;
    align-self: center;
    height: auto;
} */