/*
 Theme Name:     Webotop child by jŪlIΞή Webotop
 Theme URI:
 Description:    Child theme for webotop
 Author:
 Author URI:
 Template:       twentyseventeen
 Version:        1.0.0
*/


:root {
    --primary-color: #fecf0f;
    --secondary-color: #222222;
}


body {
  background-color: #222222;
}

h1, h2, h3, h4, p, a, body, li {font-family: 'Quicksand', sans-serif;}


::-webkit-scrollbar {
  display: none;
}


.site-title a {

    font-family: 'PaybAck', sans-serif;
    color: #fecc33!important;
    font-size: clamp(34px, 5vw, 58px);
    text-transform: lowercase;
}

li {
font-size: 18px;
margin-bottom: 16px;
line-height: 1.5;
}


.site-header {background:#222222}

.flex {display: flex}

.flex-1 {flex: 1}

.twentyseventeen-front-page .custom-header {height:100vh}

.wp-custom-header .wp-custom-header-video-button {display:none}

.twentyseventeen-front-page article:not(.has-post-thumbnail):not(:first-child) {
    border-top: 0
}


.site-navigation-fixed .site-title a {
    -webkit-text-stroke-color: #fecf0c;
}


.site-navigation-fixed div.infos-container {
display:inline
}

.site-navigation-fixed  #site-navigation {
    position: relative;
    right: 24px;
}

body {
  font-weight:300;
  line-height:1;
  overflow-x: hidden /* AOS no right blank space*/
}

section { line-height: 1.5; }

body.page:not(.twentyseventeen-front-page) .entry-title {

    font-size: 28px;
    font-weight: 400;

}

body.page:not(.twentyseventeen-front-page) .entry-title {
    margin-top: 80px;
}

/*FLEX Slider*/

.front-box {
  position: relative;
}


.flexslider p {
  margin:0;
}


.flexslider {
    background: transparent;
    border: none;
    height: auto;
    position: relative;
    color: white;
    font-size: 15px;
    font-weight: 200;
    text-shadow: 2px 2px rgb(34 34 34 / 49%);
    min-height: 300px;
    text-align: left;
}


.flexslider h2 {margin-top:0;transition: all 0.4s ease-in-out;}
.flexslider h3 {color:white;margin-bottom:2%}


.flex-control-nav {
width: 100%;
position: relative;
top: 30px;
text-align: center;
padding: 0!important;
}

.flex-control-paging li a.flex-active {
    background: #fecd01;
    cursor: default;
}

.flexslider .slides {
    width: 100%;
    height: 100%;
    text-align: center;
  }


.flexslider .slider img {
    width:auto;
    margin: auto;
    max-height: 450px;
}



.left {text-align:left;}

hr {max-width:50%}

.logo {
				z-index: 3;
        position: relative;

}

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

  .logo {
    display: none;
  }

}

label {
    /* color: #333;*/
    color:white;
    text-transform: uppercase;
    display: block;
    font-weight: 400;
    margin-bottom: 0.5em;
    text-align: left;
    font-size: 80%;
  }

fieldset .form-group {margin: auto;}

  .custom-logo-link {
  padding-right: 0;
}

.padding-top {padding-top: 5%;}


body.home section {text-align:center;}
article p {font-size:20px;margin: 0 0 .5em; color:inherit;}
body.home section p {font-size:22px;margin: 0 0 .5em;}
article p {line-height:40px;}


.text-shadow {text-shadow: 5px 5px 3px rgba(60, 60, 60, 0.2);}


#site-navigation   li {
    display: table-cell;
    position: relative;
    padding: 15px 0;
  }
#site-navigation a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 12px 12px;
    position: relative;
    font-weight: 500;
      white-space: nowrap;

  }
#site-navigation a:after {
    background: none repeat scroll 0 0 transparent;
    bottom: 5px;
    content: "";
    display: block;
    height: 1px;
    left: 50%;
    position: absolute;
    background: #fff;
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }

  #site-navigation a:hover {
color:#fece0e;
  }

.site-navigation-fixed  #site-navigation  a:hover {
color:#fff;
  }

#site-navigation a:hover:after {
    width: 100%;
    left: 0;
  }

#site-navigation .active a, #site-navigation .active.menu-item-71 {
    color: white;
}

.site-navigation-fixed #site-navigation .active a, .site-navigation-fixed .site-title a, .site-navigation-fixed .site-description {color:#222!important}


#site-navigation {margin: auto;}

.navigation-top #site-navigation .cta  {display:none;}
.navigation-top #site-navigation .cta a {left: 10%;background: #00bcd4;color:white;border-radius:10px}
.navigation-top #site-navigation .cta a:hover { background-color:white;color:#222;border-radius:100px}
.navigation-top #site-navigation .cta a:hover:after {width:0;}

.site-navigation-fixed { background: rgba(52, 52, 52, 0.8)}
.navigation-top.site-navigation-fixed #site-navigation .cta {display: table-cell;}

.navigation-top.site-navigation-fixed .row {margin:0}

.site-navigation-fixed .no-display-on-fixed-nav {display:none!important}

.header-separator {
    position: absolute;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    z-index: 2;
}


.logo-brand svg{
    padding-right: 2em;
    width: 130px;
}

.site-branding-text {text-align:left}

.site-branding .custom-logo-link img {
    display: inline-block;
    max-width: 80%;
}

.site-navigation-fixed .custom-logo-link img {
    padding: 0;
  /*  filter: brightness(.2); */
    top: 0;
    position: relative;
}

.custom-logo-link img {
    display: inline-block;
    height: 100%;
    width: 180px;
    max-height: none;
    max-width: 180px;
}


#particle-container {
    z-index: 5;
    position: relative;
  }

.pop-register {text-align:center; top: 30%!important;    font-size: 25px;}
.pop-register h3 {line-height: 1;padding:0}
.register-banner {
		width: 100%;
    border-radius: 5px;
    background: #fecf0f;
    color: white;
    text-align: center;
    font-size: 25px;
    text-transform: uppercase;
    }

.materialis .header-separator svg {
    height: 154px !important;
}
.header-separator svg {
    display: block;
    width: calc(100% + 1.3px);
}

.front .svg-white-bg {
    fill: #3C3C3C !important;
}

.inscription .svg-white-bg {
    fill: whitesmoke !important;
}

.svg-white-bg {
    fill: #ffffff !important;
}

svg {
    max-height: 100%;
}

svg.svg-side {
    width: 10%;
    margin-left: 41%;
    position: absolute;
    margin-top: -1%;
  }

svg.bottom-curve {
      background: #fecf0f;
      margin-bottom: -2px;
}

svg.bottom-header-curve {
    overflow: hidden;
    z-index: 4;
    position: absolute;
  }

a:hover,a:active,a:focus,a:visited{  outline: none;}


.services-details img {
    vertical-align: middle;
    width: 100%;
    min-height: 350px;
    object-fit: cover;
}

.services-details h3 {font-size: 30px; margin-bottom: 2%;}

.logo-home {margin-top: -40px;}

dfn, cite, em, i {
    font-style: italic;
    font-weight: 200;
}

.site-navigation {display: -webkit-inline-box;}

#masthead .wrap {
    position: relative;
    max-width: 100%;
    margin: auto;
    text-align: center;
}

.page-wrap {max-width:80%;margin:auto}

.main-navigation ul {
    background: transparent;
    list-style: none;
    margin: 0;
    padding: 0 1.5em

}

.navigation-top .col {margin:auto;}

.sitename {margin:auto}

.site-title {
    clear: none;
    font-size: calc(20px + 10 * ((100vw - 320px) / 1440));
    line-height: 0.8;
    letter-spacing: 0.08em;
    margin: 0;
    padding: 0;
    text-transform: none
}

#footer .site-title {

      position:relative;
      font-family: 'PaybAck', sans-serif;
      color: #fecc33!important;
      cursor: default;
      font-size: 35px;

}



#footer .link {text-align:center}


form#login h4 {
    text-transform: capitalize;

}


#footer i {font-size:40px;}

.site-branding {

    width:100%;


}

.menu-blog-container {
  display: inline-flex;
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    right: 16px;
    border: none;
    outline: none;
    margin-right: 0;
}

.menu-toggle:focus {
    border: none;
    outline: none;
}

.hamburger {
  display: block;
  width: 30px;
  height: 5px;
  background-color: #e2d139;
  position: relative;
  transition: all 0.3s ease-in-out;
}

.site-navigation-fixed .hamburger, .site-navigation-fixed .hamburger::before, .site-navigation-fixed .hamburger::after  {
  background-color: #494949;
}

.hamburger::before,
.hamburger::after {
    content: "";
    position: absolute;
    width: 30px;
    height: 3px;
    background-color: #f79837;
    transition: all 0.3s ease-in-out;
}

.hamburger::before {
    top: -8px;
}

.hamburger::after {
    bottom: -8px;
}

/* Toggle Animation */
.menu-toggle.active .hamburger {
    background-color: transparent;
}

.menu-toggle.active .hamburger::before {
    transform: rotate(45deg);
    top: 0;
}

.menu-toggle.active .hamburger::after {
    transform: rotate(-45deg);
    bottom: 0;
}

.js .main-navigation.toggled-on > div > ul {
    position: fixed!important;
    left: 0;
    top: 0;
    width: 100%;
    background: #323232;
    transition: all .2s ease-in-out;
    text-align: center;
    font-size: 20px;
    display: grid;
    z-index: 3;

}

/* Close Icon */
.close-icon {
    display: none;
    font-size: 24px;
    color: #ffc107;
    position: absolute;
    z-index: 33;
    top: 0;
}

/* When menu is active */
.menu-toggle.active .hamburger {
    display: none;
}

.menu-toggle.active .close-icon {
    display: block;
    top: -50px;
    right: 0;
}

.site-navigation-fixed #site-navigation.toggled-on .active a {

  color: #e2d139!important;

}

body.has-header-image .site-description, body.has-header-video .site-description {
    cursor: default;
    font-weight: 400;
    }



.site-branding a:hover, .site-branding a:focus {
    opacity:1
}


