@charset "utf-8";


/* ////////////////////////////GENERAL////////////////////////////*/


.landing * {
  margin: 0;
  padding: 0;
  border :0;
  box-sizing: border-box;

}

.landing  a {
  text-decoration : none;
}

.landing  a:hover {
  text-decoration : none;
}

body {
  margin: 0;
  background-color: #000000;
}

.landing {
	max-width: 1210px;
	margin: 0 auto 0 auto;
  text-align:  center;
  font-family: 'Montserrat', sans-serif;
  position: relative;
  display: block;
	line-height: normal;
  background: url('images/gray-shapes.png') no-repeat top center;
}

.landing section {
	max-width: 1210px;
	margin: 0 auto;
	display: block;
	position: relative;
}

.landing section img {
 width: 100%;
 display: block;
}

.landing section.img-txt img:nth-child(2) {
	display: none;
}

.landing section.img-txt-video img:nth-child(2){
	display: block;
}

.landing section.img-txt-video img:nth-child(3){
	display: none;
}


/* ////////////////////////////PRODUITS//////////////////////////// */


.landing section.produits {
	max-width: 1210px;
	margin: 0 auto;
	padding: 0;
}

.landing section.produits a {
    width: 35%;
    display: inline-block;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    margin: 0px auto 40px auto;
}

.landing section.produits a:nth-child(1) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod7.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(2) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod6.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(3) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod5.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(4) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod1.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(5) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod2.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(6) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod3.jpg) center center no-repeat;
  background-size: 80%;
}
.landing section.produits a:nth-child(7) {
  background: url(https://media.ldlc.com/mkt/ldlc/fr/2025-01-08-nvidia-RTX50/prod4.jpg) center center no-repeat;
  background-size: 80%;
}


.landing section.produits a span {
  color: #ffffff;
  background-color: #76b900;
  padding: 10px 10px 10px 10px;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 0.8em;
  width: 90%;
  margin: 70% auto 0 auto;
}

.landing section.produits a:hover {
  background-size: 90%;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}


/* ////////////////////////////BLOCS AVEC VIDEO//////////////////////////// */

.landing section.video-01 a {
    position: absolute;
    width: 31%;
    height: 41%;
    bottom: 13%;
    left: 50%;
    margin-left: -15.6%;
}


.landing section.video-02 a {
    position: absolute;
    width: 31%;
    height: 41%;
    bottom: 6%;
    left: 50%;
    margin-left: -15.6%;
}

/* ////////////////////////////POP-IN//////////////////////////// */

.landing .modal .close::before{
  content:"X";
  position: relative;
  color: #ffffff;
  font-weight: 500;
  font-size: 30px;
  top: 3px;
  left: 1px;

}

.landing .modal .modal-dialog { 
  max-height: 50vh;
  overflow: hidden;
  margin: 0;
}

.landing .modal-content .close {
	position: absolute;
	right: 0;
	top: 0;
  background-color:  #76b900;
  height: 40px;
}

.landing iframe {
	width: 560px!important;
  height: 315px !important;
}

.landing .modal-dialog {
  width: 560px !important;
  height: 315px !important;
}

.landing .modal-body.padding {
  padding: 0 !important;
}

.landing .modal-dialog .sp-cell {
  width: 560px!important;
  height: 315px !important;
}

/* ////////////////////////////MENTIONS//////////////////////////// */

.landing section.mentions {
	max-width:1210px;
	margin: 0 auto;
	margin-top: 40px;
}

.landing section.mentions p {
	max-width: 100%;
	color: #b7b7b7;
	margin: 30px auto 30px auto;
	font-size: 10px !important;
}

.landing section.mentions p.code {
	display: block;
	background-color: #ff0000;
	max-width: 100%;
	padding: 25px 45px;
	text-transform: uppercase;
	font-weight: bolder;
	color: #ffffff;
	font-size: 20px !important;
	line-height: 30px;
}


/* ////////////////////////////RESPONSIVE//////////////////////////// */

@media screen and (max-width: 1210px) {

	.landing section.mentions {
		 padding: 0 45px 0 45px;
	}

}

@media screen and (max-width: 1024px) {

  .landing .modal:before {
    content: "";
    display: inline-block;
    height: 100%;
    margin-right: -4px;
    vertical-align: middle;
  }

 }

@media screen and (max-width: 640px) {

	.landing section.img-txt img:nth-child(1) {
		display: none !important;
	}

	.landing section.img-txt img:nth-child(2) {
		display: block !important;
	}

	.landing section.img-txt-video img:nth-child(2) {
		display: none !important;
	}

	.landing section.img-txt-video img:nth-child(3) {
		display: block !important;
	}

	.landing section.produits a {
		width: 60%;
	}

	.landing section.video-01 a {
	  position: absolute;
	  width: 47.5%;
	  height: 32%;
	  bottom: 9%;
	  left: 50%;
	  margin-left: -23.6%;
	}

	.landing section.video-02 a {
    position: absolute;
    width: 47%;
    height: 26%;
    bottom: 7%;
    left: 50%;
    margin-left: -23.6%;
	}

	.landing iframe {
	  width: 100% !important;
	  height: 315px !important;
	}

	.landing .modal-dialog {
	  width: 100% !important;
	  height: 315px !important;
	}

	.landing .modal-dialog .sp-cell {
	  width: 100% !important;
	  height: 315px !important;
	}

	.landing.modal .modal-content {
    display: table;
    width: 90%;
    margin: 0 auto;
	}

}



