@charset "utf-8";
/* CSS Document */
/*===  $$ @font-face // Google fonts  ====*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,100,100italic,300italic,400italic,500,500italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300);
/*==========  $$Etiquetas  ==========*/
html{
	font-size:16px;
}
body {
	font-size:1em; /*Fallback*/
	font-size:1rem;
	font-family: "Arial", sans-serif;
	/*	font-family: Arial, Helvetica, sans-serif;*/
}
main{/*Influye en la estructura*/
	display:block;
	width:auto;
	height:auto;
	min-height:100%;
	padding-bottom:0em;/*la misma altura del footer*/
}
main:after{/*Influye en la estructura*/
	width: 100%;
	height: 5em;/*la misma altura del footer*/
	display: block;
	clear: both;
	overflow:hidden;
}
h1 {color:#381837; font-size:48px; font-family: 'Arial', sans-serif; font-weight:700; }
h2 {color:#381837; padding-top:1em;
}
h3 {color:#381837; font-size:18px; padding-top:1em;
}
h4 {color:#fffceb; font-size:18px; padding:1em ; background-color:#381837; max-width:50%; font-weight:300;}
h5 {
}
h6 {
}
p {padding-top:1em; font-size:18px; line-height:1.5em; color:#381837; font-weight:300;}
i {
}
b {
}
strong {
	font-weight:bold;
}
em{
}
small {
	font-size:80%;
}
big {
	font-size:120%;
}
hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}
p > a{text-decoration:underline; color:#381837;}
a {
}
a:link {
	/*text-decoration:underline;*/
}
a:hover {
	/*text-decoration:underline;*/
}
a:active {
}
a:visited {
}
a:visited:hover {
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
aside{
	overflow:hidden;
	display:block;
}
/*==========  $$Wrapper  ==========*/
.wrapper{
/*Mantener la relación de con la altura del Footer*/
	padding-bottom:0em;
}
.wrapper:after{
	height: 0em;
}
/*=========  $$Form  =========*/
/*=========  Validación  ========*/
input:required:focus:invalid {
	background-color: red;
	border: 1px solid black;
}
input:required:focus:valid {
	background-color: green;
	border: 1px solid black;
}
/*=========  $$Estilos utilitarios  ========*/
.left {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}
.clear-left {
	clear: left;
}
.clear-right {
	clear: right;
}
.space {
	height:1em;
	clear:both;
	background-color:#381837);
}
.space-wh {
	height:1em;
	clear:both;
	background-color:rgba(255,255,255,0);
}
.img-responsive{
	width:100%;
	height:auto;
}
.invisible {
    visibility: hidden;
}
.not-desktop{
	display:none;
	/*los estilos not-tablet y no-mobile se definen en los media queries*/
}
.only-desktop{
	display: block;
}
.only-tablet, .only-mobile{
	display:none;
}
.fullheight{
	width: 100%;
	height:450px; /*Modificar*/
}
#go-top{
	display:none;
	text-align: right;
	right:1em;
	position: fixed;
	bottom: 4em;
}
#go-top a{
	display:inline-block;
	width: 5em;
	color:white;
	padding:1em;
	font-size:0.8em;
	background:grey;
}
#go-top a:hover{
	background:#0d091a;
}
/*=========  $$Layout  ========*/
/*=========  $$Header  ========*/
header{ background-image:url(../img/dino-header4.png); background-repeat:no-repeat; background-position: 100% 110%; padding:1em 0; background-attachment:local;}
.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
	background-color:rgba(56,24,55,0.7);
}
.sticky ul li{font-weight:700;}

