/*
    specs.css
    asialeader.cn | 04/05/2021 | CSS
    (c) Copyright 2021 web-communication.eu
*/



.specs {
	position:					relative;
	margin: 					50px auto 100px auto;
	width:						100%;
	max-width:					1600px;/*1152px;*/
	background:					#FFFFFF;
	padding: 					0;
	overflow: 					hidden;
	font-size: 					0;
}

.specs .container {
	width: 						100%;
	display: 					flex;
	flex-wrap:				wrap;
	justify-content:  start;
	align-items: 			flex-start;
	padding: 					0;
}


.specs .column {
	position:					relative;
	width: 25%;
	margin: 					0;
	padding: 20px;
	/*background:					#ffaaff;*/
	text-align: 			center;

    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

/*	border: 1px solid #000;*/
}

.specs .column:hover {
	/*background:					#ddd url('../images/new-bg.jpg') repeat top left;*/

	/*border-color: #888;*/
}


.specs .column a {
	display:					block;
	text-decoration:			none;
}

.specs img {
	position: 				relative;
	margin:						0 auto;
	width: 						55%;
	max-width: 					130px;
	display: 					block;
	opacity: .6;
	transition: all .5s ease-in-out;
	-webkit-transition: all .5s ease-in-out;
	-moz-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	-ms-transition: all .5s ease-in-out;
}

.specs img:hover {
	-webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}

.specs .topic {
	position: 					rellative;
	width: 						100%;
	margin:						0 auto;
	display:					block;

	-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);


	opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */

	transition: all .2s ease-in-out;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
}
/*
.specs .topic:hover {
	-webkit-transform: scale(1.0);
    -moz-transform: scale(1.0);
    -o-transform: scale(1.0);
    transform: scale(1.0);


	opacity: 1.0;
    filter: alpha(opacity=100); *//* For IE8 and earlier */
	/*
}
*/


.specs .button-left {
	color:                     #000000;
    font-family:               Arial, Helvetica, sans-serif;
    font-size:                 18px;
    font-weight:               bold;
    cursor:                    pointer;
    border:                    3px solid #000000;
    padding:                   12px 30px;
    text-decoration:           none;
    text-align:                center;
	background-color: 			#FFFFFF;

    border-radius:             10px;
    -moz-border-radius:        10px;
    -webkit-border-radius:     10px;

	/*-webkit-transition: background-color .3s linear;*//*Safari e Chrome */
    /*-moz-transition: background-color .3s linear;*//*Firefox*/
    /*-o-transition: background-color .3s linear;*//*Opera*/
    /*-ms-transition: background-color .3s linear;*/
    /*transition: background-color .3s linear;*//*standard*/

	position: 					absolute;
	width: 						150px;
	bottom: 					0;
	left: 						0;
}

.specs .button-left:hover {

	background-color: 			#000000;
	color:            			#FFFFFF;

}

.specs .button-right {
	position: 					absolute;
	bottom: 					0;
	left: 					   157px;
	width: 						88px;
	color:                     #000000;
    font-family:               Arial, Helvetica, sans-serif;
    font-size:                 26px;
    font-weight:               bold;
    cursor:                    pointer;
    border:                    3px solid #000;
    padding:                   7px 15px;
	padding-right:			   55px;
    text-decoration:           none;
    text-align:                center;

    border-radius:             10px;
    -moz-border-radius:        10px;
    -webkit-border-radius:     10px;

	background-color: 			#FFFFFF;
	 background-image:  			url('../images/addcart.png');
			background-repeat: 		no-repeat;
			background-position: 	20px -10px;
			background-size: 		64px;

	/*-webkit-transition: background-color .3s linear;*//*Safari e Chrome */
    /*-moz-transition: background-color .3s linear;*//*Firefox*/
    /*-o-transition: background-color .3s linear;*//*Opera*/
    /*-ms-transition: background-color .3s linear;*/
    /*transition: background-color .3s linear;*//*standard*/
}

.specs .button-right:hover {
	background-color: 			#000000;
	color:            			#FFFFFF;
	background-position: 		20px -74px;
}


