@charset "utf-8";

/* CSS Document */
* {
	margin: 0; 
	padding: 0;
	font-family: 'Alegreya Sans', serif;
  color: #192B38;
}
.poppins {
  font-family: 'Poppins', sans-serif;
}

html, body {
	height: 100%;
  font-family: 'Alegreya Sans', serif;
  color: #192B38;
  background: url("../img/pattern.svg") repeat center;
  overflow-x:hidden;
} 
body {
  position: relative;
  min-height: 800px;
} 


/************************************************
		VARIOUS
*************************************************/
#md-container { 
  position: relative; z-index: 10;
  width: 100%;
	min-height: 800px;
  overflow: hidden;
}

@media only screen and (max-width: 767px) {
  /*body { 
    height: auto;
    min-height: inherit;
  }
  #md-container { 
    min-height: inherit;
    padding-bottom: 100px;
  }*/
}

@media only screen and (max-width: 767px) {
  body { 
    /*height: 100%;*/
    min-height: 750px;
  }
  #md-container { 
    min-height: 750px;
  }
}
@media only screen and (max-width: 575px) {
  body { 
    min-height: 720px;
  }
  #md-container { 
    min-height: 720px;
  }
}


#md-container p { 
	font-size: inherit;
}

#md-container h1,
#md-container h2,
#md-container h3,
#md-container h4,
#md-container h5,
#md-container h6 {
	margin:0; 
	font-family: 'poppins', sans-serif;
	line-height: 110%;
	font-weight: 700;
}

#md-container section	{ 
	width: 100%;
}

#md-container a {
	color: inherit;
}

.stars,
.astronaut,
.ground,
.earth,
.flag{
  position: absolute; z-index: -1;
  display: block;
}
.stars {
  left:10%; top:12%;
  width: 81px; height: 104px;
  background: url("../img/stars.svg") no-repeat center / 100% auto;
}
.astronaut {
  left:80%; bottom:5%; z-index: 1;
  width: 337px; height: 570px;
  background: url("../img/astronaut@2x.png") no-repeat center / 100% auto;
}
.earth {
  left:85%; top:10%; z-index: -2;
  width: 233px; height: 214px;
  background: url("../img/earth.svg") no-repeat bottom center / 100% auto;
}
.ground {
  left:0; bottom:0; z-index: 0;
  width: 100%; height: 100%;
  background: url("../img/moon@2x.png") no-repeat bottom center / 100% auto;
}
.flag {
  right:80%; bottom:10%; z-index: -3;
  width: 147px; height: 304px;
  background: url("../img/flag.svg") no-repeat bottom center / 100% auto;
}


@media only screen and (max-width: 1399px) {
  .ground { bottom:0%; }
}
@media only screen and (max-width: 1199px) {
  .ground { bottom:0%; }
  .flag { bottom:15%; }
}
@media only screen and (max-width: 991px) {
  .flag { bottom:10%; }
}

@media only screen and (max-width: 767px) {
  .flag { bottom:5%; }
  .earth { top:5%; }
}

@media only screen and (max-width: 575px) {
  .stars { display:none; }
  .flag { 
    right:30%; bottom:3%; 
    width: 50px; height: 150px;
  }
  .earth {
    top: -2%;
    left: 70%;
    width: 170px;
  }
  .astronaut {
    width: 140px;
    height: 225px;
    left: 73%;
    bottom: 3%;
  }
}


/************************************************
		Button
*************************************************/
#md-container .cta { 
  display: inline-block;
  position: relative; z-index: 2;
  cursor: pointer;
  box-sizing: border-box;
  word-wrap: break-word;
  user-select: none;
  text-decoration: none;
  box-sizing: border-box;
}
#md-container .cta span { 
  display: block;
  position: relative; z-index: 2;
  margin-bottom: 0; 
  padding: 0.6rem 4rem 0.6rem 1.2rem;
  vertical-align: middle;
  border: 1px solid #192B38; border-radius: 2em;
  color: #192B38; font-size: 0.9rem;  font-weight: bold;
  word-wrap: break-word;
  user-select: none;
  text-decoration: none;
  
	-webkit-transition: all 0.2s ease-in-out; 
	-moz-transition: all 0.2s ease-in-out; 
	-o-transition: all 0.2s ease-in-out; 
	transition: all 0.2s ease-in-out; 
}

#md-container .cta i {
  display: block;
  position: absolute; top: 50%; right: 0.3rem!important;
  width: 2rem; height: 2rem;
  border: 1px solid #192B38;
  border-radius: 1.25rem;
  text-align: center;
  font-size: 0.9rem;
  line-height: 1.9rem;
  vertical-align: top;
  -webkit-transform: translate(0,-50%);
  -ms-transform: translate(0,-50%);
  -o-transform: translate(0,-50%);
  transform: translate(0,-50%);
}
#md-container .cta::after {
  content: '';
  position: absolute;
  left: 0.3rem; top: 0.3rem; z-index: -1;
  display: block;
  width: 100%; height: 100%;
  border-radius: 2em;
  background-color: #FBFF12;
}
#md-container .cta:hover span { 
  color: #5e5e5e;
  border-color: #f0f0f0;
  background-color: #f0f0f0;
}


/************************************************
		HEADER
*************************************************/
#md-container header { 
}
#md-container header .logo {
	width: 250px;	height: 55px;
	margin: 2rem auto 1.5rem;
	background: url('../img/Logo-artestampa-Menu@2x.png') no-repeat center / 100% auto;
}
#md-container header .col {
  margin-top: 2rem;
  border-top: 1px solid #15232F;
}


@media only screen and (max-width: 767px) {
  #md-container header .logo {
    width: 250px;	height: 55px;
    margin: 1rem auto 1rem;
  }
  #md-container header { 
    background: #ffffff;
  }
  #md-container header .col {
    margin: 0;
    border: none;
  }
}


/************************************************
		HERO
*************************************************/
#md-container .hero,
#md-container .hero .container {
	position: relative;
}
#md-container .hero h2 {
	font-size: 2.6rem;
	color: #192B38;
  font-weight: 800;
}

#md-container .hero .btn {
	margin-top: 2rem;
}
#md-container .hero em {
  display: block; 
  width: 80%; height: 0.25rem;
  margin: 3rem auto;
  background: #15232F;
}


@media only screen and (max-width: 767px) {
  #md-container .hero em {
    width: 100%;
  }
}



@media only screen and (max-width: 575px) {
  #md-container .hero h2 {
    font-size: 2.25rem;
  }
}



/************************************************
		MAIN
*************************************************/
#md-container .main {
  font-size: 0.9rem;
}
#md-container .main figure {
  display: flex; align-content: center;
  height: 40px;
}
#md-container .main p {
  margin-top: 1.5rem;
}
#md-container .main .line {
  height: 0.1rem;
  margin: 3rem auto;
  background: #15232F;
}


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


@media only screen and (max-width: 767px) {
  #md-container .main figure {
    float:left;
    width: 3.4rem;
    padding-top: 0.4rem;
  }
  #md-container .main p {
    margin:0rem;
  }
  #md-container .main .line {
    display:none;
  }
}