@import url(https://fonts.googleapis.com/css?family=Raleway);
	
*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
		}



	body{
		  	font-family: 'raleway',sans-serif ;
        background-image: url(../img/logos/new_map_parent.png) ;
        background-position: center center;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position:relative;
        background-image-top:0;
        background-image-left:0;
        width:100%;
        height:100%;
        background-size:cover;
        background-color: #f1f1f1;
        }
  .cust-warpper{
    width:100%;
    text-align:center;
    margin-top: 30px;
    padding-left: 20px;
  }
.vertical-lan-menu{ 
    height: 100vh;     
    width:100%;
    background-color: #eee;
    color: black;
    display: block;
    padding: 20px;
    position: absolute;
    text-decoration: none;
    z-index: -1;
}
  
		.lang-selectors {
        padding-top:18px;
        padding-left:0px;
			  vertical-align: middle;
			  font-weight:bolder;
        list-style-type:none;
			  text-align: center;
			  position: relative;
	/*		  top: 500px;*/
			  line-height:1.740;
			  color: gray;
			  margin:0px;         
			   }

		.lang-selectors ul li {
			list-style-type:none;
			display: inline-block;
		

		}

		.lang-selectors button {	
			  width: 156px;
			  border: 0.3px solid ;
        box-sizing: border-box;
			  outline: 0;	 	    
			  padding: 10px 15px;
			  margin: 10px;
        background:rgb (239,239,239);
        color: rgba(39,50,56,0.6);
        font-size:17px;
        position: relative;
        border-radius: 7px;
			  text-align: center;
			  cursor: pointer;
			  -webkit-transition: all 300ms ease-in;
			  -moz-transition: all 300ms ease-in;
			  -ms-transition: all 300ms ease-in;
			  -o-transition: all 300ms ease-in;
              transition: all 300ms ease-in;
			}


         
            .lang-selectors button:hover {
              color:#05755C; 
              box-shadow: inset 0 0 0 2px #05755D;
            }
            
            

        .lang-selectors button:before,
		   .lang-selectors button:after {
        content:'';
			  box-sizing: border-box;
        border-radius: 7px;
        position: absolute;
			  text-align:center;
        top:0;
        left:0;
        width:0;
        height:100%;
			  opacity: 0;
            }
		.lang-selectors button:before {
			text-align: center;
			font-weight: bolder;
			font-style: italic;
			content: attr(data-hover);
			padding: 9.6px;
			}
		


		.lang-selectors button:hover:before {
			  margin:2px 2px 3px 2px ;
			  width:97%;
			  height:94%;
			  background-color:rgb(201,201,201) ;
        opacity:1;
        transition: all 0.3s ease;
        overflow:hidden;   
	       }
        
/*
             .welcom-text  li{
              vertical-align: middle;
			  font-weight:bolder;
			  text-align: center;
			  position: relative;
			  top: 550px;
			  line-height:1.740;
			  color: gray;
			  margin-left:-33px;
              list-style:none;
            } 
*/
/*english welcoming phrase*/
#eng {
width: inherit;
height: inherit;
text-align: center;
}

.lang-selectors #en {
text-align: center;
display: none;
color: #05755D;
width: 100%;
left:25px;
transition: all 3s ease-in;
}

#eng:hover + #en {
display: inline;
transition: all 3s ease-in;
}

/*arabic Hover Welcoming phrase*/
#arb {
width: inherit;
height: inherit;
text-align: center;
}

.lang-selectors #ar {
text-align: center;
display: none;
color: #05755D;
width: 100%;
left:25px;

}

#arb:hover + #ar {
display: inline;
}
/*french Hover Welcoming phrase*/
#fra {
width: inherit;
height: inherit;
text-align: center;
}

.lang-selectors #fr {
text-align: center;
display: none;
color: #05755D;
width: 100%;
left:25px;
}

#fra:hover + #fr {
display: inline;
}
/*