h1, h2 {
    display: none;
}

h3, h4 {
    margin: auto;
}

h3 {
    max-width: var(--breakpoint-lg);
    font-size: 3em;
    font-weight: 100;
    padding: 0.2em 0.5em 0.5em;
}

h4 {
    max-width: 720px;
    font-size: 1.5em;
    font-weight: 300;
    padding: 0.2em 0.5em 1em;
}



.copy-wrapper {
    padding: 25px 0 50px;
}

.copy-content {
    max-width: var(--breakpoint-md);
    margin: auto;
}



.search-box {
    background-color: #FFFFFFAA;
    box-shadow: 0 0 20px -15px var(--foreground-color);
    border-radius: 100vw;
    padding: 20px;
}


.search-box .tool-icon,
.search-box .magnifier {
    width: 27px;
    height: 27px;
}

.search-box .magnifier {
    width: 22px;
}

.search-box .tool-icon {
    background-image: url('/public/icon/tool.svg');
}
.search-box .magnifier {
    background-image: url('/public/icon/magnifier.svg');
}

.search-box .search-text {
    font-size: 1.5em;
    text-align: left;
    padding: 0 0.75em;
}
.search-box .search-text.hidden {
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
}

.search-box p {
    line-height: 1.2;
}


#copy3-search:after {
    content: '';
    display: inline-block;
    background-color: var(--color1);
    width: 2px;
    height: 1.2em;
    vertical-align: bottom;
    margin: 0 0.1em;
    -webkit-animation: pulse 1s infinite;
    -moz-animation: pulse 1s infinite;
    -o-animation: pulse 1s infinite;
    -moz-animation: pulse 1s infinite;
    animation: pulse 1s infinite;
}


.search-icons {
    font-size: 0;
    text-align: left;
    padding: 1rem 2rem;
}

.search-icons i {
    display: inline-block;
    background-color: var(--color2);
    border-radius: 50%;
    font-size: 1rem;
    height: 2em;
    width: 2em;
    padding: 0.5em;
    margin: 0.25em;
}



#copy3-count {
    text-align: left;
    font-size: 0.75em;
    padding: 0 2.5rem;
}


#copy3-results .result {
    background-color: var(--input-background);
    border-radius: 5px;
    text-align: left;
    padding: 1em;
    margin: 1em;
    display: none;
}


#copy3-results .result .title {
    padding-bottom: 0.5em;
    font-weight: 500;
    font-size: 1.2em;
    line-height: 1.2;
    opacity: 0.9;
}

#copy3-results .result .text {
    line-height: 1.2;
    padding: 0.5em 0 0.1em;
}


#copy3-results .result.hidden {
    -webkit-transform: translateX(-10%);
    -moz-transform: translateX(-10%);
    -o-transform: translateX(-10%);
    -ms-transform: translateX(-10%);
    transform: translateX(-10%);
    opacity: 0;
    visibility: hidden;
}


#copy3-results .results {
    padding: 10px 0;
}


#copy3-results .suggestions li {
    display: inline-flex;
    text-align: left;
    background-color: var(--color2);
    border-radius: 100vw;
    width: calc((100% / 2) - 0.5em);
    padding: 0 1em;
    margin: 0.25em;
}
#copy3-results .suggestions li:hover {
    background-color: var(--input-background);
}

#copy3-results .suggestions li.hidden {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
}


#copy3-results .suggestions li:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)):not(:nth-child(4)) {
    display: none;
}


#copy3-results .suggestions p {
    padding: 1em 0;
    padding-right: 0.25em;
    flex: 1;
}

#copy3-results .suggestions i {
    margin: auto;
}


#copy3-count p {
    max-width: 100%;
    height: 1em;
    margin-bottom: -1em;
}

#copy3-count .loading2 {
    min-width: 5em;
    max-width: 5em;
    opacity: 0;
    visibility: hidden;
}


#copy3-count.typing p {
    max-width: 0;
}

#copy3-count.loading .loading2 {
    opacity: 1;
    visibility: visible;
}


#copy3-results .partners {
    background-color: #FFFFFF;
    border-radius: 5px;
    margin-top: 10px;
}

#copy3-results .partners li {
    display: inline-block;
    width: calc(100% / 10);
    height: 5em;
}

