/*Default styles, starting from screen witdh 320px to 480px*/

* {
    margin: 0;
    padding: 0
}

header, nav, main, section, footer {
    display: block
}

section {
    height: 750px;
    padding: 1px 0;
    text-align: center
}

h1 {
    font-size: 24px
}

h2 {
    font-size: 22px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 15px
}

h6 {
    font-size: 14px
}

p {
    font-size: 14px;
    line-height: 1.4
}

button {
    background-color: crimson;
    color: white;
    border: none
}

button:hover {
    background-color: #B30000
}

.contentWidth {
    width: 300px
}

/*Header*/

header {
    height: auto
}

#desktopNav {
    display: none
}

.mobileNav {
    display: block;
    height: auto;
    line-height: 80px;
    max-width: 100%
}

.mobileNav h1 {
    display: inline;
    padding-left: 15px
}

.mobileNav a {
    color: black;
    display: none;
    float: left;
    font-size: 17px;
    line-height: normal;
    padding: 14px 16px;
    text-align: center;
    text-decoration: none
}

.mobileNav a.icon {
    border: none;
    display: block;
    float: right;
    line-height: 80px;
    padding: 0 15px
}

.mobileNav.responsive { /* onClick */
    position: relative
}

.mobileNav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0
}
.mobileNav.responsive a {
    display: block;
    float: none;
    text-align: center
}

.mobileNav.responsive a:hover {
    background-color: #333;
    color: white
}

.mobileNav.responsive h1 {
    display: none
}

/*Footer*/

footer {
    height: 780px
}

.footerUpper {
    background-color: #333;
    color: white;
    height: 720px
}

.footerUpperContent {
    margin: auto;
    padding: 1px 0
}

.footerUpperBox {
    margin: 20px 0
}

footer hr {
    margin: 15px 0;
    width: 40px
}

footer ul {
    list-style-type: none
}

footer li {
    line-height: 1.4
}

#tags li {
    border: 1px solid white;
    display: inline-block;
    margin: 5px 5px 5px 0;
    padding: 6px 10px
}

.footerLower {
    height: 60px;
    text-align: center
}

.footerLower p {
    line-height: 60px
}

/*Main*/

.heading {
    height: auto;
    margin: 60px auto 40px;
    width: 300px
}

.heading hr {
    border: black solid 1px;
    margin: 20px auto;
    width: 80px
}

.heading p {
    padding-top: 10px
}

.theTitle {
    background-color: #F5F5F5;
    height: 60px;
    line-height: 60px
}

.titleContent {
    margin: auto;
    text-align: left
}

/*~/index.html*/

/*links on page*/
#partnerlink, #servicelink, #aboutlink {
    background-color: crimson;
    display: inline-block;
    color: white;
    padding: 10px 8px;
    text-decoration: none
}

/*#home*/

#home {
    background: linear-gradient(rgba(20,20,20,.3),rgba(20,20,20,.3)),url('../images/carline.jpeg') center / cover no-repeat;
    color: white;
    height: 500px;
    position: relative
}

.homeContent {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%
}

.homeContent p {
    margin-top: 10px;
    margin-bottom: 30px;
}

.homeContent a {
    background-color: crimson;
    color: white;
    display: inline-block;
    padding: 10px 8px;
    text-decoration: none
}

.homeContent a:hover {
    background-color: #B30000;
    cursor: pointer
}

/*#partners*/
#partners {
    height: 900px
}

.partnersContent {
    background-color: silver;
    height: 500px;
    margin: 40px auto;
    width: 95%
}

/*#services*/
#services {
    background-color: #F5F5F5;
    height: 1100px
}

.serviceContent {
    height: auto;
    margin: 40px auto 20px;
    padding: 1px 0;
    text-align: left
}

.serviceContentBox {
    background-color: white;
    height: 220px;
    margin-bottom: 20px
}

.serviceContentBox img {
    height: 180px;
    width: 100%
}

.serviceContentBox h5 {
    padding: 7px 0 0 7px
}

button {
    font-size: 14px;
    margin-top: 20px;
    padding: 12px 16px
}

button:hover {
    cursor: pointer
}

/*#about*/

#about {
    height: 1400px
}

.aboutContent {
    height: auto;
    margin: 40px auto 20px;
    padding: 1px 0
}

.aboutContentBox {
    height: 330px;
    margin-bottom: 30px
}

.aboutContentBox img {
    height: 180px;
    width: 300px
}

.aboutContent h4 {
    margin: 20px 0
}

.aboutContentBox hr {
    margin: 20px auto;
    width: 40px
}

#aboutlink {
    padding: 12px 10px
}

/*#testimonial*/

#testimonial {
    background: linear-gradient(rgba(20,20,20,.3),rgba(20,20,20,.3)),url('../images/motor.jpg') center / cover no-repeat;
    color: white;
    height: 500px;
    position: relative;
}

.testimonialContent {
    height: auto;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 90%
}

.testimonialContent p {
    font-size: 18px
}

.testimonialContent hr {
    border-color: white;
    margin: 20px auto;
    width: 40px
}

/*#mission*/

#mission {
    height: 850px
}

