body
{
  font-family: 'Raleway', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #fff;
}

.container{
  position: relative;
}

.banner, .aboutbanner, .teambanner, .contactbanner {
  position: relative;
  width: 100%;
  height: calc(100vh - 100px);
}

.banner, .aboutbanner, .teambanner {
  background: #000;
}

.contactbanner {
  background: #fff;
}

.banner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none:;
}

/*@supports (mix-blend-mode: color) {
  .banner:before {
    background: linear-gradient(to right, #f00, #f00, #f00, #ff0, #0f0, #0ff, #00f, #00f, #000);
    mix-blend-mode: color;
  }
}*/

.aboutbanner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none:;
}

/*@supports (mix-blend-mode: color) {
  .aboutbanner:before {
    background: linear-gradient(to right, #000, #f00, #f00, #ff0, #0f0, #0ff, #00f, #000);
    mix-blend-mode: color;
  }
}*/

.teambanner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none:;
}

/*@supports (mix-blend-mode: color) {
  .teambanner:before {
    background: #2987ba;
    mix-blend-mode: color-burn;
  }
}*/

.contactbanner:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/*@supports (mix-blend-mode: color) {
  .contactbanner:before {
    background: #400c36;
    mix-blend-mode: color-burn;
  }
}*/

video {
  height: calc(100vh - 100px);
  width: 100%;
  object-fit: cover;
}

video.ink {
  object-fit: cover;
}

/*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-80%);
  width: 100%;
  text-align: center;
  color: #ddd;
  font-size: 5em;
}

/*h1.smoketext span,*/ h1.splashtext span, h1.particletext span, h1.inktext span, h1.churchtext span{
  opacity: 0;
  display: inline-block;
  animation: animate 1s linear forwards;
}

@keyframes animate {
  0%
  {
    opacity: 0;
    /*transform: rotateY(90deg);*/
    filter: blur(10px);
  }
  100%
  {
    opacity: 1;
    /*transform: rotateY(0deg);*/
    filter: blur(0px);
  }
}

/*.break {
  display: none;
}

h1.smoketext span:nth-child(1) {
  animation-delay: .6s;
}

h1.smoketext span:nth-child(2) {
  animation-delay: 1s;
}

h1.smoketext span:nth-child(3) {
  animation-delay: 1.4s;
}

h1.smoketext span:nth-child(4) {
  animation-delay: 1.8s;
}

h1.smoketext span:nth-child(5) {
  animation-delay: 2.2s;
}

h1.smoketext span:nth-child(6) {
  animation-delay: 2.6s;
}

h1.smoketext span:nth-child(7) {
  animation-delay: 2.8s;
}

h1.smoketext span:nth-child(8) {
  animation-delay: 2.8s;
}

h1.smoketext span:nth-child(9) {
  animation-delay: 3.2s;
}

h1.smoketext span:nth-child(10) {
  animation-delay: 3.6s;
}

h1.smoketext span:nth-child(11) {
  animation-delay: 4s;
}

h1.smoketext span:nth-child(12) {
  animation-delay: 4.4s;
}

h1.smoketext span:nth-child(13) {
  animation-delay: 4.8s;
}*/

