@media only screen and (min-width: 768px) {
    a.centerimg {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 13% !important;
        left: 18% !important;
        width: 59% !important;
        height: 900px !important;
    }
    .circle-container {
        position: relative;
        width: 100%;
        height: 1000px;
        padding: 2.8em;
        margin: 30px 0px;
    }
    .circle-container a {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 40%;
        left: 32%;
        width: 11em;
        height: 11em;
    }
    .deg0:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg45:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg90:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg135:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg180:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg225:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg270:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .deg315:hover {
        -webkit-filter: drop-shadow(5px 10px 18px gray);
    }
    .circle-container img {
        display: block;
        width: 100%;
    }
    .deg0 {
        -webkit-transform: translate(34em);
        -moz-transform: translate(34em);
        -ms-transform: translate(34em);
        -o-transform: translate(34em);
        transform: translate(34em);
    }
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }
    .deg45 {
        -webkit-transform: rotate(38deg) translate(33em) rotate(-38deg);
        -moz-transform: rotate(38deg) translate(33em) rotate(-38deg);
        -ms-transform: rotate(38deg) translate(33em) rotate(-38deg);
        -o-transform: rotate(38deg) translate(33em) rotate(-38deg);
        transform: rotate(38deg) translate(33em) rotate(-38deg);
    }
    .lt-ie9 .deg45 {
        margin: 6.485em;
    }
    .deg90 {
        -webkit-transform: rotate(76deg) translate(27em) rotate(-76deg);
        -moz-transform: rotate(76deg) translate(27em) rotate(-76deg);
        -ms-transform: rotate(76deg) translate(27em) rotate(-76deg);
        -o-transform: rotate(76deg) translate(27em) rotate(-76deg);
        transform: rotate(76deg) translate(27em) rotate(-76deg);
    }
    .deg135 {
        -webkit-transform: rotate(122deg) translate(24em) rotate(-122deg);
        -moz-transform: rotate(122deg) translate(24em) rotate(-122deg);
        -ms-transform: rotate(122deg) translate(24em) rotate(-122deg);
        -o-transform: rotate(122deg) translate(24em) rotate(-122deg);
        transform: rotate(122deg) translate(24em) rotate(-122deg);
    }
    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }
    .deg180 {
        -webkit-transform: translate(-22em);
        -moz-transform: translate(-22em);
        -ms-transform: translate(-22em);
        -o-transform: translate(-22em);
        transform: translate(-22em);
    }
    .lt-ie9 .deg180 {
        margin-left: -14em;
    }
    .deg225 {
        -webkit-transform: rotate(235deg) translate(22em) rotate(-235deg);
        -moz-transform: rotate(235deg) translate(22em) rotate(-235deg);
        -ms-transform: rotate(235deg) translate(22em) rotate(-235deg);
        -o-transform: rotate(235deg) translate(22em) rotate(-235deg);
        transform: rotate(235deg) translate(22em) rotate(-235deg);
    }
    .lt-ie9 .deg225 {
        margin: -10.485em;
    }
    .deg270 {
        -webkit-transform: rotate(284deg) translate(25em) rotate(-284deg);
        -moz-transform: rotate(284deg) translate(25em) rotate(-284deg);
        -ms-transform: rotate(284deg) translate(25em) rotate(-284deg);
        -o-transform: rotate(284deg) translate(25em) rotate(-284deg);
        transform: rotate(284deg) translate(25em) rotate(-284deg);
    }
    .deg315 {
        -webkit-transform: rotate(329deg) translate(32em) rotate(-329deg);
        -moz-transform: rotate(329deg) translate(32em) rotate(-329deg);
        -ms-transform: rotate(329deg) translate(32em) rotate(-329deg);
        -o-transform: rotate(329deg) translate(32em) rotate(-329deg);
        transform: rotate(329deg) translate(32em) rotate(-329deg);
    }
    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    a.centerimg {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 14% !important;
        left: 36% !important;
        width: 36% !important;
        height: 375px !important;
        margin: -2em;
    }
    .circle-container {
        position: relative;
        width: 100%;
        height: 346px;
        padding: 2.8em;
        margin: 30px 0px;
    }
    .circle-container a {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 40%;
        left: 42%;
        width: 5em;
        height: 5em;
        margin: -2em;
        /* 2em = 4em/2 */
        /* half the width */
    }
    .circle-container img {
        display: block;
        width: 100%;
    }
    .deg0 {
        -webkit-transform: translate(16em);
        -moz-transform: translate(16em);
        -ms-transform: translate(16em);
        -o-transform: translate(16em);
        transform: translate(16em);
    }
    /* 12em = half the width of the wrapper */
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }
    .deg45 {
        -webkit-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -moz-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -ms-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -o-transform: rotate(38deg) translate(16em) rotate(-38deg);
        transform: rotate(38deg) translate(16em) rotate(-38deg);
    }
    .lt-ie9 .deg45 {
        margin: 6.485em;
    }
    .deg90 {
        -webkit-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -moz-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -ms-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -o-transform: rotate(74deg) translate(13em) rotate(-74deg);
        transform: rotate(74deg) translate(13em) rotate(-74deg);
    }
    .deg135 {
        -webkit-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -moz-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -ms-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -o-transform: rotate(118deg) translate(11em) rotate(-118deg);
        transform: rotate(118deg) translate(11em) rotate(-118deg);
    }
    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }
    .deg180 {
        -webkit-transform: translate(-9em);
        -moz-transform: translate(-9em);
        -ms-transform: translate(-9em);
        -o-transform: translate(-9em);
        transform: translate(-9em);
    }
    .lt-ie9 .deg180 {
        margin-left: -14em;
    }
    .deg225 {
        -webkit-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -moz-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -ms-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -o-transform: rotate(229deg) translate(8em) rotate(-229deg);
        transform: rotate(229deg) translate(8em) rotate(-229deg);
    }
    .lt-ie9 .deg225 {
        margin: -10.485em;
    }
    .deg270 {
        -webkit-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -moz-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -ms-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -o-transform: rotate(291deg) translate(10em) rotate(-291deg);
        transform: rotate(291deg) translate(10em) rotate(-291deg);
    }
    .deg315 {
        -webkit-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -moz-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -ms-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -o-transform: rotate(334deg) translate(14em) rotate(-334deg);
        transform: rotate(334deg) translate(14em) rotate(-334deg);
    }
    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    a.centerimg {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 6% !important;
        left: 37% !important;
        width: 30% !important;
        height: 375px !important;
        margin: -2em;
    }
    .circle-container {
        position: relative;
        width: 100%;
        height: 260px;
        padding: 2.8em;
        margin: 30px 0px;
    }
    .circle-container a {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 40%;
        left: 42%;
        width: 5em;
        height: 5em;
        margin: -2em;
        /* 2em = 4em/2 */
        /* half the width */
    }
    .circle-container img {
        display: block;
        width: 100%;
    }
    .deg0 {
        -webkit-transform: translate(16em);
        -moz-transform: translate(16em);
        -ms-transform: translate(16em);
        -o-transform: translate(16em);
        transform: translate(16em);
    }
    /* 12em = half the width of the wrapper */
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }
    .deg45 {
        -webkit-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -moz-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -ms-transform: rotate(38deg) translate(16em) rotate(-38deg);
        -o-transform: rotate(38deg) translate(16em) rotate(-38deg);
        transform: rotate(38deg) translate(16em) rotate(-38deg);
    }
    .lt-ie9 .deg45 {
        margin: 6.485em;
    }
    .deg90 {
        -webkit-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -moz-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -ms-transform: rotate(74deg) translate(13em) rotate(-74deg);
        -o-transform: rotate(74deg) translate(13em) rotate(-74deg);
        transform: rotate(74deg) translate(13em) rotate(-74deg);
    }
    .deg135 {
        -webkit-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -moz-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -ms-transform: rotate(118deg) translate(11em) rotate(-118deg);
        -o-transform: rotate(118deg) translate(11em) rotate(-118deg);
        transform: rotate(118deg) translate(11em) rotate(-118deg);
    }
    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }
    .deg180 {
        -webkit-transform: translate(-9em);
        -moz-transform: translate(-9em);
        -ms-transform: translate(-9em);
        -o-transform: translate(-9em);
        transform: translate(-9em);
    }
    .lt-ie9 .deg180 {
        margin-left: -14em;
    }
    .deg225 {
        -webkit-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -moz-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -ms-transform: rotate(229deg) translate(8em) rotate(-229deg);
        -o-transform: rotate(229deg) translate(8em) rotate(-229deg);
        transform: rotate(229deg) translate(8em) rotate(-229deg);
    }
    .lt-ie9 .deg225 {
        margin: -10.485em;
    }
    .deg270 {
        -webkit-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -moz-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -ms-transform: rotate(291deg) translate(10em) rotate(-291deg);
        -o-transform: rotate(291deg) translate(10em) rotate(-291deg);
        transform: rotate(291deg) translate(10em) rotate(-291deg);
    }
    .deg315 {
        -webkit-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -moz-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -ms-transform: rotate(334deg) translate(14em) rotate(-334deg);
        -o-transform: rotate(334deg) translate(14em) rotate(-334deg);
        transform: rotate(334deg) translate(14em) rotate(-334deg);
    }
    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
}

