@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');

body {
  background: #292828 url(../img/background.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  font-family: 'Open Sans', sans-serif;
  background-size: cover;
  font-size: 16px;
}

#page {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

/* Text */
h1 {
  margin: 0 0 1em 0;
  font-size: 2.8em;
  font-weight: 700;
}
.other h1 {
  padding: 100px 0 0 0;
  color: #cc3300;
  font-weight: 400;
  margin-bottom: 10px;
  text-align: center;
}

h2 {
  margin: 0 0 .5em 0;
  font-size: 1.6em;
  font-weight: 700;
}

.other h2 {
  color: #cc3300;
  display: inline-block;
  text-align: left;
  clear: both;
  font-weight: 400;
  margin: 0;
}

h3 {
  margin: 0 0 .5em 0;
  font-size: 1.3em;
  font-weight: 700;
}

section.main.contactForm aside h3 {
  padding-left: 15px;
  text-align: left;
  font-size: 1.1em;
}

h4 {
  margin: 0 0 1.5em 0;
  font-size: 1em;
  font-weight: 700;
  text-align: center;
}

.other h4 {font-size: 1.4em; color: #fff; font-weight: 400; padding: 0 50px 0 50px;}

p {
  color: #fff; 
  text-align: left;
  padding: 15px;
  margin: 0;
}

aside.contactLeft p a {
  text-decoration: none;
  color: #fff;
}

aside.contactLeft p a:hover {
  text-decoration: underline;
}

#p4pBanner {
  height: 615px;
  position: relative;
  -webkit-transition: all 1s linear;
  -moz-transition: all 1s linear;
  -o-transition: all 1s linear;
  transition: all 1s linear;

}

header.mainBanner3 {
  background: #2a2929 url(../img/main_banner_1200.jpg) no-repeat center bottom;
}

header.mainBanner1 {
  background: #2a2929 url(../img/main_banner2_1200.jpg) no-repeat center bottom;
}

header.mainBanner2 {
  background: #2a2929 url(../img/main_banner3_1200.jpg) no-repeat center bottom;
}

.other header{
  padding: 0 20px 0 20px;
}

header a.logo {
  z-index: 1;
  position: absolute;
  display: block;
  width: 227px;
  height: 72px;
  background: url(../img/p4p-logo.gif) no-repeat 0 0;
  background-size: contain;
  left: 20px;
}

header a.logo span {
  display: none;
}

/* Section - All */
section {
  padding: 0 30px;
}

/* Clear the floats */
section::after {
  content: '';
  display: block;
  clear: both;
}

/* Main */
section.main {
  margin-top: 20px;
  margin-bottom: 30px;
  padding: 0;
}

section.main aside {
  width: 33%;
  float: left;
  text-align: center;
  min-height: 300px;
}

section.main aside.contactLeft {
  width: 49%;
  float: left;
  text-align: left;
  font-size: 1.4em;
  color: #fff;
  padding: 15px;
  min-height: 300px;
}

section.main aside.contactRight {
  width: 40%;
  text-align: left;
  color: #fff;
  min-height: 300px;
}

element.style {
  width: 80%;
}

section.main .content {
  margin: 15px;
  background: no-repeat center top;
  background-size: 352px 528px;
  padding-top: 85px;
  color: #fff;
  min-height: 440px;
  border: solid 20px black;
}

section.main aside .content.leftcol {
  background-color: #000033;
}

section.main aside .content.leftcol span {
  color: red;
}

section.main aside .content.middlecol {
  background-image: url(../img/kick.jpg);
  position: relative;
}

section.main aside .content.middlecol h2,
section.main aside .content.rightcol h2 {
  font-size: 1.2em;
}

section.main aside .content.rightcol {
  background-image: url(../img/kettlebell_front.jpg);
  position: relative;
}

section.main aside.meet,
section.main aside.warrior,
section.main aside.iron {
  width: 100%;
}

/* About page */
.wrapper {padding: 0 100px;}
.wrapper .leftCol{width: 30%; float: left; margin-bottom: 15px;}
.wrapper .rightCol{width: 65%; float: left; margin: 0 0 15px 15px;}

section.main aside img.img_land {float: left; padding: 60px 50px 50px 75px;}

.section_btn_l {
  background-color: #000;
  padding: 20px;
  position: absolute;
  top: 300px;
  left: 0px;
}

.section_btn_r {
  background-color: #000;
  padding: 20px;
  position: absolute;
  top: 370px;
  right: 0px;
}

/* Philosophy page */
.philosophy {margin: 0 50px 30px 50px; padding: 0;}
.philosophy .leftCol{width: 30%; float: left;}
.philosophy .rightCol{width: 65%; float: left; margin-left: 15px;}
.philosophy p {padding: 0 50px 20px 50px;}
section.philosophy img.img_land {float: left; padding: 0 20px 20px 50px;}