h1.particletext span:nth-child(1) {
  animation-delay: 1s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.particletext span:nth-child(2) {
  animation-delay: 2s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.splashtext span:nth-child(1) {
  animation-delay: 1s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.splashtext span:nth-child(2) {
  animation-delay: 2s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;*/
}

h1.splashtext span:nth-child(3) {
  animation-delay: 3s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.inktext span:nth-child(1) {
  animation-delay: 3s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.inktext span:nth-child(2) {
  animation-delay: 3s;
  color: white;
  text-shadow: -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.churchtext span:nth-child(1) {
  animation-delay: .5s;
  color: #312F74;
  text-shadow: -1px -1px 0 #fff,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.churchtext span:nth-child(2) {
  animation-delay: 1s;
  color: #312F74;
  text-shadow: -1px -1px 0 #fff,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

h1.churchtext span:nth-child(3) {
  animation-delay: 1.5s;
  color: #312F74;
  text-shadow: -1px -1px 0 #fff,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.header {
  position: sticky;
  top: 0;
  width: 100%;
  /*height: 50px;*/
  background-color: #000;
  /*padding: 0 100px;*/
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  /*align-items: center;*/
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none){
  .header{
    position: fixed;
  }
  .banner {
    position: relative;
    width: 100%;
    height:calc(100vh - 75px);
  }
}

.header .logo {
  float: left;
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 25px;
  text-transform: uppercase;
  padding: 4px 20px;
}

.header .menu-btn {
  display: none;
}

.header ul {
  /*display: flex;*/
  margin: 0;
  padding: 0;
  list-style: none;
  overflow: hidden;
  /*height: 50px;*/
  background-color: #000;
}

.header ul a {
  display: block;
  padding: 10px 20px;
  text-decoration: none;

}

.header ul a:hover {
  background-color: #f4b71c;
}
/*.header .navbar li {
  list-style: none;
  line-height: 50px;
}*/

.header ul a:active {
  -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  -ms-box-shadow: inset 0 6px 6px rgba(0,0,0,.5);
  -o-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5);  
}

.header .navbar {
  float: none;
}

.header .navbar li {
  float: left;
}

.header .navbar li a {
  color: #ffffff;
  text-decoration: none;
  padding: 10px 20px; 
  border-radius: 5px;
}

.header .navbar li.active {
  background: #2987ba;
  color: #ffffff;
  border-radius: 5px;
}

content {
  width: 100%;
  box-sizing: border-box;
}
.blog h1 {
  font-size: 4em;
}
.blog h2{
  margin: 0;
  padding: 0;
  font-size: 3em;
}

.blog h3 {
  font-size: 2.4em;
}

.blog h4 {
  font-size: 2em;
}

.blog p {
  font-size: 1.3em;
}

.steps {
  color: #312f74;
}
.thank-you {
  text-align: center;
}

.items {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item1, .item3, .item4, .item6, .item7, .item9 {
  margin: 30px 4%;
}

.item1, .item2, .item3, .item4, .item5, .item6, .item7, .item8, .item9 {
  max-width:30%;
  min-width:400px;
  height: auto;
  margin: 1.6%;
  text-align: center;
}

/*.item1, .item4, .item7 {
  clear: left;
}

.item2, .item5, .item8{
  margin: 30px 2.5% ;
}*/

.panel-body{
  display: block;
  text-align: center;
  height: 300px;
}

#reused_form {
  background-color: #fff;
  display: inline-block;
  text-align: center;
  height: 220px;
  border-radius: 6px;
  border: 2px solid blue;
}

.form-group {
  background-color: #fff;
  width: 400px;
  margin: 20px;
}

div.form-text {
  line-height: 80%;
  padding-bottom: 1%;
}

.blog {
  padding: 0 25%;
}

.calltoaction {
  text-align: center;
  padding: 0 5%;
  max-width: 50%;
  margin: 0 25%;
  height: auto;
  clear: left;
}

content img {
  border-radius: 10px;
    max-width: 100%;
    height: auto;
}

/*button, input, select, textarea {
  box-sizing: border-box;
  width: 150px;
  margin: 0;
  font-family: inherit;
  font-size: 100%;
}

textarea {
  vertical-align: top;
}*/

#quotejump {
  display: none;
}

#quotejump:target {
  display: block;
}

/*#quoteform {
  text-align: left;
}*/

.form-style{
  max-width: 400px;
  margin: 10px auto;
  padding: 0 0 5px 0;
  background: #a0a0a0;
  font-family: inherit;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  text-align: center;
}

.form-style a, .form-style h1{
  text-decoration: none;
  display: inline-block;
  background: linear-gradient(45deg, #b51e4f, #e37025);
  padding: 20px 0;
  font-size: 30px;
  font-weight: 300;
  width: 100%;
  color: #fff;
  margin: 0;
  border-radius: 50px;
  -webkit-box-shadow: -2px 2px 3px black;
  -moz-box-shadow: -2px 2px 3px black;
  -ms-box-shadow: -2px 2px 3px black;
  -o-box-shadow: -2px 2px 3px black;
  box-shadow: -2px 2px 3px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-style input[type="text"],
.form-style input[type="date"],
.form-style input[type="datetime"],
.form-style input[type="email"],
.form-style input[type="number"],
.form-style input[type="search"],
.form-style input[type="time"],
.form-style input[type="url"],
.form-style textarea,
.form-style select {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 92%;
  background: #fff;
  margin-bottom: 4%;
  border: 1px solid #ccc;
  padding: 3%;
  color: #;
  font-family: inherit;
  border-radius: 30px;
}

.form-style input[type="text"]:focus,
.form-style input[type="date"]:focus,
.form-style input[type="datetime"]:focus,
.form-style input[type="email"]:focus,
.form-style input[type="number"]:focus,
.form-style input[type="search"]:focus,
.form-style input[type="time"]:focus,
.form-style input[type="url"]:focus,
.form-style textarea:focus,
.form-style select:focus
{
  box-shadow: 0 0 5px #43D1AF;
  padding: 3%;
  border: 1px solid #43D1AF;
}

.form-style a:hover {
  -webkit-transform:scale(1.25);
  -moz-transform:scale(1.25);
  -ms-transform:scale(1.25);
  -o-transform:scale(1.25);
  transform:scale(1.25);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
}

.form-style a:active {
  -webkit-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  -ms-box-shadow: inset 0 6px 6px rgba(0,0,0,.5);
  -o-box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  box-shadow: inset 0 3px 6px rgba(0,0,0,.5);
  opacity: .8;
}

.quotebutton {
  text-decoration: none;
  border: none;
  background: linear-gradient(45deg, #b51e4f, #e37025);
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 30px;
  margin: 0 2px;
  padding: 0 20px;
  transition: 0.25s;
  transform: translateY(-10%);
  -webkit-box-shadow: -2px 2px 3px black;
  -moz-box-shadow: -2px 2px 3px black;
  -ms-box-shadow: -2px 2px 3px black;
  -o-box-shadow: -2px 2px 3px black;
  box-shadow: -2px 2px 3px black;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

.quotebutton:hover  {
  -webkit-transform:scale(1.25);
  -moz-transform:scale(1.25);
  -ms-transform:scale(1.25);
  -o-transform:scale(1.25);
  transform:scale(1.25);
  -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -ms-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  -o-box-shadow: 0 3px 6px rgba(0,0,0,.5);
  box-shadow: 0 3px 6px rgba(0,0,0,.5);
  position:relative;
  z-index:5;
}

.quotebutton:active {
  -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  -moz-box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  -ms-box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  -o-box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  box-shadow: inset 0 1px 4px rgba(0,0,0,.5);
  opacity: .8;
}

.quotebutton:after {
  padding: 0;
  margin: 0;
  opacity: 1;
  transition: 0s
}

h1.notabutton {
  background: #2987ba;
   -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -ms-box-shadow: none;
  -o-box-shadow: none;
  box-shadow: none;
  opacity: 1;
}

/*.form-style input[type="submit"], .form-style input[type="button"] {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  width: 100%;
  padding: 3%;
  background: #43D1AF;
  border-bottom: 2px solid #30C29E;
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;  
  color: #fff;
}

.form-style input[type="submit"]:hover,
.form-style input[type="button"]:hover{
  background: #2EBC99;
}*/

.team1, .team2, .team3 {
  margin: 0 5%;
  width: 90%;
  content: "";
  clear: both;
  display: table;
}

/*.team1 {
  background: red;
}

.team2 {
  background: blue;
}

.team3 {
  background: green;
}*/

.abouttext {
  width: 40%;
  margin: 6% 35% 10% 25%;
}

.teamphoto {
  width: 25%;
  float: left;
  display: block;
  margin: 5% 5% 0 5%;
}

.teamtext {
  display: block;
  margin: 5% 5% 8% 5%;
}

/*Social media links*/
ul.socialmedia {
  position : absolute;
  left: 50%;
  transform: translate(-50%, 0%);
  margin: 0;
  padding: 0;
  display: flex;
  width: 320px;
  height: 62px;
  outline: none;
}

ul.socialmedia:before {
  content: 'SHARE';
  /*font-family: fontAwesome;*/
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #b51e4f, #e37025);
  border-radius: 30px;
  text-align: center;
  line-height: 60px;
  color: #fff;
  font-size: 30px;
  margin: 0 2px;
  transition: 0.25s;
  z-index: 1;
  -webkit-box-shadow: -2px 2px 3px black;
  -moz-box-shadow: -2px 2px 3px black;
  -ms-box-shadow: -2px 2px 3px black;
  -o-box-shadow: -2px 2px 3px black;
  box-shadow: -2px 2px 3px black;
}

ul.socialmedia:hover:before {
  width: 60px;
  content: '';
  transform: translate(-30px, 0);
}

ul.socialmedia li {
  position: absolute;
  list-style: none;
  transition: 1s;
  transform: translate(1%, 1%);
}

ul.socialmedia li a {
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background: #262626;
  color: #fff;
  margin: 0 2px;
  border-radius: 50%;
  font-size: 30px;
  transition: .3s;
    -webkit-box-shadow: -2px 2px 3px black;
  -moz-box-shadow: -2px 2px 3px black;
  -ms-box-shadow: -2px 2px 3px black;
  -o-box-shadow: -2px 2px 3px black;
  box-shadow: -2px 2px 3px black;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
  
ul.socialmedia li:nth-child(1) a {
  background: #3b5999;
}

ul.socialmedia li:nth-child(2) a {
  background: #55acee;
}

ul.socialmedia li:nth-child(3) a {
  background: #bd081c;
}

ul.socialmedia li:nth-child(4) a {
  background: #0077B5;
}

ul.socialmedia li:nth-child(5) a {
  background: #e4405f;
}

ul.socialmedia:hover li:nth-child(1) a {
  transform: translateX(32px) rotate(360deg);
  transition-delay: 0.25s;
}

ul.socialmedia:hover li:nth-child(2) a {
  transform: translateX(96px) rotate(360deg);
  transition-delay: 0.2s;
}

ul.socialmedia:hover li:nth-child(3) a {
  transform: translateX(160px) rotate(360deg);
  transition-delay: 0.15s;
}

ul.socialmedia:hover li:nth-child(4) a {
  transform: translateX(224px) rotate(360deg);
  transition-delay: 0.1s;
}

ul.socialmedia:hover li:nth-child(5) a {
  transform: translateX(288px) rotate(360deg);
  transition-delay: 0s;
}

ul.socialmedia li:active{
  opacity: .8;
}

footer {
  background: #000;
  color: #fff;
  padding: 10px;
}


@media only screen and (max-width: 878px){
  
  .break {
    display: inline;
  }

  /*h1 span:nth-child(8) {
    display: none;
  }*/

  .blog {
    padding: 0 15%;
  }

  footer {
    background: #0f0;
  }

}

/*Galaxy and Kindle Tablets*/
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px)
  and (-webkit-min-device-pixel-ratio: 1.5) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }

  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #fff
  }
}

/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 601px) 
  and (device-height: 906px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #333
  }
}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen 
  and (device-width: 1536px) 
  and (device-height: 2048px) 
  and (-webkit-min-device-pixel-ratio: 1.331) 
  and (-webkit-max-device-pixel-ratio: 1.332) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #800080
  }
}

/* iPhone 5, 5S, 5C, 5SE, 6, 6S, 7, 8, 6+, 7+, 8+, X */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 812px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
  }
}

