/*

	01. Body and things that we don't change
	02. Navigation
	03. Setting the main's sections
	04. Home Section
	05. Works Section
	06. About Section
	07. Contact Section
	08. Twitter Module
	09. Social Module

*/


/* 01. BODY AND WRAPPER ================================================== */


html, body {
  font-family: 'Roboto', sans-serif;
	margin:0px auto;
	width:100%;
	height: 100%;
	background-color:#FFF;
	position:absolute;
	top:0px;
	left:0px;
	bottom:0px;}

.row {
	text-align: center;}

.subtittle {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 90px 30px;
	font-size:14px;
	text-align: center!important;
}

.subtittle1 {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 90px 0px;
	font-size:14px;
	text-align:left;
}
.subtittle2 {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 90px 0px;
	font-size:14px;
	text-align:left!important;
}

.subtittle a {
	font-family: 'Roboto', sans-serif;
	color:#d62038;
	text-decoration: none;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.subtittle a:hover {
	color:#777;}

h2 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:36px;
	padding: 30px 0px 0px 0px;
}

h5 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	padding: 5px 0px 5px 0px;
	text-transform:uppercase;
	font-weight: 700;
	text-align: left;
}

h6{
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	padding: 70px 0px 10px 0px;
	font-weight: bold;
	text-transform: uppercase;
}

h7 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	padding: 10px 0px 5px 0px;
	text-transform:uppercase;
	font-weight: 700; display:block;
}

h8 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	padding: 10px 0px 5px 0px;
	text-transform:uppercase;
	font-weight: 700; display:block; text-align:left;
}

h9 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:36px;
	text-align:left;
	padding: 30px 0px 0px 0px;
	display: block;
}


p{font-size:14px;}

.title_line {
    border-bottom: 1px solid #D5D5D5;
    display: block;
    height: 1px;
    margin: auto;
    margin-top:20px;
    width: 90px;}


/* 02. NAVIGATION ================================================== */



nav #logo {
	float:left;
	color:#212121;
	margin-left:10px;
	padding:10px;}

nav {
	z-index: 42;
	width: 100%;
	background: #FFF;
	position: relative;
	height: 80px;}

nav ul.web_menu {
	float:right;
	display:inline-block;
	margin-right:10px;
	list-style:none;
	padding-top:20px;}

nav ul.web_menu li {
    display:inline-block;
    list-style: none;
    float:left;
    padding:5px 20px;}

nav ul.web_menu li a {
  	color:#333;
	position:relative;
	display:inline-block;
	font-weight: 300;
	text-decoration:none;
	font-size:14px;
	text-transform:uppercase;
	text-decoration:none;
	display:block;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

nav ul.web_menu li a:hover, nav ul.web_menu li a.selected,
nav li a:hover,
nav li a.selected {
	color:#d62038;}

.sticky {
	position: fixed;
	top: 0px;}


/* Mobile Navigation Display none if no iDevice */

nav select {
      display: none;}


/* 03. SETTING OF MAIN SECTIONS  ================================================== */


#home {
	width:100%;
	height:100%;
	color:#FFF;
	background:#fff no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment : fixed;  /* FIXED FOR IE */}

#consultingservice {
	background-image:url(../images/background1_.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#f7f4f4;
	padding:70px 0px 50px;
}

#roboticsprocessautomation {
	background:#fff;
	padding:70px 0px 50px;
}

#businessdatavisualisation {
	background-image:url(../images/background1_.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#f7f4f4;
	padding:70px 0px 50px;
}

#ocrautomationsolution {
	background:#fff;
	padding:70px 0px 50px;
}

#applicationdevelopment {
	background-image:url(../images/background1_.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#f7f4f4;
	padding:70px 0px 50px;
}

#payment{
	background:#fff;
	padding:110px 0px 50px;
}

#mobilecontentgateway {
	background-image:url(../images/background1_.jpg);
	background-repeat:no-repeat;
	background-position:center top;
	background-color:#f7f4f4;
	padding:70px 0px 50px;
}

