.main-content {
  padding: 10px 0 30px;
  counter-reset: section;
}

.main-content > section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  width: 450px;
  min-width: 95%;
  height: 80px;
  background: rgba(255,255,255,1);
  border: 1px dashed grey;
  margin: 10px auto;
}

.main-content > section:after {
  display: block;
  position: absolute;
  width: 30px;
  height: 30px;
  top: -1px;
  left: -1px;
  color: #fff;
  text-align: center;
  line-height: 30px;
  background: rgba(0,0,0,0.35);
  border-bottom-right-radius: 50%;
  counter-increment: section;
  content: ""counter(section)"";
}

ul[class^="pg"]{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 85%;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

ul[class^="pg"] li{
  text-align: center;
}

ul[class^="pg"] li a {
  display: block;
  font-size: 1.6em;
  text-decoration: none;
  padding: 5px;
}

ul[class^="pg"] li a.pg_middle{
  pointer-events: none;
  background: transparent;
  border: none;
}

/* pg1 */

.pg1 li{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.pg1 a{
  color: #333;
  background: rgba(255,255,255,0.8);
  border: 1px solid ;
  -webkit-transition: all 180ms ease-in-out;
          transition: all 180ms ease-in-out;
}

.pg1 a.pg_active{
  font-weight: bold;
  color: #fff;
  background: #000;
}

.pg1 a:active{
  background: #000 !important;
}

.pg1 a:hover:not(.pg_active){
  color: #fff;
  background: #282C2D;
  -webkit-transition: all 0s;
          transition: all 0s;
}

.pg1 li:nth-child(-n+2) a,
.pg1 li:nth-last-child(-n+2) a{
	background: rgba(0,0,0,0.1);
}

/* pg2 */

.pg2{
  background: #000;
}

.pg2 a{
  color: #fefefe;
  background: #353746; 
  padding: 5px 10px !important;
  border: 2px solid transparent;
  box-shadow: 1px 1px 0px 1px #555;
  -webkit-transition: box-shadow 250ms linear;
          transition: box-shadow 250ms linear;
}

.pg2 a.pg_active{
  font-weight: bold; 
  color: #000;
  text-shadow: 1px 1px #fff, 2px 2px #000;
  background: #888;
}

.pg2 a:not(.pg_active):active{
  color: #fff !important;
}

.pg2 a:hover:not(.pg_active){
  color: #000; 
  background: grey;
  box-shadow: none;
}

/* pg3 */

.pg3 a:not(.pg_middle){
  color: #fff;
  background: #D04235;
  padding: 5px 10px !important;
  border-radius:50%; 
  box-shadow: 0 0 0 2px #282C2D, 0 0 2px 2px #fff inset;
  margin-right: 6px;
}

.pg3 a:hover:not(.pg_middle):not(.pg_active){
  color: #282C2D;
  background: #fff;
}

.pg3 a.pg_middle{
  color: #D04235;
}

.pg3 a.pg_active{
  background: #282C2D;
  border-radius: 0;
}

.pg3 li:first-child a,
.pg3 li:last-child a{
  padding: 3px 15px 7px !important;
  border-radius: 0;
}

.pg3 li:first-child a:hover,
.pg3 li:last-child a:hover{
  color: #fff;
  background: #282C2D;
}

.pg3 a:not(.pg_active):active{
  color: #fff !important;
  background: #282C2D !important;
}

/* pg4 */

.pg4{
  background: #000; 
  overflow: hidden;
}

.pg4 li{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.pg4 a{
  position: relative;
  z-index: 0; 
  line-height:1.3;
  color: #fff;
}

.pg4 li:not(:last-child) a{
  border-right: 1px solid #fff;
}

.pg4 a:after{  
   display: block;
   position: absolute;
   z-index: -1;
   content: "";
   width: 100%;
   height: 100%;
   top: 0;
   left: 0; 
   background: #890000;
   -webkit-transform: scaleY(0);
           transform: scaleY(0);
   -webkit-transform-origin: 50% 100%;
           transform-origin: 50% 100%;
   -webkit-transition: all 150ms ease-in-out;
           transition: all 150ms ease-in-out;
}

.pg4 a:hover:after,
.pg4 a.pg_active:after{
   -webkit-transform: scaleY(1);
           transform: scaleY(1);
}

.pg4 li:first-child a:after,
.pg4 li:last-child a:after{
   display: none;
}

.pg4 li:first-child a,
.pg4 li:last-child a{
   background: #890000;
}

.pg4 li:first-child a:hover,
.pg4 li:last-child a:hover {
  color: #c40000;
  background: #000;
}

/* not the first,the last and the active */
.pg4  li:not(:first-child):not(:last-child) a:not(.pg_active):active{
  color: #000;  
}

/* pg5 */

.pg5{
  background: #fff;
}

.pg5 li{
  -webkit-box-flex:1;
      -ms-flex:1;
          flex:1;
  line-height: 1.2;
}

.pg5 li a{
  color:#444;
}

.pg5 li:not(:first-child):not(:last-child) { 
   border-right: 1px solid grey;
  -webkit-transform: skew(-25deg);
          transform: skew(-25deg);
} 

.pg5 li:nth-child(2){
  border-left: 1px solid grey;
}
	
.pg5 li:not(:first-child):not(:last-child) a{
   -webkit-transform: skew(25deg);
           transform: skew(25deg);
}

.pg5 a.pg_prev,
.pg5 a.pg_next{
  position: relative;
}

.pg5  a.pg_prev i{
  position: absolute;
  top: 20%;
  left: 0%;
}

.pg5  a.pg_next i{ 
  position: absolute;
  top: 18%;
  left: 88%;
}

.pg5 li.pg_active,
.pg5 li:not(:first-child):not(:last-child):hover{
	text-shadow: 1px 1px #fff, 2px 2px #888;
	background: #eee;
	-webkit-transition: all 180ms;
	        transition: all 180ms;
}

.pg5 li.pg_active a,
.pg5 li:hover a{
  color: #000;
}

.pg5 li.pg_middle{
  pointer-events:none;
}

.pg5  li:not(:first-child):not(:last-child):not(.pg_active) a:active{
  color: #555;  
  text-shadow: none;
}

/* pg6 */ 

.pg6{
  position: relative; 
  z-index: 0;
}

.pg6:after{ 
  display: block;
  position: absolute;
  z-index: -1;	
  content: "";
  width: 100%;
  height: 4px;
  top: 50%;
  left: 0;
  background: #3399ff;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.pg6 li a { 
  position: relative;
  z-index: 0;  
  line-height: 1.6em;
  color: #fff;
  width: 1.6em;
  height: 1.6em;
  padding: 0 !important;
}

.pg6 li a:after{  
  display: block;
  position: absolute;
  z-index: -1;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: #3399ff;
  border: 1px solid #3399ff;
  box-shadow: 0 0 2px 2px #fff inset;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

.pg6 a:hover:after,
.pg6 li a.pg_active:after{
 background: #004d99;
 -webkit-transform: rotate(180deg);
         transform: rotate(180deg);
 -webkit-transition: all 200ms ease-in-out;
         transition: all 200ms ease-in-out;
}

.pg6 a:active:after{
  background: #3399ff;
}

/* pg7 */ 

.pg7 li{
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}

.pg7 a{
  color: #111;
  border-top: 2px solid lightgrey;
  border-bottom: 2px solid lightgrey;
}

.pg7 li:first-child a{
  border-radius: 30% 0 0 30%;
  background: #d4f8d4;
}

.pg7 li:last-child a{ 
  background: #d4f8d4;
  border-radius: 0 30% 30% 0;
}

.pg7 li a.pg_prev,
.pg7 li a.pg_next{
  background: #d4f8d4;
  border-left: 2px solid lightgrey;
  border-right: 2px solid lightgrey;
}

.pg7 a.pg_active,
.pg7 li a:hover{  
  background: lightgreen;
  border-top: 2px solid grey;
  border-bottom: 2px solid grey;
}

.pg7 a:active{
  color: grey;
}

/* pg8 */

.pg8{
  padding: 8px;
}

.pg8 a{ 
  font-weight: 400;
  color: #444;
  text-shadow: 0 0 1px #fff;
  padding: 5px 10px !important;
  background: -webkit-linear-gradient(270deg, #fff 60%, rgba(0,0,0,0.2));
  background: -webkit-linear-gradient(top, #fff 60%, rgba(0,0,0,0.2) );
  background: linear-gradient(180deg, #fff 60%, rgba(0,0,0,0.2) );
  border: 1px solid rgba(0,0,0,0.5);
  box-shadow: 1px 2px 1px 1px rgba(0,0,0,0.4);
  -webkit-transition: -webkit-transform 200ms ease-in-out;
          transition: -webkit-transform 200ms ease-in-out;
          transition: transform 200ms ease-in-out;
          transition: transform 200ms ease-in-out, -webkit-transform 200ms ease-in-out;
} 

.pg8 a.pg_active,
.pg8 a:hover{
  color: #fff;
  text-shadow: 1px 1px 1px #444;
  background: rgba(0,0,0,0.4);
  box-shadow: 0 0 10px #fff inset;
  -webkit-transform: translate(1px,2px);
          transform: translate(1px,2px);
}

.pg8 li a.pg_middle{  
  text-shadow: none;
  box-shadow: none;
}

.pg8 li:nth-child(-n+2) a,
.pg8 li:nth-last-child(-n+2) a{
	text-shadow: none;
}

.pg8 a:active{
  color: #111;
}

/* pg9 */

#pg9{
  height: 110px;
}

.pg9{
  position: relative; 
  z-index: 0;
}

.pg9:after{
  display: block;
  position: absolute;
  z-index: -1;	
  content: "";
  width: 100%;
  height: 4px;
  top: calc(140% - 5px);
  left: 0;
  background: #bbb;
}

.pg9 a{
  position: relative;
  z-index: 0;
  color: #999;
  padding: 5px 10px !important;
  border: 3px solid transparent;
  border-radius: 50%;
}

.pg9 a:not(.pg_middle):after{ 
  display: none;
  position: absolute; 
  z-index: 1;
  content: "";
  width: 100%;
  height: 4px;
  top: 140%;
  left: 0;
  background: #602020;
}

.pg9 a:not(.pg_middle):before{ 
  display: none;
  position: absolute;
  z-index: -1;
  content: "";
  width: 4px; 
  height: 40%;
  top: 100%;
  left: 50%;
  background: #602020; 
  -webkit-transform: translateX(-50%); 
          transform: translateX(-50%);
}

.pg9 a.pg_active,
.pg9 a:hover{  
  font-weight: bold;
  color: #111;
 /* text-shadow: 1px 1px 0 #000, -1px 1px 0 #000,  -1px -1px 0 #000, 1px -1px 0 #000;*/
  background: #fdfdfd; 
  border-color: #602020;
  box-shadow: 0 0 10px #ddd inset;
  -webkit-transition: all 200ms linear;
          transition: all 200ms linear;
}

.pg9 a.pg_active:before,
.pg9 a.pg_active:after,
.pg9 a:hover:not(.pg_middle):before,
.pg9 a:hover:not(.pg_middle):after{
  display: block;
}

.pg9 a:active{	
  color: #fff;
  background: #bf4040;
  -webkit-transition: all 0s;
          transition: all 0s;
}

/* pg10 */

.viewer {
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

.pg10 a{ 
  position: relative;  
  color: #f5f5f5;
  padding: 5px 10px !important;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.pg10 a:before, .pg10 a:after {
  display: block;
  position: absolute;
  content: attr(data-name);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  color: #fff;
  padding-top: 5px;
  border-radius: 50%;
  background: #364f6b;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #999, 0 0 10px #444, 0 0 1px 2px #ccc inset;
}

.pg10 a:after{ 
  color: #000;
  background: #cabfab;
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

.pg10 li:not(:first-child):not(:last-child) a:not(.pg_active):hover,
.pg10  a.pg_active
{
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.pg10  a.pg_prev:hover:before,
.pg10  a.pg_next:hover:before{
   box-shadow: none;
}
.pg10  a.pg_prev:before,
.pg10  a.pg_next:before{
   background: #1c2937;
}

.pg10 a:active:before {
  box-shadow: none;
  -webkit-transition: all 0s;
  transition: all 0s;
}