/* Reset */

*,*::before,*::after{
	box-sizing:border-box;
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption{
	margin:0;
	padding:0;
}
fieldset,img{
	border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
	font-style:normal;
	font-weight:400;
}
ol,ul{
	list-style:none;
}
caption,th{
	text-align:left;
}
h1,h2,h3,h4,h5,h6{
	font-size:100%;
	font-weight:400;
}
q:before,q:after{
	content:'';
}
abbr,acronym{
	border:0;
}
a{
	text-decoration:none;
}
a:active,a:focus{
	outline:none;
}


/* GENERAL */


h2{
  font-size: 60px;
  font-family: 'Kaushan Script';
  text-transform: capitalize;
  color: #0b5ed7;
  margin: 5% auto;
  text-shadow: 4px 3px 0px rgba(0,0,0,0.3);
  
}

h3{
	font-size: 30px;
	padding: 10px;
	margin: 7vh 0 2vh;
	font-family: 'Kaushan Script';
	background-color: blue;
	color: whitesmoke;
	width: fit-content;
	border-radius: 0px 20px 20px 0;

}

h4{
  font-size: 15px;
	padding: 5px;
	border: 1px;
	border-radius: 10px;
	border-bottom-width: thick;
	font-family: sans-serif roboto;
	margin: 0 auto 15px;
	width: auto;

}

img{
    width: -moz-available;
}


/*Header-------------------------*/

header{
    background: url('img/bgphotshop.png')  ;
    background-size: cover;
    background-position: center;
    height: 55vh;
}

.text-intro{
    padding-top: 15rem;
    /* padding-bottom: 200px; */
    text-align: center;
}

.preTxt{
    font-size: 70px;
    margin: 0;
    color: #2f2d2d;
    margin-bottom: 40px;
    flex-flow: row;
    font-family: 'Kaushan Script';
    line-height: 100%;
  
}

h1{
    font-size: 150px;
    color: #2f2d2d;
    font-family: 'Kaushan Script';
    font-weight: 700;

}


/*-------NAVIGATION: la navigation va se retrecir quand on va sroller sur le contenue + animation en js */

#main-nav{
    transition: all 0.4s ease ;
}

.navbar-brand{
    font-size: 45px!important;/*passe par dessus bootstrap*/
    font-family: 'Kaushan Script!important';
}

.navbar a {
    color: #fff!important;
    font-family: 'Lato';
    font-size: 22px;
    font-weight: 700;
    transition: all 0.4s ease;
}

    /* animation barre navigation: des qu'on scroll de plus de 30px= la barre va se reduire */
.navbar.opaque .navbar-brand{
    font-size: 27px!important;
    transition: all 0.4s ease;
}
.navbar.opaque a{
    font-size:18px;
    transition: all 0.4s ease;
}


/* -A PROPOS ---------------------- */

#aPropos{
    margin-top: 30px;
    padding-bottom: 75px;
    border-bottom: 1px dashed #2f2d2d;
}
h2.about{
  font-size: 70px;
  padding-top: 80px;
  padding-bottom: 50px;
  font-family: 'Kaushan Script';
  margin: 0 auto;
  width: 100%;
}

.card_accordion{
    background-color:white;
    color: black;
    	padding: 15px;
	position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;

  background-clip: border-box;
  border: 1px solid rgba(0,0,0,.125);
  border-radius: .25rem;
}

.card-body{
    color: black;
}

/* --------------------------- garanties Trois icones */
#garanties{
    padding-top: 75px;
    padding-bottom:75px;
    border-bottom: 1px dashed #2f2d2d;
    border-top: 1px dashed #2f2d2d;
}

.icone_titre{
 font-size: 30px;
  background-color: white;
  color: black;
  border-radius: 20px 0 20px 0;
}

/*--------------------------- 1er banniere */

#ban1{
    position: relative;
    background: url('img/banniere1.png')   ;
    background-position: right;
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
    
}

img .galaxy{
    width: auto;
}

.galaxy{
    width: auto;
}

/*---------------------------- Galerie */
#galerie{
    padding-bottom: 10%;

}


#galerie .container p{
    padding-bottom: 40px;
}

img.img-fluid{
    height: auto;

}

h2.titre_site{

   color: #22a7f0;
}



/*   PRESTATIONS--------------------*/
svg text{
  text-anchor: middle;
  dominant-baseline: middle;
}

.prestations{
	padding-top: 0px !important;
}

 .btn-group{
	margin-top: 10px;
}

.img_card{
	object-fit: fill;
	margin: 0 auto;
	border: 1px;
  border-radius: 20px;
  padding: 5px;
}

