body { font-family: 'Montserrat', helvetica, sans-serif; }

.main { margin-top: 130px; position: relative; }
.main .text, .container .text {
	font-family: 'Montserrat', helvetica, sans-serif;
	font-size: 18px;
	color: #575756;
	/*padding: 0 120px;*/
}
#scene {
	width: 1110px;
	height: 624px;
	position: absolute;
	/*opacity: 0;*/
	top: -3000px;
	z-index: 10;
}
#scene .img {
	display: block;
	width: 100%;
	height: 100%;
	background: url('/medias/img/drone_dreda_720p.jpg');
	background-size: contain;
}
#scene2 { width: 1110px; height: 624px; background: url('test_drone_DREDA_720p.jpg'); background-size: contain; }
#vid { box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin-bottom: 30px; }
.interactive-image { font-family: 'Montserrat', helvetica, sans-serif; }
.interactive-image .item { z-index: 200; }
.interactive-image .item:before, .interactive-image .item:after { border: none; }
.interactive-image .itemMatterport .text-item { max-width: 900px; padding: 10px; }
.interactive-image .text-item .description { font-size: 0; }
.interactive-image .text-item .title { font-variant: initial; font-size: 18px; }
.interactive-image .text-item iframe { width: 880px; height: 500px; }

.hotspot { display: block !important; }
.interactive-image .hotspot {
	background-color: #FFFFFF;
	border: 4px solid #E6007E;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}
.interactive-image .hotspot:hover {
	background-color: #E6007E;
	border-color: #FFFFFF;
}
.interactive-image .hotspot:before { content: ""; }
.interactive-image .close-button {
	color: #575756;
	width: 25px;
	height: 25px;
	top: 15px;
	right: 15px;
	font-size: 24px;
}
.label {
	position: absolute;
	font-size: 18px;
	font-weight: bold;
	z-index: 100;
	/*opacity: 0;*/
	/*text-shadow: 2px 2px 5px rgba(0, 0, 0, .6);*/
	/*animation: .5s ease-in-out 1s forwards fadeIn;*/
	color: #FFFFFF; /* #E6007E*/
	padding: 3px 7px;
	background-color: rgba(230, 0, 126, .7);
	border-radius: 4px;
	cursor: pointer;
}
@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

h1 { font-size: 24px; text-transform: uppercase; font-weight: bold; color: #E6007E; }
h4 { font-size: 16px; margin-bottom: 30px; }
.readMore { font-size: 14px; text-align: center; text-decoration: none; }

@media screen and (max-width: 767.98px) {
	h1 { margin-top: 160px; }
	.main { margin-top: 120px; }
	.main .text { font-size: 16px; padding: 0 15px; }
	#vid { margin-bottom: 30px; }
	.accordionTitle { font-size: 16px; font-weight: 700; font-style: italic; text-align: center; padding: 0 30px; margin-bottom: 15px; }
	#accordionVisite { margin-bottom: 15px; }
	#accordionVisite .btn { color: #575756; }
	#accordionVisite .card-body { padding: 0; }
	#accordionVisite .accordionText { padding: 15px 15px 0; font-size: 16px; color: #575756; }
	#accordionVisite .iframeWrapper {
		position: relative;
		overflow: hidden;
		width: 100%;
		padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
	}
	#accordionVisite .view {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		height: 100%;
	}
	#accordionVisite .card { border: none; }
	#accordionVisite .card-header {
		border: none;
		border-bottom: 1px solid #e8e3e3;
		border-radius: 0;
		background: rgb(247,243,243);
		background: -moz-linear-gradient(0deg, rgba(247,243,243,1) 0%, rgba(249,249,249,1) 100%);
		background: -webkit-linear-gradient(0deg, rgba(247,243,243,1) 0%, rgba(249,249,249,1) 100%);
		background: linear-gradient(0deg, rgba(247,243,243,1) 0%, rgba(249,249,249,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#f7f3f3",endColorstr="#f9f9f9",GradientType=1);
	}
	#accordionVisite h5 { color: #575756; }
	#accordionVisite button { width: 100%; text-align: left; padding-left: 15px; padding-right: 30px; }
	#accordionVisite button:before {
		font-family: 'Line Awesome Free';
		font-weight: 900;
		content: "\f041";
		position: absolute;
		left: 15px;
	}
	#accordionVisite button:after {
		font-family: 'Line Awesome Free';
		font-weight: 900;
		content: "\f107";
		float: right;
		position: absolute;
		right: 15px;
		top: 15px;
	}
	#accordionVisite button.collapsed:after {
		content: "\f105"; 
	}
}

@media screen and (min-width: 768px) and (max-width: 1199.98px) {
	h1 { margin-top: 150px; }
	.main { margin-top: 120px; }
	.main .text { font-size: 16px; padding: 0; }
	#scene {
		width: 690px;
		height: 388px;
		left: 50%;
		transform: translateX(-50%);
	}
	#vid { width: 690px !important; position: absolute; left: 50%; transform: translateX(-50%); }
	#sceneWrapper { height: 388px; position: relative; margin-bottom: 30px; }
	.label { font-size: 15px; }
	.interactive-image .text-item iframe { width: 600px; height: 290px; }
}
@media screen and (min-width: 811px) and (max-width: 1199.98px) {
	h1 { padding: 0 120px; }
}