// vim: set syntax=css:
// vim: set foldmethod=marker:

@imgUrl: '/site/dc_webprofessional_it/skins/501/skin_files/images/';
@mainColor: #4255a2;
@mainColorHover: #4255a2bd;
@bodyColor:#5B5B5B;
@bodyBackground:#fefefe;
@titlesColor:#4255a2;
@topLinkBg:#ff4f00;
@orangeColor:@topLinkBg;
@blueColor:#4255a2;

.transparency(@opacity:50) {
  zoom: 1;
  filter: alpha(opacity=@opacity);
  opacity: @opacity/100;
  -moz-opacity: @opacity/100;
}

html{
overflow-x: hidden; 
}

body{
	color:@bodyColor;
	font-family:Poppins;
	font-size:18px;
	overflow-x: hidden; 
	background-color:@bodyBackground;
}

.centerContent{
	font-size:18px;
	padding:0!important;
}

.standardContent{
background-color:transparent!important;
padding:20px 0;
}

.centerObj{
margin:0 auto;
}

.homeHand{
margin-right:100px;
text-align:center;
}

.homeCasiStudioH2{
margin-top:300px;
}


/*{{{ TOP MENU MOBILE*/
#mobileMenuContainer{
position: relative; /* Ensure child elements like .myContent remain positioned relative to this div */
  width: 100vw;       /* Make the background span the full width of the viewport */
  left: 50%;          /* Position relative to the container */
  transform: translateX(-50%); /* Center-align the div horizontally to negate its relative offset */
  padding: 0px 10px 0 10px;    /* Optional: Add padding to the background area */
}
#mobileMenuContainer h3{visibility:hidden;}

ul.slimmenu li {
background-color:#F0F0F8;
}
ul.slimmenu > li > ul > li {
background-color:#ccc; 
}

ul.slimmenu > li > ul > li > ul > li{
background-color:#bbb;
}

.sideMenu ul li a.active, .sideMenu ul li a:hover{
color:#E62113;
}

ul.slimmenu li a, ul.slimmenu li ul li a {
color:#mainColor;
}

ul.slimmenu  span.sub-collapser i {
color:#fff;
}

ul.slimmenu li a:hover,ul.slimmenu > li.active > a {
color:#fff;
background-color: #abaaaa;
}

div.menu-collapser{
background-color:#E53517;
top:40px!important;
}

div.collapse-button {
background-color: #520e0d !important;
right:16px!important;
}

/*}}}*/

/*{{{ TOP MENU */
#myslidemenu{
position:absolute;
top:20px;
right:0;
}
#myslidemenu > ul {font-size:18px;}
#myslidemenu > ul a, #myslidemenu > ul a:hover, #myslidemenu > ul a:focus{color: #5B5B5B;}
#myslidemenu > ul > li > a span {color: #5B5B5B;}
#myslidemenu > ul > li:hover {}
#myslidemenu > ul > li.inPath a > b {color:#5B5B5B;}
#myslidemenu > ul > li:hover a > b {color:#000;;}
#myslidemenu > ul > li.inPath > a span  {color:#5B5B5B;}
/*
#myslidemenu > ul > li.inPath {background-color: @topLinkBg;}
#myslidemenu > ul > li.inPath:hover > a span  {border-bottom:4px solid #fff;}
#myslidemenu > ul > li:hover > a span {border-bottom:4px solid #000;}
*/

/*}}}*/

/*{{{ HEADER */

.bgContent {
background-color:@bodyBackground;
}

.bgHeader{
background-color:@bodyBackground;
padding:0;
/* remove the statement below to make header relative instead of fixed */
/*position:fixed;width:100%;margin-top:-95px;z-index:50;*/
}

#siteHeader{
position:relative;
}

.mobileTopLinksContainer{
top:-63px;
}

#menuMobile{
positio:absolute;
width:100;
top:-85px;
}
#menuMobile #navigation {
position:relative;
top:76px;
}

