/* Responsive HTML5 gallery tutorial
 *
 * http://tomicloud.com/2014/01/responsive-gallery
 * https://github.com/tomimick/responsive-image-gallery */

*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin:0;
    padding:0;
}

/*body {
	background-color: #000;

	font: 100% Arial, Helvetica, Geneva, sans-serif;
	color: #9aa6af;
	text-rendering: optimizelegibility;

	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-text-size-adjust: none;
	-webkit-font-smoothing: antialiased;

	-moz-tap-highlight-color:rgba(0,0,0,0);
	-moz-text-size-adjust: none;
	-moz-font-smoothing: antialiased;

	-ms-tap-highlight-color:rgba(0,0,0,0);
	-ms-text-size-adjust: none;
	-ms-font-smoothing: antialiased;

    overflow-x: hidden;
    font-size: 90%;
}*/

ol, ul {
	list-style: none;
}

.hid {
    display: none;
}

#top,
#menu,
#main,
#topsearch {
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -ms-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;

    /* Prevents Flickering  */
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;

	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

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


#topsearch input:focus {
    background: #fff;
}

a.ico:hover {
    color: #FFFFFF;
}

a.ico {
    color: #E4FF1F;
    padding: 10px;
}

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

#menu {
    width: 40%;
    background: #333;
	height: 100%;
	position: fixed;
	left: 0;
	top: 0;

    z-index: 20;
    opacity: 0;

    overflow-y: auto;
    -webkit-overflow-scroll: touch; /* for smooth scrolling on mobile */

    -webkit-transform: translate3d(-100%,0,0);
	-moz-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
}

#menu ul {
    margin-top: 60px;
}

ul.menu a {
    padding: 20px 14px;
    display: block;
    text-decoration: none;
    color: #A7A7A7;
    font-weight: bold;
    font-size: 120%;
    white-space: nowrap;
}
ul.menu a.active {
    background: #929292;
    color: #fff;
    text-shadow: 2px 2px 2px #000;
}
h1:active, a.ico:active, ul.menu a:active {
    position: relative;
    top: 2px;
}

ul.menu a:hover {
    background: #C7C7C7;
    color: #fff;
}

#top ul.menu a {
    padding: 5px;
    background: none;
    margin-right: 15px;
}
#top ul.menu a.active {
    text-shadow: 2px 2px 1px #000;
}

#menubut {
    float: left;
}

#menu.openmenu {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
    opacity: 1;
}

#main.openmenu,
#top.openmenu {
	-webkit-transform: translate3d(39%,0,0);
	-moz-transform: translate3d(39%,0,0);
	transform: translate3d(39%,0,0);
}
#main.openmenu {
    opacity: 0.5;
}

#menu > p {
    position: absolute;
    text-align: center;
    bottom: 5%;
    width: 100%;
    color: #666;
}


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

#main {
    z-index: 8;
    /* overflow: visible; */
    padding-bottom: 20px;
    position: relative;
    top: 60px;
}

.cent {
    text-align: center;
    padding-top: 8%;
    color: #ddd;
}
.cent p {
    margin: 1%;
}
.cent li:before {
    color: yellow;
    display: inline-block;
    font-family: FontAwesome;
    content: "\f005";
    font-size: 2em;
}

h2 {
    margin-bottom: 2%;
}

/*--------------------------------------------------------------------------*/
/* icons */

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

