* {
	margin: 0;
}
html, body {
	height: 100%;
}

.Wrapper{
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto -4em;
}

/*Navigation menus*/

/*STYLE FOR ARTICLES INDEX*/
/*changes from here!!!*/
/*NEW CLASS HIDE + PSEUDO CLASSES; THIS IS FOR THE BUTTON THAT HIDES THE LEFT HAND MENU/ TABLE OF CONTENTS*/
.hide{
    margin-top:7%;
    margin-left:86%;
    position:fixed;
    height:25px;
    display:block;
    color: #0020FF;
    background-color: #c9c9c9;
    border: none;
    z-index:3;
}
.hide:hover{
    color: #c9c9c9;
    background-color: #0020FF;
}
.hide:active{
    color: #c9c9c9;
    background-color: #0020FF;
}
/*CLASS LEFT HAS BEEN CHANNGED*/
.Left {
	backface-visibility:hidden;
    -webkit-backface-visibility: hidden;
	position:fixed;
	margin-top:67px;
	margin-left:-87%;
	width:90%;	
	height:80%;
    overflow: hidden;/*THIS HAS BEEN ADDED*/
	z-index:2;
    background:url(Images/ArticlesL.svg)  no-repeat right scroll;
    background-color:#FFFFFF; /*THE TRANSITIONS HAVE BEEN ERASED*/
}
/*Left:hover, Left:focus - HAVE CHANGED - THE TRANSITION RULE HAS BEED ERASED; BACKGROUND RULES HAVE BEEN ADDED*/
.Left:hover{
      background:url(Images/ArticlesL-hover.svg)  no-repeat right scroll;
      background-color:#FFFFFF;
}
.Left:focus{
      background:url(Images/ArticlesL-hover.svg)  no-repeat right scroll;
      background-color:#FFFFFF;
}
/*Left ul - has changed, new display rules with vendor  prefixes have been added*/
 

 .Left ul {
    width: 90%;
    height: 90%; 
    margin-left:2%;
    margin-right: 1%;
}
.Left li {
    display: block;
    float: left;
    margin: 1em;
    width: 10em;
    height: 7em;
    border-top: 1px solid #0020FF;
}

/*
.Left ul {
    display: -moz-box;        
    display: -ms-flexbox;      
    display: -webkit-inline-box; 
   -webkit-box-orient: horizontal;
    display:flex;
    flex-flow: row wrap;
    width: 90%;
    height: 90%;
    overflow: auto;
    margin-left:2%;
    margin-right: 1%;
}

.Left li {
    list-style:none;
    width:10em;
    margin:1em;
    border-top: 1px solid #0020FF;
}*/

.Left a {
	text-decoration:none;
    text-transform: uppercase;
	font-family:'Open Sans', sans-serif;
    font-size: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: 1.2em;
	line-height: 1.2em;
	color:#0020FF;
	background-color:none;
}

.Left a:hover{
	color:#B50200;
	transform: translateY(0.4em);
}
/* STYLE FOR INDIVIDUAL ARTICLE SECTION LIST*/
/*Changes from here!!!!!*/
/*NEW CLASS RULES hide2 + hide2:hover and :focus have been added*/
.hide2{
    margin-top:7%;
    margin-left:92%;
    position:fixed;
    height:25px;
    display:block;
    color: #0020FF;
    background-color: #c9c9c9;
    border: none;
    z-index:99;
}
.hide2:hover{
    color: #c9c9c9;
    background-color: #0020FF;
}
.hide2:focus{
    color: #c9c9c9;
    background-color: #0020FF;
}
/*Article_sections_Wrapper - transitions have been removed; margin left has been altered*/
.Article_Sections_Wrapper{
	display:block;
	margin-top:61px;
	height:80%;
	position:fixed;
	width:40%;
	margin-left:95%;
	background:url(Images/a-sections.svg) no-repeat left scroll;
	z-index:4;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
	backface-visibility:hidden;
	background-color:#FFFFFF;
}
/*Article_sections_Wrapper:hover - transformed has been removed; background rules have been added*/
.Article_Sections_Wrapper:hover{
    background:url(Images/a-sections-hover.svg) no-repeat left scroll;
    background-color:#fff;
}
/*Article_Sections: new web prefixes added display:-moz-box etc*/
.Article_Sections{
	display: -moz-box;        
    display: -ms-flexbox;      
    display: -webkit-inline-box; 
    display:flex;
	margin-top:7%;
	margin-left:15%;
}

