@import url(bootstrap.min.css);
@import url(font-awesome.min.css);
@import url(slick.css);

/* @Font-Faces
====================================================================*/
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-regular.woff') format('woff');    
}
@font-face {
    font-family: 'Roboto';
    src: url('../fonts/roboto-medium.woff') format('woff');    
    font-weight: 500;
}
@font-face {
    font-family: 'Roboto Condensed';
    src: url('../fonts/robotocondensed-regular.woff') format('woff');    
}
/* Global
====================================================================*/
::selection { 
	color: #fff; 
	background:#4a83c2;
}
::-moz-selection { 
	color: #fff; 
	background:#4a83c2;
}
::-ms-selection { 
	color: #fff; 
	background:#4a83c2;
}
html, body { 
	height: 100%;	
}
body { 
	font-size: 14px; 
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	color: #86939b;
	text-rendering: optimizeLegibility !important; 
	-webkit-font-smoothing: antialiased !important;
	-webkit-overflow-scrolling: touch;
}
.page {
	background-color: #eff4fa;
}
h1, h2, h3, h4, h5, h6 	{ 
	font-family: 'Roboto Condensed', sans-serif;
	color: #4f4949;
}
h1 {
    font-size: 50px;
}
h2 {
    font-size: 36px;
}
h3 {
    font-size: 28px;
}
h4 {
    font-size: 16px;
	line-height: 1.5
}
p {
	line-height: 1.5;
}
a  { 
	color:#3679bb; 
	font-family: "Roboto Condensed";
	transition:all 0.2s ease; 
	-webkit-transition:all 0.2s ease; 
	-moz-transition:all 0.2s ease; 
	-ms-transition:all 0.2s ease; 
	outline: 0;
}
a[disabled='disabled'] { 
	pointer-events:none; 
	cursor: default;
}
a:hover, a:focus { 
	color: #63c4fb;
	text-decoration: none;
}
a:focus { 
	outline: 0
}
img { 
	max-width: 100%; 
}
button { 
	outline: 0;
}
ol, ul { 
	list-style-position: inside;
}
svg:not(:root) {
 overflow:visible;
}

