body{ 
margin: 0;
padding: 0;
background-color: #0a0a0a;
font: 1em verdana, helvetica, serif;}

#wrapper { 
margin-right: auto;
margin-left: auto;
padding: 0px;
width: 80%;
max-width: 1400px;
background: #ffff
    url("images/KOZMOZdnxWEB2020.jpg ")top left repeat-x;
    
  -moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
 border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;  
    
    -webkit-box-shadow: 9px -5px 5px 0px rgba(40, 164, 222, 0.75);
-moz-box-shadow:    9px -5px 5px 0px rgba(40, 164, 222, 0.75);
box-shadow:         9px -5px 5px 0px rgba(40, 164, 222, 0.75);

    
   
}



.center{
    display: block;
    margin-right: auto;
    margin-left: auto;
}

header.masthead { 
    border: 0px dotted #2927a1;
    margin: 10px; 
    padding: 5px;
    height: 215px;
    background: url("images/EduardosDrawingAAA.png") top right no-repeat;
    }

header.masthead h1 {
	position:top;
	top: 60px;
	right: 10px;
	padding: 0px;
	margin: 0px;
	font:4em Georgia, Times, serif;
	text-align: center;
	color: #2d669f;
	color: hsla (#2d669f);}

header.masthead h1 span { font-size: 2em;
	color: hsla (lightslategray);
}

nav.main-menu { 
    margin: 0px;
    margin-top:-30px;
    padding: 0px;
    text-align: center;
    border-bottom: 2px solid #db3737;
}


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

nav.main-menu ul li {
    display: inline-block;
}

nav.main-menu ul li a {  
    display: block;
    text-decoration: none;
    padding: 0.3em;
    background-color: #83eef4;
    font-size: 0.75em;
    color: #1515f0;
}
    /*begin round corner code*/
    
    -moz-border-radius-topleft: 7px;
-webkit-border-top-left-radius: 7px;
 border-top-left-radius: 7px;
-moz-border-radius-topright: 7px;
-webkit-border-top-right-radius: 7px;
border-top-right-radius: 7px;

    
    
    /*end round corner code*/
    
}

nav.main-menu ul li a:hover{   
    color: #f5f5f5;
    background-color: #db3737;
    border-bottom-color: #db3737;
}

#home nav.main-menu ul li a.home,
#gallery nav.main-menu ul li a.gallery,
#animation nav.main-menu ul li a.animation
#resume nav.main-menu ul li a.resume,
#contact nav.main-menu ul li a.contact{   
    color: #faf7f7;
    background-color: #db3737;
    border-bottom-color: #db3737;}


main.main-area { 
/*    border: 2px dotted black;*/
    margin: 0px; 
    padding: 5px;}

body#home .main-area,
body#gallery .main-area,
body#resume .main-area,
body#contact .main-area 
    
{
    background-color: #caecf7;
    display:block;}
body#resume .main-area,
body#contact .main-area{
    background-color: slategrey;
}

main.main-content {
    display: flex;
    background-color:#FA7925;
    margin: 0;
}


.left-column {
    background: url(images/leftcollumn1.jpg);
    
   padding: 0.2em;
    
    flex: 0 0 205px;
}
#verticalWrapper{
    padding: 8px;
}

.center-column {
    padding: 0.4em;
    
}

.right-column {
    background: url(images/rightslicecollumn2.jpg);
    /**padding: 0.4em;**/
    flex: 0 0 205px;
    
}

.left-column p,
.right-column p {
    margin: 0.8em;
    color: white;
    font-size: 0.9em;
}

.boxRight {
    width: 175px;
    background-color: #1e97ad;
    border:3px solid #020202;
    margin-top: 20px;
    margin-left: 17px;
    margin-bottom: 8px;
    border-radius: 15px;
}

.boxRight h3{
    text-align: center;
    font: 1.3em Georgia, Times, serif;
    color: white;
    padding: 3px 0 3px;
    background-color: #666;
    margin: 0;
    border-top-left-radius: 17px;
    border-top-right-radius: 17px;
}

.boxRight p {
    margin: 4px;
}







footer.footer-area { 
    border-top: 1px solid #db3737;/*  border: 2px dotted green;*/
    margin: 0px; 
    padding: 5px;
    background-color: #bababa;
    font-size: 0.75em;
    text-align: center;
    
    -moz-border-radius-bottomright: 7px;
-webkit-border-bottom-right-radius: 7px;
border-bottom-right-radius: 7px;
-moz-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
border-bottom-left-radius: 7px;



}


.clear-float {  
  clear: both;
height: 0;
font-size: 0.2em;
    
}

