
/* Creative Demo Styles
================================================== */

	/* Page Fonts */
	@import url(https://fonts.googleapis.com/css?family=Merriweather:400,400italic,300,700);
	
	.helvetica{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;}

	/* Body Options */
	body{ font-family: 'Merriweather', sans-serif; letter-spacing: 0px; }

/* COLORS
================================================== */

	/* Colored */
	.colored, .colored-hover:hover{ color:#e97017 !important; }
	.bg-colored, .bg-colored-hover:hover{ background-color:#e97017 !important; }
	.border-colored, .border-colored-hover:hover{ border-color:#e97017 !important; }

	/* Colored1 */
	.colored1, .colored1-hover:hover{ color:#a49576 !important; }
	.bg-colored1, .bg-colored1-hover:hover{ background-color:#a49576 !important; }
	.border-colored1, .border-colored1-hover:hover{ border-color:#a49576 !important; }

	/* Colored2 */
	.colored2, .colored2-hover:hover{ color:#bbaf96 !important; }
	.bg-colored2, .bg-colored2-hover:hover{ background-color:#bbaf96 !important; }
	.border-colored2, .border-colored2-hover:hover{ border-color:#bbaf96 !important; }

	::selection{ background-color:#e97017; }

/* Other Colors */

	/* Boxes hover colors */
	#about-boxes .boxes > div:hover a{
		background-color:#e97017 !important;
		border-color:#e97017 !important;
	}

	/* Sliding hover effect color */
	.qdr-hover-5:before{ background-color:#e97017; }
	.qdr-hover:before,
	/* Active and hover color for filters on portfolio */
	#works .cbp-l-filters-text .cbp-filter-item.cbp-filter-item-active,
	#works .cbp-filter-item:hover{
		background:#e97017;
	}
	/* Counter colors on the portfolio */
	#works .cbp-filter-item.cbp-filter-item-active .cbp-filter-counter,
	#works .cbp-filter-item:hover .cbp-filter-counter{
		background:#cf6517;
	}
	/* Portfolio Items on hover */
	#works .cbp-caption-zoom .cbp-caption-activeWrap{
		background-color:rgba(233,112,23,0.92);
	}
	/* navigation hover color on testimonials slider */
	.testimonials .cbp-nav-controls div:hover{
		background-color:#e97017;
	}
	/* Navigation hover and active color */
	#navigation.modern .nav-menu a:hover, #navigation.modern .nav-menu .nav>li.active > a{
		color:#bbaf96 !important;
	}

/* CREATIVE VERSION MAIN STYLES
================================================== */

/* CREATIVE NAVIGATION */
	/* Navigation styles */
	#navigation.modern .columns ul li a{ font-size:13px; font-weight: 500; }
	/* Mega menu and dropdown styles */
	#navigation.modern .columns ul.dropdown-menu.mega-menu li a{ padding:3px 15px; font-size: 12px !important; }
	#navigation.modern .columns ul.dropdown-menu.mega-menu .column-title{ color: #ccc; font-size: 11px; }
	#navigation.modern .columns ul.dropdown-menu li a{ color: #cfcac7; font-size: 12px; font-weight: 300; }
/* Navigation */
	#navigation.modern .columns ul.dropdown-menu li a:hover{ background:#005b97; }
	/* Navigation hover and active colors */
	#navigation.modern.dark-nav .nav>li.active>a,
	#navigation.modern.dark-nav .nav>li>a:hover,
	#navigation.modern .columns ul.dropdown-menu li a:hover,
	#navigation.modern.dark-nav.scrolled .nav>li>a:hover{
		color:#fff !important;
	}
	#navigation.modern .columns ul.dropdown-menu{ background-color:#2d2b2a; }

/* CREATIVE HEADER STYLES */
	h3.title{ font-size:25px; text-transform: uppercase; position: relative; display: inline-block; margin:0 auto; padding: 0; color:#818181;}
	h3.title:after{ content: ''; position: absolute; left:108%; width: 150px; height: 14px; background-color:#c7c2b8; opacity: 0.2; top:50%; margin-top: -9px; }
	h3.title:before{ content: ''; position: absolute; right:108%; width: 150px; height: 14px; background-color:#c7c2b8; opacity: 0.2; top:50%; margin-top: -9px; }
	h3.title.left:before{ display: none; }
	h3.title.left:after{ width: 200px; width: calc(1170px / 2 - 110%); }
	h3.title + h1{ font-size:45px; margin:0 auto; padding:0; text-transform: uppercase; color:#818181;}
	h3.title + h1 + .subtitle{font-size:20px; margin:30px auto 0; padding:0;}
	.description{font-size:14px; margin:20px auto 0; line-height: 25px; color:#999;}
	/* White Title */
	h3.title.white{ color:#e5e5e5 !important; }
	h3.title.white + h1{ color:#fff; }
	h3.title.white:after{ background-color:#efefef; }
	h3.title.white:before{ background-color:#efefef; }
	h3.title.white + h1 + .subtitle + .description,h3.title.white + h1 + .description h3.title.white + .description{ color:#cccccc; }
		/* Responsive */
		@media only screen and (max-width: 1250px){
			h3.title.left:after{ width: 100px; width: calc(1170px / 3 - 110%); }
		}
		@media only screen and (max-width: 640px){
			h3.title:before,h3.title:after{display: none;}
			h3.title + h1{ font-size:35px; }
		}
		@media only screen and (max-width: 480px){
			h3.title{ font-size:17px; }
			h3.title + h1{ font-size:25px; }
			h3.title + h1 + .subtitle{ font-size:15px; margin:10px auto 0;}
			.description{ margin:10px auto 0; }
		}

/* CREATIVE HOME */
	/* Navigation Styles For Hero Slider */
	#home .zeus .tp-bullet{ background-color:#3d3d3d; border:1px solid rgba(255,255,255,0.4); width: 12px; height: 12px; }
	/* Hover and Selected Options */
	#home .zeus .tp-bullet:after{ background-color:#00d9dd; width: auto; height: auto; left:1px; right: 1px; bottom:1px; top:1px; }
	/* Text On The Image Overlay */
	#home .zeus .tp-bullet-title{ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:13px; font-weight: 400; color:#b8b8b8; bottom:33px; }
	/* Image Overlay Options */
	#home .zeus .tp-bullet-image, .zeus .tp-bullet-imageoverlay{ width: 150px; height: 80px; background-color:rgba(0,0,0,0.2); box-shadow: 0px 0px 10px 3px rgba(0,0,0,0.3) }

/* CREATIVE ABOUT US */
	/* ABOUT BOXES */
	#about-boxes .boxes a.icon{background-color:#fcfcfc;border:1px solid #e0e0e0;display: block;width: 130px;height: 130px;line-height: 130px;margin:0 auto;font-size:22px;color:#b8b8b8;-webkit-transition: all 0.5s;-moz-transition: all 0.5s;transition: all 0.5s;}
	#about-boxes .boxes>div:hover a{background-color:#4d4f50; border-color:#4d4f50;color:white;}
	#about-boxes .boxes>div h3.box-title{color:#818181;margin:25px 0 18px 0;padding:0;font-size: 17px;text-transform: uppercase;}
	#about-boxes .boxes.circle-boxes a.icon{border-radius: 100%;}
	#about-boxes .boxes>div{ cursor: default;}
	#about-boxes .boxes>div p{ line-height: 20px; color:#818181; font-size:15px; font-weight: 300; font-family: "Helvetica";}

/* CREATIVE IMAGE GALLERY STYLES */
	/* Gallery Navigation Options */
	#image-gallery .dione .tp-bullet-image{width: 100px;-webkit-box-shadow:none;box-shadow: none;}
	#image-gallery .dione .tp-bullet.selected,.dione .tp-bullet:hover,#image-gallery .dione .tp-bullet{background:none;}
	#image-gallery .tp-bullets .tp-bullet .tp-bullet-img-wrap,#image-gallery .tp-bullets .tp-bullet .tp-bullet-image{width: 100%;height: 100%;display: block;left:0;}
	#image-gallery .dione .tp-bullet{width: 100px;opacity: .6;padding:0;margin:0;}
	#image-gallery .dione .tp-bullet:hover,#image-gallery .dione .tp-bullet.selected{opacity: 1;}
	#image-gallery a.video-button{opacity: .2;}
	#image-gallery a.video-button:hover{opacity: .6;}
	#image-gallery .dione .tp-bullet-title{bottom:auto;top:-50px;background:rgba(22,22,22,0.7);border-radius: 7px;font-style: italic;letter-spacing: 0;}
	#image-gallery .dione .tp-bullet-title:after{border-color:rgba(22,22,22,0.75) transparent transparent transparent;}
	/* Height List */
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(1){height: 98px;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(2){height: 110px;top:-5px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(3){height: 130px;top:-16px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(4){height: 110px;top:-5px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(5){height: 125px;top:-12px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(6){height: 140px;top:-20px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(7){height: 120px;top:-10px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(8){height: 110px;top:-5px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(9){height: 125px;top:-11px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(10){height: 115px;top:-8px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(11){height: 105px;top:-3px !important;}
	#image-gallery .tp-bullets .tp-bullet:nth-of-type(12){height: 98px;top:0px !important;}

/* CREATIVE PORTFOLIO SECTION */
	#works *{font-family: inherit;}
	#works i{font-family: 'FONTAWESOME' !important;}
	#works .cbp-l-filters-text .cbp-filter-item{display: block; text-align: left; text-transform: uppercase; font-size:14px; color:#818181; padding:10px; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; }
	#works .cbp-l-filters-text .cbp-filter-item:hover .cbp-filter-counter{-webkit-transform:translateY(0); transform:translateY(0); }
	#works .cbp-l-filters-text .cbp-filter-counter:after{display: none; }
	#works .cbp-l-filters-text .cbp-filter-item.cbp-filter-item-active,#works .cbp-filter-item:hover{color:white; background:#005b97; }
	#works .cbp-l-filters-text .cbp-filter-counter{opacity: 1; left:auto; right: 10px; bottom:8px; background: #d3d3d3; border-radius: 100%; height: 25px; width: 25px; color:white; -webkit-transition: all 0.1s; -moz-transition: all 0.1s; transition: all 0.1s; }
	#works .cbp-filter-item.cbp-filter-item-active .cbp-filter-counter,#works .cbp-filter-item:hover .cbp-filter-counter{background:#005b97; }
	#works .cbp-filter-item:hover .cbp-filter-counter:after{display: none; }
	#works .quadra-box{border-top:3px solid; text-align: center; position: relative; }
	#works .quadra-box .quadra-image{width: 100%; height: auto; overflow: hidden; display: block; }
	#works .quadra-box .quadra-image img{width: 100%; height: auto; }
	#works .quadra-box .quadra-icon{width: 50px; height: 50px; border-radius: 100%; background:white; border:1px solid #efefef; line-height: 50px; text-align: center; display: block; margin:-25px auto 0; position: relative; z-index: 2; font-size:17px; color:#707070; }
	#works .quadra-box .quadra-title{margin:20px auto 0; padding:0; text-transform: uppercase; color:#686868; font-size:11px; }
	#works .quadra-box .quadra-header{margin:5px auto 10px; padding:0; text-transform: uppercase; color:#686868; font-size:20px; }
	#works .quadra-box .quadra-description{margin:5px auto 0; padding:0; color:#7f7f7f; font-size:15px; font-weight: 400; }
	#works .quadra-box .quadra-button{margin:25px auto 0; padding:5px 0; color:#878787; font-size:12px; background:#efefef; text-transform: uppercase; display: block; width: 100%; }
	#works .cbp-caption-zoom .cbp-caption-activeWrap{background-color:rgba(233,112,23,0.92); }
		/* Media screen - responsive codes */
		@media only screen and (max-width: 970px){
			#works .quadra-box{display: none;}
		}
		@media only screen and (max-width: 800px){
			#works .cbp-l-filters-text{width: 100%; float: none; margin: 70px 0 30px !important;}
			#works .cbp-l-filters-text .cbp-filter-item{display: inline-block;}
			#works .cbp-l-filters-text .cbp-filter-counter{display: none;}
			#works #js-grid-agency{width: 100%; margin-top:40px !important;}
		}
		@media only screen and (max-width: 575px){
			#works #js-grid-agency{margin-top:0px !important;}
		}

/* CREATIVE TEAM SECTION */
	.team{ padding:70px 0 100px 0; }
	.team-type-1{ margin-top:50px; text-align:center; }
	.team-type-1 .member{ padding:0 12px; height: auto; }
		@media only screen and (max-width: 480px){
			.container .team-type-1 .member{ padding:0; }
		}
	.team-type-1 .member .member-image{ width: 100%; overflow: hidden; }
	.team-type-1 .member .member-image img{ width: 100%; }
	.team-type-1 .member .member-image .socials{ width: auto; position: relative; top:-30px; z-index: 2; color:white; text-align: left; padding-left:5px; }
	.team-type-1 .member .member-image .socials a{ width: 25px; height: 25px; display: inline-block; margin-left: 5px; line-height: 25px; text-align: center; font-size:14px; }
	.team-type-1 .member .member-name{ color:#888; margin:0 auto; padding:0; font-size:19px; }
	.team-type-1 .member .member-position{ margin:8px auto 0; padding:0; font-size:13px; }
	.team-type-1 .member .member-details{ margin:5px auto 0; padding:0; color:#999; line-height: 25px; font-size:13px; }


/* CREATIVE CLIENTS SECTION */
	/* Factors */
	#clients .factors{ color:#b7b7b7; }
	#clients .factors .fact{ display: inline-block; min-width: 200px; /* Old Browsers */ width: 20%; width: calc(25% - 60px); border:1px dashed #e2e2e2; padding:15px; cursor: default; margin-right: 40px;}
	#clients .factors .fact:last-child{margin-right: 0px;}
	/* Texts */
	#clients .factors .fact .factor{font-size: 40px; margin: 0; padding: 0;}
	#clients .factors .fact h2{font-size: 15px; padding: 0; margin: 10px 0 0; text-transform: uppercase;}

		@media only screen and (max-width: 850px){
			#clients .factors{padding-left:15px; padding-right: 15px;}
			#clients .factors .fact{display: block; float: left; width:calc(50% - 20px) !important; margin:10px !important;}
		}

		@media only screen and (max-width: 500px){
			#clients .factors .fact{width: 100% !important; margin:10px 0 !important;}
		}

	/* Clients */
	#clients .clients .client-image{ width: 85px; height: 85px; border-radius: 100%; border:1px dashed #929292; overflow: hidden; }
	#clients .clients .client-image img{ width: 100%;height: auto; }
	/* Details */
	#clients .clients .details{/* Old Browsers */width: 70%; width: calc(100% - 99px); margin-left:14px; float: left;}
	#clients .clients .details h3{color:#818181; font-size: 15px; text-transform: uppercase; padding: 0; margin: 0;}
	#clients .clients .details p.stars{margin:5px 0;}
	#clients .clients .details p.stars i{color:#ffae00; font-size: 10px;}
	#clients .clients .details p.description{font-size: 12px; line-height: 20px; color:#9b9b9b;position: relative; padding-left:0 !important; margin:0;}
	#clients .clients .details p.description:after{content:'';position: absolute;width: 100%;height: 1px;background:#eeeeee;bottom:-10px;left:0;}
	#clients .clients .details p.client-name{color:#9b9b9b; font-size: 12px; line-height: 20px; margin-top:20px; text-transform: uppercase;}

/* CREATIVE FEATURES WITH MOBILE */
	#features{ text-align: center; margin:100px 0 180px; padding-top:100px; }
	/* Container */
	#features ul{width:100%; height: auto; max-width: 1170px; min-height: 720px; background-image:url(../images/iphone.png); background-position: center top; background-repeat: no-repeat; overflow: hidden;}
	/* Items */
	#features ul li{ margin-top:50px; max-width:400px; float:left; text-align:right; cursor: default; display: block; height: auto; left:0; padding-right:30px;  left:0;  position: relative; }
	#features ul li:nth-of-type(1){ margin-top:55px; }
	#features ul li:nth-of-type(2){ margin-top:55px; }
	#features ul li:nth-of-type(2n){float:right; text-align:left; right:0; padding-left:30px; padding-right:0; }
	/* Icon */
	#features ul li a{margin-top:0; width: 65px; height: 65px; border-radius: 100%; border:1px dashed #7e7e7e; background:white; text-align:center; font-size:22px; line-height: 65px; color:#757575; float:right; display: block; -webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
	#features ul li:nth-of-type(2n) a{float:left; }
	/* Texts */
	#features ul li .texts{color:#7a7a7a; /* Old Browsers */width: 75%; width: calc(100% - 80px); }
	#features ul li:nth-of-type(2n) .texts{margin-left:82px; margin-right:0; }
	#features ul li .texts h3{ font-size: 17px; text-transform: uppercase; }
	#features ul li .texts p{font-size: 13px; margin-top: 15px; line-height: 20px; }
	/* Icon Hover */
	#features ul li:hover a{color:white; background:#e97017; border-color:#e97017; }
		@media only screen and (max-width: 1070px){
			#features ul li{padding-right: 100px;}
			#features ul li:nth-of-type(2n){padding-left: 100px;}
		}
		@media only screen and (max-width: 970px){
			#features{ height: auto !important; margin:100px 0 0; }
			#features ul{ background-image: none !important; margin:0 auto !important; padding-bottom:50px;}
			#features ul li{ padding: 0 !important; text-align: center !important; max-width: 50%; left: auto; right: auto !important; padding: 0 10px !important;}
			#features ul li a{ float: none !important; margin: 0 auto; }
			#features ul li .texts{width: 100%; margin:0 !important;}
			#features ul li .texts h3{ margin-top:15px; }
		}
		@media only screen and (max-width: 520px){
			#features ul li{ max-width: 100%; }
		}

/* CREATIVE SOCIALS */
	.circle-socials .item a{ background-color:rgba(255,255,255,0.4); color:white; opacity: .6; font-size:22px; }
	.circle-socials .item h5{ color:#ede7df; margin-top:20px; text-transform: uppercase; }
	.circle-socials .item:hover a{ background-color:#e97017; opacity: 1; }

/* CREATIVE PRICES */
	.prices-type-2 .item .package-inner{ border:1px solid #f4f3f1; }
	/* Texts */
	.prices-type-2 .item .title{ padding:35px 15px;color:#818181;}
	.prices-type-2 .item .title h1.price span{ font-size: 12px; }
	.prices-type-2 .item .title h1.name{ font-size: 25px; }
	.prices-type-2 .item .features{ font-size:12px; padding:50px 20px 20px; color:#909090;}
	.prices-type-2 .item .features li{ font:inherit; margin-bottom:20px;}
	.prices-type-2 .item .features li:last-child{ margin-bottom:0;}
	.prices-type-2 .item a.btn{ background-color:#818181; margin:0 0 50px 20px; font-size:12px; border:none; border-radius: 0; padding:7px 19px 6px; color: white;}
		@media only screen and (max-width: 1450px){
			.prices-type-2 .item .title h1.name{ font-size: 19px; }
		}

/* CREATIVE CONTACT */
	#contact{background-color:#2b2b2b; line-height: normal; }
	/* Header color */
	#contact h1{color:#ccc !important;}
	/* Map Stlyes */
	#contact>div{width: 50%;float: left;}
	#contact #map #google_map{width: 100%;height: 100%;}
	/* Address and Form Styles */
	#contact #form{ padding-left:40px; padding-bottom:60px; }
	#contact #form .form-inner{max-width: 70%;}
	#contact #form .contact-button{width: auto;display: inline-block;color:#a4a4a4;background:transparent;padding:10px 15px;cursor: pointer;}
	#contact #form .contact-button:hover{background-color:#252525;}
	/* Contact Form */
	#contact #contact_form .half input,#contact #contact_form .half button{/* Old Browsers */ width: 45%; width: calc(50% - 10px); float: left; margin-right:20px; }
		@media only screen and (max-width: 640px){
			#contact #contact_form .half input,#contact #contact_form .half button{ width: 100%; }

		}
	#contact #contact_form .half input:last-child,#contact #contact_form button#submit{margin-right:0;}
	#contact #contact_form input,#contact #contact_form textarea,#contact #contact_form button{width: 100%;border:1px solid #333333;background:#232323;padding:12px 14px;text-transform: uppercase;outline: none;margin:8px 0;font-size:12px;color:#8c8c8c;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-transition: all 0.3s;-moz-transition: all 0.3s;transition: all 0.3s;}
	#contact #contact_form textarea{min-height: 150px;max-height: 150px;max-width: 100%;}
	#contact #contact_form input:hover,#contact #contact_form textarea:hover,#contact #contact_form input:focus,#contact #contact_form textarea:focus{border-color:#474747;}
	#contact #contact_form .error_warning,#contact #contact_form .error_warning:hover,#contact #contact_form .error_warning:focus{border-color:#c23b3b;}
		#contact::-webkit-input-placeholder {color: #8c8c8c;}
		#contact:-moz-placeholder { color: #8c8c8c;  }
		#contact::-moz-placeholder {  color: #8c8c8c;  }
		#contact:-ms-input-placeholder {  color: #8c8c8c;  }
		@media only screen and (max-width: 1470px){
			#contact #form .form-inner{max-width: 100%;}
			#contact h3.big_header,#contact .big_header_description,#contact h3.big_header + h1{padding-left:0; }
			#contact #form{ padding-left:20px; padding-right: 20px; }
		}
		@media only screen and (max-width: 1070px){
			#contact>div{float:none; width: 100%; }
			#contact>div#map{ height: 700px !important; }
		}
		@media only screen and (max-width: 640px){
			#contact>div#map{ height: 500px !important; }
		}
