
/*---------------- FONT IMPORT FROM GOOGLE FONTS ---------------*/
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,700);
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);

/*----------------------------------------------------------------------------------------
										COMMON STYLES
-----------------------------------------------------------------------------------------*/




body {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	font-weight: 300;
	text-align: left;
	color: #444;
	line-height: 1.6;
}

a,
a:hover,
a:active,
a:focus {
	outline: 0;
	text-decoration: none;
	color: #444;
}

h1 { 
	font-size: 45px;
	margin:0 0 50px 0; 
}

h2 { font-size: 72px; }

h3 {font-size: 24px;}

h4 {
	font-size: 27px;
	margin: 0 0 30px;
}

h1,
h2,
h3,
h4 {
	font-family: 'Montserrat', sans-serif;
	line-height: 1.2;
	font-weight: 700;
}

h1 b{
	color: #006699;
	display:block;
	font-size:35px;
}

ul {
	margin: 0;
	padding: 0px;
	list-style: none;
}


.container {
	background: #fff;
	padding: 100px 0;
	position: relative;
	z-index: 2;
}
form{
	border-top: 1px solid #eee;
}
.form-control {
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid #eee;
	height: auto;
	padding: 9px 95px 9px 0;
	font-size: inherit;
	box-shadow: none;
	line-height: 30px;
	margin: 0;
	box-shadow: none;
}


textarea.form-control {
	resize: none;
	border-bottom:none;
}

.form-group input.form-control:focus { border-bottom: 1px solid #eee; }

.form-group input.error,
.form-group textarea.error,
.form-group input.error:focus,
.form-group textarea.error:focus { border-bottom: 1px solid #e95454; }

.form-group {
	margin: 0;
	position: relative;
}

.form-group input,
.input-group input,
.form-group textarea { color: #222; }

.input-group input:focus,
.form-group input:focus,
.input-group textarea:focus,
.form-group textarea:focus {
	box-shadow: none;
	transition: none;
	border: 0;
	outline: 0;
}

.form-group label.error {
	position: absolute;
	display: inline-block;
	top: 20px;
	right: 0;
	width: 100px;
	color: #dd3838;
	font-size: 14px;
	text-align: right;
	line-height: 1.2;
}

.btn:focus,
.btn:active:focus,
.btn.active:focus { outline: 0px auto -webkit-focus-ring-color; }

.btn {
	padding: 10px 30px;
	margin: 0 10px 10px 10px;
	border-radius: 0;
	border: 4px solid #eee;
	background: none;
	color: inherit;
	font-size: inherit;
	font-weight: 700;
	text-transform: uppercase;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
}

.btn.btn-primary{
	padding:10px 44px;
	background: #71c124;
	color: #fff;
	border: 0;
}

.btn.btn-primary:hover,
.btn.btn-primary:focus {
	background: #77d220;
	border: 0;
}


.btn:hover,
.btn:focus { border: 4px solid #ccc; }

form .btn {
	width: 100%;
	margin:0;
}

.terms {
	font-size: 14px;
	color: #aaa;
	padding: 40px 0 0 0;
}


.placeholdersjs { color: #aaa !important; }

@media (max-width: 480px) {
	h1 { font-size: 36px; }

	h2 { font-size: 45px; }

	h3 { font-size: 27px; }

	h4 { font-size: 20px; }
}




/*----------------------------------------------------------------------------------------
									MODAL POPUP STYLES
----------------------------------------------------------------------------------------*/

.modal {
	overflow-y: auto;
	text-align: center;
}

.modal-content {
	padding: 80px 40px;
	box-shadow: none;
	-webkit-box-shadow: none;
	border-radius: 0;
	border: 0;
}

.modal-title { margin: 0; }

.modal-title > i {
	font-size: 96px;
	padding: 0 0 40px 0;
	display: block;
	color: #00a2ff;
}
.modal-title > i.icon-caution{
	color:#F90;
}

.modal-title b{
	display:block;
	color:#aaa;
	margin-top:20px;
	font-size:0.8em;
}

.modal-open { overflow: auto; }

.modal-content .close {
	position: absolute;
	top: 10px;
	right: 15px;
}

.close {
	font-family: inherit;
	font-size: 32px;
	text-shadow: none;
}

.modal-backdrop{ z-index:10 }

@media (min-width: 768px) {
	.modal-dialog { margin: 100px auto; }
}




/*----------------------------------------------------------------------------------------
									INTRO STYLES
----------------------------------------------------------------------------------------*/

#intro {
	padding: 0;
	position: fixed;
	z-index: 0;
	top: 0;
	left: 0;
}

#intro .logo {
	position: absolute;
	z-index: 100;
	display: block;
	top:66px;
	left: 100px;
}

#intro .navbar {
	position: absolute;
	z-index: 100;
	padding: 0;
	width: 100%;
}

.menu-btn,
.menu-btn.collapsed:hover {
	position: absolute;
	top: 80px;
	right: 80px;
	margin: 0;
	padding: 20px;
	background: #fff;
	border-radius: 0;
}

.menu-btn.collapsed {
	background: none;
	color: #fff;
}

.menu-btn .icon-bar,
.menu-btn.collapsed:hover .icon-bar {
	display: block;
	width: 30px;
	height: 5px;
	margin: 0 0 7px 0;
	background: #444;
}

.menu-btn.collapsed .icon-bar { background: #fff; }

.menu-btn .icon-bar:last-child,
.menu-btn.collapsed .icon-bar:last-child { margin: 0; }

#menu-list {
	position: absolute;
	right: 80px;
	top: 149px;
	padding: 0;
	background: #fff;
	border-top: 0;
}

#menu-list .nav li { display: block; }

#menu-list .nav li a {
	display: block;
	padding: 13px 50px;
	border-top: 1px solid #eee;
	font-weight: 700;
}

#menu-list .nav li a:hover { background: #f8f8f8; }

#intro #slides img { opacity: 0.2; }

#intro h2.slogan {
	position: absolute;
	z-index:1;
	-webkit-backface-visibility: hidden;
	display: block;
	left: 0;
	bottom: 0;
	padding: 0 50px 80px 50px;
	color: #fff;
	font-size:55px;
	line-height:1.2;
	text-transform:capitalize;
}

