/* Extra Small         @media(max-width:767px){}
   Small               @media(min-width:768px) and (max-width:991px){}
   Medium              @media(min-width:992px) and (max-width:1199px){}
   Large               @media(min-width:1200px){}
*/
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700,900);.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,
.video-container object,
.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}
body{font-family:'Roboto', sans-serif; font-weight: 100; color:#666666;-webkit-font-smoothing:antialiased;}
a{font-family:'Roboto', sans-serif;-webkit-font-smoothing:antialiased;}
a:hover, a:focus {    color: #666;}
a:active {    color: #666 !important;}
div.content{overflow:hidden;}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{color:#666666;}
section{position:relative;padding-top:80px;padding-bottom:50px;}


/*****navbar 1st page only*******************************************************/
#nav-indexhtml .navbar{background:none;border:none;}
#nav-indexhtml .navbar img{width: 300px;  height: 55px;  margin-top:50px; }
#nav-indexhtml .navbar ul{padding-top:30px; font-size: 24px; }
#nav-indexhtml .navbar-inverse .navbar-nav li a{color: white;  }
#nav-indexhtml .navbar-inverse .navbar-nav li a:hover{color: deepskyblue;}

#nav-indexhtml .viewer{background-color: tomato;
    color: white;border-radius: 8px; padding: 10px 12px; margin: 5px 0px;}


#nav-indexhtml .navbar.scrolled{background:black;}
#nav-indexhtml .navbar.scrolled img{width: 200px;  height: 35px; margin-top:8px;}
#nav-indexhtml .navbar.scrolled ul{padding-top:0px; font-size: 20px; }

@media(min-width:768px) and (max-width:1020px){
	#nav-indexhtml .navbar a{padding-top:11px;}
	#nav-indexhtml .navbar ul{padding-top:10px;font-size: 16px; }
	#nav-indexhtml .navbar img{width: 200px;  height: 35px; margin-top:20px;}
	
	#nav-indexhtml .navbar.scrolled img{width: 200px;  height: 35px; margin-top:8px;}
	#nav-indexhtml .navbar.scrolled ul{padding-top:0px; font-size: 16px; }
	#nav-indexhtml .viewer{padding: 10px 15px;}
}
@media(max-width:767px){
	#nav-indexhtml .viewer{background-color: black;padding: 10px 15px;}
	#nav-indexhtml .navbar{background:black;}
	#nav-indexhtml .navbar img{width: 200px;  height: 35px; margin-top:10px;margin-left:20px;}
	#nav-indexhtml .navbar ul{padding-top:10px;font-size: 20px; }
	
}

#nav-indexhtml button.navbar-toggle{
    background:none;
    color:#ffffff;
}


/*****navbar other pages  *******************************************************/
#nav-other .navbar{background:black;}
#nav-other .navbar img{width: 200px;  height: 35px; margin-top:8px;}
#nav-other .navbar ul{padding-top:0px; font-size: 20px; }
#nav-other .navbar-inverse .navbar-nav li a{color: white;}
#nav-other .navbar-inverse .navbar-nav li a:hover{color: deepskyblue;}

@media(min-width:768px) and (max-width:1020px){
	#nav-other .navbar a{padding-top:11px;}
	#nav-other .navbar img{width: 200px;  height: 35px; margin-top:8px;}
	#nav-other .navbar ul{padding-top:0px; font-size: 16px; }
}
@media(max-width:767px){
	#nav-other .navbar{background:black;}
	#nav-other .navbar img{width: 200px;  height: 35px; margin-top:10px;margin-left:20px;}
	#nav-other .navbar ul{padding-top:10px;font-size: 14px; }
}

#nav-other button.navbar-toggle{
    background:none;
    color:#ffffff;
}


/****hero = top section ***************************************************************/
#hero {background:url('../img/bg.png') no-repeat center center;-webkit-background-size:cover; -moz-background-size:cover;-o-background-size:cover;background-size:cover;width:100%;position:relative;padding-top:0px;overflow:hidden;display:table;}
#hero .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:9;background:#3b3d40;opacity:0.6;}
#hero .intro{width:100%;color:#666;z-index:12;position:relative;}

#hero .intro h2{color:#FFFFFF; font-size:36px; font-weight:100; line-height:60px;}
#hero .intro p{color:#FFFFFF;font-size:25px;line-height:36px;letter-spacing:.05em; font-weight: 100;}
#hero .intro .text{bottom:-10em;}
#hero .intro .camera-lg img{text-align:center; margin-top: 100px; display: block;}
#hero .intro .camera-sm img{text-align:center; margin-top: 100px; display: none;}
#hero .badges{width:200px;height:50px}

@media(min-width:768px) and (max-width:991px){
	#hero {padding-top:50px;  }
	#hero .intro h2{font-size:27px;line-height:40px; margin: 0px; padding-bottom:30px}
	#hero .intro p{font-size:18px;line-height:20px; padding-left: 10px; }
	#hero .intro .intro-img img{max-width:100%;}
	#hero .intro .text{bottom:0;bottom:-4em;}
	#hero .intro .camera-lg img{text-align:center; max-width: 300px; margin-top: 100px; display: block;}
	#hero .intro .camera-sm img{text-align:center; margin-top: 100px; display: none;}#hero#hero .badges{width:162px;height:50px}		
}

@media (max-width:767px){
	#hero {padding-top:0px;}
	#hero .intro{padding-top:0px; margin:auto; width: 350px; }
	#hero .intro h2{font-size:23px;line-height:40px;padding-top: 0px; padding-bottom: 20px; }
	#hero .intro p{font-size:18px;line-height:30px; padding-left: 10px;}
	#hero .intro h3{margin: 0px;}
	#hero .intro .text{bottom:0;bottom:-4em;}
	#hero .intro .camera-lg img{text-align:center;  max-width: 100%; display: none;}	
	#hero .intro .camera-sm img{text-align:center;  max-width: 100%; max-height: 300px; display: block; margin-left:auto;margin-right:auto; padding-top:0px;}	
	#hero .badges{width:140px;height:50px}
}


/*****************************************************************************************************/

section#download{position:relative; background:#dddddd;}
section#download img{margin:auto; width: 390px; max-width: 100%;}
section#download h1{color:#388fd7;font-size:35px;line-height: 140%; font-weight:100; text-align:center}
section#download .video-container{border:1px solid #b3b3b3;height:320px; width:500px; overflow:hidden;}
section#download iframe{height:100%;border:none;}

@media(min-width:768px) and (max-width:991px){
	section#download h1{font-size:26px;line-height: 140%; margin-top:0px}	
	section#download img{max-width: 90%; height: auto;}
	section#download .video-container{border:1px solid #b3b3b3;height:auto; width:auto; overflow:hidden;}
}

@media screen and (max-width:767px){
	section#download h1{font-size:26px;line-height: 140%; font-family: 'Roboto', sans-serif; padding-top:30px; padding-bottom:30px;}	
	section#download img{display: block; margin: auto; width: 250px; }
	section#download .video-container{border:1px solid #b3b3b3;height:auto; width:auto; overflow:hidden;}
}


/*****************************************************************************************************/

section#watch{position:relative;background-color:#333333; padding-top: 60px; padding-bottom: 60px;}
section#watch img{max-width: 750px;}
section#watch h1{color:#388fd7;font-size:40px; font-weight: 100;}
section#watch h2{color:#aaaaaa;font-size:25px;padding-bottom:15px; font-weight: 100;}
section#watch p{color:#aaaaaa;font-size:16px; padding-top:40px;}


@media screen and (max-width:767px){
section#watch{position:relative;background-color:#333333; padding-top: 20px; padding-bottom: 60px;}
	section#watch h1{font-size:30px;line-height: 140%; font-weight: 100;}	
	section#watch h2{font-size:20px;padding-bottom:0px;}
	section#watch img{max-width: 100%;}
}

/*****************************************************************************************************/


section#features .feature-item{margin:0 auto;}
section#features .feature-item{text-align:left;margin-bottom:36px;}
section#features .feature-item h3{font-size:24px;}
section#features .feature-item i{font-size:80px;background:-webkit-linear-gradient(to left, #FF7E0E, #3498DB);background:linear-gradient(to left, #FF7E0E, #3498DB);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
@media (min-width:992px){section#features .device-container,
section#features .feature-item{max-width:none;}
}
section#features img{margin: auto;  }
section#features{background:#388fd7;}
section#features h1{color:#FFFFFF; font-weight: 100;}
section#features h3{color:#FFFFFF;  font-weight: 100;}
section#features header h1:after{background:#3498DB;}
section#features p{color:#eeeeee;font-size:16px;line-height: 160%; font-family: 'Roboto', sans-serif;}
section#features .media i.fa{border:2px solid #3498DB;color:#3498DB;}
section#features .media:hover i.fa{color:#ffffff;background:#3498DB;}
section#features .media:hover h3{color:#3498DB;}
section#features .media.active i.fa{color:#ffffff;background:#3498DB;}
section#features .media.active .media-heading{color:#3498DB;}

@media(max-width:767px){
	section#features{background:#388fd7;padding-top: 40px;}
	section#features h1{color:#FFFFFF;line-height: 140%; font-weight: 100; font-size:35px;}
	section#features .img-screenshot{margin: auto; }	
	section#features img{margin-top:10px;margin-bottom:0px;margin-right:0px; }	

section#features .feature-item{text-align:left;margin-bottom:0px;}
}

/*****************************************************************************************************/
section#showcase{background:#f9f9f9; }
section#showcase-member:hover .details{background:#000000;}
section#showcase-member .details{font-size:18px;letter-spacing:1px;}
section#showcase .phone-background{overflow:hidden;background:url("../img/app/phone.png");background-position:center;background-repeat:no-repeat;display:block;}
@media screen and (max-width:767px){
	section#showcase{background:#f9f9f9; padding-top: 50px;}
	section#showcase .phone-background{overflow:hidden;max-width:100%
background:url("../img/app/phone_sm.png");background-position:center;background-repeat:no-repeat;display:block;padding-top: 50px;}
}
section#showcase .phone-background #video{max-width:100%;padding-top:55px;padding-left:10px;padding-bottom:50px;}
section#showcase .caption{line-height:40px;font-size:22px;}
section#showcase a:hover{color:#FF7E0E;}
section#showcase .caption:hover{color:#FF7E0E;}
div.videoitem{vertical-align:center;display:inline-block;text-align:center;width:150px;margin:0 0 10px 10px;}
div.videoitem img{border-style:solid;border-width:5px;border-color:#808080;margin-top:30px;}

section#screens header h1:after{background:#3498DB;}
/*****************************************************************************************************/

section#reviews{background-color: #dddddd;}
section#reviews h1{color:#3d4247;}
section#reviews p{color:#3d4247;}
section#reviews .review-filtering .review .review-person img{border:3px solid #ffffff;}
section#reviews .review-filtering .review .review-comment{background:#ffffff;}
section#reviews .review-filtering .review .review-comment h3{color:#3498DB;}
section#reviews .review-filtering .review .review-comment p span i{color:#3498DB;}
section#reviews .review-filtering .review .review-comment:after{border-right-color:#ffffff;}
section#reviews .review-filtering .slick-dots li button{background:#ffffff;border:2px solid #ffffff;}
section#reviews .review-filtering .slick-dots li.slick-active button{background:#3498DB;}
section#reviews .review-filtering{margin:20px 0 100px 0;}
section#reviews .review-filtering .review .review-person{width:100%;}
section#reviews .review-filtering .review .review-person img{width:110px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;margin:10px auto;}
section#reviews .review-filtering .review .review-comment{width:100%;-webkit-border-radius:10px;-moz-border-radius:10px;-ms-border-radius:10px;-o-border-radius:10px;border-radius:10px;padding:5px 40px 20px;position:relative;}
section#reviews .review-filtering .review .review-comment h3{margin-bottom:15px;}
section#reviews .review-filtering .review .review-comment p{font-size:16px;color:#999999;}
section#reviews .review-filtering .review .review-comment p span{margin-left:10px;}
section#reviews .review-filtering .review .review-comment:after{right:100%;top:50%;border:solid transparent;content:" ";height:0;width:0;position:absolute;pointer-events:none;border-color:rgba(255, 255, 255, 0);border-width:15px;margin-top:-10px;}
section#reviews .review-filtering .review .review-person,
section#reviews .review-filtering .review .review-comment{float:left;}
section#reviews .review-filtering .slick-dots{bottom:-40px;}
section#reviews .review-filtering .slick-dots li button{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;}
section#reviews .review-filtering .slick-dots li button:before{display:none;}
section#reviews{position:relative;}
section#reviews a {text-decoration: none}
section#reviews h1{color:#388fd7;}
section#reviews .badges .badge-link{display:block;margin-bottom:25px;}
section#reviews .badges .badge-link:last-child{margin-bottom:0;}
section#reviews .badges .badge-link img{height:60px;}
@media (min-width:768px){
	section#reviews .badges .badge-link{display:inline-block;margin-bottom:0;}
	
}
@media (max-width:767px){
	section#reviews{position:relative;padding-top: 50px;}
	section#reviews h1{color:#388fd7;font-size:35px;}
	section#reviews .review-filtering{margin-top:0px; margin-bottom:70px;}
}
section#reviews .userBox{
	padding-top: 30px;
	text-align: center;
	margin:20px 0 30px 0;
	border: 3px solid #F5F4EB;
}
section#reviews .userBox .user-image > img{
	width: 180px;
	height:180px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 50%;
	transition: all 0.2s ease-in-out 0s;
}
section#reviews .userBox .user-content h3{
	text-transform: uppercase;
	font-size: 17px;
	font-weight: bold;
	letter-spacing: 1.25px;
	margin-bottom: 16px;
	color:#616161;
	transition: all 0.21s ease 0s;
}
section#reviews .userBox .user-content p{
	padding-right: 35px;
	color:#616161;
	line-height: 2;
}

