/*
Theme Name: Padel
Template: twentytwentyone
Description: TwentyTwentyOne Child Theme for Padel
Author: Agence Web Blue Frog
Author URI: https://bluefrog.fr
*/

body{ background-color:#fff !important; 
}
header{
    position: absolute;
    z-index: 1;
}

/* branding */

/* nav */
.menu-item-98 a {
  background:  #FDC018;
  color: #183263 !important;
  border-radius: 40px;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 15px 22px 15px  !important;
  font-size: 20px;
  margin-top: -3px;
}
.menu-item-98 a:hover{
  color: white !important;
}
/* slide */

.slider-home::after { content:""; position:absolute; background:url('img/bg-bottom-slider.png') bottom center no-repeat; height:154px; width:100%; bottom:0;  }

div#n2-ss-2 .n2-font-478ebbea13aa6f2bcbd6a9547c74f54c-paragraph {
  font-size: 330.5% !important  ;
  font-weight: 300 !important;
}
div#n2-ss-2 .n2-font-546b928687dbf84bce64641b5e832609-paragraph{
  font-size: 500% !important  ;
  font-weight: 700 !important;
}
/* btn */
.btn-primary{
  background:  #FDC018;
  color: #183263;
  border-radius: 40px;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 14px 26px 12px !important;
  font-size: 20px;
}
.btn-primary:hover{
  background-color: #183263;
}
.btn-primary-white{
  background: white;
  color:#183263 ;
  border-radius: 40px;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  padding: 14px 26px 12px !important;
  font-size: 20px;
}
.btn-primary-white:hover{
  background-color: #FDC018;
}
.btn-connection{
  position: absolute !important;
  top: 0%;
  left: 83%;
  background: white;
  color:#183263 ;
  padding:  5px 15px;
  text-decoration: none;
  text-transform: uppercase;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
}
/* style letres */
h1{
  color:  #FDC018;
  font-size: 40px !important;
  margin-top: 0%;
}
h2{
  color:#183263;
  font-size: 30px !important;
  margin-top: 10px;
  margin-bottom: 40px ;
}
.has-white-color {
  color: #183263 !important;
}
.span-color{
  color: #FDC018;
}
p { margin:15px 0; }

/* section-1 */
.entry-header, .post-thumbnail, .entry-content, .entry-footer, .author-bio {
  margin-top: 0 !important;
  
}
/* section-0 */
.d-h2 h2{
  color:#FDC018;
}

/* section-1 */
.container-1{
  background:  #FDC018 !important;
  width: 100% !important;
  margin-bottom: 0%;
}
.container-1::before{
  content:""; position:relative; background:url('img/bg-top-orange-section.png') center no-repeat; height:123px; display: block; top:-1px;
}
.container-1::after{
  content:""; position:relative; background:url('img/bg-bottom-orange-section.png') center no-repeat; height:123px; display: block; bottom: -1px ; 
}
.p-inport{
  font-weight: bold;
}
div#n2-ss-3 .n-uc-xX0MK3hiO7ak {
  padding: 0% !important;
}
.slide-2{
  position: relative;
}
/* section-2 */
.container-2{
  margin: 0%;
  background: rgb(29,58,116);
  background: linear-gradient(120deg, rgba(29,58,116,1) 21%, rgba(27,56,112,1) 100%);
  color: white;
  position: relative;
  z-index: 1;
  
}
.dimention-div{
  height: 600px !important;
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 0%;
}
/* partie image */
.img-section-2{
  border-radius: 50%;
  max-width: 100%;
  max-height: 100% ;
  width: 600px;
  z-index: 2;
  position: absolute;
}
.sfere-yeune{
  z-index: 0;
  width: 250px;
  height: 250px;
  max-width: 100%;
  max-height: 100%;
  background-color: #FDC018;
  border-radius: 50%;
  position: absolute;
  top: -5%;
  left: 60%;
}
*.sfere-blanche{
  z-index: 0;
  width: 150px;
  height: 150px;
  max-width: 100%;
  max-height: 100%;
  background-color: #FED259;
  border-radius: 50%;
  position: absolute;
  top: -3%;
  left: 64%;
}
.img-logo-photo{
  z-index: 3;
  width: 300px;
  height: 300px;
  max-width: 100%;
  max-height: 100%;
  position: relative;
  transform: rotate(15deg);
  top: 55%;
  left: 25%;
}

.img-smartphone-photo{
  z-index: 3;
  width: 400px;
  height: 709px;
  max-width: 100%;
  max-height: 120%;
  position: relative;
  transform: rotate(0deg);
  top: 15%;
  left: 30%;
}

.titre-section-1 h2{
  color: white;
}
.section-2-btn{
  margin-top:60px;
  display: flex;
  justify-content: space-evenly; 
}
.section-2-btn a {
  margin-bottom: 10%  !important;
}
.section-2-btn .btn-primary:hover{
  background-color: white !important;
  color: #183263 !important;
}
.container-2::after{
  content:""; position:relative; background:url('img/bg-bottom-blue-section.png') center no-repeat; height:123px; display: block;bottom: -30px;
}

