@charset "UTF-8";
/* CSS Document */
@font-face{font-family: newErasDemi;src:url('../Fonts/ITCErasStd-Bold-Exp2.ttf') format("truetype");}
@font-face{font-family: charcoal_exp;src:url('../Fonts/Charcoal-Exp.ttf') format("truetype");}
@font-face{font-family: charcoal;src:url('../Fonts/Charcoal.ttf') format("truetype");}
@font-face{font-family: newErasMed0; src: url('../Fonts/ITCErasStd-Med-0.ttf')  format("truetype");}
@font-face{font-family: newErasDem0; src: url('../Fonts/ITCErasStd-Dem-0.ttf')  format("truetype"); font-weight:600; font-style:normal;}


body{ margin:0px; padding:0px;font-family: newErasMed0; color:black; height:100%; max-height:630px; width:100%; max-width:821px;}
html{ height:100%; width:100%;}
#cable_container{background-color:#e6e6e6; width:100%; overflow:hidden; max-width:821px; height:100%; max-height:630px; text-align:center; position:relative; min-width:320px; min-height:400px;}
h2{margin:0px; padding:0px;}
a:hover {color:#9B242D;}
a:visited {color:#c00;}
img{border:0;}
#dark_wall{position:absolute; width:821px; height:630px; background-image:url(../home_cable_features/dark_wall.png);} 
#outside_link{padding-left:290px;}
.title{font-family:newErasDemi; font-size:20px;}

/**********************************************/
/*			 		PAGE1	 				  */
/**********************************************/
#custom_cable{position:absolute; top:7.9%; left:100px;}
#custom_cb_1{position:absolute; top:5%; left:20px; width:42%;}
#custom_cb_2{position:absolute; top:44%; left:54%; width:42%; }
#custom_cb_3{position:absolute; top:53%; left:2.4%; width:48%;}
#custom_text{width:400px; text-align:left; margin-left:430px;}
#custom_text_header{ margin-left:350px; color:#c00;}

/**********************************************/
/*			 		PAGE2	 				  */
/**********************************************/
#cb8{float:left; width:59.56%; margin-top:-20px;}
#cb8_header{color:#c00;}
#cb8_text{float:left; width:300px; text-align:left; margin-left:-35px; margin-top:30px;}
#cb8_text li{ margin-left:-15px;}


/**********************************************/
/*			 		PAGE2	 				  */
/**********************************************/
#adapter{float:left; width:91%; margin:-15px 0 0 0;}
#adapter_header{color:#c00; margin-left:70px;}
#adapter_text{float:left; width:450px; text-align:left; margin-left:-400px; margin-top:370px;}

/**********************************************/
/*			 		PAGE3	 				  */
/**********************************************/
#custom_harness{margin:0 0 0 0;}
#custom_harness_header{color:#c00;}
#rack{ margin-top:-20px; margin-left:21%; float:left;}

#custom_harness2{margin:-55px 0 0 12%; float:left;}
#custom_harness_header2{ float:left; margin:30px 0 0 12%; color:#c00;}


/**********************************************/
/*				ARROWS & DOTS				  */
/**********************************************/
#left_arrow{position:absolute;left:0px;top:45%;}
#right_arrow{position:absolute;right:0px;top:45%;}

#left_arrow a{width:43px; height:45px; float:left; background: url(../home_hvx_features/arrows.png) no-repeat -3px -44px;}
#left_arrow a:hover{background: url(../home_hvx_features/arrows.png) no-repeat -3px 0;}
#left_arrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

#right_arrow a{width:43px; height:45px; float:left; background: url(../home_hvx_features/arrows.png) no-repeat -45px -44px;}
#right_arrow a:hover{background: url(../home_hvx_features/arrows.png) no-repeat -45px 0px;}
#right_arrow a:focus{outline-color:invert; outline-style:none; outline-width:medium;}

#scroll_dots{position:absolute; top:600px; left:375px; width:146px; overflow:hidden;}


@media only screen and (max-width: 820px) {
#cb8_text{width:40%;  margin-top:30px;}
#adapter_text{ position:absolute; width:450px; bottom:0px; left:0px; margin-left:0px; background-color:rgba(231,231,231,0.8)}
#custom_harness2{ margin-top:20px;}


#custom_cb_1{position:absolute; top:5%; left:22.5%; width:55%;}
#custom_cb_3,#custom_cb_2{display:none; }

#custom_text{ position:absolute; width:80%; text-align:left; left:20%;  bottom:0%; margin-left:0; }
#custom_text_header{ position:absolute; bottom:22%; left:20%; margin-left:0px; color:#c00;}
#examples{ display:none;}
}

@media only screen and (max-width: 599px) {
.title{font-size:18px;}
#cb8_header{ margin-left:15px;}
#cb8{float:left; width:50%; margin-left:25%;}
#cb8_text{ width:90%;  margin-top:-40px; margin-left:5%; font-size:14px;}
#adapter_text{ width:98%;}
#custom_text{ width:90%; text-align:left; left:10%; }

}

@media only screen and (max-width: 399px) {
.title{font-size:16px;}
#cb8_text{ font-size:12px;}
#adapter_text{ font-size:14px;}

}