@import url('reset.css');
@import url('styles.css');

/*  IMPORT FONTS    */

@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,400i,500,600');
@font-face{ 
	font-family: 'Nexa Light';
	src: url('fonts/nexa_lightfree_macroman/Nexa_Free_Light-webfont.woff') format('woff');
}
@font-face{ 
	font-family: 'Nexa Bold';
	src: url('fonts/nexa_boldfree_macroman/Nexa_Free_Bold-webfont.woff') format('woff');
}
/************************* PHONES **************************/
@media screen and (max-width: 799px) and (min-width: 240px) {
/*  GENERAL STYLING */
    
    body{
        background: #ffffff;/* white*/
        font-size: 15px;
        color: rgba(0,0,0,.8);
        font-family: 'Raleway', sans-serif;
        position: relative;
        line-height: 35px;
        overflow-x: hidden;
    }
    
    
h1{
    text-indent: -5000000px;
}


h2{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 3.6em;
    text-align: left;
}


h3 {
    font-size:2.4em;
    text-align: left;
    margin-bottom: 25px;
}

h4{ font-size:2.2em;
    text-align: center;
    margin: 50px 0;
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
}

h5{
    font-size:1.25em;
    margin: 10px 0;
    font-weight: 500;
}

.bold{font-weight:600;}

p{
    margin-bottom: 20px;
    font-size: 1.2em
}

a{
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}
    
    a:hover {
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}

    a:active {
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}

    a:visited {
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}

.quote-author{
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}

.full-width {
    min-width: 100%;
    max-width:100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
}


.half-width{
    max-width: 100%;
    min-width: 100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
/*    justify-content: center; dont do this, it centers centers the content, headings not aligned */
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.b-bg h4 {
    color: #ffb999;
}

.b-bg{
    background-color: #333333; /*charcoal*/
    color: #fff8f0; /*floral white*/
}

.fw-bg {
    background-color: #fff8f0; /*floral white*/
    color: #333333; /*charcoal*/
}

.w-bg {
    background-color: #ffffff; /*white*/

    color: #333333; /*charcoal*/
}

.g-bg {
    background: #af8d86;
/*    background: rgba(175,141,134,0.75); grullo*/
    color: #ffffff; /*charcoal*/
}

.d-bg {
    background-color: #e5d4c0; /*dust storm*/
    color: #333333; /*charcoal*/
}

.wrapper {
    width: 90%;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 10px;
    box-sizing: border-box;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}
    
/*  END GENERAL STYLING */


/*      HEADER      */

    
    header{
    min-width: 100%;
    max-width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 500;
    background: #333333 /*charcoal*/;
    color: #fdfeec; /*almost white*/
    line-height: 25px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 5px solid #e5d4c0;
    box-sizing: border-box;
    }
    
    #logo{
        position: absolute;
        justify-content: flex-start;
        margin: 10px;
        clip: rect(0px,35px,35px,0px);    
    }
    
    nav {
        width: 100%;
        box-sizing: border-box; 
        justify-content: space-around;
    }
    
    nav ul {
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        box-sizing: border-box;
        margin: 0;

    }
    
    nav ul li {
    display: inline-block;
    margin: 40px 30px 15px 30px;
    }
    
    nav ul li:last-child {
        margin: 10px;
        position: absolute;
        right: 0;
        top: 5px;
    }
    
    nav ul li a{
    color: #fdfeec; /*almost white*/
    text-decoration: none;
}


nav ul li a:hover{
    color: #ffb999; /*peach-orange*/
/*    text-decoration-color: #715c74; lavender 2nd darkest*/
    
}

nav ul li a:active{
    color: #c1a2a0; /*lilac 3rd darkest*/
/*    text-decoration-color: #c1a2a0; lilac 3rd darkest*/
    
}
    
    /*CTA BUTTON STYLES*/
    .cta-button {
    border-color: #ffb999; /*peach-orange*/
    border: 2px solid;
    border-radius: 6px;
    color: #ffb999; /*peach-orange*/;
    padding: 8px 40px;
    font-weight: 500;
    cursor: pointer; 
    box-sizing: border-box;
    
}
    .cta-anim{
    -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: cta-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-animation {
     0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/
    }
     100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}

/* Standard syntax */
@keyframes cta-animation {
    0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/ 
    }
     100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}
    
    


.cta-button:hover{
    background: #ffb999; /*peach*/
    color: #333;
    
        -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: cta-hover-anim;
    animation-duration: 1s;;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-hover-anim {
      from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
}

/* Standard syntax */
@keyframes cta-hover-anim {
    from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
    
}

    /*END CTA BUTTON STYLES*/
    
/*  LANDING */

    #dev-landing,
    #landing {
    background: white;
    min-width: 100vw;
    min-height: 100vh;
    background-position: right;
    background-repeat: no-repeat;
    }
    
    #dev-intro, 
    #intro {
        width: 90vw;
        height: 200px;
        padding: 20px 30px;
        position: relative;
        top: 150px;
        z-index: 5;
        text-align: left;
        display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: flex-start;
        flex-direction: column;
        color: #333333; /*charcoal*/
        box-sizing: border-box;
    }
    
    h2, 
    h2.cursive{
        font-size: 3.6em;
        line-height: 1em;
        font-family: ff-market-web, sans-serif;
        font-style: normal;
        font-weight: 400;
        text-align: left;
    }
    
    .static-text{
    margin-bottom: .5em;
}
    
    .dynamic-text span{
        font-family: 'Raleway', sans-serif;
        font-size: 1.8em;
        color: #333333; /*charcoal*/
        display: block;
        /*    width: 700px;*/
        text-align: left;
        /*    margin: 0 auto;*/
        line-height: 45px;
        padding: 0;
        opacity: 0;
        position: absolute;
        top: 200px;
        max-width: 100%;

        -webkit-animation-name: change-text; /* Safari 4.0 - 8.0 */
        -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */
        animation-name: change-text;
        animation-duration: 15s;
        animation-iteration-count: infinite;
        animation-direction: initial;
        animation-fill-mode: initial;
        animation-play-state: initial;
    
}
    /* Safari 4.0 - 8.0 */
@-webkit-keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

/* Standard syntax */
@keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.text1{
    animation-delay: 0s;
}

.text2{
   animation-delay: 5s;
}

.text3{
    animation-delay: 10s;
}
    
    
#look{
    margin-top: 165px;
}

/* END LANDING*/

/*      PORTFOLIO       */    

#portfolio{
    height: 100%;
    padding-top: 100px;

}
    
#work{
    min-width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}
    
#work li{ 
    text-align: center;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fdfeec; /*almost white*/
    background-size: cover;
    background-position: center;
/*    padding: 10% 0;*/
    font-weight: 400;
/*    text-shadow: 2px 2px 4px #000000;*/
    margin-bottom: 5px; 
/*    font-variant: small-caps;*/
    position: relative;
}
    
    #work li:last-child {margin-bottom: 0;}
    
.half-tile {
    width: 100%;
/*    margin: 0.125% 0;*/
    
}

#lybra{background: url('../images/lybra-sm.jpg');}
#ari{background: url('../images/ari-figure.jpg');}
#radiohumber{background: url('../images/radiohumber.jpg');}
#host{background: url('../images/hostapp.jpg');}
#mercury{background: url('../images/mercury-mail.jpg');}
#sinabro{background: url('../images/sinabro.jpg');}   
    
#work li a {
    color: #fdfeec; /*almost white*/
    font-size: 2.5em;
    text-decoration: none;
    padding: 25% 0; 
}
    
/* ---------------------LI animation effects saddie -----------------------*/

/*---------------*/
/***** Sadie *****/
/*---------------*/

/*Before caption enter this gradient*/
/*#work li a::before,*/
.caption::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

/*sets the smooth transition*/

.caption::before,
.effect-sadie p {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
/*	padding: 1em;*/
    padding-bottom: 3em;
	width: 100%;
/*    height: 100%;*/
	opacity: 1;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
/*    z-index: 3;*/
    margin-bottom: 0;
    font-size: 1.3em;
}

/* Sets hover state*/
.effect-sadie:hover .caption::before,
.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*------------- END ANIMATION EFFECT-----------*/
    
    
    
    
 /* END PORTFOLIO STYLING */
    
/* Parallax styling */    
    .parallax {
    /* The image used */
    background-image: url("../images/banner-bg.jpg");

    /* Set a specific height */
    min-height: 300px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#p1{
    background-image: url("../images/parallax1b.jpg");
}

#p2{
    background-image: url("../images/parallax2.jpg");
}

#p3{
    background-image: url("../images/banner-bg.jpg");
}

/* END Parallax styling */
    