.twentyseventeen-front-page .site-content {
    padding: 0;
    position: relative;

}

.site-content-contain {
    position: relative;
    margin-bottom: 30px;
    background-color: #222222;
    z-index:2;
}

.custom-header-media {
/*background: deepskyblue;*/
background: #222;
}

.custom-header-media svg {

      width: 70%;
      margin-top: 180px;
      margin-left: 20px

}

.home .svg-smile-intro {

  bottom: 40px;

}

.blog .svg-smile-intro {

  bottom: 0;
}

.blog h2 a {
  color: #ffc107;
}



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


#footer .link {text-align:center}

.custom-header-media {height: auto}


.custom-header-media svg {

width: 50%;
margin-top: 180px;
margin-left: 170px;

}

}

.navigation-top .row {
  width: 100%;
}

.site-navigation-fixed .menu-top-menu-container {    margin-top: 15px;  }
.site-navigation-fixed.navigation-top.dark {
    background: #fecf0f!important;
}

.site-navigation-fixed.navigation-top.dark #menu-top-right .dropdown-content a.last {

border-radius: 0px 0 10px 10px;
}




@media screen and (min-width: 67em) {
.navigation-top nav {
    margin-left: 0;
  /*  width: 80%;*/
}
}

/*
.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media img {display:none}
*/
.logonav { position: relative; display:none; opacity:0;padding:0}

.site-navigation-fixed.navigation-top {
		bottom: auto;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		width: 100%;
		z-index: 7;
    transition: 0.5s;
	}

.site-navigation-fixed.navigation-top .logonav{
	display:block;
	opacity:1


	}

.site-navigation-fixed .wrap {max-width:1440px}

.menu-top-right{padding: 5px;}



@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}



.nav-inline {display: -webkit-inline-box;}


.custom-header {
  position: relative;
	width:100%;
	margin-bottom: 0px!important;
  background:#262626
}

/*
.custom-header video {  animation: hue-rotation-animate 100s linear infinite; }

@keyframes hue-rotation-animate {
   0% {
     filter: hue-rotate(0deg);
   }

   50% {
     filter: hue-rotate(180deg);
   }

   100% {
     filter: hue-rotate(360deg);
   }
 }
*/

.has-header-image .custom-header-media img {
   animation: zoom-in-zoom-out 200s ease infinite;
   opacity:0.8
 }


 @keyframes zoom-in-zoom-out {
   0% {
     transform: scale(1, 1);
   }
   50% {
     transform: scale(1.5, 1.5);
   }
   100% {
     transform: scale(1, 1);
   }
 }


body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size:14px

    }

img#captcha_contact {
		width: 150px;
    height: 40px;
    }


.navigation-top a {font-weight:200;;color:#767676;}
.navigation-top.dark {background: transparent;  /*   background: linear-gradient(90deg, rgba(255,255,255,0), rgba(0,0,0,0.2));*/}


#menu-top-right {

    position: absolute;
    font-weight: 200;
		border-radius: 10px;
		border-radius: 10px 10px 10px 10px;
		display: block;
		right: 0;
    top: 17%;
  }

.navigation-top.dark.site-navigation-fixed  #menu-top-right {

    font-weight: 200;
		border-radius: 10px;
		border-radius: 10px 10px 10px 10px;
		display: block;
		right: 0;
    position: relative;
    top: 17%;

}

.navigation-top.dark.site-navigation-fixed #menu-top-right {
	border-radius: 10px;
	top:12px;
}
.navigation-top.dark a {color:white;}


.sun {background: #fecf0f;color:#222}
h2.sun {color:#222;    background: none;}


.dark  p {color:white}
.dark  i, #config .title {color:#fecf0f;}

.dark h3 {color:#fcfcfc}
/* front page sections */

#config {padding-bottom: 10%;background-size: 10%;}

.webo-logo-dark-bg {
    background: url(/wp-content/uploads/2019/10/LogoTransGrey.png);
    background-size: 60%;
    background-repeat: no-repeat;
    background-position: center;
}


#onepage {text-align:center; background: white;}
.section .title { margin: auto;text-transform:uppercase}
.section .title p {font-size:  calc(18px + (22 - 14) * ((100vw - 320px) / (1600 - 320))); margin:0;font-weight:bold}


.section .infos p {color:#3C3C3C;font-size:  calc(42px + (22 - 14) * ((100vw - 320px) / (1600 - 320))); margin:0;font-style:italic;font-weight:bold}

.section .infos span {color:#f9a146;text-transform:uppercase}
.section .infos h4 {color:#1ca23f;text-transform:uppercase; padding: 20px;}
.section p span {   margin:0;font-style:italic;font-weight:bold}
.section p span.color {    color: #fecf0f; margin:0;font-style:italic;font-weight:bold}

.section li {color:white;font-weight:180;font-size:18px}
.section .social i {font-size:100px; margin-left:5%}
.section .social a:hover {color:#fecf0f;}
.section li span {  color: white}
.section .infos-container h3 {
		font-size: 3em;
    margin: 0;
    font-weight: bold;
    font-style:italic
    }
.section {margin:auto;}

.section .infos-container {margin:0}


.social-icon {max-width: 8%}
button a.inscription {color:white;font-weight:200}
button.inscription {background:#3C3C3C}
button {border-radius: 5px;}

.fa-whatsapp p {display:none}
.fa-whatsapp:hover p {display:block;position:absolute;font-size:20px}



/* responsive front page content sections  */

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

.section .infos p {font-size:  calc(18px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));}


.section .infos h4 { padding: 0px;}

.section .infos-container h3 {
		font-size: 1.2em;
    }

    .section .infos h4  {font-size:8px}

    .section li {

    font-size: 12px;
}

.section .title p {
    font-size: calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
        word-wrap: initial;
}

}

/* end responsive front page content sections  */


/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tabOFF {
  display: none;
  border:none!important
}

.display-none {display:none!important}

button.nextprev {
  background-color: #4CAF50;
  color: #ffffff;
  border: none;
  padding: 10px 20px;
  font-size: 17px;
  font-family: Raleway;
  cursor: pointer;
  margin: 40px 15px 0!important;
}

button.nextprev:hover {
  opacity: 0.8;
}

#prevBtn {
  background-color: #bbbbbb;
}



/**
 * ----------------------------------------
 * animation slide-right
 * ----------------------------------------
 */

 .slide-right {
 	-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 	        animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
 }

 .slide-right-delay {
 	margin-left:-30px;
   min-width: 110%;
 	-webkit-animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
 	        animation: slide-right 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.2s both;
 }



@-webkit-keyframes slide-right {
  0% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes slide-right {
  0% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}

@-webkit-keyframes slide-right-delay {
  0% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes slide-right-delay {
  0% {
    -webkit-transform: translateX(-800px);
            transform: translateX(-800px);
  }
  100% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}



h2 {
  color:#fecf0f;
  text-transform:uppercase;
  font-size: clamp(22px, 3vw, 64px);
  font-weight:500;
  margin-bottom: 0;
}

.front-box {margin-top: 40px!important;}

@media screen and (max-width: 769px) {
.front-box {margin-top: 80px;}
}

.single-post .entry-title, .page .entry-title  {
  font-size: clamp(20px, 2vw, 24px);
  font-weight:500;
  margin-bottom: 0;
  text-transform:uppercase;
}

.single-post .entry-content p {text-align: left;}

.single-post .entry-content a,  .single-post .entry-content a:hover { color: #00bcd4; }


.intro p {text-align:justify}

.border-left {
  border-left: 4px solid #fecf0f;
    padding: 10px;
  }


.stripes .stripe {
    width: 100%;
    position: relative;
    height: 180px;
}


.stripes {
    position: relative;
    width: 100%;
    transform: skewY(-6deg);
    margin-bottom: -6%;
    z-index: -1;
}

.stripes .dark {margin-top:-100px;}

.sun {background: #fecf0f;color:#222}

.dark {background: #222;;color:#fecf0f}

.blue {background: #05bcfb;;color:#fecf0f}
.dark  p {color:white}
.dark  i, #config .title {color:#fecf0f;padding: 5px;}
#contact button:hover i {
    color: #222;

}
.dark h3 {color:#fcfcfc}


.image {text-align:right;
    padding: 0;
    margin: 0;}

.no-padding-no-margin {
    padding: 0;
    margin: 0;
}

figure {
    margin: 0;
}


#solutions .overbg {background-size: cover;}


#solutions .content {

  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 1%;
  margin: auto;
  transition: 0.3s;
  background: #222;
  border: 0px solid #555;

  }

#solutions .content p {
  font-size: clamp(12px, 1vw, 18px);
  line-height:1.8!important;
}

#solutions .darker figure .title h3, #solutions .darker figure .title p {color:#222}
#solutions .darker figure .bottom-line {color:#222}


#solutions figure .bottom-line {

    bottom: 10px;
    position: absolute;
    right: 0;
    left: 0;
    margin: auto;

  }

#solutions figure .title   {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    margin: auto;
  }


#solutions figure .title h3 {text-transform:uppercase; margin-top: 25px;  font-size: 25px;}
#solutions .content h3 {
    text-transform:uppercase;
    color: #fecf0f;
    font-weight: 400;
    font-size: 25px;
  }


#solutions .content .margin {
    top: 5%;
    position: absolute;
    left: 0;
    right: 0;
}

#solutions .img-wrapped:hover .content {opacity: 0.8;border: 8px solid #555;}
#solutions .img-wrapped:hover .title {display:none}

span.orange {background-color:orange}
.intro-extend p  {font-size:16px;}

#solutions .quote {  margin-bottom: 50px;}

#solutions h3 {margin-bottom:1%}
#solutions button a
    {
    text-transform: uppercase;
    color: white;
    }

#solutions button:hover a
        {
        color: black;
        }


#solutions article p {margin:0;color:white;
          font-size: 1vw;
          line-height: 2.2vw;
  }

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

  #solutions :nth-child(4) {
    width: 100%;
    flex: 100%;
    max-width: 100%;
  }

  #solutions :nth-child(4) img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 3 / 1
  }

}

@media screen AND (min-width:1480px)

{

  #solutions article p {
            line-height: 2;
    }

}


#webdesign {
            background-size: contain;
            padding-bottom:50px;
            margin-top:7%;
          }

