/* Design CSS Document Table of Contents:
	Reset
	Fonts
	HTML Tags	
		headers
		basic content
		lists
		tables
		links
		Forms
	IDs
	Classes

==================================
	Reset 
================================== */

/* ================================== 
	Fonts
================================== 

@font-face {
    font-family: 'webdings';
    src: url('/ajweb/fonts/webdings.ttf');
}

@font-face {
    font-family: 'wingding';
    src: url('/ajweb/fonts/wingding.ttf');
}*/

/* ================================== 
	HTML Tags
================================== */

/* ========== Headers ========== */

h1,
h2,
h3,
h4,
h5,
h6,
caption,
legend, #js-accordion h3 [type="button"] {
    color: #333333;
}

h1 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

h1 + h2,
h2.resume-name,
h1 + p {
    margin-top: .25em;
}

/* ========== Basic content  ========== */

/* ========== Lists  ==========  */

/* ========== Tables  ==========  */

/* ========== Links ==========  */

a {}

a:link {
    color: #008080;

}

a:visited {
    color: #005C5C;
}

a:hover,
a:hover .ajw {
    color: #2F4F4F;
    transition: all .5s ease-in;

}

a:active,
a:focus,
a:active .ajw,
a:focus .ajw {
    color: #497879;
    transition: all 1s ease-out;
}


/* ========== Forms  ==========  */
button{
	font-size: .9em;
	background-color: transparent;
	border: 1px solid rgba(0, 128, 128, .2);
	border-right-color: rgba(0, 128, 128, .5);
border-bottom-color: rgba(0, 128, 128, .5);
	 border-radius: 1em ;
	padding: .25em .75em;
}
button:hover{
	background-color: rgba(0, 128, 128, .1);
	border-color: rgba(0, 128, 128, .5);
	border-right-color: rgba(0, 128, 128, .2);
border-bottom-color: rgba(0, 128, 128, .2);
}

/* ================================== 
	IDs and Classes (in Alphabetical order)
================================== */

/* ========== A  ==========  */

.ajw {
    /* my logo */
    font-weight: bold;
    font-family: Georgia, serif;
    text-transform: lowercase;
    font-style: italic;
    color: #008080;
    font-size: 1.25em;
}

.ajw span {
    color: #000000;
}

a .ajw span {
    color: #2F4F4F;
}

/*.ajw:after {content:"Alissa J. Leon Watkins"; display: inline-block; margin-left: 1em; font-family: Verdana; font-style: normal; text-transform: capitalize; font-size: 1em;}*/

.ajw-img-egg {
	float: none;
	margin-bottom: 1em;
	border-radius: 50px;
}
.ajw-img-egg img:hover{
	
}

/* ========== B ==========  */

#banner {
    font-size: 1.55em;

}

#banner a,
#nav a,
#footer a {
    text-decoration: none;

}


#banner,
#footer {
    background-image: -webkit-radial-gradient( #D1A46B, #B57744);
    /*-webkit-radial-gradient( rgba(209, 164, 107, .75), rgba(181, 119, 68, .75));*/
    background-color: #755224;
    position: relative;
    z-index: 0;
}

#banner:before,
#footer:before {
    content: "";
    display: block;
    height: 100%;
    width: 100%;
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;

    background-image: -webkit-linear-gradient(0, rgba(255, 255, 255, .014) 50%, transparent 50%),
    -webkit-linear-gradient(0, rgba(255, 255, 255, .015) 50%, transparent 50%),
    -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .02) 50%),
    -webkit-linear-gradient(0, transparent 50%, rgba(255, 255, 255, .02) 50%);

    -webkit-background-size: 13px, 29px, 37px, 53px;


}

#banner a,
#banner a .ajw,
#footer a,
#footer a .ajw {
    position: relative;
    color: #ffffff;
}

#banner a .ajw span,
#footer a .ajw span {
    color: rgba(224, 255, 255, .75);
}

#banner,
#nav,
#content,
#footer {}




