/*
Theme Name:enfant twentyseventeen
Description:child theme of twentyseventeen
Author:L Cazaubon
Version:1.0.0
Template:twentyseventeen
Text Domain: enfant
*/

@import url("../twentyseventeen/style.css");

/*------------------ correction bota ---------------------------------------*/

/*----------- corrections CSS reset -----------------*/

div,form,body,ul,li,p,h1,h2,h3,h4,h5,h6 {
	margin:0;
	padding:0;
}

a img {
	border:none;
}

textarea {
    resize:none;
}


/*************************************************************/
/*                   outils                                  */
/*************************************************************/

.alignCenter {
	text-align:center;
}

.alignRight {
	text-align:right;
}


.floatLeft {
	float:left;
}

.floatRight {
	float:right;
}

.clearBoth {
	clear:both;
	height:0px;
}


*,*:before,*:after {
    -webkit-box-sizing:content-box;
    -moz-box-sizing:content-box;
    box-sizing:content-box;
}

body {
    font-size: 1.4rem;
}




/* https://stackoverflow.com/questions/8554043/what-is-a-clearfix */

.clear,.clearfix {
    content: ""; 
    /* Older browser do not support empty content */
    visibility: hidden;
    display:table;
    line-height: 0; height: 0;width:0;font-size: 0px;
    overflow:hidden;
    clear:both;
}


a, a:visited {
    transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
}


.table {
    display: table;
    width: 100%;
}
.table .tr {
    display: table-row;
}
.table .tr .td, .table .tr .th {
    display: table-cell;
}

/*--------------------- CSS SPECIFIQUE -------------------------*/

body,p button,input,select,textarea,span,a,div,
#masthead-wrap,#topbar,
#masthead-wrap a,#topbar a {
    font-family:"Exo",Helvetica,sans-serif;
}

/* Headings */
h1,h2,h3,h4,h5,h6 {
    margin:0.6em 0;
}
h1 {
	font-size:32px;
	font-size:3.2rem;
}
h2 {
	font-size:28px;
	font-size:2.8rem;
    color:#674e64
}
h3 {
	font-size:22px;
	font-size:2.2rem;
    color:#674e64;
}
h4 {
	font-size:16px;
	font-size:1.6rem;
    color:#674e64
}
h5 {
	font-size:15px;
	font-size:1.5rem;
    color:#674e64
}
h6 {
	font-size:13px;
	font-size:1.2rem;
    color:#674e64
}




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

body,#content {
    background:#fff7ec;
}

#content {
    padding: 10px;
}

.site-header {
    /* background-color: #fafafa; */
    position: relative;
    background: linear-gradient(91deg, #877586 10%, #877186 20%,#6d4e6b 30%, #654862 40%, #685167 50%, #624c61 55%, #5f465d 65%, #443543 75%,#2c212b 90%);
    height: 150px;
    position: fixed;
    z-index: 7;
    width: 100%;
    top: 0;
        /* background-position-x: 100%; */
    box-shadow: 0 0 8px #000;
}
.site-header-before {
     height: 150px;
}

.site-content-contain {
    margin-top: 152px;
    background:#FFDBB0;
}

#infos-wrapper {
    border-bottom: 1px solid gray;
    padding-bottom: 10px;
    padding-top: 10px;
}


.navigation-top {
    background:transparent!important;
    border-bottom:none;
    border-top:none;
    top: 80px;
}
.navigation-top .wrap {
    padding: 0;
    margin: 0;
}

/* pb avec le theme parent */
.site-footer {
  margin-top: 0;
  border-top: none;
}
footer#colophon {
    padding: 20px;
}
.site-footer .wrap {
    padding-bottom: 1.5em;
    padding-top: 2em;
    padding-right: 0em!important;
    padding-left: 0em!important;
    max-width: 1686px;
}

#title-descr {
  margin-left: 10px;
    display: inline-block;
}
.site-title a {
color: #fe9365  !important;
  text-shadow: 0 0 0px #f36a42 , 0 0 2px #fe814a ,0 0 4px #f28d63
  font-weight: normal;
  margin-left: 0;
}
.site-title {
    font-size:1.5rem;
  vertical-align: middle;
  display: inline-block;
  margin-top: 13px;
}



  
.menu-toggle {
    background-color: rgba(255,255,255,0.6);
    margin: 1px 2% 2px;
}