section#reviews .userBox .user-content p:hover {color:#000;transition: all 0.21s ease 0s;}
section#reviews .userBox .blockquote{position:relative;border:none;padding-left:60px}
section#reviews .userBox .blockquote:before{position:absolute;display:block;content:'“';top:-34px;left:15px;font-family:"Arial",sans-serif;font-weight:400;font-size:100px;color:#ccc}
section#reviews .userBox i.fa{color:#FFD700;padding-bottom: 10px;}
section#reviews .userBox:hover {
	padding-top: 30px;
	border: 3px solid rgba(52, 152, 219, 0.5);
	transition: all 0.2s ease-in-out 0s;
}
section#reviews .userBox:hover .user-content h3{color:#000;transition: all 0.21s ease 0s;}

@media all and (max-width: 720px){
section#reviews .shrink
	{display:none;}
}

/*****************************************************************************************************/


section#trusted{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}
section#trusted .about-item{text-align:center;font-size:17px;line-height:25px;color:#999999;}
section#trusted .about-item i.fa{-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;padding:35px;-webkit-transition:all 0.25s ease-in-out;-moz-transition:all 0.25s ease-in-out;-ms-transition:all 0.25s ease-in-out;-o-transition:all 0.25s ease-in-out;transition:all 0.25s ease-in-out;width:104px;}
section#trusted h1{color:#000000;}
section#trusted p{color:#388fd7;padding-bottom: 100px;}
section#trusted .about-item i.fa{border:2px solid #3498DB;color:#3498DB;}
section#trusted .about-item:hover i.fa{color:#ffffff;background:#3498DB;}
section#trusted .about-item:hover h3{color:#3498DB;}
section#trusted img{max-height:150px;margin-top:50px;position: relative;
  top: 50%;
  transform: translateY(-50%);
  filter: opacity(100%);}
