Template:Vilnius-Lithuania-OG/css/timeln

.tmlnint1{

 width: 100%;
 
 position:relative;
 z-index: 10;
 border: 5px solid #C5CAE9;
 border-radius: 10px;
 margin: auto;
 background: white;
 padding: 5%;

}

.tmlnint1img{

 width: 50%;
 margin: auto;

 margin-bottom: 2%;
 align: center;
 display: block;

}

.modal1 p{

 font-size: 105%;
 line-height: 2.1;
 font-family: 'Lato', sans-serif;

} .modal1 li{ font-size: 105%; margin-left: 7%; margin-bottom: 2%; }

.timeline-content{ text-align: justify }

.pavtestukas{

 position:relative;
 z-index: 10;
 border: 5px solid #C5CAE9;
 border-radius: 10px;

}

  1. part1{
 text-align: justify;
 font-size: 110%;
 

}

  1. part1 .ktarpas{
 visibility: hidden; margin-top: -25px

}

  1. part1 section {
 padding: 100px 0;

}

  1. part1 html, body {
 overflow-x: hidden;

}

  1. part1 body {
 font-family: 'Roboto';
 font-size: 17px;
 font-weight: 400;
 background-color: #eee;

}

  1. part1 h1 {
 font-size: 200%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 400;

}


  1. part1 .timeline {
 position: relative;

}

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

 #part1 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 95%;
   transform: translateX(-50%);
   
 }

}

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

 #part1 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   
 }

}

  1. part1 .timeline-item {
 width: 100%;
 margin-bottom: 70px;

} @media only screen and (min-width: 600px){

 #part1 .timeline-item:nth-child(even) .timeline-content {
   float: right;
   padding: 40px 30px 10px 30px;
 }

}

  1. part1 .timeline-item:nth-child(even) .timeline-content .date {
 right: auto;
 left: 0;

}


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

 #part1 .timeline-item:nth-child(even) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part1 .timeline-item::after {
 content: ;
 display: block;
 clear: both;

}


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

 #part1 .timeline-content {
   position: relative;
   width: 95%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}

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

 #part1 .timeline-content {
   position: relative;
   width: 45%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}


  1. part1 .timeline-content::after {
 content: ;
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;

}

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

 #part1 .timeline-img {
   content: ;
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 95%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

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

 #part1 .timeline-img {
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

  1. part1 a {
 background: #2b828d;
 color: #FFFFFF;
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 20px;
 margin-top: 10px;
 display: inline-block;
 border-radius: 2px;
 box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);

}


  1. part1 .timeline-card {
 padding: 0 !important;

}

  1. part1 .timeline-card p {
 padding: 0 20px;

}

  1. part1 .timeline-card a {
 margin-left: 20px;

}

  1. part1 .timeline-item:nth-child(1) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp1.jpg") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-item:nth-child(2) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp2.jpg") center center no-repeat;
 background-size: cover;

}

.modal01img {

 background-image: url("../images/hp/hp2.jpg");
 width: 100%;
 height: 15em;
  background-position: center;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part1 .timeline-item:nth-child(3) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp3.jpg") center center no-repeat;
 background-size: cover;

}

