@charset "utf-8";

/* CSS Document */



/*colors



steelblue  #4682B4

orange #FF6600 */



/* -- BASE -- */



:root {

    --main-text-color: #252525;

    --header-color: #CCCCCC;

    --header-background-color: #4682B4;

    --header-background-light: #72A2C9;

    --header-background-dark: #427BAA;

    --text-shadow-color: #939393;



    --link-color: #252525;

    --link-hover-color: #FF6600;

    --button-hover-color: #FF3300;



    --link-sort-color: #939393;

    --placeholder-color: #A8A8A8;

    --footer-background-color: #D7D7D7;

}



*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: inherit;

}



html {

    box-sizing: border-box;

    font-size: 62.5%;

    /*10px/16px = 62.5% -> 1rem = 10px*/

}



body {

    font-family: 'Open Sans', sans-serif;

    font-weight: 400;

    font-size: 1.8rem;

    line-height: 1.6;

    color: var(--main-text-color);

    min-height: 100vh;

    -webkit-text-size-adjust: none;

    /*to make sure li sizes the same in all lists  */

}





/* -- IMAGES -- */



img {

    max-width: 100%;

    height: auto;

}





/*font styles*/



p {

    font-size: 1.8rem;

    font-weight: 400;

    margin-top: 1.6rem;

    margin-bottom: 1.6rem;

}



h1 {

    font-size: 2.6rem;

    font-weight: 600;

}



h2 {

    font-size: 2.3rem;

    font-weight: 600;

    width: 100%;

    border-bottom: solid medium var(--header-background-color);

    padding: 1.5rem 0 .25rem 0;

    margin-bottom: 1.5rem;

}



h3 {

    font-size: 1.9rem;

    font-weight: 600;

    margin: 1rem 0;

}



.orange {

    color: var(--link-hover-color);

}



.orange--dark {

    color: var(--button-hover-color);

}



.gray {

    color: var(--footer-background-color);

}



.crossOut {

    color: var(--footer-background-color);

    text-decoration: line-through;

}



.small {

    font-size: 1.4rem;

    font-weight: normal;

}



/*link styles*/



a {

    text-decoration: none;

    outline: none;

    color: var(--link-color);

}



a:link {

    color: var(--link-color);

}



a:visited {

    color: var(--link-color);

}



a:hover {

    color: var(--link-hover-color);

}



a {

    color: var(--link-color);

}







/*list styles*/



ul {

    padding: 0;

    margin: 0;

}



li {

    list-style: none;

}





table {

    border-collapse: collapse;

}





/* -- LAYOUT -- */



.container--main,

.container--header,

.container--footer {

    max-width: 120rem;

    margin: 0 auto;

    padding: 2rem;

}





/* -- Header -- */



header {

    background-color: var(--header-background-color);

    background: -webkit-gradient(linear, left top, right bottom, from(var(--header-background-light)), to(var(--header-background-dark)));

    background: -webkit-linear-gradient(top left, var(--header-background-light), var(--header-background-dark));

    background: -o-linear-gradient(top left, var(--header-background-light), var(--header-background-dark));

    background: linear-gradient(to bottom right, var(--header-background-light), var(--header-background-dark));

    border-bottom: 1px solid #999;

    -webkit-box-shadow: 0px 2px 3px #CCC;

    box-shadow: 0px 2px 3px #CCC;

}



.container--header {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-align: first baseline;

    -ms-flex-align: first baseline;

    align-items: first baseline;

}



.header--logo {

    width: 100%;

    text-align: center;

}



.header--logo a {

    color: var(--header-color);

    text-shadow: -1px 0 var(--text-shadow-color), 0 1px var(--text-shadow-color), 1px 0 var(--text-shadow-color), 0 -1px var(--text-shadow-color);

}



.header--nav {

    width: 100%;

    text-align: center;



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-pack: distribute;

    justify-content: space-around;

}



.header--nav a {

    color: var(--header-color);

    font-weight: 500;

}



.header--nav a:hover {

    color: var(--link-hover-color);

}



@media screen and (min-width: 45rem) {



    .header--logo {

        width: 50%;

        text-align: left;

    }



    .header--nav {

        width: 45%;

    }



}