section#trusted img:hover{
  filter: opacity(80%);}

 @media(max-width:767px){
	section#trusted{-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;  
	padding-top: 40px;padding-bottom: 0px;}
	
	 section#trusted img{max-height:120px;margin-top:20px;position: relative; }
 }

 
 
 
 
 
 
footer{padding:40px 0;text-align:center;background:black;color:white;font-size:16px;}

footer p{line-height: 30px;}
footer a{color:white; }
footer a:hover{text-decoration:none;color:deepskyblue;}
footer .logo{width:200px;height:36px}
footer .badges{width:200px;height:50px}

footer a > img{margin-top:20px;width:200px;}
footer .social{display:block;margin-top:10px;margin-bottom:10px;}
footer .social a{margin:0 8px;padding:15px;-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;display:inline-block;border:2px solid #ffffff;}
footer .social a i{color:#ffffff;width:1em;}
footer .social a:hover{background:#ffffff;}
footer .social a:hover i{color:deepskyblue;}









/*********************************************************************
pages  contacts, help, legal
*********************************************************************/

#pages{background-color:#444444; padding-top:130px;}

#pages .overlay{position:absolute;top:0;left:0;right:0;bottom:0;z-index:9;background:#3b3d40;opacity:.6;}
#pages .intro{width:100%;color:#fff;z-index:12;position:relative;}
#pages .intro .intro-img{text-align:right;bottom:-5em;}
#pages .intro .text{bottom:-10em;}
#pages h1{color: #eeeeee;}
#pages .intro h2{color:#fff;font-size:58px;font-weight:100;line-height:80px;font-family:'Roboto', sans-serif;-webkit-margin-before:0.83em;-webkit-margin-after:0.83em;}
#pages .intro p{font-size:25px;line-height:50px;letter-spacing:.05em;}

@media screen and (max-width:768px){#pages{padding-top:2em;padding-bottom:2em;height:inherit;}
}
@media screen and (max-width:768px){#pages .intro .intro-img img{max-width:100%;}
}
@media screen and (max-width:768px){#pages .intro .text{bottom:0;bottom:-4em;}
}
@media screen and (max-width:768px){#pages .intro h2{font-size:40px;line-height:40px;}
}


/*****************************************************************************************************************/
/*help.html uses this section-heading*/

/*
section#help {
background:url('../img/bg.png') no-repeat center center;-webkit-background-size:cover; -moz-background-size:cover;-o-background-size:cover;background-size:cover;width:100%;position:relative;padding-top:100px;overflow:hidden;display:table;
	padding-bottom: 50px; /*background:#dddddd;  * /  }*/

section#help table, th, td{	padding: 10px; font-size: 1.1em;}
section#help a:hover, a:focus {	color: #e74c3c;}
section#help img{padding-left: 15px; padding-right: 25px;}

.section-heading{text-align:center;}
.section-heading h1{color:#388fd7;font-size:40px; font-weight: 100; font-family: 'Roboto', sans-serif; padding-bottom:50px;}
.section-heading p{font-size:20px;font-weight:100;line-height:24px;}
.section-heading .divider:after{content:"";position:relative;height:4px;width:60px;display:block;text-align:center;margin:13px auto;-webkit-border-radius:5em;-moz-border-radius:5em;-ms-border-radius:5em;-o-border-radius:5em;border-radius:5em;}
.section-heading.inverse h1,
.section-heading.inverse p{color:#333;}
.section-heading.inverse .divider:after{background:#ffffff;}

section#help-faq{background:#ffffff; padding-top: 0px;}

#accordion .panel-heading { padding: 0;} /*help.html*/
#accordion .panel-title > a {
	display: block;
	padding: 0.4em 0.6em;
    outline: none;
    font-size: 1.1em;
    text-decoration: none;
	text-align: left;
	color: #c0392b;
}

#accordion .panel-title > a.accordion-toggle::after, #accordion a[data-toggle="collapse"]::after  {
    content:"\f147";
    float: right;
    font-family: 'FontAwesome';
	margin-right :1em;
}
#accordion .panel-title > a.accordion-toggle.collapsed::after, #accordion a.collapsed[data-toggle="collapse"]::after  {
    content:"\f196";
}
#accordion .panel-body {	text-align: left;	font-size: 1.2em;}
#accordion .panel-body li {    line-height: 1.3em;}
#accordion .panel-body h4 {    line-height: 1.3em;}


/******* Press.html************************************************************/
section#press .margin-bottom{	margin-bottom: 3em;}
section#press h4{	font-weight: 300;    font-size: 1.6em;}
section#press .hr-top {
    border-width: 0;
    border-top-width: 1px;
	border-color: #a9a9a9;
	border-style: solid;
	padding-top: 2rem;
}
section#press a{
	-webkit-transition: color 200ms cubic-bezier(0.5, 0, 0.5, 1);
    transition: color 200ms cubic-bezier(0.5, 0, 0.5, 1);
    text-decoration: none;
	line-height: 1.3;
	color: #FF7E0E;
}
section#press a:hover, a:focus {    color: #a9a9a9;}
section#press .link--gray:hover, .link--gray:focus {    color: #6e6e6e;}
section#press .link--gray {    color: #a9a9a9;}
section#press img {    max-width: 100%;	padding-top: 3em;}

/******* viewer.html*******************************************************/
section#viewer{padding-top: 80px;}
section#viewer h1{padding-bottom: 0px; font-weight: 80;}
section#viewer p{text-align="center"}
section#viewer .button{color: white; border: none; border-radius: 4px; background-color: #008CBA;padding: 8px 22px;}
section#viewer .button:hover {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.24), 0 6px 6px 0 rgba(0,0,0,0.19);
}