#mobileLogo{
	width:84px;
}

#logo h1, #mobileLogo h1{
display:inline-block;
padding:10px;
margin:0;
}

#logo a {
	display:inline-block;
	height: 64px;
  width: 64px;
	background:transparent url("@{imgUrl}logo.png") no-repeat top left;
	background-size: contain;
}


/*}}}*/

.centerContent h2 {
color:#000;
font-size:35px;
text-align:center;
margin:10px 0;
}

.centerContent h3 {
color:#000;
font-size:26px;
margin:10px 0;
}

div#ebookListContainer{
	padding:20px;
	background-color:#f4f4f4;
	border:1px solid #eaeaea;
}

h3.blueBold{
color:@mainColor;
font-size:36px;
font-weight:bold;
text-align:center;
}
h3.blueBoldLeft{
color:@mainColor;
font-size:36px;
font-weight:bold;
text-align:left;
}

h3.blueNormal{
color:@mainColor;
font-size:36px;
font-weight:normal;
text-align:center;
}

h4.orange{
color:@orangeColor;
font-size:26px;
margin:10px 0;
}

.bgBreadCrumb{
	background-color:@bodyBackground;
	padding: 13px;
}

.topBreadCrumb{
margin-top:40px;
font-size:16px;
color:#858786;
}

.wpContent{
padding-top:16px;
padding-left:0;
}

.wpContent.notExpand{
padding-left:238px;
}

.topBreadCrumb span, .topBreadCrumb a, .topBreadCrumb a:hover, .topBreadCrumb a:focus{
color:#858786;
}


.pageTitleContainer{
	line-height:60px;
	font-size:18px;
	color:@mainColor;
	padding: 40px 40px 40px 45px;
	overflow:hidden;
}

.pageTitleContainer p{
margin:16px 0 0 0;
line-height:18px;
}

.topContainer{
width:100%;
display: flex;
align-items:flex-start;
justify-content:space-between;
}

.contactsContent{
width:40%;
height:100%;
border-radius: 0px 0px 0px 80px;
padding:60px;
background-color:#d6d6d6;
z-index:3;
}

.contactsContent input[type="text"], .contactsContent textarea{
	border-color:#d6d6d6!important;
	border-radius:0 0 0 10px!important;
}
.contactsContent input[type="submit"]{
	background-color:#bcbcbc;
	border-color:#d6d6d6!important;
	border-radius:0 0 0 10px!important;
	font-family:MyriadProSemibold;
	font-size:18px;
	text-transform:uppercase;
}	

.contactsContent label{
	float:left!important;
	padding:0!important;
	color:@mainColor!important;
	text-align:left!important;
	font-family:MyriadProSemibold;
	font-size:14px;
}

b.blue{
	color:@mainColor!important;
}


.contactsContent label a {
	display:inline!important;
	text-decoration:underline;
	font-family:OpenSansBold;
	font-size:16px;
}

#sfContent div {
position:absolute;
width:100%;
height:518px;
background-color:@mainColor;
}

.mainButton{
  margin-top:30px;
  font-size:16px;
  font-weight:bold;
  display:inline-block;
  padding: 12px 20px;
  border-radius: 50px;
  background: #4255A2;
  color: #FFFFFF;
}

.smallButton{
  font-size:12px;
  font-weight:bold;
  display:inline-block;
  padding: 8px 16px;
  border-radius: 50px;
  background: #4255A2;
  color: #FFFFFF;
}

.ebookButton{
  font-size:12px;
  font-weight:bold;
  display:block;
  padding: 4px 16px;
  border-radius: 50px;
  background: #4255A2;
  color: #FFFFFF;
}

ul.point{
list-style-position: outside;
}
ul.point li{
	margin: 20px 0;
  padding: 0;
	text-align:left;
}

/*{{{ HOME CONTENT */

#bgEvidenza{
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
word-break: break-word;
color:#fff;
}

