/*-----------------------------------------MENU- edited by Urgh ----------------------------------------------*/

.full-row.fixed {
    z-index: 100;
}

.navbar {
    border-radius: 0px;
    border: none;
    min-height: 30px;
}

.navbar-form.search {
	border-top-style: none;
	margin-top: 0;
	margin-bottom: 0;
    padding: 0px;
    text-align: right;
}

#mainMenu .mainMenu.navbar {
    margin: 0px -15px 5px -15px;
    background: hsl(0, 0%, 100%);
    background-image: none;
}


.websites > li.genList > A, .footer .copyright A {
    width: 100%;
    font-family: Oswald, sans-serif !important;
    box-shadow: none;
    font-weight: normal;
    height: 34px;
}

#mainMenu {
    position: -webkit-sticky;
    position: sticky;
    top: -1px;
    backface-visibility: hidden;
    z-index: 100;
}

#homeMenu a.btn {
    line-height: 1em;
}

#mainMenu i.punto-icon.iconMenu{
    vertical-align: middle;
}

#mainMenu i.punto-icon.iconMenu::before {
    content: "\e601";
    color: #3985c6;
}

#expandableMenu {
    max-height: 88.5vh;
    overflow-y: scroll;
    margin-top: 1.5vh;
}

.mainMenu.navbar UL.websites > li.genList > A {
	margin: 0;
	padding: 0;
	text-align: center;
	display: block;
	padding: 0px;
}

#mainMenu .topMenu > .btn-group {
    border-bottom: 1px solid hsl(0,0%,91%);
}
    
#mainMenu .labelMenu {
    text-align: center;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: bold;
    color: #3985c6;
    margin-top: 5px;
    margin-bottom: 5px;
}

#mainMenu .btn:hover .labelMenu {
}

#mainMenu .labelMenu span.smallText {
    font-size: xx-small;
}

#mainMenu .archivio .btn{
    text-align: right;
    line-height: 1em;
}

#expandableMenu > .row:first-of-type {
}

.archivio {
    text-align: right;
}

#expandMenu span.labelMenu, .archivio span.labelMenu {
    vertical-align: middle;
}

#expandableForm {
    width: 100%;
}

#expandableForm .form-group {
	width: 100%;
    margin: 6px 15px;
    position: relative;
}

#expandableForm INPUT.form-control {
    position: absolute;
    left: auto;
    right: 53px;
    width: 85%;
    height: 35px;
    line-height: 1em;
    border-color: transparent;
    box-shadow: none;
    border: 1px solid hsl(0,0%,94.5%);
    border-radius: 6px 0px 0px 6px;
    text-align: right;
    margin: 0px;
}

#expandableForm INPUT.form-control::placeholder {
    color: #3985c6;
    text-transform: uppercase;
    font-size: 1rem;
}

#mainMenu #expandableForm INPUT.form-control:focus::placeholder {
    color: hsl(0,0%,83%);
}

#expandableForm INPUT.form-control:hover, #expandableForm INPUT.form-control:focus, #expandableForm:hover INPUT.form-control, #expandableForm:hover .btn, #expandableForm INPUT.form-control:focus + .btn {
    background: hsl(0,0%,97%);
    border-color:  hsl(0,0%,91%);
} 

#expandableForm .btn{
    position: absolute;
    right: 6px;
    width: 48px;
    height: 35px;
    margin: 0px;
    border: 1px solid transparent;
    border-radius: 0px 6px 6px 0px;
    line-height: 1em;
}

#expandableForm .btn:hover, #expandableForm INPUT.form-control:focus + .btn:hover {
    border-color:  hsl(0,0%,87%);
}

.topMenu > .btn-group:first-of-type .btn, .false-btn {
    width: auto;
    background-color: transparent;
    background-image: none;
    font-size: 28px;
    color: #3985c6;
    margin: 6px -10px;
    padding: 0px 12px;
    border-radius: 0px;
    backface-visibility: hidden;
}

#expandMenu .btn {
    text-align: left;
    line-height: 1em;
}

#expandSearch .btn {
    text-align: right;
}

.topMenu > .btn-group .btn:hover {
    background-color: hsl(0,0%,98%);
}

#mainMenu .topMenu > .btn-group .btn.focus {
    outline: none;
    box-shadow: none
}

#mainMenu .topMenu > .btn-group .btn.active, #mainMenu .topMenu > .btn-group .btn:focus {
    box-shadow: none;
    outline: none;
}

#mainMenu #expandMenu .btn.active span.fa.fa-bars:before {
    content: "\f00d";
}

#mainMenu #expandSearch .btn.active span.fa.fa-search:before {
    content: "\f010";
}

#mainMenu .websites.navbar-nav { 
    margin: 0px;
    padding-top: 8px;
    padding-left: 2px;
}

#mainMenu .topMenu UL.navbar-nav > li > a, #mainMenu .topMenu UL.nav-tabs > li > a {
    border-radius: 0px;
}
#mainMenu #expandableMenu .socialGroup {
    padding: 0px 15px;
    text-align: center;
    
}

#mainMenu .topMenu #expandableMenu .websites li.genList A {
    margin: 0px 5px;
    padding: 0px;
    color: hsl(0,0%,60%);
}

#mainMenu .topMenu #expandableMenu .websites li.genList A:hover {
    color: hsl(0,0%,5%);
    background: transparent !important;
}


#mainMenu .topMenu #expandableMenu .websites li.genList {
    width: auto;
    flex-basis: auto;
    margin: 3px 0px 3px 10px;
}

