:root {
    --primary-dark: #2b155c;
    --primary-light: #5813ed;
    --primary-light-miniVehicle: #c3aaf9;
    --primary-light-30: #5813ed30;
    --primary-light-50: #5813ed50;
    --primary-light-80: #5813ed80;
    --primary-light-hover: #4e12cf;
    --secondary-light-80: #de15d480;
    --secondary-light-hover: #e1a6df;
    --secondary-light: #de15d4;
    --secondary-border: #781673;
    --secondary-hover: #c812bf;
    --alertColor: #ca0101;
    --alertColor-trans-50: #ca010150;
    --secondary-light-trans-80: #009c9780;
    --secondary-light-trans-30: #009c9730;
    --secondary-light-trans-90: #009c9790;
    --secondary-light-trans-50: #009c9750;
    --light-white: #eeeeee;
    --light-grey: #dcdcdc;
    --dark-grey: #949494;
    --white: #e6e6e6;
    --primary-button-text:#083130;
    --theme-color: #006666;
    --middle-grey: #5e5e5e;
    --black: #000000;

    --colorTileBCBlue:#315da8;
    --colorTileBCRed: #c71a45;
    --colorTileBCGreen:#07691e;
    --colorTileBCYellow:#e3ca10;
    --colorTileBCWhite: #f0f0f0;
    --colorTileBCBlack: #000000;
    
    --colorTileFCBlue: #FFFFFF;
    --colorTileFCRed: #FFFFFF;
    --colorTileFCGreen:#FFFFFF;
    --colorTileFCYellow:#a16403;
    --colorTileFCWhite: #d60f7d;
    --colorTileFCBlack: #FFFFFF;

  }

*{
    /* font-family: 'Brush Script MT', cursive; */
    font-family: 'Trebuchet MS', sans-serif;
    color: #353535;
}

#header{
    border: 0px solid red;
    position:fixed;
    top:0px;
    left:0px;
    width:101%;
    height:80px;
    background: #FFF;
    z-Index:100;
}
#headerLogo{
    width:200px;
    background-image: url('images/Logo_weisser_Hintergrund_fritz_drive.png');
    background-size: 80%;
    height:60px;
    display:block;
    float:left;
    background-repeat: no-repeat;
    margin-top:25px;
    margin-left:10%;
}
#headerMenuMobile{
  display:none;
}
#mainMenu ul li{
    float:left;
    list-style:none;
    padding:10px;
    margin-top:5px;
}
#mainMenu ul li a{
    text-decoration: none;
}

#content{
    width: 100%;
    display: block;
    margin-top: 60px;
    min-height:600px;
}
#content section{
    width: 101%;
    margin-left:-8px;
    padding-top:30px;
    display:inline-block;
}

#spacerFooter{
    height:170px;
    display:block;
    width:100%;
}
#footer{
    background: #000;
    width:101%;
    margin-left:-8px;
    bottom:0px;
    height:35px;
    position:fixed;
    z-Index:1;
}
#footer ul li{
    float:left;
    list-style:none;
    padding:10px;
    margin-top:-20px;
}
#footer ul li a{
    text-decoration: none;
    color: #FFF;
    font-size:80%;
}


.royalSlider{
    /* margin-left:-200px; */
    width:150%;
}

#sliderBulletList{
    text-align: center;
    border: 0px solid red;
    margin-top:15px;
}
#sliderBulletList ul{
    display:inline-block;
    margin: 0;
    padding: 0;    
}
.sliderBullets li{
    list-style: none;
    float:left;
}
.sliderBullets li span{
    border:1px solid var(--primary-dark);
    border-radius:45px;
    width:10px;
    height:10px;
    background-color: var(--primary-light);
    margin-left:5px;
    margin-top:-2px;
    display:block;
    margin-top:-5px;
}
#sliderBulletList ul .activeBullet{
    border:1px solid var(--secondary-light);
    border-radius:45px;
    width:10px;
    height:10px;
    background-color: var(--secondary-light);
    margin-left:5px;
    margin-top:-2px;
    display:block;
    margin-top:-5px;
}
.vPrice{
    font-weight:bold;
}
#arrowSliderLeft{
    position: absolute;
    margin-top: -300px;
    font-size: 300%;
    left: 5%;
}
#arrowSliderRight{
    position: absolute;
    margin-top: -300px;
    font-size: 300%;
    right: 5%;
}

#arrowSliderRight .fa, #arrowSliderLeft .fa{
    color: var(--primary-light);
}

.vThumbTile{
    /* width:200px; */
    height:100px;
}
.vehicleTiles{
    display:block;
    border:0px solid red;
}
.vTile{
    border:1px solid var(--primary-dark);
    width:350px;
    height:250px;
    display:block;
    float:left;
    border-radius:15px;
    margin-top:10px;
    margin-left:20px;
    overflow: hidden;    
}
.vTile img{
    transition: all .3s ease-in-out;    
}
.vTile img:hover   {
    transform: scale(1.2);
  }
.vPrice{
    margin-top:30px;
}
#dynamicPrice{
    accent-color: var(--secondary-light);
    height:20px;
}