/* section-3 map */
.container-3{
  margin-top: 0%;
  background: url(img/bg-little-dots-2.gif) left bottom no-repeat , url(img/padel-player.png) right no-repeat !important;
  position: relative;
  top: -6px;
}

.titre-section-3{
  text-align: center;
  margin-top: 70px;
}
.map{
  
  position: relative;
}
.map-iframe{
  border-radius: 10px;
  
}
.cart-1{
  z-index: 1;
  position: absolute;
  background: rgb(18,36,74);
  background: linear-gradient(120deg, rgba(18,36,74,1) 29%, rgba(18,37,75,1) 30%, rgba(26,53,106,1) 60%);;
  width: 450px;
  height: 300px;
  top: 200px;
  left: 65%;
  border-radius: 20px;
  
}
.info-car{
  height: 200px;
  margin: auto;
  padding: 20px !important;
  border-left: 1px solid #fff;
}
.cart-1{
  
  padding: 20px;
}
.cart-1 h2{
  color: white !important;
  margin-bottom: 5% !important;
  font-size: 20px !important;
}
.cart-1 a  { color: var(--footer--color-link); }
.info-car { 
  color: white !important;
}


.img-logo-map{
  width: 190px;
  height: 190px;
  max-width: 100%;
  margin: auto;
}

/* madiia  */
@media only screen and (max-width: 1300px){
  div#n2-ss-2 .n2-font-478ebbea13aa6f2bcbd6a9547c74f54c-paragraph {
    font-size: 300% !important  ;
    font-weight: 300 !important;
  }
  div#n2-ss-2 .n2-font-546b928687dbf84bce64641b5e832609-paragraph{
    font-size: 400% !important  ;
    font-weight: 700 !important;
  }
}


@media only screen and (max-width: 1200px){
  .cart-1{
    position:initial;
    width: 100%;
    margin: auto;
  }
  .corner-top{
    display: none !important;
  }
}
@media only screen and (min-width: 768px ){
  .info-car{width: 300px;}
}
/* disply 576 */
@media (max-width:576px){
/* header */
header {
  position: relative !important;
  z-index: 1;
  height: 225px !important;
      }

header .container {  margin-top: -185px; position: relative; }

header .primary-navigation { margin-top:0px;}

div#n2-ss-2 .n2-font-478ebbea13aa6f2bcbd6a9547c74f54c-paragraph {
  font-size: 200% !important  ;
  font-weight: 300 !important;
}
div#n2-ss-2 .n2-font-546b928687dbf84bce64641b5e832609-paragraph{
  font-size: 350% !important  ;
  font-weight: 700 !important;
}
.menu-button-container #primary-mobile-menu .dropdown-icon.open .svg-icon {
position: relative;
top: 5px;
width: 50px;;
height: 50px;
left: 21px;
}

.menu-button-container #primary-mobile-menu .dropdown-icon.close .svg-icon {
position: relative;
top: 0px;
width: 50px;;
height: 50px;
right: 0px;
color:#fff;
}
	
.menu-item-98 a {
  background:  transparent;
  color: #fff !important;
  border-radius: 0;
  border: none;
  text-transform: uppercase;
  font-weight: bold;
  font-family: var(--primary-nav--font-family-mobile);
  font-size: var(--primary-nav--font-size-mobile);
  padding: var(--primary-nav--padding) 0 !important;
  margin-top: 0;
}
.primary-navigation > div > .menu-wrapper { margin-top:50px; }
.btn-connection{
  display: none;
}	
 /* section-2 */
 .sfere-yeune{
  display: none;
}
.sfere-blanche{
  display: none;
}
.img-logo-photo{
  display: none;
}
.dimention-div{
  height: 400px !important;
}
.section-2-btn{
  display: inherit;
}
.section-2-btn a{
  width: 100%;
}
/*3-partie*/
.img-logo-map {
  width: 120px;
  max-width: 100%;
}
.info-car {
  padding: 10px !important;
}

.slider-home::before { content:""; position:absolute; background:url('img/bg-bottom-slider.png') bottom center no-repeat ; height:154px; width:100%; top: -118px;; transform: rotate(182deg);  }
.slider-home::after {
  bottom: -20%;
 }
.site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
    left: 50%;
    transform: translateX(-50%);
  }
	
.row-section-2 .p-5, .cont-section { padding-left:20px !important; padding-right:20px !important; }
	
.cart-1 {
  border-radius:10px !important;
  margin: 10px;
  width: 95%;
  height: 100%; }

/* //footer */
.elipse_jaune {
    height: 200px !important;
    border-radius: 600% 600% 0 0 !important;
	  left :5% !important;
	  width:90% !important;
    
}

.bgfooter{

    border-radius: 500% 500% 0 0 !important;
    min-height: 267px !important;
	  width: 250% !important;
	  left: -75% !important;
}	
}