#mainMenu .topMenu #expandableMenu .websites {
    display: flex;
    float: none;
    flex-flow: column wrap;
    justify-content: center;
    margin: 0px 0px 15px 0px;
    padding: 10px 0%;
    background: white;
}

.topMenu .active ul.collapsable-menu > li {
    border: none;
}

.websites li.genList {
	margin: 0px 0px 0px auto;
    padding: 0px;
	text-align: center;
	overflow: hidden;
    box-shadow: none;
    border: none;
    width: 180px;
}

.websites li A, .mainMenu .topMenu UL.nav.websites > li > A, FOOTER .footer UL.nav.websites > li.genList > A, .footer .copyright A {
    color: #eee;
    padding: 0px;
    text-shadow: none;
    text-align: left;
    height: auto;
    margin-bottom: 1em;
}

.websites li A:hover, .footer .copyright A:hover {
	background-color: #555 !important;
    color: #fff;
}

.mainMenu .topMenu UL.nav.websites > li > A {
    color: hsl(0, 0%, 6%);
}

.mainMenu .topMenu UL.nav.websites > li > A:hover, .footer .copyright A:hover {
	background-color: hsl(0, 0%, 90%) !important;
    color: hsl(0, 0%, 2%);
}

.websites li.genList A SPAN, .websites li.genList A I, .footer .copyright A I, .footer .copyright A SPAN {
    text-transform: uppercase;
    font-style: italic;
}

.websites li.genList A I:first-of-type, .footer .copyright A I.punto-icon {
    text-transform: none;
    font-style: normal;
}

#mainMenu .websites li.genList A I:first-of-type {
    display: inline-block;
    width: 32px;
    text-align: center;
}

.websites li.genList A SPAN, .websites li.genList A SPAN:first-of-type, .footer .copyright A SPAN {
    font-size: 11px;
    font-weight: normal;
    z-index:5;
}

#mainMenu .websites li.genList A SPAN, .websites li.genList A SPAN:first-of-type {
    font-size: inherit;
}

.websites li.genList A I, .footer .copyright A I {
	display: inline;
    float:none;
    font-size: 11px;
    vertical-align: baseline;
}

#mainMenu .websites li.genList A I {
    font-size: inherit;
}

.websites li.genList A I:before, .footer .copyright A I:before {
    font-size: 18px;
}

.rightMenu > DIV > UL > li {
	border-left: 5px solid #FFFFFF;
}

.rightMenu.miniSites > DIV > UL > li {
	border-left-style: none;
}

.menuSecondario, #menuPrincipale {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start ;
    background: white;
    position: relative;
    padding: 10px 15px 10px 15px;
    margin: 0px 0px 6px 0px;
    min-height: 4em;
}

#menuPrincipale {
    flex-wrap: wrap;
    justify-content: flex-start;
}
    
.siteColorTheme .menuSecondario li.genList, .siteColorTheme #menuPrincipale li.genList {
    border-color: #3985c6;
}

.menuSecondario li.genList, #menuPrincipale li.genList {
    background: transparent;
    box-shadow: none;
    border-style: solid;
    border-color: transparent;
    border-radius: 0px;
    margin: 0px .25%;
    flex-direction: inherit;
    text-align: center;
    display: inline-block;
    flex-basis: 45%;
}
    
.menuSecondario li.genList{
    font-size: 16px;
    justify-content: flex-start;
    align-items: flex-start;
    min-height: 3.5em;
    border-width: 2px 0px 0px 0px;
    text-align: left;
    margin: 0px 2.5% 2px 2.5%;
    width: 45%;
    flex-basis: 45%;
    font-weight: 400;
}

#menuPrincipale li.genList {
    font-size: 18px;
    border-width: 0px 0px 0px 4px;
    margin: 2px 0px;
    flex-basis: 50%;
}
    
#mainMenu #menuPrincipale li.genList .smallText {
    font-size: 12px;
}

#mainMenu .menuSecondario li.genList .smallText {
    font-size: smaller;
}

.menuSecondario.edizioniLocali li.genList {
    min-height: auto;
}

.menuSecondario > li.genList > a, #menuPrincipale > li.genList > a {
    width: 100%;
    padding: 6px 6px 6px 8px;
    background: transparent;
    background-image: linear-gradient(to right, hsla(0, 0%, 100%, 0.85) 3%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, .85) 87%);
    border: 4px solid transparent;
    border-width: 4px 0px 0px 0px;
    font-family: "Lato", sans-serif;
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: inherit;
    text-transform: uppercase;
    text-shadow: none;
    color: hsl(0,0%,50%);
}

#menuPrincipale > li.genList > a {
    font-weight: 700;
    text-align: left;
    justify-content: flex-start;
    margin-left: -4px;
}

.menuSecondario > li.genList > a {    
    text-transform: none;
    margin-top: -2px;
    background-image: linear-gradient(to right, hsla(0, 0%, 100%, 0) 4px, hsla(0, 0%, 100%, 1) 4px, hsla(0, 0%, 100%, 1) 8px, hsla(0, 0%, 100%, .77) 8px, hsla(0, 0%, 100%, .88));
}

.menuSecondario > li.genList > a:hover, #menuPrincipale > li.genList > a:hover {
    color: hsl(0, 0%, 0%);
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .85) 100%, hsla(0, 0%, 100%, .92) 100%);
    background-clip: border-box;
    background-origin: border-box;
    border-width: 4px 0px 0px 0px;
    border-style: solid;
    border-image-width: 4px 0% 0px 0%;
    border-image-slice: 1 0 0 0;
