/*
  Theme Name: Ona Mansfield Design
  Author: Ona Mansfield design
  Version: 1.1
*/

/* w3-css overrides */
/*
  Google fonts:
  - Amiko
  - Crimson+Text
  - Yeseva one
  <link href="https://fonts.googleapis.com/css2?family=Amiko&family=Crimson+Text&family=Yeseva+One&display=swap" rel="stylesheet">
  font-family: 'Yeseva One', cursive;
  font-family: 'Amiko', sans-serif;
  font-family: 'Crimson Text', serif;

*/


body {
  font-size: 100% !important;
  margin: 0;
  padding: 0;
}
.amiko {
  font-family: 'Amiko', sans-serif;
  font-size: 12px;
}
.amiko-bold {
  font-weight: 600;
}
.crimson {
  font-family: 'Crimson Text', serif;
}

/* Ona Mansfield CSS repeatable classes */
h1 {
  margin: 0px;
  margin-top: 37px;
  padding: 0px;
  text-align: center;
  font-size: 1.6rem;
  color: black;
  font-family: 'Yeseva One', cursive;
  font-weight: 400;
}

h1.top-header {
  clear: both;
  margin-top: 36px !important;
  margin-bottom: 36px !important;
  font-size: 37px;
}

.pad-top {
	clear: both;
	padding-top: 37px;
}

.pad-bottom {
	padding-bottom: 37px;
}

h2 {
  text-align: center;
  font-size: .8rem;
  font-weight: 400;
  color: black;
  font-family: 'Amiko', sans-serif;
  margin-top: 20px;
  margin-bottom: 0px;
}

p {
  display: block;
  margin-left: 20%;
  margin-right: 20%;
  margin-top: 0px;
  margin-bottom: 0px;
  text-align: center;
  font-family: 'Crimson Text', serif;
  font-size: 1.1rem;
  color: black;
  line-height: 1.6;
}

.wp-block-columns {
  margin-bottom: 0px !important;
}

.wp-block-cover {
  float: left;
  margin-top: 37px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  min-height: 0px !important;
  height: auto !important;
}

.contact-link a {
  color: #1490d0;
}

.contact-link a:hover {
  color: #72a20f;
}

#container {
  display: grid;
  width:100%;
  height:100vh;
  grid-template-columns: 271px 1fr 75px;
  grid-template-rows: 0.2fr 1fr 0.1fr 0.15fr;
  grid-template-areas:
  "header content burger"
  "header content numberlines"
  "descriptors content icons"
  "descriptors content icons";
  text-align: center;
}
#about p {
	margin-bottom: 48px;
}
#header {
  justify-self: center;
  align-self: center;
  grid-area: header;
}
#mobileHeader {
  display: none;
}
.logo {
  width: 60%;
}
#mobileBurger {
  display: none;
}
#content {
  padding: 10px;
  text-align: left;
  background-color: black;
  color: lightgrey;
  background-image: url('images/ona-3.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  grid-area: content;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#content-inner {
  width: 100%;
  padding: 0px;
  margin: 0px;
  background-color: #f7f7f7;
  color: lightgrey;
  text-align: left;
  grid-area: content;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

p.description {
  margin-left: 10px;
  margin-right: 10px;
  font-size: 13px;
  margin-top: 19px;
  color: #707070;
}
#descriptors a {
  color: #000000;
  text-decoration: none;
}
#descriptors a:hover {
  color: #007cba;
}
#descripPrint a, #descripDigital a, #descripBrand a {
  color: #007cba;
  text-decoration: underline;
  font-size: 9px;
  text-transform: uppercase;
}

.icon {
  width: 42px;
}

.burger {
  margin-top: 15px;
}
.numberlines {
  width: 29px;
  margin-top: 80px;
}
#icons {
  grid-area: icons;
  align-self: end;
  padding-bottom: 9px;
}
#burger {
  grid-area: burger;
}
#numberlines {
  grid-area: numberlines;
}
#phone {
  grid-area: phone;
  margin-bottom: 10px;
}
#envelope {
  grid-area: envelope;
  margin-bottom: 8px;
}
#descriptors {
  grid-area: descriptors;
  font-family: 'Amiko', sans-serif;
  font-size: 12px;
  letter-spacing: 2px;
}

#om-menu {
  position: absolute;
  right: 75px;
  top: 0px;
  height: 100%;
  display: none;
  align-items: center;
  width: 40%;
  z-index: 1000;
}

