@charset "UTF-8";
/*

Name: Weekly Options List
URI: http://weeklyoptionslist.com/
Description: This site was developed by Weston Digital Media for Weekly Options List. Copyright 2023.
Author: Chris Weston

*/


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


General Page Rules


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

html{
    font-size: 20px;
}

body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
}

h1, h2, h3, h4, p, ul, ol, li, a {
	
}

h1, .h1 {
    font-size: 3.75rem;
    font-weight: 700;
	
}

h2, .h2 {
    font-size: 2.25rem;
    font-weight: 400;
}

h3, .h3 {
    font-size: 2rem;
    font-weight: 400;

}

h4, .h4 {
    font-size: 1.5rem;
    font-weight: 400;
}

p, ul, ol, li, a, .para, label {
    font-size: 1.5rem;
    font-weight: 500;
}

p, ul, ol, li, .para, input, textarea, label {
    color: #77787B;
    font-family: 'Roboto', sans-serif;

}

button {
    font-family: 'Roboto', sans-serif;
    cursor: pointer;
}

input:-moz-placeholder, /* Firefox 18- */
input::-moz-placeholder, /* Firefox 19+ */
input:-ms-input-placeholder, /* IE 10+ */
input::-webkit-input-placeholder, /* Webkit based */
input::placeholder{ /* Modern browsers */
    font-family: 'Roboto', sans-serif;
    color: #77787B;
    background-color: transparent;
}

.fineprint{
    font-size: 1rem;
    text-align: center;
}

button, .btn{
    font-size: 2rem;
    font-weight: 400;
}

a.btn{
    border: 1px #fff solid;
    padding: 1rem 2.5rem;
    border-radius: 2rem;
    text-decoration: none;
}

.btn.white_btn,
.btn.green_btn{
    border-radius: 2rem;
    padding: 1rem 2.5rem;
    background-color: transparent;
    cursor: pointer;

}

.btn.green_btn{
    border: 1px #1D9d80 solid;
    color: #1D9d80;
}

.btn.white_btn{
    border: 1px #ffffff solid;
    color: #ffffff;
}

.hidden{
    display: none;
}


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


Class Rules


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


/********************* Font Colors *********************/

.dkBlueText{
    color: #262D6E;
}

.ltBlueText{
    color: #445FD3;
}

.greenText{
    color: #1D9d80;
}

.cyanText{
    color: #D5E7EA;
}

.tanText{
    color: #EAE3DD;
}

.whiteText{
    color: #FFFFFF;
}

.blackText{
    color: #000000;
}


/********************* Background Colors *********************/

.blue_section{
    background-color: #445FD3;
}

.cyan_section{
    background-color: #D5E7EA;
}

.teal_section{
    background-color: #1D9d80;
}

.desk{
    display: inherit; 
    
}

.desktab{
    display: inherit; 

}

.tab{
    display: none; 
    
}

.mob{
    display: none; 
    
}


.main_section{
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.main{
    max-width: 1200px;
    padding: 1.6rem 1rem 3.2rem;
    display: flex;
    text-align: center;
}

.table_main{
    padding: 1.6rem 2rem 3.2rem;
}


/********************* HEADER *********************/

header{
    background-image: url("../img/homepage-hero.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100vw;
    min-height: 44.5833vw;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: -198px;
    position: relative;
    z-index: 1;
}

header .main{
    align-items: center;
    vertical-align: middle; 
    justify-content: center;
    color: #FFFFFF;
    text-align: center;
    flex-wrap: wrap;
    padding: 4rem 1rem 1.6rem;
}

header .main h1{
    padding: .8rem 0 0;
    margin: 0;
}


/********************* LOGIN *********************/

.wol_body iframe#netlify-identity-widget{
    z-index: 9999999 !important;
}

/********************* MENU *********************/

#mainnav{
    
}

#mainnav.topnav {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 10000;
    overflow: visible;
}

#mainnav.topnav .menu_grp {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    padding-right: 1rem;
}

#mainnav.topnav li {
    list-style: none;
    padding-left: 0;
    position: relative;
}