/* Contact page */
.contactRight {
  color: #fff;
  text-align: left;
  float: left;
  border: solid 2px #fff;
  border-radius: 10px;
}
.contactRight input[type="text"],
.contactRight input[type="email"],
.contactRight textarea {
  padding: 5px;
  font-size: 1em;
  width: 90%;
  margin-left: 15px;
  display: block;
}

a.btn_red,
.contactForm input[type="submit"] {
  font-size: 1.2em;
  width: 100%;
  text-decoration: none;
  border-radius: 10px;
  color: #fff;
  background: #990000;
  padding: 4px 15px;
  transition: background-color .5s;
}

.contactForm input[type="submit"] {
  width: 25%;
  margin: 20px auto;
  text-align: center;
}
#contactFooter {
  text-align: center;
}
a.btn_red:hover,
.contactForm input[type="submit"]:hover {
  background: #f40505;
  -webkit-box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
  -moz-box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
  box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
}

/* Contact Button */
a.btn {
  font-size: 1.5em;
  text-decoration: none;
  color: #fff;
  background: #990000;
  padding: 15px;
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 30px #f40505, 0 0 30px #f40505;
  -moz-box-shadow: inset 0 0 30px #f40505, 0 0 30px #f40505;
  box-shadow: inset 0 0 30px #f40505, 0 0 30px #f40505;
  transition: background-color .5s, box-shadow .5s;
}
a.btn:hover {
  background: #f40505;
  -webkit-box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
  -moz-box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
  box-shadow: inset 0 0 30px #990000, 0 0 30px #990000;
}

/* Navigation */
nav {
  background-color: rgba(0,0,0,.65);
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px 0 0 0;
  width: 100%;
  height: 55px;
}

nav::after {
  content: '';
  display: block;
  clear: both;
}

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

nav ul li:hover > ul {
  display: block;
}

nav ul li a {
  display: inline-block;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  width: 125px;
  position: relative;
/*  transition: border 1s;*/
}

