/*
Theme Name: Member Only Section
Author: Julian Chaniolleau
Description: Member Only Section for 97display websites
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
:root{
	--bodyBg  : #ffffff;
	--bodyTxt : #404040;
	--heading : #020202;
	--dynamic : #16b4e8;
	--border  : #e0e0e0;
	--contrast : #ffffff;
	--imgBg  : #4e4e4e;
	--corner : 4px;
	--cornerBig : 12px;
}

html *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{background:var(--bodyBg);color:var(--bodyTxt);font-family:'Source Sans Pro','Open Sans',sans-serif;font-size:16px;line-height:28px;font-weight:500;margin:0;min-height:100vh;padding: 0 0 60px 0;position:relative;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow:hidden;overflow-y:scroll} ::selection{background-color:var(--dynamic);color:#fff}::-moz-selection{background-color:var(--dynamic);color:#fff}::-webkit-scrollbar{width:12px}::-webkit-scrollbar-track{background:var(--bodyBg)}::-webkit-scrollbar-thumb{background:var(--dynamic);border-radius:2px}::-webkit-scrollbar-thumb:hover{cursor:ns-resize!important}.gecko *{text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.dynamicBg{background-color:var(--dynamic)}.dynamicTxt{color:var(--dynamic)}a.dynamicTxt:hover{opacity:.6}a,input.button{cursor:pointer;text-decoration:none;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}h1,h2,h3,h4,h5,h6{font-style:normal;color:inherit}h1 strong,h2 strong,h3 strong,h4 strong,h5 strong,h6 strong{font-weight:700;font-weight:500}h1 img,h2 img,h3 img,h4 img,h5 img,h6 img{display:inline-block}h1{font-size:48px;line-height:54px;margin-bottom:10px}h2{font-size:50px;line-height:50px;margin-bottom:10px}h3{font-size:40px;line-height:50px;margin-bottom:10px}h4{font-size:24px;line-height:30px;margin-bottom:10px}h5{font-size:18px;line-height:24px;margin-bottom:10px}h6{font-size:16px;line-height:19px;margin-bottom:10px}strong{font-weight:700}em{font-style:italic}small{font-size:80%;line-height:60%}sup{position:relative;font-size:60%;line-height:12px;top:-5px}
.biglines{font-size:20px;line-height:1.5em;font-weight:500;position:relative;z-index:5}
.upper{text-transform:uppercase}
.row:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.row_col{display:block;float:left}
.col_gap_20 .row_col{padding-left:20px;padding-right:20px} .c-1-1{width:100%} .c-1-2{width:50%} .c-1-3{width:33.33333336%} .c-1-4{width:25%} .c-1-5{width:20%} .c-1-6{width:16.66666667%} .c-2-2{width:100%} .c-2-3{width:66.33333336%} .c-2-4{width:50%} .c-2-5{width:40%} .c-2-6{width:32.33333336%} .c-3-4{width:75%} .c-3-5{width:60%} .c-3-6{width:100%} .c-4-5{width:100%} .c-4-6{width:100%} .c-5-6{width:100%}
.gap-10,.gap-20,.gap-30,.gap-40,.gap-50,.gap-60,.gap-70,.gap-80,.gap-90,.gap-100{display:block;width:100%}.gap-10{height:10px}.gap-20{height:20px}.gap-30{height:30px}.gap-40{height:40px}.gap-50{height:50px}.gap-60{height:60px}.gap-70{height:70px}.gap-80{height:80px}.gap-90{height:90px}.gap-100{height:100px}
.max100{width:100%;max-width:100px!important;margin-left:auto;margin-right:auto;float:none}.max200{width:100%;max-width:200px!important;margin-left:auto;margin-right:auto;float:none}.max300{width:100%;max-width:300px!important;margin-left:auto;margin-right:auto;float:none}.max400{width:100%;max-width:400px!important;margin-left:auto;margin-right:auto;float:none}.max500{width:100%;max-width:500px!important;margin-left:auto;margin-right:auto;float:none}.max600{width:100%;max-width:600px!important;margin-left:auto;margin-right:auto;float:none}.max700{width:100%;max-width:700px!important;margin-left:auto;margin-right:auto;float:none}.max800{width:100%;max-width:800px!important;margin-left:auto;margin-right:auto;float:none}.max900{width:100%;max-width:900px!important;margin-left:auto;margin-right:auto;float:none}.max1000{width:100%;max-width:1000px!important;margin-left:auto;margin-right:auto;float:none}.max1100{width:100%;max-width:1100px!important;margin-left:auto;margin-right:auto;float:none}.max1200{width:100%;max-width:1200px!important;margin-left:auto;margin-right:auto;float:none}.max1280{width:100%;max-width:1280px!important;margin-left:auto;margin-right:auto;float:none}.max1400{width:100%;max-width:1400px!important;margin-left:auto;margin-right:auto;float:none}.max1440{width:100%;max-width:1440px!important;margin-left:auto;margin-right:auto;float:none}.max1600{width:100%;max-width:1600px!important;margin-left:auto;margin-right:auto;float:none}
.w300{max-width:300px} .w400{max-width:400px} .w500{max-width:500px} .w600{max-width:600px} .w700{max-width:700px} .w800{max-width:800px} .w900{max-width:900px}
.m-b-0{margin-bottom:0} .m-b-10{margin-bottom:10px} .m-b-20{margin-bottom:20px} .m-b-30{margin-bottom:30px} .m-b-40{margin-bottom:40px} .m-b-50{margin-bottom:50px} .m-b-60{margin-bottom:60px} .m-b-70{margin-bottom:70px} .m-b-80{margin-bottom:80px} .m-b-90{margin-bottom:90px} .m-b-100{margin-bottom:100px}
.m-t-0{margin-top:0} .m-t-10{margin-top:10px} .m-t-20{margin-top:20px} .m-t-30{margin-top:30px} .m-t-40{margin-top:40px} .m-t-50{margin-top:50px} .m-t-60{margin-top:60px} .m-t-70{margin-top:70px} .m-t-80{margin-top:80px} .m-t-90{margin-top:90px} .m-t-100{margin-top:100px}
.px-10{padding-left:10px;padding-right:10px} .px-20{padding-left:20px;padding-right:20px} .px-30{padding-left:30px;padding-right:30px} .px-40{padding-left:40px;padding-right:40px} .px-50{padding-left:50px;padding-right:50px} .px-60{padding-left:60px;padding-right:60px} .px-70{padding-left:70px;padding-right:70px} .px-80{padding-left:80px;padding-right:80px} .px-90{padding-left:90px;padding-right:90px} .px-100{padding-left:100px;padding-right:100px}
.py-10{padding-top:10px;padding-bottom:10px} .py-20{padding-top:20px;padding-bottom:20px} .py-30{padding-top:30px;padding-bottom:30px} .py-40{padding-top:40px;padding-bottom:40px} .py-50{padding-top:50px;padding-bottom:50px} .py-60{padding-top:60px;padding-bottom:60px} .py-70{padding-top:70px;padding-bottom:70px} .py-80{padding-top:80px;padding-bottom:80px} .py-90{padding-top:90px;padding-bottom:90px} .py-100{padding-top:100px;padding-bottom:100px}
.pb-10{padding-bottom:10px} .pb-20{padding-bottom:20px} .pb-30{padding-bottom:30px} .pb-40{padding-bottom:40px} .pb-50{padding-bottom:50px} .pb-60{padding-bottom:60px} .pb-70{padding-bottom:70px} .pb-80{padding-bottom:80px} .pb-90{padding-bottom:90px} .pb-100{padding-bottom:100px} .pb-110{padding-bottom:110px} .pb-120{padding-bottom:120px} .pb-130{padding-bottom:130px} .pb-140{padding-bottom:140px} .pb-150{padding-bottom:150px} .pb-160{padding-bottom:160px}
.pt-10{padding-top:10px} .pt-20{padding-top:20px} .pt-30{padding-top:30px} .pt-40{padding-top:40px} .pt-50{padding-top:50px} .pt-60{padding-top:60px} .pt-70{padding-top:70px} .pt-80{padding-top:80px} .pt-90{padding-top:90px} .pt-100{padding-top:100px} .pt-110{padding-top:110px} .pt-120{padding-top:120px} .pt-130{padding-top:130px} .pt-140{padding-top:140px} .pt-150{padding-top:150px} .pt-160{padding-top:160px}
.space{padding-top:3vw;padding-bottom:3vw}
.boxed{margin:0 auto;max-width:1280px;padding:0 20px;width:100%}


/*----------------------------------*/
/*	 BUTTONS						*/
/*----------------------------------*/
.button { background-color: var(--dynamic); color: var(--contrast); border-radius: var(--corner); border: none; display: inline-block; padding: 5px 24px; font-weight: bold; line-height: 24px; vertical-align: top; }
.button:hover{ background-color: var(--heading); color: var(--dynamic); }

