.wrap { margin: 0 auto; width: 1000px; max-width: 1000px; }
.tile { width: 400px; height: 300px;  background-color: #dddddd; display: inline-block; background-size: cover; position: relative; cursor: pointer; transition: all 0.4s ease-out; /*box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);*/ overflow: hidden; color: white; }
.tile img { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; transition: all 0.4s ease-out; }
.tile .text {/*z-index: 99; position: absolute; padding: 30px; height: calc(100% - 60px); */}
a:hover, a:focus {color:#404040;}
/*ul{width:200px;list-style:none;}
    li{width:50%; float:left;}*/
	#shantu ul { list-style:none;width:100%;height:300px;} 
#shantu ul li {width:50%; float:left;height:50%;} 
 #shantu{width:100%;}
.dibu{margin-top:22% !important;}

.dibu1{margin-top:22% !important;width:100% !important;}
.tile h1 { font-weight: 300; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); }
.tile h2 { font-weight: 100; font-size:20px;/*margin-top: 20px; font-style: italic; transform: translateX(200px);*/ }
.tile p { font-weight: 300; margin-top: 20px; line-height: 25px; transform: translateX(-200px); transition-delay: 0.2s; }
.animate-text { opacity: 0; transition: all 0.6s ease-in-out; }
.tile:hover { /*box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64); transform: scale(1.05); */}
.tile:hover img { opacity: -100; }/*0.2*/
.tile:hover .animate-text { transform: translateX(0); opacity: 1; }
.dots { position: absolute; bottom: 20px; right: 30px; margin: 0 auto; width: 30px; height: 30px; color: currentColor; display: flex; flex-direction: column; align-items: center; justify-content: space-around; }
.dots span { width: 5px; height: 5px; background-color: currentColor; border-radius: 50%; display: block; opacity: 0; transition: transform 0.4s ease-out, opacity 0.5s ease; transform: translateY(30px); }
.tile:hover span { opacity: 1; transform: translateY(0px); }
.dots span:nth-child(1) { transition-delay: 0.05s; }
.dots span:nth-child(2) { transition-delay: 0.1s; }
.dots span:nth-child(3) { transition-delay: 0.15s; }






.tile2 { width: 400px; height: 240px;  background-color: #dddddd; display: inline-block; background-size: cover; position: relative; cursor: pointer; transition: all 0.4s ease-out; /*box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.44);*/ overflow: hidden; color: white; }
.tile2 img { height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 0; transition: all 0.4s ease-out; }
.tile2 .text { /*z-index: 99; position: absolute; padding: 30px; height: calc(100% - 60px); */}
 .tile2 h1 { font-weight: 300; text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3); }
.tile2 h2 { font-weight: 100; font-size:20px;/*margin-top: 20px; font-style: italic; transform: translateX(200px);*/ }
.tile2 p { font-weight: 300; margin-top: 20px; line-height: 25px; transform: translateX(-200px); transition-delay: 0.2s; }
.tile2:hover { /*box-shadow: 0px 35px 77px -17px rgba(0, 0, 0, 0.64); transform: scale(1.05); */}
.tile2:hover img { opacity: -100; }/*0.2*/
.tile2:hover .animate-text { transform: translateX(0); opacity: 1; }
.tile2:hover span { opacity: 1; transform: translateY(0px); }