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

YAPIMCI : OFISIMO

Versiyon: v6.0.0

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



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

 Table of Content:

 

 01. Google Fonts

 02. Basic Styles

 03. Typography

 04. Buttons

 05. Pre Loader

 06. Header Section

 07. Navigation Menu

 08. Banner Section

 09. About Section

 10. Service Section

 11. Portfolio Section

 12. Blog Section

 13. Contact Section

 14. Inner Pages

    01. Not Found Page

    02. Coming Soon Page

 15. Styles Switcher CSS

 16. Responsive CSS

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



/*-----------------------------------------

* 01. Google Fonts

* -----------------------------------------*/    

/*-- Poppins font --*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*-- Roboto font --*/

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');



/*-----------------------------------------

* 02. Basic Styles

* -----------------------------------------*/   

body { font-family:'Roboto', sans-serif; background-color:#2e3135; color:#b6b6b6; font-size:15px; font-weight:400; line-height:30px; }

a { text-decoration:none; color:#b6b6b6; }

a:hover { color:#000000; text-decoration:none; }

a:focus { outline:0 none; }

a:active, a:hover { outline:0; }

a:hover img { opacity:0.88; }

a, a i.fa, a img, .button, .btn { -moz-transition:all 0.3s ease; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }

ol, ul { list-style:none; padding:0; margin:0; }

.gray-bg,.bg-light { background-color:#26282b !important; }

::selection { color:#ffffff; }

.row-items { margin-top:-30px; }

.row-items .row-item { margin-top:30px; }



/*-----------------------------------------

* 03. Typography

* -----------------------------------------*/

h1,h2,h3,h4,h5,h6 { font-family:'Poppins', sans-serif; color:#fafafa; margin:0 0 10px; text-transform:uppercase; overflow-wrap: break-word; word-wrap: break-word; }

p { margin:0 0 15px; }

p:last-child { margin-bottom:0; }



/*-----------------------------------------

* 04. Buttons

* -----------------------------------------*/

.btn { font-family:'Poppins', sans-serif; position:relative; font-size:15px; font-weight:500; letter-spacing:0.5px; padding:12px 34px; text-transform:uppercase; border:none; overflow:hidden; border-radius:26px; box-shadow:none; }

.btn:focus,button:focus { box-shadow:none; outline:none !important; }

.btn:before { position:absolute; top:0; height:102%; left:-25%; width:0%; -webkit-transform:skew(-22deg); transform:skew(-22deg); -webkit-transition-duration:0.6s; transition-duration:0.6s; z-index:1; }

.btn:hover:before { width:180%; }

.btn span { position:relative; z-index:2; }



/* Button Small */

.btn-small { font-size:12px; padding:6px 15px; } 



/* Button Primary */

.btn-primary,.btn-primary:focus, 

.btn-primary:not(:disabled):not(.disabled):active:focus,

.btn-primary:not(:disabled):not(.disabled):active { background-color:#333333; color:#ffffff; }

.btn-primary.disabled,.btn-primary:disabled { color:#ffffff; background-color:#666666; }

.btn-primary:hover { color:#ffffff; background-color:#333333; }

.btn-primary:before { content:""; background-color:#000000; }



/* Button Secondary */

.btn-secondary,.btn-secondary:focus,

.btn-secondary:not(:disabled):not(.disabled):active:focus,

.btn-secondary:not(:disabled):not(.disabled):active { background-color:#666666; color:#ffffff; }

.btn-secondary:hover { background-color:#666666; color:#ffffff; }

.btn-secondary.disabled,.btn-secondary:disabled { background-color:#666666; color:#ffffff; }

.btn-secondary:before { content:""; background-color:#444444; }



/* Button Link */

.btn-link { color:#333333; font-weight:500; text-transform:uppercase; }

.btn-link:hover { color:#000000; text-decoration:none; }



/* Form Control */

.form-control { font-family:'Poppins', sans-serif; background-color:#26282b; color:#fafafa; height:50px; font-size:14px; padding:10px 22px; box-shadow:none; outline:none; border:1px solid #424242; border-radius:30px; }

.form-control:focus { color:#fafafa; background:transparent; box-shadow:none; outline:none; }

.form-control.is-invalid,.was-validated .form-control:invalid { background:none; box-shadow:none !important; }

.section-spacing { padding:60px 0; }

.content-block { margin-bottom:50px; }

.content-block:last-child { margin-bottom:0; }



/*-----------------------------------------

* 05. Pre Loader

* -----------------------------------------*/

.preloader { display:none; background-color:#2e3135; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100vh; margin:0 auto; text-align:center; z-index:99999; }

.preloader.active { display:block; }

.preloader-inner { position:absolute; top:50%; left:0; right:0; margin:0 auto; border:4px solid hsla(0,0%,0%,0.2); border-top-color:#333333; border-radius:50%; -webkit-border-radius:50%; width:50px; height:50px; animation:spin 1s linear infinite; }

@keyframes spin { to { -ms-transform:rotate(360deg); -webkit-transform:rotate(360deg); transform:rotate(360deg); } }



/*-----------------------------------------

* 06. Header Section

* -----------------------------------------*/

.site-header { font-family:'Poppins', sans-serif; position:fixed; top:0; left:0; z-index:1024; background-color:#2e3135; width:100%; max-width:280px; height:100%; max-height:100vh; text-align:left; padding:40px 40px 40px; opacity:1; visibility:visible; overflow:auto; -webkit-overflow-scrolling:touch; -webkit-transition:all .15s ease-in; transition:all .15s ease-in; -webkit-box-shadow:0 0 2px 0 rgba(0,0,0,0.4); box-shadow:0 0 2px 0 rgba(0,0,0,0.4); }

.site-header .logo .text-logo { position:relative; color:#fafafa !important; text-transform:uppercase; font-size:36px; font-weight:bold; line-height:normal; letter-spacing:1px; }

.site-header .copyright.text-center { position:absolute; bottom:30px; }

.main-wrapper { padding-left:280px; }



/*-----------------------------------------

* 07. Navigation Menu

* -----------------------------------------*/

.navigation .navbar-nav .nav-item .nav-link { color:#fafafa; text-transform:uppercase; font-size:14px; font-weight:500; padding:8px 0; letter-spacing:0.5px; position:relative; display:block; background:transparent; }

.navigation .navbar-nav .nav-item .nav-link i { margin-right:10px; position:relative; }



/*-----------------------------------------

* 08. Banner Section

* -----------------------------------------*/

.banner-section { position:relative; background-color:#d7d7d7; min-height:100vh; padding:60px 0; }

.banner-section .banner-inner { position:relative; z-index:99; }

.banner-section .banner-text h2 { color:#ffffff; font-size:18px; letter-spacing:0.9px; font-weight:400; text-transform:uppercase; margin:0 0 15px; }

.banner-section .banner-text h3 { color:#ffffff; font-size:42px; font-weight:400; letter-spacing:1px; margin:0 0 15px; }

.banner-section .banner-text p { color:#ffffff; max-width:510px; letter-spacing:0.2px; margin:0 0 15px; }

.banner-section .social-links a { color:#ffffff; font-size:20px; margin:0 20px 20px 0; }



/* Background Image */

.banner-section.header-bg-img { background-image:url('../images/banners/home-banner.jpg'); background-size:cover; background-repeat:no-repeat; background-position:center center; }

/* Background overlay opacity */

.banner-section.header-bg-img:after { content:""; background-color:rgba(0,0,0,0.8); position:absolute; top:0; bottom:0; left:0; right:0; }

.banner-section .banner-inner .center-picture { border-radius:50%; max-width:300px; border:10px solid rgba(255,255,255,0.1); }



/* Cd Type Word Wrapper */

.cd-words-wrapper { display:inline-block; position:relative; text-align:left; }

.cd-words-wrapper b { display:inline-block; position:absolute; white-space:nowrap; left:0; top:0; }

.cd-words-wrapper b.is-visible { position:relative; }

.cd-headline.clip .cd-words-wrapper { overflow:hidden; vertical-align:top; border-right:2px solid #dddddd; padding-right:4px; }

.cd-headline.clip b { opacity:0; }

.cd-headline.clip b.is-visible { opacity:1; }



/* Bottom Scroll Arrow */

.scroll-down-arrow { position:absolute; bottom:5vh; left:0; right:0; margin:0 auto; z-index:999; display:block; cursor:pointer; width:30px; height:60px; border:2px solid #ffffff; border-radius:50px; -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4); box-shadow:0 1px 2px rgba(0,0,0,0.4); -webkit-animation:bounce 2s infinite; animation:bounce 2s infinite; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }

.scroll-down-arrow:before { content:""; position:absolute; top:10px; left:50%; width:8px; height:8px; margin-left:-3px; background-color:#fafafa; border-radius:50%; -webkit-animation:scroll_down 2s infinite; animation:scroll_down 2s infinite; }

@-webkit-keyframes scroll_down { 0% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity:0; } 40% { opacity:1; } 80% { -webkit-transform:translate(0,20px); transform:translate(0,20px); opacity:0; } 100% { opacity:0; } }

@keyframes scroll_down { 0% { -webkit-transform:translate(0,0); transform:translate(0,0); opacity:0; } 40% { opacity:1; } 80% { -webkit-transform:translate(0, 20px); transform:translate(0,20px); opacity:0; } 100% { opacity:0; } }

@-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform:translateY(0); } 40% { transform:translateY(-30px);} 60% { transform:translateY(-15px);} } 

@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform:translateY(0); } 40% { transform:translateY(-30px);}  60% { transform:translateY(-15px);} } 



/* Section Title */

.section-title { position:relative; }

.section-title h1 { font-size:42px; font-weight:bold; text-transform:uppercase; margin:0 0 60px; text-align:center; }

.section-subtitle h3 { margin-bottom:40px; text-align:center; }



/* Separator */

.separator { position:absolute; bottom:-10px; left:0; right:0; background:#fafafa; width:150px; height:5px; margin:0 auto; border-radius:50px; overflow:hidden; }

.separator:after { content:""; display:block; width:10px; height:5px; position:relative; background-color:#222222; animation:separator 2s linear infinite; overflow:hidden; border-radius:2px; -webkit-transition:all .5s; transition:all .5s; }

@keyframes separator { 0% { top:0; left:0; } 25% { left:25px; width:25%; } 50% { left:50px; width:45%; } 75% { left:75px; width:65%; } 100% { left:150px; width:80%; } }



/*-----------------------------------------

* 09. About Section

* -----------------------------------------*/

.about-details ul li span:first-child,.about-details ul li span:first-child { opacity:0.7; }

/* Eeducation & Experience */

.education,.experince { border-left:2px solid #424242; }

.education-box,.experince-box { position:relative; box-shadow:2px 0px 0px 1px #424242; border-radius:4px; padding:15px 25px; border-left:3px solid; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }

.education-box:before,.experince-box:before { content:""; left:-37px; display:block; position:absolute; background:#2e3135; border:2px solid; width:17px; height:17px; border-radius:50%; }

.education-box:after,.experince-box:after { content:""; background-color:#666666; display:block; position:absolute; width:33px; height:2px; top:23px; left:-34px; z-index:-1; }

.education-box:hover:before,.experince-box:hover:before { background-color:#666666; }

.education-box:hover,.experince-box:hover { box-shadow:0 0 10px rgba(255,255,255,0.2); }

.education-box span,.experince-box span,.meta-action { font-size: 13px; font-weight:400; }



/* Skills */

.skills .progressbar { width:100%; position:relative; background-color:#26282b !important; box-shadow:inset 0 1px 1px rgba(0,0,0,.1); }

.skills .proggress { height:8px; width:10px; }

.skills .percentCount { float:right; clear:both; font-weight:600; margin-top:-45px; }

.skills .skill-name { margin:0 0 12px 0; line-height:normal; opacity:1; font-weight:600; font-size:14px; }



/* Counter */

.counter-box { border:1px solid #424242; padding:25px; border-radius:10px; -webkit-transition:all 0.3s ease; transition:all 0.3s ease; }

.counter-box:hover { -webkit-transform:translateY(-5px); transform:translateY(-5px); box-shadow:0 0 10px rgba(255,255,255,0.4); }

.counter-box h3 { border-bottom:2px solid rgba(102,102,102,0.4); font-size:50px; display:block; text-align:right; }

.counter-box h5 { font-size:17px; }



/*-----------------------------------------

* 10. Service Section

* -----------------------------------------*/

.service .card-body { padding:25px; border-radius:5px; -webkit-transition:cubic-bezier(0.57, 0.11, 0.27, 0.9) .3s; transition:cubic-bezier(0.57, 0.11, 0.27, 0.9) .3s; border:1px solid #424242; }

.service .card-body:hover { background-color:#2e3135; -webkit-transform:translateY(-8px); transform:translateY(-8px); box-shadow:0 0 10px rgba(33,33,33,0.2); }

.service .card-icon { font-size:50px; margin-bottom:15px; }

.service .card-title h4 { font-size:22px; font-weight:600; }



/* Customers Testimonial --*/

.customers-testimonial .item { text-align:center; margin-bottom:5px; padding:20px 20px; opacity:0; visibility:hidden; display:block; border:3px solid #424242; box-shadow:0 0 5px rgba(0,0,0,0.2); -webkit-transform:scale3d(0.8,0.8,1); transform:scale3d(0.8,0.8,1); -webkit-transition:all .3s ease-in-out; transition: all .3s ease-in-out; }

.customers-testimonial .item.active { opacity:1; visibility:visible; -webkit-transform:scale3d(1.0,1.0,1); transform:scale3d(1.0,1.0,1); }

.customers-testimonial p { font-size:15px; line-height:1.5; margin:0 0 17px 0; font-style:italic; }

.customers-testimonial .name { margin:17px auto 0;display:table; width:auto; padding:6px 30px; border-radius:12px; text-align:center; box-shadow:0 0 3px rgba(0,0,0,0.2); }

.customers-testimonial .item:hover .name { background-color:#ffffff; color:#2e3135; }

.customers-testimonial .item img { max-width:90px; margin:0 auto 17px; border-radius:40%; }



/* Carousel Slider */

.carousel .carousel-control-next,.carousel .carousel-control-next:focus,

.carousel .carousel-control-prev,.carousel .carousel-control-prev:focus { position:absolute; width:40px; height:40px; line-height:40px; font-size:26px; text-align:center; color:#333333; background-color:#ffffff; top:calc(50% - 50px); border-radius:50%; box-shadow:0 2px 5px 0 rgba(0,0,0,.15); opacity:0; -webkit-transition:all .3s ease; transition:all .3s ease; }

.carousel .carousel-control-prev { left:-10px; }

.carousel .carousel-control-next { right:-10px; }

/* Carousel Arrow */

.carousel .carousel-control-next:hover,.carousel .carousel-control-prev:hover { opacity:0; color:#ffffff; background-color:#333333; }

.carousel:hover .carousel-control-next,.carousel:hover .carousel-control-prev { opacity:1; -webkit-transition:all .3s ease; transition:all .3s ease; }

/* Carousel Dots */

.carousel .carousel-indicators { position: relative; margin:30px auto 0 }

.carousel .carousel-indicators li.active,.carousel .carousel-indicators li:hover { -webkit-transform:translate3d(0px,-50%,0px) scale(0.7); transform:translate3d(0px,-50%,0px) scale(0.7); }

.carousel .carousel-indicators li { display:inline-block; height:25px; width:25px; margin:0 2px 0; border:none; -webkit-transform:translate3d(0px,-50%,0px) scale(0.5); transform:translate3d(0px,-50%,0px) scale(0.5); -webkit-transition:all 250ms ease-out 0s; transition:all 250ms ease-out 0s; border-radius:50%; }



/*-----------------------------------------

* 11. Portfolio Section

* -----------------------------------------*/

.portfolio #portfolio-flters li { cursor:pointer; text-transform:uppercase; background-color:#26282b; color:#ffffff; padding:10px 28px; margin:0 5px 10px 5px; -webkit-transition:all .3s ease-in-out; transition:all .3s ease-in-out; }

.portfolio #portfolio-flters li.filter-active,.portfolio #portfolio-flters li:hover { background-color:#000000; }



/* Portfolio Card Info */

.portfolio .portfolio-wrap { position:relative; overflow:hidden; border-radius:5px; }

.portfolio .portfolio-wrap:before { content:""; background:rgba(0,0,0,0.6); position:absolute; left:30px; right:30px; top:30px; bottom:30px; -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; z-index:9; opacity:0; }

.portfolio .portfolio-wrap .portfolio-info { opacity:0; position:absolute; top:0; left:0; right:0; bottom:0; text-align:center; z-index:99; -webkit-transition:all ease-in-out .3s; transition:all ease-in-out .3s; }

.portfolio .portfolio-wrap .portfolio-info:before { content:""; display:block; position:absolute; top:35px; left:35px; border-top:1px dashed #ffffff; border-left:1px dashed #ffffff; -webkit-transition:all .5s ease 0s; transition:all .5s ease 0s; z-index:9994; }

.portfolio .portfolio-wrap .portfolio-info:after { content:""; display:block; position:absolute; bottom:35px; right:35px; border-bottom:1px dashed #ffffff; border-right:1px dashed #ffffff; -webkit-transition:all .5s ease 0s; transition:all .5s ease 0s; z-index:9994; }

.portfolio .portfolio-wrap .portfolio-info h4 { font-size:18px; color:#ffffff; font-weight:600; }

.portfolio .portfolio-wrap .portfolio-info p { color:#ffffff; margin:0 0 15px; }

.portfolio .portfolio-wrap .portfolio-info .portfolio-inner-info { position:relative; z-index:9999; }

.portfolio .portfolio-wrap .portfolio-links a { background-color:#26282b; margin:0 5px; border-radius:50%; width:35px; height:35px; line-height:35px; font-size:15px; }

.portfolio .portfolio-wrap .portfolio-links a:hover { background-color:#000000; color:#ffffff !important; }

.portfolio .portfolio-wrap:hover:before { top:0; left:0; right:0; bottom:0; opacity:1; }

.portfolio .portfolio-wrap:hover .portfolio-info { opacity:1; }

.portfolio .portfolio-wrap:hover .portfolio-info:before { top:15px; left:15px; right:15px; bottom:15px; }

.portfolio .portfolio-wrap:hover .portfolio-info:after { bottom:15px; right:15px; top:15px; left:15px; }



/* Profolio Detail Popup */

.portfolio-details,.blog-details { position:relative; width:95%; background:#26282b; margin:40px auto; padding:30px; border-radius:5px; z-index:999; }

.popup-detail-title { font-size:28px; font-weight:600; text-transform:uppercase; text-align:center; border-bottom:1px solid #424242; margin-bottom:25px; padding-bottom:25px; line-height:1; }

.portfolio-details .mfp-close,.blog-details .mfp-close { color:#fafafa; }   

.mfp-close-btn-in .mfp-close { font-size:40px; }

.mfp-arrow { position:fixed; }

.mfp-fade.mfp-bg { height:100% !important; position:fixed !important; }

.mfp-fade.mfp-wrap { height:100% !important; position:fixed !important; overflow:hidden auto; top:0 !important; }



/*-----------------------------------------

* 12. Blog Section

* -----------------------------------------*/

.blog .card { background-color:#2e3135; border:1px solid #2e3135; overflow:hidden; border-radius:5px; }

.blog .card:hover .blog-card-img img { -webkit-transform:scale(1.1); transform:scale(1.1); }

.blog .card .blog-card-img { position:relative; overflow:hidden; border-bottom:5px solid; }



/* Blog Detail Popup */

.post-tags-social { border-top: 1px dotted #424242; border-bottom:1px dotted #424242; padding:10px 0; }

.social-media ul li a { font-size:16px; margin:0 12px 0 0; }

.social-media ul li:last-child a { margin:0; }



/*-----------------------------------------

* 13. Contact Section

* -----------------------------------------*/

.contact .card-body { padding:20px; width:100%; border-radius:5px; border:1px solid #424242; -webkit-transition:ease-in-out .3s; transition:ease-in-out .3s; }

.contact .card-body .card-icon i { font-size:18px; background-color:#26282b; border-radius:50%; padding:10px; width:40px; height:40px; -webkit-transition:ease-in-out .3s; transition:ease-in-out .3s; -ms-flex-align:center; align-items:center; -ms-flex-pack:center; justify-content:center; -ms-flex-wrap:wrap; flex-wrap:wrap; display:-ms-flexbox; display:flex; }

.contact .card-body:hover { box-shadow:0 0 10px 0 rgba(255,255,255,0.4); }

.contact .card-body:hover .card-icon i { color:#ffffff !important; }

.contact .card-body h3 { font-size:18px; font-weight:600; margin:0 0 10px; }

.contact .card-body .social-links a { font-size:18px; margin-right:15px; }

.contact .responsive-map { overflow:hidden; padding-bottom:50%; position:relative; height:auto; }

.contact .responsive-map iframe { position:absolute; left:0; top:0; height:100%; width:100%; border:none; }

.contact .contact-form .btn-primary:hover { background-color:#000000; }

.mailsendbtn { display: inline-block; position: relative; }

.mailsendbtn .loading { display: none; background:#ffffff; text-align:center; position: absolute; right: -45px; top: 8px; font-size: 20px; width: 35px; height: 35px; border-radius: 4px; box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.25); }

.error_msg { margin: 4px 0 0; display: block; font-size: 14px; color: #ff4141; }



/* Back To Top Scroll Arrow */

.back-to-top { display:none; background-color:#26282b; border:none; color:#ffffff; cursor:pointer; font-size:18px; line-height:40px; height:40px; width:40px; border-radius:50%; position:fixed; bottom:30px; right:30px; text-align:center; box-shadow:0 0 2px #f2f2f2; -webkit-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index:999; }

.back-to-top:hover { background-color:#000000; color:#ffffff; }



/*-----------------------------------------

* 14. Inner Pages

* -----------------------------------------*/

/* Breadcrumb */

.breadcrumb { position:relative; background-color:#26282b; margin:0; padding:40px 0; border-radius:0; }

.breadcrumb .bread-list { display:inline-block; padding:5px 15px; border-radius:2px; background-color:#2e3135; }



/* 01. Not Found Page */

.not-found-page h1 { font-size:150px; font-weight:300; letter-spacing:4px; line-height:1; margin-bottom:30px; text-shadow:-5px -5px 4px rgba(0,0,0,0.68); }

.not-found-page .search-btn { font-size:20px; padding:10px 20px; }

.not-found-page .animate-ziro { position:relative; top:15px; -webkit-animation:movetext 1s infinite; animation:movetext 1s infinite; }

@keyframes movetext { 50% { bottom:10px; top:0px; } }

.pages .portfolio-details,.pages .blog-details { background:#2e3135; }



/* 02. Coming Soon Page */

.coming-soon-page .main-wrapper { background-image:url('../images/banners/home-banner.jpg'); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }

.coming-soon-page .main-wrapper:before { content:""; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.8); }

.coming-soon { background-color:rgba(0,0,0,0.3); color:#ffffff; padding:30px 20px; }

.coming-soon .text-logo { position:relative; color:#ffffff; text-transform:uppercase; font-size:50px; font-weight:bold; line-height:1; letter-spacing:1px; margin:0 0 25px; display:inline-block; }

.coming-soon h2 { color:#ffffff; font-size:40px; line-height:1; margin-bottom:15px; }

.coming-soon .sub-title { font-size:18px; }

.coming-soon .newsletter-form .input-group { max-width:600px; margin:0 auto; }

.coming-soon .newsletter-form .input-group .form-control { border-color:#ffffff; }

.coming-soon .countdown li { background-color:rgba(0,0,0,0.5); width:80px; height:80px; margin:0 2px 5px; padding:5px; }

.coming-soon .countdown .digit { color:#ffffff; font-size:28px; line-height:28px; font-weight:400; display:block; }

.coming-soon .countdown .smalltext { margin:7px 0 0; line-height:14px; font-size:14px; color:#dddddd; display:block; text-transform:uppercase; }

.coming-soon .social-icon li a { font-size:20px; color:#ffffff; margin:0 10px; }





/*-----------------------------------------

* 15. Styles Switcher CSS

* -----------------------------------------*/

.switcher-wrapper { position:fixed; top:150px; right:-202px; z-index:1024; width:202px; background-color:#2e3135; box-shadow:0 3px 20px 0 rgba(0,0,0,0.1); border-radius:8px 0 0 8px; -webkit-transition:ease .5s; transition:ease .5s; }

.switcher-wrapper.open { right:0; }

.switcher-wrapper .switcher-trigger { position:absolute; background-color:#444444; color:#ffffff; width:40px; height:40px; right:202px; top:10px; border-radius:6px 0 0 6px;border:0; font-size:20px; text-align:center; }

.switcher-wrapper .switcher-inner h6 { text-align:center; font-weight:500; font-size:15px; padding:15px 0; margin:0; border-bottom:1px solid #424242; }

.switcher-wrapper .switcher-inner .color-list { margin:0 0 -10px -10px; }

.switcher-wrapper .switcher-inner .color-list li { position:relative; padding:0 0 10px 10px; display:inline-block }

.switcher-wrapper .switcher-inner .color-list li button { position:relative; width:35px; height:35px; border:none; border-radius:10px; -webkit-transition:.3s; transition:.3s; font-size:0px; color:#ffffff; }

.switcher-wrapper .switcher-inner .color-list li button:before { position:absolute; left:0; right:0; top:10px; }

.switcher-wrapper .switcher-inner .green button { background:#79d70f; }

.switcher-wrapper .switcher-inner .pink button { background:#ff1e56; }

.switcher-wrapper .switcher-inner .blue button { background:#40bad5; }

.switcher-wrapper .switcher-inner .orange button { background:#ff7315; }

.switcher-wrapper .switcher-inner .purple button { background:#9818d6; }

.switcher-wrapper .switcher-inner .yellow button { background:#ffd31d; }

.switcher-wrapper .switcher-inner .magenta button { background:#ff00ff; }

.switcher-wrapper .switcher-inner .red button { background:#ff5d56; }





/*-----------------------------------------

* 16. Responsive CSS

* -----------------------------------------*/

/* Large devices (desktops, 992px and up) */

@media (min-width:992px) {

    .container { max-width:700px; }

}

/* Extra large devices (large desktops, 1200px and up) */

@media (min-width:1200px) {

    .container { max-width:915px; }

}

/* Below minimum 1366px */

@media (min-width:1366px) {

    .container { max-width:1045px; }

}

/* Below minimum 1520px */

@media (min-width:1520px) {

    .container { max-width:1140px; }

}



/* Large devices (desktops, less than 1200px) */

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

    .banner-section .banner-text.ml-lg-5 { margin-left:0 !important; margin-top:1.5rem !important; }

    .banner-section .banner-inner { -ms-flex-direction:column; flex-direction:column; text-align:center; }

    .banner-section .banner-inner .center-picture { max-width:200px; }

    .banner-section .social-links { -ms-flex-pack:center; justify-content:center; }

    .about .about-text,.about .education,.portfolio-details .mb-4,.blog-details .blog-short-dec .mb-4 { margin-bottom: 1.5rem !important; }

    .about .skill-item.mt-4 { margin-top: 1.5rem !important; }

}



/* Medium devices (tablets, less than 992px) */

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

    /* Header Section */

    .site-header.mobile-menu-hide { left:-100%; opacity:0; visibility:hidden; }

    .main-wrapper { padding-left:0; }



    /* Navigation */

    .site-header .closeNav-btn { position:absolute; top:15px; right:15px; font-size:14px; font-weight:500; text-transform:uppercase; }

    .site-header .closeNav-btn i { font-size:16px; }



    /* Menu Toggle */

    .menu-toggle-line { position:fixed; left:10px; top:10px; z-index:1024; height:48px; width:48px; border-radius:50%; padding:5px 0 0; border:none; }

    .menu-toggle-line.open:after { content:""; background:rgba(0,0,0,0.5); position:fixed; left:0; right:0; top:0; bottom:0; -webkit-transition:all .15s ease-in; transition:all .15s ease-in; }

    .menu-toggle-line span { height:2px; width:26px; background:#ffffff; display:block; margin:0 auto 6px; transform-origin:10px 0; transition:transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0), background 0.5s cubic-bezier(0.77,0.2,0.05,1.0), opacity 0.55s ease; }

    .menu-toggle-line.open span:nth-child(1) { -webkit-transform:rotate(45deg) translate(6px,1px); transform:rotate(45deg) translate(6px,1px); }

    .menu-toggle-line.open span:nth-child(2) { opacity:0; }

    .menu-toggle-line.open span:nth-child(3) { -webkit-transform:rotate(-45deg) translate(6px,-3px); transform:rotate(-45deg) translate(6px,-3px); }

    .back-to-top { bottom:15px; right:15px; }

}



/* Small devices (landscape phones, less than 768px */

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

    body { font-size:14px; line-height:26px; }

    .btn { font-size:14px; padding:12px 24px; }

    .section-spacing { padding:40px 0; }

    .content-block { margin-bottom:40px; }

    .section-title h1 { font-size:36px; margin:0 0 45px; }

    .banner-section .banner-text h3 { font-size:40px; }

    .counter-box,.service .card-body { padding:20px; }

    .portfolio-details,.blog-details {  padding:20px; }

    .portfolio-details h5,.blog-details h5,.blog .card h5 { font-size:18px; }

    .popup-detail-title { font-size:22px; margin-bottom:20px; padding-bottom:20px; }

    .section-title h4,.portfolio-content h4 { font-size:20px; }



    .coming-soon .text-logo { font-size:40px; margin:0 0 20px; }

    .coming-soon h2 { font-size:30px; }

    .coming-soon .sub-title { font-size:15px; }

    .coming-soon .countdown li { width:55px; height:55px; }

    .coming-soon .countdown .digit { font-size:20px; line-height:20px; }

    .coming-soon .countdown .smalltext { font-size:11px; line-height:11px; }

}



/* Extra small devices (portrait phones, less than 576px) */

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

    .section-title h1 { font-size:32px; padding-bottom:4px; }

    .section-subtitle { font-size:22px; margin-bottom:30px !important; }

    .banner-section .banner-inner .info-button .btn { width:75%; margin-bottom:15px; }

    .banner-section .banner-inner .center-picture { max-width:150px; }

    .about-details ul { float:none !important; width:100% !important; padding:0 !important; }

    .portfolio #portfolio-flters li { width:45%; }

    .mfp-arrow-left { left:-20px; }

    .mfp-arrow-right { right:-20px; }



    .coming-soon .newsletter-form .input-group { display:inline-block; }

    .coming-soon .input-group .form-control { border-radius:30px; width:100%; margin:0 0 15px; }

    .coming-soon .input-group .input-group-append .btn { border-radius:30px; margin:0 auto; }

}