/* gvr.css */

    .urbanist,p,li {font-family: 'Urbanist';}
    .yatra,h1,h2,h3,h4,a {font-family: 'Yatra One';}
    .redline {height:5px;
            width:50%;
            max-width:150px;
            background-color: red;
            margin-top:0px;
            padding-top:0px;}
    h3 {    margin-bottom:0px;
            padding-bottom:0px;
            line-height:23px;}
    .redlink a:visited { text-decoration: none; color:red;}
    .redlink a:link { text-decoration: none; color:red;}
    .redlink a:hover { text-decoration: underline; color:white;}
    .redlink a:active { text-decoration: underline; color:white;}
    .redlink {} /*line-height:14px;*/
    .redunderline {
            border-bottom: 5px solid red;
            display: inline-block;
            padding-bottom: 0px;}
    .point { cursor: pointer;}
    .icons {width: 70px;}
    .icontext {width:90%;
            min-width: 120px;}
    .arthome { background-repeat: no-repeat;
            background-attachment: local;
            height: 85vh;
            position: relative;            
            cursor: pointer;
            z-index: 0;}
    .artpage { background-repeat: no-repeat;
            background-attachment: local;
            height: 50vh;
            position: relative;}
    .art1 { background-image: url("PeterDeCupere.jpg");
            background-position: 60% 70%;
            background-attachment: local;
            background-size: 100%;}
    .art1h { background-image: url("PeterDeCupere.jpg");
            background-position: 60% 70%;
            background-attachment: local;}
    .art2 { background-image: url("JanDeMaesschalck.jpg");
            background-repeat: no-repeat;
            background-position: 25% 60%;
            background-attachment: local;
            background-size: 100%;}
    .art2h { background-image: url("JanDeMaesschalck.jpg");
            background-repeat: no-repeat;
            background-position: 25% 60%;
            background-attachment: local;}
    .art3 { background-image: url("GrietDobbels.jpg");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-attachment: local;
            background-size: 100%;}
    .art3h { background-image: url("GrietDobbels.jpg");
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-attachment: local;}
    .art4 { background-image: url("cards/DavidHelbich_cards9.jpg");
            background-repeat: no-repeat;
            background-position: 50% 35%;
            background-attachment: local;
            background-size: 100%;}
    .art4h { background-image: url("cards/DavidHelbich_cards9.jpg");
            background-repeat: no-repeat;
            background-position: 50% 35%;
            background-attachment: local;}
    .art5 { background-image: url("JohanTahon.jpg");
            background-repeat: no-repeat;
            background-position: 48% 30%;
            background-attachment: local;
            background-size: 100%;}
    .art5h { background-image: url("JohanTahon.jpg");
            background-repeat: no-repeat;
            background-position: 48% 30%;
            background-attachment: local;}
    .kaart{ background-image: url("GvR_map.jpg");
            background-repeat: no-repeat;
            background-position: 50% 20%;
            background-attachment: local;}
    .home{  height:80px;
            }
    .menu{  right:0;
            min-width:215px;
            font-size: 18px;
            text-decoration: none;}
    .descript{ font-size: 18px;}

    .overlay {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      height: 100%;
      width: 100%;
      opacity: 0;
      transition: .5s ease;
      background-color: #000000;
        z-index: 1;
    }

    .info { display: none;
            position: absolute;
            bottom: 20px;
            left: 10%;
            right: 10%;
            z-index: 2;
            font-family: 'Yatra One';
            font-size: 21px;
            line-height: 21px;
    }

@media only screen and (max-width: 600px) {
    .info {
        display: block;
        bottom: auto;
        top: 10px;
    }
}
    .max {max-width: 1200px}

    #a1:hover #i1{display:block;}
    #a2:hover #i2{display:block;}
    #a3:hover #i3{display:block;}
    #a4:hover #i4{display:block;}
    #a5:hover #i5{display:block;}

    .art1h:hover #o1 {opacity: 0.5;}
    .art2h:hover #o2 {opacity: 0.5;}
    .art3h:hover #o3 {opacity: 0.5;}
    .art4h:hover #o4 {opacity: 0.5;}
    .art5h:hover #o5 {opacity: 0.5;}

    .art1:hover #o1 {opacity: 0.5;}
    .art2:hover #o2 {opacity: 0.5;}
    .art3:hover #o3 {opacity: 0.5;}
    .art4:hover #o4 {opacity: 0.5;}
    .art5:hover #o5 {opacity: 0.5;}

    .mapframe{
      background-color: white;
      width: 100%;
      height: 800px;
}

    .third {
        width: 33%;
        padding-bottom: 10px;
        font-size:16px;
        line-height: 1.3;
    }

    .fifth {
        width: 20%;
        margin: 20px;
    }

    .start{
      border-radius: 20px;
      background: black;
      color: red;
      padding: 5px 0px 0px 0px;
      width: 150px;
      height: 50px;
    }

    .flip-card {
      width: 100%;
      height: 480px; /***********************************/
      perspective: 1000px;
    }

    .flip-card-inner {
      position: relative;
      width: 100%;
/*      height: 100%;*/
      text-align: center;
      transition: transform 1.0s;
      transform-style: preserve-3d;
      box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    }

    .flip-card-front, .flip-card-back {
      position: absolute;
      width: 100%;
/*      height: 100%;*/
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
    }

    .flip-card-front {
    }

    .flip-card-back {
      transform: rotateY(180deg);
    }

    .audioplayer{
        position:relative;
        padding-bottom:50;
    }

    .cardrow{
        padding: 0px;
    }    
    .cardcell{
        width: 20%;
        margin: 0px;
        padding: 0px 5px 0px 5px;
    }