body, html{

width: 100%;
margin: 0;

}

::-webkit-scrollbar {
  
width: 9px;

}

::-webkit-scrollbar-track{

box-shadow: inset 0 0 5px grey; 

}
 
::-webkit-scrollbar-thumb{

background: #00a6e3; 

}

::-webkit-scrollbar-thumb:hover{

background: #C51F6B; 

}

#toTop{
	
background-color: rgba(0,0,0,0.4);
position: fixed;
padding: 7px;
right: 0;
bottom: 90px;
text-align: center;
display: none;
z-index: 2000;
fadeInLeftBig; animation-name:
fadeInLeftBig; animation-duration: 1s;
-webkit-animation-fill-mode: both; 
} 
@-webkit-keyframes fadeInLeftBig { 0% { 
-webkit-transform: translate3d(500px,0,0); 
transform: translate3d(500px,0,0); 

}
}

.pace{

-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;

}

.pace-inactive{

display: none;

}

.pace .pace-progress{

background: #00a6e3;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;

}

a:link{ 

text-decoration:none; 

}

p{

text-align: justify;
font: 14px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;

}

h1{

font: 20px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
text-align: center;

}

h2{

text-align: center;
font: 39px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;

}
    
.whatsapp{

position: fixed;
background: #21d439;
border-radius: 100%;
right: 10px;
bottom: 21px;
padding-left: 9;
padding-right: 9;
padding-bottom: 8;
padding-top: 7;
text-align: center;
text-decoration: none;
z-index: 2000;

}

.whatsapp p{

display: flex;
margin: 0 auto;

}

.whatsapp:hover{

transition: 1s;
box-shadow: #000 0px 0px 10px 0px; 

}

.top{

position: fixed;
top: 0;
width: 100%;
height: 90px;
z-index: 150; 
background: #fff;
padding-top: 15px;
padding-bottom: 15px;

}

.top img{

width: 190px;
height: 59px;
position: fixed;
left: 4%;

}

.nav{
   
position: fixed;
top: 10px;
right: 4%;
z-index: 999;

}

.nav ul{

display: flex;

}

.nav ul li{

list-style: none;
   
}

.nav ul li a{

text-align: center;
color: #000;
font: 15px / 1 Helvetica, Arial, "Lucida Grande", sans-serif;
text-shadow: 0px 0px 0.1px #000;
float: left;
padding: 1rem 0;
margin: 0 3rem;
position: relative;
letter-spacing: 2px;
  
}

.nav ul li a:last-child{

margin-right: 20px;
  
}

.nav ul li a::before, .nav ul li a::after{
    
content: '';
position: absolute;
width: 100%;
height: 2px;
background: #00a6e3;
left: 0;
transform: scaleX(0);
transition: 1s;

}

.nav ul li a::before{
    
top: 0;
transform-origin: left;

}

.nav ul li a::after{

bottom: 0;
transform-origin: right;

}

.nav ul li a:hover::before, .nav ul li a:hover::after{
transform: scaleX(1);

}

.slider{

width: 100%;
height: 80%;
background: #fff;
margin: 0 auto;

}

.imgSld{

position: relative;
left: 0px;
top: 0px;
background: #fff;
width: 100%;
height: 100%;
margin: 0 auto;
margin-top: 90px;

}

.imgSld-animate{

-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;

}

@keyframes fadein{
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }

}

#particles-js{ 

position: absolute;
background: transparent;
width: 100%;
height: 80%;
z-index: 130;

}

.pop{ 
 
z-index: 999;
background: #00a6e3;
float: left;
width: 231px;
padding: 10px;

}

.pop h1{ 

text-align: justify;
color: #fff;
font: 14px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
padding: 2%;
z-index: 999;

} 

.sobre{

width: 100%;
position: relative;
padding-bottom: 20px;

}

.sobre:after{

content: "";
background: #fff url('http://agenciamund.com.br/img/sobre.gif') center right fixed no-repeat;
opacity: 0.6;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

}

.sobre h2{

font: 25px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;
margin-right: 247px;
margin-top: 0;
padding-top: 20;

}

.sobre p{

margin-left: 28%;
margin-right: 28%; 
text-align: justify;

}

.servicos{

width: 100%; 
background-color: #fdfdfd;
margin-top: 0;
padding-bottom: 10px;

}

.solutions{

margin: 0 auto; 
height: 170px;    
width: 100%; 
background: #00a6e3 url('http://agenciamund.com.br/img/solucao.png') center fixed no-repeat;
background-size: cover;
margin-top: 0;
padding-top: 40px;
padding-bottom: 40px;

}

.solutions h1, .solutions h2{

margin-top: 0;
margin-bottom: 0;

}

.seta{

margin: 0 auto; 
width: 120px;
border-top: 25px solid #00a6e3;
border-left: 60px solid transparent;
border-right: 60px solid transparent; 
border-bottom: 10px solid transparent;
margin-top: 11px;

}

.col-4 {

width: 49.49%;
margin: 0 auto;
margin-bottom: 6px;

}

