/*

* Starky Theme

* Created by : Ahmed Essa

* website : www.ahmedessa.net

*/





/* Table of Content

==================================================

	- Css import -

	- Google fonts & font family -

	- General -

	- Typography -

	- parallax -

	- Home Section -

	- About Section -

	- Services Section -

	- Work Section -

	- Team Section -

	- Blog Section -

	- Contact Section -

	- Footer -

	- Blog page -

	- business-work -

	- Media Queries -

	



	

*/





/* - Css import -

================================================== */



@import url("css/preloader.css");

@import url("css/owl.carousel.css");

@import url("css/component.css");

@import url("css/flexslider.css");

@import url("css/animate.css");

@import url("css/team-slider.css");

@import url("css/fxtransparent.css");

@import url("font-awesome/css/font-awesome.min.css");







/* - Google fonts & font family -

================================================== */



@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:400italic,400,700,300);

@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700);

@font-face {

	font-family: "Lovelo-Black";

	src: url("fonts/Lovelo_Black.eot?") format("eot"), url("fonts/Lovelo_Black.woff") format("woff"), url("fonts/Lovelo_Black.ttf") format("truetype"), url("fonts/Lovelo_Black.svg#Lovelo-Black") format("svg");

	font-weight: normal;

	font-style: normal;

}

@font-face {

	font-family: "Aqua Grotesque";

	src: url('fonts/343231202-aqua.eot');

	src: url('fonts/343231202-aqua.eot?#iefix') format('embedded-opentype'),  url('fonts/343231202-aqua.svg#Aqua Grotesque') format('svg'),  url('fonts/343231202-aqua.woff') format('woff'),  url('fonts/343231202-aqua.ttf') format('truetype');

	font-weight: normal;

	font-style: normal;

}

/* - General -

================================================== */



body, html {

	height: 100%;

	width: 100%;

	font-family: 'Roboto Condensed', sans-serif;

	font-size: 12px;

}

a {

	-webkit-transition: all 0.3s;

	-moz-transition: all 0.3s;

	transition: all 0.3s;

	color: #FC4B50;

}

a:hover, a:focus {

	text-decoration: none;

	color: #666;

}

.active {

	color: #FC4B50 !important;

}

.m-t60 {

	margin-top: 50px;

}

.divider {

	border-bottom: 5px solid #FC4B50;

	height: 1px;

	margin: 10px 10px 10px 0px;

	width: 30px;

	display:block;

}

.fade {

	opacity: 1;

	transition: opacity .25s ease-in-out;

	-moz-transition: opacity .25s ease-in-out;

	-webkit-transition: opacity .25s ease-in-out;

}

.fade:hover {

	

}



/* - Typography -

================================================== */



h1 {

	font-family: 'Roboto Condensed', sans-serif;

	font-size: 70px;

	font-weight: 700;

	letter-spacing: 2px;

	text-transform: uppercase;

}

h2 {

	font-family: "Lovelo-Black";

	font-size: 50px;

	font-weight: 700;

	letter-spacing: 5px;

	text-transform: uppercase;

}

h3 {

	font-family: "Lovelo-Black";

	font-size: 30px;

	font-weight: 700;

	letter-spacing: 5px;

	text-transform: uppercase;

	text-align: center;

	display: inline-block;

}

h4 {

	font-family: "Lovelo-Black";

	font-size: 25px;

	font-weight: 700;

	letter-spacing: 5px;

	text-transform: uppercase;

	color: #FC4B50;

}

h5 {

	font-family: "Lovelo-Black";

	font-size: 17px;

	margin-top: 20px;

}

h1 span, h2 span, h3 span, h4 span {

	font-weight: 300;

}

p {

	font-size: 20px;

	font-weight: 300;

}



/* - parallax -

================================================== */

.parallax {

	position: relative;

	overflow: hidden;

	width: 100%;

	padding: 70px 0;

}

.parallax-background {

	background-position: center center;

	-webkit-background-size: cover !important;

	-moz-background-size: cover !important;

	-o-background-size: cover !important;

	background-size: cover !important;

	background-repeat: repeat-y;

}

.parallax-background.fixed {

	background-attachment: fixed !important;

}

.parallax-overlay {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-repeat: repeat;

	background-attachment: scroll;

	background: url(img/overlay-pattern.png);

}

.color-overlay {

	background:rgb(234 40 60);

}



/* - Home Section -

================================================== */



#home {

	/* background: url("img/video/video-rooftec.mp4") 50% 0 no-repeat fixed; */

	color: white;

	width: 100%;

	min-height: 100%;

	margin: 0 auto;

	padding: 0;

}

