@font-face {
font-family: myFirstFont;
src: url(fonts/TruenoBold.otf);
font-weight: bold;
}
@font-face {
font-family: mySecondFont;
src: url(fonts/TruenoRg.otf);
}
@font-face {
font-family: myThirdFont;
src: url(fonts/ArnoProBold.otf);
font-weight: bold;
}
html, body {       
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
.counter {
display: none;
}
.menu {
position: fixed;
table-layout: fixed;
z-index: 10;
left: 0px;
top: 0px;
}
.closemenudiv {
float: left;
left: 0px;
position: fixed;
height: 30px;
z-index: 10;
top: 1.7vh;
left: 27px;
}
.gmap {
z-index: 1;
topPadding: 0;
position: relative;
height: 100%;
width: 100%;
cellspacing: 0px;
cellpadding: 0px;
overflow: hidden;
background-color: #303030;
}
.menualbums {
position: fixed;
z-index: 10;
}
.head {
position: fixed;
z-index: 0;
width: 100%;
}
.headdate {
position: fixed;
text-align: center;
font-family: myThirdFont;
font-weight: bold;
font-size: 1.6vw;
color: #ffffff;
z-index: 1;
width: 100%;
}
.headname {
position: fixed;
text-align: center;
font-family: myFirstFont;
font-weight: bold;
font-size: 4.5vw;
color: #ffffff;
z-index: 1;
width: 100%;
}
.albums {
z-index: 1;
position: relative;
background-color: #383838;
}
.bottom {
height: 81%;
background-color: #383838;
z-index: 2;
position: relative;
vertical-align: bottom;
bottom: 0px;
min-width: 100%;
}
.myBtn {
display: none;
position: fixed;
bottom: 21%;
right: 20px;
z-index: 99;
border: none;
outline: none;
background-color: #737373;
opacity: 0.5;
cursor: pointer;
padding: 12px;
border-radius: 0px;
-webkit-transition: 0.4s ease;
-moz-transition: 0.4s ease;
-o-transition: 0.4s ease;
-ms-transition: 0.4s ease;
transition: 0.4s ease;
}
.myBtn:hover {
background-color: #999999;
opacity: 1;
bottom: 22.5%;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
-ms-transition: 0.3s ease;
transition: 0.3s ease;
}
#map {
height: 100%;
}
#contentDiv {
width: 100%;
text-align: center;
}
#myHeader {
font-family: mySecondFont;
font-size: 0.9em;
font-weight: 500;
color: #d2d2d2;
text-decoration: none;
}
#share-buttons img {
width: 44px;
padding: 0px;
display: inline;
}
.centersocial {
text-align: center;
padding-top: 42px;
padding-bottom: 42px;
}
.tablesocial {
text-align: center;
cellpadding: 0px;
cellspacing: 0px;
padding: 0px;
width: 29%;
height: 90px;
}
.totalsocial {
background-color: #333333;
position: relative;
z-index: 1;
}
.bottomz {
height: calc(100vw/2.6);
background-color: #383838;
z-index: 2;
position: relative;
vertical-align: bottom;
bottom: 0px;
min-width: 100%;
}
.containeralbumZ {
position: relative;
float: left;
spacing: 0;
padding: 0;
margin: 0;
width: 25%;
cursor:pointer
}
.imagealbumZ {
display: block;
width: 100%;
height: auto;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
-ms-transition: 0.3s ease;
transition: 0.3s ease;
}
.imagealbumZ:hover {
-webkit-filter: brightness(80%);
filter: brightness(80%);
}
.pictureContainer {
width: 25vw;
height: calc(25vw/1.366);
overflow: hidden;
}
.pictureContainer img {
transform: translate3d(0px, 0px, 0px);
}
.containeralbum {
position: relative;
width: 100%;
}
.containeralbumW {
position: relative;
width: 25vw;
float: left;
height: calc(25vw/1.369);
}
.imagealbum {
width: 100%;
}
.imagealbumW {
width: 100%;
display: block;
}
.overlay {
position: absolute;
top: 0px;
padding: 0px;
}
#p01,#p02,#p03,#p04,#p05,#p06,#p07,#p08,#p09,#p10,#p11,#p12,#p13,#p14,#p15,#p16,#p17,#p18,#p19,#p20,#p21,#p22,#p23,#p24,#p25,#p26,#p27,#p28,#p29,#p30,#p31,#p32,#p33,#p34,#p35,#p36,#p37,#p38,#p39,#p40,#p41,#p42,#p43,#p44,#p45,#p46,#p47,#p48,#p49,#p50,#p51,#p52,#p53,#p54,#p55,#p56,#p57,#p58,#p59,#p60,#p61,#p62,#p63,#p64,#p65,#p66,#p67,#p68,#p69,#p70,#p71,#p72,#p73,#p74,#p75,#p76,#p77,#p78,#p79,#p80,#p81,#p82,#p83,#p84,#p85,#p86,#p87,#p88,#p89,#p90,#p91,#p92,#p93,#p94,#p95,#p96,#p97,#p98,#p99,#p100,#p101,#p102,#p103,#p104,#p105 {
position:fixed;
background: rgba(0, 0, 0, 0.85);		
top: 0;
left: 0;
width:100vw;
height:100vh;
display:none;
z-index: 999;
}
section {
width: 64.5vw;
height: calc(64.5vw / 1.365);
margin: auto;
padding: 0px;
position:absolute; 
left:0; right:17;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
}
sectionV {
height: calc(64.5vw / 1.365);
margin: auto;
padding: 0px;
position:absolute; 
left:0; right:17;
top:0; bottom:0;
margin:auto;
max-width:100%;
max-height:100%;
overflow:hidden;
}
@media screen and (max-height: 1000px) {
sectionV {
width: 33.5vw;
}
}
@media screen and (min-height: 1001px) {
sectionV {
width: 32.7vw;
}
}
div#one {
width: calc(100% - 4.88vw);
max-width: 2048px;
height: 100%;
background: white;
float: left;
text-align: center;
}
div#oneV {
width: calc(100% - 4.88vw);
max-width: 1380px;
height: 100%;
background: white;
float: left;
text-align: center;
}
div#two {
margin-left: calc(100% - 4.88vw);
width: 4.88vw;
max-width: 70px;
min-width: 40px;
height: 100%;
background: #e8e8e8;
-webkit-box-shadow: 14px 0 30px 0 #bdbdbd inset;
box-shadow: 14px 0 30px 0 #bdbdbd inset;
}
#responsive-image {
position: absolute;
max-width: calc(100% - 4.88vw);
display: table;
margin: 0;
vertical-align: baseline;
bottom: 0px;
}
#btcl01,#btcl02,#btcl03,#btcl04,#btcl05,#btcl06,#btcl07,#btcl08,#btcl09,#btcl10,#btcl11,#btcl12,#btcl13,#btcl14,#btcl15,#btcl16,#btcl17,#btcl18,#btcl19,#btcl20,#btcl21,#btcl22,#btcl23,#btcl24,#btcl25,#btcl26,#btcl27,#btcl28,#btcl29,#btcl30,#btcl31,#btcl32,#btcl33,#btcl34,#btcl35,#btcl36,#btcl37,#btcl38,#btcl39,#btcl40,#btcl41,#btcl42,#btcl43,#btcl44,#btcl45,#btcl46,#btcl47,#btcl48,#btcl49,#btcl50,#btcl51,#btcl52,#btcl53,#btcl54,#btcl55,#btcl56,#btcl57,#btcl58,#btcl59,#btcl60,#btcl61,#btcl62,#btcl63,#btcl64,#btcl65,#btcl66,#btcl67,#btcl68,#btcl69,#btcl70,#btcl71,#btcl72,#btcl73,#btcl74,#btcl75,#btcl76,#btcl77,#btcl78,#btcl79,#btcl80,#btcl81,#btcl82,#btcl83,#btcl84,#btcl85,#btcl86,#btcl87,#btcl88,#btcl89,#btcl90,#btcl91,#btcl92,#btcl93,#btcl94,#btcl95,#btcl96,#btcl97,#btcl98,#btcl99,#btcl100,#btcl101,#btcl102,#btcl103,#btcl104,#btcl105 {
background-color: #d6d6d6;
-webkit-box-shadow: 14px 0 30px 0 #bdbdbd inset;
box-shadow: 14px 0 30px 0 #bdbdbd inset;
width:4.88vw;
height:4.88vw;
max-height: 70px;
max-width: 70px;
position: absolute;
}
#btcl01:hover,#btcl02:hover,#btcl03:hover,#btcl04:hover,#btcl05:hover,#btcl06:hover,#btcl07:hover,#btcl08:hover,#btcl09:hover,#btcl10:hover,#btcl11:hover,#btcl12:hover,#btcl13:hover,#btcl14:hover,#btcl15:hover,#btcl16:hover,#btcl17:hover,#btcl18:hover,#btcl19:hover,#btcl20:hover,#btcl21:hover,#btcl22:hover,#btcl23:hover,#btcl24:hover,#btcl25:hover,#btcl26:hover,#btcl27:hover,#btcl28:hover,#btcl29:hover,#btcl30:hover,#btcl31:hover,#btcl32:hover,#btcl33:hover,#btcl34:hover,#btcl35:hover,#btcl36:hover,#btcl37:hover,#btcl38:hover,#btcl39:hover,#btcl40:hover,#btcl41:hover,#btcl42:hover,#btcl43:hover,#btcl44:hover,#btcl45:hover,#btcl46:hover,#btcl47:hover,#btcl48:hover,#btcl49:hover,#btcl50:hover,#btcl51:hover,#btcl52:hover,#btcl53:hover,#btcl54:hover,#btcl55:hover,#btcl56:hover,#btcl57:hover,#btcl58:hover,#btcl59:hover,#btcl60:hover,#btcl61:hover,#btcl62:hover,#btcl63:hover,#btcl64:hover,#btcl65:hover,#btcl66:hover,#btcl67:hover,#btcl68:hover,#btcl69:hover,#btcl70:hover,#btcl71:hover,#btcl72:hover,#btcl73:hover,#btcl74:hover,#btcl75:hover,#btcl76:hover,#btcl77:hover,#btcl78:hover,#btcl79:hover,#btcl80:hover,#btcl81:hover,#btcl82:hover,#btcl83:hover,#btcl84:hover,#btcl85:hover,#btcl86:hover,#btcl87:hover,#btcl88:hover,#btcl89:hover,#btcl90:hover,#btcl91:hover,#btcl92:hover,#btcl93:hover,#btcl94:hover,#btcl95:hover,#btcl96:hover,#btcl97:hover,#btcl98:hover,#btcl99:hover,#btcl100:hover,#btcl101:hover,#btcl102:hover,#btcl103:hover,#btcl104:hover,#btcl105:hover {
background-color: #545454;
-webkit-box-shadow: 14px 0 30px 0 #494949 inset;
box-shadow: 14px 0 30px 0 #494949 inset;
}
#hcl2 {
color: #FFF;
text-decoration: none;
font-family: arial;
text-align: center;
position: relative;
-webkit-transform: rotate(405deg);
-moz-transform: rotate(405deg);
-o-transform: rotate(405deg);
-ms-transform: rotate(405deg);
transform: rotate(405deg);
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
-ms-transition: 0.6s ease-out;
transition: 0.6s ease-out;
}
#hcl2:hover {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.6s ease-out;
-moz-transition: 0.6s ease-out;
-o-transition: 0.6s ease-out;
-ms-transition: 0.6s ease-out;
transition: 0.6s ease-out;
}
@media screen and (max-width: 1500px) {
.textospot {
font-size: 2.8vw;
}
* {
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * 
((100vw - 1000px) / (1000 - 500)));
   
 --diff2: calc(var(--max-bottom) - var(--min-bottom));
--responsive2: calc((var(--min-bottom) * 1px) + var(--diff2) * 
((100vw - 1000px) / (1000 - 500)));
  }
