h3 {text-align: center; }

footer.section p strong {font-family: "Gotham Pro Bold", "sans-serif";}
#contact p {color: #d2d3d4; font-size: 14px; }
#contact .c-4 {font-size: 14px;}

.slider {height: auto; min-height: auto; padding-top: 95px}
.slider p {margin-bottom: 0;}
.slider .text {position: absolute; right: 15px; bottom: 20px; }
.slider .text p {margin-bottom: 5px; }
h5.icontext {font-size: 40px; margin: 0 auto; margin-bottom: 15px; color: #f25c23;
    border:2px solid #f25c23;
    height:100px;
    border-radius:50%;
    -moz-border-radius:50%;
    -webkit-border-radius:50%; background: #fff; width: 80px; height: 80px;}
h5.icontext i {margin-top: 18px;}
#founders { background: #353232; }
#founders h4 {color: #ee7d00; }
#founders .c-3 img {max-width: 100%;}

.slider .text h3 {text-align: left; }


.container-graphic {margin: 40px 0; position: relative;}

	.graphic {height: auto; margin: auto; position: static; padding-bottom: 35px; width: 100%; }


.graphic:after {
    clear: both;
}
.graphic:after {
    content: " ";
    display: table;
}

	.graphic p {margin-bottom: 0;}

	.graphic:before {

		top: 0%;

		left: 120px;

		content: "";

		position: absolute;

		background: #d2d4d4;

		width: 4px;

		height: 100%;

	}

	.graphic .box1, .graphic .box2, .graphic .box3, .graphic .box4, .graphic .box5 {

		position: static;

		padding: 0;

		padding-top: 35px;

	}

	.graphic .box1 {

		width: 790px;

		text-align: left;

		margin-left: 163px;

	}
	
@media (max-width: 1200.98px){
	.graphic .box1 {
	width: 590px;


}
}
@media (max-width: 991.98px){
	.graphic .box1 {
	width: 370px;
	margin-left: -370px;

}
}
@media (max-width: 768.98px){
	.graphic .box1 {
	width: auto;
}
	.graphic .box2 {
		margin-bottom: 0;
}
	.graphic .box3--top .text{
		margin-top: 70px !important;
		margin-bottom: 0 !important;
}
	.box3--last{
	margin-top: 150px !important;
}
}


	
}


	.graphic .box2 {

		width: 100%;

		height: 96px;
		max-width: 350px;
	}

	@media screen and (min-width: 770px) {
		.graphic .box2 {
			position: absolute;
    		top: 50px;
		}
	}



	.graphic .box2 .date {

		position: relative;

		width: 40px;

		top: 5px;

		left: 40px;

	}

	.graphic .box2 .flag {

		position: relative;

		top: -35px;

		left: 100px;

	}



	.graphic .box2 .ttl {

		position: relative;

		width: 187px;

		height: 61px;

		background: url(../img/m_timeline.png) no-repeat;

		padding: 10px 40px 10px 30px;
		text-align: left;
		top: -85px;
		left: 150px;
		font-size: 14px;
		background-size: 100% 100%;
		height: 100%;
		line-height: 20px;
	}

	.graphic .box2 .text {

		position: relative;

		top: 170px;

		left: 162px;

		width: calc(100% - 162px);

	}



	.graphic .box3 {

		width: 100%;
		
		margin-bottom: 20px;

	}



	.graphic .box3 .ttl {

		position: relative;

		top: 0px;

		width: 40px;

		text-align: left;

		left: 40px;

		text-align: center;

	}

	.graphic .box3 .ttl.top20, .graphic .box3 .ttl.top10 {

		top: 10px;

	}



	.graphic .box3 .top {

		position: relative;

		top: 195px;

		width: 170px;

		text-align: left;

		padding-left: 65px;

		left: 113px;

		height: 48px;

		background: url(../img/m_timeline_top.png) no-repeat;

		padding-top: 12px;
		background-size: cover;

	}

	.graphic .box3 .top.top40 {

		position: relative;

		left: 113px;

		 top: -50px;

	}

	.graphic .box3 .top.top20 {

		position: relative;

		left: 113px;

		top: -40px;

	}



	.graphic .box3 .top.top10 {

		position: relative;

		left: 113px;

		top: -40px;

	}

	.graphic .subbox1, .graphic .subbox2, .graphic .subbox3 {position: static; height: auto;}


	.graphic .text {

		background: #fff;

		padding: 10px;

	}

	.graphic .box3 .text {

		position: relative;

		margin-top: 10px;

		margin-left: 350px;

		width: calc(100% - 350px);

		margin-bottom: 30px;


    min-height: 70px;

    top: -15px;

    padding-top: 20px;

	}

  .graphic .box4 .text {

    position: relative;

    margin-top: 10px;

    margin-left: 350px;

    width: calc(100% - 350px);

    margin-bottom: 25px;

    top: -25px;

   padding-top: 20px;

  }

  .graphic-line {
    position: relative;
    padding: 0;

  }



	.graphic .box4 {

		width: 100%;

		padding-top: 0;

		height: auto;


	}



	.graphic .box4 .date {

		position: relative;

   		width: 40px;

		top: 5px;

		left: 40px;

	}



	.graphic .box4 .end {

		position: relative;

		top: -35px;

		left: 100px;

	}



	.graphic .box4 .ttl {

		position: relative;

		width: 166px;

		min-height: 41px;

		background: url(../img/m_timeline_end.png) no-repeat;

		padding: 15px 40px 0 30px;

		text-align: left;

		top: -85px;

		left: 154px;

		font-size: 16px;
		
		padding: 10px 40px 10px 30px;
		text-align: left;
		top: -85px;
		left: 150px;
		font-size: 14px;
		background-size: 100% 100%;
		height: auto;
		line-height: 20px;

	}



	.graphic .box5 {

		text-align: left;

		margin-left: 162px;

		width: auto;

	}