/*----------------------------------*/
/*	 HEADER							*/
/*----------------------------------*/
.memberOnly-header{ min-height: 130px; margin: 0 auto; max-width: 1280px; padding: 0 20px; width: 100%; }
.memberOnly-header--bar{ display: block; height: 8px; background-color: var(--dynamic); border-radius: 0 0 var(--corner) var(--corner); }
.memberOnly-header .content{ position: relative; }
.memberOnly-header--logo{ position: absolute; top: 0; left: 50%; margin-left: -140px; width: 280px; min-height: 150px; background-color: #1c1c1c; border-radius: 0 0 var(--cornerBig) var(--cornerBig);  }
.memberOnly-header--logo a{ display: grid; padding: 10px; height: 100%; width: 100%; position: absolute; align-items: center; max-height: 150px; }
.memberOnly-header--logo img{ display: block; margin: 0 auto; max-height: 130px; }
.memberOnly-header--nav{ padding: 46px 20px; }
.memberOnly-header--nav ul{ font-size: 0; max-width: calc(50% - 140px); }
.memberOnly-header--nav ul li { display: inline-block; font-size: 16px; font-weight: bold; }
.memberOnly-header--nav ul li a{ color: var(--heading); padding: 0 10px; }
.memberOnly-header--nav ul li a:hover{ color: var(--dynamic); }
.memberOnly-header--actions{ position: absolute; top: 0; right: 0; padding: 54px 20px 0 20px; }
.memberOnly-header--website{ float: left; padding-right: 20px; }
.memberOnly-header--website span{ color: #999; display: block; line-height: 10px; font-size: 14px; }
.memberOnly-header--website strong{ color: var(--heading); }
.memberOnly-header--website a:hover strong{ color: var(--dynamic); }
.memberOnly-header--logout{ float: right; }



/*----------------------------------*/
/*	 FOOTER							*/
/*----------------------------------*/
.footer{ position:absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
.footer--copyright{ color: #999; text-align: center; padding: 20px 0 ; }
.footer--bar{ display: block; height: 8px; background-color: var(--dynamic); border-radius: var(--corner) var(--corner) 0 0; position: relative; }
.footer--bar:after{ content:''; background-color: #1c1c1c; position: absolute; bottom: 0; left: 50%; margin-left: -140px; width: 280px; height: 20px; border-radius: var(--corner) var(--corner) 0 0;}


/*----------------------------------*/
/*	 LISTING						*/
/*----------------------------------*/
.memberOnly-listing{ padding-top: 60px; padding-bottom: 40px; min-height: calc(100vh - 244px); }
.memberOnly-listing .content{ padding: 0 30px; }
.memberOnly-listing-Posts ul{ font-size: 0; }
.memberOnly-listing-Posts ul li{ border-bottom: 1px solid var(--border); font-size: 16px; margin-bottom: 20px; overflow: hidden; }
.memberOnly-listing-Posts .memberOnly-article{}
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--fig{ background-color: var(--imgBg); border-radius: var(--cornerBig); float: left; margin: 0 30px 20px 0; max-width: 50%; overflow: hidden; }
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--resume{}
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--resume h2{ font-weight: bold; }
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--resume h2 a{ color: var(--heading); }
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--resume h2 a:hover{ color: var(--dynamic) }
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--resume .biglines p:last-child{ margin: 0; }
.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--date{}

.memberOnly-listing .more{ color: var(--heading); opacity: 0.5; display: inline-block; padding: 10px 30px 10px 0; position: relative; }
.memberOnly-listing .more:hover{ opacity: 1; padding: 10px 40px 10px 10px; }
.memberOnly-listing .more span{ display: inline-block; background-image: url(https://97displaylive.blob.core.windows.net/aqua/Resources/MemberOnly2k20/assets/images/memberOnly-arrow.svg); background-position: center right;  width: 30px; height: 16px; vertical-align: middle; position: absolute; right: -9px; top: 17px;}

.smallPost{ display: inline-block; width: 50%; }
.smallPost h2{ font-size: 20px; line-height: 28px; margin-bottom: 10px; }
.smallPost .biglines{ display: none; }
.smallPost .memberOnly-article--fig { width: 240px; }

.memberOnly--pagination{ margin-top: 40px; position: relative; text-align: center; }
.memberOnly--pagination:before{ content: ''; background-color: var(--border); position: absolute; top: 50%; left: 0; width: 100%; height: 1px; }
.memberOnly--pagination ul{ background-color: var(--bodyBg); position: relative; z-index: 2; display: inline-block; font-size: 0; margin: 0 auto; }
.memberOnly--pagination ul li{ font-size: 15px; display: inline-block; font-weight: bold; }
.memberOnly--pagination ul li a{}
.memberOnly--pagination ul li a:hover{}
.memberOnly--pagination .pageGo{ color: var(--heading); padding: 0 10px; }
.memberOnly--pagination .pageGo:hover{ opacity: 0.5; }
.memberOnly--pagination .pageIs{ color: var(--dynamic); padding: 0 10px; }

.memberOnly-post--header{ text-align: center; padding: 60px 0 20px 0 }
.memberOnly-post--header h1{ font-weight: bold; text-transform: uppercase; max-width: 1000px; margin: 0 auto;}
.memberOnly-post--fig{  margin: 0 auto; max-width: 100%; }
.memberOnly-post--fig img{ width: 100%; border-radius: var(--cornerBig); }
.memberOnly-post--retrait{ margin: 0 auto; max-width: 1000px; padding: 40px 0; }
.memberOnly-post iframe{ margin: 0 auto; }
.memberOnly-post .memberOnly-post--fig{ max-width: 500px; }

.memberOnly-post--next,
.memberOnly-post--prev{
	font-weight: bold;
	text-transform: uppercase;
	background-color: var(--dynamic); color: var(--contrast);
	font-size: 13px;
	position:  fixed;  top:50%; padding: 10px;
}
.memberOnly-post--next:hover,
.memberOnly-post--prev:hover{ padding: 10px 20px 10px 20px; }

.memberOnly-post--next{ border-radius: var(--corner) 0 0 var(--corner); right: 0; }
.memberOnly-post--prev{ border-radius: 0 var(--corner) var(--corner) 0; left: 0;  }

.sizeC1{width:30%}
.sizeC2{width:70%; padding-right: 20px;}
.crm97d-select,.crm97d-select *,html *{box-sizing:border-box;font-family:'Source Sans Pro',sans-serif}
.crm97d-select{background:rgba(255,255,255,1);border:1px solid rgba(122,141,161,0.5);color:#20253a;border-radius:3px;height:50px;line-height:50px;position:relative;max-width:300px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.crm97d-select.active,.crm97d-select:hover{border:1px solid #a9a9a9}
.crm97d-select .crm97d-select--active{cursor:pointer;padding:0 20px}
.crm97d-select ul li{list-style:none;margin:0;width:100%}
.crm97d-select ul{background:#fff;border:1px solid #a9a9a9;border-radius:3px;box-shadow:0 8px 20px -10px #000;display:block;position:absolute;top:50%;left:2%;z-index:1000;width:96%!important;max-width:96%!important;line-height:28px;max-height:300px;overflow:hidden;overflow-y:auto;opacity:0;visibility:hidden;margin:0;padding:0;-webkit-transition:opacity .2s ease-in-out,top .2s ease-in-out;-moz-transition:opacity .2s ease-in-out,top .2s ease-in-out;-o-transition:opacity .2s ease-in-out,top .2s ease-in-out;transition:opacity .2s ease-in-out,top .2s ease-in-out}
.crm97d-select.active ul{top:90%;opacity:1;visibility:visible}
.crm97d-select ul li{padding:4px 10px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
.crm97d-select ul li:hover{background:#0c64ed;background:linear-gradient(90deg,rgba(12,100,237,0.06486344537815125) 0%,rgba(255,255,255,1) 100%);cursor:pointer}
.crm97d-select ul li.selected{background:#0c64ed;background:linear-gradient(90deg,rgba(12,100,237,0.06486344537815125) 0%,rgba(255,255,255,1) 100%);color:#000;font-weight:700}
.crm97d-droplist{display:none}
.crm97d-select:before,.crm97d-select:after{content:'';background:#20253a;height:2px;width:8px;position:absolute}
.crm97d-select:before{right:20px;top:22px;transform:rotate(45deg)}
.crm97d-select:after{right:15px;top:22px;transform:rotate(-45deg)}
.crm97d-select.active:before{transform:rotate(-45deg)}
.crm97d-select.active:after{transform:rotate(45deg)}

.member_only--search{ width: 100%; max-width: 500px; margin: 0 auto; position: relative; }
.member_only--search .clear{ display: none; }
.member_only--search .search{ padding: 9px 20px; border-radius: var(--corner); border: 1px solid #bcc6d0; width: 100%; }
.member_only--search .btn{ position: absolute; right: 2px; height: 90%; padding: 0 16px; background: var(--dynamic); color: var(--contrast); font-weight: bold; border-radius: var(--corner); top: 5%; z-index: 10; }

.row_col { width: 100%; }
.dc81_field, .dc81_textarea, .dc81_select {
    background: rgba(152, 152, 152, 0.2) !important;
    color: #484848 !important;
    border: 1px solid #fff !important;
    border: 1px solid rgba(148, 148, 148, 0.3) !important;
}
.dc81_selectBox:after,.dc81_selectBox:before{ background-color: #484848 !important; }

@media only screen and (max-width: 1023px) {
	.memberOnly-listing-Posts .memberOnly-article .memberOnly-article--fig{ float: none; max-width: 200px; }
	.smallPost{ display: block; width: 100%; }
	.boxed{ max-width: 600px; }
	.memberOnly-header--logo{ position: relative; }
	.memberOnly-header--nav ul{ text-align: center; max-width: 100%; }
	.crm97d-select .crm97d-select--active,
	.crm97d-select ul li{ text-align: left; }
	.memberOnly-header--actions { position: fixed; top: auto; right: 0; padding: 20px; background:var(--bodyBg); width: 100%; bottom: 0; z-index: 1000; }
	.memberOnly-listing { padding-top: 30px;}
	.memberOnly-header--nav { padding: 20px; }
	.memberOnly-post--header{ padding-top: 0; }
	.biglines { font-size: 18px; }
	.smallPost .biglines{ display: block; }
	h1{ font-size: 36px; line-height: 40px; margin-bottom: 10px; }
	h2{ font-size: 28px; line-height: 32px; margin-bottom: 10px; }

}

/*FORM POP*/
	.form-popup{ display: none; }
	.form-inner{
	    display: flex;
	    top: 0;
	    left: 0;
	    background: rgba(4, 4, 4, 0.9);
	    height: 100%;
	    width: 100%;
	    position: fixed;
	    z-index: 10000;
	    align-content: center;
	    align-items: center;
	}
	.form-container {
	    padding: 30px;
	    background-color: #464646;
	    margin: 0 auto;
	    border-radius: 4px;
	}
    .form-container textarea {
        width: 100%;
        padding: 10px 16px; 
        border-radius: 8px;
        box-sizing: border-box;
        border:none
    }
    .form-container input[type=text] {
        width: 100%;
        padding: 10px 16px;
        margin: 8px 0;
        display: inline-block;
        border-radius: 8px;
        box-sizing: border-box;
        border:none;
    }

.form-container h4, .form-container h2, .form-container label, .form-container #schedulerTime{ color: #fff; text-align: center; }


.accountNav{ width: 50px; }
.accountNav .dropdown {width: 51px;position: relative;padding: 0 10px;height: 42px;}
.accountNav .dropdown_menu {
    width: 200px !important;
    position: absolute;
    max-width: 200px !important;
    display: block;
    top: 100%;
    right: -20px;
    z-index: 1000;
    background: #fff;
    box-shadow: 0px 20px 20px -10px rgba(0,0,0,0.2), inset 0px 0px 0px 1px rgba(0,0,0,0.15);
    border-radius: 4px;
    overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: all 0.2s ease-in-out;
}
.accountNav .dropdown:hover .dropdown_menu{ opacity: 1; visibility: visible; }
.accountNav .dropdown_menu a{display:block;color: #202020;border-bottom: 1px solid rgba(0,0,0,0.15);padding: 6px 16px;margin-bottom: -1px;}
.accountNav .dropdown_menu a:hover{
	color: #444;
    background: rgba(0,0,0,0.05);
}
@media only screen and (max-width: 1023px){
	.accountNav .dropdown_menu { top:auto; bottom: 100%; }
}

.memberOnly-FormPage{ max-width: 800px; margin:0 auto; }
.memberOnly-FormPage--row{ display: grid; grid-template-columns: 200px 1fr; margin-bottom: 13px; }
.memberOnly-FormPage label{ font-size: 16px; font-weight: 600; line-height: 50px; }
.memberOnly-FormPage input[type="text"]{ width: 100%; background: #fff; border-radius: 6px; border:1px solid #d9d9d9; height: 50px; padding: 0 20px; }
.field--radio{
    visibility: hidden;
    width: 0;
    height: 0;
    position: absolute;
}
.field--radio + label{ display:inline-block; position: relative; padding: 0px 10px 0px 40px; margin-bottom: 0px; }
.field--radio + label:before{ content: ''; position: absolute; top: 18px; left: 4px;  box-shadow: 0px 0px 0px 2px #d8d8d8; width: 16px; height: 16px; border-radius: 24px; }
.field--radio + label:hover:before{ box-shadow: 0px 0px 0px 4px #aaa; }
.field--radio + label:after{ content: ''; position: absolute; top: 20px; left: 6px; opacity:0.5; background: #d8d8d8; width: 12px; height: 12px; border-radius: 24px; }
.field--radio + label:before, .field--radio + label:after{ transition: all 0.3s ease-in-out; }
.field--radio:checked + label:before{ box-shadow: 0px 0px 0px 2px var(--dynamic); }
.field--radio:checked + label:after{ background-color: var(--dynamic); opacity: 1; }