@font-face {
    font-family: dinPro;
    src: url("../Fonts/FF DIN Pro Black.otf") format("opentype");
}

@font-face {
    font-family: dinPro;
    font-weight: bold;
    src: url("../Fonts/15770.otf") format("opentype");
}

body, html {
  height: 100%;
  margin: 0;
}

body {
  background-image: url("../img/1.jpg"), url("../img/2.jpg"), url("../img/3.jpg");
  transition: background-image 0.7s linear;
  height: 100%; 
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.logo{
	height:114px;
	width: auto;
}

#hello{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Georgia';
  color: rgb(255, 255, 255); 
  font-weight: bold
}

.phone_number{
	transform: translate(-50%, -50%);
	font-family: 'Georgia';
	color: rgb(255, 255, 255);
	font-family:dinPro;
	font-weight:bold;
	font-size:22px;
}

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

.social-icons-lists {
	display: flex !important;
	align-items: center !important;
	
}

.social-icon{
	height:50px;
	margin-left: 8px;
	-webkit-transition: -webkit-transform .8s ease-in-out;
    transition: transform .8s ease-in-out;
}

.text_middle{
	font-family:dinPro;
	font-weight:bold;
	font-size:72px;
	text-align:center;
}
 
 .padding_left{
	padding-left: 15px
 }
 .padding_right{
	    padding-right: 15px;
 }
 
 @media only screen and (max-width: 430px){
	.social-icons-lists{
		margin-left: 25%;
		margin-bottom: 10px;
		float: unset !important;
		text-align: center;
	}	

	.phone_call{
		float: unset !important;
		margin-bottom: 10px;
		text-align: center;
	}
	 
}

@media only screen and (max-width: 768px){
	.text_middle{
		font-size: 36px
	}
	
	.logo {
		height: 57px;
	}
	
	.social-icon{
		height:31px;
		margin-left: 8px;
	}
	
	footer{
		height: 90px;
	}
}

@media only screen and (min-width: 768px){
	  .logo {
		height: 74px;
	  }
 }
 
 #call:hover img{
	-webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
 }
 
 #call:hover, #call:focus{
	text-decoration: unset;
    text-shadow: 1px 1px 8px #6ad2b5;
 }
 
 .phone_number:focus, .phone_number:hover{
    text-decoration: unset;
 }
 
 .social-icon:hover {
     -webkit-transform: rotate(360deg);
    transform: rotate(360deg); 
 }