#hcl2 {
--max-size: 82;
--min-size: 57;
font-size: var(--responsive);
--max-bottom: 21.6;
--min-bottom: 16.5;
bottom: var(--responsive2);
}
}
@media screen and (min-device-width: 1501px) and (max-device-width: 2100px) { 
.textospot {
font-size: 2.7vw;
}
* {
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * 
((100vw - 1500px) / (1500 - 500)));
   
 --diff2: calc(var(--max-bottom) - var(--min-bottom));
--responsive2: calc((var(--min-bottom) * 1px) + var(--diff2) * 
((100vw - 1500px) / (1500 - 500)));
  }
  #hcl2 {
--max-size: 110;
--min-size: 70;
font-size: var(--responsive);
--max-bottom: 37;
--min-bottom: 23;
bottom: var(--responsive2);
}
}
@media screen and (min-width: 2101px) {
.textospot {
font-size: 2.6vw;
}
* {
--diff: calc(var(--max-size) - var(--min-size));
--responsive: calc((var(--min-size) * 1px) + var(--diff) * 
((100vw - 2000px) / (2000 - 500)));
   
 --diff2: calc(var(--max-bottom) - var(--min-bottom));
--responsive2: calc((var(--min-bottom) * 1px) + var(--diff2) * 
((100vw - 2500px) / (2500 - 500)));
  }
  #hcl2 {
--max-size: 120;
--min-size: 80;
font-size: var(--responsive);
--max-bottom: 50;
--min-bottom: 31.5;
bottom: var(--responsive2);
}
}
.shicons {
position: absolute;
bottom: 0;
}
.shicontainer {
width: 4.88vw;
max-width: 70px;
height: 4.88vw;
max-height: 70px;
position: relative;
cursor:pointer;
}
.shicon1 {
width: 100%;
position: absolute;
z-index: 1;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.shicon1:hover {
opacity: 0;
-webkit-transition: 0.3s ease-out;
-moz-transition: 0.3s ease-out;
-o-transition: 0.3s ease-out;
-ms-transition: 0.3s ease-out;
transition: 0.3s ease-out;
}
.shicon2 {
width: 100%;
position: relative;
z-index: 0;
}
.textopais {
position: relative;
font-family: mythirdfont;
top: 2.1vw;
font-size: 1.45vw;
margin: 0px;
padding: 0px;
color: #3d3d3d;
}
.textospot {
position: relative;
font-family: myfirstfont;
top: 1vw;
padding: 0px;
margin: 0px;
color: #3d3d3d;
}
.previousbtnpic {
position: fixed;
display: inline;
height: 2.6vw;
max-height: 100px;
left: 13.5vw;
top: 50vh;
float: left;
cursor: pointer;
}
.nextbtnpic {
position: fixed;
display: inline;
height: 2.6vw;
max-height: 100px;
right: 13.78vw;
top: 50vh;
float: right;
cursor: pointer;
}
.previousbtnpicV {
position: fixed;
display: inline;
height: 2.6vw;
max-height: 100px;
left: 28.7vw;
top: 50vh;
float: left;
cursor: pointer;
}
.nextbtnpicV {
position: fixed;
display: inline;
height: 2.6vw;
max-height: 100px;
right: 28.77vw;
top: 50vh;
float: right;
cursor: pointer;
}
#trans {
transform: translate3d(0px, 0px, 0px);
transition: transform .4s ease-in-out;
}
#trans:hover {
transform: translate3d(0px, calc(-25vw/1.363), 0px);
}