/*  Galaxy Note, S4, S5  */

/* Portrait and Landscape */
@media screen 
  and (device-width: 320px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #999
  }
}

/*  Google Pixel, HTC & Galaxy S6 and up */

/* Portrait and Landscape */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-min-device-pixel-ratio: 3) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #ccc
  }
}

/*  Google Pixel 2 */

/* Target Portrait and Landscape */
@media screen 
  and (min-device-width: 411px)
  and (max-device-width: 412px) 
  and (device-height: 731px) 
  and (-webkit-min-device-pixel-ratio: 2.6) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #228b22
  }
}

/*  Google Pixel 2 XL */

/* Target Portrait and Landscape */
@media screen 
  and (min-device-width: 411px)
  and (max-device-width: 412px) 
  and (device-height: 823px) 
  and (-webkit-min-device-pixel-ratio: 2.6) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #964b00
  }
}


@media only screen and (max-width: 768px) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-60%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 10%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #ff0;
  }
}

@media only screen and (max-width: 482px) {

  /*.smoketext {
    font-size: 2em;
  }*/

  .header .logo {
  float: left;
  display: block;
  color: #fff;
  text-decoration: none;
  font-weight: 800;
  font-size: 25px;
  text-transform: uppercase;
  padding: 4px;
}

  .blog {
    padding: 0 10%;
  }

  footer {
    background: #f00;
  }
}

