/*

#------------------------------------------------------------------------

# Photo - #9 2014 Joomla! template (for Joomla 2.5)

#

# Copyright (C) 2007-2014 Gavick.com. All Rights Reserved.

# License: Copyrighted Commercial Software

# Website: http://www.gavick.com

# Support: support@gavick.com 

*/



#page-nav {

	background: #1c4767;

	bottom: 0;

	position: fixed;

	-webkit-transition: bottom .3s ease-out;

	-moz-transition: bottom .3s ease-out;

	-ms-transition: bottom .3s ease-out;

	-o-transition: bottom .3s ease-out;

	transition: bottom .3s ease-out;

	width: 100%;

	z-index: 1000;

}

#page-nav > .gk-page {

	position: relative;

}

#gk-menu-button {

	background: #fff;

	cursor: pointer;

	height: 70px;

	left: 0;

	position: absolute;

	top: -70px;

}

#gk-menu-button > strong {

	background: #fff;

	border-radius: 2px;

	font-size: 0;

	height: 3px;

	left: 30px;

	position: absolute;

	top: 33px;

	width: 25px;

}

#gk-menu-button > strong:after,

#gk-menu-button > strong:before {

	background: #fff;

	content: "";

	display: block;

	height: 3px;

	position: relative;

	top: -6px;

	-webkit-transition: all .2s ease-out;

	-moz-transition: all .2s ease-out;

	-ms-transition: all .2s ease-out;

	-o-transition: all .2s ease-out;

	transition: all .2s ease-out;

	width: 25px;

}

#gk-menu-button > strong:after {

	top: 3px;

}

#gk-menu-button.active > strong {

	background: rgba(255, 255, 255, 0);

}

#gk-menu-button.active > strong:before {

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    -o-transform-origin: 0 0;

    transform-origin: 0 0;

    margin: -2px 0 0 4px;

}



#gk-menu-button.active > strong:after {

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    -webkit-transform-origin: 0 0;

    -moz-transform-origin: 0 0;

    -ms-transform-origin: 0 0;

    -o-transform-origin: 0 0;

    transform-origin: 0 0;

    margin: 5px 0 0 2px;

}



#gk-menu-button > span {

	color: #000;

	display: block;

	font-size: 12px;

	font-weight: bold;

	line-height: 70px;

	padding: 0 40px 0 0;

	text-transform: uppercase;

}

#gk-menu-button > span:before {

	background: #1c4767;

	content: "";

	display: block;

	float: left;

	height: 70px;

	margin: 0 40px 0 0;

	width: 85px;

}

#overlay-menu > .overthrow {

	display: none;

}



#gk-social,

.gk-logo-text {

	-webkit-transition: all .3s ease-out;

	-moz-transition: all .3s ease-out;

	-ms-transition: all .3s ease-out;

	-o-transition: all .3s ease-out;

	transition: all .3s ease-out;

}



/* Smaller menu */

#page-nav.active {

	bottom: -60px;

}

#page-nav.gk-small-height.active {

	bottom: -25px;

}

#page-nav.active #gk-social,

#page-nav.active .gk-logo-text {

	margin-top: 20px;

}

#page-nav.active #gk-menu-button {

	height: 60px;

	top: -60px;

}

#page-nav.active #gk-menu-button > span {

	line-height: 67px;

}

#page-nav.active #gk-menu-button > strong {

	top: 30px;

}



/* 

 Overthrow CSS:

 Enable overflow: 

 auto on elements with overthrow class when html element has overthrow class too 

 */

.overthrow-enabled .overthrow {

    overflow: auto;

    -webkit-overflow-scrolling: touch;

}



#overlay-menu-content {

	background: #1c4767;

	bottom: -100%;

	left: 0;

	opacity: 0;

	position: fixed;

	top: 100%;

	-webkit-transition: all .3s ease-out;

	-moz-transition: all .3s ease-out;

	-ms-transition: all .3s ease-out;

	-o-transition: all .3s ease-out;

	transition: all .3s ease-out;

	width: 100%;

	z-index: 999;

}