.textcountryZ {
position: absolute;
width: 100%;
top: 7.2vw;
font-family: myThirdFont;
font-size: 1.1vw;
text-align: center;
color: #ffffff;
pointer-events: none;
z-index: 10;
transform: translate3d(0px, 0px, 0px);
}
.textalbumZ {
position: absolute;
width: 100%;
top: 7.84vw;
font-family: myFirstFont;
font-weight: bold;
font-size: 2.4vw;
text-align: center;
color: #ffffff;
pointer-events: none;
z-index: 10;
transform: translate3d(0px, 0px, 0px);
}
.seegallerytxt {
position: absolute;
width: 100%;
bottom: 9.8vw; 
font-family: myThirdFont;
font-size: 1.1vw;
text-align: center;
color: #ffffff;
pointer-events: none;
z-index: 10;
transform: translate3d(0px, 0px, 0px);
}
.textalbumY {
transform: translate3d(0px, 0px, 0px);
position: absolute;
width: 100%;
bottom: 7.36vw; 
font-family: myFirstFont;
font-weight: bold;
font-size: 2.4vw;
text-align: center;
color: #ffffff;
pointer-events: none;
z-index: 10;
}

.albumspage {
top: 0px;
width: 100%;
z-index: 0;
position: relative;
background-color: #383838;
min-height: 1050px;
z-index: 2;
overflow: hidden;
padding: 0px;
}
.textbottom {
width: 100%;
height: 80px;
font-family: arial;
font-size: 15;
color: #8d8d8d;
position: fixed;
float: left;
left: 8px;
padding: 25px 20px;
background-color:#303030;
}
.textframe1 {
text-align: center;
font-family: myThirdFont;
font-weight: bold;
font-size: 26px;
color: #ffffff;
}
.textframe2 {
text-align: center;
font-family: myFirstFont;
font-weight: bold;
font-size: 40px;
color: #ffffff;
padding: 27px;
}
.textframe3 {
padding: 10px;
}
.textframe4 {
font-family: arial;
font-size: 15;
color: #8d8d8d;
position: relative;
float: left;
left: 40px;
margin-top: 10px;
}
.bodybottom {
width: 100%;
height: 80px;
position: fixed;
background-color: #1A1A1A;
bottom: 0px;
}
.aboutmebottom {
position: relative;
width: 100%;
height: 80px;
background-color: #1A1A1A;
bottom: 0px;
margin-bottom: 0px;
padding: 0px;
}
.aboutmehead {
position: relative;
width: 100%;
height: 290px;
background-color: #1e1e1e; 
padding: 0px;
}
.aboutmeheadtext {
position: relative;
padding: 0px;
font-family: myFirstFont;
font-size: 40px;
color: #ffffff;
text-align: center;
top: 48%;	
}
.aboutmebodyframe {
position: relative;
align: center;
width: 80%;
}
.spacerdkt {
width: 0;
height: 100vh;
float: left;
clear: both;
}
.spacer_two {
width: 0;
height: 100vh;
float: left;
clear: both;
}
.spacer_three {
width: 0;
height: calc(20vw*15);
float: left;
clear: both;
margin-top: 120px;
}
.one { width: 100%; height: 100vh; position: fixed; float: left; }
.two { width: 100%; height: 100vh; position: relative; float: left; }
.three { width: 100%; height: calc(20vw*15); margin-top: 120px; position: relative; float: left; }
.latched { position: fixed; top: 0px; left: 0px; right: 0px; width: auto; }
.latched_three { position: relative; top: 0px; bottom: 0 ;width: 100%; }
@media screen and (max-width: 1300px) {
.viewZ {
width: 100%;
height: calc(100vw/2.35);
max-height: 560px;
}
.logo {
position: fixed;
z-index: 10;
float: right;
right: 24px;
top: 2.4vh;
height: 27px;
}
.menusandwich {
margin-top: 0px;
height: 30px;	
}
}
@media screen and (min-width: 1301px) and (max-width: 1500px) {
.viewZ {
width: 100%;
height: calc(100vw/2.53);
max-height: 560px;
}
.logo {
position: fixed;
z-index: 10;
float: right;
right: 24px;
top: 16px;
height: 27px;
}
.menusandwich {
margin-top: 0px;
height: 30px;	
}
}

