/* @import url("fontawesome-all.min.css");
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,600,600italic"); */

/*
	IdyllAc workspace of the mean page
*/

/* GLOBAL */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0; 
	box-sizing: border-box;
	font: inherit;
	background-color: gray;
	line-height: 1px;
} 


  html {
	scroll-behavior:smooth;
	box-sizing: border-box;
	}  


 /* Container */
	
	/* .content {
		box-sizing: border-box;
		display: block;
		margin-top:0;
		background-color: rgba(27, 27, 27, 0.75);
		color: whitesmoke;
		padding: 1px 8rem;
		text-align: center;
		line-height: 0.5rem;
		font-size: small;
		position: sticky;
	    } */


    .responsive {
	       display: block;
	       margin: auto;
	       width: 60%;
	       height:auto;	 
        } 


  /* Image */
		
    img {
	    display: block;
	    margin: auto;
		width: 60%;
		height: auto;
		padding-top: 20px;

    }

  
	/* Nav */

	 #nav {
		background-color: #333;
		margin: 0;
		padding: 0; 
		text-align: center;
		cursor: pointer;
	}

		/* #nav:after {
			content: '';
			display: block;
			width: 100%;
			height: 0.75em; 
			background-color: #37c0fb;
			background-image: url("images/bg01.png");
		} */

		#nav > ul {
			margin: 0;
		}

			#nav > ul > li {
				position: relative;
				display: inline-block;
				margin-left: 1em;
			}

				#nav > ul > li a {
					color: whitesmoke;
					text-decoration: none;
					border: none;
					display:block;
					padding: 1.7em 0 1em 0;
					font-size:clamp(1.7rem,3vw,1.5rem);
					
				}

				#nav > ul > li:first-child {
					margin-left: 0;
				}


			/*	#nav > ul > li.current {
					font-weight: 300;
				} */


			    /* #nav > ul > li.current:before {
						-moz-transform: rotateZ(45deg);
						-webkit-transform: rotateZ(45deg);
						-ms-transform: rotateZ(45deg);
						transform: rotateZ(45deg);
						width: 0.75em;
						height: 0.75em;
						content: '';
						display: block;
						position: absolute;
						bottom: -0.5em;
						left: 50%; 
						margin-left: -0.375em;
						background-color: #37c0fb;
				}  */


				#nav a:hover {
					color: orange;
					border-bottom-color: transparent;
				} 

				#nav a:active{
					color: limegreen;
					border-bottom-color: transparent;
				} 

				/* #nav > ul > li.current a {
						color: #fff;
				} 

				#nav > ul > li.active a {
					color: limegreen;
				}

				#nav > ul > li.active.current:before {
					opacity: 0;
				}

				#nav > ul > li > ul {
					display: none;
				} 


				header a:hover {
					color: orange;
					border-bottom-color: transparent;
				}  */
				  

  /* Banner */

  #banner {
	background-image: url("../img/banner.jpg"); 
		/* background-position: center; */
		background-size:cover;
		height: 5.8em;
		text-align: center;
		position: relative;
	}

		  #banner header {
			/* background-image: url("../img/banner.jpg");  */
			position:absolute;
			background-size:cover; 
			bottom: 0;
			left: 0;
			width: 100%;
		    background: rgba(27, 27, 27, 0.75); 
			height: 6em;
		} 

		#banner header h1 {
		    display: block;
			margin: auto;
			color: whitesmoke;
			padding: 1.5em 0 2em 0;
			font-family: Georgia, 'Times New Roman', Times, serif;
			letter-spacing: 1px;
			font-size:clamp(2.75rem,5vw,1.5rem);		
			}  


   /* Wrapper */

		 .wrapper {
			background-image: url("../img/banner.jpg");
			background-size:cover;
			margin: 30px;
			padding: 1rem 0 1rem 0;
			height: auto;	
			font-size:clamp(1rem,3vw,3rem);
		} 


		.major h2 {
			display: block;
		    margin: auto;
			text-align: center;
			color: bisque;
			line-height: 130%;
			letter-spacing: 1px;
			font-size:clamp(1.5rem,1.5vw,1.5rem);
		}
		
       

		.major h3 {
			display: block;
			margin: auto;
			color: blanchedalmond;
			text-align: center;
			padding-left: 25px;
			line-height: 200%;
			letter-spacing: 1px;
			font-size:clamp(1rem,1.5vw,1.5rem);
			}



		.btn-link {
			display: block;
			margin: auto;
			width: 40%;
			height: 3rem;
			text-align: center;
			background-color: green;
			color: whitesmoke;
			border-radius: 5px;
			border: none;
			padding: 6px;
			line-height: 2rem;
			text-decoration: none; 
			cursor: pointer;
			font-size:clamp(1rem,3vw,2rem);
		  }
		  
		  .btn-link:hover {
			background-color:darkgreen;
			color: #fff;
		  }

		  .btn-link:active {
			background-color: limegreen;
		  }