@media only screen {
    body,
    html {
        margin: 0;
        width: 100%;
        font-family: poppins;
    }

    textarea,
    input[type=text] {
        font-family:poppins;
    }

    .active,
    .accordion:hover {
        background-color: #ccc;
    }

    .accordion-p {
        margin: 0;
    }

    .sticky {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 999;
    }

    .flexDiv {
        display: flex;
    }

    .closeButton {
        height: 30px;
        width: 30px;
        border-radius: 24px;
        border: none;
        background-color: white;
    }

    #popup-form {
        min-width: 400px;
        display: none;
        position: fixed;
        border: solid 1px white;
        border-radius: 24px;
        color: white;
        background-color: #0A153D;
        top: 50%;
        left:50%;
        z-index: 999;
        transform: translate(-50%, -50%);
    }

    #formHolder {
		position: relative;
		display: block;
		min-height:60%;
		padding: 2%;
	}	

    .formfield	{
        padding: 8px;
        margin-bottom: 12px;
    }
    
    .contactForm {
        display: flex;
        flex-direction: column;
        padding: 1em;
        margin: 0;
    }

}


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

    .hero-image {
        background-image: url("images/tappdo_feature.jpg");
        height: 80%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .hero-overlay {
        text-align: center;
        position: absolute;
        top: 50%;
        width: 50%;
        transform: translate(0%, -50%);
        color: white;
    }

    .sticky {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 999;
    }



    .forecostDiv {
        flex-direction: row;
    }

    .forecostLeft {
        flex-basis: 0;
        flex-grow: 1; 
        min-width: 0; 
        max-width: 40%;
        padding: 2em 4em 2em 4em;
    }

    .accordion {
        background-color: #FFF;
        background-color: #FFF;
        border-bottom: solid 2px #000;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        font-size: 15px;
        transition: 0.4s;
    }



    .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    .contactButton {
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        border: none;
        background-color: #FFFFFF;
        color: #000;
        font-size: 16px;
    }

    .contactButton:hover {
        cursor: pointer;
    }

    .moreButton {
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        border: none;
        background-color: #171717;
        color: #FFF;
        font-size: 16px;
    }

    .moreButton:hover {
        cursor: pointer;
        background-color: #269FD9;
        transition: 0.7s;
    }

    .quotesBox {
        background-color: #0A153D; 
        padding: 3em 8em 4em 8em; 
        text-align: center; 
        color: #FFF;
    }

    .techFrame {
        background-color: #171717;
        padding: 2em 4em 2em 4em;
        color: #FFF;
    }

    .techHolder {
        display: flex;
        flex-direction: row;
    }

    .techBox {
        background-color: white;
        color: black;
        flex-grow: 1;
        flex-basis: 0;
        margin: 24px;
        padding: 1.5em;
    }

    .techLogo {
        max-width: 60%;
    }

    .enquiryBox {
        color: #FFF;
        background-image: url("images/tappdo_contact.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 4em 8em 8em 8em;
    }
}

@media only screen and (max-width: 1049px) {

    .hero-image {
        background-image: url("images/tappdo_feature.jpg");
        height: 80%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
    }

    .hero-overlay {
        text-align: center;
        position: absolute;
        top: 50%;
        width: 100%;
        transform: translate(0%, -50%);
        color: white;
    }

    .sticky {
        position: fixed;
        top: 0px;
        width: 100%;
        z-index: 999;
    }



    .forecostDiv {
        flex-direction: column;
    }

    .forecostLeft {
        flex-basis: 0;
        flex-grow: 1; 
        min-width: 0; 
        max-width: 100%;
        padding: 1em 2em 1em 2em;
    }

    .accordion {
        background-color: #FFF;
        background-color: #FFF;
        border-bottom: solid 2px #000;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        font-size: 15px;
        transition: 0.4s;
    }

    .active,
    .accordion:hover {
        background-color: #ccc;
    }

    .accordion-p {
        margin: 0;
    }

    .panel {
        padding: 0 18px;
        background-color: white;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }

    .contactButton {
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        border: none;
        background-color: #FFFFFF;
        color: #000;
        font-size: 16px;
    }

    .contactButton:hover {
        cursor: pointer;
    }

    .moreButton {
        padding: 10px 20px 10px 20px;
        border-radius: 20px;
        border: none;
        background-color: #171717;
        color: #FFF;
        font-size: 16px;
    }

    .moreButton:hover {
        cursor: pointer;
        background-color: #269FD9;
        transition: 0.7s;
    }

    .quotesBox {
        background-color: #0A153D; 
        padding: 1em 2em 1em 2em; 
        text-align: center; 
        color: #FFF;
    }

    .techFrame {
        background-color: #171717;
        padding: 1em 2em 1em 2em;
        color: #FFF;
    }

    .techHolder {
        display: flex;
        flex-direction: column;
    }
    
    .techBox {
        background-color: white;
        color: black;
        flex-grow: 1;
        flex-basis: 0;
        margin: 10px 10px 20px 10px;
        padding: 1.5em;
    }

    .techLogo {
        max-width: 80%;
    }

    .enquiryBox {
        color: #FFF;
        background-image: url("images/tappdo_contact.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding: 4em 4em 4em 4em;
    }
}