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

Last Modified: April 25, 2018 by Bilal Trufant
author: Bilal Trufant
email: bilaltrufant@gmail.com
website: https://www.design281.com
---------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body {  font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 400; color: #333; margin: 0; padding: 0; }

/* font-family: 'Roboto', sans-serif;  font-family: 'Open Sans', sans-serif; */

#wrapper { max-width: 1200px; margin: 0 auto; position: relative; }

/* TEXT */

h1 { margin: 0 0 1em 0; font-size: 2.8em; font-weight: 700; }
h2 { margin: 0 0 .5em 0; font-size: 1.6em; font-weight: 700; line-height: 1.1em; }
h3 { margin: 0 0 .5em 0; font-size: 1.3em; font-weight: 700; }
h4 { margin: 0 0 1.5em 0; font-size: 1em; font-weight: 700; }

p { margin: 0 0 1.2em 0; line-height: 1.6; }

a { color: #3D9970; text-decoration: none; }
a:visited { color: #008000; }
a:hover { color: #6b6d2e; text-decoration: underline;}

a.button { font-size: 1.1em; font-weight: 300; text-decoration: none; color: #000000; border: 1px solid #7d7f33; padding: 4px 15px; transition: color .5s; transition: background-color .5s; }
a.button:hover { color: #ffffff; background-color: rgba(125,127,51,0.99); }



/* HEADER - HOME */

header { height: 430px; background: #eaf3e9 url(../images/banner_12001-4.png) no-repeat center bottom; position: relative; }

header a.logo { position: absolute; z-index: 1; display: block; width: 196px; height: 40px; 
		background: url(../images/d281logo.png) no-repeat 0 0; 
		background-size: contain;
        top: 26px;
		left: 20px; 
}

header a.logo span { display: none; }

header div.header-intro { position: absolute; top: 13em; left: 25%; text-align: center;}
header div.header-intro .altn { font-size: 2.2em; line-height: 1.3em; margin: 0 0 30px 0; color: #100000; }

/* HEADER - PORTFOLIO */

header.portfolio { height: 240px; background: #eaf3e9 url(../images/banner-bkg.png) repeat; margin-bottom: 2em;}
header.portfolio div.title { position: absolute; width: 50%; top: 8em; left: 25%; text-align: center; }
header.portfolio div.title h1 { font-size: 2.2em; line-height: 1.3em; margin: 0 0 8px 0; color: #100000; }
header.portfolio div.title p { color: #000000; }

header.portfolio.web { height: 200px; }
header.portfolio.design { height: 200px; }
header.portfolio.uh { height: 200px; }

/*SECTION - ALL */

section { padding: 0 30px; }

/* pseudo element */
section::after { content:''; display: block; clear: both; }


/*SECTION - MAIN*/

section.main { margin-top: 30px; margin-bottom: 30px; padding: 0; }
section.main aside { width: 33%; float: left; text-align: center; }
section.main .content { margin: 15px; background: no-repeat center top; padding-top: 85px;  }
section.main .content p { font-size: 0.90em; }

section.main aside h3 a { color: #000; text-decoration: none; }
section.main aside h3 a:hover { text-decoration: underline; }

section.main aside .content.webdev { padding-top: 0px; }
section.main aside .content.graphics { padding-top: 0px; }
section.main aside .content.academic { padding-top: 0px; }

/* SECTION - ATMOSPHERE */

section.atmosphere { background-color: #cc6633; padding-top: 30px; padding-bottom: 30px; color: #fff; }

section.atmosphere article { padding: 0 20px 0 515px; background: url(../images/photo_lounge.jpg) no-repeat 0 5px;
			     min-height: 220px;	}


section.about { background-color: #6b6d2e; padding-top: 30px; padding-bottom: 30px; margin-bottom: 50px; color: #fff; }

section.about article { float: left; padding: 0 2.1em 0 2.1em; min-height: 220px; text-align: center; }
section.about article h2 { font-size: 1.7em;  margin: 0.5em 0 1em 0; }
section.about article p { line-height: 1.7em; text-align: left; margin-bottom: 2em; }
section.about article a { color: #ffffff; text-decoration: underline; text-align:center; }
section.about article a:visited { color: #ffffff; }

section.about article .res_button { font-size: 1em; font-weight: 700; text-align: center; text-decoration: none; background-color: #7d7f33; color: #ffffff; border: 1px solid #ffffff; margin-top: 3em; padding: 8px 16px; transition: color .5s; transition: background-color .5s; }
section.about article .res_button:hover { color: #7d7f33; background-color: rgba(255,255,255,0.99); }


section.atmos2 { background-color: #ff0000; padding-top: 30px; padding-bottom: 30px; color: #fff; }
section.atmos2 article { float: left; padding: 0 0 0 34px; width: 56%;  }
section.atmos2 article h2 { margin: 0 0 1em 0; }
section.atmos2 aside { float: left; width: 40%; }
section.atmos2 aside img { width: 100%; height: auto;  }

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

/* PORTFOLIO ITEMS */

.portfolio-row { max-width: 1200px; margin: 60px auto; padding: 0; }
.l-column { float: left; width: 40%; }
.portfolio-row .r-column h2 {
    margin-bottom: 10px;
    text-transform: uppercase; 
	color: #000;
    font-size: 1.4em;	
	}
.portfolio-row .r-column p { color: #000000; }

.r-column { float: right; width: 55%; }
.r-column img { max-width: 100%; height: auto; margin: auto; }
.l-column img { max-width: 100%; height: auto; margin: auto; }


section.port-items { margin-top: 20px; margin-bottom: 20px; padding: 0 0; text-align: center; }
section.port-items h2 { font-size: 1.7em; color: #000; margin: 40px 0 20px 0; }
section.port-items h2.after { margin: 60px 0 20px 0; }
	
div.gallery { border: 1px solid #ccc; position: relative; }
div.gallery img { display: block; width: 100%; height: auto; }

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .4s ease;
  background-color: #6b6d2e;
}

.gallery:hover .overlay {
  opacity: 0.99;
}

.text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  width: 100%;
  height: auto;
}

.text a { display: block; color: white; font-size: 20px; font-family: Arial, Helvetica, sans-serif; line-height: 1.2em;  text-decoration: underline; }

div.desc { padding: 15px; text-align: center; }
* { box-sizing: border-box; }
.responsive { padding: 0 14px; float: left; width: 33.3%; }




/* SECTION - HOW TO */

section.how-to { background-color: #eee9d9; position: relative; }

section.how-to aside { width: 30%; float: left; margin-right: 10px; }

section.how-to aside .content { padding: 30px 30px 20px 0; }
section.how-to aside .content img { display: block; margin-bottom: 15px; width: 70%; }

section.how-to aside .content h4 { margin-bottom: 0; }
section.how-to aside .content p { margin-bottom: .5em; }
section.how-to aside .content a { display: inline-block; color: #cc6633; font-weight: 700; }

section.how-to blockquote {
	margin: 0; width: 32%; color: #444; background-color: #fff; position: absolute; bottom: 0; right: 4%; }

section.how-to blockquote p { margin: 30px 30px 20px 50px; }

section.how-to blockquote p.quote { font-style: italic; font-size: 1.2em; }

section.how-to blockquote p.credit { color: #777; font-size: .9em; margin-top: 0; padding-left: 20px; line-height: 1.3em; position: relative; }



/* NAVIGATION */

nav { background-color: rgba(36,36,36,.99); position: absolute; top: 0px; left: 0px; padding: 56px 0 0 0; width: 100%; }
																					 /* padding: 46px 0 0 0; */

/* pseudo */
nav::after { content:''; display: block; clear: both; }


nav ul { list-style: none; margin: 0; padding: 0px; } 

nav ul li:hover { background-color: #7d7f33; color: #ffffff; }

/* #2b0306  #7d7f33 */

nav ul li:hover > ul { display: block; }


/* list anchor tags */
nav ul li a { display: inline-block; color: #fff; font-weight: bold; padding: 10px 16px; text-decoration: none; width: auto; position: relative; } 

nav ul li a:visited { color: #ffffff !important; }

nav ul li a:hover { background-color: #7d7f33; color: #ffffff; }

nav ul li ul li a { font-weight: normal; font-size: 14px; }

/* second level nested ul */
nav ul ul { position: absolute; top: 100%; background-color: #2b0306; display: none; }

nav ul ul li { position: relative; }

nav ul ul ul { left: 100%; top: 0px; }


/* navigation top-level */

nav > ul { padding-left: 260px; }

nav > ul > li { float: left; }

nav > ul > li > a { width: auto; padding: 10px 30px 10px 30px; }

/* pseudo element */
nav a[aria-haspopup="true"]::after {
content: '';
display: block; width: 0px; height: 0px; 
position: absolute; 
top: 16px; 
right: 15px; 
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
border-left: 4px solid #fff;
} 

/* override of pseudo element arrow */
nav > ul > li > a[aria-haspopup="true"]::after {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
left: auto; right: auto;
bottom: 2px; top: auto;

}


  .laptop::before, .images::before, .graduation-cap::before {
    margin-right: 0.5em;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
  }

  .laptop::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color:#7d7f33; margin: 0; padding-bottom: 0.4em; content: "\f109";
  }

  .images::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color:#7d7f33; margin: 0; padding-bottom: 0.4em; content: "\f302";
  }

  .graduation-cap::before {
    font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 40px; color:#7d7f33; margin: 0; padding-bottom: 0.4em; content: "\f19d";
  }


/* FOOTER */

footer { font-size: .85em; margin: 40px; color: #000; text-align: center; }

footer .content { display: inline;  }

footer a { margin-left: 30px; color: #777; }
footer a:visited { color: #777; }
footer a:hover { color: #000; }