/* Header
====================================================================*/
.navbar {
	margin: 0;
    border: 0;
    border-radius: 0;
    background: #4a83c2;
    padding: 40px 50px 0;
}
.navbar-collapse {
	margin: 0 -50px;
    clear: both;
	padding: 0 50px;;
	border: 0;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#feffff+0,ddf1f9+99 */
	background: rgb(254,255,255); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(254,255,255,1) 0%, rgba(221,241,249,1) 99%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 99%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(254,255,255,1) 0%,rgba(221,241,249,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#ddf1f9',GradientType=0 ); /* IE6-9 */

}
.navbar-header {
	margin-top: 11px;
}
.navbar-toggle {
    color: #fff;
    font-size: 30px;
    margin: 0;
    padding: 0;
    text-align: center;
    width: 100%;
    border: 0;
    margin-top: 10px;
}
.navbar .navbar-brand {
	padding: 0;
	margin: 0;
	height: auto;
	color: #fff;
	font-size: 19px;
}
.navbar-brand > img {
	display: inline-block;
    vertical-align: baseline;
    margin-right: 10px;
}
.contact_details {
	float: right;
    color: #fff;
    font-size: 16px;
    width: 365px;
    text-align: right;
	margin-bottom: 30px;
}
.contact_details span {
	font-family: "Roboto Condensed";
	font-size: 36px;
	display: block;
}
.contact_details span i {
	font-size: 33px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.navbar-nav {
	margin: 0;
    float: none;
    text-align: center;
}
.navbar-nav > li {
    float: left;
}
.navbar-nav > li > a {
    padding: 20px 30px;;
    color: #3679bb;
    font-size: 21px;
	border-right: 1px solid rgba(121,170,214,.3);
    display: inline-block;
}
.navbar-nav > li:first-child > a {
    border-left: 1px solid rgba(121,170,214,.3);
}
.nav > li > a:hover, 
.nav > li > a:focus,
.nav > li.active > a {
	color: #fff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cc6f1+0,71b8e6+100 */
	background: rgb(124,198,241); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(124,198,241,1) 0%, rgba(113,184,230,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cc6f1', endColorstr='#71b8e6',GradientType=0 ); /* IE6-9 */
}

/* Banner
====================================================================*/
.banner {
	height: 430px;
}
.slick-slide {
	position: relative;
	outline: 0;
	background: #fff;
}
.banner .text {
    position: absolute;
    right: 100px;
    top: 50%;
	z-index: 99;
	width: 300px;
    transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
.banner .text h2 {
	font-size: 50px;
	color: #4f4949;
	margin-top: 0;
}
.banner .text p {
	color: #63c4fb;
	margin: 15px 0;
}
.banner .text a {
	font-size: 19px;
	display: inline-block;
	padding: 13px 40px;
	border-radius: 4px;
	color: #ffffff;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cc6f1+0,71b8e6+100 */
	background: rgb(124,198,241); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(124,198,241,1) 0%, rgba(113,184,230,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cc6f1', endColorstr='#71b8e6',GradientType=0 ); /* IE6-9 */
}
.slick-slider .slick-arrow {
	background: none;
    border: 0;
    position: absolute;
    top: 50%;
	z-index: 9;
    padding: 0;
    transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
}
.slick-slider .slick-arrow.slick-next {
	right: 50px;
}
.slick-slider .slick-arrow.slick-prev {
	left: 50px;
	transform: translateY(-50%) scale(-1,1);
	-webkit-transform: translateY(-50%) scale(-1,1);
	-moz-transform: translateY(-50%) scale(-1,1);
	-ms-transform: translateY(-50%) scale(-1,1);
	-o-transform: translateY(-50%) scale(-1,1);
}
.slick-slider .slick-arrow:before {
	content: "\f105";
	color: #3679bb;
	font-family: "FontAwesome";
	font-size: 48px;
}

/* About
====================================================================*/
.home_block {
	padding: 50px;
}
.about h2 {
	color: #3679bb;
	margin-top: 0;
}
.about h2 + p,
.about h3 + p {
	color: #63c4fb;
	font-size: 16px;
}

.about .col-md-4 a {
	padding: 8px 30px;
	color: #fff;
	border-radius: 4px;
	font-size: 19px;
	display: inline-block;
    margin-top: 20px;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cc6f1+0,71b8e6+100 */
	background: rgb(124,198,241); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(124,198,241,1) 0%, rgba(113,184,230,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cc6f1', endColorstr='#71b8e6',GradientType=0 ); /* IE6-9 */
}
.about .col-md-4:hover a {
	background: #5087c4;
}
.office_hours {
	background: #5087c4;
	padding: 15px;
	border-radius: 4px;
}
.office_hours h2 {
	background: #7ac3ef;
    margin-top: 0;
    color: #fff;
    padding: 15px 0;
	margin: -15px -15px 10px;
	border-radius: 4px 4px 0 0 ;
}
.office_hours h2 i {
	margin-right: 15px;
}
.office_hours p {
	font-weight: 500;
	color: #fff !important;
	margin-bottom: 0;
}
.office_hours p:last-of-type {
	margin-top: 10px;
	font-size: 12px;
	font-weight: normal
}
.testmonial blockquote {
	background: rgba(255,255,255,.5);
    border: 0;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 1.5;
    padding: 15px;
	position: relative
}
.testmonial blockquote:before {
	content: "“";
    font-family: "Times New Roman";
    color: #80cdf9;
    font-size: 128px;
    float: left;
    line-height: normal;
    margin-top: -25px;
    margin-right: 15px;
}
.testmonial blockquote:after {
	content: "";
    background: url(../images/blockqoute_arrow.png) no-repeat center;
    width: 16px;
    height: 16px;
    position: absolute;
    bottom: -16px;
    left: 15px;
}
.testmonial h4 {
	color: #3679bb;
	font-weight: 500;
	margin-top: 20px;
}

/* Services
====================================================================*/
.services {
	padding-top: 0;
}
.services h2 {
	margin-bottom: 30px;
}
.services h4 {
	margin: 0;
	display: table-cell;
	vertical-align: middle
}
.services .link {
	display: table;
	margin-bottom: 10px;
}
.services span {
	font-size: 28px;
    color: #fff;
    width: 64px;
    height: 64px;
    float: left;
    border-radius: 50%;
    text-align: center;
    padding-top: 12px;
    margin-right: 15px;
	transition:all .5s;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cc6f1+0,71b8e6+100 */
	background: rgb(124,198,241); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(124,198,241,1) 0%, rgba(113,184,230,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cc6f1', endColorstr='#71b8e6',GradientType=0 ); /* IE6-9 */
}
.services p {
	margin-bottom: 0;
	clear: both;
}
.services .service {
	border-bottom: 1px solid #c6d1e3;
	margin-bottom: 30px;
	padding-bottom: 30px;
}
.services .col-md-4:hover span {
	background: #5087c4
}
.services .col-md-4:nth-child(1n+4) .service {
	border-bottom: 0
}

/* Footer
====================================================================*/
footer {
	background-color: #4a83c2;
	padding: 50px;
}
.social_media {
	float: right;
}
.social_media ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.social_media ul li {
	display: inline-block;
	margin-left: 10px;
}
.social_media ul li a {
	font-size: 48px;
	color: #fff;
	opacity: .5
}
.social_media ul li a:hover {
	opacity: 1
}
footer nav {
	display: inline-block;
}
footer nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
footer nav ul li {
	display: inline-block;
    margin-right: 20px;
}
footer nav ul li a {
	font-size: 19px;
	color: #fff;
}
footer .copyright {
	color: #fff;
	margin-top: 15px;
	margin-bottom: 0;
}

/* Buttons
====================================================================*/
.btn {
	border: 0;
	font-family: "Roboto Condensed";
	font-size: 19px;
	padding: 10px 30px;
}
.btn-primary {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7cc6f1+0,71b8e6+100 */
	background: rgb(124,198,241); /* Old browsers */
	background: -moz-linear-gradient(top,  rgba(124,198,241,1) 0%, rgba(113,184,230,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom,  rgba(124,198,241,1) 0%,rgba(113,184,230,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7cc6f1', endColorstr='#71b8e6',GradientType=0 ); /* IE6-9 */
}

/* Forms
====================================================================*/
.form-control {
	box-shadow: none;
    border-radius: 0;
    height: 50px;
    background: #f6f8fb;
    border-color: #cbdae9;
}
textarea.form-control {
	height: 150px;
}

/* Main Content
====================================================================*/
.main_content {
	padding: 50px
}
.main_content aside,
.main_content main {
	padding: 0;
}
.main_content aside {
	padding-left: 30px;
}
main {
	padding: 50px;
}
main .services h2 {
	margin-bottom: 30px;
	margin-top: 0;
}
main .services p {
	margin-bottom: 15px;
}
main .services .service {
	border-bottom: 0;
	margin-bottom: 0;
	padding-bottom: 0;
}
.page-title {
	margin-top: 50px;
}
.breadcrumb {
    background: none;
    border-top: 1px solid #c8d8e8;
    border-bottom: 1px solid #c8d8e8;
    padding: 15px 0;
    margin-bottom: 0;
}
.breadcrumb li {
    color: #3679bb;
    font-size: 18px;
}
.breadcrumb li.active,
.breadcrumb li.active:before {
    color: #3679bb;
}
.breadcrumb li a {
	color: #3679bb;
}
.categories a {
	display: inline-block;
    margin-right: 10px;	
}
article {
	margin-top: 50px
}
article h2 {
	margin-bottom: 50px;
	margin-top: 0;
}
article figure {
    float: left;
    margin-right: 20px;
}
figure img {
	width: 100%
}
article > p {
	margin: 20px 0
}
.list {
	list-style: none;
	padding: 0;
	margin: 0;
}
.list li {
	display: block;
	margin-bottom: 10px;
}
.list li:before {
	content: "";
	width: 17px;
	height: 17px;
	float: left;
	background: url(../images/list_arrow.png) no-repeat center;
	vertical-align: middle;
	margin-right: 10px;
}
.our_team {
	margin-top: 50px;
}
.our_team h2 {
	margin-bottom: 50px;
	margin-top: 0;
}
.our_team h3 {
	font-size: 18px;
	color: #3679bb;
	margin-bottom: 5px;
}
article.vertical {
	background: #fff;
	padding: 20px;
	border: 1px solid #cddeef
}
article.vertical figure {
    margin: -20px -20px 30px;
    float: none;
}
article.vertical h3 {
	font-size: 18px;
}
article.vertical h3 a {
	color: #3679bb;
}
article.vertical p {
	margin: 0;
}
article.hover_effect figure {
	position: relative;
}
article.hover_effect figure:before {
    content: "\f00e";
    font-family: "FontAwesome";
    position: absolute;
    left: 50%;
    top: 50%;
    color: #fff;
    font-size: 30px;
    background-color: rgba(0,0,0,.5);
    width: 80px;
    height: 80px;
    text-align: center;
    border-radius: 50%;
    padding-top: 20px;
    transform: translate(-50%,-50%) scale(0);
    -webkit-transform: translate(-50%,-50%) scale(0);
    -moz-transform: translate(-50%,-50%) scale(0);
    -ms-transform: translate(-50%,-50%) scale(0);
    -o-transform: translate(-50%,-50%) scale(0);
    transition:all .2s;
	-webkit-transition:all .2s;
	-moz-transition:all .2s;
	-ms-transition:all .2s;
	-o-transition:all .2s;
}
article.hover_effect figure:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border: 10px solid transparent;
    transition:all .5s;
	-webkit-transition:all .5s;
	-moz-transition:all .5s;
	-ms-transition:all .5s;
	-o-transition:all .5s;
}
article.hover_effect:hover figure:after {
	border-color: #cddeef
}
article.hover_effect:hover figure:before {
	transform: translate(-50%,-50%) scale(1);
    -webkit-transform: translate(-50%,-50%) scale(1);
    -moz-transform: translate(-50%,-50%) scale(1);
    -ms-transform: translate(-50%,-50%) scale(1);
    -o-transform: translate(-50%,-50%) scale(1);
}
.single_post figure  {
	margin: 30px 0;
}
.single_post p {
	margin: 30px 0
}
.post_details {
    border-top: 1px solid #d0ddeb;
    border-bottom: 1px solid #d0ddeb;
    padding: 15px 0
}
.post_details i {
	color: #3679bb;
	font-size: 12px;
	margin-right: 5px;
}
.post_details > * {
	margin-right: 20px;
}
.post_details > *:last-child {
	float: right;
	margin-right: 0;
}
.written_by {
	padding: 20px;
	margin: 30px 0 50px;
	border: 1px solid #d0ddeb;
}
.written_by .details {
	display: flex
}
.written_by h3 {
	color: #3679bb;
	font-size: 18px;
	margin-top: 0;
	margin-bottom: 20px;
	font-family: Arial
}
.user_image figure {
    margin: 0;
    float: left;
    margin-right: 20px;
    width: 80px;
    height: 80px;
}
.written_by p {
	margin: 0;
}
.user_details p:first-child {
	margin-bottom: 20px
}
.related_posts h2 {
	margin-bottom: 30px;
	margin-top: 0;
}
.related_posts a {
	font-family: "Roboto", sans-serif;
}
.related_posts figure {
	margin-bottom: 20px;
}
.related_posts figure img {
	width: 100%
}
.responses {
	margin-top: 50px;
}
.response {
	padding: 20px;
	border: 1px solid #d0ddeb;
	margin-bottom: 20px
}
.response > div {
	display: flex;
} 
.responses h2 {
	margin-bottom: 30px;
	margin-top: 0;
}
.response figure {
	width: 80px;
	height: 80px;
	margin-right: 20px;
}
.response > span {
	margin-right: 15px;
	margin-top: 15px
}
.response + .response {
	margin-left: 20px;
}
.response:last-of-type {
	margin-left: 40px;
}
.leave_replay {
	margin-top: 50px;
}
.leave_replay h2 {
	margin-bottom: 30px;
	margin-top: 0;
}
.main_content aside > div {
	margin-bottom: 50px;
}
.main_content aside h2 {
	text-align: center;
	margin-bottom: 30px;
}
.main_content aside .categories a {
	margin-right: 0;
	display: block;
}
.recent_comments .comment {
	display: flex;
	margin-bottom: 30px;
}
.recent_comments .user_details a:first-of-type{
	font-size: 18px;
}
/* Media Queries
====================================================================*/

@media (min-width: 1200px){
	.container {
	    width: 1270px;
	}
}
@media (max-width: 1199px){
	.container {
	    width: 100%;
	}
}
@media (max-width: 991px){
	.navbar-header {
	    margin: 0;
    	width: 100%;
    	text-align: center;
    	margin-bottom: 20px;
	}
	.navbar-header .navbar-brand {
		float: none;
	}
	.contact_details {
	    width: 100%;
    	text-align: center;
	}
	.about .col-md-4 {
		text-align: center;
		margin-bottom: 50px;
	}
	.services .col-md-4:nth-child(1n+4) .service {
		border-bottom: 1px solid #c6d1e3;
	}
	.services .col-md-4:nth-child(1n+5) .service {
		border-bottom: 0
	}
	.related_posts .col-sm-6 {
		margin-bottom: 25px
	}
}
@media (max-width: 767px){
	.navbar, footer, .home_block, .main_content {
		padding: 25px;
	}
	.navbar-collapse {
	    margin: 0 -25px -25px;
    	padding: 0;
	}
	.navbar-nav > li {
		width: 20%;
	}
	.navbar-nav > li > a {
		display: block;
		padding: 15px 20px
	}
	.contact_details {
		margin-bottom: 0;
	}
	.services .col-md-4:not(:last-child) .service {
		border-bottom: 1px solid #c6d1e3;
	}
	.slick-slider .slick-arrow:before {
		color: #fff
	}
	.slick-slider .slick-arrow.slick-next {
	    right: 25px;
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		top: inherit;
		bottom: 10px;
	}
	.slick-slider .slick-arrow.slick-prev {
		right: 75px;
		left: inherit;
		transform: scale(-1,1);
		-webkit-transform: scale(-1,1);
		-moz-transform: scale(-1,1);
		-ms-transform: scale(-1,1);
		-o-transform: scale(-1,1);
		top: inherit;
		bottom: 10px;
	}
	.banner .text {
		bottom: 0;
		top: inherit;
		transform: none;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		width: 100%;
		padding: 15px 25px;
		left: 0;
		right: inherit;
		background-color: rgba(0,0,0,.2);
	}
	.banner .text h2 {
		color: #fff;
		font-size: 36px;
		margin-bottom: 0;
	}
	.banner .text p {
		color: #fff;
	}
	article, .page-title {
		margin-top: 25px;
	}
	article h2 {
		margin-bottom: 25px;
	}
	article figure {
		width: 100%;
		margin-bottom: 20px
	}
	.main_content aside {
		margin-top: 50px;
		padding-left: 0;
	}
}
@media (max-width: 600px){
	.navbar-nav > li > a {
		padding: 10px
	}
}
@media (max-width: 479px){
	.navbar-nav > li {
		width: 100%;
	} 
	footer nav {
		display: block;
		width: 100%;
		margin-bottom: 15px
	}
	footer nav ul li {
		margin-right: 10px;
	}
	.social_media {
	    float: right;
	    width: 100%;
	    text-align: center;
	    margin-bottom: 15px;
	}
	.social_media ul li a {
		line-height: .5
	}
	footer .copyright {
	    width: 100%;
		clear: both;
		text-align: center;
		margin-top: 0;
	}
	.related_posts .col-sm-6 {
		width: 100%
	}
	.response {
		margin-left: 0 !important;
	}
}