/*      SKILLS       */
#contact, 
#profile-info {
    flex-direction: row;
}
    
    
.card{
    background: white;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    box-sizing: border-box;
    margin-bottom: 25px;
    
}

.card h5 {
    max-width: 100%;
    display: block;
/*    border: blue 1px solid;*/
    color: #ffffff;
    background: #af8d86;
    font-family: 'nexa bold', 'raleway', sans-serif;
    margin-top: 0;
    padding: 2.5% 5%;
    font-size: 1.3em
}

.card img {
    width: 100%;
/*
    display: block;
    border: blue 1px solid;
*/
}

.card ul {
    min-width: 90%;
    padding: 3%;
    font-size: 1.2em
}

#skills{

    flex-direction: row;
    min-height: 100%;
    min-width: 100%;
    justify-content: flex-start;
    padding: 100px 0;
    background: url('../images/skills-bbg.jpg');
    background-size: cover;
    box-sizing: border-box;
}

#skills .wrapper{
    flex-direction: row;
    justify-content: space-around;
    padding-bottom: 50px;
    box-sizing: border-box;
}

#skills h3 {
    display: block;
    min-width: 100%;
    color: #333333; /*charcoal*/
}

#skills ul{
    min-width: 100%;
}

#skills li {
    display: block;
    font-size: 0.9em;
     color: #333333; /*charcoal*/
    text-align: left;
}


#tools {

    flex-direction: column;
    justify-content: flex-start;
    
}

#tools ul {
    width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    box-sizing: border-box;
    margin-bottom: 50px;
    justify-content: space-around;
    flex-wrap: wrap;
}
#tools ul li{
    display: inline-block;
    margin: 5px 0.85%;
    float: left;
    text-align: center; 

}

#tools ul li img{
    width: 50px;
}
    
    
#cv a {
    margin-top: 100px;
}

#cv h6{
    margin-top: 150px;
    margin-bottom: 50px;
    font-size: .9em;
}

#cv h6 a {
    color: #e5d4c0; /*dust storm*/
}

/*      END SKILLS       */
   
/*      ABOUT       */

#about{
    height: 700px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    background: url('../images/about-bg.jpg');
    width: 100%;
    height: 100%;
    padding: 100px 0;
}


.side-text {
max-width: 90%;
margin: 0 10%;


}

/*      END About       */    
    
/*          Contact         */

#contact{
/*    background: #e3cebd rose lightest pruple;*/
}

#contact p {text-align: center}

form{
    width: 90%;
    margin: 0 auto;
}

fieldset {border: none;}

input, 
textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px;
    border-color: #321f30 /*plum color darkest*/;
    border-radius: 2%;
    font-size: 1.2em;
    font-family: 'Raleway', sans-serif;
    color: white;
    background: #333333;
    border-bottom: 2px solid floralwhite;
}

textarea{
    height: 150px;
     border-radius: 1%;
    
    
}

input[type='submit']{
    background: #333333; /*lilac 3rd darkest*/
}

input[type='submit']:hover{
    background: #ffb999; /*peach*/
    color: #333;
}


.button{
    background: #ec7e5c; /*lilac 3rd darkest*/
    height: 40px;
    width: 20%;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 600px;
    left: 38%;
    border-radius: 2px;
    box-shadow: 2px 2px 2px grey;
}

.social{
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    justify-content: center;
/*
    padding-bottom: 50px;
    border-bottom:  2px solid #e5d4c0 duststorm;
*/
}

.social li{
    margin: 0 20px;
} 

#profile{
/*    min-height: 100%;*/
    width: 30%;
    border-radius: 100%; 
    margin: 50px auto;
}

/*          END Contact         */  
    
/*          Footer              */

footer {
    min-width: 100%;
    height: 30px;
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    background: #333333 /*charcoal*/;
    color: floralwhite; /*floralwhite*/
    text-decoration: none;
    text-align: center;
    font-size:0.5em;
    border-top: 5px solid #e5d4c0;
}

/*         END Footer              */
    
    
    
    
    
/*                OTHER PAGES STYLING                 */
    
/*GENERAL STYLING*/
.page-wrapper{
    width: 90%; 
    margin: 0 auto;
}
    
.project-title{
    text-align: center;
    line-height: 100px;
}

.banner{
    width: 100vw;
    height: 400px;
    margin-top: 110px;
    justify-content: center;
    flex-direction: row;
    
}
    
h2.project-title {
    text-align: left;
    color: #fdfeec /*almost white*/;
    font-family: /* 'Nexa Light',*/'Raleway', sans-serif;
    font-size: 3em;
    line-height: 2em;
    position: absolute;
    top: 130px;
/*    margin-left: 25%*/
/*    text-shadow: 2px 2px 4px #0d0d0d ;*/
    
}
    
    p.project-description{
        color:white;
        position: absolute;
        top: 230px;
    }
    
    .concept {
        background: white;
        
    }
/*
    .concept h2 {
    font-size: 3em;
    color: rgb(50,31,48) plum color darkest;
    line-height: 20px;
    margin-top: 50px;
}
*/
    
/*
    .challenge {
        background: #333333;
        color: white;
    }
*/
    
/* ARI */
    
    #ari-banner{
    background: url('../images/ari-banner2.jpg');
    background-size: cover;
    background-position: top;
}

#ari-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right, rgba(0,0,0,1),rgba(0,0,0,0.8));
	opacity: .80; 
    height: 400px;
}

    
/*
    #ARI-logo{top:200px;
    left: 46%;}
*/

/*Lybra*/


video {
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}

.side-nav{
    width: 10%;
/*    border: 1px solid red;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    position: fixed;
    top: 200px;
    left: 0;
    
    
}

.side-nav ul {
    width: 100%;
/*    border: 1px solid green;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    
    
}

.side-nav ul li{
    width: 100%;
    margin: 0;
    padding: 20px; 
    text-align: center;
    border-bottom: 1px solid white;
    background: #fdfeec; /*almost white*/
    box-shadow: 0px 0px 10px grey;
}

.side-nav ul li:first-child,
.side-nav ul li:nth-child(4){
    border-right: 5px solid #321f30; /*plum darkest*/
}

        .side-nav ul li:first-child a,
        .side-nav ul li:nth-child(4) a{
            color:#321f30;
        }

.side-nav ul li:nth-child(2),
.side-nav ul li:nth-child(5){
    border-right: 5px solid #715c74; /*#715c74 lavender 2nd darkest*/
}

        .side-nav ul li:nth-child(2) a,
        .side-nav ul li:nth-child(5) a{
            color:  #715c74;
        }

.side-nav ul li:nth-child(3),
.side-nav ul li:nth-child(6){
    border-right: 5px solid #c1a2a0; /*lilac 3 darkest*/
}

        .side-nav ul li:nth-child(3) a,
        .side-nav ul li:nth-child(6) a{
            color: #c1a2a0;
        }


.side-nav ul li a:hover {
    color: #ec7e5c /*salmon*/ ;
}

.video-promo{
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    height: 646px;
    background: black;
}

video {width: 100%}



#mercury-banner{
    background-image: url('../images/mercury-banner.jpg');
    background-size: cover;
    background-position: bottom;
}

#mercury-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#321f30 /*plum color darkest*/,#715c74/*2nd darkest*/,#c1a2a0/*,#ec7e5c salmon */);
	opacity: .8; 
    height: 800px;
}
    
/*
    .project-logo, 
    .slogan {
    position: absolute;
	top: 300px;
    left: 33%;
    z-index: 3;
    box-shadow: 10px 10px 5px #000;
    }
*/


.sketches,
.hifi{
    display: flex;
    display: -webkit-flex;
    display:-ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.comp{
    margin: 5px;
    background: white;
/*    max-height: 700px;*/
}


#lybra-banner{
    background-image: url('../images/lybra-banner.jpg');
    background-size: cover;
    background-position: top;
}

#lybra-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/);
	opacity: .6; 
    height: 800px;
}

#lybra-logo{
    top:200px;
    left: 43%;
}

#merc-slogan{
    left: 38%;
    top: 450px;
}

#merc-1 {background:;}






    
/* PARALLAX IMAGES */
#ari-1 {
    background-image: url("../images/ari-1.jpg");
}

.parallax-container{
    background-image: url('../images/blank-laptop.png');
    background-size:contain;
    min-height: 2000px;
    background-position: bottom;
    background-repeat: no-repeat;
}

#lybra-1 {
    background-image: url("../images/lybra-par.png");
}

#lybra-2 {
    background-image: url("../images/lybra-lofi-proto.png");
}

#merc-1 {background-image: url("../images/merc-1.jpg");}

#merc-2 {background-image: url("../images/merc-2.jpg");}

