*{
    margin:0;
}
/*this is the css for the nav bar*/
.navbar{
    margin-top: 1%;
    margin-left: 80%;
    position: fixed;
    z-index: 999;
}

.drop {
    display: inline-block;
    z-index: 999;
    border: 10px solid black;
    border-radius: 50%;
}
/*this makes the dropdown menu works*/
.drop:hover .list {
    display: block;
    transition: 2s;
    z-index: 999;
    
}

.list {
    display: none;
    position: fixed;
    background-color: rgba(0,0,0,0);
    min-width: 160px;
    z-index: 999;
    
}

  .list a {
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
    z-index: 999;
}

.list a img{
    border: 2px solid red;
    border-radius: 50%;
    margin: -5px;
}

.list a img:hover {
    background-color: rgba(255,255,255,0.9);
}
/*nav bar ends here*/
    
footer{
    display:flex;
    flex-direction: row;
    justify-content: center;
    background-color: black;
}
 


.slide{
    position: absolute;
    top:1100px;
    width:100%;
    
    
 }
/*slide css*/
.slideShow{
        
    position: absolute;
    height: 600px;
    width:100%;
    box-shadow: 2px 5px 6px 3px rgba(0,0,0,.8);
    z-index: 0;
    }    
    
}
    
  .header{
    height:100px;
    }

/*modal starts here*/

 .specs:target {
        opacity:1;
        pointer-events: auto;
}
/* when opening modal*/
    .specs {
	position: fixed;
	font-family:'ComicBook';
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(255,0,0,0.8);
	z-index: 9;
	opacity:0;
	transition: opacity 400ms ease-in;
	pointer-events: none;
    
}
/*text inside modal*/
   #text2{
    color:white;
       text-align: justify;
    }
    
span{
    color:red;
}
/*this is the image inside the modal*/
#modalImage{
    float: right;
}
    .specs > div {
	width: 800px;
    height: 450px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: black;
}
/*    this is the closing button to close the modol*/
    .closePage {
	background: red;
	color: white;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	border-radius: 12px;
	box-shadow: 1px 1px 3px black;
}

   .close:hover { background: black; }



   @media only screen and (max-width: 767px) {
    
        .navbar{
            margin-top: 3%;
            margin-left: 65%;
            position: fixed;
            z-index: 9;
            height:50px;
        }
        #nav-head{
            width:60px;
        }
        #nav-child-head{
            width:50px;
        }
        .drop {
             z-index: 9;
            list-style: none;
            
        }
        
        .drop:hover .list { 
            display: block;
            transition: 2s;
            z-index: 9;
        }
        
        .list {
            display: none;
            position: fixed;
            background-color: rgba(0,0,0,0);
            min-width: 160px;
            z-index: 9;
            margin-left:-15%;
            
        }
        
          .list a {
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            text-align: center;
            z-index: 9;
        }
        
        .list a img{
            border: 2px solid red;
            border-radius: 50%;
            margin: -5px;
        }
        
        .list a img:hover {
            background-color: rgba(255,255,255,0.9);
        }
    
      body{
          display:flex;
          flex-direction: column;
          justify-content: center;
    
      }
      footer{
          display:flex;
          flex-direction: row;
          justify-content: center;
          width:100%;
      }
      #bg{
        display:flex;
        width:100%;
        background-color: rgba(255,0,0,.5);
    }
    header{
        background-color: black;
        width: 100%;
        height: 600px;
    }
    .slideShow{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    
    }