body {
    /*background: url("../img/hero.jpg") fixed;
    background-size: 1920px;
    background-repeat: no-repeat;
    background-position: top center;*/

}

blockquote {
    background: none;

}

.blockquoteGreen {
    background: none;
    /* color  : #01bfa5;*/
}



h1 {}

h2 {
    font-size: 2.5em;
    padding  : 0 0 1% 0;
}

p {
    font-size: 18px;
    padding  : 1% 0;
}


#mainMenu {}

.pull-right {

    float: right !important;

}

#page {
    position: relative;
    clear   : both;
}


/** ----------------------- Section Hero  ----------------------- **/

.title {
    font-size     : 3.5em;
    font-weight   : bolder;
    padding       : 0 0 2% 0;
    /* text-shadow: 5px 5px 3px rgba(0, 0, 0, 0.3),
        5px 5px 3px rgba(0, 0, 0, 0.1),
        5px 5px 3px rgba(0, 0, 0, 0.1); */

    text-shadow: 0px 4px 3px rgb(0 0 0 / 30%), 0px 4px 3px rgb(0 0 0 / 10%), 0px 4px 3px rgb(0 0 0 / 10%);
    text-align : left;
}

.heroSection {
    /*top: 1vmin;*/
    position           : relative;
    clear              : both;
    color              : white;
    text-align         : center;
    padding            : 0 0 0 0;
    height             : auto;
    width              : 100%;
    background         : url("../img/hero.jpg") fixed;
    /* background      : url("../img/hero_bg.svg") fixed; */
    background-size    : 1920px;
    background-repeat  : no-repeat;
    background-position: top center;
}

.hero-img-wrap {
    /* background           : url("../img/hero_bg.svg") fixed; */
    background           : url("../img/hero.jpg") fixed;
    min-height           : 400px;
    /* min-width         : 1366px; */
    height               : 100%;
    width                : 100%;
    position             : absolute;
    top                  : 0;
    left                 : 0;
    filter               : blur(2px);
    background-size      : 110%;
    background-repeat    : no-repeat;
    background-blend-mode: multiply;
    background-color     : #bbb;
    top                  : -2px;
    background-position-x: -20px;
}

.titleWrap {
    width       : 100%;
    /*background: rgba(0,0,0,0.5);*/
    padding     : 0.2%;
    color       : white;
    margin      : 0 0 0 0;
    text-align  : left;
    position    : relative;
    z-index     : 2;
}


.subTitleWrap {
    background: rgba(238, 66, 62, 0.8);
    /*rgba(129,129,129,0.5);*/
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3),
        0px 4px 3px rgba(0, 0, 0, 0.1),
        0px 4px 3px rgba(0, 0, 0, 0.1);
    /* width     : auto; */
    width  : 50vmin;
    height : auto;
    padding: 0 20px;
    margin : 0;
    box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3),
        0px 4px 3px rgba(0, 0, 0, 0.1),
        0px 4px 3px rgba(0, 0, 0, 0.1);
}

.subTitle {
    font-size   : 1.8em;
    /* padding  : 2% 0; */
    padding     : 9px 0;
    margin      : 0;
}

.titleTextWrap {
    text-align : left;
    clear      : both;
    line-height: 36px;
    padding    : 2% 0 1% 1%;

}

.titleText {
    font-size: 1.4em;
    text-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3),
        0px 4px 3px rgba(0, 0, 0, 0.1),
        0px 4px 3px rgba(0, 0, 0, 0.1);
}

#heroSubTextWrap {
    padding-bottom: 3%;
    position      : relative;
}



/** ----------------------- Common Elements  ----------------------- **/

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .dropdown-menu {}


#glance {
    margin: 0 .5%;
}

#table,
#glance {
    margin: 0;
}



.tableWrap {
    padding: 0.5%;

}

.allTables {
    padding : 0;
    margin  : 0 0.5%;
    overflow: hidden;

}

.tableTitleWrap {
    text-align : center;
    font-weight: bold;
    background : #01b9ff
        /*#01bfa5*/
    ;
    color  : white;
    width  : 100%;
    padding: 0;
    margin : 0 0;
}

.tableTitle {
    padding  : 1%;
    margin   : 0 1%;
    font-size: 1.5em;
}

.comapnyLogosWrap {
    width     : 106px;
    background: black;
}

.comapnyLogosWrap img {
    width: 100%;
}

.companyLogos {
    width  : 100%;
    margin : 0 auto;
    padding: 0;
}

td:has(.companyLogos) {
    padding: 0 7px !important;
}

#readFullReview .linkReview {
    padding: 1.3% 0;
}

.companyRow {
    background: black;
    color     : white;
}

.companyTitle {
    background : black;
    font-weight: bold;
    font-size  : 1.5em;
    padding    : 1.5% 1%;
}

.checkRow {
    text-align: center;

}

