/**** CSS Reset ****/
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
img, ins, kbd, q, s, samp,
background, strike, strong,
dl, dt, dd, ol, ul, li,
figure, figcaption,
iframe,
fieldset, form, label, legend {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: text-top;
	background: transparent;
}
a, a:hover 	{
    text-decoration: none !important; 
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

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


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

@font-face {
    font-family: 'Bison-Bold';
    src: url('../fonts/Bison-Bold.eot');
    src: url('../fonts/Bison-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Bison-Bold.woff2') format('woff2'),
        url('../fonts/Bison-Bold.woff') format('woff'),
        url('../fonts/Bison-Bold.ttf') format('truetype'),
        url('../fonts/Bison-Bold.svg#Bison-Bold') format('svg');
    font-weight: 300;
    font-style: normal;
}

h1, h2 { font-family: 'Bison-Bold', sans-serif; }


h1 { font-size: 3.875rem; }
h2 { font-size: 3rem; }

/*****************/
.wrap { 
    box-sizing: border-box;
	max-width: 1280px; 
	padding: 0 40px; 
	margin: 0px auto; 
}

header { 
	padding: 16px 0;
    top: -120px; /* doesn't do anything, but helps in the sliding in from the top animation */
    height: 85px;
    width: 100%; 
    transition: all 300ms ease-in-out;
    transition-property: box-shadow, background, position, top;
}


header nav { display: inline-block; }
header nav ul { list-style-type: none; }
header nav ul li { display: inline-block; position: relative; }

header nav ul li > a { 
    position: relative;
    display: inline-block;
    font-size: 1em; 
    font-weight: bold;
    padding-bottom: 15px;
    padding-right: 20px;
    margin-right: 20px;
    color: #fff;
}

header nav ul li > a.current,
header nav ul li > a:hover {
    color: #f7e910;
}


header a.btn { 
    background-color: #f7e910;
    padding: 10px 35px;  
    border-radius: 0;
    transform: skew(-40deg);
}

header a.btn:hover { background-color: #d4c90f; }

header a.btn > span { 
    display: inline-block;
    font-size: 0.875em;
    font-weight: bold;
    color: #000;
    transform: skew(40deg);
}


.logo { max-width: 230px; max-height: 35px; }


.fixed-header {
    position: fixed;
    top: 0;
    left: 0;
    height: auto;
    width: 100%; 
    background-color: #288ef4 !important;
    padding: 15px 0;
    z-index: 99;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.2);
    transition: all 300ms ease-in-out;
    transition-property: background, position, top;
}

.menu-ddown {
    display: none;
    position: absolute;
    top: 40px;
    left: -20px;
    width: 350px;
    padding: 20px 0 10px 0;
    z-index: 99;
    text-align: left;
    font-size: .875em;
    font-weight: bold;
    color: #0089ee;
    background-color: #fff;
    transition: .3s all; -webkit-transition: .3s all; -moz-transition: .3s all; -o-transition: .3s all; 
}

.menu-ddown.slim { width: 180px; }

.menu-ddown:before { 
    position: absolute;
    top: -10px;
    left: 20px;
    content: url('../img/top-arrow.png');
}

.menu-ddown.show { display: block; }

.menu-ddown a {
    text-transform: uppercase;
    display: block;
    padding: 10px 25px;
    color: #333;
}

.menu-ddown a span {
    text-transform: none;
    font-weight: 100;
    color: #999;
}

.menu-ddown a.current ,
.menu-ddown a.current span { color: #288ef4; }

.menu-ddown a:hover { opacity: .7; }

.after-fixed-header {
    padding-top: 85px;
}

.menu-icon {
    display: none;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; 
}

.menu-icon > span {
    display: block;
    width: 10px;
    height: 2px;
    margin-left: 20px; 
    margin-bottom: 6px;
    background-color: #fff;
    transition: .5s; -webkit-transition: .5s; -moz-transition: .5s; -o-transition: .5s; 
}

.menu-icon > span:nth-child(2) { 
    width: 20px;
    margin-left: 10px; 
    transition: .4s; -webkit-transition: .4s; -moz-transition: .4s; -o-transition: .4s; 
}
.menu-icon > span:nth-child(3) { 
    width: 30px; 
    margin-left: 0; 
    transition: .3s; -webkit-transition: .3s; -moz-transition: .3s; -o-transition: .3s; 
}

.menu-icon:hover > span { width: 30px; margin-left: 0; }


.offcanvas {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -320px;
    width: 320px;
    min-height: 100%;
    background-color: #12253C;
    z-index: 999;
    padding: 50px 30px;
    overflow-y: auto;
    transition: .4s all; -webkit-transition: .4s all; -moz-transition: .4s all; -o-transition: .4s all;
}

.offcanvas.show {
    right: 0; 
}

.darken { filter: brightness(10%); }

.offcanvas a { 
    display: block;
    font-size: 1em;
    color: #999;
    margin-bottom: 20px;
}

.offcanvas a:hover { margin-left: 10px; }

.main-menu-nav > ul {
    list-style-type: none; 
    position: absolute;
    margin-left: -250px;
    height: 0;
    overflow: hidden;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.main-menu-nav > ul.yes { 
    position: relative;
    height: auto;
    margin-left: 0; 
}

.main-menu-nav .expand { position: relative; }

.main-menu-nav .expand:after { 
    content: "+";
    font-size: 1.25rem;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.main-menu-nav .expanded:after { 
    content: "-";
    font-size: 1.25rem;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}


.main-menu-nav > ul li:before {
    content: "\2014";
    display: inline-block;
    margin-right: 5px;
    color: #999;
}

.main-menu-nav > ul li a {
    position: relative;
    font-size: .825rem;
    display: inline-block;
    margin-bottom: 15px; 
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.main-menu-nav a.current { color: #f7e910 !important; }


.offcanvas .social a { display: inline-block; } 

.offcanvas .social a:hover { opacity: .8; }


.offcanvas hr { 
    height: 2px;
    background-color: #999;
    margin: 30px 0;
} 

.close-offcanvas {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff !important;
    font-size: .825rem !important;
    z-index: 990;
    padding: 10px;
}

.close-offcanvas:hover { color: #999 !important; }

.loginbtn { 
    background: #f7e910;
    color: #000 !important;
    padding: 8px 10px;
    font-size: .825rem !important;
    text-align: center;
}

.loginbtn:hover { 
    margin-left: 0 !important; 
    opacity: .8; 
}

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

.home-banner { 
    margin-top: -120px;
    padding-top: 120px;
    background-image: url("../img/home-bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}


/*********************/
.products-section {
    background-image: url("../img/home-products-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.products-section .row .col-12 .card.rounded-lg { border-radius: .8rem!important; }

.products-section .row .col-12 .card.shadow { 
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.08) !important;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
        background-color: aliceblue;
        font-size: 1.3em;
}
.products-section .row .col-12 a > .card.shadow:hover  { box-shadow: 0 .3rem 1.5rem rgba(0, 0, 0, 0.13) !important; } 

.products-section .row .col-12 .card-body { min-height: 300px; }
.products-section .row .col-12 .card-body p { font-size: .92rem; color: #666; font-weight: lighter; }
.products-section .row .col-12 .card-body h3 { font-size: 1em; color: #333; }

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

.whycc-section {
    background-image: url("../img/why-us-bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%; 
    padding: 200px 0 120px 0;
}

.testi-section { padding: 120px 0; }

.testi-bg {
    width: 100%;
    max-width: 970px;
    height: 570px;
    margin: 0 auto;
    background-image: url("../img/testi-bg.png");
    background-repeat: no-repeat;
    background-position: center 20px;
    background-size: contain;
}

#testimonials .item {
    position: relative;
    font-size: 1.125rem;
    font-weight: 100;
    color: #666;
    max-width: 888px;
    margin: 0 auto;
    margin-bottom: 25px;
    border-radius: 20px;
    height: auto;
}

#testimonials .item h5 {

  font-size: 20px !important;

}

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

  #testimonials .item h5 {

    font-size: 15px !important;

  }

}

@media screen and (max-width: 700px) {
  #stickyMainDiv {
    visibility: hidden;
  }
}
#testimonials .testimonial-text { 
    margin: 120px 0 20px 0;
}

#testimonials .owl-nav { 
    text-align: left;
    margin-top: 0; 
    margin-left: 200px;
}

#testimonials .owl-nav .owl-prev,
#testimonials .owl-nav .owl-next {
    display: inline-block;
    outline: 0;
    position: relative;
    background: #fff;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

#testimonials .owl-nav .owl-prev:hover,
#testimonials .owl-nav .owl-next:hover {
    opacity: .8;
}



#testimonials .owl-nav .owl-prev span,
#testimonials .owl-nav .owl-next span {
    position: absolute;
    top: -13px;
    left: 13px;
    font-size: 40px;
    color: #0876f0;
}

#testimonials .owl-nav .owl-next span { left: 15px; }


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

.clients-section { 
    background-image: url("../img/clients-bg.png");
    background-repeat: no-repeat;
    background-position: right center;   
}


.clients-section .row .card { 
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.clients-section .row .card:hover {
    z-index: 80;
    transform: scale(1.2); 
    border: 1px solid rgba(0,0,0,.125) !important;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.clients-section .row .card img {
    max-width: 68px;
    margin: 0 auto;
}


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

.cta-section { 
    background-image: url("../img/speak-bg.png");
    background-repeat: no-repeat;
    background-position: top left;
    background-size: cover;
    padding: 255px 0 80px 0;
}

.footer-section {
    background-image: url("../img/footer-bg.jpg");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    padding: 90px 0 150px 0;
}

.footer-section ul { 
    list-style-type: none;
}

.footer-section ul li { 
    font-size: 1rem;
    color: #666;
    font-weight: 100;
}

.footer-section ul li a { color: #666; line-height: 200%; }
.footer-section ul li a:hover { padding-left: 5px; color: #000; }


.footer-section img { transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s;  }
.footer-section img:hover { opacity: .7; }



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

.blog-section .card { 
    border-radius: 15px; 
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.blog-section .card.shadow:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.5) !important; }

.blog-section .card .card-title { 
    min-height: 50px;
    font-size: 0.875rem;
    font-weight: bold;
    color: #1c1d22;
}

.blog-section .card .card-text { 
    font-size: 0.625rem;
    color: #898989;
}

.load-more-btn { 
    display: inline-block;
    background-color: #f47b21;
    font-size: .875rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 20px 50px;
}

.load-more-btn:hover {
    background-color: #db650d;
    color: #fff; 
} 

.posted-on {
    font-size: 1rem;
    font-weight: 100;
    color: #666;
}


.blog-content { 
    font-size: 1rem;
    font-weight: 100;
    color: #666;
    margin: 25px 0;
}

.blog-content > p { 
    margin-bottom: 20px;
}


.featured-image { 
    text-align: center; margin-bottom: 25px; 
}

.featured-image img {
    text-align: center;
    width: 100%; 
    max-width: 1024px;
    margin: 0 auto;
}

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

.video-player-wrap { 
    text-align: center;
}

.video-player-wrap img { 
    text-align: center;
    width: 100%; 
    margin: 0 auto;
}


.video-player-options { 
    max-width: 100%;
    position: relative;
    min-height: 45px;
    background: rgb(14,130,246);
    background: -moz-linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    background: linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e82f6",endColorstr="#23b6fb",GradientType=1);
}

.user-options { 
    position: absolute;
    bottom: -10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    max-width: 486px;
    height: 55px;
    font-size: .813rem;
    color: #333;
    background-image: url("../img/user-options.png");
    background-repeat: no-repeat;
    background-size: cover;
}


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

#faq-category .card.active,
#faq-category .card:hover { 
    border: 1px solid #1186f7;
    background-color: #fff;
}

#faq-category .card { 
    max-width: 260px;
    color: #333;
    font-size: .875rem;
    margin-bottom: 20px;
}

#faq-category .card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.5) !important; }

#faq-category .card .card-body > img { margin-bottom: 5px; }


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


#faq-wrap { padding: 0px 0px; }

#faq-wrap .panel { border-bottom: 2px solid #ccc!important; }

#faq-wrap .panel,
#faq-wrap .panel .panel-heading {
    position: relative;
	font-size: .875rem;
    font-weight: normal;
	color: #1b1d1d;
    border-radius: 0px;
	border: 0px;
	background: none;
	box-shadow: 0px 0px;
}

#faq-wrap .panel .panel-collapse .panel-body {
	border: 0px;
	padding: 10px 25px 10px 20px;
	line-height: 18px;
	text-align: justify;
}

.faq-detail-wrap {
	width: 100%;
	padding: 0 52px 15px 0;
	background-color: inherit;
}

.faq-detail-wrap p {
    font-size: .813rem;
    font-weight: 100;
    color: #444;
	margin: 10px 0;
}

.faq-topic-heading {    
    font-size: .875rem;
    font-weight: bold;
	color: #333;
	transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s;
}

.faq-topic-heading > a {
	display: inline-block;
    color: inherit;
	text-decoration: none;
    margin: 15px 0;
    padding-right: 50px;
}

.faq-topic-heading > a:before {
    content: "";
    display: inline-block;
    position: absolute;
    right: 0;
    top: 12px;
    width: 25px;
    height: 25px;
    background-image: url("../img/plus.png");
    background-repeat: no-repeat;
}

.faq-topic-heading > a.sign:before{ 
    background-image: url("../img/minus.png"); 
}

/*****************/
.heading-divider { 
    display: inline-block;
    border-top: 3px solid #f47b21;
    height: 0;
    width: 60px;
}

.form-section { 
    font-size: .875rem;
    background: rgb(14,130,246);
    background: -moz-linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    background: linear-gradient(270deg, rgba(14,130,246,1) 0%, rgba(35,182,251,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0e82f6",endColorstr="#23b6fb",GradientType=1);
}


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

.product-banner { 
    margin-top: -120px;
    padding-top: 120px;
    background-image: url("../img/product-bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

.feature-tabs .nav-link {
    font-size: .875rem;
    font-weight: bold;
    color: #666;
    min-height: 135px;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    
}

.feature-tabs .nav-link:hover ,
.feature-tabs .nav-link.active { 
    color: #111;
    background-color: #fff;
    border-bottom: 3px solid #6badf7;
}


.stats-section { 
    padding: 180px 0;
    background-image: url("../img/stats-bg.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% 100%;
}


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

.privacy-section h3 { margin: 40px 0 10px 0; }

.privacy-section p { margin-bottom: 20px; }

.privacy-section ul,
.privacy-section ol { padding-left: 20px; }


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

.matches-section .card { font-size: .750rem; }
    
.matches-section .card .card-footer { background-color: #007bff6e; }

.matches-section .card .card-body strong { color: #dd5928; }

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

.careers-section ul { list-style-type: none; }
.careers-section ul li { 
    color: #333;
    font-size: 1.125rem; 
    font-weight: bold;
    margin-bottom: 10px;
}

.jobs-section {
    background: -moz-linear-gradient(270deg, rgba(35,182,251,1) 0%, rgba(14,130,246,1) 100%);
    background: -webkit-linear-gradient(270deg, rgba(35,182,251,1) 0%, rgba(14,130,246,1) 100%);
    background: linear-gradient(270deg, rgba(35,182,251,1) 0%, rgba(14,130,246,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#23b6fb",endColorstr="#0e82f6",GradientType=1);
}

.jobs-section .card { transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s;  }
.jobs-section .card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.5) !important; }

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

.about-banner {
    background-image: url("../img/about-banner.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
    width: 100%;
    height: 535px;
}

.about-cta-section {
    background-image: url("../img/about-cta-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    padding: 200px 0;
}

.about-cta-section .card { border-radius: 15px; }
.about-cta-section .card .btn { max-width: 250px; }

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

.scoring-guide-section { }
#scoring-guide-accordion {}

#ranking-accordion .panel-heading a ,
#scoring-guide-accordion .panel-heading a, #ranking-accordion-t20 .panel-heading a,#ranking-accordion-odi .panel-heading a,#ranking-accordion-test .panel-heading a{
    color: #fff;
    font-size: 1.250rem;
    font-weight: bold;
    padding-left: 40px;
    transition: all .2s; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s;
}

#ranking-accordion .panel-heading a:before ,
#scoring-guide-accordion .panel-heading a:before,#ranking-accordion-t20 .panel-heading a:before,#ranking-accordion-odi .panel-heading a:before,#ranking-accordion-test .panel-heading a:before{
    content: "";
    display: inline-block;
    position: absolute;
    left: 25px;
    top: 23px;
    width: 25px;
    height: 25px;
    background-image: url("../img/right-arrow-white.png");
    background-repeat: no-repeat;
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s;
}

#ranking-accordion .panel-heading a.sign:before ,
#scoring-guide-accordion .panel-heading a.sign:before, #ranking-accordion-t20 .panel-heading a.sign:before,#ranking-accordion-odi .panel-heading a.sign:before,#ranking-accordion-test .panel-heading a.sign:before{
    transform: rotate(90deg);
    left: 18px;
    top: 28px;
}


#ranking-accordion .card ,
#scoring-guide-accordion .card, #ranking-accordion-t20 .card, #ranking-accordion-odi .card, #ranking-accordion-test .card {
    border: 0; 
    border-radius: 10px; 
}

.detail-wrap {
	width: 100%;
	padding: 30px 25px;
	background-color: #fff;
}

.detail-wrap p {
    font-size: 1rem;
    font-weight: 100;
    color: #444;
}


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

#login-popup .modal-header,
#forgot-popup .modal-header {
    background-color: #f47b21;
    color: #fff;
    text-align: center;
}

#login-popup .modal-body ,
#forgot-popup .modal-body { 
    background-image: url("../img/login-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

#login-popup .modal-body .form-control ,
#forgot-popup .modal-body .form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #1187f7;
}

#login-popup .modal-body .form-control:focus ,
#forgot-popup .modal-body .form-control:focus { 
    background-color: #f0f7ff;
    box-shadow: none;
    outline: none;
}

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

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

.common-modal-cls .modal-header {
    background-color: #f47b21;
    color: #fff;
    text-align: center;
}

.common-modal-cls .modal-body { 
    background-image: url("../img/login-bg.png");
    background-repeat: no-repeat;
    background-size: cover;
}

.common-modal-cls .modal-body .form-control {
    background-color: transparent;
    border: 0;
    border-bottom: 2px solid #1187f7;
}

.common-modal-cls .modal-body .form-control:focus { 
    background-color: #f0f7ff;
    box-shadow: none;
    outline: none;
}

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

#product-tabs .nav-link {
    background-color: transparent;
    color: #999;
    font-size: 2rem;
    font-family: 'Bison-Bold', sans-serif;
    padding: .5rem 0 !important;
    margin: auto 1.2rem;
    border-radius: 0;
    border-bottom: 4px solid transparent;
}

#product-tabs .nav-link.active {
    color: #1086f7;
    border-bottom: 4px solid #1086f7;
}


#plan-tabs .block-caption {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
}

#plan-tabs .category,
#plan-tabs p {
    color: #888;
    font-weight: 100;
}

#plan-tabs .card-deck .card { 
    border-radius: 0; 
}

#plan-tabs .card.premium { 
    background-image: url("../img/corner-star.png");
    background-repeat: no-repeat;
    background-position: right -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}


