/* styles for home ////////////////////////////////////////////////////////////////////////////// */

#home-content {
    margin: 54px auto 100px auto;
}

.grid-item {
    position: relative;
    float: left;
    background-image: url('../../images/tile.png');
}

.grid-img {
    width: 100%;
    height: 100%;
}

@keyframes example {
  /*0%   { top:92%; }
    50%  { top:87%; }
    100% { top:92%; }*/
    0%   { margin: -100px auto 0px auto; }
    50%  { margin: -140px auto 0px auto; }
    100% { margin: -100px auto 0px auto; }
}

#arrow-wrap {
    position: absolute;
    top: 98%;
    width: 100%;
}

#arrow-more {
    /*position: absolute;
    top: 98%;
    width: 100%;*/
    /*width: 51px;*/
    /*height: 51px;*/
    width: 100px;
    height: 67px;
    margin: -100px auto 0px auto;
    /*top: 92%;*/
    /*20170530*/
    /*left: 50%;*/
    /*background-image: url('../../images/arrow-moretest.svg');*/
    background-image: url('../../images/arrow.svg');

    border-top-right-radius: 10px 10px ;
    border-bottom-right-radius: 10px 10px ;
	background-size: 20px 67px;
	background-repeat: no-repeat;
	background-position: center;

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);

    -webkit-filter: drop-shadow(2px 2px 7px rgba(0,0,0,0.4));
    filter: url(../../../styles/shadow.svg#drop-shadow);
	-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
	filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=12, OffY=12, Color='#444')";
    

    /*background-color: #000; */
    opacity: 1.0;
    display: block;
    animation-name: example;
    animation-duration: .6s;
    animation-delay: 1s;
    animation-iteration-count: 2;
    animation-timing-function: ease-in-out;
}
#arrow-more:hover {
    opacity: 1.0;
}

#home-content div:nth-child(4n+4) {
    margin-right:0;
}


/* MEDIA QUERIES - desktop  ////////////////////////////////////////////////////////////////////////////// */

@media screen and (min-width:960px){

    #home-content {
        margin-right:20;
        width: 961px;
    }

    .grid-item {
        width: 230px;
        height: 230px;
        margin-right: 13px;
        margin-top: 13px;
    }
}


/* MEDIA QUERIES - tablet ////////////////////////////////////////////////////////////////////////////// */

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

    #home-content {
        margin-top:40;
        width: 540px;
    }

    .grid-item {
        width: 128px;
        height: 128px;
        margin-right: 9px;
        margin-top: 9px;
    }
}


/* MEDIA QUERIES - smartphone //////////////////////////////////////////////////////////////////////////////  */

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

    #home-content {
        width: 370px;
    }

    .grid-item {
        width: 87px;
        height: 87px;
        margin-right: 7px;
        margin-top: 7px;
    }

}

/* MEDIA QUERIES - small smartphone ////////////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width:383px){
    
    #home-content{
        width: 90%;
        margin: 50px 10px 150px 10px;
    }

    .grid-item {
        width: 22.5%;
        height: 22.5%;
        margin-right: 2.9%;
        margin-top: 2.9%;
    }