.specs .download {
	width: 250px;

	color:                     #000000;
    font-family:               Arial, Helvetica, sans-serif;
    font-size:                 18px;
    font-weight:               bold;
    cursor:                    pointer;
    border:                    3px solid #000;
    padding:                   12px 30px;
	padding-left:			   55px;
    text-decoration:           none;
	background-color:		   #FFFFFF;
    text-align:                center;

    border-radius:             10px;
    -moz-border-radius:        10px;
    -webkit-border-radius:     10px;

	 background-image:  				url('../images/download.png');
			background-repeat: 			no-repeat;
			background-position: 		0 -10px;
			background-size: 			64px;


	/*-webkit-transition: background-color .3s linear;*//*Safari e Chrome */
    /*-moz-transition: background-color .3s linear;*//*Firefox*/
    /*-o-transition: background-color .3s linear;*//*Opera*/
    /*-ms-transition: background-color .3s linear;*/
    /*transition: background-color .3s linear;*//*standard*/
 }





.specs .download:hover{
	background-color: 			#000000;
	color:            			#FFFFFF;
	background-position: 		0 -74px;
 }



.specs .description {
	position: 					relative;
	margin: 0 auto;
	width: 						100%;
	min-height: 100px;
	display: 					block;
	text-align: center;
	padding: 10px 30px;
	font-family:         		'Roboto', sans-serif;
	font-size:  				16px;
	color: 						#555;
	font-weight: 				normal;
	letter-spacing: 			0.090em;
	text-indent: 				0.090em;


}


.specs .title {
	position: 					relative;
	margin: 0 auto;
	padding-top: 40px;
	text-align: center;
	width: 						100%;
	display: 					block;
	font-family:         		'Roboto', sans-serif;
	font-size:  				26px;
	color: 						#000000;
	font-weight: 				bold;
	letter-spacing: 			0.050em;
	text-indent: 				0.050em;

}


.specs .price {
	position: 					absolute;
	bottom: 					110px;
	left: 						0;
	font-family:         		'Open Sans', sans-serif;
	font-size:  				26px;
	color: 						#000000;
	font-weight: 				normal;
	letter-spacing: 			0.050em;
	text-indent: 				0.050em;
	text-align: center;
	width: 						100%;
	display: 					block;
}

.specs .line {
	position: 					absolute;
	bottom: 					155px;
	width:						35px;
	right: 						50%;
	display: 					block;
	border-top: 1px solid #000000;
	-webkit-transform: 			translate(50%, 0);
	transform: 					translate(50%, 0);
}

.specs .ship {
	position: 					absolute;
	bottom: 					12px;
	left: 						0;
	font-family:         		Verdana, sans-serif;
	font-size:  				12px;
	color: 						#555555;
	font-weight: 				normal;
	text-align: 				center;
	width: 						100%;
	padding:					3px 0;
	/*background:					#EEEEEE;*/
	display: 					block;
}

.specs .ship a,
.specs .ship a:visited {
	color: 						#0000FF;
	text-decoration:			underline;
}



.specs .command {
	position: 					relative;
	width: 100%;
padding-bottom: 30px;

}







/* responsive */

@media only screen and (max-width: 620px){

	.specs {
		margin: 					0 auto 50px auto;
	}

	.specs .column {
		width:						50%;
	}

	.specs .topic {
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-o-transform: scale(1.0);
		transform: scale(1.0);


		opacity: 1.0;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}

	.specs .title {
		padding-top: 20px;
		text-align: center;

		font-size:  				18px;

	}

}

@media only screen and (min-width: 621px) and (max-width: 1024px) {

	.specs .column {

		width:						50%;

	}

	.specs .topic {
		-webkit-transform: scale(1.0);
		-moz-transform: scale(1.0);
		-o-transform: scale(1.0);
		transform: scale(1.0);


		opacity: 1.0;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}

	.specs .button-right {
		right: 						12%;

	}

	.specs .button-left {
		right: 						43%;
	}


}