@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

body {
margin: 0;
padding: 0;
font-family: 'PT Serif', Georgia, "Times New Roman", Times, serif;
    
	font-size: 1em;
}

.wrapper {
margin: 0 auto;
width: 738px;


height: 890px;
background: #f6eaea;
position: relative;
overflow: hidden;

}
.window {
display: block;
width: 70%;
padding: 20px;
float: left;
margin-left: 2%;
margin-top: 8%;
font-size: 1.5em;
color: #a42d2e;
border-radius: 10px;
background: #fff;
overflow: hidden;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
position: relative;
-webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
  cursor: pointer;
  


}
.window:nth-of-type(2n) {
	float: right;
	margin-right: 20px;
	
}



h2 {
font-size: 120%;
text-align: left; 


color: #a42d2e;
width: 100%;
clear: both;
padding-top: 30px;
padding-left: 30px;
}

.answer {
position: absolute;
left: 4px;
display: none;
-webkit-transition: all 1s ease;  
  -moz-transition: all 1s ease;  
  -o-transition: all 1s ease;  
  -ms-transition: all 1s ease;  
  transition: all 1s ease;
 width: 730px;
 top: 40px;
  
  
}

.show {
	display: block;
}



.answer h2 {
	font-size: 120%;
	margin-top: 50px;
}



.next {

cursor: pointer;
filter: drop-shadow(5px 4px 3px #666666);
}
.back {
	
filter: drop-shadow(5px 4px 3px #666666);
border-radius: 0;
background: transparent; 
border: none;
width: 64px; 
padding-top: 20px;
float: right;
padding-right: 50px;
cursor: pointer;
}


.left-1 {
	transform: translateX(-115%);
}

.top-1 {
	transform: translateX(120%);
}

.bottom-1 {
	transform: translateY(120%);
}
.left-2 {
	transform: translateX(-115%);
}
.right-1 {
	transform: translate(-115%, 115%);
}

.side-1 {
	transform: translateX(115%);
	
}
.side-2 {
	transform: translateX(115%);
	
}

.right-2 {
	transform: translate(115%, 115%);
}

.center-1 {
	transform: translateX(-115%);
}

.zag {
	transform: scale(0);
}



.bubble 
{
position: relative;
width: 500px;
height: auto;
padding: 10px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-left: 125px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}


.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 25px;

}

 img {
	border-radius: 50%;
	width: 100px;
	float: left;
	border: 2px solid #a42d2e;
	background: white;
}

.pic {
	border-radius: 50%;
	width: 100px;
	height: 100px;
	float: left;
	border: 2px solid #a42d2e;
	background: white;
	text-align: center;
	font-size: 300%;
	color: #a42d2e;
	line-height: 90px;
}
.right {
	float: right;
	margin-right: 50px;
}

.speech {
	opacity: 0;
	margin-left: 30px;
	margin-bottom: 30px;
	animation: mymove 2s;
  animation-fill-mode: forwards;
  animation-delay: 1s;
	
}
.second {
	animation-delay: 5s;
}
.third {
	animation-delay: 10s;
}
.fourth {
	animation-delay: 15s;
}
.fifth {
	animation-delay: 20s;
}

.sixth {
	animation-delay: 25s;
}

@keyframes mymove {
  0% {
        opacity: 0;
        
    }
	
	100% {
        opacity: 1;
        
    }
}

.bubble-1 
{
position: relative;
width: 500px;
height: auto;
padding: 10px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.bubble-1:after
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
right: -15px;
top: 25px;
}

.quote {
	font-size: 90%;
	margin-left: 20px;
}