/*
 Copyright © 2016 Alexander Karasev. All rights reserved.
 @link        http://karasevstudio.com
 @version     0.8
 @package     KarasevStudio
 
 https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties
 http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
*/
html, body {
  min-height: 100%;
  padding: 0;
  margin: 0;
  background-color: white;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
}



#wrapper {
  padding: 3em 0 2em 0;
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

#header, #article, #show {
	padding-left: 3em;
	padding-right: 3em;
}

@media screen and (min-device-width: 850px) {
#wrapper { /* extra narrow window on big monitor */
	min-width: 58em;
}
}
@media screen and (min-device-width: 1020px) and (min-width: 88em) {
#header, #article, #show {
	padding-left: 15%;
	padding-right: 15%;
}
}
@media screen and (min-device-width: 1020px) and (min-width: 104em) {
#header, #article, #show {
	padding-left: 25%;
	padding-right: 25%;
}
}



#header {
  color: white;
	background-color: #262626;
  margin-top: -3em;
  height: 3em;
  /* padding: 0.2em 3em 0 3em; */
  padding-top: 0.2em;
  padding-bottom: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: auto;
}
#header .left {
  float: left;
  line-height: 1.62em;
  font-size: 154%;
  vertical-align: 8%;
  font-weight: 300;
  margin-right: 1em;
}
#header .right {
  float: right;
  text-align: right;
  line-height: 1.67em;
  font-size: 154%;
  
}
#header .middle {
  margin: 0 auto;
  text-align: center;
}
#header img.logo {
  /* margin-top: 0.8em; */
  margin-right: 0.33em;
  height: 1em;
  width: auto;
  border: 0;
  position: relative;
  top: 0.11em;
}
#header a {
  color: white;
  text-decoration: none;
}


#header .nav ul, #header ul.nav {
  text-align: center;
  list-style: none;
  font-size: 110%;
  font-weight: 300;
  padding-left: 9em;
  margin: 0;
}
#header .nav li, #header li.nav {
	float: left;
  line-height: 2.5em;
  padding: 0 0.7em;
}
#header .nav li:hover, #header li.nav:hover {
  font-weight: 400;
  letter-spacing: -0.015em;
  /* color: #EEE; */
	background-color: #363636;
}


#footer {
  margin-bottom: -2em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  font-size: 90%;
  text-shadow: 0 0 0.8em white;
}


#show {
  background-color: white; /* #d6dbdf; */
  background-image: url(/img/bg-doc1.jpg);
  background-position: right bottom;
  background-repeat: no-repeat;
  min-height: 580px;
  height: 85%;
  max-height: 938px;
}
#show h1 {
  /* font-family: 'Arial Black', Arial, Helvetica, sans-serif; */
	font-weight: 900;
	font-size: 600%;
  /* white-space: nowrap; */
  color: #c0c7c8;
  opacity: 0.8;
	text-shadow: 1px 1px 0px rgba(255,255,255,0.6), -1px -1px 0px rgba(0,0,0,0.4);
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=45,strength=1);
}
#show ul {
	font-size: 200%;
	font-weight: 300;
	text-shadow: 0 0 0.12em rgba(255,255,255,0.75), 0 0 0.6em rgba(255,255,255,0.9);
  line-height: 190%;
	color: #338;
  list-style-position: inside;
  padding-left: 0.2em;
  list-style-type: circle;
  min-width: 10em;
  /* width: 40%; */
}
#show em {
  font-size: 175%;
	line-height: 75%;
	font-style: normal;
  font-weight: 900;
  opacity: 0.65;
  vertical-align: -9%;
}

#show img {
  width: 70%;
  height: auto;
  float: left;
  margin-right: 2em;
}



