@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
  url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
  url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
  url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
  url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* makes the font 33% larger relative to the icon container */
.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  vertical-align: -15%;
}
.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-5x {
  font-size: 5em;
}

[data-device-section] [data-mouse-indicator] {
	bottom: -1px;
}

[data-device-section] #device>span.animation {
	display: block!important;
}

[data-device-section] #device>span {
	opacity: 1;
	background: url(./assets/img/device/marker.svg);
	display: none;
}

.soft-specs-device {
	max-width: 300px;
	display: block;
}

@media (max-width: 648px) {
	.roadmap-mobile-container {
	    max-width: 60vh;
	}
	.device-wrapper .gif {
		display: block;
	}
	.device-wrapper .png {
		display: none;
	}
	.device-wrapper {
		padding-top: 0;
		transform: translate(-50%, -50%) rotate(-90deg);
	    height: 160px;
	    width: 440px;
	    position: absolute;
	    left: 50%;
	    top: 160px;
	    margin: 0;
	}

	.device-wrapper img {
		width: 100%;
		height: 100%;
	}

	[data-device-section] #device div.device-wrapper img {
		height: 100%;
		width: 100%;
	}

	[data-device-section] #device>span[data-maker-scheme] {
        top: 16%;
    	right: 59%;
	}
	[data-device-section] #device>span[data-maker-panel] {
	    bottom: 60%;
    	right: 21%;
	}
	[data-device-section] #device>span[data-maker-display] {
	    bottom: 62%;
	    left: 24%;
	    right: auto;
	    top: auto;
	}
	[data-device-section] #device>span[data-marker-fingerprint] {
	    bottom: 38%;
    	right: 73%;
	    left: auto;
	    top: auto;
	}
	#device {
		height: 510px;
		margin-bottom: 150px;
	    flex: 0 0 220px;
	}
	.pulse {
		display: none;
	}
	[data-device-section] #device>span {
		box-shadow: 0 0 0 rgba(204,169,44,1);
		opacity: 1;
    	z-index: 99;
    	display: none;
	}
	[data-device-section] .device-popup {
	    min-height: 160px;
	    display: block;
	    position: absolute;
	    bottom: 20px;
	    left: 20px;
	    right: 20px;
	}
	[data-device-section] .device-popup.animate {
		opacity: 1;
	}
	[data-device-section] .device-popup [data-popup-content] p {
		font-size: 12px;
	}
	.timeline {
		display: none;
	}
	[data-device-section] #device>span {
		background: url(./assets/img/device/marker.svg);
	}
	.timeline {
		display: none;
	}
}

@media (min-width: 480px) and (max-width: 649px) {
	.roadmap {
		display: none;
	}
	.timeline {
		display: block;
	}
	.timeline .circle9 {
		width: 77px;
		height: 77px;
	}
	.timeline .circle2,
	.timeline .circle5,
	.timeline .circle8,
	.timeline .circle3 {
		width: 70px;
		height: 70px;
	}
	.timeline .circle7,
	.timeline .circle4 {
		width: 80px;
		height: 80px;
	}
	.timeline .circle10 {
		width: 90px;
		height: 90px;
	}
	.timeline .circle6 {
		top: calc(58% - 127px / 2);
	}
}

@media (min-width: 649px) and (max-width: 1200px) {
	.soft-specs-device {
		display: block;
		margin: 30px auto;
	}
	.device-wrapper .gif {
		display: block;
	}
	.device-wrapper .png {
		display: none;
	}
	.timeline {
		display: none;
	}
	.roadmap-mobile-container {
	    /*max-width: 60vh;*/
	}
	[data-device-section] #device>span {
		opacity: 1;
		background: url(./assets/img/device/marker.svg);
	}
	[data-device-section] #device {
		margin-bottom: 300px;
	}
	[data-device-section] .device-popup {
	    position: absolute;
	    bottom: 70px;
	    left: 20px;
	    right: 20px;
	}
}

@media (min-width: 1200px) {
	[data-device-section] #device>span {
		opacity: 1;
		background: url(./assets/img/device/marker.svg);
		display: none;
	}
	.device-wrapper .gif {
		display: none;
	}
	.device-wrapper .png {
		display: block;
	}
	.timeline {
		display: none;
	}
	[data-device-section] .device-popup {
		margin-top: 10px;
	}
	.device-popup .row {
	}
}
@media (min-width: 1440px){
	[data-device-section] [data-mouse-indicator] {
		display: block;
	}
}
[data-device-section] [data-mouse-indicator] {
	display: none!important;
}

@media (max-width: 414px){
	.max-width-roadmap {
		display: none;
	}
}
@media (min-width: 320px){
	.max-width-roadmap {
		display: block;
	}
}

html {

	scrollbar-face-color: transparent;
	scrollbar-base-color: transparent;
	scrollbar-3dlight-color:transparent;
	scrollbar-highlight-color:transparent;
	scrollbar-track-color: transparent;
	scrollbar-arrow-color: transparent;
	scrollbar-shadow-color: transparent;
	scrollbar-dark-shadow-color: transparent;
}
::-webkit-scrollbar { width: 8px; height: 3px;}
::-webkit-scrollbar-button {  background-color: transparent; }
::-webkit-scrollbar-track {  background-color: transparent;}
::-webkit-scrollbar-track-piece { background-color: transparent;}
::-webkit-scrollbar-thumb { height: 30px; background-color: rgba(0, 0, 0, 0.5); border-radius: 3px;}
::-webkit-scrollbar-corner { background-color: rgba(0, 0, 0, 0.5);}
::-webkit-resizer { background-color:rgba(0, 0, 0, 0.5);}
@media (min-width: 320px){
	.max-width-roadmap {
		display: block;
	}
}
@media (min-width: 1024px) and (max-width: 1366px){
	[data-device-section] #device div.device-wrapper img {
		width: 50%;
	}
	h2 {
		font-size: 25px;
		padding: 20px 0 20px 0;
	}
	.device-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.device_margin {
		padding-top: 35px;
	}
	[data-device-section] .device-popup [data-popup-content] p {
		padding: 0;
		margin-bottom: 0.5em;
		font-weight: 700;
		font-size: 13px;
	}
	.sub_h2 {
		font-size: 16px;
		text-align: center;
	}
	.device-description:nth-child(2) div.col > h2.section-heading{
		padding: 20px 0 0 0;
	}
	[data-device-section] #device>span[data-marker-fingerprint] {
		top: -6%;
		left: 35%;
	}
	[data-device-section] #device>span[data-maker-display] {
		top: 5%;
		right: 40%;
	}
	[data-device-section] #device>span[data-maker-scheme] {
		top: 36%;
		right: 33%;
	}

	[data-device-section] #device>span[data-maker-panel] {
		bottom: 6%;
		right: 50%;
	}

}