.fade {
  opacity: 0;
  -webkit-transition: opacity .15s linear;
       -o-transition: opacity .15s linear;
          transition: opacity .15s linear;
}
.fade.in {
  opacity: 1;
}
.collapse {
  display: none;
  visibility: hidden;
}
.collapse.in {
  display: block;
  visibility: visible;
}
tr.collapse.in {
  display: table-row;
}
tbody.collapse.in {
  display: table-row-group;
}
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-timing-function: ease;
       -o-transition-timing-function: ease;
          transition-timing-function: ease;
  -webkit-transition-duration: .35s;
       -o-transition-duration: .35s;
          transition-duration: .35s;
  -webkit-transition-property: height, visibility;
       -o-transition-property: height, visibility;
          transition-property: height, visibility;
}
.dropdown {
  position: relative;
}
.dropdown-toggle:focus {
  outline: 0;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: right;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: right;
  list-style: none;
  background-color: #fff;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.navbar-header{overflow: hidden;}
.navbar-toggle {
  position: relative;
  float: left;
  padding: 9px 10px;
  margin-top: 10px;
  margin-left: 15px;
  margin-bottom: 10px;
  background-color: transparent;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.navbar-toggle:focus {
  outline: 0;
}
.navbar-toggle .icon-bar {
    background-color: #fff;
    display: block;
    width: 35px;
    height: 4px;
    border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
  margin-top: 4px;
}


@media (max-width: 767px) {
    .hidden-xs {
      display: none !important;
    }
}
@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
      display: none !important;
    }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
      display: none !important;
    }
}
@media (min-width: 1200px) {
    .hidden-lg {
      display: none !important;
    }
}

@media (min-width: 768px) {
    .navbar-toggle {
        display: none;
    }
    .navbar-collapse {
        width: auto;
        border-top: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        padding-bottom: 0;
        overflow: visible !important;
        visibility: visible !important;
    }
    .navbar-collapse.in {
        overflow-y: visible;
    }
    .navbar-fixed-top .navbar-collapse,
    .navbar-static-top .navbar-collapse,
    .navbar-fixed-bottom .navbar-collapse {
        padding-right: 0;
        padding-left: 0;
    }
    .navbar-header {
        float: left;
    }
}