.videoContainer{
	margin:20px 0;
}

#bgEvidenza > div > div > div {
	text-align:center;
}

#bgEvidenza h3.titolo{
	font-weight:bold;
	font-size: 40px;
}

#bgEvidenza div.sottoTitolo{
	font-weight:bold;
	font-size: 22px;
}

#bgEvidenza a{
	.mainButton();
}



.flexCenterContainer{
 display:flex;
 justify-content:center;
 align-items:center;
}

.standardButton{
text-align:center;
margin-top:10px;
display:inline-block;
background-color:@blueColor;
font-size:14px;
color:#fff;
padding:8px;
text-decoration:none;
}

.slick-next {
	right:20px;
	top:130px!important;
	z-index:3;
}

.slick-prev {
	left:20px;
	top:130px!important;
	z-index:3;
}

.slick-next::before {
    content: '>';
		color:#444;
		background-color:transparent;
}

.slick-prev::before {
    content: '<';
		color:#444;
		background-color:transparent;
}

/*}}}*/

/*{{{ BLOCK A */

.bgABlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:40px 0;
}

.blockAContainer h4 {
font-size:26px;
font-weight:bold;
color:@titlesColor;
} 

.blockAContainer h3 {
font-size:46px;
font-weight:bold;
color:@titlesColor;
}

.blockAContainer .blockLinkContainer a{
	.mainButton();
}

.blockAContainer {
text-align: center;
}

/*}}}*/

/*{{{ BLOCK E */

.bgEBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:0;
margin-top:20px;
background-color:@titlesColor;
}

.blockEContainer h3 {
font-weight:bold;
font-size:36px;
font-weight:normal;
text-align:center;
color:#fff;
margin:0;
padding:0;
}

.blockEContainer .blockLinkContainer a{
	.mainButton();
}

.blockEContainer {
text-align: center;
}

/*}}}*/

/*{{{ BLOCK B */

.bgBBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:40px 0;
}

.blockBContainer{
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
}

.blockBontent{
font-size: 18px;
height:80px;
}

.blockBContainer .mainBBlockContent{
	width:50%;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.blockBContainer .mainBBlockContent > div {
	width:80%;
}

.blockBContainer  .blockImgContainer{
	width:50%;
	padding-left:7%;
}

.blockBContainer hr{
margin:0px;
background:transparent url("@{imgUrl}sf-serviceHr.png") no-repeat center center;
height:1px;
}

.blockBContainer h3 {
font-weight:bold;
font-size:46px;
font-weight:bold;
color:@titlesColor;
}

.blockBContainer .blockLinkContainer a{
	.mainButton();
}

.blockBContainer  .blockImgContainer img {
width:100%;
}
/*}}}*/

/*{{{ BLOCK C */

.bgCBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:40px 0;
}

.blockCContainer{
display:flex;
flex-wrap: wrap;
justify-content:flex-start;
}

.blockContent{
font-size: 18px;
}

.blockCContainer .mainCBlockContent{
	width:50%;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
.blockCContainer .mainCBlockContent > div {
	width:90%;
}

.blockCContainer  .blockImgContainer{
	width:50%;
	padding-right:10%;
}

.blockCContainer hr{
margin:0px;
background:transparent url("@{imgUrl}sf-serviceHr.png") no-repeat center center;
height:1px;
}

.blockCContainer h3 {
font-weight:bold;
font-size:46px;
font-weight:bold;
color:@titlesColor;
}

.blockCContainer .blockLinkContainer a{
	.mainButton();
}

.blockCContainer  .blockImgContainer img {
width:100%;
}
/*}}}*/

/*{{{ BLOCK D */

.bgDBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:40px 0;
}

.blockDContent{
display:flex;
justify-content:flex-start;
row-gap:50px;
column-gap:20px;
}
.blockDContent .productContainer{
	width:388px;
	border-radius:50px;
	background-color:#fff;
	overflow:hidden;
	position:relative;
	height:280px;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px 0px;
	border:0px;
}
.acquisti .blockDContent {
justify-content:flex-start;
flex-wrap:wrap;
row-gap:50px;
column-gap:20px;
}

