/* Generated by Font Squirrel (http://www.fontsquirrel.com) on January 18, 2013 */

@font-face {
    font-family: 'thaisans_neue_blackregular';
    src: url('../fonts/thaisansneue-black-webfont.eot');src: url('../fonts/thaisansneue-black-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-black-webfont.woff') format('woff'),url('../fonts/thaisansneue-black-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-black-webfont.svg#thaisans_neue_blackregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neuebold';
    src: url('../fonts/thaisansneue-bold-webfont.eot');src: url('../fonts/thaisansneue-bold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-bold-webfont.woff') format('woff'),url('../fonts/thaisansneue-bold-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-bold-webfont.svg#thaisans_neuebold') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_extbdregular';
    src: url('../fonts/thaisansneue-extrabold-webfont.eot');src: url('../fonts/thaisansneue-extrabold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-extrabold-webfont.woff') format('woff'),url('../fonts/thaisansneue-extrabold-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-extrabold-webfont.svg#thaisans_neue_extbdregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_extltregular';
    src: url('../fonts/thaisansneue-extralight-webfont.eot');src: url('../fonts/thaisansneue-extralight-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-extralight-webfont.woff') format('woff'),url('../fonts/thaisansneue-extralight-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-extralight-webfont.svg#thaisans_neue_extltregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_lightregular';
    src: url('../fonts/thaisansneue-light-webfont.eot');src: url('../fonts/thaisansneue-light-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-light-webfont.woff') format('woff'),url('../fonts/thaisansneue-light-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-light-webfont.svg#thaisans_neue_lightregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neueregular';
 src: url('../fonts/thaisansneue-regular-webfont.eot');src: url('../fonts/thaisansneue-regular-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-regular-webfont.woff') format('woff'),url('../fonts/thaisansneue-regular-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-regular-webfont.svg#thaisans_neueregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_sembdregular';
    src: url('../fonts/thaisansneue-semibold-webfont.eot');src: url('../fonts/thaisansneue-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-semibold-webfont.woff') format('woff'),url('../fonts/thaisansneue-semibold-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-semibold-webfont.svg#thaisans_neue_sembdregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_ultbdregular';
    src: url('../fonts/thaisansneue-ultrabold-webfont.eot');src: url('../fonts/thaisansneue-ultrabold-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-ultrabold-webfont.woff') format('woff'),url('../fonts/thaisansneue-ultrabold-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-ultrabold-webfont.svg#thaisans_neue_ultbdregular') format('svg');font-weight: normal;font-style: normal;
}

@font-face {
    font-family: 'thaisans_neue_ultltregular';
    src: url('../fonts/thaisansneue-ultralight-webfont.eot');src: url('../fonts/thaisansneue-ultralight-webfont.eot?#iefix') format('embedded-opentype'),url('../fonts/thaisansneue-ultralight-webfont.woff') format('woff'),url('../fonts/thaisansneue-ultralight-webfont.ttf') format('truetype'),url('../fonts/thaisansneue-ultralight-webfont.svg#thaisans_neue_ultltregular') format('svg');font-weight: normal;font-style: normal;
}

/*
===========================================================
	Mixin(s)
===========================================================
*/

@mixin transition($transition-property, $transition-time, $method) {
    -webkit-transition: $transition-property $transition-time $method;
    -moz-transition: $transition-property $transition-time $method;
    -ms-transition: $transition-property $transition-time $method;
    -o-transition: $transition-property $transition-time $method;
    transition: $transition-property $transition-time $method;
}

@mixin transform($transforms) {
	   -moz-transform: $transforms;
	     -o-transform: $transforms;
	    -ms-transform: $transforms;
	-webkit-transform: $transforms;
          	transform: $transforms;
}

@mixin border-radius($radius) {
	-moz-border-radius: $radius;
 -webkit-border-radius: $radius;
	     border-radius: $radius;
}

@mixin blur($blur, $opacity) {
	-webkit-filter: blur($blur);
    -moz-filter: blur($blur);
    -o-filter: blur($blur);
    -ms-filter: blur($blur);
    filter: blur($blur);
    opacity: $opacity;
}

@mixin box-shadow-top-down(){
	-moz-box-shadow:    inset  0  8px 10px -8px #696868, 
                        inset  0 -8px 10px -8px #696868;
    -webkit-box-shadow: inset  0  8px 10px -8px #696868, 
                        inset  0 -8px 10px -8px #696868;
     box-shadow:        inset  0  8px 10px -8px #696868, 
                        inset  0 -8px 10px -8px #696868;

}
/*
===========================================================
	Variable Assign
===========================================================
*/
$webtheme-light: #BBDEFB;
$webtheme: #2196F3;
$webtheme-mid: #239DFF;
$webtheme-dark: #007AF3;
$webtheme-tran: rgba(33, 150, 243, 0.4);

$tran-black: rgba(0, 0, 0, 0.4);
$light-black: #666666;

$text-dark: #2B2C25;
$text-light: #E0E1DD;

$light-blue: #46B5F7;
$blue: #18A3F5;

$light-gray: #F5F5F5;
$gray: #BDBDBD;

$red: #FF3D00;
$green: #76FF03;

$transparent: rgba(255, 255, 255, 0);


/*
===========================================================
	Component Styling
===========================================================
*/
html{
	zoom: 0.9; -moz-transform: scale(0.9); -moz-transform-origin: 0 0
}

body{
	font-family: 'thaisans_neue_lightregular';
	font-size: 16px;
	// transform: scale(0.9);
 //    transform-origin: 10% 10%;
}


.btn {
	border-radius: 0px;
	font-family: 'thaisans_neuebold';
	box-shadow: $light-black 0px 1px 3px 0px;	
	background-image: none;
}

.btn-primary {
	background-color: $light-blue;
	border: none;
	&:hover{
		background-color: $blue;
	}
}

.btn-defalut {
	background-color: $light-gray;
	&:hover{
		background-color: $gray;
		color: white;
	}
}

.icon-bar {
	background-color: white;
}

.left-border {
	border-left: 1px solid $gray;
}
.right-border {
	border-right: 1px solid $gray;
}

.feature-icon {
	text-align: center;
	// width: 100%;
	font-size: 6em;
	line-height: 1.8em;
	width: 1.8em;
	@include border-radius(150px);
	box-shadow: 0px 0px 10px #888;

}

.center {
	text-align: center;
	width: 100%;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
}

.float-right{
	float: right;
}

.float-left{
	float: left;
}

.cir-img {
	width: 100%;
	border-radius: 200px;
	border: white solid 5px;
	box-shadow: 0px 0px 8px #888;

}

.clear {
	clear: both;
}

/* Gradient transparent - color - transparent */
		
hr.gradient {
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}

.hr {
	text-align:center;
}

.text-dark {
	color: $text-dark !important;
	a{
		color: $text-dark !important;
	}
}

.bottom-space {
	margin-bottom: 50px;
}

.no-padding {
	padding: 0px;
	padding-left: 0px !important;
}

.midium-size{	
	font-size: 1.5em;
}

.biggersize{
	font-size:3em;
}

.verticalLine{
	border-left: 1px solid #CCC;
}

.verticalCenter{
	vertical-align: middle;
}

.firstInput{
	padding-left: 0px;
}

.lastInput{
	padding-right: 0px;
}

@media (max-width: 991px) {
  	.verticalLine{
		border-left: none;
	}

	.firstInput, .lastInput{
		padding: 0px;
	}
}

.full-width{
	width: 100%;
}

.full-height{
	height: 100%;
}

.absolute{
	position: absolute;
}

.zeroOpacity{
	opacity: 0;
}

.red {
	color: red;
}

.text-input{	
	-webkit-appearance: none;
	@include border-radius(3px);
	@include transition(all, 0.3s, ease-in-out);
	outline: none;
	width: 100%;
	padding-left: 0.5em;
	font-size: 1.5em;
	height: 2.5em;
	vertical-align: middle;
	border: 1px solid #CCC;
	margin-bottom: 0.8em;
	
	&:focus{
		box-shadow: 0px 0px 8px $webtheme;
		border: 1px solid $webtheme-dark;
	}

	

}

.invalid{
	box-shadow: 0px 0px 8px $red;
	border: 1px solid $red;	
	top: -0.8em;
}

.small-input{
	@extend .text-input;

	font-size: 1em;
	height: 2.5em;
}

.noti{
	background-color: $red;
	color: white;
	text-shadow: 0 2px 0 darken($red,10%);
	border-radius: 0 0 3px 3px;
	top: -0.8em;
	position: relative;
	width: 100%;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	left:0;
	right:0;
}


.default-btn{
	-webkit-appearance: none;
	@include border-radius(3px);
	text-decoration: none !important;
	outline: none;
	height: 2.5em;
	vertical-align: middle;
	border: 1px solid #CCC;
	margin-bottom: 0.8em;
	text-align: center;
	color: white !important;
	background-color: #1abc9c;
	border: 1px solid lighten($webtheme, 10%);
	box-shadow: 0px 0.3em 0px $webtheme-dark;	
	cursor: pointer;
	text-shadow: none;	
	text-shadow: 0px 2px 0px $webtheme-dark;
	padding: 0.3em 1em 0.3em;
	// padding-left: 1em;
	// padding-right: 1em;

	&:active{
		position:relative;
		top: 0.2em;
		box-shadow: 0px 0.1em 2px $webtheme-dark;
		// border-bottom: 0.1em solid $webtheme-dark;
	}
}

.white-btn{
	@extend .default-btn;
	background-color: $light-gray;
	color: $text-dark !important;
	border: 1px solid lighten($gray, 10%);
	box-shadow: 0px 0.3em 0px $gray;	
	text-shadow: 0px 1px 0px $gray;
	&:active{
		position:relative;
		top: 0.2em;
		box-shadow: 0px 0.1em 2px $gray;
	}
}

.red-btn{
	@extend .default-btn;
	background-color: $red;
	border: 1px solid lighten($red, 10%);
	color: white !important;
	box-shadow: 0px 0.3em 0px darken($red, 10%);	
	text-shadow: 0px 2px 0px darken($red, 10%);
	&:active{
		position:relative;
		top: 0.2em;
		box-shadow: 0px 0.1em 2px darken($red, 10%);
	}
}

.green-btn{
	@extend .default-btn;
	background-color: $green;
	border: 1px solid lighten($green, 10%);
	color: black !important;
	box-shadow: 0px 0.3em 0px darken($green, 10%);	
	text-shadow: 0px 2px 0px darken($green, 10%);
	&:active{
		position:relative;
		top: 0.2em;
		box-shadow: 0px 0.1em 2px darken($green, 10%);
	}
}

.spiner-btn-left{
	@extend .white-btn;
	font-size: 23px;
	border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
}

.spiner-btn-right{
	@extend .white-btn;
	font-size: 23px;
	border-bottom-left-radius: 0px;
	border-top-left-radius: 0px;
}

.shadow-top-down{
	@include box-shadow-top-down();
}

.shadow-top{
	-moz-box-shadow:    inset  0  8px 10px -8px #696868;
    -webkit-box-shadow: inset  0  8px 10px -8px #696868;
     box-shadow:        inset  0  8px 10px -8px #696868;
}

.shadow-down{
	-moz-box-shadow:    inset  0 -8px 10px -8px #696868;
    -webkit-box-shadow: inset  0 -8px 10px -8px #696868;
     box-shadow:        inset  0 -8px 10px -8px #696868;
}


/*
===========================================================
	Welcome Block
===========================================================
*/

.welcomejumbo {
	background: url('../img/main.jpg') no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: 0 -15em;
	z-index: -1;
	color: white;
	text-shadow: black  0.1em 0.1em 10px;
	// box-shadow: black 0em 0em 10px inset;
	@include box-shadow-top-down();
	// margin-top: -100px;
}

.welcometext {
	padding-top: 12em;
}

/*
===========================================================
	Nature Mask
===========================================================
*/

.nature-mask {
	background: url('../img/nature-mask.jpg') no-repeat center center;
	background-attachment: fixed;
	background-position: 0 0;
	z-index: -1;
	color: white;
	text-shadow: black  0.1em 0.1em 10px;
	// box-shadow: black 0em 0em 10px inset;
	@include box-shadow-top-down();
	// margin-top: -100px;
}



/*
===========================================================
	Navbar
===========================================================
*/

.navbar{
	background-color: white;
	background-image: none;

	@include transition(all, 0.5s, ease);

	.navbar-nav a, a{
		@include transition(all, 0.5s, ease);
		color: white;

		&:hover{
			background-color: $webtheme-tran !important;
			color: white;
		}

		&:focus{
			background-color: $transparent;
		}
		
		font-size: 1.2em;
	}


	a{
		@include transition(all, 0.5s, ease);
		font-size: 1.5em;
	}

	img {
		@include transition(all, 0.5s, ease);
		height: 150%;
	}
}
.active 
{
	background-color: $webtheme-tran !important;
	color: white;
}

.highlight-nav {
	background-color: white;
	box-shadow: 0px 0px 5px #888;
	background-image: none;
	a {
		@include transition(all, 0.5s, ease);
		// font-size: 1.2em;
		// color: white !important;
	}
	.navbar-nav a {
		@include transition(all, 0.5s, ease);
		// font-size: 1em;
	}

	img {
		// height: 100%;
	}
}

@media (max-width: 767px) {
  .navbar-nav {
    background-color: $tran-black;
    a{
    	color: white !important;
    }
  }
}

.dropdown-area {
	width: 20em;
	padding: 0.5em 1em 0.5em;
	color: black;
	a {
		color: $webtheme !important;
	}
}


/*
===========================================================
	Mid Jumbotron
===========================================================
*/

.jumbotron{
	background-color: rgba(255, 255, 255, 0);
}

.midjumbo {
	background: url('../img/60.jpg') no-repeat center center;
	background-attachment: fixed;
	background-position: 0 0;
	z-index: -1;
	color: white;
	text-shadow: black  0.1em 0.1em 10px;
	// box-shadow: black 0em 0em 10px -2px inset;
	margin-top: 50px;

	@include box-shadow-top-down();
	// @include blur(5px, 0.99);
}

.jumbotext {

	.title {
		font-size: 3.5em;
		margin-top: 70px;
	}

	height: 100%;
	width: 100%;
	text-align: center;
}

/*
===========================================================
	Style for AlertBox
===========================================================
*/

.alertSuccess{
	// height: 2.5em;
	font-size: 1.5em;
	line-height: 2em;
	vertical-align: middle;
	background-color: $green;
	border-bottom: 0.3em solid darken($green, 10%);
	@include border-radius(5px);
	padding: 0.2em 1em 0.2em;
	margin-top: 1em;
	margin-bottom: 1em;
	text-shadow: 0px 2px 0px darken($green, 10%);
}

.alertFailed{
	@extend .alertSuccess;
	background-color: $red;
	border-bottom: 0.3em solid darken($red, 10%);
	color: white;
	text-shadow: 0px 2px 0px darken($red, 10%);

}


/*
===========================================================
	Footer
===========================================================
*/

.social-icon {
	@extend .feature-icon;
	font-size: 2em;
	// line-height: 1.8em;
	position: relative;
	background-color: white;
	box-shadow: 0px 0px 5px #888;
	color: $text-dark;
	z-index: 20;
	top: -1.5em;
	
		
}

.fa-facebook:hover{
	background-color: #3b5998;
	color: white;
}

.fa-twitter:hover{
	background-color: #00ACED;
	color: white;
}

.fa-youtube-play:hover{
	background-color: #bb0000;
	color: white;
}

/*
===========================================================
	Style for Angular 
===========================================================
*/

// Fade animation for Angular

.ng-enter {
	transition: all 0.5s ease;
  	opacity: 0;
}

.ng-enter.ng-enter-active {
  	opacity: 1;
}

.ng-leave {
	transition: all 0.5s ease;
  	opacity: 1;
}

.ng-leave.ng-leave-active {
  opacity: 0;
}

