@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  color: #fff;
  background-color: #030f21;
  background-image: url('../img/stars.png');
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size:1rem;
  scroll-behavior: smooth;
  
}
#top-header{
    width: 100%;
	position: fixed;
    height: 35px;
    background-color: #0a1f33;
    display: flex;
    justify-content: center;
	z-index:996;
}
#top-header-content{
    height: 100%;
    
    display: flex;
    justify-content: space-between;
}
#top-header-content .left{
    display: flex;
}
#top-header-content #email,
#top-header-content #link-menu-xs,
#top-header-content #social-network{
    display: flex;
    align-items: center;
}
#top-header-content #email,

#top-header-content #email a{
    color: #4188f1;
}
#top-header-content #address a:hover{
    text-decoration:none;
}
#top-header-content #address a i{
    color:#4188f1;
}
#top-header-content #social-network a{
    color:#4188f1;
    padding: 0 5px;
}
#top-header-content #social-network a:hover{
    text-decoration: none;
}
#top-header-content #social-network a[data-rs="instagram"]:hover{
    color:#cd07b8;
}
#top-header-content #social-network a[data-rs="facebook"]:hover{
    color:#3c5289;
}
.menu{
	position:fixed;
	top:35px;
	left:0;
	width:100vw;
	height:100px;
	display:flex;
	flex-direction:row;
	justify-content:center;
	background-color:transparent;
	z-index:997;
	transition: all .3s;
}
.menu_xs{
	position:fixed;
	top:35px;
	left:0;
	width:100vw;
	height:100vw;
	background-color:black;
	z-index:999;
	transition: all .3s;
	padding:10px 15px;
}
.menu_xs.open{display:block;}
.menu_xs:not(.open){display:none;}
.menu_xs ul{
	padding:10px 15px;
	list-style: none;
	font-size:1.5rem;
}
.menu .content{
	position:relative;
	width:100%;
	height:100%;
	display: flex;
	flex-direction:row;
	justify-content:flex-end;
	align-items: center;
}
.menu .content a:not(.logo_menu){
	display:inline-block;
	padding:10px 25px;
	color:#598bde;
	letter-spacing:2px;
	font-size:1.2rem;
	text-decoration:none;
	text-align:center;
	transition: all .3s;
}
.menu .content a:not(.logo_menu):hover{
	color:white;
}
.menu .content a.logo_menu{
	position:absolute;
	top:0;
	left:15px;
	width:100px;
	height:100px;
	background: url('../img/logo_menu.png') no-repeat left center;
	background-size: 70px 70px;
	background-position: center center;
	opacity:1;
	transition: all .3s;
}
.menu .content a.logo_menu:hover{
	transform: rotate(360deg);
}
.wrapper {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
  perspective: 300px;
  scroll-behavior: smooth;
}
.parallax__group {
  position: relative;
  height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
}
.parallax__group_2{
	position: relative;
	width: 100vw;
	transform-style: preserve-3d;
	overflow:hidden;
}
.parallax__group_3 {
  position: relative;
  min-height: 100vh;
  width: 100vw;
  transform-style: preserve-3d;
  overflow:hidden;
}
.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.overcloud-container{
	
}
.cloud3 {
  background: url('../img/cloud3.png') no-repeat center;
  background-size: cover;
  transform: translateZ(-250px) scale(1.833333333);
  z-index: 1;
}

.cloud2 {
  background: url('../img/cloud2.png') no-repeat center;
  background-size: cover;
  transform: translateZ(-60px) scale(1.200);
  z-index: 3;
}
.fusee {
  background: url('../img/fusee.png') no-repeat center;
  background-size: cover;
  transform: translateZ(-125px) translateY(+10%) scale(1.4167);
  
  z-index: 2;
}
.overcloud-container .logo {
  background: url('../img/logo.png') no-repeat center;
  background-size: cover;
  transform: translateY(-20%) scale(1);
  z-index: 4;
}
.title_sub_logo {
  transform: translateY(45%) scale(1);
  text-align:center;
  height:100vh;
  width:100vw;
  z-index: 4;
}
.title_sub_logo h1{
	display: flex;
	justify-content: center;
}
.title_sub_logo span:nth-child(1), .title_sub_logo span:nth-child(3){
	color:#62e3ff;
}
.title_sub_logo span:nth-child(2){
	color:#b9dfff;
	margin:0 10px 0 10px;
	
}
.cloud1 {
  background: url('../img/cloud1a_white.png') no-repeat center;
  background-size: cover;
  transform: translateZ(0) scale(1);
  z-index: 5;
}