@media (max-width: 767px) {
    a.centerimg {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 6% !important;
        left: 38% !important;
        width: 30% !important;
        height: 370px !important;
        margin: -2em;
    }
    .circle-container {
        position: relative;
        width: 100%;
        height: 200px;
        padding: 2.8em;
        margin: 30px 0px;
    }
    .circle-container a {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 41%;
        left: 41%;
        width: 4em;
        height: 5em;
        margin: -2em;
        /* 2em = 4em/2 */
        /* half the width */
    }
    .circle-container img {
        display: block;
        width: 100%;
    }
    .deg0 {
        -webkit-transform: translate(13em);
        -moz-transform: translate(13em);
        -ms-transform: translate(13em);
        -o-transform: translate(13em);
        transform: translate(13em);
    }
    /* 12em = half the width of the wrapper */
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }
    .deg45 {
        -webkit-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -moz-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -ms-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -o-transform: rotate(36deg) translate(12em) rotate(-36deg);
        transform: rotate(36deg) translate(12em) rotate(-36deg);
    }
    .lt-ie9 .deg45 {
        margin: 6.485em;
    }
    .deg90 {
        -webkit-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -moz-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -ms-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -o-transform: rotate(70deg) translate(10em) rotate(-70deg);
        transform: rotate(70deg) translate(10em) rotate(-70deg);
    }
    .deg135 {
        -webkit-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -moz-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -ms-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -o-transform: rotate(108deg) translate(8em) rotate(-108deg);
        transform: rotate(108deg) translate(8em) rotate(-108deg);
    }
    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }
    .deg180 {
        -webkit-transform: translate(-6em);
        -moz-transform: translate(-6em);
        -ms-transform: translate(-6em);
        -o-transform: translate(-6em);
        transform: translate(-6em);
    }
    .lt-ie9 .deg180 {
        margin-left: -14em;
    }
    .deg225 {
        -webkit-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -moz-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -ms-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -o-transform: rotate(240deg) translate(6em) rotate(-240deg);
        transform: rotate(240deg) translate(6em) rotate(-240deg);
    }
    .lt-ie9 .deg225 {
        margin: -10.485em;
    }
    .deg270 {
        -webkit-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -moz-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -ms-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -o-transform: rotate(297deg) translate(8em) rotate(-297deg);
        transform: rotate(297deg) translate(8em) rotate(-297deg);
    }
    .deg315 {
        -webkit-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -moz-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -ms-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -o-transform: rotate(334deg) translate(11em) rotate(-334deg);
        transform: rotate(334deg) translate(11em) rotate(-334deg);
    }
    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
}

