:root{
    --mainGreen: #229e6b;
    --mainYellow: #DCE35B;
    --darktext:#2F3A1F;
    --lightext: #6E6E6E;
    --whitetone:#FFFFFF;
    --greytone: #E5E5E5;
    --errorRed: #E14C4C;
}


/*----------------------- DEFAULTS -------------------------------*/

/* LOADED FONT */


/*---- DEFAULT TEXT ---*/
body{
    font-family: 'Varela Round', sans-serif;
    color: var(--lightext);
}

.lovelo{
    font-family: 'Lato', sans-serif;
    font-weight: 600;
}

.dark-title{
    color: #07201F;
    font-size: 20px;
}

.dark-text{
    color: #3F3F3F;
}

.white-text{
    color: var(--whitetone);
}

.main-color-text{
    color: var(--mainGreen);
}

.red-text{
	 color: var(--errorRed);
}

.yellow-text{
	color: var(--mainYellow);
}

/*---- LINKS ---*/
a.link{
    color: var(--mainGreen);
}

a.link:hover{
    text-decoration: none;
    color: var(--mainYellow);
}

.linkWhiteGreen{
	color: var(--whitetone);
}

.linkWhiteGreen:hover{
	color: var(--mainGreen);
	text-decoration:none;
}

.divider{
    border-bottom: 2px solid var(--greytone);
}


.underlined {
    border-bottom: 2px solid var(--mainGreen);
    width: 40%;
    margin: auto;
    margin-top: -15px;
}


.divider-white{
    border-bottom: 2px solid var(--whitetone);
}

.btn-default{
	background-color: var(--mainGreen);
    color:  var(--whitetone);
    cursor: pointer;
    border-radius: 100px;
    font-weight: 600;
    font-size: 18px;
    transition: 0.6s;
}



.btn-default:hover, .btn-white:hover{
    background-color: var(--mainYellow);
    color:  var(--lightext);
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}

.btn-white{
    background-color: var(--whitetone);
    color:  var(--mainGreen);
    cursor: pointer;
    border-radius: 50px;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 18px;
    transition: 0.6s;
}



.hidden{
    opacity:0;
}
.visible{
    opacity:1;
}


/*-------------------NAVS-----------------*/