#plan-tabs .table-striped tbody tr:nth-of-type(2n+1) { background-color: #f6f9ff; }
    



#plan-tabs table tr td { width: 19%; border-left: 1px solid #ddd; }

#plan-tabs table tr td:first-child { 
    width: 24%; 
    text-align: left; 
    font-size: .875rem;
    border-left: 0;
}

#plan-tabs table tr td:nth-child(4) { }

#plan-tabs .card .card-footer .btn:focus { 
    outline: none; 
    box-shadow: none; 
}


.home-search .form-control {
    box-shadow: none;
    outline: none;
}

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

.sboard { 
    position: fixed;
    z-index: 99;
    left: 0;
    top: 20%;
    width: 200px;
    padding: 15px;
    font-size: .750rem !important;
    background-color: #fff;
    transition: all .5s; -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; 
}

.sboard.vanish { 
    left: -200px;
}


.sboard .border-bottom { 
    border-bottom: 2px solid #999 !important;
}

.sboard .flag { 
    max-width: 20px;
    max-height: 20px;
}

.sboard .sidetag {
    cursor: pointer;
    position: absolute;
    right: -55px;
    top: 30px;
    width: 55px;
    height: 205px;    
    background-color: #fff;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;    
    -webkit-box-shadow: 9px 0px 15px -9px rgba(0,0,0,0.75);
    -moz-box-shadow: 9px 0px 15px -9px rgba(0,0,0,0.75);
    box-shadow: 9px 0px 15px -9px rgba(0,0,0,0.75);
    transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; 
}