.presentation-container {
  background: white;
  transform: translateZ(0) scale(1);
  z-index: 8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: left;
}
.presentation-container > div{width:75vw;padding-top:150px;}
.presentation-container h2{font-size:3rem;}
.presentation-container p{font-size:2rem;}
.presentation-container h2,
.presentation-container p {
  margin-bottom: 1rem;
  color:#144269;
}



.cloud1_part2 {
  background: url('../img/cloud1_part2.png') no-repeat center;
  background-size: cover;
  
  z-index: 5;
}
.cloud2_part2 {
  background: url('../img/cloud2_part2.png') no-repeat center;
  background-size: cover;
  
  z-index: 4;
}
.stars_part2{
	background: url('../img/stars_offerweb.png') no-repeat center top;
	background-size: cover;
	transform: translateZ(0) scale(1.300);
	z-index: 3;
}
.linearsky{
	background: linear-gradient(#030f21, 70%, #004e96);
	transform: translateZ(-60px) scale(1.200);
	z-index:2;
}
.offerweb_content{
	position:relative;
	padding:10px 15px 300px;
	padding-top:300px;
	display:flex;
	justify-content:center;
	flex-direction:column;
	margin:auto;
	z-index: 998;
}
.offerweb_content > h2, .addonweb_content > h2{
	color:#d5e6ff;
	text-align:left;
	font-weight:500;
	letter-spacing:3px;
	margin:50px 0 30px 0;
	padding:10px 15px;
}
.offerweb_content > div, .addonweb_content > div{
	display:flex;
	flex-direction:column;
	justify-content:center;
    flex-wrap: wrap;
}
.offerweb_content > div > div{
	border-radius:5px;
	background-color:#030f21;
	padding:10px 15px 40px 30px;
	/*width:30%;*/
	margin:20px 10px;
	margin-bottom:20px;
	position:relative;
}
.offerweb_content > div > div > h3{
	margin-bottom:10px;
	color:#eac600;
	font-weight:600;
	letter-spacing:1px;
}
.offerweb-price{
	color:white;
	font-size:1rem;
	font-weight:500;
	margin-bottom:10px;
}
.offerweb-price span{
	font-size:2rem;
}
.offerweb-description{
	color:#bdcde5;
	font-size:1rem;
}
.offerweb_content > div > div > h4{
	margin:20px 10px;
	color:#4dafff;
	font-weight:600;
	letter-spacing:1px;
}
.offerweb_content > div > div > ul > li{
	margin: 20px;
}
.offerweb-list{
	margin-top:50px;
}
.offerweb-list .fa-ul{

}
.offerweb-list .fa-li{
	color:#24ff24;
	margin-right:5px;
}
.offerweb-list ul{
	line-height: 35px;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 1px;
}
.offerweb_content a{
	position:absolute;
	bottom:-20px;
	left:50%;
	margin-left:-100px;
	width:200px;
	height:40px;
	padding:10px 15px;
	border-radius:5px;
	background-color:#007e95;
	text-align:center;
	font-weight:450;
	cursor:pointer;
	color:white;
	text-decoration:none;
}
.offerweb_content a:hover{
	background-color:#006476;
	color:white;
	text-decoration:none;
}
.addonweb_content{
	position:relative;
	display:flex;
	justify-content:center;
	flex-direction:column;
	margin:auto;
	z-index: 998;
	padding-bottom:400px;
}
.addonweb_content > div{
	position:relative;
	display:flex;
	flex-direction:row;
	flex-wrap: wrap;
}
.addon-web{
	border-radius:5px;
	background-color:#030f21;
	height:400px;
	margin:10px;
	position:relative;
	overflow:hidden;
	width:330px;
	text-decoration:none;
}
.addon-web:hover{
	text-decoration:none;
	cursor:pointer;
}
.addon-web > div:nth-child(1){
	height:200px;
	transition: all .3s;
}
.addon-web a{
	display:flex;
	justify-content:center;
	align-items:middle;
	height:0;
	width:100%;
	padding:10px 15px;
	text-decoration:none;
	background-color:#eac600;
	color:#030f21;
	font-size:1.5rem;
	font-weight:bold;
	font-style:italic;
	transition: all .3s;
}
.addon-web:hover > a{height:auto;}
.addon-web a:hover{padding-right:0;}
.addon-web:hover > div:nth-child(1){
	height:150px;
	
}

.addon-web[data-addonweb="maintenance"] > div:nth-child(1){
	background:url("../img/maintenance.png") no-repeat center center;
	background-size:cover;
}
.addon-web[data-addonweb="refonte"] > div:nth-child(1){
	background:url("../img/update_graphic.jpg") no-repeat center center;
	background-size:cover;
}
.addon-web[data-addonweb="options"] > div:nth-child(1){
	background:url("../img/add_option.jpg") no-repeat center center;
	background-size:cover;
}
.addon-web[data-addonweb="update_content"] > div:nth-child(1){
	background:url("../img/update_content.jpg") no-repeat center center;
	background-size:cover;
}
.addon-web[data-addonweb="social_network"] > div:nth-child(1){
	background:url("../img/social_network.jpg") no-repeat center center;
	background-size:cover;
}
.addon-web[data-addonweb="account_mail"] > div:nth-child(1){
	background:url("../img/account_mail.jpg") no-repeat center center;
	background-size:cover;
}
.addon-web div:nth-child(2){
	padding:10px 15px;
	position:relative;
	height:200px;
}
.addon-web div:nth-child(2) > h3{
	color:#62e3ff;
	letter-spacing:1px;
	font-weight:400;
	margin-top:10px;
	margin-bottom:10px;
	font-size:1.1rem;
}
.addon-web .description, .addon-web .price{
	color:#bdcde5;
	text-align:left;
}
.addon-web .price{
	position:absolute;
	bottom:10px;
	left:15px;
	color:#eac600;
	font-size:1.1rem;
	font-weight:500;
}
.addon-web .price span{
	font-size:1.6rem;
	font-weight:bold;
}
.cloud_white_bottom{
	position:absolute;
	bottom:-100px;
	left:0;
	height:400px;
	width:100vw;
	background: url("../img/cloud_info_top.png") center bottom no-repeat;
	background-size: cover;
	z-index:10;
}
.infographics{
	position:relative;
	background-color:white;
	transform-style: preserve-3d;
	display:flex;
	flex-direction:row;
	justify-content:center;
	z-index:10;
}
.infographics div{
	position:relative;
}

.digital_art{
	position:relative;
	background-color:white;
	transform-style: preserve-3d;
	z-index:10;
	color: #22406f;
	min-height: 100vh;
	width: 100v;
	/*position:relative;
	background-color:white;
	
	display:flex;
	flex-direction:row;
	justify-content:center;
	z-index:9;*/
}
.cloud_white_top{
	position:absolute;
	bottom:-180px;
	left:0;
	height:400px;
	width:100vw;
	background: url("../img/cloud_info_bottom.png") center bottom no-repeat;
	background-size: cover;
	z-index:10;
}
.digital_art .digital_art_container{
	position:relative;
	padding-bottom: 100px;
	z-index: 11;
}
.digital_art .digital_art_container h2{
	font-size:3rem;
	text-align:left;
	font-weight:500;
	letter-spacing:3px;
	padding:10px 15px;
	margin: 0;
}
.digital_art .digital_art_container .presentation p,
.digital_art .digital_art_container .presentation2 p{
	font-size:1.4rem;
	margin-top:10px;
	padding:10px 15px;
}
.digital_art .digital_art_container .category{
	display: flex;
  	justify-content: space-evenly;
	flex-wrap: wrap;
	margin: 50px 20px;
}
.digital_art .digital_art_container .category > div{
	border-radius: 5px;
	box-shadow: 5px 5px 12px #7d7272;
	padding: 15px 30px;
	text-align: center;
}
.digital_art .digital_art_container .category > div >img{
	width: 100%;
}
.digital_art .digital_art_container .category > div > h3{

}
/*.digital_art .digital_art_container .presentation2{
	margin: 50px auto;
}*/
.srlp_anime{
	overflow:hidden;
	background-color: #eca241;
}
.background {
  background: url('../img/srlp_background_2.jpg') no-repeat center;
  background-size: cover;
  transform: translateZ(-250px) translateY(250px) scale(1.833333333);
  z-index: 2;
}
.pic {
  background: url('../img/srlp_pic4.png') no-repeat center;
  background-size: cover;
  transform: translateZ(-125px) translateX(425px) scale(1.4167);
  z-index: 8;
}
.home {
  background: url('../img/srlp_home.png') no-repeat center;
  background-size: cover;
  transform: translateZ(-60px) scale(1.200);
  z-index: 4;
}
.canal {
  background: url('../img/srlp_canal.png') no-repeat center;
  background-size: cover;
  transform: translateZ(0) scale(1);
  z-index: 5;
}
.sky{
	background-color:#004c94;
	transform: translateZ(-250px) scale(2);
	z-index:1;
}

.form-contact{
	display:flex;
	justify-content: flex-start;
	align-items:center;
	z-index:10;
}
#block-form-contact{
	padding: 20px 30px;
	background-color: rgba(11, 38, 61, 0.6);
	border-radius: 10px 0;
}
#block-form-contact input[type="text"]{padding:20px 15px;}
#block-form-contact input[type="text"], #block-form-contact textarea,
#block-form-contact input[type="email"]{
	background-color:#021627;
	border: solid #021627 1px;
	border-radius: 30px;
	color:#2b8cdf;
	font-weight:400;	
}
#block-form-contact button.btn-form-contact{
	background-color:#021627;
	border: solid #021627 1px;
	border-radius: 30px;
	color:#eac600;
	font-weight:400;
	padding: 5px 10px;
	transition: ease-in-out 0.3s;
	margin-top: 20px;
}
#block-form-contact button.btn-form-contact:hover, #block-form-contact button.btn-form-contact.loading{
	background-color:#eac600;
	border: solid #eac600 1px;
	color:black;
	transition: none;
}
#block-form-contact button.btn-form-contact.success{
	background-color:#22a800;
	border: solid #22a800 1px;
	color:white;
	transition: none;
}
#block-form-contact button.btn-form-contact.error{
	background-color:#c82100;
	border: solid #c82100 1px;
	color:white;
	transition: none;
}
#block-form-contact textarea{width:100%;padding:10px 15px;}
#block-form-contact label{
	color:#eac600;
	font-weight:400;
	letter-spacing:1px;
}
.footer{
	position: absolute;
	bottom: 0;
	left: 0;
	height: auto;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 15px 0;
	align-items: center;
	background-color: rgb(2, 10, 31);
	color: #9acbff;
	z-index: 11;
	font-size: 14px;
}
.footer div{margin: 0 15px}
.footer a{
	color: #2c6aa1;
}
.footer a:hover{
	color: #103c63;
	text-decoration: none;
}
@media screen and (min-width: 200px) and (max-width: 760px) {
	.offerweb_content > h2, .addonweb_content > h2{font-size:3rem;}
	.cloud1_part2{transform: translateZ(0) translateY(-20%) scale(1);}
	.cloud2_part2{transform: translateZ(-60px) translateY(-18%) scale(1.200);}
	.infographics div{width:100vw;}
	.infographics .logo .image, .infographics .visit_card .image{height:350px;}
	.presentation-container p{font-size:1.4rem;}
	.title_sub_logo span:nth-child(1), .title_sub_logo span:nth-child(3){
		font-size:2rem;
		letter-spacing:2px;
	}
	.title_sub_logo span:nth-child(2){
		font-size:2.5rem;
	}
	.title_sub_logo h1{
		display: flex;
		justify-content: center;
		flex-direction: column;
	}
	#top-header-content{width: 100%; padding:0 3px;font-size:10px;}
	.digital_art .digital_art_container .category > div{margin-bottom:20px;width: 90%;}
	#block-form-contact{width:90vw;margin:auto;font-size: 0.7rem;}
	.pic{transform: translateZ(-125px) translateX(0px) scale(1.4167);}
	.menu .content a:not(.logo_menu){padding:10px 15px;}
	.gallery .gallery-column {width: 50%;}
	#block-srlp-anim{min-height: 140vh;}
	.footer{flex-direction: column;}
	.footer div{margin: 15px 0;}
}
@media (min-width: 760px) {
	#top-header-content{width: 760px;}
	.offerweb_content, .addonweb_content{width:100vw;}
	.offerweb_content > div, .addonweb_content > div{width:100%;}
	.offerweb_content > h2, .addonweb_content > h2{font-size:3.5rem;}
	.cloud1_part2{transform: translateZ(0) translateY(-20%) scale(1);}
	.cloud2_part2{transform: translateZ(-60px) translateY(-18%) scale(1.200);}
	.infographics div{width:75vw;}
	.infographics .logo .image, .infographics .visit_card .image{height:350px;}
	.gallery{padding: 0px 20px;}
	#block-form-contact{width:50vw;margin:auto;}
	.pic{
		transform: translateZ(-125px) translateX(0px) scale(1.4167);
	}
	.menu .content a:not(.logo_menu){
		padding:10px 25px;
	}
	.gallery .gallery-column {
		width: 25%;
	}
	#block-srlp-anim{min-height: 130vh;}
	.digital_art .digital_art_container .category > div{margin:10px;width: 49%;}
}