/* ----- TOP NAVIGATION MENU --*/
.nav-wrapper{
    background: #229e6b;
    background: -webkit-linear-gradient(to right, #DCE35B, #229e6b);
    background: linear-gradient(to right, #DCE35B, #229e6b);
}
.nav0 {
    padding: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.nav0 li{
    padding: 0 10px;
}

.nav0 > li.active > a{
    color: var(--mainGreen);
    background-color: white;
    border-radius: 50px;
}

.nav0 li a{
    color: white;
}


.nav0 li a:hover{
    color: var(--mainGreen);
    background-color: white;
    border-radius: 50px;
}

.normal-nav2{
    background: #229e6b;
    background: -webkit-linear-gradient(to right, #DCE35B, #229e6b);
    background: linear-gradient(to right, #DCE35B, #229e6b);
    width: 100%;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 18px;
    box-shadow: 0 10px 70px rgba(0, 0, 0, 0.25);
}

.normal-nav2 li a{
    color: white;
}

.normal-nav2 > li.active{
    background-color: rgba(255, 255, 255, 0.2);
}
.normal-nav2 > li.active a{
    color: #229e6b;
}

.normal-nav2 li:hover{
    color: var(--mainGreen);
    background-color: rgba(255, 255, 255, 0.2);
}

.normal-nav{
    background: #229e6b;
    background: -webkit-linear-gradient(to right, #DCE35B, #229e6b);
    background: linear-gradient(to right, #DCE35B, #229e6b);
    padding: 20px;
    width: 100%;
    box-shadow: 0 10px 70px rgba(0, 0, 0, 0.25);
     font-family: 'Lato', sans-serif;
    font-weight: 600;
    font-size: 18px;
}

.normal-nav li{
    padding: 0 10px;
}

.normal-nav > li.active > a{
    color: var(--mainGreen);
    background-color: white;
    border-radius: 50px;
}

.normal-nav li a{
    color: white;
}

.normal-nav li a:hover{
    color: var(--mainGreen);
    background-color: white;
    border-radius: 50px;
}


/* ----- SLIDE OFF CANVAS NAVIGATION MENU --*/
.small-nav0{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
}

.small-nav{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    width: 100%;
}

.nav-item-burguer{
    padding-right: 20px;
}
.nav-item-burguer a{
    color: white;
}

.nav-item-burguer a:hover{
    color: var(--mainYellow);
}

.panel{
    background-color: white;
    z-index: 10;
    position: fixed;
    right: -15.625em; /*left or right and the width of your navigation panel*/
    width: 15.625em; /*should match the above value*/
}

.panel ul{
    list-style: none;
    padding: 0;
}

.panel ul li{
    text-align: left;
    padding: 15px;

}
.panel ul > li.active{
    border-right: 3px solid var(--mainGreen);
}
.panel ul > li.active i{
    color: var(--mainGreen);
}
.panel ul .menu-item:hover{
    background-color: rgba(69, 182, 109, 0.26);
}

.panel ul li a{
    padding-left: 5px;
    color: var(--lightext);
}

/*-------------------INICIO-----------------*/

.header{
    background: #229e6b;
    background: -webkit-linear-gradient(to right, #DCE35B, #229e6b);
    background: linear-gradient(to right, #DCE35B, #229e6b);
    max-height: 555px;
    height: 555px;
    max-width: 100%;
    box-shadow: 0 10px 70px rgba(0, 0, 0, 0.25);

}


.logo-holder {
    padding-top: 150px;
}



.tipster-pic{
    border: solid 2px var(--mainGreen);

}

.right-menu {
    position: absolute;
    right: 0;
    top: 200px;
    z-index: 2;
    background: rgba(220, 227, 91, 0.49);
    border: solid 2px #DCE35B;
    padding: 15px;
    color: white;
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
}

.right-menu2 {
    position: absolute;
    right: 15px;
    top: 200px;
    z-index: 2;
    background: rgba(220, 227, 91, 0.49);
    border: solid 2px #DCE35B;
    padding: 15px;
    color: white;
    border-radius: 50px;
}

.right-menu2:hover {
    background: rgba(220, 227, 91, 0.76);
    cursor: pointer;
}
.right-menu2:hover img {
   opacity: 0.5;
}
.right-menu:hover{
    background: rgba(220, 227, 91, 0.76);
    cursor: pointer;
}



.footer-nav-link{
    padding-bottom: 25px;
}

@media (max-width: 575px) {
    .logo-holder{
        text-align: center;
    }

    .tipster-pic{
        max-width: 165px;
    }

    .main-tipster-title{
        text-align: center;
    }

}


/*--------------- TIPSTERS -----------------*/

.tipster-wrap{

    background-color: rgba(69, 182, 109, 0.81);
}

/*--------------- TIPSTER---------------*/



.nav-pills  > li.active > a{
    color: white;
    font-size: 18px;
    background-color: var(--mainGreen);;
    border-radius: 50px;
}

.statsCollapseBox{
	cursor: pointer;
}


.paginate_button{
	background-color: var(--mainGreen);
    color:  var(--whitetone);
    cursor: pointer;
    border-radius: 100px;
    font-weight: 600;
    font-size: 18px;
    transition: 0.6s;
    padding: 10px;
    margin: 5px;
}
.paginate_button:hover{
    background-color: var(--mainYellow);
    color:  var(--lightext);
    cursor: pointer;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
    text-decoration: none;
}

.current{
	color:var(--mainYellow);
	font-weight: 600;
}

.dataTables_paginate{
	text-align:center !important;
	margin-top:20px !important;
}
.dataTables_info{
	text-align:center;
}



/*---------- CONTINUAR LEYENDO -------------*/
.continuar-leyendo{
     font-family: 'Lato', sans-serif;
    color: var(--mainGreen);
    font-weight: 600;
    font-size: 18px;
   
}

.mostrar-menos{
    font-family: 'Lato', sans-serif;
    color: var(--mainGreen);
    font-weight: 600;
    font-size: 18px;
   
}

.next-link{
	background-color: #45B66D;
	color: white;
	 font-family: 'Lato', sans-serif;
}
.previous-link{
	background-color: #45B66D;
	color: white;
	font-family: 'Lato', sans-serif;
}

.block-toggle{
	cursor:pointer;
}
.block-toggle .icon-not-toggle,
.block-toggle.collapsed .icon-toggle {
    display: inline-block;
}
.block-toggle.collapsed .icon-not-toggle,
.block-toggle .icon-toggle {
    display: none;
}