/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html,
button,
input,
select,
textarea {
    color: #222;
}

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

/*
 * Remove text-shadow in selection highlight: h5bp.com/i
 * 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 images, videos, audio and canvas and the bottom of
 * their containers: h5bp.com/i/440
 */

audio,
canvas,
img,
video {
    vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
    resize: vertical;
}

/* ==========================================================================
   Browse Happy prompt
   ========================================================================== */

.browsehappy {
    margin: 0.2em 0;
    background: #ccc;
    color: #000;
    padding: 0.2em 0;
}

/* ==========================================================================
   Author's custom styles
   ========================================================================== */
body{
   background: #f7f7f7;
   font-family:"微软雅黑";
   color:#464646;
   font-size:12px;
}
a{text-decoration:none;color:#464646;}
ul,dl,ol,li,dd,dt{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;padding:0;}
i,em{font-style:normal;}
img{max-width:100%;}
::-webkit-input-placeholder { color:#464646;  }
input:-moz-placeholder { color: #464646;} 
.warp{
	max-width:1200px;
	margin:0 auto;
}


/*header*/
#header{
	background:#fff;
	width:100%;
	height:100%;
	display:block;
	overflow:hidden;
   position:relative;  
}
#heatop{
	width:100%;
	height:100%;
	border-bottom:#1px solid #6882b9;
	display:block;
	overflow:hidden;
	
}
#header .logo{
   width:47%;
   position:relative;
   float:left;
}
.h-posi{
   right:0;
   bottom:0;
   width:20%;
   float:right;
  margin-top:1em;
}
.search{
   background:url(../images/search_05.jpg) no-repeat  left top;
   padding-top:3px;
   padding-left:2px;
   text-align:left;
   height:30px;
}
.search input{
   height:88%;
   width:86%;
   padding:2.5% 0;
   border:none;
   background:none;
   float:left;
}
.search input[type="submit"]{
  height:88%;
  width:14%;
  float:left;
}
.lang{
	width:75%;
   float:right;
   display:block;
   padding-right:15%;
   font-size:0.75em;
   margin:1em 0;
   font-weight:bold;
}

.lang a{
	display:block;
	font-size:0.75em;
	display:inline-block;
	margin-right:4%;
	float:left;
}

.lang a:hover{
	color:#ce060c;
	}
@media only screen and (max-width: 640px) {
	#header .logo{ width:100%;}
	.h-posi{right:0;bottom:0;width:100%;float:left;margin-top:1em;}
	.lang{	width:100%;float:right;display:block;padding:0; margin:10px 0;}
	.search{background:url(../images/search_05.jpg) no-repeat  left top; padding-top:3px;padding-left:2px; text-align:left;
	        height:30px; display:block;}
.search input{height:88%;width:76%;padding:2.5% 0;border:none;background:none;}
.search input[type="submit"]{height:90%;width:16%;}
}
.line{
	width:100%;
	height:1px;
	background:#6882b9;
	margin-bottom:2px;
}
#close_menu{
   display:none;
}
#nav{
	width:100%;
	background:#2b74c3;
	border-bottom:#0b1f47 1px solid;
	border-top:#0b1f47 1px solid;
	float:left;
	}
#nav li{
	display:inline-block;
	font-size:0.875em;
	padding:1% 3.0%;
	line-height:30px;
}
#nav li a{
	color:#ffffff;
	font-size:16px;
	font-family:"微软雅黑";
	text-align:center;
	}
#nav li:first-child{
	margin-left:7.8%;
	background:none;
}
#nav li:hover,#nav li.curr{
	background:#5494d9;
   
}

