/* HS css framework 1.1  Copyright (c) Handspeak APRIL 2015 */
@charset "utf-8";
/* @font-face {font-family: 'Roboto';
src: url('/tool/font/roboto/Roboto-Regular.ttf'),
url('/tool/font/roboto/Roboto-Regular.eot') format ('truetype');
} */

* {margin: 0; padding: 0; outline: 0;}

a {
color: #0066cc; /* 3c91c8 */  text-decoration:none;}
a:focus, a:hover {
color: #678fc2;}

/* Responsive media */
img, video, embed, object {  max-width: 100%; }
img, video, embed, object {  height: auto; }
/* to del img {vertical-align: middle;  -ms-interpolation-mode: bicubic; } */

p {
font-size: 0.95em; font-weight: 400;
font-family: 'Roboto', Arial, sans-serif; color: #000; letter-spacing: 0.5px; line-height: 1.6em; margin-bottom:1.2em;}


@media only screen and (max-width: 1800px) {
.v-asl {width: 560px;    height: 560;}
}

@media only screen and (max-width: 768px){
p {font-size:16px;}	
.v-asl {width: auto;    height: 360;}
}

/* GRID LAYOUT */

.grid-main { /* container */
display: flex; display: -webkit-flex;
flex-flow: row wrap; -webkit-flex-flow: row wrap;
-webkit-align-content: center;    align-content: center;
-webkit-align-items: stretch; align-items: stretch; }
/* index3 TEST */
.grid-feature {   /* main page mashable grids */
display: flex; display: -webkit-flex;
-webkit-flex-flow: column wrap;      flex-flow: column wrap;
-webkit-align-items: stretch; align-items: stretch; 
-webkit-align-content: stretch;    align-content: stretch;
-webkit-flex: 1 0 25%;	flex: 1 0 25%;
   background: #fbfbfb; border:1px solid #fbfbfb; margin:20px;
}
/* END TEST */

.grid-row {
display: flex; display: -webkit-flex;
flex-flow: row wrap; -webkit-flex-flow: row wrap;}

.grid-box {background: #fbfbfb; margin:0px;}

.grid-1 {flex: 1; -webkit-flex: 1;	margin:20px; }
.grid-ad {flex: 1; -webkit-flex: 1;	max-width: 1200px; margin:0px auto;}
/*
.grid-50, .grid-75, .grid-25 {
display: flex; display: -webkit-flex;
-webkit-flex-flow: column wrap;      flex-flow: column wrap;
-webkit-align-items: flex-start; align-items: flex-start; 
-webkit-align-content: stretch;    align-content: stretch;
}
*/

/* in tab in home page only */
.cell-25 {flex: 1 0 25%; flex-basis: 0}
.cell-50 {flex: 1 0 50%; flex-basis: 0}
.cell-75 {flex: 1 0 75%; flex-basis: 0}
.cell-feature {margin:20px; padding:20px; }

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-width: 300px) and (max-width: 479px) {
.grid-main { max-width: 480px; margin:0px; }
.grid-75 {-webkit-flex: 1 0 450px;	flex: 1 0 450px;}
.grid-50 {-webkit-flex: 1 0 400px;	flex: 1 0 400px;}
.grid-25 {-webkit-flex: 1 0 350px;	flex: 1 0 350px;}

.grid-50, .grid-75, .grid-25 {margin:0px; }

.grid-box {
display: flex; display: -webkit-flex;
-webkit-flex-flow: column wrap;      flex-flow: column wrap;
-webkit-align-items: flex-start; align-items: flex-start; 
-webkit-align-content: stretch;    align-content: stretch;
-webkit-flex: 1 0 320px;	flex: 1 0 320px;}

}

@media only screen and (min-width : 480px) and (max-width: 768px) {
.grid-main {max-width: 760px; margin:0px auto;}
.grid-50, .grid-75, .grid-25 {margin:10px; }
.grid-75 {-webkit-flex: 1 0 400px;	flex: 1 0 400px;}
.grid-50 {-webkit-flex: 1 0 300px;	flex: 1 0 300px;}
.grid-25 {-webkit-flex: 1 0 300px;	flex: 1 0 300px;}
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.grid-main {max-width: 800px; margin:0px auto; }

.grid-75 {-webkit-flex: 1 0 400px;	flex: 1 0 400px;}
.grid-50 {-webkit-flex: 1 0 400px;	flex: 1 0 400px;}
.grid-25 {-webkit-flex: 1 0 300	flex: 1 0 300px;}
.grid-50, .grid-75, .grid-25 {margin:15px; }
.grid-box {flex: 1 0 300px; -webkit-flex: 1 0 300px;
margin:15px 10px; }
}

/* Desktops and laptops ----------- */
@media only screen and (min-width: 1024px) {
.grid-main {max-width: 1200px; margin:0px auto; }
/* flex-start, -end, center, space-around, space-between
-webkit-justify-content: center;   justify-content: center;
-webkit-align-items: stretch;    align-items: stretch;  
   -webkit-align-content: stretch;    align-content: stretch; */

.grid-75 {-webkit-flex: 1 0 600px;	flex: 1 0 600px;}
.grid-50 {-webkit-flex: 1 0 400px;	flex: 1 0 400px;}
.grid-25 {-webkit-flex: 1 0 350px;	flex: 1 0 350px;}

.grid-50, .grid-75, .grid-25 {margin:20px 10px;}
.grid-box {-webkit-flex: 1 0 400px;	flex: 1 0 400px; margin:20px; }
}


.title-bar {
background:#f6f6f6;
padding:15px 20px; text-transform:uppercase;
font: bold 12px arial, verdana, sans-serif; letter-spacing:1px; margin: 0px;
color: #222;
-moz-border-radius-topleft: 2px; -moz-border-radius-topright:2px;
-webkit-border-top-left-radius: 2px; -webkit-border-top-right-radius: 2px;
}

.post {
font-family: 'Roboto', Arial, sans-serif; color: #111; margin:1.618em;
}	
.post p, .post ul  {
font-size: 0.95em; font-weight: 400;
font-family: 'Roboto', Arial, sans-serif; color: #000; letter-spacing: 0.5px; line-height: 1.6em; margin-bottom:1.2em; list-style: none;
}

.grid-quicklink { /* row wrap for quicklinks */
display: inline-flex; display: -webkit-flex; 
flex-flow: row wrap;      -webkit-flex-flow: row wrap;
flex: 1 0 auto; -webkit-flex: 1 0 auto; /* push content below down */
-webkit-align-content: stretch;    align-content: stretch;
/*-webkit-align-items: center; align-items: center; */
}
.quicklink {
-webkit-flex: 1 0 auto;   flex: 1 0 auto; /* auto = height */
-webkit-align-items: stretch; align-items: stretch;
-webkit-align-self: stretch;    -ms-flex-item-align: stretch;  align-self: stretch;
	background:#fbfbfb; padding:10px 20px; }
.quicklink h4 {font-size: 1.0em; font-weight:bold; padding:0px; border-bottom:1px solid efefef; }
.quicklink a {font-size: 0.85em; font-weight: normal; font-family:Verdana, Arial, Helvetica, sans-serif; letter-spacing: 0.3px; line-height: 1.6em; margin:1.618em 0;}
.quicklink ul {
	font-size: 1.0em; color:#111;
  list-style: none;
  margin:0; padding:10px 0 20px 0;}
  .quicklink li {padding-bottom:2px;}
  
/* ARTICLE SECTION */
.article {padding:20px;}
@media only screen and (min-width : 320px) and (max-width : 480px) {
.article {padding:10px;}
}
.article p {
font-size: 0.95em; font-weight: 400;
font-family: 'Roboto', Arial, sans-serif; color: #000; letter-spacing: 0.5px; line-height: 1.6em; margin-bottom:1.2em;
}
.article ul.listpost .article {margin-bottom:1.0em; list-style:none;}
.article ul.listpost li {
font-size: 0.85em; font-weight: normal;
 font-family:Verdana, Arial, Helvetica, sans-serif; color: #111; line-height: 1.6em; list-style-position:inside; }
.article ul.listpost li:before {
    content: "•";
    color: #9CC; padding-right:5px;} 
 
.article h3.listline {	color:#2f96b4; font-size: 1.2em; margin-top:20px; margin-bottom:20px;} /*0099cc */

.article hr { padding:0px 60px; color:#efefef;}

.article .pointers {
	font-size: 1.0em; font-weight: normal; font-family:Verdana, Arial, Helvetica, sans-serif; color: #111; letter-spacing: 0.3px; line-height: 1.4em; margin:1.618em 0; 
}
.article .pointers li {list-style:inside disc; padding: 5px 0px;}

.article > h1, .article > h2, .article > h3, .article > h4, {
font-family: 'Roboto', Arial, sans-serif;  font-weight: 300;
}
.article h1 {  font-size: 1.6em; margin-bottom: 0.809em; font-family: 'Roboto', Arial, sans-serif; font-weight:400; }
.article h2 {  font-size: 1.45em;  margin-bottom: .6em; font-family: 'Roboto', Arial, sans-serif; font-weight:400;}
.article h3 {  font-size: 1.3em; margin-bottom: .6em; font-family: 'Roboto', Arial, sans-serif; font-weight:400;}
.article h4 {  font-size: 1.2em;   margin-bottom: .5em; font-family: 'Roboto', Arial, sans-serif; font-weight:400;}

/* glossing */
.eng, .en, .asl, .ex {font-size:0.9em;}
.eng, .en, .asl {font-weight: bold; font-variant:small-caps;}
.asl {color: #000099;}
.en, .eng {color: #006600;}
.ex {padding: 10px; background: #f8f8f8;} /* use <p> */

/* blockquote */
.article blockquote {
  position: relative;
  font-style: normal;
  margin-left: 2.43em; margin-top:2.5em; margin-bottom:2.5em;
  padding-left: 1.618em; padding-right: 1.618em;
  border-left: 2px solid #c79e2c; border-right: 2px solid #d2b04c;
}

/* SIDEBAR */
.grid-sidebar {
 -webkit-flex: 1 0 200px;	flex: 1 0 200px;
   background: #fff; border:1px solid #fbfbfb;
}

.navcol {
  margin-bottom: 1.618em; padding:20px 10px; border: 1px solid #EEF4F7;
}

.navcol ul {
  list-style: none;
  margin: 0; padding: 5px;
}
.navcol p { font-size: 0.85em; font-weight: normal; font-family:Verdana, Arial, Helvetica, sans-serif; line-height: 1.6em; margin:1.3em;}

.navcol ul li a {
display: block; text-decoration: none;
list-style-type: none; 
padding: 3px 0px 3px 5px; 
border-bottom: 1px solid #f4f4f4;
font-size: 0.8em; 
font-weight: normal; font-family:Verdana, Arial, Helvetica, sans-serif;
}
.navcol ul li a:hover {
  color: #a33446;
}
.navcol ul li.active a {
  text-decoration: none;
  cursor: text;
  color: rgba(0, 0, 0, 0.4);
}

/* .navcol ul li a.active {background: url(/pix/arrow-rightsm.gif) right center no-repeat; padding-top: 5px; padding-bottom:5px;}*/
.navcol ul li a.active {background: url(/pix/arrow-leftsm.gif) left center no-repeat; padding-left:20px; padding-top: 5px;} 



/* NAVSITE  Functional Styles (Required)Navigataur: A pure CSS responsive navigation menu
---------------------------------*/

body{ -webkit-animation: bugfix infinite 1s; }
@-webkit-keyframes bugfix { from {padding:0;} to {padding:0;} }

.header { position: relative; }
.header{
	min-height: 30px;height: 100%;	padding: 0;	background: #FFFFFF;}

/* NAVSITE */
input[type=checkbox] {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: none;
  cursor: pointer;
  user-select: none;
}

.menusite {
	display: flex; display: -webkit-flex; 
-webkit-flex-flow: row wrap;      flex-flow: row wrap;
-webkit-align-items: stretch; align-items: stretch; 
-webkit-align-content: flex-start;    align-content: flex-start;
}

/* background for li / select */
/* custom-dropdown */
nav[role="custom-dropdown"] {
  position: relative;
  width: 100%; background:#3c91c8;
}
nav[role="custom-dropdown"] a,
nav[role="custom-dropdown"] label {
  color: #fff;
  text-decoration: none; text-transform:uppercase;
  font: 0.75em sans-serif;
  transition: color .3s ease-in-out;
}
nav[role="custom-dropdown"] ul {
  padding: 0;
  margin: 0 auto;
  width: 100%;
  list-style: none;
}
nav[role="custom-dropdown"] ul > li {
-webkit-flex: 1 0 auto;	flex: 1 0 auto;
/*float: left;*/
background:#3c91c8;
  padding: .65em .35em;

  text-align: center;
  transition-duration: .3s;
  transition-timing-function: ease-in-out;
  transition-property: box-shadow, color;
/*  box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35);*/
  cursor: pointer;
}
nav[role="custom-dropdown"] ul > li:hover {
  background-color: #fff;
  color: #3c91c8;
  box-shadow: inset 0px 5px #a86666;
/*  box-shadow: 0 0.05em 0.25em 0 rgba(0, 0, 0, 0.35), inset 0 0 0 2em rgba(0, 0, 0, 0.3); */
	-webkit-transition: all 0.25s linear;
	-moz-transition: all 0.25s linear;
	-o-transition: all 0.25s linear;
	transition: all 0.25s linear;
}
nav[role="custom-dropdown"] ul > li:hover > a {
  color: #3c91c8;
}

nav[role="custom-dropdown"] ul > li.active {
	background:#66aad7; color: #fff; 
	/*box-shadow: inset 0px 5px #3c91c8;*/
	}

nav[role="custom-dropdown"] ul > li.active a {
	color:#fff;}
		
/* small screens ORI 44em */
@media screen and (max-width: 420px) {

  nav[role="custom-dropdown"] ul {
    display: none;
    height: 100%;
  }
  nav[role="custom-dropdown"] label {
    position: relative;
    display: block;
    width: 80%;
    min-height: 1.25em;
    padding: .55em;
    font-size: 1.1em;
    margin: 0;


  }
  nav[role="custom-dropdown"] label:after {
    position: absolute;
    right: 2.0em;
    top: 10px;
    content: "handspeak \2261"; /* hamburger icon */
    font-size: 1.2em;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ label:after {
    color: #222;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul {
    display: block;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li {
    width: 100%;
    opacity: .8;
    text-align: left;
  }
  nav[role="custom-dropdown"] input[type=checkbox]:checked ~ ul > li:after {
    position: absolute;
    right: .25em;
    content: "\203A";
    font: bold 1.4em sans-serif;
  }
}

/* BREADCRUMBS / SUBMENU */

.crumbs {
width: 100%; background:#66aad7;
display: flex;      display: -webkit-flex;
flex-flow: row wrap;      -webkit-flex-flow: row wrap;
-webkit-justify-content: flex-start;   justify-content: flex-start;
list-style: none;
  -moz-box-shadow: 0 0px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  margin-bottom:3px;
}
.crumbs > li {
-webkit-flex: 0 1 auto;	flex: 0 1 auto;
font-size: 0.75em; text-transform:uppercase; font-family: sans-serif; 
padding: 10px 18px;		}
.crumbs a { color:#fff;}
.crumbs li a.active { color: #fff; font-weight:bold; padding:10px 5px 10px 5px;
background: url(/pix/menu-arrow-down.gif) no-repeat bottom center; }


/* MENU TABS */

.menu-tab {
display: flex;      display: -webkit-flex;
flex-flow: row wrap;      -webkit-flex-flow: row wrap;
margin-bottom:20px;
list-style:none; font-family:arial, verdana, sans-serif; text-transform:uppercase;}
.menu-tab > li {
	-webkit-flex: 1 0 auto;	flex: 1 0 auto; margin-bottom:1px;
}/* eeb211# f1bf35ora  bbd3f2blue*/
.menu-tab li a {display:block; color:#660033; text-decoration:none; font-size:11px; font-weight:bold; text-align:center; padding:5px 8px; background:#f1bf35; margin-left:1px; border: 1px solid #f1bf35;
}
.menu-tab li a:hover {color:#fff; background:#a86666; border: 1px solid #a86666;}
.menu-tab li a.active {color:#f1bf35; background:#ffffff; border: 1px solid #f1bf35;} /* active red 874a49*/
	
/* FOOTER */

.footlink {font: 10px Verdana,Arial,Sans-serif,Georgia; font-weight:bold; background:#f8fbff;
-moz-box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  box-shadow: 3px -3px 6px rgba(0, 0, 0, 0.16), 0 3px 3px rgba(0, 0, 0, 0.23);
  margin-top:3px;

} 
.footlink ul {
display: flex;      display: -webkit-flex;
flex-flow: row wrap;  -webkit-flex-flow: row wrap;
-webkit-align-items: flex-start;    align-items: flex-start;
} 
.footlink ul li {flex: 0 1 auto;  -webkit-flex: 0 1 auto;
-webkit-align-items: flex-start; align-items: flex-start;-ms-flex-item-align: flex-start; 
}
.footlink ul li {list-style-type: none;}
.footlink li a, .footlink li a:visited {
text-align: center; display: block; color:#678fc2; 
font-weight:bold; padding: 10px 20px;}
.footlink ul li a:hover {background: #ffffff url(/pix/hover-tri.gif) bottom center no-repeat; color:#a86666;} 

.footer {
display: flex;      display: -webkit-flex;
flex-flow: row wrap;  -webkit-flex-flow: row wrap;
-webkit-align-items: flex-start;    align-items: flex-start;
-webkit-justify-content: center;   justify-content: center;
}

.footer-grid {
flex: 1 0 200px;  -webkit-flex: 1 0 200px;
-webkit-align-items: stretch; align-items: stretch;-ms-flex-item-align: stretch; 
-webkit-align-self: stretch;   align-self: stretch;
background: #e4effe; padding:20px 25px;
}

.footer-grid a {	color:#486696;}
.footer-grid, .footer-grid2 p {	  font: 0.75em normal Arial, Helvetica, sans-serif; color:#222;  }
.footer-grid ul li {list-style: none; padding:3px 0px;}
.footer-title {padding-bottom:10px;}

.copyright {background-color:#ecf4ff; padding:20px 20px;
text-align:center; font: 0.8em normal Arial, Helvetica, sans-serif ; color: #444444; border-top: 1px solid #f6f6f6;}
.copyright a, .copyright a:visited {color:#2d6c8d; font: 1em normal Arial, Helvetica, sans-serif;} 
.copyright a:hover {color: #b44745; }

/* FONTS 
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Condensed Regular'), local('RobotoCondensed-Regular'), url("/tool/font/roboto/RobotoCondensed-Regular.ttf") format('truetype');
}
*/