#ari-2{background-image: url("../images/ari-2.png");}

/******under dev******/

#dev-landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/developing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;
}

#dev-intro{
    height: 500px;
}

.other-projects{
    margin-top:50%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    height: 30%;
    
}

.dev-foot{}
    
    
    
    
    
    
    
    
    
    
    
    
    
/************************* TABLET **************************/
@media screen and (max-width: 1023px) and (min-width: 800px) {
    
     body{
/*            body{
/*        background: red;*/
      font-size: 16px;  
        
    }
    
    h2, 
    h2.cursive{
        font-size: 4em;
    }
    
/*  GENERAL STYLING */

body {
    background: #ffffff;/* white*/
    font-size: 18px;
    color: rgba(0,0,0,.8);
    font-family: 'Raleway', sans-serif;
    position: relative;
    line-height: 35px;
    overflow-x: hidden;
}

h1{
    text-indent: -5000000px;
}


h2{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 2em;
    text-align: left;
}


h3 {
    font-size:2.4em;
    text-align: left;
    margin: 50px 0;
}

h4{ font-size:2em;
    text-align: center;
    margin: 50px 0;
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
}

h5{
    font-size:1.25em;
    margin: 10px 0;
    font-weight: 500;
}

.bold{font-weight:600;}

p{
    margin-bottom: 20px;
}

a{
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}



.quote-author{
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}

.full-width {
    min-width: 100%;
    max-width:100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
}


.half-width{
    max-width: 50%;
    min-width: 50%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
/*    justify-content: center; dont do this, it centers centers the content, headings not aligned */
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.b-bg h4 {
    color: #ffb999;
}

.b-bg{
    background-color: #333333; /*charcoal*/
    color: #fff8f0; /*floral white*/
}

.fw-bg {
    background-color: #fff8f0; /*floral white*/
    color: #333333; /*charcoal*/
}

.w-bg {
    background-color: #ffffff; /*white*/

    color: #333333; /*charcoal*/
}

.g-bg {
    background: #af8d86;
/*    background: rgba(175,141,134,0.75); grullo*/
    color: #ffffff; /*charcoal*/
}

.d-bg {
    background-color: #e5d4c0; /*dust storm*/
    color: #333333; /*charcoal*/
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*  END GENERAL STYLING */


/*      HEADER      */

header{
    min-width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 500;
    background: #333333 /*charcoal*/;
    color: #fdfeec; /*almost white*/
    line-height: 25px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 5px solid #e5d4c0;
    box-sizing: border-box;
}


#logo {
    position: absolute;
    margin: 18px 45px;
    justify-content: flex-start;
}


nav {
    width: 45%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
/*    margin-right: 80px;*/
    justify-content: flex-end;
    box-sizing: border-box;
}

nav ul {
/*   float: right;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    box-sizing: border-box;
    margin: 22px 30px;
}

nav ul li {
/*    display: inline-block;*/
    margin: 0 20px;
}

nav ul li a{
    color: #fdfeec; /*almost white*/
    text-decoration: none;
}


nav ul li a:hover{
    color: #ffb999; /*peach-orange*/
    text-decoration-color: #715c74; /*lavender 2nd darkest*/
    
}

nav ul li a:active{
    color: #c1a2a0; /*lilac 3rd darkest*/
    text-decoration-color: #c1a2a0; /*lilac 3rd darkest*/
    
}

/*CTA BUTTON AND ANIMATION*/

.cta-button {
    border-color: #ffb999; /*peach-orange*/
    border: 2px solid;
    border-radius: 6px;
    color: #ffb999; /*peach-orange*/;
    padding: 10px 40px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
}



.cta-anim{
    -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: cta-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-animation {
      0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/
    }
    100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}

/* Standard syntax */
@keyframes cta-animation {
    0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/ 
    }
     100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}



.cta-button:hover{
    background: #ffb999; /*peach*/
    color: #333;
    
        -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: cta-hover-anim;
    animation-duration: 1s;;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-hover-anim {
      from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
}

/* Standard syntax */
@keyframes cta-hover-anim {
    from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
    
}
/*END CTA BUTTON STYLES*/
/*  LANDING */

#landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/landing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;    
}

#dev-intro,
#intro{
    width: 35%;
    height: 600px;
    padding: 50px;
    position: relative;
    top: 200px;
    z-index: 5;
    text-align: left;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    flex-direction: column;
    color: #333333; /*charcoal*/
    box-sizing: border-box;
}

h2.cursive{
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 4em;
    text-align: left;
}


.static-text{
    margin-bottom: .5em;
}

.dynamic-text span{
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    color: #333333; /*charcoal*/
    display: block;
/*    width: 700px;*/
    text-align: left;
/*    margin: 0 auto;*/
    line-height: 45px;
    padding: 1rem 0;
    opacity: 0;
    position: absolute;
    top: 120px;
    max-width: 100%;
    
    -webkit-animation-name: change-text; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */
    animation-name: change-text;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

/* Standard syntax */
@keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.text1{
    animation-delay: 0s;
}

.text2{
   animation-delay: 5s;
}

.text3{
    animation-delay: 10s;
}



#look{
    margin-top: 165px;
}

/* END LANDING*/

/*      PORTFOLIO       */
/*Work*/
#portfolio{
    height: 100%;
    padding-top: 75px;

}

#work{
    min-width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}

#work li{ 
    text-align: center;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fdfeec; /*almost white*/
    background-size: cover;
    background-position: center;
/*    padding: 10% 0;*/
    font-weight: 400;
/*    text-shadow: 2px 2px 4px #000000;*/
    margin: 0.125%;
/*    font-variant: small-caps;*/
    position: relative;
}

/*
#work li:nth-child(5),
#work li:nth-child(5),{
    margin-bottom:0;
}
*/


.half-tile {
    width: 49.75%;
/*    margin: 0.125% 0;*/
    
}

#lybra{background: url('../images/lybra-sm.jpg');}
#ari{background: url('../images/ari-figure.jpg');}
#radiohumber{background: url('../images/radiohumber.jpg');}
#host{background: url('../images/hostapp.jpg');}
#mercury{background: url('../images/mercury-mail.jpg');}
#sinabro{background: url('../images/sinabro.jpg');}



#work li a {
    color: #fdfeec; /*almost white*/
    font-size: 2.5em;
    text-decoration: none;
    padding: 25% 0; 
}

/*
#work li.ari:hover {
    
    background: url('../images/ari-figure.jpg');
    background-color: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    transition-duration: 3s;
    color: #ff704a salmon
}
*/

/* ---------------------LI animation effects saddie -----------------------*/

/*---------------*/
/***** Sadie *****/
/*---------------*/

/*Before caption enter this gradient*/
/*#work li a::before,*/
.caption::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/*
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
*/
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

/*sets the smooth transition*/

.caption::before,
.effect-sadie p {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
/*	padding: 1em;*/
    padding-bottom: 3em;
	width: 100%;
/*    height: 100%;*/
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
/*    z-index: 3;*/
    margin-bottom: 0;
    font-size: 1.3em;
}

/* Sets hover state*/
.effect-sadie:hover .caption::before,
.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*------------- END ANIMATION EFFECT-----------*/

/*      END PORTFOLIO       */

/* Parallax styling */

.parallax {
    /* The image used */
    background-image: url("../images/banner-bg.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#p1{
    background-image: url("../images/parallax1b.jpg");
}

#p2{
    background-image: url("../images/parallax2.jpg");
}

#p3{
    background-image: url("../images/banner-bg.jpg");
}

/* END Parallax styling */


/*      SKILLS       */
#contact, 
#profile-info {
    flex-direction: row;
}
.card{
    background: white;
/*    margin:10px 0;*/
    width: 30%;
/*    padding: 1%;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    box-sizing: border-box;
/*    border-radius: 10px;*/
/*    border: #333333 solid 2px;*/
}

.card h5 {
    max-width: 100%;
    display: block;
/*    border: blue 1px solid;*/
    color: #ffffff;
    background: #af8d86;
    font-family: 'nexa light', 'raleway', sans-serif;
    margin-top: 0;
    padding: 3%;
}

.card img {
    width: 100%;
/*
    display: block;
    border: blue 1px solid;
*/
}

.card ul {
    min-width: 58%;
    padding: 3%;
/*    display: block;*/
/*    border: blue 1px solid;*/
}

#skills{
    
/*    border: 1px red solid;*/
    flex-direction: row;
    min-height: 100%;
    min-width: 100%;
    justify-content: flex-start;
    padding: 75px 0;
    background: url('../images/skills-bbg.jpg');
    background-size: cover;
}

#skills .wrapper{
    flex-direction: row;