.missionContent {
    height: auto;
    margin: auto
}

.missionContentBox {
    height: auto;
    margin-bottom: 20px;
    text-align: left
}

.missionContentBox img {
    height: auto;
    max-width: 100%
}

.missionContentBox h5 {
    padding-top: 10px
}

.missionContentBox p {
    padding: 10px 0 20px
}

/*signup/index.html*/
#sign {
    height: 1050px
}

.signContent {
    margin: 20px auto;
    text-align: left
}

.signContent label, .signContent input {
    display: block;
    margin: 10px 0
}

.signContentBox {
    margin-bottom: 20px
}

.signContentBox h4, .signContentBox p {
    margin-bottom: 10px
}

input[type=text], input[type=password], input[type=email] {
    padding: 8px;
    width: 260px
}

#zipLabel {
    margin-top: 20px
}

#check, #terms {
    display: inline
}

input[type=submit] {
    background-color: crimson;
    border: none;
    color: white;
    margin: 20px 0;
    padding: 12px 16px
}

input[type=submit]:hover {
    background-color: #B30000
}

/*about/index.html*/

#aboutPage {
    height: 850px
}

.aboutPageContent {
    margin: 20px auto;
    height: 1000px;
    text-align: left
}

.aboutPageContent p {
    margin-bottom: 20px
}

.aboutPageContent h5, .aboutPageContent hr {
    margin-bottom: 10px
}

.aboutPageContent hr {
    width: 40px
}

#aboutPage ul {
    padding-left: 20px
}

#aboutPage li {
    font-size: 14px;
    margin: 10px 0
}

.aboutPageContentBox {
    height: auto;
    margin-bottom: 40px
}

.aboutPageContentBox img {
    max-width: 100%;
    height: auto;
}

/*services/index.html*/
#servicePage {
    height: 880px
}

.serviceHeading {
    margin: 30px auto
}

.serviceHeading h2 {
    margin-bottom: 10px
}

.servicePageContent {
    margin: auto;
    padding: 1px 0
}

.servicePageContentBox {
    margin-bottom: 20px;
    text-align: left
}

/*partners/index.html*/
.partnersPageContent {
    margin: 40px auto
}

.partnersPageContentBox {
    margin-bottom: 20px
}

.partnersPageContentBox img {
    max-width: 100%;
    height: auto;
}

.partnersPageContentBox p {
    margin-bottom: 20px
}

.partnersPageContentBox h5, .partnersPageContentBox ul {
    text-align: left;
}

.partnersPageContentBox hr {
    margin: 10px 0;
    width: 40px
}

.partnersPageContentBox ul {
    padding-left: 20px
}

.partnersPageContentBox li {
    margin-bottom: 5px
}

#partnersPage button {
    margin-top: 40px
}

/*contact/index.html*/
#contact {
    height: 800px
}

.contactContent {
    margin: 30px auto 0;
}

.contactContentBox {
    margin-bottom: 30px
}

.contactContentBox h4, .contactContentBox p {
    margin-bottom: 10px
}

#contactForm {
    text-align: left
}

.contactContentBox label, .contactContentBox input {
    display: block;
    margin-bottom: 10px
}

.contactContentBox textarea {
    padding: 8px;
    height: 150px;
    width: 260px
}

/*Responsive*/
@media screen and (min-width: 480px) {
    h1 {
        font-size: 28px
    }

    h2 {
        font-size: 24px
    }

    h4 {
        font-size: 20px
    }

    h5 {
        font-size: 18px
    }

    h6 {
        font-size: 16px
    }

    p {
        font-size: 16px
    }

    .contentWidth {
        width: 470px
    }

    /*Footer*/
    footer {
        height: 680px
    }

    .footerUpper {
        height: 620px
    }

    /*~/index.html*/

    /*Main*/
    .heading {
        width: 470px
    }

    /*#partners*/
    #partners {
        height: 950px
    }

    /*#services*/
    #services {
        height: 850px
    }

    .serviceContent {
        height: 500px
    }

    .serviceContentBox {
        float: left;
        width: 45%
    }

    #elec {
        margin-left: 5%
    }

    /*#about*/
    #about {
        height: 1450px
    }

    /*#mission*/
    #mission {
        height: 950px
    }

    /*signup/index.html*/
    .signContentBox input[type=text], .signContentBox input[type=password], .signContentBox input[type=email] {
        width: 90%
    }

    /*about/index.html*/
    #aboutPage {
        height: 850px
    }

    /*services/index.html*/
    #servicePage {
        height: 800px
    }

    /*partners/index.html*/
    #partnersPage {
        height: 800px
    }

    /*contact/index.html*/
    .contactContentBox input, .contactContentBox textarea {
        width: 440px
    }

    .contactContentBox input[type=submit] {
        width: 180px
    }
}

