@import url('topo_rodape.css');

body {background: rgb(0, 0, 0)
}
* { margin:0; padding:0; list-style:none; vertical-align:baseline; color: #fff; font-smooth: always; -webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; }


#zent {color: #fff}

@font-face {
    font-family: 'playfair_displayitalic';
    src: url('../fonts/Playfair_Display/playfairdisplay-italic-webfont.woff2') format('woff2'),
         url('../fonts/Playfair_Display/playfairdisplay-italic-webfont.woff') format('woff');
}


 @font-face {
    font-family: 'NeueMontrealRegular';
    src: 
    url('../fonts/neue/NeueMontreal-Regular-162fbc77250fe34a7ce658149f11e4b3.woff') format('woff'),
    url('../fonts/neue/NeueMontreal-Regular-03e4146652022329ea7d0af620713e2a.woff2') format('woff2');
   
 }

 /* gilry 

 @font-face {
    font-family: 'GilroyRegular';
    src: 
    url('../fonts/gilroy/Gilroy-Regular.woff') format('woff');
 }

 @font-face {
    font-family: 'GilroyMedium';
    src: 
    url('../fonts/gilroy/Gilroy-Medium.woff') format('woff');
 }


 @font-face {
    font-family: 'GilroyBold';
    src: 
    url('../fonts/gilroy/Gilroy-Bold.woff') format('woff');
 }

 @font-face {
    font-family: 'GilroyBoldItalic';
    src: 
    url('../fonts/gilroy/Gilroy-BoldItalic.woff') format('woff');
 }


 @font-face {
    font-family: 'GilroyHeavy';
    src: 
    url('../fonts/gilroy/Gilroy-Heavy.woff') format('woff');
 }
 @font-face {
    font-family: 'GilroyHeavyItalic';
    src: 
    url('../fonts/gilroy/Gilroy-HeavyItalic.woff') format('woff');
 }


 @font-face {
    font-family: 'GilroyBlackItalic';
    src: 
    url('../fonts/gilroy/Gilroy-BlackItalic.woff') format('woff');
 } */

 @font-face {
    font-family: 'GilroyMedium';
    src: 
    url('../fonts/gilroy/Gilroy-Medium.woff') format('woff');
 }

 @font-face {
    font-family: 'GraphicRegular';
    src: 
    url('../fonts/graphik/Graphik-Regular.woff') format('woff');
 }

 @font-face {
    font-family: 'GraphicWebMedium';
    src: 
    url('../fonts/graphik/Graphik-Medium.woff') format('woff');
 }


 @font-face {
    font-family: 'CS';
    src: 
    url('../fonts/cs/CS-Book.woff2') format('woff');
 }

.borda-top {border-top: 1px solid; color:rgb(107, 107, 107);}
.borda-bottom {border-bottom: 1px solid; color:rgb(107, 107, 107);}

.navbar-brand {color: #fff;}

 .resumo-lista h4{
    font-family: 'Neue Montreal Regular', sans-serif; font-size: 40px; line-height: 30px; color: #ffffff; letter-spacing: 0px; text-transform: uppercase; line-height: 40px;
    margin-top: 40px;
}
 .resumo-lista li {
    padding: 0px 0 0 0;
    border-bottom: 1px solid #5f5f5f;
 }



.teste {font-family: 'GraphicWebMedium', sans-serif; font-size: 18px; line-height: 18px; color: #000000; letter-spacing: 0px; text-align: left; text-transform: none; padding: 5px }
.teste-estak {background-color: rgb(0, 0, 0); color:rgb(255, 255, 255); padding: 7px 8px 6px 8px; }

.destak {background-color: rgb(255, 255, 255); color:rgb(255, 255, 255); padding: 7px 8px 6px 8px; }



.partition-title {width: 50%; float: right;}

/* titulos */
h1 {font-family: 'GilroyMedium', sans-serif; font-size: 26px; line-height: 30px; color: #ffffff; letter-spacing: 0px; font-weight: bold; padding: 0; margin: 0;
/*text-indent: 10000px; background: url('../source/logo/corberto.svg') no-repeat top left; display: block; width: 110px; background-size: 100px; background-position: 0px 20px;*/
}

h2 {font-family: 'GilroyHeavy', sans-serif; line-height: 100%; color: #ffffff; letter-spacing: -4px; font-weight: regular; text-transform: uppercase;}
h3 {font-family: 'GraphicWebMedium', sans-serif; font-size: 80px; line-height: 80px; letter-spacing: -4px; color: rgb(255, 255, 255);}
h4 {font-family: 'GraphicWebMedium', sans-serif; font-size: 50px; line-height: 60px; letter-spacing: -2px; margin-left: 0px; color: rgb(255, 255, 255);}
h5 {font-family: 'GraphicWebMedium', sans-serif; font-size: 32px; color: rgb(255, 255, 255); line-height: normal; letter-spacing: 0px; margin-left: 0px; background-color:none; /*border-radius: 50px; float: left; padding: 10px 30px; border: 2px solid #fff*/}

.tag-interface {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #a5eed3; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #a5eed3; color: rgb(50, 105, 105);}
.tag-email {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #eee9a5; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #eee9a5; color: rgb(50, 105, 105);}
.tag-kv {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #eea5a5; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #eea5a5; color: rgb(90, 40, 40);}
.tag-wireframes {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #cdcdcd; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #cdcdcd; color: rgb(90, 40, 40);}
.tag-app {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #d6a3f2; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #d6a3f2; color: rgb(93, 37, 88);}
.tag-social {font-size: 14px; margin-right: 10px; margin-bottom: 10px; background-color: #a3aff2; border-radius: 50px; float: left; padding: 6px 20px; border: 2px solid #a3aff2; color: rgb(93, 37, 88);}

.img-full {width: 100%;}


.title-white {color: rgb(255, 255, 255)}
.title-black {color: #000}

.green-color {/*color: #93d304 !important;*/ font-family: 'GilroyHeavyItalic' !important; line-height: 90%; color: #ffffff; letter-spacing: -4px; font-weight: regular; text-align: left; width: 100%; text-transform: uppercase;}

/* imagem de fundo 
.bg-full {background: linear-gradient(
    rgba(0, 0, 0, 0.5), 
    rgba(0, 0, 0, 1) 
    ),url('../img/bg.jpg') top left !important; background-size: 100%;
    /*-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
     */
/*} */

/* conteudo de texto */
.super-banner {margin-top: 20vh; margin-bottom: 20vh; padding-bottom: 0px}

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&display=swap');
.texto_home {font-family: 'GraphicRegular', , sans-serif; font-size: 19px; line-height: 25px; color: #ffffff; letter-spacing: 0px; text-align: left; }
.texto_home strong {color: #fff;}

.texto_home_selo {padding: 5px; border-top: 3px solid #ffffff; padding-top: 30px; padding-bottom: 30px;}

.texto {font-family: 'GraphicRegular', sans-serif; font-size: 19px; line-height: 25px; color: #ffffff; letter-spacing: 0px; text-align: left; padding: 5px;}

.texto_big2 {font-family: 'GraphicWebMedium', sans-serif; font-size: 46px; line-height: 48px; color: #ffffff; letter-spacing: -2px; text-align: left; padding: 5px;}
.texto strong {color: #fff;}


.mini-texto {font-family: 'GraphicRegular', sans-serif; font-size: 14px; line-height: 21px; color: #ffffff; letter-spacing: 0px; text-align: left; padding: 5px; text-transform: uppercase; width: 100%; clear: both;}

@media only screen and (max-width: 970px) { 
    .d-xs-none , .flex-br {
        display: none;
}
    .cut-mobile-br {
        display: block;
}
h2 {font-size: 70px;}

.hide-mobile-cut {display: none;}

}


@media only screen and (min-width: 970px) { 
    h2 {font-size: 120px;}
    .teste-mobile-cut {display: none;}
}



@media only screen and (min-width: 1100px) { 
    h2 {font-size:190px;}
}




@media only screen and (min-width: 1200px) { 

}
@media only screen and (min-width: 1300px) { 

}
@media only screen and (min-width: 1400px) { 

    .text-desc {font-size: 18px; line-height: 30px;}
    
}

@media only screen and (max-width: 1500px) { 
    .flex-br {
        display: none;
    }
}

@media only screen and (min-width: 1871px) { 
    .flex-br {
        display: none;
    }
    
}

@media only screen and (min-width: 1550px) { 

    .text-desc {font-size: 18px; line-height: 28px; margin-top: 145px;}
    .flex-br {
        display: none;
    }
    
}
@media only screen and (min-width: 1690px) { 

    .text-desc {font-size: 18px; line-height: 28px;  margin-top: 170px}

}

@media only screen and (min-width: 1871px) { 

    .flex-br {
        display: block;
    }
    
}


@media only screen and (min-width: 1900px) { 
    .text-desc {font-size: 20px; line-height: 30px; }
}

.item-link {
    padding: 20px 0;
    color: #ffffff;
    display: block;
    border-top: 1px solid #fff;
    margin-top: 20px;
    background: url('../img/seta.png') no-repeat center right;
}
.item-link:link, .item-link:visited {
    text-decoration: none;
    color: #fff;
}
.item-link:hover, .item-link:visited:hover {
    text-decoration: underline;
    color: #fff;
}

.item-link-bg-white {
    padding: 20px 0 20px 30px;
    color: rgb(255, 255, 255);
    display: block;
    margin-top: 30px;
    background: url('../img/seta.png') no-repeat center right;
    background-color: rgb(0, 0, 0);
    font-family: 'GilroyBold';
    background-position: right 30px center;
    
}
.item-link-bg-white:link , .item-link-bg-white:link:visited {
    text-decoration: none;
    color: #fff;
}
.item-link-bg-white:hover, .item-link-bg-white:visited:link  {
    text-decoration: none;
    color: rgb(0, 0, 0);
    background: url('../img/seta-preta.png') no-repeat center right  rgb(18, 227, 129);
    background-position: right 30px center;
}

/* pre-menu */

.pre-menu-job {
    height: 100px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto
}

.pre-menu-job li {
    float: left;

    border-top: 20px solid transparent;
}

.pre-menu-job a {
    color: rgb(255, 255, 255);
    font-family: 'GraphicWebMedium', sans-serif; font-size: 22px;

}

.pre-menu-job a:link , .pre-menu-job a:visited {
    text-decoration: none;
}
.pre-menu-job a:hover , .pre-menu-job a:visited:hover {
    text-decoration: none;
    color: rgb(0, 0, 0);
}
.pre-menu-job .actives {
    background-color: rgb(255, 255, 255);
    border-radius: 40px 40px 40px 40px;
    border-collapse: separate; 
    color: rgb(0, 0, 0) !important;
}

.pre-menu-job .actives:hover {
    background-color: rgb(0, 0, 0);
    border-collapse: separate; 
    color: rgb(255, 255, 255);
    border-radius: 40px 40px 40px 40px;
    
}
@media only screen and (max-width: 1000px) { 
    

    .pre-menu-job {
        display: block;
        margin: 0 auto;
    }

    .pre-menu-job li {
        display: block;
        float: left;
        width: 100%;
        border-top: 0px solid transparent;
    }

    .pre-menu-job a {
        background-color: rgb(255, 255, 255);
        border-collapse: separate; 
        color: rgb(0, 0, 0);
        border-radius: 0;
        display: block;

    }

    .pre-menu-job a:link , .pre-menu-job a:visited {
        text-decoration: none;
    }
    .pre-menu-job a:hover , .pre-menu-job a:visited:hover {
        text-decoration: none;
        color: rgb(0, 0, 0);
    }
    .pre-menu-job .actives {

        color: rgb(255, 255, 255);
        border-radius: 0;
        background: rgb(0, 0, 0) url('../img/seta.png') no-repeat center right 5%;
        
    }

    .pre-menu-job .actives:hover {
        background-color: rgb(0, 0, 0);
        color: rgb(255, 255, 255) !important;
        border-radius: 0;
    }
    
}



/* trabalhos */

.menu-job a {
    display: block;
    text-decoration: none;
    color: #fff;
    height: 500px;
    font-family: "GraphicWebMedium", sans-serif;
}

.menu-job li {
    float: left;
}

.menu-job li h4 {
    font-weight: regular;
    font-size: 30px;
    letter-spacing: -1px;
    
}


/* trabalhos */
.menu-job a:link, .menu-job a:visited {
    -moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    
}
.menu-job a:hover, .menu-job a:visited:hover {
    -moz-filter: none;
    -o-filter: none;
    -webkit-filter: none;
    filter: none;
    filter: none;
}

.job-cielo:link , .job-cielo:visited  {
    background: linear-gradient(
rgba(0, 0, 0, 0.8), 
rgba(0, 0, 0, 0.8)
),url('/img/cielo/img-topo.jpeg') no-repeat center center; background-size: cover; 
    
}
.job-cielo:hover , .job-cielo:visited:hover  {
    background: linear-gradient(
rgba(51, 0, 0, 0.6), 
rgba(51, 0, 0, 0.6)
),url('/img/cielo/img-topo.jpeg') no-repeat center center; background-size: cover; 
    
}




/* trabalhos */


.menu-job-round a {
    display: block;
    text-decoration: none;
    color: #fff;
    height: 900px;
    font-family: "GraphicWebMedium", sans-serif;
}


.menu-job-round h4 {
    font-weight: regular;
    font-size: 30px;
    letter-spacing: -1px;
    
}



.menu-job-round a:link, .menu-job-round a:visited {
    /*-moz-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -o-filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(100%);
    filter: gray;
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    */
}
.menu-job-round a:hover, .menu-job-round a:visited:hover {
    /*-moz-filter: none;
    -o-filter: none;
    -webkit-filter: none;
    filter: none;
    filter: none;*/
    
}

.job-cielo-round:link , .job-cielo-round:visited  {
    background: url('img_home/cielo2.jpg') no-repeat center center; background-size: cover; background-position: center;
}

.job-cielo-round:hover , .job-cielo-round:visited:hover  {
    background: url('img_home/cielo2.jpg') no-repeat center center; background-size: cover; background-position: center;
    -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
    filter: grayscale(0%);
}

.job-santander-round:link , .job-santander-round:visited  {
    background: url('img_home/santander.jpg') no-repeat center center; background-size: cover;
}

.job-santander-round:hover , .job-santander-round:visited:hover  {
    background: url('img_home/santander.jpg') no-repeat center center; background-size: cover;
}

.job-garoto-round:link , .job-garoto-round:visited  {
    background: url('img_home/garoto2.jpg') no-repeat center center; background-size: cover;
}

.job-garoto-round:hover , .job-garoto-round:visited:hover  {
    background: url('img_home/garoto2.jpg') no-repeat center center; background-size: cover;
}


.job-misc-round:link , .job-misc-round:visited  {
    background: url('img_home/misc.jpg') no-repeat center center; background-size: cover;
}

.job-misc-round:hover , .job-misc-round:visited:hover  {
    background: url('img_home/misc.jpg') no-repeat center center; background-size: cover;
}




.job-natura-round:link , .job-natura-round:visited  {
   background: url('img_home/natura.jpg') no-repeat center center; background-size: cover;
}

.job-natura-round:hover , .job-natura-round:visited:hover  {
    background: url('img_home/natura.jpg') no-repeat center center; background-size: cover;
}

.job-dia-round:link , .job-dia-round:visited  {
    background: url('img_home/dia.jpg') no-repeat center center; background-size: cover;
 }
 
 .job-dia-round:hover , .job-dia-round:visited:hover  {
     background: url('img_home/dia.jpg') no-repeat center center; background-size: cover;
 }



.job-heineken-round:link , .job-heineken-round:visited  {
    background: url('img_home/heineken.jpg') no-repeat center center; background-size: cover;
 }
 
 .job-heineken-round:hover , .job-heineken-round:visited:hover  {
    background: url('img_home/heineken.jpg') no-repeat center center; background-size: cover;
 }


 .job-soma-round:link , .job-soma-round:visited  {
    background: url('img_home/soma.jpg') no-repeat center center; background-size: cover;
 }
 
 .job-soma-round:hover , .job-soma-round:visited:hover  {
    background: url('img_home/soma.jpg') no-repeat center center; background-size: cover;
 }

 .job-btg-round:link , .job-btg-round:visited  {
    background: url('img_home/btg.jpg') no-repeat center center; background-size: cover;
 }
 
 .job-btg-round:hover , .job-btg-round:visited:hover  {
    background: url('img_home/btg.jpg') no-repeat center center; background-size: cover;
 }

 .job-round:link , .job-round:visited  {
    background-color: #101010;
 }










div.scroll::before {
    content: '';
    background-color: #000;
    width: 0.125rem;
    height: 0;
    float: left;
    animation: scroll ease-in infinite 1.5s;
}


.navbar-toggler {
    border: none;
    border-radius: 0;
    outline: none !important;
  }
  
.bg_home {
    /*background: url('../img/6.jpg') #000 no-repeat top center; */
}



@media (max-width: 575.98px) {
    .bg_home {
        background-size: 250%; background-position: center -90px;
    }
    h3 {font-size: 50px;}
 }


@media (min-width: 576px) and (max-width: 767.98px) {
    .bg_home {
        background-size: 250%; background-position: center -90px;
    }
 }


@media (min-width: 768px) and (max-width: 991.98px) {
    .bg_home {
        background-size: 250%; background-position: center -260px;
    }
 }


@media (min-width: 992px) and (max-width: 1199.98px) { 
    .bg_home {
        background-size: 250%; background-position: center -260px;
    }
 }


@media (min-width: 1200px) { 
    .bg_home {
        background-size: 170%; background-position: -190px -300px;
    }
 }

 .texto_big {font-family: 'GraphicRegular', sans-serif; font-size: 21px; line-height: 30px; color: #ffffff; letter-spacing: 0px; text-align: left; padding: 5px;}
.frase span {font-family: 'playfair_displayitalic', sans-serif, GraphicWebMedium, serif; font-style: italic; letter-spacing: -9px; }
.email , .email:hover, .email:visited, .e-mail:visited:hover {text-decoration: none;}







@media (max-width: 575.98px) 
{
    .frase {font-size: 75px; font-family: 'GraphicWebMedium', sans-serif; letter-spacing: -4px; line-height: 75px; margin-top: 150px; margin-bottom: 50px;}
    .frase span {font-family: 'playfair_displayitalic', GraphicWebMedium, serif; font-style: italic; letter-spacing: -4px; }
    .br_telas_menores {display: none;}
    .contato a {display: block; width: 100%; border-bottom: 1px solid #fff; background: none;}
    .email {font-size: 17px !important; text-decoration: none; width: 100%}
    .underline_mini { width: 100%; border-bottom: 1px solid  rgb(107, 107, 107); background: none;}
    .hide {border-bottom: 0px !important}

    
    .texto_big2 {font-family: 'GraphicWebMedium', sans-serif; font-size: 30px; line-height: 30px; color: #ffffff; text-align: left; padding: 5px;}

    .menu-job-round a {
        height: 500px;
    
    }
    .foto {width: 80%; margin-left: -40px;}

    .cut-mobile-br {
        display: none;
    }


    .tag-interface {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #a5eed3; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #a5eed3; color: rgb(50, 105, 105);}
    .tag-email {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #eee9a5; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #eee9a5; color: rgb(50, 105, 105);}
    .tag-kv {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #eea5a5; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #eea5a5; color: rgb(90, 40, 40);}
    .tag-wireframes {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #cdcdcd; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #cdcdcd; color: rgb(90, 40, 40);}
    .tag-app {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #d6a3f2; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #d6a3f2; color: rgb(93, 37, 88);}
    .tag-social {font-size: 12px; margin-right: 10px; margin-bottom: 10px; background-color: #a3aff2; border-radius: 50px; float: left; padding: 6px 10px; border: 2px solid #a3aff2; color: rgb(93, 37, 88);}

    .job-heineken-round:link , .job-heineken-round:visited  {
        background: url('/source/img_home/heineken.jpg') no-repeat; background-size: cover; background-position: -50px 80px;
     }
     
     .job-heineken-round:hover , .job-heineken-round:visited:hover  {
        background: url('/source/img_home/heineken.jpg') no-repeat; background-size: cover; background-position: -50px 80px;
     }
    
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .frase {font-size: 100px; font-family: 'GraphicWebMedium', sans-serif; letter-spacing: -6px; line-height: 100px;  margin-bottom: 50px;}
    .br_telas_menores {display: none;}
    .email {font-size: 23px !important; text-decoration: none;}
    .email {font-size: 23px !important; text-decoration: none; width: 100%}
    .foto {width: 60%;}
    .contato a {display: block; width: 100%; border-bottom: 1px solid #fff; background: none;}
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .frase {font-size: 120px; font-family: 'GraphicWebMedium', sans-serif; letter-spacing: -6px; line-height: 120px;  margin-bottom: 50px;}
    .email {text-decoration: none; width: 100%; display: block; margin-bottom: 10px}
    .foto {width: 60%;}
    .contato a {display: block; width: 100%; border-bottom: 1px solid #fff; background: none;}
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .frase {font-size: 120px; font-family: 'GraphicWebMedium', sans-serif; letter-spacing: -6px; line-height: 120px;  margin-bottom: 50px;}
    .email {font-size: 23px !important; text-decoration: none; width: 100%}
    .foto {width: 70%;}
}   

@media (min-width: 1200px) 
    {
        .frase {font-size: 160px; text-align: justify; font-family: 'GraphicWebMedium', sans-serif; letter-spacing: -6px; line-height: 130px; margin-bottom: 50px;}
        h5 {
            margin-top: 0px;
        }
        .foto {width: 100%; margin-top: -105px}
    }

.jobs-links a:link , .jobs-links a:visited , .jobs-links a:active {border: 2px solid rgb(0, 0, 0);}
.jobs-links a:hover , .jobs-links a:visited:hover {border: 2px solid rgb(205, 205, 205); transition: 100ms linear;

}


.ico_lin {background: url('../source/icos/ico_in.svg') no-repeat right}
.ico_be {background: url('../source/icos/ico_be.svg') no-repeat right}
.ico_insta {background: url('../source/icos/ico_insta.svg') no-repeat right}


.tabela-jobs {font-family: 'GraphicWebMedium', sans-serif; font-size: 22px; line-height: 25px; letter-spacing: 0px; margin-left: 0px; color: #fff;}
.tabela-title {vertical-align: center; white-space: nowrap;}
.tabela-tr {border-bottom: 1px solid #fff; width: auto; }
.tabela-tr-2b {border-bottom: 3px solid #fff; }
.tabela-tr td { white-space: nowrap; line-break: normal;}
.tabela-top {border-top: 1px solid #fff 0.5;} 



.seta_voltar {background: url('../img/assets/arrow-left-r.svg') no-repeat left; padding-left: 33px; padding: 8px 0 5px 35px;}
.seta_voltar:link , .seta_voltar:visited , .seta_voltar:active {color: #ffffff; font-family: 'GraphicWebMedium'; font-size: 18px; text-decoration: none;}
.seta_voltar:hover , .seta_voltar:visited:hover {color: #ffffff; font-family: 'GraphicWebMedium'; font-size: 18px; text-decoration: underline;}


.breadcrumb {font-family: 'GraphicWebMedium', sans-serif; font-size: 16px; line-height: 16px; letter-spacing: 0px; margin-left: 0px; color: #fff; opacity: 1;}



/* General styling of the page. */
/* Sets a background color, font-size etc. */

  

  
  
  /* Style the rainbow text element. */
  .rainbow-text {
    padding-right: 20px;
    /* Create a conic gradient. */
    /* Double percentages to avoid blur (#000 10%, #fff 10%, #fff 20%, ...). */
    background: #CA4246;
    background-color: #CA4246;
    background: conic-gradient(
      #e8a09f 16.666%, 
      #bfabc9 16.666%, 
      #a0b4ed 33.333%, 
      #8fbdfe 33.333%, 
      #9aced9 50%, 
      #a4deb7 50%, 
      #8B9862 66.666%, 
      #dfe686 66.666%, 
      #f5e779 83.333%, 
      #f9e776 83.333%);
    
    /* Set the background-size and repeat properties. */
    background-size: 57%;
    background-repeat: repeat;
    
    /* Use the text as a mask for the background. */
    /* This will show the gradient as a text colour rather than element bg. */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; 
    
    /* Animate the text when loading the element. */
    /* This animates it on page load and when hovering out. */
    animation: rainbow-text-animation-rev 0.5s ease forwards;
  
    cursor: pointer;
  }
  
  /* Add animation on hover. */
  .rainbow-text:hover {
    animation: rainbow-text-animation 0.5s ease forwards;
  }
  
  /* Move the background and make it larger. */
  /* Animation shown when hovering over the text. */
  @keyframes rainbow-text-animation {
    0% {
      background-size: 57%;
      background-position: 0 0;
    }
    20% {
      background-size: 57%;
      background-position: 0 1em;
    }
    100% {
      background-size: 300%;
      background-position: -9em 1em;
    }
  }
  
  /* Move the background and make it smaller. */
  /* Animation shown when entering the page and after the hover animation. */
  @keyframes rainbow-text-animation-rev {
    0% {
      background-size: 300%;
      background-position: -9em 1em;
    }
    20% {
      background-size: 57%;
      background-position: 0 1em;
    }
    100% {
      background-size: 57%;
      background-position: 0 0;
    }
  }