#mainnav.topnav button,
#mainnav.topnav a,
#mainnav.topnav p {
    padding: 0 .8rem;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: 400;
    font-size: 24px;
    text-shadow: 2px 2px 10px #00000090;
    background-color: transparent;
    border: none;
    cursor: pointer;
}

#mainnav.topnav a:hover {
    
}

#mainnav.topnav button.active,
#mainnav.topnav a.active {
    font-weight: 700;

}

#mainnav.topnav .icon {
	display: none;
}


/******  Menu dropdown  ******/

#mainnav.topnav ul.dropdown {
	display: none;
	position: absolute;
    top: 40px;
    left: 0;
    padding-left: 0;
}

#mainnav.topnav ul.dropdown li {
	list-style-type: none;
    width: max-content;
}

#mainnav.topnav ul.dropdown li a {
    text-decoration: none;
    padding: 0.5em 1.5em 0.5em;
    display: block;
}

/******  Menu Logo  ******/


#mainnav.topnav a.logo {
    padding: 0em 1rem 0em;
}

#mainnav.topnav button.btn,
#mainnav.topnav a.btn {
    border: 1px #fff solid;
    padding: 1rem 2.5rem;
    border-radius: 2rem;
}



/********************* FOOTER ********************* /

footer p{
    text-align: center;
}



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


HOME PAGE


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

/****** Accordion ******/


#home-faq #accordion .ui-accordion-header{
    /*height: auto !important;*/
    border:none;
    border-bottom: solid #77787B 2px;
    margin: auto;
    padding: 1.6rem 0;
    background: url("../img/plus.png") no-repeat;
    background-position: right;
    background-size: 56px 56px;
    font-size: 2rem;
    font-weight: 400;
    text-align: left;
}


#home-faq #accordion .ui-accordion-header.ui-accordion-header-active{
    background: url("../img/minus.png") no-repeat;
    background-position: right;
    background-size: 56px 56px;
}

#home-faq #accordion .ui-accordion-content{
    /*height: auto !important;*/
    border: none;
    border-bottom: solid #77787B 2px;
    padding: 1.5rem 0;
    text-align: left;
}

#home-faq #accordion .ui-accordion-content p{
}


/******  Why Join Section  ******/

section#why-join .main {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
}

section#why-join .main > div {
    flex-basis: 100%;
}

section#why-join .main .icon_group {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    
}


section#why-join .main .icon_group .icon_txt {
    flex-basis: calc(33.3% - 60px);
    padding-left: .5rem;
    padding-right: .5rem;
}


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


TABLE PAGES/ TABLE STYLES


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

.table_hl .main{
    padding-bottom: 0;
}

.download_sect .main{
    padding-top: 4rem;
}

.capital_sect input#filter-value{
    font-size: 1.5rem;
    font-weight: 400;
}


.download_sect button#download {
    background-color: transparent;
    color: #1D9d80;
    border: 2px #1D9d80 solid;
    padding: 1rem 2.5rem;
    border-radius: 3rem;
}


.options_table.tabulator {
    font-size: 1rem;
    background-color: transparent;
    border: none;
    height: auto !important;
}

.options_table.tabulator .tabulator-header .tabulator-col{
    background-color: #1D9d80;
    color: #FFFFFF;
    text-align: center;
    
}

.options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover {
    background-color: #1D9d80;
}

.options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter{
    color: #FFFFFF; 
}

.options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow,
.options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border-bottom: 6px solid #FFFFFF;
}
.options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow{
    border-top: 6px solid #FFFFFF;

}


.options_table.tabulator .tabulator-footer{
    background-color: transparent;
    border-top: none;
    margin-top: 2rem;
}

.options_table.tabulator .tabulator-footer button.tabulator-page,
.options_table.tabulator .tabulator-footer button.tabulator-page:hover{
    color: transparent;
    background-color: transparent;
    border: none;
    background-repeat: no-repeat;
    width: 70px;
    height: 70px;
}

.options_table.tabulator .tabulator-footer button.tabulator-page[data-page="first"]{
    background-image: url("../img/first_icon.png");
    
}
.options_table.tabulator .tabulator-footer button.tabulator-page[data-page="last"]{
    background-image: url("../img/last_icon.png");
    
}

