@charset "utf-8";

/***** --------- MOMBILE -------- ******/

#thumbContainer {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 27px;
}

.centerWidth{
    margin-top:39px;
     max-width: 1140px;
}

.pagetitel {
            font-family: "vidaloka", "times new roman", serif;
            font-size:2.5em;
            font-weight: 100;
            font-variant: small-caps;
            color: #c4617e;
            margin-left:15px;
            }

.view {
    width: 100%;
    height: auto;
    margin-bottom: 2.5%;
    display: inline-block;
    float: left;
    overflow: hidden;
    position: relative;
    text-align: center;
    cursor: default;
    }


/*hover-over effect*/
.view .mask, .view .content {
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    /*padding:15px;*/
}

.view img {
    display: block;
    position: relative;
    height: auto;
    width: 100%;
}

.view h2 {
    font-family: "vidaloka", "times new roman", serif;
    font-weight: 100;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    position: relative;
    font-size: 14px;
    padding: 10px;
    display:none;
    background: rgba(0, 0, 0, 0.8);
    margin: 20px 0 20px 0
}

.view p {
    font-family: "raleway", serif;
    font-size: 12px;
    position: relative;
    color: #fff;
    text-align: center;
    padding:8px;
    line-height:130%;
}


.view a.info {
    font-family: "vidaloka", "times new roman", serif;
    font-weight: 100;
    font-size: 0.8em;
    display: inline-block;
    text-decoration: none;
    padding: 12px 20px;
    background: #000;
    color: #fff;
    text-transform: uppercase;
    box-shadow: 0 0 1px #000
}

.view a.info:hover {
    box-shadow: 0 0 5px #000
}


/*upon hover Animation*/

.view-first img {
    transition: all 0.2s linear;
}

.view-first .mask {
    opacity: 0;
    background-color: rgba(0,0,0, 0.5);
    transition: all 0.4s ease-in-out;
}

.view-first h2 {
    transform: translateY(-100px);
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first p {
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.2s linear;
}

.view-first a.info{
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.view-first:hover img {
    transform: scale(1.2);
}

.view-first:hover .mask {
    opacity: 1;
}

.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
    opacity: 1;
    transform: translateY(0px);
}

.view-first:hover p {
    transition-delay: 0.1s;
}

.view-first:hover a.info {
    transition-delay: 0.2s;
}



/***** TABLET ******/

@media (min-width: 600px) {                 /*2 per row*/

    .view {
        width:49%;
        margin-right: 1%;
        margin-bottom: 1%;
     }

    #thumbContainer {
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        padding-top: 27px;
    }

    .view h2 {
        font-size: 17px;
        margin: 0 0 10px 0;
        display: block;

    }

    .view p {
        font-size: 13px;
        padding-top:0;
        padding-bottom:0;
    }

    .pagetitel {
        margin-left: 0;
    }
}


@media (min-width: 600px) {                 /*2 per row*/



    .view h2 {
        margin: 20px 0 20px 0;
    }

    .view p {
        font-size: 13px;
        padding-top:0;
        padding-bottom:0;
    }


}


/***** Monitor ******/

@media (min-width: 850px) {              /*3 per row*/

    .view {
        width:32.5%;
        margin-right: 0.83%;
        margin-bottom: 0.83%;
    }

    .view p {
        padding-top:0;
        padding-bottom:0;
        font-size: 14px;
    }

    .view h2 {
        margin: 0 0 0 0;
    }

    #thumbContainer {
        width: 100%;
        margin: auto;
        /*padding-left: 0;*/
        /*padding-right: 0;*/
        /*padding-top: 27px;*/
    }

    .pagetitel {
        font-family: "vidaloka", "times new roman", serif;
        font-size:2.5em;
        font-weight: 100;
        font-variant: small-caps;
        color: #c4617e;
    }

    .centerWidth{
        margin-top:80px;
    }
}


/***** Monitor med ******/

@media (min-width: 1200px) {             /*4 per row*/

    .view h2 {
        margin: 20px 0 20px 0;
    }



    /*.view {*/
        /*width:24.5%;*/
        /*margin-right: 0.5%;*/
        /*margin-bottom: 0.5%;*/
    /*}*/

}

/*!***** Monitor L ******!*/

@media (min-width: 1600px) {            /*5 per row*/

    /*.view {*/
        /*width:19.6%;*/
        /*margin-right: 0.4%;*/
        /*margin-bottom: 0.4%;*/
    /*}*/

    .view h2 {
        margin-bottom:40px;
     }


    .view a.info {
        margin-top:25px;
    }

}

/*!***** Monitor XL ******!*/

/*@media (min-width: 1750px) {*/


    /*.view {          !*6 per row*!*/
        /*width: 16.25%;*/
        /*margin-right:0.4%;*/
        /*margin-bottom:0.4%;*/
    /*}*/

/*}*/