* {
  box-sizing:border-box;
  margin: 0;
  padding: 0;
}

html{
  height:100%;
}

body {
 background-color: #fff;
 font-family: 'Roboto', sans-serif;
 color: #000;
}

a {
  color: #3498DB;
}

p {
    line-height: 1.5;
	margin-top: 1em;
		
      }

article p, footer p {
  line-height: 1.5;
  margin-top: 0.5em;
  font-size: 20px;
  text-align:left;
  
      }
h1 {
		 color: #0072CE;
		 font-size: 48px;
      }  
h2, h3 {
	color: #0072CE;
	margin-top: 0.5em;
      }  
ul {
    margin-left:30px;
    margin-top:10px;
}
li {
    font-size: 18px;
    line-height: 1.3;
}

#wrap
{
  display: flex;
  flex-wrap: wrap;
}


header {
  padding:20px;
  text-align:center;
  max-width: 100%;
}

header img {
  width: 100%;
  height: auto;
  margin:0;

}

header h1 {
 margin:0;
}

header h2 {
  margin:0;
  color: #0072CE;
}

header h2 {
 font-size: 200%;
}

aside {
  flex: 60%;
  width:60%; 
  background-image: url(Estonian-forest.jpg);
  background-position: center center;  
  height: 100vh;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

main {
  flex: 40%;
  width:40%;
  float:right;
  overflow: auto;
  padding: 20px;
  height: 100vh;
}
article, footer {
   padding: 0px 2vw 0px;
}

.social ul {
  padding-left: 0;
  margin-top: 0;
  margin-bottom: 1rem;
}
.social ul li {
	margin: 0 10px;
}
.social svg {
  vertical-align: middle;
  height: 1.5em;
  fill:#fff;
}

.icons {
	list-style: none;
	padding: 1rem;
	display: flex;
}
.icons span {
	display: none;
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: background-color 0.3s;
    text-decoration: none;
    color: #fff;
}
.icon:hover {
    color: #fff;
}
.facebook {
    background-color: #3b5998;
}
.facebook:hover {
    background-color: #2d4373;
}
.twitter {
    background-color: #1da1f2;
}
.twitter:hover {
    background-color: #0c85d0;
}
.linkedin {
    background-color: #0077b5;
}
.linkedin:hover {
    background-color: #005582;
}

@media screen and (max-width:800px) {
  aside, main {
    width:100%;
	flex: 100%;
	height:100%;
  }
   aside {
    height:300px; 
  }
  article p {
  line-height: 1.5;
  margin-top: 1em;
  font-size: 16px;
  text-align:left;
      }
}