body{
 	font-family: Arial, Helvetica, sans-serif;

 }

 .clock-dial{
 	width:600px;
 	height:600px;
     cursor: move;
 	border-radius:50%;
 	margin:0 auto;
 
 

 }

 .c2 .hour {
    font-size: 35px;
    font-weight: 900;
     
    color: #000;
    font-family: sans-serif;
    position: absolute;
 
}
 .c1 .hour {
    font-size: 35px;
    font-weight: 900;
    -webkit-text-stroke: black;
    color: #fff;
    font-family: sans-serif;
    position: absolute;
    -webkit-text-stroke-width: thin;
}

 .c3 .hour {
    font-size: 35px;
    font-weight: 900;
     
    color: #fff;
    font-family: sans-serif;
    position: absolute;
 
}


.c3 .hide{
  display: none;
}
img.clockstyle {
    width: 100px;
    height: 100px;
    border: 1px solid;
  
}
.choose-clockstyle input[type="radio"] {
    display: none;
}
.choose-clockstyle input[type="radio"]:checked + label span {
    background-color: #eb485317;
}
.choose-clockstyle input[type="radio"] + label span {
    border: 1px solid #FFFFFF;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,0.33);
    border-radius: 6px;
    padding: 50px 5px;
    font-size: 15px;
    height: 100px;
    color: #5E6977;
    font-weight: 500;
    background-color: #fff;
    cursor: pointer;
}

  .photoframe:hover  .hour-hand-wrapper {
      
  display: none;
    width: 0px;
  height: 0px;
}   .photoframe:hover  .second-hand-wrapper {
  display: none;
  
    width: 0px;
  height: 0px;
} .photoframe:hover  .minute-hand-wrapper {

  display: none;
    width: 0px;
  height: 0px;
}

@media(hover: hover) and (pointer: fine) {
  .photoframe:hover  .hour-hand-wrapper {
      
  display: none;
    width: 0px;
  height: 0px;
}   .photoframe:hover  .second-hand-wrapper {
  display: none;
  
    width: 0px;
  height: 0px;
}

 .photoframe:hover  .minute-hand-wrapper {

  display: none;
    width: 0px;
  height: 0px;
 
}
}
 
 .point{
 	width:20px;
 	height: 20px;
 	background-color: #fff;
 	border-radius: 50%;
 	position: absolute;
 	top: 290px;
 	left: 290px;
 }

 .hour{
 	font-size: 30px;
 	font-weight: bold;
 	color: #fff;
 	position: absolute;
 }


 .hour-1{
 	top:40px;
 	left:412px;
 } 
 .hour-2{
 	top:125px;
 	right: 78px;
 }
  .hour-3{
 	top:275px;
 	right: 40px;
 }
  .hour-4{
 	top:400px;
 	right: 78px;
 } 
 .hour-5{
 	top:474px;
 	right: 130px;
 } 
 .hour-6{
 	bottom:30px;
 	left: 274px;
 }
  .hour-7{
 	top:484px;
 	left: 130px;
 }
  .hour-8{
 	top:400px;
 	left: 45px;
 } 
 .hour-9{
  top:275px;
 	left: 10px;
 } 
 .hour-10{
 	top:125px;
 	left: 45px;
 } 
 .hour-11{
 	top:40px;
 	left: 130px;
 } 
 .hour-12{
 	top:15px;
 	left: 274px;
 }


.hexagon .hour-1 {
    top: 55px;
    left: 436px;
}


.hexagon .hour-2 {
    top: 160px;
    right: 86px;
}
  .hexagon  .hour-3{
  top:290px;
  right: 20px;
 }
.hexagon  .hour-4 {
    top: 415px;
    right: 90px;
}
.hexagon .hour-5 {
    top: 525px;
    right: 150px;
}
  .hexagon .hour-6{
  bottom:30px;
  left: 300px;
 }
  .hexagon  .hour-7{
  top:525px;
  left: 150px;
 }
