/*
Tooplate 2118 Chilling Cafe

https://www.tooplate.com/view/2118-chilling-cafe

    Background color:       #3a4a58
    Title color:            #996633
    Text color:             #666666
    Text Dark color:        #333333
    Table Heading color:    #C4CDD6
    Table Alternate color:  #e5e8ed 
    
    Fundo body: 	#
    Títulos: 		#9a6c14
    Texto: 			#
    Conteúdos: 		#242424 
*/


/*resset geral*/
html,body,h1,h2,iframe {padding: 0;margin: 0;}
html,body {height: 100%;}

body {font: 400 17px "Open Sans", Arial, Helvetica, sans-serif; color: #8c8c8c; background-color: #000;}


/* Layoyt */
.tm-container {max-width: 640px; margin:0 auto;}
.tm-main-content {background-color: #242424; margin:100px 10px 0 10px;} /* Conteúdos */


/* imagem de fundo */
.parallax {width:220px; height:220px; margin:150px auto 10px; border-radius: 50%; border:5px solid #111; 
background:url("../img/decor/marnobre.jpg") center -15px / 114% no-repeat scroll;}
 
/* ESCONDER  
#tm-intro-img {
  background-image: url(../img/decor/marnobre.jpg);
  background-position: center;
  background-size: cover;
  min-height: 425px;
  display: none; 
}
*/ 

.tm-text-white {color:#fff;}
.tm-bg-blk {background-color:#000;}

.tm-page-header-container { text-align: center; }


/* título da página */
h1.tm-page-header {}

h3.tm-page-caption {font-weight: 100;}

.tm-page-icon {display: inline-block;vertical-align: baseline;padding: 15px;}


.tm-section {padding:10px 15px; } /* interior */
h2.tm-section-header {color:#9a6c14; text-align:center; font-weight:400; font-size:1.5rem; margin:20px 0;}
.tm-section.navegar {padding:0; } /* xxxx */
.tm-section-small {max-width: 490px; margin:10px auto;}

/*tabelas*/
table {width: 100%; border-spacing: 0;}
td {text-align: center; padding:10px 15px;}
.tm-text-left {text-align: left;}
th {color: #333;font-weight: 400;font-size: 1.2rem;padding-left: 15px;padding-right: 15px;}
tr:nth-child(odd) {background-color: #e5e8ed;}
tr.tm-tr-header {background-color: #c4cdd6; height: 50px;}



/* texto 
________________________________________________________________________ */

p {font-size: 1.2rem;line-height: 1.7; text-align: justify;}
hr {width:85%;border:1px solid #444; }
img { max-width: 100%; }
figure { margin: 0; }
ul {margin:0 0 0 30px;text-align: left;}
ul li {font-size: x-large; list-style: circle; }
ul li::marker {color: #555;}
ul li.quebra {margin:0 0 10px;}

.tm-mb-0 {margin-bottom: 0;}

figcaption { text-align: center; }
figcaption span {display: block;font-size: 18px;}

.tm-item-name {font-weight: bold; margin:10px 0;}/*caption das thumbnails*/

.tm-special-items {display: flex;margin-left: -15px;margin-right: -15px;}
.tm-special-item {padding-left: 15px;padding-right: 15px;}

/* icons */
.tm-social-icons {text-align: center;margin-top:0}
.tm-social-icons i {font-size: 1.2rem; }
.tm-social-link-container {display: inline-block; }

.tm-social-link {color:#fff; background-color: #444;border-radius: 5px; width:50px; height:35px; 
display: flex; justify-content: center; align-items: center; margin:10px 20px; text-decoration: none; 
transition: all 0.5s ease;}

.tm-social-link:hover { background-color: #808e9e; }
.tm-contact-link {color: #fff;font-weight: 600;text-decoration: none;}

/* links */
a {transition: all 0.5s ease; }
.tm-contact-link:hover { color: #808e9e; }

.tm-footer-text {font-size: 0.9rem; margin-top: 30px; margin-bottom: 30px; text-align: center;}
.tm-footer-link {color: #fff; text-decoration: none;}
.tm-footer-link:hover {color: #c5ced8; }


/* Navbar
________________________________________________________________________ */

 /* Create a sticky/fixed navbar */
#navbar {text-align: center; overflow: hidden; background-color: #242424;
  /* padding: 20px 10px;  Large padding which will shrink on scroll (using JS) */
  /* transition: 0.4s;  Adds a transition effect when the padding is decreased */
  position: fixed; /* Sticky/fixed navbar */
  width: 100%;
  top: 0; /* At the top */
  z-index: 99;
  opacity: ;
}

#navbar #logo {font-size: 35px;}/* Style the logo */
#navbar a {color:#ddd; line-height: 25px; text-decoration: none;}
#navbar a:hover {color: #eee;}
#navbar a.active {background-color: dodgerblue; color: #fff;} /* Style the active/current link */

/* Display some links to the right */
#navbar-right {float: right; margin-right: 50px; display: none; /* ESCONDER */}

/* Add responsiveness - on screens less than 580px wide, display the navbar vertically instead of horizontally */
@media screen and (max-width: 580px) {
  #navbar {padding:15px 0 !important; /* Use !important to make sure that JavaScript doesn't override the padding on small screens */}
  #navbar a {float:none;display: block; }
  /* #navbar-right {float: none;} */
} 




/* responsive 
________________________________________________________________________ */
@media (max-width: 550px) {
  .tm-special-item {padding-left: 10px;padding-right: 10px;}
  .tm-special-items {margin-left: -10px;margin-right: -10px;}
}

@media (max-width: 480px) {
  .tm-special-item {padding-left: 5px;padding-right: 5px;}
  .tm-special-items {margin-left: -5px;margin-right: -5px;}
}

@media (max-width: 430px) {
  .tm-responsive-table {overflow-x: auto;}
  
   table {width: auto;}
  .tm-special-items {flex-direction: column;}
  .tm-special-item {margin-bottom: 40px;}
   figcaption p {margin-bottom: 0;line-height: 1;}
   
}


/* Costumização 
________________________________________________________________________ */

/* redondo */
.redondo, img, iframe, .tm-main-content {border-radius: 5px; box-shadow: 2px 2px 4px #000; /* shadow*/}
.centrado {text-align: center;}

.tm-iframe {overflow: hidden; padding-top: 44.25%; position: relative; }
.tm-iframe iframe {border: 0; width: 100%; height: 100%; left:0; top:0; position:absolute; }
/* .reel {width: 480px; xheight:300px; border: solid red !important;} */