#customercredentials{
	background:#fff;
	padding:110px 0px 50px;
}

#contact {
	background-color:#f7f4f4;
	padding:70px 0px 50px;
}


#twitter_module {
	background-color:#FFF;
	padding:40px 0px 40px;}


#social_module {
	background-color:#fFF;
	padding:0px 0px 30px;}


footer {
	padding:20px 0;
	background-color:#333;
	color: #afa9a9;
}


/*-----------------------------------------------------------------*/
/* 04. Header
/*-----------------------------------------------------------------*/
	#abdev_main_header{
		width: 100%;
		background: #fff;
		padding: 22px 0px;
		box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.2);
		z-index: 9999;
		position: fixed;
		top: 0;
		left: 0;
		visibility: visible;
	}

	#abdev_main_header.menu_over_slider{
		background: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}

	#abdev_main_header #main_logo{
		display: block;
	}

	#abdev_main_header #inversed_logo{
		display: none;
	}

	#abdev_main_header.menu_over_slider #main_logo{
		display: none;
	}

	#abdev_main_header.menu_over_slider #inversed_logo{
		display: block;
	}

	#abdev_main_header.menu_over_slider .menu_social{
		color: #fff;
		border-color: #fff;
	}

	#abdev_main_header.menu_over_slider .menu_social:hover{
		color: #e42382;
		border-color: #e42382;
	}

	#main_slider{
		padding: 0;
		background-size: cover;
		position: relative;
	}

	#main_slider_content{
		text-align: center;
	}

	#main_slider_logo{
		position: absolute;
		top: 10%;
		width: 100%;
	}

	#main_slider_text{
		font-size: 70px;
		font-weight: 300;
		text-transform: uppercase;
		line-height: 84px;
		position: absolute;
		top: 30%;
		width: 100%;
	}

	#main_slider_text .bold{
		font-size: 84px;
		display: block;
	}

	#main_slider_scroll{
		position: absolute;
		bottom:70px;
		width: 100%;
	}

	.main_slider_scroll_icon{
		display: inline-block;
		background: rgba(0,0,0,0.5);
		padding: 9px 25px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
	}

	.main_slider_scroll_info{
		font-family: 'Roboto', sans-serif;
		text-transform: uppercase;
	}

	.pattern_overlayed #main_slider_content,
	.color_overlayed #main_slider_content{
		z-index: 1;
	}

/*-----------------------------------------------------------------*/
/* 05. Slider place
/*-----------------------------------------------------------------*/

	#frontpage_slider{
		padding: 0;
		margin: 0;
	}

	.tp-leftarrow.custom,
	.tp-rightarrow.custom {
		background: none !important;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
		width: 48px;
		height: 48px;
	}

	.tp-leftarrow.custom{
		border-left: 2px solid rgba(255,255,255,0.5);
		border-bottom: 2px solid rgba(255,255,255,0.5);
		margin-left: 40px;
	}

	.tp-rightarrow.custom{
		border-top: 2px solid rgba(255,255,255,0.5);
		border-right: 2px solid rgba(255,255,255,0.5);
		margin-right: 40px;
	}

	.tp-leftarrow.custom:hover,
	.tp-rightarrow.custom:hover {
		background: none !important;
		border-color: #fff;
	}

	.tp-leftarrow.preview1 .tp-arr-imgholder {
		-webkit-transform: rotateY(100deg);
		transform: rotateY(-100deg);
	}

	.tp-bullets.simplebullets.round .bullet {
		background-image: url(../images/bullet.png);
	}

	.tp-dottedoverlay{
		z-index: 2;
	}

	.tp-dottedoverlay.twoxtwo{
		background:none;
	}

	.tp-bullets.simplebullets.round .bullet{
		background:#999;
		width: 15px;
		height: 15px;
		-webkit-border-radius: 8px;
		-moz-border-radius: 8px;
		border-radius: 8px;
		margin-right: 7px;
	}

	.tp-bullets.simplebullets.round .bullet:hover,
	.tp-bullets.simplebullets.round .bullet.selected{
		background-color:#e42382;
	}

	.revelance-small-with-lines:before,
	.revelance-small-with-lines:after{
		display: block;
		content: "";
		width: 250px;
		height: 2px;
		background: #fff;
		top: 50%;
		position: absolute;
		margin-top: -1px;
	}

	.revelance-small-with-lines:before{
		left: -275px;
	}

	.revelance-small-with-lines:after{
		right: -275px;
	}

	.tp-caption.revelance-button{
	}

	.tp-caption.revelance-button a{
		text-decoration: none;
		color: #fff;
		padding:15px 30px 15px 30px;
		display: inline-block;
		-webkit-transition: all 300ms !important;
		transition: all 300ms !important;
	}

	.tp-caption.revelance-button:hover{
		color: #fff;
		border-color: #e42382;
		background: #e42382;
		-webkit-transition: all 300ms !important;
		transition: all 300ms !important;
	}



