/* ==========================================================================
   MikeOrtega.net — main stylesheet
   ========================================================================== */

/* Main styles */
.clear { clear: both; }
html, body {overflow-x:clip;}
a { color: #0071BC; transition: 0.3s; transition-timing-function: ease-in-out; text-decoration: none; }
a:hover { color: #A5D7F8; transition: 0.3s; transition-timing-function: ease-in-out; }
body { display: flex; justify-content: center; align-items: center; font-family: elza-condensed, sans-serif; border-bottom: 7vh solid #f0f0f0; width:100vw; position: relative;}
#logo { display: block; background: url(/img/logo@4x.png); background-repeat: no-repeat; background-size: contain; text-indent: -9999px; float: left; }
#section1 { display: block; height: 100vh; overflow-x: hidden; width:100%;}
#section2 { display: block; width: 100%}
#main-content { display: block; padding: 0 6vw; margin: 0 auto; }
#navContainer { display: block;justify-content: center; align-content: center; align-items: center; position: relative; z-index: 2; }
#main-nav { display: block; margin: 20px 0 0 0; font-weight: 800; text-transform: uppercase; list-style: none; float: right; height: 36px; }
#main-nav li { display: inline-block; padding: 0; margin: 0 0 0 1.7vw; height: 36px; }
#main-nav li:first-child { margin: 0; }
#main-nav li a { display: inline-block; font-size: 36px; height: 36px; color: #000; border-bottom: 1px solid rgba(255,255,255,0); text-decoration: none; letter-spacing: -.03em; line-height: 100%; padding: 0 0 2px 0; transition: 0.5s; transition-timing-function: ease-in-out; }
#main-nav a:hover { color: #0071BC; border-bottom: 8px solid #A5D7F8; transition: 0.3s; transition-timing-function: ease-in-out; font-size: 36px; height: 46px; }
a.linkedin { display: block; width: 36px; background: url(/img/linkedin_icon@4x.png) bottom center; background-repeat: no-repeat; background-size: 32px 32px; text-indent: -9999px; line-height: 36px; height: 36px; border-bottom: 1px solid #fff; }
a.mailto { display: block; width: 36px; background: url(/img/mail_icon@4x.png) bottom center; background-repeat: no-repeat; background-size: 32px 32px; text-indent: -9999px; line-height: 36px; height: 36px; border-bottom: 1px solid #fff; }
.linkedin:hover, .mailto:hover { border: 0 !important; line-height: 36px; height: 36px !important; opacity: 0.3; }
#headlineWrapper { position: absolute; bottom: 0; right: 0; padding: 0 8vw 4vh 0; text-align: right; }
#headline h2 { font-weight: 800; color: #FF4E02; font-size: 6vw; line-height: 95%; letter-spacing: -.03em; }
#headline h3 { font-weight: 800; color: #000; font-size: 3vw; letter-spacing: -.03em; }
#headline h4 { font-weight: normal; color: #000; font-size: 2vw; }
#section2 h2, #section3 h2 { margin-top: 128px; line-height: 100%; text-transform: uppercase; font-size: 14vw; color: #eaeaea; font-weight: 800; letter-spacing: -.03em; display: flex; width: 100%; justify-content: center; align-items: center; text-align: center; }
#principles { width: 80%; margin: 64px auto 128px auto; }
#principles ul { display: inline-block; width: 100%; margin: 0; list-style: none; }
#principles li { display: inline-block; position: relative; padding: 64px 0; border-bottom: 1px solid #CCC; width: 100% !important; }
#principles li:last-child { border-bottom: 0; }

.numeric { float: left; font-size: 5vh; line-height: 100%; font-weight: 800; color: #A5D7F8; margin: 0 0 20px 0 !important; width: 60px; text-align: left;}
#principles h3 { font-size: 5vh; line-height: 100%; font-weight: 800; color: #000; }
#principles p { font-size: 4vh; line-height: 100%; font-weight: normal; color: #000; padding: 0 0 2vh 0;}
.plus {float: right; margin: 0 0 20px 20px; color: #dadada !important;}
#section3 { display: block; width: 100%; height: fit-content; padding: 0 0 96px 0;}
#section3 ul { list-style: none; width: 50%; margin: 64px auto 128px auto; padding: 0; }
#section3 li { margin: 7vh 0 0 0; clear: both; }
#section3 li:first-child { margin: 0; }
#section3 a { margin: 0 auto; display: inline-flex; position: relative; border: .7vw solid #f4f4f4; padding: 2vw; transition: 0.3s; transition-timing-function: ease-in-out; text-decoration: none; }
#section3 a:hover { border: .7vw solid #0071BC; transition: 1s; transition-timing-function: ease-in-out; }
.wpBadge { background: #0071BC; color: #fff; font-size: 1vw; width: fit-content; text-transform: uppercase; padding: 0 4px; font-weight: 800; margin-bottom: 16px; }
.wpHeader { font-size: 5vh; line-height: 100%; font-weight: 800; color: #000; }
.cta { border: 2px solid #0071BC; border-radius: 6px; padding: .5vh 1.5vw; margin: 32px 0 0 0; font-size: 2vh; width: fit-content; transition: 0.3s; transition-timing-function: ease-in-out; font-weight: 600;}
.cta:hover { transition: 0.3s; transition-timing-function: ease-in-out;}
#section3 a:hover .cta{color: #000; background: #A5D7F8; transition: 0.3s; transition-timing-function: ease-in-out;}
#section3 img { position: relative; height: 20vh; margin: 0 0 0 2vw; }
#section4 { width: 100%; background-color: #F8F8F8; padding: 64px 96px;}
#section4 h2 { display: flex; font-size: 4vw; color: #dadada; font-weight: 800; text-transform: uppercase; justify-content: center; align-items: center; width: 100%; letter-spacing: -.03em; }
#section4 h3 { width: 100%; display: flex; justify-content: center; align-items: center; padding: 4vh; font-size: 1.5vw; }
#section4 ul { display: block; list-style: none; margin: 0; padding: 0; text-align: center; justify-content: center; align-items: center; }
#section4 li { display: inline-block; padding: 16px 16px; margin: 16px 16px; width: 28% !important; }
#section4 img { width: 100%; }
#section5 { margin: 25vh auto 25vh auto; width: 50%; justify-content: center; align-items: center; text-align: center; font-size: 3vh; font-weight: normal; color: #000; }
#section5 h2 { font-size: 3.5vw; font-weight: 800; line-height: 100%; margin-bottom: 5vh; }
#section5 ul { width: 100%; list-style: none; margin: 0; padding: 0; }
#section4 a, #section5 a { font-weight: 800; }
#section6 { display: block; width: 100%; margin: 0 auto; }
#section6 img { width: 8vw; margin: 1vw; }
#section6 h2 { width: 100%; font-size: 2vw; font-weight: 800; line-height: 100%; margin-bottom: 2vh; letter-spacing: -.03e; color: #dadada; text-transform: uppercase; justify-content: center; align-items: center; text-align: center; }
#section6 ul { width: 100%; display: flex; padding: 0; margin: 0; list-style: none; justify-content: center; align-items: center; }
#footer p { display: block; width: 100%; font-size: 1vw; line-height: 100%; margin: 8vh 0 4vh; justify-content: center; align-items: center; text-align: center; }


#mobileSticky{display: block; border-top: 1px solid rgba(168,168,168,0); border-bottom: 1px solid rgba(168,168,168,0);}
#mobileNav li { display: inline-block; padding: 0; margin: 0 0 0 1.7vw; height: 36px; }
#mobileNav li:first-child { margin: 0; }
#mobileNav li a { display: inline-block; font-size: 36px; height: 36px; color: #000; border-bottom: 1px solid rgba(255,255,255,0); border-top: 1px solid rgba(255,255,255,0);text-decoration: none; letter-spacing: -.03em; line-height: 100%; padding: 0 0 2px 0; transition: 0.5s; transition-timing-function: ease-in-out; }
#mobileNav a:hover { color: #0071BC; border-bottom: 8px solid #A5D7F8; transition: 0.3s; transition-timing-function: ease-in-out; font-size: 36px; height: 46px; }
#mobileNav a.linkedin { display: block; width: 36px; background: url(/img/linkedin_icon@4x.png) bottom center; background-repeat: no-repeat; background-size: 32px 32px; text-indent: -9999px; line-height: 36px; height: 36px; border-bottom: 1px solid #fff; }
#mobileNav a.mailto { display: block; width: 36px; background: url(/img/mail_icon@4x.png) bottom center; background-repeat: no-repeat; background-size: 32px 32px; text-indent: -9999px; line-height: 36px; height: 36px; border-bottom: 1px solid #fff; }

.prinHeader { float: left; position: relative; display: block; width: 50%; }
.prinCopy { float: right; width: 50%; padding: .5vh 0 0 0; text-align: right;}
#oneLine .prinCopy {width: 40% !important;}
#threeLine .prinCopy {width: 40% !important;}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

  body {padding: 16px; background: #fff url(/img/mobileBack_head.jpg) top center; background-size: 105vw; background-repeat: no-repeat; width: 100%;}
  #logo {width: 150px; height:48px; margin: 0 !important;}
  #main-nav {display: none;}
  #section1 {height: 100vh; position: relative; display: block;}
  #section2 {display: block; padding: 0 !important; width: 100vw !important;}
  #headlineWrapper {width: 100%; position:absolute; top: 400px; left: 0; text-align: center;padding: 0 2vw;}
  #headline h2 {font-size: 15vw; margin-bottom: 2vh;}
  #headline h3 {font-size: 9vw;}
  #headline h4 {font-weight: normal;font-size: 6vw;}
  #section2 h2 {display: flex; margin: 0; padding: 0; font-size: 51vw; line-height: 80%; text-align: center; justify-content: center; align-items: center;}
  #section3 h2 {display: flex; margin: 0; padding: 64px 0 0 0; font-size: 41vw; line-height: 80%; text-align: center; justify-content: center; align-items: center;}
  #principles{width: auto; margin: 0 0 64px 0; padding: 0 !important;}
  #principles ul{width: auto; margin: 0 16px; padding: 0 !important;}
  #principles li{padding: 64px 0;}
  #principles li:last-child{padding: 64px 0 0 0;}
  #principles h3 {font-size:5vh;}
  #principles p {font-size:3vh;}
  #section3 {padding: 16px 0;width: 100vw !important;}
  #section3 ul {width: auto;margin: 64px 16px 15vh 16px; padding: 0;}
  #section3 a {padding: 4vw; border: 11px solid #F8F8F8;}
  #section3 a:hover{border: 11px solid #0071BC;}
  .wpBadge {font-size: 2vh; margin-bottom: 1vh;}
  .wpHeader {font-size:3.5vh;}
  .cta{ padding: .2vh 2vw; margin: 16px 0 0 0; font-size: 2.3vh;}
  #section3 img{height: 15vh;}
  #section4 {padding: 48px 16px }
  #section4 h2 {font-size: 13vw;}
  #section4 ul{margin: 0 0 0 8px; text-align: center;}
  #section4 li {display: inline-block; padding: 0; margin: 16px 16px; width: 88% !important; text-align: center;}
  #section4 img {width: 70%;}
  #section4 h3 {font-size: 4.3vw;}
  #section5 {width: 100%;margin: 15vh auto 15vh auto;}
  #section5 h2 {font-size: 12vw; width: 90%; margin: 0 auto 48px auto;}
  #section6 h2{font-size: 6vw; letter-spacing: -.3px}
  #section6 ul{display: block; list-style: none; margin: 0; padding: 0; text-align: center; justify-content: center; align-items: center;}
  #section6 li{display: inline-block; padding: 0px; margin: 10px;  width: 33% !important;}
  #section6 img{width: 100%;}
  #footer p {font-size: 4vw;}

  .prinHeader {float: left; display: block; margin-bottom: 5vh;}
  .prinCopy {float: right; padding: 0 0 0 5vw;}
  .numeric { font-size: 5vh; width: fit-content; margin: 0 10px 60px 0 !important;}
  .plus {margin: 0 0 34px 10px;}
  #principles p { font-size: 3.7vh;}

  #oneLine .prinHeader{width: 100% !important;}
  #oneLine .prinCopy{width: 95% !important;}

  #twoLine .prinHeader{width: 60% !important;}
  #twoLine .prinCopy{width: 100% !important;}

  #threeLine .prinHeader{width: 75% !important;}
  #threeLine .prinCopy{width: 90% !important;}

  #fourLine .prinHeader{width: 70% !important;}
  #fourLine .prinCopy{width: 80% !important;}


}



/* Small devices (phones, 600px - 1000px) */
@media only screen and (min-width: 600px) {

  body {padding: 24px; background: #fff url(/img/tabletBack_head2.jpg?v=2) top center; background-size: 105vw; background-repeat: no-repeat;}
  #logo {width: 150px; height:48px;}
  #main-nav{display: none;}
  #section1{height: 500px; display: block; position: relative;}
  #headlineWrapper {padding: 0 2vw 2vh 0;text-align: right;}

  .prinHeader {float: left; display: block; margin-bottom: 5vh;}
  .prinCopy {float: right; padding: 0 0 0 5vw;}
  .numeric { font-size: 5vh; width: fit-content; margin: 0 10px 80px 0 !important;}
  .plus {margin: 0 0 20px 10px;}
  #principles p { font-size: 3.7vh;}

  #oneLine .prinHeader{width: 50% !important;}
  #oneLine .prinCopy{width: 50% !important;}

  #twoLine .prinHeader{width: 50% !important;}
  #twoLine .prinCopy{width: 50% !important;}

  #threeLine .prinHeader{width: 50% !important;}
  #threeLine .prinCopy{width: 50% !important;}

  #fourLine .prinHeader{width: 50% !important;}
  #fourLine .prinCopy{width: 50% !important;}  


}



/* Medium devices (landscape tablets, 1000px and up) */
@media only screen and (min-width: 1000px) {

  body {padding: 36px; background: #fff url(/img/desktopBack_head.jpg?v=4) top center; background-size: 105vw; background-repeat: no-repeat;}
  #logo {width: 220px; height:70px;}
  #main-nav{display: none;}
  #section1{height: 600px; }
  #headlineWrapper {position:absolute; bottom: 0;right: 0; padding: 0 4vw 4vh 0;text-align: right;}
  #navContainer{display: block;}
  #mobileSticky{display: none;}

  .prinHeader {float: left; display: block; margin-bottom: 5vh;}
  .prinCopy {float: right; padding: 0 0 0 5vw;}
  .numeric { font-size: 5vh; width: fit-content; margin: 0 10px 120px 0 !important;}
  .plus {margin: 0 0 20px 10px;}

  #oneLine .prinHeader{width: 40% !important;}
  #oneLine .prinCopy{width: 57% !important;}

  #twoLine .prinHeader{width: 30% !important;}
  #twoLine .prinCopy{width: 70% !important;}

  #threeLine .prinHeader{width: 35% !important;}
  #threeLine .prinCopy{width: 65% !important;}

  #fourLine .prinHeader{width: 30% !important;}
  #fourLine .prinCopy{width: 70% !important;}  

}



/* Large devices (desktops, landscape tablets, 1100px and up) */
@media only screen and (min-width: 1150px) {
  body {padding: 36px; background: #fff url(/img/desktopBack_head.jpg?v=4) top center; background-size: 105vw; background-repeat: no-repeat;}
  #section1{height: 100vh; }
  #headlineWrapper {padding: 0 0 6vh 0;text-align: right;}
  #section2{padding-top: 96px;}
  #main-nav { display: block;} 
}



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

  body {padding: 0 16px;}  
  #mobileSticky{display: block; position: sticky; top: 2vh; width: 100%; height: 88px; transition: 0.4s all;z-index: 10; padding: 20px 20px;}
  #navContainer{display: none;}
  #mobileSticky a:hover {border-bottom: none;}
  #mobileHeader h1{float: left;}

  #mobileNav{float: right;}
  #mobileHeader ul {display: none;}
  #mobileHeader li {margin: 0 0 0 4vw; padding: 4px 0 0 0;}
  #mobileHeader li:first-child {margin: 0;}
  #logo{ transition: 0.4s all;}

}