/*.topnav {
	width: 600px;
    margin-right: 20px;
    position: relative;
    margin-left: auto;
    }

*/

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

#logos img {
    position: absolute;
    display: block;
    left: 0;
    top: 0;
  }

.navigation-top {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background:transparent;
    border:none
}


.navigation-top #menu-top-right {
  display:none!important
}

.navigation-top-user {
    top: 30px;
    font-size: 14px;
    position: absolute;
    right: 3%;
    z-index: 1;
    text-transform: uppercase;
}


.navigation-top.site-navigation-fixed #menu-top-right {
  display:block!important
}


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


  #menu-top-right {
    display:none;
    float:right
  }

.premium-btn {
    border: none!important;}



.front-infos-wrap {
	max-width:980px;
	margin: auto;
}
div.infos-container.front-infos {
    display: inline-flex;
    width: 100%;
    margin: 0;
    color:#D1D1D1;
    text-align:center;
    font-weight:280;
    height: 50%;
    padding-top: 5%;

}

div.infos-container.front-infos .col-33 {
   padding:35px

}


div.infos-container.front-infos h2 {
font-size: 18px;
color: white;
font-weight: 200;
line-height:0.5em;
padding:0
}

.navigation-top a {
    font-weight: 400;

}

.site-content-contain {
    background-color: #fff;
    position: relative;

}


.has-header-image.twentyseventeen-front-page .custom-header {
    display: table;
    width: 100%;

}


#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

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

.page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header {
    margin-bottom: 0;
}


.front-search-box {
 position: absolute;
 width: 100%;
 top: 38vh;
 text-align:center;
}

.front-search-box h3 {color: lightgrey;}

.s-freelance::placeholder,.s-job::placeholder { color:darkgrey }



.search-submit1   {color:#5aa4b8!important;padding:12px}

.search-submit2   {color:#fecf0f!important;padding:12px}


.stripesfl {
	position: absolute;
	top:50vh;
    width: 100%;
    transform: skewY(-12deg);
    background: linear-gradient(180deg, #e6ebf1 350px, rgba(230, 235, 241, 0));
    z-index:0
    }

.stripesfl .stripe {
  position: absolute;
  height: 190px;
}

.stripesfl .blue {
	top: 80px;
    left: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.11), #13beea);
}

.stripesfl .yellow {
    top: 280px;
    right: 0;
    width: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.11),#fecf0f);
}


#menu-toggle-frontpage-menu {
display:none;
position: absolute;
width: 100%;
background: transparent;
}

#menu-toggle-frontpage-menu li a {color:white}



.user-form-front [type="submit"]:focus{background:none}
.user-form-front [type="submit"]:visited{background:none}
.user-form-front [type="submit"] {
		position: relative;
    margin-left: -80px;
    background: transparent;
    color:black;
    font-size: initial;
    }


.user-form-front button     [type="submit"]:focus {background:none}
.user-form-front button     [type="submit"]:active{background:none}
.user-form-front button     [type="submit"]:visited{background:none}

.user-form-front button, html [type="button"], [type="reset"], [type="submit"]:hover {

    color:black}


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


.navigation-top.dark {

  z-index: 3;

}

.site-navigation-fixed.navigation-top.dark {
    background: #343434!important;
}

.front-box {
    text-align: center;
  }

.navigation-top-user #menu-top-right {
  display:block!important;
      padding-top: 2em;
}

.navigation-top-user #menu-top-right .dropdown-content {
margin-right: 0;
}


.navigation-top-user {
		top: 30px;
    font-size: calc(8px + 6 * ((100vw - 320px) / 1440));
    position: absolute;
    right: 80px;
    text-transform: uppercase;
    z-index: 100;
    }

.navigation-top-user a {
     color: #cbcbcb;
    }
.site-navigation-fixed.navigation-top #menu-top-right {
  display:block
}



.site-navigation-fixed.navigation-top.dark #menu-top-right a {
    color:#cbcbcb
}

.site-navigation-fixed.navigation-top .main-navigation li  {
   color:#cbcbcb

}


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

navigation-top a {
    color: #929292;
}

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

#menu-top-right a{

   color:#bbb;

}


.dropdown-content {background:none!important}


.site-navigation-fixed .dropdown-content a {
	 background-color: #f1f1f1;

}


.site-navigation-fixed.navigation-top.dark #menu-top-right .dropdown-content a {
    color: black;
}


.main-navigation li {

    color: white;
}


#primary {

    width: 100%;
}


.searchform {
    max-height: 55px;}


.mobile li .fa {display: none;}

.job-ads-infos {overflow: hidden;}




@media screen and (min-width: 48em){
.panel-content .wrap {
    padding-bottom: 0;
    padding-top: 6em;
}}

article#s2 .panel-content {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    background: rgba(255,255,255,0.8);


    }

.freelance-img img {
    border-radius: 20px!important;
    }