.row::after {

display: table;
clear: both;
content: "";

}

.container{

width: 80%;
margin: 0 auto;
padding-top: 5%;
padding-bottom: 2%;

}

*{

box-sizing: border-box;

}

.box{

text-align: center;
background-color: #fdfdfd;
height: 240px;
border: 4px solid #fff;
margin: 3px;
padding-left: 15%;
padding-right: 15%;

}

.box:hover{

transition: 0.25s;
background: #fff;

}

.row{

display: flex;
width: 100%;
flex-wrap: wrap;
align-items: center;

}

.box::before, .box::after{

box-sizing: inherit;
content: '';
position: absolute;

}

.box{

transition: color 0.25s;

}

.box::before{

top: 0;
left: 0;

}

.box::after{

bottom: 0;
right: 0;

}

.box::before, .box::after{

border: 4px solid transparent;
width: 0;
height: 0;
z-index: -1;

}

.box:hover::before, .box:hover::after{

width: 100%;
height: 100%;

}

.box:hover::before{

border-top-color: #00a6e3;
border-right-color: #00a6e3;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;

}

.box:hover::after{

border-bottom-color: #00a6e3;
border-left-color: #00a6e3;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;

}

.icon{

width: 50px;
margin: 0 auto;
margin-top: 10%;
margin-bottom: 0%;

}

.icon:hover{

transition: 2s;
-webkit-transform:rotate(360deg);    
 
}

.fa, .fas, .far{

font-size: 40px; 
color: #00a6e3;
 
}

.box h1{

margin: 0%;

}

.portfolio{

display: flow-root;
width: 100%;
background: #061822;
position: relative;
padding-top: 10px;
z-index: 1;

}

