.hole {
position:relative;
height:700px;
width:100%;
display:none;
font-size:100%;
}
.dials{
 height: 100%;
    position: absolute;
    width: 40%;

}
.dialImages{
    position: relative;
    width: 84%;
margin-left: 8%;
}

.hole img {

position: relative;

}

.hole .basehole {
width: 100%;
background-repeat:no-repeat;
}
.holeimages{
    position: absolute;
    left: 45%;
}
.holeimages img{
height:100%;
}
#green {
top:0%;
background-repeat:no-repeat;
z-index:9;
position: relative;

}
#green img, #approaches img, #fairway img, #tees img{
    position: absolute;
}

#approaches {

background-repeat:no-repeat;
z-index:9;
position: relative;

}

#fairway {

position: relative;
background-repeat:no-repeat;
z-index:9;

}

#tees {

position: relative;
background-repeat:no-repeat;

z-index:9;
}
.holeimages{
    position: absolute;
}
.dialImages .rotation{
    width: 115% !important;
margin-left: -6%;
margin-top: -6%;
}

.dialImages .step {
    width: 50%;
    bottom: -8%;
    right: -33%;
    visibility: visible;
    z-index: 100;
}
.clockface {
width:115%;
}

.striping {
width:35%;
position:absolute;
}

.rolling {
    top: 33%;
    width: 10%;
    left: -3px;
    right: 0;
    margin: 0 auto;
}

.comment .comment-item {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 24px;
}
.comment img {
    width: 12%;
    transform: rotate(90deg);
}
.rotate0deg {
    transform: rotate(0deg);
}
.rotate30deg {
    transform: rotate(30deg);
}
.rotate60deg {
    transform: rotate(60deg);
}
.rotate90deg {
    transform: rotate(90deg);
}
.rotate120deg {
    transform: rotate(120deg);
}
.rotate150deg {
    transform: rotate(150deg);
}

#greenStriping {
height:12%;
top:5.8%;
left:38%;
width:46%;
background-repeat:no-repeat;
z-index:9;
visibility:hidden;
}

#fairwayStriping {
background-repeat:no-repeat;
height:54%;
left:19.5%;
top:18%;
width:46%;
z-index:9;
visibility:hidden;
}

#approachStriping {
background-repeat:no-repeat;
height:19%;
left:35.5%;
top:5%;
width:46%;
z-index:9;
visibility:hidden;
}

#teesStriping {
background-repeat:no-repeat;
height:18%;
left: 16.3%;
    top: 77.2%;
width:46%;
z-index:9;
visibility:hidden;
}

.clock {
z-index:20;
width: 100%;
position: relative !important;
}

.rotation {
width: 105% !important;
   left: -2%;
    top: 2%;
}

.clockDirection {
   left: 8%;
    top: 8%;
    width: 80% !important;
}

.typeTitle {
text-align:center;
width:100%;
}

#approch {
background-repeat:no-repeat;
height:115px;
left:147px;
position:absolute;
top:128px;
width:108px;
visibility:hidden;
z-index:10;
}

#greenClock {
position:absolute;
top:3px;
left:50px;
width:250px;
height:180px;
background-repeat:no-repeat;
background-image:url( '../images/holediagram/gclock.png ');
visibility:hidden;
z-index:11;
}

#approchClock {
background-image:url( "../images/holediagram/approchclock.png ");
background-repeat:no-repeat;
height:96px;
left:160px;
position:absolute;
top:166px;
visibility:hidden;
width:96px;
z-index:11;
}

#gclean {
position:absolute;
top:30px;
left:25px;
width:235px;
height:90px;
background-repeat:no-repeat;
background-image:url( '../images/holediagram/gcleanup.png ');
background-position:-230px 0px;
visibility:hidden;
}

#aclean {
background-image:url( "../images/holediagram/acleanup.png ");
background-repeat:no-repeat;
height:50px;
left:129px;
position:absolute;
top:189px;
visibility:hidden;
width:150px;
z-index:12;
}

#fclean {
position:absolute;
top:226px;
left:100px;
width:200px;
height:230px;
background-repeat:no-repeat;
background-image:url( '../images/holediagram/fcleanup.png ');
visibility:hidden;
}

#fairwayClock {
background-image:url( "../images/holediagram/fairwayclock.png ");
background-repeat:no-repeat;
height:200px;
left:113px;
position:absolute;
top:247px;
visibility:hidden;
width:190px;
}

#tee {
position:absolute;
top:575px;
left:105px;
width:135px;
height:160px;
background-repeat:no-repeat;
visibility:hidden;
}

#teeClock {
position:absolute;
top:555px;
left:70px;
width:150px;
height:150px;
background-repeat:no-repeat;
background-image:url( '../images/holediagram/teeclock.png ');
visibility:hidden;
}

#tclean {
position:absolute;
top:547px;
left:65px;
width:160px;
height:165px;
background-repeat:no-repeat;
background-image:url( '../images/holediagram/tcleanup.png ');
visibility:hidden;
}

.gcounter {
background-position:-0px 0px !important;
}

.fcounter {
background-position:-205px 0px;
}

.tcounter {
background-position:-163px 0px;
}

.acounter {
background-position:-150px 0px;
}

.crossg {
background-image:url( '../images/holediagram/holepattern.png ');
}

.crossf {
background-image:url( '../images/holediagram/fairwaypattern.png ');
}

.crosst {
background-image:url( '../images/holediagram/teepattern.png ');
}

.crossa {
background-image:url( '../images/holediagram/approchpattern.png ');
}

.g1 {
background-position:-145px 0px;
}

.g2 {
background-position:-290px 0px;
}

.g3 {
background-position:-435px 0px;
}

.g4 {
background-position:-580px 0px;
}

.g5 {
background-position:-725px 0px;
}

.g6 {
background-position:0px 0px;
}

.a1 {
background-position:-110px 0px;
}

.a2 {
background-position:-220px 0px;
}

.a3 {
background-position:-330px 0px;
}

.a4 {
background-position:-440px 0px;
}

.f1 {
background-position:-144px 0px;
}

.f2 {
background-position:-288px 0px;
}

.f3 {
background-position:-432px 0px;
}

.f4 {
background-position:-576px 0px;
}

.f5 {
background-position:-720px 0px;
}

.f6 {
background-position:0px 0px;
}

.fb1 {
background-position:-864px 0px;
}

.fb2 {
background-position:-1008px 0px;
}

.fc {
background-position:-1152px 0px;
}

.t2 {
background-position:-262px 0px;
}

.t3 {
background-position:-393px 0px;
}

.t4 {
background-position:-524px 0px;
}

.t5 {
background-position:-655px 0px;
}

.t6 {
background-position:0px 0px;
}

.tb1 {
background-position:-786px 0px;
}

.tb2 {
background-position:-917px 0px;
}

.tb31 {
background-position:-1048px 0px;
}

.tb32 {
background-position:-1179px 0px;
}

.hole.small-hole {
    height: auto;
}
.small-hole .do-not-show {
    display: none;
}
.hole-location {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}
.dials.list-mow-patterns {
    position: relative;
}
.list-mow-patterns {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
}
.list-mow-patterns .clockface {
    width: 42%;
    margin-bottom: 20px;
}
.small-hole .dialImages .step {
    width: 40%;
    bottom: -12%;
    right: -14%;
}
.small-hole .comment {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

@media screen and (max-width: 900px) {
    .rolling {
        top: 32%;
        width: 10%;
        left: -2px;
    }
}