/*
Theme Name: Dzine Agency
Author:Sharabg Technologies
Author URI: http://www.sharabhtechnologies.com
Description: Theme for dzineagency.com
Text Domain: Dzineagency
*/

@import url(http://fonts.googleapis.com/css?family=Roboto:400,500,700,300,100);
@import url(http://fonts.googleapis.com/css?family=Flamenco);
@font-face {font-family: 'Aller_Lt';
    src: url('fonts/Aller_Lt.eot');
    src: url('fonts/Aller_Lt.eot') format('embedded-opentype'),
         url('fonts/Aller_Lt.woff2') format('woff2'),
         url('fonts/Aller_Lt.woff') format('woff'),
         url('fonts/Aller_Lt.ttf') format('truetype'),
         url('fonts/Aller_Lt.svg#Aller_Lt') format('svg');
}
body{font-family: 'Roboto', sans-serif; font-size: 16px;color:#333333;}
.header{box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5);z-index: 9999;position: absolute;top: 0;
width: 100%;background: #fff;}
.navbar{margin: 0;}
.menu{font-family: 'Flamenco', cursive; float: right; text-transform: uppercase;}
.menu ul li{background:url(images/menu-div.png) no-repeat right center; font-size:1.125em; }
.menu ul li a{color:#4a4460;padding: 0px 20px; outline:none;}
.menu ul li:last-child{background:none;}
.menu ul li a:hover, .menu ul li a.active{color:#e6286a; background: none;}
.navbar-brand{padding:20px 0;}
.navbar-toggle{background-color: rgb(230, 40, 106);}
.navbar-toggle .icon-bar {background: #FFF;}
.slider{ height:auto;margin-top: 92px;}
h1{font-family: 'Aller_Lt';padding:55px 0 35px 0;}
.da-slide h2{top:30%;}
.block{padding-bottom: 85px;}
#about-us{overflow: hidden;}
.border-pink{background:url(images/pink-line.png) no-repeat;width: 42%; margin: 0 auto;height: 30px;padding-bottom: 80px;background-size: 100%;}
.block p{font-size: 1.56em;line-height: 40px;word-spacing: 0.35em;letter-spacing: 4px;font-weight: 300;}
.white{color:#fff;text-align: center;}
.services{overflow:hidden;background:url(d.jpg) center no-repeat; background-size:cover; background-attachment: fixed;box-shadow: inset 0px 4px 9px -1px rgba(0,0,0,0.6);}
.border-white{background:url(images/white-line.png) no-repeat;width: 42%; margin: 0 auto;height: 30px;padding-bottom: 80px;background-size: 100%}
.services h3{text-align: left; font-weight: 400;}
.services h1{padding: 46px 0 26px 0;}
.services p{font-size: 1em;line-height: 24px;word-spacing: 0.1em;letter-spacing: 0px;text-align: justify;word-break: break-all;width: 94%; font-weight:lighter;}
.services img{max-width: 100%;padding-top: 24px;padding-left: 30px;}
.portfolio-link{margin-top: 100px;height:auto;line-height: 56px;}
.portfolio-link ul li a{padding:20px; text-decoration: none;color:#333;}
.portfolio-link ul li a:hover,.portfolio-link ul li a.active{background:#e6286a;color:#fff; text-decoration: none;}
.lighter{font-size:3em !important; font-weight:100; color:#fff;}
.services-block{margin-bottom: 	70px;}
.bold{font-size:4.5em !important; font-weight:400; color:#fff;}
.banner-text {width:62%!important; margin:0 auto !important;}
.content_portfolio{display:none;}
.portfolio_wrapper {width: 30.1% !important;height: 196px !important;margin: 1.1% !important;}
#pterms{background:url(images/navi-bg.png) no-repeat;margin:0 auto; width:88%; !important; padding-top:3px !important;text-align:center !important; margin-bottom:120px !important;}
#pterms li:before{display:none !important;}
#pterms li.active {background-color: #E6286A !important;color: #fff;}
#pterms li{padding:20px 28px 18px !important;font-weight: 300;}
.google-map{background:url(images/google-map.jpg) no-repeat; height:883px; background-attachment: fixed; background-size:cover; overflow: hidden;}
.contactdetails{background:#f3f3f3;}
.contactdetails h1{font-size:1.2em; text-align: center;padding: 28px 0 6px 0;}
.border-gray{background:url(images/border-gray.png) no-repeat;height: 18px;margin: 0 auto;width: 75%;background-size: 100%;padding: 20px 0 20px;}
.contactform{background:#fff;text-align: -webkit-center;}
.phone{background:url(images/phone.png) no-repeat left;}
.mail{background:url(images/mail.png) no-repeat left;}
.address{background:url(images/location.png) no-repeat left 15%;}
.localtion{margin-top: 25px;font-weight:300;color: #333;}
.localtion ul li{padding-left: 35px;line-height: 28px;}
.contactform h1{font-size:1.2em; text-align: center;padding: 28px 0 6px 0;}
#wpcf7-f27-o1 { padding: 15px 22px;}
#wpcf7-f27-o1 input[type="text"],#wpcf7-f27-o1 input[type="textarea"],#wpcf7-f27-o1 input[type="email"] {padding:8px 8px; border:1px solid #e1e1e1; margin-bottom: 20px; color:#ff90b7; font-size:14px; width:85%;background-position: 97% 48%;}
#wpcf7-f27-o1 input[type="text"] { background:url(images/name.png) no-repeat right; background-position: 97% 48%;}
#wpcf7-f27-o1 input[type="email"] { background:url(images/mail.png) no-repeat right; background-position: 97% 48%;}
#phone { background:url(images/phone.png) no-repeat right !important; background-position: 97% 48% !important;}
.wpcf7-textarea {height: 105px; resize:none;
width: 85%;padding:8px 8px; border:1px solid #e1e1e1;}
.wpcf7-submit {padding: 4px 43px;font-size: 15px;background: none;border: 1px solid #89859a;color: #4a4460;margin-top: 10px;
margin-bottom: 43px;}
.footer{}
.submit{padding: 0;text-align: -webkit-left;width: 85%;}
.footer p{text-align: center;padding: 17px 0;font-size: 0.85em;font-weight: 300;color: #444; margin: 0;}
.followus{text-align:center;width: 100%;height: 222px;}
.icons{height:61px; width:38px; display: block;}
.facebook{background: url(images/facebook.png)no-repeat;}
.facebook:hover{background: url(images/facebook_hover.png)no-repeat;}
.googleplus{background: url(images/google-plus.png)no-repeat;}
.googleplus:hover{background: url(images/google-plus_hover.png)no-repeat;}
.linkedin{background: url(images/linked-in.png)no-repeat;}
.linkedin:hover{background: url(images/linked-in_hover.png)no-repeat;}
.behance{background: url(images/behance.png)no-repeat;}
.behance:hover{background: url(images/behance_hover.png)no-repeat;}
.printerest{background: url(images/pinterest.png)no-repeat;}
.printerest:hover{background: url(images/pinterest_hover.png)no-repeat;}
.cl-effect-5{padding: 37px 0;}
.cl-effect-5 li a {	overflow: hidden;	padding: 0 4px;	height: 1em;}
.cl-effect-5 li a span {	position: relative;	display: inline-block;	-webkit-transition: -webkit-transform 0.3s;	-moz-transition: -moz-transform 0.3s;
	transition: transform 0.3s;}

.cl-effect-5 li a span::before {
	position: absolute;
	top: 100%;
	content: attr(data-hover);
	font-weight: 400;
	-webkit-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
}

.cl-effect-5 li a:hover span,
.cl-effect-5 a:focus span {
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

#myTab {position: absolute;left:60px;top: 1px; border:none;}
#myTabContent{position: relative;}
.contact{background: url(images/contact.jpg) no-repeat; height:52px; width:100%;background-color: transparent !important;
color: transparent !important;border: none !important; border-radius: 0 !important;}

.map{background: url(images/map.jpg)no-repeat; height:52px; width:100%;background-color: transparent !important;
color: transparent !important;border: none !important;padding:0; border-radius: 0 !important;}
.map:hover, #myTab .active .map{background: url(images/map_hover.jpg)no-repeat;cursor: pointer;}
.contact:hover, #myTab .active .contact{background: url(images/contact_hover.jpg) no-repeat; cursor: pointer;}
@media (min-width:1700px) and (max-width: 2200px){
.da-slider{min-height:703px;}

}
@media (min-width: 1024px) and (max-width: 1280px){

#pterms{width: 100%;background-size: 100%;}
.da-slider{min-height: 370px}
.da-slide h2{top:160px; font-size:45px;}
#pterms li {padding: 20px 24px 14px !important;}
.da-slide b{font-size: 32.5px;}
}
@media (min-width: 1024px) and (max-width: 1200px){
	#myTab {left: 43px;}

}
@media (min-width: 768px) and (max-width: 1023px){
	#myTab {left: 25px;}
.menu ul li{font-size: 	1em;}
.menu ul li a{padding:0 15px;}
.logo img{max-width: 100%;}
.da-slider{min-height:280px;}
.da-slide h2{top:70px; font-size:40px;left:5% !important;}
.navbar-brand{padding:30px 0;}
.da-slide b{font-size: 29px;}
.followus{padding: 0}
#pterms{width: 100%; background-size:100%; font-size: 0.9em; text-align: left !important;line-height: 39px;margin-bottom: 60px;}
#pterms li {padding: 12px 13px 10px !important;}

}

@media (min-width: 540px)and (max-width: 800px){
	.portfolio_wrapper{width:47.5% !important;}
}
@media (min-width: 200px)and (max-width: 539px){
	.portfolio_wrapper{width:100% !important;height: auto !important;}
}


@media (min-width: 240px) and (max-width: 767px){
.menu{width: 100%;}
h1,.contactdetails h1,.services h1{padding:10px 0;}
.block p {font-size: 1.5em;line-height:30px;word-spacing:0.2em;letter-spacing:1px;font-weight: 300;
word-break: break-all;text-align: justify;}
.menu ul li{background:none; font-size:1em;}
.menu ul li a{color:#4a4460;padding: 10px 20px;}
.menu ul li a:hover{color:#fff; background:#E6286A;}
.slider{height: 220px;margin-top: 53px;}
.logo img{max-width: 100%; position: absolute; top:4px;}
.border-pink,.border-white{width:82%;}
.da-slide h2{top:70px; font-size:30px;}
.da-slide b{font-size: 21px;}
.border-pink,.border-white{padding-bottom: 50px;}
.border-gray{padding:13px;}
#pterms{background:none; width: 100%; text-align: left !important;}
}

.view img:hover{background: #f3f;}

.pl_projectOverlay
{
	opacity:0;
	width: 100%;
	height: 100%;
	z-index: 99;
	position: absolute;
	background: rgba(192, 17, 78, 0.6);
	text-decoration: none !important;
	left:-0%;
	top:-100%;

	    transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;

      transition: top 0.3s;
    -webkit-transition: top 0.3s;
/*
        transition: left 0.5s;
    -webkit-transition: left 0.5s;

      transition-property: top, left;
  transition-duration: 0.5s, 0.5s;
  transition-delay: 0s, 0s;
  */
}
.portfolio_wrapper
{
	position: relative;
}

.portfolio_wrapper:hover .pl_projectOverlay
{
	opacity:1;
	top: 0%;
}
.pl_projectDetails
{
	font-size: 1.5em !important;
	color: #fff;
	top: 20%;
position: absolute;
width: 100%;
left: 0;

}

.overlay_image
{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 55%;
	left: 50%;
	margin-left: -25px;
	opacity: 0.9;

  /* Webkit for IE( Version: 11, 10 ) */
  -ms-transform: scale(1, 1);
  -ms-transition-duration: 500ms;
  -ms-transition-timing-function: ease-in-out;
}

.overlay_image:hover
{
	  /* Webkit for Chrome and Safari */
  -webkit-transform: scale(1.1, 1.1); 
  -webkit-transition-duration: 500ms;
  -webkit-transition-timing-function: ease-in-out;
 
}

#hs-rsp-image-wrap #hs-rsp-close
{
	background: transparent url('images/cross.png') no-repeat 0 0 !important;
	background-size: contain !important;
	width: 40px !important;
	height: 40px !important;

	 -webkit-transition-duration: 1s;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    transition-duration: 1s;
     
    -webkit-transition-property: -webkit-transform;
    -moz-transition-property: -moz-transform;
    -o-transition-property: -o-transform;
    transition-property: transform;
}

#hs-rsp-image-wrap #hs-rsp-close:hover
{
	 -webkit-transform:rotate(180deg);
    -moz-transform:rotate(180deg);
    -o-transform:rotate(180deg);
}