/* ----------------------------
base css ******
---------------------------- */

html,
body
{
	background-color: #000;
	margin: 0;
	padding: 0;
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	line-height: 130%;
	font-weight: bold;
	color: #c6c6c6;
	text-align: left;
}

.sans-body-small {
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: 130%;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #c6c6c6;
	text-align: left;
}

.sans-body-small-itals {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1em;
	font-style: italic;
	line-height: 130%;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #c6c6c6;
	text-align: left;
}

.sans-body-gallery {
	font-family: Arial, helvetica, sans-serif;
	font-size: .95em;
	font-style: normal;
	line-height: 150%;
	font-weight: bold;
	color: #c6c6c6;
	text-align: left;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	margin: 0;
	color: #fff;
	padding-top: .1em;
	line-height: 130%;
	font-weight: bold;
}

a:link, a:visited {
color: #fff;
text-decoration: none;
}
a:focus, a:active, a:hover{
color:#bdbcbc;
}

img
{
	max-width: 100%;
	height: auto;
	border: 0;
	padding-bottom: .3em; 
	vertical-align: middle;
}

a:focus img { background: #000; }
a:hover img { background: #000; }
a:active img { background: #af0000; }
blockquote { margin: 0; }

/* ----------------------------
wide
---------------------------- */

@media (min-width: 38em)
{
	body
	{
		background-color: #000;
		font-size: 1.125em;
		/* 18px/16px */
	}
	
	sans-body-gallery
	{
		font-size: .9em;
		/* 14.4px/16px - was .8 have enlarged*/
	}
}

/* ----------------------------
layout css ******
---------------------------- */

/* row */
.row
{
	clear: both;
	overflow: hidden;
}

/* row-colors */
.row--white { background: #FFF; }
.row--black { background: #000; }
.row--orange { background: #faa61a; }
.row--grey { background: #c6c6c6; }

.row--dark-grey
{
	color: #000;
	background: #878787;
}

/* row-padding */
.row--padding-medium
{
	padding-top: 1em;
	padding-bottom: .8em;
}

.row--padding-wide
{
	padding-top: 1.3em;
	padding-bottom: 1em;
}

.row--padding-small
{
	padding-top: 0.1em;
	padding-bottom: 1em;
}


/* containers */
.container-narrow,
.container-medium,
.container-wide
{
	margin: 0 auto;
	padding-left: 1.5em;
	padding-right: 1.5em;
}

.container-narrow { max-width: 34em; }
/* max width 34 x 16 = 544 */
.container-medium { max-width: 52em; }
/* max width 52 x 16 = 832 */
.container-wide { max-width: 58em; }
/* max width 58 x 16 = 928 */

.container-gallery { 
width: 100%;

}

/* columns */
.col-narrow,
.col-narrow--right,
.col-medium--right
{ margin-bottom: 1.5em; }

.col-gallery { 
width: 100%; 
margin-top: 0;
line-height: 1.1
}

/* ----------------------------
wide
---------------------------- */

@media (min-width: 38em)
{
	.row--padding-medium
	{
		padding-top: 1em;
		padding-bottom: .8em;
	}
	
	.row--padding-wide
	{
		padding-top: 1.2em;
		padding-bottom: 1em;
	}
	
	.row--padding-small
{
	padding-top: 0.1em;
	padding-bottom: 1em;
}
	
	.container-narrow,
	.container-medium,
	.container-wide
	{
		padding-left: 2em;
		padding-right: 2em;
	}
	
	.container-gallery { 
margin-left: -2%;
margin-right: -2%;
}
	
	.col-narrow,
	.col-medium,
	.col-wide,
	.col-gallery { 
	float: left;
		line-height: 1.1
	}
	
	.col-narrow--right,
	.col-wide--right
	.col-medium--right
	{ float: right; }
	
	.col-wide,
	.col-wide--right { width: 61%; }
	
	.col-medium,
	.col-medium--right
	{ width: 50%;
	margin-bottom: 0;
	line-height: 1.1
	}
	
	.col-narrow,
	.col-narrow--right
	{
		width: 45%;
		margin-bottom: 0;
	}
	


	.col-gallery { 
	width: 31.2%;
    padding-left: 2%;
	line-height: 1.1
	}
	
	.col-gallery:first-child, .col-gallery:nth-child(4), .col-gallery:nth-child(7), .col-gallery:nth-child(10), .col-gallery:nth-child(13), .col-gallery:nth-child(16), .col-gallery:nth-child(19), .col-gallery:nth-child(22)  { 
	padding-left: 0; 
	display: inline-block;
	}
}

	
	/* ---------------------------- 4-column gallery

	.col-gallery { 
	width: 23.5%;
    padding-left: 2%; 
	}
	
	.col-gallery:first-child, .col-gallery:nth-child(5),  .col-gallery:nth-child(9),  .col-gallery:nth-child(13),  .col-gallery:nth-child(17), .col-gallery:nth-child(21)  { 
	padding-left: 0; 
	display: inline-block;
	}
}

---------------------------- */

/* ----------------------------
modules css ******

/* ----------------------------
banner
---------------------------- */

.row--banner
{
	padding-bottom: 47%;
	height: 0; 
	background-color: transparent;
	background-image: url(../img/banner-artistsrepublica-LOGOSTACKED2-544.png);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.row--contact
{
	padding-bottom: 8%;
	height: 0; 
	background-color: transparent;
	background-image: url(../img/contact-artists-republica-544.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}




@media (min-width: 38em)
	/* min width 38 x 16 = 608 */
{
	.row--banner {
	padding-bottom: 11%;  
	background-image: url(../img/banner-artistsrepublica-LOGO-928.png); 
	}

	.row--contact {
	padding-bottom: 7%;  
	background-image: url(../img/contact-artists-republica-928.jpg); 
	}
	
	
}


/* ----------------------------
header
---------------------------- */

.header
{
	padding: 1.25em 1em;
	/* 20px/16px - 16px/16px */
}

.header__contact
{
	float: left;
	padding-top: .2em;
}

.header__nav
{
	float: left;
	width: auto;
}

.header__nav ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
}

.header__nav li
{
	display: inline-block;
	margin: 0;
}

.header__nav a
{
	display: inline-block;
	margin-left: .08em;
	padding: 0.5em 1em 0.5em;
	color: #878787;
	background: none;
	font-size: 1em;
	/* 16px/16px */
	font-weight: bold;
	text-decoration: none;
}

.header__nav-contact a { margin-right: 0; }

.current a
{
	color: #000;
	background: none;
	
}

.header__nav a:focus { color: #878787; }
.header__nav a:hover { color: #575756; }
.header__nav a:active { color: #878787; }

@media (min-width: 24em)
{
	.header__nav a { 
	font-size: 1em;
	/* 16px/16px */
	margin-left: .09em;
	}
}

@media (min-width: 30em)
{
	.header__nav a { 
	font-size: 1em;
	/* 16px/16px */
	margin-left: .2em;
	}
}

@media (min-width: 38em)
	/* at 38em body changes to 18px so each em is now 18px */
{
	.header
	{
		padding: 2.2222em 2em;
		/* 40px/18px - 36px/18px */
	}
	
	.header__nav { width: auto; }


}

@media (min-width: 42em)

	
	{
	.header__nav a { font-size: 1.1em;
		/* 20px/18px */
	}
	}

@media (min-width: 50em)

	
	{
	.header__nav a { font-size: 1.22em;
		/* 22px/18px */
	}
	
}

@media (min-width: 55em)
{
	.header__nav a { font-size: 1.44em;
		/* 26px/18px */
	}
}

/* ----------------------------
banner-content
---------------------------- */

.banner-content
{
	padding: 1.875em 1.5em 2.8125em;
	/* 30px/16px - 24px/16px - 45px/16px */
	text-align: center;
}

.banner-content__heading
{
	margin: 0 0 1.875em;
	/* 30px/16px */
	color: #000;
	font-size: 1.5em;
	/* 24px/16px */
	font-weight: bold;
}

@media (min-width: 38em)
{
	.banner-content
	{
		padding: 7.5em 2em;
		/* 135px/18px - 36px/18px */
	}

	.banner-content__heading
	{
		font-size: 2.5556em;
		/* 46px/18px */
	}
}

/* ----------------------------
features
---------------------------- */

.features { text-align: left;
	        font-weight: bold;
		}

.features__row
{
	margin-bottom: 1em;
	/* 16/16px */
}

.features__heading
{
	font-weight: bold;
	margin: 0 0 .75em;
	/* 12px/16px */
	font-size: 1.125em;
	/* 18px/16px */
	
}

.features__text { 
	font-weight: bold;
	margin: 0;
	font-size: 1.125em;
	line-height: 130%;
	
		}

@media (min-width: 38em)
{
	.features { text-align: left;
	font-weight: bold;}

	.features__row
	{
		margin-bottom: 1em;
		/* 18px/18px */
	}

	
	.features__row:last-child { margin: 0; }

	.features__padding
	{
		padding-top: 4em;
		/* 72px/18px */
	}
	
	.features__heading
	{
		font-size: 1.4em;
		/* xx/18px */
		font-weight: bold;
	}
.features__text { 
	font-size: 1em;
	line-height: 130%;
	 }
	
	}
		
		@media (min-width: 45em)
{
.features__text { 
	font-size: 1em;
	line-height: 130%;
	 }
}


@media (min-width: 50em)
{
	.features__bike { height: 154px; }
	.features__phone { height: 296px; }
	.features__safe { height: 141px; }
}