﻿
@media screen and (min-width: 0px) and (max-width: 1700px) { /*1600*/
	.config { padding-top: 20px; min-height: 750px; }
	.config .wrap-auto { margin-top: -50px; }
	.config .wrapper { min-height: 750px; }
	.config .panel-left { top: 100px; }
	.config .panel-right { top: 40px; }
}

@media screen and (min-width: 0px) and (max-width: 1599px) { /*1440*/
	.other .wrapper { padding: 0px 20px; }
}

@media screen and (min-width: 0px) and (max-width: 1439px) { /*1366*/
	.config .panel-left .logo img { height: 35px; }
	.config .wrap-auto img, .config .wrap-auto canvas { max-width:800px;}
	.config .panel-right .box #wrap-preventivo { max-height:160px;}
}

@media screen and (min-width: 0px) and (max-width: 1365px) { /*1280*/

}

@media screen and (min-width: 0px) and (max-width: 1279px) { /*1024*/

	::-webkit-scrollbar-track { display:none; }
	::-webkit-scrollbar { display: none; }
	::-webkit-scrollbar-thumb { display: none; }
	
	.config ul.navigation { white-space:nowrap; overflow:auto;}
	
	.other .swiper-button-prev { left: -10px; }
	.other .swiper-button-next { right: -10px; }

	.config .wrap-auto { margin-top: 20px; }
	.config .wrap-auto img, .config .wrap-auto canvas { max-width:640px;}
	
}

@media screen and (min-width: 0px) and (max-width: 1023px) { /*768*/

	.header { height:46px;}													
	.header .logo svg { display: block; width: auto; height: 46px; padding: 5px; }

	.visible-desktop { display: none !important; }
	.visible-mobile { display: block !important; }

	.config { padding-top:10px;}

	.config .wrapper:before { display: block; }
	.config ul.navigation { margin-left: -20px; margin-right: -20px; }
	.config ul.navigation li:first-child { padding-left: 18px; }
	.config ul.navigation li:last-child { padding-right: 18px; }

	.config .panel-left { position: relative; left: initial; top: initial !important; text-align: center; padding-top: 50px; min-height: 135px }
	.config .panel-left .logo img { margin:0px auto;}
	.config .wrap-auto { margin-top: -50px; padding-bottom: 40px; margin-left: -50px; margin-right: -50px; }
	.config .panel-option { position: relative; left: initial; right: initial; bottom: initial; margin-top: 20px; }
	.config .panel-option .box {border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; padding: 10px; margin-left: -20px; margin-right: -20px; }
	.config .panel-option .button.prev { position: relative; float: left; left: initial; top: initial; margin-top: 10px; }
	.config .panel-option .button.next { position: relative; float: right; right: initial; top: initial; margin-top: 10px; }
	.config .panel-right { position: relative; left: initial; top: initial; right: initial; max-width: none; margin-top: 20px; }
	.config .panel-right .box { background: rgba(255,255,255,0.9);}

	.config:before { position: absolute; left: 0px; right: 0px; bottom: 0px; height: 400px; display: block; content: ''; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,1+100 */ background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)" !important; filter: alpha(opacity=80) !important; -moz-opacity: 0.8 !important; -khtml-opacity: 0.8 !important; opacity: 0.8 !important; }

	.config.interni .wrap-auto { display: block !important; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)" !important; filter: alpha(opacity=0) !important; -moz-opacity: 0 !important; -khtml-opacity: 0 !important; opacity: 0 !important; pointer-events: none; }


	.riepilogo .header .wrap-button { float: none; clear: both; text-align: center; }
	#exportpdf { padding:0px;}
	.riepilogo .wrap-col .col { float: none !important; width: 100% !important; }
	.riepilogo .wrap-col .col.left,
	.riepilogo .wrap-col .col.right { padding:0px;}

	/* new 19/06/2024*/
	.riepilogo .wrap-col.flex { flex-direction:column-reverse; }
	.riepilogo .wrap-col.flex .col.flex-left { flex: 1 0 0%; padding: 20px 0px; }
	.riepilogo .wrap-col.flex .col.flex-right { flex: 1 0 0%; padding: 20px 0px; }

}

@media screen and (min-width: 0px) and (max-width: 767px) { /*640*/

}

@media screen and (min-width: 0px) and (max-width: 639px) { /*600*/

}

@media screen and (min-width: 0px) and (max-width: 599px) { /*480*/

	h1 { font-size: 56px; line-height: normal; }
	h2 { font-size: 46px; line-height: normal; }
	h3 { font-size: 36px; line-height: normal; }
	h4 { font-size: 26px; line-height: normal; }
	h5 { font-size: 24px; line-height: normal; }
	h6 { font-size: 22px; line-height: normal; }
	p { font-size: 16px; line-height: normal; }
	p.x-small { font-size: 14px; line-height: normal; }
	p.xx-small { font-size: 12px; line-height: normal; }
	p.xxx-small { font-size: 11px; line-height: normal; }

	.button { font-size:11px;}


	.config .panel-left { padding-top: 30px; min-height: 110px; }
	.config .panel-left .logo img { height: 30px; }
	.config .wrap-auto { padding-bottom:20px;}
	.config .wrap-auto .panel-360 { width: 120px; }
	.config .wrap-auto .panel-360 a { width: 40px; height: 40px; line-height: 40px; }
	.config .wrap-auto .panel-360 a i { line-height:40px;}
	.config .wrap-auto .panel-360 a.icon i { font-size: 40px; }
	.config .wrap-auto .panel-360 a.icon span { font-size: 12px; }

	.config .panel-option .swiper-slide .box-info .wrap-text-info { max-height:260px;}

	.other { padding: 60px 0px; }
	.other .swiper-slide .item a span { font-size:11px;}

	.riepilogo { padding: 30px 20px; }
	.riepilogo .header .logo-suzuki { float:none;}
	.riepilogo .header .logo-suzuki svg { display:block; margin:0px auto}
	.riepilogo .header .logo-auto { float: none; margin: 20px 0px 0px 0px; }
	.riepilogo .header img { margin: 0px auto; }

	.riepilogo .titolo p { font-size: 16px; }
	.riepilogo .titolo .col-left { float: none; }
	.riepilogo .titolo .col-right { float: none; padding-top: 10px; }
	
}

@media screen and (min-width: 0px) and (max-width: 479px) { /*414*/

	h1 { font-size: 52px; line-height: normal; }
	h2 { font-size: 42px; line-height: normal; }
	h3 { font-size: 32px; line-height: normal; }
	h4 { font-size: 24px; line-height: normal; }
	h5 { font-size: 22px; line-height: normal; }
	h6 { font-size: 20px; line-height: normal; }

	p.x-small { font-size: 13px; line-height: normal; }

	.config .panel-option .swiper-slide .box-info .wrap-text-info { max-height: 220px; }

}

@media screen and (min-width: 0px) and (max-width: 410px) { /*375*/

}

@media screen and (min-width: 0px) and (max-width: 374px) { /*360*/

}

@media screen and (min-width: 0px) and (max-width: 359px) { /*320*/

}

/*check orientation*/
@media screen and (min-width: 0px) and (max-width: 1023px) and (orientation: landscape) {
	
}








