@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,900');

*	{margin:0;padding:0;border:0;outline:0;font-size:14px;vertical-align:baseline;font-family:'Source Sans Pro', Helvetica, Arial, "sans-serif";font-weight: 300;color:#000; box-sizing: border-box;}
html	{background-color: #f5f5f5;}
html, body	{height:100%;}
body	{}


ul li	{list-style:none;}
a	{text-decoration:none;}
p	{line-height:20px;margin-bottom:30px;}
p:last-child {margin-bottom:0;}
img	{vertical-align:middle;}
em, em * {font-style:italic;}
strong, strong * {font-weight: 900;}
u, u * {text-decoration: underline; }

h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *	{font-weight: 900;}
h1	{ margin-bottom:30px; text-align: center; }
h1, h1 *	{ color:#000;font-size: 40px;line-height: 43px; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"]	{border:solid 1px #ccc ;height:40px;padding:0 15px;width:100%;}
input[type="submit"], input[type="button"]	{background: #003f70 url(../images/grad-bt.png) no-repeat center center;background-size: 100% 100%; color: #fff;width: 100%;height: 40px;font-weight: bold;text-transform: uppercase; padding:0 15px;cursor:pointer; -webkit-appearance: none;}
textarea	{border:solid 1px #ccc;padding:10px 14px;width:100%;height: 150px;resize:none;}
select {background: url(../images/select-arrow-pink.png) no-repeat right 0 ; background-size: 40px 40px; border:solid 1px #ccc;height:38px;padding:0 14px;width:268px;}
select {background:url(../images/arrow-dropbox.png) no-repeat right 0;background-size: 38px 38px; width:100%;-webkit-appearance: none; -moz-appearance: none; appearance: none;}
option {padding:10px;}

.wrapper	{width:960px;margin:0 auto;}

.mfp-content {text-align:center;}
#mfp-w2c {position:relative;background:#FFF;display:inline-block;text-align:left; padding: 30px; width: auto; max-width:960px; min-width:240px; margin: 20px auto;}
#mfp-w2c h1 {text-align:center;}


/* ############################################################################
							MOBILE
############################################################################ */
#mobile-menu-switch{background:url(../images/menu-switch.png) no-repeat 0 0;background-size:40px;width:40px;height:40px;position:fixed;right:10px;top:18px;z-index:1022;cursor:pointer;}
#mobile-menu{background:#fff;width:280px;height:100%; padding-top: 140px; top:0;right:-290px;box-shadow:0 1px 5px rgba(0,0,0,0.5);position:fixed;z-index:1000;overflow-y:scroll;transition:all .5s ease;}
#mobile-menu.active{right:0;}
#mobile-menu a{text-align:center;display:block;border-bottom:solid 1px #dedede;color:#000;text-transform:uppercase;font-weight:600;font-size:14px;padding:20px;}


/* ############################################################################
							HEADER & FOOTER
############################################################################ */
header {background-color: #fff;position:fixed;top:0;left:0;width:100%;height: 80px;z-index:1001;box-shadow: 0 0 10px rgba(0,0,0,0.7);}

header * {font-size: 18px;line-height: 21px;text-transform: uppercase;font-weight: bold;}
header .wrapper {display: flex;align-items: center;justify-content: space-between;width: 1200px;height: 100%;}
header .left {display: flex;}
header .left a {display: inline-flex;align-items: center;position: relative;}
header .left a img {width: 100%;}
header .left .logo {width: 75px;margin-right: 40px;}
header .left .logo-sponsor {width: 104px;}

header .right ul {display: flex;}
header .right li {margin-left: 40px;}

footer {position:fixed;bottom:0;left:0;width:100%;height: 80px;z-index:999;box-shadow: 0 0 5px rgba(0,0,0,0.3);}
footer .wrapper {height: 100%;}
footer .top {background: url(../images/label-footer.png) no-repeat center center;color: #a6a6a6;text-align: center;height: 25px;font-size: 12px;line-height: 20px;z-index: 3; position: absolute;top: -25px;left: 50%;width: 134px;margin-left: -67px;display: flex;align-items: center;justify-content: center;}
footer .bot {background-color: #fff;height: 100%;position: relative;z-index: 2;}
footer .bot .wrapper {display: flex;align-items: center;justify-content: center;position: relative;height: 100%;}
/*footer .bot ul {display: flex;align-items: center;justify-content: space-between;height: 100%;padding: 0 20px;}
footer .bot li {height: 100%;margin: 0 15px;}
footer .bot li a {height: 100%;min-width: 70px;display: inline-flex;align-items: center;justify-content: center;}
footer .bot li img {height: 60px;display: inline-flex;align-items: center;font-weight: bold;}*/
footer p {margin-bottom: 0;}
footer .bot .wrapper div {display: flex; flex-direction: column;align-items: center; width: 20%}
footer .bot .wrapper .oficiais {width: 40%;}
footer .bot .label{font-size: 12px; color:#a6a6a6; display: block; width: 100%; text-align: center; text-transform: uppercase; font-weight: bold;}
footer .bot .wrapper .oficiais {margin: 0 30px; flex-direction: row; flex-wrap: wrap; justify-content: center;}

#general-container {padding: 50px 0 160px;}
.general-section {padding: 160px 0;}
/* ############################################################################
							HOME
############################################################################ */
#home-banner {background: #062b48 url(../images/home-banner.png) repeat center center;height: 520px;box-shadow: inset 0 0 20px rgba(0,0,0,0.5);position: relative;}
#home-banner * {color: #fff;}
#home-banner .wrapper {height: 100%;display: flex;align-items: center;}
#home-banner .content {width: 100%;padding-top: 80px;}
#home-banner .top {display: flex;align-items: center;justify-content: center;height: 130px;margin-bottom: 50px;}
#home-banner .top img {font-size: 50px;font-weight: bold; height:100%;}
#home-banner .bot {border: solid 5px #fff;border-radius: 20px;display: flex;align-items: center;justify-content: space-between;padding: 50px;height: 150px;}
#home-banner .bot .left,
#home-banner .bot .right {font-size: 80px;line-height: 80px;height: 80px;overflow: hidden;font-weight: bold;}
#home-banner .bot .mid {display: flex;}
#home-banner .bot .innermid {padding: 0 50px;text-align: center;}
#home-banner .bot .innermid p {margin-bottom: 10px;}
#home-banner .bot .vs span {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border: solid 5px #75654a;border-radius: 50%;font-weight: bold;}
#home-banner .bot .innerleft,
#home-banner .bot .innerright {display: inline-flex;align-items: center;}
#home-banner .bot .innerleft img,
#home-banner .bot .innerright img {font-size: 30px;font-weight: bold;height: 80px;}

#game-detail {}
#game-detail h1.title {margin-bottom: 5px;}
#game-detail h3.subtitle {text-align: center;margin-bottom: 40px;font-size: 20px;line-height: 23px;font-weight: 300;}
#game-detail .content {display: flex;justify-content: center;}
#game-detail .left {width: 500px;padding-right: 30px;}
#game-detail .right {width: 300px;flex-shrink: 0;display: flex;align-items: center;}
#game-detail-content {background-color: #fff;padding: 30px;box-shadow: 0 0 10px #a6a6a6; border-radius: 0;}
#game-detail-content h4 {position: relative;text-align: center;margin-bottom: 15px;}
#game-detail-content h4 .line {background-color: #44c8f5;position: absolute;top: 12px;left: 0;height: 1px;width: 100%;display: block;}
#game-detail-content h4 .line {background-color: #44c8f5;position: absolute;top: 12px;left: 0;height: 1px;width: 100%;display: block;}
#game-detail-content h4 .text {background-color: #fff;color: #003f70;font-size: 20px;line-height: 20px;display: inline-block;position: relative;z-index: 2;padding: 0 10px;}
#game-detail-content .presentation {color: #003f70;font-size: 20px;line-height: 23px;font-weight: 300;margin-bottom: 10px;}
#game-detail-content .box {margin-bottom: 10px;}
#game-detail-content .notes {color: #003f70;font-weight: 300;margin-bottom: 10px;}

/* ############################################################################
							GAME PHOTOS
############################################################################ */
#header-game {position: fixed;top: 80px;left: 0;width: 100%;height: 60px;z-index:1000;}
#header-game .wrapper {background-color: #fff;height: 100%;display: flex;box-shadow: 0 0 10px rgba(0,0,0,0.7);border-radius: 0 0 4px 4px;}
#header-game .box {padding: 0 20px;display: flex;align-items: center;height: 100%;}
#header-game .box:not(:last-child) {border-right: solid 1px #a6a6a6;}
#header-game .box-content {font-weight: 300;font-size: 20px;line-height: 23px; color:#062b48;}
#header-game .label {}

#header-game .box-back a {display: flex;align-items: center;}
#header-game .box-back .icon {background:url(../images/icon-stadium.png) no-repeat center center; width: 30px;height: 30px;margin-right: 10px;}

#header-game .box-game {}
#header-game .box-game .left {width: 40px;}
#header-game .box-game .mid {width: 30px;flex-shrink: 0;text-align: center;color: #a6a6a6;line-height: 20px;font-weight: 300;text-transform: uppercase;}
#header-game .box-game .right {width: 40px;}
#header-game .box-game .icon {background-repeat: no-repeat;background-position: center center;background-size: contain;display: block;height: 40px;}


#game-photos h4 {color:#fff;}
#game-photos form #game-detail-content .box{ width:200px;margin-right:30px;}
#game-photos form #game-detail-content .box select {background-color: #fff;}
#game-photos form #game-detail-content .box-sector{width:20%;}
#game-photos form #game-detail-content .box-row{width:20%;}
#game-photos form #game-detail-content .box-event{width:20%;}
#game-photos form #game-detail-content .box-submit{ width:20%;}
#game-photos form #game-detail-content .box-submit input {background:#1fb5fc; transition:all .5s ease-in-out;}
#game-photos form #game-detail-content .box-submit input:hover {background: #84d6fd; color:#062b48}
#game-photos form #game-detail-content .box:last-child{margin-right:0;}
#game-photos form #game-detail-content{background:none;box-shadow:none;border-radius:0;display:flex;align-self:flex-end;padding:0; justify-content: center;}

body.fotos #general-container {background: #062b48 url(../images/home-banner.png) repeat center center; padding-top: 180px; min-height: 100%;}
body.jogo {background: #062b48 url(../images/home-banner.png) repeat center center; height: auto;}


#game-photos-content{display:flex;flex-wrap:wrap;padding:0 0 20px;}
#game-photos-content .item{background-size:cover;background-position:center center;display:flex;width:176px;height:264px;border:solid 5px #69819c;overflow:hidden;position:relative;align-items:center;flex-direction:column;justify-content:flex-end;margin:8px;}
#game-photos-content .item .mask{background:rgba(0,0,0,0.8);display:block;width:100%;height:100%;position:absolute;left:0;top:0;transition:all .5s ease-in-out;opacity:0;}
#game-photos-content .item .icon{background:url(../images/icon-plus-photo.png) no-repeat center center;display:block;width:52px;height:52px;position:absolute;z-index:1;top:50%;margin-top:-26px;left:50%;margin-left:-26px;transition:all .5s ease-in-out;opacity:0;}
#game-photos-content .item .text{display:inline-block;color:#fff;position:relative;z-index:2;margin-bottom:30px;opacity:0;text-align:center;padding:0 10px;}
#game-photos-content .item .text *{color:#fff;}
#game-photos-content .item:hover .mask,#game-photos-content .item:hover .icon,#game-photos-content .item:hover .text{opacity:1;}

/* ############################################################################
							PHOTOS Detail
############################################################################ */
#header-game .box-back .icon {
    background: url(../images/icon-game-list.png) no-repeat center center;
    width: 30px;
    height: 30px;
	margin-right: 10px;
}
h1.no-photos{background:url(../images/icon-no-photo.png) no-repeat center 0;padding-top:180px;font-size:20px;line-height:25px;font-weight:400;width:300px;margin:50px auto 0;}
.wrapper.photo-detail{display:flex;justify-content:space-between; padding-top: 130px;}
#photo-detail{width:70%;padding-right:30px;position:relative;}
#photo-detail .image img{width:100%;}
#photo-detail .top{margin-bottom:20px;}
#photo-detail .top h2{font-size:25px;color:#fff;text-align:left;line-height:30px;}
#photo-detail .top h4{font-size:20px;color:#fff;font-weight:300;text-align:left;}
#photo-detail .social{background:rgba(0,0,0,0.8);position:relative;left:0;bottom:0;display:flex;justify-content:center;align-items:center;width:100%;height:60px;margin-top:-60px;}
#photo-detail .social .text{font-size:14px;text-transform:uppercase;font-weight:900;margin-right:10px;}
#photo-detail .social .jssocials-share-link{background: transparent; display:inline-flex;width:42px;height:42px;border:solid 2px #fff;border-radius:50%; align-items: center;transition:all .3s ease-in-out;opacity:0.5;}
#photo-detail .social .jssocials-share-link .fa{font-size:20px;}
#photo-detail .social .jssocials-share-link:hover{opacity:1;}
#photo-detail .social *{color:#fff;}
#photo-detail .description{background:#fff;padding:30px;}
#photo-sponsored{width:30%;padding-top:80px;}
#photo-sponsored *{color:#fff}
#photo-sponsored h2{font-size:18px;line-height:22px;color:#fff;text-align:center;margin-bottom:20px;}
#photo-sponsored .image{margin-bottom:30px;overflow:hidden;}
#photo-sponsored .image img{width:100%;}
#photo-sponsored h3,#photo-detail .description h3{font-size:20px;line-height:23px;}
#photo-sponsored p,#photo-detail .description p{margin-bottom:0;font-size:16px;line-height:20px;}
#photo-sponsored .link a{font-weight:900;font-size:16px;}
#photo-sponsored .text-container *{color: #fff;}

.db-content{width:80%;margin:0 auto;}
.db-content * {color:#fff;}
.db-content h2{color:#fff;font-size:40px;line-height:43px;text-align:center;}
.db-content h3{text-align:center;margin-bottom:40px;font-size:20px;line-height:23px;font-weight:300;color:#fff;}
.db-content .item{margin-bottom:40px;}
.db-content h3.title{margin-bottom:10px;text-align:left;}
.db-content h4{font-size:16px;}
.db-content a{color:#fff;}
.db-content a:hover{text-decoration:underline;}
.db-content ul,.db-content ol{margin:20px 0 20px 15px;}
.db-content ul li{list-style:disc;}
.db-content ol li{list-style:decimal;}


/* ############################################################################
							RESPONSIVE
############################################################################ */
@media screen and (max-width: 1200px) {
	header .wrapper {width: auto; padding: 0 20px;}
	header .right li {margin-left: 25px}
	header .right li a {font-size: 14px;}
}

@media screen and (max-width: 1024px) {
	.wrapper {width: auto; padding: 0 10px;}
	header .left .logo {margin-right: 25px;}
	header .right {display: none;}
	#mobile-menu-switch, #mobile-menu{display:block !important}
	#game-detail .content {padding: 0 20px;}
	#game-photos-content .item {width: 23%;height: 264px;margin: 10px 1%;}
	
}

@media screen and (max-width: 768px) {
	#general-container {padding-bottom:100px;}
	#game-detail .content{ flex-direction: column; }
	#game-detail .content .left,
	#game-detail .content .right {width: 100%;}
	#game-detail .content .left {margin-bottom: 30px; padding-right: 0;}
	footer {position: relative; height: auto;}
	footer .bot ul { flex-wrap: wrap; width: 100%; padding: 20px 0; justify-content: center;}
	footer ul li {width: 40%;}
	footer .bot li a {width: 100%; }
	
	#game-photos form #game-detail-content {flex-wrap: wrap;}
	#game-photos form #game-detail-content .box-sector {width: 40%;}
	#game-photos form #game-detail-content .box-row {width: 40%; margin-right: 0;}
	#game-photos form #game-detail-content .box-event {width: 40%;}
	#game-photos form #game-detail-content .box-submit {width: 40%;}
	
}

@media screen and (max-width: 600px) {
	#home-banner .bot {padding: 30px;}
	#home-banner .bot .left, #home-banner .bot .right {font-size: 40px;}
	#home-banner .bot .innermid {padding: 0 20px;}
	#game-photos-content .item {width: 48%; margin: 5px 1%; height:250px;}
	.wrapper.photo-detail {flex-wrap: wrap;}
	#photo-detail {width: 100%; padding-right: 0;}
	#photo-sponsored {width: 100%; padding-right: 0; }
	#header-game .box.box-game {border-right:none;}
	#header-game .box-local {display: none;}
	
	footer .bot .wrapper { flex-wrap: wrap; width: 100%; padding: 20px 0; justify-content: center;}
	footer .bot .wrapper div,footer .bot .wrapper div.oficiais {width: 40%; margin-bottom: 30px;}
}

@media screen and (max-width: 480px) {
	#home-banner .bot .innermid {padding:10px;}
	#home-banner .bot .innermid p {font-size: 12px; line-height: 15px;}
	#home-banner .bot .innerleft img, #home-banner .bot .innerright img {height: 60px;}
	#home-banner .bot .left, #home-banner .bot .right {font-size: 30px;}
	#header-game .box {padding: 0 10px;}
	#header-game .box-game .icon {height: 30px;}
	#game-photos form #game-detail-content .box-sector {width: 100%; margin-bottom: 20px;  margin-right: 0;}
	#game-photos form #game-detail-content .box-row {width: 100%; margin-right: 0; margin-bottom: 20px}
	#game-photos form #game-detail-content .box-event {width: 100%; margin-bottom: 20px;  margin-right: 0;}
	#game-photos form #game-detail-content .box-submit {width: 100%; margin-bottom: 20px;  margin-right: 0;}
	#photo-detail .social .text {font-size: 10px;}
	
	footer .bot .wrapper div, footer .bot .wrapper div.oficiais {width: 100%; margin-bottom: 30px;}
}