.material-icons.md-18 {
font-size: 18px !important;
height: 18px !important;
width: 18px !important;
}
.material-icons.md-24 {
font-size: 24px !important;
height: 24px !important;
width: 24px !important;
}
.material-icons.md-36 {
font-size: 36px !important;
height: 36px !important;
width: 36px !important;
}
.material-icons.md-48 {
font-size: 48px !important;
height: 48px !important;
width: 48px !important;
}
.material-icons.md-64 {
font-size: 64px !important;
height: 64px !important;
width: 64px !important;
}
#map { position:relative; width: 100%; height: 360px; background-color: transparent; border:6px solid white; border-radius:4px;}

.fotorama__thumb{
    border-radius:10px !important;
}
.fotorama__thumb-border{
    border-radius:10px !important;
}
.fotorama__nav{
    border:1px solid var(--orange);
}
.fotorama__stage{
    border-top:1px solid var(--orange);
    border-right:1px solid var(--orange);
    border-bottom:0px solid var(--orange);
    border-left:1px solid var(--orange);    
    border-top-left-radius:10px;
    border-top-right-radius:10px;
}

@keyframes move_wave {
    0% {
        transform: translateX(0) translateZ(0) scaleY(1)
    }
    50% {
        transform: translateX(-25%) translateZ(0) scaleY(0.55)
    }
    100% {
        transform: translateX(-50%) translateZ(0) scaleY(1)
    }
}
.waveWrapper {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}
.waveWrapperInner {
    position: absolute;
    width: 100%;
    overflow: hidden;
    height: 100%;
    bottom: -1px;
	opacity:.3;
}
.bgTop {
    z-index: 15;
    opacity: 0.3;
}
.bgMiddle {
    z-index: 10;
    opacity: 0.5;
}
.bgBottom {
    z-index: 5;
}
.wave {
    position: absolute;
    left: 0;
    width: 400vh;
    height: 100%;
    background-repeat: repeat no-repeat;
    background-position: 0 bottom;
    transform-origin: center bottom;
}
.waveTop {
    background-size: 50% 100px;
}
.waveAnimation .waveTop {
  animation: move-wave 3s;
   -webkit-animation: move-wave 3s;
   -webkit-animation-delay: 1s;
   animation-delay: 1s;
}
.waveMiddle {
    background-size: 50% 120px;
}
.waveAnimation .waveMiddle {
    animation: move_wave 10s linear infinite;
}
.waveBottom {
    background-size: 50% 100px;
}
.waveAnimation .waveBottom {
    animation: move_wave 15s linear infinite;
}

.svg{
	position:absolute;
	left:0;
	bottom:0;
}
.contour {
   text-shadow:
       2px 2px 2px #FFF,
     -1px -1px 0 #FFF,  
      1px -1px 0 #FFF,
      -1px 1px 0 #FFF,
       1px 1px 0 #FFF;
}

.over-avatar-div{
	 background-color:RGBA(0,123,255,1);
	 padding:1.25rem;
}
.circle {
  position:relative;
  margin:0 auto;
  width:200px;
  height:200px;
  overflow:hidden;
  z-index:1;
  transform:translateZ(0)
}

.circle:before {
  border-radius:50%;
  content:"";
  position:absolute;
  top:0; left:0;
  width:inherit;
  height:inherit;
  box-shadow:
      inset 150px 0 0 hsla(230,80%,70%,0.05), 
      inset 0 150px 0 hsla(230,80%,70%,0.05), 
      inset -150px 0 0 hsla(230,80%,70%,0.05), 
      inset 0 -150px 0 hsla(230,80%,70%,0.05);
  transition:box-shadow 0.75s;
	  border-color:white;
}

.circle:hover:before{ 
  box-shadow:
      inset 36px 0 0 hsla(640,100%,50%,0.5),
      inset 0 36px 0 hsla(240,50%,100%,0.5), 
      inset -36px 0 0 hsla(640,100%,50%,0.5), 
      inset 0 -36px 0 hsla(60,50%,40%,0.5);

}