.sboard .sidetag:hover { opacity: .97; } 

.sboard .sidetag .vertical-text {
    position: absolute;
    left: 12px;
    top: 25px;
}

.sboard .sidetag .arrow {
    position: absolute;
    right: 10px;
    top: 90px;
    transition: all .6s; -webkit-transition: all .6s; -moz-transition: all .6s; -o-transition: all .6s; 
}

.sboard .sidetag .arrow.turn {
    transform: rotate(180deg);   
}


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

button.back-to-top{
  margin: 0 !important;
  padding: 0 !important;
  background: #fff;
  height: 0px;
  width: 0px;
  overflow: hidden;
    border-radius: 50px;
	-webkit-border-radius: 50px;
	-moz-border-radius: 50px;
  color: transparent;
  clear: both;
  visibility: hidden;
  position: fixed;
  cursor: pointer;
  display: block;
  border: none;
  right: 15px;
  bottom: 5px;
  /*font-size: 0px;*/
  font-size: .825rem;
  outline: 0 !important;
  z-index: 99;
  transition: all .3s ease-in-out;
}

button.back-to-top:hover,
button.back-to-top:active,
button.back-to-top:focus {
  outline: 0 !important;
}

button.back-to-top.show {
  display: block;
  background: #fff;
  color: #00ab6c;
  right: 5px;
  bottom: 75px;
  height: 50px;
  width: 50px;
  visibility: visible;
	box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 2px 4px 1px rgba(0, 0, 0, 0.25);
}

