@import url(https://fonts.googleapis.com/css?family=Cairo);
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css);

* {
  margin: 0 auto;
  box-sizing: border-box;
}

/* CC9F53 - 124734 */
body {
  font-family: cairo;
  color: #124734;
  background: #fff;
}

/* Start Page Container */
.page_container {
  width: 80%;
}

/* Start Header */
header {
  display: flex;
  justify-content: space-between;
  /*border: 1px solid #000;*/
}

header .logo {
	width: 150px;
	margin: 15px 0 5px 5px;
  /*border: 1px solid #000;*/
}
/* End Header */

/* Start Section Content */
/* CC9F53 - 124734 */
.content {
  min-height: 500px;
  display: flex;
  text-align: right;
  /*border: 1px solid #000;*/
}

/* Start Main */
main {
  display: flex;
  flex: 2;
  align-items: center;
  
}
.imageflex {
  min-height:400px;
  width: 65%;
  display: flex;
  background-image: url('../images/hero-image.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    /*border: 1px solid #000;*/
}
.imageflex:hover {
  -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
.imageflexcontent {
  
  font-family: cairo;
  width: 70%;
  margin-left: 5px;
  margin-top: 40px;
  font-size: 22px;
  font-weight:500;
  /*border: 1px solid #000;*/
}
/* End Main */

/* End Section Content */

/* Start Footer */
footer {
  min-height: 50px;
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
  /*border: 1px solid #000;*/
}

.after-footer {
	margin: 5px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /*border: 1px solid #000;*/
}

.logos {
  align-items: center;
  margin: 8px;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
  filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    transform: scale(0.9); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
.logos:hover {
  -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
    transform: scale(1); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}
/* End Footer */
/* Start Page Container */

/* Start Media */
@media all and (max-width: 760px) {
  
  header {
    min-height: 50px;
  }
  
  footer {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 50px;
  }
  .logos{
    margin: 0 auto;
  }
  
  .content {
    flex-direction: column;
    min-height: 50px;
  }
  
  main {
    order: 1;
    width: 100%;
    min-height: 50px;
    flex-direction: column;
  }
  
  .imageflex {
    overflow: hidden;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    background-image: url('../images/hero-image.png');
    background-repeat: no-repeat;
    background-size: contain;
    /*border: 1px solid #000;*/
}
  .imageflexcontent {
    order: 1;
    font-family: cairo;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    margin: 50px 0 10px 0;
}

}
/* End Media */


/* End Links */
a:link {
  color: #CC9F53;
  text-decoration: none;
}

a:visited {
  color: #CC9F53;
  text-decoration: none;
}

a:hover {
  color: #CC9F53;
  text-decoration: underline;
}

a:active {
  color: #CC9F53;
  text-decoration: underline;
}
/* End Links */

.header-social-icons {
  display: flex;
  align-items: center;
    margin: 0;
}
.social-icon {
    color: #CC9F53;
}
ul.social-icons {
    margin: 10px;
}
.social-icons li {
    padding: 10px;
    vertical-align: top;
    display: inline;
    height: 100px;
}
.social-icons a {
    color: #CC9F53;
    text-decoration: none;
}
.fa-facebook {
  margin: 2px;
    padding: 10px 15px;
    -o-transition:.5s;
    -ms-transition:.5s;
    -moz-transition:.5s;
    -webkit-transition:.5s;
    transition: .5s;
    background-color: #124734;/* CC9F53 - 124734 */
}
.fa-facebook:hover {
    color: #124734;
    background-color: #CC9F53;
    transform: scale(1.1);
}