.navigation-top .sub-menu a {
  color: #555;
}

/*------------------------ enlever la putain de fleche et le "page" du sitemap --------------*/

.icon.icon-arrow-right {
  display: none;
}

.wsp-pages-title {
  display: none;
}

.wsp-pages-list a {
  color: #e6ddd6;
}

li.page_item {
    list-style: none;
}

.wsp-pages-list a:hover {
  color:white;
}

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


.panel-content .wrap {
    padding:0!important;
    margin:auto!important;
    width:100%;
}

#wrap-slider {
    margin-top:118px;
}

.navigation-top a {
    color: #f8f0e6;
    font-size: 1rem;
}

.navigation-top .current-menu-item > a, .navigation-top .current_page_item > a {
    color: #eee;
}


#logo {
    margin-top: 20px;
    margin-left:10px;
    vertical-align: middle;
}

/* bouton menu mobile */
.menu-toggle {
  margin-top:-70px!important
}

.main-navigation a:hover, .main-navigation .current_page_item a {
  color: #fe9365;
}

.main-navigation ul ul {
  background: #f8f0e6 !important;
}

.main-navigation ul ul li:hover {
  background: #4e374c;
}

.toggled-on .menu-toggle + .menu-menu-principal-container .current_page_item a {
  color:#ff6834;
}

footer {
   background:#846d83 !important;
}

footer #titre-plan-site {
  color: white;
  font-weight: bolder;
  margin-bottom: 10px;
}

footer .socials i {
  margin-right: 5px;
  vertical-align: middle;
  color:#f8f0e6;
}

footer .socials a {
  margin-right: 10px;
  color:#f8f0e6;
}

footer .socials a:hover,footer .socials i:hover {
    color:white;
}

/*-------------------*/
.sites-vitrines h6,.applications-bubble-io h6,.sites-e-commerce h6,.intranets-applications h6,.outils-de-developpement h6 {
    margin-top: 40px;
}

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


#primary {
    margin: 20px;
}

/*---------- realisations ------*/
.img {
    margin-bottom: 10px;
}
.img img {
    height: 400px;
}
.id-360 img,.id-363 img, .id-357 img {
    height:200px;
}
.single-realisations .row {
    margin-left:21.6%;
    width: 660px;
}
.single-realisations .custom-post.commentaire2 {
    margin-left: 21%;
}
.single-realisations .custom-post {
    margin-bottom: 10px;
}

.single-realisations h3 {
  margin-left: 21%;
}

.single-realisations .custom-post.tecnos {
    color: #e6703f;
}

.single-realisations .custom-post.url * {
    color: #e6703f;
    font-weight: bold;
}

.custom-post-loop-item.id-330 .img {
    min-height: 362px;
}

.custom-post-loop-item.id-359 .img {
    min-height: 456px;
}

.custom-post-loop-item {
    text-align: center;
}

.page-id-382 .id-376 img, .page-id-382 .id-374 img {
    height: auto;
}

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

.button:hover {
    background: #332630;
}

.button {
  background: #644A62;
  width: 24%;
  padding: 10px 12px;
  border-radius: 30px;
  text-align: center;
  font-weight: bold;
  border: 2px solid #1b1419;
  margin-right: 2%;
  cursor: pointer;
  color: white ;
}

.button a {
      color: white ;
}

.button:hover a {
  color: white ;
}

#realisations ,#contact,#CV,#competences,#realisations {
  width: 200px;
}

.row.buttons.buttons2 {
  display: flex;
  justify-content: center;
}

.row.buttons.buttons1 {
  display: flex;
  justify-content: center;
}


.home .row.buttons {
  margin-top: 33px;
}

.row.buttons.voir-plus {
  display: flex;
  justify-content: center;
}

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

.home h6 {
    margin-top: 36px;
    margin-bottom: 26px;
    color: #ea6e38;
}


.home #content {
  margin: 0;
  padding: 0;
}


.home #primary {
  margin: 0;

}

.home .col-lg-65 {
  padding-left: 20%;
}

.home .row.presentation {
  padding-top: 25px;
  background: #f0f0f0;
  padding-bottom: 25px;
}

.home .row.intro {
  padding-left: 20%;
  padding-top: 20px;
  padding-bottom: 20px;
}

.home .intro img {
  position: relative;
  top: 31px;
  margin-bottom: 10px;
}