button.back-to-top.show:active {
  box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 0px 4px 8px 2px rgba(0, 0, 0, 0.25);
}


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

.no-js #loader { display: none;  }

.js #loader { display: block; position: absolute; left: 100px; top: 0; }

.custom-loader {
	position: fixed;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	z-index: 9999;
	/*background: url(http://smallenvelop.com/wp-content/uploads/2014/08/Preloader_11.gif) center no-repeat #fff;*/
	background: url("../img/loader.gif") center no-repeat #f6fbfea1;
}


/*****************/
.clear 			{ clear: both; height: 0px; line-height: 0px; }
.spacer 		{ clear: both; height: 5px; line-height: 5px; }
.spacer-large 	{ clear: both; height: 10px; line-height: 10px; }
.spacer-huge 	{ clear: both; height: 20px; line-height: 20px; }
.spacer-big	 	{ clear: both; height: 30px; line-height: 20px; }
.spacer-mega 	{ clear: both; height: 40px; line-height: 20px; }
.spacer-wow 	{ clear: both; height: 60px; line-height: 20px; }

/*********** MISC ***********/

.orange-btn { 
    display: inline-block;
    background-color: #f47b21;
    font-size: .875rem;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding: 10px 50px;
}

.edgy-bg { 
    background-image: url("../img/edgy-bg.png");
    background-repeat: no-repeat;
    background-position: center 350px;
    background-size: 100% auto;
}