/*    box-shadow: 0px 1px 5px hsl(0,0%,89.5%);*/
    overflow: visible;
    z-index: 10;
    -webkit-animation: 0.25s backwards underline1;
    -moz-animation: 0.25s backwards underline1;
    animation: 0.25s backwards underline1;
}

.menuSecondario > li.genList > a:hover {
    background-image: linear-gradient(to bottom, transparent 3px, hsl(0,0%,98%) 3px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 66.667%, hsla(0, 0%, 100%, 1) 66.667%, hsla(0, 0%, 100%, 1) 69.667%, hsla(0, 0%, 100%, .77) 69.667%, hsla(0, 0%, 100%, .88));
    background-clip: border-box, border-box;
    background-origin: border-box, border-box;
    -webkit-animation: 0.25s backwards underline3;
    -moz-animation: 0.25s backwards underline3;
    animation: 0.3s backwards underline5;
}

#menuPrincipale > li.genList > a, #menuPrincipale > .panel-default > .panel-heading > div.panel-title > a{
    height: 100%;
}

.menuSecondario > li.genList > a, .menuSecondario > .panel-default > .panel-heading > div.panel-title > a {
    height: auto;
}

.menuSecondario a:focus {    
    text-decoration: none;
}

.menuSecondario a span, #menuPrincipale a span {
    display: inline-block;
    margin: 0%;
}

#mainmenu .rightMenu.miniSites A {
	background-color: transparent;
	border-bottom: 1px solid #212121;
	padding-left: 25px;
}

.rightMenu > .row > UL > li > A {
	padding-top: 14px;
	padding-bottom: 14px;
}

.rightMenu.miniSites .row {
	margin-left: -15px;
}


.rightMenu .collapsable-menu li
{
	border-bottom: 1px solid #373737;
}

#contatti {
    background: white;
    display: table;
}

#contatti .contacts {
    padding: 0px 10px;
}

#contatti .contacts a{
    font-size: 13px;
    text-align: center;
    text-transform: capitalize;
    background: transparent;
}

#contatti .socialGroup a.btn {
    color: hsl(0,0%,60%) !important;
    text-shadow: none;
    font-size: 28px;
}

#contatti .socialGroup a.btn:hover, #contatti .contacts a:hover {
    color: hsl(0, 0%, 5%)!important;
    background: transparent;
}

#contatti .socialGroup .btn .fa {
    margin-left: -100%;
    left: 50%;
    position: relative;
} 

#contatti .socialGroup a.btn.btn-primary, #contatti .socialGroup a.btn.btn-danger, #contatti .socialGroup a.btn.btn-info, #contatti .socialGroup a.btn.btn-warning {
    background-color: transparent;
    background-image: none;
    border: 0px;
    box-shadow: none;
    width: 50%;
}

/*---------------------------MENU CELLULARI WEBSITES ---------------------------*/

/*--------------------------HEADER WEBSITES---------------------------------*/

.full-row .websites.navbar-nav {
    display: block;
    width: 100%;
    height: 1.65vw;
    background-color: #212121;
    border: none;
    padding-left: 0.5%;
    padding-right: 0.5%;
}

.full-row .websites li.genList {
    width: 7.3%;
    border: none;
}

.full-row .websites li.genList.shortTitle {
    width: 4.3%;
} 

.full-row .websites li.genList.longTitle {
    width: 8.5%;
}

.full-row .websites li.genList A I.punto-icon:before {
    display: none;
}

/*------------------FOOTER WEBSITES--------------------------*/

.footer .copyright{    
    text-align: center;
    font-size: 13px;
    padding-top: 3px;
    padding-bottom: 3px;
}

.footer .copyright A {
    font-family: Oswald, sans-serif !important;
    box-shadow: none;
    font-weight: normal;
}

.footer .copyright A I, .footer .copyright A SPAN {
    
}


.footer .copyright A I:first-of-type {
    
}

.footer .copyright A I.punto-icon:before {
    font-size: 16px;    
    margin: 0px 5px 0px 2px;
}

.footer .websites.navbar-nav {
    border: 0px solid #eee;
    border-top: 1px solid #eee;
    color: #ffffff;
    background-color: #212121;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 5px;
}

.footer .websites.navbar-nav li.genList:first-of-type {
    display: none;
} 

.footer .websites.navbar-nav li.genList {
    width: 16.66667%;
    margin: 0 auto;
}

.footer .websites.navbar-nav li a, .footer .copyright A {
    color: #eee;
}

/* -------------------------///// MEDIA QUERIES per il Menu /////
--------------------------------------------------------------- 768 px*----------------------------------------*/