#home-video {

	/* background: url("img/video/video-rooftec.mp4") 50% 0 repeat fixed; */

	color: white;

	width: 100%;

	min-height: 100%;

	margin: 0 auto;

	padding: 0;

}

.video-poster {

	background:url(img/slider/slid3.jpg) 50% 0 no-repeat fixed;

	color: white;

	width: 100%;

	min-height: 100%;

	margin: 0 auto;

	padding: 0;

}

#myslider {

	color: white;

	width: 100%;

	min-height: 100%;

	margin: 0 auto;

	padding: 0;

}

#myslider .svg-wrapper {

	margin: 100px auto 10px;

}

.home-overlay {

	position: absolute;

	width: 100%;

	height: 100%;

	top: 0;

	left: 0;

	background-repeat: repeat;

	background-attachment: scroll;

	background-image: url(img/overlay-pattern.png);

    background-size: cover;
	
    z-index: 3;

}

.top-logo {

	display: table;

	position: relative;

	background: none repeat scroll 0 0 #FC4B50;

	margin: 0 auto;

	

	margin-bottom: 120px;

}

.top-logo h1 {

	font-family: "Aqua Grotesque";

}

.home-content {

	display: block;

	position: relative;

	top: 0;

	z-index: 999;

	text-align: center;

}

#home .flex-control-nav, #home .flex-direction-nav ,#home-video .flex-control-nav, #home-video .flex-direction-nav {

	display: none;

}

.svg-wrapper {

	position: relative;

	transform: translateY(-50%);

	margin: 30px auto 10px;

	width: 320px;

	display: block;

}

.shape {

	stroke-dasharray: 140 540;

	stroke-dashoffset: -474;

	stroke-width: 8px;

	fill: transparent;

	stroke: #FC4B50;

	border-bottom: 5px solid black;

	transition: stroke-width 1s, stroke-dashoffset 1s, stroke-dasharray 1s;

}

text {

	color: #FFFFFF;

    font-family: "Lovelo-Black";

    font-size: 22px;

    line-height: 32px;

    position: relative;

    top: -48px;

    left: 20px;

}

.svg-wrapper:hover .shape {

	stroke-width: 2px;

	stroke-dashoffset: 0;

	stroke-dasharray: 760;

}



/* - About Section -

================================================== */



#about {

	padding-top: 120px;

	padding-bottom: 120px;

	text-align: center;

}

.top-text {

	font-size: 45px;

	font-weight: 300;

	text-align: center;

}

.about-p {

	font-size: 20px;

	font-weight: 300;

	text-align: center;

	margin: 30px 0;

}

.about-body {

	text-align: center;

	position: relative;

	width: 100%;

}

.lap {

	max-width: 70%;

}



/* - Services Section -

================================================== */



#services {

	background: url(img/backgrounds/150.png) 50% 0 no-repeat fixed;

	color: #333;

	width: 100%;

	margin: 0px auto 0;

	padding: 0;

	padding-top: 120px;

	padding-bottom: 50px;

	text-align: center;

}



.left-box {

	text-align: right;

	margin-bottom: 50px;

}

.right-box {

	text-align: left;

	margin-bottom: 50px;

}

.services-block {

	color: #fff;

	border: 2px solid #fff;

	padding: 50px 0;

	height: 190px;

}



/* - Work Section -

================================================== */

#work {

	padding-top: 120px;

	text-align: center;

}

#owl-demo-1 .item a {

	margin: 0px;

	cursor: url(img/plus.png), auto;

}

#work .item a {

	cursor: url(img/plus.png), auto;

}

#owl-demo-1 .item img {

	display: block;

	width: 100%;

	height: auto;

}

#owl-demo-1 .owl-buttons, #owl-demo-2 .owl-buttons {

	position: absolute;

	left: 0;

	right: 0;

	text-align: center;

	top: -63px;

}



/* work hover */



.hovercontent h1 {

	color: white;

	font-size: 1.5em;

}

.hovercontent h3 {

	margin-top: 40%;

	color: #a1a1a1;

	font-weight: 100;

}

.hoveritem {

	font-size: 12px;

	display: inline-block;

	position: relative;

	overflow: hidden;

	line-height: 0;

}

.hoveritem .link {

	display: block;

	height: 100%;

}

