*{
    font-family: Lato, Arial, Helvetica, sans-serif;
    box-sizing: border-box;
}


body, html {
 margin: 0;
 padding: 0;
 height: 100%;
}



/* genericas */
.center
{
    text-align: center;
}
.esquerda
{
    text-align: left;
}

p {
    font-size: 13pt;
}


img.respo {
    max-width: 100%;
    height: auto;
    background-color: rgba(255, 255, 255, 0.8);
    padding:50px;
}

/* vv */
a:hover, a:focus {
  text-decoration: none;
}

@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: orange; }
}


/* shrinking menu */
header, header * {
    transition: all 1s;
    -moz-transition: all 1s; /* Firefox 4 */
    -webkit-transition: all 1s; /* Safari and Chrome */
    -o-transition: all 1s; /* Opera */
}

header{
    background: rgba(255, 255, 255, 0.8);
    float: left;
    width: 100%;
    position: fixed;
    z-index: 1000;
    height: 80px;    
    display:block;
}

header img {
    float: left;
    height: 75px;
    padding-top: 5px;    
}

header .menuIcon {
  display: none;
}

header ul{
    list-style-type: none;
    float: right;
    margin: 0px;
}

header li{
    float: left;
    padding-top: 30px;
    padding-bottom: 25px;
}
    
header li a {
    padding-top: 30px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

header a{
    text-decoration: none;
}

header li * {
    color: #283382;
    font-size: 18px;
    text-decoration: none;    
}

header a:hover, a:active
{
    text-decoration: none;    
    background-color: #712774;
    color: white;
    cursor: pointer;
}

/* Sizes for the bigger menu */
header.large{
    height: 80px;  
}

header.large li a {
    padding-top: 30px;
    padding-bottom: 25px;
    padding-left: 15px;
    padding-right: 15px;
}

header.large li{
    padding-top: 30px;
    padding-bottom: 25px;
}

header.large li a {
   
    font-size: 18px;
}

header.large img
{
    height: 80px;
}

/* Sizes for the smaller menu */
header.small { 
    height: 50px; 
    background-color: white;
    box-shadow: 0 5px 15px gray;
}
header.small li{ 
    padding-top: 15px;
    padding-bottom: 13px;
}

header.small li a {
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    font-size: 16px;
    color: black;    
}

header.small a:hover, header.small a:active
{
    text-decoration: none;    
    background-color: #712774;
    color: white;
    cursor: pointer;
}

header.small img
{
    height: 40px;
}

:focus {
outline: 0;
}


.jqMediaQueryHack {float:left;}
/*
@media screen and (max-width: 992px) {
	.jqMediaQueryHack {float:none;}

    header, header.large, header.small { 
        height: 75px; 
        background-color: white;
        box-shadow: 0 5px 15px gray;
        z-index: 10000;
    }

    header img {
        height: 70px;
    }

    header .menuIcon {
        margin: 0px;
        display: inline;
    }

    header li:not(:last-child){
        display: none;
    }

}
*/
.heroparalax { 
    /* The image used */
    background-image: url("../img/hero02.jpg");

    /* Set a specific height */
    height: 100%;
    width: 100%; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
/*
    display: flex;
    justify-content: center;
    align-items: center;   
    */
}

.heroparalax h1 {
    position: absolute;
    bottom: 15rem;
    left: 15rem;
}

@keyframes blink { 
   50% { border-color: #283382; } 
}


.wrap
{
    color: #712774;
    font-size: 3em;
    text-shadow: 2px 2px 4px #283382;    
    text-decoration: none;
    animation: blink .5s step-end infinite alternate;
}

.typewrite > .wrap { padding-right:.15em;border-right: .15em solid #712774;}

#sobre, #solucoes, #parcerias, #certificacoes, #contactos
{
    padding:50px;
}

 .endspace {
    padding: 50px;
    padding-top: 0px;
 }

 .round
 {
    background-color: white;
    border: 4px solid whitesmoke;
    border-radius:50%;
 }

#parcerias
{
    /*
    border-top: 2px solid #004D8A;
    border-bottom: 2px solid #004D8A;
    */
    padding-bottom: 50px;
    background: #FCFCFC; 
}

#certificacoes
{
    background: #f2f2f2;
    padding-bottom: 50px;    
}

#solucoes
{
        /* The image used */
    background-image: url("../img/023.jpg");

    /* Set a specific height */
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    color: white;
}


.contactos
{
    background-color: #222;
    background-image: url(../img/map-image.png);

    color: white;

    /* Set a specific height */
    height: 430px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;    
}

 .mapas {
  width: 100%;
  height: 250px;
}


/* footer */
footer {
    color: white;
    width: 100%;
    background-color: #283382;
    z-index: 6;
    padding:10px;
}

footer > a,
footer > a:visited,
footer > a:link {
    color: white;
}

.fa
{
    padding: 10px;
    padding-right: 5px;
}


/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
    background-color: transparent;
    width: 280px;
    height: 275px;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
    cursor: pointer;
    margin-bottom: 20px;
  }
  
  /* This container is needed to position the front and back side */
  .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
    border: 1px solid #712774;    

    -webkit-box-shadow: 3px 3px 10px 0px rgba(113,39,116,0.37);
    -moz-box-shadow: 3px 3px 10px 0px rgba(113,39,116,0.37);
    box-shadow: 3px 3px 10px 0px rgba(113,39,116,0.37);     
  }
  
  /* Do an horizontal flip when you move the mouse over the flip box container */
  .flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
  }
  
  /* Position the front and back side */
  .flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  
  /* Style the front side (fallback if image is missing) */
  .flip-card-front {
    background-color: white;
    color: black;
  }
  
  /* Style the back side */
  .flip-card-back {
    background-color: #283382;
    color: white;
    transform: rotateY(180deg);
 }

  .flip-card-front > *
  {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
  
.flip-card-back {
    font-size: 1.25rem;
    padding:12px;
    display: grid;    
 }

 .flip-card-back > *
 {
     margin:auto;
 }

 .icon_solucoes{
    font-size: 7rem;

 }