.dino-header{overflow:visible;}
/*=========  $$Menu  ========*/
nav{ background-color:#381837;/*padding:1em 0; position:fixed; top:0;*/ z-index:1;}
nav li{float:left; padding:1em 0.9em; color:#FFF; font-size: 17px; font-weight: 700;}
nav li:hover{background-color:#381837;}
nav li.spacer{float:left; padding:1em 0.1em;}

nav a#btn-menu {
	display: none;
}
nav .btns{
/*	border: 1px solid #000;*/
}
.nav-contenedor {
	max-width: 60em;
	display: block;
	clear: both;
	text-align:right;
	overflow: hidden;
}
.nav-menu{color:#FFF;}
a.nav-menu:hover{background-color:#381837;}
.active{background-color:#381837;}
/*=========  $$Contenido  ========*/
.button {
    display: inline-block;
    border: none;
    padding: 1rem 2rem;
    margin-top: 20px;
    text-decoration: none;
    background: #fff;
	border: 1px solid #381837;
    color: #ffffff;
    font-family: sans-serif;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    text-align: center;
    transition: background 250ms ease-in-out, transform 150ms ease;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.button a {
	 color: #381837;
}

.ad_slot div{
	width:970px; height:90px; margin:0 auto; display:block;
	background: url(../img/Ads_970x90.gif) no-repeat;
	}


button a{color: #381837;}
button:hover,
button:focus{
	background: #e1413d;
}
button:hover a{color:#fff;}

.hidden{	display:none; visibility:hidden;}

.slider{background-color:#FFF;}
#intro{background-color:#FFF; padding:2em; background-image:url(../img/intro_background.png); background-repeat:no-repeat; background-size:contain; background-position:50% 50%;}
#categories{padding:3em 2em 0em; background-repeat:no-repeat; background-position:50% 20%; clear:both;}
#winners{padding:3em 2em 0em; background-repeat:no-repeat; background-position:50% 20%; clear:both;}
#categories .logo-in{background-image:url(../img/logo.png); background-repeat:no-repeat; background-position: 50% 50%; min-height:300px; margin-top:15%;}
#venue{background-color:#FFF; padding:3em 2em 0em;}
.nhmlogo{padding-top:6em;}
#venue ul li{color:#774528; font-weight:300; padding:1em 0; font-size:18px; list-style:url(../img/dash.png);}
p.calendar{min-height:70px;}
p.calendar > a{text-decoration:none;}
span.calendar-event{border: solid 3px #381837; padding: 1em 1.5em;  }
span.calendar-event:hover{background-color:#FFF;}
#contact{padding:3em 2em 2em; background-image:url(../img/whale-big2.png); background-repeat:no-repeat; background-position:0% 50%; background-size: 100%;}
#sponsor{padding:3em 2em 0em; clear:both;}
#gallery{padding:2em; background-image:url(../img/whale-big.png); background-repeat:no-repeat; background-position: 100% 80%; background-size: 120%;}
#results{padding:2em;  background-image:url(../img/whale-big.png); background-repeat:no-repeat; background-position: 50% 80%; background-size: 130%;}
#how_to_enter{padding:3em 2em 0em; background-image:url(../img/whale-big.png); background-repeat:no-repeat; background-position:50% 20%; clear:both;}
#methodology{padding:3em 2em 0em; background-repeat:no-repeat; background-position:50% 20%; clear:both;}
#the_judges{padding:3em 2em 0em; background-image:url(../img/whale-big.png); background-repeat:no-repeat; background-position:50% 20%; clear:both;}
.vote-button{background-color:#774528; text-align:center; color:#FFF; padding:1em 0;  max-width: 300px; margin-top: 1em;}
/*=========  $$Footer  ========*/
footer{
	clear:both;
	display:block;
	overflow:hidden;
	bottom:0;
	height:7em;
	margin: 0em auto 0;
	background-color:#381837;
	font-size:16px;
	font-weight:100;
}
footer p{color: rgba(255,255,255,.5); font-size:0.8em;}
footer p a{color: rgba(255,255,255,.5); text-decoration:underline;}

#the_judges #judge{
	padding-right:20px; padding-top:20px;
	}

/*=========  $$Media queries & Breakpoints  ========*/

/*=====  Mobile landscape====*/
 @media only screen and (min-width: 581px) and (max-width: 767px) {
}
 @media only screen and (max-width: 767px) {

}
/*=====  $$Mobile portrait  ====*/
 @media only screen and (max-width: 580px) {
	 .logo{text-align:center;}

	 .trafalgar-house {
		 width: 90% !important;
	 }

}
/*=====  Display only-tablet // only-mobile //  only-desktop  ===== */
 @media only screen and (min-width: 768px) and (max-width: 979px) {
	.only-tablet{
		display:block;
	}
	.only-desktop{
		display:none !important;
	}
	.not-tablet{
		display:none;
	}
	.nav-contenedor {max-width: 100%;}
	nav {
		width: 100%;
		height: auto;
		border-bottom: 0;
		padding:0;
	}
	nav ul{
		display: none;
		height: auto;
		width: 100%;
		padding: 0 !important;
		/*background:#28cac5;*/
	}
	nav li{
		width: 100%;
		margin:0;
		border-bottom: 1px solid #330033;
	}
	nav ul li:last-child{padding-right:20px;}
  	nav a{
	  	text-align: right;
	  	width: 100%;
		color:#FFF;
		padding-right:20px;
  	}
  	/*nav a:hover {
	  	background-color:rgba(0,0,0,0.3);
  	}*/
	nav .btns {
		border: none;
		border-bottom: 1px solid #CCC;
	}
	nav .btns a{
		height:30px;
		/*padding-top:15px;*/
	}
	nav .active{
		    height: 60px;
    padding-top: 22px;
	padding-top: 18px;
	}
	nav a#btn-menu {
		color: #000;
    display: block;
    width: 70px;
    float: right;
    height: 37px;
    margin: 15px 15px 18px 0;
    background: #381837;
    padding-top: 9px;
    padding-left: 9px;
	}
	nav a#btn-menu:before {
		content:"NAV";
		float:right;
		padding-right: 65px;
		color:#381837;
		display:none;
	}
	nav a#btn-menu:after {
		margin-top:15px;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	nav a#btn-menu span {
		display:block;
		margin:2px 0px 4px 0px;
		height:2px;
		background:#FFF;
		width:20px;
	}
	header{background-position:right bottom; background-image:url(../img/dino-header4.png); background-repeat:no-repeat;}

	.ad_slot div{
	width:300px; height:250px;
	background: url(../img/Ad_300x250.jpg);
	}
}
 @media only screen and (min-width: 480px) and (max-width: 767px) {
	 #aboutus{ background-position: 64% 105%;}
	 #aboutus .logo-in{margin-top:5%;}
	 .logo{text-align:center;}
	 .only-mobile{
		 display:block;
	 }
	 .only-desktop{
		display:none !important;
	}
	.not-mobile{
		display:none;
	}
	.nav-contenedor {max-width: 100%; width:43em !important;}
	nav {
		width: 100%;
		height: auto;
		border-bottom: 0;
		padding:0;
	}
	nav ul{
		display: none;
		height: auto;
		width: 100%;
		padding: 0 !important;
		/*background:#28cac5;*/
	}
	nav li{
		width: 100%;
		margin:0;
		border-bottom: 1px solid #330033;
	}
	nav ul li:last-child{padding-right:20px;}
  	nav a{
	  	text-align: right;
	  	width: 100%;
		color:#FFF;
		padding-right:20px;
  	}
  	/*nav a:hover {
	  	background-color:rgba(0,0,0,0.3);
  	}*/
	nav .btns {
		border: none;
		border-bottom: 1px solid #CCC;
	}
	nav .btns a{
		height:30px;
		/*padding-top:15px;*/
	}
	nav .active{
		    height: 60px;
    padding-top: 22px;
	padding-top: 18px;
	}
	nav a#btn-menu {
		color: #000;
    display: block;
    width: 70px;
    float: right;
    height: 37px;
    margin: 15px 15px 18px 0;
    background: #381837;
    padding-top: 9px;
    padding-left: 9px;
	}
	nav a#btn-menu:before {
		content:"NAV";
		float:right;
		padding-right: 65px;
		color:#381837;
		display:none;
	}
	nav a#btn-menu:after {
		margin-top:15px;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	nav a#btn-menu span {
		display:block;
		margin:2px 0px 4px 0px;
		height:2px;
		background:#FFF;
		width:20px;
	}
	header{background:none !important;}
	footer ul{float: left;}

	#flickr_button{
		    padding: 10px;
		font-size: 1rem;
		}
			.ad_slot div{
	width:300px; height:250px;
	background: url(../img/Ad_300x250.jpg);
	}
}
 @media only screen and (min-width: 80px) and (max-width: 479px) {
	 .only-mobile{
		 display: block;
	 }
	.only-desktop{
		display:none !important;
	}
	.not-mobile{
		display:none;
	}
	.nhmlogo{padding-top:1em;}
	.nhmlogo img{float:left !important;}
	h4{max-width:100% !important;}
	p.calendar{text-align:center;}
	span.calendar-event {border: solid 3px #381837; font-size:14px; padding: 1em .7em;}
	.calendar-event img{display: none;}
	footer{height:7em;}
	footer p{font-size:12px; padding-left:2em;}
	#aboutus .logo-in{margin-top:5%;}
	#intro{ background-size:cover !important;  background-position:0% 50%;}
	h1{font-size:30px;}
	section#intro{padding-top:0;}
	section#aboutus{background-position:center;}
	nav {
		width: 100%;
		height: auto;
		border-bottom: 0;
		padding:0;
	}
	nav ul{
		display: none;
		height: auto;
		width: 100%;
		padding: 0 !important;
		/*background:#28cac5;*/
	}
	nav li{
		width: 100%;
		margin:0;
		border-bottom: 1px solid #330033;
	}
	nav ul li:last-child{padding-right:20px;}
  	nav a{
	  	text-align: right;
	  	width: 100%;
		color:#774528;
		padding-right:20px;
  	}
  	/*nav a:hover {
	  	background-color:rgba(0,0,0,0.3);
  	}*/
	nav .btns {
		border: none;
		border-bottom: 1px solid #CCC;
	}
	nav .btns a{
		height:45px;
		padding-top:15px;
	}
	nav .active{
		    height: 63px;
    padding-top: 22px;
	}
	nav a#btn-menu {
		color: #000;
    display: block;
    width: 40px;
    float: right;
    height: 37px;
    margin: 15px 15px 18px 0;
    background: #381837;
    padding-top: 9px;
    padding-left: 9px;
	}
	nav a#btn-menu:before {
		content:"NAV";
		float:right;
		padding-right: 35px;
		color:##381837;
		display:none;
	}
	nav a#btn-menu:after {
		margin-top:15px;
		width: 30px;
		height: 30px;
		display: inline-block;
		position: absolute;
		right: 15px;
		top: 10px;
	}
	nav a#btn-menu span {
		display:block;
		margin:2px 0px 4px 0px;
		height:2px;
		background:#FFF;
		width:20px;
	}
	.intro-text{padding-bottom:2em;}
	header{background:none !important;}
	footer ul{float:left;}

	#flickr_button{
		    padding: 7px;
		font-size: .9rem;
		}
			.ad_slot div{
	width:300px; height:250px;
	background: url(../img/Ad_300x250.jpg);
	}

}

/* Category Tab Styles */

/* Style the tab */
.tab {
  overflow: hidden;
  /*border: 1px solid #ccc;*/
  /*background-color: #f1f1f1;*/
}

.tablinks {
	background: #FFF;
	border: solid 1px #381837;
	padding: 15px;
	margin-right: 5px;
}

/* Style the buttons inside the tab
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
} */

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #381837;
	color: #FFF;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  /*border: 1px solid #ccc;*/
  border-top: none;
}


/*=========  $$ Breakpoints  ========*/
  @media only screen and (min-width: 1200px) {

}
  @media only screen and (max-width: 1200px) and (min-width: 980px) {

}
 @media only screen and (min-width: 768px){
	 footer ul{float:right;}
 }