/*    border: 1px black solid;*/
    justify-content: space-around;
    padding-bottom: 50px;
/*     border-radius: 10px;*/
/*    background: rgba(225,225,225,0.75);*/
}

#skills h3 {
    display: block;
    min-width: 100%;
    margin-bottom: 50px;
    color: #333333; /*charcoal*/
}

#skills ul{
/*    float: left;*/
    min-width: 100%;
/*    margin:;*/
}

#skills li {
    display: block;
/*    float: left;*/
    font-size: 1em;
/*    width: 40%;*/
/*    padding-bottom: 20px;*/
     color: #333333; /*charcoal*/
    text-align: left;
}


#tools {

    flex-direction: column;
    justify-content: flex-start;
    
}

#tools ul {
    width: 80%;
    padding: 0 10%;
    margin-bottom: 50px;
    align-items: center;
}
#tools ul li{
    display: inline-block;
    margin: 20px 0.85%;
    float: left;
    text-align: center; 
}
/*#tools ul li:last-child{}*/

#tools ul li img{
    width: 70px;
}
#cv a {
    margin-top: 150px;
}

#cv h6{
    margin-top: 150px;
    margin-bottom: 50px;
    font-size: .7em;
}

#cv h6 a {
/*    color: #af8d86; grullo*/
    color: #e5d4c0; /*dust storm*/
}

/*      END SKILLS       */



/*      About       */

#about{
    height: 700px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    background: url('../images/about-bg.jpg');
    width: 100%;
    height: 100%;
    
}

.side-text {
max-width: 45%;
margin: 100px 10%;


}

/*      END About       */


/*          Contact         */

#contact{
/*    background: #e3cebd rose lightest pruple;*/
}

#contact p {text-align: center}

form{
    width: 50%;
    margin: 0 auto;
    border-color: linear-gradient(to bottom left,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/) 2px solid;
    )
}

fieldset {border: none;}

input, 
textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px;
    border-color: #321f30 /*plum color darkest*/;
    border-radius: 2%;
    font-size: 0.8em;
    font-family: 'Raleway', sans-serif;
    color: white;
    background: #333333;
    border-bottom: 2px solid floralwhite;
}

textarea{
    height: 150px;
     border-radius: 1%;
    
    
}

input[type='submit']{
    background: #333333; /*lilac 3rd darkest*/
}

input[type='submit']:hover{
    background: #ffb999; /*peach*/
    color: #333;
}


.button{
    background: #ec7e5c; /*lilac 3rd darkest*/
    height: 40px;
    width: 20%;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 600px;
    left: 38%;
    border-radius: 2px;
    box-shadow: 2px 2px 2px grey;
}

.social{
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    justify-content: center;
/*
    padding-bottom: 50px;
    border-bottom:  2px solid #e5d4c0 duststorm;
*/
}

.social li{
    margin: 0 20px;
} 

#profile{
/*    min-height: 100%;*/
    width: 30%;
    border-radius: 100%; 
    margin: 50px auto;
}

/*          END Contact         */



/*          Footer              */

footer {
    min-width: 100%;
    height: 30px;
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    background: #e5d4c0 /*duststorm*/;
    color: floralwhite; /*floralwhite*/
    text-decoration: none;
    text-align: center;
    font-size:0.5em;
    border-top: 10px solid #e5d4c0;
}

/*         END Footer              */







/*                      PROJECT PAGES                 */
/*GENERAL STYLING*/
.page-wrapper{
    width: 60%; 
    margin: 0 auto;
}

/*Lybra*/


video {
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}
.concept h2 {
    font-size: 3em;
    color: rgb(50,31,48) /*plum color darkest*/;
    line-height: 20px;
    margin-top: 50px;
}
.slogan{
    text-align: center;
    line-height: 150px;
}

.banner{
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    height: 800px;
    
}

.side-nav{
    width: 10%;
/*    border: 1px solid red;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    position: fixed;
    top: 200px;
    left: 0;
    
    
}

.side-nav ul {
    width: 100%;
/*    border: 1px solid green;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    
    
}

.side-nav ul li{
    width: 100%;
    margin: 0;
    padding: 20px; 
    text-align: center;
    border-bottom: 1px solid white;
    background: #fdfeec; /*almost white*/
    box-shadow: 0px 0px 10px grey;
}

.side-nav ul li:first-child,
.side-nav ul li:nth-child(4){
    border-right: 5px solid #321f30; /*plum darkest*/
}

        .side-nav ul li:first-child a,
        .side-nav ul li:nth-child(4) a{
            color:#321f30;
        }

.side-nav ul li:nth-child(2),
.side-nav ul li:nth-child(5){
    border-right: 5px solid #715c74; /*#715c74 lavender 2nd darkest*/
}

        .side-nav ul li:nth-child(2) a,
        .side-nav ul li:nth-child(5) a{
            color:  #715c74;
        }

.side-nav ul li:nth-child(3),
.side-nav ul li:nth-child(6){
    border-right: 5px solid #c1a2a0; /*lilac 3 darkest*/
}

        .side-nav ul li:nth-child(3) a,
        .side-nav ul li:nth-child(6) a{
            color: #c1a2a0;
        }


.side-nav ul li a:hover {
    color: #ec7e5c /*salmon*/ ;
}

.video-promo{
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    height: 646px;
    background: black;
}

video {width: 100%}



#mercury-banner{
    background-image: url('../images/mercury-banner.jpg');
    background-size: cover;
    background-position: bottom;
}

#mercury-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#321f30 /*plum color darkest*/,#715c74/*2nd darkest*/,#c1a2a0/*,#ec7e5c salmon */);
	opacity: .8; 
    height: 800px;
}
    .project-logo, 
    .slogan {
    position: absolute;
	top: 300px;
    left: 33%;
    z-index: 3;
/*    box-shadow: 10px 10px 5px #000;*/
    }
.slogan {
    text-align: center;
    font-size: 1.7em;
    color: #fdfeec /*almost white*/;
    top: 400px;
    left: 36%;
    text-shadow: 2px 2px 4px #0d0d0d ;
    
}

.sketches,
.hifi{
    display: flex;
    display: -webkit-flex;
    display:-ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.comp{
    margin: 5px;
    background: white;
/*    max-height: 700px;*/
}


#lybra-banner{
    background-image: url('../images/lybra-banner.jpg');
    background-size: cover;
    background-position: top;
}

#lybra-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/);
	opacity: .6; 
    height: 800px;
}

#lybra-logo{
    top:200px;
    left: 43%;
}
#ARI-logo{top:200px;
    left: 46%;}
#merc-slogan{
    left: 38%;
    top: 450px;
}

#merc-1 {background:;}

/* TURNED OFF FOR MOBILE STYLING

#ari-banner{
    background: url('../images/ari-banner2.jpg');
    background-size: cover;
}

#ari-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right, aliceblue salmon`,#e3cebd rose,#321f30plum);
	opacity: .55; 
    height: 800px;
}
*/

#ari-1 {
    background-image: url("../images/ari-1.jpg");
}

.parallax-container{
    background-image: url('../images/blank-laptop.png');
    background-size:contain;
    min-height: 2000px;
    background-position: bottom;
    background-repeat: no-repeat;
}

#lybra-1 {
    background-image: url("../images/lybra-par.png");
}

#lybra-2 {
    background-image: url("../images/lybra-lofi-proto.png");
}

#merc-1 {background-image: url("../images/merc-1.jpg");}

#merc-2 {background-image: url("../images/merc-2.jpg");}

#ari-2{background-image: url("../images/ari-2.png");}

/******under dev******/

#dev-landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/developing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;
}

#dev-intro{
    height: 500px;
}

.other-projects{
    margin-top:50%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    height: 30%;
    
}

.dev-foot{}

    


/************************* LAPTOP UP TO 19"**************************/

