* {
  box-sizing: border-box;
}
body {
  background-color: #fff!important;  
}
.header-title-shadow {
  text-shadow: 3px 3px 3px #696969;
  color: #02465d;
  font-family: 'Lora', serif;
}
#main {
   /* padding-top: 30px;*/
     padding-top: 5px;
     margin-top: 25px;
}

.carousel-caption {
  bottom:5px;
  opacity:0.65;
  background-color:#000;
  left:5px;
  right:5px;
  padding-left: 5px;
  font-size:12px!important;
  max-height: 18px;
  padding-top:0;
  padding-bottom:0;
  margin:0;
}
.carousel-caption a {
     color: #ffffff;
}
.carousel-inner img {
  width:100%;
  /*max-height: 300px!important;*/
}
.panel .accordion-plus-toggle:before, .thumbnail .accordion-plus-toggle:before{
   font-family: FontAwesome;
   content: "\f078";
   float: right;
   color: orange;
}
.panel .accordion-plus-toggle.collapsed:before, .thumbnail .accordion-plus-toggle.collapsed:before {
   content: "\f054";
   color: orange;
}
.panel .accordion-arrow-toggle:before, .thumbnail .accordion-arrow-toggle:before   {
   font-family: FontAwesome;
   content: "\f078";
   float: right;
   color: orange;
}
.panel .accordion-arrow-toggle.collapsed:before, .thumbnail .accordion-arrow-toggle.collapsed:before  {
   content: "\f054";
   color: orange;
}
.thumbnail hr, .panel hr {
   margin-top:2px;
   margin-bottom:2px;
}
.thumbnail, .panel {
   word-wrap:break-word; 
}
html {
min-height: 100%;
position: relative;
}
.container {
min-height: 100%;
/*margin-bottom: 100px;*/
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width:100%;
max-height:60px;
border:0;
}
.pd {
    padding: 5px;
}
.scrollbutton {
  /*  background-color: red;
    width:20px;
    height: 20px;
    border-radius:10px;*/
    position:fixed;
    bottom: 160px;
    right: 10px;
    cursor: pointer;
    z-index:999;
    display: none;
    text-shadow: 2px 2px 2px #888;
}
.scrollbutton a, .scrollbutton a:hover {
     color: #800000;
}
footer a {
  color:#02465d;
}
footer a:hover {
  color: #696763;
}
.ptop {
  padding:10px;
 
}
/*MENU SUPERIOR*/
.menu ul li {
  display:inline-block;
  padding-left: 15px;
  padding-right: 15px;
  }
.menu ul li:last-child {
  padding-right: 0;
}
.menu ul li a {
  background: #FFFFFF;
  color: #696763;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  font-weight: 300;
  padding:0;
  padding-right: 0;
  margin-top: 20px;
}
.menu ul li a i{
  margin-right:3px;
}
.menu ul li a:hover {
  color:#3A5C83;
  background:#fff;
}
.navbar-inverse, .navbar-collapse { 
 /* background-color: rgba(0,0,0,0.7);*/
 background-color:#ffffff;
  border: none;
  color: #02465d; 
}
header {
 /* background-image:url('../img/costazul.jpg'); 
  background-repeat: no-repeat;
  background-size: 100%;*/
  height:50px;
  background-color:#ffffff;
  background-position: center;
  
background-size:cover;
 /* box-shadow: 0px 5px 4px rgba(50,50,50,0.45);  /*5px sombra inferior / 5px sombra lateral / 0.45 opacidade */
}
/*NOME DO SISTEMA*/
.navbar-inverse .navbar-brand {
   color: #fff; 
}
.navbar-inverse .navbar-nav>li>a {
   color: #02465d;
  /* transition: all 1s linear;*/
}
/*HOME*/
.navbar-inverse .navbar-nav > .active > a {
   background-color: #FFFFFF !important;
   color: #02465d;
  /* box-shadow: 0px 3px 3px rgba(50,50,50,0.45); /*5px sombra inferior / 5px sombra lateral / 0.45 opacidade   
   text-shadow: 5px 5px 5px #fff; */
}
/*HOME AO APONTAR O MOUSE*/
.navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #eee;
    color: #02465d;
    text-shadow: 5px 5px 5px #fff;  
} 
.navbar-nav > .active > a:hover {
    font-size: 15px;
    color: #02465d;
    text-shadow: 5px 5px 5px #fff;
} 
/*BOTÃO - RESPONSIVE*/
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover, .navbar-inverse .navbar-toggle {
    background-color: #00c1c4;
    border: none;
}
@media (max-width:767px) {
    .navbar-nav .open .dropdown-menu {
        background-color:#fff;
    }
    .ptop {
        padding-top:5px;
    }
    .navbar-inverse .navbar-nav > li > a {
      margin-bottom: 15px;
      padding-left: 5px;
      padding-right: 5px;
    }
    .navbar-inverse .navbar-nav > .active > a {
      margin-right: 2px;
    }
    .container-fluid {
      background-color: #FFFFFF;
    }
}
/*BARRA DO MENU AO APONTAR O MOUSE*/
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    background-color: #eee;
    color: #02465d;
    }