/* 04 HOME SECTION  ================================================== */


#home h1 {
	position:relative;
	margin:20% auto 0px auto;
	z-index: 999;}

.roles {
	font-size: 36pt;
	font-weight: 300;
	display: inline-block;
	line-height: 40px;
	height: 70px;
	vertical-align: middle;
	overflow: auto;
	color: #000;
	z-index: 999;
	margin-top: 10%;
}

.roles div {
    height:             70px;
    -webkit-transition: margin-top 0.5s ease-in-out;
    -moz-transition:    margin-top 0.5s ease-in-out;
    -o-transition:      margin-top 0.5s ease-in-out;
    transition:         margin-top 0.5s ease-in-out;}

#down_button a {
	position: absolute;
	width: 80px;
	height: 80px;
	bottom: 5%;
	left: 50%;
	margin-left: -40px;
	background: url("../img/down.png") no-repeat;
	background-position: 0px -80px;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

#down_button a:hover {
	background-position: 0px 0px;}


/* -- Button back Contact -- */

#down_button_contact a {
	width:180px;
	padding: 0px;
	background-color: #d62038;
	font-family: 'Roboto', sans-serif;
	font-size:15px;
	color:#FFF;
	text-align:center;
	text-transform:uppercase;
	letter-spacing:1px;
	text-decoration:none;
	position: absolute;
	bottom: 0px;
	left: 50%;
	margin-left: -90px;
	-webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;}

#down_button_contact a:hover {
	color:#121212;
	background: #FFF;}


/* 05 WORKS SECTION  ================================================== */
.dotline{float:left; margin:0 5px 0 25px;}
.midline{float:left; margin:40px 45px 0 45px;}


#applicationdevelopment img{ display:block;}
#applicationdevelopment p{ text-align:left;}

#payment img.paytitle{display:block; margin-top:35px;}

.og-grid {
    list-style: none;
	padding: 10px 0;
	margin: 0px auto;
	text-align: center;
	width: 100%;}

.og-grid li {
	display: inline-block;
	margin: 0px 15px 20px 0px;
	vertical-align: top;
	height: 185px;}

/* SELECTED ILLUSTRATION */

.og-grid li.og-expanded > a::after {
	top: auto;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-bottom-color: #ddd;
	border-width: 15px;
	margin: 175px 0px 0px -140px;}

/* PREVIEW CLASS */

.og-expander {
	position: absolute;
	background: #ddd;
	top: auto;
	left: 0;
	width: 100%;
	margin-top: 10px;
	text-align: left;
	height: 0;
	overflow: hidden;}

.og-expander-inner {
	padding: 30px 30px;
	height: 100%;}

