@import url('https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900&display=swap&subset=latin-ext');

@media (min-width:320px) and (max-width: 374px){
    input[type="checkbox"]:checked ~ nav{
        width: 100%;
	}
	input[type="checkbox"]:checked ~ .container{
        display: none;
		/*transform: translateX(-400px);
		transition: 2s;*/
    }
    .label{
        left: 0;
        top:0.9%;
    }
    .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: #000;
        box-shadow: 0 30px 30px rgba(0,0,0,.5);
    }
    h3{
        text-align: center;
    }
}

@media (min-width:375px) and (max-width:424px){
    input[type="checkbox"]:checked ~ nav{
        width: 100%;
	}
	input[type="checkbox"]:checked ~ .container{
        display: none;
		/*transform: translateX(-400px);
		transition: 2s;*/
    }
    .label{
        left: 0;
        top:0.9%;
    }
    .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: #000;
        box-shadow: 0 30px 30px rgba(0,0,0,.5);
    }
    h3{
        text-align: center;
    }

}

@media (min-width:425px) and (max-width:767px){
    input[type="checkbox"]:checked ~ nav{
        width: 100%;
	}
	input[type="checkbox"]:checked ~ .container{
        display: none;
		/*transform: translateX(-400px);
		transition: 2s;*/
    }
    .label{
        left: 0;
        top:0.9%;
    }
    .box{
        position: relative;
        width: 100%;
        height: 300px;
        background: #000;
        box-shadow: 0 30px 30px rgba(0,0,0,.5);
    }
    h3{
        text-align: center;
    }

    }

@media (min-width:768px) and (max-width: 1023px){
    input[type="checkbox"]:checked ~ nav{
        width: 100%;
	}
	input[type="checkbox"]:checked ~ .container{
        display: none;
		/*transform: translateX(-400px);
		transition: 2s;*/
    }

    .label{
        left: 0;
        top:0%;
    }
    h3{
        text-align: center;
    }

}

@media (min-width:1024px) and (max-width:1440px){
    input[type="checkbox"]:checked ~ nav{
	    width: 33%;
    }

    label{
        left: 23%;
        top:2%;
    }
    
    h1{
        font-size:1.5em;
        font-weight: 300;
    }

    h2{
        font-size: 1.0em;
        font-weight: 300;
    }

    h5{
        text-align: justify;
        font-weight: 300;
        font-size: .9em;
    }
}