.home h3 + p {
  font-size: 0.9rem;
  text-align: justify;
}


.home .realisations {
  background: #f0f0f0;
  padding-left: 19%;
  padding-bottom: 15px;
}

.home .custom-post.titre {
  font-weight: bold;
  margin-bottom: 10px;
}

.home .voir-plus {
  display: flex;
  justify-content: center;
}

.home .voir-plus .button {
  width: 145px;
}

.home .competences div > span {
  display: inline-block;
  width: 12%;
}

.home .row.competences {
  padding-left: 19%;
}

.home .competences tr {
  border:none;
}

.home .buttons1 {
  margin-bottom: 10px;
}

.home .realisations img {
  margin-bottom: 10px;
}

.home .realisations .row > div {
  margin-right: 2%;
}

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

.competence th {
    background: #584257;
    color: white;
    padding: 10px;
}

.competence td {
    border: 1px solid gray;
    padding: 10px;
}

.competence .backgound {
    background: gray;
    width:50px;
}


.competence .level-5 {
    width: 50px;
    background: #4cd21e;
    height: 10px;
}

.competence .level-4 {
    width: 40px;
    background: #4cd21e;
    height: 10px;
}

.competence .level-3 {
    width: 30px;
    background: #4cd21e;
    height: 10px;
}

.competence .level-2 {
    width: 20px;
    background: #4cd21e;
    height: 10px;
}

.level-1 {
    width: 10px;
    background: #4cd21e;
    height: 10px;
}

/*-----------------------------------------------------   breakpoints ---------------------------------------------------*/


@media screen and (max-width : 1920px){
    html.FRONT::after {content:'max-width:1920px'!important}

    body { 
        font-size: 16px;
        font-size: 1rem;
    }     
    
}

@media screen and (max-width : 1440px){
    html.FRONT::after {content:'max-width:1440px'!important}

    body { 
        font-size: 16px;
        font-size: 1rem;
    }     
    
}


@media screen and (max-width : 1280px){
    html.FRONT::after {content:'max-width:1280px'!important}
    
    body { 
        font-size: 15px;
        font-size: 0.9375rem;
    }     
    
}


@media screen and (max-width : 1024px){
    html.front::after {content:'max-width:1024px'}
    
    body { 
        font-size: 15px;
        font-size: 0.9375rem;
    }
    
    
}



/* --------- SUR UNE SEULE COLONNE -------------- */

@media screen and (max-width: 992px){
    html.front::after {content:'max-width: 980px'!important}

    html { 
        font-size: 14px;
        font-size: 0.875rem;
    }

}

@media screen and (max-width: 991px){
    html.front::after {content:'(max-width: 1199px'!important}

    
    .img-perso {
        margin-left: 20%;
    }
}



/*--------- paysage  tablette -----------*/
@media screen and (max-width : 1024px){
    html.front::after {content:'max-width:1024px'!important}

    html { 
        font-size: 15px;
        font-size: 0.9375rem;
    }
}

/* 768->390   ---------  MOBILES -  SUR UNE SEULE COLONNE ---------------  */

/*   MODE MOBILE : largeur à  partir de laquelle le menu responsive apparait, et menu prinpcipal masthead n'est plus en fixed */

@media screen and (max-width: 48em) {
    html.FRONT::after {content:'max-width:48em'!important}
    #site-navigation ul {
        margin-left:2%;
    }
    .navigation-top nav {
        margin-left:0!important;
    }
}

/*--------- correction thème -----------*/
.navigation-top nav {
    margin-left:0;
}

@media screen and (max-width : 860px){
    html.front::after {content:'max-width:860px'}
    
    html { 
        font-size: 0.8125rem;
        font-size: 13px;
    }
}

/*--------- portrait tablette -----------*/
@media screen and (max-width : 768px){
    html.front::after {content:'max-width:768px'!important}

    html { 
        font-size: 0.75rem;
        font-size: 12px;
    }
}


@media screen and (max-width : 550px){
    html.front::after {content:'max-width:550px'!important}

    html { 
        font-size: 0.6875rem;
        font-size: 11px;
    }
   
}


@media screen and (max-width : 390px){
    html.front::after {content:'max-width:390px'!important}

    html { 
        font-size: 0.6875rem;
        font-size: 11px;
    }
   
}