@media screen and (min-width: 1501px) and (max-width: 2000px) {
.viewZ {
width: 100%;
height: calc(100vw/2.92);
max-height: 650px;
}
.logo {
position: fixed;
z-index: 10;
float: right;
right: 24px;
top: 16px;
height: 27px;
}
.menusandwich {
margin-top: 0px;
height: 30px;	
}
}
@media screen and (min-width: 2001px) {
.viewZ {
width: 100%;
height: calc(100vw/3.32);
max-height: 940px;
}
.logo {
position: fixed;
z-index: 10;
float: right;
right: 30px;
top: 20px;
height: 30px;
}
.menusandwich {
height: 34px;	
}
}

@media screen and (min-device-aspect-ratio: 1600/920) and (max-width: 2400px) {
    .divisao {
    	height: 89%;
    }
    .head {
		height: calc(89% + 25px);
	}
	.headdate {
		top: 37.3%;
	}
	.headname {
		top: 38.8%;
}
#responsive-image {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
}
}

@media screen and (min-device-aspect-ratio: 1600/920) and (min-width: 2401px) {
    .divisao {
    	height: 92%;
    }
    .head {
		height: calc(92% + 25px);
	}
	.headdate {
		top: 39.00%;
	}
	.headname {
		top: 40.55%;
	}


#responsive-image {
padding-left: 28px;
padding-right: 28px;
padding-bottom: 28px;
}
}

@media screen and (max-device-aspect-ratio: 1600/925) and (max-width: 1598px) {
    .divisao {
    	height: 89%;
    }
    .head {
		height: calc(89% + 25px);
	}
	.headdate {
		top: 39.00%;
	}
	.headname {
		top: 40.55%;
	}
#responsive-image {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
}
}

@media screen and (max-device-aspect-ratio: 1600/925) and (min-width: 1599px) {
    .divisao {
    	height: 92%;
    }
    .head {
		height: calc(92% + 25px);
	}
	.headdate {
		top: 39.00%;
	}
	.headname {
		top: 40.55%;
	}
#responsive-image {
padding-left: 24px;
padding-right: 24px;
padding-bottom: 24px;
}
}