@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'Usuzi';
    src: url('fonts/usuziital.eot#') format('eot'),
        url('fonts/usuziital.woff') format('woff'),
        url('fonts/usuziital.ttf') format('truetype'),
        url('fonts/usuziital.svg#UsuziItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family:       'OwnFont';
  src:               url('fonts/CreamPeach.ttf')  format('truetype') /* Safari, Android, iOS */
/*src: url("fonts/AWR.eot");
  src: url("fonts/AWR.woff") format("woff"),
  url("fonts/AWR.otf") format("opentype"),
  url('fonts/AWR2.ttf')  format('truetype'),
  url("AWR.svg#filename") format("svg");*/ 
  }
 
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(1000px);
    } 
    100% {
        opacity: 1;
        transform: translateY(0px);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: translateY(0px);
    } 
    100% {
        opacity: 0;
        transform: translateY(1000px);
    }
}

@keyframes slideIn {
    0% {
         transform: translateY(200px)
    } 
    100% {
         transform: translateY(0px);
    }
}
 
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color:             #85929E;
  font-family:       arial;
  font-style:        italic;
  opacity:           1; /* Firefox */
}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color:             #85929E;
  font-family:       arial;
  font-style:        italic;
}

::-ms-input-placeholder { /* Microsoft Edge */
  color:             #85929E;
  font-family:       arial;
  font-style:        italic;
}

.contenttext {
  color:             green; 
  text-align:        center;
  }

:root {
  --gutter:          4px;
  --space0:          2.5%; 
  --space1:          5%; 
  --space2:          2%; 
  --menuwidth:       200px;
  --menutr1:         150px;
  --menutr2:         35px;
  --menutr3:         50px;
  --menutr4:         150px;

}

@media (max-width: 800px) {
/* Smaller Resolution Desktops and Laptops */
  .contenttext {
    color:           blue; 
	text-align:      center;
    }
  }

@media (max-width: 650px) {
/* Smaller devices */
  .contenttext {
	color:           grey; 
	text-align:      center;
    }
  }

@media (max-width: 450px) {
/* Even Smaller devices */
  .contenttext {
	color:           yellow; 
	text-align:      center;
    }
  }

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Even Smaller devices */
  :root {
    --space0:          0%;  
    --space1:          3%; 
    --space2:          1%; 
  }

  .contenttext {
	color:           red; 
	text-align:      center; 
	font-size:       40px;
    }
	
  .contenttext2 {
	color:        red; 
	font-size:    100px;
    }
  }
  

/* Swipe works with mouse as well but often causes text selection. */
/* We'll deny text selecton on everything but INPUTs and TEXTAREAs. */
/*<!--#demo-page :not(INPUT):not(TEXTAREA) {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
/* Content styling. */
/*dl { font-family: "Times New Roman", Times, serif; padding: 1em; }
dt { font-size: 2em; font-weight: bold; }
dt span { font-size: .5em; color: #777; margin-left: .5em; }
dd { font-size: 1.25em; margin: 1em 0 0; padding-bottom: 1em; border-bottom: 1px solid #eee; }
.back-btn { float: right; margin: 0 2em 1em 0; }-->*/

.bodyclass {
  background:        black;
  position:          relative;
 }

