/*====================================================
#   OFF-CANVAS STYLES                                 #
====================================================*/
.slide-right {
  -webkit-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0 cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* easeOutQuad */
  -webkit-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* easeOutQuad */
}
.slide-right.animation-enter {
  transform: translateX(300px);
  -ms-transform: translateX(300px);
  -webkit-transform: translateX(300px);
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  opacity: 0.5;
}
.slide-right.animation-enter-active {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  opacity: 1;
  visibility: visible !important;
}
.slide-right.animation-enter-active-wrapper {
  transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  -webkit-transform: translateX(-300px);
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
}
.slide-right.animation-leave {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  opacity: 1;
}
.slide-right.animation-leave-active {
  transform: translateX(300px);
  -ms-transform: translateX(300px);
  -webkit-transform: translateX(300px);
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
  opacity: 0.5;
}
.slide-right.animation-leave-active-wrapper {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  transition-duration: 250ms;
  -webkit-transition-duration: 250ms;
}
.off-canvas-enabled {
	overflow: hidden;
}
#off-canvas {
    background-color: rgba(0,0,0,0.7);
    color: #fff;
    display: block;
    height: 100%;
    padding: 30px 15px;
    position: absolute;
    right: 0;
    visibility: hidden;
    width: 300px;
    z-index: 100;
}
#off-canvas .toggle-off-canvas {
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 12px 0 0 12px;
    color: #fff;
    font-size: 14px;
    height: 36px;
    left: -21px;
    padding-left: 5px;
    position: absolute;
    top: 27px;
    width: 21px;
}
#header .toggle-off-canvas {
    background-color: transparent;
    color: #fff;
    display: none;
    font-size: 35px;
    height: 35px;
    line-height: 35px;
    margin-left: 15px;
    vertical-align: middle;
}
#offSearchForm {
    display: block;
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    overflow: hidden;
}
#offQ {
    background-color: #2d2d2d;
    border: 1px solid #555;
    border-radius: 10px;
    color: #fff;
    padding: 8px 75px 8px 10px;
    width: 100%;
}
#offSearch {
    background-color: transparent;
    border-left: 1px solid #454545;
    color: #aaa;
    font-family: osextrab;
    font-size: 13px;
    height: 29px;
    position: absolute;
    right: 2px;
    text-align: center;
    text-transform: uppercase;
    top: 2px;
    width: 65px;
}
#offSearch:hover{
	opacity: 0.8;
}
.offmenu{
	display: block;
	width: 100%;
	list-style: none;
	text-align: center;
	margin-bottom: 30px;
}
.om-item{
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
	width: 49%;
}
.om-item a {
    border: 2px solid #fff;
    color: #fff;
    display: block;
    font-family: grobreg;
    font-size: 21px;
    opacity: 0.7;
    padding: 11px 9px;
}
.om-item a:hover,
.om-item.active a{
	opacity: 1;
	text-decoration: none;
}
.offsocials{
	display: block;
	text-align: center;
}
.offsocials .hti-item {
    box-shadow: none;
    display: inline-block !important;
}
/*====================================================
#   BREAKPOINTS ~ Non-Mobile First Method            #
====================================================*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px){
	.container{ width: 992px; }

	.mml-item a{ padding: 21px 14px;}

	.ft-sbox{ width: 405px; }
	.ft-rbox{ width: 557px;}
	.ft-box{ width: 31%}
	.ft-box:last-child { width: 36%; }

	.content-left{ width: 661px; }
	.fb-widget:before{ top: -35px; }
	.fb-widget:after{ bottom: 3px; }

	.gallery-box{ width: 320px; }

	.game-info{ padding: 7px 21px; width: 377px; }
	.game-image{ width: 280px; }

	.newsPost { width: 306px; }
	.newsPost:nth-child(3n+1) { margin-right: 42px; }
	.newsPost:nth-of-type(2n+1) { margin-right: 0; }

	.hn-info { padding: 11px 21px; }
	.hn-title { font-size: 21px; }
}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px){
	.container{ width: 768px; }

	.mml-item a { font-size: 16px; padding: 21px 8px; margin-top: -35px; }
	.logo { width: 235px; }

	footer#footer { height: 475px }
	main#content { padding-bottom: 475px; }
	.ft-sbox { margin-bottom: 32px; width: 100%; }
	.ft-rbox, #subsForm { width: 100%; }

	.content-left, .content-side{ width: 100%; margin-right: 0;}
	.content-side { margin-top: 42px; }
	.sidebox.calendar { display: none; }
	.fb-widget { margin-bottom: 20px; }

	.gallery-box { width: 358px; }

	.game-info { padding: 17px 21px; width: 454px; }

	.lp-desc{ width: 78%; }

	.newsPost { width: 345px; }

	.hn-info { padding: 15px 21px; }
	.hn-title { font-size: 24px; }

	main#content { margin-top: 100px!important; }

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px){
	.container{ width: 480px; }

	.mml-item, .hti-item { display: none }
	.mml-item.logo, #header .toggle-off-canvas { display: inline-block;}
	.logo { width: auto; }
	.logo a { margin-top: -40px; }
	.mainmenu { box-shadow: 0 3px 4px -5px #1c1b1b; padding-bottom: 15px; }

	footer#footer { height: 538px }
	main#content { padding-bottom: 538px; }

	.contact-info, #contactForm { width: 100%; margin-bottom: 21px;}
	.gmap { padding: 0}
	.fb-widget:before{ top: -24px; }
	.fb-widget:after{ bottom: 17px; }
	.cl-container{ border-radius: 60px 90px 6px 6px; }
	.fb-widget { margin-bottom: 0; }

	.gallery-box { width: 100%; }

	.game-info { padding: 7px 12px; width: 250px; }
	.game-image { width: 196px; }
	.gi-title { font-size: 21px; }
	.gi-desc { font-family: osreg; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

	.gameTitle, .gameDesc { width: 100%; display: block; padding-right: 0; }

	.newsPost { width: 100%; }

	.postTitle { font-size: 21px; }

	.hn-info { padding: 11px 21px; }
	.hn-title { font-size: 24px; padding: 0 11px 61px; }
	.hn-more { bottom: -75px; }
	.hn-share { bottom: -80px; }

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px){
	.container{ width: 100%; }

	.htp-info strong{ font-size: 14px; }
	.htp-info div { font-size: 12px; }
	#header .toggle-off-canvas { margin-left: 10px; }

	footer#footer { height: 504px; }
	main#content { padding-bottom: 504px }
	.ft-box.fmenu, .ftsocials { display: none;}
	.ft-box { width: 49%!important; font-size: 13px; }
	.copyright{ font-size: 13px;}

	.cl-container:after{ bottom: -16px; }
	.fb-widget:before { top: -15px; }
	.fb-widget:after { bottom:  24px; }

	.albumsTitle{ font-size: 21px; }
	.albumsTitle:after { border-top-width: 39px; }

	.game-image { display: none; }
	.game-info { display: block; float: none; width: 100%; }
	.gi-title { font-size: 28px; }
	.gi-desc { font-family: grobreg; text-overflow: unset; white-space: normal; }

	.lp-info { padding: 10px; }
	.lp-title { font-size: 18px; }
	.lp-desc{ width: 100%; font-size: 12px; }
	.lp-btn { bottom: 0; clear: both; display: block; float: right; position: relative; right: 0; top: 3px; }

	.postTitle { font-size: 18px; }

	.hn-title { font-size: 15px; padding: 0 0 40px; }
	.hn-more { bottom: -50px; font-size: 16px; height: 30px; left: -14px; line-height: 30px;}
	.hn-more:before { border-bottom-width: 12px; border-right-width: 10px; bottom: -12px; }
	.hn-more:after { border-bottom-width: 20px; border-left-width: 22px; border-top-width: 20px; right: -22px; top: -6px; }
	.hn-share { display: none; }

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px){

}