nav ul li a:visited {color: #fff;}

.draw::after {
    content: '';
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    transition: width .3s;
}

.draw:hover::after {
    width: 100%;
/*    //transition: width .3s;*/
}

.active {
  border-bottom: solid 1px #fff;
}

nav ul ul {
  position: absolute;
/*  top: 100%;*/
  background-color: #000;
  display: none;
}

nav ul ul li {position: relative;}

/* Nav - Top level */
nav > ul { padding-left: 250px; }

nav > ul > li {float: left;}

nav > ul > li > a {
  width: auto;
  padding: 10px 40px;
}

/* Footer */
footer {
  font-size: .8em;
  margin: 40px;
  color: #999;
}

footer a {
  margin-left: 30px;
  color: #777;
}

footer a:visited {
  color: #777;
}

footer a:hover {
  color: #fff;
}

footer .svg-inline--fa {
  font-size: 1.5em;
}

/* Animated text */

.animation-box {
  width: 33%;
  height: 390px;
/*  background-color: blue;*/
  margin: 0 0 0 100px;
  overflow: hidden;
  position: absolute;
  top: 150px;
  text-align: center;
  color: #fff;
  -webkit-animation: fadein 5s; /* Safari, Chrome and Opera > 12.1 */
   -moz-animation: fadein 5s; /* Firefox < 16 */
    -ms-animation: fadein 5s; /* Internet Explorer */
     -o-animation: fadein 5s; /* Opera < 12.1 */
        animation: fadein 5s;

}

.animation-box h1{
  font-size: 3em;
  line-height: 1.5em;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Media Queries */

@media screen and (max-width: 950px) {
  /* Homepage banner and buttons */
  #p4pBanner {height:  423px;}
  header.mainBanner3 {background: #2a2929 url(../img/main_banner_825.jpg) no-repeat center bottom;}
  header.mainBanner1 {background: #2a2929 url(../img/main_banner2_825.jpg) no-repeat center bottom;}
  header.mainBanner2 {background: #2a2929 url(../img/main_banner3_825.jpg) no-repeat center bottom;}
  .animation-box h1 {font-size: 2em;}
  a.btn {font-size: 1.1em;}
  a.btn_red {font-size: 1em;}

  /* Text on other pages */
  .other h1 {font-size: 2em;}
  .other h2 {font-size: 1.2em;}
  .other h4 {font-size: 1em;}
  p {font-size: 0.8em}
  
  /* Contact form */
  section.main.contactForm aside h3 {font-size: 0.9em;}
  
  /* Navigation */
  nav ul li a { padding: 5px 10px; }

} /* End of 900px max */

@media screen and (max-width: 700px) {
  /* Homepage banner and buttons */
  #p4pBanner {height:  320px;}
  header.mainBanner3 {background: url(../img/main_banner_625.jpg) no-repeat center bottom;}
  header.mainBanner1 {background: url(../img/main_banner2_625.jpg) no-repeat center bottom;}
  header.mainBanner2 {background: url(../img/main_banner3_625.jpg) no-repeat center bottom;}
  .animation-box h1 {font-size: 1.5em;}
  a.btn {font-size: 0.9em;}
  a.btn_red {font-size: 0.8em;}
  header a.logo {left: 50%; margin-left: -113px;}

  .animation-box {top: 80px;}
  
  /* Main asides */
  section.main aside {
    width: 100%;
    float: none;
    margin: 0;
    position: relative;
  }
  section.main .content {border: none;}
  
  section.main aside div.content img{
    display: inline-block;
    width: 125px;
    position: absolute;
    top: 30px;
    left: 0px;
  }
  .section_btn_l {width: 40%; left: 20%;}
  .section_btn_r {width: 40%; right: 20%;}
  footer a {margin-left: 0; display: block;}
  
  /* About page */
  .wrapper {padding: 0;}
  .wrapper .leftCol {width: 100%;}
  .wrapper .rightCol {width: 100%; margin: 0 0 15px 0;}
  section.main aside img.img_port {width: 50%;}

  /* Philosophy page */
  .philosophy {margin: 0 50px 30px 50px; padding: 0;}
  .philosophy .leftCol{width: 50%; float: inherit; position: relative; left: 25%;}
  .philosophy .rightCol{width: 100%; float: inherit; margin-left: 0;}
  .philosophy p {padding: 0 50px 20px 50px;}
  section.philosophy img.img_land {float: left; padding: 0 20px 20px 50px;}

  /* Navigation */
  nav {
    position: static;
    width: auto;
    padding: 20px 15px;
    background-color: #4b0a0c;
    min-height: 300px;
    text-align: center;
  }
  
/* Change active to a solid border and remove draw */
  .active {border: solid 1px #fff;}
  .draw:hover::after {width: 0;}

  .other header {background-color: rgba(0,0,0,.65); padding-bottom: 30px;}
  .wrapper {padding-right: 0;}
  section.main aside img.img_port {float: none; padding: inherit;}
  .other h2 {display: block; text-align: center; padding-bottom: 10px;}
  p {margin: 0 30px;}
  .philosophy {text-align: center;}
  section.philosophy img.img_land {padding: 15px 0 15px 0; float: inherit;}
  section.main aside.contactLeft {width: 100%; float: inherit; min-height: 0;}
  section.main aside {min-height: 0;}
  section.main aside.contactRight {width: 99%; float: inherit; min-height: 0; margin-right: 5px;}
  
  nav ul,
  nav ul ul {
    display: block;
    position: static;
  }
  
  nav > ul {padding: 0;}
  nav > ul > li { float: none; margin-top: 25px;}
  nav ul li:hover { background: none; }
  nav ul li a {
    width: auto;
    display: block;
    margin: 0;
    padding: 8px 15px;
    border: 1px solid rgba(255,255,255,.25);
  }
  nav ul li a:hover { background-color: rgba(255,255,255,.2); }
  nav ul ul { background: none; }
  nav ul ul li a { margin-left: 20px; }

  /* Footer */
  footer::after { content: ''; display: block; clear: both; }
  
  footer div.content a {
    display: inline-block;
    margin: 0 0 10px 0;
    float: left;
    clear: both;
  }
}

@media screen and (max-width: 425px) {
  /* Header */
  #p4pBanner {height:  320px;}
  header.mainBanner3 {background: #2a2929 url(../img/main_banner_625.jpg) no-repeat center bottom;}
  header.mainBanner1 {background: #2a2929 url(../img/main_banner2_625.jpg) no-repeat center bottom;}
  header.mainBanner2 {background: #2a2929 url(../img/main_banner3_625.jpg) no-repeat center bottom;}
  .animation-box {top: 80px; margin-left: 30px; width: 50%;}
  .animation-box h1 {font-size: 1.2em;}
  a.btn {font-size: 0.8em;}
  a.btn_red {font-size: 0.8em;}
  header a.logo {left: 50%; margin-left: -113px;}
  
  /* About Us page */
  .other h4 {padding: 0;}

  /* Philosophy page */
  .philosophy {margin: 0 20px 30px 20px;}
  .philosophy .leftCol {width: 100%; left: 0;}
  .philosophy p {padding: 0 0 20px 0; margin: 0;}
  
  /* Contact page */
  .contactRight input[type="text"],
  .contactRight input[type="email"],
  .contactRight textarea {
    width: 85%;
  }
  .contactLeft p {font-size: 0.6em;}
  section.main aside.contactLeft {padding: 0;}
  p {margin: 0;}

  
  /*
  
  
  header {
    background-image: url(../img/main_banner_425.jpg);
    height: 218px;
  }
  
  header a.logo {
    height: 36px;
    background: rgba(0,0,0,.65) url(../img/p4p-logo.svg) no-repeat center center;
    background-size: 126px 17px;
  }
*/
}