@import url("https://fonts.googleapis.com/css?family=Roboto:400,500,700&display=swap");
@import url("https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

/************************************************
/////////////////////////////////////////////////

                **ipad**

/////////////////////////////////////////////////
*************************************************/
@media  (min-width: 768px) and (max-width: 1024px){
    /*hide customer menu on mobile*/
    .accordion{
        display: none;
    }
    #header-top{
        display: none
    }
    #header-bottom{
        display: none
    }
    .title-mobile-top{
        text-align:center;
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        background: #042D8A;
        color: #fff
    }
    .float-panel{
        display: none
    }
    .cart-mobile li{
        display: inline-block;
        padding: 20px 70px
    }
    .cart-mobile a:hover{
        color: #042D8A
    }
    .cart-mobile i{
        font-size: 20px
    }
    .cart-mobile span{
        background: red;
        position: absolute;
        color: #fff;
        border-radius: 100%;
        padding: 0px 6px;
        top: 10px;
        height: 20px;
        width: 20px
    }
    .dropdown-menu{
        left: -114px;
        padding: 0px;
        width: auto;
    }
    .dropdown-menu > li{
        border-bottom: 1px solid #eee;
        width: 100%;
        padding: 10px
    }
    .dropdown-menu img{
        border-radius: 100%;
        width: 20px;
        height: 20px
    }
    .dropdown-menu i{
        font-size: 12px
    }
    .dropdown-menu > li:last-child{
        border-bottom: none;
    }
    .dropdown-menu > li > a{
        padding: 0px;
        line-height: 0px
    }
    .dropdown-menu > li > a:hover{
        color: #042D8A;
        background: #ffff
    }
    .mobile-menu{
        display: block
    }
    .mobile-menu .item-toggle-button {
        text-indent: -9999px;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #000;
        position: absolute;
        right: 20px;
    }
    .mobile-menu .item-toggle-button:after {
        content: "";
        text-indent: 0px;
        font-family: "FontAwesome";
        color: #000;
        transition: all 200ms linear;
    }
    .mobile-menu .item-toggle-button:hover:after {
        color: #000;
    }
    .mobile-menu .item-toggle-button.is-open:after {
        transform: rotate(180deg);
        color: #000;
    }
    .mobile-menu .header_bar {
        background: #fff;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 1111;
        border-bottom: 1px solid #eee;
        box-shadow: #ddd 2px -4px 12px 2px
    }
    .mobile-menu .header_bar .mobile-toggle {
        height: 50px;
        width: 50px;
        cursor: pointer;
        margin-top: 4px
    }
    .mobile-menu .header_bar .mobile-toggle svg g {
        fill: #000;
        transition: all 200ms linear;
    }
    .mobile-menu .header_bar .mobile-toggle svg g rect {
        transition: all 200ms linear;
    }
    .mobile-menu .header_bar .mobile-toggle:hover svg g {
        fill: 000;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g {
        fill: #000;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect {
        x: 0;
        y: 0;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:first-child {
        transform: rotate(45deg) translate(50%);
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:nth-child(2n) {
        display: none;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:last-child {
        transform: rotate(-45deg) translate(-21%, 66%);
    }
    .mobile-menu .header_bar .mobile-toggle.is-open:hover svg g {
        fill: #000;
    }
    .mobile-menu nav {
        display: block;
        position: fixed;
        top: 196px;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 360px;
        overflow: hidden;
        animation-name: Sidebar-out;
        animation-duration: 0.2s;
        transition: transform .5s,box-shadow .5s;
        animation-fill-mode: forwards;
        background: #fff;
        z-index: 1111;
        overflow: auto;
    }
    .mobile-menu nav ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: 100%;
        animation-name: fadeInLeft;
        animation-fill-mode: both;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }
    .mobile-menu nav ul li {
        padding: 10px 0px;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #eee
    }
    .mobile-menu nav ul li a {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        height: 100%;
        text-decoration: none;
        transition: all 200ms linear;
        font-size: 14px;
        padding: 15px;
        color: #000
    }
    .mobile-menu nav ul li a:hover {
        color: #000;
    }
    .mobile-menu nav ul li a:hover + .item-toggle-button:after {
        color: #000;
    }
    .mobile-menu nav ul li.is-open > a {
        color: #000
    }
    .mobile-menu nav ul li .secondary-nav {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0ms linear;
    }
    .mobile-menu nav ul li .secondary-nav ul li {
        float: none;
        padding: 10px 15px
    }
    .mobile-menu nav ul li .secondary-nav ul li a {
        font-size: 14px;
        font-weight: normal;
    }
    .mobile-menu nav ul li .secondary-nav.is-open {
        max-height: 100%;
        transition: max-height 200ms linear
    }
    .mobile-menu nav ul li .tertiary-nav {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0ms linear;
    }
    .mobile-menu nav ul li .tertiary-nav ul li {
        float: none;
        padding: 10px 20px;
    }
    .mobile-menu nav ul li .tertiary-nav ul li a {
        font-size: 14px;
    }
    .mobile-menu nav ul li .tertiary-nav.is-open {
        max-height: 100%;
        transition: max-height 200ms linear;
    }
    .mobile-menu:not(.is-animating) nav {
        display: none;
    }
    body.mobile-menu-open .mobile-menu:before {
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 111
    }
    .mobile-menu.is-open:not(.is-animating) nav, .mobile-menu.is-animating:not(.is-open) nav {
        display: block;
        animation-name: Sidebar-in;
        animation-duration: 0.2s;
        animation-fill-mode: forwards
    }

    /*# sourceMappingURL=style.css.map */
    .mobile-menu nav ul li:last-child{
        border-bottom:none;
        padding: 7px 15px 0px !important;
    }

    .mobile-menu .follow-us li{
        border-bottom: none;
    }
    .mobile-menu .follow-us a {
        display: inline-block;
        padding: 7px 5px;
        border: solid 1px #042D8A;
        width: 35px;
        height: 35px;
        margin: 4px;
        color: #042D8A;
        border-radius: 100%
    }
    .follow-us{
        padding: 0px 0px 25px
    }
    .language-mobile img{
        margin: 5px;
        margin-top: -30px
    }

    /*===============================================
                       Hompage
    ================================================= */
    .boder-img-program{
        width: 30px;
        height: 30px;
        padding: 7px;
    }
    figure.overlay{
        min-width: 180px
    }
    .wrapper-join-us p{
        text-align: center;
        margin-top: 19px
    }
    .wrapper-join-us .contact-join{
        float: none;
        padding: 10px 40px;
    }
    .wrapper-join-us{
        padding-top: 20px !important;
        padding-bottom: 50px !important;
    }
    header .owl-nav .owl-prev{
        top: 55%;
    }
    header .owl-nav .owl-next{
        top: 55%;
    }

    /*===============================================
                   wrapper-menu-detail
    ================================================= */
    .wrapper-menu-detail{
        padding: 240px 0px 60px;
    }
    .bt-add-to-cart{
        width: 100%
    }
    .name-product{
        font-size: 15px
    }

    /*===============================================
                    Organic
    ================================================= */
    .wrapper-organic {
        padding: 20px 0px
    }

    /*===============================================
                    Gallary
    ================================================= */
    .wrapper-gallary {
        width: 100%;
        padding: 20px 0px;
    }

    /*===============================================
                    wrapper-cart
    ================================================= */
    .wrapper-cart{
        padding: 30px 0px
    }
    .btn-con {
        margin-bottom: 2%;
        margin-top: 2%;
    }

    /*===============================================
            Dashboard Account Setting
    ================================================= */
    .dashboard-setting{
        padding: 196px 0px 20px 0px
    }
    .main-profile{
        margin-left: 0px
    }
    .main-profile label{
        margin-top: 0px
    }
    .main-profile input[type="text"], 
    .main-profile input[type="email"], 
    .main-profile input[type="password"], 
    .main-profile input[type="file"], 
    .main-profile select{
        margin-top: 10px;
        float: none;
    }

    /*===============================================
                      Payment
    ================================================= */
    .wrapper-payment {
        padding: 20px 0px
    }

    /*===============================================
                   wrapper-login
    ================================================= */
    .wrapper-login{
      padding: 30px 0px
    }
    .layout-login{
      width: 80%;
      height:350px;
    }

    /*===============================================
                   wrapper-register
    ================================================= */
    .layout-register{
      padding: 30px 0px
    }
    .layout-register{
        width: 80%;
        height: 600px;
        padding: 20px 10px 10px
    }
}


/************************************************
/////////////////////////////////////////////////

                **iphone**

/////////////////////////////////////////////////
*************************************************/
@media screen and (max-width: 760px){

    /*hide customer menu on mobile*/
    .accordion{
        display: none;
    }
    #header-top{
        display: none
    }
    #header-bottom{
        display: none
    }
    .title-mobile-top{
        text-align:center;
        padding: 10px 0px;
        border-bottom: 1px solid #eee;
        font-size: 13px;
        background: #042D8A;
        color: #fff
    }
    .float-panel{
        display: none
    }
    .cart-mobile li{
        display: inline-block;
        padding: 20px 34px
    }
    .cart-mobile a:hover{
        color: #042D8A
    }
    .cart-mobile i{
        font-size: 20px
    }
    .cart-mobile span{
        background: red;
        position: absolute;
        color: #fff;
        border-radius: 100%;
        padding: 0px 6px;
        top: 10px;
        height: 20px;
        width: 20px
    }
    .dropdown-menu{
        left: -114px;
        padding: 0px;
        width: auto;
    }
    .dropdown-menu > li{
        border-bottom: 1px solid #eee;
        width: 100%;
        padding: 10px
    }
    .dropdown-menu img{
        border-radius: 100%;
        width: 20px;
        height: 20px
    }
    .dropdown-menu i{
        font-size: 12px
    }
    .dropdown-menu > li:last-child{
        border-bottom: none;
    }
    .dropdown-menu > li > a{
        padding: 0px;
        line-height: 0px
    }
    .dropdown-menu > li > a:hover{
        color: #042D8A;
        background: #ffff
    }
    .mobile-menu{
        display: block
    }
    .mobile-menu .item-toggle-button {
        text-indent: -9999px;
        cursor: pointer;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #000;
        position: absolute;
        right: 20px;
    }
    .mobile-menu .item-toggle-button:after {
        content: "";
        text-indent: 0px;
        font-family: "FontAwesome";
        color: #000;
        transition: all 200ms linear;
    }
    .mobile-menu .item-toggle-button:hover:after {
        color: #000;
    }
    .mobile-menu .item-toggle-button.is-open:after {
        transform: rotate(180deg);
        color: #000;
    }
    .mobile-menu .header_bar {
        background: #fff;
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100%;
        z-index: 1111;
        border-bottom: 1px solid #eee;
        box-shadow: #ddd 2px -4px 12px 2px
    }
    .mobile-menu .header_bar .mobile-toggle {
        height: 50px;
        width: 50px;
        cursor: pointer;
        margin-top: 4px
    }
    .mobile-menu .header_bar .mobile-toggle svg g {
        fill: #000;
        transition: all 200ms linear;
    }
    .mobile-menu .header_bar .mobile-toggle svg g rect {
        transition: all 200ms linear;
    }
    .mobile-menu .header_bar .mobile-toggle:hover svg g {
        fill: 000;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g {
        fill: #000;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect {
        x: 0;
        y: 0;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:first-child {
        transform: rotate(45deg) translate(50%);
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:nth-child(2n) {
        display: none;
    }
    .mobile-menu .header_bar .mobile-toggle.is-open svg g rect:last-child {
        transform: rotate(-45deg) translate(-21%, 66%);
    }
    .mobile-menu .header_bar .mobile-toggle.is-open:hover svg g {
        fill: #000;
    }
    .mobile-menu nav {
        display: block;
        position: fixed;
        top: 196px;
        left: 0;
        bottom: 0;
        width: 100%;
        max-width: 360px;
        overflow: hidden;
        animation-name: Sidebar-out;
        animation-duration: 0.2s;
        transition: transform .5s,box-shadow .5s;
        animation-fill-mode: forwards;
        background: #fff;
        z-index: 1111;
        overflow: auto;
    }
    .mobile-menu nav ul {
        list-style: none;
        padding: 0px;
        margin: 0px;
        height: 100%;
        animation-name: fadeInLeft;
        animation-fill-mode: both;
        animation-duration: 0.3s;
        animation-delay: 0.3s;
    }
    .mobile-menu nav ul li {
        padding: 10px 0px;
        position: relative;
        width: 100%;
        border-bottom: 1px solid #eee
    }
    .mobile-menu nav ul li a {
        font-family: "Roboto", sans-serif;
        font-weight: 500;
        height: 100%;
        text-decoration: none;
        transition: all 200ms linear;
        font-size: 14px;
        padding: 15px;
        color: #000
    }
    .mobile-menu nav ul li a:hover {
        color: #000;
    }
    .mobile-menu nav ul li a:hover + .item-toggle-button:after {
        color: #000;
    }
    .mobile-menu nav ul li.is-open > a {
        color: #000
    }
    .mobile-menu nav ul li .secondary-nav {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0ms linear;
    }
    .mobile-menu nav ul li .secondary-nav ul li {
        float: none;
        padding: 10px 15px
    }
    .mobile-menu nav ul li .secondary-nav ul li a {
        font-size: 14px;
        font-weight: normal;
    }
    .mobile-menu nav ul li .secondary-nav.is-open {
        max-height: 100%;
        transition: max-height 200ms linear
    }
    .mobile-menu nav ul li .tertiary-nav {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0ms linear;
    }
    .mobile-menu nav ul li .tertiary-nav ul li {
        float: none;
        padding: 10px 20px;
    }
    .mobile-menu nav ul li .tertiary-nav ul li a {
        font-size: 14px;
    }
    .mobile-menu nav ul li .tertiary-nav.is-open {
        max-height: 100%;
        transition: max-height 200ms linear;
    }
    .mobile-menu:not(.is-animating) nav {
        display: none;
    }
    body.mobile-menu-open .mobile-menu:before {
        content: "";
        position: fixed;
        top: 0px;
        left: 0px;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 111
    }
    .mobile-menu.is-open:not(.is-animating) nav, .mobile-menu.is-animating:not(.is-open) nav {
        display: block;
        animation-name: Sidebar-in;
        animation-duration: 0.2s;
        animation-fill-mode: forwards
    }

    /*# sourceMappingURL=style.css.map */
    .mobile-menu nav ul li:last-child{
        border-bottom:none;
        padding: 7px 15px 0px !important;
    }

    .mobile-menu .follow-us li{
        border-bottom: none;
    }
    .mobile-menu .follow-us a {
        display: inline-block;
        padding: 7px 5px;
        border: solid 1px #042D8A;
        width: 35px;
        height: 35px;
        margin: 4px;
        color: #042D8A;
        border-radius: 100%
    }
    .follow-us{
        padding: 0px 0px 25px
    }
    .language-mobile img{
        margin: 5px;
        margin-top: -30px
    }


    /*===============================================
            Dashboard Account Setting
    ================================================= */
    .dashboard-setting{
        padding: 196px 0px 20px 0px
    }
    .accordion{
        margin: 160px 0px 0px 0px
    }
    .main-profile{
        margin-left: 0px
    }
    .image-fevorite,
    .image-order{
        height: 60px
    }
    .wrapper-cart{
        padding: 20px 0px
    }
    .btn-con{
        margin-bottom: 0%;
    }
    .container-total{
        padding: 10px 0px
    }
    .btn.btn-out {
        margin-top: 10px;
    }
    .main-profile label{
        margin-top: 0px
    }
    .main-profile input[type="text"], 
    .main-profile input[type="email"], 
    .main-profile input[type="password"], 
    .main-profile input[type="file"], 
    .main-profile select{
        margin-top: 10px;
        float: none;
    }

    /*===============================================
                   wrapper-menu-detail
    ================================================= */
    .wrapper-menu-detail{
        padding: 240px 0px 60px;
    }
    .bt-add-to-cart{
        width: 100%
    }
    .name-product{
        font-size: 15px
    }

	/*===============================================
	               wrapper-home
	================================================= */
	.wrapper-welcome h2{
	  text-align:center;
	  font-size: 23px;
	}
	header .item .cover .header-content {
	   position: relative;
	   padding: 20px;
	   overflow: hidden;
	   margin-top:240px;
	  
	}
	header .item .cover .header-content h2 {
	   font-weight: 300;
	   font-size: 15px;
	  
	}
	header .item .cover .header-content h1 {
	   font-size: 20px;
	   font-weight: 600;
	   margin: 5px 0 20px
	}
	header .item .cover .header-content h4 {
	   font-size: 15px;
	   font-weight: 300;
	   line-height: 30px;
	}
    header .owl-nav .owl-prev{
        top: 60%;
    }
    header .owl-nav .owl-next{
        top: 60%;
    }

	/*===============================================
	               wrapper-about
	================================================= */
	.boder-img-about{
	  background: #042D8A;
	  padding: 10px;
	  color: #fff;
	  width: 40px;
	  height: 40px;
	  border-radius: 10px
	}
	.layout-company-mission{
	  padding: 50px 0px
	}

	/*===============================================
	               wrapper-menu-detail
	================================================= */
	.wrapper-menu-detail{
		padding: 240px 0px 60px;
	}
	.bt-add-to-cart{
		width: 100%
	}
	.name-product{
		font-size: 15px
	}

    /*===============================================
                   wraper join us homepage
    ================================================= */
    .wrapper-join-us{
        padding-top: 20px !important;
        padding-bottom: 40px !important
    }
    .wrapper-join-us h2{
        text-align:center;
        font-size: 15px
    }
    .wrapper-join-us p{
        margin-left: 32%
    }
    .wrapper-join-us .hotline{
        color: #042D8A
    }
    .wrapper-join-us .contact-join{
        padding: 7px 40px;
        font-size: 13px
    }
    /* text welcome */
    .wrapper-welcome h2{
        text-align:center;
        font-size: 35px;
    }
    .list-program{
        border: solid 1px #fff;
    }
    .list-program h4{
        font-size: 14px
    }
    .list-program p{
        display: inline;
    }
    .boder-img-program{
        background: #042D8A;
        padding: 15px;
        color: #fff
    }

    /*===============================================
                   wrapper-gallary
    ================================================= */
    .wrapper-gallary{
        padding: 0px
    }

    /*===============================================
                   wrapper-organic
    ================================================= */
    .wrapper-organic{
        padding: 0px
    }
    .faqs-container{
        overflow: hidden;
    }
    .faq-singular {
        position: relative;
        border-bottom: 1px solid #ccc;
        padding: 0 30px 0 20px;
    }
    .faq-singular:hover,
    .faq-singular.active{
        background: #f2f2f2;
        background-image: linear-gradient(90deg, #042D8A 0%, #042D8A 8px, transparent 8px, transparent 100%);
    }
    .faq-singular .faq-question {
        position: relative;
        cursor: pointer;
        margin: 0;
        padding: 25px 25px 25px 0px;
        font-size: 20px;
    }
    .faq-singular .faq-question:before {
        position: absolute;
        content: "+";
        color: #808080;
        right: -20px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 28px;
        font-weight: 700;
        transition: all .5s;
    }
    .faq-singular.active .faq-question:before {
        transform: translateY(-50%) rotate(45deg) scale(1.3);
    }
    .faq-answer {
        display: none;
        padding-bottom: 20px;
    }

	/*===============================================
	               wrapper-login
	================================================= */
	.wrapper-login{
	  padding: 30px
	}
	.layout-login{
	  width: 100%;
	  height:350px;
	}
	.bt-register-mobile{
	    font-size: 13.5px;
	}

  	/*===============================================
	               wrapper-register
	================================================= */
    .layout-register{
      padding: 30px
    }
	.layout-register{
		width: 100%;
		height: 600px;
		padding: 20px 10px 10px;  
		border-radius: 5px
	}
	.layout-register h3{
	  text-transform: uppercase
	}
	.bt-login-mobile{
	    font-size: 13.5px
	}
	
    /*===============================================
                      Payment
    ================================================= */
    .wrapper-payment {
        padding: 20px 0px
    }
    .billing-detail-total{
        margin-left: 0px
    }
}