* {
  box-sizing:border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Philosopher', sans-serif;
  font-size: 1.5vw;

}

@font-face {
      font-family: 'fontello';
      src: url('../fontello/font/fontello.eot?92135779');
      src: url('../fontello/font/fontello.eot?92135779#iefix') format('embedded-opentype'),
           url('../fontello/font/fontello.woff?92135779') format('woff'),
           url('../fontello/font/fontello.ttf?92135779') format('truetype'),
           url('../fontello/font/fontello.svg?92135779#fontello') format('svg');
      font-weight: normal;
      font-style: normal;
    }
	
.icon {
      font-family: "fontello";
      font-style: normal;
      font-weight: normal;
      speak: never;
     
      display: inline-block;
      text-decoration: inherit;
      width: 1em;
      margin-right: .2em;
      text-align: center;
      /* opacity: .8; */
     
      /* For safety - reset parent styles, that can break glyph codes*/
      font-variant: normal;
      text-transform: none;
     
      /* fix buttons height, for twitter bootstrap */
      line-height: 1em;
     
      /* Animation center compensation - margins should be symmetric */
      /* remove if not needed */
      margin-left: .2em;
     
      /* You can be more comfortable with increased icons size */
      /* font-size: 120%; */
     
      /* Font smoothing. That was taken from TWBS */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
     
      /* Uncomment for 3D effect */
       text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); 
    }

h1, h2, header > p{ 
 text-shadow: -3px 5px 10px #aaa;
}

header {
  text-align:center;
  margin-left:auto;
  margin-right:auto;
  
  	background-origin:border-box;
	background-image: url("img/large-time-tested.jpg");
	background-repeat: no-repeat;
	background-position:left top;
	background-attachment:fixed;
	background-size:cover;
	padding-top:6em;
	padding-bottom:6em;
	color:#374a76;
  }
  
a, a:visited, a:active {
   color: #374a76;
   text-decoration:none;
   outline: none 0;
    border-bottom:1px dotted #ddd;
   }

a:hover {
   color:tomato;
   text-decoration: none;
   border-bottom:1px dotted silver;
   }

nav {
  background-color: #374a76; 
  overflow:hidden;
  box-shadow: 0 0 10px 0 rgba(0,0,0,0.5);

/* fix navbar to top of browser */
 position:fixed;
 top: 0px;
 width:100%;
 z-index:1000; /* Overlay img opacity bug with fixed navbar*/

}

nav a, nav a:visited, nav a:active {
	float:left;
	color:#f2f2f2;
	text-align:center;
	padding:12px 18px;
	font-size: 1.2rem;
	text-decoration:none;
	background-color: #374a76;
	border: none 0;

}

nav a:hover {
	color:#374a76;
	background-color:#eee;
	border-bottom:0px solid transparent;
}

nav a.donut {
	display:none;
	font-size:1rem;
	color:white;
}

.container {
  padding: 4rem;
}

.top-container {padding-top:2.5em;}

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

.column-50 {
  float: left;
  width: 50%;
  padding: 1rem;
  margin-bottom:2rem;
}

.column-66 {
  float: left;
  width: 66.666%;
  padding: 1rem;
}

.column-33 {
  float: left;
  width: 33.333%;
  padding: 1rem;
}

details > p {
  text-align:justify;font-size: 20px
}

div.content > p {
  text-align:justify;font-size: 1.2rem
}

.xl-font {
 font-size: 4rem;
  margin:0 0 30px 0;
}

.l-font {
  font-size: 3rem;
  margin:10px 0 20px 0; 
}

.m-font {
   font-size: 2rem;
   font-weight:bold;
}

p {
   font-size: 1.4rem;
  line-height:1.25;
}

.blue {color:#374a76;}
.red {color:#cd212a}

.center-btn {
   display:block;
   padding-top:1rem;
   margin-left:auto;
   margin-right:auto;
   text-align:center;
}
  
.button, a.button {
	border: 1px solid silver;
	display: inline;
	border-radius: 10px;
	padding: 12px 24px;
	background-color: #374a76;
	color: #fff;
	font-family: 'Philosopher', sans-serif;
	cursor: pointer;	
	box-shadow: 2px 2px 5px #888;
	font-size: 1.5rem;
}

.button:hover {
	color: #fff;
	background-color:#2a3754;
	box-shadow: -2px -2px 5px #888;
}

.collapsible {
  background-color: #798EA4;
  color: white;
  cursor: pointer;
  padding: 1rem;
  width: 100%;
  border-bottom: 1px solid silver;

  text-align: left;
  outline: none;
  font-size: 1.25rem;
}

.active, .collapsible:hover {
  background-color: #374a76;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  padding: 0 18px;
  max-height: 0;
  transition: max-height 0.2s ease-out;
  overflow: hidden;
  background-color: #fcfcfc;

}

details {
	background-color:#fdfdfd;
	padding:10px;
	border:1px solid #ccc;
	border-radius:5px;
	box-shadow: rgba(136, 165, 191, 0.48) 6px 2px 16px 0px, rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;
	margin-bottom:15px;
	color:#374a76;
	}

details summary::marker {
	font-size:1.25rem
	}

details>ul {
	font-size:1.2rem;
	line-height:1.5
}

details>dl {
	font-size:1.2rem;
	line-height:1.5
}
details:hover {
	color:#CD212A;
	}

details[open] {
	background-color: #fff;
	color:#111;
	}
	
details[open] > summary {
	color:#CD212A;
	border-bottom:1px solid #ccc;
	padding-bottom:10px;
	}
	
summary	{
	cursor:pointer;
	transition: color 0.2s;
	}

footer {
  padding:20px;
  text-align:center;
  background-color:#374a76;
  color:white;
  font-size: 1.1rem;
}

#back2top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 15px;
  z-index: 99;
  font-size: 1rem;
  border: none;
  outline: none;
  background-color: #555;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 50%;
    border:3px solid white;
  	box-shadow: 2px 2px 5px #888;
}

#back2top:hover {
  background-color: #CD212A;
  border:3px solid white;
  box-shadow: -2px -2px 5px #888;
}

@media screen and (max-width: 1000px) {
  .column-50,
  .column-66,
  .column-33 {
    width: 100%;
	font-size: 1.25rem;
	padding:0.5rem
	}
  
  .container {
  padding: 0.5rem;
  margin: 0;
	}
	
 .top-container {padding-top:4.5rem;}
 
 .xl-font {
 font-size: 3rem;
	}

 .l-font {
	 font-size: 2rem;
}
   
img {
  display: block;
  height: auto;
  max-width: 100%;
  margin-right:auto;margin-left:auto;text-align:center;
	}

.button, a.button {
	font-size: 1.25rem;
	}
	
.button:hover {
	color: #fff;
	background-color:#374a76 ;
	box-shadow: -2px -2px 5px #888;
}

.topnav {
	position:fixed;
	left:0px;
	right:0px;
	top:0px;
	}


	.topnav a:not(:first-child) {
		display:none;			
	}
	
	.topnav a.donut {
		float:right;
		display:block;
		color:#fff
	}	
	
	.topnav a.donut:hover {
		float:right;
		display:block;
		color:#374a76;
	}
	
	.topnav.responsive {
	position:relative;
	}
	
	.topnav.responsive .donut {
	position:absolute;
	right:0px;
	top:0px;
	}
	
	.topnav.responsive a {
	float:none;
	display:block;
	text-align:left;
	}
}