@charset "UTF-8"; /* Sets the encoding of the style sheet to Unicode UTF-8. Don't move it.        */



 /* ======================================================================== */
 /* ======================================================================== */
 /* =========================Circle  ============================== */
 /* ======================================================================== */
 /* ======================================================================== */
 .circle-menu {  position: relative;}
.circle-menu span {
    position: relative;
    width: 100%;
    height: auto;
    color: #000;
    display: block;
    color: #fff;
    text-align: center;
    padding-top: 45px;
}




 /*
   ul margin 30
   ul size 600

   center of center 15 + 300 = 315

      315 | center of center
  - 250/2 | radius of center
   = 140  | top and left for .center
 */
#first li:nth-child(even) a {  /*background-color: rgba(125, 200, 110, 0.8);*/}
#first li:nth-child(1) {transform: rotate(22.5deg) skew(45deg);}
#first li:nth-child(2) {transform: rotate(67.5deg) skew(45deg);}
#first li:nth-child(3) {transform: rotate(112.5deg) skew(45deg);}
#first li:nth-child(4) {transform: rotate(157.5deg) skew(45deg);}
#first li:nth-child(5) {transform: rotate(202.5deg) skew(45deg);}
#first li:nth-child(6) {transform: rotate(247.5deg) skew(45deg);}
#first li:nth-child(7) {transform: rotate(292.5deg) skew(45deg);}
#first li:nth-child(8) {transform: rotate(337.5deg) skew(45deg);}

 #second li:nth-child(even) a {  /*background-color: rgba(125, 200, 110, 0.8);*/}
 #second li:nth-child(1) {transform: rotate(22.5deg) skew(45deg);}
 #second li:nth-child(2) {transform: rotate(67.5deg) skew(45deg);}
 #second li:nth-child(3) {transform: rotate(112.5deg) skew(45deg);}
 #second li:nth-child(4) {transform: rotate(157.5deg) skew(45deg);}
 #second li:nth-child(5) {transform: rotate(202.5deg) skew(45deg);}
 #second li:nth-child(6) {transform: rotate(247.5deg) skew(45deg);}
 #second li:nth-child(7) {transform: rotate(292.5deg) skew(45deg);}
 #second li:nth-child(8) {transform: rotate(337.5deg) skew(45deg);}


#second a:hover,#second a:focus{
  background-color: transparent; text-decoration: none;
  -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none;
}
#second li:hover,#second li:focus{
  outline: none;
}
  .square-circle-list {width:90%; margin: 0 auto 40px auto; max-width: 300px;}
  .square-circle-list li{width: 100%; position: relative; margin-bottom: 3px;}
  .square-circle-title{font-size: 16px; margin-bottom: 10px;}
  .square-circle-list a{
    padding: 10px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    width: 100%;
    color: #fff;
    background-color: rgba(213, 52, 52, .1) ;

  }
/* ======================================================================== */
/* ======================================================================== */
/* ========================= MEDIA QUERIES   ============================== */
/* ======================================================================== */
/* ======================================================================== */


.square-circle{display:none;}
/* ======================================================================== */
/* =========================   XXX Largest    ========================== */
/* ======================================================================== */
@media  (min-width : 1641px){
  .square-circle{display:none;}
  .circle-menu span {font-size: 28px; margin-top: 15px;}
  .circle-menu .center{  position: absolute;  width: 250px; height: 250px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;  /*display: none;*/ }
  .circle-menu {width: 630px;  height: 630px; float: right;  margin: 10px 0 50px 0;  }
  .circle-menu .center{  top: 190px;  left: 190px;}

  #first{ position: absolute;  width: 600px;  height: 600px;  margin: 15px;  padding: 0; list-style: none; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;  background: url('/assets_V3/img/first.png'); background-position: center center;}
  #first li {  position: absolute; top: 0px;  left: 0px;width: 300px;  height: 300px; transform-origin: 100% 100%; overflow: hidden;}
  #first li a{ display: block;width: 315px; height: 315px;margin-top: 40px; margin-left: 40px; background: rgba(225, 0, 0, 0); transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

  #second{ position: absolute;  width: 600px;  height: 600px;  margin: 15px;padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;  background:url('/assets_V3/img/third.png');  background-position: center center;}

  #second li {   position: absolute;   top: 0px;  left: 0px;  width: 300px; height: 300px;transform-origin: 100% 100%; overflow: hidden;}

  #second li a{  display: block; width: 345px; height: 345px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
      transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s; }
}