@media (min-width: 1126px) {
	#top-header-content{width: 960px;}
	.offerweb_content, .addonweb_content{width:1152px;}
	.offerweb_content > div, .addonweb_content > div{width:100%;}
	.offerweb_content > h2, .addonweb_content > h2{font-size:4rem;}
	.cloud1_part2{transform: translateZ(0) translateY(-15%) scale(1);}
	.cloud2_part2{transform: translateZ(-60px) translateY(-15%) scale(1.200);}
	.infographics div{width:1152px;}
	.infographics .logo .image, .infographics .visit_card .image{height:350px;}
	.digital_art .digital_art_container .presentation,
	.digital_art .digital_art_container .presentation2{width:1152px;margin:auto;}
	.digital_art .digital_art_container .presentation2{margin: 150px auto 50px auto;}
	.digital_art .digital_art_container .category{
		/*width: 75%;*/
	}
	.digital_art .digital_art_container .category > div{
		width: 20%;
	}
	#block-form-contact{width:35vw;margin-left:100px;}
	.presentation-container p{font-size:2rem;}
	.title_sub_logo h1{
		display: flex;
		justify-content: center;
	}
	
	.title_sub_logo span:nth-child(1), .title_sub_logo span:nth-child(3){
		font-size:3rem;
		letter-spacing:2px;
	}
	.title_sub_logo span:nth-child(2){
		font-size:3.5rem;
		
	}
	.gallery{padding: 0px 75px;}
	
}
/*/ GALERIE */
.gallery {
	display: flex;
	transition: .3s;
	flex-wrap: wrap;
}
.gallery:hover .gallery-image{
		filter: grayscale(1);
}
	
