@charset "utf-8";
/* CSS Document */
html, body {
  font-family: 'Open Sans', sans-serif;   color: rgb(235,235,235);background-color:rgb(255,255,255);margin-top:0px;margin-bottom:4px;}

h1 {font-size:150%; color: #0CACF9;}
p {color:#3A3A3A; text-align: justify;}

nav           {z-index: 501; float:right; width:50%;}
nav ul 		  {margin: 0; padding-right:10%; padding-top: 30px; float:right; font-size:110%; height:110px; position:relative;  list-style-type: none; width:100%; }
nav li {    float: left; border-width: 0 1px 0 0; border-color:#7F7C7C; padding:10px;  }
nav a { color:#7F7C7C; text-decoration: none;}

.navigation {   	color: #7F7C7C;}
.navigation__link {    text-decoration: none;   padding: 1em;	font-weight: 400; }
/*  .navigation__link:hover{	background-color: #D8D8D8;	}  */
.navigation__link.active  {  	color: #0CACF9;		   }
.page-section {}

.active {color:#0CACF9; }

.parallax [class*="bg__"] {  position: relative;  background-attachment: fixed;  background-position: top center;  background-size: cover; }
.parallax [class*="bg__"]:nth-child(2n) {  box-shadow: inset 0 0 1em #cccccc;}

.parallax .bg__foo {  background-image: url(img/pic2.jpg);  height:675px;}
.parallax .bg__baz {  background: rgba(167,212,254,1.0);  height:275px; }
.parallax .bg__bazz {  background-image: url(img/pic3.jpg); height:425px;}
.parallax .bg__break {  box-shadow: inset 0 0 1em #111;  background-image: url(img/pic4.jpg);  height:375px;}
.parallax .capture {  float: right;  width: 200px;  padding: 1em;  margin: -1.5em 3em 0 0;  text-indent: 0;  background: rgba(167,212,254, 0.95);  box-shadow: 0 1px 0.125em #333;  color:#fff; font-size: 120%; text-align: center;}

.headerMenu				{  background:#ffffff; height:120px; width:100%;   position: fixed; top:0; left:0; z-index: 1000; border-bottom: solid thick rgba(167,212,254,0.7);}
.headerMenu img			{ float:left; padding-left: 15%;}

.wide50 {width:50%;}
.wide40 {width:40%;}
.wide60 {width:60%;}
.wide20 {width:20%;}
.wide80 {width:80%;}
.left {float:left;}
.right {float: right;}
.pt20	{padding-top:20px;}
.pt40	{padding-top:40px;}
.pt80	{padding-top: 80px;}

.whitebg	{background: rgba(255,255,255,0.95);}

.flexBox		{  display: flex;  justify-content:center; align-items: stretch;  flex-wrap: nowrap; 
					   display: -webkit-flex;  -webkit-justify-content: center;  -webkit-align-items: stretch;  -webkit-flex-wrap: nowrap; }
.item			{  flex-grow:1; align-self:stretch; -webkit-flex-grow:1; -webkit-flex-basis:0; -webkit-align-self:stretch; margin: 0; padding:15px}

.item p {text-align:left;}
.item:nth-of-type(even) { 	background: rgba(167,212,254,1.0);}

article .container {  width: 80%;  margin: 0 auto;}
article .header {  position: relative;  margin: -5em 0 0 0;  padding: 20px 20px 20px 15%;  text-align: left;  font-size: 2em;  color: #333;   background-color: rgba(255, 255, 255, 0.75);}
article h1, article h2 {  margin: 0 0 0.333em;}
article section {  padding: 3em;}
article section.parallax {  margin: 0;  padding: 0;}

#frame {  width:100%;  margin: 0 auto;}


/* Tooltip container */
.tooltip {   position: relative;  display: inline-block; border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ }

/* Tooltip text */
.tooltip .tooltiptext {   visibility: hidden;  width: 100px;  background-color: black;  color: #fff;  text-align: center;  padding: 5px 0;   border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;   z-index: 1;  top: 100%;  left: 50%;   margin-left: -50px;}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {   visibility: visible;}

@media screen and (max-width: 800px) {
	
	nav           {width:100%; background-color: #fff; }
	nav li { padding:0; }
	nav ul 		  { height:30px; font-size:95%; padding-right:1%; float:left;}
	.navigation__link { padding: 0.5em;}
	
	item {width:100%;}
	.flexBox		{  flex-wrap: wrap;  -webkit-flex-wrap: wrap; }
	
	.parallax [class*="bg__"] {   background-size:100%;}
	
	.parallax .bg__baz {  height:auto; }
	
	.parallax .bg__foo {  background-image: url(img/pic2s.jpg);  height:500px;}
	.parallax .bg__bazz {  background-image: url(img/pic3s.jpg); height:225px;}
	.parallax .bg__break {  background-image: url(img/pic4s.jpg);  height:275px;}
	
	
	
	article .container {  width: 95%; } 
	article section {  padding: 1em;}
}