/*
  Theme Name: DevFolio
  Theme URL: https://bootstrapmade.com/devfolio-bootstrap-portfolio-html-template/
  Author: BootstrapMade.com
  License: https://bootstrapmade.com/license/
*/

/*======================================
//--//-->   STYLES GENERALES
======================================*/

body {
  background-color: #f5f5f5;
  color: #4e4e4e;
  transition: 01s ease;
  cursor: url('../mouse/normal-select-blue.cur'), auto;
}

html,body{
    width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

@font-face {
  font-family: 'brawls';
  src: url('../font/brawls.ttf');
  font-weight: normal;
  font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #1e1e1e;
  transition: 01s ease;
}

a {
  color: #1e1e1e;
  transition: all 0.5s ease-in-out;
}

a:hover {
  color: #242526;
  text-decoration: none;
  transition: all 0.5s ease-in-out;
}

.p-r {
  position: relative;
  transition: 01s ease;
}

.color-a {
  color: #242526;
  transition: 01s ease;
}

.color-d {
  color: #f5f5f5;
  transition: 01s ease;
}

.color-text-a {
  color: #4e4e4e;
  transition: 01s ease;
}

.lead{
  text-align: justify;
}

.box-shadow,
.paralax-mf,
.service-box,
.work-box,
.card-blog {
  box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
}

.box-shadow-a,
.button:hover {
  box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.08);
}

.display-5 {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.1;
}

.display-6 {
  font-size: 2rem;
  font-weight: 300;
  line-height: 1.1;
}

.avatar {
  width: 32px;
  height: 32px;
  margin-right: 4px;
  overflow: hidden;
}

.cloudsd{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: none;
  transition: 0.5 ease;
}

.cloudsd img{
  position: absolute;
  bottom: -100px;
  max-width: 100%;
  animation: cloudani calc(8s * var(--i)) linear infinite;
  opacity: 0.5;
}

.clouds{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: inline;
}

.clouds img{
  position: absolute;
  bottom: -100px;
  max-width: 100%;
  animation: cloudani calc(8s * var(--i)) linear infinite;
}

@keyframes cloudani {
  0% {transform: translateX(-100%);}
  100% {transform: translateX(100%);}
}

.bg-image1 {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 30%, #f5f5f5), url('../img/intro-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transition: 0.5s ease;
}


.bg-image {
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}



.overlay-mf {
  background-color: #242526;
}

.overlay-mf {
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: .7;
}

.paralax-mf {
  position: relative;
  padding: 8rem 0;
}

.display-table {
  width: 100%;
  height: 100%;
  display: table;
}

.table-cell {
  width: 50%;
  display: block;
  position: absolute;
  top: 350px;

}

/*--/ Sections /--*/

.sect-4 {
  padding: 4rem 0;
}

.sect-pt4 {
  padding-top: 4rem;
}

.sect-mt4 {
  margin-top: 4rem;
}

/*--/ Title s /--*/

.title-s {
  font-weight: 600;
  color: #1e1e1e;
  font-size: 1.1rem;
}

/*--/ Title A /--*/

.title-box {
  margin-top: 50px;
  margin-bottom: 3rem;
}

.title-a {
  font-size: 3rem;
  font-weight: bold;
  text-transform: uppercase;
}

.subtitle-a {
  color: #4e4e4e;
}

.line-mf {
  width: 40px;
  height: 5px;
  background-color: #242526;
  margin: 0 auto;
  transition: 0.5s ease;
}

/*--/ Title Left /--*/

.title-box-2 {
  margin-bottom: 3rem;
}

.title-left {
  font-size: 2rem;
  position: relative;
}

.title-left:before {
  content: '';
  position: absolute;
  height: 3px;
  background-color: #242526;
  width: 100px;
  bottom: -12px;
}

/*------/ Box /------*/

.box-pl2 {
  padding-left: 2rem;
}

.box-shadow-full {
  padding: 3rem 1.25rem;
  position: relative;
  background-color: #fff;
  margin: 3rem 0;
  z-index: 1;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

/*------/ Socials /------*/

.socials {
  padding: 1.5rem 0;
}

.socials ul li {
  display: inline-block;
}

.socials .ico-circle {
  height: 40px;
  width: 40px;
  font-size: 1.7rem;
  border-radius: 50%;
  line-height: 1.4;
  margin: 0 15px 0 0;
  box-shadow: 0 0 0 3px #242526;
  transition: all 300ms ease;
}

.socials .ico-circle:hover {
  background-color: #242526;
  color: #fff;
  box-shadow: 0 0 0 3px #e1e1e1;
  transition: all 300ms ease;
}

/*------/ Ul resect /------*/

.ul-resect,
.socials ul,
.list-ico,
.blog-wrapper .post-meta ul,
.box-comments .list-comments,
.widget-sidebar .list-sidebar,
.widget-tags ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

.list-ico {
  line-height: 2;
}

.list-ico span {
  color: #242526;
  margin-right: 10px;
}

/*------/ Ico Circle /------*/

.ico-circle {
  height: 100px;
  width: 100px;
  font-size: 2rem;
  border-radius: 50%;
  line-height: 1.55;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0 0 10px #242526;
  display: block;
}

.self{
  padding-top: 7px;
}

/*------/ Owl Carousel /------*/

.owl-theme .owl-dots {
  text-align: center;
  margin-top: 18px;
}

.owl-theme .owl-dots .owl-dot {
  display: inline-block;
}

.owl-theme .owl-dots .owl-dot span {
  width: 18px;
  height: 7px;
  margin: 5px 5px;
  background: #e1e1e1;
  border: 0px solid #e1e1e1;
  display: block;
  transition: all 0.6s ease-in-out;
  cursor: pointer;
}

.owl-theme .owl-dots .owl-dot:hover span {
  background-color: #e1e1e1;
}

.owl-theme .owl-dots .owl-dot.active span {
  background-color: #1B1B1B;
  width: 25px;
}

/*--/ Scrolltop s /--*/

.scrolltop-mf {
  position: relative;
  display: none;
}

.scrolltop-mf span {
  z-index: 999;
  position: fixed;
  width: 42px;
  height: 42px;
  background-color: #242526;
  opacity: .7;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  top: auto;
  left: auto;
  right: 30px;
  bottom: 50px;
  cursor: pointer;
  border-radius: 50%;
}

/* Prelaoder */

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #f2f2f2;
  border-top: 6px solid #242526;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  -webkit-animation: animate-preloader 1s linear infinite;
  animation: animate-preloader 1s linear infinite;
}

