@charset "utf-8";
/* CSS Document */
@import "css/reset.css";
/*
1. General
1.1 Headings
1.1 Transition
1.1 Text Elements
1.1 Tables
1.1 Definition Lists
1.1 Forms
1.1 Images
1.1 Widgets
1.1 Newsletter widget
2. Layout
2.1 Container
2.2 Float
3. Header
3.1 Header Type - 1
3.2 Header Type - 2
3.3 Header Type - 3
3.4 Header Type - 4
3.5 Header Type - 5
3.6 Header Type - 6
4. Parallax
5. Sliders
5.1 Parallax Slider
5.2 Mockup Slider
5.3 Grid Slider
5.4 Fixed BG Slider
5.5 Video Slider
6. Breadcrumb
7. Content
7.1 Blog
7.1.1 Blog-single
7.2 Portfolio
7.2.1 Recent Gallery
7.2.2 Portfolio Single
7.3 Twitter Parallax
7.4 Footer
7.5 Boxed Styles
8. Back To Top
9. Retina Ready
10. Loader Style
11. Style Picker
*/
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300);
@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Cairo:400,200italic,200,100,100italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800);
/*----*****---- << General >> ----*****----*/
body { font-weight:300; font-size:14px; line-height:28px; background:#fff; color:#252525; font-family: 'Cairo', sans-serif; }
*{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; }
body, html { width: 100%; height: 100%; min-height: 100%; }
html { height:100% !important; direction: rtl !important }
/*----*****---- << Headings >> ----*****----*/
h1, h2, h3, h4, h5, h6 { line-height: 30px; margin-bottom:30px; text-transform: uppercase; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color:#252525; }
h1 { font-size: 55px; font-weight: 600; }
h2 { font-size: 50px; font-weight: 600; }
h3 { font-size: 30px; font-weight: 800; }
h4 { font-size: 26px; font-weight: 800; }
h5 { font-size: 20px; font-weight: 600; }
h6 { font-size: 14px; letter-spacing: 12px; }
.main-title { text-align: center; padding-bottom: 60px; margin: 0; outline: none; position: relative; }
.sub-title { padding-bottom: 30px; text-transform: uppercase; width: 100%; }
#primary .main-title { padding-bottom: 50px; margin-bottom: 10px; }
.main-title.alignleft, .main-title.alignright, .main-title.aligncenter, .sub-title.alignleft, .sub-title.alignright, .sub-title.aligncenter { margin-bottom: 0; }
h2 span { letter-spacing: 2.5px; font-size: 14px; position:relative; width: 100%; float: left; font-weight: lighter; margin-top: 8px; }
.main-title:before { position: absolute; left: 50%; bottom: 20%; color: transparent; content: '•'; text-shadow: 0 0 transparent; font-size: 14px; -webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; }
.main-title.alignleft:before { left: 20px; right: auto; }
.main-title.alignright:before { right: 12px; left: auto; }
h2.main-title:before, h3.main-title:before, h4.main-title:before { bottom: 30%; }
h5.main-title:before, h6.main-title:before { bottom: 40%; }
.parallax-title { position: relative; }
/*----*****---- << Transition >> ----*****----*/
a, a:hover, a:focus, a:active, a:after, a:hover:after, a:before, a:hover:before, input, input:hover, li, li:hover, a i, a:hover i, a.current .icon:before, a:hover .icon:before, a .icon:before, a.current i, li:before, li:hover:before, li span, li:hover span, span:after, span:hover:after, span:before, span:hover:before, li img, li:hover img, textarea, textarea:focus,.type2-menu-icon.menu-is-open span:before, .type2-menu-icon.menu-is-open span:after, .type2-menu-icon.menu-is-open:hover span:before, .type2-menu-icon.menu-is-open:hover span:after, .type-1 #header nav#main-menu ul li a, .type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header, .type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header .main-menu, .type-1 #header-sticky-wrapper.sticky-wrapper #header, #header #menu-container, .type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header #menu-container, .type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header .container, .type-1 #header-sticky-wrapper.sticky-wrapper #header .container, .dt-sc-ico-content, .dt-sc-ico-content:hover, .dt-sc-ico-content .icon, .dt-sc-ico-content:hover .icon, .dt-sc-ico-content .icon:before, .dt-sc-ico-content:hover .icon:before, .dt-sc-ico-content .icon-bg, .dt-sc-ico-content:hover .icon-bg, .dt-sc-ico-content span.fa, .dt-sc-ico-content:hover span.fa, .dt-sc-ico-content.type2, .dt-sc-ico-content.type2:hover, .dt-sc-ico-content.type2 .icon, .dt-sc-ico-content.type2:hover .icon, .dt-sc-ico-content.type2 .icon span, .dt-sc-ico-content.type2:hover .icon span, article.blog-entry, article.blog-entry:hover, article.blog-entry .entry-thumb, article.blog-entry:hover .entry-thumb, article.blog-entry .entry-details .entry-meta, article.blog-entry:hover .entry-details .entry-meta, article.blog-entry a.read-more, article.blog-entry:hover a.read-more, article.blog-entry .entry-thumb .entry-title, article.blog-entry:hover .entry-thumb .entry-title, article.blog-entry .entry-details .entry-meta .date,article.blog-entry:hover .entry-details .entry-meta .date, article.blog-entry .entry-details .tags a i, article.blog-entry:hover .entry-details .tags a i, article.blog-entry a.read-more i, article.blog-entry:hover a.read-more i, .dt-sc-portfolio figure img , .dt-sc-portfolio figure:hover img, .dt-sc-portfolio figcaption, .dt-sc-portfolio:hover figcaption, .dt-sc-button.with-icon i.fa, .dt-sc-button.with-icon i.fa:after, .dt-sc-button.with-icon:hover i.fa, .dt-sc-button.with-icon:hover i.fa:after, .dt-sc-portfolio figcaption a span, .dt-sc-portfolio:hover figcaption a span, .dt-sc-ico-content.type4 .icon, .dt-sc-ico-content.type4:hover .icon, .dt-sc-ico-content.type4 .icon span.fa, .dt-sc-ico-content.type4:hover .icon span.fa,.dt-sc-ico-content.type4 h5, .dt-sc-ico-content.type4:hover h5, .dt-sc-pr-tb-col .dt-sc-tb-title, .dt-sc-pr-tb-col.type2.selected .dt-sc-tb-title, .dt-sc-pr-tb-col:hover .dt-sc-tb-title, .dt-sc-pr-tb-col.type2:hover .dt-sc-pr-tb-col-wrapper, .dt-sc-pr-tb-col.type2 .dt-sc-pr-tb-col-wrapper, .dt-sc-pr-tb-col.type2.selected .dt-sc-pricing-icon, .dt-sc-pr-tb-col.type2:hover .dt-sc-pricing-icon, .dt-sc-pr-tb-col.type2 .dt-sc-pricing-icon, .dt-sc-pr-tb-col.type2 .dt-sc-pricing-icon i, .dt-sc-pr-tb-col.type2.selected .dt-sc-pricing-icon i, .dt-sc-pr-tb-col.type2:hover .dt-sc-pricing-icon i, .dt-sc-team.type2:hover .dt-sc-entry-thumb .figcaption, .dt-sc-team.type2 .dt-sc-entry-thumb .figcaption, .sb-slide, #sb-site, .sb-site-container, .sb-slidebar, #secondary .sticky-wrapper.is-sticky .widget_ad_banner img, #secondary .sticky-wrapper .widget_ad_banner img, #commentform .dt-sc-button, article.blog-entry .entry-content, article.blog-entry:hover .entry-content, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame .icon i:after, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame:hover .icon i:after, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame a.current .icon i:after, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame li a i, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame li a.current i, .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame li a:hover i, ul#team-section div.team-details h5, ul#team-section div.team-details p, ul#team-section div.team-details:hover h5, ul#team-section div.team-details:hover p, article.blog-entry .entry-thumb a img, article.blog-entry:hover .entry-thumb a img, .dt-sc-ico-content.type5 .dt-sc-content:before, .dt-sc-ico-content.type5 .dt-sc-content:after, .dt-sc-ico-content.type5 h5:after, .dt-sc-ico-content.type5 h5 a,
.dt-sc-ico-content.type5:hover .dt-sc-content:before, .dt-sc-ico-content.type5:hover .dt-sc-content:after, .dt-sc-ico-content.type5:hover h5:after, .dt-sc-ico-content.type5:hover h5 a, .dt-sc-ico-content.type5:hover i.fa, .dt-sc-ico-content.type5:hover p , .dt-sc-ico-content.type5 i.fa, .dt-sc-ico-content.type5 p { -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition:all 300ms linear; }
#slider img, .wrap ul li, .view-map a, .view-map a i { -webkit-transition: all 0ms linear; -moz-transition: all 0ms linear; -o-transition: all 0ms linear; -ms-transition: all 0ms linear; transition:all 0ms linear; }
/*----*****---- << Text Elements >> ----*****----*/
a { text-decoration:none; color: #252525; }
a img{ border:none; }
strong{ font-weight: 500; }
em{ font-style: italic; }
address { display:block; margin:10px 0px 20px; }
abbr { border-bottom:1px dotted #868686; cursor:help; }
ins { background:#FFF9C0; color:#868686; }
sub, sup { font-size:75%; position:relative; vertical-align:baseline; }
sub { bottom: -3px; }
sup { top: -9px; }
p { line-height: 26px; margin-bottom: 10px; font-size: 14px; }
ul, ol, pre, code{ margin-bottom:20px; }
ul{ list-style-type: none; list-style-position:inside; direction:rtl }
ul li { padding-bottom:10px; line-height: 26px; }
ul li ul { list-style-type:disc; padding-left:20px; margin:10px 0px 0px; }
ul ul ul { margin-bottom:0px; list-style-type:circle; }
ol{ list-style-type:decimal; list-style-position:outside; padding-left:20px; padding-top:10px; }
ol li { padding-bottom:10px; font-weight: bold; }
ol li span { color: #252525; font-weight: 300; }
ol li ol { margin-bottom:0px; list-style-type:lower-alpha; }
ol ol ol { margin-bottom:0px; list-style-type:lower-roman; }
pre, code{ border-left:3px solid #d8d8cb; background-color:#e5e5d8; display:block; padding:10px 3%; font-size:11px; font-family: monospace; line-height:20px; width:94%; overflow:auto; }
hr{ background-color:#f4f4f4; border:none; height:1px; margin:30px 0; }
blockquote { display:block; padding:25px 20px; margin:0px; position:relative; clear:left; }
blockquote q { font-size:14px; line-height:28px; display:inline-block; font-style:italic; }
blockquote cite { font-style:normal; font-size:14px; line-height:30px; font-weight:400; margin:10px 0px 0px; display:block; text-align:right; }
blockquote cite span { font-size:12px; }
blockquote p { margin-bottom:0px; }
blockquote.alignleft { margin-right:20px; text-align:left; width:30%; float:left; }
blockquote.alignright { margin-left:20px; text-align:left; width:30%; float:right; }
blockquote.aligncenter { text-align:center; }
/* due to IE
margin bugs I had to made classed and apply them to div to achieve the effect of a
*/
.hr{ height:10px; width:100%; clear:both; display:block; float:left; margin:40px 0px; position:relative; z-index:1; }
.hr-border { border:4px double #D9D9D9; width:100%; clear:both; display:block; float:left; margin:50px 0px; position:relative; z-index:1; border-radius:5px; }
.hr.top, .hr-border.top { width:97%; }
.hr.top, .hr-border.top { background-position:right center; text-align:right; }
.hr.top a, .hr-border.top a { color:#999589; background:transparent; font-size:11px; line-height:16px; padding-left:5px; position:absolute; right:-21px; top:-5px; }
.hr-border.top a { top:-10px; right:-23px; }
.hr.top a:hover, .hr-border.top a:hover { color:#868686; }
.clear { float:none; clear:both; margin:0px; padding:0px; }
.float-right { float:right; }
.float-left { float:left; }
.center { width:100%; text-align:center; }
.hidden { display:none !important;}
.post-edit-link { background:#e6e5d9; color:#5a5a5a; float:right; clear:both; margin:20px 0px 20px; line-height:24px; padding:5px 15px 3px; font-size:12px; border-radius:5px; }
.post-edit-link:hover { color:#ffffff; text-shadow:0px 1px 0px #0e4b6e; }
.page-link { float:left; width:100%; clear:both; margin:10px 0px 0px; padding:0px; }
.page-link a { float:left; }
.page-link a span { float:left; background:#ffffff; margin:0px 5px; width:40px; height:40px; color:#37251b; line-height:40px; border-radius:40px; text-align:center; cursor:pointer; }
.page-link span, .page-link a span:hover { float:left; margin:0px 5px; width:40px; height:40px; color:#37251b; background:#ac9d8e; display:inline-block; border-radius:40px; line-height:40px; text-align:center; }
/*----*****---- << Tables >> ----*****----*/
table{ border-collapse:separate; border-spacing:0; width:100%; clear:both; border:1px solid #999999; border-bottom:0px; }
th{ color:#252525; padding:15px; font-size:14px; line-height:normal; font-weight:600; text-transform:uppercase; text-align:center; }
td{ background:#f6f6f6; font-size:14px; line-height:normal; text-align:center; padding:13px 15px; }
.alternate td { background:#fff; }
th, td { border-bottom:1px solid #999999;border-right:1px solid #999999; }
td:last-child, th:last-child { border-right: none;}
table.no-border, table.no-border tr, table.no-border td, table.no-border th { border: none; }
/*----*****---- << Definition Lists >> ----*****----*/
dl { margin:0px 20px; }
dl.gallery-item { margin:0px; }
.gallery-caption { margin-bottom:10px; }
.gallery-item img { border:10px solid #e5e5d8 !important; }
dt { font-weight:bold; font-size:14px; margin-bottom:10px; }
dd { margin-bottom:20px; line-height:20px; }
/*----*****---- << Forms >> ----*****----*/
label{ color:#ac9d8e; }
label span{ color:#b4b4b4; }
label span.required { color:#ff0000; }
fieldset{ border:1px solid #efefef; padding:15px; margin:0 0 20px 0; }
legend{ font-weight: bold; }
input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="range"], input[type="date"], textarea, input.text, input[type="search"] { background: none; border-bottom:1px solid #464646; color:#d7d7d7; padding:20px 15px; display:block; font-size:16px; margin:0; width:100%; box-sizing:border-box; -webkit-appearance:none; -moz-appearance:none; appearance:none; font-family: 'Lato', sans-serif; text-transform:none; }
textarea { margin-bottom: 20px; }
textarea { height:135px; overflow:auto; }
form .dt-sc-one-half textarea { height:123px; }
form .dt-sc-one-half p { margin-bottom:15px; }
select{ background:#ffffff; border:1px solid #e5e5d8; padding:10px; margin:10px 0 10px; display:block; width:100%; }
select option { background:#ffffff; }
select { height:50px; background-color:#ffffff; color:#6a695e; border:1px solid #e5e5d8; width:100%; margin:0px 0px 30px; padding:15px 10px 14px 15px; -webkit-appearance:none; -moz-appearance:none; appearance:none; cursor:pointer; }
.selection-box { position:relative; clear:both; }
.selection-box:before, .selection-box:after { content:""; pointer-events:none; position:absolute; }
.selection-box:before { z-index:1; right:17px; top:3px; bottom:0px; height:0px; margin:auto; border-left:7px solid transparent; border-right:7px solid transparent; border-top:7px solid #fff; }
.selection-box:after { width:50px; height:50px; right:0px; top:0px; }
.selection-box select { background:#ffffff; }
input[type="submit"], button, input[type="button"], input[type="reset"] { float:right; font-size:16px; font-weight:bold; line-height:normal; display:inline-block; margin:10px 0px 0px; cursor:pointer; outline:none; position:relative; z-index:1; color:#ffffff; position:relative; padding:11px 20px; text-transform:uppercase; -webkit-appearance: none; }
span.error-msg { color: #ff0000; }
input.error, textarea.error { border-color:#ff0000 !important; }
.full-contact span.success-msg, .full-man span.success-msg { color:#fff; }
span.success-msg { color:#01850a; font-weight: bold; font-size: 20px; }
/*----*****---- << Images >> ----*****----*/
img { max-width:100%; }
.ie8 img { width:auto; }
.post-content input[type="submit"] { float:none; }
.wp-caption { background:#ebebeb; border:1px solid #d6d5c9; margin-bottom:10px; margin-top:10px; padding:7px; text-align:center; }
.wp-caption img { display:block; margin: 0 auto; }
.wp-caption .wp-caption-text { text-align:center; padding-top:0px; margin:0px; }
.wp-caption.alignnone { clear:both; }
img.size-auto, img.size-large, img.size-full, img.size-medium { max-width:99.6%; height: auto; }
.alignleft, img.alignleft { display: inline; float: left; text-align:left; }
.alignright, img.alignright { display: inline; float: right; text-align: right; }
.aligncenter, img.aligncenter { clear: both; display: block; margin-left: auto; margin-right: auto; text-align:center; }
.alignleft, .alignright, .aligncenter, .alignnone, img.alignleft, img.alignright, img.aligncenter { margin-bottom:20px; }
.widget img.size-auto, .widget img.size-large, .widget img.size-full, .widget img.size-medium { width:95.6%; }
.column iframe, iframe, embed, iframe, object, video { max-width:100%; }
.shadow { margin:-20px 0px 0px; width:100%; float:left; }
/*----*****---- << Widgets >> ----*****----*/
.widget { float:left; width:100%; padding:0px 0px 50px; margin:0px; }
.widget .widgettitle { position:relative; display:inline-block; width:100%; }
.widget .widgettitle .main-title { position:relative; text-transform:capitalize; font-size:22px; float:left; clear:both; background:#fff; margin-bottom: 0px; padding-bottom: 50px; }
.secondary-sidebar .widget .widgettitle { font-weight:bold; font-size:22px; text-transform:uppercase; }
.widget ul { float:left; width:100%; margin:0px; padding:0px; }
.widget ul li { display:block; clear:both; }
.widget ul li a { color:#252525; display:block; }
.widget ul ul { margin-top:10px; }
.widget ul li { position:relative; padding:0px 0px 0px 25px; }
.widget ul li:before { font-family:FontAwesome; font-style:normal; font-weight:normal; text-decoration:inherit; font-size:16px; position:absolute; top:1px; left:0px; content: "\f0c1"; color:#4d4d4d; }
.widget.widget_categories ul li, .widget.widget_archive ul li { padding-left: 25px; line-height:35px; border-bottom:1px solid; padding-bottom: 5px;margin-bottom: 5px; }
.widget.widget_categories ul li:before { content:"\f105"; left:10px; }
.widget.widget_categories ul li span, .widget.widget_archive ul li span { position: absolute; right: 0; bottom: 0; width: 25px; height: 25px; border: 1px solid #252525; border-bottom: none; float: left; line-height: 21px; text-align: center;
font-size: 14px; }
.widget.widget_categories ul li a { display:block; }
.widget.widget_tag_cloud .tagcloud a, .widget.widget_product_tag_cloud .tagcloud a { color:#252525; margin:0px 1px 10px 0px; text-transform:lowercase; display:inline-block; padding:5px 20px; position:relative; }
.widget.widget_popular_entries ul li { padding:0px 0px 25px; border:none; line-height:normal; }
.widget.widget_popular_entries ul li:last-child { padding:0px; }
.widget.widget_popular_entries ul li .entry-thumb { float:left; margin: 0px 0px 10px 0px; padding:0px; width: 100%; }
.widget.widget_popular_entries ul li .entry-thumb img { width: 100%; }
.widget.widget_popular_entries ul li h5 { font-size: 16px; line-height:20px; text-transform:none; margin:0px 0px 8px 0px; display:inline-block; }
.widget_popular_entries.widget li { padding:0; }
.widget_popular_entries.widget li:before { content:none; }
/*----*****---- << Newsletter widget >> ----*****----*/
.widget.widget_search #searchform { position:relative; float:left; width:100%; }
.widget.widget_search #searchform input[type="text"] { color: #252525; min-height: 50px; float:left; padding:15px; margin:0; width: 65%; text-transform:capitalize; border: 1px solid; border-right: none; font-size: 13px; }
.widget.widget_search #searchform input[type="submit"] { margin:0; min-height: 50px; padding:15px; width: 35%; color: #252525; font-weight: 400; font-size: 14px; float: left; }
.widget.widget_search #searchform input[type="submit"]:hover { background: #fff; }
/*----*****---- << Layout >> ----*****----*/
/*----*****---- << Container >> ----*****----*/
.container { width:1200px; margin:0 auto; position:relative; clear:both; }
.wrapper, .fullwidth-section { clear:both; width:100%; margin:0px; padding:0px; float:right; }
#main { float:right; clear:both; margin:0px; padding:0px; width:100%; height: 100%; }
#main .banner { display: table; height: 100%; }
#primary, #secondary { padding-top: 150px; }
#primary { width:870px; float:right; }
#primary.with-right-sidebar { margin-right:30px; }
#primary.with-left-sidebar { margin-left:30px; float:left; }
#primary.content-full-width { margin-left:0; margin-right:0; width:100%; }
#secondary { float:left; width:270px; }
#secondary .sticky-wrapper { width: 100%; float: right; }
#secondary .sticky-wrapper.is-sticky .widget_ad_banner img { margin-top: 100px;}
/*----*****---- << Float >> ----*****----*/
.wrapper, #header, .banner, .shadow, .main-title, .content, .content-main, footer, .copyright, .location iframe { float:left; width:100%; }
.wrapper, .inner-wrapper, #main { width: 100%; height: 100%; }
.wrapper.inner-page { height: auto; }
.wrapper.inner-page #main { padding-bottom: 150px; background: #fff; }
.wrapper.inner-page #main.portfolio-detail { padding-bottom: 0px; }
.content { background: #fff; }
.animate { visibility:hidden; }
/*----*****---- << Header >> ----*****----*/
#header { display: block; margin: 0; padding: 0; width: 100%; z-index: 999999; }
#home.content { display: table; display:block\0/; height: 100%; overflow: hidden; position: relative; vertical-align: middle; width: 100%; padding-bottom:0; }
.dt-menu-toggle { color: #ffffff; cursor: pointer; display: none; font-weight: bold; padding: 10px 15px; text-transform: uppercase; border: 1px solid rgba(255,255,255,0.7); }
.dt-menu-toggle i { display: inline-block; float: right; font-size: 18px; margin-right: 4px; margin-top: 4px; position: relative; }
.mockup-slider #home.content, .grid-slider #home.content { height: auto; }
/*.type-1 .grid-slider #home.content, .type-5 .grid-slider #home.content, #sb-site.grid-slider #home.content { height: 100%; }*/
.type-3 .grid-slider #home.content { margin-top: 30px; }
.grid-slider.index-3 #home.content { margin-bottom: -1.5%; }
#header .container { backface-visibility: hidden; }
#header #menu-container { float: left; width: 100%; padding: 28px 0px; }
#logo { float: right; }
#logo a, .logo a { font-family: 'Open Sans', sans-serif; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 30px; padding: 5px 10px 6px; float: left; }
#logo a span, .logo a span { margin: 0 -7px; }
.logo { float: none; display: inline-block; }
.logo a { padding: 5px 10px 8px }
.logo.logostatic { float: right; width: 100%; position: fixed; z-index: 21; top: 40px; left: 40px; }
.logo.logostatic a { background: #252525; }
@-moz-document url-prefix() { #header .main-menu #logo a { padding: 5px 10px 8px; } }
/*----*****---- << Header Type - 1 >> ----*****----*/
.type-1 #header { background:none; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.type-1 #header #logo a { z-index:9999999; }
.type-1 #header nav#main-menu ul { float:left; padding: 0; margin: 0; }
.type-1 #header nav#main-menu ul li { list-style: none; float: right; padding: 0; margin: 0; }
.type-1 #header nav#main-menu ul li a { position: relative; display: inline-block; margin: 14px 20px 12px; color: #fff; text-transform: uppercase; font-size: 18px; font-weight:bold }
.type-1 #header nav#main-menu ul li a:hover, .type-1 #header nav#main-menu ul li a:focus { outline: none; }
.type-1 #header nav#main-menu ul li a:before { position: absolute; top: 60%; left: 50%; color: transparent; content: '•'; text-shadow: 0 0 transparent; font-size: 10px; -webkit-transition: text-shadow 0.3s, color 0.3s;
-moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; }
.type-1 #header-sticky-wrapper.sticky-wrapper { height:auto !important; }
.type-1 #header-sticky-wrapper.sticky-wrapper #header { overflow: hidden; width: 100%; position: fixed; }
.type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header { background: #252525; }
.type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header #menu-container { padding: 10px 0px; }
.type-1 #header-sticky-wrapper.sticky-wrapper.is-sticky #header .container { width: 98%; }
.inner-page .type-1 #header-sticky-wrapper.sticky-wrapper { height: 110px !important; background: #252525; }
#scrolldown { bottom: 0; right:0; position: absolute; text-align: center; width: 100%; padding: 10px; font-size: 20px; background: #252525; }
#scrolldown i { margin: 0 10px; }
/*----*****---- << Parallax >> ----*****----*/
.dt-sc-parallax-section { background:url(images/sarrabouhlel-slide-01.jpg) fixed no-repeat; background-attachment:fixed; background-color: #000000; background-repeat:no-repeat; color:#478bca; padding:115px 0px; border-top: 4px solid;
border-bottom: 4px solid; position: relative; }
.dt-sc-parallax-section .container { z-index: 9999; top:50px; right:10px }
::i-block-chrome, .dt-sc-parallax-section { background-attachment: inherit; }
/*----*****---- << Sliders >> ----*****----*/
/*----*****---- << Parallax Slider >> ----*****----*/
.banner .container { position: inherit; }
.banner .caption { width: 100%; text-align: center; position: absolute; top: 40%; left: 85%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: table-cell; vertical-align:bottom; z-index: 9999; }
.banner.dt-sc-parallax-section { background-position:top; width: 100%; height: 100%; border: none; position: static; }
#sb-site { height:100%; }
#sb-site .banner.dt-sc-parallax-section { display:table; }
#sb-site .banner .container { height: 100%; width: 100%; min-height: 100%; display: table; }
/*----*****---- << Mockup Slider >> ----*****----*/
.wrap img, .screen, .mobile { display: none\9; }
.wrap { margin: 0 auto -4px; width: 100%; height: 0; padding-top: 58%; overflow: hidden; position: relative; }
.wrap .banner { display: none; }
.mockup { position: absolute; top: 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; }
.mockup::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.mockup__img { display: block; width: 1900px; max-width: inherit; }
.screen, .mobile { position: absolute; overflow: hidden; z-index: 100; background: #333; outline: 1px solid transparent; -webkit-transform-origin: 0px 0px 0px; transform-origin: 0px 0px 0px; }
.screen { width: 1280px; height: 800px; top: 10px; left: 600px;
-webkit-transform: matrix3d(0.452711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1);
transform: matrix3d(0.452711184975633, 0.139863853789781, 0, -0.000095269465775677, -0.00319943882448498, 0.673512589529646, 0, 0.000049453592261685, 0, 0, 1, 0, 382, 8, 0, 1); }
.mobile { width: 320px; height: 480px; top: 850px; left: 525px;
-webkit-transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1);
transform: matrix3d(0.442778970432011, 0.112834189093484, 0, -0.000053669440509915, -0.344035499291785, 0.346595156594271, 0, -0.000094674614416115, 0, 0, 1, 0, 105, 15, 0, 1); }
.slideshow { padding: 0; margin: 0; width: 100%; height: 100%; list-style-type: none; }
.slideshow__item { width: 100%; height: 100%; position: absolute; overflow: hidden; pointer-events: none; z-index: 1; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
.slideshow__item.current{ pointer-events: auto; z-index: 100; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
.slideshow img { width: 100%; }
.slideshow__item.in--next { -webkit-animation: inNext 0.5s forwards ease-in-out; animation: inNext 0.5s forwards ease-in-out; }
.slideshow__item.out--next { -webkit-animation: outNext 0.5s forwards ease-in-out; animation: outNext 0.5s forwards ease-in-out; }
.slideshow__item.in--prev { -webkit-animation: inPrev 0.5s forwards ease-in-out; animation: inPrev 0.5s forwards ease-in-out; }
.slideshow__item.out--prev { -webkit-animation: outPrev 0.5s forwards ease-in-out; animation: outPrev 0.5s forwards ease-in-out; }
@-webkit-keyframes inPrev {
0% { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); }
100% {-webkit-transform: none; transform: none; }
}
@keyframes inPrev {
0% { -webkit-transform: translate3d(-30%, 0, 0); transform: translate3d(-30%, 0, 0); }
100% { -webkit-transform: none; transform: none; }
}
@-webkit-keyframes inNext {
0% { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); }
100% { -webkit-transform: none; transform: none; }
}
@keyframes inNext {
0% { -webkit-transform: translate3d(30%, 0, 0); transform: translate3d(30%, 0, 0); }
100% { -webkit-transform: none; transform: none; }
}
@-webkit-keyframes outPrev {
100% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); }
}
@keyframes outPrev {
100% { -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0, 0); }
}
@-webkit-keyframes outNext {
100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); }
}
@keyframes outNext {
100% { -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0);
}
}
/*----*****---- << Grid Slider >> ----*****----*/
#grid-slider { margin: 0; height: auto; width: 100%; }
#grid-slider ul { list-style: none; display: block; width: 100%; margin: 0; padding: 0; zoom: 1; }
#grid-slider ul:before, .grid-slider ul:after { content: ''; display: table; }
#grid-slider ul:after { clear: both; }
#grid-slider ul li { -webkit-perspective: 400px; -moz-perspective: 400px; -o-perspective: 400px; -ms-perspective: 400px; perspective: 400px; margin: 0; padding: 0; float: left; position: relative; display: block; overflow: hidden;
background:url(http://placehold.it/1920x1200&text=Banner+Image); }
#grid-slider ul li a { display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -o-backface-visibility: hidden; -ms-backface-visibility: hidden;
backface-visibility: hidden; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -o-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%; background-size: 100% 100%; background-position: center center; background-repeat: no-repeat; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
.grid-slider-overlay, .slider-overlay, .mockup-slider-overlay { position: absolute; float: left; text-align: center; right: 0; left: 0; margin: 0px auto; top: 0; vertical-align: middle; height: 100%; width: 100%; background: rgba(0,0,0,0.5);
color: #fff; z-index: 20; }
.grid-slider-content { width: 90%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: table-cell; vertical-align: middle; }
.mockup-slider-overlay { z-index: 999; }
#grid-slider .dt-sc-button.type1, .banner .dt-sc-button.type1 { margin: 0; }
/*----*****---- << Fixed BG Slider >> ----*****----*/
.banner.fixed-background { background:url(http://placehold.it/1920x1200&text=Parallax+Image) fixed no-repeat; width: 100%; height: 100%; background-attachment:fixed; background-position: center; display: table; }
.banner.fixed-background h1, .banner.fixed-background h2, .banner.fixed-background h3, .banner.fixed-background h4, .banner.fixed-background h5, .banner.fixed-background h6 { color: #fff; }
/*----*****---- << Video Slider >> ----*****----*/
video.dt-sc-video { width: 100%; float: left; }
::i-block-chrome, #home.content .video-full-width , ::i-block-chrome, #home.video-banner .fullwidthbanner-container , ::i-block-chrome, .video-banner.video-full-width { height:100%; }
::i-block-chrome, .dt-sc-video-container { position:absolute; }
::i-block-chrome, .dt-sc-video-container .dt-sc-fillWidth{ position:absolute; }
::i-block-chrome, .fullwidthbanner-container.banner-video{ background:url(http://placehold.it/1920x1200&text=Parallax+Image) fixed no-repeat; background-size: 100%; height: 100%;text-align: center;position: absolute;width: 100%;top: 0%; }
::i-block-chrome, .banner-video .video-full-width { display: table; width: 100%; height: 100%; min-height: 100%; overflow: hidden; vertical-align: middle; z-index: 1; position:relative; }
::i-block-chrome, .banner-video .dt-sc-video-container, ::i-block-chrome, .banner-video .dt-sc-video-container .dt-sc-fillWidth { left: 0; min-height: 100%; min-width: 100%; overflow: hidden; position: absolute; top: 0; position:static\0/; }
::i-block-chrome, .banner-video .dt-sc-video-container video { max-width:inherit; float:left; }
/*----*****---- << Breadcrumb >> ----*****----*/
.breadcrumb { text-align: center; }
.breadcrumb.dt-sc-parallax-section { padding: 80px 0px; border-top: none; }
.breadcrumb h1 { margin-bottom: 0; }
/*----*****---- << Content >> ----*****----*/
/*----*****---- << Portfolio >> ----*****----*/
.dt-sc-portfolio { position:relative; overflow:hidden; }
.dt-sc-portfolio.column.no-space { margin-bottom:0px;}
.column.no-space .dt-sc-portfolio { margin-bottom:0px; }
.dt-sc-portfolio-container { float:left; clear:both; margin: 0px auto; padding: 0px; width: 80%; z-index: 21; }
.dt-sc-portfolio figure img { float:left; -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }
.dt-sc-portfolio figure:hover img { -webkit-transform: scale(1.4); -moz-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); }
.dt-sc-portfolio figcaption { position:absolute; float:left; text-align:center; right:0; left:0; margin:0px auto; top: 0; opacity: 0; vertical-align:middle; height: 100%; width: 100%; background: rgba(0,0,0,0.6); }
.dt-sc-portfolio figcaption h6 { width: 90%; text-align: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); display: table-cell; vertical-align: middle;
-webkit-transition-delay: 1s; transition-delay: 1s; opacity: 0; -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; transition:all 1s linear; font-family: 'Cairo' }
.dt-sc-portfolio:hover figcaption h6 { -webkit-transition-delay: 1s; transition-delay: 1s; opacity: 1; -webkit-transition:all 1s linear; -moz-transition:all 1s linear; -ms-transition:all 1s linear; transition:all 1s linear; }
.dt-sc-portfolio figcaption h6 a { color: #ffffff; position: relative; float: none; display: inline-block; }
.dt-sc-portfolio figcaption a span{ position: absolute; color: #fff; z-index: 99; }
.dt-sc-portfolio figcaption a.zoom span { top: -60px; left: -60px; -webkit-transition-delay: .25s; transition-delay: .25s; }
.dt-sc-portfolio figcaption a.like span { top: -60px; right:-60px; -webkit-transition-delay: .45s; transition-delay: .45s; }
.dt-sc-portfolio figcaption a.comment span { bottom: -60px; left: -60px; -webkit-transition-delay: .65s; transition-delay: .65s; }
.dt-sc-portfolio figcaption a.view span { bottom: -60px; right: -60px; -webkit-transition-delay: .85s; transition-delay: .85s; }
.dt-sc-portfolio:hover figcaption a.zoom span { top: 12px; left: 12px; -webkit-transition-delay: .25s; transition-delay: .25s; }
.dt-sc-portfolio:hover figcaption a.like span { top: 12px; right: 12px; -webkit-transition-delay: .45s; transition-delay: .45s; }
.dt-sc-portfolio:hover figcaption a.comment span { bottom: 12px; left: 12px; -webkit-transition-delay: .65s; transition-delay: .65s; }
.dt-sc-portfolio:hover figcaption a.view span { bottom: 12px; right: 12px; -webkit-transition-delay: .85s; transition-delay: .85s; }
.dt-sc-portfolio figcaption a span:before { color: #252525; }
.dt-sc-portfolio figcaption a.zoom span:before { margin-left: 10px; margin-top: 10px; float: left; }
.dt-sc-portfolio figcaption a.comment span:before { margin-left: 10px; margin-bottom: 10px; float: left; }
.dt-sc-portfolio figcaption a.like span:before { margin-right: 10px; margin-top: 10px; float: left; }
.dt-sc-portfolio figcaption a.view span:before { margin-right: 10px; margin-bottom: 10px; float: left; }
.dt-sc-portfolio figcaption a.zoom span:after { position: absolute; top: -5px; left: -5px; content:""; display: block; width: 0; height: 0; border-top: 75px solid; border-right: 75px solid transparent; z-index: -1; overflow:visible; }
.dt-sc-portfolio figcaption a.like span:after { position: absolute; top: -5px; right: -5px; content:""; display: block; width: 0; height: 0; border-top: 75px solid; border-left: 75px solid transparent; z-index: -1; overflow:visible; }
.dt-sc-portfolio figcaption a.comment span:after { position: absolute; bottom: -5px; left: -5px; content:""; display: block; width: 0; height: 0; border-bottom: 75px solid; border-right: 75px solid transparent; z-index: -1; overflow:visible; }
.dt-sc-portfolio figcaption a.view span:after { position: absolute; bottom: -5px; right: -5px; content:""; display: block; width: 0; height: 0; border-bottom: 75px solid; border-left: 75px solid transparent; z-index: -1; overflow:visible; }
.dt-sc-portfolio figcaption a.zoom:hover span:after, .dt-sc-portfolio figcaption a.like:hover span:after, .boxed .dt-sc-portfolio figcaption a.zoom:hover span:after, .boxed .dt-sc-portfolio figcaption a.like:hover span:after {
border-top-color: #252525; }
.dt-sc-portfolio figcaption a.view:hover span:after, .dt-sc-portfolio figcaption a.comment:hover span:after, .boxed .dt-sc-portfolio figcaption a.view:hover span:after, .boxed .dt-sc-portfolio figcaption a.comment:hover span:after {
border-bottom-color: #252525; }
.dt-sc-portfolio:hover figure figcaption, .dt-sc-portfolio figure.cs-hover figcaption { opacity: 1; filter: alpha(opacity=100); }
.dt-sc-portfolio figcaption h6 a:before { position: absolute; top: -5px; left: 0; right: 0; margin: 0px auto; width: 0px; height: 1px; content: ""; opacity: 0; z-index: -1; }
.dt-sc-portfolio figcaption h6 a:after { position: absolute; bottom: -5px; left: 0; right: 0; margin: 0px auto; width: 0px; height: 1px; content: ""; opacity: 0; z-index: -1; }
.dt-sc-portfolio figcaption h6 a:hover:before, .dt-sc-portfolio figcaption h6 a:hover:after { width: 40px; opacity: 1; }
.dt-sc-sorting-container { border-left: 0 none; clear: both; display: inline-block; float: left; line-height: normal; margin: 60px 0; padding: 0; text-align: center; width: 100%; }
.dt-sc-sorting-container a.dt-sc-button.type1 { margin: 0 2px; }
/* ---- isotope ---- */
.isotope { width:100%;}
/* clear fix */
.isotope:after { content: ""; display: block; clear: both; }
/* ---- .item ---- */
.dt-sc-portfolio.width1 { width: 14.96%; }
.dt-sc-portfolio.width2 { width: 16.96%; }
.dt-sc-portfolio.width3 { width: 24.96%; }
.dt-sc-portfolio.width4 { width: 33.96%; }
.dt-sc-portfolio.width5 { width: 49.99%; }
.dt-sc-portfolio img { max-width:100%; width:100%;}
.ajax-portfolio-details { position:relative; width:100%; float:left; margin:0px; padding:0px; }
.project-details { float:left; clear:both; width:100%; }
.project-details p a:hover { color:#878787; }
.ajax-controls .ajax-close { position:absolute; top:0px; right:0px; border:1px solid #dddddd; width:38px; height:38px; text-align:center; }
.ajax-controls .ajax-close .fa { font-size:24px; line-height:38px; }
.ajax-controls .ajax-close:hover { color:#ffffff; }
.ajax-controls { float:left; margin:20px 0px 0px; clear:both; width:100%; }
.ajax-controls .ajax-previous { float:left; }
.ajax-controls .ajax-next { float:right; }
.ajax-controls .fa { font-size:12px; }
.ajax-controls .ajax-previous .fa { margin-right:3px; }
.ajax-controls .ajax-next .fa { margin-left:3px; }
.ajax-controls a { color:#868686; }
.isotope-hidden { display:none !important; }
.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; }
.isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; }
.isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: top, left, opacity;
transition-property: transform, opacity; }
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s;
transition-duration: 0s; }
/*----*****---- << Recent Gallery >> ----*****----*/
.service-sliders { width: 100%; float: left; }
.recent-gallery-container { float: left; width: 100%; }
.recent-gallery-container .bx-wrapper { position:relative; margin-bottom: -8px; }
.recent-gallery li { display: block; padding: 0; }
.recent-gallery-container .bx-controls a { bottom: 0; font-size: 0; height: 40px; margin: auto; position: absolute; top: 0; width: 40px; z-index: 1; text-align: center;}
.recent-gallery-container .bx-controls a.bx-prev { background: url(images/prev-arrow.png) no-repeat rgba(0,0,0,0.4); left: 10px; background-size: 50%; background-position: center; }
.recent-gallery-container .bx-controls a.bx-next { background: url(images/next-arrow.png) no-repeat rgba(0,0,0,0.4); right: 10px; background-size: 50%; background-position: center; }
.recent-gallery-container #bx-pager { display: inline; float: left; margin: 0; padding: 0; text-align: center; width: 100%; position: absolute; bottom: 10px; }
.recent-gallery-container #bx-pager a { cursor: pointer; display: inline-block; line-height: 0; margin: 0 5px; position: relative; width: 12%; }
.recent-gallery-container #bx-pager a img { width: 100%; float: left; }
.recent-gallery-container #bx-pager a.active:before { content: ""; height: 100%; left: 0; position: absolute; top: 0; width: 100%; display: block; }
.recent-portfolio { float: left; width: 100%; position: relative; }
.recent-portfolio .product-carousel .fa { font-size: 28px; }
/*----*****---- << Portfolio Single >> ----*****----*/
.recent-gallery-container { width: 100%; float: left; }
.dt-sc-project-details h5 { text-align:left; }
.dt-sc-project-details ul { float:left; width:100%; margin:0px; list-style-type:none; }
.dt-sc-project-details ul.project-details li { width:100%; }
.dt-sc-project-details ul li { float:left; display:block; }
.dt-sc-project-details ul li p { margin: 0; }
.dt-sc-project-details ul li p a { border-bottom: 1px solid rgba(0,0,0,0); }
.dt-sc-project-details ul li p a:hover { border-color: rgba(0,0,0,0.5); }
.dt-sc-project-details ul li p strong { margin-right: 5px; }
.dt-sc-project-details ul li span { width: 20px; }
.dt-sc-project-details ul li:last-child { background:none; }
.dt-sc-project-details ul li.date p { font-size:22px; display:inline-block; *display:inline; zoom:1; margin:0px 3px 0px 0px; }
.dt-sc-project-details ul li.date span { font-size:11px; display:inline-block; *display:inline; zoom:1; text-transform:uppercase; }
.dt-sc-project-details ul li.date .icon-calendar { margin-right:0px; }
.dt-sc-project-details ul li.author { margin:0px 15px 0px 0px; float:left; }
.dt-sc-project-details ul li.author, .project-details ul li.tags a { font-weight:bold; color:#e96666; }
.dt-sc-project-details ul li.tags a:hover { color:#3d3d3d; }
.dt-sc-project-details ul li.website-link { font-weight:bold; }
.dt-sc-project-details ul li .icon-user, .project-details ul li .icon-tag, .project-details ul li .icon-link, .project-details ul li .icon-calendar { color:#2e2a2b; margin-right:5px; }
.dt-sc-post-pagination { width: 100%; float: left; border: 1px solid; margin-top: 30px; }
.dt-sc-post-pagination a.dt-sc-button.type1 { margin: 0; border-top: none; border-bottom: none; }
.dt-sc-post-pagination .dt-sc-button.type1.prev-post i.fa:after { right: 33px; left: auto; }
.dt-sc-post-pagination .dt-sc-button.type1.prev-post:before { -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; }
.dt-sc-post-pagination a.prev-post { border-left: none; }
.dt-sc-post-pagination a.next-post { border-right: none; float: right; }
/*----*****---- << Twitter Parallax >> ----*****----*/
.counter-parallax.dt-sc-parallax-section { padding: 75px 0px; }
.counter-parallax.dt-sc-parallax-section, .twitter-parallax.dt-sc-parallax-section, .intro-parallax.dt-sc-parallax-section,
.client-parallax.dt-sc-parallax-section, .service-parallax.dt-sc-parallax-section { background:url(images/sarrabouhlel-slide-03.jpg) fixed no-repeat; }
.counter-parallax, .twitter-parallax, .intro-parallax, .client-parallax { position: relative; }
::i-block-chrome, .counter-parallax,
::i-block-chrome, .twitter-parallax,
::i-block-chrome, .intro-parallax,
::i-block-chrome, .client-parallax, ::i-block-chrome, .service-parallax { position: static; }
.twitter-parallax { text-align: center; padding: 60px 0 40px; }
.twitter-parallax .twitter-icon { width: 50px; height: 50px; line-height: 50px; float: none; display: inline-block; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin-bottom: 30px; }
.twitter-parallax .twitter-icon i.fa-twitter { width: 80%; font-size: 20px; display: inline-block; margin-top: 14px;transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); color: #252525; }
.twitter-parallax .latest-tweets { display:inline-block; width:100%;}
.twitter-parallax .latest-tweets .tweet_list { text-align:center !important; list-style:none; }
.twitter-parallax .latest-tweets .tweet_text { font-size: 24px; font-weight: normal; line-height: normal; font-weight: normal; display:inline-block; width: 90%; }
.twitter-parallax .latest-tweets span.tweet_time a { font-size: 20px; line-height:36px; margin-top:14px; display: inline-block; font-weight:normal; float: none; text-align: right; position: relative; }
.twitter-parallax .latest-tweets span.tweet_time a:before { content: ""; display: block; position: absolute; left: 0; bottom: 0; height: 1px; width: 51%; }
.twitter-parallax .latest-tweets span.tweet_time a:after { content: ""; display: block; position: absolute; right: 0; bottom: 0; height: 1px; width: 51%; }
.twitter-parallax .latest-tweets span.tweet_time a:hover:before { width: 5%; }
.twitter-parallax .latest-tweets span.tweet_time a:hover:after { width: 5%; }
/*----*****---- << Footer >> ----*****----*/
.view-map { width: 100%; float: left; text-align: center; position: relative; }
.view-map a { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 50px solid #252525; top: -50px; position: absolute; right: 0; left: 0; margin: 0px auto; }
.view-map a i { color: #fff; font-size: 20px; line-height: 70px; margin-left: -5px; }
.view-map.active a i { color: #252525; }
footer { background: #252525; width: 100%; float: left; }
.dt-sc-contact-form, .dt-sc-copyrights { float: left; width: 100%; position: relative; }
.dt-sc-contact-form:before { position: absolute; width: 1px; height: 380px; right: auto; left: -5%; top: -15px; margin: 0px auto; display: block; content: ""; background: #464646; }
.dt-sc-contact-info { color: #fff; text-align: left; margin-bottom: 35px; position: relative; padding-bottom: 10px; }
.dt-sc-contact-info:after { position: absolute; width: 75px; height: 1px; left: 0; bottom: -10px; margin: 0px auto; display: block; content: ""; }
.dt-sc-contact-info:last-child:after { content: none; }
.dt-sc-contact-info p { width: 90%; }
.dt-sc-contact-info a { color: #fff; }
.dt-sc-contact-form input[type="submit"] { width: 100%; color: #252525; padding: 15px 0px; font-size: 20px; }
.dt-sc-contact-form input[type="submit"]:hover { background: #fff; }
.dt-sc-contact-info h5.sub-title { padding-bottom: 10px; }
.dt-sc-contact-info i { float: left; margin-right: 10px; margin-top: 6px; font-size: 16px; }
#dt-contact-map { border-top: 4px solid; display: none; height: 541px; margin: 0 auto; width: 100%; position:relative; overflow:hidden; }
#dt-contact-content { padding: 80px 0px; width: 100%; float: left; }
.dt-sc-copyrights { padding: 15px 0px; }
.dt-sc-copyrights p { margin: 0; text-align:center }
.dt-sc-copyrights p a { border-bottom: 1px solid rgba(0,0,0,0); }
.dt-sc-copyrights p a:hover { border-color: rgba(0,0,0,0.5); }
.dt-sc-copyrights .dt-sc-social-icons { float: right; }
.dt-sc-social-icons a{ float: none; position: static; display: inline-block; width: 25px; height: 25px; line-height: 25px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); margin-right: 15px;
background: #fff; }
.dt-sc-social-icons a i { float: none; position: static; color: #252525; display: inline-block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); width: 25px; height: 25px;
line-height: 25px; font-size: 14px; text-align: center; }
.dt-sc-social-icons a:hover i { color: #fff; }
.dt-sc-social-icons a.facebook:hover, ul#team-section li p a.facebook:hover { -webkit-box-shadow: inset -30px 0 0 0 #3b5998; -moz-box-shadow: inset -30px 0 0 0 #3b5998; box-shadow: inset -30px 0 0 0 #3b5998; }
.dt-sc-social-icons a.twitter:hover, ul#team-section li p a.twitter:hover { -webkit-box-shadow: inset -30px 0 0 0 #55acee; -moz-box-shadow: inset -30px 0 0 0 #55acee; box-shadow: inset -30px 0 0 0 #55acee; }
.dt-sc-social-icons a.google:hover, ul#team-section li p a.google:hover { -webkit-box-shadow: inset -30px 0 0 0 #dd4b39; -moz-box-shadow: inset -30px 0 0 0 #dd4b39; box-shadow: inset -30px 0 0 0 #dd4b39; }
.dt-sc-social-icons a.pinterest:hover, ul#team-section li p a.pinterest:hover { -webkit-box-shadow: inset -30px 0 0 0 #cc2127; -moz-box-shadow: inset -30px 0 0 0 #cc2127; box-shadow: inset -30px 0 0 0 #cc2127; }
.dt-sc-social-icons a.youtube:hover, ul#team-section li p a.youtube:hover { -webkit-box-shadow: inset -30px 0 0 0 #e52d27; -moz-box-shadow: inset -30px 0 0 0 #e52d27; box-shadow: inset -30px 0 0 0 #e52d27; }
.dt-sc-social-icons a.linkedin:hover, ul#team-section li p a.linkedin:hover { -webkit-box-shadow: inset -30px 0 0 0 #0976b4; -moz-box-shadow: inset -30px 0 0 0 #0976b4; box-shadow: inset -30px 0 0 0 #0976b4; }
.dt-sc-social-icons a.dribbble:hover, ul#team-section li p a.dribbble:hover { -webkit-box-shadow: inset -30px 0 0 0 #ea4c89; -moz-box-shadow: inset -30px 0 0 0 #ea4c89; box-shadow: inset -30px 0 0 0 #ea4c89; }
.dt-sc-social-icons a.flickr:hover, ul#team-section li p a.flickr:hover { -webkit-box-shadow: inset -30px 0 0 0 #ff0084; -moz-box-shadow: inset -30px 0 0 0 #ff0084; box-shadow: inset -30px 0 0 0 #ff0084; }
.dt-sc-social-icons a.tumblr:hover, ul#team-section li p a.tumblr:hover { -webkit-box-shadow: inset -30px 0 0 0 #35465c; -moz-box-shadow: inset -30px 0 0 0 #35465c; box-shadow: inset -30px 0 0 0 #35465c; }
.dt-sc-social-icons2 { }
.dt-sc-social-icons2 a:hover i { color: #fff; }
.dt-sc-social-icons2 a{ float: none; position: static; display: inline-block; width: 75px; height: 75px; line-height: 25px; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); margin-right: 30px;
background: #fff; }
.dt-sc-social-icons2 a i { float: none; position: static; color: #252525; display: inline-block; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); width: 75px; height: 75px;
line-height: 25px; font-size: 14px; text-align: center; }
.dt-sc-social-icons2 a.facebook:hover { -webkit-box-shadow: inset -80px 0 0 0 #3b5998; -moz-box-shadow: inset -80px 0 0 0 #3b5998; box-shadow: inset -80px 0 0 0 #3b5998; }
.dt-sc-social-icons2 a.twitter:hover { -webkit-box-shadow: inset -80px 0 0 0 #55acee; -moz-box-shadow: inset -80px 0 0 0 #55acee; box-shadow: inset -80px 0 0 0 #55acee; }
.dt-sc-social-icons2 a.youtube:hover { -webkit-box-shadow: inset -80px 0 0 0 #e52d27; -moz-box-shadow: inset -80px 0 0 0 #e52d27; box-shadow: inset -80px 0 0 0 #e52d27; }
.dt-sc-social-icons2 a.linkedin:hover { -webkit-box-shadow: inset -80px 0 0 0 #0976b4; -moz-box-shadow: inset -80px 0 0 0 #0976b4; box-shadow: inset -80px 0 0 0 #0976b4; }
/*----*****---- << Boxed Styles >> ----*****----*/
h6 { letter-spacing: 4px;}
.boxed { background-attachment: fixed; }
.boxed .mockup-slider #home.content, .boxed .grid-slider #home.content, .boxed .content-type6.full-height #home.content, .boxed .video-slider #home.content { height: auto; }
::i-block-chrome, .boxed .video-slider #home.content { height: 100%; margin-bottom: -20%; }
.boxed #header, .boxed .wrapper { width:1260px; margin:0 auto; float:none; }
.boxed .wrapper .type-1 #header-sticky-wrapper.sticky-wrapper #header { width:1260px; }
.boxed #header.type3 { display: inline-block; }
.boxed .grid-slider.index-3 #home.content { margin-bottom: 0; }
.boxed #panel { float: none; width: 1260px; overflow: hidden; left: 0; margin: 0px auto; }
.boxed .wrapper { width:1260px; margin:0 auto; float:none; }
.boxed .dt-sc-service-carousel .dt-sc-carousel li h2, .boxed .dt-sc-carousel li p { width: 95%; }
.boxed .dt-sc-service-carousel .dt-sc-carousel li h2 { font-size: 34px; margin-bottom: 10px; }
.boxed .dt-sc-portfolio figcaption a.zoom span:after { border-right: 50px solid transparent; }
.boxed .dt-sc-portfolio figcaption a.like span:after { border-left: 50px solid transparent; }
.boxed .dt-sc-portfolio figcaption a.comment span:after { border-right: 50px solid transparent; }
.boxed .dt-sc-portfolio figcaption a.view span:after { border-left: 50px solid transparent; }
.boxed .dt-sc-portfolio figcaption a span:before { font-size: 12px; }
.boxed .dt-sc-portfolio figcaption a.zoom span:before { margin-left: 3px; margin-top: 3px; }
.boxed .dt-sc-portfolio figcaption a.comment span:before { margin-left: 3px; margin-bottom: 3px; }
.boxed .dt-sc-portfolio figcaption a.like span:before { margin-right: 3px; margin-top: 3px; }
.boxed .dt-sc-portfolio figcaption a.view span:before { margin-right: 3px; margin-bottom: 3px; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame { width: 30%; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame li a { padding: 5.8% 3%; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame h5, .boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame h6 { width: 71%; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame .icon { margin: 42px 25px 0px 20px; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame-content { width: 70%; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame-content .column { width: 100% !important; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame-content .column .column { width: 49% !important; }
.boxed .dt-sc-tabs-vertical-container .dt-sc-tabs-vertical-frame h6 span { font-size: 12px; }
.boxed .dt-sc-tabs-vertical-frame-content .tab-content img, .boxed .logo.logostatic { display: none; }
.boxed .dt-sc-portfolio.width1 { width: 15.65%; }
.boxed .dt-sc-portfolio.width2 { width: 17.2%; }
.boxed .dt-sc-portfolio.width4 { width: 34.34%; }
/*----*****---- << Back To Top >> ----*****----*/
#toTop { display:none; text-decoration:none; position:fixed; bottom: 30px; right:30px; overflow:hidden; width: 48px; height: 48px; border: 4px solid; text-indent:100%; background:url(images/ui.totop.png) no-repeat left top; z-index:9999;
transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); }
#toTop:hover { border-radius: 25%; }
#toTop:active, #toTop:focus { outline:none; }
/*----*****---- << Retina Ready >> ----*****----*/
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-devicepixel-ratio: 1.5), only screen and (min-resolution: 1.5dppx) {
#toTop { background-image:url(images/ui.totop@2x.png); background-size: 40px; }
.dt-sc-parallax-section { background-attachment: scroll !important; background-position: top !important; -webkit-background-size: auto !important; -moz-background-size: auto !important; background-size: auto !important; }
.intro-parallax.dt-sc-parallax-section h3, .intro-parallax.dt-sc-parallax-section h3 a { color: #fff; }
}
/*----*****---- << Loader Style >> ----*****----*/
#loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999999; text-align: center; overflow: hidden; background-size: cover; background-position: center center; background-position: center bottom;
background: #252525; }
#loader-wrapper .large-header h1 { text-transform: none; font-size: 35px; font-style:italic; font-weight: 300; color: #252525; bottom: 0; right: 0; left: 0; margin: 0; position: absolute; width: 100%; padding: 20px 10px; font-weight: 300; }
#loader-wrapper .large-header h1.top { top: 0; bottom: auto; }
#loader-wrapper .large-header h1 span { font-weight: 600; }