/*Article style*/



.quartet {
    margin-top: 0px;
	margin-left:30%;
	width:70%;
	height:auto;
	position:absolute;
	font-family: 'PT Sans', sans-serif;
    margin-bottom: 100px;
}

.Title{
	margin-top:20px;
	max-width:70%;
	font-size:2.4em;
	font-weight:800;
	text-transform:uppercase;
	padding-bottom:10px;
}
.Author{
	display:inline;
	text-align:right;
	font-weight:800;
	padding-bottom:30px;	
    color:#555555;
}


.parent{
margin-top: 100px;
margin-bottom: 30px;
z-index:0;
height:600px;
width:auto;
float:left;
overflow:hidden;
backface-visibility:hidden;
border:solid 1em #000000;
background-color:#65B7E9;
}
.panzoom{
backface-visibility:hidden;
cursor:move;
transform-origin: 50% 50% 0px;
}
.Buttons{
position:absolute;
margin-top:20px;
/*margin-top:19%;
margin-left:60%;*/
z-index:6;
}
.zoom-in{
margin-left:5px;
float:left;
display:inline-block;
width:50px;
height:50px;
text-align:center;
color:#FFFFFF;
padding: 0.5em;
cursor:pointer;
background-color:rgba(25, 22, 70, 0.83);
border:none;
 -webkit-border-radius: 60px; 
  -moz-border-radius: 60px; 
  border-radius: 60px; 

}
.zoom-out{
margin-left:5px;
float:left;
display:inline-block;
width:50px;
height:50px;
text-align:center;
color:#FFFFFF;
padding: 0.5em;
cursor:pointer;
background-color:rgba(25, 22, 70, 0.83);
border:none;
 -webkit-border-radius: 60px; 
  -moz-border-radius: 60px; 
  border-radius: 60px; 
}
	
.reset{
    margin-left:5px;
    float:left;
    display:inline-block;
    width:70px;
    height:50px;
    text-align:center;
    color:#FFFFFF;
    padding: 0.5em;
    cursor:pointer;
    background-color:rgba(25, 22, 70, 0.83);
    border:none;
     -webkit-border-radius: 60px; 
      -moz-border-radius: 60px; 
      border-radius: 60px; 
}

.push2{
    display: block;
    width: 100%;
    height: 100px;
}

@media (min-width:768px) and (max-width:980px) {
  
    .quartet{
	margin-left:15%;
    }
    .Title{
	    font-size:1.8em;
        padding-top: 61px;
    }
    /*PANZOOM*/
    .parent{
    z-index:0;
    height:90%;
    width:90%;
    float:left;
    margin-left:1%;
    }
    .Buttons{
    margin-top:20px;
    }  
    .quartet img{
	width: auto;
    }
}

@media (min-width:481px) and (max-width:767px){
 
    .quartet{
	margin-left:15%;
    padding-bottom: 60px;
    }
    .Title{
	    font-size:1em;
        padding-top: 61px;
    }
   
    /*PANZOOM*/
    .parent{
    z-index:0;
    height:90%;
    width:90%;
    float:left;
    margin-left:1%;
    }
    .Buttons{
    margin-top:20px;
    }  
    .quartet img{
	width: auto;
    }
    
}
@media (min-width:320px) and (max-width:480px) {


    .quartet{
	margin-left:15%;
    padding-bottom: 60px;
    font-size:0.9em;
    }
    .Title{
	    font-size:0.9em;
        padding-top: 61px;
    }

    /*PANZOOM*/
    .parent{
    z-index:0;
    height:90%;
    width:90%;
    float:left;
    margin-left:1%;
    }
    .Buttons{
    margin-top:20px;
    }  
    .quartet img{
	width: auto;
    }
}