* {
 font-family: "Montserrat";
}

:root {
 --cathtile: 330;
 --catwtile: 280;
 --cathtile2: 330;
 --catwtile2: 280;
 --catxcount: 4;
 --hsection: 300;
 --footerbkcolor: #313537;
 --footertxcolor: #f8f8f8;
 --menubkcolor: #313537;
 --menufillcolor: #313537;
 --menubkselect: #f8f8f8;
 --mainbkcolor: #deb42e;
 --menubtcolor: #deb42e;
 --mainbk2color: #313537;
 --maintxcolor: white;
}

hr {
 display: block;
 height: .7px;
 border: 0;
 border-top: .7px solid var(--mainbkcolor);
}

.page {
 display: flex;
 flex-wrap: wrap;
}

.section {
 width: 100%;
 display: flex;
 justify-content: center;
}


/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
 -webkit-appearance: none;
 margin: 0;
}

/* Firefox */
input[type=number] {
 -moz-appearance: textfield;
}




.loader-container {
 width: 100%;
 height: 100vh;
 display: flex;
 justify-content: center;
 align-items: center;
 position: fixed;
 background: whitesmoke;
 z-index: 9999999;
 opacity: 0.6;
}

.spinner {
 width: 64px;
 height: 64px;
 border: 8px solid;
 border-color: var(--mainbkcolor) transparent var(--mainbkcolor) transparent;
 border-radius: 50%;
 animation: spin-anim 1.2s linear infinite;
}

@keyframes spin-anim {
 0% {
  transform: rotate(0deg);
 }

 100% {
  transform: rotate(360deg);
 }
}








.sticky {
 position: fixed !important;
 top: 0 !important;
}

/*
a {
 text-decoration: none;
 background-color: transparent;
 -webkit-text-decoration-skip: objects;
 white-space: nowrap;
}
*/
a:hover {
 color: var(--mainbkcolor);
}




.myImg {
 border-radius: 5px;
 cursor: zoom-in;
 transition: 0.3s;
}


















.remark {
 background: yellow
}


.fab {
 padding: 20px;
 font-size: 30px;
 width: 30px;
 text-align: center;
 text-decoration: none;
 margin: 5px 2px;
 border-radius: 50%;
}

.fab:hover {
 opacity: 0.7;
}

.fa-facebook {
 background: #3B5998;
 color: white;
}

.fa-twitter {
 background: #55ACEE;
 color: white;
}

.fa-google {
 background: #dd4b39;
 color: white;
}

.fa-linkedin {
 background: #007bb5;
 color: white;
}

.fa-youtube {
 background: #bb0000;
 color: white;
}

.fa-instagram {
 background: #125688;
 color: white;
}

.fa-pinterest {
 background: #cb2027;
 color: white;
}

.fa-snapchat-ghost {
 background: #fffc00;
 color: white;
 text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
 background: #00aff0;
 color: white;
}

.fa-android {
 background: #a4c639;
 color: white;
}

.fa-dribbble {
 background: #ea4c89;
 color: white;
}

.fa-vimeo {
 background: #45bbff;
 color: white;
}

.fa-tumblr {
 background: #2c4762;
 color: white;
}

.fa-vine {
 background: #00b489;
 color: white;
}

.fa-foursquare {
 background: #45bbff;
 color: white;
}

.fa-stumbleupon {
 background: #eb4924;
 color: white;
}

.fa-flickr {
 background: #f40083;
 color: white;
}

.fa-yahoo {
 background: #430297;
 color: white;
}

.fa-soundcloud {
 background: #ff5500;
 color: white;
}

.fa-reddit {
 background: #ff5700;
 color: white;
}

.fa-rss {
 background: #ff6600;
 color: white;
}






.caption {
 font-family: Verdana, sans-serif;
 font-size: 12px;
 float: left;
 margin: 0;
 padding: 0;
 position: relative;
 overflow: hidden;
}

.caption img {
 float: left;
 margin: 0;
 padding: 0;
 background: #fff;
 border: none;
}

.caption span {
 float: left;
 margin: 0;
 width: 100%;
 color: #dedede;
 background: #222;
 /* browser che non supportano rgba */
 background: rgba(0, 0, 0, 0.7);
 position: absolute;
 left: 0;
 bottom: 0;
}

.caption span strong {
 font-weight: bold;
 font-size: 12px;
 text-transform: uppercase;
 display: block;
 padding-bottom: 5px;
}






#myImg {
 border-radius: 5px;
 cursor: pointer;
 transition: 0.3s;
}

#myImg:hover {
 opacity: 0.7;
}

/* The Modal (background) */
.modal {
 display: none;
 /* Hidden by default */
 position: fixed;
 /* Stay in place */
 z-index: 1;
 /* Sit on top */
 padding-top: 100px;
 /* Location of the box */
 left: 0;
 top: 0;
 width: 100%;
 /* Full width */
 height: 100%;
 /* Full height */
 overflow: auto;
 /* Enable scroll if needed */
 background-color: rgb(0, 0, 0);
 /* Fallback color */
 background-color: rgba(0, 0, 0, 0.9);
 /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
}

/* Caption of Modal Image */
#caption {
 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;
}

/* Add Animation */
.modal-content,
#caption {
 -webkit-animation-name: zoom;
 -webkit-animation-duration: 0.6s;
 animation-name: zoom;
 animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
 from {
  -webkit-transform: scale(0)
 }

 to {
  -webkit-transform: scale(1)
 }
}

@keyframes zoom {
 from {
  transform: scale(0)
 }

 to {
  transform: scale(1)
 }
}

/* The Close Button */
.close {
 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: large;
 font-weight: bold;
 transition: 0.3s;
}

.close:hover,
.close:focus {
 color: #bbb;
 text-decoration: none;
 cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
 .modal-content {
  width: 100%;
 }
}