@media screen and (max-width: 1599px) and (min-width: 1024px) {
      body{
/*            body{
/*        background: red;*/
      font-size: 18px;  
    }
        h2, 
    h2.cursive{
        font-size: 4em;
    }
    
    
/*  GENERAL STYLING */

body {
    background: #ffffff;/* white*/
    font-size: 18px;
    color: rgba(0,0,0,.8);
    font-family: 'Raleway', sans-serif;
    position: relative;
    line-height: 35px;
    overflow-x: hidden;
}

h1{
    text-indent: -5000000px;
}


h2{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 2em;
    text-align: left;
}


h3 {
    font-size:2.4em;
    text-align: left;
    margin: 50px 0;
}

h4{ font-size:2em;
    text-align: center;
    margin: 50px 0;
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
}

h5{
    font-size:1.25em;
    margin: 10px 0;
    font-weight: 500;
}

.bold{font-weight:600;}

p{
    margin-bottom: 20px;
}

a{
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}



.quote-author{
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}

.full-width {
    min-width: 100%;
    max-width:100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
}


.half-width{
    max-width: 50%;
    min-width: 50%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
/*    justify-content: center; dont do this, it centers centers the content, headings not aligned */
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.b-bg h4 {
    color: #ffb999;
}

.b-bg{
    background-color: #333333; /*charcoal*/
    color: #fff8f0; /*floral white*/
}

.fw-bg {
    background-color: #fff8f0; /*floral white*/
    color: #333333; /*charcoal*/
}

.w-bg {
    background-color: #ffffff; /*white*/

    color: #333333; /*charcoal*/
}

.g-bg {
    background: #af8d86;
/*    background: rgba(175,141,134,0.75); grullo*/
    color: #ffffff; /*charcoal*/
}

.d-bg {
    background-color: #e5d4c0; /*dust storm*/
    color: #333333; /*charcoal*/
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*  END GENERAL STYLING */


/*      HEADER      */

header{
    min-width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 500;
    background: #333333 /*charcoal*/;
    color: #fdfeec; /*almost white*/
    line-height: 25px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 5px solid #e5d4c0;
    box-sizing: border-box;
}


#logo {
    position: absolute;
    margin: 18px 45px;
    justify-content: flex-start;
}


nav {
    width: 45%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
/*    margin-right: 80px;*/
    justify-content: flex-end;
    box-sizing: border-box;
}

nav ul {
/*   float: right;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    box-sizing: border-box;
    margin: 22px 30px;
}

nav ul li {
/*    display: inline-block;*/
    margin: 0 20px;
}

nav ul li a{
    color: #fdfeec; /*almost white*/
    text-decoration: none;
}


nav ul li a:hover{
    color: #ffb999; /*peach-orange*/
    text-decoration-color: #715c74; /*lavender 2nd darkest*/
    
}

nav ul li a:active{
    color: #c1a2a0; /*lilac 3rd darkest*/
    text-decoration-color: #c1a2a0; /*lilac 3rd darkest*/
    
}

/*CTA BUTTON AND ANIMATION*/

.cta-button {
    border-color: #ffb999; /*peach-orange*/
    border: 2px solid;
    border-radius: 6px;
    color: #ffb999; /*peach-orange*/;
    padding: 10px 40px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
}



.cta-anim{
    -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: cta-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-animation {
      0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/
    }
    100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}

/* Standard syntax */
@keyframes cta-animation {
    0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/ 
    }
     100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}



.cta-button:hover{
    background: #ffb999; /*peach*/
    color: #333;
    
        -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: cta-hover-anim;
    animation-duration: 1s;;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-hover-anim {
      from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
}

/* Standard syntax */
@keyframes cta-hover-anim {
    from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
    
}
/*END CTA BUTTON STYLES*/
/*  LANDING */

#landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/landing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;    
}

#dev-intro,
#intro{
    width: 35%;
    height: 600px;
    padding: 50px;
    position: relative;
    top: 200px;
    z-index: 5;
    text-align: left;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    flex-direction: column;
    color: #333333; /*charcoal*/
    box-sizing: border-box;
}

h2.cursive{
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 4em;
    text-align: left;
}


.static-text{
    margin-bottom: .5em;
}

.dynamic-text span{
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    color: #333333; /*charcoal*/
    display: block;
/*    width: 700px;*/
    text-align: left;
/*    margin: 0 auto;*/
    line-height: 45px;
    padding: 1rem 0;
    opacity: 0;
    position: absolute;
    top: 120px;
    max-width: 100%;
    
    -webkit-animation-name: change-text; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */
    animation-name: change-text;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

/* Standard syntax */
@keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.text1{
    animation-delay: 0s;
}

.text2{
   animation-delay: 5s;
}

.text3{
    animation-delay: 10s;
}



#look{
    margin-top: 165px;
}

/* END LANDING*/

/*      PORTFOLIO       */
/*Work*/
#portfolio{
    height: 100%;
    padding-top: 75px;

}

#work{
    min-width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}

#work li{ 
    text-align: center;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fdfeec; /*almost white*/
    background-size: cover;
    background-position: center;
/*    padding: 10% 0;*/
    font-weight: 400;
/*    text-shadow: 2px 2px 4px #000000;*/
    margin: 0.125%;
/*    font-variant: small-caps;*/
    position: relative;
}

/*
#work li:nth-child(5),
#work li:nth-child(5),{
    margin-bottom:0;
}
*/


.half-tile {
    width: 49.75%;
/*    margin: 0.125% 0;*/
    
}

#lybra{background: url('../images/lybra-sm.jpg');}
#ari{background: url('../images/ari-figure.jpg');}
#radiohumber{background: url('../images/radiohumber.jpg');}
#host{background: url('../images/hostapp.jpg');}
#mercury{background: url('../images/mercury-mail.jpg');}
#sinabro{background: url('../images/sinabro.jpg');}



#work li a {
    color: #fdfeec; /*almost white*/
    font-size: 2.5em;
    text-decoration: none;
    padding: 25% 0; 
}

/*
#work li.ari:hover {
    
    background: url('../images/ari-figure.jpg');
    background-color: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    transition-duration: 3s;
    color: #ff704a salmon
}
*/

/* ---------------------LI animation effects saddie -----------------------*/

/*---------------*/
/***** Sadie *****/
/*---------------*/

/*Before caption enter this gradient*/
/*#work li a::before,*/
.caption::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/*
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
*/
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

/*sets the smooth transition*/

.caption::before,
.effect-sadie p {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
/*	padding: 1em;*/
    padding-bottom: 3em;
	width: 100%;
/*    height: 100%;*/
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
/*    z-index: 3;*/
    margin-bottom: 0;
    font-size: 1.3em;
}

/* Sets hover state*/
.effect-sadie:hover .caption::before,
.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*------------- END ANIMATION EFFECT-----------*/

/*      END PORTFOLIO       */

/* Parallax styling */

.parallax {
    /* The image used */
    background-image: url("../images/banner-bg.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#p1{
    background-image: url("../images/parallax1b.jpg");
}

#p2{
    background-image: url("../images/parallax2.jpg");
}

#p3{
    background-image: url("../images/banner-bg.jpg");
}

/* END Parallax styling */


/*      SKILLS       */
#contact, 
#profile-info {
    flex-direction: row;
}
.card{
    background: white;
/*    margin:10px 0;*/
    width: 30%;
/*    padding: 1%;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    box-sizing: border-box;
/*    border-radius: 10px;*/
/*    border: #333333 solid 2px;*/
}

.card h5 {
    max-width: 100%;
    display: block;
/*    border: blue 1px solid;*/
    color: #ffffff;
    background: #af8d86;
    font-family: 'nexa light', 'raleway', sans-serif;
    margin-top: 0;
    padding: 3%;
}

.card img {
    width: 100%;
/*
    display: block;
    border: blue 1px solid;
*/
}

.card ul {
    min-width: 58%;
    padding: 3%;
/*    display: block;*/
/*    border: blue 1px solid;*/
}

#skills{
    
/*    border: 1px red solid;*/
    flex-direction: row;
    min-height: 100%;
    min-width: 100%;
    justify-content: flex-start;
    padding: 75px 0;
    background: url('../images/skills-bbg.jpg');
    background-size: cover;
}

#skills .wrapper{
    flex-direction: row;
/*    border: 1px black solid;*/
    justify-content: space-around;
    padding-bottom: 50px;
/*     border-radius: 10px;*/
/*    background: rgba(225,225,225,0.75);*/
}

#skills h3 {
    display: block;
    min-width: 100%;
    margin-bottom: 50px;
    color: #333333; /*charcoal*/
}

#skills ul{
/*    float: left;*/
    min-width: 100%;
/*    margin:;*/
}

#skills li {
    display: block;
/*    float: left;*/
    font-size: 1em;
/*    width: 40%;*/
/*    padding-bottom: 20px;*/
     color: #333333; /*charcoal*/
    text-align: left;
}


#tools {

    flex-direction: column;
    justify-content: flex-start;
    
}

#tools ul {
    width: 80%;
    padding: 0 10%;
    margin-bottom: 50px;
    align-items: center;
}
#tools ul li{
    display: inline-block;
    margin: 20px 0.85%;
    float: left;
    text-align: center; 
}
/*#tools ul li:last-child{}*/

#tools ul li img{
    width: 70px;
}
#cv a {
    margin-top: 150px;
}

#cv h6{
    margin-top: 150px;
    margin-bottom: 50px;
    font-size: .7em;
}

#cv h6 a {
/*    color: #af8d86; grullo*/
    color: #e5d4c0; /*dust storm*/
}

