	@import url('https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=latin-ext');


	#playground-container {
		height: 500px;
		/*overflow: hidden !important;*/

	}
	.main{margin-top:70px; 
		-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		padding:0px;
		/*background:#0f1d41;*/
		background:rgba(15, 29, 65, 0.52);

		/*background:#2196f3;*/
	}
	.orange{
		/*margin-top:39px;*/ 
		-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		padding: 22px 0px 00px 0px;
		/*background:#fc6719;*/
		background: rgba(252, 103, 25, 0.87);
		/*background:#2196f3;*/
		position: static;
	}

	.logo{
		text-align: center;
		/*padding-top: 20px;*/
		/*margin-bottom: 40px;*/
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;

	}
	.spin{
		text-align: center;
		
		-webkit-transform: translate(0, 0);
		transform: translate(0, 0);
		-webkit-transition: all 0.5s;
		transition: all 0.5s;


	}

	.fb:focus, .fb:hover{color:FFF !important;}
	body{
		font-family: 'Raleway', sans-serif;
		background: url(../img/bg3.jpg) no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		/*overflow: hidden;*/
	}
	.sucess-bg{
		font-family: 'Raleway', sans-serif;
		background: url(../img/bgsuc.jpg) no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		/*overflow: hidden;*/
	}

	.back-bg{
		font-family: 'Raleway', sans-serif;
		background: url(../img/bg-back.png) no-repeat center center fixed; 
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
		background-size: cover;
		/*overflow: hidden;*/
		
	}

	.left-side{
		padding:0px 0px 0px;

		background-size:cover;
	}
	.left-side h3{
		font-size: 30px;
		font-weight: 900;
		color:#FFF;
		padding: 50px 10px 00px 26px;
	}
	
	.left-side p{
		font-weight:600;
		font-size: 14px;
		color:#FFF;
		/*padding:10px 10px 10px 26px;*/
	}

	.input-lg {
		height: 38px;

	}
	select.input-lg {
		height: 38px;
		line-height: 46px;
	}

	a {
		color: #fff;
		text-decoration: none;
	}
	a:hover {
		color: #fc6719;
		text-decoration: none;
	}

	
	.fb{background: #2d6bb7;
		color: #FFF;
		padding: 10px 15px;
		border-radius: 18px;
		font-size: 12px;
		font-weight: 600;
		margin-right: 15px;
		margin-left:26px;-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
		box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);}
		.tw{background: #20c1ed;
			color: #FFF;
			padding: 10px 15px;
			border-radius: 18px;
			font-size: 12px;
			font-weight: 600;
			margin-right: 15px;-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
			-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
			box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);}

			.right-side{
				padding:0px 0px 0px;
				/*	background:#FFF;*/
				background-size:cover;
				min-height:514px;
			}
			.right-side h3{
				font-size: 24px;
				font-weight: 700;
				color:#fff;
				padding: 0px 10px 0px 50px;
			}
			.right-side p{
				font-weight:600;
				color:#fff;
				padding:10px 50px 15px 50px;
			}
			.form{
				padding: 0px 50px 10px 50px;}
			// .form-control{box-shadow: none !important;
			// 	/*border-radius: 0px !important;*/
			// 	border-bottom: 1px solid #2196f3 !important;
			// 	color: #888;
			// 	border-top: 1px !important;
			// 	border-left: none !important;
			// 	border-right: none !important;}
			// 	.btn-deep-purple {
			// 		background: #2196f3;
			// 		/*border-radius: 18px;*/
			// 		/*padding: 5px 19px;*/
			// 		color: #FFF;
			// 		font-weight: 600;
			// 		float: right;
			// 		-webkit-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
			// 		-moz-box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
			// 		box-shadow: 0px 0px 14px 0px rgba(0,0,0,0.24);
			// 	}

			.right-side h3 .tetel {
				font-size: 30px;
				font-weight: 700;
				color: #fff;
				padding: 50px 10px 0px 0px;
			}


			.carousel {
				margin-bottom: 0;
				padding: 0 40px 30px 40px;
			}
			/* The controlsy */
			.carousel-control {
				left: -12px;
				height: 40px;
				width: 40px;
				background: none repeat scroll 0 0 #222222;
				border: 4px solid #FFFFFF;
				border-radius: 23px 23px 23px 23px;
				margin-top: 90px;
			}
			.carousel-control.right {
				right: -12px;
			}
			/* The indicators */
			.carousel-indicators {
				right: 50%;
				top: auto;
				bottom: -10px;
				margin-right: -19px;
			}
			/* The colour of the indicators */
			.carousel-indicators li {
				background: #cecece;
			}
			.carousel-indicators .active {
				background: #428bca;
			}







			/* Style Select Field */
			select {
				font-family: inherit;
				background-color: transparent;
				width: 100%;
				padding: 4px;
				font-size: 16px;
				/*margin-top: 24px;*/
				margin-bottom: 24px;
				border-bottom: 1px solid #2196f3 !important;

					// color: unquote("rgba("0,0,0", 0.26)") !default;
					border: none;
					// border-bottom: 1px solid unquote("rgba("0,0,0", 0.12)") !default;
				}

				/* Remove focus */
				select:focus {
					outline: none}

					/* Hide label */
					.mdl-selectfield label {display: none;}
					/* Use custom arrow */
					.mdl-selectfield select {appearance: none}
					.mdl-selectfield {
						font-family: 'Roboto','Helvetica','Arial',sans-serif;
						position: relative;
						&:after {
							position: absolute;
							top: 0.75em;
							right: 0.5em;
							/* Styling the down arrow */
							width: 0;
							height: 0;
							padding: 0;
							content: '';
							border-left: .25em solid transparent;
							border-right: .25em solid transparent;
							// border-top: .375em solid unquote("rgba("0,0,0", 0.12)") !default;
							pointer-events: none;
						}
					}




