/* confgurações gerais */

body {
   padding: 0px;
   margin: 0px;
   box-sizing: border-box;
   font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
.bgimage {
   display: flex;
   position: fixed;
   overflow: hidden;
   z-index: -100;
   position: bottom;
}
.container {
   max-width: 950px;
   margin: auto;
   display: flex;
}

.logo img {
   width: 300px;
   height: auto;
   padding: 0px 20px;
}
header {
   background-color: #03173f;
}
.headerarea {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100px;
}
.titlesection h1 {
   display: flex;
   justify-content: center;
   color: aliceblue;
   margin-left: 10PX;
   margin-right: 10px;
   text-align: center;
   font-size: 25px;
   text-transform: uppercase;
}
.buttontop {
   display: none;
   width: 50px;
   height: 50px;
   position: fixed;
   right: 20px;
   bottom: 20px;
   cursor: pointer;
   z-index: 99;
   transition: all ease 1s;
}

/* //////////////////////////////////////////////////// menu /////////////////////////////////////////////*/
/* botao efeito */
.containermenu {
   display: inline-block;
   cursor: pointer;
   margin-right: 30px;
   position:relative ;
   right: 50px;
   top: 30px;
 }
 
 .bar1, .bar2, .bar3 {
   width: 35px;
   height: 5px;
   background-color: rgb(16, 209, 26);
   margin: 6px 0;
   transition: 0.4s;
 }
 
 /* Rotate first bar */
 .change .bar1 {
   transform: translate(0, 11px) rotate(-45deg);
 }
 
 /* Fade out the second bar */
 .change .bar2 {opacity: 0;}
 
 /* Rotate last bar */
 .change .bar3 {
   transform: translate(0, -11px) rotate(45deg);
 }

 /*/////////////////menu aberto e fechado ///////////////*/

 .open {
   width: 180px;
 }
 .close {
   width: 0px;
 }
 .menuarea {
   height: 100%;
   position: fixed;
   right: 0;
   top: 0px;
   background-color: #10d11a77;
   z-index: 99;
   transition: all ease 0.5s;
 }
 .menuall {
   display: flex;
   flex-direction: column;
   list-style: none;
   padding: 0;
 }
 .menuind {
   background-color: #10d11a;
   padding: 10px 15px;
 }
 .menuall a {
   margin-bottom: 10px;
   text-decoration: none;
   font-family: 'Share Tech', sans-serif;
   font-weight: bold;
 }
 .menuind:hover {
   background-color: #235a26;
   color: white;
 }


/* area 1 */

.area1 {
   display: flex;
   font-family: 'Share Tech', sans-serif;
   margin: 20px;
   margin-bottom: 20px;
   max-height: 400px;
}
.area1text {
   background-color: rgba(255, 255, 255, 0.486);
   padding: 20px;
   border-radius: 10px;
   flex: 2;
   max-height: 100%;
}
.banner1 img {
   border-radius: 10px;
   flex: 1;
   max-width: 350px;
}
.banner1 {
   flex: 1;
   padding-left: 20px;
}
.buttonsaibamaisarea {
   display: flex;
   justify-content: center;
   margin-bottom: 10px;
}
.buttonsaibamais {
   display: flex;
   width: 150px;
   background-color: green;
   align-items: center;
   text-align: center;
   justify-content: center;
   cursor: pointer;
   padding: 10px;
   border-radius: 5px;
   text-decoration: none;
   color: #f1f1f1;
   transition: all ease 0.5s;
   margin: 10px auto;
}

.buttonsaibamais:hover {
   background-color: rgb(255, 173, 50);
   color: black;
   font-weight: bolder;
}


/* area sliders */


/* /////////////////////////////   area 2 produtos ///////////////////////*/

.section-products {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 30px;
   margin-bottom: 30px;
}
/*///////////////////////////////////////////// area modal ////////////////////////////////////////////// */

/* The Modal (background) */
.modal {
   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 99; /* Sit on top */
   left: 0;
   top: 0;
   width: 100%; /* Full width */
   height: 100%; /* Full height */
   overflow: auto; /* Enable scroll if needed */
   background-color: rgb(0,0,0); /* Fallback color */
   background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }
 
 
 /* The Close Button */
 .closemodal {
   color: rgb(212, 211, 211);
   float: right;
   font-size: 28px;
   font-weight: bold;
 }
 
 .closemodal:hover,
 .closemodal:focus {
   color: black;
   text-decoration: none;
   cursor: pointer;
 }
 /* Modal Header */
.modal-header {
   padding: 2px 16px;
   background-color: #03173f;
   color: white;
 }
 
 /* Modal Body */
 .modal-body {
   padding: 2px 16px;
}
 
 /* Modal Footer */
 .modal-footer {
   padding: 2px 16px;
   background-color: #03173f;
   color: white;
 }
 
 /* Modal Content */
 .modal-content {
   position: relative;
   background-color: #fefefe;
   margin: auto;
   padding: 0;
   border: 1px solid #888;
   width: 80%;
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
   animation-name: animatetop;
   animation-duration: 0.4s
 }
 
 /* Add Animation */
 @keyframes animatetop {
   from {top: -300px; opacity: 0}
   to {top: 0; opacity: 1}
 }
/*///////////////////////////////////////////// fim da area modal ////////////////////////////////////////////// */

/* O contêiner flip box - defina a largura e a altura para o que você quiser. Adicionamos a propriedade border para demonstrar que o flip em si sai da caixa ao passar o mouse (remova a perspectiva se você não quiser o efeito 3D */
.flip-box {
   background-color: transparent;
   min-width: 300px;
   height: 200px;
   border: 1px solid #f1f1f1;
   margin: 5px;
   perspective: 1000px; /* Remove this if you don't want the 3D effect */
 }
 
 /* Este recipiente é necessário para posicionar a parte frontal e traseira */
 .flip-box-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 1s;
   transform-style: preserve-3d;
 }
 
 /* Do an horizontal flip when you move the mouse over the flip box container */
 .flip-box:hover .flip-box-inner {
   transform: rotateY(180deg);
 }
 
 /* Position the front and back side */
 .flip-box-front, .flip-box-back {
   position: absolute;
   width: 100%;
   height: 100%;
   -webkit-backface-visibility: hidden; /* Safari */
   backface-visibility: hidden;
 }
 
 /* Style the front side */
 .flip-box-front {
   background-color: #bbb;
   color: black;
 }
 
 /* Style the back side */
 .flip-box-back {
   background-color: dodgerblue;
   color: white;
   transform: rotateY(180deg);
 }
 .areacard {
   display: flex;
 }

 /* //////////////////////////////////////////////////// box front e back /////////////////////////////////////////////*/