/*      END SKILLS       */



/*      About       */

#about{
    height: 700px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    background: url('../images/about-bg.jpg');
    width: 100%;
    height: 100%;
    
}

.side-text {
max-width: 45%;
margin: 100px 10%;


}

/*      END About       */


/*          Contact         */

#contact{
/*    background: #e3cebd rose lightest pruple;*/
}

#contact p {text-align: center}

form{
    width: 50%;
    margin: 0 auto;
    border-color: linear-gradient(to bottom left,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/) 2px solid;
    )
}

fieldset {border: none;}

input, 
textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px;
    border-color: #321f30 /*plum color darkest*/;
    border-radius: 2%;
    font-size: 0.8em;
    font-family: 'Raleway', sans-serif;
    color: white;
    background: #333333;
    border-bottom: 2px solid floralwhite;
}

textarea{
    height: 150px;
     border-radius: 1%;
    
    
}

input[type='submit']{
    background: #333333; /*lilac 3rd darkest*/
}

input[type='submit']:hover{
    background: #ffb999; /*peach*/
    color: #333;
}


.button{
    background: #ec7e5c; /*lilac 3rd darkest*/
    height: 40px;
    width: 20%;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 600px;
    left: 38%;
    border-radius: 2px;
    box-shadow: 2px 2px 2px grey;
}

.social{
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    justify-content: center;
/*
    padding-bottom: 50px;
    border-bottom:  2px solid #e5d4c0 duststorm;
*/
}

.social li{
    margin: 0 20px;
} 

#profile{
/*    min-height: 100%;*/
    width: 30%;
    border-radius: 100%; 
    margin: 50px auto;
}

/*          END Contact         */



/*          Footer              */

footer {
    min-width: 100%;
    height: 30px;
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    background: #e5d4c0 /*duststorm*/;
    color: floralwhite; /*floralwhite*/
    text-decoration: none;
    text-align: center;
    font-size:0.5em;
    border-top: 10px solid #e5d4c0;
}

/*         END Footer              */







/*                      PROJECT PAGES                 */
/*GENERAL STYLING*/
.page-wrapper{
    width: 60%; 
    margin: 0 auto;
}

/*Lybra*/


video {
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}
.concept h2 {
    font-size: 3em;
    color: rgb(50,31,48) /*plum color darkest*/;
    line-height: 20px;
    margin-top: 50px;
}
.slogan{
    text-align: center;
    line-height: 150px;
}

.banner{
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    height: 800px;
    
}

.side-nav{
    width: 10%;
/*    border: 1px solid red;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    position: fixed;
    top: 200px;
    left: 0;
    
    
}

.side-nav ul {
    width: 100%;
/*    border: 1px solid green;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    
    
}

.side-nav ul li{
    width: 100%;
    margin: 0;
    padding: 20px; 
    text-align: center;
    border-bottom: 1px solid white;
    background: #fdfeec; /*almost white*/
    box-shadow: 0px 0px 10px grey;
}

.side-nav ul li:first-child,
.side-nav ul li:nth-child(4){
    border-right: 5px solid #321f30; /*plum darkest*/
}

        .side-nav ul li:first-child a,
        .side-nav ul li:nth-child(4) a{
            color:#321f30;
        }

.side-nav ul li:nth-child(2),
.side-nav ul li:nth-child(5){
    border-right: 5px solid #715c74; /*#715c74 lavender 2nd darkest*/
}

        .side-nav ul li:nth-child(2) a,
        .side-nav ul li:nth-child(5) a{
            color:  #715c74;
        }

.side-nav ul li:nth-child(3),
.side-nav ul li:nth-child(6){
    border-right: 5px solid #c1a2a0; /*lilac 3 darkest*/
}

        .side-nav ul li:nth-child(3) a,
        .side-nav ul li:nth-child(6) a{
            color: #c1a2a0;
        }


.side-nav ul li a:hover {
    color: #ec7e5c /*salmon*/ ;
}

.video-promo{
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    height: 646px;
    background: black;
}

video {width: 100%}



#mercury-banner{
    background-image: url('../images/mercury-banner.jpg');
    background-size: cover;
    background-position: bottom;
}

#mercury-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#321f30 /*plum color darkest*/,#715c74/*2nd darkest*/,#c1a2a0/*,#ec7e5c salmon */);
	opacity: .8; 
    height: 800px;
}
    .project-logo, 
    .slogan {
    position: absolute;
	top: 300px;
    left: 33%;
    z-index: 3;
/*    box-shadow: 10px 10px 5px #000;*/
    }
.slogan {
    text-align: center;
    font-size: 1.7em;
    color: #fdfeec /*almost white*/;
    top: 400px;
    left: 36%;
    text-shadow: 2px 2px 4px #0d0d0d ;
    
}

.sketches,
.hifi{
    display: flex;
    display: -webkit-flex;
    display:-ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.comp{
    margin: 5px;
    background: white;
/*    max-height: 700px;*/
}


#lybra-banner{
    background-image: url('../images/lybra-banner.jpg');
    background-size: cover;
    background-position: top;
}

#lybra-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/);
	opacity: .6; 
    height: 800px;
}

#lybra-logo{
    top:200px;
    left: 43%;
}
#ARI-logo{top:200px;
    left: 46%;}
#merc-slogan{
    left: 38%;
    top: 450px;
}

#merc-1 {background:;}

/* TURNED OFF FOR MOBILE STYLING

#ari-banner{
    background: url('../images/ari-banner2.jpg');
    background-size: cover;
}

#ari-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right, aliceblue salmon`,#e3cebd rose,#321f30plum);
	opacity: .55; 
    height: 800px;
}
*/

#ari-1 {
    background-image: url("../images/ari-1.jpg");
}

.parallax-container{
    background-image: url('../images/blank-laptop.png');
    background-size:contain;
    min-height: 2000px;
    background-position: bottom;
    background-repeat: no-repeat;
}

#lybra-1 {
    background-image: url("../images/lybra-par.png");
}

#lybra-2 {
    background-image: url("../images/lybra-lofi-proto.png");
}

#merc-1 {background-image: url("../images/merc-1.jpg");}

#merc-2 {background-image: url("../images/merc-2.jpg");}

#ari-2{background-image: url("../images/ari-2.png");}

/******under dev******/

#dev-landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/developing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;
}

#dev-intro{
    height: 500px;
}

.other-projects{
    margin-top:50%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    height: 30%;
    
}

.dev-foot{}

    

/************************* DESKTOPS LARGER THAN 20"  **************************/

@media screen and (min-width: 1600px) {
      body{
/*            body{
/*        background: red;*/
      font-size: 18px;  
    }
    h2, 
    h2.cursive{
        font-size: 4em;
    }
    

/*  GENERAL STYLING */

body {
    background: #ffffff;/* white*/
    font-size: 18px;
    color: rgba(0,0,0,.8);
    font-family: 'Raleway', sans-serif;
    position: relative;
    line-height: 35px;
    overflow-x: hidden;
}

h1{
    text-indent: -5000000px;
}


h2{
    font-family: 'Raleway', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 2em;
    text-align: left;
}


h3 {
    font-size:2.4em;
    text-align: left;
    margin: 50px 0;
}

h4{ font-size:2em;
    text-align: center;
    margin: 50px 0;
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
}

h5{
    font-size:1.25em;
    margin: 10px 0;
    font-weight: 500;
}

.bold{font-weight:600;}

p{
    margin-bottom: 20px;
}

a{
/*    color: #ec7e5c salmon;*/
    text-decoration: none;
    cursor: pointer; 
}



.quote-author{
    font-family: 'Raleway', sans-serif;
    font-style: italic;
}

.full-width {
    min-width: 100%;
    max-width:100%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    box-sizing: border-box;
}


.half-width{
    max-width: 50%;
    min-width: 50%;
    min-height: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
/*    justify-content: center; dont do this, it centers centers the content, headings not aligned */
    text-align: center;
    padding: 50px 0;
    box-sizing: border-box;
}

.b-bg h4 {
    color: #ffb999;
}

.b-bg{
    background-color: #333333; /*charcoal*/
    color: #fff8f0; /*floral white*/
}

.fw-bg {
    background-color: #fff8f0; /*floral white*/
    color: #333333; /*charcoal*/
}

.w-bg {
    background-color: #ffffff; /*white*/

    color: #333333; /*charcoal*/
}

.g-bg {
    background: #af8d86;
/*    background: rgba(175,141,134,0.75); grullo*/
    color: #ffffff; /*charcoal*/
}

.d-bg {
    background-color: #e5d4c0; /*dust storm*/
    color: #333333; /*charcoal*/
}

.wrapper {
    width: 80%;
    margin: 0 auto;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 0 20px;
    box-sizing: border-box;
}

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/*  END GENERAL STYLING */


/*      HEADER      */

header{
    min-width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 500;
    background: #333333 /*charcoal*/;
    color: #fdfeec; /*almost white*/
    line-height: 25px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: space-between;
    flex-wrap: wrap;
    border-bottom: 5px solid #e5d4c0;
    box-sizing: border-box;
}


#logo {
    position: absolute;
    margin: 18px 45px;
    justify-content: flex-start;
}


