html {
    --fontcolor:        #ffffff;     
    --bgcolor1:         #000000;                 
    --bgcolor2:         #ffffff;         
    --font:             Tahoma, Verdana;
    --fontsize:         11pt;
}

body {
    width:              100%;
    height:             100%;
    border:             0px;
    padding:            0px;
    margin:             0px;
    color:              var(--fontcolor);
    background:         var(--bgcolor1);
    font:               var(--font);
    font-size:          var(--fontsize);
    font-family:        Tahoma, Verdana;
    font-size:          --fontsize; 
}

#myVideo {
    position:             fixed;
    right:                0;
    bottom:               0;
    min-width:            100%;
    min-height:           100%;
    z-index:              -2;
}

#MainBox {    
    width:              100%;
    border:             0px;
    padding:            0px;
    margin:             0px;
    text-align:         center;
    display:            block;   
}

#TopBanner {
    width:              100%;
    height:             168px;
    color:              var(--fontcolor);
    margin:             0px;
    padding:            0px;
    border:             0px;    
    position:           fixed;
    top:                0px;
    left:               0px;
    overflow-x:         hidden;
    overflow-y:         hidden;
    font-family:        inherit;
    background-image:   url('https://www.bale-international.com/gfx/hexagons.png');
}

#content {
    width:              100%;
    height:             100%;
    position:           fixed;
    top:                168px;
    left:               0px;
    overflow-x:         hidden;
    overflow-y:         auto;
    font-size:          var(--fontsize);
    font-family:        inherit;
    background-image:   url('https://www.bale-international.com/gfx/hexagons.png');
}

#Logo {        
    background-color:   transparent;
    float:              left;
    margin:             10px;    
}

#LangSwitch {    
    float:              left;
    margin:             0px;
    padding:            0px;
    border:             0px;
    overflow:           hidden; 
}

.clear {   
    clear:              both;
    width:              0px;
    height:             0px;
    border:             0px;
    padding:            0px;
    margin:             0px;
}

.imglink {
    opacity:            0.5;
}

.imglink:hover {
    opacity:            1.0;
}

.imglinkCurrent {
    opacity:            1.0;
}

#SectionHome {
    padding:            10px;
    border:             0px;
    margin:             0px;
    background:         rgb(0,0,0);
    background:         -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

#SectionAboutUs {
    padding:            10px;
    border:             0px;
    margin:             0px;
    background:         rgb(0,0,0);
    background:         -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);   
}

#SectionServices {
    padding:            10px;
    border:             0px;
    margin:             0px;
    background:         rgb(0,0,0);
    background:         -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
    overflow:           hidden;
}

#SectionContact {
    padding:            10px;
    border:             0px;
    margin:             0px;
    background:         rgb(0,0,0);
    background:         -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(128,128,128,0.5) 10%, rgba(128,128,128,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

#Foot {
    padding:            10px;
    border:             0px;
    margin:             0px;
    border-radius:      0px 0px 50px 50px;
    background:         rgb(0,0,0);
    background:         -moz-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         -webkit-linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    background:         linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(251,170,7,0.5020133053221288) 10%, rgba(251,170,7,0.5020133053221288) 90%, rgba(0,0,0,0) 100%);
    filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr="#000000",endColorstr="#000000",GradientType=1);
}

.ContentTitle {
    text-align:         center;
    font-size:          20pt;
    font-weight:        bold;
    line-height:        2;
}

.ContentSubTitle {
    text-align:         center;
    font-size:          11pt;
    font-weight:        bold;
    line-height:        2;
}

.ContentText {
    text-align:         center;
    font-size:          var(--fontsize);
    line-height:        1.5;
}

button {
    cursor:             pointer;
}

a {
    font-size:          --fontsize;
}

a:link {
    color:              #ffebcc;
    text-decoration:    none;
}

a:visited {
    color:              #ffebcc;
    text-decoration:    none;
}

a:hover {
    color:              #ffffff;
    text-decoration:    none;
}

a:active {
    color:              #6b5c40;
    text-decoration:    none;
}

.Button {
    color:              var(--fontcolor);
    background-color:   transparent;
    border-style:       outset;
    border-color:       var(--fontcolor);
    border-radius:      4px;
    font-size:          16px;
    cursor:             pointer;    
}

.MenuLink {
    width:              auto;
    height:             30px;
    padding-left:       10px;
    padding-right:      10px;
    margin:             0px;
    float:              left;
    line-height:        1.5;
    overflow:           hidden;
    border:             2px outset #85765a;
    border-radius:      10px 5px 10px 5px;
    background:         transparent;
    background:         linear-gradient(145deg, rgba(120,120,110,0.5) 0%, rgba(173,165,149, 0.1) 100%);
}

.IconLink {
    height:             30px;
    float:              left;
}

.ServiceItem {
    width:              30%;
    float:              left;
    padding:            5px;
    margin:             5px;
    border:             2px outset #85765a;
    border-radius:      20px 10px 20px 10px;
    background:         transparent;
    background:         linear-gradient(145deg, rgba(241,236,226,0.8) 0%, rgba(173,165,149, 0.1) 100%);
    overflow:           hidden;
}

#MessageForm {
    width:              auto;
    border:             0px;
    padding:            10px;
    float:              left;
    text-align:         left;
    overflow:           hidden;
}

#MapBox {
    width:              auto;
    border:             0px;
    padding:            10px;    
    float:              left;
    text-align:         left;
    overflow:           hidden;    
}

#Map {
    border-radius:      30px 10px 30px 10px;
    opacity:            0.8;
    width:              auto;
    max-height:         20%;
    vertical-align:     middle;
}

.Input {
    color:              white;
    line-height:        1.5;
    font-size:          var(--fontsize);
    border:             2px inset Gray;
    border-radius:      5px 5px 5px 5px;
    background:         rgba(64,64,64,0.8);
    opacity:            0.7;
}

#Created {
    font-size:          10px;
}

#Worker {
    width:              auto;
    max-height:         20%;
    vertical-align:     middle;
}