@media only screen and (max-width: 282px) {
  .teamphoto {
    width: 100%;
  }

  .blog {
    padding: 0 10%;
  }

}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1.5) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #ffa500
  }
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #f0f
  }
}

/*iPad Pro 10.5" portrait and landscape*/
@media only screen 
  and (min-device-width: 834px) 
  and (max-device-width: 1112px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner, .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 20px 20px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 3px;
    width: 28px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 7px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -7px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #00f
  }
}

/*iPad Pro 12.9" portrait and landscape*/
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

  .header {
    display: block;
    justify-content: space-between;
    position: fixed;
  }

  .banner,  .aboutbanner, .teambanner, .contactbanner {
    position: relative;
    width: 100%;
    height: auto;
  }

  video {
    height: auto;
  }

  /*.smoketext,*/ .splashtext, .particletext, .inktext, .churchtext{
    top: 50%;
    transform: translateY(-80%);
  }

  .header .logo {
    font-size: 66px;
  }


  .header .navbar {
    clear: both;
    max-height: 0;
    transition: max-height .2s ease-out;
  }

  .header .navbar li {
    float: left;
  }

  .header .menu-icon {
    padding: 40px 30px;
    position: relative;
    float: right;
    cursor: pointer;
  }

  .header .menu-icon .nav-icon {
    background: #08f;
    display: block;
    height: 5px;
    width: 48px;
    position: relative;
    transition: background .2s ease-out;  
  }

  .header .menu-icon .nav-icon:before{
    background: #0ff;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: 15px;
  }

  .header .menu-icon .nav-icon:after{
    background: #00f;
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    transition: all .2s ease-out;
    top: -15px;
  }

  .header .menu-btn:checked ~ .navbar{
    max-height: 293px;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon{
    background-color: transparent;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:before{
    transform: rotate(-45deg);
    top: 0;
    outline: none;
  }

  .header .menu-btn:checked ~ .menu-icon .nav-icon:after{
    transform: rotate(45deg);
    top: 0;
    outline: none;
  }

  .header ul {
    background-color: #0c5a53;
    width: 100%;
  }

  .header li{
    clear: left;
    width: 100%;
    outline: 1px solid #0ff;
  }

  .header .navbar li a {
    padding: 14px 20px; 
  }

  .header li a {
    padding: 10px 60px;
  }
  
  .teamphoto {
    width: 50%;
  }
  
  .teamtext {
    margin: 5% 0 8% 5%;
  }

  .blog {
    padding: 0 15%;
  }

  ul.socialmedia:before {
    content: '';
    width: 0;
    height: 0;
  }

  ul.socialmedia li:nth-child(1) a {
    transform: translateX(0px) rotate(360deg);
    transition-delay: 0.5s;
  }

  ul.socialmedia li:nth-child(2) a {
    transform: translateX(64px) rotate(720deg);
    transition-delay: 0.4s;
  }

  ul.socialmedia li:nth-child(3) a {
    transform: translateX(128px) rotate(720deg);
    transition-delay: 0.3s;
  }

  ul.socialmedia li:nth-child(4) a {
    transform: translateX(192px) rotate(720deg);
    transition-delay: 0.2s;
  }

  ul.socialmedia li:nth-child(5) a {
    transform: translateX(256px) rotate(720deg);
    transition-delay: 0.1s;
  }

  ul.socialmedia:hover li:nth-child(1) a {
    transform: translateX(0px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(2) a {
    transform: translateX(64px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(3) a {
    transform: translateX(128px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(4) a {
    transform: translateX(192px) rotate(0deg);
    transition-delay: 0s;
  }

  ul.socialmedia:hover li:nth-child(5) a {
    transform: translateX(256px) rotate(0deg);
    transition-delay: 0s;
  }

  footer {
    background: #0ff
  }
}