@charset "utf-8";
/* CSS Document */


#toppic
{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:0;
    border:none;
    background-color:white;
}

#centerdiv
{
    border:2px solid white;
    position:absolute;
    width:216px;
    height:90px;
    top:50%;
    left:50%;
    margin-left:-133px;
    margin-top:-80px;
    z-index:10;
    text-align:center;
    font-size:25px;
    color:white;
    padding:10px 25px;
    text-shadow: 1px 1px 8px rgba(0,0,0,1);

    -webkit-transition: font-size 1.5s;
    transition: font-size 1.5s;
}


#centerdiv img
{
    box-shadow: 0px 0px 90px -5px rgba(0,0,0,0.86);
    border-radius:220px;
}


#centerdiv:hover { font-size:27px; }

#content
{
    background-color:rgba(255,255,255,0.8);
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    padding:80px 0 50px 0;
    font-size:18px;
    color:black;
    text-align:center;
    padding-bottom:100px;
}

#items_container
{
    width:90%;
    position:relative;
    top:50px;
    left:5%;
    margin-bottom:185px;
}

.item
{
    position:relative;
    display: inline-block;
    margin:5px;
    padding:20px;
    width:350px;
    height:230px !important;
    border:none;
    max-width:80%;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.text
{
    position:absolute;
    bottom:2px;
    left:0;
    padding:15px 7px;
    width:calc(100% - 14px);
    background-color:rgba(0,0,0,0.7);
    color:white;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);
    height:35px;
    overflow:hidden;
    transition: height 450ms;
    -moz-transition: height 450ms;
    -webkit-transition: height 450ms;
}

.item:hover  .text {
        height: 130px;
}

#content2
{
    width:calc(100% - 70px);
    background-color:white;
    padding:55px 35px;
    margin-bottom:250px;
}

#social
{
    position:relative;
    top:50px;
}

#cover
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:transparent;
    z-index:450;
}


@media(max-width:700px)
{
    #content #text
    {
        width:100% !important;
        left:0 !important;
        margin-left:0!important;
    }

    #content
    {
        padding:15px 0 50px 0 !important;
        min-height:calc(100% - 65px) !important;
    }
}


@media(min-width:1750px)
{
    #items_container
    {
        width:1250px !important;
        left:50% !important;
        margin-left:-625px !important;
    }
}

@media(min-width:1300px)
{
    #content2
    {
        width:1250px;
        margin-left:calc(50% - 660px)
    }
}