/* ======================================================================== */
/* =========================   Largest    ========================== */
/* ======================================================================== */
@media  (min-width : 1601px) and (max-width : 1640px) {
  .square-circle{display:none;}
  .circle-menu span {font-size: 28px;  margin-top: 15px;}
  .circle-menu .center{  position: absolute;  width: 250px; height: 250px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;  /*display: none;*/ }
  .circle-menu {width: 630px;  height: 630px; float: right;  margin: 10px 0 50px 0; }
  .circle-menu .center{  top: 190px;  left: 190px;}

  #first{ position: absolute;  width: 600px;  height: 600px;  margin: 15px;  padding: 0; list-style: none; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;  background: url('/assets_V3/img/first.png'); }
  #first li {  position: absolute; top: 0px;  left: 0px;width: 300px;  height: 300px; transform-origin: 100% 100%; overflow: hidden;}
  #first li a{ display: block;width: 315px; height: 315px;margin-top: 40px; margin-left: 40px; background: rgba(225, 0, 0, 0); transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

    /*width: first width + first margin * 2 */
     /*height: first height + first margin * 2 */
  #second{ position: absolute; width: 600px;  height: 600px;  margin: 15px; padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4; background:url('/assets_V3/img/third.png'); background-position: center center; }

  #second li {   position: absolute;   top: 0px;  left: 0px;  width: 315px; height: 315px;transform-origin: 100% 100%; overflow: hidden;}

  #second li a{  display: block; width: 345px; height: 345px; margin-top: 40px;margin-left: 40px; /*background: rgba(255, 0, 0, 0);*/
      transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s; }
}


/* ======================================================================== */
/* =========================   Largest    ========================== */
/* ======================================================================== */
@media  (min-width : 1201px) and (max-width : 1600px) {
  .square-circle{display:none;}
  .circle-menu span {font-size: 28px;  margin-top: 15px;}
  .circle-menu .center{  position: absolute;  width: 250px; height: 250px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;  /*display: none;*/ }
  .circle-menu {width: 580px;  height: 580px; float: right;  margin: 10px 0 50px 0; }
  .circle-menu .center{  top: 165px;  left: 165px;}

  #first{ position: absolute;  width: 550px;  height: 550px;  margin: 15px;  padding: 0; list-style: none; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;  background: url('/assets_V3/img/first-550.png');  background-position: center center;}
  #first li {  position: absolute; top: 0px;  left: 0px;width: 275px;  height: 275px; transform-origin: 100% 100%; overflow: hidden;}
  #first li a{ display: block;width: 295px; height: 295px;margin-top: 40px; margin-left: 40px; transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}


  #second{ position: absolute; width: 580px;  height: 580px;  margin: 0px; padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;  background: url('/assets_V3/img/third-550.png');  background-position: center center;}
  #second li {   position: absolute;   top: -30px;  left: -30px;  width: 320px; height: 320px;transform-origin: 100% 100%; overflow: hidden;}

  #second li a{  display: block; width: 335px; height: 335px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
  transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

}

/* ======================================================================== */
/* ========================= Second Largest    =========================== */
/* ======================================================================== */

@media (min-width : 993px) and (max-width : 1200px) {
  .square-circle{display:none;}
  .circle-menu span {font-size: 28px;  margin-top: 15px;}
  .circle-menu .center{  position: absolute;  width: 250px; height: 250px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;  /*display: none;*/ }
  .circle-menu {width: 580px;  height: 580px; margin: 20px auto 50px auto;}
  .circle-menu .center{  top: 165px;  left: 165px;}

  #first{ position: absolute;  width: 550px;  height: 550px;  margin: 15px;  padding: 0; list-style: none; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;  background: url('/assets_V3/img/first-550.png');  background-position: center center;}
  #first li {  position: absolute; top: 0px;  left: 0px;width: 275px;  height: 275px; transform-origin: 100% 100%; overflow: hidden;}
  #first li a{ display: block;width: 295px; height: 295px;margin-top: 40px; margin-left: 40px; transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}


  #second{ position: absolute; width: 580px;  height: 580px;  margin: 0px; padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;  background: url('/assets_V3/img/third-550.png');  background-position: center center;}
  #second li {   position: absolute;   top: -30px;  left: -30px;  width: 320px; height: 320px;transform-origin: 100% 100%; overflow: hidden;}

  #second li a{  display: block; width: 335px; height: 335px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
  transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

}

/* ======================================================================== */
/* =========================   Second  Smallest  ========================== */
/* ======================================================================== */
@media (min-width : 769px) and (max-width : 992px) {
  .square-circle{display:none;}
  .circle-menu span {font-size: 28px;   margin-top: 15px;}
  .circle-menu .center{  position: absolute;  width: 250px; height: 250px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;  /*display: none;*/ }
  .circle-menu {width: 580px;  height: 580px; margin: 20px auto;}
  .circle-menu .center{  top: 165px;  left: 165px;}

  #first{ position: absolute;  width: 550px;  height: 550px;  margin: 15px;  padding: 0; list-style: none; border-radius: 50%; overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;  background: url('/assets_V3/img/first-550.png');  background-position: center center;}
  #first li {  position: absolute; top: 0px;  left: 0px;width: 275px;  height: 275px; transform-origin: 100% 100%; overflow: hidden;}
  #first li a{ display: block;width: 295px; height: 295px;margin-top: 40px; margin-left: 40px; transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}


  #second{ position: absolute; width: 580px;  height: 580px;  margin: 0px; padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;  background: url('/assets_V3/img/third-550.png');  background-position: center center;}
  #second li {   position: absolute;   top: -30px;  left: -30px;  width: 320px; height: 320px;transform-origin: 100% 100%; overflow: hidden;}

  #second li a{  display: block; width: 335px; height: 335px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
  transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}
}

