/* Author:Nazifa Mosharrat
	Id:51914
	Start-date:24/2/2020 
   */
/* nazifa css start*/
/*************************   This is for Hospita/home Page   ************************/
body, html {
  height: 100%;
  scroll-behavior: smooth;
}

*{
  margin: 0;
  padding: 0;
}

.card2{
	float:right;
}
.wrapperMessage{
   top: 20%;
  
}

.containerMessage{
  width: 560px;
  height: 230px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.img-container{
  width: 40%;
  height: 100%;
  float: left;
  position: relative;
}

.img-container img{
  width: 100%;
  height: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.content{
  width: 60%;
  height: 100%;
  float: left;
  padding: 30px 40px;
  box-sizing: border-box;
}

.head{
  padding-bottom: 30px;
}

.head p{
  font-size: 28px;
  color: #444444;

}

.head span{
  color: #aaabaf;
  font-size: 14px;
}

.data{
  width: 90%;
  overflow: hidden;
}

.inner-data{
  width: 50%;
  float: left;
  text-align: left;
  color: #aaabaf;
}

.inner-data p{
  font-size: 14px;
  padding-bottom: 5px;
}

.inner-data span{
  font-size: 18px;
  font-weight: 400;
}

.img-container:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 30px solid #1DA1F2;
  border-right: 30px solid transparent;
  border-top: 30px solid #1DA1F2;
  border-bottom: 30px solid transparent;
  cursor: pointer;
  border-top-left-radius: 5px;
}

.img-container:after{
  font-family: fontawesome;
  content:"\f099";
  position: absolute;
  top: 10px;
  left: 12px;
  color: #fff;
  font-size: 18px;
}


.floating-icon{
  position: absolute;
  width: 50px;
  height: 50px;
  top: 38%;
  right: -5%;
  background: #1DA1F2;
  border-radius: 50%;
  cursor: pointer;
}

.floating-icon .fa{
  position: absolute;
  left: 18px;
  top: 15px;
  color: #fff;
  font-size: 20px;
  transition: all 1s ease;
}

.floating-icon.active .fa{
    transform: rotate(45deg); 
    transition: all 1s ease;
}

.btn{
  position: absolute;
  top: 10px;
  right: 10px;
  text-transform: uppercase;
  font-size: 12px;
  background: #1DA1F2;
  padding: 6px 15px;
  border-radius: 50px;
  color: #fff;
  font-weight: 600;
  opacity: 0;
  transition: all 1s ease;
  cursor: pointer;
}

.btn.active{
  opacity: 1;
}
/* for ma o shisu logo on the menu*/

.rowMenu{
  width: 1052px;
  padding: 10px;
  height:40%;
  font-size: 10px;
}
/* Create three equal columns that floats next to each other */
.columnMenu {
  float: left;
  width: 25%;
  padding: 10px;
  height:50%;
}

.columnMenu a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.columnMenu a:hover {
  background-color: #ddd;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1200px) {
  .column {
    width: 100%;
    height: auto;
  }
}
#topLogo{
	
	font-size:20px;
}
/* for all card-header*/
.card-header{
			background-color:#66a3ff;
			}
			


/*latest news floating*/
.latest{
	background-color:#0673e0;
	color:white;
	margin-bottom:2%;
	
}

.Latest:after {
				
				display: table;
				clear: both;
						
				}
.scroll{
	direction:left;
}

/*panel body hovering effect*/
.p-2:hover{
	background-color:blue;
	opacity:0.6;
	font-size:21px;
	color:white;
	width:100%;
	
}
.message{
	margin-left:30%;
}
/* For photo details button  on the galary */
.project-cat:hover{
	background-color:#FFFFFF;
}

#map {
  height: 300px;
  width: 150%; 
  }
  @media (max-width: 767.98px) {
    #map {
      height: 150px; } }