@-webkit-keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes animate-preloader {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*======================================
//--//-->   NAVBAR
======================================*/

.navbar-b {
  transition: all .5s ease-in-out;
  background-color: transparent;
  padding-top: 1.563rem;
  padding-bottom: 1.563rem;
}

.navbar-b.navbar-reduce {
  box-shadow: 0px 6px 9px 0px rgba(0, 0, 0, 0.06);
}

.navbar-b.navbar-trans .nav-item,
.navbar-b.navbar-reduce .nav-item {
  position: relative;
  padding-right: 30px;
  padding-left: 0;
}

.btn {
    min-width: 145px;
    line-height: 50px;
    padding: 0 30px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 05px;
    transition: box-shadow 0.2s ease-in-out;
}

.btn-fill {
  margin-top: 10px;
    color: #1e1e1e;
    background-color: #e1e1e1;
    transition: box-shadow 0.2s ease-in-out;
    transition: all 0.5s ease;
}

.btn-fill:hover,
.btn-fill:focus {
    color: #1e1e1e;
    background-color: #b1b1b1;
}

.btn:hover,
.btn:focus {
    box-shadow: 0px 10px 18px 0px rgba(0, 0, 0, 0.08);
}

.navbar-b.navbar-trans .nav-link,
.navbar-b.navbar-reduce .nav-link {
  color: #242526;
  text-transform: uppercase;
  font-weight: 600;
}

.navbar-b.navbar-trans .nav-link:before,
.navbar-b.navbar-reduce .nav-link:before {
  content: '';
  position: absolute;
  margin-left: 0px;
  width: 0%;
  bottom: 0;
  left: 0;
  height: 2px;
  transition: all 300ms ease;
}

.navbar-b.navbar-trans .nav-link:hover,
.navbar-b.navbar-reduce .nav-link:hover {
  color: #1B1B1B;
}

.navbar-b.navbar-trans .nav-link:hover:before,
.navbar-b.navbar-reduce .nav-link:hover:before {
  width: 35px;
}

.navbar-b.navbar-trans .show > .nav-link:before,
.navbar-b.navbar-trans .active > .nav-link:before,
.navbar-b.navbar-trans .nav-link.show:before,
.navbar-b.navbar-trans .nav-link.active:before,
.navbar-b.navbar-reduce .show > .nav-link:before,
.navbar-b.navbar-reduce .active > .nav-link:before,
.navbar-b.navbar-reduce .nav-link.show:before,
.navbar-b.navbar-reduce .nav-link.active:before {
  width: 35px;
}

.navbar-b.navbar-trans .nav-link:before {
  background-color: #242526;
}

.navbar-b.navbar-trans .nav-link:hover {
  color: #242526;
}

.navbar-b.navbar-trans .show > .nav-link,
.navbar-b.navbar-trans .active > .nav-link,
.navbar-b.navbar-trans .nav-link.show,
.navbar-b.navbar-trans .nav-link.active {
  color: #242526;
}

.navbar-b.navbar-reduce {
  transition: all .5s ease-in-out;
  background-color: white;
  padding-top: 15px;
  padding-bottom: 15px;
}

.navbar-b.navbar-reduce .nav-link {
  color: #242526;
}

.navbar-b.navbar-reduce .nav-link:before {
  background-color: #242526;
}

.navbar-b.navbar-reduce .nav-link:hover {
  color: #242526;
}

.navbar-b.navbar-reduce .show > .nav-link,
.navbar-b.navbar-reduce .active > .nav-link,
.navbar-b.navbar-reduce .nav-link.show,
.navbar-b.navbar-reduce .nav-link.active {
  color: #242526;
}

.navbar-b.navbar-reduce .navbar-brand {
  color: #242526;
  transition: 01s ease;
  transition: 01s ease;
}

.navbar-b.navbar-reduce .navbar-toggler span {
  background-color: #1B1B1B;
}

.navbar-b .navbar-brand {
  font-family: brawls;
  color: #242526;
  font-size: 2rem;
  font-weight: 600;
  transition: 01s ease;
}

.navbar-collapse ul{
  margin-left: 595px;
}

.navbar-b .navbar-nav .dropdown-item.show .dropdown-menu,
.navbar-b .dropdown.show .dropdown-menu,
.navbar-b .dropdown-btn.show .dropdown-menu {
  -webkit-transform: translate3d(0px, 0px, 0px);
  transform: translate3d(0px, 0px, 0px);
  visibility: visible !important;
}

.navbar-b .dropdown-menu {
  margin: 1.12rem 0 0;
  border-radius: 0;
}

.navbar-b .dropdown-menu .dropdown-item {
  padding: .7rem 1.7rem;
  transition: all 300ms ease;
}

.navbar-b .dropdown-menu .dropdown-item:hover {
  background-color: #242526;
  color: #fff;
  transition: all 300ms ease;
}

.navbar-b .dropdown-menu .dropdown-item.active {
  background-color: #242526;
}

/*--/ Hamburger Navbar /--*/

.navbar-toggler {
  position: relative;
}

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: 0;
}

.navbar-toggler span {
  display: block;
  background-color: #fff;
  height: 3px;
  width: 25px;
  margin-top: 4px;
  margin-bottom: 4px;
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  left: 0;
  opacity: 1;
}

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
  transition: -webkit-transform .35s ease-in-out;
  transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out, -webkit-transform .35s ease-in-out;
}

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9;
}

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent;
}

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: absolute;
  left: 12px;
  top: 10px;
  -webkit-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9;
}

/*======================================
//--//-->   INTRO
======================================*/

.intro {
  height: 100vh;
  position: relative;
  color: #242526;
  transition: 0.5s ease;
}

.intro .intro-content {
  text-align: center;
  position: absolute;
  top: -60px;
}

.intro-content h1,
.intro-content p{
  display: none;
}

.intro .overlay-itro {
  background-color: rgba(0, 0, 0, 0);
  position: absolute;
  top: 0;
  left: 0px;
  padding: 0;
  height: 100%;
  width: 100%;
  opacity: .9;
}

.intro .intro-title {
  margin-top: 50px;
  font-family: brawls;
  color: #242526;
  font-weight: 600;
}

.intro .intro-subtitle {
  font-size: 30px;
  font-weight: 100;
}

.intro .text-slider-items {
  display: none;
}

.intro-single {
  height: 350px;
}

.intro-single .intro-content {
  margin-top: 30px;
}