.hovercontent {

	position: absolute;

	z-index: 5;

	font-family: "Helvetica", Arial, sans-serif;

	text-align: center;

	width: 100%;

	height: 100%;

	background: #222222;

	background: rgba(0,0,0,0.7);

	opacity: 0;

	line-height: 24px;

	filter: alpha(opacity=0);

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

	-moz-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);

	-o-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);

	-webkit-transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);

	transform: scale3d(1.3, 1.3, 1) translate3d(0, 10%, 0);

	-webkit-transition: opacity 0.2s ease-out, -webkit-transform 0.2s ease-out;

	-moz-transition: opacity 0.2s ease-out, -moz-transform 0.2s ease-out;

	-o-transition: opacity 0.2s ease-out, -o-transform 0.2s ease-out;

	transition: opacity 0.2s ease-out, transform 0.2s ease-out;

}

.hoveritem .link:hover .hovercontent {

	opacity: 1;

	filter: alpha(opacity=100);

	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";

	-moz-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

	-o-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

	-webkit-transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

	transform: scale3d(1, 1, 1) translate3d(0, 0, 0);

}



/* more-work */

.more-work {

	background: none repeat scroll 0 0 #FC4B50;

	color: #FFFFFF;

	margin-top: -4px;

	text-align: center;

}

.more-work .svg-wrapper {

	margin-top: 90px;

}

.more-work h3 {

	display: inline-block;

	font-family: "Lovelo-Black";

	font-size: 40px;

	font-weight: 700;

	letter-spacing: 0;

	line-height: 44px;

	text-align: center;

	text-transform: uppercase;

	position:relative;

}

.more-work .parallax {

	padding: 70px 0 50px;

}



/* ajax */

.ajax-box {

	overflow: hidden;

	max-height: 0px;

	background: #eee;

	transition: all .5s ease;

	-moz-transition: all.5s ease;

	-webkit-transition: all .5s ease;

	text-align: left;

}

.ajax-box h3 {

	margin-top: 0;

	margin-bottom: 30px;

}

.ajax-box .divider {

	border-bottom: 5px solid #FC4B50;

	height: 1px;

	margin: 10px 10px 10px 0px;

	width: 30px;

}

.open-box {

	padding: 88px 0px 141px 0px;

	max-height: 2000px;

}

.ajax-box #owl-demo-3 .item img {

	display: block;

	width: 100%;

	height: auto;

}

.ajax-box .owl-buttons {

	bottom: 0;

	position: absolute;

}

.ajax-box .owl-theme .owl-controls .owl-buttons div {

	color: #fff;

}

.close-work {

	background: url(img/cross.png) no-repeat;

	color: #BBBBBB;

	cursor: pointer;

	font-size: 35px;

	height: 58px;

	margin: 0 auto 50px;

	overflow: hidden;

	width: 58px;

}

.more-work .shape {

	stroke: #000;

}

.custom-btn {

	border: 1px solid;

	border-radius: 0;

	font-size: 20px;

	margin-top: 20px;

	padding: 11px 58px;

}



/* - Team Section -

================================================== */



#team .col-md-6 {

	padding: 120px 0 50px 0;

	margin-bottom:-1px;

	background: #eee;

}

.team-text {

	text-align: center;

	background: #444 !important;

	color: #fff;

	padding-top: 50px;

}

.charts-body {

	padding-bottom: 110px;

}

.charts {

	display: inline-block;

}

.charts h3 {

	font-size: 13px;

}



/* chart */

.chart {

	display: inline-block;

	height: 110px;

	margin: 79px 30px 19px;

	position: relative;

	text-align: center;

	width: 120px;

}

.chart canvas {

	position: absolute;

	top: 0;

	left: 0;

}

.percent {

	display: inline-block;

	font-family: "Lovelo-Black";

	font-size: 24px;

	line-height: 119px;

	z-index: 2;

}

.percent:after {

	content: '%';

	margin-left: 0.1em;

	font-size: .8em;

}

.angular {

	margin-top: 100px;

}

.angular .chart {

	margin-top: 0;

}



/* team hover */

.ca {

	opacity: 0;

	left: -51px;

	position: absolute;

	text-align: center;

	bottom: 0;

	width: 300px;

	-webkit-transition: all 300ms ease-out;

	-moz-transition: all 300ms ease-out;

	-o-transition: all 300ms ease-out;

	-ms-transition: all 300ms ease-out;

	transition: all 300ms ease-out;

}

.ca h3 {

	margin-bottom: 0;

	font-size: 26px;

	letter-spacing: 2px;

}

.ca p {

	color: #FC4B50;

}

.name {

	display: block;

	font-size: 15px;

	margin: 2px auto;

	text-align: center;

}

#component li {

	cursor: pointer;

}