.acquisti .blockDContent .productContainer{
width:300px;
flex-shrink:0;
}

.blockDContent .productContainer >div{
	padding:20px;
}
.blockDContent .productContainer h4{
font-size:24px;
color:@titlesColor;
}
.blockDContent .productContainer img{
	display: inline-block;
}

.blockDContainer h3 {
text-align:center;
font-weight:bold;
font-size:46px;
font-weight:bold;
color:@titlesColor;
}

.blockDContent .productContainer a{
	position:absolute;
	right:20px;
	bottom:20px;
	.smallButton();
}

/*}}}*/

/*{{{ BLOCK F */

.bgFBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:40px 0;
}

.blockFContent{
display:flex;
justify-content:space-between;
	padding-top:40px;
}

.blockFContent .itemContainer{
	width:30%;
	border-radius:50px;
	background-color:#fff;
	overflow:hidden;
	position:relative;
	box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px 0px;
	border:0px;
	padding:40px 20px;
}
.blockFContent .itemContainer .blockContent{
	padding-top:20px;
}

.blockDContent .itemContainer >div{
	padding:20px;
}
.blockFContent .itemContainer h4{
font-size:26px;
color:#000;
}
.blockFContent .itemContainer h5{
font-size:18px;
color:#5B5B5B;
font-weight:normal;
}

.blockFContainer h3 {
text-align:center;
font-weight:bold;
font-size:46px;
font-weight:bold;
color:@titlesColor;
}

/*}}}*/

/*{{{ BLOCK H */

.bgHBlock{
overflow:visible;
width:100vw;
position:relative;
left:50%;
transform: translateX(-50%);
text-align:center;
padding:0;
}

.blockHContainer h4 {
font-size:26px;
font-weight:bold;
color:inherit;
} 

.blockHContainer h3 {
font-size:46px;
font-weight:bold;
color:inherit;
}

.blockHContainer .blockLinkContainer a{
	.mainButton();
	color:inherit;
}

.blockHContainer {
text-align: center;
}

/*}}}*/

/*{{{ FOOTER */

.bgFooter{
background-color:@bodyBackground;
padding-bottom:40px;
}

.bgFooter h3{
font-weight:bold;
font-size:26px;
font-weight:bold;
color:@titlesColor;
}

.bgFooter ul {
	list-style: none;
	margin:24px 0 0 0;
	padding:0;
}

.bgFooter ul a, .bgFooter ul a:hover, .bgFooter ul a:focus {
color:@bodyColor;

}

/*}}}*/

/*
You can use 2 media queries types:
width --> css width (use properties like min-width and max-width)
device-width --> device width (use properties like min-device-width and max-device-width)
*/


@media (min-width: 1406px) {/*{{{*/

.container {
 width: 1206px;
}

}/*}}}*/

@media (max-width: 1340px) {/*{{{*/

}/*}}}*/