.gallery .gallery-column {
		display: flex;
		flex-direction: column;
	}
	
.gallery .gallery-link {
		margin: 2px;
		overflow: hidden;
}
.gallery .gallery-link:hover .gallery-image {
    filter: grayscale(0);
}
.gallery .gallery-link:hover .gallery-caption{
    opacity: 1;
}

	
.gallery .gallery-thumb {
		position: relative;
	}
	
.gallery .gallery-image {
		display: block;
		width: 100%;
		transition: .3s;
}		
.gallery .gallery-image:hover {
			transform: scale(1.1);
}
	
.gallery .gallery-caption {
		position: absolute;
		bottom: 0;
		left: 0;
		padding: 25px 15px 15px;
		width: 100%;
		font-family: 'Raleway', sans-serif;
		font-size: 16px;
		color: white;
		opacity: 0;
		background: linear-gradient(0deg, rgba(0, 0, 0, .5) 0%, rgba(255, 255 ,255 , 0) 100%);
		transition: .3s;
}
#modal_compareimage .modal-dialog{
	border-radius: 10px;
	overflow:hidden;
	margin:auto;
}
.modal-open #modal_compareimage{
	display:flex;
	align-items:center;
}
.modal-backdrop.in{
	opacity: 0.8;
}
.g-recaptcha > div:first-child{
	border-radius: 10px 0 0 10px;
	overflow: hidden;
}