/*
Theme Name: Rio+ Esporte
Author: the WordPress team
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
*/

:root {
    --amarelo: #ffb11b;
    --vermelho: #bd2025;
    --verde-agua: #07b5aa;
    --light-grey: #747474
}

::-moz-selection {
    color: var(--verde);
    background: var(--verde-escuro)
}

::selection {
    color: var(--verde);
    background: var(--verde-escuro)
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: auto;
    line-height: 18px;
    font-size: 14px;
    background: #1f1f1f;
    color: white;
}

.arrow-right a:after {content:''; display:inline-block;width:10px;height:10px; margin-left:4px; background-image: url('data:image/svg+xml;utf8,<svg fill="%23000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.77,23.58l-2.24-2a0.5,0.5,0,0,1,0-.71L13.43,12,5.5,3.13a0.5,0.5,0,0,1,0-.71l2.24-2a0.5,0.5,0,0,1,.71,0L18.8,12,8.48,23.54A0.5,0.5,0,0,1,7.77,23.58Z"></path></svg>');
  background-repeat: no-repeat;
  background-size: contain;}

.arrow-right a:hover:after {background-image: url('data:image/svg+xml;utf8,<svg fill="%23ffb11b" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.77,23.58l-2.24-2a0.5,0.5,0,0,1,0-.71L13.43,12,5.5,3.13a0.5,0.5,0,0,1,0-.71l2.24-2a0.5,0.5,0,0,1,.71,0L18.8,12,8.48,23.54A0.5,0.5,0,0,1,7.77,23.58Z"></path></svg>');;}

#top {background:white;border-bottom:4px solid var(--amarelo);padding:10px 0px;}
#top .logo {display:none !important;}
#top .wp-block-column {display:flex;}
#top .wp-block-column:last-child {justify-content:right;gap:1em}
#top ul {margin:0px;}
#top .wp-block-navigation__container {gap:3em}
#top .wp-block-navigation__container a {color: white;display:flex;transition:.1s}
#top .wp-block-navigation__container a:hover {font-weight:800;}
#top .wp-block-social-links .wp-social-link {background:none;}
#top .wp-block-social-links .wp-social-link a {padding:0px;color:white}
#top .wp-block-social-links .wp-social-link svg {fill:var(--amarelo)}
#top .wp-block-button__link {padding:6px 18px;line-height:14px;background:var(--amarelo);font-size:14px;transition:.1s;color:black}
#top .wp-block-button__link:hover {background:black;color:var(--amarelo)}

#top .wp-block-columns {
    width:90%;
    max-width:960px;
    margin:auto;
    background:none !important;
}

#topo .wp-block-cover {
    min-height:550px
}

#topo .wp-block-cover__inner-container {width:90%;max-width:1100px}

#topo .wp-block-cover .wp-block-cover__image-background {
    width:auto;
    height:550px;
    background-position:center top !important;
    background-size:100%;
}

#topo .dots {
    width:auto;
    display:inline-block;
    font-size:24px;
    line-height:32px;
    font-weight:900;
    font-style:italic;
    border-radius:30px 0px 30px 30px;
    position:relative;
    padding:30px;
    margin:50px 0px 0px
}

#topo .dots:before {
    content:'';
    position:absolute;
    width:192px;
    height:98px;
    background:url('images/dots.png') no-repeat center;
    background-size:contain;
    top:-35px;
    left:50%;
    transform:translateX(-50%);
}

#topo .dots li {display:block;transition:.1s;cursor: default;position:relative}
#topo .dots li:hover {color:var(--verde-escuro)}

#topo .wp-block-cover .wp-block-column {
    justify-content: right;
    align-items: end;
    display: flex;
    flex-direction: column;
}

.segundo {margin:0px 90px 0px 50px;}
.segundo p {background:none !important;position:relative;padding:10px 0px 20px;margin:0px;}

