html {
  scroll-behavior: smooth;
}

body {
	width: 80%;
	margin: auto;
	font-family: arial;
	line-height: 1.7;
}

header {
	padding: 15px;
	border-bottom: 2px solid #808080;
	margin-bottom: 35px;
}

header img {
	margin-top: 15px;
	float: left;
}

main {
	margin-top: -35px;	
}

table, th, td {
	margin: auto;	
	margin-bottom: 15px;
	border: 1px solid black;
	border-collapse: collapse;
	text-align: center;
}

video {
	display: block;
	margin: auto;
	margin-bottom: 15px;
}

.languages {
	margin-bottom: 10px;
	text-align: right;
}

.languages a {
	color: #9696bf;
	font-size: 11px;
	text-decoration: none;
}

.divider {
	color: #9696bf;
}

.contacts {
	text-align: right;		
}

.contacts a, .contacts span {
	text-align: right;	
	color: #9696bf;
	font-size: 16px;
	text-decoration: none;
}

.phone-number {
	margin-bottom: -5px;
}

.email-address {
	margin-bottom: -5px;
}

.fa {
	margin-right: 5px;
}

.languages a:hover, .contacts a:hover {
	color: #42c8f3;
}

.display-none {
	display: none;
}

.img-display-none {
	float: left;
	padding-right: 20px;
	margin-bottom: 25px;
	display:none;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1s;
    animation-name: fade;
    animation-duration: 1s;
}

@keyframes fade {
    from {opacity: .2}
    to {opacity: 1}
}

.item-annotation {
	padding-top: 75px;
	padding-right: 15px;
	font-size: 20px;
}

.selected {
	background-color: #d8d8c0;
}

.item-details {
	display: flex;
	justify-content: center;
	text-align: center;
	clear: both;
	list-style-type: none;
	overflow: hidden;
}

.item-details li {
	/* display:inline-block; */
	background-color: #ebebe0;
	border: 1px solid #808080;
}

.item-details a {
	display: block;
	font-size: 18px;
	font-weight: bold;
	color: black;
	padding: 18px 18px;
	text-decoration: none;
}

.item-details a:hover {
	background-color: #d8d8c0;
}

/* AR specific content nav styling */
.ar-item-details {
	display:flex;
	justify-content: center;
	text-align:center;
	clear: both;
	list-style-type: none;
	overflow: hidden;
}

.ar-item-details li {
	background-color: #ebebe0;
	border: 1px solid #808080;
}

.ar-item-details a {
	display: block;
	font-size: 18px;
	font-weight: bold;
	color: black;
	padding: 18px 18px;
	text-decoration: none;
}

.ar-item-details a {
	padding-left: 60px;
	padding-right: 60px;
}

.ar-item-details a:hover {
	background-color: #d8d8c0;
}
/************************* END *********************************/

/* EN specific content nav styling */
.en-item-details a {
	padding-left: 40px;
	padding-right: 40px;
}
/************************* END *********************************/
.elements-table th {
	background-color: #e2efd9;
}

.elements-table td:nth-child(1) {  
    background-color: #ffff00;
}

.elements-table td:nth-child(2) {  
    background-color: #ededed;
}

.scales-table th, td {
	padding-left: 15px;
	padding-right: 15px;
}

.green-color {
	background-color: #70ad47;
}

.light-green-color {
	background-color: #a8d08d;
}

.yellow-color {
	background-color: #ffff00;
}

.orange-color {
	background-color: #ed7d31;
}

.red-color {
	background-color: #ff0000;
}

.ar-equipment th {
	font-size: 20px;
}

.en-details, .en-characteristics, .en-list {
	padding-left: 20px;
}

.media-slideshow {
	position: relative;
}

.media-img-display-none {
	margin: auto;
}

.next {
  right: 30%;
}

.prev {
	left: 30%;
}

.ar-next {
	right: 68%;
}

.ar-prev {
	left: 68%;
}

.prev:hover, .next:hover {
	background-color: #404040;
}

.prev, .next {
	top: 30%;
	cursor: pointer;
	position: absolute;
	padding: 16px;
	width: auto;
	color: black;
	font-weight: bold;
	font-size: 18px;
	transition: 0.6s ease;
	border-radius: 0 3px 3px 0; 
	user-select: none;
}

.dots {
	margin-top: 25px;
	text-align:center;
}

.dot {
    margin: 0 5px;
    cursor: pointer;
    height: 15px;
    width: 15px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

#equipment table {
	width: 65%;
}

#ar-equipment table {
	width: 60%;
}

#details, #characteristics, #list {
	width: 68%;
	margin: auto;
}

#ar-details, #ar-characteristics, #ar-list {
	width: 60%;
	margin: auto;
}