#component li:hover .ca {

	opacity: 1;

}

.socail {

	text-align: center;

}

.socail span {

	display: inline-block;

}



/* testimonial */



.testimonial {

	background: url(img/backgrounds/0362.jpg);

	color: #333;

	margin: 0px auto 0;

	padding: 0;

	text-align: center;

}

.testimonial p {

	display: inline-block;

	font-family: 'Roboto Condensed', sans-serif;

	font-size: 26px;

	font-weight: normal;

	letter-spacing: 2px;

	text-align: center;

	color: #fff;

}

.testimonial .owl-buttons {

	margin-top: 20px;

}

.quote {

	background: none repeat scroll 0 0 #FC4B50;

	color: #FFFFFF;

	margin-bottom: 32px;

	padding: 10px;

}

.person span {

	font-size: 16px;

	line-height: 41px;

	padding: 13px;

}



/* - Blog Section -

================================================== */



#blog {

	padding-top: 120px;

	text-align: center;

	padding-bottom: 15px;

	background: #EEEEEE;

}

#blog .text {

	color: #FC4B50;

}

.thumb {

	height: auto;

	overflow: hidden;

	position: relative;

	width: 100%;

}

.thumb img {

	top: 0;

	bottom: 0;

	left: -50%;

	right: -50%;

	margin: auto;

}

.thumb .overlay {

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);

	color: #FFFFFF;

	height: 100%;

	left: 0;

	padding: 30px;

	position: absolute;

	text-align: center;

	text-decoration: none;

	top: 67%;

	transition: all 0.6s ease 0s;

	width: 100%;

}

.thumb:hover .overlay {

	top: 0;

	background: rgb(0 0 0 / 84%);

}

.left-align {

	text-align: left;

}

.left-align p {

	font-size: 17px;

}

.posts {

	margin: 30px 0 100px;

}



/* - contact Section -

================================================== */



#contact {

	background: url(img/backgrounds/00.jpg);

	color: #fff;

	margin: 0px auto 0;

	padding: 0;

	text-align: center;

}

#contact .parallax {

	padding: 120px 0;

}

.contact-box {

	position: relative;

	z-index: 1;

	text-align: center;

}

.form-body {

	margin-top: 50px;

}

.form-control {

	background: none repeat scroll 0 0 rgba(225, 225, 225, .3);

	border: 1px solid #eee;

	border-radius: 0;

	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;

	color: #fff;

	display: block;

	font-size: 14px;

	height: 55px;

	line-height: 1.42857;

	padding: 6px 12px;

	transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;

	vertical-align: middle;

	width: 100%;

}

.form-control:focus {

	border-color: #FC4B50;

	box-shadow: 0 0 0 #FC4B50;

}

.btn-custom {

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0);

	border: 1px solid #ccc;

	border-radius: 0;

	color: #ccc;

	padding: 10px 50px;

}

.btn-custom:hover {

	border: 1px solid #fff;

	color: #fff;

}

.form-body textarea {

	height: 198px;

	resize: none;

}

.info {

	text-align: left;

	margin-top: 50px;

}

.single-info {

	margin-bottom: 30px;

	text-align: center;

	background: none repeat scroll 0 0 rgba(225, 225, 225, .3);

	padding: 30px;

	height: 225px;

}

.single-info i {

	background: none repeat scroll 0 0 #ea283c;

	margin-bottom: 20px;

	width: 90px;

	height: 85px;

	line-height: 81px;

	margin-top: 10px;

}

.single-info p {

	font-size: 15px;

}

form .placeholder {

	color: #fff;

}



/* - footer -

================================================== */



footer {

	padding-top: 20px;

	background: #000;

	text-align: center;

	padding-bottom: 50px;

}

footer ul {

	display: block;

	list-style: none outside none;

	margin: 10px auto;

	width: 238px;

}

footer ul li {

	float: left;

}

footer p {

	color: #ccc;

	font-size: 18px;

}

.success{

	background:rgba(155,216,90,.4);

	padding: 20px;

	margin-bottom: 20px;

	border: 1px solid #9bd85a;

	border-radius: 0px;

	font-weight: normal;

	font-size:20px;

	font-family: 'Roboto Condensed', sans-serif;

}

.error{

	background:rgba(252,75,80,.4);

	padding: 20px;

	margin-bottom: 20px;

	border: 1px solid #FC4B50;

	border-radius: 0px;

	font-weight: normal;

	font-size:20px;

	font-family: 'Roboto Condensed', sans-serif;

}



/* - Blog page -

================================================== */



