div.trav{
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 20px;
width: 100%;
align-items: center;
}

div.trav > h3{
 font-size: 40px;
 color: #A66EFF;
}

div.soutra{
position: relative;
text-align: left;
width: 50%;
height: auto;
border:solid 4px;
border-color:#444444;
overflow:hidden; 
}

div.midtra{
display: flex;
flex-direction: row;
justify-content: center;
}

div.soutra > h3{
 position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  z-index: 1;
  color:white;
  font-size: 35px;
  text-decoration: overline;
  text-shadow: #000000 1px 0 10px;
}

div.soutra > h3:hover{
color:#A66EFF;
cursor: pointer;
}


div.soutra > img {
width: 100%;
height:100%;
-moz-transition: all 1s ease-in-out 0s;
-webkit-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
-ms-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;
}

div.soutra > img:hover{
-webkit-transform:scale(1.3); 
-moz-transform:scale(1.3); 
-ms-transform:scale(1.3); 
-o-transform:scale(1.3); 
transform:scale(1.3);
cursor: pointer;
}

div.zoom{
display:none;
flex-direction: column;
align-items: center;
position: absolute;
width: 100%;
height: auto;
min-height: 1100px;
background-color: rgba(0,0,0,0.7);
top:0%;
z-index: 3;
}

div.zoom > img{
margin-top: 0px;
max-height:300px;
max-width:450px;
border:solid 3px;
border-color: black;
float: left;
}

div.zoom >h3{
font-size: 25px;
color:white;
align-self: flex-start;
margin-left: 10%;
}

div.zoom > h3.titra{
font-size: 40px;
color: white;
align-self: center;
margin-left: 0px;
}

div.zoom > p{
margin-right: 10%;
margin-left: 10%;
color:white;
text-align: justify;
}

#return1, #return2, #return3, #return4{
align-self: flex-start;
margin-left:10%;
padding: 10px 20px;
background-color: white;
color: black;
border:solid 2px;
transition: all 0.5s ease-in-out;
}

#return1:hover, #return2:hover, #return3:hover, #return4:hover{
color: #C107DE;
cursor: pointer;
}


