body{
  font-family: "Futura-Bold", "Futura PT Medium", "Futura PT Light", "Futura PT Demi", "Futura PT Book", "Futura PT Bold", "Futura LtCn BT", "Futura Md BT", "Futura Lt BT", "Futura BdCn BT";
  background-color: #3dc1d3;
    margin: auto;
	align-content: center;
	text-size: 20px;
}
ul {
  margin: auto;
	color: #3dc1d3;
}
.nav{
	font-size: 20px;
}
.nav-item{
	padding: 20px;
}
.navbar-brand{
	font-size: 20px;
}
.logo{
	max-width:200px; 
	margin-top: -40px;
	height: 100px;
}
/* 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) */
  color: black;
}

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

/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
  background-color: #3dc1d3;
}
.button {
  background-color: #3dc1d3; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
	transition-duration: 0.4s;
	cursor: pointer;}
.button1 {
  background-color: #3dc1d3; 
  color: white; 
  border: 2px solid white;
}
.button:hover{
	background-color: white;
	color: black;
}
/* Add a background color and some padding around the form */
.container {
  border-radius: 5px;
  background-color: #ededed;
  padding: 20px;
  color: black;
}
.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}

.fa:hover {
    opacity: 0.7;
}

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

.fa-linkedin {
  background: #007bb5;
  color: white;
}
.con{
  height:100vh;
}

.jumbotron{
  background-color: #3dc1d3;
color: #fff;
text-align: center;
}

.res{
  margin: auto;
}
.container {
  position: relative;
  width: 50%;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 1;
}
.container-contact{
	align-content: center;
color: white;
font-size: 20px;
}
.text {
  color: white;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  text-align: center;
}
@media (min-width: 320px){
}
	
@media (min-width: 480px){
}

@media (min-width: 768px){
}

@media (min-width: 1024px){
}
@media (max-width: 1200px){
}
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 33%;
	max-width: 33.33%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}
.carouselSlide{
	width: 50%;
	height: auto;
	margin: auto;
}
.carousel-control {
    top: 50%;
    width: 70px;
    height: 70px;
    margin-top: -1.5rem;
    font-size: 35px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 2px solid #fff;
    border-radius: 50%;
	transition: all .3s;}
    .carousel-control-prev {
      left: 0;
      margin-left: 2.5rem;

    }
    .carousel-control-next {
      right: 0;
      margin-right: 2.5rem;
		border-bottom: 0;
    }
    .mbr-iconfont {
      font-size: 2rem;
    }


/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
	.container{
		width: auto;
	}
		.carouselSlide{
	width: 50%;
	height: auto;
	margin: auto;
}
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
	  max-width: 100%;}
		.carouselSlide{
	width: 75%;
	height: auto;
	margin: auto;
}
		.logo{
		height:60px;
		 margin-top: -20px;
	}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
  .column {
    width: 100%;
  }
	.container{
width: auto;
	}
}

.bottom{
	margin: auto;
	padding: 60px;
	float: center;
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: transparent;
  width: 300px;
  height: 350px;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
	margin: auto;
	margin-bottom: auto;
}

/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

/* Position the front and back side */

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: #3dc1d3;
  color: black;
}

/* Style the back side */
.flip-card-back {
  background-color: #3dc1d3;
  color: white;
  transform: rotateY(180deg);
}