*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
 width:100%;
 margin: 0;
 font-family: 'Titillium Web', sans-serif;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.5;
 background-color:#f5f5f5;
 color: #000;
  -webkit-text-size-adjust: 100%;
}

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

aside {
  flex: 55%;
  width:55%; 
  background-image: url(sekso.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: 45%;
  width:45%;
  float:right;
  overflow: auto;
  padding: 20px;
  height: 100vh;
}


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

article, footer {
   padding: 0px 2vw 0px;
}

h1, h2, h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 700;
  color:#e60000;
}

h1 {
  font-size: calc(3rem + 1.5vw);
}

h2 {
  font-size: calc(2rem + 1vw);
}

h3 {
  font-size: calc(1.2rem + 1vw);
}

p {
    line-height: 1.5;
	margin-top: 1em;
	font-size: 1.5rem;
    text-align:left;
      }
strong {
  color:#36454F;
}

p a {
	padding: 0 2px;
	color: #3498DB;
	font-weight:700;
	text-decoration: none;
	background: linear-gradient(currentColor, transparent, currentColor, transparent, currentColor, transparent, currentColor) repeat-x 0 100% / 100% 3px;
	box-decoration-break: clone;
}
p a:hover, 
p a:focus {
	color: #36454F;
}

article h3 {
	text-align:left;
      }  
	  
footer {
	margin-top: 0.5em;
      }  
	  
article ul {
    margin-left:30px;
    margin-top:10px;
}
article ul li {
    font-size: 1.3rem;
    line-height: 1.3;
}

.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: 768px) {
  aside, main {
    width:100%;
	flex: 100%;
	height:100%;
  }
   aside {
    height:300px; 
  }
p {
    line-height: 1.5;
    margin-top: 1em;
    text-align:left;
    font-size:1.3rem;
      }
article ul {
    margin-left:10px;
}
article li {
  font-size:1.3rem;
      }
}

@media (min-width: 1200px) {
 
  h1 {
    font-size: 4.3rem;
  }
  h2 {
    font-size: 2.3rem;
  }
  header h2 {
    font-size: 1.8rem;
  }
   h3 {
    font-size: 1.5rem;
  }
}