#webdesign .media {margin-bottom: 0;}

#webdesign h3 {font-weight: 400;}

        .white {color:white}
        .black {color:#222}



#webdesign ul {
    max-width: 450px;
    text-align: left;
    margin:auto;
    margin-bottom: 50px;
  }

#webdesign.dark h3 {color:#222}

#webdesign p {

      color: #01bcd4;
      text-align: left;
      padding: 10px;
      font-size: 25px;

}

#logos p {font-size:18px!important}

#logos p.small{font-size:14px!important}

    #logos .content {
        text-align: left;
        margin-top: -40px;
        padding-bottom: 40px;
      }

#responsive p {color:#222}
#responsive .row {padding: 100px 0px 0 0;}
#responsive h2 {margin:0}

#responsive.striped {padding-bottom:0}

.mx-auto,.margin-auto {margin:auto}

#logos {text-align:left}
#logos.white  h3 {;color:white}
#logos.white  p {text-align: left;color:white}
.intro-extend p , #responsive {    text-align: justify;
}


/*portfolio*/


#news img {border-radius: 10px;}
#news h3 {padding: 0;margin: 0;}

#contactor .quote {

  padding: 15px;
  text-transform: uppercase;
  color:#222;
  font-weight: 800
  }


#contactor p {color:white}

.fly-image img {
    position: relative;
  }


  .fly-image svg {
      margin-top: -140px;
      margin-bottom: -250px;
      max-width: 700px;
      margin-bottom: -44%;

    }


    .contact svg {

      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;

    }


#contactor img {border-radius:30px}

#contact .submit-button {

    padding: 5px;
    margin-bottom: 20px;
    width: 100%;
    background: #2d2d2d;
    border-radius: 5px;
    text-transform: uppercase;

  }



  #contact .submit-button:hover {

    background: #fece0e;
    color:black;

    }

  #contact  textarea {
    border: 1px solid #b9b9b9!important;
}

    #contact input {border: 1px solid #b9b9b9!important;}
.quote button {padding: 0 5px 0 5px;}

.transition,
form .question label,
form .question input[type="text"], form .question input[type="email"], form .question input[type="password"], form .question input[type="number"] {
 -moz-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
 -o-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
 -webkit-transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
 transition: all 0.25s cubic-bezier(0.53, 0.01, 0.35, 1.5);
}


form .question {
 position: relative;
 height:30px
}

form .question:first-of-type {
 padding-top: 0;
}

form .question:last-of-type {
 padding-bottom: 0;
}

form .question label {
 transform-origin: left center;
 color: #ff4a56;
 letter-spacing: 0.01em;
 font-size: 12px;
 box-sizing: border-box;
 text-transform: uppercase;
 display: block;
 position: absolute;
 z-index: 2;
 pointer-events: none;
}

form .question input[type="text"], form .question input[type="email"], form .question input[type="number"], form .question input[type="password"] {
 appearance: none;
 background-color: none;
 border: 1px solid #ff4a56;
 line-height: 0;
 font-size: 15px;
 width: 100%;
 display: block;
 box-sizing: border-box;
 padding: 10px 15px;
 border-radius: 60px;
 font-weight: bold;
 letter-spacing: 0.01em;
 position: relative;
 z-index: 1;
}

form .question input[type="text"]:focus, form .question input[type="email"]:focus, form .question input[type="number"]:focus, form .question input[type="password"]:focus  {
    outline: none;
   /* background: rgba(90,164,184,0.5);*/
    border-radius: 0;
    color: #222;
    font-weight: bold;

}


form .question input[type="text"]:focus ~ label, form .question input[type="email"]:focus ~ label, form .question input[type="number"]:focus ~ label, form .question input[type="password"]:focus ~ label  {
 -moz-transform: translate(0, -5px);
 -ms-transform: translate(0, -5px);
 -webkit-transform: translate(0, -5px);
 transform: translate(0, -5px);
}

form .question input[type="text"]:valid ~ label, form .question input[type="email"]:valid ~ label, form .question input[type="number"]:valid ~ label, form .question input[type="password"]:valid ~ label  {
 text-transform: uppercase;
 font-style: italic;
 -moz-transform: translate(5px, -5px) scale(0.8);
 -ms-transform: translate(5px, -5px) scale(0.8);
 -webkit-transform: translate(5px, -5px) scale(0.8);
 transform: translate(5px, -5px) scale(0.8);
}





@media screen and (max-width: 50em) {
	.menu--adsila .menu__item {
		margin: 0 0 2em;
	}
	.menu--adsila .menu__item-label {
		display: block;
		margin: 0.5em 0 0 1em;
	}
}


.navigation-top {

    position: relative;
    font-size: calc(8px + 6 * ((100vw - 320px) / 1440));
    text-transform:uppercase;
    letter-spacing: 0.08em;
		border-bottom: none;
		border-top:none;

}

.premium-btn {
    border: 1px solid #aaa!important;
    padding: 8px!important;
    margin-right: 20px;
    border-radius:5px;
   }

.navigation-top.dark a:hover {
    color: white;
    transition: all .2s ease-in-out;
}


.margin-content{margin-top:40px}


    /*NEW GRID MASONRY*/


.grid-masonry {
max-width: 69em;
list-style: none;
margin: 20px auto;
padding: 0;
}

.grid-item-masonry {

display: block;
float: left;
width: 20%;
/*height: 200px;*/


}

.grid-item-masonry.portfolio {
position: relative;
width:19%;
margin: 5px;

}

.grid-item-masonry .portfolio-item img{
border-radius: 10px;
min-height: 200px;
object-fit: cover;
}

#portfolio .user-edit {

position: relative;
padding: 1px 10px 10px 10px;
font-size: small;
background: rgba(255,255,255,0.4);
color: black;
border-radius:5px;
width: 100%;
right: 0;
bottom: 0;

}

#portfolio .delete-post a {

font-size:small

}


.grid-item-masonry.front-cities {

height: 200px;

}

.grid-masonry.cities {max-width:100%;height: 100vh;text-align: center;}

.grid-item-masonry.cities {

display: block;
float: left;
width: 20%;
height: 50px;


}

.freelance-infos-listing h2 {margin: 0;
padding: 0;}

.freelance-infos-listing p {margin: 0;
padding: 0; font-size:medium}

.grid-item-masonry a {
    font-size: medium;
}

.grid-item-masonry h3 {
    font-size: x-small;
    margin: 0;
}


.scroll-top-wrapper {
  position: fixed;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	text-align: center;
	z-index: 99999999;
	width: 50px;
	height: 48px;
	line-height: 48px;
	right: 30px;
	bottom: 52px;
	padding-top: 2px;
	border-radius: 10px;
	-webkit-transition: all 0.5s ease-in-out;
	-moz-transition: all 0.5s ease-in-out;
	-ms-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
}

.scroll-top-wrapper.show {
    visibility:visible;
    cursor:pointer;
		opacity: 1.0;
}

.scroll-top-wrapper i.fas {
		line-height: inherit;
	  font-size: -webkit-xxx-large;
    color: #fecf0f;
}

.fa-caret-up {font-size: xx-large;}

.swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic {
    bottom: 4%;
}

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


.grid-item-masonry.portfolio {

width: 19%;
margin: 1px;

}

.grid-item-masonry .portfolio-item img{

min-height: 180px;

}


}

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


.navigation-top.dark #menu-top-right {
    position: relative;
    top: 0;
}


}



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

section {   margin-bottom: -2%;}

  body.home section p {
      font-size: 16px;

  }


.grid-item-masonry {
width: 33%;
}


.idm-container {width:80%}

.grid-item-masonry.portfolio {

width: 24%;
margin: 3px;

}

.grid-item-masonry .portfolio-item img{

min-height: 160px;

}

.grid-item-masonry.cities {

display: block;
float: left;
width: 33%;
height: 50px;

}

body.home .services-details h2 {
  font-size:25px
}

.service {
    min-height: auto;
}

.services-details h3 {
    font-size: 20px;
}

.services-details p {
    font-size: 16px;
}

}

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

.cta {display:none!important;}

}


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


  #solutions article p {
      font-size: 80%;
      line-height: 30px;

  }

.grid-item-masonry .portfolio-item img{

min-height: 130px;

}


.navigation-top.dark #menu-top-right {
    color: white;
    font-weight: 200;
    border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    display: block;
    width: 100%;

}

.site-branding{margin-bottom:0px!important}

.front-box { float: none;
    margin-top: 0;
    top: 0;}

    .flexslider {
        padding-left: 0;
    }

.custom-header-media svg {display:none}


}


.site-navigation-fixed.navigation-top.dark .dropdown-content a {color:white}
/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
  	width:200px;
}

/* Dropdown Content (Hidden by Default) */

.dropdown-content {
    opacity: 0;
    width: 100%;
    position: absolute;
    display: block;
    font-size: 12px;
    right: 0;
    /* top: 37px; */
    z-index: 1;
    box-shadow: 4px 10px 5px 0px rgba(0,0,0,0.2);
    border-radius: 10px;

}

.dropdown-content {
background: rgba(0,0,0,0.31);}

.dropdown-content a {
color: black;}

.site-navigation-fixed .dropdown-content {
border-radius: 0px 0px 10px 10px;
}

.site-navigation-fixed .dropdown-content a {
	 color: white;
	 background: #343434!important;

}



/* Links inside the dropdown */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
     font-weight: 400;

}

/* Change color of dropdown links on hover */
/*.dropdown-content a:hover {background-color: #ddd;border-radius:20px}*/

/* Show the dropdown menu on hover */

.dropdown .dropdown-content {

    				-webkit-transition: opacity 0.4s ease-in-out;
            -moz-transition: opacity 0.4s ease-in-out;
            -o-transition: opacity 0.4s ease-in-out;
            -ms-transition: opacity 0.4s ease-in-out;
            transition: opacity 0.4s ease-in-out;


}



