@import url('https://fonts.googleapis.com/css?family=Belanosima&display=swap');
body{


}

.left-pane{
  
  position: absolute;
  left: 0;
  width: 25%;
  height: 95%;
}
.center{
  float: center;
  position: absolute;
  left: 25%;
  width: 50%;
  height: 95%;
 
}
.tb{
	position: absolute;
	background-color: ghostwhite;
	 border-radius: 6px;
 padding: 15px 32px;
 font-family: Belanosima;
  box-shadow: 5px 10px 2px  ghostwhite;
  text-shadow: 2px 2px 2px rgb(195,124,27, .5);
  top: 75%;
  right:65%;
}
.cb{
  float: center;
  position: absolute;
  border-radius: 6px;
 padding: 15px 32px;
  background-color: ghostwhite;
  color: black;
   font-family: Belanosima;
  box-shadow: 5px 10px 2px  rgb(195,124,27);
  text-shadow: 2px 2px 2px rgb(195,124,27, .5);
  left: 35%;
  top: 85%;
}
.logo{
  position: relative;
  left: -200px;
  width: 5%;
  height: 5%;
}
.copyright{
  position: relative;
  left: -100px;
}
.home-img{
  width: 30%;
  height: 30%;
  position: relative;
  left: 30%;
  
}
.right-pane{
  position: absolute;
  right: 0;
  width: 25%;
  height: 95%;
}
.footer{
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  height: -10%;
  background-color: red;
}


.home-text{
  color: ghostwhite;
  text-align: center;
  font-family: Belanosima;
  padding-top: 10%;
  font-size: 48px;
  letter-spacing: -1px;
  word-spacing: -5px;
  text-shadow: 2px 2px 2px black;
}

.home-text-body{
  color: ghostwhite;
  text-align: center;
  font-family: Belanosima;
  padding-top: 25%;
  font-size: 24px;
  text-shadow: 2px 2px 2px black;
}

.ad{
  position: absolute;
  background-color: black;
  opacity: .7;
  color: white;
  font-family: Belanosima;
  text-shadow: 2px 2px 2px slateblue;
  top: 50%;
  left: 2%;
  width:100%;
  height: 40%;
  text-align: center;
  font-weight: bolder;
  box-shadow: 5px 10px 2px  rgb(195,124,27);
}
.long{
  height: 90%;
}
.top{ 
  position: absolute;
  top: 5%;
 
}
.ad-img{
  width: 100%;
  opacity: .9;
}
.cen{
	width:80%;
	position: relative;
	left: 12%;
}

.ad-img:hover {
  -ms-transform: scale(1.2); /* IE 9 */
  -webkit-transform: scale(1.2); /* Safari 3-8 */
  transform: scale(1.2); 
}

.backdroptitle{
	position: absolute;
  font-size: 80px;
  top: 8px;
  left: 16px;
  font-weight: bolder;
  color: white;
  
    text-shadow: 2px 2px 4px black;
}

.backdropsubtitle{
	position: absolute;
	font-size: 50px;
  top: 300px;
  left: 16px;
  font-weight: bolder;
  color: #fbe482;
  width: 1200px;
  text-shadow: 2px 2px 8px black;
  
}

#backdrop{
		filter: blur(4px);
  -webkit-filter: blur(4px);
	
}

.topbackdrop{
	position: relative;


}

.btnbackdrop{
	position: absolute;
	top: 600px;
	width: 250px;
	
	height: 100px;
  left: 300px;
  opacity: .8;
}
#bg 
{	
height: 850px;
width: 100%;
background-color: #ebcbae;

}


/* ---XXL Large screen --- */
@media screen and (min-width: 1920px) {
  .cb{
    left: 40%;
  }
  .home-text-body{
  padding-top: 40%;
  }
  .logo{
  position: relative;
  left: -400px;
}
  .copyright{
  left: -270px;
}
}

/* ---Extra Large Screens --- */
@media screen and (min-width: 1201px) and (max-width: 1919px) {
 .home-text-body{
    padding-top: 40%;
   font-size: 28px;
  }
  .backdropsubtitle{font-size: 30px;}
  
}

/* ---Desktops, Large screens--- */
@media screen and (min-width: 1025px) and (max-width: 1200px){
  .backdropsubtitle{font-size: 20px;}
  
}


/* ---Small Screens Laptops--- */
@media screen and (min-width: 769px) and (max-width: 1024px) {
   .home-text{
    font-size: 28px;
    word-spacing: normal;
  }
  .home-text-body{
    font-size: 10px;
  }
.backdropsubtitle{font-size: 20px;}
}


/* ---Tablet--- */
@media screen and (min-width: 481px) and (max-width: 760px){
.backdropsubtitle{ font-size: 20px}
	
}


/* ---Mobile--- */
@media only screen and (min-width: 320px) and (max-width: 480px) {
	.backdroptitle{
		font-size: 40px;
	}
	.backdropsubtitle{
		font-size: 25px;
		top: 120px;
		  width: 400px;
		
	}
	
  #some-element { display: none; }
   .logo{
    left: -99px;
  }
  .copyright{
    left: 0px;
  }
  .home-text{
    font-size: 28px;
    word-spacing: normal;
     letter-spacing: normal;
  }
  .home-text-body{
    font-size: 18px;
    padding-top: 90%;
  }
  .cb{
    top: 65%;
    left: 15%;
  }
  .ad{
    top: 15%;
    height: 20%;
     font-size: 8px;
  }
  .top{
    top: 55%;
  }
  .ad-img{
    height: 75%;
  }
  .ad h5{
    font-size: 10px;
  }
  .home-img{
	    position: absolute;
		top: 50%;
   width: 35%;
  height: auto;
  }
  #bg{ display: none;}
   #some-element { display: none; }
}
 .btnbackdrop{left:100px}
}

}