@media (min-width: 320px) and (max-width: 479px) {
    a.centerimg {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 7% !important;
        left: 30% !important;
        width: 55% !important;
        height: 370px !important;
        margin: -2em;
    }
    .circle-container {
        position: relative;
        width: 100%;
        height: 200px;
        padding: 2.8em;
        margin: 30px 0px;
    }
    .circle-container a {
        display: block;
        overflow: hidden;
        position: absolute;
        top: 39%;
        left: 35%;
        width: 4em;
        height: 5em;
        margin: -2em;
        /* 2em = 4em/2 */
        /* half the width */
    }
    .circle-container img {
        display: block;
        width: 100%;
    }
    .deg0 {
        -webkit-transform: translate(13em);
        -moz-transform: translate(13em);
        -ms-transform: translate(13em);
        -o-transform: translate(13em);
        transform: translate(13em);
    }
    /* 12em = half the width of the wrapper */
    .lt-ie9 .deg0 {
        margin-left: 10em;
    }
    .deg45 {
        -webkit-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -moz-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -ms-transform: rotate(36deg) translate(12em) rotate(-36deg);
        -o-transform: rotate(36deg) translate(12em) rotate(-36deg);
        transform: rotate(36deg) translate(12em) rotate(-36deg);
    }
    .lt-ie9 .deg45 {
        margin: 6.485em;
    }
    .deg90 {
        -webkit-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -moz-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -ms-transform: rotate(70deg) translate(10em) rotate(-70deg);
        -o-transform: rotate(70deg) translate(10em) rotate(-70deg);
        transform: rotate(70deg) translate(10em) rotate(-70deg);
    }
    .deg135 {
        -webkit-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -moz-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -ms-transform: rotate(108deg) translate(8em) rotate(-108deg);
        -o-transform: rotate(108deg) translate(8em) rotate(-108deg);
        transform: rotate(108deg) translate(8em) rotate(-108deg);
    }
    .lt-ie9 .deg135 {
        margin: 6.485em -10.485em;
    }
    .deg180 {
        -webkit-transform: translate(-6em);
        -moz-transform: translate(-6em);
        -ms-transform: translate(-6em);
        -o-transform: translate(-6em);
        transform: translate(-6em);
    }
    .lt-ie9 .deg180 {
        margin-left: -14em;
    }
    .deg225 {
        -webkit-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -moz-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -ms-transform: rotate(240deg) translate(6em) rotate(-240deg);
        -o-transform: rotate(240deg) translate(6em) rotate(-240deg);
        transform: rotate(240deg) translate(6em) rotate(-240deg);
    }
    .lt-ie9 .deg225 {
        margin: -10.485em;
    }
    .deg270 {
        -webkit-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -moz-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -ms-transform: rotate(297deg) translate(8em) rotate(-297deg);
        -o-transform: rotate(297deg) translate(8em) rotate(-297deg);
        transform: rotate(297deg) translate(8em) rotate(-297deg);
    }
    .deg315 {
        -webkit-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -moz-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -ms-transform: rotate(334deg) translate(11em) rotate(-334deg);
        -o-transform: rotate(334deg) translate(11em) rotate(-334deg);
        transform: rotate(334deg) translate(11em) rotate(-334deg);
    }
    .lt-ie9 .deg315 {
        margin: -10.485em 6.485em;
    }
}