#myCanvas{
    padding: 0;
    margin: auto;
    display: block;
    max-width: 1080px;
}
/**********************************************************************************
web viewer for live video streaming   css below
*************************************************************************************/
/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
    color: #222;
    font-size: 1em;
    line-height: 1.4;
}

/* Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *These selection rule sets have to be separate.
 * Customize the background color to match your design.
 */
::-moz-selection {    background: #b3d4fc;    text-shadow: none;}
::selection {    background: #b3d4fc;    text-shadow: none;}

/*
 * A better looking default horizontal rule
 */
hr {    display: block;    height: 1px;    border: 0;
    border-top: 1px solid #ccc;    margin: 1em 0;    padding: 0;
}

/* Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */
/*audio,canvas,iframe,img,svg,video {
    vertical-align: middle;
	   text-align:center;
	   display: inline;
}*/

#viewer-container {
   width: 100%;
   text-align:center;
}

canvas {
   display: inline;
}

/*Remove default fieldset styles. */
fieldset {    border: 0;    margin: 0;    padding: 0;
}

/* Allow only vertical resizing of textareas. */
textarea {    resize: vertical;}

/* Browser Upgrade Prompt */
.browserupgrade {    margin: 0.2em 0;    background: #ccc;
    color: #000;    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden {
    display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

/*
 * Extends the .visuallyhidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
    visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
}

@media print,
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 1.25dppx),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   http://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important; /* Black prints faster:
                                   http://www.sanbeiji.com/archives/953 */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links that are fragment identifiers,
     * or use the `javascript:` pseudo protocol
     */

    a[href^="#"]:after,
    a[href^="javascript:"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /*
     * Printing Tables:
     * http://css-discuss.incutio.com/wiki/Printing_Tables
     */

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}