.row-bolck-title{
	padding:12px;
	font-weight: bold;
	font-size:1.5rem;
	margin:0;
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #white;
	background-color: var(--orange);
}
.xbootstrap {
    text-shadow: -1px -1px 1px #111, 2px 2px 1px #363636;
}
.btn-round{
  width: 2rem;
  height: 2rem;
  line-height: 2rem;
  border-radius: 50%;
  padding: 0;
  align-items: center;
  justify-content: center;
}

.ms_loader {
  border: 10px solid #f3f3f3;
  border-radius: 50%;
  border-top: 10px solid var(--orange);
  border-right: 10px solid var(--orange);
  border-bottom: 10px solid #F0F0F0;
  border-left: 10px solid var(--orange);
  -webkit-animation: spin 2s linear infinite;
  animation: spin 10s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.ms_loader:hover{
  transform: scale(1.1);
}

.comment-box:hover{
	border: 2px solid rgba(0,0,0,0.20) !important;
  box-shadow: 0px 0px 16px -2px rgba(0,0,0,0.15);
}

/*! ADS */
  .ads_details{
	  opacity:0;
  }
  
.text-teil{
    background:RGBA(255,255,255,.5); 
	border-radius:30px; 
	margin-right:-250% !important;
}
@media (max-width: 768px) {
  .text-teil{
      background:RGBA(255,255,255,.5); 
      border-radius:30px; 
      margin-left:4% !important;
      margin-top:-20% !important;    
      margin-right:4% !important;
  }
  .ads_details{
	  opacity:1;
  }
}

/*! END ADS */
/*! Animate box inside wrap */
.wrap__{

}
.wrap:blur .box00 {
  transform: scale(1);
}
.wrap:hover .box00 {
  transform: scale(1.03);

}
.wrap:hover .box0 {
  transform: scale(1.1);

}
.wrap:hover .box1 {
  transform: scale(1.3);
}
.wrap:hover .box2 {
  transform: scale(2);
}
.wrap:hover .box3x {
  transform: scale(3);
}
.wrap:hover .box4x {
  transform: scale(4);
}
.wrap .box00 , .wrap .box0 , .wrap .box1 , .wrap .box2 , .wrap .box3x, .wrap .box4x, .ms_loader {
  transition: all .6s;
  cursor:pointer;
}



.bootstrap-select > .dropdown-toggle {
    padding-left: 25px;
    padding-right: 15px;
}
.style-6::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    background-color: #F5F5F5;
}

.style-6::-webkit-scrollbar
{
    width: 8px;
    background-color: #f8f9fa;

}

.style-6::-webkit-scrollbar-thumb
{
    background-color: var(--orange); 
    border:0.01rem solid white;
    background-image: -webkit-linear-gradient(45deg,
                                              rgba(255, 255, 255, .2) 25%,
                                              transparent 25%,
                                              transparent 50%,
                                              rgba(255, 255, 255, .2) 50%,
                                              rgba(255, 255, 255, .2) 75%,
                                              transparent 75%,
                                              transparent)
}



.or {
    position: relative;
    width: 100%;
    height: 50px;
    
    line-height: 50px;
    text-align: center;
}

.or::before,
.or::after {
    position: absolute;
    width: 45%;
    height: 1px;
    
    top: 24px;
    
    background-color: #aaa;
    
    content: '';
}

.or::before {
    left: 0;
}

.or::after {
    right: 0;
}
.opacity-0{
    opacity: 0% !important;
}
.opacity-1{
    opacity: 30% !important;
}
.opacity-2{
    opacity: 60% !important;
}
.opacity-3{
    opacity: 75% !important;
}
 .animated {
    -webkit-transition: height 0.2s;
    -moz-transition: height 0.2s;
    transition: height 0.2s;
}

.stars
{
    margin: 20px 0;
    font-size: 24px;
    color: #d17581;
}

