@charset "utf-8";
/* North East Electronics */

/* branding
teal #005b69 rgba(0,91,105,1);
pink #e72489 rgba(231,36,137,1);
*/

/* Foundation*/
.row {max-width:80rem;}
.tabs-content>.content { padding-top:0px;}
.tabs dd.active a, .tabs .tab-title a:hover { background-color:rgba(236,0,140,1); color:#ffffff;}
.tabs dd>a, .tabs .tab-title>a { background-color:#FFFFFF;}
.tabs dd.active a, .tabs .tab-title.active a { background-color: #3F4D59; color:#ffffff;}

.contain-to-grid { background:none;}
.top-bar { background:none;}
.top-bar .title-area { background:#191919;}
.top-bar-section li:not(.has-form) a:not(.button) { background:none; padding:0px 8px; line-height:1.8rem; border-radius:5px;}
.top-bar-section .dropdown li:not(.has-form) a:not(.button) { background:none;} /* dropdown li a */
.top-bar-section .dropdown li:not(.has-form) a:not(.button):hover { color:#000000; background:none;} /* dropdown li a :hover */
.top-bar-section ul li > a { color:#999999; font-size:1.2rem;} /* all navs a  */
.top-bar-section ul li:hover:not(.has-form) > a { color:#ffffff; background:none;} /* all hover on top lvl and dropdowns*/

.top-bar-section li:not(.has-form) a:not(.button):hover { background:#565656;} /* main hovers */
.top-bar-section ul li {background:none;}

.tabs.vertical { width:100%; max-width:100%;}
.tabs dd > a, .tabs .tab-title > a { padding:10px;}

/* Typography */

body {background-color: #fff;}

@font-face {font-family: DINMittelschriftStd; src: url(../fonts/DINMittelschriftStd.otf);}
@font-face {font-family: akzidenz; src: url(../fonts/akzidenz_grotesk_be_regular_1.ttf);}
@font-face {font-family: helvetica-con; src: url(../fonts/Helvetica-Condensed-Light-Li.ttf);}



h1,h2,h3,h4,h5,h6 { color:#ffffff; font-family: 'helvetica-con', sans-serif; font-weight: 700;}
h1 { font-size:1.9rem; color: #005b69;}
h2 { font-size:1.7rem;}
h3 { font-size:1.5rem;}
h4 { font-size:1.3rem;}
h5 { font-size:1.1rem;}
h6 { font-size:1.05rem;}

p {font-size: 0.875rem; margin-bottom:0.8rem;}
strong {font-size: 1.3rem; font-weight: 400;}
.wht h1,h2,h3,h4,h5,h6,p { color:#000000;}

.content-n h2 { font-size:1.3rem; margin:0px;}
.content-n h3 { font-size:1.1rem; margin-bottom: 2px; color:#EC008C;}
.content-n h3 .italic { font-style: italic; font-size:1rem; color:#000000;}

/* Navigation */

#nav-section { overflow:hidden;}
#nav-section nav { overflow-y: scroll; height:100%; padding-bottom:20px; margin-right:-17px;}
#nav-section ul { margin:0px; list-style-type: none; position: relative; z-index: 10000;}
#nav-section ul li { }
#nav-section ul li a { display:block; padding: 10px 20px; color:#ffffff; font-family: akzidenz, sans-serif; text-transform:capitalize; font-size:1.1rem;}
#nav-section ul li a:hover { display:block; color:#cccccc; background:rgba(24, 42, 56, 0.83);}

#ani-nav { left:0px;}
#ani-nav { background-color:rgba(24, 42, 56, 0.83); position: absolute; left:0px; top:0px;  z-index:9000; transition:0.4s; width:100%; height:100%; border-radius:0px;}

/*#content-container.nav-closed #ani-nav{ width:0px; height:0px; border-radius:0px 0px 100% 100%; left:100%;} old */

/* Full drop Nav */
/*nav.full-drop { display:block; transition:1.2s; overflow: hidden; max-height:50px; max-width: 80rem; width:100%; margin:auto;}
nav.full-drop.closed { max-height:0px;}

nav.full-drop ul  { list-style-type:none; margin:0px; padding:0px; float:right;}
nav.full-drop ul li {float:left;}
nav.full-drop ul li a { display:block; padding:0.6rem 0.8rem; color:#ffffff;}
nav.full-drop ul li a:hover { background:#666666;} /* hover for <a> in nav */

/*@media only screen and (max-width: 640px) {
	nav.full-drop { max-height: inherit;}
	nav.full-drop ul { float:none;}
	nav.full-drop ul li {float:none; width:100%; text-align:left;}

}*/

/* Layout */

#content-container { width:100%; height:100%; overflow:hidden; position: relative; color:#ffffff;}

#nav-section, #main-section { transition:0.4s;}

#nav-section {  height:100%; width:15%; left:0px;  float:left; position: absolute; }
/*#nav-section {  height:100%; width:15%; left:85%;  float:left; position: absolute; } old */
#main-section {  width:100%; left:15%;  float:left;  position: absolute; }
/*#main-section {  width:100%; left:-15%;  float:left;  position: absolute; } old */

#content-container.nav-closed #nav-section { left:-15%; }
/*#content-container.nav-closed #nav-section { left:100%; } old */
#content-container.nav-closed #main-section { left:0px; }
/*#content-container.nav-closed #main-section { left:0px; } old */

#tel { text-align: right; color:#FFFFFF;}
#tel h4 { margin:5% 0%; color:#ffffff;}
#logo { min-height:1px; padding-top:10px; position: relative; }
#logo img { position: absolute; max-width:240px; width:100%;}
#logo2 { padding:25px 0px 0px 0px; background:#ffffff; border-radius:100%; position: relative; max-width:175px; }
/*#logo2 { padding:1px; background:#ffffff; border-radius:100%; position: relative; margin:10px 0px 0px 50px; max-width:175px; } old */
#main-area {}

footer {position: fixed; bottom:0px; width:100%; padding:5px; background-color: #005b69;}
footer p { padding:0px; margin:0px; text-align: center; color:#ffffff; font-size:0.5rem;}

/* layers */
#logo2 { z-index: 110; }
/*#logo2 { z-index: 110; position: absolute; } old */
/*.left-bar { z-index:100; position: relative; }*/
header {position: relative; z-index: 999;}
footer {z-index: 999;}


#extraText { position: fixed; height:auto; top:100%; left:0px; width:100%;  transition: 0.8s; z-index:10000000000; }
#extraText p, #extraText h3, #extraText h4 { color:#ffffff;}
#extraText.open { top: 50px; }

/*#company-address {float: left; margin-top: 1.1rem;}*/
#company-address {float: left; margin-top: 0.8rem;}
#other-logos {margin-top: 1.1rem;}
#other-logos img {margin-right: 1.2rem;}

#tcon { height:100%;}

#tcon .left-bar { height:100%; position: relative; float:left; width:20%;  z-index:100000;}
#tcon .right-bar { height:100%; position: relative; float:left; width:80%;}
#tcon .left-bar { text-align:center;}
#tcon .left-bar #logo { position: absolute; top:2%;}
#tcon .left-bar .ab-box { width:50%; height:100%; background-color: #3c3f57;}

#fixed-bgimage {position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 0;}



/* Classes */
.header { min-height:100px; background-color: rgba(255,255,255,1);}
.row.wide {max-width:100%;}
/*.left-bar { background-color:#363c55; width:10%; height:100%; left:0px; top:0px; float:left;}*/
/*.top-header-bar { min-height:80px; max-height:100px;}*/

.main_content { background-color:rgba(255,255,255,0.8); padding:10px; min-height:400px;}

.addr {padding:20px 20px 10px 20px; float:right;}
.fb {padding:25px 0px 10px 0px; float:right;}
.tel {padding:30px; float:right;}
.tel2 { color:#ffffff; padding:5px;}
/*.tel2 { color:#000000; padding:5px;} old*/


.toggle-nav {  font-size:3rem; color:#FF4F2C; padding:20px; cursor:pointer;}

.nav_button { padding:10px;}
/*.content-n { background-color:rgba(255,255,255,0.5); padding:10px;}  old */
.content-n { background-color:rgba(0,0,0,0.5); padding:40px 60px;}
.content-n p, .content-n h1, .content-n h2, .content-n h3, .content-n h4, .content-n h5, .content-n h6 { color:#ffffff;}
.rightbox { padding:6px; color:#ffffff;}

.front-box {width:100%;  margin:auto; position: relative; border:4px solid #ff4f2c; background-color: #000;}
.front-box.no-border { border:none;}
.front-box h1 { text-align: left; color:#EC008C;}
.front-box p{ text-align: left;}
.front-box img {width:100%; opacity: 0.7;}
.front-box:hover img {opacity: 1;}
.front-box-title { position: absolute; }
/*.t1 { top:25%; right:4%; color:#fff;}*/
.t1 {
  top: 5%;
  left: 10%;
  color:#fff;
}

.t2 { bottom:4.5%; right:4%; color:#484848;}
.t3 { top:2%; right:4%; color:#484848;}
.t4 { top:2%; right:4%; color:#ffffff;}
.t5 { top:17%; right:4%; color:#ffffff;}
.t6 { bottom:2%; right:4%; color:#484848;}

/* colours */
.dark-pink { background-color:#3F4D59;}
.light-pink { background-color:rgba(236,0,140,1);}
.dark-green { background-color:#4E5802;}
.pink-txt { color:#000000;}

.ba {padding:2px; background-color: rgba(0,91,105,1); overflow:auto;}
.spacer-cus1 { padding: 26px;}
.middle { max-width:80rem; width:100%; margin:0 auto; background:rgba(0,91,105,0.85); padding:20px; max-height:600px; overflow:auto; /*padding-bottom:400px;*/}
.toggleExtra {width: 250px; float: right; color:#fff; font-size:1.3rem; cursor:pointer; padding: 0px; margin: 0px;}
.toggleExtra.close {width: 25px; height: 25px; font-size:1rem; color:#ffffff; float:right; border:1px solid #ffffff; border-radius:100%; padding:0px 8px; }
.button, .button:hover, .button:active { background:#ff4f2c; }

.find-out-more { background:#ff4f2c; color:#ffffff; padding:5px 15px; font-size:1.6rem;}

.front-box:hover .front-box-title { color:#333333;}

.wht-txt { color:#ffffff;}

.alpha { opacity:0.2;}
/* Other */

@media only screen and (max-width: 1280px) {
  #nav-section {  height:100%; width:30%; left:0px;}
  /*#nav-section {  height:100%; width:30%; left:70%;} old */
  #main-section {  width:100%; left:30%;  }
  /*#main-section {  width:100%; left:-30%;  } old */

  #content-container.nav-closed #nav-section { left:-30%; }
  #content-container.nav-closed #main-section { left:0px; }
strong { font-size:1rem;}
}

@media only screen and (max-width: 1024px) {

  .content-n { padding:10px 20px 80px 20px;}
  .tabs dd>a, .tabs .tab-title>a {
      background-color: #FFFFFF;
      width: 50%;
      border: 1px solid #EC008C;
      float: left;
      /*margin: 1% 5%;*/
    }

    .tabs.vertical { padding-bottom:10px;}



  #nav-section {  height:100%; width:25%; left:0px;}
  /*#nav-section {  height:100%; width:25%; left:75%;} old */
  #main-section {  width:100%; left:25%;  }
  /*#main-section {  width:100%; left:-25%;  } old */

  #content-container.nav-closed #nav-section { left:-25%; }
  /*#content-container.nav-closed #nav-section { left:100%; } old */
  #content-container.nav-closed #main-section { left:0px; }
}

@media only screen and (max-width: 800px) {

  #other-logos img { max-width: 45px; margin-bottom: 10px;}
  /*.tel { padding:22px 5px;}*/
  .toggle-nav { padding:10px 5px;}
  #logo { text-align:center; }
  #logo img { left:0px !important; position: relative; margin-bottom:10px; }
  .header { min-height:auto;}
  /*#logo2 { max-width:100px;}*/

  .tel.blk { color:#000000;}
.block-grid-box { margin:5px;}
  /*#logo2 {position: relative; margin:10px 0px 0px 0px;}*/


/* Block Grid Hacks*/
  /*.medium-block-grid-3  li:first-child { width:65%;}

  .small-block-grid-2>li:nth-of-type(2n+1) { clear:none;}
  .medium-block-grid-3>li:nth-of-type(3n+1) { clear:none;}

  .medium-block-grid-3>li:nth-of-type(8n+3) { clear:both;}*/



}

@media only screen and (max-width: 640px) {
  .fb { clear:both;}
  h2 { font-size:1rem;}
/*
  .medium-block-grid-3  li:first-child { width:100%;}
  .medium-block-grid-3>li:nth-of-type(8n+3) { clear:none;}*/

.tel { padding:0px; padding:10px;}
.tel.blk { color:#000000;}
  .block-grid-box { margin:20px;}

  #nav-section {  height:100%; width:100%; left:0px; }
  #main-section {  width:100%; left:-100%;  }

  #content-container.nav-closed #nav-section { left:100%; }
  #content-container.nav-closed #main-section { left:0px; }

#logo2 { position: relative; }

.block-grid-box { margin:0px;}

#tel { text-align: center;}

}

#main-area { padding-bottom:100px;}

/* end test */