@charset 'UTF-8';
@font-face {
  font-family: 'FontAwesome';
  src: url('font/fontawesome-webfont.eot?v=4.0.3');
  src: url('font/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.0.3') format('woff'), url('font/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('font/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*********************************************************************************/
/* Basic                                                                         */
/*********************************************************************************/
	body{background: #f9fbff;margin:0;}
	body,input,textarea,select{font-family: 'Bungee Inline', cursive;font-size: 14pt;font-weight: 300;line-height: 1.75em;}
	h1,h2,h3,h4,h5,h6{font-weight: 300;letter-spacing: -1px;}
	h3{font-weight:bolder;}
	h1, h2 {display: inline;}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{text-decoration: none;}
	table td, table td * { vertical-align: top;}
	/* Change this to whatever font weight/color pairing is most suitable */
	em, i{font-style: italic;}
	/* Don't forget to set this to something that matches the design */
	.logo{max-width: 100%;height: auto;}
	a{color: #e4b73c;text-decoration: none;}
	sub{position: relative;top: 0.5em;font-size: 0.8em;}
	sup{position: relative;top: -0.5em;font-size: 0.8em;}
	hr{border: 0;border-top: solid 1px #cbe3ff;}
	blockquote{border-left: solid 0.5em #cbe3ff;padding: 1em 0 1em 2em;font-style: italic;}
	p, ul, ol, dl, table{margin-bottom: 1em;}
	header{margin-bottom: 1em;}	
	header .byline{display: block;margin: 0.5em 0 0 0;padding: 0 0 0.5em 0;}	
	footer{margin-top: 1em;}
	br.clear{clear: both;}
		
/*********************************************************************************/
/* Header                                                                        */
/*********************************************************************************/
	#topheader{position: relative;position: fixed; top: 0;z-index:2000;background-color: #444444;color: #fff;padding-top:10px;height: auto;text-align: left;width: 100%;display: inline-block;}	
	#topheader h2 {font-size:0.8em;line-height: 90%;font-family: arial; font-weight:bold;}
	#topheader p{font-size:0.8em;line-height: 70%;}	
	#cam1{float:left;text-align:left;}
	#cam1 h1 a{color: #fff;font-size:0.4em;line-height: 90%;font-family: arial; font-weight:bold;}
	#cam1 img{vertical-align:middle;max-width: 100%;height: auto !important;}
	#cam2{vertical-align:middle;float:right;text-align:right;margin:5px;padding:5px;}
	.navo{position: absolute;bottom: 0px;background-color:#397fc5;width:100%;text-align:center;min-height:11px;border-top:4px #f47321 solid;margin-bottom:-8px;}
	.button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
color:#397fc5;
font-size:0.8em;
text-transform:uppercase;
margin:5px;
padding:5px;
font-weight:bold;
cursor: pointer;
}
	.button:hover{color:#A8BCCF;}
	#reg {background:#f47321;color:#fff;font-size:0.6em;text-transform:uppercase;margin:4px;padding:4px;font-weight:bold;line-height: 250%; cursor: pointer;}
	#reg:hover{background:#ff9959;color:#000;}
	#categories {width: 100%;list-style: none;margin: auto;padding:0px;}
	#categories li {width: 7,6%;margin: 1px !important;padding: 1px !important;display: inline-block;}
	.categs{background-color: #397fc5;font-size:0.6em;font-weight:normal;border: solid 0.3em #174471;color: white;padding: 4px 4px;text-align: center;text-decoration: none;display: inline-block;margin: 4px 2px;cursor: pointer;}
	.categs:hover{background-color: #3e62b4;font-weight:bolder;}
	#camtalk{font-size:0.6em;font-weight:bold;}
	#free{font-size:0.7em;color: white;padding: 4px 4px;text-align: center;text-decoration: none;display: inline-block;margin: 4px 2px;cursor: pointer;}
	#free a{font-size:0.7em;color: white;padding: 4px 4px;text-align: center;text-decoration: none;}
	#free:hover{background-color: #3e62b4;font-weight:bolder;}

/*********************************************************************************/
/* Main                                                                          */
/*********************************************************************************/
	#main{position: relative;margin-top: 5em;line-height: 95%;}
	#main .heading{margin-bottom: 0;}
	#main h1{font-size: 1.1em;display: inline-block;}
	#main h3{font-size: 1.1em;display: inline-block;}
	#main .heading .button{padding: 1em 2em;float: right;}
	#see-more-btn {color:#397fc5;font-size:1.3em;text-transform:uppercase;margin:5px;padding:5px;font-weight:bold;line-height: 130%; }
	#see-more-btn:hover {color:#3e62b4;}
	#camtags{}
/*********************************************************************************/
/* Footer                                                                        */
/*********************************************************************************/
	#footer{background-color: #777;position: relative;color: #203c89;padding: 3em 0;text-align: center;}
	#footer a {font-size:0.8em;color:#e5af0b;font-weight:bold;}
	#footer a:hover {color:#1e2fb0;}

/*********************************************************************************/
/* thumbnails                                                                       */
/*********************************************************************************/
.wrap {
   overflow: hidden;
   margin: 10px;

}
.box {
   float: left;
   position: relative;
   width: 20%;
   padding-bottom: 15%;
      font-size: 10pt;
}
.boxInner {
   position: absolute;
   left: 10px;
   right: 10px;
   top: 10px;
   bottom: 10px;
   overflow: hidden;
   border-radius: 10px;
}
.boxInner img {
   width: 100%;
}
.boxInner .titleBox {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin-bottom: -50px;
   background: #000;
   background: rgba(0, 0, 0, 0.5);
   color: #FFF;
   padding: 10px;
   text-align: center;
   -webkit-transition: all 0.3s ease-out;
   -moz-transition: all 0.3s ease-out;
   -o-transition: all 0.3s ease-out;
   transition: all 0.3s ease-out;
}
body.no-touch .boxInner:hover .titleBox, body.touch .boxInner.touchFocus .titleBox {
   margin-bottom: 0;
}
@media only screen and (max-width : 480px) {
   /* Smartphone view: 1 tile */
   .box {
      width: 100%;
      padding-bottom: 70%;
   }
   #logo {display: block;}
   #topheader {text-align:center;}
   #topheader h2{display:none;}
   #topheader h1{font-size:1.1em;line-height: 80%;}
   #topheader p{font-size:0.8em;line-height: 80%;}
   #topheader {margin-bottom:20px;}
   #main{margin-top: 9em;}
   #camtalk {
	display: none;
   }
#tags{padding-bottom:2em;}
.navo{margin-bottom:-15px;}
#see-more-btn {font-size:1.1em;margin:5px;padding:5px;line-height: 110%; }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
   /* Tablet view: 2 tiles */
   .box {
      width: 50%;
      padding-bottom: 30%;
   }
   #logo {display: block;}
   #topheader {text-align:center;}
   #topheader h2{display:none;}
   #topheader h1{font-size:1.1em;line-height: 80%;}
   #topheader p{font-size:0.8em;line-height: 80%;}
   #main{margin-top: 8em;}
   #camtalk {
	display: none;
   }
#tags{padding-bottom:2em;}
.navo{margin-bottom:-15px;}
#see-more-btn {font-size:1.1em;margin:5px;padding:5px;line-height: 110%; }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
   /* Small desktop / ipad view: 3 tiles */
   .box {
      width: 33.3%;
      padding-bottom: 23.3%;
   }
   #main{margin-top: 6em;}
   #camtalk {
	display: none;
   }
#see-more-btn {font-size:1.2em;margin:5px;padding:5px;line-height: 120%; }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
   /* Medium desktop: 4 tiles */
   .box {
      width: 25%;
      padding-bottom: 18%;
   }
}

#butto {
  background-color: #ebaa49;
  border: none;
  color: white;
  padding: 10px 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 8px;
  transition-duration: 0.4s;
}
#butto:hover {
  background-color: white;
  border: 2px #ebaa49;
  color: black;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}