@media (max-width: 450px) {
    .wrap {
        width: 350px;
        overflow: auto;
        position: relative;
    }
      .wrap2 {
         width: 340px;
        overflow: auto;
        position: relative;
             margin-left: 10px;
    }
       .wrap3 {
         width: 340px;
        overflow: auto;
        position: relative;
    }
     .wrap4 {
        width: 310px;
        overflow: auto;
        position: relative;
    }

    .footertable {
        float: right;
      width: 350px;
        margin-left: 100%;
         overflow: auto;
        position: relative;
    }

    .footertable2 {
        float: right;
        width: 350px;
        margin-left: 100%;
    }
     .box2 {
		 width: 320px;
  height: auto;
	font-size: 14px;
}
          .box3 {
		 width: 320px;
  height: auto;
	font-size: 14px;
	margin: auto;
}
       .displa {
           display: none;
                }
         .fram5 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
      position: fixed;
            z-index: 999;
            margin: 200px auto;
                                top: 0;

}
           .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}
}

@media (min-width:451px) and (max-width:540px) {
    .wrap {
        width: 440px;
        overflow: auto;
        position: relative;
    }
      .wrap2 {
        width: 450px;
        overflow: auto;
        position: relative;
               
    }
        .wrap3 {
        width: auto;
        overflow: auto;
        position: relative;
    }
    .wrap4 {
        width: auto;
        overflow: auto;
        position: relative;
    }

    .footertable {
        float: right;
     width: 500px;
        margin-left: 100%;
    }

    .footertable2 {
        float: right;
        width: 400px;
        margin-left: 100%;
    }
    	 .box2 {
		width: 500px;
	  height: auto;
	font-size: 14px;
		 margin-left: 10px;
}
           	 .box3 {
		width: 400px;
	  height: auto;
	font-size: 14px;
	margin: auto;
}
          .displa {
              display: none;
    }
            .fram5 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
      position: fixed;
            z-index: 999;
            margin: 200px auto;
                                top: 0;

}
              .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}
}


@media (min-width:541px) and (max-width:768px) {
    .wrap {
        width: 530px;
        overflow: auto;
        position: relative;
    }
      .wrap2 {
        width: 550px;
        overflow: auto;
        position: relative;
             }
       .wrap3 {
        width: auto;
        overflow: auto;
        position: relative;
    }
    .wrap4 {
        width: auto;
        overflow: auto;
        position: relative;
    }

    .footertable {
        float: right;
       width: 400px;
        margin-left: 100%;
    }

    .footertable2 {
        float: right;
       width: 600px;
        margin-left: 100%;
    }
    		 .box2 {
		width: auto;
	  height: auto;
	font-size: 14px;
	 margin-left: 30px;
}
                		 .box3 {
			width: 600px;
	  height: auto;
	font-size: 14px;
	margin: auto;
}
               .displa {
                   display: inline-block;
    }
                    .fram5 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
       position: fixed;
            z-index: 999;
            margin: 200px auto;
                                top: 0;
}
                      .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}
}



@media (min-width:768px) and (max-width:1024px) {
    .wrap {
       width: auto;
        overflow: auto;
        position: relative;
       
    }
     .wrap2 {
       width: auto;
        overflow: auto;
        position: relative;
    }
      .wrap3 {
        width: auto;
        overflow: auto;
        position: relative;
    }
  .wrap4 {
        width: auto;
        overflow: auto;
        position: relative;
    }

    .footertable {
        float: right;
       width: 750px;
        margin-left: 100%;
    }

    .footertable2 {
        float: right;
        width: 600px;
        margin-left: 100%;
    }
    		 .box2 {
		width: auto;
	  height: auto;
	font-size: 14px;
	 margin-left: 70px;
}
              		 .box3 {
			width: 770px;
	  height: auto;
	font-size: 14px;
	margin: auto;
}
               .displa {
              display: inline-block;
    }
                    .fram5 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
    
}
                        .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 130px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}
}

@media (min-width:1025px) and (max-width:1200px) {
      .wrap {
        width: auto;
        overflow: auto;
        position: relative;
    }
         .wrap2 {
                    width: 800px;    
    }

     .wrap3 {
        width: auto;
        overflow: auto;
        position: relative;
    }
     .wrap4 {
        width: auto;
        overflow: auto;
        position: relative;
    }
    .footertable {
        float: right;
        width: 800px; 
        margin-left: 100%;
    }

    .footertable2 {
        float: right;
        width: 500px;
        margin-left: 100%;
    }
    		 .box2 {
		width: auto;
	  height: auto;
	font-size: 14px;
		 margin-left: 70px;
}
              		 .box3 {
			width: 800px;
	  height: auto;
	font-size: 14px;
	margin: auto;
}
               .displa {
               display: inline-block;
    }
                    .fram5 {
		color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
    
}
                       .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 150px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}
}

@media (min-width:1201px) {
    .wrap {
        width: auto;
        overflow: auto;
        position: relative;
    }
      .wrap2 {
                       width: 800px; 
    }

    .wrap3 {
        width: auto;
        overflow: auto;
        position: relative;
    }
    .wrap4 {
        width: auto;
        overflow: auto;
        position: relative;
    }
    .footertable {
        float: right;
           width: 800px; 
        margin-left: 100%;
    }

    .footertable2 {
        float: right;
        width: 500px;
        margin-left: 100%;
    }
    		 .box2 {
		width: auto;
	  height: auto;
	font-size: 14px;
	 margin-left: 70px;
}
              		 .box3 {
		width: 800px;
	  height: auto;
	font-size: 14px;
	margin: auto;
}
               .displa {
             display: inline-block;
    }
                    .fram5 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 100px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
    
}
                                       .fram4 {
	color: #000;
	height: 25px;
	border-radius: 5px;
	width: 150px;
	font-size: 16px;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: 5px;
     
}

}









/* unvisited link */
a:link {
    color: #009933;
    text-decoration: none;
}
/* visited link */
a:visited {
    color: green;
    text-decoration: none;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

.header {
    margin: auto;
    width: 100%;
    height: 65px;
    background-color: #000099;
}

.footer {
    margin: auto;
    width: 100%;
    height: 65px;
    background-color: lightblue;
}
/* invoice footer amount css start */



.tabletd {
    width: 130px;
    text-align: right;
    font-weight: bold;
}

.tabletdd {
    width: 170px;
}

.tabletddd {
    width: 100px;
}
/* invoice footer amount css end */
/* video link change css start */
.grid {
    width: 90%;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.grid-div {
    border: 0px solid black;
    margin: auto;
}

@media screen and (max-width: 1024px) {
    .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .grid {
        grid-template-columns: repeat(1, 1fr);
    }
     .modal
        {
            position: fixed;
            z-index: 999;
            height: 100%;
            width: 100%;
            top: 0;
            background-color: Black;
            filter: alpha(opacity=60);
            opacity: 0.6;
            -moz-opacity: 0.8;
        }
        .center
        {
            z-index: 1000;
            margin: 300px auto;
            padding: 10px;
            width: 130px;
            background-color: White;
            border-radius: 10px;
            filter: alpha(opacity=100);
            opacity: 1;
            -moz-opacity: 1;
        }
        .center img
        {
            height: 128px;
            width: 128px;
        }
       
}