#page {
  position:          fixed;
  top:               0px; 
  left:              0px; 
  right:             0px; 
  bottom:            0px;
  margin-left:       auto;
  margin-right:      auto;	 
  text-align:        center;  
  background-color:  #8f47d4; /* #9400d3 */
  background:        -webkit-linear-gradient(bottom left, gainsboro, white, #e6f2ff);
  background:        -o-linear-gradient(45deg, gainsboro, white, #e6f2ff);  
  background:        linear-gradient(45deg, gainsboro, white, #e6f2ff);
  max-width:         1000px;
  overflow:          auto;
  }

#header1 {
  position:          fixed;
  z-index:           1000;
  top:               0px; 
  left:              0px; 
  right:             0px;
  border-style:      none;
  margin-left:       auto;
  margin-right:      auto;
  padding:           0px;
  height:            50px;
  background:        black;
  max-width:         1000px;
  }

#header2 {
  position:          fixed;
  top:               0px; 
  left:              0px; 
  right:             0px;
  margin-left:       auto;
  margin-right:      auto;
  height:            40px;
  padding-top:       9px;
  padding-bottom:    0px;
  border-radius:     20px 20px 0px 0px;
  font-size:         25px;
  max-width:         1000px;
  display:           inline-block;
  color:             rgba(200, 230, 255);
  background:        silver;
  background-color:  rgba(192, 192, 192);

  border-color:      rgba(192, 192, 192) !important;
   
  -webkit-box-shadow:
  0px 1px 0 0px rgba(47, 79, 79, 0.4) inset, /* red: 255, 200, 255 */
  0px 1px 5px 0px rgba(47, 79, 79, 0.1),
  0px 1px 15px 0px rgba(47, 79, 79, 0.6) inset !important;

  box-shadow:
  0px 1px 0 0px rgba(47, 79, 79, 0.4) inset,
  0px 1px 5px 0px rgba(47, 79, 79, 0.1), /* 0.75 */
  0px 1px 15px 0px rgba(47, 79, 79, 0.6) inset !important;
  }

#left-nav i {
  float:             left;
  padding-top:       9px;
  padding-left:      25px;
  color:             black;
  font-size:         20px;
  font-weight:       bold;
  text-shadow:       #666;
  cursor:            pointer;  
  }

#headline {
  font-size:         26px;
  padding-top:       3px;
  color:             black;
  font-weight:       bold; 
  letter-spacing:    0px;
  font-family:       "Usuzi", Arial, sans-serif;
  letter-spacing:    -1px;;
                      /*"OwnFont", Arial, sans-serif;*/
  text-shadow:       #666;
}

#right-nav i {
  float:             right;
  padding-top:       4px;
  padding-right:     20px;
  font-size:         25px;
  font-style:        inherit;
  color:             #4169E1;
  margin:            0px;
  text-shadow:       #FFF;
  cursor:            pointer;  
}

.rotate {
    -moz-transition: all .2s linear;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
}
.rotate.down {
    -moz-transform:rotate(20deg);
    -webkit-transform:rotate(20deg);
    transform:rotate(20deg);
}

#main-nav, #home-nav {
  display:           none;
  }

#lingotainer1 {
  position:          fixed;
  top:               50px;
  width:             100%;
  max-width:         1000px;  
}
#lingotainer2 {
  float:             right;
  z-index:           2;
  margin-top:        20px;
  margin-right:      5%;
  opacity:           0.6;
}

.mypanelleft {
  position:          fixed;
  top:               50px;
/*background:        #FFF;*/  
  width:             200px; /*var(--menuwidth);*/
  padding:           0 0px;  
  opacity:           0.9;
  text-shadow:       none;
  } 

.mypanelleft ul {
  padding-top:       0px;
/*overflow:          hidden;*/
  list-style:        none;
  padding:           0;
  margin:            0;
  } 

.mypanelleft ul li {
  line-height:       45px;
  background:        #00334d;
  color:             #FFF;
  border-style:      solid;
  border-width:      thin;
  border-top:        none;
  border-color:      rgba(255, 255, 255, 0.1);
  } 


#mtd1 {
  line-height:       45px;
  text-align:        left;    
  width:             150px; /*var(--menutr1);*/
  font-family:       arial;
  font-size:         18px;
  font-weight:       200;
  color:             #FFF;
  white-space:       nowrap;
  } 

#mtd1 span {                    /*menu headline*/
  height:            45px;
  text-align:        left;    
  padding-left:      15px;
  padding-right:     15px;
  text-decoration:   none;
  font-family:       arial;
  font-size:         18px;
  font-weight:       bold;
  white-space:       nowrap;
  } 

#mtd1 a {                       /*menu sub-items*/
  padding-left:      15px;
  text-align:        left;    
  text-decoration:   none;
  font-size:         18px;
  font-weight:       200;
  color:             #FFF;
  white-space:       nowrap;
  } 

#mtd1 i, #mtd2 i {              /*menu sub-items icon*/
  text-align:        left;    
  text-decoration:   none;
  font-size:         22px;
  font-weight:       700;
  color:             #AED6F1;
  white-space:       nowrap;
  } 
  
