* {
  box-sizing:border-box;
}

body {margin:0;font-family:Arial; background-color: #2885A1;}

h3.jos {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px darkgray;
  font-size: 1em;
  text-align:left;
}

.textalb {
  color: white;
  font-size: 0.8em;
  text-align:left;
}

.textalb1{
  color: white;
  font-size: 1.6vw;
  text-align:left;
  line-height: 1.8;
}

.fonta{font-size: 1vw;}

.ghid {
  color: #ffcc00;
}

.left {
  background-color: #333;
  padding:20px;
  float:left;
  width:40%;
}

.main {
  background-color: #333;
  padding:20px;
  float:left;
  width:20%;
}

.right {
  background-color: #333;
  padding:20px;
  float:left;
  width:40%;
}

.center {
  background-color: #333;
  padding:20px;
  float:center;
  width:100%;
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .right {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}

.antet{
  background: url(DeltaDunarii.jpg);
  background-repeat: no-repeat;
  background-size: contain, cover;
}

img {
  width: 100%;
  height: auto;
}

img.cubordura {
  width: 100%;
  height: auto;
  border: 8px solid white;
  border-radius: 5px;
}

/*pentru butonul continua*/
a.vr:link, a.vr:visited {
  background-color: darkgrey;
  color: white;

  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.vr:hover, a.vr:active {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

/*pentru butoanele social media */
a.vr2:link, a.vr2:visited {
  background-color: transparent;
  color: white;

  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.vr2:hover, a.vr2:active {
}

a.vr3:link, a.vr3:visited {
  background-color: transparent;
  color: white;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.vr5:hover, a.vr5:active {
  color: #333;
}

a.vr5:link, a.vr5:visited {
  background-color: transparent;
  color: white;
  font-size: 0.6em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a.vr5:hover, a.vr5:active {
  color: #fc0;
}

.galrom{
  background-color: #2885A1;
}

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px none black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 110%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}

.alb1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px darkgray;
  font-size: 1.8vw;
}

.alb1a {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px darkgray;
  font-size: 1.5vw;
}

/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .alb1 {
    font-size: 4vw;
  }
}

.mov1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px white, 0 0 5px darkgray;
  font-size: 3.5vw;
}

/* text de pe imagini */
.containeracu {
  position: relative;
  margin: 0 auto;
}

.containeracu img {vertical-align: middle;}

.containeracu .contentacu {
  position: absolute;
  top: 0;
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.4); /* Black background with 0.5 opacity */
  color: #f1f1f1;
  width: 100%;
  padding: 20px;
}

/*mapare harta */
.google-maps {
    position: relative;
    padding-bottom: 75%; // This is the aspect ratio
    height: 0;
    overflow: hidden;
}
.google-maps iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}