/*BASIC*/

* {
  margin: 0;
  padding: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
	font-family: 'corbert';
	background: #343D46;
}

/*HEADER*/
.header {
  height: 130px;
  background: #343D46;
  color: #eee;
  text-align: left;
  font-size: 14px; 
/*   font-size: 10px/25px Helvetica, Verdana, sans-serif; */
}

.header a {
  color: #999;
}

/*LIST*/
ul {
  list-style: none;
}

/*FORM*/
form {
  margin: 0px;
}

input {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

label {
  display: block;
  height: 430px;
  width: 50px;
  background: #999;
  text-align: center;
  font: 8px/50px Helvetica, Verdana, sans-serif;
  margin-bottom: 10px;
  float: left;
  overflow: hidden;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

#rad1 + label {
  background: #CCC;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad1 + label:hover {
  background: #232323;
    background: url('images/graphics.png');
    background-repeat: no-repeat;
  img
  color: #fff;
  cursor: pointer;
}

#rad2 + label {
  background: #888;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad2 + label:hover {
  background: #232323;
    background: url('images/animation.png');
    background-repeat: no-repeat;
  img
  color: #fff;
  cursor: pointer;
}

#rad3 + label {
  background: #CCC;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad3 + label:hover {
  background: #232323;
    background: url('images/electronics.png');
    background-repeat: no-repeat;    
  img
  color: #fff;
  cursor: pointer;
}

#rad4 + label {
  background: #888;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad4 + label:hover { background-repeat: no-repeat; background-attachment: scroll; 
               background-image: url('images/programming.png'); color: #fff; 
               cursor: pointer; background-position: 0% }
#rad5 + label {
  background: #CCC;
  -webkit-transition: width 1s ease, background 0.5s ease;
  -moz-transition: width 1s ease, background 0.5s ease;
  -o-transition: width 1s ease, background 0.5s ease;
  -ms-transition: width 1s ease, background 0.5s ease;
  transition: width 1s ease, background 0.5s ease;
}

label:hover, #rad5 + label:hover {
  background: #232323;
  background: url('images/close.png');
    background-repeat: no-repeat;  
  color: #fff;
  cursor: pointer;
}


/*SLIDES*/
.accslide {
  topmargin:130px;
  color: #333;
  display: hidden;
  height: 550px;
  width: 0px;
  background: #fff;
      background: url('images/swirlbk.jpg'); repeat:none;
  font: 14px/1.5 Corbert;
  padding: 10px 0;
  float: left;
  overflow: hidden;

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -ms-transition: all 1s ease;
  transition: all 1s ease;
}

.accslide p, h2, img {
  width: 420px;
  padding-left: 10px;
  font-size: 14px;
}

.accslide img {
  margin-top: 10px;
}

input[type="radio"]:checked+label ~ .accslide {
  width:75%;                                   /* was 650px and is the wide of the sliding box  */
}

.intromask {
 	width:100%; 
 	min-height:100%; 
 	background: url('images/raster-dark.png');
 	position: absolute; z-index: 2;
}  

#fixedbg {
	width: 100%; 
	height: 100%; 
	background:url('video/poster.jpg') center center no-repeat;
	background-size:cover; 
	position: fixed; 
	top:0; 
	margin:0; 
	z-index:-1; 
	overflow: hidden;
}

#scrollup {
	display: block;
}

/* Reset Button*/
#reset{
  float:right;
  margin-top: 10px;
}