.dropdown:hover .dropdown-content {

    opacity:1;


}


.fa-sign-out-alt {
		right: 1%;
    position: absolute;
    top: 6%;
       color: #f5f5f5;
}

.fa-paper-plane {

    color: #ffffff;
    margin: auto;

    }





button:hover, button:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus {background: #fecf0f;}
button, button, input[type="button"], input[type="button"], input[type="submit"], input[type="submit"] {background:#3a3a3a;}

.branding-infos-wrap a button{text-transform:uppercase}
.branding-infos-wrap button {background: #3C3C3C;}
.branding-infos-wrap button:hover {    background: #fecf0f;}

input[type="radio"]:focus, input[type="checkbox"]:focus {
    outline: none;
}


.mailing .submit-button .fa-paper-plane  {
  font-size: 20px;
  margin: 0;

}

input + input[type="submit"] {
    padding: 0 10px 0 10px;
}

input[type="text"] {padding:8px}
.taggle_list input[type="text"] {padding:0}

fieldset {

    padding: 0.2em 0.2em 0.2em 0.5em;
    border-left: 2px solid #F3F3F3!important;
    font-size: medium;
		border: none;
    transition: 0.5s;
}


fieldset:hover {

  border-left: 2px solid #fecf0f!important;

}



textarea {border:none;background:white; resize: vertical;    background: #f9f9f9;}
select {
border:none;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    height: 2.8em;
    max-width: 100%;
}

.content-area-private hr {

margin-top: 0;
margin-bottom: 0;

}

input[type="number"] {
    padding: 0.5em;
    border-bottom: 1px solid #5aa4b8;
}


input[type="password"] {padding: 0.5em;}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset;
}


.btn-outline-primary {float:right}

.custom-header-media::before {

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0);
    top: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
}

.custom-header-media::after {

    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0);
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
   /* z-index: 2;*/
}



.has-header-image .custom-header-media img, .has-header-video .custom-header-media video, .has-header-video .custom-header-media iframe {
    position: absolute;
    bottom: 0;
    padding:0}


body.page-two-column:not(.archive) #primary .entry-content, body.page-two-column #comments {
    float: right;
    width: 100%;
}

.entry-content p {color:#222}

.wrap { max-width: 1420px; }

.single .wrap {
  max-width: 800px;
}

.profile {
    width: 50%;
    margin: auto;
	}

.login {
	max-width: 50%;
    margin-left: auto;
    margin-right: auto
    }


.site-description {
font-weight:180;
letter-spacing: 0.1em;
margin-top: 4px;
padding: 0;
font-style: italic;
font-size: 8px;
color:white
}

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
    border: 1px solid #333;
    padding: 0px;
}

.hideContent {
    overflow: hidden;
    line-height: 1em;
    height: 10em;
}

.showContent {
    line-height: 1em;
    height: auto;
}

@media screen and (min-width: 48em){


.page:not(.home) #content {
    padding-bottom: 0;
}

.navigation-top {
    bottom: 0;
    font-size: 14px;
    font-size: 0.875rem;
    left: 0;
    position: relative;
    right: 0;
    width: 100%;
    z-index: 3;


}


.site-branding {
    padding: 1em;
}

} /*end 48em min */

.uploaded { display:-webkit-inline-box;}
.uploaded img {margin-right: 20px;     height: -webkit-fill-available;}


.entry-header .entry-meta {
    padding-top: 0;
  }
.entry-title a, .entry-content p { color: #aeaeae;}
.entry-title a:hover {color: white}
.entry-date {color: #767676;}
.single h1, .entry-content h3, h4, h4 strong { color: #fecf0f; }
.single h2 { font-size: clamp(18px, 2vw, 22px)}
.single h3 { font-size: clamp(15px, 2vw, 18px)}
.single li, .single li srong {color: #aaaaaa}
.nav-links span {color: #767676;}
.post-navigation:hover a span, .post-navigation a span {color: #fecf0f;}

.author-box p {font-size:24px}
.author-box a {font-size:medium;}
.author-box .email-btn {margin-top:10px; margin-left: 10px;}

.email-btn input[type="submit"] {
    padding: 0em 0.8em 0 0.8em;
}

.entry-meta a:hover{box-shadow:none}
.private-message .entry-meta a {
    box-shadow: none;
    font-size: x-small!important;
}

.private-message .form-submit {

    text-align: center;

}

.private-message .author-box {
    margin-top: 0;

}

.author-box {position: relative;text-align: -webkit-center;text-align:center}


.email-btn {text-align: -webkit-center;
    position: relative;text-align:center}

.email-profile-btn{margin: auto; text-align: -webkit-center; text-align:center;    margin-top: 30px;}


.author-profile-card .email-profile-btn input[type="submit"] {background-color: #767676; color:white}


.email-profile-btn input[type="submit"]:focus {   background-color: #fecf0c; color:white}

.pagination {
	margin-top: 40px;
	    margin-bottom: 10px;
    }

.pagination a {box-shadow:none;-webkit-box-shadow:none}

.prev.page-numbers, .next.page-numbers {
    padding: 10px;
}

.comment {/*padding-top:50px*/}
.comments-title {display:none}

#secondary .entry-meta {padding:0}


.content-light-bg {
		position: relative;
		border-style: none;
    margin-top: 0em;
    background: rgba(255,255,255,0.8);
    padding: 0 30px 0px 30px;
}


#nice-tag .fas {color:#ccc;   width: 20px;}
.nice-tag .entry-footer { margin-top: 0em;}


#overlay {
    height: 100%;
    top: 0;
    width: 100%;
    background-color: #333;
    opacity: 0.8;
    position: fixed;
    z-index: 998;
}
.skill-modal {
		display: none;
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    position: fixed;
    padding: 25px 25px 25px 25px;
    width: 500px;
    z-index: 999;
    left: 50%;
    margin-left: -230px;
    color: #878787;
    font-size: 11px;
    top: 20%;

  -webkit-animation: fadeInOpacity 0.2s ease-in; /* Safari 4+ */
  -moz-animation:    fadeInOpacity 0.2s ease-in; /* Fx 5+ */
  -o-animation:     fadeInOpacity 0.2s ease-in; /* Opera 12+ */
  animation:         fadeInOpacity 0.2s ease-in; /* IE 10+, Fx 29+ */
}

.skill-display-topright {
    position: absolute;
    right: 5px;
    top: 0;
    cursor: default;
    font-size: large;
}
.skill-container:after, .skill-container:before, .skill-panel:after, .skill-panel:before, .skill-row:after, .skill-row:before, .skill-row-padding:after, .skill-row-padding:before, .skill-cell-row:before, .skill-cell-row:after, .skill-clear:after, .skill-clear:before, .skill-bar:before, .skill-bar:after {
    content: "";
    display: table;
    clear: both;
        transition: all .2s ease-in-out;
}



::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: lightgrey;
}
::-moz-placeholder { /* Firefox 19+ */
  color: lightgrey;
}
:-ms-input-placeholder { /* IE 10+ */
  color: lightgrey;
}
:-moz-placeholder { /* Firefox 18- */
  color: lightgrey;
}



#page {
    word-wrap: break-word;
}

.nav-title-icon-wrapper {
    width: 3em;
}

.pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover {box-shadow:none; -webkit-box-shadow:none}
a.page-numbers {color: #868686;display: -webkit-inline-box;display:inline-box}
a.page-numbers:hover {color: #868686;}
.pagination .current {color: #fecf0f;}

#comments {padding-top:1em}

.offset {
 display: block;
   height: 80px;      /* Give height of your fixed element */
   margin-bottom: 250px; /* Give negative margin of your fixed element */

}



.ekko-lightbox .modal-footer {  text-align: justify!important;font-size: x-small;}


.post-buts {display: flex; float:right}
.post .entry-content {
	border-width: 1px;
    border-top-style: groove;
    width: 100%;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    }



.login-submit   {  text-align: -webkit-center; }


.entry-content p {

    text-align: justify;
    /*font-size: medium*/
    font-size: 18px;

}

.entry-content .post-description p {

    text-align: justify;
    font-size: medium;
		color:#5aa4b8}

.post-excerpt p {

    text-align: justify;

}
.freelance-name {text-transform:capitalize}
.freelance-infos h2 {margin:1px}
.freelance-infos h3 {margin:2px;    font-size: large;}
.freelance-infos li {text-align: justify;}



.freelance-container li a, .freelance-name a, .freelance-name i, .freelance-img a img, .professions h3 ,p {

						-webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;


}

.freelance-container:hover .freelance-img a img, .freelance-container:focus .freelance-img a img {

    -webkit-box-shadow: 0px 0px 4px 2px #fecf0f;
    box-shadow: 0px 0px 4px 2px #fecf0f;

}


.professions h3 { width:100% }

.professions i {    font-size: medium;}



.user-form {display: -webkit-inline-box; margin-bottom: 10px; width:80%}


a:hover {cursor:pointer}

.navigation-top .wrap {
    max-width: 1400px;
}


.menu-top-right img {border-radius: 20px;background: white;  max-width: 32px;}



.logout {  border-style: groove; border-radius: 20px;}


.center {text-align:center; margin-left:auto;margin-right:auto;width:100%}
.text-center {text-align:center; margin-left:auto;margin-right:auto;width:100%}


#menu-profile li {display:inline;padding:0px 20px 0 0 }

.bypostauthor > .comment-body > .comment-meta > .comment-author .avatar {
        border: 1px double rgba(155, 24, 207, 0.38);
    padding: 0px;
    border-radius: 30px;
    border-style: solid;
}

#loginform{padding-top:50px}

/* *** Style the profile tab *** */
.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;

}

.partner {
    overflow: hidden;
    border-bottom: 8px solid #ccc;

}

/* Style the buttons that are used to open the tab content */
.tab button {
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    margin-right:2px;
    transition: 0.3s;
    border-radius:20px 0 0 0;
    background: #f5f5f5;
    text-transform: uppercase;
}

/* Change background color of buttons on hover */
.tab button:hover {
    background-color: #ddd;
}

.tab button.active {background: transparent;}

#profile button, input[type="button"]  {color: #767676;  font-size: inherit;}
#profile button.active, input[type="button"] {color: #fecf0f}
#client-profile button.active, input[type="button"] {color: #6bc4db}
#client-profile button, input[type="button"]  {color: #767676;  font-size: inherit;}



.tabcontent {
    display: block;
    /* padding: 6px 12px;*/
    border-top: none;
}

.tabcontent {
    animation: fadeEffect 0.5s; /* Fading effect takes 1 second */
}



/*
.custom-header-media:before {

    background: none
}

*/



.has-header-image:not(.twentyseventeen-front-page):not(.home) .custom-header-media:before {


     background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.8) 100%);
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.8) 100%);
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 20%, rgba(0, 0, 0, 0.8) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0);
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;


}

.custom-header-media:before {
/*    background: -moz-linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.1) 100%);
    background: -webkit-linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.1) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0, rgba(0, 0, 0, 0.1) 100%);*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00000000", endColorstr="#4d000000", GradientType=0);
    bottom: 0;
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
}

.private-area {
position:relative;
background: white;
margin-bottom: 80px;
top: 30px;

}

.private-area hr {

    border-top: 1px solid #eeeeee;
    background: #ccc;
    position: relative;
    height: 20px;
    margin: auto!important;

}




/* Go from zero to full opacity */
@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

.wide {width:100%}


/******** Price Plan ********/


.pricing-header {
  max-width: 700px;
}


.card-deck .card {
  min-width: 240px;

}

.text-line {text-decoration:line-through}

.border-top { border-top: 1px solid #e5e5e5; }
.border-bottom { border-bottom: 1px solid #e5e5e5; }

.box-shadow { box-shadow: 0 0 1.95rem rgba(0, 0, 0, .35);}

.shadow {
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
  -moz-box-shadow:    3px 3px 5px 6px #ccc;  /* Firefox 3.5 - 3.6 */
  box-shadow:         3px 3px 5px 6px #ccc;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.container-price {
    width: 70%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    position: relative;
    background: rgba(255,255,255,0.6);
    border-radius:10px;
		top: -80px;
    }



.content-area {

    position: relative;


}

.content-area-single {

   position: relative;
   background-color: rgba(255, 255, 255, 0.41);
   padding: 30px;

}



h1.premium, p.premium {position:relative;z-index:1; margin-bottom: 0;    line-height: 2em;}

.lightgrey  {background: #f3f3f3;}

.premium.fa-star {
		font-size: 280px;
    color: #e6e6e67a;
    position: absolute;
    z-index: 0;
    top: 5%;
    }

.classic-btn {

    background: #fecf0f;
    color: white;
    padding: 10px;

}


.classic-btn:hover {

    color: white;

}


.entry-meta { padding:0;  /* padding-bottom: 2.25em;*/}

.archive .entry-meta {padding-top: 0em; !important}

.page-header {
    padding-bottom: 0;
}

/******** Price Plan ********/


.codrops-top {
	margin-top: 1em;
}

.codrops-top a {
	font-size: 0.69em;
	padding: 0 0.25em;
	display: inline-block;
	text-decoration: none;
	font-size: 1.2em;
}

.codrops-icon:before {
	margin: 0 4px;
	text-transform: none;
	font-weight: normal;
	font-style: normal;
	font-variant: normal;
	font-family: 'codropsicons';
	line-height: 1;
	speak: none;
	-webkit-font-smoothing: antialiased;
}

.codrops-icon-drop:before {
	content: "\e001";
}

.codrops-icon-prev:before {
	content: "\e004";
}

.codrops-icon-info:before {
	content: "\e003";
}

.codrops-icon span {
	display: none;
	position: absolute;
	font-size: 0.85em;
	padding: 0.5em 0 0 0.25em;
	font-weight: 700;
}

.fa span {
	display: none;
	position: absolute;
	font-size: 0.85em;
	padding: 0.5em 0 0 0.25em;
	font-weight: 700;
}

.fa-envelope {color: #cbcbcb;}
.fa-sign-out {color:darkgrey;}


.codrops-icon:hover span {
	display: block;
	color: #6a7b7e;
}


.fa:hover span {
	/*display: block;*/
	display:none;
	color: #b9b9b9;
}

button.fa {

    background: none;
    color: #5a5a5a;

}

.author-profile-card button.fa {

    width: 30px;
    right: 0;
    position: absolute;

}


#comment-list {
border-style: none;
margin-top: 0em;
padding: 0 30px 0px 30px;
}

.comment-btn-message {
color: gray!important;
border: none!important;
font-size: x-small!important;
background: none!important;

}

.morecontent span {
	display: none;
}

a.morelink{font-size:small!important;color:grey}

.single-comment p {font-size: small!important}

.comment-author.vcard a {font-size:large}
.comment-author.vcard p {font-size:large}
.comment-author.vcard H5 {font-size:xx-small}



button.fa div {display:none}

button.fa:hover div {
    /*display: -webkit-inline-box;*/
position:absolute;

}

.fa:hover .fa-heart-o:before{
    content: "\f004";
    color:#bf0404;

}


#message .updated:not(.published) {
    display: block;
}


.inline {   display: -webkit-inline-box;}



.stripe-btn {

background: linear-gradient(to bottom, #078fd0 , white);
border-radius:5px

}

.comment-form-comment label {display:none}
.comment-form .submit {width:32%}

.comment p {text-align: justify;    font-size: medium;}

.comment-form-comment {    margin-bottom: 10px;}
div.comments {left: 100px;position: relative;}


.private-message .comment-author .avatar {

    height: 40px;
    left: -70px;
    position: absolute;
    width: 40px;
    border: 1px double rgba(33,33,33,0.38);
    padding: 0px;
    border-radius: 30px;
}



.logged-in-as {display:none}

/* Dropdown Button */
.dropbtn {

    border: none;
}



/* The Modal (background) */
.modal-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    z-index: 8;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.6); /* Black w/ opacity */
}



#profil-public-btn {
  	background: #fecf0f;
    font-weight: 100;
    color: white;
    letter-spacing: 4px;
    padding:5px;
    text-shadow:none;

    }




#show-more-btn {
		width:80%;
    background: transparent;
    font-weight: 100;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.1), 0 6px 20px 0 rgba(0,0,0,0.1);
    margin: 20px;
    letter-spacing: 4px;
    padding:5px;
    margin: 10px auto;
    }

#show-more-btn a {
 	color:#fecf0f;
 	font-size: 10px;
	font-weight: bold;
	display: block;
  width: 100%;

 }

#portfolio-add-btn {
    color: white;
    background: #7acadf;
    font-weight: 100;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
	margin: 20px;
	letter-spacing: 4px;
    }
