@charset "utf-8";
/*headline: font-family: 'Montserrat', sans-serif;
Paragraph: font-family: 'EB Garamond', serif; 
*/
/*MLYN Designs color pallete from Adobe XD:
Silky White: #F2F2F2
Golden Honey: #F2DC99
Hot Red: #D90404
Chocolate Brown: #590202
Ivory Black: #260404
Pitch Black: #000000 
*/

.wrapper-main {
	width: 1000px;
	margin: 0 auto;
}
body {font-family:'EB Garamond', serif;
}
h1, h2, h3, h3, h4, h5, h6 {font-family:'Montserrat', sans-serif;
}

/*center an image - img is an inline element*/
img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.navbar-custom {font-family:'Montserrat', sans-serif;
}
/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
	 background-color:#F2F2F2;
}

/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item { 
	color: #D90404;
}

/*progress bar skills resume page*/
.progress {
	height: 20px;
	border-radius: 50px; 
}

.design{
	background-color: #D90404;
}

.skill{
	background-color: #D90404;
}

.language{
	background-color: #D90404;
}


/* Background and text colors for current page link and links on hover and focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover, 
.navbar-custom .dropdown-item:focus { 
	background-color:#D90404;
	color: #F2F2F2;
}

/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
    border-color: rgba(236,240,241,1.00);
    color: #D90404;
}


/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
	 background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}

/*navbar-brand logo*/
.navbar-brand {
    background-image: url("../images/MD_MLYN Designs_Finished LOGO.png");
    background-repeat: no-repeat;
    background-size: 50px auto;
    background-position: 6% center;
    padding-left: 70px;
}

/*header banner section*/
#home_banner {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}

/*rem values are relative to the root html element, 1rem=16px*/
#home_banner h1 {
	font-size: 4rem;
	color: #F2F2F2;
    text-shadow: 3px 5px #363434;
    position: absolute;
	left: 3%;
	bottom: 7%;
}

#about_banner {
    padding-left: 0px;
    padding-right: 0px;
}

/*flexbox container*/
.container {
			display:flex;
	        height: 650px;
			flex-direction:row;
			justify-content:center;
			align-items: baseline;
}

/*flexbox item*/
.element{
	  margin: 1em;
	  padding: 0.5em;
	  flex-basis: 40%;
	  height:400px;
}

.element h2{
		font-size: 2em;
		text-align: center;
		font-weight: 900;
		color: #D90404;
}

/*Home - Flexbox Column background images*/
.basic {
	   background: #F2F2F2 url("") no-repeat center;
	   background-size: cover;
       height: 400px;
}

.anatomy {
	      background: #F2F2F2 url("") no-repeat center;
	      background-size: cover;
          height: 400px;
}

/*Start of About Page*/
.container_about {
			display:flex;
			margin: 0;
			padding: 0;
	        height: 750px;
			flex-direction:row;
			justify-content:center;
			align-items: baseline;
}
.about_bg {background: #F2F2F2 url("") no-repeat center center;
	       background-size:cover;
	       height: 500px;
}
.about_bg h1 {
	text-align:center;
	font-size:4em;
	line-height:500px;
	color:#F2F2F2;
}
.certificate {
	height: 300px;
 	background-color: #F2F2F2; 
	margin-bottom: 20px;
}

.certificate h2 {
	margin-bottom: 20px;
	text-align: center;
	color: #F2F2F2;
	font-size: 2em; 
	line-height: 300px;
}

.outcomes {
	height: 300px;
 	background-color: #FFEEE0;
	margin-bottom: 20px;
}
.outcomes h2 {
	margin-bottom: 20px;
	text-align: center;
	color: #D90404;
	font-size: 2em;
	line-height: 300px;
}

ol li {
	font-size: 1.2em;
}

/*2 col container*/
.container_about {
			display:flex;
			margin: 0;
			padding: 0;
	        height: 750px;
			flex-direction:row;
			justify-content:center;
			align-items: baseline;
}

/*About - Flexbox Column background images*/
.certificate {
	   background-color: #F2F2F2;
	   background-size:cover;
       height: 400px;
}