.flyout-menu {
  height: 100%;
  background-color: #000000;
  opacity: 0.7;
  white-space: nowrap;
}

/* document.body.style.backgroundColor = "rgba(0,0,0,0.4)"; */

.main-nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  padding-left: 100px;
  font-family: 'Crimson Text', serif;
  font-size: 3rem;
  color: #c0c0c0;
}

.main-nav li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  color: #c0c0c0;
}

.main-nav li a:hover {
  color: #ffffff;
  opacity: 1;
}


/* 'om' css rules */

.om-full-width {
  width: 100%;
  padding: 0px !important;
  margin: 0 !important;
}

.om-full-width img {
  min-width: 0px !important;
  width: 100% !important;
  height: auto !important;
}

.om-school-bg {
  color: #ffffff;
  margin: 0px;
  padding: 0px;
  background-image: url('images/image-11.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
}

hr.om-rule-short {
  margin-top: 20px;
  width: 40px;
  border: 1px solid grey;
}

.om-col-wrapper {
  float: left;
  text-align: center;
  width: 100%;
  margin-top: 74px;
  margin-bottom: 0px;
}

.om-col-wrapper-butted {
  float: left;
  text-align: center;
  width: 100%;
  padding-top: 0px;
  margin-top: -4px;
  margin-bottom: -4px;
}

.om-padded {
  padding-top: 74px !important;
  padding-bottom: 74px !important;
}

.butted {
  margin-top: -4px !important;
}

/* Container columns */

/* Page header image */
.om-page-header {
  width: 100%;
  margin-bottom: 20px;
}

.om-col {
  float: left;
  padding: 0px;
  margin: 0px;
}

/* Images over two cols */
.om-col-2 {
  width: 50%;
}

/* Images over three cols */
.om-col-3 {
  width: 33.333%;
}

/* Full column image */
.om-col-fullwidth {
  width: 100%;
}


.om-col-2-spaced {
  text-align: center;
  width: 50%;
}

.om-col-3-spaced {
  text-align: center;
  width: 33.333%;
}

/* Generic col images */
.om-col-img {
  width: 100%;
  margin: 0px;
  padding: 0px;
  height: auto;
}

.om-col-img-centered-multi {
  width: 86%;
}

.om-col-img-centered {
  width: 70%;
}

/* Cards for 'Work' link */
.om-nav-cards {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.om-nav-cards a {
  text-decoration: none;
}

.om-nav-card-left {
  padding-right: 10px;
}

.om-nav-card-right {
  padding-left: 10px;
}

.om-nav-card-image {
  width: 100%;
  display: block;
}

.om-nav-card-content {
  color: #000000;
  padding-top: 3px;
  padding-left: 11px;
}

.om-nav-card-content h3 {
  font-family: 'Yeseva One', serif;
  font-weight: 400;
  font-size: 1.3em;
  margin-top: 9px;
  margin-bottom: 2px;
}

.om-nav-card-content h4 {
  font-family: 'Amiko', sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin-top: 4px;
}


/* Flexbox code */
.om-flex-wrapper {
  float: left;
  margin-top: 75px;
  width: 100%;
}

.om-flexcol-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.om-flex-img {
  width: 20%;
}

/* ABOUT CSS */
.container-about {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
				grid-gap: 0;
        grid-template-areas:
          "about about about about"
          "pic1 pic12 pic3 pic4"
          "pic5 pic2 pic7 pic8"
					"pic9 pic10 pic11 pic6"
					"spacer spacer spacer spacer"
					"work work workPic workPic"
					"connectedPic connectedPic connected connected"
					"attitude attitude attitudePic attitudePic";
      }

      #about {
        grid-area: about;
        padding-left: 29px;
        padding-right: 29px;
      }
      #pic1 {
        grid-area: pic1;
      }
      #pic2 {
        grid-area: pic2;
      }
      #pic3 {
        grid-area: pic3;
      }
      #pic4 {
        grid-area: pic4;
      }
      #pic5 {
        grid-area: pic5;
      }
      #pic6 {
        grid-area: pic6;
      }
      #pic7 {
        grid-area: pic7;
      }
      #pic8 {
        grid-area: pic8;
      }
			#pic9 {
				grid-area: pic9;
			}
			#pic10 {
				grid-area: pic10;
			}
			#pic11 {
				grid-area: pic11;
			}
			#pic12 {
				grid-area: pic12;
			}
			#spacer {
				grid-area: spacer;
			}
			#work {
				grid-area: work;
			}
			#workPic {
				grid-area: workPic;
			}
			#connected {
				grid-area: connected;
			}
			#connectedPic {
				grid-area: connectedPic;
			}
			#attitude {
				grid-area: attitude;
			}
			#attitudePic {
				grid-area: attitudePic;
			}

			.om-para-block {
				background-color: #e9e9e9;
				padding: 15px;
				margin: 0px;
			}
			.om-para-block h1 {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.om-para-block p {
				margin-top: 10px;
				margin-bottom: 10px;
			}
			.minipic img{
				width: 100%;
				margin: -3px;
			}
			.om-text-container {
				padding-top: 20%;
			}
			.om-text-block {
				background-color: #e9e9e9;
				text-align: left;
				padding: 33px;
				padding-left: 87px;
			}
			.om-text-block h1 {
				margin: 0px;
				text-align: left;
			}
      .om-text-block h2 {
      	margin-top: 9px;
      }
      .om-text-block hr {
        width: 40px;
        border: 1px solid grey;
        margin-left: 0;
        margin-top: 22px;
        margin-bottom: 22px;
      }
			.om-text-block h2 {
				text-align: left;
        margin-top: 9px;
			}
			.om-text-block p {
				text-align: left;
				margin-left: 0px;
			}
      /* About */
      .om-text-block-left {
				background-color: #e9e9e9;
				text-align: left;
				padding: 33px;
				padding-left: 87px;
			}
			.om-text-block-left h1 {
				margin: 0px;
				text-align: left;
			}
      .om-text-block-left hr {
        width: 40px;
        border: 1px solid grey;
        margin-left: 0;
        margin-top: 22px;
        margin-bottom: 22px;
      }
			.om-text-block-left h2 {
				text-align: left;
        margin-top: 20px;
			}
			.om-text-block-left p {
				text-align: left;
				margin-left: 0px;
			}
      .topspace {
        margin-top: 34px;
      }
			.om-side-pic {
				padding-bottom: 50px;
        background-color: #f7f7f7;
			}
			.om-side-pic img {
				width: 100%;

			}
			.om-spacer-row {
				height: 109px;
			}


.om-quotes-top {
	margin-top: 40px;
}

.om-name-bottom {
	margin-bottom: 40px;
}

/* Contact page css */
.container-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
	grid-gap: 0;
  grid-template-areas:
    "contact-title contact-title"
    "contact-pic contact-info";
}