/*Article_Sections ul: overflow:auto has been added*/
.Article_Sections ul{
	margin-left:-10%;
	overflow:auto;
	padding-bottom:3em;
}
/*Article_Sections li - max-width:70% has been changes (was 80%)*/
.Article_Sections ul li{
	margin-top:1%;
	padding:0.5em;
	list-style:none;
	max-width:70%;
}
/*Changes for the right navigation menu end here!!!*/

.Article_Sections ul li a {
    font-family:'Open Sans', sans-serif;
	text-decoration:none;
	text-transform:uppercase;
	text-align:right;
	font-size: 14px;
	font-weight:300;
	line-height: 1.2em;
	color:#0020FF;
}
.Article_Sections a:hover{
	color:#B50200;
}


/* Footer Navigation pages*/

.Bottom_Nav{
	height: 4em;
	font-family: 'Open Sans', sans-serif;
	font-size:0.7em;
	font-weight:800;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility:hidden;
	
}
.Wrapper_Prev{
	float:left;
	width:50%;
	position:fixed;
	margin-left:-200px;
	backface-visibility:hidden;
	z-index:2;
	-webkit-transition: 1s ease-in-out; 
	-moz-transition: 1s ease-in-out; 
	-o-transition: 1s ease-in-out; 
	transition: 1s ease-in-out;
}
/*New Changes here!!!!*/
/*Wrapper_Prev - vendor prefixes have been added */
.Wrapper_Prev:hover{
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    -o-transform: translateX(50%);
	transform: translateX(50%);
}
/*Prev vendor prefixes have been added */
.Prev{
    display: -moz-box;        
    display: -ms-flexbox;      
    display: -webkit-inline-box; 
	display: inline-flex;
	flex-flow: row wrap;
    flex-align: center;
	margin-left:20px;
}
/*end changes for prev buttons*/
.Prev a{
	width:350px;
	max-height:50px;
	position:absolute;
	text-decoration:none;
	text-align:right;
	color:#0020FF;
    background-color: #FFFFFF;
}
.Prev a:hover{
	color:#B50200;
}
.Prev img{
	display:block;
	margin-left:25px;
	float:right;
	width:153px;
	height:50px;
	background: url("Images/Button_PrevSect.jpg") no-repeat top scroll;
	background-size:100%;
}

.Prev img:hover{
        background-color: #FFFFFF;
	background: url("Images/Button_PrevSect_Hover.png") no-repeat top scroll;
}

.Wrapper_Next{
	float:right;
	width:350px;
	position:fixed;
	backface-visibility:visible;
	right: 120px;
	/*margin-left:90%;*/
	-webkit-transition: 1s ease-in-out; 
	-moz-transition: 1s ease-in-out; 
	-o-transition: 1s ease-in-out; 
	transition: 1s ease-in-out;
}
/*Changes HERE!!!
    wrapper_Next, .Next vendor prefixes have been added */
.Wrapper_Next:hover{
    -webkit-transform:  translateX(-70%);
    -o-transform:  translateX(-70%);
    -moz-transform:  translateX(-70%);
	transform: translateX(-70%);
}
.Next{
    display: -moz-box;        
    display: -ms-flexbox;      
    display: -webkit-inline-box; 
	display: inline-flex;
    flex-flow: row wrap;
    flex-align: center;
	width:50%;
    background-color: #FFFFFF;
}
/*Navigation  changes end here!!!!*/
.Next a{
	max-width:350px;
	position:absolute;
	text-decoration:none;
	max-height:50px;
	color:#0020FF;
    background-color: #FFFFFF;
}
.Next a:hover{
	color:#B50200;
    background-color: #FFFFFF;
}
.Next img{
	float:left;
	display:block;
	width:153px;
	height:50px;
	background: url("Images/Button_NextSect.png") no-repeat top scroll;
	background-size:100%;
}
.Next img:hover{
	background: url("Images/Button_NextSect_Hover.png") no-repeat top scroll;
}
/*Headers and titles*/
.logo{
	width:195px;
	height:60px;
	position:fixed;
	display:block;
	z-index:100;
    background-color: #FFFFFF;
    backface-visibility:hidden;
}

#Article-Title {
	margin-top:-10px;
    margin-left:85%;
    position:fixed;
    float:right;
	padding:2px;
    display:block;
    visibility:hidden;
	background-color:#FFFFFF;
	z-index:4;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
    font-weight: 800;
    text-transform: uppercase;
	max-width:300px;
	color:#555555;
    backface-visibility:hidden;
}
#Article-Title2 {
	margin-top:2px;
    margin-left:85%;
    position:fixed;
    float:right;
	padding:2px;
    display:block;
    visibility:visible;
	background-color:#FFFFFF;
	z-index:4;
	font-family: 'Open Sans', sans-serif;
	font-size:14px;
    font-weight: 800;
    text-transform: uppercase;
	max-width:300px;
	color:#555555;
    backface-visibility:hidden;
}