@media only screen and (max-width: 640px) {
	#header b{font-size:10px;padding-top:0.5em;}}
	
#menu{
   display:none;
   text-align:right;
   margin:0;
}
#menu a{
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ededed;
background-repeat: repeat-x;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5);
border-left-color: #e5e5e5;
border-right-color: #e5e5e5;
border-top-color: #e5e5e5;
border-bottom-color: #bfbfbf;
color: #fff;
width: 40px;
text-shadow: none;
margin:0 auto 0;
display:inline-block;
border: 0;
text-transform: none;
background: #ffffff!important;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
padding:1% 0;
}
#menu a:hover{
  background:#ce060c!important;
}
.icon-bar {
display: block;
width: 55%;
height: 2px;
margin:10% auto;
background-color: #890e07;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
-webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
-moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}


/***/
/*banner*/
#banner{
	display:block;
	margin:0 auto;
	padding-top:4px;
   position: relative;
   background:#fff;
   
}
#banner>a{
   position: absolute;
   top:40%;
   width:3.1875463306152705707931801334322%;
   z-index:222;
}


/*ie下的焦点图**/
#demo1{
  overflow:hidden;
  position:relative;
  z-index:0;
  width:100%;
  margin:0 auto;
}
#demo1 .imgList li{
	float:left;
	width:100%;
}
#banner .pager{ position:relative; height:3em; width:100%;z-index:100; text-align:right; text-align:center;}

#banner .pager a {
	display:inline-block; text-indent:-99999px;height:0.6em; width:0.6em;  border-radius:50%; _display:inline; margin-right:.7em;
    margin-top:1em;
	background:url(../images/ie_pager.png) no-repeat;
	background-size:100% 100%;
	}
#banner .pager a.selected,#banner .pager a:hover{
	background:url(../images/ie_pager_hover.png) no-repeat;
	background-size:100% 100%;
	
	
}