.modal02img {

 background-image: url("../images/hp/hp3.jpg");
 width: 100%;
 height: 15em;
  background-position: center;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part1 .timeline-item:nth-child(4) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/header/literature.jpg") center center no-repeat;
 background-size: cover;

}


  1. part1 .timeline-item:nth-child(5) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp5.jpg") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-item:nth-child(6) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-item:nth-child(8) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-item:nth-child(10) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-item:nth-child(11) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
 background-size: cover;

}

  1. part1 .timeline-img-header {
 height: 200px;
 position: relative;
 margin-bottom: 20px;

}

  1. part1 .timeline-img-header h2 {
 color: #FFFFFF;
 position: absolute;
 bottom: 5px;
 left: 20px;

}

  1. part1 blockquote {
 margin-top: 30px;
 color: #757575;
 border-left-color: #3F51B5;
 padding: 0 20px;

}

  1. part1 .date {
 background: rgb(207, 58, 108);
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;

}

  1. part1 @media screen and (max-width: 768px) {
 .timeline::before {
   left: 50px;
 }
 .timeline .timeline-img {
   left: 50px;
 }
 .timeline .timeline-content {
   max-width: 100%;
   width: auto;
   margin-left: 70px;
 }
 .timeline .timeline-item:nth-child(even) .timeline-content {
   float: none;
 }
 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part2{
 text-align: justify;
 font-size: 100%;
 

}

  1. part2 .ktarpas{
 visibility: hidden; margin-top: -25px

}

  1. part2 section {
 padding: 100px 0;

}

  1. part2 html, body {
 overflow-x: hidden;

}

  1. part2 body {
 font-family: 'Roboto';
 font-size: 17px;
 font-weight: 400;
 background-color: #eee;

}

  1. part2 h1 {
 font-size: 200%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 400;

}


  1. part2 .timeline {
 position: relative;

}

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

 #part2 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 95%;
   transform: translateX(-50%);
   
 }

}

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

 #part2 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   
 }

}

  1. part2 .timeline-item {
 width: 100%;
 margin-bottom: 70px;

} @media only screen and (min-width: 600px){

 #part2 .timeline-item:nth-child(even) .timeline-content {
   float: right;
   padding: 40px 30px 10px 30px;
 }

}

  1. part2 .timeline-item:nth-child(even) .timeline-content .date {
 right: auto;
 left: 0;

}


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

 #part2 .timeline-item:nth-child(even) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part2 .timeline-item::after {
 content: ;
 display: block;
 clear: both;

}


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

 #part2 .timeline-content {
   position: relative;
   width: 95%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}

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

 #part2 .timeline-content {
   position: relative;
   width: 45%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}


  1. part2 .timeline-content::after {
 content: ;
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;

}

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

 #part2 .timeline-img {
   content: ;
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 95%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

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

 #part2 .timeline-img {
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

  1. part2 a {
 background: #2b828d;
 color: #FFFFFF;
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 20px;
 margin-top: 10px;
 display: inline-block;
 border-radius: 2px;
 box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);

}


  1. part2 .timeline-card {
 padding: 0 !important;

}

  1. part2 .timeline-card p {
 padding: 0 20px;

}

  1. part2 .timeline-card a {
 margin-left: 20px;

}

  1. part2 .timeline-item:nth-child(1) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp6.jpg") center center no-repeat;
 background-size: cover;

}

.modal21img {

 background-image: url("../images/hp/hp6.jpg");
 width: 100%;
 height: 15em;
  background-position: center;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part2 .timeline-item:nth-child(2) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp7.png") center center no-repeat;
 background-size: cover;

}