#sobre {background: url(https://riomototrend.com.br/wp-content/uploads/2025/01/sobre-bg.png) no-repeat top center;height:562px;margin:-70px 0px;position:relative;display:flex;align-items:center;justify-content:center}
#sobre figure {background:url(http://riomototrend.com.br/wp-content/uploads/2025/01/sobre-bg2.png) no-repeat top center;position:absolute;top:0px;bottom:0px;left:0px;right:0px;height:562px;z-index:1}

#sobre .wp-block-media-text__content {
    border-radius:20px;
    box-shadow:0px 0px 15px rgb(0 0 0 / 18%);
    background: url(http://riomototrend.com.br/wp-content/uploads/2025/01/sobre-1.png) top right no-repeat, url(http://riomototrend.com.br/wp-content/uploads/2025/01/sobre-2.png) no-repeat bottom left, #f4f4f4;
    max-width:655px;
    padding:20px 55px 40px 30px;
    font-size:16px;
    line-height:22px;
    min-width:660px;
    position:relative;
    align-self:auto;
    margin-left:300px;
    color:black;
}

#ativacoes {background:url(http://riomototrend.com.br/wp-content/uploads/2025/01/atividades-bg.jpg) no-repeat center  #000;justify-content:center;font-family:"TechnoRace", sans-serif;font-size:24px;line-height:24px;}
#ativacoes h2 {text-transform:uppercase;letter-spacing:2px;font-size:40px;line-height:40px;}
#ativacoes .wp-block-column {max-width:1000px;width: 90%;padding:150px 0px}
#ativacoes li {display:block;margin-bottom:20px;background: url('data:image/svg+xml;utf8,<svg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.77,23.58l-2.24-2a0.5,0.5,0,0,1,0-.71L13.43,12,5.5,3.13a0.5,0.5,0,0,1,0-.71l2.24-2a0.5,0.5,0,0,1,.71,0L18.8,12,8.48,23.54A0.5,0.5,0,0,1,7.77,23.58Z"></path></svg>') left 4px;
  background-repeat: no-repeat;
  background-size: 12px;padding-left:20px}
#ativacoes ul {padding:0px;margin:0px}
#ativacoes li:hover {display:block;margin-bottom:20px;background: url('data:image/svg+xml;utf8,<svg fill="%23ffb11b" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.77,23.58l-2.24-2a0.5,0.5,0,0,1,0-.71L13.43,12,5.5,3.13a0.5,0.5,0,0,1,0-.71l2.24-2a0.5,0.5,0,0,1,.71,0L18.8,12,8.48,23.54A0.5,0.5,0,0,1,7.77,23.58Z"></path></svg>') left 4px;
  background-repeat: no-repeat;
  background-size: 12px;padding-left:20px}

#sobre .wp-block-button {
    bottom:0px;
    top:auto;
    left:50%;
    right:auto;
    width:auto;
    transform:translateY(50%) translateX(-50%);
}

#sobre .wp-block-button:before {background:url(images/bg-stripes2-g.png);transition:.1s;}
#sobre .wp-block-button__link {position:relative;background:none;color:var(--verde-escuro);font-style:italic;font-weight:900;padding:8px 50px;}
#sobre .wp-block-button:hover:before {transform:scale(1.1);}