/*********************** image hovering *******************/
.box14{position:relative}
.box15,.box17,.box18{box-shadow:0 0 5px #7e7d7d;text-align:center}
.box14:before{content:"";width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;opacity:0;transition:all .35s ease 0s}
.box14:hover:before{opacity:1}
.box14 img{width:100%;height:auto}
.box14 .box-content{width:90%;height:90%;position:absolute;top:5%;left:5%}
.box14 .box-content:after,.box14 .box-content:before{content:"";position:absolute;top:0;left:0;bottom:0;right:0;opacity:0;transition:all .7s ease 0s}
.box14 .box-content:before{border-bottom:1px solid rgba(255,255,255,.5);border-top:1px solid rgba(255,255,255,.5);transform:scale(0,1);transform-origin:0 0 0}
.box14 .box-content:after{border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);transform:scale(1,0);transform-origin:100% 0 0}
.box14:hover .box-content:after,.box14:hover .box-content:before{opacity:1;transform:scale(1);transition-delay:.15s}
.box14 .title{font-size:21px;font-weight:700;color:#fff;margin:15px 0;opacity:0;transform:translate3d(0,-50px,0);transition:transform .5s ease 0s}
.box14:hover .title{opacity:1;transform:translate3d(0,0,0)}
.box14 .post{font-size:14px;color:#fff;padding:10px;background:#0040ff;opacity:0;border-radius:0 19px;transform:translate3d(0,-50px,0);transition:all .7s ease 0s}
.box14 .icon,.box15 .icon{padding:0;list-style:none}
.box14:hover .post{opacity:1;transform:translate3d(0,0,0);transition-delay:.15s}
.box14 .icon{width:100%;margin:0;position:absolute;bottom:-10px;left:0;opacity:0;z-index:1;transition:all .7s ease 0s}
.box14:hover .icon{bottom:20px;opacity:1;transition-delay:.15s}
.box14 .icon li a{display:block;width:40px;height:40px;line-height:40px;border:1px solid #fff;border-radius:0 16px;font-size:14px;color:#fff;margin-right:5px;transition:all .4s ease 0s}
.box14 .icon li a:hover{background:#0040ff;border-color:#0040ff}
@media only screen and (max-width:990px){.box14{margin-bottom:30px}}




/*Photo Gallary*/


.box17{position:relative}
.box17:after{content:"";width:100%;height:100%;background:rgba(2,162,221,.9);position:absolute;top:0;left:0;opacity:0;transition:all .5s ease 0s}
.box17:hover:after{opacity:1}
.box17 img{width:100%;height:auto;transition:all 1.5s ease 0s}
.box17 .box-content,.box17 .icon li a{position:absolute;transition:all .6s ease 0s}
.box17:hover img{transform:scale(1.2)}
.box17 .icon{width:100%;height:100%;list-style:none;padding:0;margin:0 auto;position:absolute;top:0;left:0;z-index:1}
.box17 .icon li a{width:45px;height:45px;line-height:45px;margin:0 auto;top:50%;border:1px solid #fff;opacity:0}
.box17:hover .icon li a{top:30%;opacity:1}
.box17 .icon li a:hover{background:#fff;color:#3464eb}
.box17 .icon li:first-child a{left:-90%;right:0}
.box17:hover .icon li:first-child a{left:-55px}
.box17 .icon li:last-child a{right:-90%;left:0}
.box17:hover .icon li:last-child a{right:-55px}
.box17 .box-content{width:100%;padding:20px 10px;background:rgba(0,0,0,.1);bottom:-100px;left:0;z-index:1}
.box17:hover .box-content{bottom:0}
.box17 .title{font-size:18px;font-weight:700;color:#fff;margin-top:0}
.box17 .post{display:block;font-size:14px;color:#fff}
@media only screen and (max-width:990px){.box17{margin-bottom:30px}
}

/*circle image hovering*/

.inner-circle img {
 
  border-radius: 5%;
  cursor:pointer;
  transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
}
.inner-circle:hover img {
 transform: scale(1.1);
-ms-transform: scale(1.1); 
-webkit-transform: scale(1.1);
  box-shadow: 2px 2px 2px #4b4b4b;
  
}


/* Responsive layout - makes the latest stack on top of each other instead of next to each other */

 /* Use a media query to add a break point at 800px: */
@media screen and (max-width:500px) {
  

  
  .scroll{
	  width:92%; 
	 margin-left:4.5%;
  }
  .logo {  
   
   width:40%;
  
  }
  .header-right{
	  width:60%;
  }
  

 .Admission{
	 height:50%;
 }
 .containerMessage{
  width: 50px;
  height: 50px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
}


/*message part*/
/* For message part Use a media query to add a break point at 800px: */
@media screen and (max-width:700px) {
	#topLogo{ 
    margin-left: 23%;
	padding-bottom:0px;
	margin-bottom:0px;
   }
   h2{
	   font-size:12px;
	  padding:0px 0px 0px 0px;
   }
  .card2{
	float:right;
}
.wrapperMessage{
   top: 20%;
  
}

.containerMessage{
  width: 320px;
  height: 150px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.img-container{
  width: 30%;
  height: 100%;
  float: left;
  position: relative;
}

.img-container img{
  width: 100%;
  height: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.content{
  width: 60%;
  height: 100%;
  float: left;
 
  box-sizing: border-box;
}

.head p{
  font-size: 7px;
  color: #444444;
  font-weight:50;
}

.head span{
  color: #aaabaf;
  font-size: 7px;
}

.data{
  width: 100%;
  overflow: hidden;
}

.inner-data{
  width:100%;
  float: left;
  text-align: left;
  color: #aaabaf;
}

.inner-data p{
  font-size: 5px;
   padding : 0;
    margin : 0;
}

.inner-data span{
  font-size: 5px;
  font-weight: 200;
}

.img-container:before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-left: 30px solid #1DA1F2;
  border-right: 30px solid transparent;
  border-top: 30px solid #1DA1F2;
  border-bottom: 30px solid transparent;
  cursor: pointer;
  border-top-left-radius: 5px;
}

.img-container:after{
  font-family: fontawesome;
  content:"\f099";
  position: absolute;
  top: 5px;
 
  color: #fff;
  font-size: 11px;
}


.floating-icon{
  position: absolute;
  width: 50px;
  height: 50px;
  top: 38%;
  right: -5%;
  background: #1DA1F2;
  border-radius: 50%;
  cursor: pointer;
}

.floating-icon .fa{
  position: absolute;
  left: 18px;
  top: 15px;
  color: #fff;
  font-size: 20px;
  transition: all 1s ease;
}

.floating-icon.active .fa{
    transform: rotate(45deg); 
    transition: all 1s ease;
}


.btn.active{
  opacity: 1;
}

}

/*************************    This is for Hospita/home Page  end ************************/
/* nazifa css end */