/*
Theme Name: EngageFlow
Author: Amigo|Style Ltd
*/


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit; list-style: none;
    vertical-align: baseline;
    box-sizing:border-box;
}
a{
    text-decoration:none;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    transition: 1s;
}
img{max-width:100%; height: auto;}

body{background: #fff; font-family:arial; font-size: 12px; line-height: 18px;}


@font-face {
    font-family: 'BauerBodoniStd1Roman';
    src: url('/fonts/BauerBodoniStd1Roman.eot');
    src: url('/fonts/BauerBodoniStd1Roman.eot') format('embedded-opentype'),
         url('/fonts/BauerBodoniStd1Roman.woff2') format('woff2'),
         url('/fonts/BauerBodoniStd1Roman.woff') format('woff'),
         url('/fonts/BauerBodoniStd1Roman.ttf') format('truetype'),
         url('/fonts/BauerBodoniStd1Roman.svg#BauerBodoniStd1Roman') format('svg');
}
@font-face {
    font-family: 'HelveticaNeueLTProLt';
    src: url('/fonts/HelveticaNeueLTProLt.eot');
    src: url('/fonts/HelveticaNeueLTProLt.eot') format('embedded-opentype'),
         url('/fonts/HelveticaNeueLTProLt.woff2') format('woff2'),
         url('/fonts/HelveticaNeueLTProLt.woff') format('woff'),
         url('/fonts/HelveticaNeueLTProLt.ttf') format('truetype'),
         url('/fonts/HelveticaNeueLTProLt.svg#HelveticaNeueLTProLt') format('svg');
}
@font-face {
    font-family: 'CantataOneRegular';
    src: url('/fonts/CantataOneRegular.eot');
    src: url('/fonts/CantataOneRegular.eot') format('embedded-opentype'),
         url('/fonts/CantataOneRegular.woff2') format('woff2'),
         url('/fonts/CantataOneRegular.woff') format('woff'),
         url('/fonts/CantataOneRegular.ttf') format('truetype'),
         url('/fonts/CantataOneRegular.svg#CantataOneRegular') format('svg');
}
@font-face {
    font-family: 'HelveticaNeueLTProBd';
    src: url('/fonts/HelveticaNeueLTProBd.eot');
    src: url('/fonts/HelveticaNeueLTProBd.eot') format('embedded-opentype'),
         url('/fonts/HelveticaNeueLTProBd.woff2') format('woff2'),
         url('/fonts/HelveticaNeueLTProBd.woff') format('woff'),
         url('/fonts/HelveticaNeueLTProBd.ttf') format('truetype'),
         url('/fonts/HelveticaNeueLTProBd.svg#HelveticaNeueLTProBd') format('svg');
}
@font-face {
    font-family: 'HelveticaNeueLTProRoman';
    src: url('/fonts/HelveticaNeueLTProRoman.eot');
    src: url('/fonts/HelveticaNeueLTProRoman.eot') format('embedded-opentype'),
         url('/fonts/HelveticaNeueLTProRoman.woff2') format('woff2'),
         url('/fonts/HelveticaNeueLTProRoman.woff') format('woff'),
         url('/fonts/HelveticaNeueLTProRoman.ttf') format('truetype'),
         url('/fonts/HelveticaNeueLTProRoman.svg#HelveticaNeueLTProRoman') format('svg');
}
body{
    overflow-x: hidden;
}
#wrapper{
    float: left;
    width:  100%;
}
.left {float: left;}
.right {float: right;}
.clear {margin: 0; padding: 0;clear: both;}
#header .title {
    margin: 0 auto 0;
    text-align: center;
}
#login {
   width: 320px;
   margin: 0 auto 0;
   padding: 60px 0 0 0;
}
#login img {
    height: 120px;
}
#logo {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 30px;
}
#dialog {
    display: none;
}

h2.signin {
    font-size: 22px;
    margin-bottom: 30px;
}
#header {
    background: #eeeeee;
    padding: 15px 12px 0 12px;
}
#header div {
    width: 33%;
}
#content {
    padding: 15px;
}
#content .titleproduct  {
    font-weight: bold;
    font-size: 13px;
    padding: 0 10px;
}
.explanationproduct {
    color: #b9b7b7;
    font-size: 11px;
    text-align: justify;
    padding: 10px;
}

