:root{
    --main-bg-color: #2d3436;
}

body{
    background-color: var(--main-bg-color);
    color: white;
}

.nav-item,
.itemContent{
    font-family: Arial, Helvetica, sans-serif;
}

.nav-item a{
    font-size: large;
}

.navbar-toggler-icon{
    background: url(../images/icons/menu.png);
    background-size: 100%;
}

.logo img{
    height: 100px;
    width: 110px;
}

.sectionHeading{
    font-weight: bolder;
    margin-top: 20px;
}

#about .sectionHeading{
    border-bottom: 4px solid red;
    font-size: 500%;
    font-style: italic;
    text-align: center;
}

.aboutContent{
    position: absolute;
}

@media screen and (max-width: 680px) {
    .aboutContent{
        position: relative;
    }
}

.aboutContent h1{
    border-bottom: 4px solid red;
    font-style: italic;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: inline-block;
}

.servicesContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
}

.aboutContent p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: x-large;
}

.servicesContent ul {
    list-style: none;
}

.servicesContent ul li::before{
    content: "\2022";
    color: red;
    font-weight: bold;
    display: inline-block; 
    width: 1em;
    margin-left: -1em;
}

.active{
    border-bottom: 4px solid red;
}

.navbar-brand,
.navbar-brand:hover {
    color: white;
}

.slides-navigation .nextSlide,
.slides-navigation .prevSlide{
    width: 47px;
    height: 47px;
    background-size: cover;
    background-repeat: no-repeat;
}

.slides-navigation a.nextSlide{
    right: 20px;
    background-image: url('../images/icons/nextIcon.png');
}

.slides-navigation a.prevSlide{
    left: 20px;
    background-image: url('../images/icons/backIcon.png');
}

.slides-navigation{
    z-index: 6;
}

.navbar-nav > li{
    padding-left:30px;
    padding-right:30px;
    margin-left:55px;
    margin-right:30px;
}

#slides{
    max-height: 600px;
}

.slides-container img{
    width: 100%;
    height: 100%;
	object-fit: contain;
}

.slide-image{
	height: 600px;
	object-fit: cover;
}

.galleryMainImages{
	height: 400px;
}

.section{
    padding: 25px;
}

#navigation{
    z-index: 100;
    background-color: var(--main-bg-color);
    width: 100%;
}

#navigation li a{
    color: white;
}

.fixedNav #navigation{
    position: fixed;
    top: 0;
}

.squareItem{
    margin: 15px;
}

.squareImage img{
    width: 100%;
    max-height: 500px;
    margin-bottom: 20px;
}

.imageContainer img{
    width: 100%;
}

.socialMediaSection{
    padding: 20px;
    float: right;
}

.socialMediaSection .itemContent{
    padding-top: 5px;
}

.itemContainer{
    margin: 15px;
    text-align: center;
}

.itemIcon{
    height: 50px;
    font-size: 45px;
}

.formImageContainer img{
    width: 100%;
    max-height: 600px;
}

.formBody{
    margin-top: 15px;
}

#nameInput,
#placeInput,
#emailInput,
#messageInput{
    background-color: var(--main-bg-color);
    border-style: none;
    padding: 10px;
    border-bottom: 2px solid red;
    margin: 10px;
    color: white;
}

#nameInput,
#messageInput,
#placeInput,
#emailInput{
    width: 96%;
    margin-bottom: 30px;
}

#messageInput{
    margin-bottom: 50px;
}

.formHeader{
    margin-bottom: 40px;
}

#sendButton{
    color: black;
    background-color: silver;
    border-style: none;
    width: 25%;
    height: 30px;
    margin-left: 35%;
    display: table-cell;
    vertical-align: middle;
}

.sectionHeading h3{
    border-bottom: 4px solid red;
    font-size: 300%;
    font-style: italic;
    text-align: center;
    letter-spacing: 2px;
    margin-bottom: 20px;
    display: inline-block;
}

.contentHeading h5{
    border-bottom: 4px solid red;
    font-weight: bold;
    font-style: italic;
    font-size: 200%;
    padding-bottom: 5px;
    margin-bottom: 15px;
}

.contentHeading{
    display: inline-block;
}

.contentContainer h4{
    font-size: 50px;
    font-family: Arial, Helvetica, sans-serif;
    margin-top: 16px;
}

