/**
 * Index stylesheet for VDH Computers
 *
 * @author      Wouter Van den Heede
 *
 */
/* =============================================
 * INDEX PAGE - COMMON
 =============================================== */
#services, #bio, #contact {
    margin-top: 3rem;
}

#services .wrapper > p:first-of-type, #bio .wrapper > p:first-of-type, #contact .wrapper > p:first-of-type {
    font-size: 1.9rem;
    text-align: center;
}

/*#services, #bio, #contact > .wrapper > p {
    text-align: center;
}*/


/* =============================================
 * INDEX PAGE - SERVICES
 =============================================== */
#services {
	clear: both;
	overflow: hidden;
}

#services article {
    height: 400px;
    padding: 4rem 2.5rem;
}

#services article:not(:last-child) {
    margin-bottom: 5.75%;
}

#services article:nth-child(odd) {
    background-color: #EB9A2D;
}

#services article:nth-child(odd) h3 {
    color: white;
}

#services article:nth-child(odd) p {
    color: white;
}

#services article:nth-child(even) {
    border-width: 1px;
    border-color: #EB9A2D;
    border-style: solid;
}

#services article img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#services article h3 {
    /*font-size: 1.5em;*/
    font-size: 2.2rem;
    margin: 2rem 0 2.5rem 0;
}


/* =============================================
 * INDEX PAGE - BIO
 =============================================== */
#bio {
    overflow: hidden;
}

#bio img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /*width: 50%;*/
}

#bio p {
    text-align: justify;
}

/* =============================================
 * INDEX PAGE - CONTACT
 =============================================== */
/*#contact form dt, #contact form dd{
    line-height: 2.4rem;
}*/
#contact {
    overflow: hidden;
}

#contactinfo, #maps {
    margin-top: 3rem;
}

form label.error {
    font-size: 1.4rem;
    color: red;
}

form input.error, form textarea.error {
    border: 1px solid red;
    font-weight: 300;
    color: red;
}

form {
    overflow: hidden;
}

form dd#name, form dd#adres, form dd#postcode, form dd#telefoon, form dd#message {
    clear: both;
}

form input, textarea {
	display: block;
	margin-bottom: 1.8rem;
	padding: 1.5rem;
	width: 100%;

    outline: 0;
    border-width: 1px 1px 2px;
    border-color: #EB9A2D;
    border-style: solid;

    font-family: helvetica;
    color: #27223E;
    font-size: 1.5rem;
}

/* Chrome, Safari, Edge, Opera */
form input::-webkit-outer-spin-button,
form input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
form input[type=number] {
  -moz-appearance: textfield;
}

form input:focus, textarea:focus {
    border-color: #d48b29;
}

form textarea[name="message"] {
    height: 10rem;
    cursor: auto;
}

form input[type="submit"] {
    border: none;
    background-color: #EB9A2D;
    float: right;
    width: 13rem;
    cursor: pointer;
    color: white;
    font-size: 1.7rem;
    transition: background .1s linear,box-shadow .1s linear;
}
form input[type="submit"]:hover {
    background-color: #d48b29;
}

#contactinfo {
    overflow: hidden;
}

#contactinfo h4 {
    font-size: 1.9rem;
}
#contactinfo .address {
    overflow: hidden;
}

#contactinfo i {
    font-size: 2rem;
    float: left;
    width: 3rem;
    height: 5rem;
}

#contactinfo address {
    font-style: normal;
    float: left;
}
/* =============================================
 * INDEX PAGE - MAPS
 =============================================== */
/*#maps {
    width: 100%;
}*/

#map {
    height: 40rem;
}


/*Wraperclass for the divicon*/
.map-label {
  position: absolute;
  bottom: 0;left: -50%;
  display: flex;
  flex-direction: column;
  text-align: center;
}
/*Wrap the content of the divicon (text) in this class*/
.map-label-content {
  order: 1;
  position: relative; left: -50%;
  background-color: #fff;
  border-radius: 5px;
  border-width: 2px;
  border-style: solid;
  border-color: #444;
  padding: 3px;
  white-space: nowrap;
}
/*Add this arrow*/
.map-label-arrow {
  order: 2;
  width: 0px; height: 0px; left: 50%;
  border-style: solid;
  border-color: #444 transparent transparent transparent;
  border-width: 10px 6px 0 6px;
  margin-left: -6px;
}

.map-label.redborder > .map-label-content {
  border-color: #e00;
}
.map-label.redborder > .map-label-arrow {
  border-top-color: #e00;
}



/*@media (min-width: 35em) and (max-width: 45em) {

    body {
        background-color: red;
    }
    #services article {
        width: 40%;
        float: left;
    }

    #services article.\.column {
        margin-right: 5%;
    }
}*/

@media (min-width: 45em) {

	/* ===========================================
       Services
       =========================================== */
    /*body {
        background-color: yellow;
    }*/

    #services article {
        width: 29.5%;
        float: left;
    }

    #services article.\.column {
        margin-right: 5.75%;
    }

    /* ===========================================
       Bio
       =========================================== */

    #bio img {
        float: left;
        margin-right: 2rem;
    }

    /* ===========================================
       Contact
       =========================================== */
/*    form input[name="name"], form input[name="postcode"], form input[name="telefoon"] {
        width: 49%;
        float: left;
    }*/

    form dd#name, form dd#postcode, form dd#telefoon {
        width: 49%;
        float: left;
    }

    form label#name-error, form label#adres-error, form label#postcode-error, form label#telefoon-error, form label#message-error {
        width: 100%;
        float: left;
    }

/*    form input[name="gemeente"], form input[name="email"] {
        width: 49%;
        float: right;
    }*/

    form dd#gemeente, form dd#email {
        width: 49%;
        float: right;
    }

/*    form label#gemeente-error, form label#email-error {
        margin-left: -1%;
    }*/

    #contactinfo {
        width: 25%;
        float: left;
    }
	/* ===========================================
       Maps
       =========================================== */

    #maps {
        overflow: hidden;
        width: 70%;
        float: right;

    }

	/* ===========================================
       Contact
       =========================================== */
    #form  {
    	width: 100%;
        /*float: left;*/
    }
}