@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }
@import url(https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css);

/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */
/* Screen reader only */
@import url('https://fonts.googleapis.com/css?family=Quicksand');

@media only screen and (min-width: 1000px) { 
  .profile-review, .profile-contact{
    width: 49%;
  }
  .container {
      max-width: 700px;
  }
   #toggle {
      margin: 15px 0 0 -1px;
      /*left: 394px !important;*/
    }
    #menu{
      /*width: 530px !important;*/
      /*left: 410px !important;*/
    }
    .floating-menu{
      width: 26% !important;
      float: right !important;
      padding-right: 8% !important;
    }
    .btn-nav{
        /*left: 410px !important;*/
        position: fixed !important;
    }
    /*.showNav{
       margin-left: -4px !important;
        min-height: 700px !important;
        
    }*/
    .quiz footer{
      width: 530px !important;
      left: 430px !important;
    }
     
    ul.iconmenu{
      /*left: 410px !important;*/
      width: 56px !important;
    }
    .list-panel-fixed .inner-list-panel footer{
           width: 690px;
        left: 340px !important;
    }
    .list-panel-fixed .inner-list-panel header{
      width: 519px !important;
    }
    .pop-up{
      width: 500px !important;
    }
}
#toggle {
  position: fixed;
    z-index: 3;
    width: 2.85714em;
    height: 2.85714em;
    top: 44px;
    left: -14px;
    width: 55px;
    /* background-image: url(../images/prizemenu.png); */
    /* height: 40px; */
    z-index: 999;
    border-radius: 0 5px 5px 0;
    margin: 15px 0 0 15px;
    cursor: pointer;
    background-image: linear-gradient(to right top, #ff882a, #ffa21a, #ffbc02, #ffd700, #fff200);
    box-shadow: 1px 1px 4px 1px #966f21;
    -webkit-box-shadow: 1px 1px 4px 1px #966f21;
    -moz-box-shadow: 1px 1px 4px 1px #966f21;
}
#toggle span {
  display: block;
    position: absolute;
    width: 100%;
    background-image: url(../../images/prizemenu.png);
    background-repeat: no-repeat;
    /* margin: 1.25em 0 0 0; */
    margin: 3px 0 0 12px;
    height: 65px;
    /* background: #eee; */
    -webkit-transition: 350ms ease all;
    -moz-transition: 350ms ease all;
    transition: 350ms ease all;
}
/*#toggle span:before, #toggle span:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 0.2em;
  background: #eee;
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
}*/
#toggle span:before {
  margin: -1em 0 0 0;
}
#toggle span:after {
  margin: 1em 0 0 0;
}
#toggle.open span {
  background-color: transparent;
}
#toggle.open span:before, #toggle.open span:after {
  margin: 0;
  /*background: #286efa;*/
}
#toggle.open span:before {
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  transform: rotate(135deg);
}
#toggle.open span:after {
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#menu {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  z-index: 2;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  background: #0d4ca1;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
}
#menu.opened {
  visibility: visible;
  opacity: 1;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
}
#menu span#title {
  display: table;
    line-height: 1em;
    margin: 0 0 1em 0;
    /* font-size: 16px; */
    color: #fff;
    width: 100%;
}
 
#menu ul {
  list-style: none;
  margin: 30px auto;
}
#menu ul li {
  display: block;
  width: 90%;
  height: 65px;
  margin: 0 auto 0.5em auto;
}
#menu ul li:after {
  content: " ";
  position: absolute;
  width: 0%;
  height: 65px;
  margin: -65px 0 0 5%;
  left: 0;
  /*background: #286efa;*/
  border-radius: 0.25em;
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
  border: 1px solid #fff;
}
#menu ul li:hover:after {
  width: 90%;
}
#menu ul li a {
  position: relative;
  z-index: 4;
  display: block;
  width: 100%;
  height: 65px;
  line-height: 65px;
  margin: 0 auto;
  color: #fff;
    text-decoration: none;
    border: 1px solid #ffe600;
  border-radius: 0.2em;
  -webkit-transition: 350ms ease all;
  -moz-transition: 350ms ease all;
  transition: 350ms ease all;
}
#menu ul li a:hover {
  color: #eee;
  border-color: #fff;
}
#menu ul li a span {
  font-size: 16px;
  font-weight: bold;
}
#menu ul li a i {
  position: absolute;
  padding: 0 1.25em 0 0;
  font-size: 2em;
}
#wrapper {
  width: 85%;
  margin: 0 auto;
}
#wrapper #logo {
  display: block;
  width: 100%;
  margin: 40px auto;
  text-align: center;
}
#wrapper #logo span {
  font-size: 3.33333em;
}
#wrapper section {
  font-size: 1.11111em;
}