#portfolio-add-btn:hover {background: #7acadf}



/* Modal Content */
.modal-content-portfolio {
    position: relative;
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animateFade;
    animation-duration: 0.4s;

}

.modal-content-portfolio-edit {
    position: absolute;
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    animation-name: animateFade;
    animation-duration: 0.4s;

}


.modal-content-portfolio  .alert-container{height:50px}
.modal-content-portfolio  .error {color:red}


/*
#portfolio .delete-post input[type="submit"] {

    padding: 0px 10px 0px 10px;
    font-size: small;
    background: rgba(255,255,255,0.4);
        color: black;
}
*/



.uploaded img{border-radius:30px}

/* Add Animation */
@keyframes animateFade {
    from { opacity: 0}
    to {opacity: 1}
}

.animate__ultraslow {

 --animate-duration: 10s;

}



/* The Close Button */
.modal-content-portfolio .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
	right: 10px;
	top: 0;
}

.modal-content-portfolio .close:hover,
.modal-content-portfolio .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#avatar-upload .form-submit {
    text-align: right;

}

#avatar_current { max-height: 150px; }
#avatar_preview { max-height: 150px; }
#preview {max-width: 150px;}

#submit_avatar {display:none;float:right}


footer a { color: white}

 #footer-sidebar1 {
    float: left;
    width: 35%;
    max-height: 200px;
    border-left: 1px solid #F3F3F3;
    padding-right: 5%;
}



#footer-sidebar2 {
    float: left;
    width: 20%;
    margin-right: 5%;
    max-height: 200px;
    font-size: large;
    border-left:1px solid #333;
    padding-left:10px

}

#footer-sidebar2 .widget ul {
    line-height: 4px;
}


#footer-sidebar2 .widget ul li a:hover {
    color:#fecf0f;
}


#footer a:hover {  color:#fecf0f;}

#footer-sidebar3 {
float: left;
max-width: 25%;


}

.wcloud {max-width:80%}
.widget {padding-bottom: 0em; }

.site-info {
  background: #333;
  color:white;
  margin-bottom: 0;
}

.site-info a:focus, .site-info a:hover{box-shadow:none;-webkit-box-shadow:none}
.widget ul li a:focus, .widget ul li a:hover{box-shadow:none;-webkit-box-shadow:none}

.site-info::before {
		display:block;
		height: 100%;
    left: 0;
    position: absolute;
    right: 0;
    z-index: 2;
    background: -moz-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
    background: -webkit-linear-gradient(to top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 75%, rgba(0, 0, 0, 0.3) 100%);
}



.tag-branding {z-index:0;margin-top:30px;text-align:left}



div.infos-container {display: inline-flex;width: 100%; margin: 20px 0px 0px 0px;    cursor: default;}
.infos-container {display: inline-flex;width: 100%; margin: 20px 0px 0px 0px;    cursor: default;}



