@import url(fonts.css);

html{height:100%;}

body{height:100%;font-family: 'Barlow Condensed', sans-serif;color:#627a5a;background:#dc9a3e;background: linear-gradient(to bottom, #fff 0%,#fff 50%,#dc9a3e 50%);letter-spacing: 1px;}

.wrapper{
  background-color:#dee1d8;
  background-image:url(../images/background.jpg);
  background-position:top center;
  background-size: 100%;
  background-repeat:no-repeat;
  margin:0 2vh 2vh;
  height:98vh;
  overflow:scroll;
}

.head{}

#logo{margin-top:15%;}

.content{
	margin-top:4%;
	text-align:center;
}

.footbutton{
	display: inline-block;
	margin:10px 20px 10px 0;
	border: 1px solid;
	border-radius: 50px;
	padding: 4px 12px 3px 12px;
	font-size: 1.8rem;
}
.footbutton img{
	vertical-align: middle;
	padding-bottom:4px;
}


.wrapper.page{background-image:none}

h2{font-size:8rem;line-height:1.1;}
h3{font-size:4rem;}
h2,h3{font-weight: 600;letter-spacing: 1px;}

#mailcontact{
	position: relative;
	display: inline-block;
	font-size:3rem;
	padding:12px 38px;
	border:3px solid #627a5a;
	margin: 6% auto 10%;
}


#mail{
	position: absolute;
	top: -22px;
	margin: auto;
	left: 0;
	right: 0;
}


@media (max-width: 2200px) {
	.wrapper{background-position:center 0px;}
	.container {width: 90%;}
	.head img{max-width:70%;}
}

@media (max-width: 1700px) {
		html{font-size:50%;}
}


@media (orientation: portrait) {
	html{font-size:40%;}
	.wrapper{
  	background-size: cover;
	}
	.head{margin-top:0%;}
	.head img{max-width:80%;}
	.container {width: 100%;}

	.column, .columns {
    width: 100% !important;
    margin: 0 !important;
    padding:10px !important;
    float: left;
    box-sizing: border-box;
  }

  .foot{
		font-size:2rem;
		text-align:center;
	}

}

@media (max-width: 380px) {
  .footbutton{font-size:1.4rem;}
}

@media (max-width: 400px) {
  #mailcontact{	font-size:2.8rem;}
}