/* ==================================================================
	              Kotryk Ortodontia e Reabilitacao Oral
================================================================== */

/* ==================================================================
	                          Fundo
================================================================== */
 html {
 margin: 0px;
 padding: 0px;
 height: 100%; width: 100%; 
 overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; 
 }
 
 body {
 margin: 0px;
 background-color: #0c0c0c;
 width: 100%; height: 100%; 
 background-repeat: no-repeat; 
 position: absolute; 
 background-image: url('../Imagens/Fundo.png'); 
 background-size: contain; 
 background-position: center center;
 }
 
 #background-cover { 
 display: block; width: 100%; height: 100%; 
 position: fixed; top: 0; left: 0; right: 0; bottom: 0; 
 background-image: url('../Imagens/FundoLogo.png'); 
 background-repeat: no-repeat; 
 background-size: cover; 
 background-position: center center; 
 }
 
 /* ==================================================================
	                          Barra/Menu
================================================================== */
 header { 
 position: absolute; 
 top: 0px; 
 width: 100%; height: 108px; z-index: 10; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 }
 header #logo-small { 
 position: absolute; 
 top: 20px; left: 34px; z-index: 1000; 
 }
 header #menu-top-menu { 
 position: absolute; 
 top: 30px; 
 right: 40px; 
 margin: 0px; 
 padding: 0px; 
 text-align: center; 
 }
 header #menu-top-menu li { 
 display: inline-block; 
 margin: 0px 15px; 
 vertical-align: 
 top; 
 }
 header #menu-top-menu li, header #menu-top-menu li a { 
 text-transform: uppercase; 
 font-size: 13px; 
 text-decoration: none; 
 color: #28241D; 
 transition: opacity 300ms; 
 letter-spacing: 4px; 
 cursor: pointer; 
 }
 header #menu-top-menu li:last-of-type {
 margin: 0px 0px 0px 15px; 
 }
 header #menu-top-menu li:hover, header #menu-top-menu li a:hover { 
 opacity: 0.6; 
 }

/* ==================================================================
	                        Paginas/Menu
================================================================== */
 #news-wrapper, #music-wrapper, #video-wrapper, #tour-wrapper { 
 opacity: 0; 
 width: 0px; height: 0px; z-index: -1000000; 
 position: absolute; transition: opacity 300ms; 
 }
 #news-wrapper.open, #music-wrapper.open, #video-wrapper.open, #tour-wrapper.open { 
 opacity: 1; width: 100%; height: 100%; z-index:  1000000; 
 overflow-y: hidden; 
 }
 #close-button { 
 font-family: '', sans-serif; 
 font-size: 15px; 
 position: fixed; 
 right: 40px; 
 top: 30px; text-transform: uppercase; 
 letter-spacing: 3px; 
 transition: opacity 300ms; cursor: pointer; z-index: 12; 
 }
 #close-button:hover { 
 opacity: 0.6; 
 }

/* ==================================================================
	                            Album
================================================================== */								
 #music-wrapper #primary { 
 position: absolute; 
 display: block; 
 top: 0px; 
 width: 100%; height: 100%; z-index: 11; 
 padding-top: 50px; overflow-y: scroll; -webkit-overflow-scrolling: touch; 
 background-color: rgba(255,255,255,0.95); 
 }
 #music-wrapper #primary #content { 
 width: 650px; text-align: 
 center; padding-bottom: 30px; position: relative; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 }
 #music-wrapper #primary #content .post-entry { 
 margin-bottom: -30px; 
 }
 #music-wrapper .album { 
 margin-bottom: 30px; 
 position: relative; 
 width: 650px; height: 650px; 
 }
 #music-wrapper .album .album-title { 
 text-transform: 
 uppercase; font-size: 18px; 
 color: #000000; display: block; 
 font-weight: 700; 
 text-align: center; line-height: 12px; letter-spacing: 3px; margin-bottom: 15px; 
 }
 #music-wrapper .album .album-wrapper {
 width: 650px; 
 margin: 0 auto; 
 }
 #music-wrapper .album p { 
 color: #111; text-transform: uppercase; 
 font-size: 24px; margin: 0px auto 20px auto; 
 }
 #music-wrapper .album .album-art { 
 display: block; 
 width: 538px; height: 538px; 
 margin: 0px; position: relative; 
 left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 }
 #music-wrapper .album .buy-links { 
 margin: 30px 0px; 
 }
 #music-wrapper .album .buy-links a { 
 display: inline-block; 
 color: #000000; text-decoration: none; 
 font-size: 14px; text-align: 
 center; transition: opacity 300ms; text-transform: uppercase; 
 font-weight: 300; margin: 0px 10px; letter-spacing: 3px; 
 }
 #music-wrapper .album .buy-links a:hover { 
 opacity: 0.6; 
 }								

