/* Author:Nazifa Mosharrat
	Id:51914
	Start-date:24/2/2020 
   */

/*************************    This is for Project/Medical Collage Page   ************************/


* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  scroll-behavior: smooth;
  font-family: 'Noto Serif', serif;
}

#topLogoName{padding:0px 0px 0px 0px;margin:0px 0px 0px 0px;float:left;}


/*********Latest news******************/


.onoffswitch3
{
    position: relative; 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}

.onoffswitch3-checkbox {
    display: none;
}

.onoffswitch3-label {
    display: block; overflow: hidden; cursor: pointer;
    border: 0px solid #999999; border-radius: 0px;
}

.onoffswitch3-inner {
    display: block; width: 200%; margin-left: -100%;
    -moz-transition: margin 0.3s ease-in 0s; -webkit-transition: margin 0.3s ease-in 0s;
    -o-transition: margin 0.3s ease-in 0s; transition: margin 0.3s ease-in 0s;
}

.onoffswitch3-inner > span {
    display: block; float: left; position: relative; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font-size: 20px; color: white; font-family: 'Montserrat', sans-serif; font-weight: bold;
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}

.onoffswitch3-inner .onoffswitch3-active {
    padding-left: 10px;
    background-color: #EEEEEE; color: #FFFFFF;
}

.onoffswitch3-inner .onoffswitch3-inactive {
    width: 100px;
    padding-left: 16px;
    background-color: #27A1CA; color: #FFFFFF;
    text-align: right;
}

.onoffswitch3-switch {
    display: block; width: 50%; margin: 0px; text-align: center; 
    border: 0px solid #999999;border-radius: 0px; 
    position: absolute; top: 0; bottom: 0;
}
.onoffswitch3-active .onoffswitch3-switch {
    background: #27A1CA; left: 0;
    width: 160px;
}
.onoffswitch3-inactive{
    background: #A1A1A1; right: 0;
    width: 20px;
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {
    margin-left: 0;
}

.glyphicon-remove{
    padding: 3px 0px 0px 0px;
    color: #fff;
    background-color: #000;
    height: 25px;
    width: 25px;
    border-radius: 15px;
    border: 2px solid #fff;
}

.scroll-text{
    color: #000;
}

/*for place on the top of the video*/

#latest{
	z-index:1;
    position: absolute;
    top: 0;
	left:0;

    width: 100%;
	
	}
/*********Latest news End******************/
/*header card after the cover video*/
#action-style-box{
	 border: 1px;
	padding: 8px;
/*-webkit-box-shadow: 5px 5px 22px -5px #B8BEC1; 
box-shadow: 5px 5px 22px -5px #B8BEC1;*/
box-shadow: 0 8px 6px -6px black;

}
.action-title{
	font-size:20px;
	padding-left:2%;
	font-style:bold;
}
.slide-sub-title{
	font-size:40px;
}

/*video of the top or header*/
.header-container-video{
	width :100%;
	height:50%;
	border-left:none;
	border-right:none;
	position:relative;
	padding:23%;
	margin-bottom:12%;
	
}
.video-container{
	position:absolute;
	top:0%;
	left:0%;
	height:40%;
	width:100%;
	
}

video:{
	position:absolute;
	z-index:-1;
	opacity:0.78;/*for transparent*/
	width:100%;
	
}

/* 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: 28%;
  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;
}


/* for all card-header*/
.card-header{
			background-color:#66a3ff;
			}
			



/*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*/
#map {
  height: 300px;
  width: 150%; 
  }
  @media (max-width: 767.98px) {
    #map {
      height: 150px; } }

/* 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: */


/* 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;
  }
}

@media screen and (max-width:500px) {

.slide-sub-title{
	font-size:20px;
}

  
  .scroll{
	  width:90%; 
	  padding-top:0px 0px 0px 0px;
	 
  }
  
  
  #topLogo {  
   
   width:100%;
   height:1%;
   padding:0px 0px 0px;
  
  }
 
   h2{
	   font-size:12px;
	  padding:0px 0px 0px 0px;
   }
   

 /*top header contact*/

 .headerContact{
	 float: left;
  width: 33.33%;
  margin-right:16%;
 
  }
 .topContact{
	 content: "";
  display: table;
  clear: both;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  width:100%;
   
 }
.button {
  background-color: #black;
  border: none;
  color: white;
  padding: 15px 42px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
#menu_bar_block{
	height:50%;
}
 .Admission{
	 height:50%;
 }

/*video of the top or header*/
.header-container-video{
	width :100%;
	height:50%;
	border-left:none;
	border-right:none;
	position:relative;
	padding:6%;
	margin-bottom:12%;
	
}
#static_Header{
	margin-top:30%;
	size:20px;
}
.action-title{
	font-size:15px;
	padding-left:2%;
	font-style:bold;
}
.button {
  background-color: #FFFFFF;
  border: none;
  color: black;
  padding: 5px 5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
}