body {
    font-family: 'Open Sans', sans-serif;
    background-color: #383838;
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-attachment: fixed;
}

ul {
    -webkit-padding-start: 40px;
}
/* Header */ 

.header {
    background-color: #383838;
    height: 169px;

}

.logo {
    width: 237px;
    margin: auto;
    text-align: center;
    padding: 27px 3px;
}

.firstwaste {
    position: absolute;
    top: 41px;
    right: 12px;
    margin: 10px 10px 10px 10px;
}

.call-now {
    display: inline-block;
    text-transform: uppercase;
    color: #e2c500;
    font-size: 21px;
    line-height: 22px;
    margin-top: 15px;
 }

span.headernumber {
    font-size: 17px;
    color: #ffe322;
}

/* Intro area */ 
            
.blurb-area {
    background-color: #292929;
    padding: 47px 0px;
}

.blub-container {
    text-align: center;
    width: 786px;
    margin: auto;
}

.blurb-title {
    color: #bfbfbf;
    text-transform: uppercase;
    font-size: 26px;
}

span.title-bold {
    color: #e2c500;
    font-weight: 700;
}

.blurb-desc {
    color: #bfbfbf;
}

.quote-title {
    text-align: center;
    color: #d5d5ca;
    text-transform: uppercase;
    padding: 47px 0px;
    font-size: 25px;
}

.quote-container {
    width: 581px;
    margin: auto;
}

/* Seperators */ 

.quote-sep {
        height: 1px;
        width: 600px;
        background-color: #444444;
        margin: auto;
}

.top-sep {
      margin-top: 34px;
}

.bot-sep {
    margin-bottom: 34px;
}

/* Company Details */ 

.details-row {

}

.tablet-row {
    display: inline-block;
}

input.details-input  {
    width: 283px;
    height: 56px;
    color: #443c00;
    background-color: #e2c500;
    border: none;
    margin-bottom: 6px;
    padding-left:10px;
    font-weight: bold;
}

input.details-input#email  {
    width: 573px !important;
    margin-top: 1px;
    font-weight: bold;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    font-weight: bold;
    color: #8a7800
}
::-moz-placeholder { /* Firefox 19+ */
    font-weight: bold;
    color: #8a7800
}
:-ms-input-placeholder { /* IE 10+ */
    font-weight: bold;
    color: #8a7800
}
:-moz-placeholder { /* Firefox 18- */
    font-weight: bold;
    color: #8a7800
}


input:-webkit-autofill,  input:-webkit-autofill:focus,  input:-webkit-autofill:after,  input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #d0b500 inset !important;
}

/* Bin size */ 


.bin-container {
    width: 784px;
    margin: auto;
}

.sub-title {
    text-align: center;
    text-transform: uppercase;
    color: #c3c3c3;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
}

li {
    list-style-type: none;
}

