@charset "utf-8";

/*Check border here. Start with asterisk*/
/*{border: 1px solid blue;}*/

.html, body {
	overflow-x: hidden

}


/*start - to change the text on navbar*/
.textnav{
	font-family:'Karla', sans-serif;
	font-size: 15px;
}

/*to change the text on navbar*/
.textnav .navbar-nav .nav-item .nav-link{
	color: black;
	
}

.textnav .navbar-nav .nav-item .nav-link:hover{
	color: grey;
	
}
/*end - to change the text on navbar*/

/*text on carousel*/
.carouselcentered {
	font-family:'Karla', sans-serif;
	font-weight: 1000px;
	font-size: 15px;
	color: white;
  	position: absolute;
	text-align: center;
  	top: 20%;
  	left: 50%;
	transform: translate(-50%, -50%);
}

/* Change arrow slides*/
.carousel-control-prev-icon{
	background: url("righty.png") no-repeat center;
	background-size:cover;
	height:60px;
	width:30px;
	
	
}

.carousel-control-next-icon {
	background: url("lefty.png") no-repeat center;
	background-size: cover;
	height:60px;
	width:30px;
	
}



/*text on each slide of carousel*/
.slidetext {
	font-family:'Karla', sans-serif;
	font-weight: 1000px;
	font-size: 20px;
	color: white;
  	position: absolute;
	text-align: center;
  	top: 50%;
  	left: 50%;
	transform: translate(-50%, -50%);
}


/*start of video text*/
video {
  position: relative;
  height: 100%;
  width: 100%;
}



.button {
	font-family:'Karla', sans-serif;
	position:relative;

}

.btn {
	font-family:'Karla', sans-serif;
	font-size: 25px;
	border: 2px solid white;
	padding: 7px 100px;
	color: white;
	text-decoration: none;
	border-radius: 5px;
	
}
	

.btn:hover {
	color:rgba(84,84,84,1.00);
}


.leavestitles {
	color: black;
	font-family: 'Playfair Display', serif;
	
}



.videotext {
	color: black;
	font-family: 'Playfair Display', serif;
	font-size: 15px;
	font-weight:500px;
	
	
}

/*text in the button (VIEW)*/

.button1 {
	font-family:'Karla', sans-serif;
	position:relative;
	
}

#button1id {
	position: absolute;
   
	
}

/* Lets work together button*/

.videobtn{
	font-family:'Karla', sans-serif;
    padding: 5px 15px 5px 15px;
	text-decoration: none;
	border-radius: 10px;
	background-color: white;
	margin-left: 9px;
	
}

.buttoncentered {
	font-family:'Karla', sans-serif;
	font-weight: 100;
	font-size: 20px;
	color: black;
	top: 300%;
  	left: -1%;
	/*transform: translate(-50%, -50%);*/

}

.videobtn:hover{
	color:rgba(84,84,84,1.00);
}

/* Centered text for  video*/
.centered {
	font-family: 'Playfair Display', serif;
	font-weight: 100;
	font-size: 15px;
	color: black;
  	position: absolute;
  	top: 40%;
  	left: 30%;
	transform: translate(-50%, -50%);
}



/*start css for general use*/
.titles {
	color: black;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight:2000px;
	font-align:center;
}

.slidetitles {
	color: white;
	font-family: 'Playfair Display', serif;
	font-size: 20px;
	font-weight:2000px;
	font-align:center;
}


h5 {
	color: white;
	font-family:'Karla', sans-serif;
	font-size: 15px;
	margin-top: auto;
	
}

/*start Contact form bootstrap */

/* Style inputs with type="text", select elements and textareas */
input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #ccc; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
}

/* Style the submit button with a specific background color etc */
input[type=submit] {
  background-color: #4CAF50;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #45a049;
}

/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
}


/* end contact form bootstrap*/



/*START OF COLLAGE GRID*/
.row2{
	display:flex;
	flex-wrap: wrap;
	width:100%;
}


.row2 .collage {
	/*flex: 50%;*/
	overflow:hidden;
	height:100%;
	width:100%;
}

.row2 .collage img {
	/*margin-top: 0.5%;*/
	cursor: pointer;
	filter:brightness(1);
	border-radius: 0px;
	transition: 0.3s linear;
	
	
}

.row2 .collage img:hover{
	/*filter: grayscale(0) brightness(1);*/
	filter: grayscale(1) brightness(1);
	
}

/* responsiveness*/
@media only screen and (max-width: 680px){
	.row2 .column {
		flex: 50%;
	}
	
}

/*Background color for rows*/
.colored{
	background-color:#E4C0A1;
	
	/*background-color:#E2B48D;*/
	
	/*background-color: #e0a470;*/
	
}



/* To make h1 centered*/
.h1class{
	
	text-align: center;
}

/*.row {
	background: #e0a470;
}*/



/*test on text over image when hover*/

/* relevant styles */
.img_wrap {
  position: relative;
  /*text-align: center;*/
}

.img_description {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
    color: #fff;
	font-size: 40px;
  opacity: 0;
  margin-top: 40%;
	cursor: pointer;
	filter:brightness(1);
	border-radius: 0px;
	transition: 0.3s linear;
  
}

.img_descriptionblack {
	position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
    color: black;
	font-size: 40px;
  opacity: 0;
  margin-top: 40%;
	cursor: pointer;
	filter:brightness(1);
	border-radius: 0px;
	transition: 0.3s linear;
	
}



.img_wrap:hover .img_description  {
  visibility: visible;
  opacity: 1;
	
	/*filter: grayscale(1) brightness(1);*/
	
}

.img_wrap:hover  .img_descriptionblack {
  visibility: visible;
  opacity: 1;
	
	/*filter: grayscale(1) brightness(1);*/
	
}


/*for read more button*/
.readmorebtn{
	font-family:'Karla', sans-serif;
    padding: 2px 5px 2px 5px;
	text-decoration: none;
	border-radius: 5px;
	background-color: #e0a470;
	margin-left: 10px;
	
}

.readmorecentered {
	font-family:'Karla', sans-serif;
	font-size: 10px;
	color: black;
	
  
}
.readmorebtn:hover{
	color:rgba(84,84,84,1.00);
}

.logos {
	list-style:none;
	padding-right:0px;
	
}