.img_rx, .img_entreprise, .img_site, .img_marketing  {
    width: 100%;
    margin: 0 auto;
}

.img_rx:hover, .img_entreprise:hover, .img_site:hover, .img_marketing:hover{
    transform:scale(1.1);
		z-index: 1000;
		transition: 0.5s ease-in-out;
}

/*.card{*/
/*	padding: 15px;*/
/*	position: relative;*/
/*  display: flex;*/
/*  flex-direction: column;*/
/*  min-width: 0;*/
/*  word-wrap: break-word;*/

/*  background-clip: border-box;*/
/*  border: 1px solid rgba(0,0,0,.125);*/
/*  border-radius: .25rem;*/

/*}*/

.card_prestations{
      background-color: #0d6efd;
      	padding: 15px;
	    position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
    
      background-clip: border-box;
      border: 1px solid rgba(0,0,0,.125);
      border-radius: .25rem;
}

.button_card{
	background-color: #0d6efd;;
	color: black;
}

.button_card:hover{
	background-color: #0d6efd;;
	color: white;
}

.btn-outline-secondarym:hover{
    border-color:white;
}





/*------------------------------- seconde banniere */

#ban2{
    position: relative;
    min-height: 300px;
    background: url(img/Banniere2.png);
    background-attachment: fixed;
    background-repeat: no-repeat;
    text-align: center;
}

#carouselContent{
    margin-top: 70px;
    font-size: 35px;
    color: #000;
    font-weight: 400;
}

/*----CARTES TARIFS *****************************/

.offreH{
    font-size: 70px;
    padding-top: 80px;
    padding-bottom: 50px;
    font-family: 'Kaushan Script';
}

#cartes{
    padding: 50px 0 20px 0;
		width: 95%;
		margin: 0 auto;
}

.carte2{
	width: auto;
}

.threeCards{
    width: 300px;
    height: 550px;
    position: relative;
    transition: 0.2s ease-in;
    box-shadow: 0px 10px 30px #000;
		background-color: white;
}

.threeCards:hover{
    transform:scale(1.1);
		z-index: 1000;
}

.header{
    height: 200px;
    width: 300px;
    position: relative;
    background: rgba(216, 216, 216, 0.5)
}

.carte_prix{
    margin: 0;
    position: relative;
    top: 130px;
    text-align: center;
    font-family: 'Lato';
    font-size: 15px;
    color: black;
    background-color: #ebebeb;
}

h2.carte_prix{
top: 200px;
/* margin-top: 200px; */
padding-top: 10px;
text-align: center;
font-size=60px;
}

span#spanPrix{
    font-size: 30px;
    height: 50px;
}

h2.promes{
    padding-top: 50px;
		font-size=60px;
}

.type{
    height: 120px;
    width: 300px;
    background: #0d6efd;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%);
    position: absolute;
    top: 0;
}

.type h2{
    margin:10 0;
    text-align: center;
    color: #fff;
    font-family: 'kaushan script ';
    font-size: 30px;
    position: relative;
    /* top: 30px; */
    padding: 10px
}


#btn {
    background: #fff;
    height: 50px;
    margin-top: 15px;
}

#btn a {
    background: #fff;
    height: 50px;
    width: 120px;
    display: block;
    margin: auto;
    text-align: center;
    line-height: 50px;
    position: relative;
    top: 10px;
    border-radius: 30px;
    border: 1px solid #0D6EFD;
    transition: all 0.8s ease-in;
    border-width: 2px;
}


#btn a:hover{
    /*background: rgba(6,136,206,0.8);*/
    background: #0D6EFD;
    color: #fff;
}

.details {
  background: #fff;
  height: 50px;
  line-height: 50px;
  font-family: 'Lato';
  transition: all 0.5s ease-in;
  padding-left: 10px;
  font-size: 14px;
}

.details:hover{
    background:#0d6efd;
    color: white;
    transition: all 0.5s ease-in;
    border-radius: 10px;
     /*background: rgba(181, 208, 230, 0.1);*/
}

.prestations_tarif{
    /*color: white;*/
}
.prestations_tarif:hover{
    color: #0d6efd;
}


.type2 h2{
    /*margin:10 0;*/
    text-align: center;
    color: #fff;
    font-family: 'kaushan script ';
    font-size: 30px;
    position: relative;
    padding: 10px;
    height: 120px;
    width: 300px;
    background: #0d6efd;
    margin: 0 auto;
}


/* bouton envoyer */