/* ========== C  ==========  */

#content {
    display: block;
}

#content,
#footer {
    margin-top: .5em;
}

/* ========== D  ==========  */

.date {
    font-size: .85em;
    color: #333333;
}

.date span {
    white-space: nowrap;
}

/* ========== F  ==========  */

/*.font-webdings { font-family: 'webdings';
    *will not show in FF*
}

.font-wingding {
    font-family: 'wingding';
    *will not show in FF*
}
*/

#footer {
    border-top: 2px solid #000000;
}

#footer,
#nav {
    text-align: center;
    position: relative;
}

/* ========== I  ==========  */

[class*="icon-"]:before {
    /*font-family: Georgia, serif;*/
    content: "";
    display: inline-block;
    margin-right: .25em;
    /*set vertical*/
    vertical-align: text-top;
    /*set horizontal*/
    /*left side~ text-indent:.0; */
    /*right side~ letter-spacing:0; */
}

[class*="icon-"].oval:before {
    border-radius: 50%;
    background-color: #333333;
    color: #ffffff;
    margin-right: .5em;
    padding: 0 .15em .1em;
    font-size: .75em;
}

.icon-arrow:before {
    content: "\27B2";
    text-indent: .1em;
    letter-spacing: .15em;
}

.icon-bullet:before {
    content: "\2022";
    text-indent: .15em;
    letter-spacing: .15em;
}

.icon-equivalent:before {
    content: "\2248";
    text-indent: .05em;
    letter-spacing: .05em;
}

.icon-function:before {
    content: "\0192";
    text-indent: .15em;
    letter-spacing: .15em;
}

.icon-hand:before {
    content: "\270c"; /*content: "\261B"; */
	text-indent: -1em;
    text-indent: .1em;
    letter-spacing: .1em;
}

.icon-rt-neptune:before {
    content: "\2646";
    text-indent: .15em;
    letter-spacing: .15em;
    transform: rotate(90deg);
    margin-right: 0;
}

/*.icon-sun:before {
    content: "\2609";
    text-indent: .15em;
    letter-spacing: .15em;
}

.icon-reference:before {
    content: "\203B";
}*/

h2[class*="icon-"] + h3,
h2[class*="icon-"] + ul h3 {
    margin-top: .25em;
}

/* ========== J ========== */
#js-accordion h3 [type="button"]{
	font-weight: bold;
	font-size: 1em;
}
#js-accordion [type="button"] {
    border-radius: 0 1em 1em 0;
    text-align:left;
    display: flex;
    align-items: center;
	width: 100%;
	padding: .25em;
}

#js-accordion button[type="button"]:before {
	border-radius: 1em 0 0 1em;
		bbackground-color: coral;
/*	padding-right:0;
	position: absolute;
	z-index: 1;
	color: lime;
	margin-top: -.3em;
	margin-left: calc(-1.5em - 15px);*/
	/*margin-top: -.6em;
	margin-left: calc(-1.6em - 15px);*/

}

/*[type="button"]:hover {
    margin-left: -.5em;
    padding-left: .5em;
    padding-right: .5em;
    background-color: rgba(0, 128, 128, .1);
}
*/
[type="button"][aria-expanded="true"]:before {
    
    
}

/* ========== L ==========  */

.link-contact {
    display: none;
}

.location span,
.special-note i {
    display: none;
}


/* ========== N ==========  */

#nav {
    border-bottom: 6px double #000000;
    border-top: 2px solid #000000;
}



/* ========== P ==========  */

#pg-home #banner a,
#pg-about .link-about a,
#pg-contact .link-contact a,
#pg-portfolio .link-portfolio a,
#pg-resume .link-resume a {
    color: #000000;
}
#pg-home .intro, #pg-home .seasons .tree {
    margin-left: auto;
    margin-right: auto;
}
#pg-home .intro{
    float: none;
    margin-bottom: 2em;
    text-align: center;
}



/* ========== R ==========  */