#contact-title {
  grid-area: contact-title;
}

#contact-pic {
  grid-area: contact-pic;
  margin-bottom: -4px;
}

#contact-info {
  background-color: #e9e9e9;
  grid-area: contact-info;
  padding-top: 61px;
}

#contact-info p {
  margin-bottom: 28px;
}

#contact-pic img {
  width: 100%;
}

/* Burger animation */
/* Burger surrounding div */
#burger {
  margin: 0;
  padding: 0;
}
/* Nav Icon static */
#nav-icon {
  width: 46px;
  height: 46px;
  position: relative;
  margin: 10px auto;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .5s ease-in-out;
  -moz-transition: .5s ease-in-out;
  -o-transition: .5s ease-in-out;
  transition: .5s ease-in-out;
  cursor: pointer;
  border-radius: 23px;
  background-color: #000000;
}

/* Spans general */
#nav-icon span {
  display: block;
  position: absolute;
  height: 3px;
  width: 24px;
  background: #ffffff;
  /* opacity: 1; */
  left: 11px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

/* Spans specific */
#nav-icon span:nth-child(1) {
  top: 14px;
}

#nav-icon span:nth-child(2),#nav-icon span:nth-child(3) {
  top: 22px;
}

#nav-icon span:nth-child(4) {
  top: 30px;
}

/* Open state */
#nav-icon.open span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

#nav-icon.open span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

#nav-icon.open span:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 21px;
}

#nav-icon.open span:nth-child(4) {
  top: 18px;
  width: 0%;
  left: 50%;
}

/* grid code */

.om-grid-wrapper {
  float: left;
  text-align: center;
  width: 100%;
  margin-top: 74px;
  margin-bottom: 0px;
}

.om-grid-block-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  grid-template-areas:
  "image1" "image2" "image3";
}

#image1 {
  grid-area: image1;
}

#image2 {
  grid-area: image2;
}

#image3 {
  grid-area: image3;
}

.om-grid-img {
  width: 100%;
}