@media screen and (min-width: 768px) {
    
    
    .footer .copyright{
        font-size: 14px;
    }
    
    .navbar {
        border: none;
    }
    
    UL.websites {
        display: block;
        padding: 0px 1px 0px 1px;
    }

    #mainMenu ul.menuCategoria.nav {
        padding: 4px 0px 0px 0px;
        height: auto;
        flex-flow: row wrap;
    }
    
    #mainMenu .labelMenu {
        text-align: center;
    }
    
    #mainMenu .labelMenu span.smallText {
        font-size: xx-small;
    }
    
    .topMenu li {
        width: auto;
        text-align: center;
        border-left: none;
        margin: auto;
        
    }
    
    .websites {
        border: none;
        border-radius: 0px;
    }
        
    .websites li.genList{
        width: 7%;
        padding-left: 1px;
        padding-right: 1px;
    }

    .websites li.genList A SPAN, .websites li.genList A SPAN:first-of-type, .footer .copyright A SPAN {
        font-size: inherit;
        font-weight: normal;
    }

    .websites li.genList A I, .websites li.genList A I:before, .footer .copyright A I, .footer .copyright A I.punto-icon:before {
        display: inline;
        float:none;
        font-size: inherit;
    }
    
    .websites li.genList A I:before, .footer .copyright A I.punto-icon:before {
        font-size: 18px;
    }
    
    

    #mainMenu .topMenu #expandableMenu .websites {
        flex-flow: row wrap;
        margin: 0px 0px 15px 0px;
    }
    
    #mainMenu .topMenu #expandableMenu .websites li.genList A I.punto-icon:before, #mainMenu .topMenu #expandableMenu .websites li.genList A I.punto-icon {
        display: none;
    }
    
    .mainMenu .topMenu UL.nav.websites > li > A {
        padding: 0;
    }
    
	.rightMenu > DIV > UL > li {
        width: auto;
		border-top: 4px solid #FFFFFF;
		border-left: 0px solid #000000;
        text-align: center;
	}
    
    .rightMenu > DIV > UL > li > A {
        padding-left: 1px;
        padding-right: 1px;
    }
    
    .rightMenu .collapsable-menu li {
		border-bottom: 0px none transparent;
	}
    
	.websites li.genList A, .footer .copyright A {
        height: auto;
		font-family: Oswald, sans-serif !important;
		font-size: 0.9vw;
        line-height: normal;
        padding-top: 0.1vw;
        padding-bottom: 0.2vw;
        border: none;
        box-shadow: none;
        text-shadow: none;
        text-align: center;
	}
    
	.websites li:first-child {
		border-top-left-radius: 3px;
	}
    
    
    /*//////////////////////////////////////////////////////////////////////////////////////////////*/
    /* modifiche per un dropdown dei menu che si sviluppa in orizzontale */
    /*//////////////////////////////////////////////////////////////////////////////////////////////*/
    
    

    #mainMenu {
        top: 1.60vw;
    }
    
    #mainMenu .mainMenu.navbar {
        margin: 0px 0px 5px 0px;
    }
    
    #mainMenu .labelMenu {
        margin-top: 15px;
    }
    
    #expandMenu .btn span.labelMenu::after, #expandSearch .btn span.labelMenu::after, .archivio .btn span.labelMenu::after, #expandableForm > div.labelMenu::after {
        content:"espandi";
        display: inline-block;
        font-size: 1rem;
        text-align: center;
        font-weight: normal;
        margin-top: 5px;
        margin-left: 8px;
        margin-right: 8px;
        z-index: -1;
    }
    
    #expandableForm > div.labelMenu::after {
        content: "ricerca all'interno delle notizie del sito";
        text-align: left;
    }

    #expandSearch .btn span.labelMenu::after {
        content:"cerca";
    }

    #expandMenu .btn.active span.labelMenu::after, #expandSearch .btn.active span.labelMenu::after {
        content:"chiudi";
    }

    #mainMenu .archivio .btn span.labelMenu:after {
        content:"Notizie del giorno e archivio storico";
        text-align: right;
    }
    
    #expandableMenu .websites {
        flex-flow: row wrap;
    }
    
    #mainMenu .topMenu #expandableMenu .websites li.genList {
        width: auto;
        flex-basis: auto;
        margin: 3px 5px;
    }
    
    #menuPrincipale {
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    
    .menuSecondario > li.genList > a, #menuPrincipale > li.genList > a {
    }
    
    #mainMenu a:focus {
        text-decoration: none;
    }
    
    .menuSecondario li.genList, #menuPrincipale li.genList {
        width: auto;
        flex-basis: auto;
        min-width: 12%;
    }
    
    

    #menuPrincipale li.genList {
        font-size: 14px;
        border-width: 4px 0px 0px 0px;
    }

    #menuPrincipale > li.genList > a {
        justify-content: center;
        margin-left: 0px;
        margin-top: -4px;
    }
    
    .menuSecondario li.genList {
        font-size: 16px;
        width: 20%;
    }
    
    #contatti {
        width: 100%;
        margin-bottom: 5px;
    }

    #contatti .socialGroup a.btn.btn-primary, #contatti .socialGroup a.btn.btn-danger, #contatti .socialGroup a.btn.btn-info, #contatti .socialGroup a.btn.btn-warning {
        width: auto;
    }
    
}

/*----------------------------------------------992 px*-------------------------------------------------------*/

@media screen and (min-width: 992px){
    
    #mainMenu {
        position: static;
    }
    
    #expandableMenu {
		max-height: 100%;
        overflow-y: hidden;
    }
        
    .footer .copyright{
        font-size: 14px;
    }

    .websites li.genList A SPAN, .websites li.genList A SPAN:first-of-type {
        font-size: inherit;
    }
    
    /*li A {
        height: 34px;
        padding-top: 7px;
        padding-bottom: 4px;
        font-size: 13px;
    }*/
    
    HEADER li A {
        height: 25px;
    }
    
    .websites li.genList A I, .websites li.genList A I:before, .footer .copyright A I, .footer .copyright A I.punto-icon:before {
        display: inline;
        float:none;
        font-size: inherit;
    }
    
    .websites li.genList A I:before, .footer .copyright A I.punto-icon:before {
        font-size: 22px;
    }
    
    #expandableForm INPUT.form-control {
        border-color: transparent;
    }
    
}