input[type=range] {
	appearance: none;
	width: 100%;
	border-radius: 6px;
	height: 12px;
	border: 1px solid var(--secondary-light-80);
	background-color: var(--secondary-light-80) 
}
input[type=range]::-moz-range-thumb {
    background: var(--secondary-light);
    border: 2px solid var(--secondary-border);
    width: 30px;
    height: 30px;
    border-radius: 15px;
    cursor: pointer;
  }

  #accountLogin{
    position: absolute;
    top: 30px;
    width: 60px;
    font-size: 24;
    right: 20%;
    float:left;
  }
  #loggedInName{
    border:0px solid green;
    display:block;
    position:absolute;
    font-size:60%;
    margin-top:-20px;
    margin-left:25px !important;
    display:none;
  }

  #loginWrapper{
    text-align:center !important;
    
    display:block;
    border:0px solid red;
    padding-left:40%;
  }
  #loginInner{
    border:1px solid var(--primary-light);
    border-radius: 5px;
    width:200px;
    text-align:left;
    padding:10px;
    box-shadow:2px 2px 2px grey;
  }

  details[open] > summary::after {
    transform: rotate(180deg);
  }

  .btnLogout{
    background-color: var(--primary-light);
    border-radius: 50px;
    display: block;
    width: 100px;
    padding: 5px;
    margin-top: 0px;
    text-decoration: none;
    color: white;
    text-align: center;
    cursor: pointer;
    border: 1px solid var(--primary-dark);
    position: absolute;
    top: 0;
    margin-left: 200px;
    display:none;
  }
  .btnLogout:hover{
    background-color: var(--secondary-light);
    border: 1px solid var(--secondary-light);
  }

.btnSecondary{
    background-color:  var(--secondary-light);
    border-radius: 50px;
    display: inline-block;
    width: 400px;
    padding: 10px;
    margin-top: 20px;
    text-decoration: none;
    color: white;
    text-align: center;
    cursor:pointer;
    border:1px solid var(--secondary-hover);
}
.btnSecondary:hover{
    background-color:  var(--primary-light);
    border:1px solid var(--primary-light);
}




  /* Skelton Definitions */
.skeleton, .skeleton-secondary  {
    animation: skeleton-loading 1s linear infinite alternate;
  }
  
  @keyframes skeleton-loading {
    0% {
      background-color: hsl(200, 20%, 80%);
    }
    100% {
      background-color: hsl(200, 20%, 95%);
    }
  }
  
  .skeleton-text {
    width: 100%;
    height: 20px;
    margin-bottom: 0.5rem;
    border-radius: 0.25rem;
  }
  .small{
    width:100px;
  }
  .medium{
    width:250px;
  }
  /* End Skeleton */







/* Color Tiles */
.colorTile-Blau{
  background-color: var(--colorTileBCBlue);
  color: var(--colorTileFCBlue);
}
.colorTile-Rot{
  background-color: var(--colorTileBCRed);
  color: var(--colorTileFCRed);
}
.colorTile-Green, .colorTileGruen{
  background-color: var(--colorTileBCGreen);
  color: var(--colorTileFCGreen);
}
.colorTile-Gelb{
  background-color: var(--colorTileBCYellow);
  color: var(--colorTileFCYellow);
}
.colorTile-Weiss, .colorTile-Grau{
  background-color: var(--colorTileBCWhite);
  color: var(--colorTileFCWhite);
}
.colorTile-Schwarz{
  background-color: var(--colorTileBCBlack);
  color: var(--colorTileFCBlack);
}
/* END Color Tiles */










@media screen and (max-width: 465px) {
  .vTile{
    width:100%;
    height:250px;
  }
  body{
    overflow-x:hidden;
    width:100%;
  }
  #headerMenuMobile{
    display:block;
  }
  #mainMenu{
  display:none;
  }
  #headerMenuMobile{
    position:fixed;
    top:20px;
    right:5%;
  }
  #mobileNavGully a{
    font-size:45px;
    color:var(--primary-light);
  }
  #mobileNavGully .fa{
    color:var(--primary-light);
    cursor:pointer;
  }
  #mobileNavGully .open{
    color:var(--secondary-light);
  }
  #mobileNavWrapper{
    position:fixed;
    width:101%;
    min-height:100%;
    margin-left:100%;
    z-Index:10;
    display:block;
    background:#FFF;
    border:1px solid grey;
  }
  #mobileNavWrapper ul{
    margin-left:-20px;
  }  
  #mobileNavWrapper ul li{
    list-style:none;
    padding:10px;
    margin-top:5px;
  }
  #mobileNavWrapper ul li a{
      text-decoration: none;
      font-size:110%;
      border-left:1px solid grey;
      border-right:1px solid grey;
      border-radius:5px;
      padding:5 10 5 10;
      width:90%;
      display:inline-block;
  }
  #accountLogin{
    font-size: 24;
    position:unset;
    width:100%;
  }
  #accountLogin a{
    width:100%;
    display:block;
  }
  #loggedInNameMobile{
    border:0px solid green;
    display:block;
    margin-left:15px !important;
    margin-top:7px;
    display:none;
    float:left;
    font-size:16px;
  }
  #accountLinkMobile .fa{
    float:left;
  }
  #logoutMobile{
    position: relative;
    margin-top: -65px;
    right: 5%;
  }
  #footer{
    height: 50px !important;
    line-height: 20px;
  }
  #footerLinks{
    margin-left:-8%;
  }

}