/* Article style*/

.Drawing_on_Paper{
	margin-left:25%;
	width:70%;
	height:auto;
	position:absolute;
	font-family:'Open Sans', sans-serif;
}

.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:20px;	
    color:#555555;
}
.Section_title {
    margin-top:20px;
	max-width:70%;
	font-size:2em;
	font-weight:800;
	text-transform:uppercase;
	padding-bottom:10px;
}

.p-col-1{
	margin-top:40px;
	width:60%;
	line-height:1.5;
	hyphens: auto;
}

.Image-Style-1{
text-align:left;
padding:1em 0em 1em 0em;
margin-top: 20px;
margin-bottom: 20px;
}

.Figure_title {
    max-width: 60%;
    font-family: 'Open Sans' sans-serif;
    font-size: 0.8em;
    color:#555555;
}

.ImageH{
    padding-top: 10px;
    margin-left: -5%;
}
.Notes{
    font-size: 0.8em;
}
.push{
    display: block;
    width: 100%;
    height: 40px;
}
.push2{
    display: block;
    width: 100%;
    height: 100px;
}

.References{
margin-top:6em;
position:relative;
font-size: 0.85em;
margin-left:20em;
width:35em;
}

.p-ref {
padding-bottom: 1em;
}

.Strike {
    text-decoration: line-through;
    font-family:Arial, Helvetica, sans-serif;
}

.Video_Insert{
    margin-left: 0%;
    padding-top: 20px;
}
.Video_title{
    max-width: 60%;
    font-family: 'Open Sans' sans-serif;
    font-size: 0.8em;
    color:#555555;
}

#Text_For_SETZUNG {
font-family: Arial, Helvetica, sans-serif;
max-width: 80%;
}

/*PANZOOM*/
.parent{
z-index:0;
height:560px;
width:90%;
float:left;
margin-left: 60px;
margin-right:50px;	
overflow:hidden;
backface-visibility:hidden;
margin-bottom:2%;
}
.panzoom{
backface-visibility:hidden;
cursor:move;
transform:none;
transform-origin: 50% 50% 0px;
}
.Buttons{
position:absolute;
margin-top:45%;
margin-left:40%;
z-index:6;
font-weight: 800;

}
.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(88, 88, 88, 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(88, 88, 88, 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(88, 88, 88, 0.83);
border:none;
 -webkit-border-radius: 60px; 
  -moz-border-radius: 60px; 
  border-radius: 60px; 
}


@media (min-width:768px) and (max-width:980px) {
    .logo{
      width: 100%;
    z-index: 40;
}
/*changes from here!!!*/

.hide{
    margin-top: 10%;
    margin-left: 86%;
}
    .Left {
        margin-left:-84%;
	    width:90%;	
	    height:80%;
    }
     .Left ul{
        margin-left: 2%;
        width: 90%;
        height: 90%;
}

    .hide2{
    margin-top:10%;
    margin-left:90%;
    position:fixed;
    height:25px;
    display:block;
    color: #0020FF;
    background-color: #c9c9c9;
    border: none;
    z-index:99;
}
/*To here*/

    .Article_Sections_Wrapper {
        width: 70%;
        margin-left: 94%;
    }  
    .Bottom_Nav{
	background-color: #FFFFFF;
}
    .Wrapper_Prev{
	    float:left;
	    width:50%;
	    position:fixed;
	    margin-left:2px;
	    backface-visibility:hidden;
	    z-index:2;
	    -webkit-transition: 1s ease-in-out; 
	    -moz-transition: 1s ease-in-out; 
	    -o-transition: 1s ease-in-out; 
	    transition: 1s ease-in-out;
    }
    .Wrapper_Prev:hover{
	    transform: translateX(0%);
    }


    .Wrapper_Next{
	    float:right;
	    width:350px;
	    position:fixed;
	    backface-visibility:visible;
	    margin-left:50%;
	    -webkit-transition: 1s ease-in-out; 
	    -moz-transition: 1s ease-in-out; 
	    -o-transition: 1s ease-in-out; 
	    transition: 1s ease-in-out;
    }
    .Wrapper_Next:hover{
	    transform: translateX(0%);
    }
    #Article-Title{
    margin-left: 75%;
    z-index: 99;
    }
    #Article-Title2{
    margin-left: 75%;
     z-index: 99;
    }
    .Drawing_on_Paper{
	margin-left:15%;
    }
    .Title{
	    font-size:1.8em;
        padding-top: 61px;
    }
    .Section_title {
	    max-width:60%;
	    font-size:1.4em;
        padding-top: 61px;
    }

    .p-col-1{
	    font-size: 0.9em;
	    width:80%;
    }
    .References{
    margin-left:4%;
    width: 90%;
    }
    /*PANZOOM*/
    .parent{
    z-index:0;
    height:90%;
    width:90%;
    float:left;
    margin-left:1%;
    }
    .Buttons{
    margin-top:3%;
    margin-left:60%;
    }  
    .Drawing_on_Paper img{
	width: 90%;
    height: 90%;
    }
}

