/* TOP PAGE ----------------------------------------------------------- */
.top-head {width: 100%; height: 60px; background: #FD2476;display: flex;} 
.top-nav {width: 100%; height: 91px; background: #FFF; } 
.logo-topo { background-image: url(' ../img/logo-topo.png'); width: 140px; height: 46px;  background-size:contain; position: relative; bottom:-20px;}
@media only screen and (max-width: 720px) { .logo-topo {margin-left: 3%;top:3%; position: fixed;}  }
@media only screen and (max-width: 720px) { .top-nav {width: 100%; height: 91px; background: #FFF; position: fixed;z-index: 99;}   }
.mobile-space {height: 60px;}


/* Menu Horizontal ----------------------------------------------------------- */
.horizontal-menu {	height: 91px; left: 52%; margin-left: -400px;	width:800px;position:absolute;padding-top: 10px}
.horizontal-menu.plain li,.horizontal-menu.dropdown li {float: left;height: 100%;	width: 16.6666%;}
.horizontal-menu.plain li a,.horizontal-menu.dropdown li > a {display: block;color: #555; font-weight: bold; letter-spacing: 2px;font-family: Zona-Pro-Regular; font-size: .8rem;	text-align: center;	transition: background-position 0.2s ease 0s;}
.horizontal-menu.dropdown li,.horizontal-menu.dropdown li > a {	transition: background-color 0.2s ease;}
.horizontal-menu.dropdown li {	position: relative;}
.horizontal-menu.dropdown li > a {	text-transform: uppercase;}
.horizontal-menu.dropdown li > div {background: #fff;	display: none;	min-width: 180%;	overflow: hidden;	position: absolute;	padding: 10px;	z-index: 999;}
.horizontal-menu.dropdown li:not(:first-of-type):not(:last-of-type) > div {	left: -50%;	border-radius: 0 0 3px 3px;}
.horizontal-menu.dropdown li:first-of-type > div {	left: 0;	border-radius: 0 0 3px 0;}
.horizontal-menu.dropdown li:last-of-type > div {	right: 0;	border-radius: 0 0 0 3px;}
.horizontal-menu.dropdown li:hover > div {	display: block;}
.horizontal-menu.dropdown li:hover,.horizontal-menu.dropdown li:hover > div {	background: #FFF;}
.horizontal-menu.dropdown li > div > a {	background: #FFF linear-gradient(to left, #E9F5F9 50%, #FFF 50%) repeat scroll 0 0 / 200% 100%;	border-radius: 2px;	display: block;	float: left;	margin: 2%;	padding: 8px 10px;	text-align: left;	transition: background-position 0.2s ease;	width: 46%;color: #888; font-weight: bold; letter-spacing: 2px;font-family: Zona-Pro-Regular; font-size: .8rem;	 }
.horizontal-menu.dropdown li > div > a:hover {	background-position: 100% 0;	cursor: pointer;}






/* FOOTER PAGE ----------------------------------------------------------- */
footer { padding-bottom: 0px; background: #FD2476;padding-top: 60px;   border-top: 6px solid #CF175D; } 
footer p { color: #fff; } 
.footer-logo { background-image: url('  ../img/footer-logo.png'); width: 180px; height: 60px;  background-size:contain;  margin-top: auto; margin-bottom: auto;}

/* SLIDE COURSEL ----------------------------------------------------------- */
.slide-legenda { position:relative; float: right;   z-index:999;width:36%; height: 100%;background-image: linear-gradient(to top, #B1DCEB 0%, #E9F5F9 1%, #E9F5F9 100%);display: table;}
.carousel { justify-content: flex-start; overflow: hidden; position: relative; height: 720px; width: 100vw; } 
.carousel > .container { display: flex; flex-direction: row; height: 100%; transform: translate3d(0, 0, 0); transition: transform 600ms; } 
.carousel > nav { bottom: 20px; right: 0px;  position: absolute; width: 34%; z-index: 1; } 
.carousel > nav a { color: #FD2476; padding: 3px; font-size: 30px; opacity: .2; text-decoration: none; } 
.carousel > nav a:hover { opacity: .5; } 
.carousel > nav a.current { opacity: 1; } 
.carousel .slide { flex-shrink: 0; line-height: 1.4; text-align: center; width: 100vw; }
.photo-01 {width: 64%; height: 100%; background: url( ../img/slider001.jpg);background-size: cover; background-position: right;}
.photo-02 {width: 64%; height: 100%; background: url( ../img/slider002.jpg);background-size: cover; background-position: right;}
.photo-03 {width: 64%; height: 100%; background: url( ../img/slider003.jpg);background-size: cover; background-position: right;}
.photo-04 {width: 64%; height: 100%; background: url(   ../img/slider04.jpg);background-size: cover; background-position: right;}
.photo-05 {width: 64%; height: 100%; background: url( ../img/slider05.jpg);background-size: cover; background-position: right;}
.photo-06 {width: 64%; height: 100%; background: url( ../img/slider06.jpg);background-size: cover; background-position: right;}
.photo-07 {width: 64%; height: 100%; background: url( ../img/slider07.jpg);background-size: cover; background-position: right;}

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

.slide-legenda { position:absolute; float: left; z-index:999;width:100%; height: 100%; background: none;}
.carousel { justify-content: flex-start; overflow: hidden; position: relative; height: 450px; width: 100vw; background: #E9F5F9; margin-top: 91px;} 
.carousel > .container { display: flex; flex-direction: row; height:100%; transform: translate3d(0, 0, 0); transition: transform 600ms; } 
.carousel > nav { bottom: 10px; right:-30px;   position: absolute; width: 100%; z-index: 1; } 
.carousel > nav a { color: #FD2476; padding: 3px; font-size: 30px; opacity: .2; text-decoration: none; } 
.carousel > nav a:hover { opacity: .5; } 
.carousel > nav a.current { opacity: 1; } 
.carousel .slide { flex-shrink: 0; line-height: 1.4; text-align: center; width: 100vw; }

.photo-01 {width: 100%; height: 100%; background: url( ../img/slider001.jpg);background-size:cover; background-position: center;}
.photo-02 {width: 100%; height: 100%; background: url( ../img/slider002.jpg);background-size: cover; background-position: center;}
.photo-03 {width: 100%; height: 100%; background: url( ../img/slider003.jpg);background-size: cover; background-position: center;}
.photo-04 {width: 100%; height: 100%; background: url( ../img/slider04.jpg);background-size: cover; background-position: center;}
.photo-05 {width: 100%; height: 100%; background: url( ../img/slider05.jpg);background-size: cover; background-position: center;}
.photo-06 {width: 100%; height: 100%; background: url( ../img/slider06.jpg);background-size: cover; background-position: center;}
.photo-07 {width: 100%; height: 100%; background: url( ../img/slider07.jpg);background-size: cover; background-position: center;}
}






/* INSTAGRAM--------------------------------------------------------*/

.eapps-instagram-feed-title-container { visibility: hidden; }


/* FORM--------------------------------------------------------*/
.fomulario { font-size: 1.2rem; padding: 20px;font-weight:lighter; color:#999;width:100%;height: 40px;padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */background-color: #FFF;border: 0px solid #D1D1D1;border-radius: 3px;box-shadow: none;box-sizing: border-box;margin: 5px}
.fomulario-btn  { font-size: 1.2rem;  padding: 20px;font-weight:lighter; color:#FFF;width:auto;height: 40px;padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */background-color: #FF529A;border: 0px solid #D1D1D1;border-radius: 3px;box-shadow: none;box-sizing: border-box;}
.fomulario-obs {height: 80px;}



/* FONTS LOAD ----------------------------------------------------------- */
@font-face {font-family: ZonaPro-Bold;src: url(  ../fonts/ZonaPro-Bold.otf);}
@font-face {font-family: ZonaPro-ExtraLight;src: url( ../fonts/ZonaPro-ExtraLight.otf);}
@font-face {font-family: Zona-Pro-Regular;src: url(  ../fonts/Zona-Pro-Regular.otf);}


.font-ZonaPro-Bold {font-family: ZonaPro-Bold ;}
.font-ZonaPro-ExtraLight {font-family: ZonaPro-ExtraLight;}
.font-Zona-Pro-Regular {font-family: Zona-Pro-Regular;}



.css-award { background: url( ../img/cssda-badge.png);background-size: cover; width:90px; height: 110px;position: fixed; top:200px; right:0px;z-index: 998; } 
/* HEADER ----------------------------------------------------------- */
.img-logo-header { background-image: url('../img/img-logo-header.png'); width: 90px; height: 90px;  background-size:contain;float: left;margin: 3%;position: fixed;z-index: 998;}
@media only screen and (max-width: 720px) { .img-logo-header {width: 70px; height: 70px;margin: 5%;}  }

/* Sanfona ----------------------------------------------------------- */
summary{ cursor: pointer;font-family: ZonaPro-Bold ;color: #FFFFFF; padding: 8px 8px 8px 92px; text-decoration: none; font-size: 1.5rem; color: #FFF; display: block; transition: 0.3s; font-family: ZonaPro-Bold ;}
summary:focus {list-style: none;outline-style: none;}
article > details > summary {font-size: 1.5rem;}
details > p {list-style: none; list-style: none;padding:0;margin:0;}
details{list-style: none;}
summary::-webkit-details-marker { display: none}




/* CLIENTES PAGE ----------------------------------------------------------- */
.cliente-box { padding: 3%;border-radius: 5px;   border: 1px solid #D8DCE6;  overflow: auto; } 
.cliente-01 {width: 70px; height: 70px; background: url(../img/img-logo-header.png);background-size: cover;float: left;} 
.cliente-02 {width: 70px; height: 70px; background: url(../img/img-logo-header.png);background-size: cover;float: left;} 

/* SIDENAV ----------------------------------------------------------- */
.sidenav-nav  { right:0px; margin: 3%; z-index: 100; position: fixed;}
@media only screen and (max-width: 720px) { .sidenav-nav {right:3%; margin: 6%;}  }
.sidenav { height: 100%; width: 0; position: fixed;  top: 0; right: 0; background-color: #FD2476; overflow-x: hidden; transition: 0.5s; padding-top: 60px;z-index: 999!important;}
.sidenav a:hover { color: #999; text-decoration: none;}
.sidenav a { padding: 8px 8px 8px 92px; text-decoration: none; font-size: 1.5rem; color: #FFF; display: block; transition: 0.3s; font-family: ZonaPro-Bold ;}
.sidenav .closebtn { position: absolute; top: 3%; right: 25px; font-size: 56px; margin-left: 50px; }
@media screen and (max-height: 450px) { .sidenav {padding-top: 15px;} .sidenav a {font-size: 18px;}}
.sidenav p { padding: 8px 8px 8px 92px; text-decoration: none; color: #FFF; display: block; transition: 0.3s; }






/* TYPOGRAPHY */
h1 { font-size: 2.2rem; } 
h2 { font-size: 1.7rem; } 
h3 { font-size: 1.375rem; } 
h4 { font-size: 1.125rem; } 
h5 { font-size: 1rem; } 
h6 { font-size: 0.875rem; } 
p { font-size: 1.125rem; font-weight: 200; line-height: 1.8; } 
.font-light { font-weight: 200; } 
.font-regular { font-weight: 400; } 
.font-heavy { font-weight: 700; } 

.letra-xs { font-size: 0.875rem!important;  } 
@media only screen and (max-width: 720px) { h1  {font-size: 1.6rem; }  }

/* TRICKS ----------------------------------------------------------- */
.branco {color: #FFF!important;}
.black {color: #000!important;}
.purple {color:#FD2476!important;}
.caps {text-transform: uppercase;}
.letter-space { letter-spacing: 10px;}
.line-break {-ms-word-break: break-all; word-break: break-all; /* Non standard for webkit */ word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
@media(max-width:767px){.hidden-mobile{display:none;}}
@media(min-width:768px){.hidden-desktop{display:none;}}



/* EFFECTS FLUTUAR ----------------------------------------------------------- */
@keyframes float { 0% { transform: translatey(0px); } 25% { transform: translatey(-30px); } 100% { transform: translatey(0px); } }
.floatingeffect {animation: float 4s ease-in-out infinite;}
.floatingeffect2 {animation: float 10s ease-in-out infinite;}


/* EFFECTS Fonte sublinhado e marcador ----------------------------------------------------------- */
:root {--del-color: #eacda3;--ins-color: #eacda3;}
p1{serif;padding: 2em;max-width: 20em;margin: auto;font-size: 3.8rem!important; color: #000;}
del { --color: var(--del-color, red);text-decoration: none; padding: 0 .5em;background-repeat: no-repeat;background-image:linear-gradient(to left, rgba(255, 255,255, .5), transparent),linear-gradient(2deg, var(--color) 50%, transparent 50%),linear-gradient(-.9deg, var(--color) 50%, transparent 50%),linear-gradient(-60deg, var(--color) 50%, transparent 50%),linear-gradient(120deg, var(--color) 50%, transparent 50%);color: #000;
background-size:30% 1.5px,calc(100% - 20px) 10px,calc(100% - 20px) 10px,10px 10px,8px 8px; background-position:  100% calc(50% + 2px), center center,  center center,   2px 50%,  calc(100% - 3px) calc(50% + 1px);}
/* don't have much ideas for <ins> */
ins {background: var(--ins-color, green);text-decoration: none;color: #fff;}
@media only screen and (max-width: 720px) { p1{font-size: 2.2rem!important;} }
.p-text-rotate {margin-left: 50px;  font-size: .8rem;position: absolute; /* Rotate from top left corner (not default) */ -webkit-transform-origin: 0 0;-moz-transform-origin: 0 0;-ms-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg);}



<style type="text/css"> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, , output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, , section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
* { color: #636366; } 
body { background: #F7F7F7; } 
a { text-decoration: none; color: #fff; transition: all 0.3s ease; } 
a:hover { text-decoration:none; } 
.m-bottom { margin-bottom: 48px; } 
.container-main { padding-top: 100px; } 
.body-content {  padding: 0px 0 0px 0; position: relative; z-index: 0 !important; } 
.body-content > .container { position: relative; top: 100px; padding-bottom: 100px; } 

button { height: 48px; width: 180px; text-align: center; color: #FD2476; font-size: .94rem; letter-spacing: 1px; font-weight: 600; background: transparent; border: 2px solid #FD2476; border-radius:25px; margin: 20px 0; cursor: pointer; transition: all 0.3s ease; outline: none; } 
button:hover { background: #FD2476; color: #FFF; } 
button:active { outline: none; } 
.btn-secondary { border: 1px solid #FE7880; color: #FE7880; } 
.btn-secondary:hover { background: #FE7880; color: #fff; } 
.line { height: 1px; width: 100%; background: #D6D6D8; margin: 80px 0; } 
.grid-display { margin: 20px 0; } 
.grid-display [class^="col"] { background: #FBCED1; border: 1px solid #FE7880; border-radius: 4px; box-sizing: border-box; text-align: center; } 
.grid-display [class^="col"] p { color: #FE7880; font-size: 0.8rem; } 
pre {  overflow: auto; background: #fff; border-radius: 4px; border: 1px solid #D8DCE6;} 
code, .tag, .el, .name, .content, .comment { font-family: monospace; font-size: 1.1rem; line-height: 1.2rem; color: #636366; } .el { color: #FE7880; } .name { color: #F9B42D; } 
.content { color: #75C050; } 
.comment { color: #B6CAD2; } 

/* IMAGES */ 
.img { background-size: contain; background-repeat: no-repeat; } 
.img-logo { background-image: url('../img/logo-white.svg'); background-size: contain; height: 40px; width: 40px; padding-bottom: 8px; } 
.img-website-mock { position: relative; background-image: url('../img/web-mock.png'); height: 0; padding-top: 71.8%; margin-top: 80px; z-index: 200 !important; } 
.img-responsive { background-image: url('../img/responsive.png'); height: 96px; width: 144px; } 
.img-lightweight { background-image: url('../img/light.png'); height: 96px; width: 96px; } .img-simple { background-image: url('../img/simple.png'); height: 96px; width: 132px; } 

/* === MEDIA QUERIES === */ 
@media only screen and (min-width: 720px) { .jumbotron { height: 600px; } }

@import url(https://fonts.googleapis.com/css?family=Lato:400,300,300italic,400italic,700,700italic);

/* UNIVERSAL */
html, body { height: 100%; width: 100%; margin: 0; padding: 0; left: 0; top: 0; }
/* ROOT FONT STYLES */
* { font-family: 'Lato', Helvetica, sans-serif; color: #333447; line-height: 1.2; }



/* POSITIONING */ 
.left { text-align: left; } 
.right { text-align: right; } 
.center { text-align: center; margin: 0 auto; } 
.justify { text-align: justify; }

/* ==== GRID SYSTEM ==== */

.container-main { width: 90%; margin: 0 auto; } .row { position: relative; width: 100%; } .row [class^="col"] { float: left; margin: 8px 2%; min-height: 2px; } .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { width: 96%; } .col-1-sm { width: 4.33%; } .col-2-sm { width: 12.66%; } .col-3-sm { width: 21%; } .col-4-sm { width: 29.33%; } .col-5-sm { width: 37.66%; } .col-6-sm { width: 46%; } .col-7-sm { width: 54.33%; } .col-8-sm { width: 62.66%; } .col-9-sm { width: 71%; } .col-10-sm { width: 79.33%; } .col-11-sm { width: 87.66%; } .col-12-sm { width: 96%; } .row::after { content: ""; display: table; clear: both; } .hidden-sm { display: none; } @media only screen and (min-width: 540px) { .container { width: 80%; } } @media only screen and (min-width: 720px) { .col-1 { width: 4.33%; } .col-2 { width: 12.66%; } .col-3 { width: 21%; } .col-4 { width: 29.33%; } .col-5 { width: 37.66%; } .col-6 { width: 46%; } .col-7 { width: 54.33%; } .col-8 { width: 62.66%; } .col-9 { width: 71%; } .col-10 { width: 79.33%; } .col-11 { width: 87.66%; } .col-12 { width: 96%; } .hidden-sm { display: block; } } @media only screen and (min-width: 960px) { .container-main { width: 75%; max-width: 960px; } }