.checkRow i {
    font-size: 1.5em;
}

.centerRow td {
    text-align: center;

}

.centerRow .rowTag {
    text-align: left;
}

.rowTag {
    text-align: left;
}

.fa-check-circle {
    color: #777;
}

.fa-times-circle {
    color: #ccc;
}


#company1,
#company2,
#company3,
#company4,
#company5,
#company6,
#company7,
#company8 {
    background   : black;
    /*font-weight: bold;*/

    padding   : 2% 0.1%;
    text-align: left;
}

#company1 p,
#company2 p,
#company3 p,
#company4 p,
#company5 p,
#company6 p,
#company7 p,
#company8 p {
    text-align: left;

    font-size     : 2vmin;
    vertical-align: middle;
    padding       : 3% 0 0 6px;
}



#section2,
#section4,
#section6 {
    background: #fafafa;

}


.footer {
    background: white;
}

/** ----------------------- Section 1 -  ----------------------- **/

.rrt .img-fluid {
    max-width: 120px;
    margin   : 0;
    padding  : 0;
}



/** --------------------------------- **/

#rank1 {
    height    : 130px;
    padding   : 0px 0 0px 0;
    margin    : 0;
    font-size : 4em;
    background: #187bcc;

    color: gold;
}

#rank2 {
    height    : 100px;
    padding   : 0 0 0 0;
    margin    : 30px 0 0 0;
    font-size : 3em;
    background: #0f5187;
    color     : lightgray;
}

#rank3 {
    height    : 70px;
    padding   : 0 0 0 0;
    margin    : 60px 0 0 0;
    font-size : 2em;
    background: #1e4462;
    color     : silver;
}

.rankNo {
    height : 50px;
    padding: 0 0 0 0;
    margin : 80px 0 0 0;
    background:
        /* #cce5f9*/
        #e8f5ff;
}

/** --------------------------------- **/



.rankNumbers {
    font-size  : 2.5em;
    font-weight: bold;
    text-align : center;
    height     : 50px;
    margin     : 80px 0 0 0;
    padding    : 0;
    border     : 1px solid white;

}



.section1 {
    background: white;
    padding   : 2% 0;
    clear     : both;
    position  : relative;
}



.topSectionText {
    padding: 0 0 0 0;
    clear  : both;
}

.rank {
    text-align: center;
}

#rank {
    text-align    : left;
    /* font-weight: bold;*/
    height        : 50px;
    font-size     : 1em;
    padding       : 2% 2%;
    margin        : 80px 0 0 0;
    background    : #f0f0f0
        /*#cce5f9*/
    ;
    color: black;

}

.number {
    font-size  : 2em;
    font-weight: bold;
    padding    : 1% 0;
    border     : 1px solid white;
    color      : white;
}

.number1 {
    font-size  : 2em;
    font-weight: bold;
}



#readFullReview {
    background-color: #68b6f6;
    color           : white;
    text-align      : center;

}

#readFull {
    text-align : left;
    font-weight: bolder;
    font-size  : 1.2em;
    padding    : 1.1% 2%;
    color      : black;

}

/** ----------------------- Section 6 -  ----------------------- **/

.priceText {
    padding   : 0 0 0 20px;
    margin    : 0;
    text-align: left;
}


#readFullReview td,
#companyRow td {
    border: 1px solid white;
}


#table {
    width: 100%;

}



#readFullReview .linkReview a {
    color: #0a3f6a;

}

.companyRow #company1 {
    padding: 0.5% 0;


}

.companyRow #company1 p {
    font-size  : 2vmin;
    font-weight: bolder;


}

#readFullReview #readFull {
    padding: 0.5%;
}

#table tr td {
    padding: 0;
}

#readFullReview #flexiLink {
    background: gold;
}

#readFullReview #mspyLink {
    background: lightgray;
}

#readFullReview .readlink {
    background: lightgray;
}

#readFullReview #trackLink {
    background: silver;
}


/** ------------------------------------------------------ **/


/*


.allTables .blackCompanyRow {
    background: black;
}




.companyRow td {
    background: black;
}




.table-wrap .allTables .comapnyLogosWrap {
    background: black;
}




.table-wrap #company2, .table-wrap #company3, .table-wrap #company4 {
background: black; padding: 2% 2% 6.5% 2%;
}




.spy-table tbody tr:nth-child(odd) th,
.spy-table tbody tr:nth-child(odd) td {
	background-color: #f0f0f0f0;
}

.spy-table tbody tr:nth-child(even) th,
.spy-table tbody tr:nth-child(even) td {
	background-color: white;
}
*/


#ranking {
    background      : white;
    /** ----------------------- white  ----------------------- **/
    border          : 1px solid white;
    background-color: #fff;
}


.table>tbody>tr>td,
.table>tbody>tr>th,
.table>tfoot>tr>td,
.table>tfoot>tr>th,
.table>thead>tr>td,
.table>thead>tr>th {
    vertical-align: middle;
}



