@import url(animate.css);
@import url(http://fonts.googleapis.com/css?family=Righteous);

/* === Global Styles === */
body {
	background: #2e2c36;
	/*background: linear-gradient(#441f16, #ad3300);*/
	background: url(../img/bg.png);
	font-size: 100%;
	font-family: Verdana, Helvetica, sans-serif;
	color: #908079;
}

a {
	text-decoration: none;
	color: inherit;
}

h2, h3, h4, h5 {
	font-weight: 300;
	color: #aaa;
}

/*	
h2 span, h3 span, h4 span, h5 span {
	color: #e9f233;
}*/

h2 {
	font-size: 2.25em;
}

h3 {
	font-size: 2em;
}

h4 {
	font-size: 1.75em;
}

h5 {
	font-size: 1.5em;
}

p {
	font-size:0.875em;
}

img {
	max-width: 100%;
	height: auto;
}

strong {
	font-weight: bold;
}

hr {
	border: none;
	height: 1px;
	background-color: #f5f6f6;
}

.cf:before, .cf:after {
    content: "";
    display: table;
}

.cf:after {
    clear: both;
}

.cf {
    zoom: 1;
}

/* === Header === */
header {
	width: auto;
	margin: 0;
 padding: 0;
}

header .container {
	margin: 2.125em auto 1.125em;
	padding: 0;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: column;
	flex-flow: column;
 align-items: center;
}

header .logo, header .slogan, header .contact {
 margin: auto;
}

header .logo {
 padding: 1.25em 1.25em;
}

header .slogan {
 padding: 0 1.25em;
}

header .logo p {
	font-family: 'Righteous', cursive;
	text-transform: uppercase;
}

header .logo p span {
	font-size: 1.375em;
	color: #aaa;
}

header .logo p span.txt {
	font-size: 2.5em;
	color: #616161;
}

header .icon {
 width: 3em;
 color: #aaa;
 text-align: center;
}

header ul {
  margin: 1em 0;
}

header .contact {
 display: none;
}

header .contact li {
 color: #fff;
	text-transform: uppercase;
 font-size: 0.875em;
}

header .contact li .txt {
	color: #aaa;
}

header .slogan h2 {
	font-family: 'Righteous', cursive;
	font-size: 1.25em;
 text-align: center;
	text-transform: uppercase;
 color: #aaa;
}

/* === For medium displays (like mobile phones in landscape or smaller tablets) (460px) === */
@media screen and (min-width: 28.75em) {  
 header .container {
  -webkit-flex-flow: row;
  flex-flow: row;
  justify-content: space-around;
 }
  
 header ul {
  margin: 0;
 }
}
	
/* === For large displays (like medium tablets and up) (648px) */
@media screen and (min-width: 52.5em) {		
 header .slogan {
  width: 40%;
 }
 
 header .contact {
  display: block;
 }
}

/* === Top Slogan === */
#top_slogan {
 width: auto;
 margin: 0;
 padding: 0;
	border-top: 0.125em solid #616161;
 background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.4);
}

#top_slogan div {
	margin: 0 auto;
	text-align: center;
 max-width: 70%;
}

#top_slogan h3 {
 padding: 1em 1em;
 line-height: 1.5em;
	font-family: 'Righteous', cursive;
	font-size: 1.25em;
	font-weight: 300;
 text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.125em;
 color: #fff;
}

/* === Image Slider === */
#slider {
	width: auto;
	margin: 0 auto;
	position: relative;
}

#slider article h3 {
	font-family: 'Righteous', cursive;
	font-size: 1.25em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.125em;
 color: #616161;
}

#slider article p {
	font-size: 1em;
	text-transform: uppercase;
	letter-spacing: -0.125em;
	color: #616161;
}

#slider_content1, #slider_content2, #slider_content3, #slogan {
 position: absolute;
 padding: 1em 1em;
 top: 30%;
 line-height: 1.5em;
	text-align: center;
	display: none;
	z-index: 900;
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.7);
}

#slogan {
 top: 2px;
}

 #slider_content1, #slogan {
  display: block;
 }

#slides {
	display: none;
}

#slides img {
	border-top: 0.125em solid #616161;
	border-bottom: 0.125em solid #616161;
}

