html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video
{
  border:0;
  font-size:100%;
  margin:0;
  padding:0;
  vertical-align:baseline
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section
{
  display:block
}

/*-----------------------------------------------------------------------------------*/
/*	1.	Document Setup
/*-----------------------------------------------------------------------------------*/
ol,ul
{
  list-style:none
}

blockquote,q
{
  quotes:none
}

blockquote:before,blockquote:after,q:before,q:after
{
  content:none
}

table
{
  border-collapse:collapse;
  border-spacing:0
}

a {
color:#4f4f4f;
text-decoration:none;
-moz-transition:all 500ms ease 0s;
-o-transition:all 500ms ease 0s;
-webkit-transition:all 500ms ease 0s;
transition:all 500ms ease 0s;
}

a:hover {
text-decoration:none;
color: #999;
-moz-transition:all 500ms ease 0s;
-o-transition:all 500ms ease 0s;
-webkit-transition:all 500ms ease 0s;
transition:all 500ms ease 0s;
}
a:hover
{
  text-decoration:none;
}

p
{
  line-height:20px;
  margin-bottom:5px
}

strong
{
  color:#000;
  font-weight:700
}

img
{
  height:auto;
  display:block;
  margin: auto;
}

code,pre { display:block; }
/* webkit, opera, IE9 */
::selection {
background:#000;
color: #fff; 
}

/* mozilla firefox */
::-moz-selection  { 
background:#000; 
color: #fff;
}


.clearfix
{
  zoom:1
}

.clearfix:before,.clearfix:after
{
  content:"";
  display:table
}

.clearfix:after
{
  clear:both
}
/*-----------------------------------------------------------------------------------*/
/*	1.						       presentation css
/*-----------------------------------------------------------------------------------*/
html,body
{
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	background-color:#FFF;
	/*background:url(image/back.png) repeat-x;*/
	font-family:'Open Sans', sans-serif;
}
h1,h6{
    color:#4f4f4f;
    font-weight: 400;

}
h1{
  font-size: 43px;
  text-transform: uppercase;
}
h6{
    font-size: 19px;
}
.main
{
	width:100%;

}
.container{
    width: 70.36458333%;
    margin: auto;
}

.version-container{
    width:30%;
    float: left;
    display: table;
}

.version-container div{
    width:100%;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.monitor-container{
    width:70%;
    float:right;
}
.screen{

}
.hardware{

}
ul li
{
	display:block;
	float:left;
	margin-left:60px;
	margin-top:50px;
}
.image-pos
{
	position:absolute;
	top:16px;
	left:16px;
}
.floater{	
	width:352px;
	height:222px;
	position:relative;
	overflow:hidden;
	}
.floater img
{
	position:absolute;
	left:0;
	transition:3800ms;
}
.floater img:hover
{
	left:-790px;
}
.vertical
{
	left:100px;
}
.upper{	
	width:352px;
	height:222px;
	position:relative;
	overflow:hidden;}
.upper img
{
	position:absolute;
	top:0;
	transition:5900ms;
}
.upper img:hover
{
	top:-1125px;
}
	
.monitor
{
	position:relative;
}
.first-title
{
	font-size:40px;
	font-weight:700;
	text-transform:uppercase;
	color:#6f6f6f;
}
.second-title
{
	text-transform:uppercase;
	font-size:24px;
	font-weight:300;
	margin-top:13px;
	color:#6f6f6f;
}
.subtitle
{
	text-transform:capitalize;
	font-size:18px;
	font-weight:400;
	color:#6f6f6f;
}
.seperator
{
	font-size:32px;
	font-weight:400;
	text-transform:uppercase;
	color:#6f6f6f;
	top:-6px;
	position:relative;
}
.title
{
	margin-left:60px;
}
.versions 
{
	position:relative;
	margin-top:-10px;
}
.versions .ver1
{
	position:absolute;
	left:158px;
	top:-5;
	font-size:30px;
	font-weight:300;
	color:#4f4f4f;
}
.versions .ver2
{
	position:absolute;
	left:698px;
	top:-5;
	font-size:30px;
	font-weight:300;
	color:#4f4f4f;
}
.demo-title{
	width:100%;
	text-align:center;
	color:#4f4f4f;
    margin-top: -38px;
}
.demo-title span{
	font-size:25px
}

.demo-title .desc{
	font-size:15px;
}

@media (min-width: 1200px) and (max-width: 1900px) {
    .container{
        width: 95.365%;
    }
    ul li{
        margin-left:5%;
    }

}

@media (min-width: 980px) and (max-width: 1200px) {
    .container{
        width: 100%;
    }
    .version-container{
        width: 16%;
    }
    .monitor-container{
        width: 84%;
    }
    ul li{
        margin-left: 2%;
    }
    h1{
	font-size:25px
    }
     h6{
	font-size:10px;
     }
}

@media (max-width: 979px) {
    .container{
        width: 100%;
    }

    .version-container,
    .monitor-container{
        width: 100%;
        float: none;
    }
    .version-container{
        margin-top: 20px;
    }

    .monitor-container{
        margin-bottom: 20px;
    }

    ul{
        text-align: center;
    }

    ul li{
        display: inline-block;
        float: none;
        margin-left: 0;
    }

}