/* ==========================================================================
   09. Services
   ========================================================================== */
   .services {
   	text-align: center;
   	padding: 0 20px;
   	position: relative;
   }
   .services img {
   	margin-bottom: -5px;
   }
   .services p {
   	margin-bottom: 0;
   }
   .services .process {
   	position: absolute;
   	top: 50%;
   	right: -30px;
   	font-size: 30px;
   	line-height: 28px;
   	letter-spacing: 0;
   	margin-top: -15px;
   }

   .h3, h3 {

   	color: #FFF;
   	font-size: 14px;
   }
   @media all and (max-width: 768px) {
   	.services .process {
   		position: relative;
   		top: 0;
   		right: 0;
   		margin: 24px 0;
   		-webkit-transform: rotate(90deg);
   		-ms-transform: rotate(90deg);
   		-moz-transform: rotate(90deg);
   		-o-transform: rotate(90deg);
   		transform: rotate(90deg);
   	}
   }




   /* carousel */
   #quote-carousel 
   {
   	padding: 0 10px 30px 10px;
   	margin-top: 30px 0px 0px;
   }

   /* Control buttons  */
   #quote-carousel .carousel-control
   {
   	background: none;
   	color: #222;
   	font-size: 2.3em;
   	text-shadow: none;
   	margin-top: 30px;
   }
   /* Previous button  */
   #quote-carousel .carousel-control.left 
   {
   	left: -12px;
   }
   /* Next button  */
   #quote-carousel .carousel-control.right 
   {
   	right: -12px !important;
   }
   /* Changes the position of the indicators */
   #quote-carousel .carousel-indicators 
   {
   	right: 50%;
   	top: auto;
   	bottom: 0px;
   	margin-right: -19px;
   }
   /* Changes the color of the indicators */
   #quote-carousel .carousel-indicators li 
   {
   	background: #c0c0c0;
   }
   #quote-carousel .carousel-indicators .active 
   {
   	background: #333333;
   }
   #quote-carousel img
   {
   	width: 250px;
   	height: 100px
   }
   /* End carousel */


   .item blockquote {
   	border-left: none; 
   	margin: 0;
   }

   .item blockquote img {
   	margin-bottom: 10px;
   }


   .white {
   	color: #FFF;
   }