#article, #show {
  padding-top: 1.5em;
  padding-bottom: 0.8em;
}
#article {
  font-weight: 300;
  font-size: 96%;
  line-height: 160%;
	/* max-width: 110em; */
}
#article h1, #article h2, #article h3, #article h4,
#show h1, #show h2, #show h3, #show h4 {
  font-style: normal;
	line-height: 100%;
  font-smooth: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision; /* optimizeLegibility; */
  margin: 1.2em 0 0.1em 0;
}
#article h1:first-child, #article h2:first-child,
#show h1:first-child, #show h2:first-child { 
  margin: 0.3em 0 0.1em 0;
}
#article h1 {
  font-weight: 100;
	font-size: 360%;
}
#article.error h1 {
  color: #C00;
}
#article h2, #show h2 {
  font-weight: 200;
	font-size: 200%;
}
#article h3, #show h3 {
  font-weight: 300;
	font-size: 130%;
}
#article h4, #show h4 {
  font-weight: 400;
	font-size: 115%;
}
#article .subtitle {
	font-size: 98%;
	font-variant: small-caps;
	letter-spacing: .5em;
	/* font-stretch: extra-expanded; */
}
#article .right {
  float: right;
  margin-left: 1.2em;
  min-width: 240px;
  width: 49%;
  max-width: 1200px;
  height: auto;
}
#article ul.faq {
  list-style-position: inside;
  list-style-type: none;
  padding-left: 0.2em;
}
#article ul.faq li {
  padding-bottom: 1em;
}
#article dt, #article ul.faq li::first-line {
  font-weight: 400;
	font-size: 110%;
}
#article dt::first-letter, #article ul.faq li::first-letter {
  font-size: 150%;
}
#article dd {
  margin-left: 1.8em;
  padding-bottom: 1em;
}

#article table, #article th, #article td {
	border: 1px solid black;
	border-collapse: collapse;
}
#article th, #article td {
  padding: 0 0.2em;
  width: 11em;
}
#article th {
  font-weight: 500;
}
#article tbody th { /* left column */
  text-align: left;
  width: 15em;
}
#article tbody td {
  text-align: center;
  line-height: 80%;
  height: 3em;
}
#article td.num {
  text-align: right;
  padding-right: 2em;
}
#article table caption {
  caption-side: bottom;
  text-align: left;
	font-size: 80%;
  line-height: normal;
}
#article th.our, #article td.our {
  background-color: #EFF9FF;
}
#article td.yes::first-letter, #article td.no::first-letter {
  font-size: 150%;
}
#article td.yes {
  color: #00B000; 
}
#article td.no {
  color: #E00000;
}

#article img.logo {
  height: 0.78em;
  width: auto;
  float: left;
  margin: 0.4em 0.1em 0.1em 0.1em;
}

.thumbnails img, img.thumbnail {
  width: 10em;
  height: auto;
  margin: 0.2em 0.5em 0.3em 0;
  -webkit-transition: all 0.12s ease-in-out;
  -moz-transition: all 0.12s ease-in-out;
  -o-transition: all 0.12s ease-in-out;
  transition: all 0.12s ease-in-out;
}
.thumbnails img:hover {
  -ms-transform: scale(2.2);
  -webkit-transform: scale(2.2);
  transform: scale(2.2);
}
/* todo: sharper pop-up
.thumbnails, * < img.thumbnail {
  position: relative;
}
.thumbnails img:hover, img.thumbnail:hover {
  position: absolute;
  top: -5em;
  left: 2em;
  z-index: 10;
  height: auto;
  max-height: 40em;
	box-shadow: 0.3em 0.5em 2.6em -0.3em rgba(20,20,30,0.4); 
}
.thumbnails img:hover + img, img.thumbnail:hover + img {
 margin-left: 10em;
}*/
/* http://www.w3schools.com/cssref/css3_pr_box-shadow.asp */

.video {
  width: 853px;
  height: 480px;
}


#article a {
  position: relative;
  color: #0020C0;
}
#article a:visited {
  color: #606;
}
#article a:active {
  top: 0.12em;
}

a < div.preview {
  position: relative;
}
a:hover > .preview {
  opacity: 1;
  display: block;
}
a .preview {
  z-index: 10;
  position: absolute;
  top: 1.4em;
  left: 2em;
  border: 1px solid rgba(20,20,50,0.4);
  border-radius: 0.3em;
  background-color: white;
  box-shadow: 0.3em 0.5em 2.6em -0.3em rgba(20,20,30,0.4); /* http://www.w3schools.com/cssref/css3_pr_box-shadow.asp */

  display: none;
  opacity: 0;
  -webkit-transition: all 0.4s ease;
  -moz-transition: all 0.4s ease;
  -o-transition:all 0.4s ease;
  transition: all 0.4s ease;
}

