html{box-sizing:border-box;display: block;}
body{font-size:16px;background-color: black;color: white;font-family: 'Montserrat', sans-serif;/* min-height: 100vh; */}
a{color: white;text-decoration:none;}
.wrap{}
*,
*:before,
*:after{box-sizing:inherit;}
ol,
ul{padding:0;list-style-type:none}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ol,
li,
ul,
dl,
dd,
blockquote,
figure,
body{padding:0;margin:0;font-weight:400;text-align: center;font-family: 'Outfit', sans-serif;}
hr,
pre{margin:0;line-height:1.3rem;}
hr{border-style:none;background:#19cade;height:0.125em;}
.aligner{*zoom:1;}
.aligner:before,
.aligner:after{display:table;content:"";line-height:0;}
.aligner:after{clear:both;}
.aligner>.aligner{clear:none;}


.btn{
	 display: block;
	 padding: 10px 26px;
	 margin: 0px 10px 0px 10px;
	 font-size: 1.1rem;
	 vertical-align:top;
	 box-shadow:1px 1px 50px rgba(0, 0, 0, 0.059);
	 text-decoration:none;
	 /* text-transform:uppercase; */
	 letter-spacing: 0px;
	 font-weight:700;
	 color: white;
	 /* background-color:white; */
	 border: 2px solid white;
	 top: 60px;
	 position: relative;
	 z-index: 99999;
	 border-radius: 10px;
	 margin-top: 18vh;
	 font-family: 'Playfair Display', serif;
	 max-width: 200px;
	 margin: 0px auto;
	 }
a, span.btn{transition:all .4s;}
.btn:hover, .btn.cta:hover{box-shadow:1px 1px 50px rgba(0, 0, 0, 0.159);background-color: white;color: black;border-color: white;}


.top {margin-top:20vh;padding: 10px;text-align: center;}

i.logo {
    background-image: url(logo.svg);
    height: 140px;
    width: 290px;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    margin: 40px auto;
}
h1 {
    /* font-family: 'Outfit', sans-serif; */
    font-size: 5rem;
}
h1 i {
    display: inline-block;
    width: 35px;
    height: 40px;
    /* background-color: red; */
    margin-top: 10px;
    top: -20px;
    vertical-align: top;
    background-image: url(logo-symbol.svg);
    background-position: center;
    background-repeat: no-repeat;
    margin-left: -7px;
}
h1 small {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
}

h2 {
    font-size: 1.3rem;
    color: black;
    padding: 20px;
}


h2{
  display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
  transform-origin: center;
  margin: 0px auto;
  text-align: center;
  left: 0;
  right: 0;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.06); opacity: .85; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  h2.pulse { animation: none; }
}

.bg {height:100vh;width:100vw;position: fixed;top:0;z-index:-1;min-height: 100vh;/* background-attachment: fixed; */}
.bg:before {transition: all 3s;content:"";width:100%;height:100%;display:block;background-image:url(bg.jpg);opacity: 1;/* background-color: rgba(0,0,0,0.3); */background-blend-mode: multiply;background-position: left;background-size: cover;}
body:hover:.bg:before {opacity: 1;background-color: rgba(0,0,0,0.0);}
.bg:after {transition: all 3s;content:"";width: 50%;height: 100vh;display:block;background-image:url(profil.png);opacity: 1;/* background-color: rgba(0,0,0,0.3); *//* background-blend-mode: multiply; */background-position: bottom right;background-size: contain;background-repeat: no-repeat;position: absolute;z-index: 9999999999;/* border: 2px solid white; */display: block;bottom: 0;right: 0;}


.gradient {background: rgb(11,58,49);
background: linear-gradient(39deg, rgba(11,58,49,1) 3%, rgba(5,5,7,1) 7%, rgba(87,80,84,1) 14%, rgba(239,189,152,1) 31%, rgba(178,100,107,1) 42%, rgba(53,104,109,1) 54%, rgba(28,54,102,1) 65%, rgba(132,61,119,1) 75%, rgba(226,90,43,1) 92%, rgba(254,214,64,1) 100%);
background-size: 200% 200%;
	animation: gradient 10s ease infinite;
}

#footer {margin-top: 12vh;padding: 0px 20px;padding-bottom: 40px;position: relative;}
#footer a {}
#footer a:hover {color:black}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

@media only screen and (min-width: 221px) and (max-width: 880px) {
	i.logo {width: 220px;margin-top: 0px;}
h1 {font-size:2rem}
	h1 i {width:20px;height:20px;margin-top: 4px;margin-left: 0px;}
.btn {position:relative;right: initial;margin:0px auto;left: initial;margin-bottom: 60px;}
	h1 small {font-size:1rem}
	
.top {margin-top:10vh}
	.bg:before {opacity:1;/* background-image: url(bg2.jpg); */}
	#footer {font-size:13px}
}