#overlay-menu-content.active {

	opacity: 1;

	top: 0;

}



#page-nav.active + #overlay-menu-content.active {

	bottom: 66px!important;

}



#overlay-menu-content .level1,

#overlay-menu-content .level2 {

	display: block;

	left: -200%;

	margin-left: -50px;

	opacity: 0;

	position: absolute;

	top: 15px;

	-webkit-transition: margin .3s ease-out, opacity .3s ease-out;

	-moz-transition: margin .3s ease-out, opacity .3s ease-out;

	-ms-transition: margin .3s ease-out, opacity .3s ease-out;

	-o-transition: margin .3s ease-out, opacity .3s ease-out;

	transition: margin .3s ease-out, opacity .3s ease-out;

	width: 100%;

}



#overlay-menu-content .level1.gk-active,

#overlay-menu-content .level2.gk-active {

	left: 100%;

	margin-left: 0;

	opacity: 1;

}



#overlay-menu-content .level1.gk-hide,

#overlay-menu-content .level2.gk-hide {

	left: 100%;

	margin-left: -25px;

	opacity: 0;

}



#overlay-menu-content .level1 > li,

#overlay-menu-content .level2 > li {

	font-size: 18px;

	letter-spacing: 1px;

	line-height: 1;

	margin-bottom: 18px;

	opacity: 0;

	text-transform: uppercase;

	-webkit-transform: translateX(-25px);

	-moz-transform: translateX(-25px);

	-ms-transform: translateX(-25px);

	-o-transform: translateX(-25px);

	transform: translateX(-25px);

	-webkit-transition: all .3s ease-out;

	-moz-transition: all .3s ease-out;

	-ms-transition: all .3s ease-out;

	-o-transition: all .3s ease-out;

	transition: all .3s ease-out;

}



#overlay-menu-content .level1 > li.gk-active,

#overlay-menu-content .level2 > li.gk-active {

	-webkit-transform: translateX(0);

	-moz-transform: translateX(0);

	-ms-transform: translateX(0);

	-o-transform: translateX(0);

	transform: translateX(0);

	opacity: 1;

}



#overlay-menu-content .level1 > li > a,

#overlay-menu-content .level2 > li > a  {

	color: rgba(255, 255, 255, 0.4);

	display: block;

	width: 100%;

}



#overlay-menu-content .level1 > li > a:hover, 

#overlay-menu-content .level2 > li > a:hover {

	color: #beb4a7;

}



#overlay-menu-content-wrap1 {

	height: 100%;

	left: 50%;

	overflow: hidden;

	position: absolute;

	-webkit-transform: translateX(-50%);

	-moz-transform: translateX(-50%);

	-ms-transform: translateX(-50%);

	-o-transform: translateX(-50%);

	transform: translateX(-50%);

	width: 100%;

}



#overlay-menu-content-wrap2 {

	height: 100%;

	overflow: auto;

	position: absolute;

	width: 110%;

}



#overlay-menu-content-wrap1 .gk-overlay-menu {

	bottom: 0;

	padding: 110px 0;

	position: absolute;

	width: 100%;

}



#overlay-menu-content-wrap1.area-too-small .gk-overlay-menu {

	position: relative;

}



.gk-overlay-menu > ul > li {

	font-size: 36px;

	font-weight: 300;

	letter-spacing: 4px;

	line-height: 1.4;

	opacity: 0;

	position: relative;

	top: 60px;

	-webkit-transition: all .3s ease-out;

	-moz-transition: all .3s ease-out;

	-ms-transition: all .3s ease-out;

	-o-transition: all .3s ease-out;

	transition: all .3s ease-out;

	width: 33.333333%;

}



.gk-overlay-menu > ul > li.gk-active {

	opacity: 1;

	top: 0;

}



.gk-overlay-menu > ul > li > a {

	color: #fff;

	display: block;

	text-transform: uppercase;

	width: 100%;

}



.gk-overlay-menu > ul > li > a:hover {

	color: #beb4a7;

}