/* My Custom CSS  */

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}

code {
  font-size: 80%;
}

.no-underline {
    text-decoration: none;
}

.h1, h1 {
    font-size: calc(1.375rem + 1.5vw);
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1d3f72;
}

label2 {
	font-weight: bold;
}

label small {
	font-weight: normal;
}

.white	  { color: #FFFFFF; }
.error	  { color: #FF0000; font-weight: bold;}	
.black    { color: #000000; }


.myText { font-size: large; }
.myTextLarge { font-size: x-large; }
.myTextExtraLarge { font-size: xx-large; }

.myTitle {
    font-size: calc(1.375rem + 1.5vw);
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1d3f72
}

.mySubtitle {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    font-size: 1.25rem;
    line-height: 1.2;
    font-size: x-large; 
    color: #5699d2
}

.myColor1 {	color: #1d3f72; }
.myColor2 {	color: #5699d2; }
.myColor3 {	color: #d8ebf9; }
.myColor4 {	color: #71c2cc; }
.myColor5 {	color: #ff8040; }
.myColorRED { color: #FF0000; }
.myColorBLUE { color: #0000FF; }
.myColorGREEN { color: #00FF00; }


/*
	Media Query
*/
.myTextResponsive {
    font-size: small; /* Default per XS */
}

.myTitleResponsive {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #1d3f72
}

.mySubtitleResponsive {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.2;
    color: #5699d2
}

/* Extra Small (XS) - Fino a 576px */
@media (max-width: 575.98px) {
    .myTitleResponsive {
        font-size: medium;
    }
    .mySubtitleResponsive {
    	font-size: x-small;
    }
    .myTextResponsive {
        font-size: xx-small;
    }

}

/* Small (SM) - Da 576px a 767px */
@media (min-width: 576px) and (max-width: 767.98px) {
    .myTitleResponsive {
        font-size: medium;
    }
    .mySubtitleResponsive {
    	font-size: x-small;
    }
	.myTextResponsive {
        font-size: xx-small;
    }
}

/* Medium (MD) - Da 768px a 991px */
@media (min-width: 768px) and (max-width: 991.98px) {
    .myTitleResponsive {
        font-size: large;
    }
    .mySubtitleResponsive {
    	font-size: small;
    }
	.myTextResponsive {
        font-size: x-small;
    }
}

/* Large (LG) - Da 992px a 1199px */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .myTitleResponsive {
        font-size: x-large;
    }
    .mySubtitleResponsive {
    	font-size: large;
    }
	.myTextResponsive {
        font-size: small;
    }
}

/* Extra Large (XL) - Da 1200px a 1399px */
@media (min-width: 1200px) and (max-width: 1399px) {
     .myTitleResponsive {
        font-size: xx-large;
    }
    .mySubtitleResponsive {
    	font-size: x-large;
    }
    .myTextResponsive {
        font-size: medium;
    }
   
}

/* Extra Extra Large (XXL) - Da 1400px in su */
@media (min-width: 1400px) {
    .myTitleResponsive {
        font-size: xx-large;
    }
    .mySubtitleResponsive {
    	font-size: x-large;
    }
	.myTextResponsive {
		font-size: medium;
    }
}