.front-ads .job-ads .entry-title {
margin: 0;
font-size: calc(14px + 8 * ((100vw - 320px) / 1480));
font-style: italic;
font-weight: 777;
color: #5d5c5c;
text-align:left;
cursor: pointer;
    }

.front-ads .job-ads .description {
		color: grey;
    font-weight: 200;
    font-size:small;
    }

.front-ads .fa {font-size:x-small}
.front-ads .fa-share {

    padding-left: 10px;
}
.front-ads .replies {color:#5aa4b8; font-size:x-small; }
.front-ads i.replies { margin-left: 30px;}
.front-ads {width: 45%; display: inline-block;}
.front-ads hr {border-top: 1px solid #5aa4b8;}
.front-ads.offset-ads {
    top: 0px;
    float: right;
}


.front-ads .tags-links li {

   			position: relative;
        background: #cccccc;

        color:white;
        border-radius:4px;
        padding:0px 5px 0px 5px;
     		margin: 0px 2px 2px 0px;

    }

.more-ads {text-align: center;}

.user_count {
		bottom: 0px;
    position: absolute;
    font-size: x-small;
    color: white;
    }




.job-ads {border-bottom: 1px solid #5aa4b8; padding: 20px 10px 20px 20px;}

.job-ads:hover .entry-title a, .job-ads:focus .entry-title a  { color: #13beea;}
.job-ads:hover .tags-links li, .job-ads:focus .tags-links li {
	background:#13beea;
	-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;
  }

.job-ads:hover, .job-ads:focus {
				-webkit-box-shadow: 0px 10px 30px 0px #13beea;
            box-shadow: 0px 10px 30px 0px #13beea;


    }


.job-ads:hover .entry-title {
    color: #13beea;
  -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;

    }

.job-ads {

	-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;


}

.job-ads ul li, .job-ads h2 {

	-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;


}

.more-ads {
		width: 50%;
    margin-bottom: 50px;
    margin-left: auto;
    margin-right: auto;
    }

.more-ads.more-jobs { width: 42%;    margin-top: 20px;}

.more-ads .submit-button {

    font-size: 13px;
    text-align:center;
    background-color: #13beea;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
    text-transform: uppercase;


    }


.more-ads .submit-button a {

    color: white;
    text-transform: uppercase;
    font-weight: 200;

    }


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

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

}

.freelance-container-listing li a  {
		text-transform: capitalize;
    top: 4px;
    position: relative;}

.freelance-container-listing:hover li a, .freelance-container-listing:focus li a {

    /*color: #fecf0f;*/


}

.freelance-container-listing {text-align:center;text-align: -moz-center;}

.freelance-container-listing .fa {color:lightgrey}


.freelance-container-listing:hover .professions h3, .freelance-container-listing:focus .professions h3 {

     /*color: #fecf0f;*/


}




.professions h3 {width: 80%;}


.freelance-container-listing li a {

						-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;

}

/* .fa-spin {display:none}*/

.grid-front {
  /*width: 800px;
  margin-left: auto;
  margin-right: auto;*/
      margin-left: 40px;
}

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

}

#panel2 .grid-item-masonry {

    display: block;
    float: left;
    width: 20%;
    text-align: center;
    text-align: -webkit-center;
}


.grid-item-front {
  width:200px;
  height: 240px;

  text-align: -webkit-center;
  text-align: center;
text-align: -moz-center;

}


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

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

.grid-item-front h2 {
    margin: 0;
    padding: 0;
}


.entry-content a img, .widget a img {
    -webkit-box-shadow: 0 0 0 8px transparent;
    box-shadow: 0 0 0 8px transparent;

}


.more-freelance .submit-button {

    font-size: 13px;
    text-align:center;
    border-radius: 3px;
    margin-left: auto;
    margin-right: auto;
		text-transform: uppercase;


    }

button.infos:hover,button.infos:focus {background:none}


@media screen and (min-width:768px)   {
 /* .navigation-top #menu-top-right {
    float: right;

    top: -85vh;
    position: relative;
}
*/

}

@media screen and (min-width: 30em){
.page-one-column .panel-content .wrap {
    max-width: 1200px;
}}

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


.user-form-front  {

    margin-left: auto;
    margin-right: auto;
    width: 45%;
    display: flex;

}



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

color: #767676;

}




}


.front-search {
margin-bottom:80px;
}



/* *** NO TOGGLE MENU */
@media screen and (max-width:767px) {

#menu-toggle-frontpage-menu {display:none}


.searchform {
    margin-left: auto;
    margin-right: auto;
    width: 60%;
}

.front-search-box {
width: 100%;
}

.front-search {
width: 60%;
margin-right: auto;
margin-left: auto;
}


.user-form-front {
width: 100%;
text-align: end;

    }

.front-ads {

width:100%;
display:block

}

.menu-toggle-frontpage-menu-container {
top: 55vh;
position: relative;}

.freelance-directory-menu {
background: #6dc4da;
height: 80px;
padding-left: 20px;
transform: skewY(-12deg);
padding: 28px;
}

.job-ads-menu {
background: #f9cb0f;
height: 80px;
padding-left:20px;
transform: skewY(-12deg);
top: 10px;
padding: 28px;
}


.mobile a .fa {display: block;color:white;}


} /*maxw 767*/




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

