/*
  =========================================================================================================================================================================================================
  General Styles
  Author: Kenton
  =========================================================================================================================================================================================================
*/

/* Including Fonts */
@font-face { font-family: 'Ubuntu-Regular'; src: url('../fonts/Ubuntu-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Ubuntu-Bold'; src: url('../fonts/Ubuntu-Bold.ttf') format('truetype'); }
@font-face { font-family: 'Ubuntu-Light'; src: url('../fonts/Ubuntu-Light.ttf') format('truetype'); }
@font-face { font-family: 'techno_hideo'; src: url('../fonts/techno_hideo.ttf') format('truetype'); }
@font-face { font-family: 'space_age'; src: url('../fonts/spaceage.ttf') format('truetype'); }
@font-face { font-family: 'Jaapokki-Regular'; src: url('../fonts/Jaapokki-Regular.otf') format('truetype'); }
/*
  =========================================================================================================================================================================================================
  General Page Layout
  =========================================================================================================================================================================================================
*/

body { height: 100%; margin: 0 auto; width: 1080px; background: #d5d5d5; background-repeat: no-repeat; background-attachment: fixed; }

/*
  =========================================================================================================================================================================================================
  Header Section
  =========================================================================================================================================================================================================
*/

.headerSect { float: left; height: 100%; position: relative; width: 100%;  }

.headerSect .menu { float: left; position: relative; font-family: 'Ubuntu-Regular', sans-serif; width: 1080px; background: #5E9ABB; }
.menu a { transition: all linear 0.15s; color: white; text-decoration: none; }
.menu img { float: left; position: relative; width: 250px; margin: 6px; padding: 15px 25px; }
.menu ul { float: left; position: relative; list-style: none; padding: 0px; margin: 0; height: 80px; }
.menu ul li { float: left; position: relative; width: 153.6px; height: 100%; line-height: 78px; font-size: 13px; text-align: center; background: #5E9ABB; }
.menu ul li:hover{cursor: pointer; background-color: #4481a2; }
.menu li:hover > a,
.menu .current-item > a { text-decoration: none; }
.menu .logoCont { float: left ; position: relative; width: 312px; height: 80px;  }
.menu .logoCont:hover .logo { background-image: url("../images/logowhite.svg"); opacity: 1; transition: opacity .25s ease-in; -moz-transition: opacity .25s ease-in; -webkit-transition: opacity .25s ease-in; }
.menu .logoCont .logo { background-image: url("../images/logoblack.svg"); background-position: 0 0; background-repeat: no-repeat; background-size: 100px 66px; float: left; height: 65px; left: 0; margin: 8px; position: relative; width: 104px; }

.logoCont .textCont { float: left; position: relative; width: calc(100% - 120px); margin: 13px 0; }
.textCont .logotext {  color: black; float: left; font-family: "Jaapokki-Regular"; font-size: 26px; position: relative; text-transform: uppercase; width: 190px; text-align: center; line-height: 30px }
.textCont .logotext:nth-child(2) { margin-top: -5px ; }

/* Bottom Level */
.menu ul li:hover .sub-menu { z-index: 2; opacity: 1; display: block !important; }
.menu .activePage { background: #4481A2;}
.menu .sub-menu { display: none; }
.menu .sub-menu li { display: block; font-size: 12px; }
.menu .sub-menu li a { background-color: #4D75A8; display: block; }
.menu .sub-menu li a:hover,
.menu .sub-menu .current-item a { background: #305E98; }

.configLink { float: left; position: relative; width: 100%; height: 100%; }
/*
  =========================================================================================================================================================================================================
  Image Slider Section
  =========================================================================================================================================================================================================
*/
.imageSlider { position: relative; width: 1080px; height: 350px; overflow: hidden; }
.imageSlider img { position: relative; float: left; height: auto; margin: 0; padding: 0; width: 1080px; }
.imageSlider #wrapper { width: 100%; height: 100%; margin: 0 auto;}
.imageSlider #scroller { position: absolute; z-index: 1; height: 500px; -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }

/* Image slider Button Container */
.imageSlider .iScrollButtonCont { background-color: rgba(255, 255, 255, 0.2); left: 50%; top:95%; transform: translate(-50%,-50%); width:auto; position: absolute; z-index: 1; border-radius: 20px; }
.imageSlider .iScrollButtonCont .circle { float: left; position: relative; width: 15px; height: 15px; background-color: rgba(104, 103, 103, 0.5); margin: 5px; border-radius: 10px; border:1px solid white; }
.imageSlider .iScrollButtonCont .circle.active { background-color: #052854 !important; }
.imageSlider .iScrollButtonCont .circle:hover {  cursor: pointer; background: #305E98; }

/*
  =========================================================================================================================================================================================================
  Body Section
  =========================================================================================================================================================================================================
*/

.bodySect { background-color: rgba(66,66,66, 1); float: left; height: 100%; position: relative; width: 100%; font-family: 'Ubuntu-Light', sans-serif; color: #AAA3A3; display: flex; }

/* Main container */
.mainContent { float: left; position: relative; width: 1080px;}

/* Sub containers */
.subContainer { float:left; position: relative; ; width: 100%; }
.subContainer.Welcome { background: #EFEFEF; text-align: center; }
.subContainer configtable { float: left; position: relative; margin: 20px;  }
.subContainer h1 { float: left; margin: 20px 0 20; position: relative; text-indent: 20px; width: 100%; text-align: center; color: #282525;}
.subContainer h2 { float: left; margin: 20px 0 20; position: relative; text-indent: 20px; width: 100%; text-align: center; color: white; }
.subContainer h3 { float: left; margin: 10px 0 0; position: relative; text-indent: 20px; width: 100%; }

/* View ALl Icon in content blocks*/
.subContainer .sideCont .subCont .contentButton { float: left; background: black; width: 105px; height: 25px; position: absolute; right: 5px; bottom: 5px; border-radius: 4px; }
.subContainer .sideCont .subCont .contentButton img { float: left; width: 20px ; height: 20px; margin: 3px 5px 3px 5px; }
.subContainer .sideCont .subCont .contentButton p { float: left; font-size: 12px; margin: 5px 10px; color: white; }
.subContainer .sideCont .subCont .contentButton:hover { cursor: pointer; }

/* Text content container */
.subContainer .contentText { float: left; position: relative; font-size: 15px; line-height: 30px; margin: 20px; width: calc(100% - 40px); min-height: 200px; color: #918888; }
.subContainer .contentText.scripts { display: none; margin: 20px; }
.subContainer .sideCont .subCont .contentText p { margin: 0px 0px; font-size: 12px; line-height: 25px;}
.subContainer .contentText:nth-child(2) { float: left; position: relative; min-height: 0px;}
.subContainer .contentText pre { float:left; position: relative; font-size: 12px; line-height: 16px; margin: 0px 0px 35px 0px; counter-reset: line; color: white; background: #4D75A8; width: 100%; height: auto; }
.subContainer .contentText code { background: #FFD021; counter-increment: line; float: left; position: relative; width: 20px; margin-right: 5px; text-indent: 3px;  }
.subContainer .contentText code:nth-child(odd) { background: #FFC900; }
.subContainer .contentText code:before { content: counter(line); -webkit-user-select: none;}
.subContainer .contentText ul {font-size: 12px; }
.subContainer .contentText iframe{ float: left; position: relative; width: calc(100% - 20px); margin-left: 10px; }

/* Content block sizes small, big, bigger */
.subContainer .sideCont { float: left; position: relative; width: 100%; height: auto; }
.subContainer .sideCont.split { float: left; position: relative; width: 50%; height: auto; }
.sideCont .row { float: left; position: relative; }
.sideCont .subCont { background: #EFEFEF none repeat scroll 0 0; float: left; position: relative; width: calc((100% - 20px) /3 ); height: 400px; margin-bottom: 10px; }
.sideCont .subCont.equalBoxes { width: calc((100% - 20px) / 3); height: 285px; margin-bottom: 10px; }
.sideCont .subCont.equalBoxes iframe { float: left; position: relative; width: calc(100% - 30px); height: 210px; margin: 15px 15px 15px; }
.sideCont .subCont.equalBoxes p { float: left; position: relative; width: 100%; text-align: center; margin: 0px; padding: 10px 0px; color: white; }
.sideCont .subCont .vidHeader { float: left; position: relative; width: 100%; height: 45px; background: #316198; }
.sideCont .subCont.small { width: 263px }
.sideCont .subCont.small iframe { float: left; margin: 20px 20px 0px; position: relative; width: calc(100% - 40px); height: 130px; }
.sideCont .subCont.left { float: left; position: relative; width: 535px; height: auto; margin-bottom: 10px; margin-left: 0px !important; }
.sideCont .subCont.right { float: left; position: relative; width: 535px; height: auto; margin: 0px 0px 10px 5px !important; }
.sideCont .subCont.big { width: 534px }
.sideCont .subCont.bigger { width: 1060px; height: auto; float: left; position: relative; margin: 10px; }
.sideCont .subCont:nth-child(even) { margin: 0 10px; }
.sideCont .subCont img { float: left; height: 100%; margin: 20px 20px 0; width: calc(100% - 40px); max-height: 100px; }
.sideCont .subCont ul { float:left; }

.subCont .contentHead { width: 100%; height: 30px; }
.subCont .contentHead p { float:left; position: relative; font-size: 16px; margin: 0; padding-top: 0px; padding-bottom: 0px; width: 100%; height: 100%; line-height: 30px; color: #282525; text-align: center; background: #8DD1D3; }
.subCont .contentHead h6 { float:left; position: relative; font-size: 16px; margin: 0; padding-top: 0px; padding-bottom: 0px; width: auto; color: #282525;  }
.subCont .contentHead.dropDown { width: 100%; height: 60px; }
.subCont .contentHead.dropDown:hover { cursor: pointer; }
.subCont .contentHead.dropDown h6 { float: left; position: relative; font-size: 20px; line-height: 60px; margin: 0; padding: 0px; width: 100%; height: 100%; color: #282525; text-align: center; background: #8DD1D3;  }
.subCont .contentHead.dropDown h6:hover { background: #47b4b8; }
.subCont .contentHead img.headerIcon { float: left; position: relative; width: 20px; height: 20px; margin: 5px; }

/* Color Overlays on images inside Content Blocks*/
.subCont .imgCont { float: left; position: relative; min-height: 135px; width: 100%;  }
.imgCont .imgOverlay { position: absolute; width:100%; height:100%; top:0; left:0; opacity: 0.60; }
.imgCont .imgOverlay.pink { background-color: rgba(255,83,75, 0.9); }
.imgCont .imgOverlay.yellow { background-color: rgba(2,21,66, 0.9); }
.imgCont .imgOverlay.lightblue { background-color: rgba(2,65,226, 0.9); }

.subCont .imgCont img { float: left; position: relative; }
.subCont .imgCont img.imgSetSize { position: absolute; width: auto; top: 0; left: 0; right: 0; bottom: 0; margin: auto; display: block; }
.subCont.small:hover .imgOverlay{ cursor: pointer; background-color: transparent; transition: 0.8s; }
.subCont.big:hover .imgOverlay{ cursor: pointer; background-color: transparent; transition: 0.8s; }
.subCont.bigger:hover .imgOverlay { background-color: transparent; transition: 0.8s; }

/*Static Social Media Sidebar*/
.socialIcons { background: white none repeat scroll 0 0; height: auto; left: 0px; padding: 0px 0px; position: fixed; top: 200px; width: 40px; }
.socialIcons img { float: left; height: auto; position: relative; width: 100%; }

/*
  =========================================================================================================================================================================================================
  Footer Section
  =========================================================================================================================================================================================================
*/

.footerSect { background: #FFDA44; float: left; font-size: 12px; height: auto; margin-bottom: 20px; position: relative; width: 100%; }
.footerSect .subCont { float: left; position: relative; width:520px;line-height: 25px; margin-left: 20px; margin-bottom: 10px; }
.footerSect .subCont h4 { font-size: 16px; margin: 0px; padding-top: 5px; padding-bottom: 5px; color: #aaa3a3; font-family: "Ubuntu-Light"; }
.footerSect .subCont h5 { font-size: 16px; margin: 0px; line-height: 30px; color: #aaa3a3; font-family: "Ubuntu-Light"; }
.footerSect .subCont a { text-decoration: none; color: black;}
.footerSect .subCont img { float: left; position: relative; height:30px; margin-right: 5px; }