/* 滑动焦点图 */
.swiper-container00{width:100%;}
.swiper-container01,.swiper-container02,.swiper-container03,.swiper-container04{width:100%;}
.swiper-container {height:auto; text-align:center;margin:0 auto;position:relative; overflow:hidden; z-index:5; background:#F8F8F8;border-bottom:#294784 3px solid;}
.swiper-wrapper {position: relative;z-index:10;}
.swiper-slide {position:relative;text-align:center; float:left;}
.swiper-slide a{ position:relative; width:100%; height:100%; background:#fff; display:block; overflow:hidden;}
.swiper-slide img{ max-height:100%;vertical-align:middle; position:relative;}
.pagination{ position:relative; height:0em; margin-top:-2em; line-height:1.5em;width:100%;z-index:100;text-align:center;}
.pagination .swiper-pagination-switch{ display:inline-block; height:0.8em; width:0.8em; background:#2b74c3; _display:inline; margin-right:.7em;}
.pagination .swiper-active-switch{ background:#f68304;}
/*footer*/
#footer{
	background:#2b74c3;
	padding:2em 0;
	width:100%;
   font-size:.75em;
   color:#ffffff;
   line-height:2em; 
   overflow:hidden;
}
.footer-b{width:73%; margin:0 auto;}
.footer-l{float:left;}
.footer-r{float:right;}
@media only screen and (max-width: 640px) {
	.footer-l{
	float:left;	
	line-height:18px;
}
	.footer-r{
	float:left;
	line-height:18px;
	
}
.footer-b{
	width:90%;
	padding:0;
}
}
#footer span{
   margin-left:2%;
}

/**首页**/
.main{
	background:url(../images/mainbac_10.jpg)  top center;
	display:block;
	overflow:hidden;
	margin-top:24px;
}
.p1{
	width: 24.166666666666666666666666666667%;/**314px**/
	height:335px;
	padding:1%;
	margin-top:3%;
	margin-bottom:3.5%;
	margin-right:0.625%;
	border:#e1e1e1 1px solid;
	border-radius:0.8em;
	float: left;
	background:url(../images/bactiao_03.jpg) repeat-x;
	background-size:100% 100%;
}
.p1:last-child{margin-left:.73145245559038662486938349007315%;}

.p1_t {
	height: 33px;
	line-height: 33px;
	padding-left: 2%;
	color: #274583;
	font-family:"微软雅黑";
	font-size: 16px;
	font-weight: bold;
}
.p1_d {
	height:255px;
	padding: 0px 1.5923566878980891719745222929936%;
	line-height: 24px;
	max-height:255px;
	overflow:hidden;
}
.img {
	float: left;
	margin-right: 1.5923566878980891719745222929936%;
}
.more {
	margin-top:10px;
	float: right;

	
}

.p2 {
	margin-left:.73145245559038662486938349007315%;
	width: 40%;/**314px**/
	height:335px;
	padding:1%;
	margin-top:3%;
	margin-bottom:3.5%;
	margin-right:0.625%;
	border:#e1e1e1 1px solid;
	border-radius:0.8em;
	float: left;
	background:url(../images/bactiao_03.jpg) repeat-x;
	background-size:100% 100%;
}
.news{
	width:100%;
	height:155px;
	display:block;
	overflow:hidden;
	padding-top:5px;
}
.news li{position:relative;
	height:2.5em;
	line-height:2.5em;
	overflow:hidden;
	width:96%;
	padding:0 2%;
	border-bottom:dotted 1px #464646;}
	
.news li:hover a{
	color:#cd3300;

}
.news li a{
    display:inline-block;
	width:60%;
	overflow:hidden;
	color:#464646;
	height:2.5em;
	line-height:2.5em;
}
.news li i{
	color:#464646;
	position:absolute;
	top:0;
	right:3%;
}
.proshou{
	width:100%;
	display:block;
	overflow:hidden;
	padding-top:5px;
	
}
.proshou li{
	width:31.9%;
	display:block;
	overflow:hidden;
	margin-left:1%;
	margin-bottom:11px;
	float:left;
	border:#304d88 1px solid;
	
}
.proshou li:last-chid{ margin-left:0;}

@media only screen and (max-width: 640px) {
	.p1,.p2{width:96%; margin:0 auto; margin-top:1%; height:auto;}
	.p1_d{ height:auto;}
	.proshou li{width:30%;}}

/***/
.page{
   margin:0 auto 3em; 
}
.page-main{
  margin:3em auto .5em;
  background:#fff;
}
.row{
	width:80%;
	margin:0 auto;
   padding-top:3em;
}
/**box 标题**/
.box h3{
	border-bottom:.1em solid #595959;
	text-align:center;
	height:2em;
	font-weight:200;
	font-size:1.25em;
}
.box h3 {
	border-bottom:.12em solid #afadad;
	text-align:center;
	height:1em;
	line-height:1.8em;
	margin-bottom:2em;
}
.box h3 a{
	color:#464646;
	display:inline-block;
	background:#fff;
	font-size:1.25em;
	padding:0 3%;
}
/*pro 产品列表*/
.pro{
	margin:0 auto;
	font-size: .75em;
	min-height: 400px;
	margin-top: 1.875em;
	padding:1em 3.1413612565445026178010471204188% 0;
	margin-bottom: 56px;
	line-height: 2.2em;
	background: #fff;
	border: 1px solid #dcdcdc;
	overflow:hidden;
}
.pro1{
	width:99%;
	padding-top:40px;
	margin:0 auto;
	display:block;
	overflow:hidden;
}
.pro1 li{
   width:21%;
   float:left;
   margin:0  2% .5em;
   padding:0;
   max-height:163px;
   text-align:center;
}
@media only screen and (max-width: 640px) {.pro1 li{width:45%;}}
.pro1 li img{
	border:1px solid #304d88;
}
.pro1 li img:hover{
	border:1px solid #dd242a;
}


.pro1 li a{
   display:block;
   padding:0;
   color:#000;
   font-size:0.9375em;
}
.pro1 li a span{
   display:block;
   height:3em;
   overflow:hidden;
   line-height:3em;
}
.pro1 li a:hover{ color:#dd242a;}
.pro .page-count{
	width:82.198952879581151832460732984293%;
	float:left;
	margin-left:9%;
	background:#d7d7d7;
	border-radius:15em;
	height:2.5em;
	line-height:2.5em;
	font-size:.815em;
	text-align:center;
}
.pro h3 {
	text-align: center;
	color: #282828;
	font-size: 14px;
	font-weight: 100;
	margin-bottom:15px;
}
.pro .pi-img {
	border: 1px solid #e4e4e4;
	margin-bottom: 15px;
}
.pro .detail {
	width:75%;
	padding: 15px;
	margin:0 auto;
	text-align:left;
	color: #3e3e3e;
	background: #e8e8e8;
	border: 1px solid #d2d2d2;
}
@media only screen and   (max-width: 1120px) {
	.pro li{max-height:97px;}
}
/*aside 内页左导航*/
.content{
	display: block;
	overflow: hidden;
	margin-top: 45px;
}
.aside{
	width:18.25%;
	margin-top:13px;
	padding-bottom:6px;
	margin-bottom:80px;
	float:left;
	background:#2b74c3;
}
.aside >img {
   width:100%;
  border-top:.18em solid #fff;
}
.aside dl {
	width:95%;
   background:#fff;
   margin:0 auto;
}

.aside dl dt{
    background:#2b74c3;
	color:#fff;
	height:52px;
	text-align:center;
	font-size:16px;
	line-height:52px;
	margin-bottom:21px;	
}

.aside dl dd{
	width:81.642512077294685990338164251208%;
	height:25px;
	margin:0 auto;
	margin-bottom:13px;
	background:url(../images/asbac_12.jpg) repeat-x top center;
	border:1px solid #dcdcdc;
	font-size:0.875em;
	line-height:2.5em;
	text-align:center;
	position:relative;
	overflow:hidden;
}
.aside dl dd a{
	color:#626262;
	display:block;
}
.aside dl dd a:hover,.aside dl dd a.curr{
	color:#dd242a;	
}
.aside dl dd a.select{
	color:#dd242a;	
}
@media only screen and (max-width: 640px) {
    /* Style adjustments for viewports that meet the condition */
.aside dl dd a{
	color:#464646;
	display:block;
	width:100%;
}
}
@media only screen and   (max-width: 930px) {
  .page-main{background:#fff;}
  .aside{ float:none; width:100%; margin-bottom:0; }
  .aside-ewm,.aside >img{display:none;}
   .page-con{
	 float:none;
	 width:100%;
	  padding:0;
	  margin-left:0;
	  margin-top:.18em;
	  margin-bottom:0px;	
	  }
}

.aside-con{
	margin-top:40px;
}
.aside-con .con-box{
  display:block;
  padding:0 8% 15%;
  font-size:0.75em;
  line-height:1.8em;
  color:#0069b6;
  line-height:24px;
}
.con-box h3{
	font-weight:bold;
	font-size:14px;}
/*内页右侧上title*/
.page-con{
    width:72%;
	float:left;
	margin-top:13px;
	margin-left:6%;

}
.pc-tit{
	height:40px;
	display:block;
	overflow:hidden;
	color:#fff;
	text-align:left;
	font-size:1.125em;
	line-height:40px;
	color:#464646;
	padding-left:2%;
	border-bottom:#2b74c3 1px solid;
	
}
.pc-tit h3{
	width:15%;
	height:40px;
	overflow:hidden;
	font-family:"微软雅黑";
	font-size:16px;
	color:#dd242a;
	font-weight:bold;
	float:left;
	
}
.pc-tit span{
	height:40px;
	overflow:hidden;
	float:right;
}
@media only screen and (max-width: 640px) {
	.page-con{ width:100%; margin-left:0;}
	.pc-tit{ padding:0;}
	.pc-tit h3{ width:19%; font-size:12px;}
	.pc-tit span{ width:81%; font-size:8px;}
	}
/*联系我们 公司简介 等单页*/
.abouts,.contact{
    font-size:.875em;
	padding:0 3.1413612565445026178010471204188%;
	line-height:2.2em;
	overflow:hidden;
}
.abouts{
    font-size:.75em;
	min-height:400px;
	margin-top:1.875em;
	padding-top:1em;
	margin-bottom:56px;
	line-height:2.2em;
	background:#fff;
	border:1px solid #dcdcdc;
	overflow:hidden;
}
.con-tit{
	height: 40px;
	margin-bottom: 20px;
	line-height: 40px;
	text-align: center;
	color: #fff;
	font-size: 16px;
	background: #2b74c3;
	overflow:hidden;
}
.con-tit span{
	padding: 0 70px;
	background: url(../images/bg_line.png) repeat-x center left;
}
.con-tit span i{
	display: inline-block;
	padding: 0 10px;
	background: #2b74c3;
}
@media only screen and (max-width: 640px) {
	.abouts{
    font-size:.75em;
	min-height:100px;
	margin-top:1.0625em;
	padding-top:1.5625em;
	line-height:2.2em;
	background:#fff;
	border:1px solid #dedede;
	overflow:hidden;
}
.con-tit span i{padding: 0 3px;}
}

.con-l{
	float:left;
	padding-left:3%;
	margin:1em 0; 
	width:40%;
}
.con-l h2{ 
	font-size:14px;
	color:#0069b6;
}
.con-map{
	float:right;
	width:55%;
	padding-right:2%;	
	border:.08em solid #a9a9a9;
	padding-bottom:.08em;
}
.con-map img{
	width:100%;
	border:#1565a0 2px solid;
	
}
/*产品简介页面*/
#pic{
	width:96%;
	display:block;
	overflow:hidden;
	margin:0 auto;
	padding-top:3%;
	padding-bottom:6%;
}
#pic li{
	float:left;
	width:18%;
	margin-right:2%;
	margin-bottom:2%;
}
#pic li img{ border:1px solid #005797;}
#pic li span{ height:25px; display:block;line-height:25px; text-align:center; color:#fff; background:#2b74c3; margin-top:5px;}
/*message表单*/
.con-form table{
	width: 100%;
	color: #585858;
}
.con-form table{
	width: 100%;
}
.con-form table input{
	width: 155px;
	height: 10px;
	padding: 5px;
	margin-left:5px;
	border: 1px solid #bbbbbb;
	background: none;
}
.con-form table tr{
	line-height:35px;
}
.con-form table textarea{
	width: 83%;
	height: 100px;
	padding: 5px;
	margin-top:8px;
	margin-left:5px;
	border: 1px solid #bbbbbb;
	background: none;
}
.con-form table input[type="submit"]{
    display: block;
	width: 55px;
	height: 23px;
	margin: 10px auto 25px;
    padding: 0;
	border: none;
	background: #3e5eb9;
	color: #fff;
	font-size:12px;
}
.con-form01{
    padding: 0 20px;
	font-size: 14px;
}
.con-form01 table input{
    width: 75%;
	height: 15px;
}
.con-form01 table textarea{
    width: 88%;
	height: 195px;
}
.con-form table input[type="submit"]{
	width: 82px;
	height: 28px;
	margin: 20px auto;
    padding: 0;
	border: none;
	background: url(../images/bg_sub.png);
	color: #fff;
	font-size:14px;
}
/* abouts 新闻列表*/

.abouts li{
position:relative;
	height:2.5em;
	line-height:2.5em;
	overflow:hidden;
	padding:0.5% 3%;
	border-bottom:dotted 1px #626262;
}
/*.abouts li:hover{
	background:#bfd8ff;
}*/
.abouts li:hover,.abouts li a:hover{
	color:#fff;
	background:#dd242a;

}
.abouts li a{
    display:inline-block;
	width:90%;
	overflow:hidden;
	height:2.9em;
	line-height:2.5em;
}
@media only screen and (max-width: 640px) {.abouts li a{width:70%;}}
.abouts li i{
	position:absolute;
	/*top:0;*/
	right:3%;
}
/*.new-info{
    color:#1e1e1e;
	font-size:.815em;
	line-height:2.5em;
	width:82.198952879581151832460732984293%;
	margin:2% auto ;
	font-size:.875em;
}*/
.abouts h3{
	font-size:14px;
	color:#464646;
	line-height:1em;
    border-bottom:.08em dashed #c4c4c4;
	text-align:center;
	margin-bottom:.3em;
}
.abouts h3 span{
	color:#878787;
	font-size:.78em;
	line-height:2.5em;
    font-weight:100;
	display:block;
}
/*news pro 翻页*/
.page-count{
	text-align:center;
	width:82.198952879581151832460732984293%;
	margin:3em auto 3em;
	background:#d7d7d7;
	border-radius:15em;
	height:2.5em;
	line-height:2.5em;
	font-size:.815em;
}
.page-count a{
	margin:0 1%;
	color:#464646;
}
.page-count a:hover{
	color:#dd242a;}

@media only screen and (max-width: 1145px) {
   .warp{
       width:99%;	   
   }

}
@media only screen and   (max-width: 1120px) {
	.pro-list li{
		width:23.95%;
	}
}
@media only screen and   (max-width: 1035px) {
	.pro-list li{
		width:23.9%;
	}
	#header  .logo1{
        display:none;
    }
	#header  .logo2,#menu{
        display:block;
    }
	#nav{
		position:fixed;
		width:40%;
		right:-55%;
		top:0;
		background:#f7f6f6;
		height:100%;
		z-index:10;
	}
	#nav ul{
		margin:5% 0 0;
		padding:0;
	}
	#nav ul li{
		background:none;
		display:block;
		float:none;
		text-align:center;
		margin:0;
		padding:0;
		line-height:2.5em;
	}
	#nav ul li:first-child{
		margin:0;
	}
	#nav ul li a{
		font-size:14px;
		color:#464646;
	    display:block;
	}
	#nav ul li a:hover,#nav ul li a.curr{
		color:#ce060c;

	}
	#close_menu{
       display:block;
	   position:absolute;
	   left:-28px;
	   top:40%;
	   color:#ce060c;
	   background:#5494d9;
	   padding:2%;
    }
}
@media only screen and   (max-width: 921px) {
    .pro-list ul{
	   margin-left:15%;
	   overflow:hidden;
	}
	.pro-list li{
		width:37%;
		margin:0 8% 2em 0;
	}
	
}