.check-media{
  display: none;
  width: 0;
}

/* === For medium displays (like mobile phones in landscape or smaller tablets) (460px) === */
@media screen and (min-width: 28.75em) {
 .check-media{
  width: 28.75em;
 }
  #slider_content1, #slider_content2, #slider_content3 {
   width: 50%;
  }
  
  #slogan {
   width: 50%;
  }
}

@media screen and (max-width: 40em) {
 #slider {
  height: 1px;
  top: -1500px;
 }
}

@media screen and (min-width: 40em) {
 .check-media{
  width: 40em;
 }
}
	
/* === For large displays (like medium tablets and up) (648px) */
@media screen and (min-width: 52.5em) {
 #slider_content1, #slider_content2, #slider_content3 {
  width: 35%;
 }
 
 #slogan {
  width: 100%;
 }
}

/* === Text Columns === */
#textcolumns  {
	width: auto;
	margin: 0;
	padding: 0;
}

#textcolumns .container {
	margin: 0 auto 2.5em;
	padding: 0;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-around;
}

#textcolumns article {
	width: 90%;
	text-align: center;
}

#textcolumns article h3 {
	margin: 1.6em 0;
	font-family: 'Righteous', cursive;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	color: #8c8c8c;
}

#textcolumns article p {
	margin: 3em 1em;
	color: #8c8c8c;
	line-height: 1.5em;
}

#textcolumns article .stripe {
	width: 1.5em;
	height: 0.125em;
	margin: 0 auto;
	background: transparent;
	background: #616161;
}

#textcolumns article .icon {
	color: #616161;
}

/* === For medium displays (like mobile phones in landscape or smaller tablets) (460px) === */
@media screen and (min-width: 28.75em) {

}

@media screen and (min-width: 40em) { 
  #textcolumns .container { 
  margin: 1.125em auto 4.5em;
	}
}

/* === For large displays (like medium tablets and up) (648px) */
@media screen and (min-width: 52.5em) {
		#textcolumns article {
			width: 23.125em;
			margin: 1em 1em;
		}
		#textcolumns div.stripe {
			display: none;
		}
}

/* === Middle Heading === */
#mheading {
	width: auto;
	margin: 0 auto;
	padding: 3.5em 0 8.5em;
	
	background-color: rgb(255, 255, 255);
	background-color: rgba(255, 255, 255, 0.4);
	
	/* Red
	background-color: rgb(255, 0, 0);
	background-color: rgba(255, 0, 0, 0.4); */
	
	/*background-color: rgb(204, 204, 204);
	background-color: rgba(204, 204, 204, 0.4);*/
	border-top: 0.125em solid #616161;
}

#mheading div {
	margin: 0 auto;
	text-align: center;
 	max-width: 60%;
}

#mheading div h3 {
	margin: 0.5em 0;
	padding: 0.5em 0;
	font-family: 'Righteous', cursive;
	font-size: 2.5em;
	font-weight: bold;
	text-transform: uppercase;
	word-wrap: break-word;
	letter-spacing: 0.125em;
	color: #fff;
}

#mheading div h4 {
	margin: 0;
	padding: 0;
	font-family: 'Righteous', cursive;
	font-size: 1.5em;
	font-weight: bold;
	text-transform: uppercase;
	word-wrap: break-word;
	letter-spacing: 0.125em;
	color: #fff;
}

#mheading div p {
	padding: 0.45em 0;
	color: #fff;
	font-size: 1.25em;
	word-wrap: break-word;
}

/* === Picture Columns === */
#picturecolumns {
	width: auto;
	margin: 0;
	padding: 0;
	
	/* Light grey
	background-color: rgb(170, 170, 170);
	background-color: rgba(170, 170, 170, 0.4);
	
	/*
	background-color: rgb(214, 206, 183);
	background-color: rgba(214, 206, 183, 0.4);
	
	/*
	background-color: rgb(227, 213, 186);
	background-color: rgba(227, 213, 186, 0.4);
	*/
	border-top: 0.125em solid #616161;
}

#picturecolumns h2 {
	margin: 1.5em 0;
 padding: 0;
	font-family: 'Righteous', cursive;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.125em;
	color: #616161;
}

