@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.img__description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  color: brown;
  visibility: hidden;
  opacity: 0;

  transition: opacity .2s, visibility .2s;
}

.myDIV:hover .img__description {
  visibility: visible;
  opacity: 1;
}


.tooltip {
  position: relative;
  display: inline-block;

}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;


  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}

.bg-image
{

  height: 30%;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


.img1 { background-image: url("img/12.gif");

 margin-left: auto;
  margin-right: auto;
  width: 100%;

}





.bg-text {
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0, 0.4); /* Black w/opacity/see-through */
  color: white;
  font-weight: bold;
  font-size: 40px;
  border: 20px solid #f1f1f1;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 300px;
  padding: 20px;
  text-align: center;
}










.flex-container {
    display: flex;
    justify-content: space-between;
}

.flex{
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
    width: 140px;

}

.flex:hover{
    opacity: 0.4;
}

.flex .fa{
    font-size: 40px;
    color: rgb(255,0,0);

}





.myDIV
{
     position:fixed;
    top: 71%;
    left: 20%;
    width:30em;
    height:18em;
    margin-top: -9em; /*set to a negative number 1/2 of your height*/
    margin-left: -15em; /*set to a negative number 1/2 of your width*/


}

/* Popup container */
.popup {
  position: relative;
  display: inline-block;
  cursor: pointer;
  font-weight: bold ;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}


@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

body, html {
  height:100%;
   margin: 0;
  padding: 0;
}
a {
    color: inherit;
    text-decoration: none;
}

.cc{
  background: url('./img/cards.png') 4px 4px no-repeat;
  top:50%;
  display:block;
  border-radius:.2em;border:1px solid #ddd;
  transition:background-color 500ms;
  width:9.15em;
  box-shadow:.07em .07em .1em rgba(50,50,50,.08) inset;
  outline:none;
  transition:border 500ms;
  font-size:2em; 
  padding:.3em;
  padding-left:3em;
  margin:-1em auto 0;
  position:relative; 
  transition:box-shadow 500ms;
  transition:color 600ms;

  position:relative;
}
.cc:focus {
  box-shadow:.05em .05em .25em rgba(50,50,50,.25) inset;
  border:1px solid #e3e3e3;
}
.cc.error {
  border-color: rgb(255, 100, 100);
  box-shadow: .05em .05em .25em rgba(170, 117, 117, .5) inset;
  background-color: rgba(255, 0 , 0 , .3);
  color: rgb(90, 0, 0);
}
.cc.verified {
  border-color:rgb(152, 199, 152);
  background-color: rgba(0, 255, 0, .3);
  box-shadow:.05em .05em .25em rgba(0,50,0,.3) inset;
}

.cc.amex {background-position:4px -96px;}
.cc.discover {background-position:4px -196px;}
.cc.visa {background-position:4px -396px;}
.cc.mastercard {background-position:4px -296px;}

.card-checker {
  text-align: center;
  position: absolute;
  left: 0;
  top: 50%;
   position: fixed;
  width: 100%;
  padding-top: 10px;
  font-size: 17px;

}


.h1 {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  position: absolute;
  left: 0;
  top:  30%;
  width: 100%;
  font-size: 33px;
}

.h2 {
  font-family: 'Roboto', sans-serif;
  text-align: center;
  position: absolute;
 position: fixed;
 padding-top: 10px;
  left: 0;
  top: 37%;
  width: 100%;
  font-size: 17px;

}




.imgg
{
 padding-top: 200px;
  padding-bottom: 200px;

}

*{padding:0;margin:0;}
#nav {
  width: 100%;
  height:auto;
  display:block;
}
#nav > ul {
  list-style: none;
  display: flex;
}
#nav > ul > li {
  margin: 20px;
  font-family: 'Roboto', sans-serif;
  font-size: 25px;
  color: #000000;  
}
#nav > ul > li:hover {
  color: #03adfc;
  cursor: pointer;
}

.footer {
font-family: 'Roboto', sans-serif;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}