/* --Website Responsiveness Code Starts -------------------------------- */
/* ------------------------------------------------------------------------
------------------------ Responsiveness 2560 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 2560px){

body{
	margin-left: 0px; 
	margin-right: 0px;
}

/* ------------------------------------------------------------------------
------------------------ Responsiveness 1440 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1440px){

body{
	margin-left: 0px; 
	margin-right: 0px;
}


/* ------------------------------------------------------------------------
------------------------ Responsiveness 1024 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px){

html{
	font-size: 14px;
}


h1{
	font-size: 2.5rem;
	}


.grid--tile{
	grid-template-columns: 50% 50%;
}

.button--amazon{

	padding: 10px; 
	width:130px; 
}


}


/* ------------------------------------------------------------------------
------------------------ Responsiveness 823 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 823px){



html{
	font-size: 14px;
}


.grid--container{
	grid-template-rows:270px repeat(3,auto);
}


.grid--tile{
	grid-template-columns: 50% 50%;
}

.tile--1 img{
	display: none !important;
}



.button--amazon{

	padding: 10px; 
	width:130px; 
}

.section--final{
	display: grid;
	background-color: ;
	grid-template-columns: 100%;
	
}

.section--pros-cons{
	margin-bottom: 10px;
}


.section--buy{
	grid-row: 4/5;
	display: grid;
	background-color: ;

	grid-template-columns: 2,1fr;
	grid-template-rows: 1;
	width: 50%;
	margin-left: auto;
}

.grid--tile-a,.button--amazon{
	margin-left: 10px;
	margin-bottom: 0px;

}

.grid--tile-a{
	grid-column: 1/2;
	grid-row: 1/2;
}



.button--amazon{
grid-column: 2/3;
grid-row: 1/2;

}




}

/* ------------------------------------------------------------------------
------------------------ Responsiveness 768 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 768px){


	h1{
	margin-bottom: 20px;

}


}

/* ------------------------------------------------------------------------
------------------------ Responsiveness 736 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 736px){



.section--buy{
	width: 60%;
	margin-left: auto;
}


}

/*------------Responsive ---------------------------------------------------
-----------------------------667px---------------------------------------------
------------------------------------------------------------------------------*/
@media only screen and (max-width: 667px){


}

/* ------------------------------------------------------------------------
------------------------ Responsiveness 640 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 640px){
    
    


    
    
    }
/* ------------------------------------------------------------------------
------------------------ Responsiveness 568 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 568px){


	
.body--area--heading{
	display: block;
	margin-left: 0px;
	margin-right: 0px;
}

.cont--heading{
	margin-bottom: 1rem;
	
	}


h1{
	font-size: 3rem;
	margin: 0rem;
}

.cont--banner-image{

	border-radius:3.75rem;
	background-position: center;
	background-size: cover; 
	height: 18.75rem;
}


}


/* --------------Responsive ---------------------------------------------------
-----------------------------414px---------------------------------------------
------------------------------------------------------------------------------*/
@media only screen and (max-width: 414px){


.grid--container{
	display: block;


}

.grid-section-specs{
 display: block;
 grid-gap: 5px;
 padding-top: 25px;
 margin-right: 10px;
}

.grid--tile{
	display: grid;
	grid-template-columns: 2fr 3fr;
	width: 3	00px;
	margin-bottom: 10px;
	height: 30px;

}

.section--buy{
	width: 100%;
}


.section--pros-cons{
display: block;
grid-gap: 5px 5px;
grid-template-columns: 100%;
grid-template-rows: repeat(auto);
padding: 10px;
}

.tile--label{
	background-color:rgba(0,167,0,1); 
	color: white;
	border-radius: 10px 10px 0px 0px;
	margin-bottom: 5px;

	justify-content: center; 
	align-items: center;
}

.tile--label[title=a]{
	background-color:rgba(220,0,0,1); 
}


.tile--description{
	display: block;
	justify-content: center;
	align-items: center;
	text-align: center;

	background-color:rgba(0,167,0,0.4); 
	color: black;
	border-radius: 0px 0px 0px 0px;
	font-size: 14px;
	padding: 5px;
	margin-bottom: 5px;
}

.tile--description[title=a]{
	background-color:rgba(220,0,0,0.4); 
	color: black;

}

.end-tile{
	border-radius: 0px 0px 10px 10px;
	margin-bottom: 10px;
}







}


/* --------------Responsive ---------------------------------------------------
-----------------------------375px---------------------------------------------
------------------------------------------------------------------------------*/



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

    
}

/* ------------------------------------------------------------------------
------------------------ Responsiveness 360 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 360px){

}


/* ------------------------------------------------------------------------
------------------------ Responsiveness 320 px -------------------------------
--------------------------------------------------------------------------- */
@media only screen and (max-width: 320px){

 

}

/* Website Responsiveness Code Ends -------------------------------- */