@media (min-width:481px) and (max-width:767px){
    .logo{
      width: 100%;
     z-index: 40;
}
/*Changes from here*/
    .hide{
    margin-top: 12.5%;
    
}
    .Left {
        width: 90%;
        height: 90%;
        margin-left:-83%;
    }
    .Left ul{
        margin-left: 3%;
        margin-right: 6%;
        width: 90%;
        height: 90%;
}
    .Left li{
    max-width: 150px;
}
    .Left a{
    font-size: 0.9em;
}
/*To Here!!!*/
       .Article_Sections_Wrapper {
       visibility: collapse;
    }  
    .Bottom_Nav{
	background-color: #FFFFFF;
}
     .Wrapper_Prev{
	    float:left;
	    width:30%;
	    position:fixed;
	    left: 3px;
	    backface-visibility:visible;
    }
    .Wrapper_Prev:hover{
	    transform: translateX(0%);
    }
  
    .Wrapper_Next{
	    float:right;
	    width:30%;
	    position:fixed;
	    backface-visibility:visible;
	    margin-left:70%;
	    -webkit-transition: 1s ease-in-out; 
	    -moz-transition: 1s ease-in-out; 
	    -o-transition: 1s ease-in-out; 
	    transition: 1s ease-in-out;
    }
    .Wrapper_Next:hover{
	    transform: translateX(0%);
    }
     #Article-Title{
    visibility: hidden;
    display: none;
    }
    #Article-Title2{
        visibility: hidden;
        display: none;
    }
    #Article-Title span{
visibility: hidden;
    }
 #Article-Title2 span{
visibility: hidden;
    }
    .Drawing_on_Paper{
	margin-left:15%;
    padding-bottom: 60px;
    }
    .Title{
	    font-size:1em;
        padding-top: 61px;
    }
    .Section_title {
	    max-width:60%;
	    font-size:1em;
        padding-top: 61px;
    }

    .p-col-1{
	    font-size: 0.8em;
	    width:80%;
    }
    .References{
    margin-left:4%;
    width: 90%;
    }
    .Drawing_on_Paper img{
	width: 90%;
    height: 90%;
    }
    
}
@media (min-width:320px) and (max-width:480px) {
    
    .logo{
      width: 100%;
    z-index: 40;
}
    #Left {
        visibility: collapse;
    }

    #Article_Sections_Wrapper {
       visibility: collapse;
    }  
    .Bottom_Nav{
	background-color: #FFFFFF;
}
    .Wrapper_Prev{
	    float:left;
	    width:30%;
        margin-top: -50px;
	    position:fixed;
	    margin-left:-10px;
	    backface-visibility:hidden;
	    z-index:2;
	    -webkit-transition: 1s ease-in-out; 
	    -moz-transition: 1s ease-in-out; 
	    -o-transition: 1s ease-in-out; 
	    transition: 1s ease-in-out;
    }
    .Wrapper_Prev:hover{
	    transform: translateX(0%);
    }


    .Wrapper_Next{
	    float:right;
	    width:90%;
	    position:fixed;
	    backface-visibility:visible;
	    margin-left:1%;
	    -webkit-transition: 1s ease-in-out; 
	    -moz-transition: 1s ease-in-out; 
	    -o-transition: 1s ease-in-out; 
	    transition: 1s ease-in-out;
    }
    .Wrapper_Next:hover{
	    transform: translateX(0%);
    }
    #Article-Title{
    display: none;
    }
    #Article-Title2{
   display: none;
    }
    .Drawing_on_Paper{
	margin-left:15%;
    padding-bottom: 60px;
    }
    .Title{
	    font-size:1em;
        padding-top: 61px;
    }
    .Section_title {
	    max-width:60%;
	    font-size:1em;
        padding-top: 61px;
    }

    .p-col-1{
	    font-size: 0.8em;
	    width:80%;
    }
    .References{
    margin-left:4%;
    width: 90%;
    }
    /*PANZOOM*/
    .parent{
    z-index:0;
    height:90%;
    width:90%;
    float:left;
    margin-left:1%;
    }
    .Buttons{
    margin-top:3%;
    margin-left:60%;
    }  
    .Drawing_on_Paper img{
	width: 90%;
    height: 90%;
    }
}