/* *************************** */
/* ******* SPECIAL FONT ****** */
/* *************************** */

/*
Hvis du vil adde en speciel skrifttype til dit website, eksempelvis din h2 skal du generere den skrifttype du vil bruge på 
" http://www.fontsquirrel.com/fontface/generator " og så ligge ind i samme mappe som style.css ligger i. 

Derefter skal du være sikker på at kalde filerne det samme som du erstatter 'FONT-NAME-HERE' med.

Der efter skal du så benytte dig af: font-family: 'FONT-NAME-HERE'; der hvor du vil bruge skrifttypen. (husk at erstattet 
FONT-NAME-HERE med din skrifttype, og det skal være et sammenhængende ord.
*/

@font-face {
  	font-family: 'FONT-NAME-HERE';
  	src: url('FONT-NAME-HERE.eot?') format('eot'), url('FONT-NAME-HERE.woff') format('woff'), url('FONT-NAME-HERE.ttf') format('truetype');
}


/* *************************** */
/* ***** GLOBAL STYLING ****** */
/* *************************** */

* {
	margin: 0;
	padding: 0;
}

body {
	font-family:Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	background-color: #000000;
	margin-left: 25px;
	margin-right: 25px;
	background-image: url("../images/background.png");
	background-repeat: repeat;
	padding-bottom: 50px;
}

html {
	overflow-y: scroll;
}

/* ***** NO IMG BORDERS ****** */

a img {
	border: 0;
	text-decoration: none;
}

.clear_both {
	clear: both;
}

/* *************************** */
/* ****** TXT STYLING ******** */
/* *************************** */

h1 {	
	margin: 0;
	padding: 0;
}

h2 {	
	margin: 0;
	padding: 0;
}

h3 {
	margin: 0;
	padding: 0;
}

p {
	margin: 0;
	padding: 0;
}

/* *************************** */
/* *********** CSS *********** */
/* *************************** */

.logo {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 20px;
}

.logo img {
	width: 250px;
	clear:both;
}

@media (max-width: 1285px) {
.logo img {
	width: 500px !important;
	clear:both;
}
}

.choose {
	margin-bottom: 25px;
}

.choose p {
	text-align: center;
	font-size: 30px;
	color: #ffffff;
}

@media (max-width: 1285px) {
  .choose p {
	font-size: 50px;
}
}

.located {
	padding-top: 25px;
}

.located p {
	text-align: center;
	font-size: 25px;
	color: #ffffff;
}

@media (max-width: 1285px) {
.located {
	margin: 0 auto !important;
}
}

@media (max-width: 1285px) {
.located img{
	width: 96%;
	padding-left: 2%;
	padding-right: 2%;
}
}

.phone {
	margin-bottom: 25px;
	margin-top: 25px;
	color: #ffffff;
}

.phone a:link {
	border: none;
	text-decoration: none;
	color: #ffffff;
}

.phone a:visited {
	border: none;
	text-decoration: none;
	color: #ffffff;
}

.phone p {
	float: right;
	clear: both;
	color: #ffffff;
	font-size: 22px;
	font-weight: normal;
}

.clearboth {
	clear: both;
}

.barbers {
	margin: 0 auto;
	max-width: 1000px;
}

@media (max-width: 1285px) {
  .barbers {
	max-width: 75% !important;
	padding-right: 8% !important;
}
}

.barbers a:link {
	border: none;
	text-decoration: none;
	color: #000000;
}

.barbers a:visited {
	border: none;
	ext-decoration: none;
	color: #000000;
} 

.barber {
	width: 45%;
	float: left;
	padding: 15px;
	margin: 0 auto;
	margin-right: 2%;
	margin-bottom: 15px;
	background-color: #ffffff;
}

@media (max-width: 1285px) {
  .barber {
	margin: 0 auto;
	width: 100% !important;
	margin: 0px !important;
	margin-bottom: 15px !important;
	padding: 30px !important;
	padding-bottom: 15px !important;
}
}

.barber img
{
  width: 100%;
  opacity:1;
}

.barber:hover
{
  opacity:0;
  transition: opacity .5s ease-out;
  -moz-transition: opacity .5s ease-out;
  -webkit-transition: opacity .5s ease-out;
  -o-transition: opacity .5s ease-out;
  opacity:.75;
}

.barber h4 {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
	margin-top: 10px;
	margin-bottom: 0px;
	padding-bottom: 0px;
}

@media (max-width: 1285px) {
.barber h4 {
	font-size: 250%;
}
}

.barber p {
	text-align: center;
	font-size: 20px;
}