.options_table.tabulator .tabulator-footer button.tabulator-page[data-page="next"]{
    background-image: url("../img/next_icon.png");
    
}
.options_table.tabulator .tabulator-footer button.tabulator-page[data-page="prev"]{
    background-image: url("../img/prev_icon.png");
    
}


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


About Page


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

#about header{
    background-image: none;
}

#about header .main{
    color: #77787B;
}

#about #mainnav.topnav button, 
#about #mainnav.topnav a, 
#about #mainnav.topnav p {
    color: #445FD3;
    text-shadow: none;
}

#about #mainnav.topnav a.btn {
    border: 1px #1D9d80 solid;
    color: #1D9d80;
}

#about #about-slider .main{
    display: block;
    
}

#about #about-slider .slick-slider{
    max-width: calc(100vw - 200px);
    
}

#about #about-slider .slick-next,
#about #about-slider .slick-prev {
    height: 70px;
    width: 70px;
    color: transparent;
    overflow: hidden;
	position:absolute;
	top:calc(50% - 35px);
    border: none;
    background-color: transparent;
    background-size: cover;
}

#about #about-slider .slick-prev {
    background-image: url("../img/prev_slide.png");
	left:-100px;
}

#about #about-slider .slick-next {
    background-image: url("../img/next_slide.png");
	right:-100px;
}

#about #about-slider .slick-slide.slide {
    display: inline-block;
    vertical-align: middle;
    float:none;
}

#about #about-slider .slick-slide.slide .slide_txt {
    padding: 0 1rem;
}

#about .video_cont {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

#about .video_cont .tube_cont {
    flex-basis: 50%;
}

#about .video_cont .tube_cont iframe.tube_frame {
    max-width: 100vw;
    max-height: 57vw;
}

/********************* Contact Form *********************/


#contact-form {
    max-width: 1080px;
    margin: auto;
}

#contact-form .form_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    padding: 0.5rem;
}

#contact-form .form_row label,
#contact-form .form_row input, 
#contact-form .form_row textarea {
    font-size: 1.25rem;
    font-weight: 400;
    text-align: left;
}

#contact-form .form_row input, 
#contact-form .form_row textarea {
    padding: 0.25rem;
}

#contact-form label.form_50 {
    flex-basis: calc(50% - 2rem);
    padding-right: 2rem;
}

#contact-form label.form_50:last-child {
    padding-right: 0rem;
}

#contact-form label.form_100 {
    flex-basis: calc(100% - 2rem);
    width: 100%;
}

#contact-form .form_50 input{
    width: 100%;
}

#contact-form .form_100 textarea{
    width: 100%;
    margin-top: .5rem;
    resize: vertical;
    min-height: 4rem;

}



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


Membership Page


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

#member-bullets .main{
    padding: 3.2rem 1rem 3.2rem;
}

#member-icons {
    display: flex;
    flex-wrap: wrap;
}

#member-icons .icon_row {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    padding-bottom: 2rem;
    align-items: center;
}

#member-icons .icon_img {
    flex-basis: 230px;
    padding-right: 4rem;
}

#member-icons .icon_list {
    flex-basis: calc(100% - 230px - 4rem);
    text-align: left;
}

#member-icons .icon_list li,
#member-icons .icon_list p{
    font-weight: 400;
}


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


Media Queries


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



@media (max-width: 1450px) {
    
    header{
        min-height: 54vw;
    }


}


/********************* LARGE TABLET *********************/