/* ======================================================================== */
/* =========================        Smallest    =========================== */
/* ======================================================================== */
@media (min-width : 470px) and (max-width : 768px) {
    .square-circle{display:none;}
  .square-circle-list {width:90%; margin: 0 5% 10px 5%;}
  .square-circle-list li{width: 100%; position: relative; margin-bottom: 3px;}
  .square-circle-title{font-size: 16px; margin-bottom: 10px;}
  .square-circle-list a{
    padding: 10px 10px;
    display: inline-block;
    border: 1px solid #ccc;
    width: 100%;
    color: #fff;
    background-color: rgba(213, 52, 52, .1);

  }

.circle-menu span {font-size: 16px;  margin-top: 0px;}
.circle-menu {width: 430px;  height: 430px;   margin: 10px auto 50px auto;}
.circle-menu .center{  position: absolute;  width: 170px; height: 170px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;top: 131px;  left: 129px; opacity: 1;}



#first{ position: absolute;  width: 400px;  height: 400px;
  margin: 15px;  padding: 0; list-style: none; border-radius: 50%;
  overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/assets_V3/img/first.png');}

#first li {  position: absolute; top: 0px;  left: 0px;width: 200px;  height: 200px; transform-origin: 100% 100%; overflow: hidden;}
#first li a{ display: block;width: 280px; height: 280px;margin-top: 40px; margin-left: 40px; background: rgba(225, 0, 0, 0); transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

#second{ position: absolute;  width: 400px;  height: 400px;  margin: 15px;padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;

      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image:url('/assets_V3/img/third.png');}


#second li {   position: absolute;   top: 0px;  left: 0px;  width: 200px; height: 200px;transform-origin: 100% 100%; overflow: hidden;}
#second li a{  display: block; width: 245px; height: 245px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
      transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s; }

}

/* ======================================================================== */
/* =========================  XXx   Smallest    =========================== */
/* ======================================================================== */
@media (min-width : 344px) and (max-width : 469px) {
    .square-circle{display:block;}

  .circle-menu span {font-size: 12px;   margin-top: 0px;}
  .right-box{padding: 0px;}
.circle-menu {width: 330px;  height: 330px;   margin: 10px auto 50px auto; display: none; }
.circle-menu .center{  position: absolute;  width: 130px; height: 130px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;top: 100px;  left: 100px;}

#first{ position: absolute;  width: 400px;  height: 400px;
  margin: 15px;  padding: 0; list-style: none; border-radius: 50%;
  overflow: hidden; box-shadow: 0px 0px 10px green; z-index: 3;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/assets_V3/img/first.png');}

#first li {  position: absolute; top: 0px;  left: 0px;width: 200px;  height: 200px; transform-origin: 100% 100%; overflow: hidden;}
#first li a{ display: block;width: 280px; height: 280px;margin-top: 40px; margin-left: 40px; background: rgba(225, 0, 0, 0); transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

#second{ position: absolute;  width: 400px;  height: 400px;  margin: 15px;padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;

      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image:url('/assets_V3/img/third.png');}


#second li {   position: absolute;   top: 0px;  left: 0px;  width: 200px; height: 200px;transform-origin: 100% 100%; overflow: hidden;}
#second li a{  display: block; width: 245px; height: 245px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
      transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s; }

}

/* ======================================================================== */
/* =========================  XXXx   Smallest    =========================== */
/* ======================================================================== */
@media (max-width : 343px) {
  .square-circle{display:block;}

  .circle-menu span {font-size: 12px;   margin-top: 0px;}
  .right-box{padding: 0px;}
.circle-menu {width: 330px;  height: 330px;   margin: 10px auto 50px auto;  display:none;}
.circle-menu .center{  position: absolute;  width: 130px; height: 130px; border-radius: 50%; background-color:rgba(10,10,10,1);  z-index: 5;top: 100px;  left: 100px;}

#first{ position: absolute;  width: 400px;  height: 400px;
  margin: 15px;  padding: 0; list-style: none; border-radius: 50%;
  overflow: hidden; box-shadow: 0px 0px 10px red; z-index: 3;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url('/assets_V3/img/first.png');}

#first li {  position: absolute; top: 0px;  left: 0px;width: 200px;  height: 200px; transform-origin: 100% 100%; overflow: hidden;}
#first li a{ display: block;width: 280px; height: 280px;margin-top: 40px; margin-left: 40px; background: rgba(225, 0, 0, 0); transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s;}

#second{ position: absolute;  width: 400px;  height: 400px;  margin: 15px;padding: 0; list-style: none; border-radius: 50%;
      overflow: hidden; z-index:4;

      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image:url('/assets_V3/img/third.png');}


#second li {   position: absolute;   top: 0px;  left: 0px;  width: 200px; height: 200px;transform-origin: 100% 100%; overflow: hidden;}
#second li a{  display: block; width: 245px; height: 245px; margin-top: 40px;margin-left: 40px; background: rgba(255, 0, 0, 0);
      transform: skew(-30deg) rotate(-60deg); transition: background-color 0.5s; }

}