/* body,html */
html,body {
	min-height: 100%;
}

.layout-boxed html, .layout-boxed body {
	height: 100%;
}


body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	overflow-y: hidden;
	font-family: 'Andika', sans-serif;
	color:#6e6e6e;
}


/* system - colors */
.green{ color:#339900 }
.red {color:#ff0000 }
.blue {color:#4192c2 }


/* system - lang */
.rtl{
	text-align:right;
	direction:rtl;
}

.ltr{
	text-align:left;
	direction:ltr;
}


/* system - hidden */
.hid{
	display:none;
}

/* system - no margin */
.nom{
	margin:0px !important;
}

/* system - no padding */
.nop{
	padding:0px !important;
}

/* system - border - testing */
.bor{
	border:1px solid red !important;
}

.bog{
	border:1px solid green !important;
}

.bob{
	border:1px solid blue !important;
}

/* system - focus */
.focus{
    border-color: rgba(82,168,236,.8);
    outline: 0;
    outline: thin dotted \9;
    -moz-box-shadow: 0 0 8px rgba(82,168,236,.6);
    box-shadow: 0 0 8px rgba(82,168,236,.6) !important;
}

/* elements - spacers */
.hr{
	width:100%;
	height:1px;
	border-bottom:1px solid #eaeaea;
	padding:0px;
	margin:10px 0;
}

.space-xs{
	width:100%;
	height:9px;
}

.space-sm{
	width:100%;
	height:18px;
}

.space-lg{
	width:100%;
	height:27px;
}

.space-xl{
	width:100%;
	height:36px;
}

.space-2xl{
	width:100%;
	height:45px;
}

.space-3xl{
	width:100%;
	height:54px;
}

.space-4xl{
	width:100%;
	height:63px;
}

.space-5xl{
	width:100%;
	height:72px;
}

.space-6xl{
	width:100%;
	height:81px;
}

.space-7xl{
	width:100%;
	height:90px;
}

.space-8xl{
	width:100%;
	height:99px;
}

.space-9xl{
	width:100%;
	height:108px;
}

/* Preloader */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
  /* change if the mask should have another color then white */
  z-index: 9999;
  /* makes sure it stays on top */
}

#status {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  /* centers the loading animation horizontally one the screen */
  top: 50%;
  /* centers the loading animation vertically one the screen */
  background-image: url("../images/status.gif");
  /* path to your loading animation */
  background-repeat: no-repeat;
  background-position: center;
  margin: -100px 0 0 -100px;
  /* is width and height divided by two */
}


/* Header */
.header{
	position:fixed;
	width:100%;
	height:200px;
	z-index:27;
	top:0;
	left:0;
	right:0;
	background-color:white;
	-webkit-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	-moz-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
}


/* scroll to top */

.scrollToTop{
	width:70px; 
	height:70px;
	padding:10px; 
	position:fixed;
	bottom:40px;
	right:20px;
	display:none;
	background: url('../images/scroll_top.png') no-repeat;
	background-size: 70px 70px;
	z-index:999;
	cursor:pointer;
	opacity: 0.6;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}

.scrollToTop:hover{
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}


/* Header animation */
@media only screen and (max-width: 992px){
	.animated{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;
	-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;
	animation-fill-mode:both}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-54px)}100%{-webkit-transform:translateY(0)}}
	@-moz-keyframes slideDown{0%{-moz-transform:translateY(-54px)}100%{-moz-transform:translateY(0)}}@-o-keyframes slideDown{0%{-o-transform:translateY(-54px)}100%{-o-transform:translateY(0)}}
	@keyframes slideDown{0%{transform:translateY(-54px)}100%{transform:translateY(0)}}.animated.slideDown{-webkit-animation-name:slideDown;
	-moz-animation-name:slideDown;-o-animation-name:slideDown;animation-name:slideDown}@-webkit-keyframes 
	slideUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-54px)}}@-moz-keyframes 
	slideUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-54px)}}@-o-keyframes 
	slideUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-54px)}}@keyframes 
	slideUp{0%{transform:translateY(0)}100%{transform:translateY(-54px)}}
	.animated.slideUp{-webkit-animation-name:slideUp;-moz-animation-name:slideUp;-o-animation-name:slideUp;
	animation-name:slideUp}
}
@media only screen and  (min-width: 1024px){
	.animated{-webkit-animation-duration:.5s;-moz-animation-duration:.5s;
	-o-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;
	animation-fill-mode:both}@-webkit-keyframes slideDown{0%{-webkit-transform:translateY(-176px)}100%{-webkit-transform:translateY(0)}}
	@-moz-keyframes slideDown{0%{-moz-transform:translateY(-176px)}100%{-moz-transform:translateY(0)}}@-o-keyframes slideDown{0%{-o-transform:translateY(-176px)}100%{-o-transform:translateY(0)}}
	@keyframes slideDown{0%{transform:translateY(-176px)}100%{transform:translateY(0)}}.animated.slideDown{-webkit-animation-name:slideDown;
	-moz-animation-name:slideDown;-o-animation-name:slideDown;animation-name:slideDown}@-webkit-keyframes 
	slideUp{0%{-webkit-transform:translateY(0)}100%{-webkit-transform:translateY(-176px)}}@-moz-keyframes 
	slideUp{0%{-moz-transform:translateY(0)}100%{-moz-transform:translateY(-176px)}}@-o-keyframes 
	slideUp{0%{-o-transform:translateY(0)}100%{-o-transform:translateY(-176px)}}@keyframes 
	slideUp{0%{transform:translateY(0)}100%{transform:translateY(-176px)}}
	.animated.slideUp{-webkit-animation-name:slideUp;-moz-animation-name:slideUp;-o-animation-name:slideUp;
}

.menu-round{
	position:absolute;
	width:98%;
	left:0px;
	right:0px;
	margin:auto;
	height:60px;
	top:120px;
	background-color:white;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
	-webkit-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	-moz-box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
	box-shadow: 0px 2px 4px -1px rgba(107,105,107,1);
}

.menu-back{
	position:absolute;
	width:100%;
	height:60px;
	top:100px;
	background-color:white;
}

.menu-wrapper{
	position:absolute;
	width:94%;
	height:40px;
	top:140px;
	left:0px;
	right:0px;
	margin:auto;

}

.menu-sm{
	position:absolute;
	width:100%;
	height:50px;
	top:100px;
}

.logo-lg{
	position:absolute;
	width:468px;
	height:90px;
	max-height:90px !important;
	overflow:hidden;
	top:30px;
	left:0px;
	right:0px;
	margin-left:auto;
	margin-right:auto;
	
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

.logo-sm{
	position:absolute;
	width:300px;
	height:90px;
	top:30px;
	left:20px;
	display:table;
    -webkit-transition: all 0.7s ease-out;
       -moz-transition: all 0.7s ease-out;
        -ms-transition: all 0.7s ease-out;
         -o-transition: all 0.7s ease-out;
            transition: all 0.7s ease-out;
}

/* flip */

.flip {
  position: relative;
  text-align: center;
}

.flip_front, .flip_back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.flip_front, .flip_back {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
cursor:pointer;
}

.flip_front {
/*background-color: #FFFFFF; */
}

.flip_back {
/* background-color: #FFFFFF; */
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.flip.effect_hover:hover .flip_front {
-webkit-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}

.flip.effect_hover:hover .flip_back {
-webkit-transform: rotateY(0);
transform: rotateY(0);
}


/* Slider Wrapper */

.slider-wrapper{position: relative; z-index:9;}
.tp-caption a {color:#ffffff;}
.tp-caption a:hover {color:#ffffff;}
.tp-caption a.btn.btn-white { color:<?=$color2?>;}
.tp-caption a.btn.btn-white.btn-alt { color:#ffffff;}
.tp-caption a.btn.btn-white.btn-alt:hover, .tp-caption a.btn.btn-white.btn-alt:focus { color:<?=$color2?>;}
.tp-banner-container{width:100%; position:relative;	padding:0;}
.tp-banner{width:100%;position:relative;}
.tp-banner-fullscreen-container {width:100%;position:relative;padding:0;}



/* Content */
.content{
	margin-top:200px;
	width:100%;
}


/* Input type "date" placeholder hack */

  input[type="date"]:before {
    content: attr(placeholder) !important;
    color: #828282;
    margin-right: 0.5em;
  }
  input[type="date"]:focus:before,
  input[type="date"]:valid:before {
    content: "";
  }


/* Gallery  */
.g-pic{
	position:absolute;
	left:5%;
	right:5%;
	top:5%;
	bottom:25%;
	margin:auto;
	background-size:cover;
	background-position:center;
	border:4px solid white;
	box-shadow: 0 0 0 1pt #9b9b9b;
	cursor:pointer;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */



}

.g-pic:hover{
	box-shadow: 0 0 3pt 2pt #8dcee7;
	opacity: 1;
	filter: alpha(opacity=100); /* For IE8 and earlier */
}

.g-text{
	position:absolute;
	left:5%;
	right:5%;
	top:5%;
	top:77%;
	margin:auto;
	text-align:center;
	font-size:1.35em

}