@media (max-width: 1180px) {


    h1, .h1 {
		font-size: 1.25rem;

	}

	h2, .h2 {
		font-size: 1rem;

	}

	h3, .h3 {
		font-size: 1rem;
	}
	
	h4, .h4 {

	}

	p, ul, ol, li, a, .para, .fineprint, input, textarea {
		font-size: .75rem;
	}
    
    button, .btn {
        font-size: .75rem;
    }

    .desk{
        display: none; 

    }

    .desktab{
        display: inherit; 

    }

    .tab{
        display: inherit; 

    }

    .mob{
        display: none; 

    }
    
    button.btn,
    a.btn{
        padding: .5rem 1.5rem;
    }
    
    .main{
        max-width: calc(100vw - 2rem);
    }

    /********************* Nav *********************/
    
    #mainnav.topnav li {
        padding-bottom: .8rem;
    }

    #mainnav.topnav li button,
    #mainnav.topnav li a {
        font-size: .75rem;
    }

    #mainnav.topnav a.btn {
        padding: .5rem;
        border-radius: 2rem;
    }
    
    /********************* Header *********************/
    
    header {
        min-height: 38.4vw;
        margin-top: -97px;
    }

    
    /********************* Home Page *********************/

    /******  Why Join Section  ******/



    section#why-join .main .icon_group .icon_txt {
        flex-basis: calc(33.3% - 60px);
    }

    section#why-join .main .icon_group .icon_txt img {
        max-width: 96px;
    }


    /****** Accordion ******/


    #home-faq #accordion .ui-accordion-header{
        background-size: 1.25rem 1.25rem;
        font-size: 1rem;
    }
    
    #home-faq #accordion .ui-accordion-header.ui-accordion-header-active{
        background-position: right;
        background-size: 1.25rem 1.25rem;
    }

}

@media (max-width: 850px){
    .table_main {
        padding: 1.6rem 0.5rem 3.2rem;
    }

    .options_table.tabulator,
    .options_table.tabulator .tabulator-row .tabulator-cell {
        font-size: .5rem;
    }
    
    .options_table.tabulator .tabulator-header .tabulator-col .tabulator-col-title-holder{
        height: 100% !important;
        min-height: 2.5rem;
        position: relative;
        
    }
    
    
    .options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=desc] .tabulator-col-content .tabulator-col-sorter,
    .options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=asc] .tabulator-col-content .tabulator-col-sorter,
    .options_table.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=none] .tabulator-col-content .tabulator-col-sorter {
        position: absolute;
        top: 70%;
        right: 50%;
    }
    
    
    .options_table.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title{
        text-overflow: unset;
        white-space: pre-wrap;
    }

    .options_table.tabulator .tabulator-header .tabulator-col .tabulator-header-filter{
        display: none;
    }

    .options_table.tabulator .tabulator-row .tabulator-cell img{
        width: 25px !important;
        height: 25px !important;

    }
    
    .options_table.tabulator .tabulator-footer .tabulator-paginator{
        text-align: center;
    }
    


    
}

@media (max-width: 768px){
    
    
    /********************* Header *********************/
    
    header {
        min-height: 54vw;
    }

}



/********************* Tablet/MOBILE *********************/