#atividades {position:relative;overflow:hidden;background:url(http://riomototrend.com.br/wp-content/uploads/2025/01/atividades.png);margin:-100px 0px -100px;min-height:562px;padding-top:80px;font-family:"TechnoRace", sans-serif;z-index:9;background-size:cover}
#atividades .titulo {gap:0px;}
#atividades h1 {text-transform:uppercase;font-size:32px;line-height:32px;color:#000;margin:0px;text-align:center}
#atividades h2 {text-align:center; font-size:22px;line-height:22px;color:var(--vermelho);font-weight:normal;margin:0px 0px 30px;;}
#atividades:before {background:url('images/bg-g.webp');bottom:auto;bottom:0px;top:30px}
#atividades .atividade .wp-block-group__inner-container {position:relative; display:flex;flex-direction:column;gap:12px;}
#atividades .wp-block-columns {width:90%;max-width: 970px;margin:auto;align-items: stretch !important;!i;!;!i;!;!i;!;margin-bottom:3em;/* justify-content: stretch; */}
#atividades .wp-block-media-text {display:flex;gap:12px}
#atividades .atividade h2 {font-size:20px;line-height:20px;font-style:italic;font-weight:800;margin:0px;text-transform:uppercase;letter-spacing:.1px;margin:auto;}
#atividades .atividade .wp-block-media-text__content {padding:0px;flex:1}
#atividades .atividade {padding:20px;border-radius:12px;display:flex;width: 100%;justify-content: center;}
#atividades img {border-radius:50%;width:108px;z-index:1;}
#atividades figure {height:158px;width:158px;display:flex;align-items:center;justify-content:center;position:relative;}
#atividades figure:before {animation: rotate 20s linear infinite;content:"";position:absolute;background:url(http://riomototrend.com.br/wp-content/uploads/2025/01/moldura.png) center no-repeat;height:158px;width:158px;}

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
#atividades .wp-block-column {display:flex;justify-content: center;}
/* #atividades .wp-block-buttons {margin-top:auto;} */
#atividades .wp-block-button__link {background:var(--vermelho);text-transform:uppercase;border-radius:8px;padding:8px 16px;}
#atividades .wp-block-button__link:after {content:''; display:inline-block;width:12px;height:12px; margin-left:4px; background-image: url('data:image/svg+xml;utf8,<svg fill="%23fff" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M7.77,23.58l-2.24-2a0.5,0.5,0,0,1,0-.71L13.43,12,5.5,3.13a0.5,0.5,0,0,1,0-.71l2.24-2a0.5,0.5,0,0,1,.71,0L18.8,12,8.48,23.54A0.5,0.5,0,0,1,7.77,23.58Z"></path></svg>');
  background-repeat: no-repeat;
  background-size: contain;}
