/*////////////MAIN FLEXSLIDER STYLING////////////*/
body {
	background: #000;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.slider { 
	overflow: hidden;
	
	width: 100%;
	height: 80%;

	margin: 0 auto;
	text-align: center;
	padding: 0;
	
	min-width: 750px;
}
.slides li{
	width: auto;
	margin: 0 auto;
	text-align: center;
}
.slides li img{
	width: auto;
	height: 300px;
    vertical-align: middle;
    margin: auto;
    }
/*////////////MEDIA QUERIE LANDSCAPE or PORTRAIT////////////*/
@media only screen and (min-width : 768px) and (orientation : portrait) {
	body{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.slider { 
		overflow: hidden;
		
		width: 100%;
		height: 80%;
	
		margin: 0 auto;
		text-align: center;
		padding: 0;
	}
	.slides{
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
	}
	#landscape{
		display: none;
	}
	#portrait{
		display: block;
		width: 100%;
		height: 80%;
		overflow: hidden;
	}
	#portrait ul li img{
		width: 100vw;
		height: auto;
		overflow: hidden;
	    vertical-align: middle;
	    margin: auto;
    }
}
@media only screen and (min-width : 768px) and (orientation : landscape) {
	body{
		overflow: hidden;
		width: 100%;
		height: 100%;
	}
	.slider { 
		overflow: hidden;
		
		width: 100%;
		height: 80%;
	
		margin: 0 auto;
		text-align: center;
		padding: 0;
	}
	.slides{
		width: 100%;
		height: 100%;
		overflow: hidden;
		text-align: center;
	}
	#landscape{
		display: block;
		width: 100%;
		height: 80%;
		overflow: hidden;
	}
	#landscape ul li img{
		width: 100vw;
		height: auto;
		overflow: hidden;
	    vertical-align: middle;
	    margin: auto;
    }
	#portrait{
		display: none;
	}
}
/*////////////HEADER////////////*/
#mainContent{
	height: 100px;
	width: 100%;
	min-width: 750px;
	position: fixed;
	top:0px;
}
#mainContent img{
	display: block;
	margin: 0px auto;
	height: 100px;
}

/*////////////DROP SHADOW////////////*/
.one-edge-shadow {
	-webkit-box-shadow: 0 8px 6px -6px black;
	   -moz-box-shadow: 0 8px 6px -6px black;
	        box-shadow: 0 8px 6px -6px black;
}

/*////////////NAVIGATION BAR - sliding menu////////////*/
#slideleft{
	width:100%;
	min-width: 600px;
	height: 6.8vw;
	background: rgb(0, 0, 0); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .6);
	color:#FFF;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
#slideleft ul{
    list-style-type: none;
    margin: 0;
    padding: 0; 
    border: none;
    overflow: hidden;
    min-width: 600px;
}
#slideleft ul li{
	display:inline-block;
	height: 6.8vw;
	font-weight: bold;
    color: #999;
    margin: 0;
    padding: 0;
}
.hamburger{
	width: 6.8%;
	height: 6.8vw;
	border: none;
	z-index: 600;
}
.closed {
	position: relative;
	top: 0px;
	left: -130vw; /* 68vw */
	width: 100vw;
	height: 6.8vw;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.opened {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 6.8vw;
}
#tab { /* For the hamburger tab - open */
	position: absolute;
	top: 0px;
	left: 0;
	width: 6.8vw;
	height: 2.8vw;
	padding: 2vw 0;
	background-color: #ffcc33;
	cursor: pointer;
	z-index: 999;
/* Triangle
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6.8vw 6.8vw 0 0;
	border-color: #ffcc33 transparent transparent; 
	vertical-align: middle;
	cursor: pointer;
	-webkit-transition: all .3s ease;
	   -moz-transition: all .3s ease;
	     -o-transition: all .3s ease;
	        transition: all .3s ease;
*/
}
.iconClosed:hover {
	background: #000;
	color: #000;
	cursor: pointer;
	background:url("../images/iconHover.svg") no-repeat center center;
	background-size: contain;
}
.iconClosed {
	background: url("../images/icon.svg") no-repeat center center;
	background-size: contain;
	cursor: pointer;
}
.iconOpen {
	background: url("../images/cross.svg") no-repeat center center;
	background-size: contain;
	cursor: pointer;
}
.iconOpen:hover {
	cursor: pointer;
	background:url("../images/crossCls.svg") no-repeat center center;
	background-size: contain;
}

