/* utilities */

.center {
	margin: 0 auto;
}

/* Hero and nav */

nav {
	height: 120px;
	display:flex;
	color: white;
}

nav ul {
	list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

nav li {
	float: left;
	width: 33%;
}

nav li a {
	display: block;
    color: white;
    text-align: center;
    text-decoration: none;
}

.valign {
	vertical-align: middle;
	line-height: 120px;
}


.call-to-action {
	margin-top: 200px;
	font-size: 1.5em;
}

.hero {
	height: 600px;
	background-color: #EF6037;
	position: relative;
	overflow: hidden;
}

.hero:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.6;
    background-image: url("../images/hero.jpeg");
    background-repeat: no-repeat;
    background-position: 50% 0;
    -ms-background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

/* body */


section, footer {
	padding: 80px 0;
}

p {
	color: rgba(0, 0 ,0 , 0.7);
}

.row {
	position: relative;
	z-index: 2;
}

.call-to-action {
	width: 28%;
	margin-top: 200px;
	text-align: center;
	color: rgba(255,255,255, 0.8);
}

img {
	width: 100%;
	box-sizing: border-box;
}

.text-img {
	display: flex;
	align-items: center;
  	justify-content: center;

}

.hero.small {
	height: auto;
}

/* Cards */

.cards-container {
	background-color: #EF6037;
}

.card {
	width: 100%;
	background-color: white;
	border-radius: 3px;
	padding: 40px;
	box-sizing: border-box;
	text-align: center;
}

.card-img img {
	width: 40px;
}

.card-img {
	text-align: center;
}

/* Footer */

footer {
	background-color: #101010;
}

footer .call-to-action {
	margin-top: 0;
	font-size: 1em;
}

footer h5 {
	color: white;
}

/* buttons */

.button {
	margin-top: 30px;
}

 /* Media Queries */

@media (max-width: 700px) {

  .hide-mobile {
    display: none;
  }

  .hero {
  	height: 500px;
  }

  .text-img {
    display: block;
  }
  .card {
    margin-bottom: 20px;
  }

  .call-to-action{
  	width: auto;
  }

  .img {
  	margin: auto;
  	display: block;

  }

  .columns, .column{
  	width: 100% !important;
  	margin-left: 0;
  }

  .offset-by-two, .offset-by-one, .offset-by-four  {
  	margin: 0 !important;
  }

  nav {
  	display: block !important;
  }

  h1 {
  	text-align: center;
  }

  section, footer {
	padding: 40px 0;
}
}

.frame-container {
   width: 356.4px;
   height: 633.6px;
   padding: 0;
   overflow: hidden;


}

iframe {
	width: 1080px;
  height: 1920px;
  border: 0;
  -ms-transform: scale(0.33);
  -moz-transform: scale(0.33);
  -o-transform: scale(0.33);
  -webkit-transform: scale(0.33);
  transform: scale(0.33);

  -ms-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}