@import url('mixins.less');
@import url('reset.css');
@import url('../fonts/fonts.css');

/*----VARIABLES----*/

/*----MAIN----*/
#main{position:absolute;left:30px;top:30px;right:30px;bottom:30px;overflow:hidden;font-size:22px;font-family:'PT Mono';line-height:1.3;}

/*----LOGO----*/
#logo{position:relative;}
#logo:after{content:'';display:block;clear:both;}
#logo .bar{display:block;width:100%;position:relative;float:left;clear:both;overflow:hidden;margin-bottom:3%;}
#logo .bar.half{width:56.8%;}
#logo .bar:after{content:'';display:block;clear:both;}
#logo .bar .wrap{width:100%;display:block;float:left;}
#logo .bar .wrap:after{content:'';display:block;clear:both;}
#logo .bar .wrap .slide{position:absolute;left:0px;top:0px;bottom:0px;right:0px;background:#231F20;z-index:-1;.transform(translateX(-100%));}
#logo .bar .wrap img{display:block;float:left;width:100%;height:auto;.transform(translateX(-100%));}
#logo .bar.animate.in img{.transform(translateX(0%));}
#logo .bar.animate.in .slide{.transform(translateX(0%));}

/*----INFO----*/
#info{position:absolute;right:0px;bottom:0px;text-align:right;width:45%;}
#subtitle{position:absolute;left:0px;bottom:0px;width:45%;}
#info a{display:inline-block;white-space:nowrap;}
#info a.bg{background:#231F20;color:#FFFFFF;padding:0px 3px;}

/*----ANIMATE----*/
@properties:transform,opacity,color;
.animate *{
.transition(all 500ms cubic-bezier(.30,0,.30,1));
.transition-property(@properties);
}
.animate img{
-webkit-transition-delay: 200ms;
transition-delay: 200ms;
}

/*----ANIMATE----*/
@media all and (orientation:portrait) {
#logo{width:60vw;}
}
@media all and (orientation:landscape) {
#logo{width:60vh;}
}
@media all and (max-width: 700px) {
#logo{margin-bottom:20px;}
#main{font-size:90%;position:relative;min-height:100%;overflow-y:visible;left:0px;top:0px;right:0px;bottom:0px;padding:30px;}
}
@media all and (max-width:700px) and (orientation:portrait) {
#info{position:relative;text-align:left;width:100%;padding-top:10px;}
#subtitle{position:relative;width:100%;padding-top:10px;}
}
@media all and (max-width:700px) and (orientation:landscape) {
#logo{position:absolute;}
#info{position:relative;text-align:right;width:50%;float:right;clear:both;padding-top:0px;}
#subtitle{position:absolute;text-align:left;width:50%;left:30px;bottom:30px;}
}