@media (max-width: 1280px) {/*{{{*/

ul.slimmenu {
border:0;
border-bottom-width:2px;
}
ul.slimmenu, ul.slimmenu ul{
background-color:@bodyBackground;
}
ul.slimmenu li {
background-color:@bodyBackground;
}

ul.slimmenu > li:first-child {
 border-left: 1px solid grey;
}

.homeCasiStudioH2{
margin-top:100px!important;
}

div.collapse-button{
background-color: @bodyBackground !important;
border: none;
top: 0px!important;
}
ul.slimmenu li a{
font-size:18px!important;
font-family:Poppins!important;
}
.collapse-button .icon-bar {
  background-color: #5b5b5b;
  border-radius: 1px 1px 1px 1px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
  display: block;
  height: 2px;
  width: 20px;
  margin: 4px 0;
}

ul.slimmenu li .sub-collapser {
  background-color:@mainColor !important;
}
ul.slimmenu li a:hover{
	  background-color: #eaeaea!important;
		color:@mainColor!important;
}
ul.slimmenu > li.active > a {
	  background-color: #eaeaea!important;
		color:@mainColor!important;
}

ul.slimmenu li > b {
color: #fff;
font-family: "Open Sans",sans-serif;
font-size: 16px;
font-weight: 400;
border-bottom: 1px solid rgba(0, 0, 0, 0.075);
background-color: #2c2c2c;
background-image: -moz-linear-gradient(center top , #333333, #222222);
background-repeat: repeat-x;
}

.blockFContent {
	flex-wrap: wrap;
}

.blockFContent .itemContainer {
	min-width:48%;
	align-content:space-between;
	margin-bottom:36px;
}

.centerContent{
font-size:16px;
}

}/*}}}*/

@media (max-width: 1200px) {/*{{{*/

}/*}}}*/

@media (max-width: 1199px) {/*{{{*/
.blockDContent{
	flex-wrap:wrap;
}
.blockDContent .productContainer{
  width:46%;
	margin-bottom:40px;
}


}/*}}}*/

@media (max-width: 991px) {/*{{{*/

	body{
	font-size:16px;
}

.blockFContent {
	display:block;
}

.blockFContent .itemContainer {
	width:100%;
	margin-bottom:20px;
}

.blockBContainer h3, .blockCContainer h3, .blockDContainer h3, .blockEContainer h3, .blockFContainer h3{
	font-size:30px;
}
.blockBContainer .blockContent, .blockCContainer .blockContent, .blockDContainer .blockContent, .blockEContainer .blockContent, .blockFContainer .blockContent{
	font-size:16px;
}
.blockDContent .productContainer h4{
	font-size:20px;
}

.blockFContent .itemContainer h4{
	font-size:20px;
}

.bgFooter ul{
	margin:0px;
}
.bgFooter h3 {
	font-size:22px;
}
#logoFooter{
	padding-top:20px;
}

.centerContent h2{
margin:160px 0 40px 0;
}

}/*}}}*/

@media (max-width: 810px) {/*{{{*/

}/*}}}*/

@media (max-width: 768px) {/*{{{*/

.bgFooter,.bgABlock,.bgBBlock,.bgCBlock,.bgDBlock{
	padding-left:2%;
	padding-right:2%;
}

.centerContent h2{
margin: 110px 0 40px 0!important;
}

.bgFooter{
min-height:auto;
}
}/*}}}*/

@media (max-width: 640px) {/*{{{*/
}/*}}}*/

@media (max-width: 610px) {/*{{{*/
	.blockCContainer{
		display:block;
	}

	.blockBContainer {
		display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
	}

	.blockBContainer .blockImgContainer{
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    box-ordinal-group: 1;
	}

	.blockBContainer .mainBBlockContent{
	  -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    box-ordinal-group: 2;
	}

	.blockCContainer .blockImgContainer, .blockBContainer .blockImgContainer{
		width:100%;
	}
	.blockCContainer .mainCBlockContent, .blockBContainer .mainBBlockContent{
		width:100%;
	}
}/*}}}*/

@media (max-width: 550px) {/*{{{*/
.blockDContainer h3 {
	font-size:36px;
}
	.blockDContent{
  display:block;
	}
	.blockDContent .productContainer{
  width:100%;
  margin-bottom:40px;
}
}/*}}}*/

@media (max-width: 510px) {/*{{{*/

}/*}}}*/

@media (max-width: 350px){/*{{{*/
/* stop jumping steps, so below the max 1600px fixed with (statement below), containers will be fluid to 100% width */
.container {
width: 100%;
}

}/*}}}*/

@media (max-width: 320px) {/*{{{*/
}/*}}}*/

@media (max-width: 310px) {/*{{{*/
}/*}}}*/