@charset "utf-8";
/* CSS Document */

/*container for all the page*/
.page-wrapper {
	top: 50px;
	background-image: url("../Images/About-Us/about-us-main.jpg");/* adds a background image */
	height: 100%; /* full height*/
	background-attachment: fixed; /*image fixed on screen */
	background-position: center; /* image cetered */
	background-repeat: no-repeat; /*cover the screen without repeating */
	background-size: cover; /* cover all backgoprund */
    overflow: hidden;
}
/*container of main section story*/
.about-story {
	height: 1300px; /* created empry transparent spaces */
	position: relative; /* positioning relarive to be adjusted */
}

/*title container*/
.about-titles {
	position: absolute; /* absolute related to parent */
	text-align: center;
	margin: 0px;
	padding: 10px;
	background-color: white;
	bottom: 0px;
}

/* centers titles paragraphs*/
.about-titles p {
	text-align: center;
}


.about-images {
	background-color: white;
}

/*container with profile images*/
.profile-wrapper {
	display: flex; /* display container */
	flex-direction: column; /* display column in small screens */
	justify-content: space-around; /* evenly spacing */
}

/* image takes full width on small screens */
.about-img {
	flex-basis: 95%; /* column width */
	padding:10px;
}

/*container of profile images on medium to large screens*/
@media screen and (min-width: 750px) {
    .profile-wrapper {
	   display: flex; /* flex container */
	   flex-direction: row ; /* horizontal display */
	   justify-content: space-around; 
    }
/*2 columns on this screen size*/
    .about-img {
	   flex-basis: 50%; /* column width*/
	   padding:10px;
    }
}

/*image takes afull width of container*/
.about-img img {
	width: 100%;
}

/*brand images container half width*/
.brands-container{
	flex-basis: 50%; /*column width*/
	display: flex; /* flex container */
	flex-direction: column; /* vertical diaplsy */
	padding: 10px;
}

/*brand images*/
.brands-container img{
	width: 50%; /*half width of column*/
	margin: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* shadow position and transparency*/
}

/*slogan container*/
div.impact-slogan {
	width: 100%; /* full width*/
	background-color: orangered;
	max-height: 170px;
	align-content: center;
	text-align: center;
	padding: 10px;
}

/* new section leaving some transparent space*/
.about-subscribe {
	height: 600px; /* heigh in pixel to create empty spaces*/
	position: relative;
}

/*container of elements*/
.wrapper {
	width: 100%;
	position: absolute; /* position related to parent*/
	text-align: center;
	margin: 0px;
	padding: 0px;
	background-color: white;
	bottom: 0px;
}

.large-slogan {
	text-align: center;
}

/*form container*/
.subscribe-wrapper{
	padding: 5px;
	width: 70%; /* width of the form container*/
	margin: auto;
}


.fm-subscribe-au {
	width: 100%;
	margin: auto;
	margin-bottom: 20px;
}
/*form text*/
form.fm-subscribe-au input[type=text] {
  padding: 5px;
  border: 1px solid grey;
  float: left;
  width: 80%; /* ration text button */
  background: #f1f1f1;
}

/*button of the form*/
form.fm-subscribe-au button {
  float: left;
  width: 80%;
  padding: 5px;
  background-color: red;
  color: white;
  border: 1px solid grey;
  border-left: none;
  cursor: pointer;
	height: 100%;
}

/*form for larger to medim screen is horizontal*/
@media screen and (min-width: 750px) {
    form.fm-subscribe-au input[type=text] {
        font-size: 35px;
        padding: 5px;
        border: 1px solid grey;
        float: left;
        width: 60%;
        background: #f1f1f1;
    }
    
    form.fm-subscribe-au button {
        font-size: 35px;
        width: 40%;
    }
}

/*effect on hover form button*/
form.fm-subscribe-au button:hover {
  background-color: chocolate;
}