/**
 * @brief MrDonerStyle Theme tablet format styles
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.1
 * @date Creation: Sep 2022
 * @date Modification: Oct 2022
 * @copyright 2022 Ideogram Design
 */
.hiddenOnTablet {display:none !important;}
img.halfWidth {max-width:48%; height:auto;}

/* master */
.linputs {max-width:100%;} select.linputs {max-width:100%;}

/* editor */
.eTitle1 {font-size:28px;}
.eTitle2 {font-size:24px;}
.eTitle3 {font-size:20px;}
.eTitle4 {font-size:20px;}

/* page header */
#pageHeader .demoButton {display:none;}
#pageHeader .demoMessage {position:static;}
#pageHeader .demoMessage + .headBar {margin-top:0;}

#pageHeader .headBar .logo {display:inline-block; width:140px; height:140px; position:relative; background-size:90%;}
#pageHeader .headBar .myCaddy {display:block; float:right; background:url(../img/custom/addToCart.png) 50% 50% no-repeat #FFCD00; width:50px; height:50px; margin-top:50px;}

#pageHeader .headBar .account {width:50px; height:50px; margin-top:50px; padding:13px 20px 12px; background:url(../img/custom/accountMobile.png) 50% 50% no-repeat;}
#pageHeader .headBar .account img {display:none;}

#pageHeader .headBar .sites {width:220px; padding:20px 10px 0;}

#pageHeader .subBar {height:auto;}
#pageHeader .subBar .title {margin-left:200px; width:auto; padding: 10px 12px 0 20px;}
#pageHeader .subBar .caddy {display: none; width:50%; margin:0 0 0 auto; background:#FFCD00;}
#pageHeader .subBar .caddy .header {margin-top: 0; text-align:right; padding: 4px 20px;}
#pageHeader .subBar .caddy .total {padding: 4px 20px;}
#pageHeader .subBar .caddy .articles {text-align:right; padding: 0 20px;}
#pageHeader .subBar .caddy .articles .articleTitle {padding-right:10px;}
#pageHeader .subBar .caddy .articles .articleTitle .articleChildren {width:auto; margin-right:0px;}
#pageHeader .subBar .caddy .finaliseButton {max-width:300px; margin:0 auto;}

#pageHeader .headBar .myCaddy.flash {
    animation-name: caddyAdding;
    animation-duration: 0.25s;
    animation-iteration-count: 4;
    animation-direction: alternate;
    animation-timing-function: linear;
    /* background-color: #XXXXXX; */
}

@keyframes caddyAdding {
    to {
        background-color: white;
    }
}

/* page footer */
#pageFooter {clear:both; padding:20px 0;}
#pageFooter .mainContent {width:100%; max-width:100%;}

/* content */
#pageContent {margin:0 0 20px;}

.mainContent.htmlContent {padding:20px 20px 20px 220px;}

/* home */
.homePortal .freeContent .mainContent{max-width:100%; padding:20px 60px;}

.homePortal .shopButton .content {padding: 20px 40px 20px 60px; color:white; vertical-align:top; }
.homePortal .shopButton .button img {max-height:140px;}

.homePortal .mainContent.articles {padding:20px 0; font-size:0;}
.homePortal .mainContent.articles .eTitle2 {padding:0 20px;}

/* shop - families menu */
.shop .families {display:block; width:200px; float:left;}
.shop .families .family {display:block; text-transform:uppercase; font-size:18px; transition: all 0.3s;}

/* shop - article list */
.shop .articles {display:block; width:auto; margin-left:220px; padding:0;}
.shop .articles .article.col3 {width:44%;}
.shop .articles .article .picture img {max-width:100%;}
.shop .articles .article .title {font-size:16px;}

/* shop - category list */
.shop .categories {display:block; width:auto; margin-left:220px; padding:0;}


/* shop - single article */
.shop .articleSingle {display:block; width:auto; margin-left:220px; padding:0;}
.shop .articleSingle .actions .priceBox {width:300px;}
.shop .articleSingle .actions .priceBox .price {width:72px; color:white; padding-left:8px; }
.shop .articleSingle .actions .priceBox .orderButton {width:212px; text-align:right;}

.shop .articleSingle .data .picture {display:inline-flex; width:150px;}
.shop .articleSingle .data .picture img {width:150px; height:150px;}
.shop .articleSingle .data .description {display:inline-flex; width:auto;}

/* order */
.order {font-size:0; padding:10px 40px 10px 270px;}

/* article */
.mainContent.articles {padding:20px 20px 20px 155px;}
.articles .article {}
.articles .article {padding: 0 20px;}
.articles .article .date {width:40px; float:left;}
.articles .article .content {margin-left:50px; padding-left:20px;}
.mainContent.articleDisplay {padding:20px 20px 20px 155px;}
.mainContent.articleDisplay .date {width:50px;}
.mainContent.articleDisplay .content {margin-left:50px; padding-left:20px;}

/* guestbook */
.mainContent.guestbook {padding:20px 20px 20px 155px;}