.modal22img {

 background-image: url("../images/hp/hp7.png");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}


  1. part2 .timeline-item:nth-child(3) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp8.jpg") center center no-repeat;
 background-size: cover;

}


  1. part2 .timeline-item:nth-child(4) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("") center center no-repeat;
 background-size: cover;

}


  1. part2 .timeline-item:nth-child(5) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("") center center no-repeat;
 background-size: cover;

}

  1. part2 .timeline-item:nth-child(6) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
 background-size: cover;

}

  1. part2 .timeline-item:nth-child(8) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
 background-size: cover;

}

  1. part2 .timeline-item:nth-child(10) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
 background-size: cover;

}

  1. part2 .timeline-item:nth-child(11) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
 background-size: cover;

}

  1. part2 .timeline-img-header {
 height: 200px;
 position: relative;
 margin-bottom: 20px;

}

  1. part2 .timeline-img-header h2 {
 color: #FFFFFF;
 position: absolute;
 bottom: 5px;
 left: 20px;

}

  1. part2 blockquote {
 margin-top: 30px;
 color: #757575;
 border-left-color: #3F51B5;
 padding: 0 20px;

}

  1. part2 .date {
 background: #FF4081;
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;

}

  1. part2 @media screen and (max-width: 768px) {
 .timeline::before {
   left: 50px;
 }
 .timeline .timeline-img {
   left: 50px;
 }
 .timeline .timeline-content {
   max-width: 100%;
   width: auto;
   margin-left: 70px;
 }
 .timeline .timeline-item:nth-child(even) .timeline-content {
   float: none;
 }
 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}

  1. part3{
 text-align: justify;
 font-size: 100%;
 

}

  1. part3 .ktarpas{
 visibility: hidden; margin-top: -25px

}

  1. part3 section {
 padding: 100px 0;

}

  1. part3 html, body {
 overflow-x: hidden;

}

  1. part3 body {
 font-family: 'Roboto';
 font-size: 17px;
 font-weight: 400;
 background-color: #eee;

}

  1. part3 h1 {
 font-size: 200%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 400;

}


  1. part3 .timeline {
 position: relative;

}

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

 #part3 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 95%;
   transform: translateX(-50%);
   
 }

}

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

 #part3 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   
 }

}

  1. part3 .timeline-item {
 width: 100%;
 margin-bottom: 70px;

} @media only screen and (min-width: 600px){

 #part3 .timeline-item:nth-child(even) .timeline-content {
   float: right;
   padding: 40px 30px 10px 30px;
 }

}

  1. part3 .timeline-item:nth-child(even) .timeline-content .date {
 right: auto;
 left: 0;

}


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

 #part3 .timeline-item:nth-child(even) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part3 .timeline-item::after {
 content: ;
 display: block;
 clear: both;

}


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

 #part3 .timeline-content {
   position: relative;
   width: 95%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}

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

 #part3 .timeline-content {
   position: relative;
   width: 45%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}


  1. part3 .timeline-content::after {
 content: ;
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;

}

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

 #part3 .timeline-img {
   content: ;
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 95%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

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

 #part3 .timeline-img {
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

  1. part3 a {
 background: #2b828d;
 color: #FFFFFF;
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 20px;
 margin-top: 10px;
 display: inline-block;
 border-radius: 2px;
 box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);

}


  1. part3 .timeline-card {
 padding: 0 !important;

}

  1. part3 .timeline-card p {
 padding: 0 20px;

}

  1. part3 .timeline-card a {
 margin-left: 20px;

}

  1. part3 .timeline-item:nth-child(1) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/header/idea.jpg") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-item:nth-child(2) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp9.png") center center no-repeat;
 background-size: cover;

}


  1. part3 .timeline-item:nth-child(3) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/header/literature.jpg") center center no-repeat;
 background-size: cover;

}


  1. part3 .timeline-item:nth-child(4) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/header/literature.jpg") center center no-repeat;
 background-size: cover;

}


  1. part3 .timeline-item:nth-child(5) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-item:nth-child(6) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-item:nth-child(8) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-item:nth-child(10) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-item:nth-child(11) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
 background-size: cover;

}

  1. part3 .timeline-img-header {
 height: 200px;
 position: relative;
 margin-bottom: 20px;

}

  1. part3 .timeline-img-header h2 {
 color: #FFFFFF;
 position: absolute;
 bottom: 5px;
 left: 20px;

}

  1. part3 blockquote {
 margin-top: 30px;
 color: #757575;
 border-left-color: #3F51B5;
 padding: 0 20px;

}

  1. part3 .date {
 background: rgb(207, 58, 108);
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;

}

  1. part3 @media screen and (max-width: 768px) {
 .timeline::before {
   left: 50px;
 }
 .timeline .timeline-img {
   left: 50px;
 }
 .timeline .timeline-content {
   max-width: 100%;
   width: auto;
   margin-left: 70px;
 }
 .timeline .timeline-item:nth-child(even) .timeline-content {
   float: none;
 }
 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}

  1. part4{
 text-align: justify;
 font-size: 100%;
 

}

  1. part4 .ktarpas{
 visibility: hidden; margin-top: -25px

}

  1. part4 section {
 padding: 100px 0;

}

  1. part4 html, body {
 overflow-x: hidden;

}

  1. part4 body {
 font-family: 'Roboto';
 font-size: 17px;
 font-weight: 400;
 background-color: #eee;

}

  1. part4 h1 {
 font-size: 200%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 400;

}


  1. part4 .timeline {
 position: relative;

}

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

 #part4 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 95%;
   transform: translateX(-50%);
   
 }

}

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

 #part4 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   
 }

}

  1. part4 .timeline-item {
 width: 100%;
 margin-bottom: 70px;

} @media only screen and (min-width: 600px){

 #part4 .timeline-item:nth-child(even) .timeline-content {
   float: right;
   padding: 40px 30px 10px 30px;
 }

}

  1. part4 .timeline-item:nth-child(even) .timeline-content .date {
 right: auto;
 left: 0;

}


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

 #part4 .timeline-item:nth-child(even) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part4 .timeline-item::after {
 content: ;
 display: block;
 clear: both;

}


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

 #part4 .timeline-content {
   position: relative;
   width: 95%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}

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

 #part4 .timeline-content {
   position: relative;
   width: 45%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}


  1. part4 .timeline-content::after {
 content: ;
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;

}

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

 #part4 .timeline-img {
   content: ;
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 95%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

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

 #part4 .timeline-img {
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

  1. part4 a {
 background: #2b828d;
 color: #FFFFFF;
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 20px;
 margin-top: 10px;
 display: inline-block;
 border-radius: 2px;
 box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);

}


  1. part4 .timeline-card {
 padding: 0 !important;

}

  1. part4 .timeline-card p {
 padding: 0 20px;

}

  1. part4 .timeline-card a {
 margin-left: 20px;

}

  1. part4 .timeline-item:nth-child(1) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp10.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(2) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/header/literature.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(3) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("") center center no-repeat;
 background-size: cover;

}


  1. part4 .timeline-item:nth-child(4) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp11.jpg") center center no-repeat;
 background-size: cover;
 

}