.formHeader p{
    margin: 20px;
}

.servicesImage img{
    width: 100%;
    max-height: 80%;
}

.servicesSection .sectionHeading{
    padding-bottom: 20px;
}

.scrollToTopButton > a > i{
    color: white;
    position: fixed;
    right: 0;
    bottom: 0;
    height: 35px;
    font-size: 30px;
}

.galleryImageContainer > ul > li{
    display: inline-block;
    width: 100%;
    padding: 10px;
}

.item img{
    width: 100%;
}

.thumbnailImage img{
    width: 100%;
}

.items {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.folderItems {
    width: 100%;
    display: table;
    table-layout: fixed;
}
  
.items li{
    display: table-cell;
    width: auto;
    text-align: center;
}

.folderItems li{
    display: table-cell;
    width: auto;
    text-align: center;
}

.items li{
    display:inline-block;
    padding: 3px;
}

.folderItems li{
    display:inline-block;
    padding: 3px;
}

.items li img{
    width: 100%;

    /*Chrome*/
    -webkit-transition: all 0.2s linear, 1s;
    /*Firefox*/
    -moz-transition: all 0.2s linear, 1s;
    /*Opera*/
    -o-transition: all 0.2s linear, 1s;
    /*Microsoft browsers*/
    -ms-transition: all 0.2s linear, 1s;
    -transition: all 0.2s linear, 1s;
}

.folderItems li img{
    width: 100%;
}

.items .item{
    position: relative;
    display: block;
    overflow:hidden;
}

.folderItems .thumbnailImage{
    position: relative;
    display: block;
    overflow:hidden;
}

.items .icons{
    position: absolute;
    width: 90px;
    height: 40px;
    left: 50%;
    top: 50%;
    margin: -20px auto 0 -47px;
    text-align: center;
    z-index: 3;
}

.items .icons i{
    color: #fff;
    font-size: 20px;
    margin-top: 9px;
}

.items a{
    width: 40px;
    height: 40px;
    background-color: red;
    position: relative;
    display: inline-block;

    /*Chrome*/
    -webkit-transition: all 0.2s linear, 0.3s;
    /*Firefox*/
    -moz-transition: all 0.2s linear, 0.3s;
    /*Opera*/
    -o-transition: all 0.2s linear, 0.3s;
    /*Microsoft browsers*/
    -ms-transition: all 0.2s linear, 0.3s;
    -transition: all 0.2s linear, 0.3s;
}

.items .imageOverlay{
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;

    /*Chrome*/
    -webkit-transition: all 0.2s linear, 1s;
    /*Firefox*/
    -moz-transition: all 0.2s linear, 1s;
    /*Opera*/
    -o-transition: all 0.2s linear, 1s;
    /*Microsoft browsers*/
    -ms-transition: all 0.2s linear, 1s;
    -transition: all 0.2s linear, 1s;
}

.items .item:hover .imageOverlay{
    opacity: 1;
}

.items .openButton{
    float: left;
    left: -500px;
}

.items .item:hover .openButton{
    left: 0px;
}

.items .item:hover img{
    /*Chrome*/
    -webkit-transform: scale(1.05, 1.05);
    /*Firefox*/
    -moz-transform: scale(1.05, 1.05);
    /*Opera*/
    -o-transform: scale(1.05, 1.05);
    /*Microsoft browsers*/
    -ms-transform: scale(1.05, 1.05);
    -transform: scale(1.05, 1.05);
}

.folderItems .thumbnailImage:hover img{
    /*Chrome*/
    -webkit-transform: scale(1.5, 1.5);
    /*Firefox*/
    -moz-transform: scale(1.5, 1.5);
    /*Opera*/
    -o-transform: scale(1.5, 1.5);
    /*Microsoft browsers*/
    -ms-transform: scale(1.5, 1.5);
    -transform: scale(1.5, 1.5);
}

.items{
    padding: 0;
}

.loader{
    width: 100%;
    height: 100%;
    background-color: #fff;
    position: fixed;
    top: 0ox;
    left: 0px;
    z-index: 1000;
}

.loader .inner{
    width: 100%;
    height: 100%;
    background: url(../images/gif/loader.gif) center center no-repeat;
}

.folderContent{
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    font-style: italic;
}