/*
    grid.css
    icelandgroup.it | 23/04/2020
    (c) Copyright 2020 web-communication.eu
*/



.grid {
	position:					relative;
	margin: 					30px auto;
	width:						100%;
	max-width:					1152px;
	background:					#FFFFFF;
	padding: 					0;
	overflow: 					hidden;
	font-size: 					0;
}

.grid .container {
	width: 						100%;
	display: 					inline-block;
	padding: 					0;
}


.grid .column {
	position:					relative;
	float: 						left;
	width:						33.3%;
	height:						450px;
	margin: 					0;
	padding-top: 				40px;
	overflow: 					hidden;
	display: 					block;
	background:					#fff;
	text-align: center;
	/* border:4px solid #fff;*/
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

	border: 1px solid #fff;
}

.grid .column:hover {

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


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

.grid img {
	position: relative;
	margin:						0 auto;
	width: 						100%;
	max-width: 					300px;
	display: 					block;

}


.grid .topic {
	position: 					absolute;
	top: 						0;
	left: 						0;
	width: 						100%;
	height: 					100%;
	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;
}
/*
.grid .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 */
	/*
}
*/
.grid .overimage {
	position: 					absolute;
	top: 						70px;
	left: 						0;
	width: 						100%;
	height: 					330px;
	display:					block;

	cursor: pointer;
}


.grid .button-left {
	color:                     #000000;
    font-family: 				'Quicksand', 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;
}

.grid .button-left:hover {

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

}

.grid .button-right {
	position: 					absolute;
	bottom: 					0;
	left: 					   157px;
	width: 						88px;
	color:                     #000000;
  font-family: 				'Roboto', 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*/
}

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


.grid .download {
	color:                     #000000;
   font-family: 				'Roboto', 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;
		margin: 0 auto;

	/*-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*/
 }





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



.grid .description {
	position: 					absolute;
	bottom: 					80px;
	left: 						0;
	font-family: 				'Roboto', sans-serif;
	font-size:  				16px;
	color: 						#555;
	font-weight: 				normal;
	letter-spacing: 			0.090em;
	text-indent: 				0.090em;
	text-align: center;
	padding: 0 30px;
	width: 						100%;
	display: 					block;
}


.grid .title {
	position: 					absolute;
	bottom: 					150px;
	left: 						0;
	font-family: 				'Roboto', sans-serif;
	font-size:  				22px;
	color: 						#000000;
	font-weight: 				bold;
	letter-spacing: 			0.050em;
	text-indent: 				0.050em;
	text-align: center;
	width: 						100%;
	display: 					block;
}


.grid .price {
	position: 					absolute;
	bottom: 					110px;
	left: 						0;
	font-family: 				'Roboto', 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;
}

.grid .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);
}

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

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


/* BUTTON */


.grid .learn-button {
	color: 						#000000;
  font-family: 				'Roboto', sans-serif;
    font-size:                 16px;
    font-weight:               bold;
    cursor:                    pointer;
    padding:                   10px 10px;
    text-decoration:           none;
    text-align:                center;
	/*background-color:			#000000;*/
	text-align:                center;
	border:                    3px solid #000;
    border-radius:             15px;
    -moz-border-radius:        15px;
    -webkit-border-radius:     15px;
}



.grid .learn-button:hover {
	background-color: 			#000000;
	color:            			#FFFFFF;
}





.grid .command {
	position: 					absolute;
	bottom: 					20px;
	right: 						50%;
	width: 						140px;
	padding:					3px 0;
	/*background:					#777;*/
	-webkit-transform: 			translate(50%, 0);
	transform: 					translate(50%, 0);

}

/* responsive */

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

	.grid .column {

		width:						100%;

	}

	.grid .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 */
	}

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

	}

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

}

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

	.grid .column {

		width:						50%;

	}

	.grid .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 */
	}

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

	}

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


}