/*footer styles*/



footer {

    width: 100%;

    background-color: var(--footer-background-color);

    border-top: 4px solid var(--header-background-color);

}



footer p {

    font-size: 1.4rem;

}



footer td {

    font-size: 1.4rem;

    padding-right: 5px;

}



.container--footer {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.footer--text {

    padding: 0 2rem 2rem 0;

}





/*Home styles*/



.featured {

    padding: 2rem 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: stretch;

    -ms-flex-align: stretch;

    align-items: stretch;

}



.featured--card {

    width: 100%;

    margin: 1rem;

    padding: 1rem .5rem;

    border: solid thin #CCC;

    /* box-shadow: 0px 3px 5px -3px #CCC; */

    box-shadow: 0px 2px 3px -1px #CCC;

    text-align: center;



    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

    -ms-flex-negative: 1;

    flex-shrink: 1;



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    -webkit-box-align: stretch;

    -ms-flex-align: stretch;

    align-items: stretch;

}



@media screen and (min-width: 40rem) {

    .featured--card {

        width: 46%;

    }

}



@media screen and (min-width: 67rem) {

    .featured--card {

        width: 23%;

    }

}





#makeDiv p,

#modelDiv p,

#yearDiv p {

    display: inline-table;

    min-width: 6rem;

    line-height: 1.5;

    font-weight: bold;

    margin: 1.5rem 0 auto 0;

}





.main--text {

    padding: 2rem 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    align-items: stretch;

}



.main--text--search {

    width: 100%;

}



.main--text--welcome {

    width: 100%;

}



.main--text--welcome p {

    padding-right: 3rem;

}



@media screen and (min-width: 45rem) {



    .main--text--search {

        width: 40%;

        padding-right: 4rem;

    }



    .main--text--welcome {

        width: 60%;

        padding-right: 4rem;

    }

}





/*Inventory styles*/



