/*@font-face {
  font-family: 'SerifRegular';
  src: url('/assets/font/UntitledSerifWeb-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'SansRegular';
  src: url('/assets/font/UntitledSansWeb-Regular.woff2') format('woff2');
}
*/


  @font-face {
    font-family: 'NucleBook';
    src:  url('/assets/font/Nuckle-Book.woff') format('woff')
    }

    H1{  
    font-family: 'NucleBook';
    }

    .masonry {
    padding: 0px 60px 0px 60px;
    }
    .rpd {
    margin-right: 50px;
    }

    .image {
    position:relative;


    }
    .image img {
    width:100%;
    vertical-align:top;
    }
    .image:after, .image:before {
    position:absolute;
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    }
    .image:after {
    content:'\A';
    width:100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    }
    .image:before {
    content: attr(data-content);
    width:100%;
    color:#fff;
    z-index:1;
    padding:30px 30px;
    top: 50%;
    font-size: 30px;
    font-family: 'NucleBook';
    transform: translateY(-50%);
    text-align:center;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    vertical-align: middle;
    }
    .image:hover:after, .image:hover:before {
    opacity:1;
    }

    .scale {
    overflow: hidden;
    }

    .scale img {
    max-width: 100%;
    transition: all 0.5s;
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    }

    .scale:hover img {
    transform: scale(1.1);
    }



.container, .container-fluid, .container-xxl, .container-xl, .container-lg, .container-md, .container-sm {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

 header {
/*        border-bottom: 1px solid black;*/
padding-top: 10px;
        margin-bottom: 50px;
        font-family: 'NucleBook';
      }
 
      .dvd {
        margin-left: 60px;
      }
 
a {
	font-size:25px;
	color: #000000;
	text-decoration: none;
}

a:hover {
	font-size:25px;
	color: #000000;
	text-decoration: underline;
}



.rpd {
    margin-right: 50px;
  }

.img-hero {
  width: 100%;
}



/* ---- MASONRY END */

@media (min-width: 300px) { /*---------------*/
.nav-g {
	font-size:25px;
	color: #000000;
	text-decoration: none;
	padding-right: 0px;

}

.nav-g:hover {
	text-decoration: underline;

}
    .dvd {
        margin-left: 0px;
      }

        .masonry {
    padding: 0px 0px 0px 0px;
  }

}


@media (min-width: 576px) { /*---------------*/
.nav-g {
	font-size:25px;
	color: #000000;
	text-decoration: none;
	padding-right: 25px;

}

.nav-g:hover {
	text-decoration: underline;

}
    .dvd {
        margin-left: 0px;
      }

        .masonry {
    padding: 0px 20px 0px 20px;
  }

}





@media (min-width: 768px) { /*---------------*/
	.container-fluid {
			padding-left: 0;
			padding-right: 0;
	}
	
	p { 
			font-size: 20px;
 	}

}


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

		.nav-g {
	font-size:40px;
	color: #000000;
	text-decoration: none;
	padding-right: 50px;

}

.nav-g:hover {
	font-size:40px;
	color: #000000;
	text-decoration: underline;

}
	  .masonry {
    padding: 0px 40px 0px 40px;
  }

}

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

	.nav-g {
	font-size:50px;
	color: #000000;
	text-decoration: none;
	padding-right: 50px;

}

.nav-g:hover {
	font-size:50px;
	color: #000000;
	text-decoration: underline;

}
 .dvd {
        margin-left: 30px;
      }

      .header-icons {
  width: 50px;
  height: 50px;
}

}

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



}