.og-close {
	position: absolute;
	width: 40px;
	height: 40px;
	top: 50px;
	right: 20px;
	cursor: pointer;
	opacity: 1;
	background: url('../images/close.png');
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.og-close:hover {
	opacity:0.5;}

.og-fullimg,
.og-details {
	width: 50%;
	float: left;
	height: 80%;
	overflow: hidden;
	position: relative;}

.og-details {
	padding: 10px 40px 0 20px;}

.og-fullimg {
	text-align: center;
	margin-top:10px;}

.og-fullimg img {
	display: inline-block;
	max-height: 100%;
	max-width: 100%;}

.og-details h3 {
	font-weight: 300;
	font-size: 52px;
	padding: 10px 0 10px;
	margin-bottom: 10px;
	color:#555;}

.og-details p {
	font-weight: 400;
	font-size: 16px;
	line-height: 22px;
	color: #999;}

.og-details a {
	font-size: 16px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 20px;
	background: #d62038;
	border: 3px solid #d62038;
	display: inline-block;
	margin: 30px 0 0;
	outline: none;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}

.og-details a::before {
	content: '\2192';
	display: inline-block;
	margin-right: 10px;}

.og-details a:hover {
	background: #555;
	border-color: #555;
	color: #FFF;}

.og-loading {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ddd;
	box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ccc;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -25px 0 0 -25px;
	-webkit-animation: loader 0.5s infinite ease-in-out both;
	-moz-animation: loader 0.5s infinite ease-in-out both;
	animation: loader 0.5s infinite ease-in-out both;}


/* 06. ABOUT SECTION ================================================== */
#consultingservice p{font-size:14px; text-align:left;}

.seealso {
    background: none repeat scroll 0 0 #d62038;
    border: 2px solid #d62038;
    color: #fff;
    font-size: 12px;
    height: 40px;
    letter-spacing: 1px;
    padding: 8px 20px;	border-radius: 3px;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 100%;
}
.seealso:hover {
    background: none repeat scroll 0 0 #555;
    border: 2px solid #555;
    color: #fff;
    cursor: pointer;-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}



.portraits {
	position: relative;
	list-style-type: none;
	display: inline-block;
	background: #eee;
	background: #FFF;
	margin-bottom: 10px;
	padding-bottom: 10px;}

.portraits img {
	width:100%;
	-webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;}


.portraits img:hover {
	filter:alpha(opacity=80);
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80);
    opacity: 0.8;}

.portraits .name {
	font-size: 18px;
	color: #2e2e2e;
	font-weight: normal;
	font-style: normal;
	margin: 10px 0 10px 0;
	display: inline-block;}

.portraits .poste {
	color: #FFFFFF;
	background-color: #d62038;
	font-size:15px;
	text-transform: uppercase;
	padding: 2px 8px;
	margin-bottom: 10px;
	display: inline-block;}

.portraits .whathedo {
	color: #3b3b3b;
	font-size:14px;}


.portraits .whathedo a {
	padding: 0px 5px 0px 5px;}


/* 07 CONTACT SECTION ================================================== */


#contact form {
	margin-top:20px;}

#contact form input,
#contact form textarea{
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	border:2px solid #FFF;
	box-shadow:none;
	color:#343131;
	resize: vertical;
	font-size:14px;
	letter-spacing:1px;
	margin-bottom:25px;
	padding:5px 10px;
	transition:all .3s ease-in-out;
	width:100%;}

/* SET A HEIGHT TO THE INPUT*/

#contact form input{
	height:40px;
	resize: none;}

/* SET A HEIGHT TO THE TEXTAREA*/

#contact form textarea{
	min-height:120px;}

/* BUTTON SENDER */

#contact form .submit{
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	-webkit-transition:all .3s ease-in-out;
	background:#d62038;
	border:2px solid #d62038;
	color:#FFF;
	font-size:14px;
	height:40px;
	letter-spacing:1px;
	padding:5px 10px;
	text-transform:uppercase;
	transition:all .3s ease-in-out;
	width:100%;}

/* BUTTON SENDER HOVER */

#contact form .submit:hover{
	background:#555;
	border:2px solid #555;
	color:#FFF;
	cursor:pointer;}

/* INPUT AND TEXTAREA WHEN NOTHING  */

#contact form input:required,
#contact form textarea:required{
	background:#FFF url(../img/invalid.png);
	background-position:98% 5px;
	background-repeat:no-repeat;
	box-shadow:inherit;}

/* INPUT AND TEXTAREA WHEN VALID : GOOD */