#details p, #characteristics p, #ar-details p, #ar-characteristics p {
	margin-bottom: 5px;
}

#details ul, #characteristics ol, #ar-details ul, #ar-characteristics ol {
	margin-top: 0px;
}

/*** Zooming in and out of images ***/

input[type=checkbox] {
  display: none;
}

.media-slideshow img {
  transition: transform 0.25s ease;
  cursor: zoom-in;
}

input[type=checkbox]:checked ~ label img {
  transform: scale(1.5);
  cursor: zoom-out;
}


/************************************* MEDIA QUERIES *************************************/


@media (max-width: 1750px) {
	#details, #characteristics, #list {	
		width: 75%;
	}
	
	#ar-details, #ar-characteristics, #ar-list {
		width: 68%;
	}
}

@media (max-width: 1450px) {
	.item-annotation {
		font-size: 18px;
	}
	
	.item-details a {
		font-size: 16px;
    }
    
	#details, #characteristics, #list {	
		width: 80%;
		font-size: 14px;
	}
	
	.next {
		right: 25%;
	}
	
	.prev {
		left: 25%;
	}
	
	.ar-next {
		right: 70%;
	}
	
	.ar-prev {
		left: 70%;
	}
}

@media (max-width: 1319px)  {
	.ar-item-details {
		display: block;
	}
	
	.ar-item-details li {
		display:inline-block;

	}
	
	.ar-item-details li:last-child {
		border-top: none;
	}
	
	.ar-item-details li:last-child {
		border-top: none;
	}
	
	.next {
		right: 20%;
	}
	
	.prev {
		left: 20%;
	}
	
	.ar-next {
		right: 75%;
	}
	
	.ar-prev {
		left: 75%;
	}
	
}

@media (max-width: 1295px)  {
	.item-details {
		display: block;
	}
	
	.item-details li {
		display: inline-block;
	}
	
	.item-details li:last-child {
		border-top: none;
	}
	
	.en-item-details li:last-child {
		border-top: 1px solid #808080;
	}
}

@media (max-width: 1283px)  {
	.en-item-details li:last-child {
		border-top: none;
	}
}

@media (max-width: 1112px)  {
	.item-details li:nth-last-child(2) {
		border-top: none;
	}
	
	.next {
		right: 15%;
	}
	
	.prev {
		left: 15%;
	}
	
	.ar-next {
		right: 80%;
	}
	
	.ar-prev {
		left: 80%;
	}
}

@media (max-width: 1070px)  {
	.ar-item-details li:nth-last-child(2) {
		border-top: none;
	}
}

@media (max-width: 923px)  {
	.item-details li {
		display: block;
	}
	
	.item-details li:nth-child(2) {
		border-top: none;
		border-bottom: none;
	}
	
	.next {
		right: 10%;
	}
	
	.prev {
		left: 10%;
	}
	
	.ar-next {
		right: 85%;
	}
	
	.ar-prev {
		left: 85%;
	}
}

@media (max-width: 788px)  {
	.media-slideshow img {
		height: auto; 
		width: auto; 
		max-width: 500px; 
		max-height: 500px;
	}
	
	.img-display-none {
		float: none;
		margin: auto;
	}
	
	.item-annotation {
		padding-top: 0px;
	}
}

@media (max-width: 757px)  {
	.ar-item-details li {
		display: block;
	}
	
	.ar-item-details li:nth-child(2) {
		border-top: none;
		border-bottom: none;
	}
}


@media (max-width: 641px)  {
	.img-display-none {
		height: auto; 
		width: auto; 
		max-width: 250px; 
		max-height: 250px;
	}
	
	.next {
		top: 15%;
		right: -5%;
	}
	
	.prev {
		top: 15%;
		left: -5%;
	}
	
	.ar-next {
		right: 95%;
	}
	
	.ar-prev {
		left: 95%;
	}
	
	.media-slideshow img {
		height: auto; 
		width: auto; 
		max-width: 300px; 
		max-height: 300px;
	}
	
	.dot {
		height: 10px;
		width: 10px;	 
	}
	
	video {
		margin-top: 30px;
		height: auto; 
		width: auto; 
		max-width: 300px; 
		max-height: 300px;
	}
}

@media (max-width: 452px)  {
	header img {
		float: none;
		display: block;
		margin: auto;
	}
	
	.languages {
		margin-top: 10px;
		text-align: center;
	}
	
	.contacts {
		text-align: center;
	}
	
	.contacts a, .contacts span {
		font-size: 12px;
	}
	
	.item-details {
		margin-right: 40px;
	}
	
	.ar-item-details {
		margin-left: 45px;
	}
}