nav {
    width: 45%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
/*    margin-right: 80px;*/
    justify-content: flex-end;
    box-sizing: border-box;
}

nav ul {
/*   float: right;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    box-sizing: border-box;
    margin: 22px 30px;
}

nav ul li {
/*    display: inline-block;*/
    margin: 0 20px;
}

nav ul li a{
    color: #fdfeec; /*almost white*/
    text-decoration: none;
}


nav ul li a:hover{
    color: #ffb999; /*peach-orange*/
    text-decoration-color: #715c74; /*lavender 2nd darkest*/
    
}

nav ul li a:active{
    color: #c1a2a0; /*lilac 3rd darkest*/
    text-decoration-color: #c1a2a0; /*lilac 3rd darkest*/
    
}

/*CTA BUTTON AND ANIMATION*/

.cta-button {
    border-color: #ffb999; /*peach-orange*/
    border: 2px solid;
    border-radius: 6px;
    color: #ffb999; /*peach-orange*/;
    padding: 10px 40px;
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
}



.cta-anim{
    -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 3s; /* Safari 4.0 - 8.0 */
    animation-name: cta-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-animation {
      0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/
    }
    100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}

/* Standard syntax */
@keyframes cta-animation {
    0% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
    50% {
        color: floralwhite;
        border-color: floralwhite; /*peach-orange*/ 
    }
     100% {
        border-color: #ffb999; /*peach-orange*/
        color: #ffb999; /*peach-orange*/;
    }
}



.cta-button:hover{
    background: #ffb999; /*peach*/
    color: #333;
    
        -webkit-animation-name: cta-animation; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 4s; /* Safari 4.0 - 8.0 */
    animation-name: cta-hover-anim;
    animation-duration: 1s;;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes cta-hover-anim {
      from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
}

/* Standard syntax */
@keyframes cta-hover-anim {
    from {
        border-color: #ffb999; /*peach-orange*/
        background: #333333; /*charcoal*/
        color: #ffb999; /*peach-orange*/;
    }
    to {
        background: #ffb999; /*peach-orange*/;;
        color: #333333;
        border-color: #333333; /*peach-orange*/
    }
    
}
/*END CTA BUTTON STYLES*/
/*  LANDING */

#landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/landing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;    
}

#dev-intro,
#intro{
    width: 35%;
    height: 600px;
    padding: 50px;
    position: relative;
    top: 200px;
    z-index: 5;
    text-align: left;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: flex-start;
    flex-direction: column;
    color: #333333; /*charcoal*/
    box-sizing: border-box;
}

h2.cursive{
    font-family: ff-market-web, sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 4em;
    text-align: left;
}


.static-text{
    margin-bottom: .5em;
}

.dynamic-text span{
    font-family: 'Raleway', sans-serif;
    font-size: 2em;
    color: #333333; /*charcoal*/
    display: block;
/*    width: 700px;*/
    text-align: left;
/*    margin: 0 auto;*/
    line-height: 45px;
    padding: 1rem 0;
    opacity: 0;
    position: absolute;
    top: 120px;
    max-width: 100%;
    
    -webkit-animation-name: change-text; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 15s; /* Safari 4.0 - 8.0 */
    animation-name: change-text;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    animation-direction: initial;
    animation-fill-mode: initial;
    animation-play-state: initial;
    
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

/* Standard syntax */
@keyframes change-text {
    0% {
        opacity: 0;
        animation-timing-function: ease-in-out;
    }
    
    5%{
        opacity: 0.8;
    }
    
    10%{
        opacity: 1;
    }

    15% {
        opacity: 1;
    }

    30% {
        opacity: 1;
    }
    
     35% {
        opacity: 0;
    }
    
    100% {
        opacity: 0;
    }
}

.text1{
    animation-delay: 0s;
}

.text2{
   animation-delay: 5s;
}

.text3{
    animation-delay: 10s;
}



#look{
    margin-top: 165px;
}

/* END LANDING*/

/*      PORTFOLIO       */
/*Work*/
#portfolio{
    height: 100%;
    padding-top: 75px;

}

#work{
    min-width: 100%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: row;
    justify-content: space-around;
    flex-wrap: wrap;
    height: 100%;
}

#work li{ 
    text-align: center;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fdfeec; /*almost white*/
    background-size: cover;
    background-position: center;
/*    padding: 10% 0;*/
    font-weight: 400;
/*    text-shadow: 2px 2px 4px #000000;*/
    margin: 0.125%;
/*    font-variant: small-caps;*/
    position: relative;
}

/*
#work li:nth-child(5),
#work li:nth-child(5),{
    margin-bottom:0;
}
*/


.half-tile {
    width: 49.75%;
/*    margin: 0.125% 0;*/
    
}

#lybra{background: url('../images/lybra-sm.jpg');}
#ari{background: url('../images/ari-figure.jpg');}
#radiohumber{background: url('../images/radiohumber.jpg');}
#host{background: url('../images/hostapp.jpg');}
#mercury{background: url('../images/mercury-mail.jpg');}
#sinabro{background: url('../images/sinabro.jpg');}



#work li a {
    color: #fdfeec; /*almost white*/
    font-size: 2.5em;
    text-decoration: none;
    padding: 25% 0; 
}

/*
#work li.ari:hover {
    
    background: url('../images/ari-figure.jpg');
    background-color: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(72,76,97,0.8) 75%);
    transition-duration: 3s;
    color: #ff704a salmon
}
*/

/* ---------------------LI animation effects saddie -----------------------*/

/*---------------*/
/***** Sadie *****/
/*---------------*/

/*Before caption enter this gradient*/
/*#work li a::before,*/
.caption::before{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
/*
	background: -webkit-linear-gradient(top, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
	background: linear-gradient(to bottom, rgba(72,76,97,0) 0%, rgba(75,59,71,0.8) 75%);
*/
	content: '';
	opacity: 0;
	-webkit-transform: translate3d(0,50%,0);
	transform: translate3d(0,50%,0);
}

/*sets the smooth transition*/

.caption::before,
.effect-sadie p {

	-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
	transition: opacity 0.35s, transform 0.35s;
}

.effect-sadie p {
	position: absolute;
	bottom: 0;
	left: 0;
/*	padding: 1em;*/
    padding-bottom: 3em;
	width: 100%;
/*    height: 100%;*/
	opacity: 0;
	-webkit-transform: translate3d(0,10px,0);
	transform: translate3d(0,10px,0);
/*    z-index: 3;*/
    margin-bottom: 0;
    font-size: 1.3em;
}

/* Sets hover state*/
.effect-sadie:hover .caption::before,
.effect-sadie:hover p {
	opacity: 1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}


/*------------- END ANIMATION EFFECT-----------*/

/*      END PORTFOLIO       */

/* Parallax styling */

.parallax {
    /* The image used */
    background-image: url("../images/banner-bg.jpg");

    /* Set a specific height */
    min-height: 500px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
    background-size: cover;
}

#p1{
    background-image: url("../images/parallax1b.jpg");
}

#p2{
    background-image: url("../images/parallax2.jpg");
}

#p3{
    background-image: url("../images/banner-bg.jpg");
}

/* END Parallax styling */


/*      SKILLS       */
#contact, 
#profile-info {
    flex-direction: row;
}
.card{
    background: white;
/*    margin:10px 0;*/
    width: 30%;
/*    padding: 1%;*/
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    box-sizing: border-box;
/*    border-radius: 10px;*/
/*    border: #333333 solid 2px;*/
}

.card h5 {
    max-width: 100%;
    display: block;
/*    border: blue 1px solid;*/
    color: #ffffff;
    background: #af8d86;
    font-family: 'nexa light', 'raleway', sans-serif;
    margin-top: 0;
    padding: 3%;
}

.card img {
    width: 100%;
/*
    display: block;
    border: blue 1px solid;
*/
}

.card ul {
    min-width: 58%;
    padding: 3%;
/*    display: block;*/
/*    border: blue 1px solid;*/
}

#skills{
    
/*    border: 1px red solid;*/
    flex-direction: row;
    min-height: 100%;
    min-width: 100%;
    justify-content: flex-start;
    padding: 75px 0;
    background: url('../images/skills-bbg.jpg');
    background-size: cover;
}