/*-----------------------------------MEDIA QUERY 1880px-------------------------------------------*/

@media screen and (min-width:1880px){
    
    .footer .copyright{
        font-size: 15px;
    }
    
   /* li A {
        height: 38px;
        padding-top: 7px;
        padding-bottom: 4px;
        font-size: 14px;
    }*/
    
    HEADER li A {
        height: 30px;
    }
    
    .websites li.genList A I:before, .footer .copyright A I.punto-icon:before {
	font-size: inherit;
    }

    .websites li.genList A SPAN, .footer .copyright A SPAN {
        font-size: inherit;
    }

    .websites li.genList A I, .footer .copyright A I {
        display: inline;
        float:none;
        font-size: inherit;
    }
    
    .websites li.genList A I:before {
        font-size: 24px;
    }
    
    .footer .copyright A I.punto-icon:before {
        font-size: 24px;    
        margin: 0px 5px 0px 2px;
    }
    
}
/*---------------------------------------colori ICONE----------------------------------------------------------------*/

.websites {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.websites li.genList A I.punto-icon:before {
    margin-right: 5px;
    text-shadow: 1px 1px 0px black;
}

.websites li.genList A I.icomoon-punto24ore:before, .websites li.genList A I.icomoon-punto24ore~I.colored, .footer .copyright A I.punto-icon:before, .footer .copyright A I{
    color: #A7916D;
}

.websites li.genList A I.icomoon-il24ore:before, .websites li.genList A I.icomoon-il24ore~I.colored{
    color: #E20006;
}

.websites li.genList A I.icomoon-sport:before, .websites li.genList A I.icomoon-sport~I.colored{
    color: #1DA7AF;
}

.websites li.genList A I.icomoon-economia:before, .websites li.genList A I.icomoon-economia~I.colored{
    color: #3EA62A;
}

.websites li.genList A I.icomoon-cucina:before, .websites li.genList A I.icomoon-cucina~I.colored{
    color: #FF783E;
}

.websites li.genList A I.icomoon-irriverente:before, .websites li.genList A I.icomoon-irriverente~I.colored{
    color: #BE1822;
}

.websites li.genList A I.icomoon-irriverente:before {
    margin-right: 0px;
}

.websites li.genList A I.icomoon-look:before, .websites li.genList A I.icomoon-look~I.colored{
    color: #aaa;
}

.websites li.genList A I.icomoon-recensioni:before, .websites li.genList A I.icomoon-recensioni~I.colored{
    color: #F6A117;
}

.websites li.genList A I.icomoon-capoluogo:before, .websites li.genList A I.icomoon-capoluogo~I.colored{
    color: #A69587;
}

.websites li.genList A I.icomoon-meteo:before, .websites li.genList A I.icomoon-meteo~I.colored{
    color: #91CCFF;
}

.websites li.genList A I.icomoon-gossip:before, .websites li.genList A I.icomoon-gossip~I.colored{
    color: #E72779;
}

.websites li.genList A I.icomoon-oroscopo:before, .websites li.genList A I.icomoon-oroscopo~I.colored{
    color: #FFD502;
}

.websites li.genList A I.icomoon-abruzzo:before, .websites li.genList A I.icomoon-abruzzo~I.colored{
    color: #0DA7FF;
}

/* -------------------------ANIMAZIONI -------------------------------------------- */


/*----------------UNDERLINE 1---------------------------------------------------------*/
@-moz-keyframes underline1 {
    
    from {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .85) 50%, hsla(0, 0%, 100%, .92) 100%);}
    
    10%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 55%, hsla(0, 0%, 100%, .85) 55%, hsla(0, 0%, 100%, .92) 100%);}
    
    20%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .85) 60%, hsla(0, 0%, 100%, .92) 100%);}
    
    30%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .85) 65%, hsla(0, 0%, 100%, .92) 100%);}
    
    40%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .85) 70%, hsla(0, 0%, 100%, .92) 100%);}
    
    50%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .85) 75%, hsla(0, 0%, 100%, .92) 100%);}
    
    60%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .85) 80%, hsla(0, 0%, 100%, .92) 100%);}
    
    70%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .85) 85%, hsla(0, 0%, 100%, .92) 100%);}
    
    80%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .85) 90%, hsla(0, 0%, 100%, .92) 100%);}
    
    90%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .85) 95%, hsla(0, 0%, 100%, .92) 100%);}
    
    to {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .85) 100%, hsla(0, 0%, 100%, .92) 100%);}
}
@-webkit-keyframes underline1 {
    
    from {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .85) 50%, hsla(0, 0%, 100%, .92) 100%);}
    
    10%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 55%, hsla(0, 0%, 100%, .85) 55%, hsla(0, 0%, 100%, .92) 100%);}
    
    20%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .85) 60%, hsla(0, 0%, 100%, .92) 100%);}
    
    30%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .85) 65%, hsla(0, 0%, 100%, .92) 100%);}
    
    40%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .85) 70%, hsla(0, 0%, 100%, .92) 100%);}
    
    50%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .85) 75%, hsla(0, 0%, 100%, .92) 100%);}
    
    60%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .85) 80%, hsla(0, 0%, 100%, .92) 100%);}
    
    70%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .85) 85%, hsla(0, 0%, 100%, .92) 100%);}
    
    80%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .85) 90%, hsla(0, 0%, 100%, .92) 100%);}
    
    90%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .85) 95%, hsla(0, 0%, 100%, .92) 100%);}
    
    to {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .85) 100%, hsla(0, 0%, 100%, .92) 100%);}
}
@keyframes underline1 {
    
    from {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .85) 50%, hsla(0, 0%, 100%, .92) 100%);}
    
    10%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 55%, hsla(0, 0%, 100%, .85) 55%, hsla(0, 0%, 100%, .92) 100%);}
    
    20%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .85) 60%, hsla(0, 0%, 100%, .92) 100%);}
    
    30%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .85) 65%, hsla(0, 0%, 100%, .92) 100%);}
    
    40%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .85) 70%, hsla(0, 0%, 100%, .92) 100%);}
    
    50%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .85) 75%, hsla(0, 0%, 100%, .92) 100%);}
    
    60%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .85) 80%, hsla(0, 0%, 100%, .92) 100%);}
    
    70%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .85) 85%, hsla(0, 0%, 100%, .92) 100%);}
    
    80%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .85) 90%, hsla(0, 0%, 100%, .92) 100%);}
    
    90%{
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .85) 95%, hsla(0, 0%, 100%, .92) 100%);}
    
    to {
    background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 4px, hsl(0,0%,97%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0.92) 0%, hsla(0, 0%, 100%, 0.85) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .85) 100%, hsla(0, 0%, 100%, .92) 100%);}
}