.resume-name {
    font-size: 1.75em;
    margin-bottom: .75em;
}

h2.resume-name {
    font-weight: normal;
}


[href="resume.pdf"]:before,
[href="resume.pdf"]:after {
    content: "\2022";
    display: inline-block;
}

[href="resume.pdf"]:before {
    margin-right: .5em;
}

[href="resume.pdf"]:after {
    margin-left: .5em;
}
[href="manager-resume.pdf"]{
padding: .5em;
border: 1px solid #008080;
border-radius: .5em;
}
/* ========== S ==========  */

.skill-high,
.skill-medium,
.skill-ok,
.skill-native,
.skill-beginner {
    margin-right: 5em;
    position: relative;
}


.skill-high sup,
.skill-medium sup,
.skill-ok sup,
.skill-native sup,
.skill-beginner sup {
    color: #333333;
    position: absolute;
    left: calc(.5em + 100%);
    white-space: nowrap;
}


.skill-high:before,
.skill-medium:before,
.skill-ok:before,
.skill-native:before,
.skill-beginner:before,
.skill-high:after,
.skill-medium:after,
.skill-ok:after,
.skill-native:after,
.skill-beginner:after {
    display: inline-block;
    float: right;
    font-size: 2em;
    margin-top: -.5em;
    content: "\2022";
}

.skill-high:before,
.skill-medium:before,
.skill-ok:before,
.skill-native:before,
.skill-beginner:before {
    color: #999999;
}

.skill-high:after,
.skill-medium:after,
.skill-ok:after,
.skill-native:after,
.skill-beginner:after {
    color: #333333;
}

.skill-high:after,
.skill-native:after {
    content: "\2022 \2022 \2022 \2022 ";

}

.skill-ok:before,
.skill-beginner:before,
.skill-medium:after {
    content: "\2022 \2022 \2022 ";
}

.skill-medium:before,
.skill-ok:after,
.skill-beginner:after {
    content: "\2022 \2022 ";
}

.skill-lists ul {
    margin-left: 0;
    padding-left: 0;
}

.skill-lists li {
    list-style: none;
    margin-bottom: .75em;
    min-width: 210px;
}

/*Mara Wilson's Time*/

.special-note {
    position: relative;
    display: inline-block;
}

.special-note i {
    border-bottom: 1px dotted #000;
    cursor: help;
}

.special-note:hover i,
.special-note:active i,
.special-note:focus i {
    display: block;
    position: absolute;
    bottom: 1em;
    width: 100%;
    text-align: center;
}

/* ========== T ==========  */

ul.timeline-vertical {
    margin-left: .5em;
}

ul.timeline-vertical > li {
    position: relative;
    list-style: none;
}

ul.timeline-vertical > li:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: .5em;
    left: -2em;
    width: 15px;
    height: 15px;
    background-color: #333333;
    border-radius: 50%;
}

ul.timeline-vertical > li:after {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1em;
    left: -1.6em;
    margin-top: 1.27em;
    width: 1px;
    background-color: #666666;
}

ul.timeline-vertical > li:last-child:after {
    bottom: 0;
}



.tree svg {

    fill: #a0613d;
}


/* ========== W ==========  */

/* ================================== 
Media Queries (Mobile First)
================================== */

@media (pointer: coarse) {
    /*touch screen only*/
   /* [type="button"] {
        border: 1px solid #cdc9c9;
        border-top-color: #eee9e9;
        border-left-color: #ffffff;
        margin-left: -.5em;
        padding: 0.35em .5em;
    }
    [type="button"][aria-expanded="false"]:before {
        font-size: 1.25em;
    }*/

}


@media (max-width:345px) {


    /* smaller than my device */
    .skill-high,
    .skill-medium,
    .skill-ok,
    .skill-native,
    .skill-beginner {
        margin-right: 0;
    }

    .skill-high:before,
    .skill-medium:before,
    .skill-ok:before,
    .skill-native:before,
    .skill-beginner:before,
    .skill-high:after,
    .skill-medium:after,
    .skill-ok:after,
    .skill-native:after,
    .skill-beginner:after {
        display: none;
    }

    .skill-high sup,
    .skill-medium sup,
    .skill-ok sup,
    .skill-native sup,
    .skill-beginner sup {
        left: 55%;
    }
}