#mtd1 a:visited, #mtd2 a:visited { 
  color:             #FFF; 
  }
   

#mypanelright { 
  position:          fixed;
  top:               50px;
  width:             100%;
  max-width:         1000px;
}

.mypanelright {
  width:             200px; /*var(--menuwidth);*/
  float:             right;
/*background:        #FFF;*/
  padding:           0 0px;  
  opacity:           0.9;
  text-shadow:       none;
  width:             200px;
  } 

.mypanelright ul {
  padding-top:       0px;
  overflow:          hidden;
  list-style:        none;
  padding:           0;
  margin:            0;
  } 

.mypanelright ul li {
  line-height:       45px;
  background:        #00334d;
  color:             #FFF;
  text-decoration:   none;
  border-style:      solid;
  border-width:      thin;
  border-top:        none;
  border-color:      rgba(255, 255, 255, 0.1);
  } 
  
#mtd3 {
  line-height:       45px;
  text-align:        left;    
  width:             50px; /*var(--menutr3);*/
  font-family:       arial;
  font-size:         18px;
  font-weight:       200;
  color:             #FFF;
  white-space:       nowrap;
  } 

#mtd3 span {                    /*menu headline*/
  height:            45px;
  text-align:        left;    
  text-align:        center;
  text-decoration:   none;
  font-family:       arial;
  font-size:         18px;
  font-weight:       bold;
  white-space:       nowrap;
  } 

#mtd4 a {                       /*menu sub-items*/
  text-align:        left;    
  text-decoration:   none;
  font-size:         18px;
  font-weight:       200;
  color:             #FFF;
  white-space:       nowrap;
  } 

#mtd3 i, #mtd4 i {              /*menu sub-items icon*/
  padding-left:      15px;
  text-align:        left;    
  text-decoration:   none;
  font-size:         22px;
  font-weight:       700;
  color:             #AED6F1;
  white-space:       nowrap;
  } 
  
#mtd3 a:visited, #mtd4 a:visited { 
  color:             #FFF; 
  }
  
#headline1, #headline2 {
  background:        #002233;
  }

#container, #contactainer {
  width:             95%;
  margin:            60px auto;
  max-width:         990px;
  background-color:  rgba(0,0,0,0.05);
  text-shadow:       none;
  font-size:         20px;
  font-weight:       200;
  border-radius:     10px 10px 10px 10px;
  overflow-y:        auto;
  overflow-x:        hidden;
}

#contentainer {
  display:           none;
  width:             95%;
  margin:            60px auto;
  max-height:        calc(100% - 120px);
  max-width:         990px;
  background-color:  rgba(0,0,0,0.05);
  text-shadow:       none;
  font-size:         20px;
  font-weight:       200;
  border-radius:     10px 10px 10px 10px;
  overflow-y:        auto;
  overflow-x:        hidden;
}


#container .formgroup:first-child {
  padding-top:       2%;
}

#container .formgroup:last-child {
  padding-bottom:    3%;
}

#container p {
/*line-height:       1.0;*/
}

#contentainer2 {
  position:          fixed;
  display:           none;
  top:               0px; 
  left:              0px; 
  right:             0px;
  height:            100%;
  z-index:           5;
  width:             100%; 
  margin:            50px auto;
  max-width:         1000px; 
/*background-color:  rgba(214, 234, 248, 0.9);*/ 
  text-shadow:       none;#
  font-size:         16px;
  font-weight:       200;
/*border-radius:     10px 10px 10px 10px;*/
/*animation:         fadeIn 0.5s forwards;*/
}

#contentainer21 {                 /* Cookie data */
  display:           none;
  width:             95%;
  padding:           15px;
  height:            calc(100% - 290px);
  margin:            1px auto;
  max-width:         990px; 
  background-color:  rgba(255, 255, 255, 1.0); 
  text-shadow:       none;
  font-size:         16px;
  font-weight:       200;
  color:             #000;
  border-radius:     5px 5px 5px 5px;
  overflow-y:        auto;
  overflow-x:        hidden;
}