/**
  MEDIA QUERIES
  */

  /* Small devices (tablets, 768px and up) */
  @media (min-width: 768px) { 
  	#quote-carousel 
  	{
  		margin-bottom: 0;
  		padding: 0 40px 30px 40px;
  		margin-top: 30px;
  	}

  }

  /* Small devices (tablets, up to 768px) */
  @media (max-width: 768px) { 

  	/* Make the indicators larger for easier clicking with fingers/thumb on mobile */

  	#quote-carousel .carousel-indicators {
  		bottom: -20px !important;  
  	}
  	#quote-carousel .carousel-indicators li {
  		display: inline-block;
  		margin: 0px 5px;
  		width: 15px;
  		height: 15px;
  	}
  	#quote-carousel .carousel-indicators li.active {
  		margin: 0px 5px;
  		width: 20px;
  		height: 20px;
  	}
  }




  .navbar {background-color: #0f1d40 !important; border-color: transparent; border-radius: 0%;
  	box-shadow: 0 0 6px 3px rgba(0,0,0,.35); }
  	/** Default navbar **/
  	.navbar-default .navbar-nav>li>a { padding-top: 25px; padding-bottom: 25px; min-height: 69px; color: #A4A4A4;}
  	.navbar-default .navbar-nav > li > a:hover {color: #DDBE42;}
  	.navbar-default .navbar-nav > .active > a,
  	.navbar-default .navbar-nav > .active > a:hover,
  	.navbar-default .navbar-nav > .active > a:focus {
  		background-color: transparent;
  		color: #DDBE42;
  	}
  	.navbar-default .navbar-nav > .open > a,
  	.navbar-default .navbar-nav > .open > a:hover,
  	.navbar-default .navbar-nav > .open > a:focus {
  		background-color: transparent;
  		color: #DDBE42;
  	}
  	.navbar-default .navbar-nav .open .dropdown-menu {
  		background-color: #060606 !important;
  		box-shadow: 0 4px 2px -2px rgba(0,0,0,0.4);
  	}
  	.navbar-default .navbar-nav .open .dropdown-menu > li > a{
  		color: #585858 !important;
  		padding: 12px 12px 12px 12px !important;
  	}
  	.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  	.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  		color: #DDBE42 !important;
  		background-color: transparent !important;
  	}
  	.navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  	.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  	.navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  		color: #DDBE42 !important;
  		background-color: transparent !important;
  	}
  	.navbar-default .navbar-toggle {
  		border-color: transparent;
  	}
  	.navbar-default .navbar-toggle:hover,
  	.navbar-default .navbar-toggle:focus {
  		border-color: transparent;
  		background-color: transparent;
  	}
  	.navbar-default .navbar-collapse,
  	.navbar-default .navbar-form {
  		border-color: transparent;
  	}
  	.navbar-form { padding-top: 10px !important;}
  	.navbar-text { margin-top: 25px; }
  	.navbar-default .navbar-text { color: #CBAF3B;}
  	.navbar-default .navbar-brand {
  		font-size: 21px;
  		color: #CBAF3B;
  		margin-top: 10px;
  	}
  	.navbar-default .navbar-brand:hover,
  	.navbar-default .navbar-brand:focus {
  		color: #DDBE42;
  	}

  	.navbar-default .navbar-nav>li>p {
  		padding-top: 25px;
  		padding-bottom: 25px;
  		min-height: 69px;
  		color: #FFF;
  		font-weight: 700;
  	}


  	#sueprAdmin > a {
  		background-color: white;
  		color: #0f1d40 !important;
  		margin: 0 10px;
  		padding-left: 10px;
  		padding-right: 10px;
  		font-weight: bold;
  	}