/*----------------UNDERLINE 2---------------------------------------------------------*/

@-moz-keyframes underline2 {
    from {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, .88) 100%);
    }
    10%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    20%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .77) 60%, hsla(0, 0%, 100%, .88) 100%);
    }
    30%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    40%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .77) 70%, hsla(0, 0%, 100%, .88) 100%);
    }
    50%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .77) 75%, hsla(0, 0%, 100%, .88) 100%);}
    60%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .77) 80%, hsla(0, 0%, 100%, .88) 100%);
    }
    70%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .77) 85%, hsla(0, 0%, 100%, .88) 100%);
    }
    80%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .77) 90%, hsla(0, 0%, 100%, .88) 100%);
    }
    90%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .77) 95%, hsla(0, 0%, 100%, .88) 100%);
    }
    to {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .77) 100%, hsla(0, 0%, 100%, .88) 100%);
    }
}
@-webkit-keyframes underline2 {
    from {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, .88) 100%);
    }
    10%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    20%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .77) 60%, hsla(0, 0%, 100%, .88) 100%);
    }
    30%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    40%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .77) 70%, hsla(0, 0%, 100%, .88) 100%);
    }
    50%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .77) 75%, hsla(0, 0%, 100%, .88) 100%);}
    60%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .77) 80%, hsla(0, 0%, 100%, .88) 100%);
    }
    70%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .77) 85%, hsla(0, 0%, 100%, .88) 100%);
    }
    80%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .77) 90%, hsla(0, 0%, 100%, .88) 100%);
    }
    90%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .77) 95%, hsla(0, 0%, 100%, .88) 100%);
    }
    to {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .77) 100%, hsla(0, 0%, 100%, .88) 100%);
    }
}
@keyframes underline2 {
    from {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, .77) 50%, hsla(0, 0%, 100%, .88) 100%);
    }
    10%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 45%, hsla(0, 0%, 100%, 0) 45%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    20%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 40%, hsla(0, 0%, 100%, 0) 40%, hsla(0, 0%, 100%, 0) 60%, hsla(0, 0%, 100%, .77) 60%, hsla(0, 0%, 100%, .88) 100%);
    }
    30%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, 0) 35%, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, .77) 65%, hsla(0, 0%, 100%, .88) 100%);
    }
    40%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 30%, hsla(0, 0%, 100%, 0) 30%, hsla(0, 0%, 100%, 0) 70%, hsla(0, 0%, 100%, .77) 70%, hsla(0, 0%, 100%, .88) 100%);
    }
    50%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 25%, hsla(0, 0%, 100%, 0) 25%, hsla(0, 0%, 100%, 0) 75%, hsla(0, 0%, 100%, .77) 75%, hsla(0, 0%, 100%, .88) 100%);}
    60%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 20%, hsla(0, 0%, 100%, 0) 20%, hsla(0, 0%, 100%, 0) 80%, hsla(0, 0%, 100%, .77) 80%, hsla(0, 0%, 100%, .88) 100%);
    }
    70%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 15%, hsla(0, 0%, 100%, 0) 15%, hsla(0, 0%, 100%, 0) 85%, hsla(0, 0%, 100%, .77) 85%, hsla(0, 0%, 100%, .88) 100%);
    }
    80%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 10%, hsla(0, 0%, 100%, 0) 10%, hsla(0, 0%, 100%, 0) 90%, hsla(0, 0%, 100%, .77) 90%, hsla(0, 0%, 100%, .88) 100%);
    }
    90%{
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 5%, hsla(0, 0%, 100%, 0) 5%, hsla(0, 0%, 100%, 0) 95%, hsla(0, 0%, 100%, .77) 95%, hsla(0, 0%, 100%, .88) 100%);
    }
    to {
        background-image: linear-gradient(to bottom, hsla(0, 0%, 100%, .88) 0%, hsla(0, 0%, 100%, .77) 0%, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0) 100%, hsla(0, 0%, 100%, .77) 100%, hsla(0, 0%, 100%, .88) 100%);
    }
}