#contentainer2 {
  position:          fixed;
  display:           none;
  top:               0px; 
  left:              0px; 
  right:             0px;
  bottom:            0px;
  height:            100%;
  z-index:           5;
  width:             100%;
  height:            calc(100% - 51px); 
  margin:            50px auto;
  max-width:         1000px; 
/*background-color:  rgba(214, 234, 248, 0.9);*/ 
  text-shadow:       none;
  font-size:         16px;
  font-weight:       200;
/*border-radius:     10px 10px 10px 10px;*/
/*animation:         fadeIn 0.5s forwards;*/
}

#contentainer21 {                 /* Cookie data */
  display:           none;
  width:             95%;
  padding:           15px;
  margin:            1px auto;
  height:            calc(100% - 234px);
  max-width:         990px; 
  background-color:  rgba(255, 255, 255, 1.0); 
  text-shadow:       none;
  font-size:         16px;
  font-weight:       200;
  color:             #000;
  border-radius:     5px 5px 5px 5px;
  overflow-y:        auto;
  overflow-x:        hidden;
}

#contentainer22 {
  position:          fixed;
/*display:           none;*/
  left:              0px; 
  right:             0px;
  bottom:            0px;
  z-index:           3;
  width:             100%;
  max-width:         1000px;
  height:            200px;
/*  height:            225px; */
  margin:            0px auto;
  background-color:  rgba(255, 255, 255, 1.0); 
  text-shadow:       none;
  font-size:         16px;
  font-weight:       200;
  color:             #000;
  border-top:        2px ridge #4169E1;
  border-radius:     25px 25px 0px 0px;
  animation:         slideIn 0.75s forwards;
}

#table1, #table3 {
  margin-left:       auto;
  margin-right:      auto;
  padding-top:       5px;
  padding-left:      5px;
  padding-right:     5px;
  display:           flex;
  align-items:       center;
  justify-content:   center;
  text-align:        center;
  font-size:         14px !important;
}

#table2 {
  margin-left:       auto;
  margin-right:      auto;
  padding-left:      5px;
  padding-right:     5px;
  display:           flex;
  align-items:       center;
  justify-content:   center;
  text-align:        center;
  font-size:         14px !important;
}

#tr1 td {
  padding-left:      5px;
  text-decoration:   none;
  color:             #4169E1;
  font-size:         14px;
}

.tdg {
  padding-top:       5px !important;
  padding-left:      30px !important;
  text-align:        left;
}

