:root {
    --myLila: rgb(90, 50, 180);
    --myLila2: rgb(150, 110, 240);
    --myGray1: rgb(173, 181, 189);
    --myGray2: rgb(108, 117, 125);
    --myGray3: rgb(73, 80, 87);
    --myGray4: rgb(52, 58, 64);
    --myGray5: rgb(33, 37, 41);
    --myGreen: rgb(48, 192, 163);
    --myBlue1: rgb(179, 229, 255);
    --myBlue2: rgb(61, 165, 244);
    --myBlue3: rgb(3, 169, 255);
    --myBlue4: rgb(17, 97, 238);
    --myRed: rgb(242, 81, 108);
    --myOrange: rgb(255, 138, 101);
    --myYellow: rgb(255, 255, 157);
}


html, body{
    /*height: 100%;*/
    margin:0;
    padding:0;
    border:0;
    background-color: white; /*var(--myYellow); Verwendung der unter dem root-Selektor definierten "Custom Properties" mittels var() funktioniert
    /*background-color: #d6dbdf; /*#bbdefb; #90caf9; #fff; #e3f2fd;*/
}

/*eigenes Farben-Schema*/


.myLila {
    background-color: var(--myLila); /*rgb(90, 50, 180); #5A32B4*/
    color: white;
}
.myLila2 {
    background-color: var(--myLila2); /*rgb(150, 110, 240); #966EF0*/
    color: white;
}

.myGray1 {
    background-color: var(--myGray1); /*rgb(173, 181, 189); #adb5bd*/
    color: var(--myGray5)
}
.myGray2 {
    background-color: var(--myGray2); /*rgb(108, 117, 125); #6c757d*/
    color:white;
}

.myGray3 {
    background-color: var(--myGray3); /*rgb(73, 80, 87); /*#495057*/
    Color: white;
}

.myGray4 {
    background-color: var(--myGray4); /*rgb(52, 58, 64); #343a40 als dunklen Background verwenden*/
    color:white;
}

.myGray5 {
    background-color: var(--myGray5); /*rgb(33, 37, 41); #212529*/
    color: white;
}

.myGreen {
    background-color: var(--myGreen); /*rgb(48, 192, 163); #30C083*/
    color: white;

}

.myBlue1 {
    background-color: var(--myBlue1); /*rgb(179, 229, 255); #B3E5FF*/
    color: var(--myGray5);
}

.myBlue2 {
    background-color: var(--myBlue2); /*rgb(61, 165, 244); #3DA5F4*/
    color: white;;
}

.myBlue3 {
    background-color: var(--myBlue3); /*rgb(3, 169, 255); #03A9FF*/
    color: white;
}

.myBlue4 {
    background-color: var(--myBlue4); /*rgb(3, 169, 255); #03A9FF*/
    color: white;
}

.myRed {
    background-color: var(--myRed); /*rgb(242, 81, 108); #F2516C*/
    color:white;
}

.myOrange {
    background-color: var(--myOrange); /*rgb(255, 138, 101); #FFFF9D*/
    color: var(--myGray5);
}

.myYellow {
    background-color: var(--myYellow); /*rgb(255, 138, 101); #FF8A65*/
    color: var(--myGray5);
}





/*Scroll-Transition-Effekte für Elemente mit Klasse origin*/
.origin {
    /*background-color: rgb(52,58,64);*/
    opacity: 1.0;
    -webkit-transition:opacity 1000ms ease-out;
    -moz-transition:opacity 1000ms ease-out;
    -o-transition:opacity 1000ms ease-out;
    transition:opacity 1000ms ease-out;
    color: white !important;
}

.scroll {
    /*background-color: rgb(52,58,64);*/
    opacity: .4;
    -webkit-transition:opacity 1000ms ease-out;
    -moz-transition:opacity 1000ms ease-out;
    -o-transition:opacity 1000ms ease-out;
    transition:opacity 1000ms ease-out;
    /*color:white !important; rgb(52,58,64) !important;*/
}

/*Farbe für Texte in scroll-animierten spans */
.cw {
color: white !important;
}

.cd {
  color: black !important; /* rgb(52,58,64) !important;*/
    opacity: 1.0;
    -webkit-transition:opacity 1000ms ease-out;
    -moz-transition:opacity 1000ms ease-out;
    -o-transition:opacity 1000ms ease-out;
    transition:opacity 1000ms ease-out;
}




.carousel-indicators li.active  {
    /*fill: rgb(90,50,180)!important;*/
    background-color: rgb(90,50,180) !important;
}
/*funktioniert nicht wegen background-img:url(.....)
.carousel-control-prev-icon:hover,  carousel-control-next-icon  {
    fill: rgb(90,50,180)!important;
    color: rgb(90,50,180)!important;
}*/

/* control */
/*
.control{
    position: absolute;
    bottom: 20%;
    left: 22.8%;

}
*/

/*
nav.navbar {
    //opacity: 0% !important;
    transition: opacity .5s ease-in-out !important;
}
*/

/*für Hover Submenue in NavBar*/
.navbar-nav {
    text-transform: uppercase;
}

.navbar-nav li:hover > ul.dropdown-menu {
        display: block;
}
/*
.nav-pills {
    text-transform: uppercase;
}

.nav-polls li:hover > ul.dropdown-menu {
    display: block;
}
*/

.dropdown-menu {
    margin-top: 0 !important;
    left:0.5rem;
}

.dropdown-submenu {
    position:relative;
}

.dropdown-submenu>.dropdown-menu {
    /*top:0;*/
    top: -0.5rem;
    left:100%;
    /*margin-top:-0.58rem;*/
    /*margin-top: 0.2rem;*/
}

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}



/*Card btn's im Material-Design*/
.btn-group-md{
    float: right;
}

.btn-mat {
    border: none;
    color: #fff;
    background-color: #333;
    text-transform: uppercase;
    border-radius: 0.25rem;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
}
.btn-mat:hover,btn-mat:focus {
    color: #fff;
    background-color: rgb(90,50,180);
}

.btn-mat:active {
    border: none;
    color: #fff;
    background-color: #333;
    text-transform: uppercase;
    border-radius: 0.25rem;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
}

.btn-mat2 {
    /*border: none;*/
    border-color: #333;
    color: #333;
    background-color: #fff;
    text-transform: uppercase;
    border-radius: 0.25rem;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
}
.btn-mat2:hover, btn-mat:focus {
    background-color: rgb(90,50,180);
    color:#fff;
    -webkit-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.6);
    box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.6);
}
.btn-mat2:active {
    border-color: #333;
    color: #333;
    background-color: #fff;
    -webkit-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    -moz-box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
    box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.16);
}