.page-link {color:#fecf0f}
.page-link:hover {color:#fecf0f}
.upost {
   /* border: 1px solid #f9f9f9;*/
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    text-align: -webkit-center;
    text-align: -moz-center;
  	background-color: rgba(255, 255, 255, 0.8);
}

.infos-container .infos {
		margin: auto;
    font-size: small;
    color: #b9b9b9;
    text-align:center;
    background: rgba(255, 255, 255, 0.53);
    border-radius:10px;
    border: 1px solid #F3F3F3;
    padding: 10px;

    }

.infos {
		margin: auto;
    font-size: small;
    color: #b9b9b9;
    text-align:center;
    background: rgba(255, 255, 255, 0.53);
    border-radius:10px;
    border: 1px solid #F3F3F3;
    padding: 10px;

}



.infos-container .column-2 {width:24%}



.user-list .user-row {display:-webkit-inline-box;}
.user-infos {vertical-align:middle; padding: 20px;}

.professions-list {height:500px;border:solid 0px orange;overflow:scroll;overflow-x:hidden;overflow-y:scroll; font-size: initial; padding: 10px; border: 1px solid rgba(0,0,0,0.2);}
.profile-description {margin-top:40px;height:auto;/*overflow:scroll;overflow-x:hidden;overflow-y:scroll; */text-align: -webkit-center;;text-align: center; }
.profile-description .thecontent {
	text-align: justify;
	margin-left: auto;
    margin-right: auto;
    width: 80%;
    }

.profile-description .show-more {text-align:center;}

.freelance-infos .professions {text-transform:capitalize;  display: -webkit-inline-box; width: 100%;}
.freelance-infos .no-content {text-transform: initial;}


.author-box{ margin-bottom: 5px;}

.tagline h1 {font-size:large}

.author-profile-card {

	border-radius: 30px;
    padding: 25px;
    margin-bottom: 20px;
    position:relative;
    z-index:2;
    background: rgba(255,255,255,0.5);

}

.author-profile-card h5 {padding:0px;text-align: -webkit-center; text-align:center}
.author-profile-card h4 {padding:0px}
.author-profile-card .name {text-transform:capitalize; padding:0; text-align:center; margin:0 0 8px 0;font-size: 1.625rem;color: #666;font-weight: bold;font-style: italic;}
.author-profile-card h2 {font-size: large;}
.author-profile-card .city h3 {font-size: large;color: #ccc}
.author-profile-card .fa-star { vertical-align: top; margin-top: 10px;color:#767676!important}
.author-profile-card .fa {color:#fecf0f}


.profile-description h2 {text-align:justify}

.author-profile-card .no-content {text-transform: initial;}

.author-photo  {text-align: center;}
.author-photo img {border-radius: 100px;;background: white;   box-shadow: 0px 5px 20px #b9b9b9;  -webkit-box-shadow: 0px 5px 20px #b9b9b9;    margin-bottom: 10px;}
.destination-user-mail .author-photo img {box-shadow:none;
     -webkit-box-shadow: none}

.author-blur {margin-left:auto;margin-right:auto;}
.author-blur h5{
	padding: 20px;
	background: #767676;
  color: white;
  }

.author-infos {}

.author-box .fa{/*position:absolute;top:15px*/
	font-size: x-small;
    vertical-align: middle;
        margin-top: -5px;}

.author-box a {
    box-shadow: none;
    font-size: large;
}

.author-box.blur img{border-radius:100px}

.show-more {text-align: center;margin-top:10px}

.posted-on , .byline { font-size: x-small;}


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


#logos .content {
    background: rgb(44 43 43 / 54%);
}


}

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

.grid-item {
  width:120px;
  height: 120px;
  padding:3px;
  margin-bottom:6px

}

.entry-content p {
    font-size: 15px
}

.grid-item img {
 min-height:120px
}

}

.portfolio .post-title {
	position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 252, 252, 0.5);
    border-radius: 3px;
    padding: 0px 5px 0px 5px;
}

.portfolio .post-title a{
	color:black
}

.entry-content a {box-shadow:none}
.entry-content a:hover {box-shadow:none;}
.entry-content a:visited {box-shadow:none}
.entry-content a:focus{box-shadow:none;}



.comment-author h5{padding:0px}

li {list-style-type: none}

/* *** ISOTOPE FILTER ARTICLES *** */



.iso-filters li {
    padding-right:25px;
    list-style-type: none;
 		display: inline-flex;
    }


.iso-filters .selected {color:#fecf0f}



/*Single pronostics */
.nice-tag.entry-footer {

    display: table;
    width: 100%;
}

h5.no-replies {text-align:-moz-center;text-align:center}

.post-excerpt p {color:#505050}
.entry-title a{
font-size:  calc(14px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
font-weight: 200;
box-shadow:none;
-webkit-box-shadow:none
}

.entry-title a:hover {-webkit-box-shadow:none}


.profile .form-submit {margin: 20px 0px 0px 20px;}


.profile-link {
	color: #fecf0f;
  margin: 0 20px;
  font-size: calc(10px + 10 * ((100vw - 320px) / 1440));
  text-shadow: 1px 1px 1px #ccc;

}

.profile-description h3 {

    padding:5px;
    border-radius:10px;

}

 button.new-post {
	display:none;
	cursor:auto;
	font-size:12px;
	background-color: orangered;
	padding: 3px 2px 2px 2px;
	border-radius:3px;
	font-weight: 80;}


/* *** ISOTOPE FILTER ARTICLES *** */

.post-thumb {max-width:80px;    margin-right: 30px;}
.post-content {display: -webkit-inline-box;    margin-top: 30px;}
.post-content  h3 {margin-right: 30px;}

.post-thumbnail a img {width: 100%;}

h3 {padding:0.4em 0 0}

.signup-button {background: rgba(0,0,0,0.2);padding: 10px; border-radius:5px; color:white}
.signup-button:hover {background: #fecf0f;
    padding: 30px;
    border-radius: 5px;
    color: #585858;
}


.tabcontent { background:rgba(243, 243, 243, 0.66); min-height: 200px;padding-bottom: 2%;    min-height: 400px;}

.infos-container h3 {font-size: medium;}
/*.infos-container h4 {font-size: small;}*/

.entry-content a:focus, .entry-content a:hover, .entry-summary a:focus, .entry-summary a:hover, .widget a:focus, .widget a:hover, .site-footer .widget-area a:focus, .site-footer .widget-area a:hover, .posts-navigation a:focus, .posts-navigation a:hover, .comment-metadata a:focus, .comment-metadata a:hover, .comment-metadata a.comment-edit-link:focus, .comment-metadata a.comment-edit-link:hover, .comment-reply-link:focus, .comment-reply-link:hover, .widget_authors a:focus strong, .widget_authors a:hover strong, .entry-title a:focus, .entry-title a:hover, .entry-meta a:focus, .entry-meta a:hover, .page-links a:focus .page-number, .page-links a:hover .page-number, .entry-footer a:focus, .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover, .entry-footer .tags-links a:focus, .entry-footer .tags-links a:hover, .post-navigation a:focus, .post-navigation a:hover, .pagination a:not(.prev):not(.next):focus, .pagination a:not(.prev):not(.next):hover, .comments-pagination a:not(.prev):not(.next):focus, .comments-pagination a:not(.prev):not(.next):hover, .logged-in-as a:focus, .logged-in-as a:hover, a:focus .nav-title, a:hover .nav-title, .edit-link a:focus, .edit-link a:hover, .site-info a:focus, .site-info a:hover, .widget .widget-title a:focus, .widget .widget-title a:hover, .widget ul li a:focus, .widget ul li a:hover {

    -webkit-box-shadow: none;
    box-shadow: none;
}

.tags-links a { font-weight: 300; display: -webkit-inline-box;}
.cat-links a { font-weight: 300;}


.entry-footer .cat-links .icon, .entry-footer .tags-links .icon {
    color: #767676;
    margin-right: 0.5em;
    position: relative;
    top: 0;

}

.entry-footer .cat-links, .entry-footer .tags-links {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.1818em;
    padding-left: 0;
    position: relative;
    text-transform: uppercase;
}

a .nav-title {  -webkit-box-shadow: none;
    box-shadow: none;}


#secondary.mailing {
    float: right;
    width: 25%!important;
    position: relative;
    top: 12px;
}


.content-area-single.private-message {margin-top:0px}
.content-area-private {
    min-height: 800px;
}



.contact-light-bg {
background: white;
height: 100%;
    }



#contact h3 {margin-bottom:2%}

#contact-wrap {
width: 600px;
margin-left: auto;
margin-right: auto;
z-index:10
}

#contact img {border-radius: 10px;}



#contact-wrap .row {margin:0}

#modalDiv div.infos-container {margin-top:50px}

.fa-redo {font-size: initial;}

#modalDiv .contact-title {
		font-size: 14px;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    }

    #modalDiv .title-wrap {
    margin: auto;
    }


#modalDiv .form-group {}


form#contact {
  margin: auto;
  }

form#contact .submit-button {
		margin-bottom: 40px;
    background: #fecf0f!important;
    color: white;
    text-transform: uppercase;
        position: fixed;
}

form#contact .submit-button .fa {
  font-size: 15px;
	padding: 0px;
	margin: 0;

    }

#contact-wrap #success_message_contact p  {
    margin: auto;
    font-size: 20px;
    color: grey;
    font-weight: 200;
    text-transform: uppercase;
    }
#success_message_contact
{ margin-top: 50%;}

#modalDiv a.close {right:0; position:absolute;padding:10px}


#modalDiv, #modalDiv2 {
position: fixed;
width: 100%;
background: white;
display: block;
z-index: 8;
top: 0px;
left: 0px;
height: 100%;
overflow-y:auto

}

#modalDiv input {border:none}

#modalDiv label {
color: #848484;
}

#modalDiv fieldset:hover label {

color:#13beea;
}


#modalDiv a.close, #modalDiv2 a.close {

position: absolute;

right: 0;

top: 0;

}