#key5, #key6 {
  color:             #1D8348;
}
#databutton1, #databutton2 {
  display:           inline-block;
  font-size:         15px;
  padding:           2px;
  cursor:            pointer;
  width:             150px;
  height:            30px;
  border-radius:     5px;
  border:            1px solid #CACFD2;
  color:             #FFF;
  font-weight:       500;
  box-shadow:        inset 0px 1px 0px 0px #F8F9F9;
  background-color:  #696969;
  background:        -webkit-gradient(linear, left top, left bottom, color-stop(5%, #A9A9A9), to(#696969));
  background:        -o-linear-gradient(top, #A9A9A9 5%, #696969 100%);
  background:        linear-gradient(to bottom, #A9A9A9 5%, #696969 100%);     
  -webkit-box-shadow: none;
}

#databutton3 {
  display:           inline-block;
  font-size:         18px;
  padding-top:       19px;
  padding-bottom:    19px;
  height:            65px;
  cursor:            pointer;
  width:             170px;
  border-radius:     5px;
  border:            1px solid #82E0AA;
  color:             #FFF;
  font-weight:       600;
  box-shadow:        inset 0px 1px 0px 0px #F8F9F9;
  background-color:  #28B463;
  background:        -webkit-gradient(linear, left top, left bottom, color-stop(5%, #82E0AA), to(#28B463));
  background:        -o-linear-gradient(top, #82E0AA 5%, #28B463 100%);
  background:        linear-gradient(to bottom, #82E0AA 5%, #28B463 100%);     
  -webkit-box-shadow: none;
/*  display:           inline-block;
  border-radius:     3px;
  border:            1px solid #ABEBC6;
  padding-top:       16px;
  padding-bottom:    16px;
  width:             170px;
  color:             #FFF;
  font-size:         16px;
  font-weight:       600;
  background-color:  #58D68D;
  box-shadow:        none;*/
}

.tdg a:link, .tdg a:visited {
  text-decoration:   underline;
  color:             #4169E1;
}

.tdg a:link, .tdg a:visited { 
  color:             #4169E1;
}

.modal {
  background-color:  rgba(169, 204, 227, 0.9);
  color:             #333; 
  font-family:       sans-serif;
}

/*.home {
  width:             100%;
  margin:            50px auto;
  max-width:         1000px;
  background-color:  #000;
  border-radius:     0px 0px 0px 0px;
  overflow-y:        auto;
  overflow-x:        hidden;  
}*/

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .modal {
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    background-color: rgba(169, 204, 227, 0.6);  
	}
}

#StCompany {
  font-weight:       700; 
  font-size:         20px; 
  padding-top:       var(--space2);
}

#Purpose {
  font-weight:       200; 
  font-size:         18px; 
  padding-top:       2%;
  padding-bottom:    var(--space0);
/*padding-bottom:    2%;*/
}

hr { 
  width:             90%; 
  height:            1px; 
  color:             #4169E1;
  background:        #4169E1;
}

.form-error {
  color:             red;
  font-weight:       bold;
}

.form-success {
  color:             green;
  font-weight:       bold;
}

.successclass {
  background-color:  #6F0;
}

.input-error {
/*border:            5px solid #F00;*/
  box-shadow:        0 0 5px red;*/
  border-color:      #F00;
/*color:             #F00;*/
}

#form1 {
  padding-top:       var(--space0);
  font-size:         18px;
}

.flex-item1 {
  margin-left:       1%;
  margin-right:      1%;
/*  margin-top:        2%;*/
  width:             35%;
  padding-top:       3px;
  padding-bottom:    3px;
  padding-left:      15px;
  border-radius:     15px;
  border-color:      #4169E1;
  background:        #FFFFFF;
  text-shadow:       none;
  -webkit-box-shadow: none;
  box-shadow:        none;
}

.flex-item2 {
  margin-left:       1%;
  margin-right:      1%;
  margin-top:        2%;
  width:             60%;
  padding-top:       3px;
  padding-bottom:    3px;
  padding-left:      15px;
  border-radius:     15px;
  border-color:      #4169E1;
  background:        #FFFFFF;
  text-shadow:       none;
  -webkit-box-shadow: none;
  box-shadow:        none;
}

.flex-item3 {
  margin-left:       1%;
  margin-right:      1%;
  margin-top:        2%;
  width:             18%;
  padding-top:       3px;
  padding-bottom:    3px;
  padding-left:      15px;
  border-radius:     15px;
  border-color:      #4169E1;
  background:        #FFFFFF;
  text-shadow:       none;
  -webkit-box-shadow: none;
  box-shadow:        none;
}

.flex-item4 {
  margin-left:       1%;
  margin-right:      1%;
  margin-top:        2%;
  margin-bottom:     2%;
  width:             65%;
  height:            32px;
  max-width:         500px;
  padding-top:       3px;
  padding-bottom:    3px;
  padding-left:      15px;
  border-radius:     15px;
  border-color:      #4169E1;
/*  border-width:      2px;*/
  background:        #FFFFFF;
  text-shadow:       none;
  -webkit-box-shadow: none;
  box-shadow:        none;
}

.flex-item5 {
  margin-left:       1%;
  margin-right:      1%;
/*  margin-top:        2%;*/
  width:             39%;
  padding-top:       3px;
  padding-bottom:    3px;
  padding-left:      15px;
  border-radius:     15px;
  border-color:      #4169E1;
  background:        #FFFFFF;
  text-shadow:       none;
  -webkit-box-shadow: none;
  box-shadow:        none;
}

.flex-item6 {
  margin-left:       1%;
  margin-right:      1%;
  margin-top:        var(--space1);
  margin-bottom:     2%;
  width:             50%;
  max-width:         250px;
  padding-top:       8px;
  padding-bottom:    8px;
  height:            40px;
  padding-left:      15px;
  border-radius:     20px;
  border-color:      #4169E1;
  color:             #000;
  font-weight:       600;
  box-shadow:        inset 0px 1px 0px 0px #F8F9F9;
  background-color:  #EAF2F8;
  background:        -webkit-gradient(linear, left top, left bottom, color-stop(5%, lightsteelblue), to(#EAF2F8));
  background:        -o-linear-gradient(top, lightsteelblue 5%, #EAF2F8 100%);
  background:        linear-gradient(to bottom, lightsteelblue 5%, #EAF2F8 100%);  -webkit-box-shadow: none;
  box-shadow:        none;
}

.nameline1, .nameline2, .nameline3, .nameline4, .nameline5, .nameline6, .nameline7, .nameline8, .nameline9, #contactainer {
  display:           none;
}

#headlineY1 {
  font-size:         20px; 
  font-weight:       700; 
  padding-top:       20px;    
}
#headlineY2 {
  font-size:         20px; 
  font-weight:       700; 
  padding-top:       15px;    
}
#textY1 {
  padding-top:       10px;	
  font-size:         18px; 
  font-weight:       500; 
  line-height:       1.5;
}
#textY2 {
  font-size:         18px; 
  font-weight:       200;
  line-height:       1.2;
  padding-bottom:    10px;	
}
#textY3 {
  font-size:         18px; 
  font-weight:       200;
  line-height:       1.2;
  padding-bottom:    15px;	
}
#textY3 a {
  text-decoration:   none;
}
#textY3 img {
  padding-top:       5px;
  width:             45px; 
  height:            45px;
  padding-left:      5px;
  padding-right:     5px;
}