.intro-single .intro-title {
  text-transform: uppercase;
}

.intro-single .breadcrumb {
  background-color: transparent;
  color: #242526;
}

.intro-single .breadcrumb .breadcrumb-item:before {
  color: #e1e1e1;
}

.intro-single .breadcrumb .breadcrumb-item.active {
  color: #e1e1e1;
}

.intro-single .breadcrumb a {
  color: #fff;
}

/*======================================
//--//-->   ABOUT
======================================*/

.about-mf .box-shadow-full {
  padding-top: 4rem;
  padding-bottom: 4rem;
  transition: 0.5s ease;
}

.about-mf .about-img {
  margin-bottom: 2rem;
}

.about-mf .about-img img {
  margin-left: 10px;
}

.skill-mf span {
  color: #4e4e4e;
}

.skill-mf .progress {
  background-color: #e1e1e1;
  margin: .5rem 0 1.2rem 0;
  border-radius: 0;
  height: .7rem;
}

.skill-mf .progress .progress-bar {
  height: .7rem;
  background-color: #242526;
}

/*======================================
//--//-->   SERVICES
======================================*/

.service-box {
  background-color: #fff;
  padding: 2.5rem 1.3rem;
  border-radius: 1rem;
  margin-bottom: 7rem;
  transition: 0.5s ease;
}

.service-box:hover .ico-circle {
  transition: all 300ms ease;
  color: #fff;
  background-color: #242526;
  box-shadow: 0 0 0 10px #e1e1e1;
}

.service-box .service-ico {
  margin-bottom: 1rem;
  color: #1e1e1e;
}

.service-box .ico-circle {
  transition: all 300ms ease;
  font-size: 4rem;
}

.service-box .s-title {
  font-size: 1.4rem;
  text-transform: uppercase;
  text-align: center;
  padding: .4rem 0;
}

.service-box .s-description{
  color: #4e4e4e;
  text-align: justify;
  text-align-last: center;
}

/*======================================
//--//-->   COUNTER
======================================*/

.counter-box {
  color: #fff;
  text-align: center;
}

.counter-ico {
  margin-bottom: 1rem;
}

.counter-ico .ico-circle {
  height: 60px;
  width: 60px;
  line-height: 1.8;
  box-shadow: 0 0 0 10px #e1e1e1;
}

.counter-num .counter {
  font-size: 2rem;
  margin-bottom: 0;
}

/*======================================
//--//-->   PORTFOLIO
======================================*/

.work-box {
  margin-bottom: 120px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #fff;
}