@media only screen and (max-width: 640px) {
    /* Style adjustments for viewports that meet the condition */
	.about .a-con .ac-text{
		width:100%;
		float:none;
	}
	.about .a-con .ac-ewm{
	   display:none;
	}
	.pro-list ul{
	   margin-left:5%;
	   overflow:hidden;
	}
	.pro-list li{
		width:45%;
		margin:0 3% 2em 0;
	}
	 .aside dl dd ul{
		position:fixed;
		width:99%;
		top:0;
		background:rgba(14,69,98,.8);
	    padding:2% 0;
		margin-left:.5%;
		height:100%;
   }
    .aside dl dd ul li{
		width:88%;
		float:none;
		display:block;
	    margin:0 auto;
		background:rgba(255,255,255,.9);
		
   }
   .aside dl dd ul li a{
		color:#0e4562;
   }
   .aside dl dd ul a.close{
		display:block;
   }
}
/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Image replacement
 */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    /* IE 6/7 fallback */
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

/*
 * Hide from both screenreaders and browsers: h5bp.com/u
 */

.hidden {
    display: none !important;
    visibility: hidden;
}

/*
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
 */

.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: h5bp.com/p
 */

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

/*
 * Hide visually and from screenreaders, 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;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   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,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid required HTTP connection: h5bp.com/r
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        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 for images, or javascript/internal links
     */

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

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

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

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

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

    @page {
        margin: 0.5cm;
    }

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

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