.rowTag {
    vertical-align: middle;
}


.last .img-fluid {
    /* width: 100%; */
    text-align: center;
    margin    : 0;
    padding   : 0;
}

.last .rt-black-bg {
    text-align: center;
    padding   : 0;
    margin    : 0;
}





/** -------------------------------------------------------------------------------- **/
/** -------------------------------------------------------------------------------- **/
/** -------------------------------------------------------------------------------- **/

a:has('.companyLogos') {
    padding: 0 5px !important;
    width  : 100% !important;
    display: inline-block !important;
}

img.companyLogos {
    max-width: 120px !important;
}

@media only screen and (max-width: 62em) {

    #table-wrap {
        overflow-x: scroll;
    }

    #company8 p {
        padding: 6px 10px 0 0px;
        height : 10px;
    }


    #rt4 thead .companyRow td {
        padding  : 4.3px 3px;
        font-size: 16px;
    }

    .rrt .img-fluid {
        max-width: 57.1px;
        margin   : 0;
        padding  : 0;
    }

    .companyRow #company1 {
        padding: 0 0 0 2px;
    }

    #company1 p,
    #company2 p,
    #company3 p,
    #company4 p,
    #company5 p,
    #company6 p,
    #company7 p,
    #company8 p {
        padding: 4px 0 0 6px;
    }


}


/** -------------------------------------------------------------------------------- **/

@media only screen and (max-width: 50em) {


    .rrt .img-fluid {
        max-width: 56.4px;
        margin   : 0;
        padding  : 0;
    }

}


/** -------------------------------------------------------------------------------- **/

@media only screen and (max-width: 40em) {

    #table-wrap {
        overflow-x: scroll;
    }

    .rankNo {
        height    : 20px;
        padding   : 0 0 0 0;
        margin    : 110px 0 0 0;
        background: #e8f5ff;


    }

    #rank1 {
        height    : 70px;
        padding   : 0px 25px 0px 25px;
        margin    : 60px 0 0 0;
        font-size : 3.5em;
        background: #187bcc;

        color: gold;
    }

    #rank2 {
        height    : 50px;
        padding   : 0px 15px 0px 15px;
        margin    : 80px 0 0 0;
        font-size : 2.3em;
        background: #0f5187;
        color     : lightgray;
    }

    #rank3 {
        height    : 40px;
        padding   : 0 0 0 0;
        margin    : 90px 0 0 0;
        font-size : 1.8em;
        background: #1e4462;
        color     : silver;
    }

    #rank {
        text-align: left;

        height    : 20px;
        font-size : 1em;
        padding   : 1% 2%;
        margin    : 110px 0 0 0;
        background: #f0f0f0;
        color     : black;

    }

    #readFull {
        text-align : left;
        font-weight: bolder;
        font-size  : 14px;
        padding    : 1.1% 2%;
        color      : black;

    }


    #rt4 thead .companyRow td img {
        padding: 3px;
        margin : 0;
    }

    #rt4 thead tr td ul li {
        font-size: 114px;
    }

    .last .checkRow td li {
        font-size: 14px;
    }

    .last .checkRow {
        font-size: 14px;
    }



}




@media only screen and (max-width: 40em) {

    #rt4 thead .companyRow td {
        padding: 3.6px 0;
    }





    #company1 p,
    #company2 p,
    #company3 p,
    #company4 p,
    #company5 p,
    #company6 p,
    #company7 p,
    #company8 p {
        font-size: 12px;
        padding  : 4px 0 0 0px;
    }

    #company2 p {
        padding: 6px 10px 0 10px;
        height : 10px;
    }

    .companyRow #company1 p {
        padding  : 2px 10px 0 0px;
        height   : 10px;
        font-size: 12px;

    }

    #company8 p {
        font-size: 16px;

    }

    .heroSection {

        background-size: cover;

    }

    .pull-right {

        float: left !important;

    }



}



@media only screen and (max-width: 50em) {


    .rrt .img-fluid {
        max-width: 57.4px;
        margin   : 0;
        padding  : 0;
    }




    #company8 p {
        padding: 0px 0px 0px 0px;
        height : 21px;
    }

    #company2 p {
        padding: 6px 8px 0 8px;
        height : 10px;
    }



}

/** ----------------------- ------------------------------------ ----------------------- **/


@media screen and (max-width : 1300px) {
    .hero-img-wrap {
        background-size      : 160%;
        background-position-x: -240px;
    }
}

@media screen and (max-width : 1000px) {
    .hero-img-wrap {
        background-size      : cover;
        background-position-x: -40px;
    }

    .subTitleWrap {
        margin-top: 20px;
    }
}

.padding-top-20 {
    padding-top: 20px;
}

@media screen and (max-width : 688px) {

    .companyRow td,
    .centerRow td {
        height: 43px;
    }
}