@charset "utf-8";

body {
	position: relative;
	width: 100%;
   margin: 0 auto;
   font-family: 'Amaranth', sans-serif;
   font-size: 1.3em;
   font-weight: 400;
   word-wrap: normal;
   line-height: 1.9;
	background: #fff;
	color: #4a5e5a;
	letter-spacing: 2px;
   overflow: hidden;
}

h1 {
   position: relative;
	width: fit-content;
	margin: 0 auto 40px;
	font-size: 4em;
	font-weight: 500;
	line-height: 150%;
	color: #7b767b;
	letter-spacing: 6px;
   z-index: 2;
}

#content {
  min-height: calc(100vh - 105px);
  margin: 0 auto;
  display: flex;
  align-items: center;
  text-align: center;
}

#header {
	position: relative;
	width: 100%;
	padding: 25px 0;
	margin: 0 auto;
	background: #fff;
}  

.logo {
   margin: 0 auto;
	width: 400px;
	height: 450px;
	background: url('../images/colibri-gestion-logotype.png') no-repeat;
	background-size: 100%;
	animation: anim 0.3s linear forwards 0.3s;
}

.wrapper {
	position: relative;
	width: 1300px;
	margin: 0 auto;
   box-sizing: border-box;
}

#footer {
  position: relative;
  width: 100%;
  padding: 5px 0;
  color: #fff;
  background: #7e5379;
}

.mentions {
	font-size: .75em;
   line-height: 1;
	text-align: center;
}


/* BELOW 1300 */

@media only screen and (max-width: 1300px) {
   
   .wrapper {
      width: 90%;
   }
}


/* BELOW 650 */

@media only screen and (max-width: 650px) {
   
   h1 {
      font-size: 3em;
   }
}


/* BELOW 450 */

@media only screen and (max-width: 450px) {
   
   body {
      font-size: 1.15em;
   }
   
   .logo {
      width: 300px;
      height: 350px;
   }
   
   h1 {
      font-size: 2.5em;
   }
   
   .button {
      padding: 12px 30px;
      font-size: .9em;
   }
}


/* BELOW 360 */

@media only screen and (max-width: 360px) {
   
   h1 {
      font-size: 2em;
   }
}