/* ==================================================================
	                          Videos
================================================================== */									
 #video-wrapper #primary { 
 position: absolute; 
 display: block; 
 top: 0px; 
 width: 100%; height: 100%; z-index: 11; padding-top: 50px; 
 overflow-y: scroll; -webkit-overflow-scrolling: touch; 
 background-color: rgba(255,255,255,0.95); 
 }
 #video-wrapper #primary #content { 
 width: 538px; 
 text-align: center; 
 padding-bottom: 100px; 
 position: relative; left: 50%; 
 transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 }
 #video-wrapper #primary #content .post-entry { }
 #video-wrapper #primary #content .post-entry .entry { 
 display: inline-block; 
 width: 538px; height: 303px; 
 }
 #video-wrapper #primary #content .post-entry .video-title { 
 text-transform: uppercase; 
 font-size: 18px; 
 color: #000000; 
 display: block; font-weight: 300; 
 text-align: left; 
 line-height: 12px; 
 letter-spacing: 3px; 
 margin: 20px 0px 25px 0px; 
 }
 #video-wrapper #primary #content h2 { 
 margin: 8px 0px 24px 0px; 
 text-transform: uppercase; 
 color: #000000; 
 font-weight: 500; 
 font-size: 35px; text-decoration: none; transition: opacity 300ms; 
 font-weight: 700; 
 }
 #video-wrapper #primary #content .entry p { 
 color: #000000; 
 font-size: 14px; 
 margin: 0 auto; 
 position: absolute; 
 right: 0px; 
 }
 #video-wrapper #primary #content .entry p iframe { 
 width: 538px; height: 303px; 
 }
 #video-wrapper .prev-posts-link, #video-wrapper .next-posts-link { 
 display: inline-block; 
 margin-top: 20px; 
 }
 #video-wrapper .prev-posts-link a, #video-wrapper .next-posts-link a { 
 color: #000000; text-decoration: none; text-transform: uppercase; letter-spacing: 3px; 
 display: inline-block; transition: opacity 300ms; 
 }
 #video-wrapper .prev-posts-link a:hover, #video-wrapper .next-posts-link a:hover { 
 opacity: 0.6; 
 }
 #video-wrapper .prev-posts-link { 
 text-align: left; float: left; 
 }
 #video-wrapper .next-posts-link { 
 text-align: right; float: right; 
 }

/* ==================================================================
	                            Tour
================================================================== */	
 #tour-wrapper #primary { 
 position: absolute; 
 display: block; top: 0px; 
 width: 100%; height: 100%; z-index: 11; 
 padding-top: 50px; overflow-y: scroll; -webkit-overflow-scrolling: touch; 
 background-color: rgba(255,255,255,0.95); 
 }
 #tour-wrapper #primary .events-container { 
 width: 800px; text-align: 
 center; padding-bottom: 30px; 
 margin-top: 70px; 
 position: relative; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -o-transform: translateX(-50%); -webkit-transform: translateX(-50%); 
 }
 #tour-wrapper #primary .header { 
 text-transform: uppercase; 
 letter-spacing: 1px; 
 font-size: 14px; 
 position: relative; top: -20px; 
 }
 #tour-wrapper #primary .header .date, #tour-wrapper #primary .header .venue, #tour-wrapper #primary .header .location, #tour-wrapper #primary .header .tickets { 
 display: inline-block; 
 text-align: left; float: left; 
 font-weight: 700; 
 }
 #tour-wrapper #primary .header .date { 
 width: 150px; 
 }
 #tour-wrapper #primary .header .venue { 
 width: 350px;  
 }
 #tour-wrapper #primary .header .location { 
 width: 220px; 
 }
 #tour-wrapper #primary .header .tickets { 
 width: 80px; 
 }
 #tour-wrapper #primary #dates-container { 
 width: 630px; 
 text-align: center; 
 margin: 0 auto; 
 }
 #tour-wrapper .dates-list ul { 
 margin: 0 auto; 
 padding: 0; 
 }
 #tour-wrapper .dates-list .event { 
 padding: 10px 0px; 
 text-align: left; 
 }
 #tour-wrapper .dates-list .event .event-date, #tour-wrapper .dates-list .event .event-month, #tour-wrapper .dates-list .event .event-day, #tour-wrapper .dates-list .event .event-location, #tour-wrapper .dates-list .event .event-venue, #tour-wrapper .dates-list .event .event-city, #tour-wrapper .dates-list .event .event-tickets, #tour-wrapper .dates-list .event .event-rsvp { 
 display: inline-block; 
 letter-spacing: 1px; 
 }
 #tour-wrapper .dates-list .event .event-date { 
 margin: 0px 10px 0px 00px; 
 width: 140px; 
 font-size: 12px; 
 }
 #tour-wrapper .dates-list .event .event-month { 
 margin-right: 5px; text-transform: uppercase; 
 }
 #tour-wrapper .dates-list .event .event-venue { 
 width: 350px; text-transform: uppercase; 
 font-size: 12px; 
 }
 #tour-wrapper .dates-list .event .event-city { 
 width: 220px; 
 text-transform: uppercase; 
 font-size: 12px; 
 }
 #tour-wrapper .dates-list .event .event-tickets { 
 display: inline-block; 
 width: 80px; 
 color: #000000; text-decoration: none; 
 font-size: 12px; text-align: left; 
 transition: opacity 300ms; text-transform: uppercase; 
 font-weight: 300; 
 }
 #tour-wrapper .dates-list .event .event-tickets:hover { 
 opacity: 0.6; 
 }

/* ==================================================================
	                          Rodape
================================================================== */	
 #footer { 
 position: absolute; 
 bottom: 20px; 
 right: 40px; z-index: 1000; 
 }
 #footer a, #footer .signup { 
 display: inline-block; 
 margin: 0px 6px; 
 background-position: center center; 
 background-repeat: no-repeat; 
 background-size: contain; transition: opacity 600ms; 
 }
 #footer a:hover, #footer .signup:hover { 
 opacity: 0.6; 
 }
 #footer .signup { 
 background-image: url('../Imagens/Social/Email.png'); 
 width: 33px; height: 33px; 
 position: relative; 
 top: -2px; 
 }
 #footer .facebook { 
 background-image: url('../Imagens/Social/Facebook.png'); 
 width: 33px; height: 33px; 
 position: relative; 
 top: -2px; 
 }
 #footer .twitter { 
 background-image: url('../Imagens/Social/Whats.png'); 
 width: 33px; height: 33px; position: relative; top: -2px; }
 #footer .instagram { 
 background-image: url('../Imagens/Social/Whats.png'); 
 width: 33px; height: 33px; 
 }
 #footer .snapchat { 
 background-image: url('../Imagens/Social/Spotify.png'); 
 width: 20px; height: 20px; 
 }
 #footer .youtube { 
 background-image: url('../Imagens/Social/Instagr.png'); 
 width: 33px; height: 33px; 
 position: relative; 
 top: -1px; 
 }

/* ==================================================================
	                        Video/Fundo
================================================================== */
.bg_video{
	position: fixed; 
	right: 0; 
	bottom: 0;
	min-width: 100%; 
	min-height: 100%;
	width: auto; 
	height: auto; 
	z-index: -1000;
	background: url(../Imagens/Fundo/.png) no-repeat;
	background-size: cover; 
}

.cases-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
}

.case-img {
  width: 200px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s;
}

.case-img:hover {
  transform: scale(1.05);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  z-index: 9999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

.lightbox-content {
  margin: auto;
  display: block;
  max-width: 80%;
  max-height: 80%;
}

.close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
}