#atividades .wp-block-button__link:hover {transform:scale(1.1);transition:.3s;}
.wpp .wp-block-button__link {background: url(images/wpp.png) no-repeat 30px center #fff; background-size:32px; transition:.3s;padding-left:70px}
.wpp .wp-block-button__link:hover {background-color:var(--verde);color:var(--verde-escuro)!important;}

#patrocinio {background:white;color:#004a7f;font-size:20px;padding:40px 0px;gap:32px}

#contato {padding:0px;min-height:auto;padding: 0px 0px}
#contato .wp-block-media-text {display:flex;justify-content: right;position:relative;width:90%;max-width: 800px;margin:auto;align-items: stretch;}
#contaot .wp-block-cover__inner-container {position:relative;}
#contato .wp-block-media-text__media img {width: revert-layer;position:absolute;top:0;left:50%;transform:translateX(-50%);}
#contato .wp-block-media-text__media {position:relative;flex: 1;align-self: auto;}
#contato .wp-block-media-text__content {padding:230px 0px 100px;font-size:22px;font-style:italic;line-height:22px;color:var(--verde-escuro);min-width:50%;z-index:9;max-width:50%}
#contato .wp-block-social-links {margin:0px 0px 0px;font-style:normal;}
#contato .wp-block-social-links .wp-block-social-link.wp-social-link {background:var(--vermelho);color:var(--azul);padding:0px 12px;}
#contato .wp-block-social-links .wp-block-social-link.wp-social-link span {font-size:20px;line-height:20px;padding:0px;margin:0px 0px 0px 4px;}
#contato p {margin:0px 0px 8px;}

#rodape {padding:0px;min-height:auto;background:url(images/bg-dg.webp)}
#rodape .has-text-align-center {font-size:26px !important; line-height:26px;font-style:italic;margin:40px 0px}
#rodape .wp-social-link {background:none}
#rodape .wp-block-social-link-anchor {flex-direction:column;gap:12px;color:white;height:auto;}
#rodape .wp-block-cover__inner-container {max-width:1260px;position:relative;background:url(http://riomototrend.com.br/wp-content/uploads/2025/01/moto.png) no-repeat right 10px;padding:50px 0px 30px}
#rodape .wp-block-social-links {margin:0px}

#rodape .wp-block-cover__image-background {background: url(http://riomototrend.com.br/wp-content/uploads/2025/01/footer-top.png) top left no-repeat, 
    url(http://riomototrend.com.br/wp-content/uploads/2025/01/footer-bottom.png) bottom right no-repeat, url(https://riomototrend.com.br/wp-content/uploads/2025/01/footer.png) !important;}

#footer {background:white;display: block;margin: -1px 0px 0px;}
#footer .wp-block-group__inner-container {width:90%;max-width:960px;margin:auto;color:grey;font-size:12px;padding:8px 0px}
#footer a {color:grey;text-decoration:none}
#footer a:hover {color:var(--vermelho)}

@media(max-width:768px) {
    .segundo {margin:0px 5%;font-size:4.5vw;line-height:5vw}

    #sobre .wp-block-media-text__media {display:none;}
    #sobre .wp-block-media-text__content {min-width:auto;margin:0px;width:90%;}
    #sobre .wp-block-button {left:20px;transform:translateY(50%);right:20px}
    #sobre .wp-block-button__link {padding:8px 0px;width:100%;}
    #sobre {padding:100px 0px;height:auto;background-size:cover;margin-top:-100px;}
    #patrocinio {flex-direction:column;padding:20px 40px;gap:20px;}

    #contato .wp-block-media-text__content {padding:300px 5% 40px;background:linear-gradient(to top, var(--verde), transparent)}
    #contato .wp-block-media-text__content {text-align:center;font-size:28px;line-height:28px;max-width:none}
    #contato .wp-block-media-text__content p {margin:0px 0px 20px;}
    #contato .wp-block-media-text {width:100%;flex-direction:column;justify-content: stretch;align-items: start;}
    #contato .wp-block-buttons {justify-content:center}
    #contato .wp-block-button__link {padding:10px 20px 10px 44px}
    #contato .wp-block-media-text__media img {/* left:auto; *//* transform:none; */}
    #contato .wp-block-social-links {justify-content:center}
    #contato .wp-block-media-text__media {width:100%}

    #atividades .wp-block-columns {flex-direction:row;flex-wrap: nowrap !important;overflow: auto; padding-bottom:20px;margin-bottom:70px}
    #atividades .wp-block-column {min-width:200px}
    #atividades h1 {max-width:280px}

    #topo .wp-block-image {/* display:none; */}
    #topo .wp-block-cover {align-items:center;min-height:600px}
    #topo .wp-block-cover .wp-block-cover__image-background {
        width:auto;
        height:550px;
        background-position:65% 50% !important;
        background-size:cover;
        background-attachment:scroll;
    }


    #top .logo {display:block !important;}
    #top .logo figure {margin:0px}
    #top .logo img {width:200px !important}
    #top .right {display:none}
    #top .wp-block-columns:not(.is-not-stacked-on-mobile)>.wp-block-column {flex-basis:auto !important;flex-grow: unset !important;width:auto;}
    #top .wp-block-columns {flex-direction:row !important;flex-wrap:nowrap !important;justify-content:space-between !important;}

    #top nav svg {height:32px;width:32px}

    #top .wp-block-navigation__responsive-container {padding:0px 5%;background:#000000e6;font-size:22px;line-height:22px;align-items:center;justify-content:center}
    #top nav .wp-block-navigation__container {gap:20px}
    #top .wp-block-navigation__responsive-dialog {margin:0px}

    #top .wp-block-navigation__responsive-container.is-menu-open svg {display:block;fill:white}
    #top .wp-block-navigation__responsive-container.is-menu-open button {background:none;position:fixed;top:5vw;right:5%}

    #rodape .wp-block-cover__inner-container {padding: 100px 5vw 500px;background-position:center bottom;}
    #rodape {margin:-1px 0px;}
    #rodape img {width:200px !important}

    #footer .wp-block-group {flex-direction:column;}

    #ativacoes .wp-block-column {max-width:90%;}
}