body {
    margin: 0;   
    color: #404040; 
    font-family: 'Roboto Condensed', sans-serif;    
}
header {
    font-family: 'Oswald', sans-serif;
    background-color: #ffffff;
    margin:auto;
    padding: 1% 0% 1% 0%;
}
.logo {
    height: 52px;
    display: block;
    margin: auto;
    padding-top:0;
}
.name {
    float:left;
    width:93%;
    padding-top:1%;
}
nav {
    font-family: 'Roboto Condensed' , sans-serif;
    font-size: 1em;
	letter-spacing: .5px;
    padding: 0 0;
    width: 100%;
    margin: 0 auto;
    background-color: #ECECEC;
}
figure {
    width: 100%;
    margin: auto; 
    background-color:#ffffff;   
}

main {
    background-color: #fff;
    width: 92%;
    margin: auto;
    padding: 2% 4%;
    float:left;
}
h1 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.65em;
    color: #4F4F4F;
    letter-spacing: 0em;
    margin: 0;
}
h2 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1em;
    text-align: left;
    letter-spacing: 0em;
    margin: 0;
    padding: 0px;
}
h3 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.25em;
    font-weight: 400;
    text-align: center;
    letter-spacing: 0em;
    margin: 0;
    padding: 2px;
    color: #787878;
}

h4 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1em;
    letter-spacing: 0em;
    margin: 0;
    padding: 0;
}
h5 {
    font-size: .9em;
    font-weight: normal;
    float: left;
    text-align: left;
    margin:0;
}
h6 {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: .7em;
    text-align: left;
    letter-spacing: 0em;
    margin: 0;
    padding: 0px;
}
p {
    text-align: left;
    padding: 0;
    margin:0 0 1% 0;
	font-size: 1em;
}
aside {
    width: 100%;
    float: left;
	font-size: 1em;
    }  	

img{
    max-width: 100%;
}
  
footer {
    background-color: #ECECEC; 
    padding: 1% 0 1.5% 4%;
    margin: auto;
    color: #4a4a4a;
}
ul {
    padding:0;
    margin: 0;
    color: #fff;
}
ul li{
    list-style-type: none;
    padding: 1.25% 0;
    border-bottom: 1px solid #6D6D8A;
    text-align: center;      
}
li.noline {
    border: 0;
}
a:link {
    color: #000000; 
    font-weight: 400;
    text-decoration: none;
    /* text-transform: uppercase; */        
} 
a:visited {
    color:  #04044B; /* #505052;*/ 
    text-decoration: none;
}
a:hover {
    color: #fafafa;
    text-decoration: none;
    background-color: #383838;
}

a.hilite:hover {
    color: #fafafa;
    text-decoration: none;
    background-color: #383838;
    text-transform:capitalize;
} /*--for highlighting-hover<h2>RESUME,<p>pdf"--*/

.bko {
    color: #2C2C2C; 
    border-bottom: 4px solid #B22F16;
    background-color: #fff;
    padding: 0; 
}   /* for current page link/nav color */

aside a:link {    
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.1em;
    text-align: left;
    letter-spacing: 0em;
    margin: 0;
    padding: 0px;
}
    /* -- line-height for links list --*/
    aside a {
    line-height: 175%;
    }
    
    /*-- opacity when hover button ---*/
    a:hover img {
    opacity: 0.5;
	  } 
    /*---   padding right for buuton img ----*/
	aside a img { 
      padding: 0 14px 0 0;
      }       

aside h5 {
    padding: 0;
	font-size: 1em;
	/* -text-align: left;-*/
}
.fa-linkedin-square {
    color: darkblue;
}
.fa-envelope {
    color: cadetblue;
}
.fa-twitter-square {
    color: dodgerblue; 
}

    .galleryItem {
        float: left;
        width: 90%;
	    margin: 5%; 
    }	
.galleryItem h4 {
    font-size: 1em;
    font-weight: 700;
    text-align: left;
    margin: 0;    
}
.galleryItem p {
    font-size: .95em; 
    margin: 0;
    text-align: left;
}
.galleryItem img {
    width: 100%;
}
aside img {
    max-width: 80%;
	float: left;	
}
aside p {
    padding: 10px 0 0 0 ;
	font-size: 1em; 
}
	
