/*CSS Start by Sydney Mantua*/

/*  Body and Headline Rules Desktop Version */

body {
    background-color: rgb(255, 255, 229);
    font-family: 'News Cycle', sans-serif;
    font-weight: 400;
}

.allobject {
    font-size: 0px;
    color: rgba(54, 54, 54, 0.0);
    filter: sepia(0%) drop-shadow(2px 4px 10px #d3d3d3);
    margin: -100px;
}

h1 {
    display: none;

}

h2 {
    position: absolute;
    font-size: 41px;
    top: 50%;
    left: 36%;
    z-index: 2;
    /*    font-family: 'Gotu', sans-serif;*/
    font-family: 'News Cycle', sans-serif;
    font-weight: 400;
    line-height: 45px;
    color: rgb(83, 80, 80);
}

h3 {
    display: none;
}

p {
    display: none;
}

h4 {
    display: none;
}

/*  Individual Card Rules Desktop Version */

.card1 {
    position: absolute;
    right: -4%;
    top: -5%;
    width: 360px;
    height: 250px;
    background: url('../images/florence1.png') no-repeat;
    margin: 50px;
    transform: rotate(-5deg);
    background-size: contain;
    z-index: 20;
}

.card1:hover {
    background: url("../images/florence2back.png") no-repeat;
    transform: rotate(-5deg);
    background-size: contain;
    z-index: 25;
}

.card2 {
    position: absolute;
    left: 42%;
    top: 17%;
    width: 390px;
    height: 250px;
    background: url('../images/hawaii1.png') no-repeat;
    margin: 50px;
    transform: rotate(-4deg);
    background-size: contain;
    z-index: 20;
}

.card2:hover {
    background: url("../images/hawaiiback.png") no-repeat;
    transform: rotate(-4deg);
    background-size: contain;
    z-index: 25;
}

.card3 {
    position: absolute;
    left: 16%;
    top: -6%;
    width: 420px;
    height: 270px;
    background: url('../images/sanfrancisco.png') no-repeat;
    margin: 50px;
    transform: rotate(5deg);
    background-size: contain;
    z-index: 20;
}

.card3:hover {
    background: url("../images/sfback.png") no-repeat;
    transform: rotate(5deg);
    top: -30px;
    background-size: contain;
    z-index: 25;
}

.card4 {
    position: absolute;
    left: 63%;
    top: 0%;
    width: 450px;
    height: 400px;
    background: url('../images/detroit.png') no-repeat;
    margin: 50px;
    transform: rotate(15deg);
    background-size: contain;
    z-index: 20;
}

.card4:hover {
    background: url("../images/detroitback.png") no-repeat;
    transform: rotate(15deg);
    background-size: contain;
    z-index: 25;
}

.card5 {
    position: absolute;
    left: 0%;
    top: 20%;
    width: 380px;
    height: 270px;
    background: url('../images/florence2.png') no-repeat;
    margin: 50px;
    transform: rotate(-16deg);
    background-size: contain;
    z-index: 20;
}

.card5:hover {
    background: url("../images/florenceback.png") no-repeat;
    transform: rotate(-16deg);
    background-size: contain;
    z-index: 25;
}

.card6 {
    position: absolute;
    left: 76%;
    top: 20%;
    width: 370px;
    height: 380px;
    background: url('../images/newport.png') no-repeat;
    margin: 50px;
    transform: rotate(-12deg);
    background-size: contain;
    z-index: 20;
}

.card6:hover {
    background: url("../images/newportback.png") no-repeat;
    transform: rotate(8deg);
    background-size: contain;
    z-index: 25;
}

.card7 {
    position: absolute;
    left: 6%;
    top: 40%;
    width: 370px;
    height: 380px;
    background: url('../images/grandcanyon2.png') no-repeat;
    margin: 50px;
    transform: rotate(-8deg);
    background-size: contain;
    z-index: 16;
}

.card7:hover {
    background: url("../images/grandcanyonback.png") no-repeat;
    transform: rotate(-8deg);
    background-size: contain;
    z-index: 25;
}

.card8 {
    position: absolute;
    left: 35%;
    top: 85%;
    width: 370px;
    height: 380px;
    background: url('../images/paris-2.png') no-repeat;
    margin: 50px;
    transform: rotate(18deg);
    background-size: contain;
    z-index: 22;
}

.card8:hover {
    background: url("../images/parisback.png") no-repeat;
    transform: rotate(18deg);
    background-size: contain;
    z-index: 25;
}

.card9 {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 370px;
    height: 380px;
    background: url('../images/bears2.png') no-repeat;
    margin: 50px;
    transform: rotate(-6deg);
    background-size: contain;
    z-index: 20;
}

.card9:hover {
    background: url("../images/redwoodback.png") no-repeat;
    transform: rotate(-6deg);
    background-size: contain;
    z-index: 25;
}

.card10 {
    position: absolute;
    left: 64%;
    top: 80%;
    width: 370px;
    height: 380px;
    background: url('../images/rome.png') no-repeat;
    margin: 50px;
    transform: rotate(5deg);
    background-size: contain;
    z-index: 20;
}

.card10:hover {
    background: url("../images/romeback.png") no-repeat;
    transform: rotate(5deg);
    background-size: contain;
    z-index: 25;
}

.card11 {
    position: absolute;
    left: -8%;
    top: 40%;
    width: 370px;
    height: 380px;
    background: url('../images/santamonica.png') no-repeat;
    margin: 50px;
    transform: rotate(15deg);
    background-size: contain;
    z-index: 20;
}

.card11:hover {
    background: url("../images/santamback.png") no-repeat;
    transform: rotate(15deg);
    background-size: contain;
    left: -0%;
    z-index: 25;
}

.card12 {
    position: absolute;
    left: 20%;
    top: 45%;
    width: 370px;
    height: 380px;
    background: url('../images/seattle1.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card12:hover {
    background: url("../images/seattleback.png") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card13 {
    position: absolute;
    left: 55%;
    top: 40%;
    width: 370px;
    height: 380px;
    background: url('../images/newyork.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card13:hover {
    background: url("../images/nycback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card14 {
    position: absolute;
    left: 0%;
    top: 80%;
    width: 370px;
    height: 380px;
    background: url('../images/seattle3.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card14:hover {
    background: url("../images/spaceneedleback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card15 {
    position: absolute;
    left: 16%;
    top: 110%;
    width: 370px;
    height: 380px;
    background: url('../images/lasvegas.png') no-repeat;
    margin: 50px;
    transform: rotate(-7deg);
    background-size: contain;
    z-index: 18;
}

.card15:hover {
    background: url("../images/vegasback.PNG") no-repeat;
    transform: rotate(-7deg);
    background-size: contain;
    z-index: 25;
}

.card16 {
    position: absolute;
    left: 40%;
    top: -10%;
    width: 370px;
    height: 380px;
    background: url('../images/washingtondc1.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card16:hover {
    background: url("../images/dcback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card17 {
    position: absolute;
    left: 75%;
    top: 60%;
    width: 370px;
    height: 380px;
    background: url('../images/arizonia.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card17:hover {
    background: url("../images/arizoniaback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card18 {
    position: absolute;
    left: 30%;
    top: 60%;
    width: 370px;
    height: 380px;
    background: url('../images/washingtondc2.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card18:hover {
    background: url("../images/whitehouseback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card19 {
    position: absolute;
    left: 50%;
    top: 65%;
    width: 370px;
    height: 380px;
    background: url('../images/seattle2.png') no-repeat;
    margin: 50px;
    transform: rotate(13deg);
    background-size: contain;
    z-index: 18;
}

.card19:hover {
    background: url("../images/seattle2back.PNG") no-repeat;
    transform: rotate(13deg);
    background-size: contain;
    z-index: 25;
}

.card20 {
    position: absolute;
    left: -3%;
    top: -10%;
    width: 370px;
    height: 380px;
    background: url('../images/hawaii2.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card20:hover {
    background: url("../images/hawaii2back.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

.card21 {
    position: absolute;
    left: 47%;
    top: 100%;
    width: 370px;
    height: 380px;
    background: url('../images/badlands.png') no-repeat;
    margin: 50px;
    transform: rotate(-5deg);
    background-size: contain;
    z-index: 18;
}

.card21:hover {
    background: url("../images/badlandsback.PNG") no-repeat;
    transform: rotate(-5deg);
    background-size: contain;
    z-index: 25;
}

.card22 {
    position: absolute;
    left: 80%;
    top: 90%;
    width: 370px;
    height: 380px;
    background: url('../images/sequoia.png') no-repeat;
    margin: 50px;
    transform: rotate(13deg);
    background-size: contain;
    z-index: 18;
}

.card22:hover {
    background: url("../images/sequoiaback.PNG") no-repeat;
    transform: rotate(13deg);
    background-size: contain;
    z-index: 25;
}

.card23 {
    position: absolute;
    left: 13%;
    top: 83%;
    width: 370px;
    height: 380px;
    background: url('../images/colorado.png') no-repeat;
    margin: 50px;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 20;
}

.card23:hover {
    background: url("../images/coloradoback.PNG") no-repeat;
    transform: rotate(3deg);
    background-size: contain;
    z-index: 25;
}

/*---   start media query rules   ---*/

@media only screen and (max-width: 400px) {

    /*  Heading and Body Rules Mobile Version */

    body {
        background-color: rgb(255, 255, 229);
        font-family: 'Gotu', sans-serif;
        color: rgb(83, 80, 80);
    }

    h1 {
        position: relative;
        top: 40px;
        left: 3px;
        font-size: 50px;
        display: inherit;
        font-family: 'Gotu', sans-serif;
        z-index: 0;
        background-color: rgba(255, 255, 255, 0);
        margin-top: -50px;
        color: rgb(83, 80, 80);
    }

    .allobject {
        display: block;
        width: 320px;
        height: 160px;
        left: 17px;
        background-size: 170%;
        background-position: center;
        color: rgba(54, 54, 54, 0.0);
        filter: sepia(2%) drop-shadow(2px 4px 10px #d3d3d3);
        margin-top: 0px;
        margin-bottom: 8px;
        margin-right: 0px;
        margin-left: 0px;

    }

    h2 {
        display: none;
    }

    h3 {
        display: block;
        font-size: 28px;
        position: relative;
        line-height: 30px;
        top: -5px;
        left: -25px;
        font-family: 'Gotu', sans-serif;
        color: rgb(83, 80, 80);

    }

    h4 {
        display: block;
        position: relative;
        font-size: 10px;
        letter-spacing: 3px;
        top: -38px;
        left: 20px;
    }

    p {
        display: block;
        position: absolute;
        top: 78px;
        left: 70px;
        font-size: 9px;
        letter-spacing: 3.5px;
        margin-bottom: 30px;
    }

    /*  Individual Card Rules Mobile Version */

    .card1 {
        position: relative;
        background-image: url('../images/newport.png');
        transform: rotate(0deg);
        margin-bottom: 15px;
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card1:hover {
        background: url("../images/newportgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card2 {
        position: relative;
        background-image: url('../images/seattle1.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card2:hover {
        background: url("../images/vangif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card3 {
        position: relative;
        background-image: url('../images/seattle2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card3:hover {
        background: url("../images/seattlegif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card4 {
        position: relative;
        background-image: url('../images/banff1.jpg');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card4:hover {
        background: url("../images/banffgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        transform: rotate(0deg);
        top: -30px;
    }

    .card5 {
        position: relative;
        background-image: url('../images/rome.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card5:hover {
        background: url("../images/romegif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card6 {
        position: relative;
        background-image: url('../images/florence1.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card6:hover {
        background: url("../images/flogif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card7 {
        position: relative;
        background-image: url('../images/florence2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card7:hover {
        background: url("../images/florencegif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card8 {
        position: relative;
        background-image: url('../images/paris-2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card8:hover {
        background: url("../images/parisgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card9 {
        position: relative;
        background-image: url('../images/grandcanyon2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card9:hover {
        background: url("../images/grandcgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card10 {
        position: relative;
        background-image: url('../images/arizonia.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card10:hover {
        background: url("../images/gcgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card11 {
        position: relative;
        background-image: url('../images/santamonica.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card11:hover {
        background: url("../images/santamgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        transform: rotate(2deg);
        top: -30px;
        transform: rotate(0deg);
    }

    .card12 {
        position: relative;
        background-image: url('../images/sanfrancisco.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card12:hover {
        background: url("../images/sfgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card13 {
        position: relative;
        background-image: url('../images/sequoia.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card13:hover {
        background: url("../images/seqgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card14 {
        position: relative;
        background-image: url('../images/bears2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card14:hover {
        background: url("../images/sequoiagif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card15 {
        position: relative;
        background-image: url('../images/newyork.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card15:hover {
        background: url("../images/nycgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card16 {
        position: relative;
        background-image: url('../images/hawaii1.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card16:hover {
        background: url("../images/hawaiigif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card17 {
        position: relative;
        background-image: url('../images/hawaii2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card17:hover {
        background: url("../images/higif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card18 {
        position: relative;
        background-image: url('../images/washingtondc1.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card18:hover {
        background: url("../images/dcgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card19 {
        position: relative;
        background-image: url('../images/washingtondc2.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card19:hover {
        background: url("../images/washgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card20 {
        position: relative;
        background-image: url('../images/lasvegas.png');
        transform: rotate(0deg);
        z-index: 400;
        top: -30px;
    }

    .card20:hover {
        background: url("../images/vegasgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card21 {
        position: relative;
        background-image: url('../images/badlands.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card21:hover {
        background: url("../images/badgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card22 {
        position: relative;
        background-image: url('../images/colorado.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card22:hover {
        background: url("../images/coloradogif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }

    .card23 {
        position: relative;
        background-image: url('../images/detroit.png');
        transform: rotate(0deg);
        z-index: 400;
        border-radius: 5px;
        top: -30px;
    }

    .card23:hover {
        background: url("../images/detroitgif.gif") no-repeat;
        background-position: center;
        background-size: 100%;
        top: -30px;
        transform: rotate(0deg);
    }