/****************************
       8. PAGES shopping cart
    ****************************/
    .viewCart {
        margin:0 auto 1em;
        text-align: center;
    }
    .viewCart a {
        width:50%;
        margin:0 auto;
        padding:1em;
        border-radius:50px;
        background-color: #000;
    }
    .viewCart a:hover {
        letter-spacing:0;
    }
/***************************
     9. PAGES products-home 
***************************/
.products {
    
}
.products h2 {
    background-color: transparent;
    width: 80%;
    margin: 1em auto;
    padding:.6em;
}
.products main ul a {
    padding:1.5em;
    margin-bottom:2em;
    border-radius:5px;
}
.shoppingCart {
    background-color: #fff;
    display: block;
    margin: 1em auto;
    padding: .6em;
    width: 20%;
    height: auto;
}

/***************************
    10. PAGES products-bulk 
***************************/
.products-bulk main {
    width:100%;
    margin:0 auto;
}
.products-bulk .imgWrap {
    width: 80%;
    max-width: 200px;
    margin: 4em auto;
}
.products-bulk img {
    width: 100%;
    height: auto;
    margin-bottom: .2em;
}
.products-bulk h3 {
    margin-bottom: 1em;
}
.products-bulk footer {
    clear:both;
}
.products-bulk input {
    margin: 1em 0;
    padding:.2em 1.4em;
    border-radius: 5%;
    box-shadow: 0 0 3px #888;
}
select:hover, input:hover {
    cursor: pointer;
}

.social-icon {
    width: 30px;
    height: 30px;
    margin: 0 10px;
    z-index: 23;
}
/***************************
    11. PAGES products-small 
***************************/

.products-small input {
    margin: 1em 0;
    padding:.2em 1.4em;
    border-radius: 5%;
    box-shadow: 0 0 3px #888;
}

/***************************
    12. PAGES products-custom 
***************************/

.products-custom {
    text-align: center;
}
.products-custom p {
    max-width: 300px;
    margin: 0 auto 2em;
}
.products-custom h3 {
    margin-bottom:1em;
}
.products-custom legend {
    margin-bottom: 1em;
}
.products-custom label {
    margin: 0;
}
.products-custom input {
    margin: 1em 0;
    padding:.2em 1.4em;
    border-radius: 5%;
    box-shadow: 0 0 3px #888;
}
.products-custom input:hover {
    cursor:text;
}
.products-custom input[type="submit"]:hover {
    cursor:pointer;
}
.products-custom textarea {
    width:50%;
    padding: 1em;
    border-radius:1em;
    margin-bottom: 2em;
}

/********************************
    15.    @MEDIA QUERIES
********************************/

/*******************************
    16. Start @media 500px/30em
*******************************/

@media screen and (min-width: 30em) {
    .products-bulk main ul {
        width:80%;
        max-width:550px;
        margin:0 auto;
    }
    .products-bulk .imgWrap, .products-small .imgWrap {
        width:40%;
        float: left;
        margin:3em 5%;
    }
}


/*******************************
    17. Start @media 712px/45em
*******************************/


 @media screen and (min-width:712px) {
     
    
    /****************************
        PAGES products
    ****************************/
    
    
    .products h2 {
        width: 60%;
        margin: 1em auto;
    }
    .shoppingCart {
        float: left;
        width: 20%;
        margin: 0 0 0 3em;
    }
    .products main ul {
        width: 50%;
        margin-top: 3em;
    }
    .products main li {
        margin: 2em 0 0 0;
    }
    .products main a {
        padding: 1em 0;
        border-radius:5px;
    }
    .products .centerAlign {
        margin:0 auto;
    }
    .viewCart a {
        margin-top: 2em;
        width:30%;
        background-color: #000;
    }
    
    /****************************
        PAGES products-bulk
    ****************************/
    .products-bulk main ul {
        width:100%;
        margin: 0 auto;
    }
	.products-bulk .imgWrap {
	    width:23%;
	    float: left;
	}
	
		/***************************
    PAGES products-small @media-712px/45em
    ***************************/
    
    
    .products-small .imgWrap {
        width:20%;
        margin: 0 1em;
    }
	
	/***************************
    PAGES products-custom @media-712px/45em
    ***************************/
    
    .products-custom {
        text-align: center;
    }
    .products-custom p {
        max-width: 300px;
        margin: 0 auto 2em;
    }
    .products-custom fieldset {
        width:40%;
        float: left;
    }
    .products-custom legend {
        margin-bottom: 1em;
    }
    .products-custom label {
        margin: 0;
    }
    .products-custom input {
        margin:0 auto 1em;
    }
    .products-custom input:hover {
        cursor:text;
    }
    .products-custom textarea {
        width:100%;
        padding: 1em;
        border-radius:1em;
        margin-bottom: 2em;
    }
 }    
    /****************************
     18.   Start @media 800px/60em
    ****************************/

@media screen and (min-width: 60em) {
    	/***************************
   
    PAGES products-custom @media-800px/60em
    ***************************/
    
    .products-custom {
        text-align: center;
    }
    .products-custom p {
        width:25%;
        float: left;
        margin: 0 1.5em;
    }
    .products-custom .personalInfo {
        width:25%;
        float: left;
        padding:0 .5em;
        margin: 0 .5em;
    }
    .products-custom legend {
        margin-bottom: 1em;
    }
    .products-custom label {
        margin: 0;
    }
    .products-custom input {
        margin:0 auto 1em;
    }
    .products-custom input:hover {
        cursor:text;
    }
    .products-custom input[type="submit"] {
         margin: 2em auto;   
    }
    .products-custom input[type="submit"]:hover {
         cursor:pointer;   
    }    
    .products-custom textarea {
        width:100%;
        padding: 1em;
        border-radius:1em;
        margin:0 0 0 4em;
    }
    .products-custom label {
        display:none;
    }
}