/*
    motion-grid.css
    digimediacom.ch | 20/05/2020 | CSS
    (c) Copyright 2020 web-communication.eu
*/



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

}

.motion-grid .container {
	position: 					relative;
	margin: 					0 auto;
	height: 					100%;
    width: 						100%;
	max-width: 					1920px;
    font-size: 					0;
	/*min-height: 				30vh;*/

background: #ff0;
}


.motion-grid .inner {
	display: 					inline-block;
	vertical-align: 			middle;
	padding: 					0;
	width: 						50%;
	/*margin: 					0;*/
	text-align: 				center;

	/*background: 				#ccc;*/
}


.motion-grid .motion-img-left,
.motion-grid .motion-img-right {
	display: 					block;
	max-width: 					960px;
	margin-left: 				-500px;
	opacity: 0;

	/*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-right {
	margin-right:				-500px;
	float: 						right;
}

.motion-grid .motion-img-left {
	margin-left:				-500px;
	float: 						left;
}



.motion-grid .description {
	display: 					inline-block;
	/*vertical-align: 			middle;*/
	padding: 					50px;
	width: 						50%;
	height: 100%;
	margin: 					0;
position: relative;
	background: 				#ccffcc;
}


.motion-grid .topic {
	position: absolute;
	padding: 					10px;
	width: 						85%;
	margin: 					0;

	display: 					block;

	opacity: 0;

	/*background: 				#ffffff;*/

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

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

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

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


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

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

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

.motion-grid .topic h2 {
	font-family: 				'Quicksand', sans-serif;
	font-size:   		        18px;
	font-weight:       		    normal;
	color:              		#333333;
	padding: 					0 15px;
	padding-bottom: 			15px;
	font-style: 				italic;
}


.motion-line {
	border-bottom: 				1px solid #ccc;
}


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

}

.motion-grid .visible-img {

	opacity: 1;
	margin: 0;
}
/*
.motion-grid .visible-left {

	opacity: 1;
	margin-left: 0;
}


.motion-grid .visible-right {

	opacity: 1;
	margin-right: 0;
}
*/
.motion-grid .info {
	margin: 25px 15px;
}




/* BUTTON */

/*
.motion-grid .button {
	color: 						#FFFFFF;
    font-family: 				'Quicksand', sans-serif;
    font-size:                 18px;
    font-weight:               bold;
    cursor:                    pointer;
    padding:                   12px 30px;
    text-decoration:           none;
    text-align:                center;
	background-color:			#000000;
}



.motion-grid .button:hover {
	background-color: 			#555555;
	color:            			#FFFFFF;
}
*/


.motion-grid .button {
	width: 200px;
margin-top: 30px;
	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:hover {
	background-color: 			#000000;
	color:            			#FFFFFF;
}







/* responsive */

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

	.motion-grid .inner {
		width: 					100%;
		margin: 				0;
	}

	.motion-grid .description {
		width: 						100%;
		margin: 				0;
	padding: 					7%;
		/*background: 				#ccffcc;*/
	}

	.motion-grid .container  {
		display:				flex;
        flex-flow: 				column;
	}

	.inner {
		order:					1;
		display: block;
	}

    .description {
		order:					2;
		display: block;
	}

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


position: relative;
float: none;
		max-width: 					960px;
		margin: 0 auto;
		opacity: 1;
	}

	.motion-grid .topic {
		position: relative;


	}

	.motion-grid img {
		width: 						100%;

	}

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

	.motion-grid .inner {
		width: 					98%;
		margin: 				0 1%;
	}

	.motion-grid .description {
		width: 						98%;
		margin: 				0 1%;
	}

	.motion-grid .container  {
		display:				flex;
        flex-flow: 				column;
	}

	.inner {
		order:					1;
		display: block;
	}

    .description {
		order:					2;
		display: block;
	}

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

		max-width: 					960px;
		margin: 0;
		opacity: 1;
	}
}
*/
@media only screen and (min-width: 1025px) and (max-width: 1600px) {


}

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


}


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

	.motion-grid .container {

		min-height: 				30vh;

	}
}