/*BARRA DO MENU AO CLICAR COM O MOUSE*/ 
.navbar-inverse .navbar-nav > .open > a, .navbar-inverse .navbar-nav > .open > a:focus, .navbar-inverse .navbar-nav > .open > a:hover {
    color: #02465d;
    background-color: #eee;
} 
/*SUBMENU*/
.navbar-inverse .navbar-nav .open .dropdown-menu > li > a, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover {
color: #02465d;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}
.dropdown-submenu.pull-left {
    float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}
/*QUANTIDADE*/
.huge {
   font-size: 17px;
   /* font-size: 21px;*/
    line-height: normal;  
   /* font-family: 'Bookman old Style';*/
   font-family: 'Georgia', 'Bookman old Style';
}
@media screen and (min-width:260px) and (max-width:767px)  {
  .huge {
      font-size: 20px;
  }
  .titleHome {
    font-size: 15px;
}
  }
  @media screen and (min-width:768px) and (max-width:991px)  {
    .titleHome {
      font-size: 12px;
  }
  .huge {
    font-size: 15px;
}
    }
 /* @media screen and (max-width:1163px)  and (max-width:767px){
    .huge {
        font-size: 16px;
    }
    }*/


/*PAINÉIS*/
/*ícone*/
.icon-box {
    display: block;
    float: left;
    margin: 0 15px 10px 0;
    width: 70px;
    height: 70px;
    line-height: 75px;
    vertical-align: middle;
    text-align: center;
    font-size: 40px;
}
/*círculo*/
.set-icon {
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}  
/*cor do círculo*/
.bg-color-red {
    background-color: #DB0630;
    color: #fff;
}
/*cor do círculo*/
.bg-color-cinza {
    background-color: #eee;
    color: #fff;
}
/*cor do círculo*/
.bg-color-laranja {
    background-color: #FF8C00;
    color: #fff;
}
.bg-color-verde-escuro {
    background-color: #34af23;
    color: #fff;
}
.bg-color-verde-claro {
  background-color: #008641;
  color: #fff;
}
/*cor do círculo*/
.bg-color-blue {
    background-color: #2aabd2;
    color: #fff;
} 
.bg-color-blue-default {
    background-color:#26c6da;
    color: #fff;
}
.bg-color-pink {
     background-color:#ff3674;;
    color: #fff;
}
.bg-color-yellow-default {
     background-color:#ffbf00;
    color: #fff;
}
.bg-color-laranja-dark {
     background-color:#eb2f06;
    color: #fff;
}
.bg-color-salmao {
    background-color:#FA8072;
    color: #fff;
}
.bg-color-ciano {
    background-color:#00c1c4;
    color: #fff;
}
.bg-color-aqua {
  background-color:#00FFFF;
  color: #fff;
}
.bg-color-rosa {
  background-color:#DC143C;
  color: #fff;
}
.bg-color-azul-turquesa {
  background-color:#288ba8;
  color: #fff;
}
.bg-color-teal {
    background-color:#008B8B;
    color: #fff;
}
.bg-color-success {
    background-color:#3CB371;
    color: #fff;
}
.text-color-laranja {
     color: #FF8C00;
}
.text-color-info {
    color: #2aabd2;
}
.panel-inscricoes {
  background-color: #004B80; 
}
.panel-acervos {
  background-color: #F5A017;
}
.panel-meusCursos {
  background-color: #65729B;
}
.panel-servicos {
  background-color: #C1C7D2;
}
.panel-container{
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
 /* border: 1px solid #eee;*/
}
.panel-container > .panel-heading {
 /* border-color: #eee;*/
  color: #FFFFFF;  
}
.panel-container> a {
  color: #ffffff;
}
.panel-container > a:hover {
  color: #ffffff;
}
/*
.panel-cinza {
    background-color: #eee;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #eee;
}
.panel-cinza > .panel-heading {
    border-color: #eee;
    color: #02465d;  
}
.panel-cinza> a {
    color: #02465d;
}
.panel-cinza > a:hover {
    color: #02465d;
}*/
/*NÚMEROS*/
.badge {
    margin-top: -5px;
    padding: 3px 6px;
    vertical-align: top;
    background: #D9534F;
}
footer img {
    width: 60px;
    height: 60px;
    padding: 3px;      
}
.logo img {
   width:250px;
   height:130px;
   padding-top:10px;
   padding-bottom: 5px;
}
/*RESPONSIVE*/
 img {
    max-width: 100%;
     }     
/*CONTEÚDO*/
#conteudo {
  /*  box-shadow: 0px 3px 3px 5px rgba(50, 50, 50, 0.45) ; /*3px sombra inferior / 5px sombra lateral / 0.75 opacidade */ 
  /*  padding-bottom: 80px;
    border-radius: 3px;*/
}
/*FOOTER*/
/*.footer { 
color: #02465d;
text-indent: 2px;
clear: both;
position: fixed;
bottom: 0;
left: 0;
width: 100%; 
height: 10%;
opacity: 0.65;
}*/
 .footer {
        background-color: #f5f5f5;
        color: #02465d;
        text-align: center;
       /*  box-shadow: 0px 3px 3px 3px rgba(50, 50, 50, 0.45) ; /*3px sombra inferior / 5px sombra lateral / 0.75 opacidade */ 
       border-radius: 5px;
       left: 0;
       right: 0;
       bottom: 0;
       position: fixed;
       width: 100%;
       height: 30px;
    }
    @media (min-width: 378px) {
.open {
  visibility: hidden;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  display: block;
  z-index: 9000;
  position: absolute;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
   opacity: 1;
  filter: alpha(opacity=100);
  visibility: visible;
}
.open > li > a {
  padding: 8px 16px;
  color: #333333;
}
.open > li > a img {
  margin-top: -3px;
}
.open > li > a:focus {
  outline: 0 !important;
}

.open > li:first-child > a {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.open > li:last-child > a {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
}
@media (min-width: 378px) {
  .navbar-nav > li > .dropdown-menu, .dropdown .dropdown-menu {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -moz-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -o-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -ms-transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
    transition: all 370ms cubic-bezier(0.34, 1.61, 0.7, 1);
  }
  .navbar-nav > li.open > .dropdown-menu, .dropdown.open .dropdown-menu {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-transform-origin: 29px -50px;
    -moz-transform-origin: 29px -50px;
    -o-transform-origin: 29px -50px;
    -ms-transform-origin: 29px -50px;
    transform-origin: 29px -50px;
  }
  .navbar-nav > li > .dropdown-menu:before {
    border-bottom: 11px solid rgba(0, 0, 0, 0.2);
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    left: 12px;
    top: -11px;
  }
  .navbar-nav > li > .dropdown-menu:after {
    border-bottom: 11px solid #FFFFFF;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    content: "";
    display: inline-block;
    position: absolute;
    left: 12px;
    top: -10px;
  }
  .navbar-nav.navbar-right > li > .dropdown-menu:before {
    left: auto;
    right: 12px;
  }
  .navbar-nav.navbar-right > li > .dropdown-menu:after {
    left: auto;
    right: 12px;
  }
}
/*FORMULÁRIO*/
legend {
  
  font-size: 18px;
  color: #02465d; 
}
legend small {
  font-size: 15px;
  color: #999999;
}
label,
input,
button,
select,
textarea {
  font-size: 14px;
  font-weight: normal;
  /*line-height: 20px;*/
}
input,
button,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #999999;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #999999;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #999999;
}
.control-group.warning .control-label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
  color: #c09853;
}
.control-group.warning .checkbox,
.control-group.warning .radio,
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  color: #c09853;
}
.control-group.warning input,
.control-group.warning select,
.control-group.warning textarea {
  border-color: #c09853;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.warning input:focus,
.control-group.warning select:focus,
.control-group.warning textarea:focus {
  border-color: #a47e3c;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e;
}
.control-group.warning .input-prepend .add-on,
.control-group.warning .input-append .add-on {
  color: #c09853;
  background-color: #fcf8e3;
  border-color: #c09853;
}
.control-group.error .control-label,
.control-group.error .help-block,
.control-group.error .help-inline {
  color: #b94a48;
}
.control-group.error .checkbox,
.control-group.error .radio,
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  color: #b94a48;
}
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
  border-color: #b94a48;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.error input:focus,