@keyframes fade-in-right {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes grow-left {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.anim-1, .anim-3 {
  opacity: 0;
  animation: fade-in-right ease 0.4s forwards;
}

.anim-2 {
  transform: scaleX(0);
  transform-origin: left;
  animation: grow-left cubic-bezier(0.785, 0.135, 0.15, 0.86) 0.5s forwards;
  animation-delay: 0.4s;
}

.anim-3 {
  animation-delay: 0.8s;
}

@media screen and (min-width: 48em) {

.twentyseventeen-front-page.has-header-image .custom-header-media:before, .twentyseventeen-front-page.has-header-video .custom-header-media:before, .home.blog.has-header-image .custom-header-media:before, .home.blog.has-header-video .custom-header-media:before {
    height: auto;}

.navigation-top-user #menu-top-right li a, .navigation-top-user #menu-top-right li {
    color: #cbcbcb;
    line-height: 1.2;
}

.has-header-image.twentyseventeen-front-page .site-branding, .has-header-video.twentyseventeen-front-page .site-branding, .has-header-image.home.blog .site-branding, .has-header-video.home.blog .site-branding {
    top: 14px;
}

.account-section-header {
    width: 270px;
    position: absolute;

    padding-right: 10px;
    z-index: 2;
}

.nav-links .nav-title {
    font-size: x-large;
    font-weight: 100;

}

.main-navigation #menu-top-right li {padding-right: 0px;    color: #cbcbcb;}

.main-navigation li {
    border: 0;
    display: inline-block;

}

.main-navigation a {
    padding: 0.8em 0.5em;
}


.account-section {
    margin-bottom: 5px;
    padding: 10px;
    position: relative;
}

.account-section-content {
    margin-top: 15px;
    padding-left: 270px;
}
.account-section-content {
    position: relative;
}
.responsive-account-container * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.social-navigation + .site-info {

    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.blog .entry-title {

  line-height: 1;

}


@media screen and (max-width: 48em) {
.has-header-image.twentyseventeen-front-page .custom-header, .has-header-video.twentyseventeen-front-page .custom-header, .has-header-image.home.blog .custom-header, .has-header-video.home.blog .custom-header {

    height: 100vh;

}}



@media screen and (min-width:900px){

#primary {
    float: left;
    width: 65%!important;
    margin-top: 35px;
}

#secondary {
    float: right;
    width: 30%!important;
    position: relative;
   /* margin-top: 80px;*/
    border-left: 1px solid #D9D9D9;
		padding: 30px 0px 30px 30px;

}


#secondary section {background: rgba(255,255,255,0.5); padding:10px;  border-radius: 30px;     text-align: -webkit-center; text-align:center}

body, button, input, select, textarea {
    font-size: 15px;
}



}


@media screen and (min-width:769px){


.site-content{padding-top:2em}

#menu-top-right {
  display:block!important;
  float:right;
  max-width: 250px;

}




.comment-author .avatar {
    height: 100px;
    left: -112px;
    position: absolute;
    width: 100px;
    border-width: 1px;
    border-style: double;
    border-color: rgba(33, 33, 33, 0.38);
    border-image: initial;
    padding: 0px;
    border-radius: 30px;
}

    } /* **** EN min width 769px *** */




@media screen and (min-width:600px and max-width:899px){

#primary {
    float: left;
    width: 75%;
}

#secondary {
    float: right;
    padding-top: 0;
    width: 25%;
}
body, button, input, select, textarea {

    font-size: 1.125vw;
}

}

.user-form {
    max-height: 55px;}

@media screen and (min-width: 48em){

#success-userupdate {
margin-bottom: 0px;
height: 50px;
margin-top: 0;
bottom: 0;
position: fixed;
z-index: 8;
text-align: center;
margin: auto;
width: 100%;
background: #353535;

}

#success-userupdate h5 {
padding:1%;
color:white
}


}



.entry-footer { padding: 0em;}


/* *** BLUR CLASS *** */


.blur-content {
  color: transparent;
  text-shadow: 0px 0px 10px rgb(0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.timeline {margin-bottom:12px;color:#656565}




.zerocom {color:#5aa4b8}


.tag-branding {position:relative; z-index: 200; height:auto;z-index: 0;}
.custom-header-title {text-transform:uppercase}
.align-center{text-align:center;text-align:webkit-center}



.common-Button {
  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #fecf0f;
  text-decoration: none;
  transition: all 0.02s ease-in;

}

.common-Button:hover {
  color: #2feefb;
  transform: translateY(-1px);
  box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
}

.common-Button:active {
  color: #2feefb;
  background-color: #f6f9fc;
  transform: translateY(1px);
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
}

.common-Button--default:hover {
  color: #fff;
  background-color: #fecf0f;
  -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

.common-Button--default:active {
  color: #e6ebf1;
  background-color: #2feefb;
}



input[type="button"], input[type="submit"] {

  white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 24px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #fecf0f;
  text-decoration: none;
 transition: all 0.1s ease-in;

}

.site-main.profile input[type="submit"]{color: #fecf0f;background: white;}

.site-main.profile input[type="submit"]:hover, .site-main.profile input[type="submit"]:focus, .site-main.profile input[type="submit"]:active {color:white; background: #fecf0c;}


.site-main.profile .form-password {
    margin: 20px 0 0 0px;
    padding: 0;
}

input[type="submit"]:hover {
    background: #f9a146;
    color:white;
     -webkit-transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
	transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

input[type="submit"]:focus {
    background: #f9a146;
    color: white;}

input[type="button"]:focus,input[type="button"]:hover {
    background: #f9a146;
    color: white;}

.submit {

white-space: nowrap;
  display: inline-block;
  height: 40px;
  line-height: 24px;
  padding: 0 14px;
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
  background: #fff;
  border-radius: 4px;
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  color: #fecf0f;
  text-decoration: none;
 transition: all 0.1s ease-in;


}

.submit.profession:hover {
color:white;
background:#fecf0f;
}


.submit :hover {
    color: white;
    background: #00ca8d !important;
    transform: translateY(-1px);
    box-shadow: 0 0px 0px rgba(50, 50, 93, 0.1), 0 0px 0px rgba(0, 0, 0, 0.08);
}

.visitor {padding-bottom:20px}

#password-reset fieldset{border-radius:20px;border-bottom:none}

.freelance-container {

	display: -webkit-inline-box;
	border-top: 1px solid #eeeeee;
	height:auto;
	padding: 25px 25px 25px 25px;
	width: 100%;
	background: rgba(255,255,255,0.5);

					  -webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            transition-timing-function: linear;



}



.freelance-container:hover {

    box-shadow: 0px 8px 5px #adadad;
    -webkit-box-shadow: 0px 8px 5px #adadad;
	position:relative;


}


.freelance-infos {width:78%;cursor: default;}

.freelance-img.column-1 {width:18%}
.freelance-infos.column-2 {width:80%;}

.freelance-img img {border-radius:30px;    box-shadow: 0px 5px 20px #b9b9b9;  -webkit-box-shadow: 0px 5px 20px #b9b9b9;}


.freelance-container:hover .user-tags {
background-color: #fecf0f;
	-webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            transition-timing-function: linear;
}


.freelance-infos p {text-align: justify;}
.display-none {display:none}
.display {display:block}

.profession {display: -webkit-inline-box;}
.form-profession {margin:auto}


.entry-footer a, .entry-footer .cat-links a, .entry-footer .tags-links a {
-webkit-box-shadow: none;
shadow-box:none }



/* *** FOR REGEX IMPORTANT *** */
.clink i {  color: #73abd9;}
.clink i:hover {
    cursor: default;
    color: #73abd9;}
/* *** 	***************  *** */

.mail .post-title a {box-shadow: inset 0 -1px 0 rgba(15, 15, 15, 0)!important;}

.mail .post-title h3{ color: #fecf0f;}
.mail .post-title h5{ font-size:xx-small}

.mail .post-header {

    border-bottom: 1px solid #acacac;

	-webkit-transition: all 0.4s ease-in-out;
            -moz-transition: all 0.4s ease-in-out;
            -o-transition: all 0.4s ease-in-out;
            -ms-transition: all 0.4s ease-in-out;
            transition: all 0.4s ease-in-out;
            transition-timing-function: linear;
    }

.mail .post-wrapper {
	padding: 20px;
	display: inline-flex;
    width: 100%;
    margin: 0;

    }

.mail .post-wrapper .infos {
	margin: auto;
    font-size: small;
    text-align:center;


    }

.mail div.infos-container {width: 20%;    display: inherit;}

.mail .post-header:hover {
    -webkit-box-shadow: 0px 4px 2px #fecf0f;
    box-shadow: 0px 0px 4px 2px #fecf0f;
   }


.mail .column-1 {width:30%}
.mail .column-2 {width:40%}
.mail .column-3 {width:20%}
.mail .column-4 {width:10%}


.mail .post-action {margin:auto;}
.mail .post-action input + input[type="submit"] {
   /* padding: 10px; */
    font-size: small;

}


.pagination {
    border-top: none;

}

.single-featured-image-header {
    background-color: transparent;
    border-bottom: none;
    max-height: 360px;
    text-align: -webkit-center;
}


.single-featured-image-header h1 {

    position: relative;
    text-align: -webkit-center;
    top: 180px;
    color: white;
    text-transform:uppercase;
    margin-top: -65px;

}



.create-post .title input[type="text"] , .edit-post .title input[type="text"] {


    border-bottom: 1px solid #5aa4b8;
    font-size: x-large;
    text-transform: uppercase;
    border-width: 0px;

}



.activ8 {

background: #b9b9b9!important;
    color: white!important;

}



.published-btn {
	background: #b9b9b9!important;
    color: white!important;
    white-space: nowrap;
    display: inline-block;
    height: 40px;
    line-height: 24px;
    padding: 0 14px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
    background: #fff;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
        text-decoration: none;
    transition: all 0.1s ease-in;
        cursor: default;

    }


.published-btn:hover { background: #b9b9b9!important;
    color: white!important;cursor:default}

.title-inside {
top: 225px;
position: absolute;
color: white;
}

.title-inside-single {
top: 55px;
position: absolute;
color: white;
left: 0;
}


.title-inside h3 {
	color: #fecf0f;
    background: rgba(255,255,255,0.4);
    padding: 30px;
}

.title-inside-single h3 {
	color: #fecf0f;
    background: rgba(255,255,255,0.4);
    padding: 30px;
}




.cell-type {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: center;
justify-content: center;
position: relative;
-ms-flex: auto;
flex: auto;
min-width: 100%;
min-height: 180px;
padding: 0 40px;
text-align:-webkit-center;

}


.nice-tag .entry-footer a:hover, .entry-footer .cat-links a:focus, .entry-footer .cat-links a:hover {

-webkit-box-shadow: none;
    box-shadow: none;
color:white


}


.widget ul li, .widget ol li {
    border-bottom: none;
    border-top: none;
    padding: 0.5em 0;
}

.widget ul li a {

-webkit-box-shadow:none;
box-shadow:none
}

.div404 h3 {
margin-top:30vh;
text-align:-webkit-center;
text-align:center
}
.div404 {  min-height: 50vh;}

.page-title .logo-text p {
    text-transform: uppercase;
    font-style: italic;
    color: #fecf0f;
    font-size: calc(40px + (22 - 14) * ((100vw - 320px) / (1600 - 320)));
    margin: 0;
    font-style: italic;
    font-weight: bold;
}

.auth {  min-height: 50vh;    text-align: center;}
.auth h3 {
margin-top:30vh;
text-align:-webkit-center;
text-align:center
}


.auth .submit_button {
    font-size: 13px;
		background-color: #fecf0f;
    border-radius: 3px;
    padding: 9px 31px 9px 31px;
    margin: auto;
}

.auth .submit_button a{

    color: #FFF;
	text-transform: uppercase;
}

.auth-button {text-align: center;}
.auth-button .submit_button {
    font-size: 13px;
    background-color: #fecf0f;
    border-radius: 3px;
    padding: 9px 31px 9px 31px;
    margin: auto;
    text-transform: uppercase;
        }

.auth-button h5 {
margin-top:30px;
text-align:-webkit-center;
text-align:center
}
.auth-button .submit_button a {
    color: #FFF;
    text-transform: uppercase;
}

.auth-side { text-align: -webkit-center; text-align: center;}

.auth-side .submit_button {
    font-size: 13px;
    background-color: #fecf0f;
    border-radius: 3px;
    padding: 9px 31px 9px 31px;
    margin: auto;
    width: 100%;
    text-transform: uppercase
}

.auth-side .submit_button a {
    color:white;
}

.social-navigation + .site-info {
    margin-top: 50px;

}

.mobile {
    display: none!important;
}

.visitor {text-align:center;text-align:-webkit-center;text-align:-moz-center}


#footer #text-3 p {color:#fecf0f;margin:0}

.site-footer {
    font-size: 14px;
    font-size: 0.875rem;
    line-height: 1;
    margin-top: 0;
    width: 100%;
    position: relative;
    border-top: transparent;

}



#footer .wrap {max-width:1240px}


.site-footer .custom-logo-link img {
    width: 50px
    }



.site-footer.site-info {
  padding: 0;
  margin-bottom: 0;
  text-align: center;
}

.site-footer.site-info a {
		box-shadow: none;
    font-size: small;
    color: white;
    text-transform: uppercase;
    font-style: italic;
}

.spinner {
	display:none;
  margin: auto;
  width: 60px;
  position: relative;
}

.cube1{
  background-color: #333;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 5px;
  left: 0;

  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  background-color: #333;
  width: 8px;
  height: 8px;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}

.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}

@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.2) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.2) }
  100% { -webkit-transform: rotate(-360deg) }
}

@keyframes sk-cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}




/*////// RESP //////*/




@media screen and (min-width: 48em){
.navigation-top {
    top: 3px;
    font-size: calc(8px + 6 * ((100vw - 320px) / 1440));
    width: 100%;
    z-index: 3;
}

.navigation-top.site-navigation-fixed .wrap {
    max-width: 1000px;
    padding: 0 5%;
}

}


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

  .site-branding-text {text-align:center}

  .mobile {
      display: block!important;
  }

  .site-description {
    margin: auto!important;
    position: relative!important;}

    .site-navigation-fixed.navigation-top.dark {
    display: none;
}


    body:not(.title-tagline-hidden) .site-branding-text {
    display: initial;
    vertical-align: middle;
    margin-top: 38px;
    margin-left: 18px;
    position: relative;
}

.navigation-top.dark {
    position:relative
}


.bm-container.infos-container {display:block}
.bm-container .infos {
    margin: auto;
    color: black;
    border: none;
    width: 100%;
}

.user-form-front {display: -webkit-inline-box;}

.has-header-image.twentyseventeen-front-page .site-branding {
vertical-align:top;
display: inline-block;
width: 100%;}

.custom-header {
min-height:0px;
display: -webkit-inline-box;
display: -moz-box;

}



.main-navigation > div > ul {border-top: none}

.main-navigation a {padding: 0;}


.tab button {
    margin-right: 0;

    border-radius: 0;
    background: #f5f5f5;
}

.custom-header {
	min-height:0px;
    position: initial;

}





.main-navigation li {border-bottom: none}

.custom-header {margin-bottom: 0px !important;}

.submit {font-size: 12px;}




#footer-sidebar1 {

    width: 100%;
        margin: 5px;
        padding:0
}

#footer-sidebar2 {

  	width: 100%;
  	    margin: 5px;
}

#footer-sidebar3 {

    width: 100%;
    max-width:100%;
        margin: 5px;
}




}/******** maxw767 end******/

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

  .site-branding .custom-logo-link {
    position: relative;
}

.no-mobile {display: none !important;}
.mobile {
  display: block!important;
  position: relative;
}


.navigation-top.dark #menu-top-right {
    font-weight: 200;
    border-radius: 10px;
    border-radius: 10px 10px 10px 10px;
    display: block;
    right: 0;
    position: relative;
    top: 7px;
    z-index:0
}

#cookies p  {font-size: 8px;}

.tag-branding {text-align:center}

.header-separator {display:none}

form#login, form#register, form#forgot_password  {

width: 80%;
margin: auto;
left: 10vw;
padding: 10px;
margin-right: auto;
}