/*//////////////SHINY TAB//////////////*/
i {
/*   positioning */
		position: absolute;
		opacity: 0;
		top: 0;
		left: 0;
  
/*   gradient   */
		background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.03) 1%, rgba(255,255,255,0.6) 30%, rgba(255,255,255,0.85) 50%, rgba(255,255,255,0.85) 70%, rgba(255,255,255,0.85) 71%, rgba(255,255,255,0) 100%); /* FF3.6+ */
		background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(1%,rgba(255,255,255,0.03)), color-stop(30%,rgba(255,255,255,0.85)), color-stop(50%,rgba(255,255,255,0.85)), color-stop(70%,rgba(255,255,255,0.85)), color-stop(71%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
		background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
		background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
		background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* IE10+ */
		background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.03) 1%,rgba(255,255,255,0.6) 30%,rgba(255,255,255,0.85) 50%,rgba(255,255,255,0.85) 70%,rgba(255,255,255,0.85) 71%,rgba(255,255,255,0) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 ); /* IE6-9 */
    
/*  forming the shine element
    play around with the width, skew and gradient to get different effects
  */
		width: 15%;
		height: 100%;
     transform: skew(-10deg,0deg);
		-webkit-transform: skew(-10deg,0deg);
     -moz-transform: skew(-10deg,0deg);
     -ms-transform: skew(-10deg,0deg);
     -o-transform: skew(-10deg,0deg);
  
/*  animating it  */
     animation: move 3s;
		animation-iteration-count: infinite;
		animation-delay: 3s;
		-webkit-animation: move 3s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-delay: 3s;
		-moz-transform: skew(-10deg,0deg);
		-moz-animation: move 3s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-delay: 3s;
		-ms-transform: skew(-10deg,0deg);
		-ms-animation: move 3s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-delay: 3s;
		-o-transform: skew(-10deg,0deg);
		-o-animation: move 3s;
		-o-animation-iteration-count: infinite;
		-o-animation-delay: 3s;
	}

/*  */
@keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.18}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-webkit-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.18}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-moz-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.18}
	80% {opacity: 0.0}
	100% { left: 88%}
}

@-ms-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.18}
	80% {opacity: 0.0}
	100% { left: 82%}
}

@-o-keyframes move {
	0%  { left: 0; opacity: 0; }
	5% {opacity: 0.0}
	48% {opacity: 0.18}
	80% {opacity: 0.0}
	100% { left: 82%}
}
/*////////////END SHINY TAB////////////*/

#otherMenu{
	height: 6.8vw;
	width: 92%;
	margin: 0;
    padding: 0;
    vertical-align: top;
	border: none;
}
#menuOpns{
	width: 100%;
	min-width: 380px;
	overflow: hidden;
	height: 6.8vw;
	list-style-type: none;
    margin: 0;
    padding: 0;
    top: 0;
    border: none;
}
#menuOpns li{
	width: 24.3%;
	height: 6.8vw;
	margin: 0;
    padding: 0;
    top: 0;
	display:inline-block;
	text-align: center;
	vertical-align: middle;
	border-right: 1px solid #ffcc33;
}
#menuOpns li a{
	display: block;
}
#menuOpns li:last-child{
	margin: 0;
    padding: 0;
    border-right: 0px;
    background: url("../images/logo.svg") no-repeat center top;
	background-size: 87.9%;
}
a:link, a:active, a:visited, a:hover{
	text-decoration:none;
	color: #FFF;
	font-family: 'Muli', sans-serif;
	font-weight: lighter;
	font-size: 3em; 
	font-style: normal;
	text-align: center;
	vertical-align: middle;
	display: block;
}
#slideleft ul li a:hover{
	font-weight: bold;
	height:33px;
    color: #999;
	opacity: 0.8;
	filter:alpha(opacity=80); /* For IE8 and earlier */
	font-style: italic;
}