@media (max-width: 610px){

	h1, .h1 {

	}

	h2, .h2 {

	}

	h3, .h3 {

	}

	h4, .h4 {
	}

	p, ul, ol, li, a, .para {

	}

    .desk{
        display: none; 

    }

    .desktab{
        display: none; 

    }

    .tab{
        display: none; 

    }

    .mob{
        display: block; 

    }
    
    .btn.green_btn {
        padding: 0.5rem 2.5rem;
    }

    #mainnav.topnav{
        position: relative;
        background-color: #D5E7EA;
        width: 100vw;
        flex-wrap: wrap;
        height: 139px;
    }
    
	#mainnav.topnav button,
	#mainnav.topnav a {
		display: none;
        font-size: 1rem;
        color: #445FD3;
        text-shadow: none;
    }
    

    /******  Logo  ******/
    
	#mainnav.topnav a.logo {
		display: block;
	}

    /******  Hamburger  ******/
    
	#mainnav.topnav a.icon {
		float: right;
		display: block;
        position: absolute;
        right: 0;
        top: .5rem;
        z-index: 10000000;
	}

	#mainnav.topnav a.icon i{
        color: #FFFFFF;
        font-size: 2em;
	}


    /******  Main Menu Items  ******/
    
    #mainnav.topnav .menu_grp{
        flex-wrap: wrap;
        padding-right: 0;
    }

	#mainnav.topnav.responsive {
		position: relative;
        height: 100%;
	}


    /******  Open Menu  ******/
    
    #mainnav.topnav.responsive .menu_grp{
        display: block;
        width: 100%;
        padding-left: 0;
    }
    
	#mainnav.topnav.responsive ul.dropdown li {
        width: 100%;
    }
    
    
    #mainnav.topnav.responsive .menu_grp li a,
    #mainnav.topnav.responsive .menu_grp li button,
	#mainnav.topnav.responsive ul.dropdown li button,
	#mainnav.topnav.responsive ul.dropdown li a {
		display: block;
        flex-basis: 100%;
        text-align: center;
        border-bottom: solid #445FD3 1px;
        padding-top: 1rem;
        padding-bottom: 1rem;
	}
    
    #mainnav.topnav.responsive .menu_grp li button,
    #mainnav.topnav.responsive ul.dropdown li button{
        width: 100%;
    }
    
    #mainnav.topnav.responsive .menu_grp li a,
    #mainnav.topnav.responsive ul.dropdown li a{
        width: calc(100% - 1.6rem);
    }
    
    
    #mainnav.topnav.responsive li a.btn {
        display: none;
	}

    #mainnav.topnav.responsive ul.dropdown{
        /*display: block;*/
        position: relative;
	}

    #mainnav.topnav.responsive ul.dropdown{
        
    }
    

    /********************* Main Nav *********************/
    
    #mainnav.topnav a.logo{
        padding: 0;
    }
    #mainnav.topnav a.logo img{
        width: 100vw;
    }

    
    /********************* Header *********************/
    
    header {
        min-height: 64vw;
        margin-top: 0;
    }
    
    /********************* Accordion *********************/


    #home-faq #accordion .ui-accordion-header{
        background-size: 18px 18px;
    }
    
    #home-faq #accordion .ui-accordion-header.ui-accordion-header-active{
        background-position: right;
        background-size: 18px 18px;
    }
    
    /********************* Table Pages *********************/
    
    .options_table.tabulator,
    .options_table.tabulator .tabulator-row .tabulator-cell {
        font-size: .4rem;
    }
    
    .options_table.tabulator .tabulator-header .tabulator-col .tabulator-col-title-holder {
        min-height: 4rem;
    }

    
    /********************* Performance Page *********************/
    
    #perform-download img{
        width: 100%;
        height: auto;
    }
    

    /********************* Membership Page *********************/
    
    #member-icons .icon_row {
        padding-bottom: 1rem;
    }
    
    #member-icons .icon_img {
        flex-basis: 100%;
        padding-right: 0;
    }

    #member-icons .icon_img img {
        width: 96px;
        height: 96px;
    }
    
    #member-icons .icon_list {
        flex-basis: calc(100%);
        text-align: left;
    }

    /********************* About Page *********************/


    #about #about-slider .slick-slider{
        max-width: none;
    }
    
    #about #about-slider .slick-next, 
    #about #about-slider .slick-prev {
        height: 40px;
        width: 40px;
        /*position: relative;
        top: 0;
        left: 0;
        right: 0;*/
        top: calc(100% + 0px);

    }

    #about #about-slider .slick-prev {
        left: calc(50% - 5rem);
    }
    
    #about #about-slider .slick-next {
        left: calc(50% + 3rem);
    }
    
    #about .video_cont .tube_cont iframe.tube_frame {
        max-width: 90vw;
        max-height: 51.3vw;
    }

    /********************* Contact Form *********************/

    #contact-form label.form_50,
    #contact-form label.form_100 {
        flex-basis: 100%;
        padding-right: 0rem;
        padding-bottom: 1.75rem;
    }

    #contact-form label.form_50:last-child,
    #contact-form label.form_100 {
        padding-bottom: 0rem;
    }
    
    #contact-form .form_row label, 
    #contact-form .form_row input, 
    #contact-form .form_row textarea {
        font-size: .75rem;
    }

}




/****************************  Reference styles- Delete upon launch  ****************************/

#redArea, .redArea{
	background-color:rgba(255,0,0,0.2) !important;
}

#blueArea, .blueArea{
	background-color:rgba(0,0,255,0.2) !important;
}

#greenArea, .greenArea{
	background-color:rgba(0,255,79,0.2) !important;
}

#orangeArea, .orangeArea{
	background-color:rgba(255,165,0,0.2) !important;
}

#purpleArea, .purpleArea{
	background-color:rgba(85,26,139,0.2) !important;
}

#yellowArea, .yellowArea{
	background-color:rgba(255,255,0,0.2) !important;
}

#redBorder, .redBorder{
	border:red solid 1px !important;
}