@import url('reset.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');
}

/*  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/byblos-2.png');}
#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;
}

/*


*/

.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;
    padding-bottom: 30px;
}

.project-title{
    text-align: left;
    line-height: 100px;
}

.banner{
    width: 100vw;
    height: 700px;
/*    margin-top: 110px;*/
    justify-content: flex-start;
    flex-direction: row;
    
    
}

.banner:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to top, rgba(0,0,0,.75),rgba(0,0,0,0.05));
	opacity: 1; 
    height: 700px;
}
    
h2.project-title {
    text-align: left;
    color: #fdfeec /*almost white*/;
    font-family: /* 'Nexa Light',*/'Raleway', sans-serif;
    font-size: 4em;
    line-height: 2em;
    position: absolute;
    top: 480px;
    left: 15%;
/*    margin-left: 25%*/
/*    text-shadow: 2px 2px 4px #0d0d0d ;*/
    
}
    
    p.project-description{
        color:white;
        position: absolute;
        top: 600px;
        left: 15%;
        font-size: 2em;
/*        line-height: 2em;*/
        font-weight:200; 
    }

.p-button{
/*    height: 40px;*/
    width: 15%;
    color: white;
    padding: 10px;
    text-align: center;
    position: absolute;
    z-index: 10;
    top: 575px;
    right: 15%;
    border-radius: 10px;
    border: 2px solid white;
}

.p-button:hover{
    background: rgba(255,255,255,0.4);
    border: none;
}

/*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: 700px;
    
}
*/

.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:;
	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:;
	opacity: .6; 
    height: 800px;
}
*/

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

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

#merc-1 {background:;}

/*                ARI             */

#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, rgba(0,0,0,1),rgba(0,0,0,0.8));
	opacity: .80; 
    height: 600px;
}
*/
/*

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


#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");
height: 750px}

/******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{}