body {
    margin:0px; padding:0px;
    //font-family: 'El Messiri', cursive;
font-family: 'Cairo', sans-serif;
}
.font-Sigmar{
    font-family: 'Rakkas', cursive;
    color:white;
}
.kaushan_script{
    font-family: 'Kaushan Script', cursive;
    color:white;
}
.Shadows_Into_Light{
    font-family: 'Shadows Into Light', cursive;
    color:white;
}

.shadowme{
    box-shadow: 0px 0px 20px #aaaaaa;
}
.f-size_vw1{
    font-size: 3vw;
}
.f-size_vw2{
    font-size: 5vw;
}
.f-size_vw3{
    font-size: 8vw;
}
.f-size_vw4{
    font-size: 12vw;
}
.f-size_vw5{
    font-size: 15vw;
}

.menueLayer{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    margin-left:-62%;
    background-color:RGBA(0,0,0,.95);
    border-right:1px solid  #ffc107 !important;
    width:60vw;
    height:100vh;
    z-index: 2;
}
.leiste-DIV{
    margin-top:90px;
    border-bottom:1px solid var(--orange);
    min-height:40px;
    background-color:RGBA(0,0,0,0.5);
}
.blink_text {

    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
}
.text-blinker {

    animation:1s blinker linear infinite;
    -webkit-animation:1s blinker linear infinite;
    -moz-animation:1s blinker linear infinite;
}
    @-moz-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @-webkit-keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }

    @keyframes blinker {  
     0% { opacity: 1.0; }
     50% { opacity: 0.0; }
     100% { opacity: 1.0; }
     }
/////////customer bootstrap
.effect {
    text-align: center;
    display: inline-block;
    position: relative;
    text-decoration: none;
    color: #fff;
    text-transform: capitalize;
    /* background-color: - add your own background-color */
    font-family: 'Roboto', sans-serif;
    /* put your font-family */
    font-size: 18px;
    padding: 20px 0px;
    width: 150px;
    border-radius: 6px;
    overflow: hidden;
}
/* effect-5 styles */
.effect.effect-5 {
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.effect.effect-5:before {
    content: "\f164";
    font-family: 'Font Awesome\ 5 Free';
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    position: absolute;
    top: 0;
    left: 0px;
    height: 100%;
    width: 30px;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 0 50% 50% 0;
    -webkit-transform: scale(0, 1);
            transform: scale(0, 1);
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
}
.effect.effect-5:hover {
    text-indent: 30px;
}
.effect.effect-5:hover:before {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    text-indent: 0;
}
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*
*/
.animated-btn {
    display: inline-block;
    text-align: center;
    background: #ff3f3f;
    position: relative;
}

.animated-btn::before, .animated-btn::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 50%;
    background: rgba(255, 63, 63, 0.8);
    animation: ripple-1 2s infinite ease-in-out;
    z-index: -1;
}

.animated-btn::after {
    background: rgba(255, 63, 63, 0.6);
    animation: ripple-2 2s infinite ease-in-out;
    animation-delay: 0.5s;
}

@keyframes ripple-1 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}
.bd-callout {
    padding: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
    border: 1px solid #eee;
    border-left-width: .25rem;
    border-radius: .25rem
}

.bd-callout h4 {
    margin-top: 0;
    margin-bottom: .25rem
}

.bd-callout p:last-child {
    margin-bottom: 0
}

.bd-callout code {
    border-radius: .25rem
}

.bd-callout+.bd-callout {
    margin-top: -.25rem
}

.bd-callout-info {
    border-left-color: #5bc0de
}

.bd-callout-info h4 {
    color: #5bc0de
}

.bd-callout-warning {
    border-left-color: #f0ad4e
}

.bd-callout-warning h4 {
    color: #f0ad4e
}

.bd-callout-danger {
    border-left-color: #d9534f
}

.bd-callout-danger h4 {
    color: #d9534f
}

label{
color:var(--orange);
}

.custom-control.custom-checkbox{padding-left: 0;}

label.custom-control-label {
  position: relative;
  padding-right: 1.5rem;
}

label.custom-control-label::before, label.custom-control-label::after{
  right: 0;
  left: auto;
}