.outcomes {
	      background: #F2F2F2;
	      background-size:cover;
          height: 400px;
}

/*Start of Contact header Page*/
.contact_bg {background: #9EBAAF url("../images/victoria.jpg") no-repeat    					center center;
	       background-size:cover;
	       height: 500px;	
}

.contact_bg h1 {
	text-align:center;
	font-size:4em;
	line-height:500px;
	color:#E3776C;
}

/*flexbox container and items*/
.container_contact {
			display:flex;
			margin: 0;
			padding: 0;
	        height: 500px;
			flex-direction:row;
			justify-content:center;
			align-items: center;
}

/*first column*/
.contact_img{
	  flex-basis: 40%;
	  margin: 1em;
	  padding: 1em;
	  background: url("../images/window.jpg") no-repeat center center;
	  background-size:cover;
	  height: 400px;
}

/*second column*/
.contact_info{
	  flex-basis: 40%;
	  background-color: white;
	  margin-top: 1em;
	  padding: 1em;
	  height: 400px;
	  align-items: center;
}

.contact_info h2 {
	text-align: center;
	color: #000000;
	font-size: 2em; 
}

.contact_info h4 {
	font-size: 1.2em;
}

/*carousel*/
.carousel{
	padding-left: 0px;
    padding-right: 0px;
}

/*3 col main section*/
.main h2 {text-align: center; 
         font-weight: 800;}

/* Featurettes
------------------------- */
.featurette {
    text-align: center;
	display:flex;
}

.featurette-divider {
  margin: 3rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  padding-top: 60px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03rem;
}

.contact_head {
	color: #D90404;
	font-weight: 900;
}

.contact_side {
	background: white url("../images/contact.jpg") no-repeat center center;
	background-size: cover;
	padding:0;
	height:540px;
}

/*Footer section*/
*{ 
	Padding: 0;
	margin: 0;
	box-sizing: border-box;
}
footer{
	background-color: #000000;
}
.footerContainer{
	width: 100%;
	padding: 70px 30px 20px;
}
	
.socialIcons{
	display: flex;
	justify-content: center;
}
.socialIcons a{
text-decoration: none;
padding: 10px;
background-color: white;
margin: 10px;
border-radius: 50%;
}
.socialIcons a i{
	font-size: 2em;
	color: red;
	opacity: 0.9;
}

/*Hover Effect on Social media Icons*/
.socialIcons a:hover{
	background-color: black;
	transition: 0.5s;
}

.socialIcons a:hover i{
	color: white;
	transition: 0,5s;
}
.fa-instagram, .fa-linkedin, .fa-envelope{
	color: red; 
	padding: 0px;
	text-decoration: none;
}

.footerNav{
	margin: 30px 0;
}

.footerNav ul{
	display: flex;
	justify-content: center;
	list-style-type: none;
}

.footerNav ul li a{
	color: white;
	margin: 20px;
	text-decoration: none;
	font-size: 1.3em;
	opacity: 0.7;
	transition: 0.5s;
}

.footerNav ul li a:hover{
	opacity: 1;
}

.footerBottom{
	background-color: #000000;
	padding: 20px;
	text-align: center;
}

.footerBottom p{
	color: white;
}

.designer{
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 400;
	margin: 0px 5px;
}

/*footer screen size*/
@media (max-width: 700px){
	.footerNav ul{
		flex-direction: column;
	} 
	.footerNav ul li{
		width: 100%;
		text-align: center;
		margin:10px;
	}
}


/*desktop styles end here*/

/*Media Query Breakpoints*/
/*Small Devices ONLY*/
@media (min-width:375px){
#home_banner h1 {
    font-size: 1rem;
	bottom: 3%;
	left: 3%;
	}
}

/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_banner h1 {
    font-size: 1rem;
    bottom: 3%;
	left: 3%;
	}
}

/*MEDIUM SIZE ONLY*/
@media (min-width: 768px) {
  #home_banner h1 {font-size: 2rem;
			   bottom: 5%;
    		   left: 3%;
			  }
  }

/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
	#home_banner h1 {
    	font-size: 3rem;
    	bottom: 5%;
    	left: 3%;
		}
}


.btn-md {
}