/*----------------------------------- Cascading Style Sheet for RN Technologies Website -----------------------------------

	CUSTOMIZATION CONTENT
		[1] BODY
		[2] BOOTSTRAP CLASSES
		[3] SECTIONS
			[3-1] ABOUT US
			[3-2] COLLABORATION
			[3-3] SUPPORTED
			[3-4] EVENT
			[3-5] LOCATION
			[3-6] FEEDBACK
			[3-7] FOOTER
			[3-8] COPYRIGHT
		[4] FONT AWESOME
		[5] PARALLAX
		[6] TO-TOP BUTTON
		[7] MEDIA QUERY (FOR SMALLER SCREEN SIZE)

----------------------------------- Cascading Style Sheet for RN Technologies Website -----------------------------------*/


/*--------------------------------------------------------------------------------*/
/*----------------------------------- [1] BODY -----------------------------------*/
/*--------------------------------------------------------------------------------*/



/*---------------------------------------------------------------------------------------------*/
/*----------------------------------- [2] BOOTSTRAP CLASSES -----------------------------------*/
/*---------------------------------------------------------------------------------------------*/

/*Customize navbar*/
.navbar {
	margin: 0px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;/*
	background-color: #A50F49;
	border-color: #A50F49*/
}

.navbar-nav > li > a {
	line-height: 50px;
	color: #90278E;
}

.navbar-nav > li > a:hover {
	font-size: 1.1em;
	color: #90278E;
	transition: font-size 0.2s ease-out;
}

.navbar-brand > img {
	height: 50px;
}

/*Customize Jumbotron and Panel*/
.jumbotron, .panel {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	color: black;
}

/*------------------------------------------------------------------------------------*/
/*----------------------------------- [3] SECTIONS -----------------------------------*/
/*------------------------------------------------------------------------------------*/

/*Customize each section*/
#about-us, #collaboration, #supported, #event, #location, #feedbackmembership {
	font-family: 'Montserrat', sans-serif;
	padding-top: 2%;
	padding-bottom: 5%;
	/*height: 100vh;*/
}


#banner img {
	width: 100vw;
}

/*----------------------------------------------------------------------------------*/
/*------------------------------------------------------------------ [3-1] ABOUT US */
/*----------------------------------------------------------------------------------*/

#about-us {
	text-align: center;
}

.about-container {
	padding: 2%;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
	z-index: 999;
	background-color: white;
	border-radius: 20px;
}

.about-header img {
	width: 50%;
}



.about-content h4 {	
	line-height: 1.5;
}

.about-content a, .about-content a:visited, .about-content 	a:active {
	color: black;
	text-decoration: none !important;
	outline: none;
}

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

/*--------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------- [3-2] COLLABORATION */
/*--------------------------------------------------------------------------------------*/

#collaboration {
	background-color: #EBEFF0;
}

/*Customize Product Section*/
.collab-card {
	padding: 5%;
	margin-top: 10%;
	/*height: 130px;*/
	/*box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);*/
	/*border-radius: 4px;*/
}

a, a:visited, a:active {
	color: white;
	text-decoration: none !important;
	outline: none;
}

.panel-heading {
	background-color: #90278E !important;
	color: white !important;
}

.img-container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
    padding: 5%;
}

.img-container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

.img-element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}
/*-------------------------------------------------------------------------------------*/
/*-------------------------------------------------------------------- [3-3] SUPPORTED */
/*-------------------------------------------------------------------------------------*/

#supported {
	background-color: #EBEFF0;
}

.logo-client img {
	width: 100%;
}

/*----------------------------------------------------------------------------------------*/
/*--------------------------------------------------------------------------- [3-4] EVENT */
/*----------------------------------------------------------------------------------------*/

#event {
	background-color: white;
	text-align: center;
}
.eventimage:hover {
	cursor: pointer;
}

/*----------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------ [3-5] LOCATION */
/*----------------------------------------------------------------------------------------*/

#location {
	background-color: #90278E;
	text-align: center;
	color: white;
}

.google-map {
	height: 70vh;
}

@media only screen and (max-width: 767px) {
	.google-map {
		margin-top: 3%;
		height: 80vh;
	}
}

@media only screen and (min-width: 991px) {
	.row.is-flex {
		text-align: left;
	    display: flex;
	    flex-wrap: wrap;
	}

	.row.is-flex > [class*='col-'] {
		margin-top: 2%;
	    display: flex;
	    flex-direction: column;
	}

	/*
	* And with max cross-browser enabled.
	* Nobody should ever write this by hand. 
	* Use a preprocesser with autoprefixing.
	*/
	.row.is-flex {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-flex-wrap: wrap;
	    -ms-flex-wrap: wrap;
	    flex-wrap: wrap;
	}

	.row.is-flex > [class*='col-'] {
	    display: -webkit-box;
	    display: -webkit-flex;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    -webkit-flex-direction: column;
	    -ms-flex-direction: column;
	    flex-direction: column;
	}

  
 
}



/*----------------------------------------------------------------------------------------*/
/*------------------------------------------------------------------------ [3-6] FEEDBACK */
/*----------------------------------------------------------------------------------------*/

/*---------------------------------------------------------------------------*/

/*Customize Font Awesome*/
.fa-custom {
	font-size: 150px;
	margin: 20px 0 10px 0;
	fill: #EEC643;
	filter: drop-shadow( 0px 0px 5px #000 );
	width:50%;
	height:100%;
}

/*-----------------------------------------------------------------------------------------*/
/*----------------------------------- [6] TO-TOP BUTTON -----------------------------------*/
/*-----------------------------------------------------------------------------------------*/

/*To top button custimzation*/
.to-top {
	position: fixed;
	bottom: 0;
	right: 5%;
	background-color: #33DDFF;
	padding: 20px;
	z-index: 999;
	border-radius: 50px 50px 0 0;
	color: white;
	box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
}

.glyphicon-triangle-top{
	color: white;
}

/*-----------------------------------------------------------------------------------------------------------------*/
/*----------------------------------- [7] MEDIA QUERY (FOR SMALLER SCREEN SIZE) -----------------------------------*/
/*-----------------------------------------------------------------------------------------------------------------*/

/*When size decrese to 767px*/
@media only screen and (max-width: 767px) {
	    
	.navbar-brand > img {
		height: 25px;
	}

	.about-container {
		border-radius: 0;
	}

	.to-top {
		padding: 10px;
		box-shadow: 0 0 5px 2.5px rgba(0, 0, 0, 0.2);
	}

	.about-header * {
		font-size: 1.2em !important;
	}
	
	.about-content * {
		font-size: 1em !important;
	}
}

/*When size decrese to 991*/
@media only screen and (max-width: 991px) {


	.animateme {
		transform: none !important;
		opacity: 1 !important;
	}

}

/*When size decrese to 991*/
@media only screen and (max-width: 1199px) {


}