.boxfront1 {
   background-image: url(images/box1.jpg);
}
.boxback1 {
   background-color: #e64630;
}
.boxfront2 {
   background-image: url(images/box2.jpg);
}
.boxback2 {
   background-color: #3280c7;
}
.boxfront3 {
   background-image: url(images/box3.jpg);
}
.boxback3 {
   background-color: #8f46a0;
}
.boxback3 h3 {
   font-size: 15px;
   padding: 5px;
}
.boxfront4 {
   background-image: url(images/boxsistemadeagendamento.png);
}
.boxback4 {
   padding: 10px;
   background-color: #cce7d4;
   color: #010816;
}
.boxfront5 {
   text-justify: auto;
   background-image: url(images/box5.png);
}
.boxback5 {
   background-color: #e1ece4;
   color: #010816;
}
.boxfront6 {
   background-image: url(images/box6.png);
}
.boxback6 {
   background-color: #cce7d4;
   color: #010816;
}
 /* /////////////////////////////////////////// fim da area box front e back /////////////////////////////////////////////*/

 /* /////////////////////////////////////////// area tecnologia /////////////////////////////////////////////*/

.tecnolgies-area {
   display: flex;
   justify-content: center;
   background-color: rgba(17, 14, 184, 0.3);
   padding: 20px;
   margin-bottom: 20px;
   border-top: solid 1px #93b4f7;
   border-bottom: solid 1px #93b4f7;

}
.tecno-images {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   justify-content: center;
}
.tecno-images img {
   width: 100px;
}
.tecnoimage {
   width: 100px;
   margin: 10px;
}

 .angry-animate:hover {
   -webkit-animation:zoom-in-out 1s linear 0s 2 normal;
   -moz-animation:zoom-in-out 1s linear 0s 2 normal;
   -ms-animation:zoom-in-out 1s linear 0s 2 normal;
   animation:zoom-in-out 1s linear 0s 2 normal;
   }
   
   @-webkit-keyframes zoom-in-out {
   0%{ -webkit-transform: scale(1); transform: scale(1); }
   50%{ -webkit-transform: scale(1.2); transform: scale(1.2); }
   100%{ -webkit-transform: scale(1); transform: scale(1); }
   }
   
   @keyframes zoom-in-out {
   0%{ -ms-transform: scale(1); transform: scale(1); }
   50%{ -ms-transform: scale(1.2); transform: scale(1.2); }
   100%{ -ms-transform: scale(1); transform: scale(1); }
   }

/* /////////////////////////////////////////////// area footer //////////////////////////////////////////////////*/
footer {
   background-color: #010816;
   padding-top: 20px;
}
.contact {
   display: flex;
   justify-content: center;
   margin: 30px;
}
.footersideall {
   display: flex;
   color: #f1f1f1;
   margin-top: 20px;
   margin-bottom: 20px;
}
.footersideall a {
   color: #f1f1f1;
}
.footerside1 {
   flex: 2;
   display: flex;
   justify-content: space-around;
}
.footerside2 {
   flex: 1;
   text-align: center;
}
.footerside2 a {
   list-style: none;
   text-decoration: none;
}
.icone {
   display: flex;
   justify-content: center;
}
.icone img {
   width: 30px;
   margin-left: 10px;
   margin-right: 10px;
}
.logocopy {
   width: 100px;
   margin-left: 5px;
}
.footercopy {
   display: flex;
   justify-content: center;
   color: #f1f1f1;
   margin-bottom: 30px;
}