.namebuttonclass {
  border-color:      #4169E1;
  color:             #000;
  font-weight:       600;
  border-radius:     15px;
  padding-left:      7px;
  padding-right:     7px;
  box-shadow:        inset 0px 1px 0px 0px #F8F9F9;
  background-color:  #EAF2F8;
  background:        -webkit-gradient(linear, left top, left bottom, color-stop(5%, lightsteelblue), to(#EAF2F8));
  background:        -o-linear-gradient(top, lightsteelblue 5%, #EAF2F8 100%);
  background:        linear-gradient(to bottom, lightsteelblue 5%, #EAF2F8 100%);  -webkit-box-shadow: none;
  box-shadow:        none;
}

/*input, label {
  margin: 1% 0.5%;
}*/

/*.wrapper {
  display:           -ms-grid;
  display:           grid;
  -webkit-box-align: center;
  -ms-flex-align:    center;
  align-items:       center;
}

#form1 {
  display:           -webkit-box;
  display:           -ms-flexbox;
  display:           flex;
  -ms-flex-wrap:     wrap;
  flex-wrap:         wrap; /* Umbruch
}

.row {
  display:           block;
}
*//*
#form1 > input {
  flex:              1 1 0%;
  margin:            0.5%;
  }

/*
input {
  border:            none;
  background:        hsl(0 0% 93%);
  border-radius:     5px;
  padding:           10px 10px;
  background:        #300;
}

#form1 .flex-item1 {
  -ms-flex: 1 1 40%;
  flex-basis: 40%; 
}

#form1 .flex-item2 {
  -ms-flex: 1 1 65%;
  flex-basis: 65%;  
}

#form1 .flex-item3 {
  -ms-flex: 1 1 15%;
  flex-basis: 15%;  
}


input[type=button] {
  background:        hotpink;
  color:             white;
  box-shadow:        0 .75rem .5rem -.5rem hsl(0 50% 80%);
}
*/



/*For text+submit*/
/*#form1 input[type=submit], input[type=text] {
  font-size:         14px;
}
*/


/*#msurname, #mfirstname {
  width:             45%;
}
	
.gutter {
  margin-right:      2%;
}

#msubmit {
    background-color: #82E0AA;
	border:           none;
	color:            white;
	height:           45px;
	width:            100%;
	max-width:        95px;
	text-align:       center;
	margin-bottom:    8px;
	padding-left:     2%;
  }*/