.edgy-bg-small { 
    background-image: url("../img/edgy-bg-small.png");
    background-repeat: no-repeat;
    background-size: cover;
}



.font-bison { font-family: 'Bison-Bold'; }

.bg-blue        { background-color: #288ef4; }
.bg-yellow      { background-color: #f7e910; }
.bg-lt-grey     { background-color: #f8f9fb; }

.txt-yellow     { color: #f7e910; }


.font-60 { font-size: 3.750rem; }
.font-20 { font-size: 1.250rem; }
.font-18 { font-size: 1.125rem; }
.font-14 { font-size: .875rem; }
.font-12 { font-size: .750rem !important; }
.font-10 { font-size: 0.625rem; }


.mt-70 { margin-top: 70px; }
.mt-120 { margin-top: 120px; }

.py-80 { padding: 80px 0; }


.w-85 { max-width: 85%; }


/**** Media Queries ****/
@media screen and (max-width: 986px) {
    
    .wrap { padding: 0 20px; }
    
    header ,
    header.fixed-header { padding: 15px 0; height: auto; }
    
    header .col-9 > nav,
    header a.btn { display: none; }
    
    .menu-icon { display: inline-block; }
    
	h1 { font-size: 3rem; }
    h2 { font-size: 2.2rem; }
    
    .products-section .row .col-12 .card-body { min-height: 200px; }
    
    .home-banner { 
        margin-top: -85px;
        padding-top: 85px;
        background-size: auto 100%;
    }
    
    .testi-section { padding: 40px 0; }
    
    .testi-bg { height: auto; padding-bottom: 80px; }
    
    #testimonials .item { font-size: 0.875em; }
    #testimonials .testimonial-text { margin: 0; }
    .quote { opacity: .05; }
    
    
    .cta-section { padding: 180px 0 80px 0; }
    
    .font-60 { font-size: 1.875rem; }
    .font-20 { font-size: 1rem; }
    
    .w-85 ,
    .w-75 { width: 100% !important; max-width: 100% !important; }
    
    
    .blog-section .card .card-title { min-height: 0; }
    
    
    #faq-category { display: none; }    
    #faq-wrap.tab-content > .tab-pane { display: block; }
    #faq-wrap.tab-content > .tab-pane.fade:not(.show) { opacity: 1; }
    
    .about-banner { height: 335px; }

    #scoring-guide-accordion .panel-heading { padding: 12px 10px; }
    
    #scoring-guide-accordion .panel-heading a { font-size: .875rem; }
    
    #scoring-guide-accordion .panel-heading a:before {
        left: 20px;
        top: 12px;
    }

    #scoring-guide-accordion .panel-heading a.sign:before{ 
        left: 10px;
        top: 18px;
    }
    
    .mobile-wrap {
        display: block;
        width: 100%;
        overflow-x: auto;
    }
    
    #product-tabs .nav-link {
        font-size: 1.5rem;
        padding: .5rem 0 !important;
        margin: 0;
    }
    
    #plan-tabs table { width: 100%; }
    
    #plan-tabs table tr td ,
    #plan-tabs table tr td:first-child { width: 20%; }



    
}


@media screen and (max-width: 767px) {
    
    .testi-bg { padding-bottom: 40px; }
    
     #product-tabs .nav-link { font-size: 1.1rem; }
    
    
    
}

#testimonials .quote{ 
    position: absolute;
    left: 35px;
    top: 0;
    width: 125px;
}

