/*** reset ***/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
a{text-decoration:none;color:#FFF;outline:none;}
article, aside, footer, header, nav, section, time{display:block;}
/*** clearfix ***/
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: '.';clear: both;height: 0;}
* html .clearfix {zoom: 1;}
*:first-child+html .clearfix {zoom: 1;}

body{font:15px/22px "trebuchet MS",Helvetica,Arial,Verdana,sans-serif;background:url(../images/faq-bg.jpg) center top repeat;background-attachment:fixed;overflow-x:hidden;width:100%;color:#FFF;}
header{margin-bottom:20px;position:relative;}
header, footer{background:rgba(0,0,0,0.3);color:rgba(255,255,255,0.7);padding:10px 0;text-align:center;font-size:13px;}
header ul{position:absolute;right:20px;top:10px;}
header ul li{float:left;margin-right:10px;}
header ul li a{color:#999;color:rgba(255,255,255,0.6);}
header ul li a:hover{color:#FFF;}
nav{width:768px;margin:0 auto;}
nav ul{padding-left:22px;}
nav ul li{float:left;margin:0 20px 20px 0;position:relative;overflow:hidden;}
nav ul li a{display:block;width:104px;height:104px;border-radius:50%;background:rgba(0,0,0,0.5);text-align:center;line-height:104px;overflow:hidden;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
}
nav ul li a:hover{background:rgba(0,0,0,0.7);line-height:300px;}
nav ul li a span{background-repeat:no-repeat;display:block;width:50px;height:50px;position:absolute;left:28px;top:-100px;visibility:hidden;background-size:50px 50px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;}
nav ul li a:hover span{top:28px;visibility:visible;}
.faq-ico{background-image:url(../images/faq.png);}
.products-ico{background-image:url(../images/products.png);}
.books-ico{background-image:url(../images/books.png);}
.website-ico{background-image:url(../images/website.png);}
.software-ico{background-image:url(../images/software.png);}
.app-ico{background-image:url(../images/app.png);}
article{margin-bottom:100px;}
article h3{background:rgba(0,0,0,0.3);color:rgba(255,255,255,0.8);font-size:30px;line-height:32px;padding:15px 55px 15px 25px;position:relative;}
article h3 span{display:block;width:50px;height:50px;background-size:50px 50px;float:left;position:relative;bottom:8px;margin-right:15px;}
article h3 a{position:absolute;right:20px;top:14px;background-image:url(../images/top.png);background-repeat:no-repeat;width:35px;height:35px;background-size:35px 35px;display:block;text-indent:-9999px;}
article h3 a:hover{background-image:url(../images/top2.png);}
#faq{padding:20px 0 0 20px;}
#faq div{padding:25px;background:rgba(0,0,0,0.5);color:#FFF;width:304px;margin:0 20px 20px 0;}
#faq h4{font-size:16px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,0.5);min-height:45px;}
#faq p{color:rgba(255,255,255,0.8);}
#faq h4 span, #faq p span{color:rgba(255,255,255,0.5);font-size:45px;margin-right:15px;display:block;float:left;height:25px;position:relative;top:10px;}
article ul{padding:20px 0 0 20px;}
article ul li{float:left;margin:0 20px 20px 0;}
article ul li a{color:rgba(255,255,255,0.8);display:block;padding:25px;background:rgba(0,0,0,0.5);color:#FFF;width:117px;text-align:center;}
article ul li a:hover{background:rgba(0,0,0,0.8);color:#FFF;}

@media all and (max-width:320px){
	#faq div{width:230px;}
	article ul li a{width:80px;}
	article h3{text-align:center;}
	article h3 span, article h3 a{display:none;}
	nav{width:320px;}
	nav ul{padding-left:20px;}
	nav ul li a{width:80px;height:80px;line-height:80px;}
	nav ul li a span{display:none;}
	nav ul li a:hover{line-height:80px;}
	footer{font-size:11px;}
}
.mobile header h1{padding-top:40px;}
.mobile header ul{position:absolute;left:0;top:0;width:100%;}
.mobile header ul li{width:33.33%;height:40px;line-height:40px;margin:0;background:rgba(0,0,0,0.7);}
.mobile header ul li a{display:block;}