@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* 
"dm-": desktop and mobile (stessa versione)
"om-": only mobile
"od-": only desktop
"ddm-": different versions between desktop e mobile
*/

:root {
  --backColorBody: #fff2e6;
  --backColorHeader: #2d2d2d;
  --color9b1818: #9B1818;
  --backColorFooter: #F0DCCA;
  --colorText: #2d2d2d;
  --colorBorder: #bfb1b1;
  --colorCursive: #9B1818;
  --backColorGrey: rgb(246, 246, 246);
  --backColorHardGrey: rgb(19, 36, 56);
}

/*#region GENERAL*/
body {
  background-color: var(--backColorBody);
  margin: 0;
  padding: 0;
  color: var(--colorText);
  font-weight: 400;
}

* {
  box-sizing: border-box;
}

a {
  color: var(--color9b1818);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

.noDesktop {
  display: none;
}

.cursorPointer {
  cursor: pointer;
}

.dm-borderRadius {
  border-radius: 10px;
}

/*#endregion*/

/*#region HEADER*/
.dm-header {
  margin: 0;
  width: 100%;
  min-height: 800px;
  background-color: #040205;
  display: flex;
  flex-wrap: wrap;
}

.ddm-headerLogoText {
  color: white;
  align-content: center;
  margin-left: 100px;
}

.ddm-headerLogo {
  padding-top: 400px;
}

.ddm-headerH1 {
  font-size: 80px;
  font-weight: 300;
}

/*#endregion*/

/*#region FLEX*/

.dm-flexContainer {
  display: flex;
  flex-wrap: wrap;
}

.dm-flexContainer-around {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.dm-flexContainer-between {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.dm-flexContainer-center {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.ddm-colonna1,
.ddm-colonna2 {
  max-width: 50%;
}

.ddm-colonna2 {
  font-size: 18px;
  line-height: 30px;
  padding-right: 10px;
  padding-left: 20px;
  padding-bottom: 30px;
  max-width: calc(100% - 500px); 
}

/*#endregion*/



/*#region FLOAT*/
.od-floatLeft {
  float: left;
}

/*#endregion*/

/*#region WIDTH*/
.dm-maxWidth-100 {
  max-width: 100%;
  height: auto;
}

.dm-width-100 {
  width: 100%;
}

.ddm-width-70 {
  width: 70%;
}

.ddm-width-50 {
  width: 49%;
}

.ddm-width-30 {
  width: 30%;
}

.ddm-width-20 {
  width: 20%;
}

/*#endregion*/

/*#region MARGIN*/
.dm-marginAuto {
  margin-left: auto;
  margin-right: auto;
}

.od-marginTop {
  margin-top: 30px;
}

/*#endregion*/

/*#region PADDING*/
.od-paddingLeft-40 {
  padding-left: 40px;
}

.dm-paddingTop-20 {
  padding-top: 20px;
}

/*#endregion*/

/*#region COLUMNS*/
.od-2columns {
  column-count: 2;
  column-gap: 60px;
  column-rule: solid 1px var(--colorBorder);

}

/*#endregion*/


/*#region GRID */

.dm-gridContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  padding-left: 20px;
  padding-right: 20px;
  column-gap: 20px;
  row-gap: 20px;
}


/*#endregion  */

/*#region BOX*/
.dm-boxText {
  padding: 25px;
  background-color: var(--backColorGrey);
  border: var(--colorBorder) 1px solid;
  border-radius: 10px;
  color: var(--colorText);
}

.dm-boxImg {
  padding: 15px;
  border: var(--colorBorder) 1px solid;
  border-radius: 10px;
}

.dm-boxEtichetta {
  position: relative;
  top: -45px;
  left: 0px;
  background-color: #c7c7c7;
  color: var(--colorText);
  padding: 10px;
  font-weight: 700;
  font-size: 12px;
  width: 300px;
}

.dm-quote {
  border-left: 2px solid #bfb1b1;
  padding-left: 30px;
}


/*#endregion*/

/*#region FONT & TEXT*/
.dm-textAlignCenter {
  text-align: center;
}

.od-textAlignRight {
  text-align: right;
}

.dm-fontSansSerif {
  font-family: 'Source Sans 3', sans-serif;
}

.dm-fontSerif {
  font-family: "Source Serif 4", serif;
}

.dm-fontItalic {
  font-style: italic;
}

.dm-font400 {
  font-weight: 400;
}

.dm-font300 {
  font-weight: 300;
}

.dm-fontRed {
  color: var(--color9b1818);
}



/*#endregion*/

/*#region FOOTER*/
.dm-footer {
  width: 100%;
  background-color: var(--backColorFooter);
  text-align: center;
  padding-top: 80px;
  padding-bottom: 80px;
  margin-top: 70px;
  border-top: 1px solid var(--colorBorder);
}

.dm-footerDiv {
  display: inline-block;
  padding-left: 5px;
}

.dm-socialIcons:hover {
  opacity: 0.4;
}

.dm-footerWidth {
  width: 40%;
  margin-left: auto;
  margin-right: auto;
}

/*#endregion*/

/*#region  VIDEO*/
.ps-videoYouTubeContainer {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.ps-videoYouTube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}

/*#endregion*/