/*   address box style */


.card {
    width: 300px;
    height: 420px;
  /*   margin-top: 40px;
    margin-left: 150px; */
    justify-self: center;
    position: relative;
    border-radius: 2px;
    background-color: #f9f9f9;
    box-sizing: content-box;
    display: grid;
    justify-content: center;
    align-content: center;
  }
  .card::after,
  .card::before {
    content: "";
    width: 300px;
    height: 400px;
    position: absolute;
    top: 0;
    left: 0;
    background: radial-gradient(circle, #33f553 50%, transparent 50%),
      radial-gradient(circle, #3396f5 50%, transparent 50%);
    background-size: 20px 20px;
  }
  .card::before {
    top: 10px;
    background-repeat: repeat-y;
    background-position: -4% 0%, 104.2% 0;
  }
  .card::after {
    width: 280px;
    height: 420px;
    left: 10px;
    background-repeat: repeat-x;
    background-position: 0% -3%, 0% 103%;
  }


.center-text{text-align:center;}



 .portfolio-media:hover img 
 {
 transform:scale(0.9);
 -webkit-transform:scale(0.9);
 -moz-transform:scale(0.9);
 -ms-transform:scale(0.9);
 -o-transform:scale(0.9)
 }



 
/*------------------------------------productname--------------------------*/

.productname {
  border-radius: 10px;
  margin-top:1em;
  font-family:monospace;
  border: none;
  font-weight: 800;

  text-align: center;
  font-size: 18px;
  padding: 10px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  position:relative;
  background-color:#283A90		;


} 



.productname:hover {
  background-color:#05668d;
  box-shadow: #35af8a;

}




  /*----- all side shadow


   box-shadow:2px 2px 10px 10px greenyellow;
-webkit-box-shadow:2px 2px 10px 10px green;
-moz-box-shadow:2px 2px 10px 10px green; 

-----*/




.productname1 {
  border-radius: 10px;
  margin-top:1em;
  font-family:'Courier New', Courier, monospace;
  border: none;
  color: #000080;
  text-align: center;
  font-size: 20px;
  padding: 10px;
  width: 100%;
  transition: all 0.5s;
  cursor: pointer;
  position:relative;
 
  text-transform: uppercase;
  font-weight:bold;
  background: #eee center no-repeat;


} 
.page-section{margin-top: -0.85em;}
page-section1{margin-top: 2em;}

.productname1:hover {
  background-color:#426F42;
  background-image: radial-gradient(#f2f2f2 5%, #ccff66 15%, #b3ffb3 60%);



  
}

/*------product head image*/

.producthead {

  background-image: url(images/productpage.jpg)
}

.address-back{
  background: white center no-repeat;
  background-image: radial-gradient(#a1f442 5%, #41f480 15%, #39e5c3 60%);

}

.margintop{
  margin-top:2em
}

.list-numbered {
  list-style: none;
  margin-left: 1em;
  counter-reset: line;
}

.list-numbered > li {
  position: relative;
  margin-bottom: 1.5em;
}

.list-numbered > li:before {
	position: absolute;
	left: -2.25em;
	display: inline-block;
  width: 22px;
	height: 22px;
	margin-right: 0.5em;
  background-color: #b4d455;
	border-radius: 50%;
	color: #fff;
	text-align:center;
  line-height: 1.25em;
	counter-increment: line;
	content: counter(line);
}
.description{
  font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
  text-align: justify;


}
.description h2{ color:#001a66;
  font-family:sans-serif;
 
  font-size: 20px;
  font-weight: bold;
}
.description p{ font-family: Arial, Helvetica, sans-serif;}

.description h3{
  font-size:25px;
  color:  #d80909;
  font-family: Philosopher;
font-weight: bold;

}
.description h4{
  font-size:16px;
  color:  #660066;
  font-family:sans-serif;
font-weight: bold;

}


.fa-play-circle {color:green;
font-size:20px;


;

}
.btn-primary {background-color: white; 
  
  border: 2px solid #4CAF50;
  padding: 10px;
  margin-left: 2em;
  float:left;
  float: left;
  margin-top:1em;
  font-weight: 300;
  font-family:monospace;
  border-radius: 25%;
  color:black;

}

.btn-primary:active { color:white;
background-color: green;}

.btn-primary:after{
  background-color: #660066;
}


.filter-button {
  background-color: white; 
  color: black; 
  border: 2px solid #4CAF50;
  padding: 10px;
  float:left;
  margin-left:2em;
  float: left;
  margin-top:1em;
  font-weight: 300;
  font-family:monospace;
  border-radius: 25%;
}

.filter-button:active{

  background-color: #f48042;
}

.filter-button1{
  background-color:	 #4CAF50;
  color: black; 
  border: 2px solid #4CAF50;
  padding: 10px;
  color:white;
  font-weight: bold;
  margin-left: 2em;
  margin-top:1em;
  font-family: 'Open Sans', sans-serif;
  border-radius: 25%;
  float: left;

}



.icon{
  background-image: url(images/icon.png)
}







@media only screen and (max-width: 700px) {

  .productname1 { font-size:20px;}
}


@media only screen and (max-width: 580px) {

  .productname1 { font-size:18px;}
}
@media only screen and (max-width: 450px) {

  .productname1 { font-size:13px;}
}

.description list-style-2 {
  padding: 5px;
  border: #001a66 solid;
  backgroun-colo:red;
}


.breadcrumb1{

margin-top:3em;
}



/*table style*/




.responsive-table {
  width: 100%;
  margin-bottom: 1.5em;
}
@media (min-width: 48em) {
  .responsive-table {
    font-size: .9em;
  }
}
@media (min-width: 62em) {
  .responsive-table {
    font-size: 1em;
  }
}
.responsive-table thead {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
@media (min-width: 48em) {
  .responsive-table thead {
    position: relative;
    clip: auto;
    height: auto;
    width: auto;
    overflow: auto;
  }
}
.responsive-table thead th {
  background-color: #1d96b2;
  border: 1px solid #1d96b2;
  font-weight: normal;
  text-align: center;
  color: white;
}
.responsive-table thead th:first-of-type {
  text-align: left;
}
.responsive-table tbody,
.responsive-table tr,
.responsive-table th,
.responsive-table td {
  display: block;
  padding: 0;
  text-align: left;
  white-space: normal;
}
@media (min-width: 48em) {
  .responsive-table tr {
    display: table-row;
  }
}
.responsive-table th,
.responsive-table td {
  padding: .5em;
  vertical-align: middle;
}
@media (min-width: 30em) {
  .responsive-table th,
  .responsive-table td {
    padding: .75em .5em;
  }
}
@media (min-width: 48em) {
  .responsive-table th,
  .responsive-table td {
    display: table-cell;
    padding: .5em;
  }
}
@media (min-width: 62em) {
  .responsive-table th,
  .responsive-table td {
    padding: .75em .5em;
  }
}
@media (min-width: 75em) {
  .responsive-table th,
  .responsive-table td {
    padding: .75em;
  }
}
.responsive-table caption {
  margin-bottom: 1em;
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 48em) {
  .responsive-table caption {
    font-size: 1.5em;
  }
}
.responsive-table tfoot {
  font-size: .8em;
  font-style: italic;
}
@media (min-width: 62em) {
  .responsive-table tfoot {
    font-size: .9em;
  }
}
@media (min-width: 48em) {
  .responsive-table tbody {
    display: table-row-group;
  }
}
.responsive-table tbody tr {
  margin-bottom: 1em;
  border: 2px solid #1d96b2;
}
@media (min-width: 48em) {
  .responsive-table tbody tr {
    display: table-row;
    border-width: 1px;
  }
}
.responsive-table tbody tr:last-of-type {
  margin-bottom: 0;
}
@media (min-width: 48em) {
  .responsive-table tbody tr:nth-of-type(even) {
    background-color: rgba(94, 93, 82, 0.1);
  }
}
.responsive-table tbody th[scope="row"] {
  background-color: #1d96b2;
  color: white;
}
@media (min-width: 48em) {
  .responsive-table tbody th[scope="row"] {
    background-color: transparent;
    color: #5e5d52;
    text-align: left;
  }
}
.responsive-table tbody td {
  text-align: right;
}
@media (min-width: 30em) {
  .responsive-table tbody td {
    border-bottom: 1px solid #1d96b2;
  }
}
@media (min-width: 48em) {
  .responsive-table tbody td {
    text-align: center;
  }
}
.responsive-table tbody td[data-type=currency] {
  text-align: right;
}
.responsive-table tbody td[data-title]:before {
  content: attr(data-title);
  float: left;
  font-size: .8em;
  color: rgba(94, 93, 82, 0.75);
}
@media (min-width: 30em) {
  .responsive-table tbody td[data-title]:before {
    font-size: .9em;
  }
}
@media (min-width: 48em) {
  .responsive-table tbody td[data-title]:before {
    content: none;
  }
}

/* table style end*/