.inventory--container {

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.inventory--search {

    width: 100%;

    min-height: 25rem;

}



.inventory--info {

    width: 100%;

    border-top: #CCC solid thin;

}



.inventory--sort {

    width: 100%;

}



.inventory--sort--order {



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

}



.inventory--sort--order li {

    padding-right: 2rem;

    color: black;

}





.inventory--sort--order a {

    color: var(--link-sort-color);

}



.inventory--sort--order a:link {

    color: var(--link-sort-color);

}



.inventory--sort--order a:visited {

    color: var(--link-sort-color);

}



.inventory--sort--order a:hover {

    color: var(--link-hover-color);

}



.inventory--sort--order a {

    color: var(--link-sort-color);

}



.inventory--card {

    width: 100%;

    margin: 1.5rem 0;

    padding: 1rem;

    border: solid thin #CCC;

    box-shadow: 0px 3px 5px -3px #CCC;



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

}



.inventory--image--container {

    width: 100%;

}



.inventory--image {

    position: relative;

    width: 100%;

    padding-top: 75%;

    /* 4:3 Aspect Ratio */

    overflow: hidden;

}



.inventory--image img {

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    margin: auto;

}



.inventory--text {

    width: 100%;



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;



    -webkit-box-flex: 1;

    -ms-flex-positive: 1;

    flex-grow: 1;

}



.inventory--details {

    padding: 1rem;

}



.inventory--details p {

    margin: 0;

}





.inventory--details td {

    font-size: 1.4rem;

    padding-right: .5rem;

}



.inventory--price {

    padding: 1rem;

}



.inventory--price p {

    margin: 0;

}





/* inventory media queries */



@media screen and (min-width: 600px) {



    .inventory--card {



        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

    }



    .inventory--image--container {

        width: 25%;

    }



    .inventory--text {

        width: 75%;



        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

        -webkit-box-pack: justify;

        -ms-flex-pack: justify;

        justify-content: space-between;

    }



}



@media screen and (min-width: 1000px) {



    .inventory--search {

        width: 30%;

    }



    .inventory--info {

        border: none;

        width: 70%;

    }

}





/*Specials styles*/



.special--message {

    width: 100%;

}



@media screen and (min-width: 1000px) {



    .special--message {

        width: 30%;
        padding-bottom: 9rem;

    }



}





/*Details styles*/



.details--container {

    width: 100%;



    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -webkit-box-orient: vertical;

    -webkit-box-direction: normal;

    -ms-flex-direction: column;

    flex-direction: column;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

}



.details--gallery {

    width: 100%;

}



.details--text {

    width: auto;

    padding: 0 2rem;

}



.details--table {

    font-size: 1.5rem;

}



.details--table p {

    font-size: 1.5rem;

    margin: 0;

    padding: .4rem 1rem .4rem 0;

}



.details--table caption {

    text-align: left;

    font-size: 1.8rem;

    font-weight: bold;

    padding: 1rem 0;

    border-bottom: thin solid #CCC;

}



.details--table tr {

    border-bottom: thin solid #CCC;

}



.details--table th {

    font-weight: normal;

    text-align: left;

    vertical-align: text-top;

    padding: .4rem 1rem .4rem 0;

}



.details--table td {

    vertical-align: text-top;

    padding-right: 1rem;

}



/* details media queries */



@media screen and (min-width: 900px) {



    .details--container {



        -webkit-box-orient: horizontal;

        -webkit-box-direction: normal;

        -ms-flex-direction: row;

        flex-direction: row;

    }



    .details--gallery {

        width: 50%;

    }



}





/*Contact Us styles*/



.contact--text {

    padding: 2rem 0;

    display: -webkit-box;

    display: -ms-flexbox;

    display: flex;

    -ms-flex-wrap: wrap;

    flex-wrap: wrap;

    -webkit-box-pack: justify;

    -ms-flex-pack: justify;

    justify-content: space-between;

    align-items: stretch;

}



.contact--text--welcome {
    width: 100%;

}



.contact--text--welcome p {

    padding-right: 3rem;

}



.contact--text--form {

    width: 100%;

}





/* contact media queries */



@media screen and (min-width: 55rem) {



    .contact--text--welcome {


        width: 40%;

        padding-right: 4rem;
        padding-bottom: 9rem;

    }



    .contact--text--form {

        width: 60%;

        padding-right: 4rem;
        padding-bottom: 9rem;

    }

}



/*Contact Us Form styles*/



.cloud {

    display: none;

    visibility: hidden;

}



label {

    float: left;

    min-width: 25%;

}



input[type=text],

input[type=email],

input[type=password] {

    width: 75%;

    padding: .5rem 1rem;

    box-sizing: border-box;

    border: 1px solid #CCC;

    border-radius: 3px;

}



input[type=file] {

    max-width: 11rem;

}



select {

    width: 15rem;

    margin: 0 1rem;

    padding: .3rem 1rem;

    box-sizing: border-box;

    border: 1px solid #CCC;

    border-radius: 3px;

}



textarea {

    width: 100%;

    height: 10rem;

    padding: .5rem 1rem;

    box-sizing: border-box;

    border: 1px solid #ccc;

    border-radius: 3px;

    resize: none;

}





input:focus {

    outline: none;

    border: 1px solid var(--link-hover-color);

    border-radius: 3px;

}



input[type=button],

input[type=submit],

button {

    background-color: var(--link-hover-color);

    border: none;

    color: #FFF;

    padding: .5rem 2rem;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 1.6rem;

    margin: .5rem 0;

    cursor: pointer;

    border-radius: 4px;

    transition: background-color .3s;

    cursor: pointer;

}



input[type=button]:hover,

input[type=submit]:hover,

button:hover {

    background-color: var(--button-hover-color);

}



::-webkit-input-placeholder {

    font-family: 'Open Sans', sans-serif;

    font-style: italic;

    color: var(--placeholder-color);

}



:-moz-placeholder {

    /* older Firefox*/

    font-family: 'Open Sans', sans-serif;

    font-style: italic;

    color: var(--placeholder-color);

}



::-moz-placeholder {

    /* Firefox 19+ */

    font-family: 'Open Sans', sans-serif;

    font-style: italic;

    color: var(--placeholder-color);

}



:-ms-input-placeholder {

    font-family: 'Open Sans', sans-serif;

    font-style: italic;

    color: var(--placeholder-color);

}