/** 
 * Sets the grids maximum width
 * @var $grid-max-width (pixels|ems|percentage)
 */
/*!
 * Sets the grids breakpoint
 * 
 * To add a new break point you'll need to add an element to the list.
 * 
 * Here's an example: ( class-name-prefix, minimum-width, maximum-width, gutter-width, no-media-query).
 * 
 * class-name-prefix: this is the prefix used in tons of inks classes i.e.: large-100, small-40, etc.
 * minimum-width: (pixels|null) the minimum width for the breakpoint 
 * maximum-width: (pixels|null) the maximum width for the breakpoint 
 * gutter-width: (ems) the width for the gutters (space between grid columns) for the breakpoint 
 * no-media-query: (true|false) if you need to support IE8 set this to true on a single breakpoint.
 *                 Since IE8 does not support the @media statement leaving one of the breakpoints
 *                 outside a @media query let's you use the grid in IE8.
 *  
 */
/* for xlarge screens */
@media screen and (min-width: 1261px) {
  /* your css for xlarge screens goes here ... */
  div.intro span.text {
    color: #ffffff;
    display: block;
    text-shadow: 1px 2px 1px #555;
    /*text-transform: uppercase;*/
    white-space: nowrap;
}
	.lft_arrow {
		background-image: url("../images/arrow-l.png");
		background-position: left;
		background-repeat: no-repeat;
		display: inline-block;
		padding-left: 56px;
		padding-top: 30px;
	}
	.rgt_arrow {
		background-image: url("../images/arrow-r.png");
		background-position: right;
		background-repeat: no-repeat;
		display: inline-block;
		padding-right: 56px;
		padding-top: 30px;
	}
}
/* for large screens */
@media screen and (min-width: 961px) and (max-width: 1260px) {
  /* your css for large screens goes here ... */
  div.intro span.text {
    color: #ffffff;
    display: block;
    text-shadow: 1px 2px 1px #555;
    /*text-transform: uppercase;
    white-space: nowrap;*/
}
.lft_arrow {
    background-image: url("../images/arrow-l.png");
    background-position: left;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 56px;
    padding-top: 30px;
}
.rgt_arrow {
		background-image: url("../images/arrow-r.png");
		background-position: right;
		background-repeat: no-repeat;
		display: inline-block;
		padding-right: 56px;
		padding-top: 30px;
	}
}
/* for medium screens */
@media screen and (min-width: 641px) and (max-width: 960px) {
  /* your css for medium screens goes here ... */
   div.intro span.text {
    color: #ffffff;
    
    text-shadow: 1px 2px 1px #555;
    /*text-transform: uppercase;
    white-space: nowrap;*/
}
.intro + div{
	margin-top: 121px;
}
.lft_arrow {
    background-image: url("../images/arrow-l.png");
    background-position: left;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 56px;
    padding-top: 30px;
}
.rgt_arrow {
		background-image: url("../images/arrow-r.png");
		background-position: right;
		background-repeat: no-repeat;
		display: inline-block;
		padding-right: 56px;
		padding-top: 30px;
	}
}
@media screen and (min-width: 380px) and (max-width: 640px) {
	.lft_arrow {
    background-image: url("../images/arrow-l.png");
    background-position: left;
    background-repeat: no-repeat;
    display: inline-block;
    padding-left: 56px;
    padding-top: 30px;
}
.rgt_arrow {
		background-image: url("../images/arrow-r.png");
		background-position: right;
		background-repeat: no-repeat;
		display: inline-block;
		padding-right: 56px;
		padding-top: 30px;
	}
}
/* for small screens */
@media screen and (min-width: 321px) and (max-width: 640px) {
  /* your css for small screens goes here ... */
   div.intro span.text {
    color: #ffffff;
    
    text-shadow: 1px 2px 1px #555;
    /*text-transform: uppercase;
    white-space: nowrap;*/
}
.intro + div{
	margin-top: 121px;
}
}
/* for tiny screens */
@media screen and (max-width: 320px) {
  /* your css for tiny screens goes here ... */
   div.intro span.text {
    color: #FF0000; 
    text-shadow: 1px 2px 1px #555;
    /*text-transform: uppercase;
    white-space: nowrap;*/
}
.intro + div{
	margin-top: 121px;
}
}