a.button[href$=".pdf"] {
  text-decoration: none;
  font-size: 150%;
  font-weight: 300;
  display: inline-block;
  padding: 0.4em 0.7em 0.5em 52px;
  margin: 0.2em 0.5em 0.3em 0;
  /* vertical-align: -5%; */
	border: thin solid rgba(20,30,70,0.5);
  border-top-color: rgba(20,30,70,0.25);
  border-left-color: rgba(20,30,70,0.35);
  border-radius: 0.25em;
  background-color: rgba(202,220,250,0.45);
  background-image: url(/img/PDF_file_icon_32.png);
  background-repeat: no-repeat;
  background-size: 32px auto;
  background-position: 5% 50%;
  box-shadow: inset -0.2em -0.9em 1.8em rgba(0,26,160,0.17);
}


hr {
	height: 1px;
  border-width: 0;
  color: black;
  background-color: black;
  margin: 1em 0 1.8em 0;
}

.reveal-onHover { /* hide extra details unless user hovers pointer */
	display: none;
	/* z-index: -1;
	height: 0;
	opacity: 0; */
}
.reveal:hover + .reveal-onHover {
	display: block;
	/* height: auto;
	opacity: 1;
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	-o-transition: all 1s ease;
	-ms-transition: all 1s ease;
	transition: all 1s ease; */
}

button {
  padding: 0.6em 2em;
  border-radius: 0.4em;
  background-color: rgba(202,210,250,0.6);
  box-shadow: inset -0.2em -0.9em 1.8em rgba(0,26,160,0.16);
  clear: both;
}

form {
  min-width: 35em;
  margin-top: 2em;
  /* max-width: 40em; */
  /* margin: 0 auto; */
}
form div {
  min-height: 2em;
  margin: 0.5em 0;
}
form label {
  display: inline-block;
	min-width: 10em;
  vertical-align: top;
}
input, textarea, button {
  font-size: 105%;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
  font-weight: 300;
}
input[type="text"], input[type="email"], input[type="tel"], textarea {
  display: inline-block;
  background-color: rgba(200,200,200,0.2);
  border: thin inset rgba(190,180,190,0.8);
  width: 20em;
}

form .touched.nonempty.valid {
  background-color: rgba(200,250,180,0.2);
  background-image: url(/img/checkmark.png);
  background-position: 98% center;
  background-repeat: no-repeat;
  background-size: auto 0.9em;
}
form .touched.nonempty.invalid, form .touched.nonempty.error, form .touched.nonempty.required {
  background-color: rgba(250,200,180,0.2);
  background-image: url(/img/ballot-x.png);
  background-position: 98% center;
  background-repeat: no-repeat;
  background-size: auto 0.9em;
}



input:required:invalid, textarea:required:invalid {
  background-color: rgba(180,200,250,0.2); /* rgba(280,280,140,0.2); */
}
form div.validation-msg {
  display: none;
}
form button, form input[type="submit"] {
  width: 20.1em;
  /* display: inline-block; */
}
form textarea {
  width: 19.75em;
	height: 6em;
}
form button, form input[type="submit"] {
  padding: 0.6em 2em;
  display: block;
  margin-left: 9.8em;
}
form .required label::after {
  content: "*";
}
form .required input {
  
}
form label.required::after {
  content: "* required";
}
form div.g-recaptcha {
  display: inline-block;
}


@media print {
html, body {
  font-size: 85%;
}

#header {
  color: black;
	background-color: transparent;
	border-bottom: 0.25pt dotted black;
}

a {
  color: black;
  text-decoration: none;
}
/* a:after, a[href^="ftp://"]:after {
  content: " (" attr(href) ")";
  color: blue;
  font-size: small;
} */

#header .nav, div.g-recaptcha, input[type="submit"] {
  display: none !important;
}

#show {
  background-color: transparent;
  background-image: none;
}
#show h1 {
	font-size: 420%;
  opacity: 0.6;
	text-shadow: none;
  filter: none;
}
#show ul {
  width: inherit;
}
#article h1 {
	font-size: 260%;
}

button, input {
  background-color: white;
  box-shadow: none;
  border: thin solid black !important;
}
input[type="text"], input[type="email"], input[type="tel"] {
  line-height: 200%;
}
::-webkit-input-placeholder {
	visibility: hidden;
}
::-moz-placeholder {
	visibility: hidden;
}
:-moz-placeholder {
	visibility: hidden;
}
:-ms-input-placeholder {
	visibility: hidden;
}

}