/********************************************/
/*        Stylesheet for index.html         */
/********************************************/

/****************************** FONTS ******************************/
nav, #hero, h1, footer {font-family: 'Times New Roman', Times, serif;}

.text-justify {text-align: justify;}

/****************************** SIZE ******************************/
/* WIDTH */
.w-5 {width: 5%;}
.w-30 {width: 30px;}
.w-10 {width: 10%;}
.w-105 {width: 105px;}

/* HEIGHT */
.h-5 {height: 5%;}
.h-30 {height: 30px;}
.h-10 {height: 10%;}
.h-53 {height: 53px;}
.h-150 {height: 150px;}

/****************************** SPACING ******************************/
/* MARGIN */
.ms-28 {margin-left: 28%;}
.mb-8 {margin-bottom: 8%;}

/****************************** CUSTOM ******************************/
/*************** NAVIGATION BAR ***************/
nav a:hover, footer a:hover:not(.fa) {
    color: #AA0F21!important;
    transition: 0.3s;
}
nav a, footer a {transition: 0.3s;}

/******************** HERO ********************/
/* CAROUSEL */
.carousel-control-next, .carousel-control-prev {transition: 0.3s;}

/* CALL TO ACTION */
#hero a:hover {
    color: #198754!important;
    background-color: #E2E3E5!important;
    transition: 0.3s;
}
#hero a {transition: 0.3s;}

/******************** BEST MOMENTS ********************/
.container-16-9 {padding-top: 56.25%!important; /* 16:9 Aspect Ratio */}

/******************** GALLERY ********************/
#gallery img:hover {
    opacity: 1!important;
    box-shadow: 5px 5px 0px 0px #198754;
    transition: 0.5s;
}
#gallery img {transition: 0.5s;}

/******************** FORM ********************/
form input:focus, #comments:focus {
    border-color: #198754!important;
    box-shadow: none!important;
}

/* CONTROLLING VISIBILITY HERE INSTEAD OF
USING BOOTSTRAP BECAUSE WITH BOOTSTRAP DOESN'T
WORKS WELL */
.form-text {visibility: hidden;}

/* COMMENTS */
#comments {resize: none;}

/* TERMS CHECK */
#conditions:checked {
    background-color: #198754;
    border: none;
}

/* SUBMIT */
form button:hover, #terms button:hover, #credits button:hover {transition: 0.3s;}
form button, #terms button, #credits button {transition: 0.3s!important;}

/**************** FONT AWESOME ****************/
.fa {
    box-sizing: content-box;
    font-size: 30px!important;
    transition: 0.3s;
}
.fa:hover {
    opacity: 0.7;
    transition: 0.3s;
}
.fa-facebook {background: #3B5998;}
.fa-twitter {background: #55ACEE;}
.fa-instagram {background: #125688;}