.control-group.error select:focus,
.control-group.error textarea:focus {
  border-color: #953b39;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392;
}
.control-group.error .input-prepend .add-on,
.control-group.error .input-append .add-on {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #b94a48;
}
.control-group.success .control-label,
.control-group.success .help-block,
.control-group.success .help-inline {
  color: #468847;
}
.control-group.success .checkbox,
.control-group.success .radio,
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  color: #468847;
}
.control-group.success input,
.control-group.success select,
.control-group.success textarea {
  border-color: #468847;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.success input:focus,
.control-group.success select:focus,
.control-group.success textarea:focus {
  border-color: #356635;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b;
}
.control-group.success .input-prepend .add-on,
.control-group.success .input-append .add-on {
  color: #468847;
  background-color: #dff0d8;
  border-color: #468847;
}
.control-group.info .control-label,
.control-group.info .help-block,
.control-group.info .help-inline {
  color: #3a87ad;
}
.control-group.info .checkbox,
.control-group.info .radio,
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  color: #3a87ad;
}
.control-group.info input,
.control-group.info select,
.control-group.info textarea {
  border-color: #3a87ad;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.control-group.info input:focus,
.control-group.info select:focus,
.control-group.info textarea:focus {
  border-color: #2d6987;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3;
}
.control-group.info .input-prepend .add-on,
.control-group.info .input-append .add-on {
  color: #3a87ad;
  background-color: #d9edf7;
  border-color: #3a87ad;
}
input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid {
  color: #b94a48;
  border-color: #ee5f5b;
}
input:focus:invalid:focus,
textarea:focus:invalid:focus,
select:focus:invalid:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
     -moz-box-shadow: 0 0 6px #f8b9b7;
          box-shadow: 0 0 6px #f8b9b7;
}
.input-prepend .add-on:first-child,
.input-prepend .btn:first-child {
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.input-append input,
.input-append select,
.input-append .uneditable-input {
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.input-append input + .btn-group .btn:last-child,
.input-append select + .btn-group .btn:last-child,
.input-append .uneditable-input + .btn-group .btn:last-child {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}
.input-append .add-on:last-child,
.input-append .btn:last-child,
.input-append .btn-group:last-child > .dropdown-toggle {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}
.input-prepend.input-append input,
.input-prepend.input-append select,
.input-prepend.input-append .uneditable-input {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.input-prepend.input-append input + .btn-group .btn,
.input-prepend.input-append select + .btn-group .btn,
.input-prepend.input-append .uneditable-input + .btn-group .btn {
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}
.input-prepend.input-append .add-on:first-child,
.input-prepend.input-append .btn:first-child {
  margin-right: -1px;
  -webkit-border-radius: 4px 0 0 4px;
     -moz-border-radius: 4px 0 0 4px;
          border-radius: 4px 0 0 4px;
}
.input-prepend.input-append .add-on:last-child,
.input-prepend.input-append .btn:last-child {
  margin-left: -1px;
  -webkit-border-radius: 0 4px 4px 0;
     -moz-border-radius: 0 4px 4px 0;
          border-radius: 0 4px 4px 0;
}
.form-search .input-append .search-query,
.form-search .input-prepend .search-query {
  -webkit-border-radius: 0;
     -moz-border-radius: 0;
          border-radius: 0;
}
.form-search .input-append .search-query {
  -webkit-border-radius: 14px 0 0 14px;
     -moz-border-radius: 14px 0 0 14px;
          border-radius: 14px 0 0 14px;
}
.form-search .input-append .btn {
  -webkit-border-radius: 0 14px 14px 0;
     -moz-border-radius: 0 14px 14px 0;
          border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .search-query {
  -webkit-border-radius: 0 14px 14px 0;
     -moz-border-radius: 0 14px 14px 0;
          border-radius: 0 14px 14px 0;
}
.form-search .input-prepend .btn {
  -webkit-border-radius: 14px 0 0 14px;
     -moz-border-radius: 14px 0 0 14px;
          border-radius: 14px 0 0 14px;
}
/*FLIP*/
	 /* 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: #fff;
  width: 100%;
  height: 100%;
  min-height: 820px;
  border: 1px solid #f1f1f1;
  transform-style: preserve-3d;  
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* 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;
}

/* 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%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
  transform-style: preserve-3d;  
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
    
  background-color: #777777;
  color: black;
}
/* Style the back side */
.flip-card-back {
  /*background-color: #fff;*/
  backface-visibility: hidden;  
/*  color: white;*/
    width: 100%;
  height: 100%;
       min-height: 820px;
  transform: rotateY(180deg);
  transform-style: preserve-3d;  
} 
/*footer*/
@media screen and (min-width:280px) and (max-width:695px) {
    footer img {
    width: 30px;
    height: 30px; 
    }
    span {
    font-size:11px;
    }
    .contato {
   display: none;
    }
}