.hexagon  .hour-8 {
    top: 415px;
    left: 90px;
}
 .hour-9{
  top:290px;
  left: 20px;
 } 
  .hexagon .hour-10{
   top: 160px;
  left: 86px;
 } 
  .hexagon .hour-11{
 top: 55px;
  left: 150px;
 } 
  .hexagon .hour-12{
  top:55px;
  left: 300px;
 }

 .square .hour-1{
  top:10px;
  right: 150px;
 } 
 .square .hour-2{
  top:150px;
  right: 10px;
 }
   .square .hour-3{
  top:300px;
  right: 10px;
 }
   .square .hour-4{
  top:450px;
  right:10px;
 } 
  .square .hour-5{
 top:542px;
  right: 135px;
 } 
  .square .hour-6{
  bottom:4px;
  left: 300px;
 }
  .square  .hour-7{
  top:544px;
  left: 150px;
 }
   .square .hour-8{
  top:450px;
  left: 10px;
 } 
  .square .hour-9{
  top:300px;
  left: 10px;
 } 
 .square  .hour-10{
  top:150px;
  left:10px;
 } 
  .square .hour-11{
  top:10px;
  left: 150px;
 } 
  .square .hour-12{
  top:10px;
  left: 300px;
 }



 .rounded .hour-1{
  top:10px;
  right: 150px;
 } 
 .rounded .hour-2{
  top:150px;
  right: 10px;
 }
   .rounded .hour-3{
  top:300px;
  right: 10px;
 }
   .rounded .hour-4{
  top:450px;
  right:10px;
 } 
  .rounded .hour-5{
 top:544px;
  right: 150px;
 } 
  .rounded .hour-6{
  bottom:10px;
  left: 300px;
 }
  .rounded  .hour-7{
  top:544px;
  left: 150px;
 }
   .rounded .hour-8{
  top:450px;
  left: 10px;
 } 
  .rounded .hour-9{
  top:300px;
  left: 10px;
 } 
 .rounded  .hour-10{
  top:150px;
  left:10px;
 } 
  .rounded .hour-11{
  top:10px;
  left: 150px;
 } 
  .rounded .hour-12{
  top:10px;
  left: 300px;
 }


 .minute-hand-wrapper{
  
 	width: 400px;
 	height: 400px;
  
 	position: absolute;
 	top: 100px;
 	left:100px;
 	border-radius: 50%;
 }

 .minute-hand{
   position: relative;
 }

 .minute-hand .hand{
 	width: 6px;
 	height: 200px;
 	background-color: #fff;
 	position: absolute;
 	left: 198px;

 }

 .minute-hand .arrow{
 	font-size: 30px;
 	font-weight: bold;
 	color: #fff;
 	transform: rotate(180deg);
 	position: absolute;
 	left: 193px;
 	top: -15px;
 }


 .hour-hand-wrapper{
 
 	width: 300px;
 	height: 300px;
  
 	position: absolute;
 	top: 150px;
 	left: 150px;
 	border-radius: 50%;
 }

 .hour-hand{
   position: relative;
 }

  .hour-hand .hand{
 	width: 7px;
 	height: 150px;
 	background-color: #fff;
 	position: absolute;
 	left: 148px;

 }

  .hour-hand .arrow{
 	font-size: 30px;
 	font-weight: bold;
 	color: #fff;
 	transform: rotate(180deg);
 	position: absolute;
 	left: 143px;
 	top: -15px;
 }


 .second-hand-wrapper{

 	width: 350px;
 	height: 350px;
  
 	position: absolute;
 	top: 125px;
 	left: 125px;
 	border-radius: 50%;
 }

 .second-hand{
   position: relative;
 }

 .second-hand .hand{
 	width: 4px;
 	height: 175px;
 	background-color: #fff;
 	position: absolute;
 	left: 174px;
 }

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

  .square .hour-1 {
    top: 10px;
    right: 125px;
}
.square .hour-2 {
    top: 125px;
    right: 10px;
}
.square .hour-3 {
    top: 290px;
    right: 10px;
}
.square .hour-4 {
    top: 450px;
    right: 10px;
}
.square .hour-5 {
    top: 545px;
    right: 125px;
}
.square .hour-6 {
    bottom: 4px;
    left: 275px;
}
.square  .hour-7 {
    top: 544px;
    left: 125px;
}
.square .hour-8 {
    top: 450px;
    left: 10px;
}
.square .hour-9 {
    top: 290px;
    left: 10px;
}
.square  .hour-10 {
    top: 125px;
    left: 10px;
}
.square .hour-11 {
    top: 10px;
    left: 125px;
}
.square .hour-12 {
    top: 10px;
    left: 275px;
}
}