/*------------------------------------------------- GENERAL -----------------------------------------------------------*/

*{
  margin: 0;
  padding: 0;
}

html, body{
  overflow: hidden;
  background-color: black;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  padding: 0;
}

a:active, a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}

input,
textarea,
button,
select,
a {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

@font-face { font-family: "Hiragino Kaku Gothic Std w8"; src: url('../fonts/hiragino-kaku-gothic-std-w8.otf');}
@font-face { font-family: "Swis721 Lt BT"; src: url("../fonts/swiss-721-light-bt.ttf") format("truetype");}


#red {
	position:absolute; 
	width:100vw; 
	height:100vh; 
	background-color:green; 
	margin:0;
	padding:0;}
/*------------------------------------------------- 1.0 - LOGO -----------------------------------------------------------*/


/*------------------------------------------------- 1.1 - LOGO ------------------------------------*/


.logo{
	z-index:201;
	font-size: 25px !important; 
	position: absolute;
	top: calc(5vh - 7px); 
	cursor:pointer;
    font-family: "Hiragino Kaku Gothic Std w8";
	abackground-color:red;
	transform-origin: top right; 
	text-align: center;
	letter-spacing: 1px;
    -webkit-transition: color 1s;
    -moz-transition:  color 1s;
    -o-transition: color 1s;
    transition:  color 1s;
	transform: scale(0.9, 1);
}


#barbini {left: calc(1vw + 10px);}




/*------------------------------------------------- 2.0 - MENU -----------------------------------------------------------*/

#menu {
  position:absolute;
  z-index: 295;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  background-color: white;
  display:none;
  opacity:1;
  overflow: hidden;
  aoverflow-y: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
#menu::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
#menu {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/*------------------------------------------------- 2.2 - CONTACTOS --------------------------------*/

#submenu {
  position:absolute;
  z-index: 296;
  left: 8vw;
  atop: 100vh;
  top:100%;
  aheight:450px;
  width:300px;
  abackground-color:red;
  transform:translate(0%,-500px);
  padding-top:5vh;
}


.contactos{
  position: relative;
  line-height: 20px;
  text-align: left;
  font-family: "Hiragino Kaku Gothic Std w8";
  letter-spacing: 1px;
  -webkit-transition: 1s;
  -moz-transition:  1s;
  -o-transition: 1s;
  transition:  1s;
  color: grey !important;
  font-size:12px;
}

#email {padding-bottom:12px;}

#logomenu {font-size: 19px !important;  }

#atelier {
	width:300px;
	height:150px;
	abackground-color:yellow; 
	float: left;
}

#socios {
	width:300px;
	height:170px;
	abackground-color:blue; 
	float: left;
}
		
#since {
	cursor: pointer; 
	abackground-color:green; 
	padding-top:40px;
	padding-bottom:50px;
	float: left;
	}

#colaboradores {
    abackground-color:orange;
    float: left;
	display:none;
	width:300px;
	padding-top:20px;
	padding-bottom:20px;
}

#colaboradores p {
  font-family: "Hiragino Kaku Gothic Std w8";
  src: url("fonts/hiragino-kaku-gothic-std-w8.otf") format("opentype");
  font-size:11px;
  letter-spacing: 1px;
  line-height: 25px;
  opacity: 0.5;
}

/*------------------------------------------------- 3.2 - ARROWS --------------------------------*/

.arrow {
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 10px;
  position: absolute;
  bottom: 50px;
  opacity:0;
  transition: .4s;
  z-index:9;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 40px;
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 40px;
}


/*------------------------------------------------- 3.3 - SHADOWS ---------------------------------*/

#rightshadow {
	position:absolute;
	top:-50%;
	right:0; 
	transform-origin: top right; 
	width:150%;
	height:200%;
	z-index:8;
	background-color:;
	display:none;
	opacity:.3;
	box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
	-moz-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
	-webkit-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
	-o-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
}

#leftshadow {
	position:absolute;
	top:-50%;
	left:0;  
	width:150%;
	height:200%;
	z-index:8;
	background-color:;
	display:none;
	opacity:.3;
	box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5); 
	-moz-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
	-webkit-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
	-o-box-shadow: inset  0px 0px 30vw 100px rgba(0,0,0,.5);
}


/*------------------------------------------------- 3.3 - TEXTO ---------------------------------*/


@media only screen and (max-width: 2000px) {
  .texto {
	align-items: right;
  	right: 80px;
  	top: calc(5vh - 3px);
	}
	
}