figure.thumb {
    background-color: #ffffff;
    padding: 15px 15px 5px;
    margin: 5px;
    float:right;
    text-align: center;
    border-radius: 3px;
    font-size: 0.8em;
    color: #c90000;
    box-shadow: 2px 2px 5px 0px hsl(53, 2%, 78%);}


figure.mason-thumb {
    background-color: #ffffff;
    padding: 15px 15px 5px;
    margin: 6px 0 1em;
    width: 100%;
    display: inline-block;
    box-sizing:border-box;
/*    float:right;*/
    text-align: center;
    border-radius: 3px;
    font-size: 0.8em;
    color: #0027c9;
    box-shadow: 2px 2px 5px 0px hsl(53, 3%, 6%);
}
figure.mason-thumb a img {
    width: 100%; 
}



/*
article.masonry { 
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    
}
*/

/*
.defList {
    border: 2px dotted red;
}

.defTerm {
    border: 2px dotted blue;
}

.defDescription {
    border: 2px dotted green;
}
*/

.defList {
    border-top: 1px solid #646464;
    border-left: 1px solid #646464;
    border-right: 1px solid #646464;
    margin: 0;
    padding: 0;
    min-height: 50px;
}
.defTerm {
    height: 50px;
    width: 130px;
    display: block;
    margin: 0px;
    padding-left: 0;
}

.defDescription {
    border-left: 1px solid #4d4949;
    margin: -50px 0 0 130px;
    min-height: 50px;
    display: block;
    padding: 0 0 0 5px;
}

.defListLast {
    border-bottom: 1px solid #646464;
}

dd ul {
    margin: 0 0 0 25px;
    padding: 5px;
}

dd ul li {
    padding-bottom: 8px;
}

#banner {
	margin: auto;
	
}

#horizontalWrapper {
	padding: 5px;
	background-color: #8c8A8A;
}


/** begin alternate navigation link colors**/


footer a:link { color: #933;
text-decoration: underline;
    
}
footer a:visited { text-decoration: underline;
color: #993332;
}
footer a:hover { text-decoration: none;
color: #993332; 
}
footer a:active {
text-decoration: underline;
color: #993332; 
}





/**** end altnav link colors***/




@media screen and (max-width: 733px)
{
    #wrapper{
        margin: 0;
        width: 100%;
    }
    
    header.mashead h1 {
        font-size 3rem;
        top: 20px;
    }
    
    
    
    
    footer a {
        font-size 1.5em;
    }
    
    
    
    
    
    nav.main-menu ul li {
    display: block;  
    display: block;
    text-decoration: none;
    padding: 0.3em;
        margin-top: 3px;
    background-color: #83eef4;
    font-size: 1.5em;
    color: #1515f0;
}
    
    main.main-content {
        flex-direction: column;
    }  
    
    .boxRight {
        margin-right: auto;
        margin-left: auto;
        width: 70%;
        
    } 
    aside.left-column {
        background-image: none;
        flex: 1 1 auto;
        order: 3;
        
    }

    .center-column {
        flex: 1 1 auto;
        order 1;
    }
    .right-column {
        background-image: none;
        flex: 1 1 auto;
        order: 2;
    }
    
   .left-column p,
   .right-column p {
        color: black;
    }
    
    
header.masthead {
    background-size: 25%;
}

   /**  stard of quary media **/ 
    .defList {

        border-top: none;

        border-left: none; 
        border-right: none; 
        margin: auto; 
        padding: auto; 
        min-height: auto;
}
       .defTerm { height: auto;

        width: auto; 
           display: block; 
           padding: auto; 
           margin: auto; 
           padding-left: auto;
}

    .defDescription { 
        border-left: none;

        margin: auto;
        margin-left: 0.5em;
        min-height: auto; 
        display: block; 
        padding: auto;
}

    .defListLast {

        border-bottom: none; }

    dd ul {

        margin: auto;

        padding: 1em; }

    dd ul li {

        padding-bottom: auto; }
    
    
    body#contact .main-area img
       width: 60%;
    
    
    
}  /**end of 600px media quary**/


@media screen and (max-width: 1000px)
{
    #horizontalWrapper{
        display: none;
    }  
}

@media only screen and (min-width: 1021px) and (max-width: 2500px){
    article.masonry{
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4;
}
}
@media only screen and (min-width: 730px) and (max-width: 1020px){
    article.masonry{
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
}    
}
 @media only screen and (min-width: 390px) and (max-width: 729px){
    article.masonry{
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;

     }   

     
     
    
}


strock: {
	
}