/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');*/
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100..900&display=swap');

html
{
	/*background-image: 			url(background.jpg);*/
	background-position:		center center;
	background-repeat: 			no-repeat;
	background-size:  			cover;
	height:  					100vh;
	color: 						#fff;
	background-color:  			#111;
	/*font-family: 				'Outfit', Arial, sans-serif;*/
	font-family: 				'Roboto', Arial, sans-serif;
	font-weight:  				300;
	/*overflow:  	 				hidden;*/
	background-image: 		url(background.jpg);
	background-position:	center center;
	background-repeat: 		no-repeat;
	background-size:		cover;
	background-attachment: fixed;
}

html::after
{
	position: 					absolute;
	top:  				0;
	left:  				0;
	right:  			0;
	bottom:  			0;
	content: 			" ";
	/*background-color:           rgba(255,255,255, 1);*/
	-webkit-transition:         all 4.2s ease-out;
	-moz-transition:            all 4.2s ease-out;
	-o-transition:              all 4.2s ease-out;
	transition:                 all 4.2s ease-out;
	/*opacity:  				0.6;*/
	/*-webkit-animation-name:     loop; !* Safari 4.0 - 8.0 *!*/
	/*-webkit-animation-duration: 5s; !* Safari 4.0 - 8.0 *!*/
	/*animation-name:             loop;*/
	/*animation-duration:         5s;*/
}

*
{
	box-sizing: border-box;
}

h2
{
	color:  		#fff;
	text-align:  	center;
	margin-top:  	50px;
}

img
{
	max-width:  			100%;
	margin-bottom:  		7px;
}

a:link,
a:hover,
a:active,
a:visited
{
	color:  			#fff;
	text-decoration:   	none;
}

#commons_logo
{
	position:  				relative;
	z-index:  				100;
	max-width:  			800px;
	height:  				400px;
	margin:  				10vh auto;
	margin-bottom:  		0px;
	background-image: 		url(logo.svg);
	background-position:	center center;
	background-repeat: 		no-repeat;
	background-size:  		contain;
	-webkit-animation-name: opa; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 5s; /* Safari 4.0 - 8.0 */
	animation-name: 		opa;
	animation-duration: 	5s;
	opacity:  				0;
	animation-fill-mode: 	forwards;
}
#commons_baseline,
#commons_subbaseline
{
	/*border-top:  		2px solid #000;*/
	/*padding-top:  		50px;*/
}
#commons_baseline,
#commons_subbaseline,
#commons_contact
{
	position:  				relative;
	z-index:  				100;
	max-width:  			800px;
	margin:  				10px auto;
	font-size:  			15pt;
	color:					#fff;
	text-align:  			center;
	-webkit-animation-name: opa; /* Safari 4.0 - 8.0 */
	-webkit-animation-duration: 8s; /* Safari 4.0 - 8.0 */
	animation-name: 		opa;
	animation-duration: 	8s;
	opacity:  				0;
	animation-fill-mode: 	forwards;
}
#commons_contact a:link,
#commons_contact a:hover,
#commons_contact a:active,
#commons_contact a:visited
{
	display:  				inline-block;
	background-color:  		#000;
	color:  				#fff;
	padding:  				5px 20px;
	-moz-border-radius:		25px;
	-webkit-border-radius:	25px;
	border-radius:			25px;
}

#commons_subbaseline
{
	font-size:  			10pt;
}
#commons_contact
{
	font-size:  			20pt;
	font-weight:  			600;
	margin-top:  			30px;
}
.commons_photo::after
{
	content: 			" ";
	display: 			block;
	clear: 				both;
}
.commons_photo
{
	/*max-width:  			1000px;*/
	margin: 				0 auto;

	-webkit-column-count: 	3;
	-moz-column-count: 		3;
	column-count: 			3;


	-webkit-column-gap: 	10px;
	-moz-column-gap: 		10px;
	column-gap: 			10px;

}
.commons_photo img
{
	/*float:  			left;*/
	/*width:  			21%;*/
	/*margin:  			1% 1%;*/
	/*border: 			10px solid #fff;*/
	/*box-shadow:  		0 0 10px rgba(0,0,0,.2);*/
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes loop {
	0%  {  background-color: rgba(0, 0, 0, 0);}
	25% { }
	85% { }
	100% { background-color: rgba(0, 78, 255, .9);}
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes opa {
	0%  { }
	25% { }
	40% { opacity: 0; }
	100% { opacity: 1;  }
}



@media only screen /* Smartphone Horizontal */
and (max-width : 1000px)
{

	.commons_photo
	{
		max-width:  			1000px;
		margin: 				0 auto;

		-webkit-column-count: 	2;
		-moz-column-count: 		2;
		column-count: 			2;

		-webkit-column-gap: 	10px;
		-moz-column-gap: 		10px;
		column-gap: 			10px;

	}
}


@media only screen /* Smartphone Horizontal */
and (max-width : 700px)
{

	html
	{
		padding:  		0 10px;
	}

	#commons_logo
	{
		height:    300px;
		margin:    10vh auto;
		margin-bottom: 0;
	}

	#commons_baseline
	{
		border-top:  		1px solid #fff;
		padding-top:  		40px;
		padding-bottom:  	30px;
		font-size:  		13pt;
	}


	.commons_photo
	{
		max-width:  			1200px;
		margin: 				0 auto;

		-webkit-column-count: 	1;
		-moz-column-count: 		1;
		column-count: 			1;

		-webkit-column-gap: 	10px;
		-moz-column-gap: 		10px;
		column-gap: 			10px;

	}


	a:link,
	a:hover,
	a:active,
	a:visited
	{
		color:  				rgba(0, 78, 255, .9);
		text-decoration:   		none;
		display: 				inline-block;
		background-color:  		#fff;
		padding:  				7px 25px;
		-moz-border-radius:		30px;
		-webkit-border-radius:	30px;
		border-radius:			30px;
		font-size:  			20pt;
	}
}