/*End*/



/* Floating Menu*/
/* Floating Menu*/
.floating-menu {
    font-family: sans-serif;
    /* padding: 5px; */
    width: 190px;
    z-index: 0;
    position: fixed;
    float: right;
    right: 0;
    padding-right: 18% !important;
    top: 5px;
}
  .floating-menu a, 
  .floating-menu h3 {
    font-size: 0.9em;
    display: block;
    margin: 0 0.5em;
    color: white;
  }
.specialities {margin: 10px auto;}
.specialities img{
    width: 44px;
    margin-right: -14px;
  }
.specialities h2 {
  font-family: 'opensans-bold';
    font-size: 13px;
    /* padding-left: 11px; */
    padding-top: 0;
    text-align: center;
    margin-top: 0px;
    font-weight: bold;
    color: #000;
    width: 85px;
}
.specialities_point h2 {
    font-family: 'opensans-bold';
    font-size: 13px;
    padding-left: 11px;
    padding-top: 0;
    text-align: right;
    margin-top: 0px;
    font-weight: bold;
    color:#000;
    width: 85px;
}
.specialities_point{
    display: flex;
    align-items: center;
    background-image: url(../images/point-box.png);
    width: 100px;
    height: 38px;
    margin-bottom: 2px;
    margin-top: 5px;
}
.specialities_package h2 {
    font-family: 'opensans-bold';
    font-size: 13px;
    padding-left: 11px;
    padding-top: 0;
    text-align: right;
    margin-top: 0px;
    font-weight: bold;
    color:#000;
    width: 85px;
}
.specialities_package{
    display: flex;
    align-items: center;
    background-image: url(../images/package-box.png);
    width: 100px;
    height: 38px;
    
}

.specialities_spinwheel h2 {
    font-family: 'opensans-bold';
    font-size: 13px;
    padding-left: 11px;
    padding-top: 0;
    text-align: right;
    margin-top: 0px;
    font-weight: bold;
    color:#000;
    width: 85px;
    padding-top: 5px;
}
.specialities_spinwheel{
    display: flex;
    align-items: center;
    background-image: url(../../frontend/images/spin-box.png);
    width: 100px;
    height: 38px;
    
}

.spinwheel_name{
    padding: 6px 4px;
    text-align: center;
    font-family: Pyidaungsu;
    background: #000;
    height: 25px;
    font-size: 11px;
    margin-top: 6px;
    margin-right: -8px;
    line-height: 1;
    border-radius: 5px 0 0 5px;

}
.floating-menu-spinwheel {
    font-family: sans-serif;
    padding: 5px;
    width: 266px;
    z-index: 0;
    position: fixed;
    float: right;
    right: 0;
    padding-right: 1%;
    top: 5px;
}

.specialities{
    display: flex;
    align-items: center;
    background-image: linear-gradient(to right top, #ff882a, #ffa21a, #ffbc02, #ffd700, #fff200);
    border: 1px solid #f8cd67;
    box-shadow: 1px 1px 4px 1px #966f21;
    -webkit-box-shadow: 1px 1px 4px 1px #966f21;
    -moz-box-shadow: 1px 1px 4px 1px #966f21;
    width: 80px;
    height: 23px;
    border-radius: 5px 0 0 5px;
}
.mark_menu_name{
    padding: 6px 4px;
    text-align: center;
    font-family: Pyidaungsu;
    background: #000;
    height: 25px;
    font-size: 11px;
    margin-top: 13px;
    margin-right: -8px;
    line-height: 1;
    border-radius: 5px 0 0 5px;

}
.package_menu_name{
    padding: 6px 4px;
    text-align: center;
    font-family: Pyidaungsu;
    background: #000;
    height: 25px;
    font-size: 11px;
    margin-top: 6px;
    margin-right: -8px;
    line-height: 1;
    border-radius: 5px 0 0 5px;
}

/*Account with ph no*/
ol li{
  list-style-type: none;
  display: inline-block;
  height: 110px;
}

#new {
  position: relative;
  left: 0px;
  bottom: 0px;
  background: rgba(255, 255, 0, .1);
  border-radius: 5px;
}

.container_ph {
  height: 80px;
  width: 200px;
  padding: 10px 10px 10px 10px;
}

.thumb {
  border: 4px solid;
  border-radius: 50px;
  width: 73px;
  height: 73px;
  padding: 2px 2px 2px 2px;
}

 

#first {
  color: #ddd;
  font-size: .9em;
}