.work-box:hover img {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

.work-img {
  display: block;
  overflow: hidden;
}

.work-img img {
  transition: all 1s;
}

.work-content {
  padding: 2rem 3% 1rem 4%;
  transition: 0.5s ease;
}

.work-content .w-more {
  color: #4e4e4e;
  font-size: .8rem;
}

.work-content .w-more .w-ctegory {
  color: #242526;
}

.work-content .w-like {
  font-size: 2.5rem;
  color: #242526;
  float: right;
}

.work-content .w-like a {
  color: #242526;
}

.work-content .w-like .num-like {
  font-size: .7rem;
}

.w-title {
  font-size: 1.2rem;
}

/*======================================
//--//-->   TESTIMONIALS
======================================*/

.testimonials .owl-carousel .owl-item img {
  width: auto;
}

.testimonial-box {
  color: #fff;
  text-align: center;
}

.testimonial-box .author-test {
  margin-top: 1rem;
}

.testimonial-box .author-test img {
  margin: 0 auto;
}

.testimonial-box .author {
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
  margin: 1rem 0;
  display: block;
  font-size: 1.4rem;
}

.testimonial-box .comit {
  font-size: 2rem;
  color: #242526;
  background-color: #fff;
  width: 52px;
  height: 52px;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  line-height: 1.6;
}

/*======================================
//--//-->   BLOG
======================================*/

.card-blog .card-body {
  position: relative;
}

.card-blog .card-category-box {
  position: absolute;
  text-align: center;
  top: -16px;
  left: 15px;
  right: 15px;
  line-height: 25px;
  overflow: hidden;
}

.card-blog .card-category {
  display: inline-block;
  color: #fff;
  padding: 0 15px 5px;
  overflow: hidden;
  background-color: #242526;
  border-radius: 4px;
}

.card-blog .card-category .category {
  color: #fff;
  display: inline-block;
  text-transform: uppercase;
  font-size: .7rem;
  letter-spacing: .1px;
  margin-bottom: 0;
}

.card-blog .card-title {
  font-size: 1.3rem;
  margin-top: .6rem;
}

.card-blog .card-description {
  color: #4e4e4e;
}

.card-blog .post-author {
  display: inline-block;
}

.card-blog .post-date {
  color: #4e4e4e;
  display: inline-block;
  float: right;
}

/*======================================
//--//-->   BLOG-SINGLE
======================================*/

.post-box,
.form-comments,
.box-comments,
.widget-sidebar {
  padding: 2rem;
  background-color: #fff;
  margin-bottom: 3rem;
}

.blog-wrapper .article-title {
  font-size: 1.5rem;
}

.blog-wrapper .post-meta {
  margin: 1rem 0;
}

.blog-wrapper .post-meta ul {
  border-left: 4px solid #242526;
  margin-top: 1rem;
}

.blog-wrapper .post-meta ul li {
  display: inline-block;
  margin-left: 15px;
}

.blog-wrapper .post-meta ul a {
  color: #242526;
}

.blog-wrapper .post-meta ul span {
  color: #1e1e1e;
}

.blog-wrapper .blockquote {
  border-left: 4px solid #242526;
  padding: 18px;
  font-style: italic;
}

/*------/ Comments /------*/

.box-comments .list-comments li {
  padding-bottom: 40px;
}

.box-comments .list-comments .comment-avatar {
  display: table-cell;
}

.box-comments .list-comments .comment-avatar img {
  width: 80px;
  height: 80px;
}

.box-comments .list-comments .comment-author {
  font-size: 1.3rem;
}

.box-comments .list-comments .comment-details {
  display: table-cell;
  vertical-align: top;
  padding-left: 25px;
}

.box-comments .list-comments a {
  color: #242526;
}

.box-comments .list-comments span {
  color: #1e1e1e;
  font-style: italic;
}

.box-comments .comment-children {
  margin-left: 40px;
}

/*------/ Sidebar /------*/

.widget-sidebar .sidebar-title {
  font-size: 1.6rem;
  font-weight: 600;
  border-left: 5px solid #242526;
  padding-left: 15px;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.widget-sidebar .list-sidebar li {
  position: relative;
  padding: 6px 0 6px 24px;
}

.widget-sidebar .list-sidebar li:before {
  position: absolute;
  content: "";
  width: 10px;
  height: 1px;
  left: 0;
  background-color: #242526;
  top: 20px;
}

.sidebar-search input {
  background-color: #fff;
  border-radius: 0;
  transition: all 0.5s ease-in-out;
}

.sidebar-search .btn-search {
  background-color: #242526;
  border-color: #242526;
  border-radius: 0;
  padding-left: 20px;
  padding-right: 20px;
}

.widget-tags ul li {
  display: inline-block;
  background-color: #242526;
  padding: .2rem .6rem;
  margin-bottom: .5rem;
  border-radius: 15px;
}

.widget-tags ul li a {
  color: #fff;
}

/*======================================
//--//-->   CONTACT
======================================*/

.footer-paralax {
  padding: 4rem 0 0 0;
}

.contact-mf {
  margin-top: 4rem;
}

/*======================================
//--//-->   FOOTER
======================================*/

footer {
  text-align: center;
  color: #fff;
  padding-bottom: 4rem;
}

footer .copyright {
  margin-bottom: .3rem;
}

footer .credits {
  margin-bottom: 0;
}

footer .credits a {
  color: #fff;
}

/*======================================
//--//-->   CONtaCT FORM
======================================*/

#sendmessage {
  color: #242526;
  border: 1px solid #242526;
  display: none;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#errormessage {
  color: red;
  display: none;
  border: 1px solid red;
  text-align: center;
  padding: 15px;
  font-weight: 600;
  margin-bottom: 15px;
}

#sendmessage.show,
#errormessage.show,
.show {
  display: block;
}

.validation {
  color: red;
  display: none;
  margin: 0 0 20px;
  font-weight: 400;
  font-size: 13px;
}

/*======================================
//--//-->   BUTTON
======================================*/

.button {
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  min-width: 145px;
  line-height: 50px;
  font-weight: 600;
  text-transform: uppercase;
  border-radius: 05px;
  transition: box-shadow 0.5s ease-in-out;
  border: 1px solid transparent;
  transition: all 300ms ease;
  cursor: pointer;

}

.button:focus {
}

.button:hover {
  background-color: #b1b1b1;
  color: #1e1e1e;
  transition: all 300ms ease;
}

.button-a {
  background-color: #e1e1e1;
  color: #242526;
  font-weight: 300;
}

.button-big {
  font-size: 1rem;
  padding: 1px 50px;
}

.button-rouded {
  border-radius: 5rem;
}

.btn-lg {
  padding: .5rem 1rem;
  font-size: 1.25rem;
  line-height: 1.5;
  border-radius: .3rem;
}

@media (min-width: 577px) {
  .counter-box {
    margin-bottom: 1.8rem;
  }
}

@media (min-width: 767px) {
  .about-mf .box-pl2 {
    margin-top: 3rem;
    padding-left: 0rem;
  }

  .card-blog {
    margin-bottom: 3rem;
  }

  .contact-mf .box-pl2 {
    margin-top: 3rem;
    padding-left: 0rem;
  }
}

@media (min-width: 768px) {
  .box-shadow-full {
    padding: 3rem;
  }

  .navbar-b.navbar-trans .nav-item,
  .navbar-b.navbar-reduce .nav-item {
    padding-left: 10px;
  }

  .navbar-b.navbar-trans .nav-link:before,
  .navbar-b.navbar-reduce .nav-link:before {
    margin-left: 18px;
  }

  .intro .intro-title {
    font-family: brawls;
    font-size: 70px;
  }

  .intro-single .intro-title {
    font-size: 3.5rem;
  }

  .testimonial-box .description {
    padding: 0 5rem;
  }

  .post-box,
  .form-comments,
  .box-comments,
  .widget-sidebar {
    padding: 3rem;
  }

  .blog-wrapper .article-title {
    font-size: 1.9rem;
  }

  .box-comments .list-comments .comment-author {
    font-size: 1.5rem;
  }
}

@media (min-width: 992px) {
  .testimonial-box .description {
    padding: 0 8rem;
  }
}

@media (min-width: 1200px) {
  .testimonial-box .description {
    padding: 0 13rem;
  }
}

@media (max-width: 1024px) {
  .bg-image {
    background-attachment: scroll;
  }
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
  .dark-circle-button{
    bottom: 50px;
  }
}

.covid{
  margin-top: 120px;
}

.about-mf,
.services-mf,
.portfolio-mf{
  background-color: #f5f5f5;
  transition: 0.5s ease;
}

.dark-circle-button {
  position: fixed;
  display: none;
  background-color: #2c2c2c;
  color: #e1e1e1;
  width: 44px;
  height: 44px;
  text-align: center;
  line-height: 0;
  font-size: 16px;
  right: 15px;
  bottom: 15px;
  cursor: pointer;
  border-radius: 50%;
  transition: background 0.5s;
  z-index: 11;
}

.dark-circle-button ion-icon{
  padding-top: 0px;
  padding-left: -20px;
  font-size: 25px;
  text-align: center;
  color: #e1e1e1;
  transition: 0.2s ease;
}
/* ----------------------------------------------------------- */
/* DROPDOWN */
/* ----------------------------------------------------------- */

/* Dropdown Button */
.dropdown{
  position: fixed;
  top: 22px;
  right: 22px;
  z-index: 100;
}
.dropbtn {
  background-color: #2c2c2c;
  width: 44px;
  height: 44px;
  line-height: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.5s;
}

.dropbtn ion-icon{
  padding-top: 0px;
  padding-left: -20px;
  font-size: 25px;
  text-align: center;
  color: #e1e1e1;
  transition: 0.2s ease;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: relative;
  background-color: #e1e1e1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: 0.2s ease;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #2c2c2c;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: 0.2s ease;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #e1e1e1}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

/* ----------------------------------------------------------- */
/* DARKMODE */
/* ----------------------------------------------------------- */

.dark .intro{
  background-color: #181818;
  transition: 0.5s ease;
}


.dark .about-mf,
.dark .services-mf,
.dark .portfolio-mf{
  background-color: #181818;
  transition: 0.5s ease;
}

.dark .box-shadow-full{
  background-color: #202020;
}



.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6,
.dark p,
.dark span,
.dark .intro-title {
  color: #e1e1e1;
}

.dark .navbar-brand,
.dark .nav-item .nav-link,
.dark .navbar-b.navbar-reduce .navbar-brand{
  color: #e1e1e1;
  transition: 01s ease;
}

.dark .bg-image1{
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, #181818), url('../img/intro-bgd.jpg');
  transition: 0.5s ease;
}

.dark .navbar-b.navbar-reduce{
  background-color: #1e1e1e;
}

.dark .navbar-b.navbar-trans .nav-link:before,
.dark .navbar-b.navbar-trans .nav-link:hover,
.dark .navbar-b.navbar-trans .show > .nav-link,
.dark .navbar-b.navbar-trans .active > .nav-link,
.dark .navbar-b.navbar-trans .nav-link.show,
.dark .navbar-b.navbar-trans .nav-link.active,{
  color: white;
}
.dark .navbar-b.navbar-reduce .nav-link:before{
  color: white;
}

.dark .navbar-b.navbar-reduce .nav-link:hover,{
  color: white;
}

.dark .navbar-b.navbar-reduce .show > .nav-link,
.dark .navbar-b.navbar-reduce .active > .nav-link,
.dark .navbar-b.navbar-reduce .nav-link.show,
.dark .navbar-b.navbar-reduce .nav-link.active,{
  color: white;
}

.dark .skill-mf .progress {
  background-color: #2c2c2c;

}

.dark .dropbtn{
  background-color: #e1e1e1;
}

.dark .dropbtn ion-icon{
  color: #2c2c2c;
}

.dark .dark-circle-button{
  background-color: #e1e1e1;
}

.dark .dark-circle-button ion-icon{
  color: #2c2c2c;
}

.dark .skill-mf .progress .progress-bar {
  background-color: #e1e1e1;
}

.dark .btn-fill {
    color: #e1e1e1;
    background-color: #2c2c2c;
}

.dark .btn-fill:hover,
.dark .btn-fill:focus {
    color: #e1e1e1;
    background-color: #3b3b3b;
}

.dark .title-left:before{
  background-color: #e1e1e1;
}

.dark .line-mf{
  background-color: #e1e1e1;
}

.dark .service-box{
  background-color: #202020;
}

.dark .service-box .s-description{
  color: #e1e1e1;
}

.dark .ico-circle {
  box-shadow: 0 0 0 10px #e1e1e1;
}

.dark .service-box:hover .ico-circle {
  color: #242526;
  background-color: #e1e1e1;
  box-shadow: 0 0 0 10px #2c2c2c;
}

.dark .socials .ico-circle {
  box-shadow: 0 0 0 3px #e1e1e1;
}

.dark .socials .ico-circle:hover {
  background-color: #e1e1e1;
  color: #242526;
  box-shadow: 0 0 0 3px #2c2c2c;
}

.dark .list-ico li{
  color: #e1e1e1;
}

.dark .button{
  background-color: #2c2c2c;
  color: #e1e1e1;
}

.dark .button:hover {
  background-color: #3b3b3b;
  color: #e1e1e1;
  font-weight: 100px;
  transition: all 300ms ease;
}

.dark .form-control {
    display: block;
    width: 100%;
    height: calc(2.25rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1e1e1e;
    background-color: #3b3b3b;
    background-clip: padding-box;
    border: 1px solid #242526;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.form-control:active{
  border-color: transparent;
}

.dark .work-content .w-more .w-ctegory,
.dark .work-content .w-more{
  color: #e1e1e1;
}

.dark .work-content{
  background-color: #202020;
}

.dark .modal-content{
  background-color: #202020;
}

.dark .clouds{
  display: none;
}

.dark .cloudsd{
  display: inline;
}

.dark .social-iso{
  background-color: #202020;
}

.dark .social-iso .social-color2{
  fill: #181818;
}

/* -----------------ISOMETRIC ---------------------------- */
/* -----------------ISOMETRIC ---------------------------- */
/* -----------------ISOMETRIC ---------------------------- */

.svgiso{
  width: 600px;
  margin: 0px 0px;
}

.st0{fill:#FFF9FF;}
.st1{fill:#D3BAE7;}
.st2{fill:#752939;}
.st3{fill:#BCBACE;}
.st4{fill:#1A685A;}
.st5{fill:#409682;}
.st6{fill:#4EAF9D;}
.st7{fill:#6F7178;}
.st8{fill:#E4E9F8;}
.st9{fill:#B5B9C5;}
.st10{fill:url(#SVGID_1_);visibility: hidden;}
.dark .st10{visibility: visible;}
.st11{fill:#F4971F;}
.st12{opacity:0.15;fill:#FFFFFF;}
.st13{fill:#FCC640;}
.st14{fill:#FFFFFF;}
.st15{fill:url(#SVGID_2_);}
.st16{fill:url(#SVGID_3_);}
.st17{fill:url(#SVGID_4_);}
.st18{fill:url(#SVGID_5_);}
.st19{fill:url(#SVGID_6_);}
.st20{fill:url(#SVGID_7_);}
.st21{fill:#8B8B8B;}
.st22{fill:url(#SVGID_8_);}
.st23{fill:url(#SVGID_9_);}
.st24{fill:url(#SVGID_10_);}
.st25{fill:url(#SVGID_11_);}
.st26{fill:url(#SVGID_12_);}
.st27{fill:url(#SVGID_13_);}
.st28{fill:url(#SVGID_14_);}
.st29{fill:url(#SVGID_15_);}
.st30{fill:url(#SVGID_16_);}
.st31{fill:url(#SVGID_17_);}
.st32{fill:url(#SVGID_18_);}
.st33{fill:url(#SVGID_19_);}
.st34{fill:url(#SVGID_20_);}
.st35{fill:url(#SVGID_21_);}
.st36{fill:url(#SVGID_22_);}
.st37{fill:url(#SVGID_23_);}
.st38{fill:url(#SVGID_24_);}
.st39{fill:url(#SVGID_25_);}
.st40{fill:url(#SVGID_26_);}
.st41{opacity:0.33;fill:#202020;}
.dark .st41{opacity:0;fill:#202020;}
.dark .st42{fill:#1a1a1a;}
.st42{fill:#4d4d4d;}
.st43{fill:#E1E1E1;}
.dark .st44{fill:#1a1a1a;}
.st44{fill:#4d4d4d;}
.st45{fill:url(#SVGID_29_);}
.st46{fill:#FEFEFE;}
.st48{opacity:0.15;}
.st57{fill:url(#SVGID_30_);}
.st58{fill:url(#SVGID_31_);}
.st59{fill:url(#SVGID_32_);}
.st60{fill:#707070;}
.st61{fill:#858585;}
.st62{fill:url(#SVGID_33_);}
.st63{fill:url(#SVGID_34_);}
.st64{fill:url(#SVGID_35_);}
.st65{fill:url(#SVGID_36_);}

svg{
  width: 700px;
  margin: 250px 750px;
}
/* ----------------------------NAME--------------------------- */
/* ----------------------------NAME--------------------------- */
svg #named{
  animation-duration: 01s;
  animation-name: named;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0.2s;
}

@keyframes named{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(12px) translateY(-12px);
  }
}
/* ----------------------------NAME--------------------------- */


/* ----------------------------PHONE-------------------------- */
/* ----------------------------PHONE-------------------------- */
svg #phoned{
  animation-duration: 01s;
  animation-name: phoned;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes phoned{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(8px) translateY(-8px);
  }
}
/* ----------------------------PHONE-------------------------- */


/* ----------------------------ICON--------------------------- */
/* ----------------------------ICON--------------------------- */
svg #icon1d{
  animation-duration: 2s;
  animation-name: icon1d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
  fill: #e1e1e1;
}
@keyframes icon1d{
  from{}
  to{
    fill: #ff4d4d;
  }
}

svg #icon2d{
  animation-duration: 2s;
  animation-name: icon2d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0.5s;
  fill: #e1e1e1;
}
@keyframes icon2d{
  from{}
  to{
    fill: #fffa65;
  }
}

svg #icon3d{
  animation-duration: 2s;
  animation-name: icon3d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 1s;
  fill: #e1e1e1;
}
@keyframes icon3d{
  from{}
  to{
    fill: #18dcff;
  }
}

svg #icon4d{
  animation-duration: 2s;
  animation-name: icon4d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 1.5s;
  fill: #e1e1e1;
}
@keyframes icon4d{
  from{}
  to{
    fill: #CD84F1;
  }
}

svg #icon5d{
  animation-duration: 2s;
  animation-name: icon5d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2s;
  fill: #e1e1e1;
}
@keyframes icon5d{
  from{}
  to{
    fill: #32FF7E;
  }
}

svg #icon6d{
  animation-duration: 2s;
  animation-name: icon6d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 2.5s;
  fill: #e1e1e1;
}
@keyframes icon6d{
  from{}
  to{
    fill: #FFAF40;
  }
}

svg #icon7d{
  animation-duration: 2s;
  animation-name: icon7d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 3s;
  fill: #e1e1e1;
}
@keyframes icon7d{
  from{}
  to{
    fill: #FFCCCC;
  }
}

svg #icon8d{
  animation-duration: 2s;
  animation-name: icon8d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 3.5s;
  fill: #e1e1e1;
}
@keyframes icon8d{
  from{}
  to{
    fill: #7D5FFF;
  }
}

svg #icon9d{
  animation-duration: 2s;
  animation-name: icon9d;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 4s;
  fill: #e1e1e1;
}
@keyframes icon9d{
  from{}
  to{
    fill: #dcdcdc;
  }
}
/* ----------------------------ICON--------------------------- */


/* ----------------------------BUTTON------------------------- */
/* ----------------------------BUTTON------------------------- */
svg .designd-scale{
  animation-duration: 20s;
  animation-name: designd-scale;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  transform-origin: bottom;
}
@keyframes designd-scale{
  0% {transform: scale(1);}
  5% {transform: scale(1.2);}
  20% {transform: scale(1.2);}
  25% {transform: scale(1);}
  100% {transform: scale(1);}
}

svg #designd .st14{
  animation-duration: 20s;
  animation-name: designd-fill-icon;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes designd-fill-icon{
  0% {fill: #fff;}
  5% {fill: black;}
  20% {fill: black;}
  25% {fill: #fff;}
  100% {fill: #fff;}
}

svg #designd .st62, .st63{
  animation-duration: 20s;
  animation-name: designd-fill-bg;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes designd-fill-bg{
  0% {fill: black;}
  5% {fill: #fff;}
  20% {fill: #fff;}
  25% {fill: black;}
  100% {fill: black;}
}

svg #designd{
  animation-duration: 1s;
  animation-name: designd-translate;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
}
@keyframes designd-translate{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(20px) translateY(-20px);
  }
}




svg .videod-scale{
  animation-duration: 20s;
  animation-name: videod-scale;
  animation-iteration-count: infinite;
  animation-delay: 7s;
  transform-origin: bottom;
}
@keyframes videod-scale{
  0% {transform: scale(1);}
  5% {transform: scale(1.2);}
  20% {transform: scale(1.2);}
  25% {transform: scale(1);}
  100% {transform: scale(1);}
}

svg #videod .st14{
  animation-duration: 20s;
  animation-name: videod-fill-icon;
  animation-iteration-count: infinite;
  animation-delay: 7s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes videod-fill-icon{
  0% {fill: #fff;}
  5% {fill: black;}
  20% {fill: black;}
  25% {fill: #fff;}
  100% {fill: #fff;}
}

svg #videod .st64, .st65{
  animation-duration: 20s;
  animation-name: videod-fill-bg;
  animation-iteration-count: infinite;
  animation-delay: 7s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes videod-fill-bg{
  0% {fill: black;}
  5% {fill: #fff;}
  20% {fill: #fff;}
  25% {fill: black;}
  100% {fill: black;}
}

svg #videod{
  animation-duration: 1s;
  animation-name: videod;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0s;
}
@keyframes videod{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(27px) translateY(-27px);
  }
}




svg .webd-scale{
  animation-duration: 20s;
  animation-name: webd-scale;
  animation-iteration-count: infinite;
  animation-delay: 12s;
  transform-origin: bottom;
}
@keyframes webd-scale{
  0% {transform: scale(1);}
  5% {transform: scale(1.2);}
  20% {transform: scale(1.2);}
  25% {transform: scale(1);}
  100% {transform: scale(1);}
}

svg #webd .st14{
  animation-duration: 20s;
  animation-name: webd-fill-icon;
  animation-iteration-count: infinite;
  animation-delay: 12s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes webd-fill-icon{
  0% {fill: #fff;}
  5% {fill: black;}
  20% {fill: black;}
  25% {fill: #fff;}
  100% {fill: #fff;}
}

svg #webd #trang_4_{
  animation-duration: 20s;
  animation-name: webd-fill-bg;
  animation-iteration-count: infinite;
  animation-delay: 12s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes webd-fill-bg{
  0% {fill: black;}
  5% {fill: #fff;}
  20% {fill: #fff;}
  25% {fill: black;}
  100% {fill: black;}
}

svg #webd{
  animation-duration: 1s;
  animation-name: webd;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0.1s;
}
@keyframes webd{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(15px) translateY(-15px);
  }
}




svg .idead-scale{
  animation-duration: 20s;
  animation-name: idead-scale;
  animation-iteration-count: infinite;
  animation-delay: 17s;
  transform-origin: bottom;
}
@keyframes idead-scale{
  0% {transform: scale(1);}
  5% {transform: scale(1.2);}
  20% {transform: scale(1.2);}
  25% {transform: scale(1);}
  100% {transform: scale(1);}
}

svg #idead .st14{
  animation-duration: 20s;
  animation-name: idead-fill-icon;
  animation-iteration-count: infinite;
  animation-delay: 17s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes idead-fill-icon{
  0% {fill: #fff;}
  5% {fill: black;}
  20% {fill: black;}
  25% {fill: #fff;}
  100% {fill: #fff;}
}

svg #idead #trang_3_{
  animation-duration: 20s;
  animation-name: idead-fill-bg;
  animation-iteration-count: infinite;
  animation-delay: 17s;
  transform-origin: bottom;
  transition: 1s ease;
}
@keyframes idead-fill-bg{
  0% {fill: black;}
  5% {fill: #fff;}
  20% {fill: #fff;}
  25% {fill: black;}
  100% {fill: black;}
}

svg #idead{
  animation-duration: 1s;
  animation-name: idead;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-delay: 0.05s;
}
@keyframes idead{
  from{
    transform: translateX(0px) translateY(0px);
  }
  to{
    transform: translateX(25px) translateY(-25px);
  }
}
/* ----------------------------BUTTON------------------------- */


/* -------------------------AUTOMATIC------------------------- */
/* -------------------------AUTOMATIC------------------------- */

svg #designerd{
  animation-duration: 20s;
  animation-name: designerd;
  animation-iteration-count: infinite;
  animation-delay: 2s;
  opacity: 0;
}
@keyframes designerd{
  0%  {
    transform: translateX(0px) translateY(0px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  25% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

svg #editord{
  animation-duration: 20s;
  animation-name: editord;
  animation-iteration-count: infinite;
  animation-delay: 7s;
  opacity: 0;
}
@keyframes editord{
  0%  {
    transform: translateX(0px) translateY(0px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  25% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

svg #web-desd{
  animation-duration: 20s;
  animation-name: web-desd;
  animation-iteration-count: infinite;
  animation-delay: 12s;
  opacity: 0;
}
@keyframes web-desd{
  0%  {
    transform: translateX(0px) translateY(0px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  25% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

svg #creatord{
  animation-duration: 20s;
  animation-name: creatord;
  animation-iteration-count: infinite;
  animation-delay: 17s;
  opacity: 0;
}
@keyframes creatord{
  0%  {
    transform: translateX(0px) translateY(0px);
  }
  5% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  20% {
    opacity: 1;
    transform: translateX(0px) translateY(50px);
  }
  25% {
    opacity: 0;
    transform: translateX(0px) translateY(50px);
  }
  100% {
    transform: translateX(0px) translateY(0px);
  }
}

/* -------------------------SOCIAL-ISOMETRIC----------------
-------------------------SOCIAL-ISOMETRIC----------------
-------------------------SOCIAL-ISOMETRIC---------------- */

.social-iso{
  width: 450px;
  margin: 0px 0px;
  background: #e1e1e1;
  border-radius: 20px;
}

.social-svg{
  width: 450px;
  margin: 0px 0px;
}

.social-color0{display:none;}
.social-color1{display:inline;fill:#E1E1E1;}
.social-color2{fill:#A0A0A0;}
.social-color3{fill:#A6D0F4;}
.social-color4{fill:#FFFFFF;}
.social-color5{fill:none;stroke:#FFFFFF;stroke-miterlimit:10;}
.social-color6{fill:#1A3B5F;}
.social-color7{fill:#2F6CAD;}
.social-color8{fill:#FAFAFA;}
.social-color9{opacity:0.53;}
.social-color10{fill:#456E8B;}
.social-color11{fill:#78C0F1;}
.social-color12{fill:#F8F8F8;}
.social-color13{fill:#0E458C;}
.social-color14{fill:#1770E4;}
.social-color15{fill:#F0F0F0;}
.social-color16{fill:#555555;}
.social-color17{fill:url(#f3_2_);}
.social-color18{fill:url(#f2_2_);}
.social-color19{fill:url(#f1_2_);}
.social-color20{fill:url(#f1_6_);}
.social-color21{fill:#F13F81;}

/* ---------------------------TWITTER-------------------------
---------------------------TWITTER-------------------------
---------------------------TWITTER------------------------- */

#tw-floor #tw-logo,
#tw-floor #f1_1_,
#tw-floor #f2_1_,
#tw-floor #f3_1_,
#social1 #tw-text{
  transition: 0.3s ease-in-out;
}
#tw-floor:hover #tw-text{
  transform: translate(0,-80px);
}
#tw-floor:hover #tw-logo{
  transform: translate(0,-80px);
}
#tw-floor:hover #f1_1_{
  transform: translate(0,-60px);
  opacity: 0.7;
}
#tw-floor:hover #f2_1_{
  transform: translate(0,-40px);
  opacity: 0.5;
}
#tw-floor:hover #f3_1_{
  transform: translate(0,-20px);
  opacity: 0.2;
}
svg #social1{
  animation-duration: 2s;
  animation-name: tw;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes tw {
  from{
    transform: translate(0,-15px);
  }
}

svg #social1 #shadow1{
  animation-duration: 2s;
  animation-name: shadow1;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

@keyframes shadow1 {
  from{
    opacity: 0.7;
  }
  to{
    opacity: 1;
  }
}



/* ---------------------------FACEBOOK-------------------------
---------------------------FACEBOOK-------------------------
---------------------------FACEBOOK------------------------- */

#fb-floor #fb-logo,
#fb-floor #f1,
#fb-floor #f2,
#fb-floor #f3_4_,
#fb-floor #fb-text{
  transition: 0.3s ease-in-out;
}
#fb-floor:hover #fb-text{
  transform: translate(0,-80px);
}
#fb-floor:hover #fb-logo{
  transform: translate(0,-80px);
}
#fb-floor:hover #f1{
  transform: translate(0,-60px);
  opacity: 0.7;
}
#fb-floor:hover #f2{
  transform: translate(0,-40px);
  opacity: 0.5;
}
#fb-floor:hover #f3_4_{
  transform: translate(0,-20px);
  opacity: 0.2;
}
svg #social2{
  animation-duration: 2s;
  animation-name: fb;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
}

@keyframes fb {
  from{
    transform: translate(0,-15px);
  }
}

svg #shadow2{
  animation-duration: 2s;
  animation-name: shadow2;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 0.5s;
}

@keyframes shadow2 {
  from{
    opacity: 0.5;
  }
  to{
    opacity: 0.8;
  }
}

/* ---------------------------INSTAGRAM-------------------------
---------------------------INSTAGRAM-------------------------
---------------------------INSTAGRAM------------------------- */

#instagram #in-logo_1_,
#instagram #f1_4_,
#instagram #f2_4_,
#instagram #f3,
#instagram #in-text{
  transition: 0.3s ease-in-out;
}
#instagram:hover #in-text{
  transform: translate(0,-80px);
}
#instagram #in-floor_1_:hover #in-logo_1_{
  transform: translate(0,-80px);
}
#instagram #in-floor_1_:hover #f1_4_{
  transform: translate(0,-60px);
  opacity: 0.7;
}
#instagram #in-floor_1_:hover #f2_4_{
  transform: translate(0,-40px);
  opacity: 0.5;
}
#instagram #in-floor_1_:hover #f3{
  transform: translate(0,-20px);
  opacity: 0.2;
}
svg #social3{
  animation-duration: 2s;
  animation-name: in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
}

@keyframes in {
  from{
    transform: translate(0,-15px);
  }
}

svg #shadow3{
  animation-duration: 2s;
  animation-name: shadow2;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 1s;
}

@keyframes shadow2 {
  from{
    opacity: 0.3;
  }
  to{
    opacity: 0.6;
  }
}

/* ---------------------------LINKEDIN-------------------------
---------------------------LINKEDIN-------------------------
---------------------------LINKEDIN------------------------- */

#li-floor #li-logo,
#li-floor #f1_3_,
#li-floor #f2_3_,
#li-floor #f3_3_,
#li-floor #li-text{
  transition: 0.3s ease-in-out;
}
#li-floor:hover #li-text{
  transform: translate(0,-80px);
}
#li-floor:hover #li-logo{
  transform: translate(0,-80px);
}
#li-floor:hover #f1_3_{
  transform: translate(0,-60px);
  opacity: 0.7;
}
#li-floor:hover #f2_3_{
  transform: translate(0,-40px);
  opacity: 0.5;
}
#li-floor:hover #f3_3_{
  transform: translate(0,-20px);
  opacity: 0.2;
}
svg #social4{
  animation-duration: 2s;
  animation-name: li;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
}

@keyframes li {
  from{
    transform: translate(0,-15px);
  }
}

svg #shadow4{
  animation-duration: 2s;
  animation-name: shadow4;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-delay: 1.5s;
}

@keyframes shadow4 {
  from{
    opacity: 0.1;
  }
  to{
    opacity: 0.4;
  }
}



/* ------------------RESPONSIVE-----------------------
------------------RESPONSIVE-----------------------
------------------RESPONSIVE----------------------- */


@media only screen and (max-width: 1680px){
  .navbar-collapse ul{
    margin-left: 475px;
  }
  .navbar-brand{
    margin-left: 65px;
  }
}

@media only screen and (max-width: 1366px){
  .navbar-collapse ul{
    margin-left: 325px;
  }
  .navbar-brand{
    margin-left: 140px;
  }
  .navbar a{
    font-size: 15px;
  }
  .svgiso{
    width: 400px;
  }
  .dropdown{
    visibility: hidden;
  }
}

@media only screen and (max-width: 1360px){
  .navbar-collapse ul{
    margin-left: 325px;
  }
  .navbar-brand{
    margin-left: 140px;
  }
  .navbar a{
    font-size: 15px;
  }
  .svgiso{
    width: 400px;
  }
  .dropdown{
    visibility: hidden;
  }
}

@media only screen and (max-width: 1280px){
  .navbar-collapse ul{
    margin-left: 310px;
  }
  .navbar-brand{
    margin-left: 160px;
  }
  .navbar a{
    font-size: 13px;
  }
  .svgiso{
    width: 400px;
  }
  .dropdown{
    visibility: hidden;
  }
}

@media only screen and (max-width: 1024px){
  .navbar-collapse ul{
    margin-left: 245px;
  }
  .navbar-brand{
    margin-left: 130px;
  }
  .navbar a{
    font-size: 13px;
  }
  .navbar-b.navbar-trans .nav-item,
  .navbar-b.navbar-reduce .nav-item{
    padding-right: 0px;
  }
  .svgiso{
    width: 400px;
  }
  .dropdown{
    visibility: hidden;
  }
  .intro{
    height: 80vh;
  }
  .social-iso{
    width: 380px;
  }
}

@media only screen and (max-width: 800px){
  .navbar-collapse ul{
    margin-left: 155px;
  }
  .navbar-brand{
    margin-left: 75px;
  }
  .navbar a{
    font-size: 10px;
  }
  .navbar-b.navbar-trans .nav-item,
  .navbar-b.navbar-reduce .nav-item{
    padding-right: 0px;
  }
  .svgiso{
    position: absolute;
    top: -120px;
    left: 35px;
    width: 350px;
  }
  .dropdown{
    visibility: hidden;
  }
  .social-iso{
    width: 280px;
  }
}

@media only screen and (max-width:767px){
  .navbar-collapse ul{
    margin-left: 0px;
  }
  .navbar-brand{
    margin-left: 0px;
  }
  .navbar a{
    font-size: 15px;
  }
  .svgiso{
    display: none;
  }
  .intro-content h1,
  .intro-content p{
    position: relative;
    top: 500px;
    display: block;

  }
  .bg-image1{
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0) 30%, #f5f5f5), url('../img/bg-re.jpg');
  }
  .dark .bg-image1{
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, #181818), url('../img/bg-red.jpg');
  }
  .dark .st10{
    display: none;
  }
  .social-hidden{
    position: absolute;
    display: none;
  }
  .dropdown{
    visibility: visible;
  }
  .navbar-toggler{
    display: none;
  }
  .clouds,
  .cloudsd{
    display: none;
  }
}