.modal41img {

 background-image: url("../images/hp/hp11.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 50%;
 background-size: cover;
 margin-bottom: 5%;

}



  1. part4 .timeline-item:nth-child(5) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp12.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(6) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp13.jpg") center center no-repeat;
 background-size: cover;

} .modal412img {

 background-image: url("../images/hp/hp13.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 15%;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part4 .timeline-item:nth-child(7) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp14.jpg") center center no-repeat;
 background-size: cover;

}


  1. part4 .timeline-item:nth-child(8) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp15.jpg") center center no-repeat;
 background-size: cover;

}


.modal43img {

 background-image: url("../images/hp/hp15.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part4 .timeline-item:nth-child(10) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url() center center no-repeat;
 background-size: cover;

}


.modal44img {

 background-image: url("../images/hp/hp16.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part4 .timeline-item:nth-child(11) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp16.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(14) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp17.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(20) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp18.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-item:nth-child(23) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp19.jpg") center center no-repeat;
 background-size: cover;

}

  1. part4 .timeline-img-header {
 height: 200px;
 position: relative;
 margin-bottom: 20px;

}

  1. part4 .timeline-img-header h2 {
 color: #FFFFFF;
 position: absolute;
 bottom: 5px;
 left: 20px;

}

  1. part4 blockquote {
 margin-top: 30px;
 color: #757575;
 border-left-color: #3F51B5;
 padding: 0 20px;

}

  1. part4 .date {
 background: rgb(207, 58, 108);
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;

}

  1. part4 @media screen and (max-width: 768px) {
 .timeline::before {
   left: 50px;
 }
 .timeline .timeline-img {
   left: 50px;
 }
 .timeline .timeline-content {
   max-width: 100%;
   width: auto;
   margin-left: 70px;
 }
 .timeline .timeline-item:nth-child(even) .timeline-content {
   float: none;
 }
 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}

  1. part5{
 text-align: justify;
 font-size: 100%;
 

}

  1. part5 .ktarpas{
 visibility: hidden; margin-top: -25px

}

  1. part5 section {
 padding: 100px 0;

}

  1. part5 html, body {
 overflow-x: hidden;

}

  1. part5 body {
 font-family: 'Roboto';
 font-size: 17px;
 font-weight: 400;
 background-color: #eee;

}

  1. part5 h1 {
 font-size: 200%;
 text-transform: uppercase;
 letter-spacing: 3px;
 font-weight: 400;

}


  1. part5 .timeline {
 position: relative;

}

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

 #part5 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 95%;
   transform: translateX(-50%);
   
 }

}

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

 #part5 .timeline::before {
   content: ;
   background: #C5CAE9;
   width: 5px;
   height: 110%;
   margin-top: -160px;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   
 }

}

  1. part5 .timeline-item {
 width: 100%;
 margin-bottom: 70px;

} @media only screen and (min-width: 600px){

 #part5 .timeline-item:nth-child(even) .timeline-content {
   float: right;
   padding: 40px 30px 10px 30px;
 }

}

  1. part5 .timeline-item:nth-child(even) .timeline-content .date {
 right: auto;
 left: 0;

}


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

 #part5 .timeline-item:nth-child(even) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}


  1. part5 .timeline-item::after {
 content: ;
 display: block;
 clear: both;

}


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

 #part5 .timeline-content {
   position: relative;
   width: 95%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}

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

 #part5 .timeline-content {
   position: relative;
   width: 45%;
   padding: 10px 30px;
   border-radius: 4px;
   background: #f5f5f5;
   box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
 }

}


  1. part5 .timeline-content::after {
 content: ;
 position: absolute;
 border-style: solid;
 width: 0;
 height: 0;
 top: 30px;
 right: -15px;
 border-width: 10px 0 10px 15px;
 border-color: transparent transparent transparent #f5f5f5;

}

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

 #part5 .timeline-img {
   content: ;
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 95%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

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

 #part5 .timeline-img {
   width: 30px;
   height: 30px;
   background: #3F51B5;
   border-radius: 50%;
   position: absolute;
   left: 50%;
   margin-top: 25px;
   margin-left: -15px;
 }

}

  1. part5 a {
 background: #2b828d;
 color: #FFFFFF;
 padding: 8px 20px;
 text-transform: uppercase;
 font-size: 14px;
 margin-bottom: 20px;
 margin-top: 10px;
 display: inline-block;
 border-radius: 2px;
 box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);

}


  1. part5 .timeline-card {
 padding: 0 !important;

}

  1. part5 .timeline-card p {
 padding: 0 20px;

}

  1. part5 .timeline-card a {
 margin-left: 20px;

}

  1. part5 .timeline-item:nth-child(1) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp20.jpg") center center no-repeat;
 background-size: cover;

}