/*//////////// MENU ITEMS ////////////*/
.brochure {
	background: url("../images/dl.svg") no-repeat center top;
	background-size: contain;
	cursor: pointer;
}
li.brochure, li.contact, li.djati a{
	display: block;
}
li.brochure:hover, li.contact:hover, li.djati:hover{
	opacity: 0.5;
	filter:alpha(opacity=50); /* For IE8 and earlier */
	cursor: pointer;
}
.contact{
	background: url("../images/contact.svg") no-repeat center top;
	background-size: contain;
	cursor: pointer;
	display: block;
}
.djati{
	background: url("../images/djati.svg") no-repeat center top;
	background-size: contain;
	cursor: pointer;
	display: block;
}	
.linktoweb {
	width: 100%;
	height: 100%;
	background: none;
	font-size: 4em;
	opacity: 0;
	filter:alpha(opacity=0);
}


/*//////////////////////// FOOTER ////////////////////////*/
#footerBar{
	width:100%;
	overflow: hidden;
	height: 4.8vh;
	background-color: #000;
	opacity: 0.88;
	filter:alpha(opacity=8.8); /* For IE8 and earlier */
	color:#FFF;
	text-align:left;
	position: fixed;
	bottom:0;	
	z-index: 999
}
#footerBar ul{
    list-style-type: none;
    margin: 0;
    width: 100%;
    padding: .38% 5%;
}
#footerBar ul li{
	display:inline-block;
    color: #999;
    vertical-align: top;
}
.copyright{
	width: 81%;
	text-align: left;
	text-decoration:none;
	color: #FFF;
	font-family: 'Muli', sans-serif;
	font-weight: lighter;
	font-size: .8em; 
}

/* CONTACT SECTION */
#contactFooter{
	width: 3%;
	text-align: right;
	border-right: 1px solid #ffcc33;
}
#contactFooter:hover{
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}
#contactFooter img{
	padding-right: 8px;
}
#ContactSlideout{
	float: right;
	display: block;
	background-color: #000;
	opacity: 0.78;
	filter:alpha(opacity=78);
	width:100%;
	padding: 50px auto;
	vertical-align: middle;
	z-index: 998;
	
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
.contactClosed{
	position: absolute;
	bottom:-250px;
	right: 0;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
	display: none;
}
.contactOpened{
	position: absolute;
	bottom:4.8vh;
	right: 0;
	-webkit-transition: all .5s ease;
	   -moz-transition: all .5s ease;
	     -o-transition: all .5s ease;
	        transition: all .5s ease;
}
#ContactSlideout p{
	text-align: center;
	width: 100%;
	text-decoration:none;
	color: #FFF;
	font-family: 'Muli', sans-serif;
	font-weight: lighter;
	font-size: .89em; 
	line-height: 1.68em;
}
/* FOOTER */
.socmed1 {
	width: 3%;
	text-align: right;
	border-right: 1px solid #ffcc33;
}
.socmed2 {
	width: 3%;
	text-align: right;
}
#footerContent li img{
	width: 18px;
	height: auto;
    vertical-align: top;
}
a:link, a:active, a:visited, a:hover{
	text-decoration:none;
	color: #FFF;
	font-family: 'Muli', sans-serif;
	font-weight: lighter;
	font-size: 1em; 
	
}
#footerBar ul li a:hover{
	opacity: 0.7;
	filter:alpha(opacity=70); /* For IE8 and earlier */
}
/*////////FOOTER CONTACT////////////*/