*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
    font-family: "Ubuntu", sans-serif;
	color: rgba(0,0,0,1.00);
	font-weight: 100;
  	font-style: normal;
	line-height: .9;
    font-size: 20px;
	letter-spacing: -1px;
    background-color: #FFE7C1;
	z-index: 1
	
}
@media (max-width: 992px) {
    html  {
		font-size: 35px;
		letter-spacing: -1px;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    html {
       	font-size: 2vw;
    }
}
html, body {
    height: 100%;   
	cursor: crosshair;
}

body {
    opacity: 0; 
    animation: fadeIn 2s ease-in forwards; 
}
@keyframes fadeIn {
	to {
		opacity: 1; 
	}
}


/*----------------------------shop---------------------------------*/
.shop {
	position: fixed;
	right: 1vh;
	top: 1vh;
	z-index: 999	
}
.shop img {
	width: 9vh;
}
@media (max-width: 992px) {
    .shop img {
		width: 7vh
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .shop img {
       	width: 15vh;
    }
}
.shop a {
	filter: invert(0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.shop a:hover {
	filter: invert(1)
}
.spirituose {
	position: fixed;
	left: 1vh;
	top: 1vh;
	z-index: 999
}
.spirituose img {
	width: 11vh
}
@media (max-width: 992px) {
    .spirituose img {
		
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .spirituose img {
       	width: 25vh;
    }
}
.spirituose a {
	filter: invert(0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.spirituose a:hover {
	filter: invert(1)
}




/*----------------------------home---------------------------------*/
.background img{
	width: 100%;
	position: fixed;
    background-size: cover;
    background-repeat: no-repeat;
	background-position: center;
	margin: 0;
	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%);
	z-index: -1;
}
@media (max-width: 992px) {
    .background img {
		width: 200%;
		margin-top: 0vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .background img {
        width: 100%;
    }
}
.home { 
	position: absolute;	
}
@media (max-width: 992px) {
    .home {
		width: 100%;
		margin-top: 10vh;
    }
}
.home_title {
	position: relative;
	height: 100%;
}

.bearBrews {
	position: absolute;
	width: 100%;
	font-family: "magari-variable", sans-serif;
    font-variation-settings: "wght" 400;
    text-shadow: -4px 1px 9px rgba(0,0,0,0.85);
    text-align: center;
    color: rgba(255,255,255,1.00);
    font-size: 30vw;
	left: 50%; 
    transform: translateX(-50%);  
    bottom: 0; 
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .bearBrews{
    font-size: 55vw;
    }
}
.email_sent {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; 
    justify-content: center; 
    align-items: center;
    text-align: center;
    text-shadow: -4px 1px 9px rgba(0, 0, 0, 0.85);
    color: rgba(255, 255, 255, 1.00);
    background-color: rgba(0, 0, 0, 0.30);
    font-size: 3vw;
    box-sizing: border-box;
    padding: 20px; 
}




/*----------------------------title---------------------------------*/
.title{
    font-family: "magari-variable", sans-serif;
	color: rgba(255,255,255,1.00);
	text-shadow: -4px 1px 9px rgba(0,0,0,0.85);
    font-size: 10vw;    
    text-align: center;
}
@media (max-width: 992px) {
    .title  {
		font-size: 20vw; 
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .title {
       	font-size: 15vw;
    }
}





/*----------------------------products---------------------------------*/
.products {
	background-color: rgba(0,0,0,0.50);
	height: 80vh;
	display: flex;
}
@media (max-width: 992px) {
    .products {
		height: 45vh ;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .products {
       	height: 100vh ;
    }
}
.products .box_left {
	width: 60%;
	float: left;
	display: block;	
	margin: auto;
}
.products .box_right {
	width: 40%;
	margin-left: -10%;
	display: block;	
}
@media (max-width: 992px) {
    .products .box_right {
		margin-top: 5vh;	
		margin-left: 0%;
    }
}
.products_text{
    width: 500px;
	color: rgba(255,255,255,1.00);
	background-color: rgba(0,0,0,0.0);
    height: auto;
    display: block;
    padding: 5vh;
    margin-left: auto;
    margin-right: auto;
    text-align: center;    
}
@media (max-width: 992px) {
    .products_text {
		padding: 1vh;
    }
}
.products img {
	text-align: center;
	width: 500px;
	margin: auto
}
@media (max-width: 992px) {
    .products img  {
		width: 400px;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .products img {
       	width: 250px;
    }
}




/*--------------------------cabinet-------------------------------*/
.carousel {
	height: 40vh;
	margin-bottom: 10vh;
	margin-top: 1vh;
 	margin-left: 100px;
    display: flex;
    animation: scroll 150s cubic-bezier(0.1, 0, 0.8, 1) infinite; 
    width: 9000px;
	border: 0px solid black;	
}
@media (max-width: 992px) {
    .carousel {
		height: 26vh;
		width: 1400vw;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .carousel {
       	height: 40vh;
		width: 4700px;
		margin-left: 10px;
    }
}
.carousel_row {
    width: 100%;
    overflow: hidden;	
}
@media (max-width: 992px) {
    .carousel_row {
		padding-top: 0vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .carousel_row {
       	height: 60vh;
    }
}
.slide {
  	flex: 0 0 auto;
    box-sizing: border-box;
    margin-right: 100px;
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .slide {
       	margin-right: 10px;
    }
}
.carousel img {
  	width: auto;
    height: 50vh;
    object-fit: cover;
    margin: 2px;
}
@media (max-width: 992px) {
    .carousel img {
		height: 35vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .carousel img {
       	height: 60vh;
    }
}
@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  50% {
      transform: translateX(-100%);
  }
  100% {
      transform: translateX(0);
  }
}






/*----------------------------party---------------------------------*/
.party {
    position: relative;
    width: 100%;
    color: rgba(255,255,255,1.00);
    text-shadow: -4px 1px 9px rgba(0,0,0,0.85);
	margin-top: 1vh;
	margin-bottom: 1vh;	
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;	
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 1; 
}
.party img {
	height: 110vh;
	width: 100%;
	filter: brightness(.8);
}
@media (max-width: 992px) {
    .party img{
	height: 35vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .party img {
       	height: 100vh;
    }
}
.party_text {
	position: absolute;
	font-size: 1.5vw;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
    z-index: 2;
}
@media (max-width: 992px) {
    .party_text {
		font-size: 3vw;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .party_text {
       	font-size: 2vw;
    }
}
.party_title {
	width: 100%;
	font-size: 12vw;
	font-family: "magari-variable", sans-serif;
    font-variation-settings: "wght" 400;
	display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}
@media (max-width: 992px) {
    .party_title {
		font-size: 18vw;
    }
}
.party_button {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
	margin-top: 2vh;
    width: 200px;
	color: rgba(0,0,0,1.00);
    background-color: rgba(255,255,255,1.00); 
	text-shadow: 0px 0px 0px rgba(0,0,0,0.85);
    padding: 30px;	
}
@media (max-width: 992px) {
    .party_button {
		 width: 200px;
		padding: 10px;
    }
}
.party a {
	text-decoration: none;
	filter: invert(0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.party a:hover {
	filter: invert(1)
}
hr {
	width: 50%;
}



/*----------------------------party---------------------------------*/
.brothers {
    position: relative;
    width: 100%;
    color: rgba(255,255,255,1.00);
    text-shadow: -4px 1px 9px rgba(0,0,0,0.85);
	margin-top: 1vh;
	margin-bottom: 1vh;	
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;	
    display: flex;
    justify-content: center;
    align-items: center;
	z-index: 1; 
}
.brothers img {
	height: 100vh;
	width: 100%;
}
@media (max-width: 992px) {
    .brothers img{
		height: 60vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .brothers img {
       	height: 200vh;
    }
}
.brothers_text {
	position: absolute;
	font-size: 1.5vw;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
    z-index: 2;
}
@media (max-width: 992px) {
    .brothers_text {
		font-size: 3vw;
    }
}
.brothers_title {
	width: 100%;
	font-size: 11vw;
	font-family: "magari-variable", sans-serif;
    font-variation-settings: "wght" 400;
	display: block;
    text-align: center;
    margin-left: auto;
    margin-right: auto
}
@media (max-width: 992px) {
    .brothers_title {
		font-size: 18vw;
    }
}
.boxes_title {
	font-size: 18vh;
	font-family: "magari-variable", sans-serif;
	line-height: .7;
}
@media (max-width: 992px) {
    .boxes_title  {
		font-size: 20vw;			
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .boxes_title {
       	font-size: 15vw;
    }
}
.boxes {	
	display: inline-flex;
	width: 60%;
	color: rgba(255,255,255,1.00);
	z-index: 1;
}
@media (max-width: 992px) {
    .boxes  {
		width: 100%;			
    }
}
.box_01, .box_02 {	
	width: auto;
	margin-left: auto;
	margin-right: auto;	
	border: 5px solid black;	
}
.boxes img {
	width: 15vh;
	height: auto;
	margin: 20px;
}
@media (max-width: 992px) {
    .boxes img {
		width: 10vh;			
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .boxes img {
       	width: 30vh;
    }
}
.boxes .text {
	position: absolute;
	font-size: 1vw;
	text-align: left
}

@media (max-width: 992px) {
    .boxes .text {
		font-size: 3vw;			
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .brothers .text {
       	font-size: 2vw;
    }
}





/*-------------------message-------------------*/
.message {
	width: 100%;
	font-size: 3vw;
    padding: 10vh;
    text-align: center;	
    color: rgba(63,63,63,1.00);
    background-color: rgba(255,255,255,0.90);    
}
@media (max-width: 992px) {
    .message  {
		font-size: 2.5vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .message {
       	font-size: 2.5vw;
    }
}



/*----------------------------contact---------------------------------*/ 
.contact {	
	font-size: 3vw;
	color: rgba(255,255,255,1.00);
    background-color: rgba(0,0,0,.85);
    width: 100%;
    height: auto;
	padding-bottom: 20px;	
}
.contact a {
	color: rgba(255,255,255,1.00);
	text-decoration: none;
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.contact a:hover {
    color: rgba(189,57,255,1.00)
}
.cercle {
	position: relative;
	width: 300px;
	padding: 100px;
}
@media (max-width: 992px) {
    .cercle {
		width: 300px;
    }
}
.cercle img {
	width: 100%;
	
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .cercle img {
       	width: 50%;
    }
}
.bear {
	position: absolute;	
	z-index: 9
}
.rotate {
	position: absolute;
	
}
.rotate {
    animation: rotation 25s infinite linear;
}
@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}
@-webkit-keyframes circle{
  0%{
    transform:rotate(0deg)
              translate(-165px)
              rotate(0deg);  
}
  100%{
    transform:rotate(360deg)
              translate(-165px)
              rotate(-360deg);
  }
}
@keyframes circle{
  0%{
    transform:rotate(0deg)
              translate(-165px)
              rotate(0deg);  
}
  100%{
    transform:rotate(360deg)
              translate(-165px)
              rotate(-360deg);
  }
}
.contact_address {
	width: 100%;
	padding: 200px;  
	justify-content: center;
	align-items: center;
	display: flex;
}
@media (max-width: 992px) {
    .contact_address {
		padding-bottom: 5vh; 
		
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .contact_address {
       	padding: 00px;
    }
}
.contact_text {
	text-align: right;
	font-size: .6em
}
@media (max-width: 992px) {
    .contact_text {
		font-size: 1.5em		
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .contact_text {
       	font-size: 1em
    }
}
.contact .instagram {
	width: 6vh;
	margin-top:1vh;
	margin-right: -.5vh
}
@media (max-width: 992px) {
    .contact .instagram {
		width: 3vh;		
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .contact .instagram {
       	width: 9vh;
    }
}
.contact .plan {
	width: 35vh;
	margin: 20px;
}
@media (max-width: 992px) {
    .contact .plan {
		width: 20vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .contact .plan {
       	width: 50vh;
    }
}
.contact img {
	filter: invert(0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.contact img:hover {
	filter: invert(1)
}
.contact .instagram a:hover {
transform: scale(1);
}
.contact .plan a{
transform: scale(1);
}




	
/*-----------------------------form pages-----------------------------*/
.form {
	font-size: 25px;
	letter-spacing: -1px;
	position: relative;
	height: auto;
    box-sizing: border-box;
	padding-bottom: 2vh;	
}
.form .box {
	width: 400px;
	height: 100%;
	margin-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
	z-index: 999;	
}
@media (max-width: 992px) {
    .form .box  {
        width: auto;
		margin-left: 10vh;
		margin-right: 10vh;
    }
}
@media only screen and (max-width: 992px) and (orientation: landscape) {
    .form .box {
       	width: 50%;
		margin-left: auto;
		margin-right: auto;
    }
}
.form .title {
	margin-bottom: 0vh	
}
@media (max-width: 992px) {
    .form .title  {
        margin-top: 10vh	
    }
}
.form a {
	color: rgba(1,1,1,1.00)
}
.form a::after {
    content: '';
    display: block; 
	background-color: rgba(0,0,0,1.00);
    position: absolute;
    bottom: -2px;
    left: 0;
    transform: translateX(-50%);    
}
.submit {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-transform: uppercase
}
input {
	padding: 10px;
	text-align: left;    
    box-sizing: border-box;	
	outline: none;
}
@media (max-width: 992px) {
    input  {
        padding: 30px;
    }
}

input[type=text],
input[type=message],
input[type=date],
input[type=time],
textarea {
    width: 100%;
    height: 50px;
    resize: vertical;
    font: inherit;
    border: none;
    color: rgba(255,255,255,1.00);
    background: rgba(255,255,255, .2);
}
@media (max-width: 992px) {
	input[type=text],
	input[type=message],
	input[type=date],
	input[type=time],
	textarea {
		width: 100%;
	}
}
input[type="submit"] {
    height: 60px;
    width: 100%;
    color: rgba(5,5,5,1.00);
    background-color: rgba(255,255,255,0.50);
    letter-spacing: -1px;
    cursor: pointer;
    border: none;
    -moz-transition: all 0.5s ease-in-out 0.3s;
    -o-transition: all 0.5s ease-in-out 0.3s;
    -webkit-transition: all 0.5s ease-in-out 0.3s;
    -ms-transition: all 0.5s ease-in-out 0.3s;
    transition: all 0.5s ease-in-out 0.3s;
}
@media (max-width: 992px) {
    input[type="submit"] {
		font-size: 25px;
		height: auto;
	}

}
input[type="submit"]:hover {
    color: rgba(0,0,0,1.00);
    background-color: rgba(255,255,255,1.00);
    letter-spacing: 5px;
}
#message  textarea {
	padding-bottom: 100px;	
	background: rgba(0, 0, 0, .6);
}
.underline::after,
.underline::after {
    display: block;
    content: '';
    width: 30px;
    height: 1px;
    border-top: solid 1px rgba(51,51,51,0.40);
    -webkit-transition: .3s ease-in;
    -moz-transition: .3s ease-in;
    -ms-transition: .3s ease-in;
    -o-transition: .3s ease-in;
    transition: .3s ease-in;
}
.underline:hover::after,
.underline:focus::after,
.active .underline::after {
    width: 100%;
    border-color: rgba(0,0,0,.50);
}	
	
/*------------------logo h02------..------*/
.logo {
	font-family: "LemonMilk";
	font-size: .7vw;	
	font-weight: 100;
	letter-spacing: .1vw;
	margin-top: 5vh;
	margin-left: 1vh;
	margin-bottom: 1vh
}
@media (max-width: 992px) {
    .logo {
		font-size:1.3vw;
    }
}
.logo img{
	width: 100px;	
}
@media (max-width: 992px) {
    .logo img{
        width: 130px;
    }
}
.logo a {
    color: rgba(170,170,170,1.00);
}
.logo img a {
	filter: invert(0);
	-webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s; 
}
.logo img a:hover {
	filter: invert(1)
}


/*------------------legal..------------*/
.contact_legal {
	text-align: right;
	bottom: 0;
	font-size: 1vw;
	padding: 10px;
}
@media (max-width: 992px) {
    .contact_legal {
		font-size:1.5vw;
    }
}