/* Sketch: um framework responsivo simples e leve para paginas HTML  
 *
 * Marcelo Barbosa,
 * maio, 2017.
 */

/* ------ Importacoes ------ */
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css); 

/* ------ Declaracoes globais ------ */ 
* { box-sizing: border-box; margin: 0; font-family: Arial, Verdana, Sans-serif; }

html,body { height: 100%; padding: 0; border: 0; margin: 0; }
body { font-size: 100%; }

/* --------- Seletor classe -------- */

/* nivelamento de altura em 12 niveis */
.height-lv1 { height: 8.33%; }
.height-lv2 { height: 16.66%; }
.height-lv3 { height: 25%; }
.height-lv4 { height: 33.33%; }
.height-lv5 { height: 41.66%; }
.height-lv6 { height: 50%; }
.height-lv7 { height: 58.33%; }
.height-lv8 { height: 66.66%; }
.height-lv9 { height: 75%; }
.height-lv10 { height: 83.33%; }
.height-lv11 { height: 91.66%; }
.height-lv12 { height: 100%; }

/* nivelamento de altura por escala: 100-500px */
.shortest-height { min-height: 50px; }
.shorter-height { min-height: 100px; }
.short-height { min-height: 150px; }
.normal-height { min-height: 200px; }
.great-height { min-height: 250px; }
.greater-height { min-height: 300px; }
.greatest-height { min-height: 350px; }
.long-height { min-height: 400px; }
.longer-height { min-height: 450px; }
.longest-height { min-height: 500px; }
.jumbo-height { min-height: 550px; }
.extra-jumbo-height { min-height: 600px; }

/* grade de 12 colunas */
.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

/* overflow */
.no-overflow { overflow: hidden; }
.overflow-x { overflow-x: auto; }
.overflow-y { overflow-y: auto; }

/* visibilidade de elementos por tipo de dispositivo */
.desktop-device-element { display: block; }
.tablet-device-element { display: none; }
.smartphone-device-element { display: none; }

/* formularios, containers, paineis, linhas, cards e boxes */
form, .container, .panel, .row, .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box,
.relative-small-box, .relative-medium-box, .relative-large-box, .relative-jumbo-box, .relative-extra-jumbo-box
{ position: relative; padding: 0; border: 0; margin: 0; }

.row { display: block; }
.row [class*="col-"] { float: left; }

.container::after, .panel::after, .row::after { content: ""; display: block; clear: both; } 