.modal51img {

 background-image: url("../images/hp/hp20.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}

  1. part5 .timeline-item:nth-child(2) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp21.jpg") center center no-repeat;
 background-size: cover;

}

.modal52img {

 background-image: url("../images/hp/hp21.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}


  1. part5 .timeline-item:nth-child(3) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp22.jpg") center center no-repeat;
 background-size: cover;

}


  1. part5 .timeline-item:nth-child(6) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp23.png") center center no-repeat;
 background-size: cover;

}

  1. part5 .timeline-item:nth-child(7) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp24.jpg") center center no-repeat;
 background-size: cover;

}

.modal53img {

 background-image: url("../images/hp/hp24.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}


  1. part5 .timeline-item:nth-child(8) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp25.png") center center no-repeat;
 background-size: cover;

}

  1. part5 .timeline-item:nth-child(9) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp26.jpg") center center no-repeat;
 background-size: cover;

}

.modal54img {

 background-image: url("../images/hp/hp26.jpg");
 width: 100%;
 height: 15em;
  background-position: 0% 30%;
 background-size: cover;
 margin-bottom: 5%;

}


  1. part5 .timeline-item:nth-child(10) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp27.jpg") center center no-repeat;
 background-size: cover;

}

  1. part5 .timeline-item:nth-child(13) .timeline-img-header {
 background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("../images/hp/hp28.jpg") center center no-repeat;
 background-size: cover;

}

  1. part5 .timeline-img-header {
 height: 200px;
 position: relative;
 margin-bottom: 20px;

}

  1. part5 .timeline-img-header h2 {
 color: #FFFFFF;
 position: absolute;
 bottom: 5px;
 left: 20px;

}

  1. part5 blockquote {
 margin-top: 30px;
 color: #757575;
 border-left-color: #3F51B5;
 padding: 0 20px;

}

  1. part5 .date {
 background: rgb(207, 58, 108);
 display: inline-block;
 color: #FFFFFF;
 padding: 10px;
 position: absolute;
 top: 0;
 right: 0;

}

  1. part5 @media screen and (max-width: 768px) {
 .timeline::before {
   left: 50px;
 }
 .timeline .timeline-img {
   left: 50px;
 }
 .timeline .timeline-content {
   max-width: 100%;
   width: auto;
   margin-left: 70px;
 }
 .timeline .timeline-item:nth-child(even) .timeline-content {
   float: none;
 }
 .timeline .timeline-item:nth-child(odd) .timeline-content::after {
   content: ;
   position: absolute;
   border-style: solid;
   width: 0;
   height: 0;
   top: 30px;
   left: -15px;
   border-width: 10px 15px 10px 0;
   border-color: transparent #f5f5f5 transparent transparent;
 }

}