.front-ads {
    width: 100%;
    display: block;
}

.front-ads .replies {

    display: block;
}

.front-ads .fa-share {

    padding-left: 10px;
}


.page .panel-content .entry-title {font-size:10px}

#panel1 .panel-content .entry-content {

    max-width: 90%;}



.front-ads i.replies {

    margin-left: 0px;
    margin-right: 10px;

}
.front-ads .entry-title a {

    font-size: x-small;

}

.posted-on, .byline, .vcard {
    font-size: xx-small;
}
.grid-front {margin: 30px;}

.grid-item-front {

    width: 125px;
    padding: 8px;
    text-align: -webkit-center;
    text-align:center;


}

.grid-front {
    width: 80%;
}

.grid-front .professions h3 {
    margin:auto
}


.grid-item-front a {
    font-size: smaller;
}



.branding-infos-wrap {
height: 30px;
}
.stripesfl .stripe {
    height: 100px;
}
.stripesfl .yellow {
    top: 200px;}

.front-search {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}

.front-search-box {
width: 100%;

}
.user-form-front [type="submit"] {

    font-size: smaller;
}

.searchform-front {
    text-align: center;
}

.site-branding {width: 100%;}



.searchform [type="submit"] {
    margin-left: -100px!important;

}

.grid-front {height: auto;}

.grid-front .freelance-img {
    max-width: 100%;
}


}


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

#masthead .wrap {
    padding-left: 1em;
    padding-right: 1em;
}

.front-search-box {
    top: 15vh;
}

.stripesfl .stripe {
    height: 120px;
}
.stripesfl .yellow {
    top: 220px;}



.searchform {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
}


.user-form-front {
    padding: 0px;
    padding: 0px;
    width: 90%;
    display: flex;
}

.front-search-box input {
    height: 50px;
}


.grid-item-front {

    width: 105px;
    padding: 8px;
    text-align: -webkit-center;
    text-align:center;


}



}


/*** CLASSIE ***/


.input {
	position: relative;
	z-index: 1;
	display: inline-block;
	margin: 0;

	width: calc(100% - 2em);
	vertical-align: top;
}

.input__field {
	position: relative;
	display: block;
	float: right;
	padding: 0.8em;
	width: 60%;
	border: none;
	border-radius: 0;

	-webkit-appearance: none; /* for box shadows to show on iOS */
}

.input__field:focus {
	outline: none;
}

.input__label {
	display: inline-block;
	color: #6a7989;
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.input__label-content {
	position: relative;
	display: block;
	padding: 1.6em 0;
	width: 100%;
}

.graphic {
	position: absolute;
	top: 0;
	left: 0;
	fill: none;
}

.icon {
	/*color: #ddd;*/
	font-size: 150%;
}

/*
.input--tao {
	z-index: auto;
}

.input--lea {
	z-index: auto;
}
*/

.input__field--tao {
	padding: 0.85em 1.5em;
	width: 100%;
	border-radius: 2em;
	background: #fff;
	color: #535d92;
}

.input__field--lea {
	padding: 0.85em 1.5em;
	width: 100%;
	border-radius: 2em;
	background: #fff;
	color: #535d92;
}



.input__label--blackmoon::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6); /*overlay color*/
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	pointer-events: none;
}

.input__label--tao::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
/*	background: linear-gradient(45deg, rgba(0,0,0,0.1), #6bc4db); /*overlay color*/
	background:rgba(0,0,0,0.6);
	opacity: 0;
	-webkit-transition: opacity 0.3s;
	transition: opacity 0.3s;
	pointer-events: none;
}

.input__label--lea::after {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	width: 100%;
	height: 100%;
/*	background: linear-gradient(45deg, rgba(0,0,0,0.1), #fecf0f); /*overlay color*/
	background:rgba(0,0,0,0.6);
	opacity: 0;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.3s;
	pointer-events: none;
}



.input__label-content--tao {
	padding: 0.5em 0;
}


.input__field--tao:focus, .input__field--tao:focus +  .input__label--tao .input__label-content--tao, .search-submit1 {
	z-index: 2000;
}


.input__field--tao:focus + .input__label--tao {
	color: #fff;
}

.input__field--tao:focus + .input__label--tao::after {
	opacity: 1;
}

.input__field--lea:focus, .input__field--lea:focus + .input__label--lea .input__label-content--lea, .search-submit2 {
	z-index: 2000;
}


.input__field--lea:focus + .input__label--lea {
	color: #fff;
}

.input__field--lea:focus + .input__label--lea::after {
	opacity: 1;
}

.unfocused {z-index:500}

.tags-links { font-weight: 300; /*display: -webkit-inline-box;*/}


/**** testing *****/