@media screen and (min-width:769px) and (max-width:1024px){
    .container{
        height: 20vh;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 50px;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
}

@media screen and (min-width:481px) and (max-width:768px){
    .container{
        width: 80%;
		position:relative;
		margin-left:auto;
		margin-right:auto;
		padding-top: 50px;
    }
	.container img{
		width:200px;
	}
	.container h2{
		text-align:center;
	}
    form{
        width: 90%;
    }
    form .row{
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form .row .input-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    form .cats{
        width: 80%;
        height: auto;
        display: flex;
        align-items: center;
        margin: 5px 0;
       
        text-align: justify;
    }

	
    form .conditions{
        margin: 20px 0;
    }
    form .condition{
        width: 80%;
        height: 50px;
        margin: 10px 0;
        text-align: justify;
    }
}

@media screen and (min-width:320px) and (max-width:480px) {
    .container{
        height: auto;
        width: 80%;
        margin: 0 auto;
        margin-top: 30vh;
		padding-top: 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
	.container img{
		width:150px;
	}
    .container h1{
        font-size: 3rem;
    }
    .container h2{
        font-size: 14px;
		text-align:center;
    }

    form{
        width: 80%;
    }
    form h3{
        font-size: 1rem;
        margin:20px 0;
    }
    form .row{
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form .row .input-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    form .cats{
        width: 90%;
        height: auto;
        display: flex;
        align-items: center;
        margin: 15px 0;
        font-size: 14px;
        text-align: justify;
    }

    form .row .input-container textarea{
        height: 100px;
    }

	form .conditions{
		margin:30px 0;
	}
    form .condition{
        width: 80%;
        height: 50px;
        margin: 40px 0;
        text-align: justify;
    }

    button[type="submit"]{
        width: 80%;
        text-transform: uppercase;
        padding: 20px;
        background: rgb(133, 194, 42);
        color: #fff;
        border: none;
        cursor: pointer;
        margin-top: 100px;
        font-size: 14px;
    }
}
@media screen and (max-width:320px) and (max-height:568px){
    body{
        font-size: 14px;
    }
    .container h1{
        font-size: 2rem;
    }
}
/*HEIGHT*/
@media screen and (max-width:1080px) and (max-height:1920px) and (orientation: portrait){
	nav{
		height:5vh;
	}
	.container{
		margin-top: 5vh;
        height: 20vh;
    }
	
	form .conditions{
        margin: 20px 0;
    }
}
@media screen and (max-width:1024px) and (max-height:768px) and (orientation: landscape){
    .container{
        height: 30vh;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 50px;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    form{
        width: 90%;
    }
    form .row{
        width: 80%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    form .row .input-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }
    form .cats{
        width: 80%;
        height: auto;
        display: flex;
        align-items: center;
        margin: 5px 0;
       
        text-align: justify;
    }
    form .condition{
        width: 80%;
        height: 50px;
        margin: 10px 0;
        text-align: justify;
    }
}
@media screen and (max-width:812px) and (max-height:600px) and (orientation: landscape){

    .container{
        height: 30vh;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 100px;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
}
@media screen and (max-height:414px) and (orientation: landscape){
    .container{
        height: 30vh;
        width: 80%;
        margin: 0 auto;
        margin-bottom: 200px;
        margin-top: 10vh;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .container h1{
        font-size: 3rem;
    }
}
@media screen and (max-height:320px) and (orientation: landscape){

}