@media (min-width:480px) {
    .resume-name[class*="col-"] {
        width: 75%;
    }
}

/*480*/

/*600*/

@media (min-width:768px) {
	.ajw-img-egg{
		float: right;
	margin-left: 1.5em;
	}
    .location span {
        display: inline;
    }

    #pg-portfolio #content {
        width: 100%;
    }


}

@media (min-width:1024px) {
    /* h1 {
       position: static;
        width: auto;
        height: auto;
        margin: 0 0 1em 0;

    }*/
    /* ----- B ---- */
    #banner {
        font-size: 1.2em;
        text-align: center;
        padding: 1.25em 1.5em 1.5em 1.5em;
        /*background-color: rgba(86, 52, 0, .05);*/
        border-radius: 50%;
        margin-top: .5em;
        margin-left: .5%;
        min-height: 3.25em;
        display: flex;
        align-items: center;
    }

    #banner .ajw {
        display: block;
        font-size: 1.75em;
    }

    #banner a,
    #nav a {

        font-weight: bold;
    }
    #banner a:hover:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 225%;
        background-image: url(../img/it-flies.gif);
        background-size: 100%;
        background-position: top;

    }

    /* -----  C  ----- */
    #content {width: 100%;}
    #content,
    #footer {
        margin-top: 1em;
    }
    /* ----- F ---- */
    #footer,
    #nav {
        border: none;
    }
    #footer {
        padding-top: 1.5em;
        padding-bottom: 2em;
        border-radius: 0 0 1.5em 1.5em;
    }
    /* ----- I  ----- */
    [class*="icon-"].oval:before {
        /*font-size: 1em;
        padding: .4em .55em .5em;
        margin-top: -.55em;*/
        font-size: 1.5em;
        margin-right: .25em;
        margin-left: -.5em;
        margin-top: -.25em;
    }
    /* ----- L ---- */
    .link-contact {
        display: inline-block;
    }



    /* ----- N ---- */
    #nav {

        padding-top: 2.25em;
        font-size: 1.25em;
    }

    /* ----- P ---- */
    #pg-home #banner {
        transition: all 1s ease-out;
    }

    #pg-resume .col-main {
        width: 53%;
        margin-left: 7%;
    }
    #pg-resume .date {
        position: absolute;
        left: -20%;
        top: .5em;
        width: 12%;
        max-width: 5em;
        font-size: .75em;
    }

    /* ----- S ---- */
    .skill-high,
    .skill-medium,
    .skill-ok,
    .skill-native,
    .skill-beginner {
        margin-right: 7em;
    }

}

@media (min-width:1300px) {
    [class*="icon-"].oval:before {
        padding: .2em .35em .3em;

        margin-top: -.35em;


    }
}

@media (hover: hover) {
    /*not touch screens*/
    /*[type="button"] {
        margin-left: -.5em;
        padding-left: .5em;
        padding-right: .5em;
        / *background-color: rgba(0, 128, 128, .1);* /
        border-right: 1px solid rgba(0, 128, 128, .1);
        border-bottom: 1px solid rgba(0, 128, 128, .2);
    }
    [type="button"]:before {opacity: .8;}
    [type="button"]:hover:before, [type="button"]:active:before {opacity:1;}*/
}


@media print {
    [type="button"] {
        border: none;
    }
    [type="button"]:before {display: none;}
}

/* color key
black: #000000;
very dark gray: #333333; 
light gray: #666666;
*/

/* Reference 
CSS Background: https://www.heropatterns.com/ & https://leaverou.github.io/css3patterns/
Icons: https://www.toptal.com/designers/htmlarrows/ 
SVGs: https://svgsilh.com/ */