.fa {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-2x {
  font-size: 2em;
}
.fa-3x {
  font-size: 3em;
}
.fa-4x {
  font-size: 4em;
}
.fa-bars:before {
  content: "\f0c9";
}
.fa-search:before {
  content: "\f002";
}
.fa-home:before {
  content: "\f015";
}
.fa-puzzle-piece:before {
  content: "\f12e";
}
.fa-star:before {
  content: "\f005";
}
.fa-arrow-circle-o-right:before {
  content: "\f18e";
}
.fa-arrow-circle-o-left:before {
  content: "\f190";
}
.fa-plus-square:before {
  content: "\f0fe";
}
.fa-plus:before {
  content: "\f067";
}
.fa-ban:before {
  content: "\f05e";
}
.fa-refresh:before {
  content: "\f021";
}


/*--------------------------------------------------------------------------*/
/* images */

div.my {
    position: relative;
    width: 33.3%;
    height: 200px;
    cursor: zoom-in;
    cursor: -webkit-zoom-in;
    display: block;
    float: left;
    padding: 2px;
    overflow: hidden;
    background: #222;
}
div.my img {
    width: 100%;
    height: 100%;
}

div.show {
    -webkit-transition: -webkit-transform 0.2s ease-out;
    -moz-transition: -moz-transform 0.2s ease-out;
    transition: transform 0.2s ease-out;
    opacity: 1;

	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;

	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

/* title */
div.my > div {
    position: absolute;
    -webkit-transition: -webkit-transform  0.2s ease-out;
    -moz-transition: -moz-transform  0.2s ease-out;
    transition: transform  0.2s ease-out;

	-webkit-transform: translate3d(0,100px,0);
	-moz-transform: translate3d(0,100px,0);
	transform: translate3d(0,100px,0);
    opacity: 0.7;
    background: #222;
    color: #fff;
    height: 30%;
    bottom: 0;
    width: 99%;
    padding: 5px;
    font-size: 90%;
}

html:not(.touch) div.my:hover {
	-webkit-transform: scale(1.1,1.1);
	-moz-transform: scale(1.1,1.1);
	transform: scale(1.1,1.1);
    z-index: 30;
}

html:not(.touch) div.my:hover > div {
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

html:not(.touch) div.my:active {
    background: #fff;
}
html.touch div.my:active {
    opacity: 0.7;
}



div.more {
    background: #333;
    text-align: center;
    color: #fff;
    line-height: 90%;
}
div.more i {
    margin: 30% auto;
}
html:not(.touch) div.more:active {
    background: #777;
}
div.more.start i {
	-webkit-transform: rotate(359deg);
    -webkit-transition: all 0.7s ease-out;
}

div.my.fadeaway {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
	-webkit-transform: scale(0.1,0.1) rotate(-40deg);
	-moz-transform: scale(0.1,0.1) rotate(-40deg);
	transform: scale(0.1,0.1) rotate(-40deg);
}


/*--------------------------------------------------------------------------*/
/* carousel */
/* - partly from hammer.js demo */

#carousel {
    display: none;
    position: absolute;
    z-index: 100;
    background: black;
    top: 0; left: 0;
    width: 100%; height: 100%;
    cursor: col-resize;

    /* padding: 1%; */
    overflow: hidden;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
    -webkit-transform-style: preserve-3d;

    -webkit-transform-origin: 50% 25%;
    -moz-transform-origin: 50% 25%;
    transform-origin: 50% 25%;
}
#carousel.anim1 {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;

	-webkit-transform: scale(0.8,0.8);
	-moz-transform: scale(0.8,0.8);
	transform: scale(0.8,0.8);
    opacity: 0;
}
#carousel.anim2 {
	-webkit-transform: scale(1,1);
	-moz-transform: scale(1,1);
	transform: scale(1,1);
    opacity: 1;
}
#carousel li > img {
    width: auto;
    height: auto;
    max-width:90%;
    max-height:90%;

/* centering: http://coding.smashingmagazine.com/2013/08/09/absolute-horizontal-vertical-centering-css/ */
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}
#carousel li > img.portrait {
    width: auto;
    height: 90%;
    max-width:90%;
    max-height:90%;
}

#carousel li > div {
    opacity: 0.4;
    color: #fff;
    background: #000;

    position: absolute;
    height: 12%;
    bottom: 0;
    width: 100%;
    padding: 2%;
    font-size: 120%;
}

#carousel i.fa {
    position: absolute;
    top: 3%;
    right: 3%;
    color: #fff;
    opacity: 0.4;
    cursor: pointer;
    z-index: 200;
}
/*#carousel li > i.favorited {
    color: yellow;
    opacity: 1;
}*/
/*#carousel i.fa:hover {
    text-shadow: 3px 3px 2px #555;
    opacity: 1;
}*/
#carousel i.fa-arrow-circle-o-left {
    left: 2%;
    top: 50%;
    right: auto;
}
#carousel i.fa-arrow-circle-o-right {
    top: 50%;
    right: 2%;
}
html.touch #carousel i.fa-arrow-circle-o-left,
html.touch #carousel i.fa-arrow-circle-o-right {
    display: none;
}
/*
#carousel i.fa:active {
/* use translate instead of "top: 2px;" top used already! 
    -webkit-transform: translate3d(0,2px,0);
    -moz-transform: translate3d(0,2px,0);
    transform: translate3d(0,2px,0);
}*/

#carousel ul.animate {
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}

#carousel ul {
    transform: translate3d(0%,0,0) scale3d(1,1,1);
    -ms-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -moz-transform: translate3d(0%,0,0) scale3d(1,1,1);
    -webkit-transform: translate3d(0%,0,0) scale3d(1,1,1);
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;

    box-shadow: 0 0 20px rgba(0,0,0,.2);
    position: relative;
    height: 100%;
}

#carousel li {
    height: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    -webkit-transform-style: preserve-3d;

    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}


/*--------------------------------------------------------------------------*/
/* media queries */

/* mobile first design: smallest screen as default; 3 tiles */

/* 1st breakpoint: hide menu, show tabs; 4 tiles */
@media (min-width: 550px) {
    body {
        font-size: 100%;
    }
    #menu {
        display: none;
    }
    #menubut, #top h1 {
        display: none;
    }
    #top ul {
        display: block;
    }
    #top li {
        display: inline-block;
    }
    div.my { width: auto; }
}

/* other breakpoints: just show more tiles */

@media (min-width: 800px) {
    div.my { width: auto; }
}
@media (min-width: 1000px) {
    div.my { width: auto; }
}
@media (min-width: 1200px) {
    div.my { width: auto; }
}
@media (min-width: 1600px) {
    div.my { width: auto; }
}