.searchbtn {
    background: url('/images/search_btn.png') no-repeat;
    width: 30px;
    height: 36px;
    overflow: hidden;
    display: block;
    background-size: 30px;
    float: right;
    position: relative;
    top: -4px;
}
.searchbtn:hover {
    background: url('/images/search_btn_hover.png') no-repeat;
    background-size: 30px;
}
.gobackbtn {
    background: url('/images/goback.png') no-repeat;
    width: 30px;
    height: 36px;
    overflow: hidden;
    display: block;
    background-size: 30px;
    float: right;
    position: relative;
    top: -4px;
}
.gobackbtn:hover {
    background: url('/images/goback_hover.png') no-repeat;
    background-size: 30px;
}
.artztype p {
    width: 100%;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    margin: 0 0 7px;
}
.hide {
    display: none;
}
.types {
    width: 100%;
    /*margin: 0 auto 0;*/
    text-align: center;
}
.type1, .type2, .type3, .type4, .type5, .type6, .type7,.type8,.type9,
.type1hover, .type2hover, .type3hover, .type4hover, .type5hover, .type6hover, .type7hover, .type8hover, .type9hover {
    width: 32%;
    height: 142px;
    text-align: center;
    display: block;
    font-size: 13px;
    overflow: hidden;
    color: #03141d;
    margin: 0 10px 0 0;
    padding: 86px 10px 0 10px;
    float: left;
    font-weight: bold;
    line-height: 6;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 15px;
}
.type1 {background: url('/images/iconbtn1_hover.png') no-repeat top center;background-size: 120px 120px;}
.type1hover {background: url('/images/iconbtn1.png') no-repeat top center;background-size: 120px 120px;}
.type2 {background: url('/images/iconbtn2_hover.png') no-repeat top center;background-size: 120px 120px;}
.type2hover {background: url('/images/iconbtn2.png') no-repeat top center;background-size: 120px 120px;}
.type3 {background: url('/images/iconbtn3_hover.png')  no-repeat top center;background-size: 120px 120px;}
.type3hover {background: url('/images/iconbtn3.png') no-repeat top center;background-size: 120px 120px;}
.type4 {background: url('/images/iconbtn4_hover.png') no-repeat top center;background-size: 120px 120px;}
.type4hover {background: url('/images/iconbtn4.png') no-repeat top center;background-size: 120px 120px;}
.type5 {background: url('/images/iconbtn5_hover.png') no-repeat top center;background-size: 120px 120px;}
.type5hover {background: url('/images/iconbtn5.png') no-repeat top center;background-size: 120px 120px;}
.type6 {background: url('/images/iconbtn6_hover.png') no-repeat top center;background-size: 120px 120px;}
.type6hover {background: url('/images/iconbtn6.png') no-repeat top center;background-size: 120px 120px;}
.type7 {background: url('/images/iconbtn7_hover.png') no-repeat top center;background-size: 120px 120px;}
.type7hover {background: url('/images/iconbtn7.png') no-repeat top center;background-size: 120px 120px;}
.type8 {background: url('/images/iconbtn8_hover.png') no-repeat top center;background-size: 120px 120px;}
.type8hover {background: url('/images/iconbtn8.png') no-repeat top center;background-size: 120px 120px;}
.type9 {background: url('/images/iconbtn9_hover.png') no-repeat top center;background-size: 120px 120px;}
.type9hover {background: url('/images/iconbtn9.png') no-repeat top center;background-size: 120px 120px;}
.infobtn {
    float: right;
    margin: 0 10px 10px 0;
}
.infobtn img {
    width: 50px;
}
.submitbtn {
    background-image: linear-gradient(to right, #2285c2 , #515ba2);
    /*background: #155767; */
    border-radius: 10px;
    width: 100%;
    padding: 15px 0;
    text-align: center;
    color: #fff;
    font-size: 15px;
    display: block;
}
.submitbtn:hover {
     background-image: linear-gradient(to left,#515ba2 , #2285c2);
}
.productdiv {
    width: 46%;
    float: left;
    border-radius: 10px;
    /*border: 1px solid #BFBFBF;
    background-color: white;
    box-shadow: 3px 3px 3px 3px #aaaaaa;*/
    -webkit-box-shadow: 0 0 5px 2px #aaa;
    -moz-box-shadow: 0 0 5px 2px #aaa;
    box-shadow: 0 0 5px 2px #aaa;
    margin-bottom: 15px;
}
.imgproduct table td {
    height: 90px;
    vertical-align: middle;
    text-align: center;
}
.head {
    position: fixed;
    left: auto;
    margin: 0 20px 45px 0;
    bottom: 0;
    right: 0;
}
.menubtn {
    background: url('/images/menu_btn.png') no-repeat;
    width: 80px;
    height: 36px;
    overflow: hidden;
    display: block;
    background-size: 30px;
}
#header h2 {
    font-size: 20px;
}
#loginform, #footer {
    width: 300px;
    margin: 0 auto 0;
}
.ImagePMenu img {
    border-radius: 180px;
    -webkit-box-shadow: 0 0 5px 2px #9f9f9f;
    -moz-box-shadow: 0 0 5px 2px #9f9f9f;
    box-shadow: 0 0 5px 2px #9f9f9f;
    height: 50px;
    width: 50px;
    padding: 0px;
    margin: 0 10px 0 0px;
    float: left;
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
    color: #000;
    font-size: 16px;
}
#ImageProfileMenu h2 {
    padding: 10px 0 0 0;
    font-size: 14px;
}
#ImageProfileMenu h3 {
    font-size: 11px;
    color: #515ba2;
}
#listmenu {
    list-style: none;
}
#listmenu li {
    margin: 0 0 15px;
}
#listmenu li a {
    color: #000;
    font-size: 13px;
}
#listmenu li span {
    width: 25px;
}
.ImageP {
    margin: 0 auto 0;
    text-align: center;
}
#ImageProfile {
    text-align: center;
}
#ImageProfile h2 {
    color: #000;
    font-size: 17px;
    font-weight: bold;
}
#ImageProfile h3 {
    color: #515ba2;
    font-size: 12px;
}
#DetailsProfile {
    padding: 50px 0 0 0;
}
#ImageProfileMenu {
    padding: 0 0 20px;
    background: url('/images/line.png') repeat-x bottom;
    margin: 0 0 20px;
}
.IconDetailsProfile {
    border-radius: 180px;
    -webkit-box-shadow: 0 0 5px 2px #eee;
    -moz-box-shadow: 0 0 5px 2px #eee;
    box-shadow: 0 0 5px 2px #eee;
    height: 35px;
    width: 35px;
    padding: 9px 0 0 10px;
    margin: 0 0 20px 10px;
    float: left;
    content: "\f000";
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 16px;
}
.TextDetailsProfile {
    float: right;
    margin: 0 10px 0 0;
    font-size: 14px;
    color: #000;
    position: relative;
    top: 6px;
}
.ImageP img {
    border-radius: 180px;
    -webkit-box-shadow: 0 0 5px 2px #eee;
    -moz-box-shadow: 0 0 5px 2px #eee;
    box-shadow: 0 0 5px 2px #eee;
    height: 180px;
    margin: 0 0 20px;
}
#footer {
    padding: 15px 0 15px 0;
    text-align: center;
    color: #979797;
}
#footer a {
    color: #979797;
}
.normaluser {
    width: 240px;
    height: 24px;
    border: 1px solid black;
    border-radius: 10px;
    padding: 6px 6px 6px 47px;
    margin: 0 0 15px;
    background: url('/images/usr_icon.png') no-repeat left;
    background-size: 30px;
    background-position: 10px 5px;
}
.normalpass {
    width: 240px;
    height: 24px;
    border: 1px solid black;
    border-radius: 10px;
    margin: 0 0 15px;
    padding: 6px 6px 6px 47px;
    background: url('/images/pass_icon.png') no-repeat left;
    background-size: 30px;
    background-position: 10px 5px;
}
.field-icon {
    float: right;
    position: relative;
    margin-right: 12px;
    margin-top: -41px;
    z-index: 2;
    font-size: 15px;
    color: #515ba2;
}
.link {
    color: #000000;
    text-decoration: underline;
}
.link:hover {
    text-decoration: none;
}
.loginbtn {
    background-image: linear-gradient(to right, #2285c2 , #515ba2);
    width: 295px;
    padding: 10px;
    border-radius: 10px;
    /*background: #515ba2;*/
    display: block;
    text-align: center;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    margin: 0 0 10px;
}
.left {float: left;}
.right {float: right;}
.clear {margin:0;padding:0;clear:both}
#page {
    position: relative;
    z-index: 20;
    height: 100%;
}
#toggle-menu {
    /*position: absolute;*/
    top: 10px;
    left: 10px;
    padding: 15px 10px;
}
#menu {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 290px;
    height: 100%;
    padding: 15px 25px;
    margin: 0;
    list-style: none;
    background: #eeeeee;
    z-index: 10; /* Make sure the z-index is lower than the #page */
}
/* Animations */
#page, #menu {
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000;
}
/* Hide the menu unless it's animating or visible */
.animating #menu, .menu-visible #menu {
    display: block;
}
.menu-visible #wrapper {
    position: relative;
    top: 20px;
    border-radius: 10px;
    -webkit-box-shadow: 0 0 5px 2px #9f9f9f;
    -moz-box-shadow: 0 0 5px 2px #9f9f9f;
    box-shadow: 0 0 5px 2px #9f9f9f;
    background: #fff;
    width: 90%;
}
.menu-visible {
    background: #eee;
}
.menu-visible #header {
   border-radius: 10px;
   background: #fff;
}
.menu-visible .menubtn {
    background: url(/images/goback.png) no-repeat;
    width: 30px;
    height: 36px;
    overflow: hidden;
    display: block;
    background-size: 30px;
    /*float: right;*/
    position: relative;
    top: -4px;
}
/***
* If the animating class is present then apply
* the CSS transition to #page over 300ms.
*/
.animating #page {
    transition: transform .30s ease-in-out;
    -webkit-transition: -webkit-transform .30s ease-in-out;
}
/***
* If the left class is present then transform
* the #page element 240px to the left.
*/
.animating.left #page {
    transform: translate3d( -300px, 0, 0 );
    -webkit-transform: translate3d( -300px, 0, 0 );
}
/***
* If the right class is present then transform
* the #page element 240px to the right.
*/
.animating.right #page {
    transform: translate3d( 300px, 0, 0 );
    -webkit-transform: translate3d( 300px, 0, 0 );
}
/***
* If the menu-visible class is present then
* shift the #page 240px from the right edge
* via position: absolute to keep it in the
* open position. When .animating, .left and
* .right classes are not present the CSS
* transform does not apply to #page.
*/
.menu-visible #page {
    left: 300px;
}