/*----------------UNDERLINE 3---------------------------------------------------------*/

@-moz-keyframes underline3 {
    from {border-image-width: 4px 100% 0px 0%;}
    10%{border-image-width: 4px 90% 0px 0%;}
    20%{border-image-width: 4px 80% 0px 0%;}
    30%{border-image-width: 4px 70% 0px 0%;}
    40%{border-image-width: 4px 60% 0px 0%;}
    50%{border-image-width: 4px 50% 0px 0%;}
    60%{border-image-width: 4px 40% 0px 0%;}
    70%{border-image-width: 4px 30% 0px 0%;}
    80%{border-image-width: 4px 20% 0px 0%;}
    90%{border-image-width: 4px 10% 0px 0%;}
    to {border-image-width: 4px 0% 0px 0%;}
}
@-webkit-keyframes underline3 {
    from {border-image-width: 4px 100% 0px 0%;}
    10%{border-image-width: 4px 90% 0px 0%;}
    20%{border-image-width: 4px 80% 0px 0%;}
    30%{border-image-width: 4px 70% 0px 0%;}
    40%{border-image-width: 4px 60% 0px 0%;}
    50%{border-image-width: 4px 50% 0px 0%;}
    60%{border-image-width: 4px 40% 0px 0%;}
    70%{border-image-width: 4px 30% 0px 0%;}
    80%{border-image-width: 4px 20% 0px 0%;}
    90%{border-image-width: 4px 10% 0px 0%;}
    to {border-image-width: 4px 0% 0px 0%;}
}
@keyframes underline3 {
    from {border-image-width: 4px 100% 0px 0%;}
    10%{border-image-width: 4px 90% 0px 0%;}
    20%{border-image-width: 4px 80% 0px 0%;}
    30%{border-image-width: 4px 70% 0px 0%;}
    40%{border-image-width: 4px 60% 0px 0%;}
    50%{border-image-width: 4px 50% 0px 0%;}
    60%{border-image-width: 4px 40% 0px 0%;}
    70%{border-image-width: 4px 30% 0px 0%;}
    80%{border-image-width: 4px 20% 0px 0%;}
    90%{border-image-width: 4px 10% 0px 0%;}
    to {border-image-width: 4px 0% 0px 0%;}
}

/*----------------UNDERLINE 4---------------------------------------------------------*/

@-moz-keyframes underline4 {
    from {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}
@-webkit-keyframes underline4 {
    from {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}
@keyframes underline4 {
    from {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to right, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}

/*----------------UNDERLINE 5---------------------------------------------------------*/

@-moz-keyframes underline5 {
        from {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 4px, hsla(0, 0%, 100%, 1) 4px, hsla(0, 0%, 100%, 1) 8px, hsla(0, 0%, 100%, .77) 8px, hsla(0, 0%, 100%, .88));}
    
        10% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 3%, hsla(0, 0%, 100%, 1) 3%, hsla(0, 0%, 100%, 1) 6%, hsla(0, 0%, 100%, .77) 6%, hsla(0, 0%, 100%, .88));}
    
        20% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 8%, hsla(0, 0%, 100%, 1) 8%, hsla(0, 0%, 100%, 1) 11%, hsla(0, 0%, 100%, .77) 11%, hsla(0, 0%, 100%, .88));}
    
        30% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 16%, hsla(0, 0%, 100%, 1) 16%, hsla(0, 0%, 100%, 1) 19%, hsla(0, 0%, 100%, .77) 19%, hsla(0, 0%, 100%, .88));}
    
        40% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 100%, 1) 32%, hsla(0, 0%, 100%, 1) 35%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, .88));}
    
        50% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 44%, hsla(0, 0%, 100%, 1) 44%, hsla(0, 0%, 100%, 1) 47%, hsla(0, 0%, 100%, .77) 47%, hsla(0, 0%, 100%, .88));}
    
        60% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 56%, hsla(0, 0%, 100%, 1) 56%, hsla(0, 0%, 100%, 1) 59%, hsla(0, 0%, 100%, .77) 59%, hsla(0, 0%, 100%, .88));}
    
        70% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 61%, hsla(0, 0%, 100%, 1) 61%, hsla(0, 0%, 100%, 1) 64%, hsla(0, 0%, 100%, .77) 64%, hsla(0, 0%, 100%, .88));}
    
        80% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 63%, hsla(0, 0%, 100%, 1) 63%, hsla(0, 0%, 100%, 1) 66%, hsla(0, 0%, 100%, .77) 66%, hsla(0, 0%, 100%, .88));}
    
        90% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, 1) 65%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, .77) 68%, hsla(0, 0%, 100%, .88));}
    
        to {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 66.667%, hsla(0, 0%, 100%, 1) 66.667%, hsla(0, 0%, 100%, 1) 69.667%, hsla(0, 0%, 100%, .77) 69.667%, hsla(0, 0%, 100%, .88));}
}

