<style type="text/css">
@media screen and (max-width:768px)
{
body
{
margin:0px;
font-size:15px;
}
#tdiv
{

width:80%;
margin-left:0px;
min-width:600px;
}
#rtab
{
width:100%;
margin-left:0px;

}
#rtab tr
{
width:50px;
font-size:12px;
}
select
{
width:100%;
}

}

@media 
only screen and (max-width: 560px),
(min-device-width: 568px) and (max-device-width: 1024px)  {
			html {
    overflow-x: hidden;
	
}
body
{
background-color:none;
}

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block;
	background-color:#9BBAD2;
		color:black;
		border:none;
		
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr 
	{ 
	  border: 1px solid #ccc;
	}
	
	td { 
		/* Behave  like a "row" */
		border: none;
		/*border-bottom: 1px solid #eee;*/ 
		position: relative;
		padding-left: 10%;
		
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 40%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
#educ
{
display:block;
padding:10px;
width:350px;
	
}
input
{
width:100%;
max-width:250px;
}
input[name="gender"]
{
width:100%;
max-width:50px;
}
}
/* simple Css  */
html
{
overflow-x:hidden;
}


#rtab td
{
font-size:16px;
color:#51A2D9;
padding-left:20px; 
}
button
{
width:100%;
max-width:150px;
padding:5px;
background-color:#285caf;
color:white;
border-radius:5px;
cursor:pointer;
font-size:15px;
transition-duration:0.5s;
}
button:hover
{
background-color:white;
color:black;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
#rtab
{
margin-top:0px;
width:100%;
max-width:675px;

height:auto;
margin-left:20px;
border-collapse: collapse;
background-color:#dde6ee;
color:white;
margin:0px auto; 
}
#rrtab
{
	
}
#rtab th
{
background-color:#285caf;
color:white;
}
#educ
{
border:1px solid black;
width:100%;
height:auto;
max-width:400px; 
/*border-collapse: collapse;*/
}
div#header
{
font-size:30px;
text-align:center;
text-transform:capitalize;
background-color:#315475;
color:white;
width:100%;
top:0px;
left:0px;
position:absolute;
padding:10px;
height:auto;
}
div#footer
{
font-size:20px;
text-transform:capitalize;
background-color:#315475;
color:white;
position:relative;
width:100%;
left:0px;
bottom:0px;
padding:6px;


}

textarea
{
font-size:15px;
}
/*for skills */
    .multiselect {
        width: 200px;
	
    }
    .selectBox {
        position:relative;
		
    }
    .selectBox select {
        width: 100%;
        /*font-weight: bold;*/
		
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
		
    }
    #checkboxes {
        display: none;
        border: 1px #dadada solid;
		
    }
    #checkboxes label {
        display: block;
		
    }
    #checkboxes label:hover {
        background-color: #1e90ff;
    }
	/*for hobbies */
	 .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
		
    }
    .selectBox select {
        width: 100%;
        /*font-weight: bold;*/
		
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
		
    }
    #checkboxes1 {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes1 label {
        display: block;
    }
    #checkboxes1 label:hover {
        background-color: #1e90ff;
    }
	/*for exp. */
	 .multiselect {
        width: 200px;
    }
    .selectBox {
        position: relative;
    }
    .selectBox select {
        width: 100%;
        /*font-weight: bold;*/
    }
    .overSelect {
        position: absolute;
        left: 0; right: 0; top: 0; bottom: 0;
    }
    #checkboxes2 {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes2 label {
        display: block;
    }
    #checkboxes2 label:hover {
        background-color: #1e90ff;
    }
	/*#checkboxes3 {
        display: none;
        border: 1px #dadada solid;
    }
    #checkboxes3 label {
        display: block;
    }
    #checkboxes3 label:hover {
        background-color: #1e90ff;
    }*/
	#main {
    width:100%;
    height:auto;
    max-width:400px;
    text-align:justify;
    margin-bottom:15px;
}
	#right_part {
   
	width:150px;
    float:left;
   
	display:inline-block
}
#left_part {
    
    float:left;
   
	width:150px;
    display:inline-block;
}

lable
{
width:100%;

}
textarea
{
width:100%;
height:auto;
max-width:300px;
background-color:#B9E5F3;
}
input:hover
{
border-color:#315475;
}
textarea:hover
{
border-color:#315475;
}
select:hover
{
border-color:#315475;
}
input
{
font-size:15px;
background-color:#B9E5F3;
}
select
{
font-size:15px;
background-color:#B9E5F3;
}


/* for tooltip*/
/*
@font-face {
font-family: 'DevLys 010';
src:local('DevLys 010'), url('fontfamily/DevLys_010.ttf') 
format('truetype');
}*/


.tooltip {
    position: relative;
    display: inline-block;
   
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: white;
    color: black;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
	/*font-family: 'DevLys 010';*/
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
	font-family: 'DevLys 010';
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

.required
{
color:red;
}
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
	padding-left:7px; 
}
#myImg1 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg2 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg3 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg4 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}
#myImg5 {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}
#myImg1: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(197, 194, 194, 0.9); /* Black w/ opacity */
	
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
	
}


@-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: black;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>