/*---------------------------------------------------- {--------} GERAL {--------} ----------------------------------------------------*/ * { margin:0; padding:0; border:0; outline:0; } a { text-decoration:none; color:#666;} ul li { list-style:none;} html { overflow: -moz-scrollbars-vertical; height:100%; scroll-behavior: smooth;} .global { overflow:hidden; width:100%; height:auto; display:inline-block; margin-top:-20px;} .container-info { width:1300px; height:auto; margin:0 auto;} .container-flex { width:90%; height:auto; margin:0 5%; display:inline-block; } .mb8 { margin-bottom:8px !important;} .bn { background:none !important;} .bt { border:1px solid red;} .cb { clear:both !important;} .cd { cursor:default !important;} .cp { cursor:pointer !important;} .db { display:block;} .dn { display:none;} .bn { border:none !important; } .fl { float:left !important; } .fr { float:right !important; } .m0 { margin:0 !important; } .mr0 { margin-right:0 !important; } .mr5 { margin-right:5px !important; } .mr10 { margin-right:10px !important; } .mt0 { margin-top:0 !important; } .pr { position:relative !important;} .tal { text-align:left !important;} p { font-family: 'SayaSemiSansFY-Light', cursive; font-size:16px; line-height:26px; color:#000000;} .p18 { font-size:18px !important; } .p28 { font-size:28px !important; } .tt { text-transform:uppercase !important; } button { font-family: 'Intro-Regular', cursive; font-size:16px; line-height:18px; padding:24px 42px; border-radius:5px; cursor:pointer; } input { width:90%; padding:10px 5%; height:45px; color:#b3bbce; background-color:#ffffff; margin-bottom:40px; margin-top:5px; border-radius:5px; font-family: 'SayaSemiSansFY-Medium', cursive; font-size:16px; } input:focus, textarea:focus { border:1px solid #b3bbce; color:#273E74; } textarea { width:90%; padding:20px 5%; height:175px; color:#b3bbce; background-color:#ffffff; margin-bottom:40px; margin-top:5px; border-radius:5px; font-family: 'SayaSemiSansFY-Medium', cursive; font-size:16px; resize:none; } .green-action { color:#ffffff !important; background-color:#2CC9C1; } .green-action:hover { background-color:#24A39C; transition:1s; } .blue-action { color:#273E74 !important; background-color:#ffffff; border:2px solid #273E74; } .blue-action:hover { color:#ffffff; background-color:#273E74; transition:1s; } .white-action { color:#ffffff !important; background:none; border:2px solid #ffffff; } .white-action:hover { background-color:#2CC9C1; transition:1s; border:2px solid #2CC9C1; } h1, h2, h3, p { font-weight:normal; font-style: normal;} h1 { font-family: 'NeusaBold', cursive; font-size:45px; width:100%; text-align:center; padding:185px 0 0 0; z-index:99998; color:white !important; line-height:35px;} h2 { font-family: 'Intro-Regular', cursive; font-size:56px; line-height:52px; margin:0; color:#273E74; width:100%;} h3 { font-family: 'SayaSemiSansFY-Bold', cursive; color:#2CC9C1; font-size:30px; margin:0; padding:0; line-height:26px;} h4 { font-family: 'SayaSemiSansFY-Medium', cursive; color:#b6c9d3; font-size:24px; margin:0 0 12px 0; padding:0; line-height:26px;} h5 { font-family: 'SayaSemiSansFY-Bold', cursive; color:#273E74; font-size:16px; margin:0; padding:0; line-height:22px; width:100%;} /*---------------------------------------------------- {--------} TOPO {--------} ----------------------------------------------------*/ header { position:fixed; width:100%; height:100px; top:0; margin:0; z-index:80000;} .backheader { background-color:#273E74;} .social-icons { width:auto; height:45px; margin-top:30px;} .social-icons a img:hover { opacity:0.5; transition:1s; } #top-button { margin-top:16px; } #btn-whats { position:fixed; right:5%; top:75%; width:100px; height:auto; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); z-index:99999999; } #btn-whats:hover { opacity:0.5; transition:1s; } /*--------------------- MENU ----------------------*/ nav { position:absolute; top:50px; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); width:auto; height:auto; } nav ul li { float:left; font-family: 'Intro-Regular', cursive; font-size:16px; line-height:18px; margin:0 20px; color:#ffffff; cursor:pointer; } nav ul li:hover { color:#24A39C; } #menu { display:none; } /*------------------- SUB MENU --------------------*/ .side-menu-wrapper { display:none !important; } .social-mobile-icons { display:none; } .green-button-menu-mobile { display:none; } /*---------------------------------------------------- {--------} INTRODUÇÃO {--------} ----------------------------------------------------*/ #start-home { width:100%; height:950px; background:url('../images/background-top.jpg') center top no-repeat; display:inline-block; background-size:100% 100%; } #start-home h1 { margin-top:100px; } #mouse-home { width:100%; height:65px; display:inline-block; text-align:center; margin-top:200px; animation-name: alert; animation-duration: 0.5s; animation-iteration-count: 20; } @keyframes alert { 0% {margin-top:200px;} 25% {margin-top:195px;} 50% {margin-top:197px;} 75% {margin-top:195px;} 100% {margin-top:200px;}} #down-home { display:none; } /*---------------------------------------------------- {--------} SLIDER {--------} ----------------------------------------------------*/ #slider-home { width:100%; height:700px; display:inline-block; background-color:#F8F9FA; } /* slider */ #home-slider { width: 100%; height: 700px; background: #F8F9FA; top:0;} #intro #home-slider .produto-slide { display: block; height: 700px; position: relative; cursor: -webkit-grab; cursor: grab;} #intro #home-slider .produto-slide .image { height: 700px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden;} #intro #home-slider .produto-slide .image img { position: absolute; top: 0; left: 50%; margin-left: -960px; height: 700px;} .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -562px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: 367px;} /* slider mobile */ #slider { display:none;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ #about-home { width:100%; height:700px; display:inline-block; background-color:#ffffff; scroll-behavior: smooth; } #text-about { position:absolute; width:220px; padding:40px; top:1980px; left:42%; z-index:7000; color:#ffffff; background-color:#273E74; font-family: 'Intro-Regular', cursive;} .left-about, .right-about { width:50%; height:100%; overflow:hidden; } .left-about img { position:relative; top:0; left:0; width:100%; height:auto; } .right-about { width:40%; padding:5%; height:80%; } .right-about h3 { padding-left:95px; background:url('../images/detail-green.svg') left center no-repeat; margin-bottom:35px;} .right-about h2 { width:70%; margin-bottom:65px; } .right-about p { width:50%; margin-left:125px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { width:100%; height:auto; min-height:710px; padding:95px 0; background-color:#ffffff; background:url('../images/doctor.jpg') right bottom no-repeat; background-size:75% auto; } #value-home h3 { padding-left:95px; background:url('../images/detail-green.svg') left center no-repeat; margin-bottom:35px;} #value-home h2 { width:32%; margin-bottom:65px; } .container-value { width:370px; height:270px; margin-right:45px;} .container-value p { float:right; width:65%;} .title-value { font-family: 'SayaSemiSansFY-Bold', cursive; font-size:24px; } .second-container { margin-top:45px; } /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { width:100%; height:auto; min-height:1080px; background-color:#273E74; display:inline-block; scroll-behavior: smooth;} #service-container { width:40%; height:1080px; overflow:hidden; } #service-container img { width:auto; height:100%; position:relative; top:0; right:495px; } #service-text { width:50%; padding:5% 5% 0 5%; height:90%; } #service-text h3 { padding-left:95px; background:url('../images/detail-green.svg') left center no-repeat; margin-bottom:35px; width:90%;} #service-text h2 { width:70%; margin-bottom:65px; color:#ffffff; } #service-text p { color:#ffffff; width:27%; margin-right:4%; margin-bottom:50px; } #service-text p span { font-family: 'SayaSemiSansFY-Bold', cursive; font-size:24px; color:#ffffff; } .service-big { width:58% !important; } /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ #team-home { width:70%; height:auto; min-height:630px; padding:200px 15% 95px; background-color:#ffffff; display:inline-block; scroll-behavior: smooth;} #posiciona-text-team { width:25%; height:100%; float:left; } #posiciona-text-team h3 { padding-left:95px; background:url('../images/detail-green.svg') left center no-repeat; margin-bottom:35px; width:auto;} #posiciona-text-team h2 { width:100%; margin-bottom:65px; color:#273E74;} #posiciona-text-team p { color:#000000; width:100%;} #posiciona-member { width:70%; height:auto; float:right; } .member-team { width:250px; height:285px; margin:0 30px 30px 0; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); border-radius:10px;} .member-team img { width: 44%; height: auto; border-radius: 50%; margin: 26px 28% 0;} .member-team p { width:80%; margin:30px 10% 0; } .member-team p span { font-family: 'SayaSemiSansFY-Bold', cursive; font-size:24px; color:#0000000;} /*---------------------------------------------------- {--------} CONTATO {--------} ----------------------------------------------------*/ #contact-home { width:100%; height:auto; min-height:1080px; background-color:#F8F9FA; display:inline-block; scroll-behavior: smooth; } #contact-content-left { width:30%; height:90%; float:left; padding:5% 15%;} #contact-content-left h3 { padding-left:95px; background:url('../images/detail-green.svg') left center no-repeat; margin-bottom:35px; width:auto;} #contact-content-left h2 { width:100%; margin-bottom:65px; color:#273E74;} #contact-form { width:100%; margin-top:70px;} #contact-content-right { width:40%; height:100%; float:right; } #mapa { display:inline-block; width:100%; height:1275px;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer { width:100%; height:auto; padding:90px 0; background-color:#ffffff; display:inline-block;} #footer-contact { width:80%; height:auto; margin:0 10%; display:inline-block; min-height:250px;} #footer-menu { width:80%; height:auto; margin:0 10%; padding-top:50px; border-top:1px solid #F5F6F8; display:inline-block; } #footer-nav li { float:left; color:#273E74; font-family: 'Intro-Regular', cursive; font-size:16px; margin:0 40px 10px 0; } #footer-nav li:hover { color:#2CC9C1; } .footer-first-nav { margin-left:0 !important;} #footer-copyright { font-size:14px; clear:both; } #footer-whats { width:35%; padding-left:55px; height:120px; font-size:40px; line-height:40px; font-family: 'Intro-Regular', cursive; float:left; background:url('../images/ico-whatsapp-footer.svg') left top no-repeat; } #footer-whats a { color:#24A49D; } #footer-whats a:hover { color:#2CC9C1; } .footer-text { width:20%; height:120px; margin-right:5%; float:left; } .footer-text a { color:#000000; } .footer-text a:hover { text-decoration:underline; } .footer-city { color:#273E74 !important; font-size:20px; } /*---------------------------------------------------- {--------} POP WHATS {--------} ----------------------------------------------------*/ .pop-whats { width:100% !important; } /*---------------------------------------------------- {--------} BREAKPOINTS {--------} ----------------------------------------------------*/ /* BIG SCREENS */ @media only screen and (min-width:1981px){ /*---------------------------------------------------- {--------} INTRODUÇÃO {--------} ----------------------------------------------------*/ #start-home { background-size: 100% auto; } .container-flex { width: 70%; margin: 0 15%;} /* slider */ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -883px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: 688px;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ .right-about p { width:50%; margin-left:60px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { width:100%; height:auto; min-height:710px; padding:95px 0; background-color:#ffffff; background:url('../images/doctor.jpg') 70% bottom no-repeat; background-size:50% auto; } /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { min-height:1210px;} #service-container { height:1210px;} /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ #posiciona-member { width:60%; height:auto; float:right; } } @media only screen and (min-width:1920px){ /* slider */ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -410px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: 215px;} } /* SCREENS LAPTOP CORRECTS */ @media only screen and (max-width:1821px){ /* slider */ #home-slider { width: 100%; height: 700px; background: #F8F9FA; top:0;} #intro #home-slider .produto-slide { display: block; height: 700px; position: relative; cursor: -webkit-grab; cursor: grab;} #intro #home-slider .produto-slide .image { height: 700px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden;} #intro #home-slider .produto-slide .image img { position: absolute; top: 0; left: 50%; margin-left: -960px; height: 700px;} .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -349px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: 154px;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ .right-about h2 { width:90%; margin-bottom:65px; } .right-about p { width:50%; margin-left:180px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home h2 { width:35%;} /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { min-height:1130px;} #service-container { height:1130px;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer-whats { width:33%; } .footer-text { width:22%; } } @media only screen and (max-width:1601px){ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -191px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: -4px;} } /* MIDDLE LAPTOPS */ @media only screen and (max-width:1441px){ #slider-home { width:100%; height:500px; display:inline-block; background-color:#F8F9FA; overflow:hidden; } /* slider */ #home-slider { width: 100%; height: 500px; background: #F8F9FA; top:-95px;} #intro #home-slider .produto-slide { display: block; height: 500px; position: relative; cursor: -webkit-grab; cursor: grab;} #intro #home-slider .produto-slide .image { height: 500px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden;} #intro #home-slider .produto-slide .image img { position: absolute; top: 0; left: 50%; margin-left: -960px; height: 500px;} .owl-theme .owl-controls { margin-top: -180px;} .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -76px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: -118px;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ .right-about p { width:70%; margin-left:170px; } #text-about { top: 1754px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { background:url('../images/doctor.jpg') 250% bottom no-repeat; background-size:90% auto; } #value-home h2 { width:45%;} /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { min-height:1280px;} #service-container { height:1280px;} #service-container img { right:790px; } /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer-whats { width:100%; height:200px;} .footer-text { width:26%; margin-right:10%;} #footer-contact { min-height:450px;} } @media only screen and (max-width:1367px){ /*---------------------------------------------------- {--------} SLIDER {--------} ----------------------------------------------------*/ #slider-home { width:100%; height:380px; display:inline-block; background-color:#F8F9FA; } /* slider */ #home-slider { width: 100%; height: 380px; background: #F8F9FA; top:0;} #intro #home-slider .produto-slide { display: block; height: 380px; position: relative; cursor: -webkit-grab; cursor: grab;} #intro #home-slider .produto-slide .image { height: 700px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; overflow: hidden;} .slider-size { width: auto !important; height: 500px !important; text-align: center !important; margin-top: -60px;} .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: -562px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: 367px;} /* slider */ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: 20px; left: -326px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: 20px; right: 131px;} } /* LITTLE LAPTOPS */ @media only screen and (max-width:1281px){ /* slider */ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: 39px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: -234px;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ #about-home { height:570px;} #text-about { display:none;} .left-about img { min-width:100%; height:100%; } .right-about h2 { width:100%; margin-bottom:65px; } .right-about p { width:100%; margin-left:0; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { background:url('../images/doctor.jpg') 300% bottom no-repeat; background-size:90% auto; } #value-home h2 { width:48%;} /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-text h2 { width:60%;} #service-text button { margin-bottom:100px; } #service-home { min-height:1330px;} #service-container { height:1330px;} #service-container img { right:900px; } /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ .footer-text { width:30%; margin-right:8%;} } /* SCREENS TABLETS */ @media only screen and (max-width:1025px){ /* oculta slider desktop */ #home-slider { display:none !important;} /* slider mobile */ #slider-home { height: 670px;} #slider { margin: 0 auto; width: 800px; max-width: 100%; text-align: center; display:block;} #slider input[type=radio] { display: none; } #slider label { cursor:pointer; text-decoration: none;} #slides { padding: 0; border: none; background: #fff; position: relative; z-index: 1;} #overflow { width: 100%; overflow: hidden; } #slide1:checked ~ #slides .inner { margin-left: 0; } #slide2:checked ~ #slides .inner { margin-left: -100%; } #slide3:checked ~ #slides .inner { margin-left: -200%; } #slide4:checked ~ #slides .inner { margin-left: -300%; } #slides .inner { transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); width: 400%; line-height: 0; height: 500px; } #slides .slide { width: 25%; float:left; display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; } #slides .slide_1 { background: #F8F9FA; } #slides .slide_2 { background: #F8F9FA; } #slides .slide_3 { background: #F8F9FA; } #slides .slide_4 { background: #F8F9FA; } #controls { margin: -100px 0 0 0; width: 192px; height: 50px; z-index: 3; position: relative; right: -165px !important;} #controls label { transition: opacity 0.2s ease-out; display: none; width: 50px; height: 50px; opacity: 1;} #controls label:hover { opacity: 1; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(1) { background: url(../images/carousel/right.png) no-repeat; float:right; margin: 0 -50px 0 0; display: block; width:96px; height:100px; } #slide1:checked ~ #controls label:nth-last-child(2), #slide2:checked ~ #controls label:nth-last-child(3), #slide3:checked ~ #controls label:nth-last-child(4), #slide4:checked ~ #controls label:nth-last-child(1) { background: url(../images/carousel/left.png) no-repeat; float:left; margin: 0 0 0 -50px; display: block; width:96px; height:100px; } #slide1:checked ~ #bullets label:nth-child(1), #slide2:checked ~ #bullets label:nth-child(2), #slide3:checked ~ #bullets label:nth-child(3), #slide4:checked ~ #bullets label:nth-child(4) { background: #444; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(1), #slide1:checked ~ #controls label:nth-last-child(2), #slide2:checked ~ #controls label:nth-last-child(3), #slide3:checked ~ #controls label:nth-last-child(4), #slide4:checked ~ #controls label:nth-last-child(1) { margin: 0;} #slides { max-width: calc(100%); margin: 0 auto;} .slide-content h2 { width:70%; margin-left:15%; text-align:left; color:#24A49D; font-size:56px; font-family: 'Intro-Regular', cursive; margin-bottom:25px; } .slide-content p { width:70%; margin-left:15%; text-align:left; } .slide-content p a { color:#273E74; font-size:20px; font-family: 'Intro-Regular', cursive; } /* ajustes slider */ .owl-theme .owl-controls .owl-buttons .owl-prev { position: absolute; top: -25px; left: 91px;} .owl-theme .owl-controls .owl-buttons .owl-next { position: absolute; top: -25px; right: -286px;} /*---------------------------------------------------- {--------} INTRODUÇÃO {--------} ----------------------------------------------------*/ #start-home { background-size: auto 100%; } /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ #about-home { height:645px;} .left-about img { min-width:100%; width:auto; height:100%; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { background:none; } #value-home h2 { width:60%;} /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { width:100%; height:auto; min-height:2575px; background-color:#273E74;} #service-container { width:100%; height:1080px; overflow:hidden; } #service-container img { width:auto; height:100%; position:relative; top:0; right:495px; } #service-text { width:70%; padding: 10% 15%; height:90%; } #service-text h2 { width:60%; margin-bottom:65px; color:#ffffff; } #service-text p { width:40%; margin-right:7%;} .service-big { width:45% !important; clear:none !important; } /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ #team-home { padding:120px 15% 95px;} #posiciona-text-team { width:100%; height:auto; float:left; margin-bottom:65px; } #posiciona-member { width:100%; height:auto; float:right; } .member-team { width:30%; height:270px; margin:0 3% 20px 0; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); border-radius:10px; float:left !important;} /*---------------------------------------------------- {--------} CONTATO {--------} ----------------------------------------------------*/ #contact-home { width:100%; height:auto; min-height:1080px; background-color:#F8F9FA; display:inline-block; } #contact-content-left { width:70%; height:90%; float:left; padding:15%;} #contact-content-right { width:100%; height:100%; float:right; } #mapa { display:inline-block; width:100%; height:1200px;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ .footer-text { width:35%; margin-right:7%;} } /* BIG MOBILES */ @media only screen and (max-width:769px){ #home-slider { left: -71px; } /*---------------------------------------------------- {--------} GERAL {--------} ----------------------------------------------------*/ .global { width:100%; padding:0;} .container-flex { width:70%; height:auto; margin:0 15%; display:inline-block; } /*---------------------------------------------------- {--------} TOPO {--------} ----------------------------------------------------*/ header { position:fixed; width:100%; height:100px; top:0; margin:0; z-index:80000;} .social-icons { width:auto; height:45px; margin-top:30px;} .social-icons a img:hover { opacity:0.5; transition:1s; } #top-button { display:none; } /*--------------------- MENU ----------------------*/ nav { display:none; } #menu { display:block; margin-top:30px; } /*------------------- SUB MENU --------------------*/ .side-menu-wrapper { display:block !important; background: #273E74; padding: 60px 0 0 100px; position: fixed; top: 0; left: -650px; height: 100%; z-index: 2; transition: 0.5s; width: 430px; font: 38px 'Intro-Regular', cursive; box-sizing: border-box; letter-spacing:0;} .side-menu-wrapper > ul { list-style:none; padding:0; margin:0; overflow-y: auto; height:95%;} .side-menu-wrapper > ul > a > li { display: block; padding: 20px 0; color: #ffffff; transition: 0.3s; text-decoration: none;} .side-menu-wrapper > ul > a > li:hover { opacity:0.5 } .side-menu-wrapper > a.menu-close { padding: 8px 0 20px 23px; color: #2CC9C1; display: block; margin: -30px 0 -10px -20px; font-size: 50px; text-decoration: none; font-family: 'Intro-Regular', cursive;} .side-menu-wrapper > a.menu-close:hover { opacity:0.5 } .menu-overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0,0,0,.7); overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; transition: opacity 1s;} .social-mobile-icons { margin-top:40px !important; display:block; } .green-button-menu-mobile { float:left !important; display:block; margin-top:60px; } /*---------------------------------------------------- {--------} INTRODUÇÃO {--------} ----------------------------------------------------*/ #down-home { width:100%; height:35px; display:inline-block; text-align:center; margin-top:100px; animation-name: alert; animation-duration: 0.5s; animation-iteration-count: 20; } #down-home img { height:100%; } @keyframes alert { 0% {margin-top:100px;} 25% {margin-top:95px;} 50% {margin-top:97px;} 75% {margin-top:95px;} 100% {margin-top:100px;}} #mouse-home { display:none; } /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ #about-home { height:auto;} #text-about { display:none;} .left-about, .right-about { width:100%; height:100%; overflow:hidden; display:inline-block; } .left-about img { width:100%; height:auto; } .right-about { width:70%; padding:15%;} .right-about h2 { width:100%; margin-bottom:65px; } .right-about p { width:100%; margin-left:0; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { width:100%; height:auto; min-height:1450px; padding:0 0 95px 0; background-color:#ffffff; background:url('../images/doctor.jpg') 80% bottom no-repeat; background-size:130% auto; } #value-home h2 { width:100%; margin-bottom:65px; } .container-value { width:100%; height:auto; margin-right:0; margin-bottom:35px;} .second-container { margin-top:0; } /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { width:100%; height:auto; min-height:2575px; background-color:#273E74;} #service-container { width:100%; height:800px; overflow:hidden; } #service-container img { width:auto; height:100%; position:relative; top:0; right:310px; } #service-text button { display:block; margin-top:25px !important; margin-bottom:75px; } #service-text h2 { width:55%;} /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ .member-team { width:45%; height:285px; margin:0 5% 30px 0; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); border-radius:10px; float:left !important;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer-whats { width:100%; height:200px;} .footer-text { width:60%; margin-right:0; height:160px;} .footer-social { width:100%; float:left; height:90px; margin-top:40px; } #footer-contact { min-height:450px;} } @media only screen and (max-width:427px){ #slider { display:none; } /*---------------------------------------------------- {--------} POP WHATS {--------} ----------------------------------------------------*/ .pop-whats { width:100% !important; padding-left:0 !important; padding-top:50px !important; font-size:24px !important; line-height:32px !important; } } /* NORMAL MOBILE */ @media only screen and (max-width:426px){ /*---------------------------------------------------- {--------} TOPO {--------} ----------------------------------------------------*/ #btn-whats { position:fixed; right:10%; top:75%; width:80px; height:auto; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); z-index:99999999; } /* oculta slider desktop */ #home-slider { display:none !important;} /* slider mobile */ #slider-home { height: 670px;} #slider { margin: 0 auto; width: 800px; max-width: 100%; text-align: center; display:block;} #slider input[type=radio] { display: none; } #slider label { cursor:pointer; text-decoration: none;} #slides { padding: 0; border: none; background: #fff; position: relative; z-index: 1;} #overflow { width: 100%; overflow: hidden; } #slide1:checked ~ #slides .inner { margin-left: 0; } #slide2:checked ~ #slides .inner { margin-left: -100%; } #slide3:checked ~ #slides .inner { margin-left: -200%; } #slide4:checked ~ #slides .inner { margin-left: -300%; } #slides .inner { transition: margin-left 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000); width: 400%; line-height: 0; height: 500px; } #slides .slide { width: 25%; float:left; display: flex; justify-content: center; align-items: center; height: 100%; color: #fff; } #slides .slide_1 { background: #F8F9FA; } #slides .slide_2 { background: #F8F9FA; } #slides .slide_3 { background: #F8F9FA; } #slides .slide_4 { background: #F8F9FA; } #controls { margin: -100px 0 0 0; width: 192px; height: 50px; z-index: 3; position: relative; right: -233px;} #controls label { transition: opacity 0.2s ease-out; display: none; width: 50px; height: 50px; opacity: 1;} #controls label:hover { opacity: 1; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(1) { background: url(../images/carousel/right.png) no-repeat; float:right; margin: 0 -50px 0 0; display: block; width:96px; height:100px; } #slide1:checked ~ #controls label:nth-last-child(2), #slide2:checked ~ #controls label:nth-last-child(3), #slide3:checked ~ #controls label:nth-last-child(4), #slide4:checked ~ #controls label:nth-last-child(1) { background: url(../images/carousel/left.png) no-repeat; float:left; margin: 0 0 0 -50px; display: block; width:96px; height:100px; } #slide1:checked ~ #bullets label:nth-child(1), #slide2:checked ~ #bullets label:nth-child(2), #slide3:checked ~ #bullets label:nth-child(3), #slide4:checked ~ #bullets label:nth-child(4) { background: #444; } #slide1:checked ~ #controls label:nth-child(2), #slide2:checked ~ #controls label:nth-child(3), #slide3:checked ~ #controls label:nth-child(4), #slide4:checked ~ #controls label:nth-child(1), #slide1:checked ~ #controls label:nth-last-child(2), #slide2:checked ~ #controls label:nth-last-child(3), #slide3:checked ~ #controls label:nth-last-child(4), #slide4:checked ~ #controls label:nth-last-child(1) { margin: 0;} #slides { max-width: calc(100%); margin: 0 auto;} .slide-content h2 { width:70%; margin-left:15%; text-align:left; color:#24A49D; font-size:56px; font-family: 'Intro-Regular', cursive; margin-bottom:25px; } .slide-content p { width:70%; margin-left:15%; text-align:left; } .slide-content p a { color:#273E74; font-size:20px; font-family: 'Intro-Regular', cursive; } /*---------------------------------------------------- {--------} GERAL {--------} ----------------------------------------------------*/ h2 { font-size:42px; line-height:46px;} h3 { font-size:22px; line-height:24px;} /*------------------- SUB MENU --------------------*/ .side-menu-wrapper { background: #273E74; padding: 60px 0 0 50px; position: fixed; top: 0; left: -650px; height: 100%; z-index: 2; transition: 0.5s; width: 430px; font: 38px 'Intro-Regular', cursive; box-sizing: border-box; letter-spacing:0;} .side-menu-wrapper > ul { list-style:none; padding:0; margin:0; overflow-y: auto; height:95%;} .side-menu-wrapper > ul > a > li { display: block; padding: 10px 0; color: #ffffff; transition: 0.3s; text-decoration: none;} .side-menu-wrapper > ul > a > li:hover { opacity:0.5 } .side-menu-wrapper > a.menu-close { padding: 8px 0 20px 23px; color: #2CC9C1; display: block; margin: -30px 0 -10px -20px; font-size: 50px; text-decoration: none; font-family: 'Intro-Regular', cursive;} .side-menu-wrapper > a.menu-close:hover { opacity:0.5 } .menu-overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0,0,0,.7); overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; transition: opacity 1s;} .social-mobile-icons { margin-top:40px !important;} .green-button-menu-mobile { float:left !important; display:block !important; clear:both; } /*---------------------------------------------------- {--------} INTRODUÇÃO {--------} ----------------------------------------------------*/ #start-home { height:600px; background-size: auto 100%; } #start-home h1 { margin-top:0;} #start-home h1 img { margin-top:0; width:250px;} /*---------------------------------------------------- {--------} SOBRE A MT {--------} ----------------------------------------------------*/ .right-about h2 { width:100%; margin-bottom:45px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home {min-height:1500px;} /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { width:100%; height:auto; min-height:2575px; background-color:#273E74;} #service-container { width:100%; height:450px; overflow:hidden; } #service-text { padding: 15%; } #service-container img { width:auto; height:100%; position:relative; top:0; right:170px; } #service-text button { display:block; margin-top:25px !important; margin-bottom:75px; float:left !important; } #service-text h2 { width:55%;} #service-text p { width:100%;} .service-big { width:100% !important; clear:none !important; } /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ .member-team { width:100%; height:320px; margin:0 0 30px 0; box-shadow: 0 20px 50px 0 rgba(39, 62, 116, 0.05); border-radius:10px; float:left !important;} /*---------------------------------------------------- {--------} CONTATO {--------} ----------------------------------------------------*/ #mapa { display:inline-block; width:100%; height:600px;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer-whats { width:90%; height:200px;} .footer-text { width:85%; margin-right:0; height:200px;} .footer-social { width:100%; float:left; height:90px; margin-top:0; } } @media only screen and (min-width:400px){ #controls { right: -183px;} } /* LITTLE MOBILE */ @media only screen and (max-width:321px){ /*------------------- SUB MENU -------------------- .side-menu-wrapper { left: -55px !important; padding: 60px 0 0 53px;}*/ #controls { margin: -100px 0 0 0; width: 192px; height: 50px; z-index: 3; position: relative; right: -128px; } /*---------------------------------------------------- {--------} VALORES {--------} ----------------------------------------------------*/ #value-home { min-height:1850px; background-size: 150% auto;} .container-value { width:100%; height:auto; margin-right:0; margin-bottom:35px;} .container-value p { float:right; width:65% !important;} .container-value img { width:25%; } .second-container { margin-top:0; } /*---------------------------------------------------- {--------} SERVIÇOS {--------} ----------------------------------------------------*/ #service-home { min-height:2810px;} #service-container { height:395px;} /*---------------------------------------------------- {--------} EQUIPE {--------} ----------------------------------------------------*/ .member-team { height:275px;} /*---------------------------------------------------- {--------} FOOTER {--------} ----------------------------------------------------*/ #footer-whats { width:90%; height:190px; font-size:28px;} .footer-text { width:100%; margin-right:0; height:210px;} .footer-social { width:100%; float:left; height:90px; margin-top:0; } #footer-copyright { margin-top:20px; } #footer-jazz { margin-top:20px; float:left !important; } }