/*
    motion-grid.css
    asialeader.cn | 20/05/2021 | CSS
    (c) Copyright 2021 web-communication.eu
*/



.motion-grid {
	position:					relative;
	margin: 					0 auto;
	margin:					  0;
	padding: 					0;
	width:						100%;
font-size: 0;

}

.motion-grid .container {
	position: 					relative;
	margin: 						0 auto;
  width: 							100%;



	 display: flex;
	 justify-content: center;
	 align-items: center;

}


.motion-grid .inner {
  width: 							50%;
/*	float:left;*/
}

.motion-grid .description {
  width: 							50%;
	margin: 						0;
	padding: 0;

/*float: left;*/

}


.motion-grid img {
  width: 							50vw;
	max-width:					960px;

}


.motion-grid .motion-img-left,
.motion-grid .motion-img-right {

	/*standard*/
		transition-duration: .9s;

		/*Safari e Chrome */
		-webkit-transition-duration: .9s;

		/*Opera*/
		-o-transition-duration: .9s;

		/*Firefox*/
		-moz-transition-duration: .9s;
}

.motion-grid .motion-img-left {
  margin-left:  max(-960px, -50vw);
	opacity: 0;
	float: left;
}



.motion-grid .motion-img-right {
margin-right:   max(-960px, -50vw);
float: right;
opacity: 0;
}

.motion-grid .visible-img {
	opacity: 1;
	margin: 0;
}



.motion-grid .topic {

	margin: 					0;
width: 100%;
	padding:						0 5%;

margin-top: 150px;

	opacity: 0;



	/*background: 				#ffffff;*/

		/*standard*/
		transition-duration: 2.9s;

		/*Safari e Chrome */
		-webkit-transition-duration: 2.9s;

		/*Opera*/
		-o-transition-duration: 2.9s;

		/*Firefox*/
		-moz-transition-duration: 2.9s;
}

.motion-grid .visible {
  opacity: 1;
  margin-top: 0;
}

.motion-grid .topic h1 {
	font-family: 				'Quicksand', sans-serif;
	font-size:   		     32px;
	font-weight:       	 bold;
	color:              #000000;/*#0C7EC3;*/
	padding: 						15px 0;
}


.motion-grid .topic p {
	font-family: 				'Quicksand', sans-serif;
    font-size:		            22px;
	font-weight:    		    normal;
	color: 						#555555;
	line-height: 				150%;
	padding: 0;
}

.motion-grid .button {

	padding: 45px 0 25px 0;

}


.motion-grid .button a {
		color:                     #000000;
		font-family:               Arial, Helvetica, sans-serif;
		font-size:                 20px;
		font-weight:               bold;
		cursor:                    pointer;
		border:                    2px solid #000;
		padding:                   12px 30px;

		text-decoration:           none;
		background-color:		   #FFFFFF;
		text-align:                center;

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



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




/* responsive */

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

	.motion-grid .topic {

	text-align: center;
	}

}

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

	.motion-grid .container {
		flex-direction: column;
	}


	.motion-grid .inner {
		order:					1;
		width: 100%;
	}

  .motion-grid .description {
		order:					2;
		width: 100%;
	}

	.motion-grid .motion-img-left,
	.motion-grid .motion-img-right {
margin: 0;

		opacity: 1;
	}

	.motion-grid img {
		width: 							100vw;
		max-width:					1280px;
	}

	.motion-grid .topic {

		padding:					5%;
	}

}

@media only screen and (min-width: 1137px) and (max-width: 1365px) {

	.motion-grid .topic h1 {
		font-size:   		     28px;
		padding: 						15px 0;
	}


	.motion-grid .topic p {

	    font-size:		            20px;
		line-height: 				140%;

	}

}

@media only screen and (min-width: 1601px) {


}


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


}