#picturecolumns .container {
	margin: 3.125em auto 4.5em;
	padding: 0;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	justify-content: space-around;
}

#picturecolumns article {
	margin: 0;
	padding: 0;
	/*max-width: 90%;*/
	text-align: center;
}

/*#picturecolumns article h3 {
	margin: 0;
	font-size: 1em;
	text-align: center;
	font-weight: bold;
	text-transform: uppercase;
	color: #1d1d1d;
}*/

.thumb {
	margin: 0 auto;
	padding: 0;
	width: 17.5em;
	display: block;
	position: relative;
	overflow: hidden;
}

.thumb img {
	width: 17em;
	height: auto;
	-moz-transition: 0.5s all ease;
	-o-transition: 0.5s all ease;
	-webkit-transition: 0.5s all ease;
	transition: 0.5s all ease;
	border: 0.25em solid #616161;
}

.thumb_overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  -moz-transition: 0.3s all ease;
  -o-transition: 0.3s all ease;
  -webkit-transition: 0.3s all ease;
  transition: 0.3s all ease;
  color: #fff;
  background: transparent;
}
.thumb_overlay:before {
  content: "\1f50e";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  font-size: 3em;
  margin-top: -1em;
  text-align: center;
}

.thumb:hover .thumb_overlay {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
}

.thumb:hover img {
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-o-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}


#picturecolumns article figcaption {
	margin: 1em 1.875em 0;
	line-height: 1.3125em;
	color: #fff;
}

#picturecolumns article figcaption strong {
	border-bottom: 1px solid #616161;
	padding-bottom: 0.625em;
	margin: 0.625em 0;
	display: block;
}

#picturecolumns div.stripe {
	background: transparent;
	background: #575757;
	width: 25%;
	height: 0.125em;
	margin: 1.875em;
}

/* === For medium displays (like mobile phones in landscape or smaller tablets) (460px) === */
@media screen and (min-width: 28.75em) {		
 .thumb {
			width: 20.625em;
 }
 .thumb img {
  width: 20.125em;
 }
}
	
/* === For large displays (like medium tablets and up) (648px) */
@media screen and (min-width: 52.5em) {
 #picturecolumns article {
  width: 23.125em;
  margin: 1em 1em;
 }
 #picturecolumns div.stripe {
  display: none;
 }
}

/* === Footer === */
footer {
	width: auto;
	margin: 0;
	padding: 0;
	background: #1d1d1d;
  border-top: 0.125em solid #616161;
}

#logo {
	margin: 0 auto;
	padding: 3em 0 0;
}

#logo p {
	font-family: 'Righteous', cursive;
	text-transform: uppercase;
	text-align: center;
}

#logo p span {
	font-size: 1.25em;
	color: #aaa;
}

#logo p span.txt {
	font-size: 2em;
	color: #616161;
	line-height: 1.25em;
}

#contact, #copyright {
	margin: 0 auto;
	padding: 0.5em 0;
	font-size: 0.85em;
	color: #ababab;
	text-align: center;
}

#contact > div {
  display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -moz-flex;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: column;
	flex-flow: column;
	justify-content: space-around;
}

#contact ul {
	list-style: none;
	margin: 1em auto;
}

#contact .social {
  order: 2;
}

#copyright {
	color: #5e5e5e;
}

#copyright ul {
	list-style: none;
	margin: 1em auto;
}

#copyright li {
	margin: 0.5em 0;
}

#copyright  a {
	color: #ababab;
}

#copyright a:hover {
	color: #ffffff;
}

@media screen and (min-width: 40em) {
  
  #contact, #copyright {
    width: 30em;
  }
  
  #contact > div {
    -webkit-flex-flow: row;
    flex-flow: row;
    justify-content: space-around;
  }
  
    #contact .social {
      order: 0;
    }

  #contact .partner {
    padding: 2em 0;
	}
}

/* === Misc === */
.clear {
	clear: both;
}
.hidden {
	position: absolute;
	clip: rect(1px 1px 1px 1px); /* IE6 & 7 */
	clip: rect(1px, 1px, 1px, 1px);
}
.none {
	visibility: hidden;
}