#skills .wrapper{
    flex-direction: row;
/*    border: 1px black solid;*/
    justify-content: space-around;
    padding-bottom: 50px;
/*     border-radius: 10px;*/
/*    background: rgba(225,225,225,0.75);*/
}

#skills h3 {
    display: block;
    min-width: 100%;
    margin-bottom: 50px;
    color: #333333; /*charcoal*/
}

#skills ul{
/*    float: left;*/
    min-width: 100%;
/*    margin:;*/
}

#skills li {
    display: block;
/*    float: left;*/
    font-size: 1em;
/*    width: 40%;*/
/*    padding-bottom: 20px;*/
     color: #333333; /*charcoal*/
    text-align: left;
}


#tools {

    flex-direction: column;
    justify-content: flex-start;
    
}

#tools ul {
    width: 80%;
    padding: 0 10%;
    margin-bottom: 50px;
    align-items: center;
}
#tools ul li{
    display: inline-block;
    margin: 20px 0.85%;
    float: left;
    text-align: center; 
}
/*#tools ul li:last-child{}*/

#tools ul li img{
    width: 70px;
}
#cv a {
    margin-top: 150px;
}

#cv h6{
    margin-top: 150px;
    margin-bottom: 50px;
    font-size: .7em;
}

#cv h6 a {
/*    color: #af8d86; grullo*/
    color: #e5d4c0; /*dust storm*/
}

/*      END SKILLS       */



/*      About       */

#about{
    height: 700px;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    background: url('../images/about-bg.jpg');
    width: 100%;
    height: 100%;
    
}

.side-text {
max-width: 45%;
margin: 100px 10%;


}

/*      END About       */


/*          Contact         */

#contact{
/*    background: #e3cebd rose lightest pruple;*/
}

#contact p {text-align: center}

form{
    width: 50%;
    margin: 0 auto;
    border-color: linear-gradient(to bottom left,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/) 2px solid;
    )
}

fieldset {border: none;}

input, 
textarea {
    width: 100%;
    height: 50px;
    margin-bottom: 20px;
    border: 1px;
    border-color: #321f30 /*plum color darkest*/;
    border-radius: 2%;
    font-size: 0.8em;
    font-family: 'Raleway', sans-serif;
    color: white;
    background: #333333;
    border-bottom: 2px solid floralwhite;
}

textarea{
    height: 150px;
     border-radius: 1%;
    
    
}

input[type='submit']{
    background: #333333; /*lilac 3rd darkest*/
}

input[type='submit']:hover{
    background: #ffb999; /*peach*/
    color: #333;
}


.button{
    background: #ec7e5c; /*lilac 3rd darkest*/
    height: 40px;
    width: 20%;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 600px;
    left: 38%;
    border-radius: 2px;
    box-shadow: 2px 2px 2px grey;
}

.social{
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: row;
    justify-content: center;
/*
    padding-bottom: 50px;
    border-bottom:  2px solid #e5d4c0 duststorm;
*/
}

.social li{
    margin: 0 20px;
} 

#profile{
/*    min-height: 100%;*/
    width: 30%;
    border-radius: 100%; 
    margin: 50px auto;
}

/*          END Contact         */



/*          Footer              */

footer {
    min-width: 100%;
    height: 30px;
    display: flex; 
    display: -webkit-flex;
    display: -ms-flexbox;
    justify-content: center;
    background: #e5d4c0 /*duststorm*/;
    color: floralwhite; /*floralwhite*/
    text-decoration: none;
    text-align: center;
    font-size:0.5em;
    border-top: 10px solid #e5d4c0;
}

/*         END Footer              */







/*                      PROJECT PAGES                 */
/*GENERAL STYLING*/
.page-wrapper{
    width: 60%; 
    margin: 0 auto;
}

/*Lybra*/


video {
    min-width: 100%;
    min-height: 100%;
    margin: 0 auto;
}
.concept h2 {
    font-size: 3em;
    color: rgb(50,31,48) /*plum color darkest*/;
    line-height: 20px;
    margin-top: 50px;
}
.slogan{
    text-align: center;
    line-height: 150px;
}

.banner{
    width: 100%;
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    height: 800px;
    
}

.side-nav{
    width: 10%;
/*    border: 1px solid red;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    position: fixed;
    top: 200px;
    left: 0;
    
    
}

.side-nav ul {
    width: 100%;
/*    border: 1px solid green;*/
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    
    
}

.side-nav ul li{
    width: 100%;
    margin: 0;
    padding: 20px; 
    text-align: center;
    border-bottom: 1px solid white;
    background: #fdfeec; /*almost white*/
    box-shadow: 0px 0px 10px grey;
}

.side-nav ul li:first-child,
.side-nav ul li:nth-child(4){
    border-right: 5px solid #321f30; /*plum darkest*/
}

        .side-nav ul li:first-child a,
        .side-nav ul li:nth-child(4) a{
            color:#321f30;
        }

.side-nav ul li:nth-child(2),
.side-nav ul li:nth-child(5){
    border-right: 5px solid #715c74; /*#715c74 lavender 2nd darkest*/
}

        .side-nav ul li:nth-child(2) a,
        .side-nav ul li:nth-child(5) a{
            color:  #715c74;
        }

.side-nav ul li:nth-child(3),
.side-nav ul li:nth-child(6){
    border-right: 5px solid #c1a2a0; /*lilac 3 darkest*/
}

        .side-nav ul li:nth-child(3) a,
        .side-nav ul li:nth-child(6) a{
            color: #c1a2a0;
        }


.side-nav ul li a:hover {
    color: #ec7e5c /*salmon*/ ;
}

.video-promo{
    display: flex;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    height: 646px;
    background: black;
}

video {width: 100%}



#mercury-banner{
    background-image: url('../images/mercury-banner.jpg');
    background-size: cover;
    background-position: bottom;
}

#mercury-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#321f30 /*plum color darkest*/,#715c74/*2nd darkest*/,#c1a2a0/*,#ec7e5c salmon */);
	opacity: .8; 
    height: 800px;
}
    .project-logo, 
    .slogan {
    position: absolute;
	top: 300px;
    left: 33%;
    z-index: 3;
/*    box-shadow: 10px 10px 5px #000;*/
    }
.slogan {
    text-align: center;
    font-size: 1.7em;
    color: #fdfeec /*almost white*/;
    top: 400px;
    left: 36%;
    text-shadow: 2px 2px 4px #0d0d0d ;
    
}

.sketches,
.hifi{
    display: flex;
    display: -webkit-flex;
    display:-ms-flex;
    flex-direction: row;
    flex-wrap: wrap;
    
}

.comp{
    margin: 5px;
    background: white;
/*    max-height: 700px;*/
}


#lybra-banner{
    background-image: url('../images/lybra-banner.jpg');
    background-size: cover;
    background-position: top;
}

#lybra-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#ec7e5c /*salmon`,#e3cebd /*rose*/,#321f30/*plum*/);
	opacity: .6; 
    height: 800px;
}

#lybra-logo{
    top:200px;
    left: 43%;
}
#ARI-logo{top:200px;
    left: 46%;}
#merc-slogan{
    left: 38%;
    top: 450px;
}

#merc-1 {background:;}

/* TURNED OFF FOR MOBILE STYLING

#ari-banner{
    background: url('../images/ari-banner2.jpg');
    background-size: cover;
}

#ari-banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right, aliceblue salmon`,#e3cebd rose,#321f30plum);
	opacity: .55; 
    height: 800px;
}
*/

#ari-1 {
    background-image: url("../images/ari-1.jpg");
}

.parallax-container{
    background-image: url('../images/blank-laptop.png');
    background-size:contain;
    min-height: 2000px;
    background-position: bottom;
    background-repeat: no-repeat;
}

#lybra-1 {
    background-image: url("../images/lybra-par.png");
}

#lybra-2 {
    background-image: url("../images/lybra-lofi-proto.png");
}

#merc-1 {background-image: url("../images/merc-1.jpg");}

#merc-2 {background-image: url("../images/merc-2.jpg");}

#ari-2{background-image: url("../images/ari-2.png");}

/******under dev******/

#dev-landing{
    min-width: 100%;
    min-height: 100vh;
    background: url('../images/developing-bg.jpg');
    background-position: right;
    background-repeat: no-repeat;
}

#dev-intro{
    height: 500px;
}

.other-projects{
    margin-top:50%;
    display: flex;
    display: -webkit-flex;
    display: -ms-flexbox;
    flex-direction: column;
    flex-wrap: wrap;
    height: 30%;
    
}

.dev-foot{}