@media screen and (min-width: 767px) {
    .contentWidth {
        width: 760px
    }

    /*Header*/
    #mNav {
        display: none
    }

    #desktopNav {
        display: block
    }

    header {
        padding: 1px 0;
        height: 100px
    }

    nav {
        margin: auto;
        height: 100px;
        line-height: 100px
    }

    nav h1 {
        display: inline-block;
        float: left
    }

    nav ul {
        list-style-type: none;
        float: right
    }

    nav li {
        float: left
    }

    nav a {
        color: black;
        font-size: 16px;
        line-height: 60px;
        padding: 12px 24px;
        text-decoration: none
    }

    nav a:hover {
        color: red
    }

    /*Footer*/
    footer {
        height: 460px
    }

    .footerUpper {
        height: 400px;
        padding: 1px 0
    }

    .footerUpperContent {
        margin-top: 20px;
        height: 350px
    }

    .footerUpperBox {
        float: left;
        height: 350px;
        margin: 0 10px;
        width: 232px
    }

    /*~/index.html*/

    /*Main*/
    .heading {
        width: 760px
    }

    /*#partners*/
    .partnersContent {
        width: 760px
    }

    /*#services*/
    #services {
        height: 600px
    }

    .serviceContent {
        height: 220px
    }

    .serviceContentBox {
        margin: 0;
        width: 253px
    }

    #elec {
        margin: 0
    }

    #services button {
        margin-top: 40px
    }

    /*#about*/
    #about {
        height: 750px
    }

    .aboutContent {
        height: 400px
    }

    .aboutContentBox {
        float: left;
        height: 400px;
        margin: 0 10px;
        width: 233px
    }

    .aboutContentBox img {
        width: 100%
    }

    /*#testimonial*/
    .testimonialContent {
        width: 760px
    }

    /*#mission*/
    #mission {
        height: 700px
    }

    .missionContent {
        height: 400px
    }

    .missionContentBox {
        float: left;
        margin: 0 10px;
        width: 360px
    }

    .missionContentBox h5 {
        padding-top: 0
    }

    /*signup/index.html*/
    #sign {
        height: 950px
    }

    .signContent {
        margin-top: 40px
    }

    .signContentBox {
        float: left;
        margin-right: 5%;
        width: 45%
    }


    /*about/index.html*/
    #aboutPage {
        height: 550px
    }

    .aboutPageContent {
        height: 450px;
        margin: 40px auto
    }

    .aboutPageContentBox {
        float: left;
        margin-right: 5%;
        width: 45%;
    }

    /*services/index.html*/
    #servicePage {
        height: 550px
    }

    .servicePageContent {
        height: 300px;
        margin-top: 50px
    }

    .servicePageContentBox {
        float: left;
        margin-right: 3%;
        width: 30%
    }

    /*partners/index.html*/
    #partnersPage {
        height: 500px
    }

    .partnersPageContentBox {
        float: left;
        margin-right: 5%;
        width: 45%
    }

    /*contact/index.html*/
    #contact {
        height: 700px
    }

    .contactContent {
        margin-top: 40px
    }

    .contactContentBox {
        float: left;
        margin-right: 5%;
        width: 45%
    }

    .contactContentBox input, .contactContentBox textarea {
        width: 90%;
    }

}

@media screen and (min-width: 1200px) {
    h1 {
        font-size: 32px
    }

    h2 {
        font-size: 28px
    }

    h4 {
        font-size: 24px
    }

    h5 {
        font-size: 20px
    }

    h6 {
        font-size: 18px
    }

    p {
        font-size: 18px
    }

    .contentWidth {
        width: 1180px
    }

    /*Header*/
    nav a {
        font-size: 18px
    }

    /*Footer*/
    footer {
        height: 360px
    }

    .footerUpper {
        height: 300px
    }

    .footerUpperContent {
        height: 250px
    }

    .footerUpperBox {
        height: 250px;
        margin: 0 45px;
        width: 303px
    }

    /*~/index.html*/

    /*Main*/
    .heading {
        width: 1180px
    }

    /*#partners*/
    #partners {
        height: 900px
    }

    .partnersContent {
        width: 1180px
    }

    /*#services*/
    #services {
        height: 700px
    }

    .serviceContent {
        height: 300px;
        margin: 60px auto 0
    }

    .serviceContentBox {
        height: 260px;
        width: 363px
    }

    #elec {
        margin: 0 45px
    }

    .serviceContentBox img {
        height: 220px;
        width: 100%
    }

    /*#about*/
    #about {
        height: 850px
    }

    .aboutContent {
        height: 450px;
        margin: 60px auto 40px;
    }

    .aboutContentBox {
        height: 450px;
        margin: 0 20px;
        width: 353px
    }

    .aboutContent img {
        height: 234px
    }

    /*#mission*/
    .missionContent {
        margin: 60px auto 40px
    }

    .missionContentBox {
        margin: 0 15px;
        width: 560px
    }

    /*signup/index.html*/
    .signContent {
        margin-top: 60px
    }

    /*about/index.html*/
    #aboutPage li {
        font-size: 16px
    }

    /*services/index.html*/
    #servicePage {
        height: 600px
    }

    .servicePageContent {
        margin-top: 60px
    }

    .servicePageContentBox {
        padding-bottom: 20px
    }

    /*partners/index.html*/
    #partnersPage {
        height: 600px
    }

    .partnersPageContent {
        margin-top: 60px
    }

    /*contact/index.html*/
    .contactContent {
        margin-top: 60px
    }
}