.blog-main {

	padding-top:100px;

	text-align:center;

}

.blog-main .col-md-6 .col-md-3 {

	margin-bottom:30px;

	display:block;

}

.pagination > li > a, .pagination > li > span {

	background-color: #FFFFFF;

    border: 1px solid #DDDDDD;

    float: left;

    font-size: 19px;

    margin-left: -1px;

    padding: 9px 19px;

    position: relative;

    text-decoration: none;

}

.pagination > li:last-child > a, .pagination > li:last-child > span {

	border-bottom-right-radius: 0;

    border-top-right-radius: 0;

}

.pagination > li:first-child > a, .pagination > li:first-child > span {

    border-bottom-left-radius: 0;

    border-top-left-radius: 0;

    margin-left: 0;

}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {

	background-color:#FC4B50;

	border-color:#FC4B50;

}

.pagination {

    border-radius: 4px;

    display: inline-block;

    margin: 56px 0;

    padding-left: 0;

}



/* - business-work -

================================================== */

.business-work .col-md-4 {

	margin-bottom:25px;

}

.business-work .hoveritem {

	cursor: url(img/plus.png), auto;

}

.business-work .col-md-4 img {

	width:100%;

}

.business {

	background: url(img/backgrounds/bus.jpg) 50% 0 no-repeat fixed !important;

}

.business-testimonial {

	background: url(img/backgrounds/bus2.jpg) 50% 0 no-repeat fixed !important;

}

.business-work .item a {

	cursor: pointer;

}

.team-business {

	text-align:center;

	padding-top: 120px;

}

#owl-demo-2 {

	margin-bottom: 48px;

    margin-top: 100px;

}

#owl-demo-2 .item{

  margin: 10px;

}

#owl-demo-2 .item img{

  display: block;

  width: 100%;

  height: auto;

}

.team-info {

	background:#eee;

	padding:10px 0;

}



.team-info h4 {

	font-size:18px;

}





.team-business .thumb .overlay {

	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.1);

	color: #FFFFFF;

	height: 100%;

	left: 0;

	padding: 30px;

	position: absolute;

	text-align: center;

	text-decoration: none;

	top: 100%;

	transition: all 0.6s ease 0s;

	width: 100%;

}

.team-business .thumb:hover .overlay {

	top: 0;

	background: rgba(255,255,255,.6);

}

.team-business .socail {

	margin-top:45%;

}



/* - single page -

================================================== */

.single {

	margin-top:100px;

}

.single .top-title {

	text-align:center;

}

.post h4{

	color: #333;

	margin:20px 0;

}

.breadcrumb {

	border-radius:0;

}

.related {

	margin:20px 0;

	

	padding:20px 0;

}

.img-body {

	position:relative;

}

.img-body .date {

	position:absolute;

	bottom:0;

	padding:10px;

	color:#fff;

	background:rgba(252,75,80,.8);

}



/* - Media Queries -

================================================== */



@media only screen and (max-width: 960px) {

.left-box, .right-box {

	text-align: center;

}

}



@media only screen and (min-width: 768px) and (max-width: 959px) {

.left-box, .right-box {

	text-align: center;

}

.thumb, .left-align {

	margin-bottom: 40px;

}

.thumb .overlay {

	top: 77%;

}

}



@media only screen and (max-width: 774px) {

.thumb, .left-align {

	margin-bottom: 40px;

}

.navbar-header {

	margin: auto;

}

.nav {

	float: none !important;

	margin-top: 0;

}

.navbar-nav > li > a {

	text-align: center;

}

}



@media only screen and (max-device-width : 480px) {

.thumb, .left-align {

	margin-bottom: 40px;

}

.navbar-header {

	margin: auto;

}

.nav {

	float: none !important;

}

.top-logo {

	margin-bottom: 50px;

}

#header-menu {

	display:none;

}

}



@media only screen and (min-width: 1200px) {

.chart {

	margin: 79px 17px 19px;

}

.top-logo {

	margin-bottom: 90px;

}

}



@media only screen and (min-width: 1500px) and (max-width: 1600px) {

.top-logo {

	margin-bottom: 120px;

}

}



@media only screen and (min-width: 1601px) {

.top-logo {

	margin-bottom: 200px;

}

}



@media screen and (-webkit-min-device-pixel-ratio:0) {

.more-work .svg-wrapper {

	margin-top: 48px;

	margin-bottom: 30px;

}

#blog .svg-wrapper {

	margin: 0px auto 37px;

}

#team .col-md-6 {

	margin-bottom:-2px;

}

}