* {
  box-sizing: border-box;
}
 
html, body {
  font-family: 'Raleway', sans-serif;
  font-size: 16px;
}
 
@media screen and (max-width: 768px) {
  html, body {
    font-size: 12px;
  }
  .closepopup {
	position:absolute;
	right: 15rem;
	top: 5rem;
	}
}
.bloc2 {		
	border-radius: 20px;
	position: relative;
	padding : 5rem;
	font-family: Roboto slab, Helvetica, sans-serif; 
	font-size: 20px; 
	color: #3C4858;
	background-color: rgb(211, 214, 218);
    z-index: 1;
}
h6 {
  background: linear-gradient(to right, #ff5e14, #222);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.blog-service {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
 }
.service-content {
  margin-left: 5rem;
  width: 100%;
}						
.blog-service img {
  width: 40%;
  border-radius: 5px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.blog-service .read-more {
  font-size: 0.8rem;
  color: #333;
}
.popup {
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.8);
z-index: 2;
visibility: hidden;
opacity: 0;
transition: .64s ease-in-out;
}
.popup-inner {
position: relative;
display: flex;
max-width: 80%;
max-height: 80%;
width: 100%;
height: 100%;
background-color: #fff;
transform: rotate(32deg);
transition: .64s ease-in-out;
}
.popupphoto {
width: 33.333%;
height: 100%;
overflow: hidden;
}
.popupphoto img {
width: 100%;
height: 100%;
object-fit: cover;
}
.popuptext {
width: 66.667%;
margin-top:1rem;
padding: 2rem;
overflow-y: auto;
}
.popuptext h1 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-transform: uppercase;
  color: #0A0A0A;
}
.popuptext p, #articles p {
  padding:0;
  font-size: .875rem;
  color: #686868;
  line-height: 1.5;
  text-align: justify;
}
.text-container {
margin: 0 auto;
max-width: 800px;
}

.closepopup:hover {
color: #ff5e14;
}
.popuptext a {
	text-decoration: none;
	color:  #ff5e14;
}
.popup:target {
  visibility: visible;
  opacity: 1;
}
.popup:target .popup-inner {
  bottom: 0;
  right: 0;
  transform: rotate(0);
}
.closepopup {
  position: absolute;
  right: 10rem;
  top: 4rem;
  width: 3rem;
  height: 3rem;
  font-size: .875rem;
  font-weight: 300;
  border-radius: 100%;
  background-color: #ff5e14;
  z-index: 4;
  color: #fff;
  line-height: 3rem;
  text-align: center;
  cursor: pointer;
  text-decoration: none;
  transition: 0.64s ease-in-out;
  transition-delay: 0.64s;
}
@media screen and (max-width: 768px) {
.popuptext p, #articles p {
  font-size: 1.5rem;
  }
  .popup-inner {
    max-width: 100%;
  }

  .popupphoto {
    width: 0%;
  }

  .popuptext {
    width: 100%;
  }
}