@-webkit-keyframes underline5 {
        from {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 4px, hsla(0, 0%, 100%, 1) 4px, hsla(0, 0%, 100%, 1) 8px, hsla(0, 0%, 100%, .77) 8px, hsla(0, 0%, 100%, .88));}
    
        10% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 3%, hsla(0, 0%, 100%, 1) 3%, hsla(0, 0%, 100%, 1) 6%, hsla(0, 0%, 100%, .77) 6%, hsla(0, 0%, 100%, .88));}
    
        20% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 8%, hsla(0, 0%, 100%, 1) 8%, hsla(0, 0%, 100%, 1) 11%, hsla(0, 0%, 100%, .77) 11%, hsla(0, 0%, 100%, .88));}
    
        30% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 16%, hsla(0, 0%, 100%, 1) 16%, hsla(0, 0%, 100%, 1) 19%, hsla(0, 0%, 100%, .77) 19%, hsla(0, 0%, 100%, .88));}
    
        40% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 100%, 1) 32%, hsla(0, 0%, 100%, 1) 35%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, .88));}
    
        50% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 44%, hsla(0, 0%, 100%, 1) 44%, hsla(0, 0%, 100%, 1) 47%, hsla(0, 0%, 100%, .77) 47%, hsla(0, 0%, 100%, .88));}
    
        60% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 56%, hsla(0, 0%, 100%, 1) 56%, hsla(0, 0%, 100%, 1) 59%, hsla(0, 0%, 100%, .77) 59%, hsla(0, 0%, 100%, .88));}
    
        70% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 61%, hsla(0, 0%, 100%, 1) 61%, hsla(0, 0%, 100%, 1) 64%, hsla(0, 0%, 100%, .77) 64%, hsla(0, 0%, 100%, .88));}
    
        80% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 63%, hsla(0, 0%, 100%, 1) 63%, hsla(0, 0%, 100%, 1) 66%, hsla(0, 0%, 100%, .77) 66%, hsla(0, 0%, 100%, .88));}
    
        90% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, 1) 65%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, .77) 68%, hsla(0, 0%, 100%, .88));}
    
        to {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 66.667%, hsla(0, 0%, 100%, 1) 66.667%, hsla(0, 0%, 100%, 1) 69.667%, hsla(0, 0%, 100%, .77) 69.667%, hsla(0, 0%, 100%, .88));}
}
@keyframes underline5 {
        from {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 4px, hsla(0, 0%, 100%, 1) 4px, hsla(0, 0%, 100%, 1) 8px, hsla(0, 0%, 100%, .77) 8px, hsla(0, 0%, 100%, .88));}
    
        10% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 3%, hsla(0, 0%, 100%, 1) 3%, hsla(0, 0%, 100%, 1) 6%, hsla(0, 0%, 100%, .77) 6%, hsla(0, 0%, 100%, .88));}
    
        20% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 8%, hsla(0, 0%, 100%, 1) 8%, hsla(0, 0%, 100%, 1) 11%, hsla(0, 0%, 100%, .77) 11%, hsla(0, 0%, 100%, .88));}
    
        30% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 16%, hsla(0, 0%, 100%, 1) 16%, hsla(0, 0%, 100%, 1) 19%, hsla(0, 0%, 100%, .77) 19%, hsla(0, 0%, 100%, .88));}
    
        40% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 32%, hsla(0, 0%, 100%, 1) 32%, hsla(0, 0%, 100%, 1) 35%, hsla(0, 0%, 100%, .77) 35%, hsla(0, 0%, 100%, .88));}
    
        50% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 44%, hsla(0, 0%, 100%, 1) 44%, hsla(0, 0%, 100%, 1) 47%, hsla(0, 0%, 100%, .77) 47%, hsla(0, 0%, 100%, .88));}
    
        60% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 56%, hsla(0, 0%, 100%, 1) 56%, hsla(0, 0%, 100%, 1) 59%, hsla(0, 0%, 100%, .77) 59%, hsla(0, 0%, 100%, .88));}
    
        70% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 61%, hsla(0, 0%, 100%, 1) 61%, hsla(0, 0%, 100%, 1) 64%, hsla(0, 0%, 100%, .77) 64%, hsla(0, 0%, 100%, .88));}
    
        80% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 63%, hsla(0, 0%, 100%, 1) 63%, hsla(0, 0%, 100%, 1) 66%, hsla(0, 0%, 100%, .77) 66%, hsla(0, 0%, 100%, .88));}
    
        90% {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 65%, hsla(0, 0%, 100%, 1) 65%, hsla(0, 0%, 100%, 1) 68%, hsla(0, 0%, 100%, .77) 68%, hsla(0, 0%, 100%, .88));}
    
        to {background-image: linear-gradient(to bottom, transparent 4px, hsl(0,0%,98%) 4px), linear-gradient(to right, hsla(0, 0%, 100%, 0) 66.667%, hsla(0, 0%, 100%, 1) 66.667%, hsla(0, 0%, 100%, 1) 69.667%, hsla(0, 0%, 100%, .77) 69.667%, hsla(0, 0%, 100%, .88));}
}

/*----------------UNDERLINE 6---------------------------------------------------------*/

@-moz-keyframes underline6 {
    from {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}
@-webkit-keyframes underline6 {
    from {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}
@keyframes underline6 {
    from {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 100%, transparent 100% );}
    10%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 90%, transparent 90% );}
    20%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 80%, transparent 80% );}
    30%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 70%, transparent 70% );}
    40%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 60%, transparent 60% );}
    50%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 50%, transparent 50% );}
    60%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 40%, transparent 40% );}
    70%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 30%, transparent 30% );}
    80%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 20%, transparent 20% );}
    90%{background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 10%, transparent 10% );}
    to {background-image: linear-gradient(to left, hsla(0, 0%, 100%, .77), hsla(0, 0%, 100%, .88) 0%, transparent 0% );}
}


@keyframes badge-in {
    from {background: hsla(0,0%,100%, .4)}
    to {background: hsla(0,0%,100%, .0)}
}