/*
 Copyright © 2016 Alexander Karasev. All rights reserved.
 @link        http://karasevstudio.com
 @version     0.8
 @package     KarasevStudio
*/

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: 62em;
}
}
@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: 23%;
	padding-right: 23%;
}
}



#header, #header .left, #header .right, #header .nav li, #header li.nav {
  color: white;
  background-color: #262626;
}
#header {
  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.67em;
}
#header .left span {
  font-size: 204%;
  font-weight: 100;
  margin-right: 1em;
}
#header .right {
  float: right;
  text-align: right;
  line-height: 1.67em;
  font-size: 175%;
}
#header .middle {
  margin: 0 auto;
  text-align: center;
}
#header img {
  margin-top: 0.75em;
  margin-right: 1em;
  height: 1.5em;
  width: auto;
  border: 0;
}
#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: #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%;
}



#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: 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: 367%;
}
#article.error h1, code.error {
  color: #C00;
}
#article h2, #show h2 {
  font-weight: 200;
	font-size: 180%;
}
#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 img.smaller {
  min-width: 120px;
  width: 25%;
  max-width: 600px;
}
#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;
}

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

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 button.destructive, form input[type="submit"].destructive {
  background-color: rgba(255,165,165,0.9);
  box-shadow: inset -0.2em -0.9em 1.8em rgba(150,8,10,0.2);
  /* background-color: red; */
}
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;
}

}