/*body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}*/

body, html {
height: 100%;
line-height: 1.8;
}

.pointer {
cursor: pointer;
}

  /* Make the image fully responsive */
  .carousel-inner img {
    width: 100%;
    height: 75%;
  }

/* Full height image header 
.bgimg-1 {
background-position:  top;
background-size: cover;
background-image: url("bg01.png");
min-height: 75%;
}
*/
/* Full height image header 
.bgimg-2 {
background-position: center;
background-size: cover;
background-image: url("bg02.jpg");
min-height: 100%;
}
*/
/* 
.w3-bar .w3-button {
padding: 16px;
}
*/

.txt5C922F{color:#5C922F;}
.txtAE740B{color:#AE740B;}
.txt6B4357{color:#6B4357;}

.bg5C922F{
background:#5C922F;
color:#FFF;
}

.bgAE740B{
background:#AE740B;
color:#FFF;
}

.bg6B4357{
background:#6B4357;
color:#FFF;
}

a:link {
text-decoration: none;
}

.bg0 {
min-height: 50vh;
background: url('bg01.png');
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
background-size: cover;
}

.bg1 {
min-height: 50vh;
background: url('bg02.jpg');
background-repeat: no-repeat;
background-position: top;
background-attachment: fixed;
background-size: cover;
}

#myBtn {
display: none;
position: fixed;
bottom: 20px;
right: 30px;
z-index: 99;
font-size: 18px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}

#myBtn:hover {
background-color: #555;
}


/* The actual timeline (the vertical ruler) */
.timeline {
position: relative;
max-width: 1200px;
margin: 0 auto;

}

/* The actual timeline (the vertical ruler) */
.timeline::after {
content: '';
position: absolute;
width: 6px;
background-color: white;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;

}

/* Container around content */
.timeline_container {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}

/* The circles on the timeline */
.timeline_container::after {
content: '';
position: absolute;
width: 25px;
height: 25px;
right: -12px;
background-color: white;
border: 4px solid #FF9F55;
top: 15px;
border-radius: 50%;


}

/* Place the container to the left */
.left {
left: 0;
}

/* Place the container to the right */
.right {
left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;

right: 30px;
border: medium solid white;
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right::before {
content: " ";
height: 0;
position: absolute;
top: 22px;
width: 0;

left: 30px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right::after {
left: -12px;
}

/* The actual content */
.timeline_content {
padding: 20px 30px;
background-color: white;
position: relative;
border-radius: 6px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
/* Place the timelime to the left */
.timeline::after {
left: 31px;
}

/* Full-width containers */

.timeline_container {
width: 100%;
padding-left: 70px;
padding-right: 25px;
}

/* Make sure that all arrows are pointing leftwards */
.timeline_container::before {
left: 60px;
border: medium solid white;
border-width: 10px 10px 10px 0;
border-color: transparent white transparent transparent;
}

/* Make sure all circles are at the same spot */
.left::after, .right::after {
left: 15px;
}

/* Make all right containers behave like the left ones */
.right {
left: 0%;
}

}