/* Reset */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}


@import url('http://fonts.cdnfonts.com/css/clash-display');
@font-face {
    font-family: Clash Display Regular;
    src: url(../fonts/ClashDisplay-Regular.woff);
    font-weight: 400;
  }
  @font-face {
    font-family: Clash Display Regular;
    src: url(../fonts/ClashDisplay-Regular.woff2);
    font-weight: 400;
  }
  @font-face {
    font-family: Clash Display Regular;
    src: url(../fonts/ClashDisplay-Regular.ttf);
    font-weight: 400;
  }
  @font-face {
    font-family: Clash Display Regular;
    src: url(../fonts/ClashDisplay-Regular.eot);
    font-weight: 400;
  }
  @font-face {
    font-family: Clash Display SemiBold;
    src: url(../fonts/ClashDisplay-Semibold.woff);
    font-weight: 600;
  }
  @font-face {
    font-family: Clash Display SemiBold;
    src: url(../fonts/ClashDisplay-Semibold.woff2);
    font-weight: 600;
  }
  @font-face {
    font-family: Clash Display SemiBold;
    src: url(../fonts/ClashDisplay-Semibold.ttf);
    font-weight: 600;
  }
  @font-face {
    font-family: Clash Display SemiBold;
    src: url(../fonts/ClashDisplay-Semibold.eot);
    font-weight: 600;
  }

  @font-face {
    font-family: Clash Display Light;
    src: url(../fonts/ClashDisplay-Light.woff);
    font-weight: 300;
  }
  @font-face {
    font-family: Clash Display Light;
    src: url(../fonts/ClashDisplay-Light.woff2);
    font-weight: 300;
  }
  @font-face {
    font-family:Clash Display Light;
    src: url(../fonts/ClashDisplay-Light.ttf);
    font-weight: 300;
  }
  @font-face {
    font-family: Clash Display Light;
    src: url(../fonts/ClashDisplay-Light.eot);
    font-weight: 300;
  }
/* Panel */
html{
    background-color: rgb(247, 247, 247);
}
body{
    font-family: 'Clash Display Regular', 'Montserrat', 'Arial', sans-serif !important;
	margin:  0;
    background-color: rgb(247, 247, 247);
    color: #353535;
    transition: all ease-in-out .3s;
    font-size: 18px;

}
p, input, textarea, li{
    font-family: 'Clash Display Regular', 'Montserrat', 'Arial', sans-serif !important;
    font-size: 18px;
}

a{
    cursor: pointer;
}

body.blocked{
	height:100vh;
	overflow: hidden;
}

.overflow{
	position: relative;

}
.overflow::after{
    content: "";
	position: absolute;
	width:  100%;
	height:  100%;
	background-color:  #353535;
	left: 0;
	top:  0;
	z-index:98;
    transition:  all ease-in-out .3s;
    opacity: 0;
    pointer-events: none;
}
.overflow.darken::after{
    opacity:  0.7;
    pointer-events: all;

}

/* Buttons */
.btn{
	background-color: #2D6B62;
	border-radius: 50px;
	border:  none;
	display:  inline;
	transition:  all ease-in-out .3s;
    text-transform: uppercase;
    font-family: 'Clash Display Regular', 'Montserrat', 'Arial', sans-serif !important;
    letter-spacing: 1.5px;
    color: #fff;
    cursor: pointer;
    padding: 15px;
    text-decoration: none;
    border: 1px solid #2D6B62;
    font-size:  18px;
}

.btn:hover{
	background-color: #FF8552;
    color: #353535;
}

.btn a {
    color: #353535;
	text-decoration:  none;
    font-family: 'Clash Display Regular', 'Montserrat', 'Arial', sans-serif !important;
	font-size:  18px;
    letter-spacing: 1.5px;
    display: inline-block;
    width: 100%;
    height: 100%;
}

.btn-circle{
    background-color: transparent;
    border: 1px solid #2D6B62;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 40px;
    height: 40px;
}

.btn-circle:hover, .btn-circle:active{
    transform: scale(1.15);
}