@media only screen and (max-width: 900px) {

  .logo {
	adisplay:none;
	font-size: 17px !important;}
	
  .arrow{display:none;}
	
  .texto {
	left: calc(1vw + 30px);
	top: calc(5vh + 22px);
  	align-items: left;
	abackground-color:red;
	letter-spacing: 0px !important;
	width:300px;
 }
	
	
   .titulo{font-size: 9px !important; }
   .subtitulo{font-size: 8px !important; display:none;}
   
   .contactos{font-size:10px !important;}
   #logomenu {font-size: 12px !important;  }
   #atelier {width:250px;}
   
   #previous:hover ~ .left {opacity: 0;}
   #next:hover ~ .right {opacity: 0;}
}

@media only screen and (max-height: 400px) {
	   
	#submenu {top:0%; transform:translate(0%,0%); aoverflow-y: scroll; aheight:150vh;}
	#submenu::-webkit-scrollbar { display: none;}
	#submenu {-ms-overflow-style: none;  scrollbar-width: none;}
	#menu {overflow-y: scroll;}
    #previous:hover ~ .left {opacity: 0;}
    #next:hover ~ .right {opacity: 0;}
}


.texto{
  position: absolute;
  height: 40px;
  abackground-color:red;
  z-index: 1000;
  font-family: "Hiragino Kaku Gothic Std w8";
  src: url("fonts/hiragino-kaku-gothic-std-w8.otf") format("opentype");
  letter-spacing: 1px;
  opacity:.4 !important;
  -webkit-transition: opacity 1s;
  -moz-transition:  opacity 1s;
  -o-transition: opacity 1s;
  transition:  opacity 1s;
  cursor: pointer;
}

.titulo{font-size: 11px; z-index:700;}
.subtitulo{font-size: 8px; padding-top: 15px; z-index:700;}



@import url(//db.onlinewebfonts.com/c/c2b49b40d5e927781ba62e7a7cbc92a5?family=Swis721+Th+BT);

/*------------------------------------------------- 3.1 - SLIDER --------------------------------*/

#all_slides{
    position: relative;
    height: 100vh;
	width:100%;
    padding: 0px;
    margin: 0px;
    list-style-type: none;
	z-index:0;
	
}


.container{
  position: relative;
  display:;
}

.slide{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 1;
    -webkit-transition: opacity 1.5s;
    -moz-transition: opacity 1.5s;
    -o-transition: opacity 1.5s;
    transition: opacity 1.5s;
}

.active{
    opacity: 1;
    z-index: 2;
}


.controls{
    display: none;
}

.img {
  width:100%;
  height:100%;
  object-fit: cover;
  cursor:pointer;
}

/*
.slide{
    font-size: 40px;
    padding: 40px;
    box-sizing: border-box;
    background-size: cover;
}
*/



/*------------------------------------------------- 3.1 - BUTTONS --------------------------------*/


.buttons{
  position: absolute;
  height:100%;
  width:100%;
  background-color:;
  top: 0;
  overflow:hidden;
  
}

.controls{
  display: inline-block;
  position: absolute;
  border: none;
  outline: none;
  height: 80%;
  top:20%;
  font-size:0px;
  background-color:green;
  opacity:0;
  z-index: 999;
  
}

#pause{transform: translate(-50%, 0%); left:50vw;  width: 50vw;}
#next{right: 0; transform-origin: top right; width:20vw;   cursor: pointer;}
#previous{left: 0; width:20vw;   cursor: pointer;}


#previous:hover ~ .left {opacity: .7;}
#next:hover ~ .right {opacity: .7;}
/* #pause:hover ~ .play {opacity: 0.7;} */


.play {
  width: 0; 
  height: 0; 
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 20px solid white;
  position: absolute;
  top: calc(100vh - 44px);
  left: calc(50vw - 5px);
  opacity:0;
  transition: .4s;
}


/*------------------------------------------------- 3.5 - COPYRIGHT --------------------------------*/


.footer{
  position:absolute;
  bottom:10px;
  left:10px;
  background-color:;
  z-index:999;
  font-family: "Swis721 Lt BT";
  font-size: 12px;
  letter-spacing: 1px;
  transition:0.5s;
  opacity: 0.7;
}
 

/*    NOTAS


/   = Root directory
  .   = This location
  ..  = Up a directory
  ./  = Current directory
  ../ = Parent of current directory
  ../../ = Two directories backwards


PRIMEIRO SLIDESHOW: https://codepen.io/poef/pen/QpmWVv
SEGUNDO SLIDE SHOW: https://www.cssscript.com/background-slideshow-fade/ 

MENU ICON https://codepen.io/keenode/pen/dPqdPd  

https://github.com/jamiebrittain/colourBrightness.js

https://github.com/kennethcachia/Background-Check 

IMAGE GALLERY - https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive  */