@media only screen and (min-width: 768px) {
    body {
    box-sizing: border-box;
	background-color: white;
	padding: 0;
	margin: 0;
	font-size: 30px;
}
    /*part1-bar*/
.fb-d {
    width: 100%;
	height:150px;
	background-color:white;
    float:left;
  	margin:15px 0 0 120px;
	}
.col-1-d {
    width: 100%;
	height:100px;
	background-color:red;
  	color:white;
  	
	}

.col-1-d img{
	width:200px;
	height:100px;

	}

.out-d {
    
    float:right;
    margin:25px 10px 0 0;
    font: bold 25px Arial;
    text-decoration: none;
    background-color: red;
    color: white;
    padding: 5px 6px 2px 6px;
   display:inline-block;
   width:10%;
   text-align:center;
  
}
/*part2-side*/

.mySidenav-d a {
  position: fixed; /* Position them relative to the browser window */
  right: -30px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 200px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 30px; /* Increase font size */
  color: white; /* White text color */
  border-radius: 5px 0 0  5px ; /* Rounded corners on the top right and bottom right side */
}

.mySidenav-d a:hover {
  right: 0; /* On mouse-over, make the elements appear as they should */
}

/* The about link: 20px from the top with a green background */
.message-d {
  top: 620px;
  background-color: #c232b8; /* Light Black */
  position:fixed;
   opacity:0.7;
}
.all-d {
  top: 550px;
  background-color: #dae364; /* Light Black */
  position:fixed;
   opacity:0.7;
}

.about-d {
  top: 480px;
  background-color: #4CAF50;
  position:fixed;
  opacity:0.7;
}

.blog-d {
  top: 410px;
  background-color: #2196F3; /* Blue */
  position:fixed;
   opacity:0.7;
}

.projects-d {
  top: 340px;
  background-color: #f44336; /* Red */
  position:fixed;
   opacity:0.7;
}

.contact-d {
  top: 270px;
  background-color: #555; /* Light Black */
  position:fixed;
   opacity:0.7;
}

/*part3-body*/


.col-2-d {
	
	width: 100%;		
	background: white;
	position: fixed;
	top: 50%;
 	left: 50%;
  /* bring your own prefixes */
	transform: translate(-50%, -50%);

}
.col-3a-d {
    width: 90%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:300px;
	overflow: auto;
	}

.col-3-d {
    	font-size: 30px;
     width: 90%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:600px;
	overflow: auto;
	
	}
.col-3c-d {
    	font-size: 30px;
     width: 90%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:1000px;
	overflow: auto;
	
	}
	
.col-4-d {
        width: 25%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 30px;
	    height:200px;
	    border: 1px solid pink;
	    margin:10px 10px 10px 10px;
	    padding:10px 10px 10px 10px;
	    float:left;
	    text-align:center;
}

.col-4a-d {
       
        width: 25%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 30px;
	    height:400px;
	    border: 1px solid pink;
	    margin:20px 20px 20px 20px;
	    padding:10px 10px 10px 10px;
	    float:left;
	    text-align:center;
  	     position: relative;
}
.col-4d-d {
       width: 30%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 30px;
	    height:300px;
	    border: 1px solid pink;
	    margin:0 20px 20px 20px;
	    padding:10px 10px 10px 10px;
	    float:left;
	    text-align:center;
}

.col-4e-d {
       
        width: 20%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 30px;
	    height:500px;
	    border: 1px solid pink;
	    margin:20px 20px 20px 20px;
	    padding:10px 10px 10px 10px;
	    float:left;
	    text-align:center;
  	     position: relative;
}
.video-d{

   
    width:80%;
    height:500px;
    margin-left: auto;
  	margin-right: auto; 
}
.cover-d{
width:100%;
  display: block;
  height:100px;
 background-color:white;
    
}
.video3-d{
margin-left: auto;
  	margin-right: auto; 
   
    width:60%;
    height:700px;
    z-index:5;
    
}

.col-5-d {
    width: 70%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 20px ;
  	margin-bottom: 20px ;
    background-color: white;
    color: black;
	height:350px;
	overflow: hidden;
    

}

.col-6-d input {
	margin: 10px 10px 10px 10px;
	padding: 5px 10px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid black;
	color: grey;
	background: white;
	width:30%;
	
}

.col-6-d label {
	display:block;
	text-align: left;
	margin: 10px 10px 0 10px;
	font-weight:bold; 
    color:black;
}
/*part4-button*/
.enter-d {
  font-size:25px;
  float: center;
  margin-right:10px;
  text-decoration: none;
  background-color: red;
  color: white;
  padding: 5px 6px 2px 6px;
  border-top: 1px solid #CCCCCC;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #CCCCCC;
   height:30px;
   display:inline-block;
   width:20%;
   text-align:center;
   border-radius: 10px 10px 10px 10px;
}

.back-d {
    font: bold 60px Arial;
    bottom: 40px;
    right: 20px;
    position:fixed;
     z-index:99;
}

.back2-d {
    font: bold 60px Arial;
    bottom: 140px;
    right: 20px;
    position:fixed;
     z-index:99;
}


.selection-d{
	font-weight:bold;
	font-size: 16px;
	color: black;
	background: white;
	border: 1px solid black;
    width:50%;
    margin-left:10px;
    margin: 10px 10px 10px 10px;
	padding: 5px 10px;
	border-radius: 5px;
}

.selection2-d{
	font-weight:bold;
	font-size: 16px;
	color: black;
	background: white;
	border: 1px solid black;
    width:30%;
    margin-left:10px;
    margin: 10px 10px 10px 10px;
	padding: 5px 10px;
	border-radius: 5px;
}


.col-7-d {
    width: 43%;
	height:800px;
    float:left;
  	padding: 50px 30px 50px 30px;
	font-size:30px;}	


#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal-d {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content-d {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 1000px;
}



/* Add Animation */
.modal-content-d, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close-d {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close-d:hover,
.close-d:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
}