/* General For All
–––––––––––––––––––––––––––––––––––––––––––––––––– */
body{background-color: white; font-size: 100%;
box-sizing: border-box;}
img{max-width: 100%;}


.col-md-8{background-color: aqua;}

.important{background-color: beige;}

#home{font-size: 100px;}



.desktop { width: 100%;
    height: 70px;
    position: fixed;
    clear: both;
    display: block;
    z-index: 1001;}
/*
//------------mixins-----
//-----------LEFT SIDE DESCKTOP NAV------------------------
*/

.appointment a,{text-decoration: none;
color: white;}

.info a, #info-phone a, .barbers a{color: black; text-decoration: none;}



.desktop-l{
    background-color: #b75251;
    display: block;
    width: 100%;
    height: 70px;
}


#inner-l { 
    display: flex;
    flex-direction: row;
    justify-content:flex-end;
    align-items: center;
    margin: auto ;
}

#inner-l a {background-image:url(app-images/parking-header-logo.png);
    width: 90px;
    height: 70px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    font-size: 0;
    line-height: 0;
    color: transparent;
    margin: -7px auto 0 auto;
    
    
}


/*//-----------middle DESCKTOP NAV------------------------*/

.desktop-m{
    background-color: gainsboro;
    float: left;
    width: 85%;
    height: 60px;
    margin: auto;}


#inner-m { 
    display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
}

#inner-m a{ color:black;
    text-decoration: none;
    font-size: 1.15em;
    padding: 0 10px;
    margin: 22px auto;
    transition: all .7s ease;}

#inner-m a:hover {color:white;
    
    transition: all .7s ease;}


/*//-----------Right SIDE DESCKTOP NAV------------------------*/
.desktop-r{
    background-color:lightgray;
    float: right;
    width: 15%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content:space-around;
    align-items: center;
    }

#inner-r{display: flex;
    flex-direction: row;
    justify-content:flex-start;
    align-items: center;}

#inner-r a {
    color:black;
    text-decoration: none;
    font-size: 1.45em;
    padding: 0 10px;
    margin: auto;
}
#inner-r a:hover { 
    color: white;
    transition: all .7s ease-out;
        }


/*//------mobile nav start-------*/

.top-nav {
   background-color: gainsboro;
    float: left;
    width: 100%;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;  
    position: fixed;
    margin: 0px 0 30px 0;
    box-sizing: border-box;
    z-index: 1000;
    
    }  
.top-nav a  {
background-image:url(app-images/parking-header-logo.png);
    width: 80px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    font-size: 0;
    line-height: 0;
    color: transparent;
    margin: -30px 0 0 0;
    }



.mobile {z-index: 1001;
margin: 10px 0 0 0;}
.mobile a{ 
    
    display: block;
    text-align: left;
    color:black;
    text-decoration: none;
    font-size: 1.6em;
    padding: 0 10px;
    margin: 22px 20px 10px 20px;
    transition: all .7s ease;}

.mobile a:hover{color:white;
    font-size: 2em;
    transition: all .7s ease;}

/*//-----Starts code after navs---*/

    
.site-contain{display: block;
    margin: auto;
    margin-top: 130px;
    max-width: 1400px;
clear: both;
box-sizing: border-box;}

.intro {display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;
    margin: 20px 0 0 0;
    box-sizing: border-box;}

.intro{width: 100%;
    margin: 0 auto 0 auto;
    padding: 30px;
    }

.pic-contain{display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    margin: 20px 0 0 0;
    box-sizing: border-box;
    width: 80%;}

.pic-contain img{margin: 10px;
width: 80%;}

h3{max-width: 800px;
 text-align: center;}

h2{color: maroon;
margin: 10px 0 20px 0;}

p{font-size: 1.5em;
max-width: 800px;
margin: 10px 0 30px 0}

.row{display: flex;
    flex-direction: row;
    justify-content:space-between;
    align-items: center;
    margin: 20px auto 0 auto;
    box-sizing: border-box;
    width: 80%;}

#persona-click, #process-click, #roughs-click, #uxpin-click,#redesign-click,#invision-click{margin: -130px 0 0 130px;
padding: 130px 0 0 0}

.col-md-6{display: flex;
    flex-direction: column;
    justify-content:space-around;
    align-items: center;}

.col-md-6 img {width:70%}

h3{margin: 10px 0 20px 0;}

#uxpin{width: 70%;
    height: 700px;}

#insivion{width: 80%;
    height: 900px;}












/* Tablet
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (min-width: 481px) and (max-width: 800px) {
 body {background-color: white;
    box-sizing: border-box;}
    
    
    
    
.top-nav-con {}
 height: 0px;
    width: 100%;
    display: block;
    margin: 0 0 0px 0;
    display: none;
    
.mobile-nav{} 
    


}
/* Mobile
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 480px)
{
 body {background-color: white;}
 
}