.btn-circle a{
    padding: 0;
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.btn-circle svg{
    fill: #fff;
    stroke: none;
    width: 24px;
    height: auto;
}

.btn-border{
    background-color: transparent;
    border: 1px solid #2D6B62;
    color: #353535;
}

.btn-ctn.center{
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 15px;
}

@media(max-width: 990px){
    .btn-circle{
        width: 34px;
        height: 34px;
    }
    .btn-circle svg{
        width: 21px;
    }
}

@media(max-width: 767px){
    .btn-ctn.center{
       width: 205px;
       max-width: 100%;
       margin: auto;
        flex-direction: column;
        
    }
}


/* NAV */

nav{
    
    position: absolute;
    z-index:5;
    top:  50px;
  
 }
 /* Logo */
 nav .logo svg{
     transition:  all ease-in-out .3s;
 }
 nav .logo svg.hidden{
     opacity: 0;
 }
 .logo svg{
     width:  70px;
     height:  70px;
     position: fixed;
     top:  50px;
     left:  50px;
     fill:  #2D6B62;
     z-index:90;
     transition: all ease-in-out .3s;
 }

 .logo a:hover svg{
     opacity: 0.5;
 }
 
 .logo{
     margin-left: 170px;
     position: relative;
     height:  70px;
 
 }
 
 .logo span{
     display:  block;
     line-height:  40px;
 }
 
 .logo span.logo-title{
     font-size: 35px;
     font-weight:  600;
 }
 .logo::after{
    content: "";
    position: absolute;
    left: -30px;
    top: 0;
    height: 100%;
    width:  1px;
    background-color:  #353535;

}
 
 .logo span.logo-subline{
     font-size:  15px;
     margin: 0;
     line-height:normal
 }
 .logo span.logo-subline a{
     color: #353535;
     margin:  0;
     text-decoration: none;
 }
 
 .menu-container{
     width:100vw;
     max-width:  720px;
     max-height: 100vh;
     height: 100%;
     position:  fixed;
     top: 0;
     right:  0;
     background-color: #FFB899;
     transform:  translateX(100%);
     transition:  all ease .3s;
     z-index:99;
     overflow-x:  hidden;
     background-color:  #FF8552;
     display: flex;
     flex-direction:  column;
     justify-content:space-between;
     overflow-y: scroll;
 }
 
 .menu-container.active{
     transform:  translateX(0);
 }
 
 .menu-container .logo svg{
     position: initial;
     fill:  #353535!important;
 }
 
 .menu-container .logo{
     display:flex;
     margin-left: 0;
 }
 .menu-container .logo::after{
     left:  95px;
 }
 .menu-container .logo .logo-flex{
     margin-left:  50px;
 }
 
 .menu-container .logo span{
     line-height:  normal;
 }
 
 .menu-container .logo span.logo-title{

     font-size:  25px;
 }
 
 .menu-container .logo span.logo-subline{
     font-size:  18px;
 }
 
 .menu-header{
     display: flex;
     justify-content:space-between;
     align-items: center;
     padding: 3.6666% 35px;
     position:  relative;
     z-index:1;
     border-bottom:  1.5px solid #353535;
 }
 
 .menu-content{
     border-bottom:  1.5px solid #353535;
     padding: 3.6666% 35px;
     position: relative;
     z-index: 1;
     display: flex;
     flex-direction: column;
     justify-content:center;
     flex-grow: 1;
 
 }
 
 .menu-content ul{
     list-style: none;
     margin-left:  0;
     padding-left:  0;
 }
 
 .menu-content ul li{
     font-size:  35px;
     font-weight:  600;
     line-height: 60px;
 }
 
 .menu-content ul li a{
     color:  #353535;
     text-decoration:  none;
     display:  inline-block;
     transition: all ease-in-out .3s;
     position:  relative;
 
 }
 
 .menu-content ul li a::after{
     content:  "";
     width:  0;
     height:  1.5px;
     background-color:  #353535;
     position:  absolute;
     left: calc(100% + 15px);
     bottom:  0;
     top: 0;
     margin: auto;
     transition: width ease-in-out .3s .3s;
 
 }
 
 .menu-content ul li a:hover{
     transform: translateX(15px);
 }
 
 .menu-content ul li a:hover::after{
     width:  50px;
 }
 
 .menu-cta{
    padding: 3.6666% 35px;
   /* display: flex;*/
    flex-direction: column;
    flex-grow: 1;
    color:  #353535;
}
 
 
 .menu-cta .btn{
     background-color:  #353535;
     border:  1.5px solid transparent;
     transition:  all ease-in-out .3s;
     padding:  15px 25px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;

 }
 
 .menu-cta .btn:hover{
     background: #1d1d1d;
 }
 
 
 .menu-cta .btn a{
     display: flex;
     justify-content: center;
     transition:  all ease-in-out .3s;
 
 }
 
 .menu-footer{
     padding: 3.6666% 35px;
 }
 
 .menu-footer .menu-footer-container{
     display:  flex;
     justify-content: space-between;
     align-items:  center;
 }
 
 .menu-footer .menu-links{
     color: #353535;
     font-size: 16px;
 }
 .menu-footer .menu-links a{
     color:  #353535;
     font-size: 16px;
 }
 
 .menu-footer .menu-network{
     display:  flex;
     align-items: center;
     gap: 8px;
 }
 
 .menu-footer .menu-network a{
     display:  inline-block;
     margin: 0 5px;
 }
 .menu-footer .menu-network a:first-child{
     margin-left: 0;
 }
 .menu-footer .menu-network a:last-child{
     margin-right: 0;
 }
 
 .menu-footer .menu-network a svg{
     fill:  #353535;
     transition:  all ease-in-out .3s;
     width: 34px;
     height: auto;
 }
 
 .menu-footer .menu-network a:hover svg{
     fill: #2D6B62;
 }

 .menu-container h2{
     font-size: 29px;
    font-family: 'Clash Display SemiBold', 'Montserrat', 'Arial', sans-serif;
     margin-bottom: 1.5rem;
     text-align: left;
 }
 
 @media(max-width:  767px){
     .logo span.logo-subline{
         display: none;
     }
     .logo span.logo-title{
         display: none
     }
     .logo{
         height: 50px;
         margin-left: 50px;
     }
     .logo svg{
         width: 50px;
         height: 50px;
         top: 35px;
         left: 35px;
 
     }
     .logo::after{
         display: none;
     }
 }
 @media(max-width:  660px){
     .logo svg{
         top:  15px;
         left: 15px;
 
     }
 
     .menu-footer .menu-footer-container{
         display: block;
         
     }
 
     .menu-footer .menu-links{
         margin-bottom: 35px;
     }
 
     .menu-footer .menu-links span{
         display: none;
     }
 
     .menu-footer .menu-links a{
         display: block;
         margin:  7px 0;
     }
 
     
 
 }

 @media(max-width:420px){
     nav .logo{
         display: none;
     }
 }
 
 
 /* Menu hamburger */
 .menu-ham{
     position:  fixed;
     right:  50px;
     top:  50px;
     width:  70px;
     height:  70px;
     display: flex;
     align-items: center;
     justify-content: center;
     background-color:  #2D6B62;
     border-radius:  50%;
     transition:  ease-in-out .3s;
     cursor:  pointer;
     z-index:90;
 }
 
 .menu-ham .bars{
     height: 1.5px;
     width:  20px;
     background-color:  #fff;
     position:  relative;
     transform: translateX(-2.5px);
     transition:  ease-in-out .3s;
 }
 .menu-ham .bars::after{
     content: '';
     position:  absolute;
     left: 0;
     top: -5px;
     background-color: #fff;
     width:  25px;
     height:  1.5px;
     transition:  ease-in-out .3s;
 }
 
 .menu-ham .bars::before{
     content: '';
     position:  absolute;
     left: 0;
     bottom: -5px;
     background-color: #fff;
     width:  25px;
     height:  1.5px;
     transition:  ease-in-out .3s;
 }
 
 .menu-ham:hover{
     background-color: #FF8552;
 }
 
 .menu-ham:hover .bars{
     width:  25px;
     transform:  translateX(0);
 }

 .menu-ham.active{
    background-color:  #fff;
 }
 
 .menu-ham.active .bars, .menu-ham.active .bars::after, .menu-ham.active .bars::before{
     background-color: #2D6B62;
 }

 .menu-close{
     width:  70px;
     height:  70px;
     background-color: transparent;
     border:  1.5px solid #353535;
     display:  flex;
     justify-content: center;
     align-items: center;
     border-radius:  50%;
     position: relative;
     cursor:  pointer;
     transition:  ease-in-out all .3s;
 }
 
 .menu-close::after{
     content: "";
     width:  25px;
     height:  1.5px;
     background-color: #353535;	
     transform:  rotate(-45deg);
     position:  absolute;
     left:  0;
     right:  0;
     top: 0;
     bottom:  0;
     margin: auto;
     transition:  ease-in-out all .3s;
 
 }
 
 .menu-close::before{
     content: "";
     width:  25px;
     height:  1.5px;
     background-color: #353535;	
     transform:  rotate(45deg);
     position:  absolute;
     left:  0;
     right:  0;
     top: 0;
     bottom:  0;
     margin: auto;
     transition:  ease-in-out all .3s;
 
 
 }
 
 .menu-close:hover{
     background-color: #353535;
 }
 
 .menu-close:hover::after{
     background-color:  #FFF;
 }
 
 .menu-close:hover::before{
     background-color:  #FFF;
 }
 
 @media(max-width: 768px){
     .menu-ham{
         width:  50px;
         height: 50px;
         right: 35px;
         top: 35px;
     }
 }
 
 @media(max-width: 660px){
     .menu-ham{
         right:  15px;
         top:  15px;
     }
 }

 /* contact */

.contact-container{

	background-color: #353535;
	
}

.contact-container.active{
	transform:  translateX(0);
}

.contact-container .contact-content{
	padding: 50px 50px 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.contact-container h2{
	color:  #FFF;
    font-weight: 400;
    font-size: 29px;
}


input, textarea{
	width:  100%;
	background-color:  transparent;
	color:  #FFF;
	border: none;
    border-bottom: #b7b7b7 1.5px solid;
    padding: 15px 0;
}

.field{
	position: relative;
	 margin-bottom: 35px;
	 
}

.field::after{
	content: "";
	position: absolute;
	left:  0;
	bottom: 0;
	background-color: #25A18E;
	width: 0;
	height:  1.5px;
	transition:  all ease-in-out .3s;
}

.field.green::after{
	width:  100%;
}

.form{
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



input:focus-visible, textarea:focus-visible{
	outline: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px #353535 inset !important;
     -webkit-text-fill-color: #FFF !important;
}



.contact-content .d-flex{
	display: flex;
}

.contact-content .flex-50{
	flex-basis:  50%;
}

.contact-content .flex-50:first-child{
	margin-right:  15px;
}

.contact-content .flex-50:last-child{
	margin-left:  15px;
}

.contact-header{
	display: flex;
	justify-content:space-between;
	align-items: center;
}

.contact-content .menu-close{
	border:  1.5px solid #b7b7b7;
}

.contact-content .menu-close::after{
	background-color:  #b7b7b7;
}
.contact-content .menu-close::before{
	background-color:  #b7b7b7;
}

.contact-content .menu-close:hover{
	background-color: #b7b7b7;
}

.contact-content .menu-close:hover::after{
	background-color:  #353535;
}
.contact-content .menu-close:hover::before{
	background-color:  #353535;
}

.text-center{
	text-align:  center;
}

.contact-container .field .btn{
	background-color: #b7b7b7;
	display:  inline-block;
	padding: 15px 25px;
	width:  auto;
	min-width: 160px;
	cursor:  pointer;
	font-weight: 600;
}
.contact-container .field .btn:hover{
	background-color:  #FF8552
}

.field.green::after{
	width:  100%;
}

.form{
	flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}



input:focus-visible, textarea:focus-visible{
	outline: 0;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
     -webkit-text-fill-color: #FFF !important;
}



.contact-content .d-flex{
	display: flex;
}

.contact-content .flex-50{
	flex-basis:  50%;
}

.contact-content .flex-50:first-child{
	margin-right:  15px;
}

.contact-content .flex-50:last-child{
	margin-left:  15px;
}

.contact-header{
	display: flex;
	justify-content:space-between;
	align-items: center;
}

.contact-content .menu-close{
	border:  1.5px solid #b7b7b7;
}

.contact-content .menu-close::after{
	background-color:  #b7b7b7;
}
.contact-content .menu-close::before{
	background-color:  #b7b7b7;
}

.contact-content .menu-close:hover{
	background-color: #b7b7b7;
}

.contact-content .menu-close:hover::after{
	background-color:  #353535;
}
.contact-content .menu-close:hover::before{
	background-color:  #353535;
}

.text-center{
	text-align:  center;
}

.contact-container .field .btn{
	background-color: #b7b7b7;
	display:  inline-block;
	padding: 15px 25px;
	width:  auto;
	min-width: 160px;
	cursor:  pointer;
	font-weight: 600;
}


@media(max-width: 768px){
	.contact-container .contact-content{
		padding: 35px;
	}
	.menu-close{
		width:50px;
		height: 50px;
	}
}
@media(max-width: 767px){
	.contact-container .contact-content{
		padding: 15px;
	}
	.contact-content .d-flex{
		display: block;
	}
	.contact-content .flex-50:first-child{
		margin-right:  0;
	}

	.contact-content .flex-50:last-child{
		margin-left:  0;
	}
}
/* Panel END */


/* Main content */

.d-flex{
    display: flex;
}

.space-between{
    justify-content: space-between;
}

.align-center{
    align-items: center;
}

main{
    padding: 150px 144px 0;
    overflow-x: hidden;
    max-width: 1600px;
    margin: auto;
}



.titles{
    position: relative;
    text-align: center;
    height: 80px;
    margin: 30px 0;
}

h1, h2, h3{
    font-family: 'Clash Display SemiBold', 'Montserrat', 'Arial', sans-serif;
    color: #353535;
    transition: all ease-in-out .3s;
}

h1{
font-family: 'Clash Display Regular','Montserrat', 'Arial', sans-serif;
  font-size: 6rem;
  font-weight: 800;
  text-align: center;
}

h2{
    font-family: 'Clash Display SemiBold','Montserrat', 'Arial', sans-serif;
    font-size: 3rem;
    margin-bottom: 3rem;
}

h3{
    font-size: 2rem;
}

.titles .anim-title{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    color: #2D6B62;
    padding: 15px 0;
    font-weight: 800;
    font-size: 2rem;
    text-transform: uppercase;
    letter-spacing: 0.5rem;
    overflow: hidden;
    font-family: 'Clash Display Light','Montserrat', 'Arial', sans-serif;

    
}

.anim-title .letter{
    display: inline-block;
    line-height: 1em;
    
}

.header{
    height: clamp(450px, 70vh, 500px);
    position: relative;
    z-index: 0;
}

.header p{
    text-align: center;
}

.cursor {
  width: 20px;
  height: 20px;
  background: #2D6B62;
  border-radius: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100000;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
  -webkit-transition: width ease 0.3s, height ease 0.3s, opacity ease 0.5s;
  transition: width ease 0.3s, height ease 0.3s, opacity ease 0.5s;
  
}

.cursor.linkHover{
  width: 60px;
  height: 60px;
  opacity: 0.3;
}
  
.cursor-container{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    opacity: 0;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    pointer-events: none;
}

body:hover .cursor-container{
    opacity: 1;
}
.cursor .projectHover{

}


@media(max-width: 767px){
    main{
        padding: 50px 65px;
    }
    .d-flex{
        display: block;
    }
    h1{
        font-size: 5rem;
    }
}
@media(max-width: 420px){
    main{
        padding: 50px 15px;
    }

    h1{
        font-size: 4rem;
    }
    h2{
        font-size: 2rem;
    }
}

/* Projects */

.projects-container>div{
    margin: 50px 0;
}

.project-grid>.d-flex{
    gap: 30px;
}
.projects-container>.project-grid-1{
    margin-top: -100px;
}
.project-grid-1 article{
    max-width: 84%;
    margin: auto;
}
article.project img{
    height: auto;
    width: 100%;
}

article.project{
    width: 100%;
    height: 100%;
    min-height: 0;
}

article.project.odd{
    margin: 100px 0;
}

article.project.even{
}

.project h3{
    font-size: 2rem;
    font-family: 'Clash Display Regular', 'Montserrat', 'Arial', sans-serif;
    transition: all ease-in-out .3s;
}

.project p {
    font-size: 1rem;
    color: #b7b7b7;
    font-family: 'Montserrat', 'Arial', sans-serif;
    font-weight: 300;
    transition: all ease-in-out .3s;


}

@media(max-width: 767px){
    
    article.project.odd{
        margin: 50px 0;
    }

    article.project{
        margin: 50px 0;
    }
    .projects-container>.project-grid-1{
        margin: 0;
    }

    .project-grid-1 article{
        max-width: 100%;
    }

}

/* FOOTER */

footer{
    padding: 50px 150px;
    color: #FFF;
    background: #1f4943;

}

.footer-ctn{
    max-width: 1600px;
    margin: auto;
}

footer h2{
   margin-bottom: 1rem;
}
footer h3{
    font-family: "Clash Display Regular", "Montserrat", Arial, sans-serif;
    font-weight: 400;
}

footer h2, footer h3{
    color: #fff;
}

footer .divide{
    position: relative;
    margin: 25px 0;
    height: 5px;
}

footer .divide::after{
    content:"";
    position: absolute;
    width: 100%;
    height: 1px;
    background: #2D6B62;
    left: 0;
    top: 0;
}

.btn-footer{
    background-color: #fff;
    width: 100px;
height: 100px;
border-radius: 50%;
padding: 15px;
margin: 50px 0;
display: flex;
justify-content: center;
align-content: center;
text-align: center;
transition: none;
flex-wrap: wrap;
color: #353535;
}
.footer-logo{
    display: flex;
    gap: 15px;
    font-weight: 600;
    align-items: center;
    font-size: 18px;
    margin-bottom: 15px;
}
.footer-logo svg{
    fill: #fff;
    width: 35px;
    height: auto;
}

.footer-logo .logo-title{
    font-size: 21px;
    text-align: left;
}
.logo-flex{
    text-align: left;
}
.logo-subline{
    text-align: left;
}
.social-network{
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

footer a{
    color: #fff;
    transition: all ease-in-out .3s;
}

footer a:hover, footer a:active{
    color: #FF8552;
}
.bas-de-page{
    margin-top: 30px;
}
footer .email, footer .rgpd{
    display: flex;
    gap: 15px;
}

@media(max-width: 1200px){
    .bas-de-page{
        display: block;
    }

    footer .email, footer .rgpd{
        margin: 15px 0;
    }
}

@media(max-width: 767px){
    footer{
    text-align: center;
    padding: 50px 65px;
    }

    .btn-footer{
        margin: 50px auto;
    }
    .footer-logo{
        justify-content: center;
    }
    .social-network{
        display: flex;
        justify-content: center;
    }

    .bas-de-page{
        text-align: left;
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    footer .email, footer .rgpd{
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    footer .email{
        flex-direction: column-reverse;
    }

    .email>*, .rgpd>*{
        display: inline-block;
        margin: 15px 5px;
    }
}



/*FIN main content */ 


/*¨TRANSITION PAGE */
.transition{
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;
    display: none;
    width: 100%;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: none;
}

.transition-content{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100vh;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #0a0a0a;
}

.preloader-wrap{
    position: relative;
    z-index: 2;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    width: 270px;
    height: 270px;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

@keyframes slide-down{
    from{
        transform: translate3d(0, -100%, 0);
    }
    to{
        transform: translate3d(0, 0, 0);
    }
}
@keyframes slide-up{
    from{
        transform: translate3d(0, 0, 0);
    }
    to{
        transform: translate3d(0, 100%, 0);
    }
}