@media screen and (max-width: 768px) {
    #VideoBG_box{
        display: none;
    } 
}
@media screen and (min-width: 768px) and (max-width: 1024px){
    #VideoBG_box{
        position:absolute;
        top:0;
        left:0; 
        width: 100%;
        height: 100%; 
        overflow-x: hidden;
        overflow-y: hidden;
        z-index: -10;
        opacity: 0;
    } 
    #VideoBG{  
        max-height: 1080px; 
        overflow-x: hidden;
        overflow-y: hidden;
        z-index: -10;
    } 
}
@media screen and (min-width: 1024px) {
    #VideoBG_box{
        position:absolute;
        top: 0;
        left: 0; 
        width: 100%;
        height: 850px; 
        overflow-x: hidden;        
        overflow-y: hidden;
        z-index: -10;
        opacity: 1;
    } 
    #VideoBG{
        position: absolute;
        top: 0;
        left: 0; 
        width: 100%;
        z-index: -10;
    } 
}
@media screen and (max-width: 768px) {
    #VideoBGText{
        padding: 20px; 
        text-align:center; 
        margin-top: 40px;        
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 1); 
        color: #FFFFFF;
    } 
    #VideoBGText h1{
        font-size: 35px; 
        color: #FFFFFF;
    }
    #VideoBGText h2{
        font-size: 25px; 
        color: #FFFFFF;
    }
}
@media screen and (min-width: 768px) {
    #VideoBGText{
        padding: 10px 60px; 
        text-shadow: 2px 2px 10px rgba(0, 0, 0, 1); 
        color: #FFFFFF;
    } 
    #VideoBGText h1{        
        font-size: 50px;        
        text-align:left;
        color: #FFFFFF;
    }
    #VideoBGText h2{        
        font-size: 28px;        
        text-align: left;
        color: #FFFFFF;
    }
}
#Header{
    position: relative;
}
@media screen and (max-width: 1165px) {
    div#header_top {
      display: none;
    }
}
@media screen and (min-width: 1165px) {
    div#header_top {
        display: flex;
        background-color: var(--neutral_light); 
        justify-content: space-between;
        height: 50px;
    }

    div#Headerleft_box {
        padding: 15px;
    }
}

@media screen and (max-width: 1165px) {
    div#header_top {
      display: none;
    }
}
@media screen and (min-width: 1165px) {
    div#header_top {
        display: flex;
        background-color: var(--neutral_light);
        justify-content: space-between;
        height: 50px;
        
    }

    div#Headerleft_box {
        padding: 15px;
    }
}

@media screen and (max-width: 1165px) {
	div#HeaderWelcome{
        display: none;
    }
    div#header_box {
        background-color: var(--light); 
        justify-content: space-between;
        height: 160px; 
        opacity: 0.8;   
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
        padding-top: 55px;
    }
    div#header_box img{
        height: 100px;
    }
    /*
    
    div#HeaderMenu{
        background-color: var(--primary);
        height: 50px;
    }*/

    div#HeaderLogo_box {
        margin-left: auto;
        margin-right: auto;
        
    }
    div#HeaderLogo_box img {
        max-width: 100%;
    }

    div#HeaderMenu_box {
        display: none;
    }
    
    div#HeaderRight_box {        
        display: none;
    }
}

@media screen and (min-width: 1165px) {
	div#HeaderWelcome{
        display: none;
    }
    div#header_box {
        display: flex;
        background-color: var(--light); 
        justify-content: space-between;
        height: 160px; 
        opacity: 0.8;   
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    }
    div#HeaderLogo_box {
        width: 15%;
        align-self: center;
    }    
    @media screen and (max-width: 1290px) {
        div#HeaderLogo_box img{
            height: 80px;
            z-index: 20;
        }
    }
    @media screen and (min-width: 1290px) {
        div#HeaderLogo_box img{
            height: 120px;
            z-index: 20;
        }
    }


    div#HeaderMenu_box {
        min-width: 20%;
        align-self: center;
    }
    div#HeaderMenu_box ul{
       padding: 0;
       list-style-type: none;
    }
    div#HeaderMenu_box ul li{
        display: inline-block;
    }
    div#HeaderMenu_box ul li a{
        padding: 10px;
        display: block;
        font-size: 18px;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        color: var(--light_c);
    }
    div#HeaderMenu_box b{
        color: red;
    }
    div#HeaderRight_box {
        min-width: 20%;
        align-self: center;
    }
}

/*************************************/

@media screen and (max-width: 768px) {
    div#header_bottom {
      display: none;
    }
}
@media screen and (min-width: 768px) {
    div#header_bottom {
        display: flex;
        background-color: var(--primary);
        justify-content: space-between;
        height: 50px;
        color: var(--primary_c);
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.3), 0 6px 20px 0 rgba(0, 0, 0, 0.2);
    }
    div#header_bottom a{
        color: var(--primary_c);
    }

    div#Headerleft_box {
        display: flex;
        justify-content: space-around;
    }
    div#header_bottom ul li{
        display: inline-block;
    }
    div#header_bottom ul li a{
        padding: 10px;
        display: block;
    }
}

@media only screen and (min-width: 1024px){
    div#FixedContact{
      width: 250px;
      text-align: left;
      position: fixed;
      top: 100px;
      right: 25px;
      background-color: var(--secondary);
      color: var(--secondary_c);
      border-radius: 10px;
      padding: 10px;
      z-index: 150;
      box-shadow: 0 0 20px #CCC;      
      display: flex;      
      vertical-align: middle;
    }
    div#FixedContactMobile{
      display: none;
    }
    div#FixedContact a{
      color: var(--secondary_c);
    }
  }
  @media only screen and (max-width: 1024px){
    div#FixedContactMobile{
      width: 200px;
      text-align: left;
      position: fixed;
      top: 8px;
      left: 3px;
      border-radius: 10px;
      z-index: 5000;
      color: #FFFFFF;
      vertical-align: middle;
      font-size: 15px;         
      display: flex;
    }
    div#FixedContactMobile a{
      color: var(--primary_c);
    }
    div#FixedContact{
        display: none;
    }
  }








