/* -------------------------------*/
/*      4blackbox Solutions       */
/* -------------------------------*/
/* -------------------------------*/
/*   Designed by AARTKOM s.r.o.   */ 
/*     Code by AARTKOM s.r.o.     */
/*      Version: 11.01.2017       */ 
/* Copyright 2017 AARTKOM s.r.o.  */  
/* -------------------------------*/
/* -------------------------------*/
/* -------------------------------*/
/*    General Tags & Elements     */
/* -------------------------------*/
* {
margin: 0;
padding: 0;
border: 0;
}
header, section, footer, aside, nav, article, figure, figcaption {
display: block;	
}
body {
background-color: #252525;
font-size: 100%; 
font-family: Verdana, Arial, Helvetic, Geneva, Georgia, Serif;
background-attachment: fixed;
background-size: 100% 100%;
background-repeat: no-repeat;
background-image: url(../images/4bb-BackgroundPIC.png);
}
h2 {
	margin: 0 20px 8px 20px;
	color: lightgray; 
	font-size: 140%;
}
p {
margin: 0 20px;
padding: 3px 0;
color: lightgray;
font-weight: normal;	
text-align: justify;
line-height: 130%;
}
/* -------------------------------*/
/*  Page General Formatting       */
/* -------------------------------*/
.TopPage {
position: fixed;
top: 0px;
width: 100%;
min-height: 70px;
z-index: 80;
background-color: rgba(0,0,0, 1);
box-shadow: 1px 1px 3px lightgreen;
}
.TopPage:hover {
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;	
}
.MidPage {
margin: 71px 0 0 0;
}
.EndPage {
position: fixed;
bottom: 0px;
width: 100%;
margin: 25px 0 0 0;
z-index: 80;
background-color: rgba(0,0,0, 1);
box-shadow: 1px -1px 3px lightgreen;
}
.EndPage:hover {
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;	
}
/* -------------------------------*/
/*  Header Section                */
/* -------------------------------*/
header a {
text-decoration: none;
}
.HeaderLogo {
float:left;
color: red;
margin: 0 10px;
padding: 0 15px 0 15px;
background-color: rgba(0,0,0, 1);
}
.LogoTextTop {
margin: 10px auto 0 auto;
font-size: 1.5em;
font-weight: bold;
}
.LogoTextSub {
margin: 0 0 10px 0;
text-align: center;
font-size: 1.1em;
font-weight: bold;
}
.FooterLogo {
float:left;
max-width: 70%;
margin-left: 25px;
}
.FooterMenu {
float:right;
margin-right: 25px;
}
.HeaderMenu {
float:right;
color: red;
margin: 5px 5px;
text-align: right;
}
.HeaderTitle {
position:relative; 
top: 20px; 
width: 60%; 
margin: 0 auto; 
text-align: center; 
font-size: 150%;
line-height: 100%;
color: lightgreen;
}
.GlowHover:hover {
color: yellowgreen;
text-shadow:
-1px -1px 0 green,
1px -1px 0 green,
-1px 1px 0 green,
1px 1px 0 green; 
}
/* -------------------------------*/
/*  Dropdown Menu                 */
ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
label {
display: block;
cursor: pointer;
padding: 10px;
font-size: 140%;
}
ul ul {
position: absolute;
top: 75px;
right: 0px;
width: 100%;
}
ul ul li {
width: 23.5%;
padding: 5px 0.5%;
display: inline-block;
font-size: 125%;
border: thin solid lightgreen;
border-radius: 5px;
background-color: rgba(50,50,50, 1);
box-shadow: 0px 0px 3px lightgreen;
}
ul ul li:hover {
background-color: rgba(0,0,0, 1);
box-shadow: 0px 0px 50px lightgreen;
}
input[type="checkbox"]{
position: absolute;
left: -9999px;
}
input[type="checkbox"] ~ ul{
height: 50%;
transform-origin: top; 
transition: transform 0.5s ease-out;
transform: scaleY(1);
text-align: center;
}
input[type="checkbox"]:checked ~ ul{
height: 0;
transform: scaleY(0);
}
ul li a {
display: block;
color: lightgreen;
text-decoration: none;
}
/* -------------------------------*/
/*  TEMPORARY Section             */
/* -------------------------------*/
.VerticalCenter {
clear: both;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.ShowContainer {
display: none;
}
.ShowPhoto {
display: none;
}
/* -------------------------------*/
/*  Body Section                  */
/* -------------------------------*/
.PageWidth {
width: 1280px;
margin: 0 auto 0 auto;
}
.PageCanvas {
margin: 115px 0 75px 0;
padding-bottom: 10px;
border-radius: 15px;
background-color: rgba(0,0,0, 1);
box-shadow: 0px 0px 5px lightgreen;
}
.PageCanvas:hover { 
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;	
}
.MenuBoxContainer {
padding: 10px 10px 10px 10px; 
}
.MenuBoxes {
float: left;
width: 46%;	
height: 200px;
margin: 20px 2% 20px 2%;
border-radius: 5px;
}
.MenuBoxes h3 {
text-align: center;
color: black;
}
.MenuBoxes:hover {
background: -webkit-radial-gradient(lightgreen 25%, black 75%);
background: -o-radial-gradient(lightgreen 25%, black 75%);
background: -moz-radial-gradient(lightgreen 25%, black 75%);
background: radial-gradient(lightgreen 25%, black 75%);
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
}
/* -------------------------------*/
/*  Contact Page Style            */
/* -------------------------------*/
.MainBoxContainer {
padding: 10px;
border-radius: 15px;
}
.MainBoxContainer a {
text-decoration: none;
color: lightgreen;
}
.ContactBoxContainer {
float: left;
width: 68%;	
margin: 10px 1% 10px 1%;
border-radius: 10px;
background-color: #252525; 
}
.AsideBoxContainer {
float: right;
width: 28%;	
margin: 10px 1% 10px 1%;
border-radius: 10px;
background-color: #252525; 
text-align: center;
}
.AsideMenu {
color: lightgreen;
padding-bottom: 20px;
}
/* -------------------------------*/
/*  Dropdown Menu                 */
.AsideMenu ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.AsideMenu ul li {
margin: 5px 0;
padding: 0;
}
.AsideMenu label {
display: block;
cursor: pointer;
padding: 10px 15px;
font-size: 125%;
}
.AsideMenu ul ul {
position: relative;
top: 0px;
width: 100%;
}
.AsideMenu ul ul li {
width: 79%;
padding: 15px 0.5%;
display: inline-block;
font-size: 110%;
border: 0;
border-radius: 5px;
background-color: rgba(50,50,50, 1);
box-shadow: 0px 0px 0px lightgreen;
}
.AsideMenu ul ul li:hover {
background-color: rgba(0,0,0, 1);
box-shadow: 0px 0px 50px lightgreen;
}
.AsideMenu input[type="checkbox"]{
position: absolute;
left: -9999px;
}
.AsideMenu input[type="checkbox"] ~ ul{
height: 0;
transform: scaleY(0);
}
.AsideMenu input[type="checkbox"]:checked ~ ul{
height: 50%;
transform-origin: top; 
transition: transform 0.5s ease-out;
transform: scaleY(1);
text-align: center;
}
.AsideMenu ul li a {
display: block;
color: lightgreen;
text-decoration: none;
}
.TeamBoxContainer {
float: left;
width: 68%;	
margin: 10px 1% 10px 1%;
border-radius: 10px;
background-color: #252525; 
}
.SectionHeader {
margin-bottom: 25px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
background-color: #505050;
}
.HeaderBoxContainer {
padding: 15px 20px;
}
.HeaderBoxContainer h1 {
color: #75B26D;
font-size: 150%;
font-weight: normal;
}
.HeaderBoxContainerX, .HeaderBoxContainerZ {
padding: 15px 20px;
/*
background-size: cover;
background-image: url(../images/BannerLong.png);
*/
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.HeaderBoxContainerX h1, .HeaderBoxContainerZ h1 {
color: #75B26D;
font-size: 150%;
font-weight: normal;
}
.SectionBody {
margin-bottom: 15px;
}
/* -------------------------------*/
/*  Images Section                */
/* -------------------------------*/
.DocumentScreenshot img {
margin: 5px auto 25px auto;
width: 80%;
max-height: 300px;
border-radius: 5px;
}
.DocumentScreenshot img:hover {
width: 75%;
margin: 15px 25px 30px 25px;	
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;	
}
.MediumPictureFrame {
margin: 0 25px 25px 25px;
padding: 15px;
border-radius: 5px;
height: 110px;
}
.MediumFramedLogo img {
margin: 0 auto;
width: 80%;
max-height: 300px;
border-radius: 3px;
}
.MediumFramedLogo img:hover {
width: 70%;
padding: 15px 25px;	
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;
border-radius: 8px;	
}
/* -------------------------------*/
/*  Table Section                 */
/* -------------------------------*/
.ProfileTable {
margin: 10px 20px 10px 0;
line-height: 130%;
}
.ProfileTable thead {
}
.ProfileTable thead tr th {
}
.ProfileTable tbody {
color: lightgray;	
text-align:left;
font-weight: normal;
/* background-color: rgba(255,255,255, 0.1); */
}
.ProfileTable tbody tr td {
padding: 7px 0 7px 10px;
vertical-align: top;
/* border: thin solid green; */
}
.ProfileTable tfoot {
}
.HighlightColumn {
min-width: 110px;
font-weight: bold;
text-align:right;
color: #75B26D;
}
/* -------------------------------*/
/*  Our Service Section           */
/* -------------------------------*/
.ImageSpread img {
display: block;
margin: 15px auto 0 auto;
padding: 15px;
width: 70%;
border-radius: 8px;
background-color: rgba(255,255,255, 0.2);
}
/* -------------------------------*/
/*  Bullet Points                 */
/* -------------------------------*/
.BulletPoints {
	text-decoration: none;
	color: lightgray;
}
.BulletPoints ul {
	text-align: left;
	display: block;
	margin: 0px 20px 0px 20px;
	padding: 3px 0px 3px 0px;	
}
.BulletPoints ul li {
	margin: 0px 20px 0px 20px;
	line-height: 130%;
}
/* -------------------------------*/
/*  Forms Section                */
/* -------------------------------*/
.RegForm {
margin: 5px auto;
width: 95%;
}
.RegForm p {
margin: 0 10px;
}
.RegForm form {
overflow: hidden;
}
.RegForm ul {
list-style-type: none;
}
.RegForm ul li {
clear: both;
margin: 0;
padding: 5px 5px 5px 5px;
}
.RegForm label {
display: inline-block;
width:12em;
text-align: right;
font-weight: normal;
cursor: default;
font-size: 100%;
color: lightgray;
}
.RegForm input {
display: inline-block;
width: 20em;
max-width: 30em;
background: darkgray;
}
.RegForm input:focus, textarea:focus {
background: #D2D9AA;
}
.RegForm input.reg-text {
padding: 2px 5px 2px 5px;
}
.RegForm textarea {
display: block;
padding: 5px;
width: 90%;
margin: 10px auto;
line-height: 1.25;
overflow: auto;
resize: none;
color: black;
border-radius: 5px;
}
.RegForm input.textinput, textarea {
font-size: 1em;
background: darkgray;
}
.RegForm input[type="checkbox"]{
position: relative;
left: 0;
width: 1em;
margin: 0 10px 0 25px;
}
.RegistrationCheckbox {
margin: 0 5px;
}
.RegForm input.SendButton {
width: 10em;
font-size: 1.3em;
height: 35px;
margin: 0 auto;
float: none;
background: rgb(80, 80, 80); 
font-weight: bold;
color: lightgreen;
text-shadow:
-1px -1px 0 #563977,
1px -1px 0 #563977,
-1px 1px 0 #563977,
1px 1px 0 #563977;
border: 1px solid green;
border-radius: 5px;
} 
.RegForm input.SendButton:hover {
background: rgb(117, 178, 109, 0.5);
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;
cursor: pointer;
}
/* -------------------------------*/
/*  Download Button               */
/* -------------------------------*/
.DownloadButton {
text-align:center;
padding: 7px;  
width: 10em;
font-size: 1.1em;
margin: 20px auto;
float: none;
background: rgb(80, 80, 80); 
font-weight: bold;
color: lightgreen;
text-shadow:
-1px -1px 0 #563977,
1px -1px 0 #563977,
-1px 1px 0 #563977,
1px 1px 0 #563977;
border: 1px solid green;
border-radius: 5px;
} 
.DownloadButton:hover {
background: rgb(117, 178, 109, 0.5);
box-shadow: 1px 1px 30px lightgreen;
-o-transition:.6s;
-ms-transition:.6s;
-moz-transition:.6s;
-webkit-transition:.6s;
transition:.6s;
cursor: pointer;
}
.DownloadButton a {
text-decoration: none;
} 
/* -------------------------------*/
/*  Function                      */
/* -------------------------------*/
.ShowTime {
position: fixed;
bottom: 10px;
width: 100%;
text-align: center;
z-index: -15;
}
/* -------------------------------*/
/*  Footer Section                */
/* -------------------------------*/
.BottomFooter {
clear: both;
margin: 5px 0 5px 0;
display: block;
}
.FooterAK {
font-size: 80%;
color: olive;
margin: 0;
padding: 5px 0;
}
/* -------------------------------*/
/* -------------------------------*/
/*  Responsive / Dynamic Web      */
/* -------------------------------*/
/* -------------------------------*/
/*             1440               */
/* -------------------------------*/
@media (max-width:1440px){
.PageWidth {
width: 1024px;
}
/*  Dropdown Menu                 */
ul ul li {
font-size: 118%;
}
.FloatPortrait img {
width: 180px;
max-height: 220px;
}
.MediumPictureFrame {
margin: 0 25px;
height: 100px;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             1280               */
/* -------------------------------*/
@media (max-width:1280px){
/*  Dropdown Menu                 */
ul ul li {
font-size: 110%;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             1110               */
/* -------------------------------*/
@media (max-width:1100px){
.PageWidth {
width: 900px;
}
/*  Dropdown Menu                 */
ul ul li {
width: 23%;
margin: 0 0 5px 0;
}
.ContactBoxContainer {
width: 98%;	 
}
.TeamBoxContainer {
width: 98%;	
}
.AsideBoxContainer {
width: 98%;
}
.MediumPictureFrame {
margin: 0;
width: 21%;
float: left;
height: 100px;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             1000               */
/* -------------------------------*/
@media (max-width:1000px){
.PageWidth {
width: 768px;
}
.MediumPictureFrame {
margin: 0;
width: 20%;
float: left;
height: 90px;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             800                */
/* -------------------------------*/
@media (max-width:800px){
.PageWidth {
width: 90%;
}
/*  Dropdown Menu                 */
ul ul li {
font-size: 115%;
}
.MenuBoxes {
width: 44%;
height: 110px;
margin: 10px 3% 10px 3%;	
}
.HeaderTitle {
font-size: 140%;
}
.FloatPortrait img {
width: 200px;
max-height: 250px;
}
/* -------------------------------*/
/*  Hide and Display              */
.HidePhoto {
display: none;
}
.ShowPhoto {
display: block;
}
.MediumPictureFrame {
width: 44%;
margin: 0;
height: 140px;
}
/* -------------------------------*/
/*  Form and Display              */
.RegForm input {
margin: 0 auto;
display: block;
text-align: center;
}
.RegForm .RegistrationCheckbox input {
display: inline-block;
}
.RegForm label {
width:90%;
display: block;
text-align: center;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             650                */
/* -------------------------------*/
@media (max-width:650px){
.PageWidth {
	width: 95%;
}
.PageCanvas {
	margin-top: 190px;
	margin-bottom: 90px;
}
/*  Dropdown Menu                 */
ul ul li {
width: 46%;
padding: 15px 0;
font-size: 110%;
}
.FloatPortrait img {
width: 180px;
max-height: 225px;
}
.MediumPictureFrame {
width: 40%;
margin: 0 0 0 2%;
height: 100px;
}
.FooterAK {
padding: 12px 0;
}
/* -------------------------------*/
/*  Hide and Display              */
.HeaderTitle {
display: none;
width: 95%; 
font-size: 125%;
}
.HideContainer {
display: none;
}
.ShowContainer {
position: absolute;
top: 105px;
margin: 0 auto;
text-align: center;
display: block;
}
/* -------------------------------*/
/* -------------------------------*/
/*             480                */
/* -------------------------------*/
@media (max-width:480px){
.PageCanvas {

	margin-bottom: 110px;
}
.FooterLogo {
max-width: 40%;
}
.HeaderTitle {
font-size: 110%;
}
.MenuBoxes {
width: 94%;
height: 55px;
margin: 5px 3% 5px 3%;	
}
.FloatPortrait img {
width: 160px;
max-height: 200px;
}
.MediumPictureFrame {
width: 60%;
height: 110px;
margin: 0 16%;
}
/* -------------------------------*/
/*  Function                      */
.ShowTime {
display: none;
}
}
/* -------------------------------*/
/* -------------------------------*/
/*             380                */
/* -------------------------------*/
@media (max-width:380px){
.FooterLogo {
max-width: 55%;
}
.FloatPortrait img {
clear: both;
width: 90%;
max-height: 110%;
text-align: center;
float: none;
margin: 0 5% 15px 5%;
}
.MediumPictureFrame {
height: 100px;
}
.TeamBoxContainer {
font-size: 95%;
}
}