@media (max-width: 767px) {

    /*menu*/
    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    *:before,
    *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
    section.logo {
        float: none;
        margin: 14px auto 20px;
        text-align: center;
    }
    section.logo img {
        display: block;
        margin: 0 auto;
        width: 160px;
    }
    .navbar-nav .open .dropdown-menu {
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    /* header close*/

    .main-menu .navbar{

    }
    .main-nav {

    }
    .main-nav ul, .main-nav .menu.top {
        float: none;
        overflow: hidden;
        margin: 0;
        padding: 0;
        height: auto;
        background: none;
        border-radius: 0;
    }
    .main-nav>ul>li {
        float: left;
        margin-left: 36px;
    }
    .main-nav>ul>li.last{margin-right: 0;}

    .main-nav ul li a {
        font-size: 18px;
        color: #9bcb2a;
        text-decoration: none;
        display: block;
        padding: 6px 0px;
    }
    .main-nav>ul>li.active a, .main-nav>ul>li:hover a{color: #6aba02;}
    .navbar-nav .open .dropdown-menu > li > a,
    .navbar-nav .open .dropdown-menu .dropdown-header {
        padding: 5px 15px 5px 25px;
    }
    .navbar-nav .open .dropdown-menu > li > a {
        line-height: 20px;
    }
    .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-nav .open .dropdown-menu > li > a:focus {
        background-image: none;
    }
    .mobile-logo span{
        font-family: Arial, Helvetica, sans-serif;
        font-size: 16px;
        color: #fff;
        text-transform: uppercase;
        display: table-cell;
        vertical-align: middle;
        height: 62px;
        padding-right: 15px;
        padding-left: 15px;
    }
    
    .main-nav>ul>li, .main-nav .menu.top li {
        text-align: center;
        float: none;
        width: 100%;
        margin: 0 auto;
        background-image: none;
    }
    .menu.top li {
        line-height: 32px;
        padding: 0;
    }
    .main-nav ul li.last a, .main-nav ul li:last-child a{border-bottom: medium none;}
    .navbar {
        width: 100%;
        height: auto;
    }
    .main-nav .main_list {float: none;margin: 0;padding: 0 15px;}
    .main-nav #menu-main_menu {overflow: hidden;}
    #menu-main_menu li {float: none;text-align: center;padding: 0;}
    #menu-main_menu li a{
        float: none;
        color: #222;
        padding: 5px 0 5px 0;
        display: inline-block;
        width: 100%;
        border-bottom: 1px solid #160e0b;
    }
    #menu-main_menu li a:hover, #menu-main_menu li.current-menu-item a, .account li a:hover, .account li.current-menu-item a {
        background: none;
        color: #508d01;
    }
    .account{
        padding: 0 15px;
        float: none;
    }
    .account li {float: none;text-align: right;}
    .main-nav .account li a {
        color: #160e0b;
        display: inline-block;
        float: none;
        padding: 15px 0 15px 0;
    }
    /*========================================================*/
    /* Homepage */
    .wrapper {width: 100%;}
    
    /* Head */
    .wrapper {width: 100%;min-width: 100%;}
    header{position: relative;}
    header{
        width: 100%;
        margin: 0 auto;
        float: none;
        background: none;
    }
    .subheader {width: 100% !important;}
    
    /* Banner */
    .banner{
        float: none;
        width: 100%;
        margin: 10px auto 25px;
    }
    .banner .border {
        width: 100%;
        height: 220px;
    }
    .subheading {
        margin: 0 auto;
        width: 100%;
    }
    .banner .gradient{width: 100%;}
    .subheading.inner .banner {height: 221px;margin: 10px auto 25px;}
    .subheading.inner .banner .gradient {height: 221px;}
    .subheading.inner .banner .border {height: 220px;}
    .banner h1, .subheading.inner .banner h1{
        padding: 15px 10px 11px 10px;
        font-size: 18px;
        line-height: 24px;
    }
    .banner strong{
        padding: 0 10px 0 10px;
        font-size: 15px;
        line-height: 22px;
    }
    .subheading.inner .banner strong {
        padding: 0 10px 0 10px;
        font-size: 14px;
        line-height: 20px;
    }
    .cut {
        display: none;
        visibility: hidden;
        width: 247px;
        height: 194px;
        background-size: cover;
    }
        /* Footer */
    footer{width: 100%;}
    footer nav ul {height: auto;}
    footer nav li{
        background-image: none;
        padding: 0 26px;
        float: none;
        text-align: center;
    }
    
    .valid {
        float: left;
        width: 47%;
    }
    .valid p:first-child {
        margin: 10px 0 0;
    }
    ul.menu.contact {
        float: left;
        width: 51%;
        margin-left: 2%;
        margin-top: 15px;
    }
    .last {
        float: left;
        width: 100%;
        text-align: center;
        margin-bottom: 15px;
    }
    .copyright {
        float: none;
        width: auto;
        margin-right: 25px;
        clear: both;
        margin: 12px 20px;
    }
    
    /* Options menu */
    .menu.options {
        width: 100%;
        height: auto;
        margin: 0 auto;
        overflow: hidden;
        background: url(cms-icons-bg.png) repeat 0 0;
    }
    .menu.options li {
        display: inline-block;
        width: 48.999%;
        margin-left: 1%;
        margin-bottom: 10px;
        padding: 0;
        background: none;
    }
    .menu.options li.order {
        float: left;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    
    /* Steps */
    dl.step {
        float: none;
        margin: 0 auto 20px;
        width: 100%;
        max-width: 510px;
        overflow: hidden;
        padding-top: 10px;
    }
    dl.step dt {
        width: 33%;
        min-width: 94px;
        max-width: 106px;
        text-align: left;
        padding: 0px 0 0 10px;
        background: none;
    }
    dl.step dt:first-child{
        padding-left: 10px;
    }
    dl.step dd {
        padding: 10px 0;
        width: 66%;
        min-width: 194px;
        margin: 0 0px 0 1%;
        min-height: 156px;
    }
    dl.step dd p {width: 100%;}
    
    /* Content */
    .content {
        width: 100%;
        background: none;
        padding: 0;
    }
    .left {
        float: none;
        width: auto;
        padding: 29px 10px 29px 15px;
        background-color: #fff;
        overflow: hidden;
    }
    .left h2 img {
        display: block;
        margin: 0 auto 15px;
        max-width: 100%;
    }
    .button {width: 100%;left: 0;}
    ul.checked.first {width: auto;margin-right: 2%;}
    .left h3 {background-image: none;}
    
    .right {
        float: none;
        margin: 15px auto 0;
        background: url(main_bg2.jpg) repeat-y;
        border-radius: 15px;
        overflow: hidden;
        padding-left: 0;
    }
    .quote{
        width: 300px;
        margin: 15px auto 10px;
    }
    .examples {
        float: none;
        width: 300px;
        padding: 20px 20px 6px;
        margin: 10px auto 10px;
    }
    ul.images.popup li{
        height: auto !important;
    }
    .quote .slider_item {height: 100% !important;}
    
    /* samples */
    .list-examples .image {
        float: none;
        height: 154px;
        padding: 0;
        margin: 0 auto 15px;
    }
    .list-examples .holder {
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    
    /* login page */
    .my_account_form.single_login_form label {
        width: 100%;
        margin: 0 auto;
        text-align: center;
    }
    .my_account_form .row {float: none;margin: 0 auto 10px;}
    .txt_input_round {
        float: none;
        width: 100%;
        display: block;
        max-width: 263px;
        margin: 0 auto;
    }
    .my_account_form .error{
        display: block !important;
        margin: 0 auto;
        width: auto;
        text-align: center;
    }
    .contact_us, .orders, .discount {
        margin: 10px auto 10px;
        width: 300px;
    }
    /* Popup login */
    .content .left > span.error{
        width: auto;
        line-height: 36px;
    }
    .login_popup .button {width: auto;}
    .wrap_box.login_popup .report {width: auto;}
    
    /* Contact us */
    .my_account_form label{
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        max-width: 263px;
        margin: 0 auto;
    }
    .txt_input_round_max, .textarea_round{
        float: none;
        width: 100%;
        display: block;
        max-width: 263px;
        margin: 0 auto;
    }
    .contact_info_user .left_info{
        width: 100%;
        max-width: 300px;
        margin: 0 auto 15px;
    }
    .contact_info_user .right_info{
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .wrap_box .report {
        width: auto;
        line-height: 22px;
        padding: 10px 5px;
    }
    
    /* Order page */
    .brief-order .text, .brief-order textarea, .brief-order .text.large, .custom-select-blk{
        float: none;
        width: 100%;
        display: block;
        max-width: 263px;
        margin: 0 auto 10px;
    }
    .brief-order label {
        float: none;
        display: block;
        text-align: left;
        width: 100%;
        max-width: 263px;
          margin: 0 auto 10px;
    }
    #divPages, .brief-order .input-file{
        float: none;
        width: 100%;
        max-width: 263px;
        margin: 0 auto 10px;
    }
    #divPages input{
        margin: 10px 0 0;
    }
    .brief-order .input-file{
        height: 77px;
    }
    .brief-order .input-file .btn-file{
        width: 115px !important;
    }
    .step-title{
        padding: 5px 15px 7px 70px;
        margin: 20px 0px 20px 0px;
    }
    .order-options{
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
    .left .order-options li{
        width: 32%;
        max-width: 95px;
        height: 96px;
        margin: 0 0px 15px 0;
    }
    .order-options li .link {
        width: 95px;
        height: 95px;
    }
    .order-options li .link:hover, .order-options li.active .link{
        width: auto;
        margin: 0;
        height: 96px;
    }
    .order-options span{width: 46px;}
    .block h3 {
        margin: 10px 0 15px;
    }
    .block .radio{
        margin: 3px -14px 0 0;
        float: left;
    }
    .block label{
        float: none;
        margin: 0px 0px 0 0px;
        padding: 0 0 0 20px;
    }
    #accordion h4{
        width: auto;
	background-image: -ms-linear-gradient(top, #E6E5E5 0%, #EDECEC 100%);
	background-image: -moz-linear-gradient(top, #E6E5E5 0%, #EDECEC 100%);
	background-image: -o-linear-gradient(top, #E6E5E5 0%, #EDECEC 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #FFFFFF), color-stop(1, #00A3EF));
	background-image: -webkit-linear-gradient(top, #E6E5E5 0%, #EDECEC 100%);
	background-image: linear-gradient(top,#E6E5E5 0%, #EDECEC 100%);
        -moz-border-radius-topleft: 8px;
	-moz-border-radius-topright:8px;
	-moz-border-radius-bottomleft:8px;
	-moz-border-radius-bottomright:8px;
	-webkit-border-top-left-radius:8px;
	-webkit-border-top-right-radius:8px;
	-webkit-border-bottom-left-radius:8px;
	-webkit-border-bottom-right-radius:8px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	border-bottom-left-radius:8px;
	border-bottom-right-radius:8px;
    }
    
    /* Logged user */
    .medals .btns, .medals .bonuses{
        float: none;
        overflow: hidden;
        width: auto;
        max-width: 300px;
        margin: 0 auto 15px;
    }
    .medals .btns li {
        width: 50%;
        text-align: center;
    }
    .medals .bonuses li {
        float: none;
        margin: 10px 0 10px 25px;
    }
    .jcarousel-skin-tango .col_c{height: 50px;}
    
    /* Logges my account */
    .custom-select-blk .custom-select {
        width: 100% !important;
    }
    .change_password_outer {
        float: none;
    }
    .change_password_box {
        width: 100%;
        margin: 10px auto 0;
        padding-left: 0;
        float: none;
    }
    .change_password_box label {
        width: 108px;
    }
    #tbPassword, #tbConfirmPassword{width: 200px;}
    #tbPassword{margin-bottom: 10px;}
    .change_password_box label{margin: 0;text-align: left;}
    .input_change {margin-top: 10px;}
    
    /* make payment */
    .order_heading {
        padding: 0;
        margin: 0;
        width: 100%;
    }
    .left .order_options ul {width: 100%;}
    .left .order_options li .name {float: none;width: 100%;}
    .package-result {width: 100%;}
    .package-result .holder{width: auto;}
    .package-info {width: auto;}
    
    /* partners */
    .parters-logo {
        display: block;
        height: 114px;
        margin: 0 auto;
        width: 114px;
    }
    .order-summary {
        width: 300px;
        margin: 15px auto 20px;
    }
    
}

/* iPhone6 in portrait */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) {
    
}

/* iPhone6 in lanscape */
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) {
    .order-options, .medals .bonuses, .brief-order .text, .brief-order textarea, .brief-order .text.large, #divPages, .brief-order .input-file,
    .brief-order label, .txt_input_round, .custom-select-blk, .my_account_form label, .txt_input_round_max, .textarea_round{max-width: 100%;}
    .medals .bonuses li{float: left;}
    .change_password_box label{width: 35%;}
    #tbPassword, #tbConfirmPassword{
        width: 60%;
    }
}

/* iPhone4 landscape */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) {
    .order-options{max-width: 300px;}
    .medals .bonuses, .brief-order .text, .brief-order textarea, .brief-order .text.large, #divPages, .brief-order .input-file,
    .brief-order label, .txt_input_round{max-width: 100%;}
    .medals .bonuses li{float: left;  margin: 10px 0 10px 20px;}
}




/* Tablet Portrait */
@media (min-width: 768px) and (max-width: 991px) {
    
    /* Head */
    .wrapper {width: 100%;min-width: 100%;}
    header{position: relative;}
    header{
        width: 750px;
        margin: 0 auto;
        float: none;
    }
    .subheader {width: 100% !important;}
    
    /* Banner */
    
    .banner{
        float: none;
        width: 750px;
        margin: 35px auto 36px;
    }
    .subheading {
        width: 750px;
        margin: 0 auto;
    }
    .subheading.inner .banner {
        height: 185px;
    }
    .subheading.inner .banner .border{
        height: 183px;
    }
    .subheading.inner .banner .gradient{
        height: 185px;
    }
    .banner .border {width: 748px;}
    .banner .gradient{width: 748px;}
    .banner h1{padding: 18px 40px 11px 18px;}
    .subheading.inner .banner h1{padding: 13px 225px 1px 18px;}
    .subheading.inner .banner strong{padding: 0 210px 0 18px;}
    .banner strong{padding: 0 210px 0 18px;}
    .cut {
        width: 247px;
        height: 194px;
        background-size: cover;
    }
    
    /* Options menu */
    .menu.options {
        width: 750px;
        margin: 0 auto;
    }
    .menu.options li.order {
        float: none;
        margin-top: 20px;
        margin-bottom: 20px;
        clear: both;
        width: 100%;
    }
    
    /* Steps */
    dl.step {
        float: none;
        clear: both;
        margin: 0 auto 20px;
        width: 510px;
        overflow: hidden;
        padding-top: 10px;
    }
    dl.step dt {
        width: 156px;
        text-align: right;
        padding: 0px 0 0 10px;
        background: none;
    }
    dl.step dt:first-child{
        padding-left: 10px;
    }
    dl.step dd {
        padding: 10px 0;
        width: 250px;
        margin: 0 0px 0 15px;
        min-height: 156px;
    }
    dl.step dd p {width: 220px;}
    
    /* Content */
    .content {
        width: 750px;
        background: none;
        padding: 0;
    }
    .left {
        float: none;
        width: auto;
        padding: 29px 15px 29px 15px;
        background-color: #fff;
        overflow: hidden;
    }
    .button {width: 100%;}
    ul.checked.first {width: 48%;margin-right: 2%;}
    
    /* Order */
    .brief-order {width: 600px;}
    .right {
        float: none;
        width: auto;
        margin: 15px auto 0;
        background-image: none;
        background-color: #fff;
        border-radius: 15px;
        overflow: hidden;
        padding-left: 0;
        padding: 10px; 
    }
    .right section, .contact_us, .orders, .discount, .quote, .last_blog, .order-summary, .examples {
        width: 48%;
        float: left;
        margin: 10px 2% 10px 0;
        padding: 14px 0 6px;
    }
    .orders {margin-right: 0;}
    .quote .arrow{margin: 0 20px;}
    .quote .slider1{margin: 0 auto;}
    .order-summary .section {margin: 0;}
    .order-summary .total{padding: 0 20px;width: auto;}
    .order-summary p, .examples p {padding: 0 20px;}
    
    /* Footer */
    footer{width: 750px;}
    footer nav li{padding: 0 20px;}
    
    .valid {
        float: left;
        width: 33%;
    }
    .valid p:first-child {
        margin: 10px 0 0;
    }
    ul.menu.contact {
        float: left;
        width: 33%;
        margin-left: 0;
    }
    .last {
        float: left;
        width: 180px;
        text-align: right;
        margin-bottom: 15px;
    }
    .copyright {
        float: none;
        width: auto;
        margin-right: 25px;
        clear: both;
        margin: 12px 20px;
    }
}

/* Tablet Landscape */

@media (min-width: 992px) and (max-width: 1199px) {
    
    /* Content page */
    
    
    /* Homepage */
    
    /* Footer */
}