html {
	   min-width: 550px;
		 position: relative;
	 }
@media screen and (max-width: 500px) {
	.container .nav-wrapper .brand-logo {
		font-size: 25px;
		display: inline-block;
		text-align: center;
		-webkit-display: inline-block;
		clear: both;
	}
}
@media screen and (max-width: 390px){
	.container .nav-wrapper .brand-logo{
		font-size: 22px;
		display: inline-block;
		text-align: center;
		-webkit-display: inline-block;
		clear: both;
	}
}
.right.hide-on-med-and-down .current{
	background-color: #FFFFFF;
	color: #0D47A1;
	border-bottom: 3px solid #0D47A1;
}
.sidenav .current{
	background-color: #0D47A1;
	color: white;
}
.sidenav .current:hover{
	color: #0D47A1;
}
/* timeline */
.body{
	background-color: #ffffff;
}
/* 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: grey;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

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

/* The circles on the timeline */
.container1::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 19px;
    border-radius: 50%;
    z-index: 1;
}
.container2::after {
    content: '';
    position: absolute;
    width: 25px;
    height: 25px;
    right: -17px;
    background-color: white;
    border: 4px solid #FF9F55;
    top: 19px;
    border-radius: 50%;
    z-index: 1;
}

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

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

/* Add arrows to the left container (pointing right) */
.left1::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid white;
    border-width: 10px 0 10px 10px;
    border-color: transparent #0D47A1;
}

/* Add arrows to the right container (pointing left) */
.right1::before {
    content: " ";
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent #0D47A1;
}

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

.left1::after {
    right: -13px;
}
/* The actual content */
.content {
    padding: 20px 30px;
    background-color: #0D47A1;
	  color: white;
    position: relative;
    border-radius: 6px;
}
td, th {
	  border: 1px solid #dddddd;
    padding: 16px;
}
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .container .nav-wrapper .brand-logo {
		font-size: 25px;
		display: inline-block;
		text-align: center;
		-webkit-display: inline-block;
		clear: both;
	}
  /*td {
		white-space: nowrap;
		border: 1px #cccccc solid;
	}*/
	.scrollmenu {
		width: 500px;
		height: 400px;
		overflow-x: hidden;
		overflow-y: auto;
		transform: rotate(-90deg) translateY(-500px);
		transform-origin: right top;
	}
	.scrollmenu > div {
		width: 500px;
		height: 500px;
		transform: rotate(90deg) translateX(500px);
		transform-origin: right top;
	}
	.timeline::after {
    left: 31px;
  }

  /* Full-width containers */
  .container1 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }
	/* Full-width containers */
  .container2 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

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

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

  /* Make all right containers behave like the left ones */
  .right1 {
    left: 0%;
  }
	#Map{
		width: 100px;
		height: 50px;
	}
	#loc{
		margin-top: 0px;
		margin-left: -100px;
	}
}
.ph:hover{
	text-decoration: underline;
	text-decoration-color: white;
	cursor: pointer;
}
.card-panel.center p .material-icons {
	color: #0D47A1;
}
#scroll {
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    width:50px;
    height:50px;
    background-color:#0D47A1;
    text-indent:-9999px;
    display:none;
    -webkit-border-radius:60px;
    -moz-border-radius:60px;
	  -ms-border-radius:60px;
	  border-radius:60px;
	  transition: 0.2s;
}
#scroll span {
    position:absolute;
    top:50%;
    left:50%;
    margin-left:-8px;
    margin-top:-12px;
    height:0;
    width:0;
    border:8px solid transparent;
    border-bottom-color:#ffffff;
}
#scroll:hover {
    background-color:#000000;
	  transition: 0.3s;
    opacity:1;
	  -webkit-filter:"alpha(opacity=100)";
    -ms-filter:"alpha(opacity=100)";
   	-moz-filter:"alpha(opacity=100)";
  	filter:"alpha(opacity=100)";
}
.card-panel.z-depth-2 .paragraph.paragraph--type--map-and-address.paragraph--view-mode--default.row.m-0.border .col.s12.m6.col-md-12 {
	width: 32vw;
	height: 40vh;
}
.paragraph.paragraph--type--map-and-address.paragraph--view-mode--default.row.m-0.border .col.s12.m6.col-md-12 iframe {
	width: 32vw;
	height: 40vh;
}
.card-panel.z-depth-3 .row.valign-wrapper .col.s8.center {
	padding-right: 80px;
	padding-left: 60px;
	margin-right: 40px;
}