footer a:link {
    font-weight: normal;
    text-transform: lowercase;
}
 main img {
	display: block;
    margin: auto;
    max-height: 900px; /*<--*/
	}	
	
div a:hover h4 {
   	background-color: #dddddd; 
      color: #C12406;
      } /* for text link & hover gallery red text */		

 div a:hover img {
	  opacity: 0.6;
	  } /* for opacity when hover gallery item */				

/* ------------------*/
@media screen and (min-width:500px) {
    
	nav {      
      padding: 0 0;
      font-size: 1.1em;
    }
    .galleryItem {
        float: left;
        width: 48%;
        margin: 1%;
    }
    .galleryItem h4 {
    font-size: .9em;
    font-weight: 700;
    text-align: left;
    margin: 0;
    }
    h1 {
        font-size: 2.1em;
    }
    h2 {
        font-size: 1.3em;
    }
    h3 {
    font-size: 1.4em;
    text-align: center;
    } 
	p {
	font-size: 1.02em;
	}
	aside p {
    padding: 20px 0px 0px 0px;
	font-size: 1em; 
    }
	aside img {
    max-width: 90%;
    }	  
    main img {
	display: block;
    margin: auto;
    max-height: 900px; 
	}	
	
	 video {
   	 max-width: 100%;
   	 margin: auto;
	 }

 }
/* ------------------- */ 
@media screen and (min-width:800px) {
 
    header {   
        padding: 1% 0% 1.25% 0%;
        width: 100%;
    }
    nav {
        padding: 0;
      	width: 100%;
        font-size: 1.2em;
    }
    h1 {
    font-size: 2.4em;
    }
    h2 {
    font-size: 1.1em;
    }
    h3 {
    font-size: 1.5em;
    text-align: center;
    }    
    p {
	font-size: 1.05em;
	}
	.logo {
    height: 72px;
    }
    .galleryItem {
    float: left;
    width: 24%;
    margin: .5%;
    }
    figure {
        width: 100%;
    }
    figure img {
    	width: 100%;
    }
    main {
        padding:1% 2%;
        width: 96%;
    }
    aside {
    width: 46%;
    padding: 3% 2%;
    float: left;
    }  
    aside img {
    max-width: 90%;
    } 
	main p {
	padding: 5px 75px 5px 75px;
	}
	main h1 {
	padding: 5px 75px 5px 75px;	
	}
	
    main img {
    display: block;
    margin: auto;
    max-height: 920px; /*<--*/
	} 
	aside p {
      font-size: 1.05em;
	padding: 8px 0px 0px 0px;
    }
	 		 
}
/* ------------------ */            

@media screen and (min-width:1000px) {
    h1 {
    font-size: 2.75em;
    }   
    h2 {
    font-size: 1.25em;
    }
    h3 {
    font-size: 1.6em;
    text-align: center;
    }
    p {
	font-size: 1.1em;
    }
	main p {
	padding: 1px 16% 1px 16%;
	}
	main h1 {
	padding: 2px 16% 2px 16%;
	}
    main img {
    display: block;
    margin: auto;
    max-height: 940px; /*<--*/
	}

	nav {      
	  padding: .375% 0;
      font-size: 1.3em;
    }
    ul{
        text-align:center;
        padding: 0px;
    }
    ul li{
        display:inline; 
        list-style-type: none;
        border:0;
        padding:1% 4%;
        text-align: center;
    }
    .logo {
    height: 84px;
    }   
    .galleryItem {
    float: left;
    width: 24%;
    margin: .5%;
    }	
   .galleryItem p {
    font-size: .8em; 
    margin: 0;
    text-align: left;
    }
    .galleryItem h4 {
    font-size: .9em;
    font-weight: 700;
    text-align: left;
    margin: 0;
    }
    aside img {
    max-width: 95%;
	}
	aside p {
      font-size: 1.1em;
	padding: 6px 0px 0px 0px;
      }		
	    /*a img {
	    float: left;
	    }  */
	  
}