#copy3-results .partners li:nth-of-type(1) {
    background-image: url('/public/image/portfolio/rubisgas.jpg');
}
#copy3-results .partners li:nth-of-type(2) {
    background-image: url('/public/image/portfolio/fitmax.jpg');
}
#copy3-results .partners li:nth-of-type(3) {
    background-image: url('/public/image/portfolio/ruiveloso.jpg');
}
#copy3-results .partners li:nth-of-type(4) {
    background-image: url('/public/image/portfolio/netsonda.jpg');
}
#copy3-results .partners li:nth-of-type(5) {
    background-image: url('/public/image/portfolio/blissvilamoura.jpg');
}
#copy3-results .partners li:nth-of-type(6) {
    background-image: url('/public/image/portfolio/dicasa.jpg');
}
#copy3-results .partners li:nth-of-type(7) {
    background-image: url('/public/image/portfolio/atelierfranciscotorres.jpg');
}
#copy3-results .partners li:nth-of-type(8) {
    background-image: url('/public/image/portfolio/radioorbital.jpg');
}
#copy3-results .partners li:nth-of-type(9) {
    background-image: url('/public/image/portfolio/ontheroad.jpg');
}
#copy3-results .partners li:nth-of-type(10) {
    background-image: url('/public/image/portfolio/ctsassoeiros.jpg');
}



.services li {
    display: inline-block;
    background-color: var(--color3);
    width: calc(100% / 2 - 1em);
    margin: 0.5em;
    padding: 1em;
    border-radius: 10px;
    box-shadow: 0 0 15px -10px var(--box-bg);
    transition-duration: 0.5s;
}


.services li.hidden {
    opacity: 0;
    visibility: hidden;
}

.services li.hidden:nth-of-type(odd) {
    -webkit-transform: translateX(-50%) scale(1.5);
    -moz-transform: translateX(-50%) scale(1.5);
    -o-transform: translateX(-50%) scale(1.5);
    -ms-transform: translateX(-50%) scale(1.5);
    transform: translateX(-50%) scale(1.5);
}
.services li.hidden:nth-of-type(even) {
    -webkit-transform: translateX(50%) scale(1.5);
    -moz-transform: translateX(50%) scale(1.5);
    -o-transform: translateX(50%) scale(1.5);
    -ms-transform: translateX(50%) scale(1.5);
    transform: translateX(50%) scale(1.5);
}



.not-google {
    background-color: var(--color1);
    color: var(--background-color);
    font-size: 14px;
    padding: 0.5em 1em;
    border-radius: 100vw;
    -webkit-transform: rotate(-3deg);
    -moz-transform: rotate(-3deg);
    -o-transform: rotate(-3deg);
    -ms-transform: rotate(-3deg);
    transform: rotate(-3deg);
    float: left;
    margin: 25px -100% 0 10px;
    white-space: nowrap;
    transform-origin: left;
}

.not-google.hidden {
    -webkit-transform: rotate(5deg) translate(-20%, -30%);
    -moz-transform: rotate(5deg) translate(-20%, -30%);
    -o-transform: rotate(5deg) translate(-20%, -30%);
    -ms-transform: rotate(5deg) translate(-20%, -30%);
    transform: rotate(5deg) translate(-20%, -30%);
    opacity: 0;
    visibility: hidden;
}


.not-google i {
    margin-left: 0.5em;
    height: 1.2em;
    width: 1.2em;
    vertical-align: bottom;
}

.not-google i path {
    fill: var(--background-color);
}



.click-me {
    float: left;
    margin: -1em;
    pointer-events: none;
    -webkit-transform: translate(2.5em, 0.5em) rotate(160deg);
    -moz-transform: translate(2.5em, 0.5em) rotate(160deg);
    -o-transform: translate(2.5em, 0.5em) rotate(160deg);
    -ms-transform: translate(2.5em, 0.5em) rotate(160deg);
    transform: translate(2.5em, 0.5em) rotate(160deg);
}

.click-me i {
    -webkit-animation: clickme 1s linear infinite;
    -moz-animation: clickme 1s linear infinite;
    -o-animation: clickme 1s linear infinite;
    -ms-animation: clickme 1s linear infinite;
    animation: clickme 1s linear infinite;
    animation-timing-function: ease-in-out;
}

.click-me path {
    fill: var(--color1);
}


.click-me.hidden > div {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    opacity: 0;
    visibility: hidden;
}



body.flash {
    overflow: hidden;
}

body.flash section.flash {
    opacity: 1;
    visibility: visible;
}