.nav-link {color: #000 !important;}
.nav-link:hover {color: RGBA(253,126,20, 1) !important;}  
.navbar-nav li:click>.dropdown-menu {
  display: block;
}
.navbar-collapse{
    flex-grow: none;
}
.checkbox-xl .custom-control-label::before, 
.checkbox-xl .custom-control-label::after {
  top: 0rem;
  width: 1.85rem;
  height: 1.85rem;
}

.__checkbox-xl .custom-control-label {
  padding-top: 23px;
  padding-left: 10px;
}

.has-error  {
  border-color:#dc3545;
}
.modal-header
{
display: block!important;
}
.modal-title
{
float: right;
}
.modal-header .close
{
float: left;
}
/////////fotorama
.card-v2_maschroo3_title_div{
background-color:#EFEFEF;
}
div.custom-control-right {
    padding-right: 24px;
    padding-left: 0;
    margin-left: 0;
    margin-right: 0;
}
div.custom-control-right .custom-control-label::after{
    right: -1.5rem;
    left: auto;
}
div.custom-control-right .custom-control-label::before {
    right: -2.35rem;
    left: auto;
}
/////////////////////////

////////////////////////////
//
.menueLayer .list-group {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
}
.menueLayer .list-group-item {
    padding-top:15px;
    padding-bottom:15px;
}
.menueLayer .list-group-item:hover {
    border-color:var(--orange);
    padding-top:15px;
    padding-bottom:15px;
}
.menueLayer .list-group-item-action {
  width: 100%;
  color: white;
  text-align: inherit;
  background-color: none;  
}

.menueLayer .list-group-item-action:hover, .menueLayer.list-group-item-action:focus {
  z-index: 1;
  color: #dee2e6;
  text-decoration: none;
  background-color: green;
}

.menueLayer .list-group-item-action:active {
  color: #dee2e6;
  background-color: none;
}

.menueLayer .list-group-item {
  position: relative;
  display: block;
  padding: 0.15rem 0.05rem;
  margin-bottom: -1px;
  background-color: none;
  border: 0.03rem solid #dee2e6;
}

//
#AlertModal .modal-footer {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: end;
  justify-content: flex-start;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.hidden{
    display:none;
}
.HPcontainer {
    height:100vh;
    display: grid;
    grid-template-rows: auto 1fr 120px;
    grid-template-columns: 100%;
    grid-template-areas: 
        "header"
        "content"
        "footer"
    ;
}
.bottom-right{
    position: absolute;
    bottom: 0;
    right: 0;
}
header {
    position:relative;
    background:white;
    grid-area: header;
}
footer {
    position:relative;
    background:white;
    grid-area: footer;
}
article {
    padding-bottom:15px;
    background:transparent;
    grid-area: content;
}
@media (max-width: 6500px) {
article {
    margin-left:25vw;
    margin-right:25vw;
}

}

@media (max-width: 2500px) {
article {
    margin-left:20vw;
    margin-right:20vw;
}
    header {

    }
}
@media (max-width: 1600px) {
article {
    margin-left:15vw;
    margin-right:15vw;
}

}
@media (max-width: 1190px) {
    header {
    }
    article {
        margin-left:12vw;
        margin-right:12vw;	
    } 
} 
@media (max-width: 768px) {
    article {
        margin-left:0vw;
        margin-right:0vw;
	}
    header {
  }	
  .fotorama_coverDiv{
        padding-left:0px;
        padding-right:0px;
   }
   .general_box{
        width:100% !important;
   }      
} 
header .loginDIV{
    position:absolute;
    right:5px;
    bottom:0px;
}
header .menueDiv{
    margin-left:15px;
    margin-top:15px;
}
header .socialmDiv{
    position:absolute;
    left:15px;
    bottom:15px;
}  

article .imgDiv{
    text-align: center;
}
footer {
    grid-area: footer;

}

.maschroo3BTN{
    cursor:hand;
}
.notallowed{
    cursor:not-allowed !important;
}
.hand{
    cursor:hand;
}



.whyDiv{
    background-color:#EFEFEF;
    border-radius:3%;
}