/* progress competences-------------------------- */

  #progress{
    border-top: 1px dashed #000;
    /* border-bottom: 1px solid #000; */
    padding-top: 100px;
    padding-bottom: 100px;

}
h2.competences{
  font-size: 40px;
  padding-top: 0;
}
---- */


/* clients---------------------------- */

#clients{
    border-top: 1px dashed #000;
    border-bottom: 1px solid #0000;
    padding-top: 50px;
    padding-bottom: 50px;
}

/* FOOTER**********************************/
footer{
  background-color: #0d6efd; 
  color: white;
}

/*FOOTER2*/
/*  Footer css */
.element-btn .element-fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    box-shadow: 0px 10px 50px -10px rgba(255, 10, 120, 1);
   
}
.fill-btn {
    background-color: #ff6600;
    border: 0;
    color: #fff;
    padding: 13px 5px;
    font-size: 16px;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    width: 252px;
    margin: 0 auto;
    border-radius: 25px;
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
   
}
.fill-btn:hover,
.element-btn .element-fill-btn:hover {
    background-color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(32, 31, 31);
}


.footer {
    position: relative;
    background-color: #201f1f;
    padding:50px 0px;
}

.footerBg {
    position: absolute;
    top: 0;
    bottom: 0;
    opacity: 0.13;
    background: url('http://placehold.it/1920x677') no-repeat top center;
    background-size: cover;
    width: 100%;
    height: 100%;
}

.form-Box input[type="text"],
.form-Box input[type="email"],
.form-Box input[type="passowrd"],
.form-Box textarea {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 25px;
    margin-bottom: 20px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    text-transform: uppercase;
}
.form-Box textarea {
    height: 113px;
    padding: 15px 25px;
    resize: none;
}
.form-Box .b_effect:focus,
.subscribe form input:focus {
    border-color: #ff6600;
}

.form-Box .fill-btn {
    position: static;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 184px;
}

.form-Box .fill-btn:hover,
.subscribe form .fill-btn:hover {
    background-color: #ffe402;
    color: #201f1f;
    box-shadow: 0px 10px 50px -10px rgb(255, 228, 2);
}

.fTitle {
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    font-style: italic;
    margin-bottom: 20px;
}

.fTitle span {
    color: #ff6600;
}

.contact-address ul li,
.contact-address ul li a {
    color: #737373;
    font-size: 16px;
    font-style: italic;
    margin-bottom: 15px;
    line-height: 32px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.contact-address {
    padding: 0 15%;
}

.contact-address ul li i {
    margin-right: 15px;
    display: inline-block;
    float: left;
    line-height: 32px;
}

.contact-address ul li span {
    display: table;
}

.contact-address ul li a:hover {
    color: #ff6600;
}

.subscribe form {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 60px;
}

.subscribe form input {
    width: 100%;
    height: 50px;
    border: 1px solid #737373;
    border-radius: 25px;
    background-color: transparent;
    padding: 5px 215px 5px 25px;
    font-size: 14px;
    color: #737373;
    font-style: italic;
}

.subscribe form .fill-btn {
    bottom: auto;
    top: 0;
    right: 0;
    left: auto;
    transform: translate(0%, 0);
    -webkit-transform: translate(0%, 0);
    -moz-transform: translate(0%, 0);
    -ms-transform: translate(0%, 0);
    width: 209px;
}

.social-icons ul li {
    display: inline-block;
    float: left;
    color: #fff;
    text-align: center;
    line-height: 43px;
    position: relative;
    width: 43px;
    height: 43px;
    margin-right: 28px;
}

.social-icons ul li a {
    color: #fff;
    position: relative;
    display: inline-block;
    width: 100%;
    font-size: 16px;
}

.social-icons ul li:before {
    content: "";
    width: 43px;
    height: 43px;
    display: inline-block;
    position: absolute;
    border: 1px solid #ff6600;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

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

.social-icons ul li:hover:before {
    background: #ff6600;
}


/* Copyright css */

.copyright {
    padding: 51.5px 0;
    text-align: center;
}

.copyright h6 {
    font-size: 14px;
    font-style: italic;
    color: #737373;
}

.copyright h6 a {
    color: #ff6600;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
}

.copyright h6 a:hover {
    color: #201f1f;
}



/*--- MEDIA QUERY---------------------- */



@media screen and (min-width: 1200px){
	.text-intro h1{
		margin-bottom: 30px;
	}
}

@media screen and (max-width: 1200px){
   
    .preTxt{
        font-size: 40px;

    }
    h1{
        font-size: 90px;
    }
}

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


    .threeCards{

            margin: 0 auto 30px;
        }

   

}

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

  h1{
    font-size: 90px;
  }
  header{
    height: fit-content;
    padding: 15px;
  }
}

