* { margin: 0; padding: 0; } body { font-family: "calibri" !important; width: 100%; overflow-x: hidden; } section { text-align: justify; } section ul { padding: 10px 15px; } section li { font-family: "calibri"; font-size: 20px; margin: 15px 10px; color: #38545f; font-weight: 300; width: 83%; } section .row { } /* Slider */ .main .main__hero { background-image: url('./images_oferta/slider.png'); background-position: center; background-size: cover; width: 100%; min-height: 780px; text-align: center; overflow: hidden; position: relative; z-index: 99; } .main .main__hero h2 { color: #fff; font-size: 50px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding-top: 130px; } .main .main__hero p { padding-top: 25px; margin: 0 auto; font-size: 20px; font-weight: 100; color: #fff; max-width: 630px; font-family: "calibri"; } .main__hero__menu { position: relative; bottom: -140px; left: 50%; transform: translateX(-50%); text-align: center; max-width: 400px; } .dashed { position: absolute; left: 50%; transform: translateX(-50%); top: -70px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: 1s; } .narrow { margin-bottom: -60px; -webkit-transform-origin: 50% 50%; -moz-transform-origin: 50% 50%; -o-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: 1s; } .icon-main { position: absolute; left: 50%; transform: translateX(-50%); bottom: 20px; } .icon { position: absolute; top: 0; background-color: #ebebeb; border: 2px solid #ebebeb; border-radius: 50%; padding: 20px 20px; transition: .5s; } .icon:hover { background-color: #52ad45; } .icon:hover .icon__tooltip p { font-weight: 900; } .icon img { transition: .5s; } .icon:hover img { transform: scale(0.95); } .icon .icon__tooltip { position: absolute; } .icon .icon__tooltip p { font-weight: 400; font-size: 24px; color: #fff; text-transform: uppercase; transition: .5s; } .agency .icon__tooltip p{width: 145px;} .agency .icon__tooltip { left: -167px; top: 15px; } .ecommerce .icon__tooltip { left: -142px; top: 10px; } .publisher .icon__tooltip { right: -120px; top: 10px; } .clients .icon__tooltip { right: -188px; top: 5px; } @media(max-width:1100px){ .clients .icon__tooltip {right: -128px; top: -56px;} .agency .icon__tooltip {left: -113px; top: -56px;} } .agency { left: -145px; top: 120px; } .ecommerce { left: -55px; top: -75px; } .publisher { right: -55px; top: -75px; } .clients { top: 120px; right: -154px; } #mailing, #display, #influencer, #seo, #ads, #social { width: 100%; max-width: 1400px; min-height: 500px; border-bottom: 1px solid rgba(56, 84, 95, 0.251); padding-right: 70px; } #studio { border-bottom: none; } .right-text h1 { font-family: "calibri"; color: rgb(56, 84, 95); line-height: 0.503; padding: 1% 0 2% 0; font-weight: 100 !important; } .right-text p { font-size: 16px; font-family: "calibri"; color: rgb(56, 84, 95); line-height: 1.563; font-weight: 400 !important; } .right-text-table-list div p { margin: 0; margin-bottom: 5px; padding-right: 0; line-height: 20px; } .loga-img span { padding: 40px; background-color: #ebebeb; border-radius: 100px; width: 170px; height: 170px; display: block; margin: 0 auto; } .loga-img a { padding: 12px 0; text-align: center; text-decoration: none; color: #fff; background-color: #5fc14d; border-radius: 50px; font-size: 15px; line-height: 1; display: block; width: 58%; margin: 30px auto 0; } .loga-img a:hover { background-color: rgba(82, 168, 67, 1.2); } .loga-img span img{ width: 90%; margin: 0 auto; display: block; } .right-icon-bar { position: relative; } .icon-bar { position: fixed; top: 30%; right: 0; z-index: 1; } .icon-bar a { display: flex; padding: 10px 10px; margin: 10px 5px 10px 0; background-color: #ebebeb; border-radius: 50px; } .edit_offer h1{font-size: 35px; font-weight: 300; color: #38545f; margin-bottom: 30px;} .edit_offer p{font-size: 20px; font-weight: 300; color: #38545f; padding-right: 18%; line-height: 25px;} .loga-img{padding-top: 25px;} /*.icon-bar a:hover, .icon-bar a:active { background-color: #5fc14d; }*/ .icon-bar a img { margin: auto; max-width: 30px; max-height: 30px; } .check_img { padding: 0 5px 0 0; } .right-text-table-list div p img.check_img { width: 14px; height: auto; } .logo_table { padding: 10px 0 25px 0; width: 90%; } @media all and (max-width: 1024px) { .header__nav { display: none !important; } header img { display: block; margin: 0 auto; float: none !important; } .dashed, .narrow, .icon-main { display: none; } .agency, .ecommerce { left: 0; } .publisher, .clients { right: 0; } .main .main__hero h2 { padding-top: 36px; } .icon .icon__tooltip { left: -30px; right: -30px; top: auto; bottom: -39px; } .agency .icon__tooltip{bottom: -68px;} } #mailing .row, #display .row, #influencer .row, #seo .row, #ads .row, #social .row { padding-top: 3%; padding-bottom: 3%; } .right-text h1, .right-text p { width: 90%; } .right-text-table-list div p { width: 100%; } @media(max-width: 1199px){ .logo_table {padding: 25px 0 10px 0;} #mailing .row, #display .row, #influencer .row, #seo .row, #ads .row, #social .row {padding-top: 0;} .right-icon-bar{padding-top: 50px;} } @media all and (max-width: 1024px) { .right-text p { width: 100%; text-align: justify; } .right-text-table-list { flex-wrap: wrap; } } @media(max-width: 991px){ .loga-img a {width: 30%} .loga-img {margin-top: 10px;} } @media only screen and (max-width: 767px) { .icon-bar { display: none; position: relative; } .loga-img a { margin-top: 40px; } .main .main__hero { padding: 0 0 550px 0 !important; } #mailing, #display, #influencer, #seo, #ads, #social {padding-right: 15px;} } @media(max-width: 600px){ .loga-img a {width: 60%} } .ind{z-index: 11; position: relative;} .slider {background: no-repeat center/cover; text-align: center; color: #fff; height: 770px; z-index: 10; position: relative; margin-top: 50px; } .slider-title {font-size: 50px; line-height: 50px; font-weight: normal; padding-top: 126px; padding-bottom: 10px; margin-top: 0;} .slider-text {font-size: 20px; margin: 0px 33%; font-weight: 300; line-height: 24px;} .icons {height: 100%; position: relative; display: block; width: 920px; margin: 0 auto;} .icons-center, .icons-arrow, .icons-circle, .icons-first, .icons-second, .icons-third, .icons-fourth, .icons-fifth, .icons-sixth {position: absolute;} .icons-arrow {bottom: 201px; left: 30%; background: no-repeat, center/cover; width: 381px; height: 381px;} .icons-circle {bottom: 159px; left: 21%; background: no-repeat, center/cover; width: 553px; height: 515px;} .icons-center {bottom: 266px; left: 37%; padding: 92px; background-color: #52ad45; border: 6px solid #fff; border-radius: 50%;} .icons-center img {width: 66px; height: 66px;} .icons-item {border-radius: 50%; background-color: #ebebeb; border: 2px solid #fff; -webkit-transition: 0.8s; transition: 0.8s;} .icons-icon {width: 120px; height: 120px; padding: 24px 27px;} .icons-sixth {bottom: 376px; left: 76%;} .icons-fifth {bottom: 520px; left: 66%;} .icons-fourth {bottom: 610px; left: 50%;} .icons-third {bottom: 575px; left: 30%; } .icons-second { bottom: 450px; left: 18%;} .icons-first {bottom: 295px; left: 13%;} .icons-arrow { transform: rotate(-33deg); -webkit-transition: 1s; transition: 1s;} .icons-circle {-webkit-transition: 1.5s; transition: 1.5s;} .icons-center {-webkit-transition: 1.5s; transition: 1.5s;} .icons-text {position: absolute; font-size: 25px; color: #f7f5f5; text-transform: uppercase; font-weight: 300;} .icons-text-first {top: 365px; left: 2%; width: 150px;} .icons-text-second {top: 220px; left: 9%;} .icons-text-third {top: 90px; left: 20%} .icons-text-fourth {top: 50px; left: 64%;} .icons-text-fifth {top: 135px; left: 80%;} .icons-text-sixth {top: 245px; left: 89%;} .icon1:hover .icons-text-first {font-weight: 400;} .icon1:hover .icons-first {background-color: #52ad45;} .icon2:hover .icons-text-second {font-weight: 400;} .icon2:hover .icons-second {background-color: #52ad45;} .icon3:hover .icons-text-third {font-weight: 400;} .icon3:hover .icons-third {background-color: #52ad45;} .icon4:hover .icons-text-fourth {font-weight: 400;} .icon4:hover .icons-fourth {background-color: #52ad45;} .icon5:hover .icons-text-fifth {font-weight: 400;} .icon5:hover .icons-fifth {background-color: #52ad45;} .icon6:hover .icons-text-sixth {font-weight: 400;} .icon6:hover .icons-sixth {background-color: #52ad45;} @media (max-width: 1199px){ .slider-text {margin: 0 25%;} } @media (max-width: 991px){ .icons {width: 750px} .icons-text-first {top: 321px; left: -6%} .icons-text-second {top: 200px; left: 2%;} .icons-text-third {top: 88px; left: 12%} .icons-text-fourth {top: 34px; left: 58.5%; width: 130px;} .icons-text-fifth {top: 105px; left: 79%;} .icons-text-sixth {top: 210px; left: 88%;} .icons-fourth {bottom: 595px; left: 46%;} .icons-third {bottom: 567px; left: 24%; } .icons-second { bottom: 437px; left: 11%;} .icons-first {bottom: 295px; left: 5%;} .icons-center {bottom: 266px; left: 32%;} .icons-arrow {bottom: 201px;; left: 25%;} .icons-circle {bottom: 153px;; left: 13.5%;} } @media (max-width: 767px){ .icons-arrow {display: none;} .icons-circle {display: none;} .icons-center {background-color: transparent; border: none; bottom: 425px; left: 32%;} .icons-text-first {top: 230px; left: 6%;} .icons-text-second {top: 37px; left: 11.5%;} .icons-text-third {top: 18px; left: 43%;} .icons-text-fourth {top: 13px; left: 72%} .icons-text-fifth {top: 205px; left: 71%;} .icons-text-sixth {top: 255px; left: 40%;} .icons-sixth {bottom: 325px; left: 40%;} .icons-fifth {bottom: 375px; left: 72%;} .icons-fourth {bottom: 567px; left: 72%; } .icons-third {bottom: 590px; left: 40%;} .icons-second {bottom: 567px; left: 8%;} .icons-first {bottom: 375px; left: 8%;} .icons {width: 100%;} .slider-text {margin: 0 15%; padding-bottom: 25px;} .toggle-menu{display: block; position: absolute; right: 90px; top: 23px; text-transform: uppercase; background-color: #52ae45; border-radius: 16px; color: #fff; padding: 11px 46px 11px 11px;} .main-header{position: relative;} .logo_table {width: 30%;} .right-text-table-list div p{text-align: center;} .edit_offer p{padding-right: 0;} } @media (max-width: 499px){ .icons-center {left: 27%;} .slider-text {margin: 0 5%;} .logo_table {width: 50%;} } @media (max-width: 450px){ .icons-icon {width: 90px; height: 90px; padding: 14px 14px;} .icons-text {font-size: 18px;} .icons-text-first {top: 205px; left: -3%;} .icons-text-second {top: 65px; left: 8.5%;} .icons-text-third {top: 15px; left: 42.5%;} .icons-text-fourth {top: 65px; left: 66.5%} .icons-text-fifth {top: 188px; left: 70%;} .icons-text-sixth {top: 262px; left: 39%;} .icons-sixth {bottom: 360px; left: 38%;} .icons-fifth {bottom: 440px; left: 71%;} .icons-fourth {bottom: 580px; left: 71%;} .icons-third {bottom: 630px; left: 38%;} .icons-second { bottom: 580px; left: 5%;} .icons-first {bottom: 440px; left: 5%;} .icons-center {left: 43%; bottom: 550px; padding: 0;} .language li.active { margin-top: 10px;} .slider-title{padding-top: 46px;} .logo_table {width: 60%;} } section:not(.slider) { padding-top: 5%; } .footer .link { transition: all .4s; } .footer .link:hover { color: #52ae45; } .footer li { font-size: 14px; } /*CONTACT*/ .contact { padding-bottom: 160px; } .contact .wave-top { bottom: 99%; } .contact .wave-bottom { top: 99.5%; } .contact h4 { color: #38545f; font-size: 35px; text-align: center; font-weight: 300; margin-top: 70px; } .address, .address a, .address a:hover { color: #183651; } .address { padding-left: 25%; padding-top: 60px; } .address h3 { font-size: 25px; line-height: 35px; letter-spacing: -1px; } .address p { font-size: 20px; line-height: 20px; font-weight: 300; } .address a { font-size: 20px; line-height: 28px; font-weight: 400; } .tel { margin-top: 30px; } .address a img { margin-right: 18px; } .address a { display: block; } .numbers { font-size: 16px; line-height: 28px; font-weight: 300; margin-top: 32px; } .contact_form { padding-top: 50px; } .contact_form input, .contact_form textarea { width: 100%; margin: 5px auto; padding: 7px; border: 1px solid #38545f; border-radius: 4px; background-color: #f7f7f7; font-size: 20px; font-weight: 300; color: #183651; } .contact_form textarea { height: 176px; } .contact input[type="checkbox"] { width: 5%; display: inline-block; vertical-align: top; } .contact input#select-all { width: 12%; } .contact label { max-width: 93%; font-weight: 400; font-size: 12px; line-height: 13px; margin-bottom: 1px; } input[type="submit"] { padding: 10px; font-size: 12px; color: #fff; background-color: #5fc14d; border-radius: 20px; width: 68%; float: right; border: 1px solid #5fc14d; } .agree-all { margin-top: 7px; } .agree-all label span { font-size: 16px; line-height: 20px; } .checkboxes { margin-top: 30px; } /*END CONTACT*/