input.selector {
    color: red;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

input[type=radio] ~ label {
    background-color: #b39c00;
    color: #6d3e01;
    width: 130px;
    float: left;
    text-align: center;
    margin-right: 16px;
    padding: 10px 0px;
    cursor: pointer;
    transition: 500ms;
}

input[type=radio]:hover ~ label {
    background-color: #e2c500;
    color: #5d4208;   
}

input[type=radio]:checked ~ label {
    background-color: #e2c500;
    color: #5d4208;   
}

/* Waste Type */ 

          
input[type=checkbox]{
    position: absolute;
    visibility: hidden;
}

input[type=checkbox] ~ label {
    background-color: #b39c00;
    color: #6d3e01;
    width: 130px;
    height: 60px;
    float: left;
    text-align: center;
    margin-right: 16px;
    padding: 20px 0px;
    cursor: pointer;
    transition: 500ms;
}

ul li:nth-child(2) input[type=checkbox] ~ label {
    padding: 11px 0px;
}

input[type=checkbox]:hover ~ label {
     background-color: #e2c500;
    color: #5d4208;  
}

input[type=checkbox]:checked ~ label {
    background-color: #e2c500;
    color: #5d4208;  
}

/* number of bins */ 

.bins-required-container {
    width: 784px;
    margin: auto;
}    


.bins-required-container input[type=radio] ~ label {
    width: 88px;
}

 /* visit per week */ 
            
.collections-container {
    width: 868px;
    margin: auto;
}   

.collections-container input[type=radio] ~ label {
    width: 98px;
}

.access-issues-container {
    width: 500px;
    margin: auto;
}

/* text area */ 

textarea {
    background-color: #e2c500;
    color: #443c00;
    border: none;
    width: 100%;
    padding: 12px;
    margin-bottom: 29px;
    font-weight: bold;
}

/* Button */

.btn-primary {
    background-color: #f1f1f1;
    color: #292929;
    border: none;
    width: 500px;
    height: 51px;
    font-weight: bold;
}

.btn-primary:hover {
    background-color: #d5d5d5;
    color: #292929;
}

/* Footer */ 

.footerwrapper {
    background-color: #292929;
    color: #fff;
    border-top: 5px solid #1f1f1f;
    font-size: 13px;
    text-align: center;
    padding-top: 0.5%;
    margin-top: 39px;
}
.footer-address {
    height: 200px;
    padding-top: 61px;
    color: #828282;
}

.socialmedia {
    text-transform: uppercase;
    color: #DDDDDD;
}

.copyright {
    background-color: #1f1f1f;
    border-top: 1px solid #151515;
    padding: 14px 15px 14px 15px;
    color: #8c8c8c;
}

.copyright a {
    color: #3A9833;
}
            


@media only screen and (max-width: 900px) {
    .blub-container {
        width: 100%;
        padding: 0px 20px;
    }
    
    .bin-container {
        width: 500px;
    }
    
    .bins-required-container {
        width: 500px;
    }
    
    .collections-container {
        width: 500px;
    }
    
    label {
        margin-bottom: 5px;
    }
    
    input[type=radio] ~ label {
        margin-right: 5px;
        width: 32.2%;
    } 
    
    li:nth-child(4) input[type=radio] ~ label {
        width: 48.7%;
    }
    
    li:nth-child(5) input[type=radio] ~ label {
        width: 48.7%;
    }
    
    input[type=radio] ~ label {
        margin-right: 5px;
        width: 32.2%;
    }
    
    input[type=checkbox] ~ label {
        margin-right: 5px;
        width: 32.2%;
    }
    
    li:nth-child(4) input[type=checkbox] ~ label {
        width: 48.7%;
    }
    
    li:nth-child(5) input[type=checkbox] ~ label {
        width: 48.7%;
    }
    
    .bins-required-container input[type=radio] ~ label {
        margin-right: 5px;
        width: 32.2%;
    } 
    
    .bins-required-container li:nth-child(4) input[type=radio] ~ label, .bins-required-container li:nth-child(5) input[type=radio] ~ label {
        width: 32.2%;
    }

    .bins-required-container li:nth-child(7) input[type=radio] ~ label {
        width: 98.7%;
    }
    
    .collections-container input[type=radio] ~ label {
        margin-right: 5px;
        width: 32.2%;
    }

    .collections-container li:nth-child(4) input[type=radio] ~ label, .collections-container li:nth-child(5) input[type=radio] ~ label {
        width: 32.2%;
    } 
    
    .collections-container li:nth-child(7) input[type=radio] ~ label {
        width: 98.7%;
    }
}      
    

@media only screen and (max-width: 690px) {
    .quote-container {
        width: 100%;
    }
    
    .tablet-row {
        width: 300px;
        display: block;
        margin: auto;
    }

    input.details-input#email {
        width: 283px!important;
        margin-top: 0px;
    }
}

@media only screen and (max-width: 540px) {
    ul {
        -webkit-padding-start: 0px;
    }
    
    .firstwaste {
        display: none;
    }
    
    .blurb-title {
        margin-bottom: 20px;
    }
    
    .bin-container {
        width: 300px;
        padding: 0px 15px;
        padding-left: 25px;
    }
    
    .bins-required-container {
        width: 300px;
        padding: 0px 15px;
        padding-left: 25px;
    }
    
    .collections-container {
        width: 300px;
        padding: 0px 15px; 
        padding-left: 25px;
    }
    
    label {
        margin-bottom: 5px;
    }
    
    input[type=radio] ~ label {
       width: 45.7%;
    } 
    
    li:nth-child(4) input[type=radio] ~ label {
        width: 45.7%;
    }
    
    li:nth-child(5) input[type=radio] ~ label {
        width: 45.7%;
    }
    
    input[type=radio] ~ label {
      width: 45.7%;
    }
    
    input[type=checkbox] ~ label {
        width: 45.7%;
    }
    
    li:nth-child(4) input[type=checkbox] ~ label {
        width: 45.7%;
    }
    
    li:nth-child(5) input[type=checkbox] ~ label {
        width: 45.7%;
    }
    
    .bins-required-container input[type=radio] ~ label {
        width: 45.7%;
    } 
    
    .bins-required-container li:nth-child(4) input[type=radio] ~ label, .bins-required-container li:nth-child(5) input[type=radio] ~ label {
        width: 45.7%;
    } 
    
    .bin-container li:nth-child(5) input[type=radio] ~ label,  .bin-container li:nth-child(5) input[type=checkbox] ~ label {
        width: 93.5%;
    }
    
    .bins-required-container li:nth-child(7) input[type=radio] ~ label {
        width: 45.7%;
    }
    
    .collections-container input[type=radio] ~ label {
        width: 45.7%;
    }
    .collections-container li:nth-child(4) input[type=radio] ~ label, .collections-container li:nth-child(5) input[type=radio] ~ label {
        width: 45.7%;
    } 
    
    .collections-container li:nth-child(7) input[type=radio] ~ label {
        width: 93.5%;
    }
    
    .access-issues-container {
        width: 88%;
    }
    
    .btn-primary {
        width: 250px; 
    }
}