.tstnl-details{
    display: flex;
    width: 100%;
    margin-top: 20px;
}

.tstnl-details img{
    height: 85px;
    width: 85px !important;
    border-radius: 50px;
}

.shaking-button {
  animation-name: shake;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in;
  cursor: pointer;
}
.shaking-button:hover {
  animation-name: shakeAnim;
}

@keyframes shakeAnim {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

@keyframes shake {
  0% {left: 0}
  1% {left: -3px}
  2% {left: 5px}
  3% {left: -8px}
  4% {left: 8px}
  5% {left: -5px}
  6% {left: 3px}
  7% {left: 0}
}

.about-banner h2{
    text-align: center;
    padding-top:340px;
    color:#e9ecef;
    font-family: 'Bison-Bold', sans-serif;
}
@media screen and (max-width:986px){
    .about-banner h2{
        font-size:32px;
        padding-top:200px;
    }
}
@media screen and (max-width:420px){
    .about-banner h2{
        font-size:25px;
        padding-top:200px;
    }
}

@media screen and (max-width:1130px) and (min-width:987px){
    header nav ul li > a { 
        font-size: 1em; 
        padding-bottom: 10px;
        padding-right: 14px;
        margin-right: 14px;
    }
}
@media screen and (max-width:1130px) and (min-width:987px){
    header a.btn { 
        padding: 7px 20px;  
    }
}