.box:hover #imgid {
            position: absolute;

            margin-top: 0%;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
     
        }
        #imgid {
            position: absolute;
            width: 100px;
            margin-left: 20%;
            margin-top: 20%;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
        }

        @media only screen and (max-width : 1200px) {
            #imgid{margin-left:20%;}
        }

        @media only screen and (max-width : 979px) {
            #imgid{margin-left:35%;
                   margin-top:10%;
            }
        }

        @media only screen and (max-width : 767px) {
            #imgid{margin-left:40%;
                   margin-top:5%;
            }
        }

        @media only screen and (max-width : 480px) {
            #imgid{margin-left:27%;
                   margin-top:12%;
            }

        }

        #buttonid {
            background-color:#0077c8;
            color:#fff;
            border:0px;
            border-radius:20px;
            padding:2px;
            padding-right:10px;
            padding-left:10px;
          

        }

        .box span #headingid {
            font-size: 16px;
            color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            padding-bottom: 5px;
            padding-top: 5px;
            margin: 0px;
        }
        .box span a {
            font-family: Arial, Helvetica, sans-serif;
            padding-bottom: 0px;
            margin-bottom: 0px;
            margin-top:0px;
            padding-top:5px;
            font-size:11px;
            cursor:pointer;
        }

        .box:hover span {
            display: block;
            position: relative;
            opacity: 1;
            top: 70%;
            -webkit-transition: top 1s;
            -moz-transition: top 1s;
            transition: top 1s;
        }
        .box span {
            opacity:1;
            display: block;
            position: relative;
            top: 100%;
            height:60px;
            text-align: center;
            -webkit-transition: all 1s;
            -moz-transition: all 1s;
            transition: all 1s;
        }
        .box a {
            color: #FFF;
            text-decoration: none;
            text-align: center;
            vertical-align: middle;
            height: 100%;
            display: block;
            padding-top: 20px;
        }
        .box {
            margin-left:0px;
            margin-right:20px;
            display: inline-block;
            float: left;
            height: 200px;
            overflow: hidden;
            width: 100%;
            -webkit-transition: width 1s;
            -moz-transition: width 1s;
            transition: width 1s;
            background-color:#a10000;
            margin-bottom:10px;
            margin-top:10px;
            border-top:2px solid #071d49;
            border-bottom:2px solid #071d49;
        }

        #overlaybackgroundbox {
            background-color:#071d49;
            width: 100%;
            height: 60px;
        }
        .box.one {
            background-color:#2c5589;
        }

        .box.two {
            background-color:#2c5589;
        }
        .box.three {
                        background-color:#2c5589;
        }
        .box.four {
                        background-color:#2c5589;
        }
/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */