/*
Theme Name: StudioBR
Theme URI: https://www.studiobr.com.br/
Author: Walker Sousa
Author URI: https://www.walkersousa.com.br/
Description: Tema do site StudioBR.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@-webkit-keyframes color_change_white {
	from { background-color: black; }
	to { background-color: white; }
}

@-moz-keyframes color_change_white {
	from { background-color: black; }
	to { background-color: white; }
}

@-ms-keyframes color_change_white {
	from { background-color: black; }
	to { background-color: white; }
}

@-o-keyframes color_change_white {
	from { background-color: black; }
	to { background-color: white; }
}

@keyframes color_change_white {
	from { background-color: black; }
	to { background-color: white; }
}

@-webkit-keyframes color_change_black {
	from { background-color: white; }
	to { background-color: black; }
}

@-moz-keyframes color_change_black {
	from { background-color: white; }
	to { background-color: black; }
}

@-ms-keyframes color_change_black {
	from { background-color: white; }
	to { background-color: black; }
}

@-o-keyframes color_change_black {
	from { background-color: white; }
	to { background-color: black; }
}

@keyframes color_change_black {
	from { background-color: white; }
	to { background-color: black; }
}

.clearboth { display: block; clear: both; }
.box-size { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.area-padding { display: block; padding: 0px 15px; }
.default-btn { display: block; width: 300px; max-width: 80%; text-align: center; font-family: 'ralewayregular'; font-size: 15px; text-transform: uppercase; color: #000; text-decoration: none; padding: 15px; border: 1px solid #000; margin: 50px auto; animation: color_change_white 0.7s; }
.default-btn:hover { color: #FFF; background-color: #000; animation: color_change_black 0.7s; }
.loader-btn { display: block; width: 300px; text-align: center; padding: 13px; border: 1px solid #000; margin: 50px auto; }

#loader { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background-color: #000; z-index: 999999; }
#loader img { position: absolute; top: 20%; left: 50%; margin-left: -76px; }
#loader h1 { position: absolute; top: 40%; width: 100%; text-align: center; color: #FFF; font-family: 'bryantregular'; font-size: 30px; text-transform: uppercase; }
#loader canvas { position: absolute; top: 50%; left: 50%; margin-left: -100px; color: #FFF; }

@media screen and (max-width: 550px) {
	#loader h1 { font-size: 24px; }
}

#wrapper { position: relative; top: 0px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }

.bg-nav { position: fixed; z-index: 10; left: 0; width: 100%; height: 350px; top: -350px; background-color: #000; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
body.customize-support .bg-nav { top: -318px; }

nav { position: fixed; z-index: 12; left: 0; width: 300px; top: -350px; left: 50%; margin-left: -150px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
body.customize-support nav { top: -318px; }
nav ul { display: block; padding: 50px 0px; margin: auto; }
nav ul li { display: block; text-align: center; }
nav ul li a { display: inline-block; color: #FFF; text-transform: uppercase; font-family: 'bryantregular'; text-decoration: none; font-size: 30px; line-height: 50px; }

#top { position: absolute; top: 0px; left: 0px; width: 100%; display: block; z-index: 11; }
#top.black { background-color: black; height: 210px; }

#top .logo { display: block; position: absolute; top: 30px; left: 30px; width: 152px; height: 144px; }
#top .logo.fixed { position: fixed; }
body.customize-support #top .logo.fixed { top: 62px; }
#top .logo img { width: 100%; }

#top .button-menu { display: block; position: absolute; top: 30px; right: 30px; overflow: hidden; margin: 0; padding: 0; width: 30px; height: 30px; font-size: 0; text-indent: -9999px; -webkit-appearance: none; -moz-appearance: none; appearance: none; box-shadow: none; border-radius: none; border: none; cursor: pointer; -webkit-transition: background 0.3s; transition: background 0.3s; background-color: transparent; }
#top .button-menu.fixed { position: fixed; }
#top .button-menu:focus { outline: none; }

#top .button-menu span { display: block; position: absolute; top: 13px; left: 0px; right: 0px; height: 4px; background: white; }
#top .button-menu.black span { display: block; position: absolute; top: 13px; left: 0px; right: 0px; height: 4px; background: black; }

#top .button-menu span::before, #top .button-menu span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: #FFF; content: ""; }
#top .button-menu.black span::before, #top .button-menu.black span::after { position: absolute; display: block; left: 0; width: 100%; height: 4px; background-color: #000; content: ""; }
.pmt-open #top .button-menu.black span::before, .pmt-open #top .button-menu.black span::after { background-color: #FFF; }

#top .button-menu span::before { top: -10px; }
#top .button-menu span::after { bottom: -10px; }

body.customize-support #top .button-menu.fixed { top: 62px; }

#top.black .button-menu span { background: white; }
#top.black .button-menu span::before, #top.black .button-menu span::after { background-color: #FFF; }

#top .button-menu span { -webkit-transition: background 0s 0.3s; transition: background 0s 0.3s; }
#top .button-menu span::before, .button-menu span::after { -webkit-transition-duration: 0.3s, 0.3s; transition-duration: 0.3s, 0.3s; -webkit-transition-delay: 0.3s, 0s; transition-delay: 0.3s, 0s; }
#top .button-menu span::before { -webkit-transition-property: top, -webkit-transform; transition-property: top, transform; }
#top .button-menu span::after { -webkit-transition-property: bottom, -webkit-transform; transition-property: bottom, transform; }

#top .button-menu.active span { background: none; }
#top .button-menu.active span::before { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
#top .button-menu.active span::after { bottom: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
#top .button-menu.active span::before, .button-menu.active span::after { -webkit-transition-delay: 0s, 0.3s; transition-delay: 0s, 0.3s; background-color: #FFF; }

body.pmt-open nav, body.pmt-open .bg-nav { top: 0; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
body.pmt-open #wrapper { top: 350px; -webkit-transition: all 1s; -moz-transition: all 1s; -ms-transition: all 1s; -o-transition: all 1s; transition: all 1s; }
body.customize-support #top, body.customize-support.pmt-open nav, body.customize-support.pmt-open .bg-nav { top: 32px; }

@media screen and (max-width: 782px) {
	.bg-nav { height: 200px; top: -200px; }
	nav { width: 120px; top: -200px; margin-left: -60px; }
	nav ul { padding: 25px 0px; }
	nav ul li a { font-size: 20px; line-height: 30px; }
	body.pmt-open #wrapper { top: 200px; }
	body.customize-support .bg-nav { top: -154px; }
	body.customize-support nav { top: -154px; }
	body.customize-support #top, body.customize-support.pmt-open nav, body.customize-support.pmt-open .bg-nav { top: 46px; }
	body.customize-support #top .logo.fixed { top: 76px; }
	body.customize-support #top .button-menu.fixed { top: 76px; }
}

@media screen and (max-width: 600px) {
	#top .logo, #top .logo img { width: 70px; height: 66px; }
}

#banner { display: block; width: 100%; overflow: hidden; }
#banner .banner { display: block; width: 999999999999999px; position: relative; }
#banner .banner ul { display: block; position: relative; left: 0px; }
#banner .banner ul li { display: block; float: left; }
#banner .banner ul li .img { position: relative; display: block; padding-top: 51.25%; margin-bottom: 50px; }
#banner .banner ul li .img .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#banner .banner ul li h1 { display: block; text-align: center; font-size: 30px; font-family: 'bryantregular'; color: #000; text-transform: uppercase; }
#banner .banner ul li h2 { display: block; text-align: center; font-size: 15px; font-family: 'ralewayregular'; color: #000; }
#banner .banner ul li .line { display: block; width: 100px; height: 1px; background-color: #000; margin: 15px auto; }

#instagram { display: block; }
#instagram h1 { display: block; font-family: 'bryantregular'; font-size: 48px; color: #000; text-transform: uppercase; text-align: center; padding: 50px 0px; }
#instagram .photo-area { display: block; width: 32%; float: left; }
#instagram .photo-area .photo { position: relative; display: block; padding-top: 100%; margin-bottom: 50px; }
#instagram .photo-area .photo .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#instagram .photo-area .photo .content a { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#instagram .photo-area .photo .content a:hover { background-color: rgba(0,0,0,0.3); }
#instagram .photo-area.mid { margin: 0px 1.5%; }
#instagram .area { max-width: 996px; margin: auto; }
#instagram .icon-instagram { display: block; color: #000; font-family: 'ralewayregular'; font-size: 15px; line-height: 20px; text-decoration: none; }
#instagram .icon-instagram:before { position: relative; top: 2px; margin-right: 5px; }

#footer { display: block; color: white;}
#footer .img { position: relative; display: block; padding-top: 28.59%; }
#footer .img .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#footer .img .content h1 { position: absolute; width: 100%; top: 50%; text-align: center; font-family: 'bryantregular'; font-size: 30px; margin-top: -50px; text-transform: uppercase; text-shadow: 0px 0px 2px #000 }
#footer .img .content .contato { position: absolute; width: 144px; top: 50%; left: 50%; text-align: center; font-family: 'bryantregular'; font-size: 18px; margin-bottom: -50px; margin-left: -72px; border-bottom: 1px solid white; text-decoration: none; color: white; text-shadow: 0px 0px 2px #000}
#footer .black-area { display: block; position: relative; background-color: #000; padding: 30px; }
#footer .black-area .social { position: absolute; left: 30px; top: 28px; }
#footer .black-area .social a { float: left; margin-right: 10px; color: #FFF; text-decoration: none; }
#footer .contentcom { position: absolute; top: 26px; right: 30px; font-family: 'bryantregular'; line-height: 18px; color: #FFF; text-decoration: none; }
#footer .contentcom img { margin-left: 5px; }
#footer .menu { display: block; text-align: center; }
#footer .menu li { display: inline-block; margin: 0px 15px; }
#footer .menu li a { display: block; color: #FFF; text-decoration: none; font-family: 'ralewaymedium'; font-size: 15px; text-transform: uppercase; }

@media screen and (max-width: 820px) {
	#footer .menu li { display: block; padding: 5px 0px; }
	#footer .img .content h1 { font-size: 20px; margin-top: -20px; }
	#footer .img .content .contato { width: 112px; font-size: 14px; margin-bottom: -30px; margin-left: -56px; }
}

#contato { display: block; padding-top: 250px; }
#contato h1 { display: block; font-family: 'bryantregular'; font-size: 48px; color: #000; text-transform: uppercase; text-align: center; padding: 50px 0px; }
#contato #mapa { display: block; padding-top: 30%; }
#contato .adress { display: block; max-width: 636px; margin: auto; padding: 50px 0px; }
#contato .adress h1 { float: left; margin-right: 50px; }
#contato .adress span { display: block; font-family: 'bryantregular'; font-size: 18px; padding: 30px 0px; }
#contato .adress span p { padding: 10px 0px; }

@media screen and (max-width: 782px) {
	#contato #mapa { padding-top: 60%; }
	#contato .adress h1 { display: block; text-align: center; margin-right: 0px; float: none; }
	#contato .adress span { text-align: center; }
}

#studio { display: block; padding-top: 250px; }
#studio .top { display: block; position: relative; margin-bottom: 50px; }
#studio .top h1 { display: block; position: relative; width: 50%; font-family: 'bryantregular'; font-size: 30px; line-height: 40px; margin-bottom: 50px; padding-left: 30px; float: left; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#studio .top h2 { display: block; position: relative; clear: both; width: 35%; font-family: 'ralewayregular'; font-size: 16px; line-height: 1.5em; padding-left: 30px; float: left; z-index: 2; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#studio .top .fundo { display: block; position: absolute; top: 0px; right: 0px; width: 60%; z-index: 1; }
#studio .top .fundo .limite { position: relative; display: block; padding-top: 57.62%; }
#studio .top .fundo .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#studio .bottom { display: block; margin-bottom: 50px; }
#studio .bottom .left { display: block; width: 50%; float: left; }
#studio .bottom .left .img { position: relative; display: block; width: 90%; padding-top: 67.17%; }
#studio .bottom .left .img .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#studio .bottom .right { display: block; width: 45%; float: right; padding-right: 5%; }
#studio .bottom .right p { display: block; font-family: 'ralewayregular'; font-size: 16px; line-height: 1.5em; margin-bottom: 20px; }
#studio .bottom .right p strong { font-weight: bold; }
#studio big { display: block; font-family: 'bryantregular'; font-size: 24px; line-height: 28px; margin: 0px 30px 15px; text-align: center; text-transform: uppercase; }
#studio small { display: block; font-family: 'bryantregular'; font-size: 15px; text-align: center; margin-bottom: 50px; text-transform: uppercase; }

@media screen and (max-width: 782px) {
	#studio .top h1 { font-size: 28px; line-height: 33px; margin-bottom: 25px; }
	
	#studio .bottom .left { width: 100%; float: none; margin-bottom: 50px; }
	#studio .bottom .left .img { width: 100%; }
	#studio .bottom .right { width: 90%; float: none; margin: auto; }
	#studio .top .fundo { width:50%; }
}

@media screen and (max-width: 600px) {
	#studio { padding-top: 150px; }
}

@media screen and (max-width: 500px) {
	#studio .top h1 { font-size: 20px; line-height: 1.5em; margin-bottom: 15px; padding-top: 15px; float:none; width: 100%; padding:10px;}
	#studio .top h2 { width:100%; float:none; margin-bottom: 10px; padding:10px; font-size: 14px;}
	#studio .top .fundo { width: 100%; position: static;}
	#studio .bottom .right p { font-size: 14px; }
}

#produtos { display: block; padding-top: 250px; }

#produtos p { margin: 1.12em 0 !important; }
#produtos b, #produtos strong { font-weight: bolder !important; }
#produtos em { font-style: italic !important; }

#produtos .top { display: block; position: relative; margin-bottom: 50px; }
#produtos .top h1 { display: block; position: relative; width: 35%; font-family: 'bryantregular'; font-size: 48px; line-height: 55px; text-align: right; z-index: 2; }
#produtos .top .fundo { display: block; position: absolute; top: 0px; right: 0px; width: 70%; z-index: 1; }
#produtos .top .fundo .limite { position: relative; display: block; padding-top: 32.79%; }
#produtos .top .fundo .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#produtos .bottom { display: block; margin-bottom: 50px; }
#produtos .bottom .left { display: block; width: 35%; float: left; margin-bottom: 50px; }
#produtos .bottom .left h1 { display: block; position: relative; font-family: 'bryantregular'; font-size: 48px; line-height: 55px; text-align: right; z-index: 2; }
#produtos .bottom .right { display: block; width: 65%; float: right; padding-left: 50px; margin-bottom: 50px; padding-right: 5%; }
#produtos .bottom .right p { display: block; font-family: 'ralewayregular'; font-size: 15px; line-height: 1.4em; }

@media screen and (max-width: 782px) {
	#produtos .bottom .left { width: 100%; float: none; margin-bottom: 50px; }
	#produtos .bottom .left h1 { text-align: center; }
	#produtos .bottom .right { width: 90%; float: none; margin: auto; margin-bottom: 50px; padding-left: 0px; }
	#produtos .bottom .right p { text-align: center; }
}

@media screen and (max-width: 600px) {
	#produtos { padding-top: 150px; }
}

@media screen and (max-width: 500px) {
	#produtos .top h1 { text-align: center; padding-top: 15px; }
	#produtos .top .fundo { width: 100%; }
}

#trabalhos { display: block; padding-top: 250px; }
#trabalhos h1 { display: block; position: relative; width: 100%; font-family: 'bryantregular'; font-size: 48px; text-align: center; margin-bottom: -94px; text-transform: uppercase; z-index: 2; }

#trabalhos .grid *, #trabalhos .grid *:after, #trabalhos .grid *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

#trabalhos .grid { width: 80%; list-style: none; margin: 50px auto; padding: 0; }
#trabalhos .grid li { position: relative; display: block; float: left; padding: 0px; width: 33%; opacity: 0; }
#trabalhos .grid li.shown, .no-js #trabalhos .grid li, .no-cssanimations #trabalhos .grid li { opacity: 1; }
#trabalhos .grid li a, #trabalhos .grid li img { position: relative; outline: none; border: none; display: block; max-width: 100%; }
#trabalhos .grid li a { z-index: 2; }
#trabalhos .grid li img { opacity: 0; }
#trabalhos .grid li .content { position: absolute; top: 25px; right: 25px; bottom: 25px; left: 25px; background-position: center; background-repeat: no-repeat; background-size: cover; }
#trabalhos .grid li .content .overlay { position: absolute; display: none; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4); z-index: 1; }
#trabalhos .grid li .content .overlay h2 { position: absolute; width: 100%; height: 50px; line-height: 50px; top: 50%; margin-top: -50px; font-family: 'bryantregular'; text-align: center; text-transform: uppercase; font-size: 30px; color: #FFF; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#trabalhos .grid li .content .overlay .linha { position: absolute; width: 100px; height: 1px; top: 50%; margin-top: -1px; left: 50%; margin-left: -50px; background-color: #FFF; }
#trabalhos .grid li .content .overlay h3 { position: absolute; width: 100%; height: 40px; line-height: 40px; top: 50%; margin-top: 0px; font-family: 'bryantregular'; text-align: center; font-size: 20px; color: #FFF; text-decoration: none; }
#trabalhos .grid li:hover .content .overlay { display: block; }

#trabalhos .grid.effect-2 li.animate { -webkit-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp 0.65s ease forwards; animation: moveUp 0.65s ease forwards; }

@-webkit-keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); opacity: 1; }
}

@keyframes moveUp {
	0% { }
	100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; }
}

@media screen and (max-width: 1400px) {
	#trabalhos .grid li .content .overlay h2 { font-size: 25px; }
}

@media screen and (max-width: 1160px) {
	#trabalhos .grid li .content .overlay h2 { font-size: 20px; }
}

@media screen and (max-width: 996px) {
	#trabalhos .grid { width: 90%; }
	#trabalhos .grid li { width: 50%; }
}

@media screen and (max-width: 720px) {
	#trabalhos h1 { font-size: 38px; margin-bottom: -94px; }
}

@media screen and (max-width: 662px) {
	#trabalhos .grid { width: 100%; }
	#trabalhos .grid li { width: 100%; }
}

#equipe { display: block; padding-top: 250px; }
#equipe h1 { display: block; position: relative; text-align: center; text-transform: uppercase; font-family: 'bryantregular'; font-size: 48px; margin-bottom: -24px; z-index: 1; }
#equipe .top { display: block; margin-bottom: 100px; }
#equipe .top .left { display: block; width: 50%; padding: 100px 0px 0px 100px; float: left; }
#equipe .top .left big { display: block; margin-bottom: 20px; font-family: 'ralewayregular'; font-size: 18px; line-height: 20px; }
#equipe .top .left big strong { font-weight: bold; }
#equipe .top .left small { display: block; max-width: 90%; font-family: 'ralewayregular'; font-size: 16px; line-height: 1.5em; }
#equipe .top .right { display: block; position: relative; width: 50%; padding-top: 50%; float: right; }
#equipe .top .right .content { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-position: center; background-repeat: no-repeat; background-size: cover; }
#equipe .bottom { display: block; margin-bottom: 100px; }
#equipe .bottom span { display: block; margin-bottom: 50px; }
#equipe .bottom span h4 { display: block; font-family: 'ralewayregular'; font-size: 18px; line-height: 20px; padding-left: 40%; }
#equipe .bottom span h5 { display: block; font-family: 'ralewayregular'; font-size: 18px; line-height: 20px; font-weight: bold; padding-left: 40%; }
#equipe h2 { display: block; max-width: 80%; text-align: center; text-transform: uppercase; font-family: 'bryantregular'; font-size: 24px; margin: auto; margin-bottom: 20px; }
#equipe h3 { display: block; text-align: center; text-transform: uppercase; font-family: 'bryantregular'; font-size: 15px; margin-bottom: 50px; }

@media screen and (max-width: 850px) {
	#equipe .top .left { padding: 50px 0px 0px 50px; }
}

@media screen and (max-width: 630px) {
	#equipe .top .right { width: 100%; padding-top: 50%; float: none; margin-bottom: 20px; }
	#equipe .top .left { width: 100%; padding: 0px 50px 0px 50px; float: none; }
	#equipe .top .left small { max-width: 100%; }
	#equipe .bottom span h4 { padding-left: 30%; }
	#equipe .bottom span h5 { padding-left: 30%; }
}

@media screen and (max-width: 600px) {
	#equipe { padding-top: 100px; }
}

@media screen and (max-width: 500px) {
	#wpadminbar { position: fixed !important; }
}

#wpadminbar { z-index: 999 !important; }

.the-modal{
	display: none;
	background: white;
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 9999;
}
.the-modal .close-modal{
	float: right;
    margin: 30px;
    font-size: 34px;
}
.the-modal .close-modal,
.the-modal .close-modal:hover,
.the-modal .close-modal:active,
.the-modal .close-modal:visited{
	color: #000;
}
.the-modal .default-btn{ }
.the-modal .the-video{
	width: 900px;
    height: 506px;
    margin: 30px auto;
}