#contact h5 {text-align: center;}

@media screen and (max-width: 991px) {
.slider .text { width: 100%; position: static; padding: 15px; text-align: center; }
.slider .text h3 {text-align: center;}
#contact .c-4 img {max-width: 250px;}
}

@media screen and (max-width: 769px) {
  .graphic .box1 { margin-left: 158px; }
  .graphic .box3 .text {margin-left: 162px; margin-bottom: 85px; top: 55px;  width: calc(100% - 162px);}
  .graphic .box4 .text {margin-left: 162px; margin-bottom: 20px; top: 75px;  width: calc(100% - 162px);}
  .graphic .box4 .text:last-child {margin-bottom: 80px;}
  .graphic-line {height: 1px;}
   #contact .c-4 { text-align: center; margin-bottom: 30px;}
   #contact p {margin: 0 20px;}
   #contact h5 {margin: 0 20px;}

}
@media screen and (max-width: 640px) {
.graphic .box3 .ttl {left: -7px}
.graphic .box2 .date, .graphic .box4 .date, .graphic .box3 .ttl {left: 10px}
.graphic:before {left: 100px;}
.graphic .box2 .flag {left: 80px; }
.graphic .box3 .top.top40 {left: 93px;}
.graphic .box1 {margin-left: 138px; }
.graphic .box2 .ttl {left: 130px; }
.graphic .box3 .text, .graphic .box4 .text {margin-left: 132px;}
.graphic .box3 .text, .graphic .box4 .text {width: calc(100% - 132px);}
.graphic .box3 .top.top20, .graphic .box3 .top.top10 {left: 93px; }
.graphic .box4 .end {left: 80px; }
.graphic .box4 .ttl {left: 134px; }

.container-graphic {padding-bottom: 40px;}

}
@media screen and (max-width: 550px) {
  #blog .masonry-grid-item {width: calc(50% - 25px); padding-bottom: 0;}
  #blog .masonry-grid-item .info {
      position: relative;
      padding: 10px;
      border: 1px solid #eee;
      bottom: 0;
      padding-bottom: 0;
  }
  #blog .masonry-grid-item {margin-bottom: 40px; }
  .masonry-grid-item .info { }
  .masonry-grid-item .info h5 {font-size: 14px; word-wrap: break-word;}
}


/* 2019 */
.slider .text {bottom: 130px; right: 30px;}
.awardsbox {padding: 30px 0;}
.awardsbox .c-4 {padding: 0 60px;}
.awardsbox h4 {color: #ffffff; font-size: 23px;}
.awardsbox h4 span {color: #ffffff; font-size: 14px;}
.awardsbox h4 i {font-size: 50px;
    display: block;
    float: left;
    padding-right: 20px;}
@media screen and (max-width: 1199px) {
.awardsbox .c-4 {padding: 0 30px;}
}
@media screen and (max-width: 999px) {
.awardsbox .c-4 {padding: 0;}
}
@media screen and (max-width: 769px) {
.slider .text {padding-bottom: 30px;}
.awardsbox .c-4 {text-align: center;}
.awardsbox h4 i {float: none; padding: 20px 0;}
}
@media screen and (max-width: 769px) {
.awardsbox {
    padding-top: 0;
}
}