pre {
    position: relative;
    margin:35px 0px;
    max-width: 800px;
    padding: 30px 15px;
    background: #f5f5f5;
    white-space: pre-wrap;  
    word-break: keep-all;
    word-wrap: break-word;

    font-size: 14px;
    color: #666666;
    border-left: 3px solid #ccc;
}

#cabecera .rfga-svg{
    fill: lightgrey;
    height: 85px;
}

.cabecera{
    z-index:9;
    top:0px;
    position:absolute;
    height: 100px;
    width: 100%;
    background-color:white;
    padding:0px;
    border-bottom: 1px solid #f3f3f3;
}

.footer .rfga-svg{fill: white;}
.roboto{font-family: 'Roboto Slab', serif !important;}
.slab{font-family: 'Scope One', serif !important;}
.rale{font-family:Raleway, Lato !important;}
.logo{right:6%;}
#payment{font-size: 9ex !important;}
.separe-mid{margin-top: 25px !important;}

.flag{
    transform-origin: 4px 23px;
    animation-name: fill;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1.4s;
    fill:#94C120;
}

body{
    background: #FFFFFF;
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.anchosoporte{
    width: 960px !important;
    padding: 95px !important;
}

@keyframes fill {
    0% {
        transform: translateY(8px);
        fill:#fefefe;
    }
    100% {
        transform: translateY(0);
        fill:#94C120;
    }
}

@media only screen and (min-width: 767px) {
    #container-ppal{margin-top: 115px;}
    #cabecera{visibility: visible;}
}

@media only screen and (max-width: 767px) {
    #container-ppal{margin-top: 15px;}
    #cabecera{visibility: hidden;}
}

/* RESPONSIVE ELEMENTS */
/* Mobile */
@media only screen and (max-width: 767px) {
    [class*="mobile hidden"],
    [class*="tablet only"]:not(.mobile),
    [class*="computer only"]:not(.mobile),
    [class*="large monitor only"]:not(.mobile),
    [class*="widescreen monitor only"]:not(.mobile),
    [class*="or lower hidden"] {display: none !important;}
}

/* Tablet / iPad Portrait */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    [class*="mobile only"]:not(.tablet),
    [class*="tablet hidden"],
    [class*="computer only"]:not(.tablet),
    [class*="large monitor only"]:not(.tablet),
    [class*="widescreen monitor only"]:not(.tablet),
    [class*="or lower hidden"]:not(.mobile) {display: none !important;}
}

/* Computer / Desktop / iPad Landscape */
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    [class*="mobile only"]:not(.computer),
    [class*="tablet only"]:not(.computer),
    [class*="computer hidden"],
    [class*="large monitor only"]:not(.computer),
    [class*="widescreen monitor only"]:not(.computer),
    [class*="or lower hidden"]:not(.tablet):not(.mobile) {display: none !important;}
}

/* Large Monitor */
@media only screen and (min-width: 1200px) and (max-width: 1919px) {
    [class*="mobile only"]:not([class*="large monitor"]),
    [class*="tablet only"]:not([class*="large monitor"]),
    [class*="computer only"]:not([class*="large monitor"]),
    [class*="large monitor hidden"],
    [class*="widescreen monitor only"]:not([class*="large monitor"]),
    [class*="or lower hidden"]:not(.computer):not(.tablet):not(.mobile) {display: none !important;}
}

/* Widescreen Monitor */
@media only screen and (min-width: 1920px) {
    [class*="mobile only"]:not([class*="widescreen monitor"]),
    [class*="tablet only"]:not([class*="widescreen monitor"]),
    [class*="computer only"]:not([class*="widescreen monitor"]),
    [class*="large monitor only"]:not([class*="widescreen monitor"]),
    [class*="widescreen monitor hidden"],
    [class*="widescreen monitor or lower hidden"] {display: none !important;}
}
/* END RESPONSIVE ELEMENTS */