.site-navigation-fixed.navigation-top.dark {

    background: #333;
    height: 50px;

}

.content-area-single {padding:0}

h5 {font-size: xx-small;}


button {

    font-size: 10px;

    }

.column-1 {width:90%}


.comment-author .avatar {
	left: -92px;
    height: 80px;
    width: 80px;

}


select {

    height: 2.2em;

    }

.entry-title {

    text-align: center;

}


.cat-tags-links {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.nice-tag .entry-footer a {
font-size: xx-small;
}

.custom-header {height: 80px;}

.site-navigation-fixed .custom-logo-link {
width: 50px;
padding: 5px;}

/*.freelance-img {max-width:20%}*/


.comment-author-mail .avatar-mail img {
 display:none;}


div.comments {max-width: 250px;}

.has-header-image.twentyseventeen-front-page .site-branding {
vertical-align:top;
display: inline-block;}

.custom-header {
min-height:0px;
display: -webkit-inline-box;
display: -moz-box;
width: 100%;

}

.main-navigation > div > ul {
    border-top: none}

.main-navigation a {
    padding: 0;}


.site-branding .wrap {
padding-left:2em;
padding-right:2em}



.content-post {margin-top: 50px}


.comment-mail {
    max-width: 50%;
    text-align: justify;
    margin-left: 90px;
}


.main-navigation li {
    border-bottom: none;
    z-index: 999;
    font-size: 20px;
}

.custom-header {margin-bottom: 0px !important;}
.submit { font-size: 12px;}

.logo {
    z-index: 1;
    position: relative;
    min-width: 80px;
     width: 100%;
}



.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.iso-filters {

font-size:xx-small;
margin-bottom:0px

}

.iso-filters li {

    padding-right: 0px;


}

.grid {
    margin-left: 10%;
}

.grid-item {
  width:100px;
  height:100px;
  padding:1px;
	margin-bottom:2px
}

.grid-item img {
    border-radius: 10px;
    min-height: 100px;
}

#footer-sidebar1 {

    width: 100%;
        margin: 5px;
        padding:0
}

#footer-sidebar2 {

  	width: 100%;
  	    margin: 5px;
}

#footer-sidebar3 {

    width: 100%;
    max-width:100%;
    margin: 5px;
}

.site-info .custom-logo-link {

  width: 15px;
	padding-right: 0px;

	}

.site-info {margin-bottom:0em}

.mail.entry-content {padding:0;margin:0}

.mail .post-wrapper {
	padding:8px;
    display: block;}

.mail .post-title,  .mail div.infos-container, .mail .post-action  {width:100%;}

.mail .post-description {width:60%;}

.mail .post-description .pronostics-offer {

    box-shadow: none;
    -webkit-box-shadow: none;

    margin-left: auto;
    margin-right: auto;
    padding: 5px;
}


.mail .post-wrapper .infos.post-reply {
padding: 2px;font-size: small;
text-align: center;
position: relative;
width: 30%;
margin-right: 0;
margin-top: -50px;
}

.mail .post-action .post-submit-btn {text-align:right}

.pm .fa-paper-plane {
	margin-left: 5px;
  font-size: 30px;
}



.private-message .pronostics-offer {
    width: 100%;

}

.private-message .comment.list {
    margin-left: 30%;

}

.comment-mail-right {
    margin-left: 0;

}

#contact-wrap {
width: 90%;
margin-top: 20px;
}

/*.site-description {display:none}*/

/*.mobile-screen {display:block}*/

} /******** maxw420 end******/


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


.site-branding .wrap {
    padding-left: 1em;
    padding-right: 1em;
}


.comment-author .avatar {
    height: 50px;
    left: -60px;
    width: 50px;
}

.wrap {

padding-left:1em;
padding-right:1em

}


.main-navigation > div > ul {

    padding:  0;
}

/*
#menu-top-right {

    float: none;
    right: 20px;
    position: absolute;}*/

.menu-top-right-float {float:none}



div.comments {
    left: 50px;
    position: relative;
}


}



#cookies {
  width: 100%;
  margin: 0;
  padding: 0.5em 10%;
  background: #333;
  border-bottom: solid 1px rgb(225,225,225);
    position: fixed;
    bottom: 0;
    z-index: 444;
}

#cookies p {
  font-family: sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
  text-align: center;
  color: rgb(255,255,250);
  margin: 4px;
  z-index: 999;
}

#cookies .cookie-accept {
	line-height:0;
  cursor: pointer;
  display: inline;
  color: rgb(255,255,250);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.35);
}


#cookies .title {text-transform:uppercase}