@media screen and (max-width: 800px){
  header{
    height: fit-content;
    padding: 15px;
  }
    .preTxt{
        font-size: 30px;

    }
    h1{
        font-size: 71px;
    }
    .text-intro{

				padding: 100px auto;
        text-align: center;
				

    }
    .section_title, .section_text{
              text-align: center;
            }


}

@media screen and (max-width: 762px){
    
   #progress{
       padding-top : 30px;
       padding-bottom: 30px;
    }
    .preTxt{
        font-size: 20px;

    }
    h1{
        font-size: 51px;
    }
    .text-intro{
      padding: 15rem auto ;
    }
    h2.competences{
      font-size: 70px;
    }
}

@media screen and (min-width: 600px){
  .text-intro{
    padding-top: 10rem  ;
  }
  
}

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

 .sect_tit_txt{
    margin:15px 12px 15px;
  }

  h2.section_title.text-center{
    font-size: 40px;
    padding-top: 30px;
  }
  p.section_text{
    padding-top: 0;
  }
  h3.titre_site{
    padding-top: 20px;
  }
  
  #aPropos{
    background-color: aliceblue;
    width: 90%;
    margin: 40px auto;
    border-radius: 20px;
  }
  }


  .projects_section{
    display: block;
  }

  .project_content{
    text-align: center;
  }

	#main-nav{
		border-radius: 20px;
		padding: 10px;
		padding: 10px 70px ;
		width: 90%;
		margin: 0 auto 15px;
		position: absolute;
}

	 header {
		/* display: flex; */
		/* margin: 55px auto;  */
		 background-color: rgba(15, 255, 15, 0.5);      
		 background-position: 10px; 
		border-radius: 20px;
		/* padding: 10px;*/
		/* padding: 10px 70px ; */
		 width: 90%; 
		margin: 0 auto;
		/* text-align: center;   */
 } 

  .project {
      display: block;
      margin: 55px auto;
      background-color: aquamarine ;
      background-position: 10px;
      border-radius: 20px;
      padding: 15px;
  }

  .cont_nav{
    width: 100%;
    height: fit-content;
  }

  .sect_tit_txt{
     /* background-color: rgba(230, 0, 115, 0.9) ; */
      background-position: 10px;
      /* border-radius: 20px; */
      padding: 10px 70px ;
      width: auto;
      margin: 55px 12px 15px;
      text-align: center;    
  }
   

  footer{
    /* background-color: whitesmoke ;*/
    background-color: #0d6efd; 
    color: white;
    background-position: 10px;
    border-radius: 20px;
    padding: 10px 70px ;
    width: 90%;
    margin: 15px auto;
    text-align: center;
  }

  img{
    display: block;
    /* width: 80%; */
    margin-left: auto;
    margin-right: auto;
  }

  p.project_text{
    text-align: justify;
    width: 80%;
    margin: 5% auto;
    font-size: 20px;
  }

  /* h2{
    font-family: Kaushan;
  } */

  h2.titre_site{
    font-size: 1.9rem;
    width: 80%;
    margin: 10px auto;
  }

  .text-intro{
    height: 100%;
    padding-top: 20vh;
    padding-bottom: auto;
  }

  /* .box, .circle{
    margin-right: 40px;
    margin-left: -40px;
		display: none;
      } */
  }
  
  #garanties{
      text-align: center;
      border-radius: 20px;
      background-color: aliceblue;
      width: auto 10px;
  }
  
  #contact {
  border-radius: 20px;
  width: 90%;
  margin: 0 auto;
}
 


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

	.text-intro a{
			transform: scale(0.8);
	}
	
	.navbar-brand{
			font-size: 35px!important;
	}
	
	.preTxt{
			font-size: 25px;
			line-height: 100%;
            margin-top: 30%;
	}
	
	h1{
			font-size: 51px;
	}
}


 @media screen and (max-width:420px){
  
 
    .text-intro {
        padding-top: 100px;
    }


    h1{
      padding-top: 20px;
      font-size: 30px;
    }
    
    h2.about, h2.text-center, h2.offreH, h2.competences{
      font-size: 50px;
      padding-top: 40px;
    }
    
    /*Nav***********************/
    
		.cont_nav{
	    display: flex;
	    justify-content: center;
	    flex-wrap: wrap;
	  }

		.sect_tit_txt{
			margin: 35px 0;
			height: auto;
		}
		
	.navbar-nav{
	    flex-direction: inherit;
	}
	
	.nav-item.mr-1 {
    margin: 5px;
    }
		
	.navbar a{
	    font-size: 15px;
	}
	

 }