/* mensagens para paineis */
.tip-panel { background-color: #F0FFFF; border: 0; border-left: 10px solid #0000FF;  }
.negative-panel { background-color: #FFEFD5; border: 0; border-left: 10px solid #FF0000;  }
.positive-panel { background-color: #98FB98; border: 0; border-left: 10px solid #006400;  }
.warning-panel { background-color: #FFF8DC; border: 0; border-left: 10px solid #DAA520;  }

.tip-panel .title, .negative-panel .title, .positive-panel .title, .warning-panel .title  { font-size: 1.5em; }

.tip-panel .title { color: #0000FF; }
.negative-panel .title { color: #FF0000; }
.positive-panel .title { color: #006400; }
.warning-panel .title { color: #DAA520; }

/* cards */
.card-1 { box-shadow: 0 0 5px rgba(0,0,0, 0.6); }
.card-2 { box-shadow: 0 0 10px rgba(0,0,0, 0.6); }
.card-3 { box-shadow: 0 0 15px rgba(0,0,0, 0.6); }
.card-4 { box-shadow: 0 0 20px rgba(0,0,0, 0.6); }
.card-5 { box-shadow: 0 0 25px rgba(0,0,0, 0.6); }
.card-6 { box-shadow: 0 0 30px rgba(0,0,0, 0.6); }
.card-7 { box-shadow: 0 0 35px rgba(0,0,0, 0.6); }
.card-8 { box-shadow: 0 0 40px rgba(0,0,0, 0.6); }
.card-9 { box-shadow: 0 0 45px rgba(0,0,0, 0.6); }
.card-10 { box-shadow: 0 0 50px rgba(0,0,0, 0.6); }

.card-1-bottom { box-shadow: 0 2px 5px rgba(0,0,0, 0.6); }
.card-2-bottom { box-shadow: 0 5px 10px rgba(0,0,0, 0.6); }
.card-3-bottom { box-shadow: 0 7px 15px rgba(0,0,0, 0.6); }
.card-4-bottom { box-shadow: 0 10px 20px rgba(0,0,0, 0.6); }
.card-5-bottom { box-shadow: 0 12px 25px rgba(0,0,0, 0.6); }
.card-6-bottom { box-shadow: 0 15px 30px rgba(0,0,0, 0.6); }
.card-7-bottom { box-shadow: 0 17px 35px rgba(0,0,0, 0.6); }
.card-8-bottom { box-shadow: 0 20px 40px rgba(0,0,0, 0.6); }
.card-9-bottom { box-shadow: 0 22px 45px rgba(0,0,0, 0.6); }
.card-10-bottom { box-shadow: 0 25px 50px rgba(0,0,0, 0.6); }

.card-1-bottom-left { box-shadow: -2px 2px 5px rgba(0,0,0, 0.6); }
.card-2-bottom-left { box-shadow: -5px 5px 10px rgba(0,0,0, 0.6); }
.card-3-bottom-left { box-shadow: -7px 7px 15px rgba(0,0,0, 0.6); }
.card-4-bottom-left { box-shadow: -10px 10px 20px rgba(0,0,0, 0.6); }
.card-5-bottom-left { box-shadow: -12px 12px 25px rgba(0,0,0, 0.6); }
.card-6-bottom-left { box-shadow: -15px 15px 30px rgba(0,0,0, 0.6); }
.card-7-bottom-left { box-shadow: -17px 17px 35px rgba(0,0,0, 0.6); }
.card-8-bottom-left { box-shadow: -20px 20px 40px rgba(0,0,0, 0.6); }
.card-9-bottom-left { box-shadow: -22px 22px 45px rgba(0,0,0, 0.6); }
.card-10-bottom-left { box-shadow: -25px 25px 50px rgba(0,0,0, 0.6); }

.card-1-bottom-right { box-shadow: 2px 2px 5px rgba(0,0,0, 0.6); }
.card-2-bottom-right { box-shadow: 5px 5px 10px rgba(0,0,0, 0.6); }
.card-3-bottom-right { box-shadow: 7px 7px 15px rgba(0,0,0, 0.6); }
.card-4-bottom-right { box-shadow: 10px 10px 20px rgba(0,0,0, 0.6); }
.card-5-bottom-right { box-shadow: 12px 12px 25px rgba(0,0,0, 0.6); }
.card-6-bottom-right { box-shadow: 15px 15px 30px rgba(0,0,0, 0.6); }
.card-7-bottom-right { box-shadow: 17px 17px 35px rgba(0,0,0, 0.6); }
.card-8-bottom-right { box-shadow: 20px 20px 40px rgba(0,0,0, 0.6); }
.card-9-bottom-right { box-shadow: 22px 22px 45px rgba(0,0,0, 0.6); }
.card-10-bottom-right { box-shadow: 25px 25px 50px rgba(0,0,0, 0.6); }

.card-1-top { box-shadow: 0 -2px 5px rgba(0,0,0, 0.6); }
.card-2-top { box-shadow: 0 -5px 10px rgba(0,0,0, 0.6); }
.card-3-top { box-shadow: 0 -7px 15px rgba(0,0,0, 0.6); }
.card-4-top { box-shadow: 0 -10px 20px rgba(0,0,0, 0.6); }
.card-5-top { box-shadow: 0 -12px 25px rgba(0,0,0, 0.6); }
.card-6-top { box-shadow: 0 -15px 30px rgba(0,0,0, 0.6); }
.card-7-top { box-shadow: 0 -17px 35px rgba(0,0,0, 0.6); }
.card-8-top { box-shadow: 0 -20px 40px rgba(0,0,0, 0.6); }
.card-9-top { box-shadow: 0 -22px 45px rgba(0,0,0, 0.6); }
.card-10-top { box-shadow: 0 -25px 50px rgba(0,0,0, 0.6); }

.card-1-top-left { box-shadow: -2px -2px 5px rgba(0,0,0, 0.6); }
.card-2-top-left { box-shadow: -5px -5px 10px rgba(0,0,0, 0.6); }
.card-3-top-left { box-shadow: -7px -7px 15px rgba(0,0,0, 0.6); }
.card-4-top-left { box-shadow: -10px -10px 20px rgba(0,0,0, 0.6); }
.card-5-top-left { box-shadow: -12px -12px 25px rgba(0,0,0, 0.6); }
.card-6-top-left { box-shadow: -15px -15px 30px rgba(0,0,0, 0.6); }
.card-7-top-left { box-shadow: -17px -17px 35px rgba(0,0,0, 0.6); }
.card-8-top-left { box-shadow: -20px -20px 40px rgba(0,0,0, 0.6); }
.card-9-top-left { box-shadow: -22px -22px 45px rgba(0,0,0, 0.6); }
.card-10-top-left { box-shadow: -25px -25px 50px rgba(0,0,0, 0.6); }

.card-1-top-right { box-shadow: 2px -2px 5px rgba(0,0,0, 0.6); }
.card-2-top-right { box-shadow: 5px -5px 10px rgba(0,0,0, 0.6); }
.card-3-top-right { box-shadow: 7px -7px 15px rgba(0,0,0, 0.6); }
.card-4-top-right { box-shadow: 10px -10px 20px rgba(0,0,0, 0.6); }
.card-5-top-right { box-shadow: 12px -12px 25px rgba(0,0,0, 0.6); }
.card-6-top-right { box-shadow: 15px -15px 30px rgba(0,0,0, 0.6); }
.card-7-top-right { box-shadow: 17px -17px 35px rgba(0,0,0, 0.6); }
.card-8-top-right { box-shadow: 20px -20px 40px rgba(0,0,0, 0.6); }
.card-9-top-right { box-shadow: 22px -22px 45px rgba(0,0,0, 0.6); }
.card-10-top-right { box-shadow: 25px -25px 50px rgba(0,0,0, 0.6); }

/* sombras */
.shadow-1 { box-shadow: 0 0 5px #000000; }
.shadow-2 { box-shadow: 0 0 10px #000000; }
.shadow-3 { box-shadow: 0 0 15px #000000; }
.shadow-4 { box-shadow: 0 0 20px #000000; }
.shadow-5 { box-shadow: 0 0 25px #000000; }
.shadow-6 { box-shadow: 0 0 30px #000000; }
.shadow-7 { box-shadow: 0 0 35px #000000; }
.shadow-8 { box-shadow: 0 0 40px #000000; }
.shadow-9 { box-shadow: 0 0 45px #000000; }
.shadow-10 { box-shadow: 0 0 50px #000000; }

.shadow-1-bottom { box-shadow: 0 2px 5px #000000; }
.shadow-2-bottom { box-shadow: 0 5px 10px #000000; }
.shadow-3-bottom { box-shadow: 0 7px 15px #000000; }
.shadow-4-bottom { box-shadow: 0 10px 20px #000000; }
.shadow-5-bottom { box-shadow: 0 12px 25px #000000; }
.shadow-6-bottom { box-shadow: 0 15px 30px #000000; }
.shadow-7-bottom { box-shadow: 0 17px 35px #000000; }
.shadow-8-bottom { box-shadow: 0 20px 40px #000000; }
.shadow-9-bottom { box-shadow: 0 22px 45px #000000; }
.shadow-10-bottom { box-shadow: 0 25px 50px #000000; }

.shadow-1-bottom-left { box-shadow: -2px 2px 5px #000000; }
.shadow-2-bottom-left { box-shadow: -5px 5px 10px #000000; }
.shadow-3-bottom-left { box-shadow: -7px 7px 15px #000000; }
.shadow-4-bottom-left { box-shadow: -10px 10px 20px #000000; }
.shadow-5-bottom-left { box-shadow: -12px 12px 25px #000000; }
.shadow-6-bottom-left { box-shadow: -15px 15px 30px #000000; }
.shadow-7-bottom-left { box-shadow: -17px 17px 35px #000000; }
.shadow-8-bottom-left { box-shadow: -20px 20px 40px #000000; }
.shadow-9-bottom-left { box-shadow: -22px 22px 45px #000000; }
.shadow-10-bottom-left { box-shadow: -25px 25px 50px #000000; }

.shadow-1-bottom-right { box-shadow: 2px 2px 5px #000000; }
.shadow-2-bottom-right { box-shadow: 5px 5px 10px #000000; }
.shadow-3-bottom-right { box-shadow: 7px 7px 15px #000000; }
.shadow-4-bottom-right { box-shadow: 10px 10px 20px #000000; }
.shadow-5-bottom-right { box-shadow: 12px 12px 25px #000000; }
.shadow-6-bottom-right { box-shadow: 15px 15px 30px #000000; }
.shadow-7-bottom-right { box-shadow: 17px 17px 35px #000000; }
.shadow-8-bottom-right { box-shadow: 20px 20px 40px #000000; }
.shadow-9-bottom-right { box-shadow: 22px 22px 45px #000000; }
.shadow-10-bottom-right { box-shadow: 25px 25px 50px #000000; }

.shadow-1-top { box-shadow: 0 -2px 5px #000000; }
.shadow-2-top { box-shadow: 0 -5px 10px #000000; }
.shadow-3-top { box-shadow: 0 -7px 15px #000000; }
.shadow-4-top { box-shadow: 0 -10px 20px #000000; }
.shadow-5-top { box-shadow: 0 -12px 25px #000000; }
.shadow-6-top { box-shadow: 0 -15px 30px #000000; }
.shadow-7-top { box-shadow: 0 -17px 35px #000000; }
.shadow-8-top { box-shadow: 0 -20px 40px #000000; }
.shadow-9-top { box-shadow: 0 -22px 45px #000000; }
.shadow-10-top { box-shadow: 0 -25px 50px #000000; }

.shadow-1-top-left { box-shadow: -2px -2px 5px #000000; }
.shadow-2-top-left { box-shadow: -5px -5px 10px #000000; }
.shadow-3-top-left { box-shadow: -7px -7px 15px #000000; }
.shadow-4-top-left { box-shadow: -10px -10px 20px #000000; }
.shadow-5-top-left { box-shadow: -12px -12px 25px #000000; }
.shadow-6-top-left { box-shadow: -15px -15px 30px #000000; }
.shadow-7-top-left { box-shadow: -17px -17px 35px #000000; }
.shadow-8-top-left { box-shadow: -20px -20px 40px #000000; }
.shadow-9-top-left { box-shadow: -22px -22px 45px #000000; }
.shadow-10-top-left { box-shadow: -25px -25px 50px #000000; }

.shadow-1-top-right { box-shadow: 2px -2px 5px #000000; }
.shadow-2-top-right { box-shadow: 5px -5px 10px #000000; }
.shadow-3-top-right { box-shadow: 7px -7px 15px #000000; }
.shadow-4-top-right { box-shadow: 10px -10px 20px #000000; }
.shadow-5-top-right { box-shadow: 12px -12px 25px #000000; }
.shadow-6-top-right { box-shadow: 15px -15px 30px #000000; }
.shadow-7-top-right { box-shadow: 17px -17px 35px #000000; }
.shadow-8-top-right { box-shadow: 20px -20px 40px #000000; }
.shadow-9-top-right { box-shadow: 22px -22px 45px #000000; }
.shadow-10-top-right { box-shadow: 25px -25px 50px #000000; }

/* sombra interna */
.inner-shadow-1 { box-shadow: 0 0 5px #000000 inset; }
.inner-shadow-2 { box-shadow: 0 0 10px #000000 inset; }
.inner-shadow-3 { box-shadow: 0 0 15px #000000 inset; }
.inner-shadow-4 { box-shadow: 0 0 20px #000000 inset; }
.inner-shadow-5 { box-shadow: 0 0 25px #000000 inset; }
.inner-shadow-6 { box-shadow: 0 0 30px #000000 inset; }
.inner-shadow-7 { box-shadow: 0 0 35px #000000 inset; }
.inner-shadow-8 { box-shadow: 0 0 40px #000000 inset; }
.inner-shadow-9 { box-shadow: 0 0 45px #000000 inset; }
.inner-shadow-10 { box-shadow: 0 0 50px #000000 inset; }

.inner-shadow-1-bottom { box-shadow: 0 2px 5px #000000 inset; }
.inner-shadow-2-bottom { box-shadow: 0 5px 10px #000000 inset; }
.inner-shadow-3-bottom { box-shadow: 0 7px 15px #000000 inset; }
.inner-shadow-4-bottom { box-shadow: 0 10px 20px #000000 inset; }
.inner-shadow-5-bottom { box-shadow: 0 12px 25px #000000 inset; }
.inner-shadow-6-bottom { box-shadow: 0 15px 30px #000000 inset; }
.inner-shadow-7-bottom { box-shadow: 0 17px 35px #000000 inset; }
.inner-shadow-8-bottom { box-shadow: 0 20px 40px #000000 inset; }
.inner-shadow-9-bottom { box-shadow: 0 22px 45px #000000 inset; }
.inner-shadow-10-bottom { box-shadow: 0 25px 50px #000000 inset; }

.inner-shadow-1-bottom-left { box-shadow: -2px 2px 5px #000000 inset; }
.inner-shadow-2-bottom-left { box-shadow: -5px 5px 10px #000000 inset; }
.inner-shadow-3-bottom-left { box-shadow: -7px 7px 15px #000000 inset; }
.inner-shadow-4-bottom-left { box-shadow: -10px 10px 20px #000000 inset; }
.inner-shadow-5-bottom-left { box-shadow: -12px 12px 25px #000000 inset; }
.inner-shadow-6-bottom-left { box-shadow: -15px 15px 30px #000000 inset; }
.inner-shadow-7-bottom-left { box-shadow: -17px 17px 35px #000000 inset; }
.inner-shadow-8-bottom-left { box-shadow: -20px 20px 40px #000000 inset; }
.inner-shadow-9-bottom-left { box-shadow: -22px 22px 45px #000000 inset; }
.inner-shadow-10-bottom-left { box-shadow: -25px 25px 50px #000000 inset; }

.inner-shadow-1-bottom-right { box-shadow: 2px 2px 5px #000000 inset; }
.inner-shadow-2-bottom-right { box-shadow: 5px 5px 10px #000000 inset; }
.inner-shadow-3-bottom-right { box-shadow: 7px 7px 15px #000000 inset; }
.inner-shadow-4-bottom-right { box-shadow: 10px 10px 20px #000000 inset; }
.inner-shadow-5-bottom-right { box-shadow: 12px 12px 25px #000000 inset; }
.inner-shadow-6-bottom-right { box-shadow: 15px 15px 30px #000000 inset; }
.inner-shadow-7-bottom-right { box-shadow: 17px 17px 35px #000000 inset; }
.inner-shadow-8-bottom-right { box-shadow: 20px 20px 40px #000000 inset; }
.inner-shadow-9-bottom-right { box-shadow: 22px 22px 45px #000000 inset; }
.inner-shadow-10-bottom-right { box-shadow: 25px 25px 50px #000000 inset; }

.inner-shadow-1-top { box-shadow: 0 -2px 5px #000000 inset; }
.inner-shadow-2-top { box-shadow: 0 -5px 10px #000000 inset; }
.inner-shadow-3-top { box-shadow: 0 -7px 15px #000000 inset; }
.inner-shadow-4-top { box-shadow: 0 -10px 20px #000000 inset; }
.inner-shadow-5-top { box-shadow: 0 -12px 25px #000000 inset; }
.inner-shadow-6-top { box-shadow: 0 -15px 30px #000000 inset; }
.inner-shadow-7-top { box-shadow: 0 -17px 35px #000000 inset; }
.inner-shadow-8-top { box-shadow: 0 -20px 40px #000000 inset; }
.inner-shadow-9-top { box-shadow: 0 -22px 45px #000000 inset; }
.inner-shadow-10-top { box-shadow: 0 -25px 50px #000000 inset; }

.inner-shadow-1-top-left { box-shadow: -2px -2px 5px #000000 inset; }
.inner-shadow-2-top-left { box-shadow: -5px -5px 10px #000000 inset; }
.inner-shadow-3-top-left { box-shadow: -7px -7px 15px #000000 inset; }
.inner-shadow-4-top-left { box-shadow: -10px -10px 20px #000000 inset; }
.inner-shadow-5-top-left { box-shadow: -12px -12px 25px #000000 inset; }
.inner-shadow-6-top-left { box-shadow: -15px -15px 30px #000000 inset; }
.inner-shadow-7-top-left { box-shadow: -17px -17px 35px #000000 inset; }
.inner-shadow-8-top-left { box-shadow: -20px -20px 40px #000000 inset; }
.inner-shadow-9-top-left { box-shadow: -22px -22px 45px #000000 inset; }
.inner-shadow-10-top-left { box-shadow: -25px -25px 50px #000000 inset; }

.inner-shadow-1-top-right { box-shadow: 2px -2px 5px #000000 inset; }
.inner-shadow-2-top-right { box-shadow: 5px -5px 10px #000000 inset; }
.inner-shadow-3-top-right { box-shadow: 7px -7px 15px #000000 inset; }
.inner-shadow-4-top-right { box-shadow: 10px -10px 20px #000000 inset; }
.inner-shadow-5-top-right { box-shadow: 12px -12px 25px #000000 inset; }
.inner-shadow-6-top-right { box-shadow: 15px -15px 30px #000000 inset; }
.inner-shadow-7-top-right { box-shadow: 17px -17px 35px #000000 inset; }
.inner-shadow-8-top-right { box-shadow: 20px -20px 40px #000000 inset; }
.inner-shadow-9-top-right { box-shadow: 22px -22px 45px #000000 inset; }
.inner-shadow-10-top-right { box-shadow: 25px -25px 50px #000000 inset; }

/* paineis */
.panel { margin: 5px 0 5px 0; }

/* boxes */
.small-box { width: 100px; height: 100px; }
.medium-box { width: 150px; height: 150px; }
.large-box { width: 200px; height: 200px; }
.jumbo-box { width: 300px; height: 300px; }
.extra-jumbo-box { width: 500px; height: 500px; }

.small-box-w-margin, .medium-box-w-margin, .large-box-w-margin, .jumbo-box-w-margin, .extra-jumbo-box-w-margin { margin: 4px; }
.small-box-w-margin { width: 92px; height: 92px; } 
.medium-box-w-margin { width: 142px; height: 142px; }  
.large-box-w-margin { width: 192px; height: 192px; }  
.jumbo-box-w-margin { width: 292px; height: 292px; } 
.extra-jumbo-box-w-margin { width: 492px; height: 492px; } 

.relative-small-box, .relative-medium-box, .relative-large-box, .relative-jumbo-box, .relative-extra-jumbo-box { width: 100% }

.relative-small-box { height: 100px; } 
.relative-medium-box { height: 150px; } 
.relative-large-box { height: 200px; } 
.relative-jumbo-box { height: 300px; }
.relative-extra-jumbo-box { height: 500px; }

/* posicionamento de elementos */ 
.center { margin: auto; }
.absolute-center { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
.absolute-vertical-center { top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
.absolute-middle { left: 50%; top: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
.absolute-right { right: 0; }
.absolute-left { left: 0; }
.absolute-top { top: 0;	}
.absolute-bottom { bottom: 0; }
.block { display: block; }
.hide { display: none; }
.no-float { float: none; }
.left { float: left; }
.right { float: right; }
.inline { display: inline-block; }
.absolute { position: absolute; }
.fixed { position: fixed; z-index: 1; }
.flex-box {  display: -webkit-flex; display: flex; }
.flex-item { -webkit-flex: 1; -ms-flex: 1; flex: 1; }

/* textos: tamanhos */
.text-size-x-jumbo { font-size: 4.5em; }
.text-size-jumbo { font-size: 4em; }
.text-size-largest { font-size: 3em; }
.text-size-x-large { font-size: 2em; }
.text-size-large { font-size: 1.5em; }
.text-size-medium { font-size: 1.125em; }
.text-size-normal { font-size: 1em; }
.text-size-small { font-size: 0.875em; }
.text-size-x-small { font-size: 0.75em; }
.text-size-smaller { font-size: 0.625em; }
.text-size-tiny { font-size: 0.5em; }

/* textos: alinhamentos */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-justify { text-align: justify; }

/* textos: indentacao */
.small-indent { text-indent: 16px; }
.indent { text-indent: 32px; }
.medium-indent { text-indent: 48px; }
.large-indent { text-indent: 64px; }

/* textos: decoracao */
.text-underline { text-decoration: underline; }
.text-overline { text-decoration: overline; }
.text-strike { text-decoration: line-through; }
.no-decoration { text-decoration: none; }

/* textos: transformacao */
.text-uppercase { text-transform: uppercase; }
.text-lowercase { text-transform: lowercase; }
.text-capitalize { text-transform: capitalize; }
.text-cap-first-word:first-letter { text-transform: capitalize; }

/* textos: espacamento */
.large-line-height { line-height: 2; }
.medium-line-height { line-height: 1.5; }

/* textos: estilos */
.text-italic { font-style: italic; }
.text-oblique { font-style: oblique; }

/* textos: negrito */
.text-bold { font-weight: bold; }

/*textos: variantes*/
.text-small-caps { font-variant: small-caps; }

/* textos: sombra */
.text-contour { text-shadow: 0 0 5px #000000, -1px -1px 0 #000000, 1px -1px 0 #000000, -1px 1px 0 #000000, 1px 1px 0 #000000; }
.text-shadow { text-shadow: 1px 2px 5px #000000; }
.text-wide-shadow { text-shadow: 2px 5px 10px #000000; }
.text-white-contour { text-shadow: 0 0 5px #FFFFFF, -1px -1px 0 #FFFFFF, 1px -1px 0 #FFFFFF, -1px 1px 0 #FFFFFF, 1px 1px 0 #FFFFFF; }
.text-white-shadow { text-shadow: 1px 2px 5px #FFFFFF; }
.text-wide-white-shadow { text-shadow: 2px 5px 10px #FFFFFF; }

/* textos: contadores */
.text-section { counter-reset: section; }
.text-section p::before { font-weight: bold; counter-increment: section; content: counter(section) "\00a0\00a0\00a0\00a0"; }
.text-section p { padding: 4px; }

/* codigo */
.code { counter-reset: line; position: relative; display: block; margin: 0; padding: 0; border-left: 15px solid; }
.code .line { display: block; padding: 8px; }
.code span.line:nth-child(odd){ background-color: #f2f2f2; }

/* blocos de conteudo */
.content-in-one-column { -webkit-column-count: 1; -moz-column-count: 1; column-count: 1; }
.content-in-two-columns { -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; }
.content-in-three-columns { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; }
.content-in-four-columns { -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; }
.content-in-five-columns { -webkit-column-count: 5; -moz-column-count: 5; column-count: 5; }

/* conteudo em colunas: espacamento */
.small-content-column-gap { -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; }
.medium-content-column-gap { -webkit-column-gap: 70px; -moz-column-gap: 70px; column-gap: 70px; }
.large-content-column-gap { -webkit-column-gap: 90px; -moz-column-gap: 90px; column-gap: 90px; }

/* blocos de conteudo: bordas */
.border-column-solid { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; }
.border-column-dashed { -webkit-column-rule-style: dashed; -moz-column-rule-style: dashed; column-rule-style: dashed; }
.border-column-double { -webkit-column-rule-style: double; -moz-column-rule-style: double; column-rule-style: double; }
.border-column-dotted { -webkit-column-rule-style: dotted; -moz-column-rule-style: dotted; column-rule-style: dotted; }
.border-column-groove { -webkit-column-rule-style: groove; -moz-column-rule-style: groove; column-rule-style: groove; }
.border-column-ridge { -webkit-column-rule-style: ridge; -moz-column-rule-style: ridge; column-rule-style: ridge; }
.border-column-inset { -webkit-column-rule-style: inset; -moz-column-rule-style: inset; column-rule-style: inset; }
.border-column-outset { -webkit-column-rule-style: outset; -moz-column-rule-style: outset; column-rule-style: outset; }

/* tooltips*/
.tooltip { position: relative; display: inline-block; }

.tooltip-text, .tooltip-text-top-arrow, .tooltip-text-bottom-arrow
{
    background-color: #000000;
    padding: 10px;
    border-radius: 10px;
    color: #FFFFFF;
    display: none;
    position: absolute;
    width: 150px;
    text-align: center;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    z-index: 2;
}

.tooltip-text, .tooltip-text-top-arrow { top: 130%; }
.tooltip-text-bottom-arrow { bottom: 130%; }

.tooltip-text-top-arrow::after, .tooltip-text-bottom-arrow::after
{
    content: " ";
    position: absolute;	
    left: 50%;
    transform: translateX(-50%);
    -webkit-animation: translateX(-50%);
    border: 10px solid;		
}

.tooltip-text-top-arrow::after
{	
    bottom: 99%;	
    border-color: transparent transparent #000000 transparent;
}

.tooltip-text-bottom-arrow::after
{	
    top: 99%;	
    border-color: #000000 transparent transparent transparent;
}

.tooltip:hover .tooltip-text, 
.tooltip:hover .tooltip-text-top-arrow, 
.tooltip:active .tooltip-text, 
.tooltip:active .tooltip-text-top-arrow,
.tooltip:hover .tooltip-text-bottom-arrow,
.tooltip:active .tooltip-text-bottom-arrow { display: block; }

/* imagens */
.absolute-image, .relative-image { border: 0; margin: 0; padding: 0; }
.absolute-image { width: 100%; }
.relative-image { max-width: 100%; }

/* backgrounds: repeticoes */
.bg-repeat { background-repeat: repeat; }
.bg-repeat-x { background-repeat: repeat-x; }
.bg-repeat-y { background-repeat: repeat-y; }
.bg-no-repeat { background-repeat: no-repeat; }

/* backgrounds: tamanho */
.bg-size-cover { background-size: cover; }
.bg-size-contain { background-size: contain; }

/* backgrounds: atachamento */
.bg-fixed { background-attachment: fixed; }

/* backgrounds: posicao */
.bg-left { background-position: left; }
.bg-left-top { background-position: left top; }
.bg-left-bottom { background-position: left bottom; }
.bg-center { background-position: center; }
.bg-center-top { background-position: center top; }
.bg-center-bottom { background-position: center bottom; }
.bg-right { background-position: right; }
.bg-right-top { background-position: right top; }
.bg-right-bottom { background-position: right bottom; }
.bg-top { background-position: top; }
.bg-bottom { background-position: bottom; }

/* opacidade */
.transparent { opacity: 0; }
.weaker-opacity { opacity: 0.05; }
.weak-opacity { opacity: 0.1; }
.lowest-opacity { opacity: 0.2; }
.lower-opacity { opacity: 0.3; }
.low-opacity { opacity: 0.4; }
.medium-opacity { opacity: 0.5; }
.high-opacity { opacity: 0.6; }
.higher-opacity { opacity: 0.7; }
.highest-opacity { opacity: 0.8; }
.strong-opacity { opacity: 0.9; }
.stronger-opacity { opacity: 0.95; }
.no-transparent { opacity: 1; }

/* menus de navegacao */
.navigator-menu 
{ 
    width: 100%;
    height: 100%;
    display:none;  
    position: fixed;
    top: 0;
    left: 0;
    background-color: #FFFFFF;
    z-index: 5;
}

.navigator-menu .close-icon
{
    position: absolute; 
    z-index: 3;
    right: 0;
    top: 0;
    color: #000000;
}

.navigator-menu .content
{
    height: 80%;
    overflow-x: hidden; 
    overflow-y: auto; 

    /* evita o slowdown para rolagem do menu em mobile baseado em chrome */
    -webkit-overflow-scrolling: touch; 
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
}

.navigator-menu .content ul { list-style-type: none; margin: 0; padding: 0; }
.navigator-menu .content ul li { border: 0; display: block; color: #000000; }
.navigator-menu .content ul li:hover, .navigator-menu .content ul li:active { background-color: #000000; color: #FFFFFF; }

/* menus drop-downs */ 
.drop-down-menu  { position: relative; background-color: #FFFFFF; }
.vertical-drop-down-menu { position: relative; }

.drop-down-menu .background-menu, .vertical-drop-down-menu .background-menu
{
    background-color: rgba(0,0,0,0.90);
    width: 100%;
    height: 100%;
    position: fixed;	 
    display: none;
}

.menu-items ul li { width: 100%; background-color: #FFFFFF; color: #000000; }
.menu-items ul li:last-child { border: 1px solid #FFFFFF; border-radius: 0 0 5px 5px; }
.vertical-drop-down-menu .menu-items ul li:last-child { border: 0; border-radius: 0; }
.menu-items ul li:last-child:hover { border: 1px solid #000000; }
.vertical-drop-down-menu .menu-items ul li:last-child:hover { border: 0; }
.drop-down-menu ul, .menu-items ul { list-style-type: none; margin: 0; padding: 0; min-width: 200px; }

.vertical-drop-down-menu ul, .vertical-drop-down-menu .menu-items ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;	
    width: 100%;
}

.vertical-drop-down-menu .menu-items li { width: 100%; }
.menu-items li { position: relative; display: inline-block; } 
vertical-drop-down-menu .menu-items li { position: relative; display: block; }
.menu-items ul li:hover, .menu-items li:hover{ background-color: #000000; color: #FFFFFF; }
.drop-down-menu .menu-icon, .vertical-drop-down-menu .menu-icon  
{ 	
    padding: 5px;
    font-size: 2em;
    display: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #FFFFFF;
    text-align: center;
} 

.drop-down-menu .close-icon, .vertical-drop-down-menu .close-icon  
{ 	
    padding: 8px;
    font-size: 2em;
    position: absolute;
    right: 0;
    color: #FFFFFF;
    z-index: 3;
    display: none;
}

.drop-down-menu .menu-top-icon, .vertical-drop-down-menu .menu-top-icon
{
    position: fixed;
    bottom: 0;
    right: 0;
    color: #000000;
    display: none;
}

.top-icon
{    
    font-size: 1.2em;    
    bottom: 5px;
    right: 5px;
    color: #000000;    
    position: fixed;
    z-index: 3;
    display: none;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.8);
}

.menu-items ul { position: absolute; display: none; z-index: 1; }
.vertical-drop-down-menu .menu-items ul { position: relative; display: none; }
.menu-items li:hover ul { display: block; }
.menu-items li a, .menu-items ul li a { color: #000000; }
.menu-items ul li a:hover{ color: #FFFFFF; }

/* bordas */
.no-border { border: 0; }
.smallest-border-top { border-top: 0.2px solid; }
.smaller-border-top { border-top: 0.5px solid; }
.small-border-top { border-top: 1px solid; }
.medium-border-top { border-top: 5px solid; }
.large-border-top { border-top: 10px solid; }
.larger-border-top { border-top: 15px solid; }
.largest-border-top { border-top: 20px solid; }
.long-border-top { border-top: 25px solid; }
.longer-border-top { border-top: 30px solid; }
.longest-border-top { border-top: 35px solid; }

.smallest-border-right { border-right: 0.2px solid; }
.smaller-border-right { border-right: 0.5px solid; }
.small-border-right { border-right: 1px solid; }
.medium-border-right { border-right: 5px solid; }
.large-border-right { border-right: 10px solid; }
.larger-border-right { border-right: 15px solid; }
.largest-border-right { border-right: 20px solid; }
.long-border-right { border-right: 25px solid; }
.longer-border-right { border-right: 30px solid; }
.longest-border-right { border-right: 35px solid; }

.smallest-border-bottom { border-bottom: 0.2px solid; }
.smaller-border-bottom { border-bottom: 0.5px solid; }
.small-border-bottom { border-bottom: 1px solid; }
.medium-border-bottom { border-bottom: 5px solid; }
.large-border-bottom { border-bottom: 10px solid; }
.larger-border-bottom { border-bottom: 15px solid; }
.largest-border-bottom { border-bottom: 20px solid; }
.long-border-bottom { border-bottom: 25px solid; }
.longer-border-bottom { border-bottom: 30px solid; }
.longest-border-bottom { border-bottom: 35px solid; }

.smallest-border-left { border-left: 0.2px solid; }
.smaller-border-left { border-left: 0.5px solid; }
.small-border-left { border-left: 1px solid; }
.medium-border-left { border-left: 5px solid; }
.large-border-left { border-left: 10px solid; }
.larger-border-left { border-left: 15px solid; }
.largest-border-left { border-left: 20px solid; }
.long-border-left { border-left: 25px solid; }
.longer-border-left { border-left: 30px solid; }
.longest-border-left { border-left: 35px solid; }

.smallest-border-frame { border: 0.2px solid; }
.smaller-border-frame { border: 0.5px solid; }
.small-border-frame { border: 1px solid; }
.medium-border-frame { border: 5px solid; }
.large-border-frame { border: 10px solid; }
.larger-border-frame { border: 15px solid; }
.largest-border-frame { border: 20px solid; }
.long-border-frame { border: 25px solid; }
.longer-border-frame { border: 30px solid; }
.longest-border-frame { border: 35px solid; }

/* bordas: efeitos */
.no-rounding { border-radius: 0; }
.small-rounding { border-radius: 10px; }
.medium-rounding { border-radius: 30px; }
.large-rounding { border-radius: 50px; }
.circle { border-radius: 100%; }

.solid-border { border-style: solid; }
.double-border { border-style: double; }
.dotted-border { border-style: dotted; }
.dashed-border { border-style: dashed; }
.groove-border { border-style: groove; }
.ridge-border { border-style: ridge; }
.inset-border { border-style: inset; }
.outset-border { border-style: outset; } 

/* preenchimentos */
.no-padding { padding: 0; }
.x-small-padding-top { padding-top: 8px; }
.small-padding-top { padding-top: 16px; }
.medium-padding-top { padding-top: 32px; }
.large-padding-top { padding-top: 64px; }
.x-large-padding-top { padding-top: 128px; }
.jumbo-padding-top { padding-top: 256px; }

.x-small-padding-right { padding-right: 8px; }
.small-padding-right { padding-right: 16px; }
.medium-padding-right { padding-right: 32px; }
.large-padding-right { padding-right: 64px; }
.x-large-padding-right { padding-right: 128px; }
.jumbo-padding-right { padding-right: 256px; }

.x-small-padding-bottom { padding-bottom: 8px; }
.small-padding-bottom { padding-bottom: 16px; }
.medium-padding-bottom { padding-bottom: 32px; }
.large-padding-bottom { padding-bottom: 64px; }
.x-large-padding-bottom { padding-bottom: 128px; }
.jumbo-padding-bottom { padding-bottom: 256px; }

.x-small-padding-left { padding-left: 8px; }
.small-padding-left { padding-left: 16px; }
.medium-padding-left { padding-left: 32px; }
.large-padding-left { padding-left: 64px; }
.x-large-padding-left { padding-left: 128px; }
.jumbo-padding-left { padding-left: 256px; }

.x-small-padding { padding: 8px; }
.small-padding { padding: 16px; }
.medium-padding { padding: 32px; }
.large-padding { padding: 64px; }
.x-large-padding { padding: 128px; }
.jumbo-padding { padding: 256px; }

/* margens */
.no-margin { margin: 0; }
.small-margin-frame { margin: 2px; }
.medium-margin-frame { margin: 5px; }
.large-margin-frame { margin: 10px; }
.jumbo-margin-frame { margin: 15px; }

.small-margin-top { margin-top: 2px; }
.medium-margin-top { margin-top: 5px; }
.large-margin-top { margin-top: 10px; }
.jumbo-margin-top { margin-top: 15px; }

.small-margin-right { margin-right: 2px; }
.medium-margin-right { margin-right: 5px; }
.large-margin-right { margin-right: 10px; }
.jumbo-margin-right { margin-right: 15px; }

.small-margin-bottom { margin-bottom: 2px; }
.medium-margin-bottom { margin-bottom: 5px; }
.large-margin-bottom { margin-bottom: 10px; }
.jumbo-margin-bottom { margin-bottom: 15px; }

.small-margin-left { margin-left: 2px; }
.medium-margin-left { margin-left: 5px; }
.large-margin-left { margin-left: 10px; }
.jumbo-margin-left { margin-left: 15px; }

/* transicoes */
.slower-transition:hover,.slow-transition:active { transition: all linear 3s; }
.slow-transition:hover,.slow-transition:active { transition: all linear 2s; }
.natural-transition:hover,.slow-transition:active { transition: all linear 1s; }
.fast-transition:hover,.slow-transition:active { transition: all linear 0.5s; }
.faster-transition:hover,.slow-transition:active { transition: all linear 0.2s; }

/* espacos em branco */
.no-wrap-content { white-space: nowrap; }

/* apresentador de imagens */
.album { max-width: 900px; }

.presentation 
{ 
    width: 100%; 
    height: 100%;
    position: fixed; 
    z-index: 3;
    background-color: rgba(0,0,0,0.9);
    top: 0;
    display: none;
}

.presentation .close-icon, .presentation .prior-icon, .presentation .next-icon
{
    color: #000000;
    position: fixed; 
    z-index: 3;
}

.presentation .close-icon { right: 0; top: 0; }
.presentation .prior-icon, .presentation .next-icon, .presentation .close-icon { width: 50px; height: 50px; background-color: #FFFFFF; }

.presentation .prior-icon, .presentation .next-icon 
{   
    top: 50%; 
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    display: none;
}

.presentation .prior-icon { left: 0; }
.presentation .next-icon { right: 0; }

.presentation .image-viewer
{
    width:100%;	 
    height: 99.9%;
    position: relative;
    top: 0; 
    margin: auto;
    overflow-y: auto;
}

.presentation .image-viewer img
{
    max-width: 100%;
    height: auto;
    display: block;
    border: 0;
    margin: auto;

}

.presentation .caption
{
    width: 100%;
    min-height: 40px;
	background-color: rgba(0,0,0,0.5);
    position: absolute;
    bottom: 0;   
    z-index: 3;
}

/* sliders */
.slider-group .slide { width: 100%; height: 100%; position: absolute; }

/*------------- media queries ------------ */
@media only screen and (max-width: 1200px) /* dispositivos full hd */
{
    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 4px;
        width: 192px;
        height: 192px;
        display: block;
    } 
    
    .album { max-width: 800px; }
}

@media only screen and (max-width: 980px) /* dispositivos hd */
{   
    .album { max-width: 600px; }
}

@media only screen and (max-width: 768px) /* tablets de alta resolucao */
{	 
    /* colunas para mobile */
    .col-mh-1 { width: 8.33%; }
    .col-mh-2 { width: 16.66%; }
    .col-mh-3 { width: 25%; }
    .col-mh-4 { width: 33.33%; }
    .col-mh-5 { width: 41.66%; }
    .col-mh-6 { width: 50%; }
    .col-mh-7 { width: 58.33%; }
    .col-mh-8 { width: 66.66%; }
    .col-mh-9 { width: 75%; }
    .col-mh-10 { width: 83.33%; }
    .col-mh-11 { width: 91.66%; }
    .col-mh-12 { width: 100%; }
    
    .content-in-two-columns, .content-in-three-columns, .content-in-four-columns, .content-in-five-columns
    {
        -webkit-column-count: 2;
        -moz-column-count: 2;
        column-count: 2;        
    }
    
    [class *="-content-column-gap"]
    {
       -webkit-column-gap: 20px;
        -moz-column-gap: 20px;
        column-gap: 20px; 
    }

    [class *="-margin"] { margin: 2px; margin-bottom: 15px; }

    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 4px;
        width: 122px;
        height: 122px;
        display: block;
    }
    
    .album { max-width: 520px; }        
}

@media only screen and (max-width: 600px) /* tablets e smartphones */
{	 
    /* colunas para mobile */
    .col-m-1 { width: 8.33%; }
    .col-m-2 { width: 16.66%; }
    .col-m-3 { width: 25%; }
    .col-m-4 { width: 33.33%; }
    .col-m-5 { width: 41.66%; }
    .col-m-6 { width: 50%; }
    .col-m-7 { width: 58.33%; }
    .col-m-8 { width: 66.66%; }
    .col-m-9 { width: 75%; }
    .col-m-10 { width: 83.33%; }
    .col-m-11 { width: 91.66%; }
    .col-m-12 { width: 100%; }
    
    [class *="-margin"] { margin: 2px; margin-bottom: 15px; }

    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box 
    { margin: 4px; }
    
    .album { max-width: 390px; }
    .flex-box { display: block; }
    .flex-item
    {
        -webkit-flex: none; /* para safari 6.1 ou maior */
        -ms-flex: none; /* Internet Explorer 10 */ 
        flex: none; /* geral */
        display: inline;		
    }
    
    .desktop-device-element { display: none; }
    .desktop-and-tablet-device-element, .tablet-device-element { display: block; }
    .smartphone-device-element { display: none; }
}

@media only screen and (max-width: 480px) /* smartphones */
{

    /* todas as colunas passam a ter largura de 100%*/
    [class*="col-"] { width: 100%; } 

    [class *="-margin"] { margin: 2px; margin-bottom: 15px; }

    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 4px;
        width: 192px;
        height: 192px;
        display: block;
    }
    
    .content-in-two-columns, .content-in-three-columns, .content-in-four-columns, .content-in-five-columns
    {
        -webkit-column-count: 1;
        -moz-column-count: 1;
        column-count: 1;        
    }
    
    [class *="-content-column-gap"] { -webkit-column-gap: 20px; -moz-column-gap: 20px; column-gap: 20px; }
    
    .album { max-width: 400px; }

    /* colunas para smartphones */
    .col-s-1 { width: 8.33%; }
    .col-s-2 { width: 16.66%; }
    .col-s-3 { width: 25%; }
    .col-s-4 { width: 33.33%; }
    .col-s-5 { width: 41.66%; }
    .col-s-6 { width: 50%; }
    .col-s-7 { width: 58.33%; }
    .col-s-8 { width: 66.66%; }
    .col-s-9 { width: 75%; }
    .col-s-10 { width: 83.33%; }
    .col-s-11 { width: 91.66%; }
    .col-s-12 { width: 100%; }
    
    /* retira o efeito de hover */
    .menu-items li:hover ul { display: none; }    

    /* reseta as classes de posicionamento */	     
    .flex-box { display: block; }

    .flex-item
    {
        -webkit-flex: none; /* para safari 6.1 ou maior */
        -ms-flex: none; /* Internet Explorer 10 */ 
        flex: none; /* geral */
        display: block;
    }

    /* menus drop-down */    
    .drop-down-menu, .vertical-drop-down-menu
    {		 
        top: 0;				
        position: fixed;		
        z-index: 1;	
        background-color: transparent;	
        width: 100%;
    }

    .drop-down-menu .menu, .vertical-drop-down-menu .menu
    { 
        width: 100%;
        height: 70%;
        overflow-x: hidden; 
        overflow-y: auto;
        position: fixed;        
        display: none;
        
        /* esconde as barras de rolagem no IE/Edge */
        -ms-overflow-style: none;        
        
        /* evita o slowdown para rolagem do menu em mobile baseado em chrome */
        -webkit-overflow-scrolling: touch; 
        -webkit-transform: translateZ(0);
        -webkit-backface-visibility: hidden;        
    }
    
    /* esconde as barras de rolagem no chrome */
    .drop-down-menu .menu::-webkit-scrollbar, .vertical-drop-down-menu .menu::-webkit-scrollbar { display: none; }

    .drop-down-menu .background-menu, .vertical-drop-down-menu .background-menu { display: none; }

    .menu-items li p { width: 100%;}	 

    .menu-items li { position: relative; display: block; color: #FFFFFF; }
    .menu-items li a, .menu-items ul li a { color: #FFFFFF; }

    .menu-items ul 
    {	
        position: relative;
        display: none;
        background-color: transparent;
        min-width: 0;
    }	

    .menu-items ul li:hover, .menu-items ul li, .menu-items li:hover { background-color: transparent; color: #FFFFFF; }

    .menu-items ul li { text-align: right; }
    .menu-items ul li:last-child { border: 0; border-radius: 0; }
    .menu-items ul li:last-child:hover { border: 0; }

    .menu-items li p:active, .menu-items li a:active,  .menu-items ul li a:active  { background-color: #FFFFFF; color: #000000; }	     
    .drop-down-menu .menu-icon, .vertical-drop-down-menu .menu-icon { display: block; }
    
    .desktop-device-element { display: none; }
    .tablet-device-element { display: none; }
    .smartphone-device-element { display: block; }

}

@media only screen and (max-width: 453px) /* smartphones */
{
    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 4px;
        width: 92px;
        height: 92px;
        display: block;
    }
    
    .album { max-width: 300px; }

}

@media only screen and (max-width: 440px) /* smartphones */
{
    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 4px;
        width: 122px;
        height: 122px;
        display: block;
    }
    
    .album { max-width: 260px; }
}

@media only screen and (max-width: 300px) /* smartphones de baixissima resolucao */
{
    [class *="-box-w-margin"], .small-box, .medium-box, .large-box, .jumbo-box, .extra-jumbo-box
    {
        margin: 0;
		margin-bottom: 15px;
        width: 100%;
        height: 122px;
        display: block;
    }    
}

/* -------- Seletor elemento ------- */

/* links */
a { text-decoration: none; }

a:link, a:visited { color: #0000CD; }
a:hover, a:active { color: #2A2A2A; }

/* paragrafos */
p{ padding: 16px; } 

/* imagens, iframes, objects, embed e video */
img, iframe, object, embed, video { max-width: 100%; }

/* tabelas */
table { border-collapse: collapse; width: 100%; }
table th, table td { padding: 16px; }
table th, table td table tr:last-child {  border: 0; }
table th, table td, table tr { border: 1px solid #A2A2A2; }
table th table td, table th table th , table th table tr, table td table td, table td table th, table td table tr { border: 0; }
table th table tr, table td table tr { border-bottom: 1px solid #A2A2A2; }
table th table tr:last-child, table td table tr:last-child { border: 0; }
table th table td, table th table, table td table td, table td table th { border-right: 1px solid #A2A2A2; }
table th table td:last-child, table th table th:last-child , table td table td:last-child, table td table th:last-child { border-right: 0; }

/* tabelas: largura das colunas */
table th.column-1, table td.column-1 { width: 8.33%; }
table th.column-2, table td.column-2 { width: 16.66%; }
table th.column-3, table td.column-3 { width: 25%; }
table th.column-4, table td.column-4 { width: 33.33%; }
table th.column-5, table td.column-5 { width: 41.66%; }
table th.column-6, table td.column-6 { width: 50%; }
table th.column-7, table td.column-7 { width: 58.33%; }
table th.column-8, table td.column-8 { width: 66.66%; }
table th.column-9, table td.column-9 { width: 75%; }
table th.column-10, table td.column-10 { width: 83.33%; }
table th.column-11, table td.column-11 { width: 91.66%; }
table th.column-12, table td.column-12 { width: 100%; }

/* tabelas: largura minima das colunas */
.table-container { position: relative; overflow-x: auto; }
.table-container .short-table-width { min-width: 480px; }
.table-container .medium-table-width { min-width: 600px; }
.table-container .large-table-width { min-width: 768px; }
.table-container .larger-table-width { min-width: 800px; }

/* formularios */
form input[type=text], form input[type=password], form input[type=search], form input[type=email], 
form input[type=number], form input[type=date], form input[type=month], form input[type=datetime-local],
form input[type=color], form select, form input[type=button], form input[type=submit], form input[type=reset], form textarea { width: 100%; padding: 16px; border: 1px solid #A2A2A2; }
form input[type=radio], form input[type=checkbox] { width: 25px; height: 25px; border: 1px solid #A2A2A2; }

form input[type=text]:focus, form input[type=password]:focus, form input[type=search]:focus, form input[type=email]:focus, 
form input[type=number]:focus, form input[type=date]:focus, form input[type=month]:focus, form input[type=datetime-local]:focus,
form input[type=color]:focus { border: 0; border-bottom: 1px solid #000000; }