/**
 * @brief UPOSDemo1Design Theme handheld format styles
 * @details Plugin / Theme Styles
 * @author JB Lebrun
 * @version 1.0.4
 * @date Creation: Feb 2018
 * @date Modification: Dec 2022
 * @copyright 2018 - 2022 Ideogram Design
 */
.hiddenOnMobile {display:none !important;}
img.halfWidth {max-width:100%;}

/* media popup */
.mediaPopupBkgd {background:white; opacity:1;}
.mediaPopup {height:auto !important; position:fixed !important; top:0 !important; bottom:0 !important; left:0 !important; overflow-y:auto; border-radius:0; max-width:100%; box-sizing: content-box;}
.mediaPopup div {max-width:100%;}
.mediaPopup div object {max-width:100%;}

/* editor */
* {font-size: 14px;}

.eTitle1 {font-size:20px;}
.eTitle2 {font-size:18px;}
.eTitle3 {font-size:16px;}
.eTitle4 {font-size:16px;}

.eContent3 {font-size:16px;}

/* parts */
.UPOSDemo1Button {min-width: 80px;}
.UPOSDemo1Button2 {min-width: 80px;}

/* header */
#pageHeader .demoMessage {font-size:11px;}
#pageHeader .headBar {height:70px;}
#pageHeader .headBar .logo {width:150px; height:105px; background-size:70% auto;}
#pageHeader .headBar .sites {display:none;}

#pageHeader .headBar .myCaddy {width:70px; height:70px; margin-top:0px;}
#pageHeader .headBar .myMenu {display:block; float:right; background:url(../img/custom/menu.png) 50% 50% no-repeat #f88b46; width:70px; height:70px; margin-top:0px;}

#pageHeader .headBar .menu {display:none;}
#pageHeader .headBar .account {width:70px; height:70px; margin-top:0px;}
#pageHeader .headBar .account img {width:auto; max-width:100%; position:static;}

#pageHeader .subBar .mobileSiteSelector {display:block; text-align:right; padding:10px;}
#pageHeader .subBar .title {margin-left:150px; width:auto; padding: 10px 12px 0 20px;}
#pageHeader .subBar .caddy {width:100%; margin-bottom:15px; box-shadow: 0 6px 6px 0px rgba(0,0,0,0.25);}
#pageHeader .subBar .caddy .finaliseButton {padding:8px 12px;}

#MobileMenu {width:100%; float:none; display:none; background:#efefef; margin-bottom:16px; box-shadow: 0 6px 6px 0px rgba(0,0,0,0.25);}
#MobileMenu .menuHeader {display:block; padding: 10px 16px; background:#f88b46; text-transform: uppercase; font-size: 18px;}
#MobileMenu .family {padding:12px 20px; font-size:18px; border-bottom:solid 1px #dfdfdf;}

/* footer */
#pageFooter .menu {display:block; width:100%;}
#pageFooter .designers {display:block; width:100%;}

/* content */
.mainContent.htmlContent {padding:20px;}

/* home */
.homePortal .banners .banner a {width:100%; display:block; overflow:hidden;}
.homePortal .banners .banner a img {width:120%; max-width:120%; display:block; overflow:hidden; text-align:right; position:relative; left:-5%;}

.homePortal .freeContent .mainContent{padding:20px;}

.homePortal .shopButton .content {display:block; width:100%; padding: 10px 20px;}
.homePortal .shopButton .content * {text-align:left;}
.homePortal .shopButton .button {display:block; width:100%; padding: 20px 0 10px;}

/* shop */
.shop {margin: 0 auto;}

/* shop - families */
.shop .families {width:100%; float:none; display:none; background:#efefef; margin-bottom:16px; box-shadow: 0 6px 6px 0px rgba(0,0,0,0.25);}
.shop .families .menuHeader {display:block; padding: 10px 16px; background:#f88b46; text-transform: uppercase; font-size: 18px;}
.shop .families .family {padding:12px 20px; font-size:18px; border-bottom:solid 1px #dfdfdf;}

/* shop - articles */
.shop .articles {margin-left:0px; text-align:center;}
.shop .articles .article.col2 {width: 80%;}
.shop .articles .article.col3 {width: 80%;}

/* shop - article */
.shop .articleSingle {margin-left:20px;}

.shop .articleSingle .actions .priceBox {width:244px; margin-left: 10px; background:#f88b46;}
.shop .articleSingle .actions .priceBox .price {width:60px; color:white; padding-left:0;}
.shop .articleSingle .actions .priceBox .orderButton {width:168px; background:none; padding-right:0;}

.shop .articleSingle .extra .block {width:100%; display:block; margin-bottom:15px;}

/* shop - selection panel */
#SelectionPanel {padding:10px 20px; width:100%; height:auto; overflow:none; background:white;}
#SelectionPanel .articles.last {border:none !important;}
#SelectionPanel .articles .article {display:block; width:100%;}

/* order */
.order {font-size:0; padding:10px;}
.order .paymentDemo .creditcard {display:block; margin:0 0 20px;}

/* ratings */
.articleSingle .ratings .rating {display:block; width:96%; margin:0 0 4%;}