#last {
  color: #fff;
  font-size: 1.4em;
}

.title-company {
  display: inline-block;
  position: relative;
  Left: 90px;
  bottom: 70px;
  padding-left: 3px;
}

#title{
  color: #999;
  font-size: .75em;
}

#company{
  color: #aaa;
  font-size: .75em;
  font-weight: bold;
}

img.contact {
  padding: 1px;
  border-radius: 50px;
  -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
  width: 71x;
  height: 71px;
  -webkit-transition: 100ms; 
}

img:hover {
  filter: none;
  -webkit-filter: grayscale(0);
  -webkit-transition: 100ms;
}

#green {
  border-color: green;
  animation-name: blink ;
  animation-duration: .5s ;
  animation-timing-function: step-end ;
  animation-iteration-count: infinite ;
  animation-direction: alternate ;
}

#orange
{
  border-color: orange;
}

#red {
  border-color: red;
}







.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

/*.nav-collapse li {
  width: 100%;
  display: block;
}*/
.nav-collapse li {
    float: left;
    width: 100%;
    /*background-image: url(../../images/menu-bg.png);
    background-size: cover;
    background-size: contain;*/
    /* height: 92px; */
    /*background-position: center;
    background-repeat: no-repeat;*/
        background: #0d4ca1;
    padding: 14px;
    padding: 9px;
    height: 50px
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow: hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}


 
section {
  /*border-bottom: 1px solid #999;*/
  text-align: center;
  /*padding: 100px 0 0;*/
  /*height: 750px;*/
  width: 100%;
}
 
/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */
.js .nav-collapse-0.opened{
  max-height: 660px !important;
}
header {
  /*background-image: url(../../images/bg.png);*/
    position: fixed;
    z-index: 1;
    /* width: 100%; */
    width: 99%;
    left: 1px;
    top: 0;
    padding-top: 3px;
  /*background: #000;*/
}

 

/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 2;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}



/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  /*width: 100%;*/
  float: left;
  /*background-image: url(../../images/bg.png);*/
  height: 800px;
  background-repeat: round;
  top: -53px;
  background:#0d4ca1;
   
}


.nav-collapse a > span{
  /*background: #fff !important;*/
  /*-webkit-text-stroke: 1px #000;
   color: #000;
   text-shadow:
       3px 3px 0 #fff,-1px -1px 0 #fff,  1px -1px 0 #fff,-1px 1px 0 #fff,1px 1px 0 #fff;*/
}

.nav-collapse li:nth-child(1){
  /*margin-top: 13px;*/
  
}
.nav-collapse a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* border-top: 1px solid white; */
    text-decoration: none;
    /* background: #f4421a; */
    padding: 0.7em 1em;
    color: #fff;
    width: 100%;
    text-align: center;
    float: right;
    font-size: 1em;
    font-weight: bold;

    -webkit-transition: all 275ms 175ms;
    -moz-transition: all 275ms 175ms;
    -o-transition: all 275ms 175ms;
    -ms-transition: all 275ms 175ms;
    transition: all 275ms 175ms;
    padding-top: 0.9em;
}
.nav-collapse li:nth-child(1) a {
    transition: all 275ms 175ms;

}
.nav-collapse li:nth-child(2) a {
    transition: all 275ms 225ms
}
.nav-collapse li:nth-child(3) a {
    transition: all 275ms 275ms
}
.nav-collapse li:nth-child(4) a {
    transition: all 275ms 325ms
}
.nav-collapse li:nth-child(5) a {
    transition: all 275ms 375ms
}
.nav-collapse li:nth-child(6) a {
    transition: all 275ms 375ms
}

.nav-collapse a:active,
.nav-collapse .active a {
  /*background: #b73214;*/
}




/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */

@font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 55px;
  height: 45px;
      z-index: 999;
  /*float: right;
  margin-right: 3px;*/
  float: left;
  /*margin-left: 0;*/
  margin-top: 6px;
        /*border: 2px solid #fff200;*/
    /*background: #FF882A;*/
    background-image: linear-gradient(to right top, #ff882a, #ffa21a, #ffbc02, #ffd700, #fff200);
    border-radius: 0 5px 5px 0;
    box-shadow: 1px 1px 4px 1px #966f21;
    -webkit-box-shadow: 1px 1px 4px 1px #966f21;
    -moz-box-shadow: 1px 1px 4px 1px #966f21;
}

.nav-toggle:before {
  color: #fff; /* Edit this to change the icon color */
  font: normal 26px/40px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-toggle.active:before {
  font-size: 23px;
  /*content: "\78";*/ /* Close icon */
}