.wp-block-cover__inner-container p {
	margin-top: 20px;
	margin-bottom: 20px;
}

/* WPForms */
div.wpforms-container-full .wpforms-form .wpforms-field-label {
  color: #000000;
  font-family: 'Amiko', sans-serif;
  font-size: 12px !important;
}

div.wpforms-container-full .wpforms-form .wpforms-field-sublabel {
  font-family: 'Amiko', sans-serif !important;
  color: #000000 !important;
}

/* Media breakpoints */
@media screen and (max-width: 1040px) {
  .om-flexcol-wrapper {
    display: block;
    text-align: center;
  }
  .om-flex-img {
    width: 60%;
  }
}

@media screen and (max-width: 992px) {
  .om-nav-cards {
    grid-template-columns: 1fr;
  }
  .om-col-2 {
    width: 100%;
  }
  .om-col-3 {
    width: 100%;
  }
  .om-col-2-spaced {
	margin-top: 30px;
    width: 100%;
  }
  .om-col-3-spaced {
    width: 100%;
  }
  #container {
    display: grid;
    height:100vh;
    grid-template-columns: 1fr;
    grid-template-rows: 70px 1fr;
    grid-template-areas:
      "mobileHeader"
      "content";
    text-align: center;
  }
  #header {
    display: none;
  }
  #mobileHeader {
    display: flex;
    grid-area: mobileHeader;
  }
  .header-logo {
    width: 50%;
    float: left;
	text-align: left;
  }
  .logo-mobile {
    margin-top: 9px;
    margin-left: 12px;
    width: 168px;
  }
  #burger {
    display: none;
  }
  #mobileBurger {
    width: 50%;
    text-align: right;
    display: block;
  }
  #mobileBurger img {
    width: 42px;
    margin-top: 14px;
    margin-right: 12px;
  }
  #contact-info {
    padding-top: 10px;
  }
  #numberlines {
    display: none;
  }
  #descriptors {
    display: none;
  }
  #envelope {
    display: none;
  }
  #phone {
    display: none;
  }
  #nav-icon {
    margin: 0px;
    margin-left: 11px;
  }
  #om-menu {
	position: absolute;
	align-items: center;
    top: 70px;
    right: 0px;
    bottom: 0px;
    width: 80%;
	  height: 77%;
  }
	.main-nav {
		padding-left: 10%;
	}
  .icon {
    width: 52px;
  }
  .om-nav-cards {
    width: 100%;
  }
  .om-nav-card-left {
    padding-right: 2px;
  }
  .om-nav-card-right {
    padding-left: 2px;
  }
  .om-text-container {
    padding-top: 24px;
  }
  .om-text-block {
    padding: 39px;
  }
  .om-spacer-row {
    height: 10px;
  }
  .container-contact {
    display: grid;
    grid-template-columns: 1fr;
  	grid-gap: 0;
    grid-template-areas:
      "contact-title"
      "contact-pic"
      "contact-info";
  }
  /*
  "pic1 pic12 pic3 pic4"
  "pic5 pic2 pic7 pic8"
  "pic9 pic10 pic11 pic6"
  */
  .container-about {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
		grid-gap: 0;
    grid-template-areas:
      "about about about about"
      "pic1 pic1 pic12 pic12"
      "pic3 pic3 pic4 pic4"
      "pic5 pic5 pic2 pic2"
      "pic7 pic7 pic8 pic8"
      "pic9 pic9 pic10 pic10"
			"pic11 pic11 pic6 pic6"
			"spacer spacer spacer spacer"
			"work work work work"
      "workPic workPic workPic workPic"
      "connected connected connected connected"
			"connectedPic connectedPic connectedPic connectedPic"
			"attitude attitude attitude attitude"
      "attitudePic attitudePic attitudePic attitudePic";
  }
  .om-side-pic {
    padding-bottom: 24px;
  }
	p {
		margin-left: 0px;
		margin-right: 0px;
	}
	.butted {
		margin-top: -4px;
		margin-bottom: 47px !important;
	}
	.wp-block-cover {
		margin-top: 46px !important;
	}
	.om-col-wrapper {
		margin-top: 46px;
	}
	.om-col-image {
		margin-top: -6px;
	}
	.main-nav li a {
		font-size: 33px;
	}
	.om-nav-cards {
		margin-top: 0px;
	}
	.om-nav-card-image {
		margin-top: 10px;
	}
	.om-nav-card-content h3 {
		margin-top: 5px;
	}

}