.horizontal,
.vertical{
	width: 100%;
	margin-left: auto;
  	margin-right: auto;
	position: relative;
	margin-top: 2em;
}
.basic{
	width: 98%;
	padding-left: 2%;
}

.carrot_illustrration{
  display: block; 
  width: 37%;
  height: auto;
  opacity: 1;
  position: absolute;
  margin-top: 5em;
  margin-right: 5%;
  margin-left: 60%;
  z-index: -1;
	}
.gallerynew p{
	font-family: 'Exo', sans-serif;
	font-weight: 400;
}
.gallerynew img{
	transition: 0.7s;
	box-shadow: 1px 3px 4px #5a6f77;
	}	
.gallerynew img:hover{
	filter:grayscale(70%);
	transform: scale(1.05);
	
	}	



/*-------------------Screen adjustments ------------------------------------------------------------------*/

@media (max-width : 320px ) {
.about{
  margin-top: 5em;
}	
.carrot{
  width: 15em;
  margin-top: 10em;	
	}
	
	.carrot_illustrration{
	width: 20em;
	margin-top: 8em;
	display: block;
	margin-left: auto;
  	margin-right: auto;
	position: relative;
	}
#smaller{
	width: 100%;
}	
}


@media (min-width : 320px ) and ( max-width : 550px ) {
.about{
  margin-top: 2em;
}	
.carrot_illustrration{
	width: 25em;
	margin-top: 10em;
	display: block;
	margin-left: auto;
  	margin-right: auto;
	position: relative;
	}
	
.carrot{
	width: 20em;
	margin-top: 10em;
	}
.col-sm-6my{
	width: 80%;
	margin-left: 9%;
	}
.col-sm-4my{
	width: 45%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}
	
}
@media (min-width : 550px )and ( max-width : 767px ) {
.about{
  margin-top: 5em;
}	

#smaller{
	width: 94%;
}	
.welcomem h1{
		padding-top: 2em;
		padding-bottom: 0em;
		text-align: center;
		width: 96%;
	}	
	
.carrot{
	width: 25em;
	padding-top: 3em;
	padding-bottom: 0px;
	}	
.col-sm-6my{
	width: 80%;
	margin-left: 9%;
	}			
		
.col-sm-4my{
	width: 45%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}			
	

}
@media (min-width : 768px )and ( max-width : 1200px ) {
.about{
  margin-top: 5em;
}	

#smaller{
	width: 94%;
}	
.carrot{
	width: 30%;
	margin-top: 4em;
	}	
.gallerynew{
	padding-top: 0px;	
	}	
.col-sm-6my{
	width: 45%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}	
.col-sm-4my{
	width: 30%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}			
	
}
@media (min-width : 1201px ) {
.about{
  margin-top: 5em;
}	

#smaller{
	width: 94%;
}	
.carrot{
	width: 30%;
	margin-top: 4em;
	}
	
.gallerynew{
	padding-top: 0px;	
	width: 95%;
	padding-left: 3%;
	}		
.col-sm-6my{
	width: 30%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}
.col-sm-4my{
	width: 22%;
	margin-left: 2.5%;
	position: relative;
	float: left;
	}			
		
	
	
}