*{
margin: 0;
padding: 0;

}



.box-main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 10px;
}


.box {
    position: relative;
    float: left;
    margin: 0px 10px 12px 0px;
    padding: 0px 0 0px 0;
    text-align: center;
    min-width: 120px;
    height: 110px;    
    border: 1px solid gray;  
    -webkit-box-shadow: 0px 0px 9px 3px #81aa8c;
    -moz-box-shadow: 0px 0px 9px 3px #81aa8c;
    box-shadow: 0px 0px 9px 3px #81aa8c;
}

.box h3 {
    font-size: 18px;
    padding-top: 15px;
    font-family: Gilda Display;
    font-weight: 600;
}

.quest-image1 {
    width: 380px;
    height: 300px;
    overflow: hidden;
}

.quest-image1 img {
    width: 360px;
    height: 270px;
}


.quest-actions {
    position: absolute; 
    bottom: 20px; 
    background-color: white; 
    left: 20px; 
    padding: 10px 10px; 
    font-size: 16px; 
    text-align: left;
}


.vertical-center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 250px;
        padding: 0px 10px 0 10px; 
        margin-top: 30px;
}




.image-size {
    width: 300px; 
    height: 300px;
}

.featured-image {
    width: 250px;
    height: 180px;
}

.quest-description {
    text-align: center; 
    max-width: 300px; 
    margin-top: 5px; 
    font-family: sans-serif; 
    font-size: 16px; 
    font-style: italic;
}

.quest-description2 {
    text-align: center; 
    max-width: 200px; 
    margin-top: 5px; 
    font-family: sans-serif; 
    font-size: 16px; 
    font-style: italic;
}

.quest-details {
     position: absolute; 
     top: 10px; 
     left: 10px; 
     right: 10px; 
     max-width: 180px; 
     color: black; 
     text-align: left; 
     background-color: 
     white; padding: 5px 5px; 
}

.quest-meeting1 {
    position: absolute; 
    bottom: 15px; 
    left: 10px; 
    right: 10px; 
    max-width: 280px; 
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px 5px;  
    font-family: serif; 
    font-style: italic;
    border-radius: 10px;
}

.quest-meeting2 {
    position: absolute; 
    bottom: 40px; 
    left: 10px; 
    right: 10px; 
    max-width: 280px; 
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px 5px;  
    font-family: serif; 
    font-style: italic;
    border-radius: 5px;
}

.primary-quests-info {
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px px;
    font-size: 20px;
}



.category-title {
    position: absolute; 
    bottom: 10px;
    width: 100%;  
    text-align: center; 
    margin-top: 5px; 
    font-family: sans-serif; 
    font-size: 16px; 
}

.category-info {
    position: absolute; 
    top: 27px; 
    left: 0px; 
    right: 0px;
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px 5px 5px 20px;    
}




@media screen
and (min-device-width: 300px) 
  and (max-device-width: 800px) 
{
 

.quest-intro {
        display: inline-block; 
        margin-top: 20px; 
        font-family: 'Gilda Display', serif; 
        font-size: 20px; 
        width: 80%; 
}

.featured-image {
    width: 250px;
    height: 180px;
}

.quest-description {
    text-align: center; 
    max-width: 800px; 
    margin-top: 5px; 
    font-family: sans-serif; 
    font-size: 16px; 
    font-style: italic;
}

.quest-details {
     position: absolute; 
     top: 10px; 
     left: 10px; 
     right: 10px; 
     max-width: 90%; 
     color: black; 
     text-align: left; 
     background-color: 
     white; padding: 5px 5px; 
}

.box-main {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.box {
    position: relative;
    margin: 0 0px 30px 0px; 
    text-align: center;
    border-radius: 3px;
    padding-bottom: 15px;
    width: 200px;
    height: 280px;
}


.quest-image1 {
    width: 380px;
    height: 300px;
    overflow: hidden;
}

.quest-image1 img {
    width: 360px;
    height: 270px;
}


.quest-actions {
    position: absolute; 
    bottom: 20px; 
    background-color: white; 
    left: 30px; 
    padding: 10px 10px; 
    font-size: 16px; 
    text-align: left;
}


.category-title {
    text-align: center; 
    max-width: auto; 
    margin-top: 0px; 
    font-family: sans-serif; 
    font-size: 16px; 
}

.primary-quests-info {
    position: absolute; 
    top: 10px; 
    text-align: center;
    color: black; 
    background-color: white; 
}

.category-info {
    position: absolute; 
    top: 40px;
    text-align: center; 
    color: black; 
    background-color: white; 
    padding: 5px 5px;
}


.test2 {
    text-align: center; 
    width: auto; 
    margin-top: 5px; 
    font-family: sans-serif; 
    font-size: 20px; 
}


.vertical-center {
        margin: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        width: 250px;
        padding: 0px 10px 0 10px; 
        margin-top: 30px;
        font-size: 20px;
}


.quest-meeting1 {
    position: absolute; 
    bottom: 15px; 
    right: -15px; 
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px 5px;  
    font-family: serif; 
    font-style: italic;
    border-radius: 10px;
}

.quest-meeting2 {
    position: absolute; 
    bottom: 40px; 
    right: -15px; 
    max-width: 280px; 
    color: black; 
    text-align: center; 
    background-color: white; 
    padding: 5px 5px;  
    font-family: serif; 
    font-style: italic;
    border-radius: 5px;
}


}