#contact form input:required:valid,
#contact form textarea:required:valid{
	background:#FFF url(../img/valid.png);
	background-position:98% 5px;
	background-repeat:no-repeat;
	border-color:#d62038;
	color:#d62038;}

/* INPUT AND TEXTAREA WHEN INVALID : NOT GOOD GOES RED */

#contact form input:focus:invalid,
#contact form textarea:focus:invalid{
	background:#FFF url(../img/invalid-red.png) no-repeat 98% 5px;
	border-color:#ec7e7e;
	box-shadow:0 0 2px rgba(236,126,126,0.7);}

/* BLOCK CONTACT RIGHT */

#contact .info {
	width:auto;
	margin-left:3%;
	display:inline-block;
	text-align:left;
	line-height:25px;}

#contact .info p {
	color:#343131; font-size:13px;}

#contact .info h4:first-child {
	margin-top:15px;}

#contact .info h4 {
	color:#343131;
	font-family: 'Roboto', sans-serif;
	text-transform:uppercase;
	font-size:16px;
	font-weight:bold;
	letter-spacing:1px;
	margin-bottom:0px;
	margin-top:30px;}

#contact .info a {
	color:#d62038;
	letter-spacing:1px;
	text-decoration:none;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}

#contact .info a:hover {
	color:#777;
	text-decoration:none;
	-webkit-transition:all .3s ease-in-out;
	-moz-transition:all .3s ease-in-out;
	-ms-transition:all .3s ease-in-out;
	-o-transition:all .3s ease-in-out;
	transition:all .3s ease-in-out;}


/* 08. TWITTER MODULE ================================================== */


	.tweet_list {
		list-style: none;
		margin: 0;
		padding: 0;
		overflow-y: hidden;
		background-color: #FFF;}

		.tweet_list li {
			overflow-y: auto;
			overflow-x: hidden;
			list-style-type: none;}

			.tweet_list li a {
				color:#333;
				text-decoration: none;
				-webkit-transition:all .3s ease-in-out;
				-moz-transition:all .3s ease-in-out;
				-ms-transition:all .3s ease-in-out;
				-o-transition:all .3s ease-in-out;
				transition:all .3s ease-in-out;}

			.tweet_list li a:hover {
				color:#d62038;}

		.tweet_list .tweet_even {
			background-color: #FFF;}

		.tweet_list .tweet_avatar {
			display: none;}

			.tweet_list .tweet_avatar img {
				display: none;}

	     .tweet_list .tweet_time a{
			color:#999;
			font-size:14px;
			margin-left: 10px;}

      #ticker {
        background-color:#FFF;
      	text-align:center;
      	text-align:center;
        overflow-y: hidden;
        position: relative;}

      #ticker ul.tweet_list {
        overflow: hidden;
        font-size:16px;
        height:22px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;}

      #ticker ul.tweet_list li {
        overflow: hidden;
        height:35px;
        font-size:16px;}

      .tweet_list li::before {
	    content: url(../img/littletweet.png);}

	  .tweet_list li img {
		margin-bottom:-2px;}


/* 09. SOCIAL MODULE ================================================== */


#social_module a {
	text-decoration: none;}

#social_module  ul li{
	list-style:none;
	display:inline-block;
	padding: 0px 20px 0px 20px;}

.icon{
	font-family:"Socialico";
	font-weight:400;
	font-style:normal;
	font-size:30px;
	color:#777;
	text-decoration: none;
	-webkit-transition:all .5s ease-in-out;
	-moz-transition:all .5s ease-in-out;
	-ms-transition:all .5s ease-in-out;
	-o-transition:all .5s ease-in-out;
	transition:all .5s ease-in-out;}

.icon:hover{
	color:#d62038;}
  /* DROPDOWN MENU */

  /* Style The Dropdown Button */
  .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }

  /* The container <div> - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }

  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 200px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #f1f1f1}

    /* Show the dropdown menu on hover */
    .dropdown:hover .dropdown-content {
      display: block;
  }

  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
      background-color: #3e8e41;
  }