/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 21/abr/2015, 18:10:08
    Author     : XO
*/
html {
    height:100%;
    width:100%;
}
body {
    margin:0;
    padding:0;
    height:100%;
    font-family: 'Ubuntu', sans-serif;

}

.background-image {
    background-image: url('../images/back1.jpg');
    background-size: cover;
    display: block;
    filter: blur(15px)  grayscale(100%);
    -webkit-filter: blur(15px) grayscale(100%);    
    width:100%;
    height:100%;
    left: 0;
    position: fixed;
    right: 0;
    z-index: -1;

}

.noblur {
    filter: blur(0px)  grayscale(0%);
    -webkit-filter: blur(0px) grayscale(0%);    
    transition: 1s filter linear;
    -webkit-transition: 2s -webkit-filter linear;
    -moz-transition: 2s -moz-filter linear;
    -ms-transition: 2s -ms-filter linear;
    -o-transition: 2s -o-filter linear;
}
.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    width:500px;
    transform: translate(-50%, -50%);
    text-align:center;
}
.logowhite {
    position:fixed;
    top:20px;
    left:20px;
    content:url("../images/logowhite.png");
    width:200px;
    /*
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    */
}

.logowhite:hover {
    content:url("../images/logo400.png");
}
video#bgvid {
    position: fixed; right: 0; bottom: 0;
    min-width: 100%; min-height: 100%;
    width: auto; height: auto; z-index: -100;
    /*background: url(polina.jpg) no-repeat;*/
    background-size: cover;
}
.menu_wrapper1 {
    position:fixed;
    top:00px;
    right:-300px;
    height:100%;
    width:300px;
    background-color:#FFF;
}
.menu1 {
    height:19%;
    max-height:150px;
    min-height:100px;
    cursor:pointer;
    text-align:center;
    vertical-align: middle;
    border-top:1px solid #BBB;
}
.menu_close {
    height:50px;
    background-color:#00549f;
    color:#FFF;
    line-height:50px;
    text-align:center;
}

#menu_button_open{
    cursor:pointer;
    position:fixed;
    right:50px;
    top:50px;
    /*
    -webkit-transform: scale(1, 1); // This is the scale for the normal size of the image.
    -webkit-transition-duration: 500ms;
    -webkit-transition-timing-function: ease-out;

   
    -moz-transform: scale(1, 1);
    -moz-transition-duration: 500ms;
    -moz-transition-timing-function: ease-out;

   
    -ms-transform: scale(1, 1);
    -ms-transition-duration: 500ms;
    -ms-transition-timing-function: ease-out;
    -webkit-transition: width 1s, height 1s, -webkit-transform 1s; 
    transition: width 1s, height 1s, transform 1s;
    transition-property: all;
    transition-duration: 0.3s;
    transition-delay: 0.0s;
    cursor:pointer;
    */
}

#menu_button_open:hover {
    cursor:pointer;
    /*
        -webkit-transform: scale(1.2, 1.2); // This is the enlarged size scale of the image.
        -webkit-transition-duration: 500ms;
        -webkit-transition-timing-function: ease-out;
    
        
        -moz-transform: scale(1.2, 1.2);
        -moz-transition-duration: 500ms;
        -moz-transition-timing-function: ease-out;
    
        
        -ms-transform: scale(1.20, 1.20);
        -ms-transition-duration: 500ms;
        -ms-transition-timing-function: ease-out;
         -webkit-transform: rotate(180deg) scale(1.2, 1.2); 
        transform: rotate(180deg) scale(1.2, 1.2);
        transition-property: all;
        transition-duration: 0.3s;
        transition-delay: 0.0s;
    */
}
.menu1 > div > img {
    width:180px;
    position:absolute;
    bottom:10px;
    right:10px;
    visibility:hidden;
    opacity:0;
    transition:visibility 0.3s linear 0.3s,opacity 0.3s linear, width 0.3s linear, height 0.3s linear;
}
.menu1:hover > div > img {
    visibility:visible;
    width:80px;
    opacity:1;
    transition:visibility 0.3s linear 0.3s,opacity 0.3s linear, width 0.3s linear, height 0.3s linear;
    transition-delay:0.6s;
}

#mensagem, #grantax, #rg, #rogranit, #contactos {
    border-left:10px solid #c5960b;
    background-color:#FFF;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
}
#rg {
    border-left:10px solid #943312;
}
#grantax {
    border-left:10px solid #0152a3;
}
#rogranit {
    border-left:10px solid #a6ce39;
}
#contactos {
    border-left:10px solid #555;
}

#mensagem p+p , #grantax p+p, #rg p+p, #rogranit p+p,#contactos p+p{
    padding-top:10px;
    color:#AAA;
    font-weight: 300;
}

