/*#cards{background: green;}*/

*{
    -webkit-touch-callout: none; /* anula el efecto visual del touch prolongado sobre el objeto */

    user-select: none; /* user-select, hace el objeto no seleccionable */

    -webkit-tap-highlight-color: rgba(0,0,0,0); /* anula el feedback de color al hacer tap en un link */
    -webkit-tap-highlight-color: transparent; /* similar anterior en algunos android */
}


html, .fullscreen {
    height: 100%;
    min-height: 100%;
    max-height: 100%;
}

body {
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */

    background-color: green;
    color: white;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    padding: 0;
    height: 100%;
    min-height: 100%;
    max-height: 100%;
    /*font-size: 3vw;*/

}



h1, h2, h3{
    color: #545454;
    font-family: "Sonsie One",serif;
    text-shadow: 2px 2px 2px #ffffff;
}

h4{
    color: #000000;
}

.help h4{
    color: #FFFFFF;
}

h5{
    font-weight: bold;
    text-decoration: underline;
}

#wrapper {
    min-height:100%;
    max-height: 100%;
    position:relative;
}

#header {
   /* background:#ededed;*/
   /* padding:10px;*/
}

#content {
    padding-bottom:1%; /* Height of the footer element */
    position:absolute;
    top:0;
    left:0;
}

#footer {
    background:#ffab62;
    width:100%;
    height:1%;
    position:absolute;
    bottom:0;
    left:0;
}


.top-buffer { margin-top:3px; }
.top-buffer10 { margin-top:10px; }
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }

/* centered columns styles */
.row-centered {
    text-align:center;
}
.col-centered {
    display:inline-block;
    float:none;
    /* reset the text-align */
    text-align:left;
    /* inline-block space fix */
    margin-right:-4px;
}

.imagen100per100{
max-width: 100%;
max-height: 100%;
}

.sectionHeight100 {
height:100vh;
}

.sectionHeight10 {
height:10vh;
}

.sectionHeight90 {
height:90vh;
}

.sectionHeight33 {
height:33vh;
}

.footer {
  position: absolute;
  bottom: 0;
}

.imgSuitSelected {
   border: 2px solid darkgreen;
  padding: 2px;
} 

/******************** FLIP IMAGE */


.flip_panel {
    width: 100%;
    height: 100%;
    position: relative;
}

.card {
    width: 100%;
    height: 100%;
    -o-transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s;
    transition: all .5s;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    
}

.front {
    z-index: 2;
    
}

.back {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);  
    transform: rotateY(180deg); 

    position: absolute;
    top: 0px;
    left: 0px;
    
}

.flip_panel.front.flipped {
    z-index: 1;
    -webkit-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip_panel.back.flipped {
    z-index: 2;   
    -webkit-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    transform: rotateX(0deg);
    
}


/******************* FIN FLIP IMAGE */

.panel-footer.panel-custom {
    background: lightgray;
    color: black;
    font-size: smaller;
}

.btn-droppable { /*width: 90px; height: 125px; padding-left: 2px; */}
.btn-draggable { /*width: 80px;*/ }

.thumbnail img {
    max-height: 100%;
    max-width: 100%;
}


/*.btn {
    font-family: Arial;
    font-style: normal;
    font-size: x-small;
}*/

.modal-title{
    color: black;
}

/* statistics tab panel */
.nav-tabs{
  /* background-color:#161616;*/
  background-color:#FFFFFF;
  border-radius: 4px 4px 0 0
}
.tab-content{
    /*background-color:#303136;*/
    background-color:#FFFFFF;
    color:#fff;
    padding:5px;
    border-radius: 0 0 4px 4px;
}
.nav-tabs > li > a{
  border: medium none;
}
.nav-tabs > li > a:hover{
  /*background-color: #303136 !important;*/
  background-color: #D8D8D8 !important;
    border: medium none;
    border-radius: 0;
    /*color:#fff;*/
}


#wrap {
  min-height: 85%;
}

#main {
  /*overflow:auto;*/
  padding-bottom:15%; /* this needs to be bigger than footer height*/
}

.footer {
  width: 77%;
  position: fixed;
  /*margin-top: -100px;*/ /* negative value of footer height */
  height: 10%;
  /*clear:both;*/
  /*padding-top:20px;*/
  bottom:0;
}