body.flash section.flash .box-wrapper {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
}


section.flash {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    display: flex;
    background-color: var(--text-shadow);
    z-index: 2;
    opacity: 0;
    visibility: hidden;
}


section.flash .box-wrapper {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    margin: auto;
}

section.flash .box-content {
    width: 1000px;
    max-width: 90vw;
    max-height: 90vh;
    background: var(--light);
    border-radius: 10px;
    box-shadow: 0 3px 10px var(--text-shadow);
}


section.flash h3 {
    font-size: 2em;
    font-weight: bold;
    color: var(--color1);
    padding-bottom: 0.5em;
}

section.flash h3 b {
    display: block;
    font-weight: 900;
    color: var(--color8);
}


section.flash .close-flash.btn-small {
    background-color: transparent;
    color: var(--color1);
    border: none;
    font-weight: 400;
    width: 3.5em;
    height: 3.5em;
    line-height: 0;
    border-radius: 50%;
    margin: -1em -1em -3em 0;
    float: right;
}

section.flash .close-flash.btn-small:hover {
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
    color: #000000;
    opacity: 1;
}

section.flash .close-flash.btn-big {
    border: none;
    background-color: transparent;
    box-shadow: none;
    font-weight: 400;
    font-size: 0.9em;
}
section.flash .close-flash.btn-big:hover {
    background-color: transparent;
    color: var(--color1);
    text-decoration: underline;
}

section.flash .img-left img {
    max-height: 100vh;
    max-width: 100%;
    margin-top: -1em;
    pointer-events: none;
}

section.flash .text-right {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(90vh - 2em);
    padding: 1em;
    padding-top: 0;
    margin-top: 2em;
}

section.flash .title {
    font-size: 2em;
    font-weight: 300;
    padding: 0.2em;
}

section.flash .text {
    font-size: 1.5em;
    font-weight: 400;
    padding: 0.5em;
}

section.flash .btn {
    font-weight: 500;
    padding: 0.5em 1em;
    margin: 0.2em;
    background-color: var(--color3);
    border: none;
    box-shadow: 0 0 20px -12px var(--color1);
    color: var(--color1);
}
section.flash .btn:hover {
    background-color: var(--color1);
    color: var(--background-color);
}

section.flash .btn path {
    fill: var(--color1);
}
section.flash .btn:hover path {
    fill: var(--background-color);
}

section.flash .img-left {
    max-width: 300px;
    padding-left: 1em;
}

section.flash .buttons {
    padding: 0.5em;
    text-align: center;
}




@media only screen and (max-width: 820px) {

    .copy-content {
        padding: 0 2.5%
    }

}



@media only screen and (max-width: 720px) {

    #copy3-results .partners li {
        width: calc(100% / 5);
        height: 10vw;
    }

    .fixed-panel {
        height: unset;
        font-size: 0.75em;
    }

    .fixed-panel .content {
        display: block;
        padding: 1em 0;
    }

    .fixed-panel .content > div {
        padding: 0.5em;
    }

    section.flash .display-flex {
        display: block;
    }

    section.flash .img-left img {
        height: 100px;
        margin: 1em 0 -1.5em;
    }

    section.flash .buttons {
        padding: 0;
        padding-top: 1em;
    }

    section.flash .btn {
        display: block;
        width: 100%;
        margin: 0.5em 0;
        padding: 0.5em 0;
        white-space: nowrap;
    }

    section.flash .text-right {
        padding-bottom: 0;
    }

}



@media only screen and (max-width: 600px) {

    .services li {
        width: calc(100% - 1em);
    }

    #copy3-results .result {
        margin: 1em 0;
    }

    #copy3-results .suggestions li {
        width: calc(100% - 0.5em);
    }

}




@media only screen and (max-width: 450px) {

    body {
        font-size: 14px;
    }

    section.flash .buttons {
        font-size: 1.2em;
    }

}



@media only screen and (max-width: 350px) {

    #copy3-results .partners li {
        width: calc(100% / 2);
        height: 20vw;
    }

}



@keyframes pulse {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 0.75;
	}
}



@keyframes clickme {
    50% {
        -webkit-transform: translate(0, 10px);
        -moz-transform: translate(0, 10px);
        -o-transform: translate(0, 10px);
        -ms-transform: translate(0, 10px);
        transform: translate(0, 10px);
    }
}