@media only screen and (max-width: 768px) {
    
body {
    box-sizing: border-box;
	background-color: white;
	padding: 0;
	margin: 0;
}


/*part1-bar*/
.col-1 {
    width: 100%;
	height:40px;
	background-color:red;
  	color:white;
  	
	}
.col-1 img{
	width:150px;
	height:40px;

	}
	
.out {
    
    float:right;
    margin:3px 10px 0 0;
    font: bold 15px 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 a {
  position: fixed; /* Position them relative to the browser window */
  right: -95px; /* Position them outside of the screen */
  transition: 0.3s; /* Add transition on hover */
  padding: 15px; /* 15px padding */
  width: 100px; /* Set a specific width */
  text-decoration: none; /* Remove underline */
  font-size: 20px; /* 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 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 {
  bottom: 20px;
  background-color: #c232b8; /* Light Black */
  position:fixed;
   opacity:0.7;
}
#all {
  bottom: 80px;
  background-color: #dae364; /* Light Black */
  position:fixed;
   opacity:0.7;
}

#about {
  bottom: 140px;
  background-color: #4CAF50;
  position:fixed;
  opacity:0.7;
}

#blog {
  bottom: 200px;
  background-color: #2196F3; /* Blue */
  position:fixed;
   opacity:0.7;
}

#projects {
  bottom: 260px;
  background-color: #f44336; /* Red */
  position:fixed;
   opacity:0.7;
}

#contact {
  bottom: 320px;
  background-color: #555; /* Light Black */
  position:fixed;
   opacity:0.7;
}

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

}

.col-3 {
    	
     width: 80%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:355px;
	overflow: auto;
	}
.col-3a {
    	
     width: 80%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:235px;
	overflow: auto;
	}
.col-3b {
    	
     width: 95%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:450px;
	overflow: auto;
	}
.col-3c {
    	
     width: 80%;
	display: block;
   	margin-left: auto;
  	margin-right: auto;   
  	margin-top: 10px;
    background-color: white;
    color: black;
	height:550px;
	overflow: auto;
	}
.col-4 {
        width: 80%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 15px;
	    height:100px;
	    border: 1px solid #ffe6ea;
	    margin:5px 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:center;
	    margin-left: auto;
  	    margin-right: auto;  
}
.col-4a {
        width: 90%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 20px;
	    height:400px;
	    border: 1px solid #ffe6ea;
	    margin:5px 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:left;
	    margin-left: auto;
  	    margin-right: auto;  
  	    position: relative;
}

.col-4b {
        width: 90%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 20px;
	    height:150px;
	    border: 1px solid #ffe6ea;
	    margin:5px 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:left;
	    margin-left: auto;
  	    margin-right: auto;  
}
.col-4b2 {
        width: 90%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 20px;
	    height:100px;
	    border: 1px solid #ffe6ea;
	    margin:5px 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:left;
	    margin-left: auto;
  	    margin-right: auto;  
}
.col-4c {
        width: 90%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 20px;
	    height:200px;
	    border: 1px solid #ffe6ea;
	    margin:5px 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:right;
	    margin-left: auto;
  	    margin-right: auto;  
}
.col-4d {
        width: 90%;
    	background-color: white;
    	border-radius: 10px 10px 10px 10px;
        color:black;
        font-weight:bold; 
	    font-size: 20px;
	    height:300px;
	    border: 1px solid #ffe6ea;
	    margin:0 0 5px 0px;
	    padding:5px 5px 5px 15px;
	    text-align:right;
	    margin-left: auto;
  	    margin-right: auto;  
}
.col-5 {
    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 input {
	margin: 10px 10px 10px 10px;
	padding: 5px 10px;
	font-size: 16px;
	border-radius: 5px;
	border: 1px solid black;
	color: grey;
	background: white;
	width:87%;
}

.col-6 label {
	display:block;
	text-align: left;
	margin: 10px 10px 0 10px;
	font-weight:bold; 
    color:black;
}

a.fillthediv{
display:block;
height:100%;
width:100%;
text-decoration: none;}



a.fillthediv :hover {
   background-color: #ffe6ea;
   color: white;

}
.fulldivp

{

padding: 5 0 5 0; 
margin:0 0 0 0;}




/*part4-button*/
.enter {
  font-size:15px;
  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;
}
.enter2 {
  font-size:15px;
  float: center;

  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:50%;
   text-align:center;
   border-radius: 10px 10px 10px 10px;
}

.enter3 {
  font-size:25px;
  float: right;
  margin-right:10px;
 
}

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

.back2 {
    font: bold 40px Arial;
    bottom: 80px;
    right: 20px;
    position:fixed;
     z-index:99;
}




.video{

   
    width:90%;
    height:315px;
   
    z-index:5;
}
.video2{
    
    float:left;
    width:50%;
    height:150px;
    
    
}
.cover{
  width:100%;
  display: block;
  height:55px;
 background-color:white;
}
.selection{
	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;
}



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

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  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 {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #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 {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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