#intro h2.slogan small {
	font-size: 14px;
	
	color: #fff;
	display: block;
	margin-top: 20px;
	line-height: 1.8;
}

.pink-bg { background-color: #ff0090 }
.blue-bg { background-color: #00a2ff }
.purple-bg { background-color: #af00e8 }
.orange-bg { background-color: #ff9c00 }
.green-bg { background-color: #35d025 }
.red-bg { background-color: #df0000 }
.brown-bg { background-color: #4a2d1f }
.black-bg { background-color: #000 }
.yellow-bg { background-color: #f1c40f }
.darkblue-bg { background-color:#3498db }
.darkgreen-bg { background-color: #f1c40f }


.slides-pagination {
	position: absolute;
	display: table;
	z-index: 3;
	bottom: 0;
	text-align: center;
	width: 100%;
}

.slides-pagination a {
	height: 4px;
	line-height: 0;
	display: table-cell;
	overflow: hidden;
	text-indent: -100%;
	background: #fff;
	opacity: 0.25;
	transition: all 0.4s ease-in-out;
	-webkit-transition: all 0.4s ease-in-out;
	-moz-transition: all 0.4s ease-in-out;
}

.slides-pagination a.current { opacity: 1; }

@media (max-width: 1170px) {
	#intro { position: relative; }
}

@media (max-width: 768px) {

	#intro .logo {
		top: 30px;
		left: 30px;
	}

	#intro h2.slogan { padding: 0 30px 30px 30px; font-size:40px; }

	#intro h2.slogan small { font-size: 14px; }

	.menu-btn,
	.menu-btn.collapsed:hover {
		top: 30px;
		right: 30px;
	}

	#menu-list {
		right: 30px;
		top: 99px;
	}
}




/*----------------------------------------------------------------------------------------
									CONTENT STYLES
----------------------------------------------------------------------------------------*/

#content { padding: 38px 35px; }

#content.main-page{
	padding:38px 35px;
	text-align:center;
}

#content.main-page > form { margin-bottom: 0px }

#content > p,
#content > blockquote,
#content > div,
#content > img,
#content > ul,
#content > form {margin-bottom: 50px;font-size: 15px;text-align: justify;letter-spacing: 0.5px;}

#content h3 {
	margin: 0 0 20px 0;
	padding: 0;
}

.main-page .form-control {font-weight: 500; font-size:14px;}

.main-page form .btn {
	font-size: 1em;
}

blockquote {
	border: 2px solid #eee;
	font-weight: 700;
	padding: 75px;
	margin: 0 0 50px 0;
}

blockquote small {
	font-weight: 300;
	margin: 40px 0 -15px 0;
	color: #888;
}

#content #canvas-map {
	width: 100%;
	height: 350px;
	margin: 0;
}

.contact-list {
	background: #f8f8f8;
	padding: 40px 40px 20px 40px;
}


.contact-list li { padding: 0 0 20px 0; }

.icon {
	margin: 0 20px 0 0;
	color: #aaa;
}

@media (max-width: 768px) {

	#content{ padding: 50px 30px 30px 30px; }
	
	#content h3 {margin: 0 0 30px 0;}
	
	#content.main-page { padding: 80px 30px; }
	
	.contact-list li { text-align: center; }

	.icon {
		margin: 10px 0;
		display: block;
	}

	blockquote { padding: 30px; }
	blockquote small {margin: 30px 0 0px 0;}
}



/*----------------------------------------------------------------------------------------
									FOOTER STYLES
----------------------------------------------------------------------------------------*/

footer {
	position: absolute;
	height: 50px;
	overflow: hidden;
	background: #f8f8f8;
	bottom: 0;
	left: 0;
	right: 0;
}

footer p {
	float: left;
	margin: 0;
	line-height: 50px;
	font-size: 14px;
	padding: 0 20px;
}

footer .soc-nav { float: right; }

footer .soc-nav li {
	display: block;
	float: left;
}

footer .soc-nav li a {
	line-height: 50px;
	padding: 0 20px;
	display: block;
	color: #fff;
}

footer .soc-nav li a:before {
	transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	display: block;
}

footer .soc-nav li a:hover:before {
	transform: translateY(-2px);
	-webkit-transform: translateY(-2px);
	-moz-transform: translateY(-2px);
}

.soc-nav li a.icon-googleplus,
.soc-nav li a.icon-googleplus2 { background: #dd4b39; }

.soc-nav li a.icon-dribbble,
.soc-nav li a.icon-dribbble2,
.soc-nav li a.icon-social-dribbble { background: #ea4c89; }

.soc-nav li a.icon-facebook,
.soc-nav li a.icon-facebook2 { background: #4066b5; }

.soc-nav li a.icon-twitter,
.soc-nav li a.icon-twitter2 { background: #00d2ff; }

.soc-nav li a.icon-instagram { background: #517fa4; }

.soc-nav li a.icon-pinterest { background: #cb2027; }

.soc-nav li a.icon-linkedin,
.soc-nav li a.icon-linkedin2 { background: #007bb6; }

.soc-nav li a.icon-flickr { background: #ff0084; }

.soc-nav li a.icon-youtube,
.soc-nav li a.icon-social-youtube { background: #bb0000; }

.soc_nav li a.icon-vimeo { background: #aad450; }

.soc-nav li a.icon-github { background: #333; }

.soc-nav li a.icon-tumblr,
.soc-nav li a.icon-tumblr2,
.soc-nav li a.icon-social-tumblr { background: #32506d; }

.soc-nav li a.icon-feed,
.soc-nav li a.icon-feed2 { background: #F90; }



/*----------------------------------------------------------------------------------------
									RETINA STYLES
----------------------------------------------------------------------------------------*/

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	#intro .logo img { content: url("../images/logo1.png"); width:225px;}
}