@media (max-width: 240px) {

    .statafter {height: 40px!important;font-size: 11px!important;}
    h2 {font-size: 16px!important;margin-bottom: 2px!important;}
    #login {width: 100%!important;padding: 14px 0 0 0!important;}
    #login img {height: 60px;}
    #logo {width: 100px;height: 64px;display: block;margin: 0 auto 27px;}
    #loginform {width: 100%!important;margin: 0 auto 0;}
    .mkdf-row-grid-section-wrapper {width: 100%!important;}
    .wrapper {width: 100%!important;}
    .title {background: none!important;padding: 0!important; width: 60%!important; text-align: center; margin-left: 0!important; margin-bottom: 0px!important;}
    #search {width: 100%!important;}
    #SearchForm {clear: both; width: 100%!important;}
    .norminp {width: 100px!important;}
    table thead {display: none;}
    .bottomtbl {width: 100%!important;padding: 0 5px 100px 5px!important;}
    table.normal td {width: 95%!important;display: block;padding: 12px 5px!important;}
    table.normal {width: 98%!important;border-collapse: collapse;margin: 0;padding: 0;}
    .tbltxt {float: right!important;position: relative;top: -11px;}
    .tblnote {float: left!important;display: block!important;position: relative;top: -11px;}
    .seenotif {background: #79797979;}
    .seenotif a {color: #fff;}
    .hhide {display: none!important;}
    .fontsize10 {font-size: 10px!important;border: 0!important;}
    .hhidebrowswe {display: block!important;}
    .algnlft {text-align: left!important;}
    .borderno {border: 0!important;}
    .normaluser {width: 77%!important;height: 24px;border: 1px solid black;border-radius: 10px;padding: 6px 6px 6px 47px;margin: 0 0 5px!important;background: url('/images/usr_icon.png') no-repeat left;background-size: 30px;background-position: 10px 5px;}
    .normalpass {width: 77%!important;height: 24px;border: 1px solid black;border-radius: 10px;margin: 0 0 5px 0;padding: 6px 6px 6px 47px;background: url('/images/pass_icon.png') no-repeat left;background-size: 30px;background-position: 10px 5px;}
    .field-icon {float: right;position: relative;margin-right: 12px;margin-top: -31px;z-index: 2;font-size: 15px;color: #515ba2;}
    .loginbtn {width: 100%!important;margin: 0 0 5px!important;}
    #footer {width: 100%!important;margin: 0 auto 0;padding: 5px 0 5px 0!important;}

    #menu {width: 180px!important;}
    .animating.left #page {transform: translate3d( -180px, 0, 0 );-webkit-transform: translate3d( -180px, 0, 0 );}
    .animating.right #page {transform: translate3d( 180px, 0, 0 );-webkit-transform: translate3d( 180px, 0, 0 );}
    .menu-visible #page {left: 180px;}
    #toggle-menu {top: 0px;left: 0px;padding: 15px 10px;}
    .ImagePMenu {width: 100%;height: 70px;padding: 10px 0 0 0;}
    .ImagePMenu img {margin: 0 auto 0;}
    #header div {width: 20%;}
    .productdiv {width: 100%;}
    .type1, .type2, .type3, .type4, .type5, .type6, .type7, .type8, .type9, .type1hover, .type2hover, .type3hover, .type4hover, .type5hover, .type6hover, .type7hover, .type8hover, .type9hover {width: 100%;height: 64px;text-align: left;display: block;font-size: 11px;overflow: hidden;color: #03141d;margin: 0 0px 0 0;padding: 0px 10px 0 58px;float: left;font-weight: bold;line-height: 6;display: inline-block;vertical-align: middle;margin: 0 0 0px;background-size: 50px;background-position: center left;}

}
@media (min-width: 241px) and (max-width: 320px){
    #login {font-size: 22px!important;}
    #login img {height: 100px!important;}
    #logo {height: 120px!important;}
    #login {padding-bottom: 40px;}
    #loginform, #footer {margin: 0 auto 10px!important;}
    #header div {width: 20%!important;}
    #header .title {width: 60%!important;}
    #menu {width: 250px!important;}
    .animating.left #page {transform: translate3d( -250px, 0, 0 );-webkit-transform: translate3d( -250px, 0, 0 );}
    .animating.right #page {transform: translate3d( 250px, 0, 0 );-webkit-transform: translate3d( 250px, 0, 0 );}
    .menu-visible #page {left: 250px;}
    #toggle-menu {top: 0px;left: 0px;padding: 15px 10px;}
    .productdiv {width: 100%;}
    .type1, .type2, .type3, .type4, .type5, .type6, .type7, .type8, .type9, .type1hover, .type2hover, .type3hover, .type4hover, .type5hover, .type6hover, .type7hover, .type8hover, .type9hover {width: 32%;height: 120px;text-align: center;display: block;font-size: 11px;overflow: hidden;color: #03141d;margin: 0 10px 0 0;padding: 60px 0px 0 0px;float: left;font-weight: bold;line-height: 6;display: inline-block;vertical-align: middle;margin: 0 0 30px;
    background-size: 81px!important;}

}
@media (min-width: 321px) and (max-width: 360px){
    #login {padding: 60px 0 40px 0!iportant;font-size: 22px!important;}
    #login img {height: 100px!important;}
    #logo {height: 120px!important;}
    .type1, .type2, .type3, .type4, .type5, .type6, .type7,.type8,.type9, .type1hover, .type2hover, .type3hover, .type4hover, .type5hover, .type6hover, .type7hover, .type8hover, .type9hover {width: 32%;height: 120px;text-align: center;display: block;font-size: 11px;overflow: hidden;color: #03141d;margin: 0 10px 0 0;padding: 60px 0px 0 0px;float: left;font-weight: bold;line-height: 6;display: inline-block;vertical-align: middle;margin: 0 0 30px;background-size: 81px;}
    #header div {width: 20%!important;}
    #header .title {width: 60%!important;}

}
@media (min-width: 321px) and (max-width: 375px){

}
@media (min-width: 375px) and (max-width: 414px){

}
@media (min-width: 414px) and (max-width: 480px){

}
@media (min-width: 480px) and (max-width: 607px){

}
@media (min-width: 607px) and (max-width: 800px){

}