body {
  background-color: #FFFFCC;
  font-family: Tahoma, Verdana, sans-serif;
}


 navbar {
   margin-bottom: 0;
   border-radius: 0;
   overflow: hidden;
	background-color: #FFFFCC; 
    }
navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

  row content {height: 450px}
    
   sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }
    
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }
	
 @media screen and (max-width: 767px) {
       sidenav {
        height: auto;
        padding: 15px;
      }
    }
 navbar-brand {
    position: relative;
    background: url(images/1.png);
    width: auto;
    left: auto;
}
 table, th, td {
    border: 2px solid gray;
	text-align: center;
	font-size: 100%;
	width: 90%;
	background: lightgrey;
	margin-left: auto;
	margin-right: auto;
}
div {font-size: medium;
	margin: auto;
    width: 100%;
    padding: 0px;
	}
 .jumbotron {
	padding:30px 0 30px 0;
	height: 200px;
	position: relative;
	display: flex;	
	color: yellow;
	background: url(images/1.png) center;
	background-color: rgb(240, 240, 240);
	background-size: cover;
	margin: 0px 0px;
    width: 100%;
        }
.img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
	align-items: center;
	text-align: center;
	}
.button{
  background-color: blue; /* Blue */
  border: none;
  color: white;
  padding: 12px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 4px 2px;
  cursor: pointer;
  width: auto;
}
 .button1 {width: 100%;
 width: auto;
 }
 .button2 {width: 100px;
 }

modal modal-alert modal-dialog modal-content {
  border-radius: 6px;
  padding: 20px;
}
 modal modal-alert  modal-dialog  modal-content  modal-header {
   padding:9px 15px;
    border-bottom:1px solid #eee;
    background-color: #8080ff;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
     border-top-left-radius: 6px;
     border-top-right-radius: 6px;
}
 modal modal-alert  modal-dialog  modal-content   modal-body {
  padding: 10px 20px;
}
  modal  modal-alert   modal-dialog   modal-content   modal-footer {
  padding-top: 10px;
}
/* Tooltip */
   .my +  .tooltip >  .tooltip-inner {
    background-color: #56237f; 
    color: white; 
    border: 2px solid #56237f; 
    padding: 5px;
    font-size: 16px;
	max-width: 600px;
	}
.center {
    text-align: center;
	align-items: center;
	padding: 10px;
}

#main {
width: 90%;
max-width: 950px;
border: 1px gray solid;
margin: auto;
padding: 10px;
background-color: white;
border-radius: 10px;
}

label {
display: block;
}

input {
width: 30px;
margin-left: 20px;
font-size:120%;
}
h1 {
  color: navy;
  margin-left: 20px;
}
h2 {
clear: both;
padding-top: 20px;
font-size:150%;
}

h4 {
clear: both;
padding-top: 20px;
font-size:135%;
}
li {
  font-size:130%;
}
p {
  font-size:130%;
}

hr.new1 {
  border-top: 2px solid grey;
}

 responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
}
 container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.pagination {
  display: inline-block;
}

.pagination a {
  background-color: white;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
  margin: 0 4px;
}

.pagination a.active {
  background-color: #4CAF50;
  color: white;
  border: 1px solid #4CAF50;
}

.pagination a:hover:not(.active) {background-color: #ddd;}

.accordion {
  background-color: lightblue;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.1s;
     
}

.active, .accordion:hover {
  background-color: #ccc; 
}

.panel1 {
  padding: 0 18px;
  display: none;
  background-color: lightgrey;
  overflow: hidden;
}
.panel2 {
  padding: 0 18px;
  display: none;
  background-color: lightgrey;
  overflow: hidden;
}

#parent {
    width: 30%;
    margin: 0 auto;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  justify-items: center;
  align-items: center;
  grid-gap: 5px;
}

.flip-card {
  border-style: hidden;
  background-color: transparent;
  width: 250px;
  height: 250px;
  perspective: 1000px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 1.9s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 90%;
  height: 90%;
  backface-visibility: hidden;
}

.flip-card-front {
  background-color: #ffffc0;
  color: black;
}

.flip-card-back {
  background-color: rgb(206, 25, 255);
  color: white;
  transform: rotateY(180deg);
}
.danger {
  background-color: #ffdddd;
  border-left: 6px solid #f44336;
}

.success {
  background-color: #ddffdd;
  border-left: 6px solid #04AA6D;
}

.info {
  background-color: #e7f3fe;
  border-left: 6px solid #2196F3;
}


.warning {
  background-color: #ffffcc;
  border-left: 6px solid #ffeb3b;
}
-----

p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: yellow;
  padding: 50px;
  font-size: 20px;
}
.coupon {
  border: 2px solid black;
  width: 90%;
  border-radius: 10px;
  margin: 0 auto;
  max-width: auto;
}
.container1 {
  padding: 2px 16px;
  background-color: #ccccff;
}

figure img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