.portfolio:after{

content: "";
background: url(http://agenciamund.com.br/img/portfolio.jpg) center fixed no-repeat;
background-size: cover;
opacity: 0.2;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;

}

.portfolio h2{

color: #fff;
margin-top: 0;
margin-bottom: 0;
display: flow-root;

}

.portfolio h2:before, .portfolio h2:after{
 
background: #fff;
display: block;
height: 2px;
border-radius: 100%;
content: " ";
width: 40%;
position: absolute;
left: 0;
top: 1.2em;

}

.portfolio h2:after{

right: 0;  
left: auto; 

}

.portfolio h1{

color: #fff;
margin-top: 0;

}

.flip-box{

background: transparent;
float: left;
width: 25%;
height: 210px;
padding: 3px;

}

.flip-box-inner{

position: relative;
width: 100%;
height: 100%;
transition: transform 0.8s;
transform-style: preserve-3d;

}

.flip-box:hover .flip-box-inner {

transform: rotateX(180deg);

}

.flip-box-front, .flip-box-back {

position: absolute;
width: 100%;
height: 100%;
backface-visibility: hidden;

}

.flip-box-back{
 
background: rgb(0 0 0 / 10%);
transform: rotateX(180deg);

}

.flip-box-back h1{

width: 100%;
background: #00a6e3;
text-align: center;
color: #fff;
cursor: pointer;
margin-bottom: 45px;

}

.flip-box-back p{

text-align: center;
color: #fbfbfb;

}

.flip-box img{

background: #fff;
width: 100%;
height: 100%;

}

.contact{

width: 50%;
background: transparent;
margin: 0 auto;
display: flex;
padding-top: 30px;
padding-bottom: 30px;

}

.contact a{

font-size: 40px;
color: #fff;
margin: 0 auto;
padding: 20px;

}

.contact a:hover{

color: #00a6e3;
-webkit-transform:rotate(360deg); 
transition: 2s;   

}

.rodape{
    
width: 100%;
display: flex;
background: linear-gradient(rgb(14, 13, 14),rgb(0, 166, 227));
padding-top: 10px;

}

.column{

width: 91%;
margin: 0 auto;

}

.left{ 

float: left;
width: 22%;
height: auto;
margin: 2%;
margin-left: 1%;
padding: 11px;
margin-top: 0;

}

.left h1{

color: #f8f8f8;
font: 18px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
text-align: justify;
margin-top: 5px;
border-bottom: 1px solid rgba(248, 248, 248, 0.27); 

}

.left h1:hover, .left p:hover{

color: #fff;

}

.left p{

text-align: justify;
color: #f8f8f8;
font: 14px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
margin-top: 5px;
margin-bottom: 0;

}

.fa-instagram{

padding: 8px;
width: 35px;
height: 35px;
text-align: center;
text-decoration: none;
margin: 1px;
color: #fff;
background: linear-gradient(rgb(128, 0, 128),rgb(255, 0, 10));
box-shadow: inset 0 0 0 22px(rgb(128, 0, 128),rgb(255, 0, 10));

}

.fa-facebook{

padding: 8px;
width: 35px;
height: 35px;
text-align: center;
text-decoration: none;
margin: 1px;
color: #fff;
background-color: rgb(59,89,152);
box-shadow: inset 0 0 0 22px rgb(59,89,152);

}

.fa-instagram:hover, .fa-facebook:hover{

transform: rotate(360deg) scale(1.1);
transition: 1s;

}

.footer{

width: 100%;
display: flex;
background: linear-gradient(rgb(2, 146, 199),rgb(13, 20, 23));
padding: 5px;

}

.footer p{

color: #fff;
text-align: center;
font: 12px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
display: flex;
margin: 0 auto;

}

.pop{
	
opacity: 0;
transition: 1s;
transform: translate3d(-300px, 0, 0);

}

.pop-start{
	
opacity: 1;
transform: translate3d(0,0,0);

}

.solutions{
	
opacity: 0;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
-ms-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;

}

.solutions-start{
	   
opacity: 1;

}

.col-4{
	
opacity: 0;
transition: 1s;
-webkit-transform: scale(0.10);
-moz-transform: scale(0.10);
-ms-transform: scale(0.10);
-o-transform: scale(0.10);
transform: scale(0.10);

}

.col-4-start{
	   
opacity: 1;
-webkit-transform: scale(1.0);
-moz-transform: scale(1.0);
-ms-transform: scale(1.0);
-o-transform: scale(1.0);
transform: scale(1.0);

}

.home{

position: fixed;
top: -100;

}

/* ##############    MOBILE    #################### */

  @media (max-width: 800px) { 

body, html{

width: 100%;
margin: 0;

}

  @media (max-width: 800px) { 

p{

font: 16px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
color: #000;

}

h1{

font: 17px/2 Helvetica, Arial, "Lucida Grande", sans-serif;

}

h2{ 

font: 22px/2 Helvetica, Arial, "Lucida Grande", sans-serif;

}

.top{

position: absolute;
top: 0;
height: 90px;
padding: 20px;

}

.top img{ 

position: absolute;
width: 140px;
height: 52px;

}

.home{

padding: 7px;
cursor: pointer;
z-index: 999;
position: absolute;
top: 20;
right: 4%;
  
}

.menu{

display: none;
width: 100%;
position: fixed;
right: 0;
top: 91; 
z-index: 999;   
background: #fff;
fadeInLeftBig; animation-name:
fadeInLeftBig; animation-duration: 1s;
-webkit-animation-fill-mode: both; 
} 
@-webkit-keyframes fadeInLeftBig { 0% { 
-webkit-transform: translate3d(500px,0,0); 
transform: translate3d(500px,0,0); 

}
}

.menu a{
  
color: #000;
padding: 16px;
font: 16px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
text-align: center;
text-decoration: none;
display: block;
box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.1);
   
}

.menu a:hover{

background-color: #00a6e3;
color: #fff;

}

.slider{

height: 60%;

}

.imgSld{

margin-top: 63px;

}

#particles-js{ 

height: 60%;

}

.pop{ 
 
z-index: 999;
background: #00a6e3;
width: 100%;
margin-bottom: 40px;

} 

.pop h1{ 

text-align: center;
color:#fff;
font: 15px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
padding: 2%;
z-index: 999;

}

.sobre{

width: 100%;
position: relative;
padding-bottom: 20px;

}

.sobre:after{

content: "";
background: #fff url('http://agenciamund.com.br/img/sobre.gif') center center fixed no-repeat;
opacity: 0.4;
position: fixed;
z-index: -1;

}

.sobre h2{

font: 20px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: bold;
margin-right: 0%;

}

.sobre p{

margin-left: 5%;
margin-right: 5%;
margin-bottom: 30px;

}

.solutions{

height: 130px;    
padding-top: 30px;
padding-bottom: 0px;

}

.solutions h2{

font: 23px/2 Helvetica, Arial, "Lucida Grande", sans-serif;

}

.seta{

width: 80px;
border-top: 15px solid #00a6e3;
border-left: 50px solid transparent;
border-right: 50px solid transparent; 
border-bottom: 10px solid transparent;
margin-top: 20px;

} 

.col-4{

width: 100%;
margin: 5;

}

.box{

margin: 5px; 
padding: 2px; 
height: auto;
padding-left: 5%;
padding-right: 5%;

} 

.box h1{

font-weight: bold;

}

.container{

width: 92%;
margin: auto;
padding-top: 50px;
padding-bottom: 20px;

}

.icon{

margin-top: 7%;

}

.portfolio{ 

padding-top: 20px;

}

.portfolio h2{ 

font-weight: bold;

}

.portfolio h2:before, .portfolio h2:after{
 
width: 30%;
top: 1.8em;

}

.flip-box{

width: 100%;

}

.contact{

width: 100%;

}

.rodape{

padding-bottom: 20px;

}

.left{ 

float: center; 
width: 100%; 
height: auto;
margin-left: 0;

} 

.left h1{

font: 21px/2 Helvetica, Arial, "Lucida Grande", sans-serif;

}

.left p{

font: 16px/2 Helvetica, Arial, "Lucida Grande", sans-serif;
margin-top: 10px;
margin-bottom: 0;

}

.nav ul li a{

font: 0px/0 Helvetica, Arial, "Lucida Grande", sans-serif;
position: absolute;
top: -50;