#mensagem > p , #rg > p,#grantax > p, #rogranit > p, #contactos > p{
    color:#c5960b;
    font-weight:500;
    padding-top:50px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
    font-size: 1em;
}
#rg > p {
    color:#943312;
}
#grantax > p {
    color:#0152a3;
}
#rogranit > p {
    color:#b9dd57;
}
#contactos > p {
    color:#555;
}
#mensagem:hover, #rg:hover, #grantax:hover, #rogranit:hover, #contactos:hover  {
    background-color:#dfb436;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
}
#rg:hover {
    background-color:#a14d31;
}
#grantax:hover {
    background-color:#2068b0;
}
#rogranit:hover {
    background-color:#c8e772;
}
#contactos:hover {
    background-color:#555;
    
}
#mensagem:hover  p + p,  #rg:hover  p + p,#grantax:hover  p + p, #contactos:hover p+p{

    margin-top:0px;
    opacity:0;

    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: ease-in-out;

}
#mensagem:hover > p, #rg:hover > p,#grantax:hover > p,#rogranit:hover > p,#contactos:hover > p {
    font-size:1.2em;
    color:#FFF;
    padding-top:70px;
    transition-property: all;
    transition-duration: 0.5s;
    transition-delay: 0.2s;
    font-size: 1.2em;

}
.empresa_ano, .empresa_nome {
    color:#FFF;
    font-weight: 500;
    font-family: Ubuntu;
    font-size:1.5em;
    text-align: center;
}
.empresa_ano {
    font-size:1em;
    font-weight:300;
}.logo_top {
    position: absolute;
    left:20px;
    top:20px;
    width:200px;
    -webkit-filter: drop-shadow(0px 0px 5px #444);filter: drop-shadow(0px 0px 1px #111);
    display:none;
}

.menu_button_open_hello {
    -webkit-animation: pusate 0.5s infinite alternate;
    -moz-animation: pusate 1s infinite alternate;
    -animation: pusate 1s infinite alternate;
    text-shadow: 0 0 30px #333;
}
@-webkit-keyframes pusate {
    from { box-shadow: 0 0 10px #333; }
    to { box-shadow: 0 0 30px #FFF; }
}
@-moz-keyframes pusate {
    from { box-shadow: 0 0 10px #333; }
    to { box-shadow: 0 0 30px #FFF; }
}
@keyframes pusate {
    from { box-shadow: 0 0 10px #333; }
    to { box-shadow: 0 0 30px #FFF; }
}
#content_wrapper {

    width:100%;
    background-color:#FFF;
}
.content {
    width:980px;
    padding:50px 0  50px 0;

    margin:auto;
}
.text {
    color:#666;
    font-weight: 300;
    line-height:1.5em;
    text-align:justify;
    margin:10px 0 10px 0;
}
.hideme {
    opacity:0;
    -ms-transform: scale(0.1,0.1); /* IE 9 */
    -webkit-transform: scale(0.1,0.1); /* Safari */
    transform: scale(0.1,0.1);
}
.showme {
    opacity:1;
    -ms-transform: scale(1,1); /* IE 9 */
    -webkit-transform: scale(1,1); /* Safari */
    transform: scale(1,1);
    transition-property: all;
    transition-duration: 0.1s;
    transition-delay: 0s;
}
.title {
    font-size:2em;
    text-align:center;
    color:#555;
}
.border {
    border:8px solid #c5960b;
    border-top:0px;
    border-left:0px;
    border-right:0px;
    border-radius: 50%;
    transition-property: all;
    transition-duration: 1s;
    transition-delay: 0s;
}



#loader-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 350px;
    height: 350px;
    margin: -180px 0 0 -180px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00549f;
    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #c5960b;
    -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #00bce4;
    -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */
      animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */
}
 
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(0deg);  /* IE 9 */
        transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */
    }
    100% {
        -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */
        -ms-transform: rotate(360deg);  /* IE 9 */
        transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */
    }
}
#all {
    /*display:none;*/
}
a {
    text-decoration: none;
    color: #00549f;
    border-bottom:1px dotted #00549f;
}
a:hover {
    color: #c5960b;
    border-bottom:1px dotted #c5960b;
}
.circle {
    border:5px solid #FFF;
    width:80px;
    border-radius: 50%;
    height:80px;
    vertical-align: middle;
    line-height:80px;
    color:#FFF;
        
}
.lang {
    text-shadow: 0px 0px 0px #000;
    position:fixed;
    top:20px;
    right:20px;
    color:#FFF;
}
.lang a{
    color:#c5960b;
}
.lang a:hover{
    color:#AAA;
}
.sitelink a{
    border-bottom:1px dotted blue;
}
#p5 p{
    color:#FFF!important;
}



.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    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 */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    
    max-width:800px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
.modal-content2 {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    
    max-width:80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 20px ;
    background-color: #c5960b;
    color: white;
}

.modal-body {padding: 15px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #c5960b;
    color: white;
}
.tableForm {
    margin-top:20px;
}
.tableForm td {
    margin-top:40px!important;
    padding:10px;
    font-style: italic;
    
}