@charset "UTF-8";
/* The Magnet Planner

magnetplanner.com

Designed & Developed by A&M Media
© A&M Media
=======================================*/

/* Site Color Palette
=======================================
YELLOW: rgba(249,237,50,1) #f8ed31
ORANGE #1: rgba(251,176,64,1) #fbaf3f
ORANGE #2: rgba(247,148,30,1) #f7931d
ORANGE #3: rgba(241,90,41,1) rgb(0,167,157)
ORANGE #4: rgba(239,65,54,1) #ef4036
BLUE #1: rgba(164,194,219,1) #a3c1da
BLUE #2: rgba(0,117,178,1) #0074b1
GRAY: rgba(46,59,66,1) #2e3a41

=======================================*/



/* Table of Contents
=======================================
1) GLOBAL
  a) FONT BUILD
  b) SCREENS
  c) GLOBAL CONTENT
  d) FULLPAGE SECTIONS & SLIDES
  e) SECTION TITLE
  f) NAV
  
2) SECTION 1 - INDEX
3) SECTION 2 – THE TOOL
4) SECTION 3 – SERVICES
5) SECTION 4 – ABOUT US
6) SECTION 5 - CONTACT



4) RESPONSIVE
 a) > 640px
 b) > 670px
 c) > 768px

=======================================*/



/*##############################################################################################################################################
##############################################################################################################################################*/

/* 1) GLOBAL */
  /* a) FONT BUILD */
  @font-face  { font-family: klinic-book; src: url('../fonts/KlinicSlabBook.otf'); }
  @font-face  { font-family: klinic-light; src: url('../fonts/KlinicSlabLight.otf'); }
  @font-face  { font-family: klinic-medium; src: url('../fonts/KlinicSlabMedium.otf'); }
  @font-face  { font-family: klinic-bold; src: url('../fonts/KlinicSlabBold.otf'); }
  
  /* b) SCREENS */
  .bkgd-screen-blue { position: relative; width: 100%; height: 100%; background: rgba(0,117,178,.7); background-size:cover; z-index: ; padding: 8% 0; }
  .bkgd-screen-white { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 14% 0 0 0; }
  .bkgd-solid-blue { position: relative; width: 100%; height: 100%; background: rgba(40,37,97,1); background-size:cover; z-index: ; padding: 12% 0 0 0; }
  .bkgd-solid-blue-110 { position: relative; width: 100%; height: 100%; background: rgba(40,37,97,1); background-size:cover; z-index: ; padding: 110px 0 0 0; }
  .bkgd-solid-white { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 14% 0 0 0; }
  .bkgd-solid-white-110 { position: relative; width: 100%; height: 100%; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 110px 0 0 0; }
  .bkgd-solid-white-110-scoll { position: relative; width: 100%; height:auto; background: rgba(255,255,255, 0.7); background-size:cover; z-index: ; padding: 110px 0; }
  
  /* c) GLOBAL CONTENT */
  .content { position: relative; display: block; margin: auto; width: 100%; height: auto; }
    .content img { display:block; margin:auto; padding: 0 0 10px 0; }
    .content h1 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h2 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h3 { text-align: center; font-family: "klinic-medium", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h4 { text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #2e3a41; letter-spacing: 1px; }
    .content h5 { text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #fff; letter-spacing: 1px; }
    .content h6 { text-align: center; font-family: "klinic-bold", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 400; font-size: 4vh; color: #fff; letter-spacing: 1px; }
    .content p { margin: auto; text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; font-size: 1em; line-height: 1.4em; color: #2e3a41; max-width: 800px; }
    
  /* d) FULLPAGE SECTIONS & SLIDES */
  #section0, #section1, #section2, #section3, #section4, #section5, #section6, #section7  { width: 100%; height: 100%; }
  #section0 { background-image:rgba(255,255,255,1); background-size:cover; }
  #section1 { background-color:rgba(255,255,255,1); background-size:cover; }
  #section2 { background-color:rgba(255,255,255,1); background-size:cover; }
  #section3 { background-color:rgba(255,255,255,1); background-size:cover; }
  #section4 { background-color:rgba(255,255,255,1); background-size:cover; }
  #section5 { background-image:rgba(255,255,255,1); background-size:cover; }
  #section6 { background-color:rgba(255,255,255,1); background-size:cover; }
  #section7 { background-color:rgba(255,255,255,1); background-size:cover; }

  
  #slide0 { background-image:url("../art/index-bkgd1.jpg"); background-size:cover; }
  #slide1 { background-image:url("../art/index-bkgd2.jpg"); background-size:cover; }
  #slide2 { background-image:url("../art/index-bkgd3.jpg"); background-size:cover; }
  #slide3 { background-image:url("../art/index-bkgd4.jpg"); background-size:cover; }

  /* e) SECTION TITLE */
  .section-title { position:absolute; top:0; left:0; display: block; padding: 18px 26px 18px 26px; font-family: 'klinic-bold'; font-size: 6vh; color: #fff; background-color:rgb(0,167,157); letter-spacing: 3px; z-index: 301; }
  .mobile-on { display: none; }
  
  /* e) NAV */
  nav { position:fixed; top:0; right:0; margin:0; padding:0; z-index: 301; }
  .nav-bars i { font-size: 2.2em; }
  .nav-bars a { display: block; text-decoration: none; color:#fff; padding: 20px; background-color:rgb(0,167,157); }

  .toggle { display: none }
  
  .nav-menu { display: none; padding: 0 40px 10px 30px; background-color:rgb(0,167,157); font-family: 'klinic-book', Georgia; font-size:2em; color:#FFFFFF; border-radius: 0 0 0 20px; }
  .nav-menu ul { list-style: none; }
  .nav-menu li { padding:0 0 20px 0; }
  .nav-menu a { color:#fff; text-decoration: none; transition: all .3s ease-in-out; }
  .nav-menu a:hover { color:#f8ed31; }
  .nav-menu i { font-size: .7em; color: #fff; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 2) SECTION 1 - INDEX */
  .logo { position: absolute; top:0; left: 0; padding: 20px 0 0 20px; z-index: 299; }
  .logo img { width: 130px; }
  
  .index-top-container { width: 100%; padding:30px 0 20px 0; margin: 0 0 15px 0; z-index: 301; }
    .index-top-container img { display: block; width:70%; padding: 0; }

  .index-bottom-container { width: 100%; padding:30px 0; margin: 15px 0 15px 0; background:rgba(241,90,41,0.7); }
  .learn-more { width: 100%; margin:auto; padding:0; }
    .learn-more a { display: block; padding: 20px; width: 100px; text-decoration: none; font-family: 'klinic-book'; font-size: 1em; color: #fff; background-color: rgba(247,148,30,0.6); transition: all .3s ease-in-out; margin: auto; }
    .learn-more a:hover { background-color:rgba(247,148,30,1); }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 3) SECTION 2 - THE TOOL */
  .tool-top-container { width: 100%; margin: auto; padding: 20px 0 40px 0; }
    .tool-top-container img { display: block; width:70%; padding: 0; }
  
  .tool-middle-container { width: 100%; margin: auto; text-align: center; margin-bottom: 8%; }
    .tool-middle-container ul { width: 80%; display: inline-block; }
    .tool-middle-container li { width: 16%; padding: 0 15px; margin-right: -4px; display: inline-block; vertical-align: top; }
      .tool-middle-container li img { width: 60%; margin:auto;}
      .tool-middle-container li p { font-family: 'klinic-bold'; font-size: 21px; color: #2E3A41; }
  
  .tool-bottom-container { position: absolute; bottom: 0; margin: auto; width: 100%; padding: 0; font-family: 'klinic-medium'; font-size: 4vh; color: #fff; text-align:center; }
    .tool-bottom-container h1 { display: block; width: 100%; background-color: #fbaf3f; padding: 10px 0; letter-spacing: 1px; }
    .tool-bottom-container a { display: block; width: 100%; padding: 10px 0; text-decoration: none; background-color: #f7931d; transition: all .3s ease-in-out; color: #fff; letter-spacing: 1px; }
    .tool-bottom-container a:hover { background-color: rgb(0,167,157); }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 4) SECTION 3 - SERVICES */
  .services-container { margin: auto; display: block; padding: 0; }
    .services-container h1 { font-family: 'klinic-bold'; font-size: 5vh; color: #fff; padding: 0 0 10px 0; font-weight:400; }
    .services-container h2 { font-family: 'klinic-book'; font-size: 3vh; color: #fff; padding: 0 0 10px 0; max-width:85%; margin: auto; font-weight:400; padding-bottom: 30px; }
    .services-container h2 strong { font-family: 'klinic-bold'; }
    .services-container h3 { width: 100%; padding: 10px 0; background-color: rgba(255,255,255,.7); font-family: 'klinic-medium'; font-size: 2vh; color:#000; margin-bottom: 10px; font-weight:400; }
    .services-container p { font-family: 'klinic-book'; font-size: 2.5vh; color: #fff; padding: 0 0 2px 0; letter-spacing: 2px; line-height: 3vh; }
    .services-container p i { font-size:2vh; }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 5) SECTION 4 - ABOUT US */
  .about-container { max-width: 85%; margin: auto; color: #000; }
    .about-container  img { width:30%; padding-bottom:20px; }
    .about-container h1 { font-family: 'klinic-bold'; font-size: 6vh; font-weight:400; padding: 0 0 10px 0; }
    .about-container h2 { font-family:'klinic-bold'; font-size: 3vh; font-weight:400; padding: 0 0 10px 0; }
    .about-container p { font-family: 'klinic-book'; font-size: 1.3em; padding: 0 0 20px 0; }
  .contact-us a { margin-bottom: 40px; display: block; padding: 20px; width: 96px; text-decoration: none; font-family: 'klinic-book'; font-size: 1em; color: #fff; background-color: #f7931d; transition: all .3s ease-in-out; margin: auto; }
  .contact-us a:hover { background-color:rgb(0,167,157); }

/*##############################################################################################################################################
##############################################################################################################################################*/

  /* 5) SECTION 4 - CONTACT US */
  .contact-container { max-width: 100%; margin: auto; padding: 0; margin:80px 0; }   
    .contact-container h1 { font-family: 'klinic-bold'; font-size: 6vh; color: #000; }
    .contact-container h2 { font-family: 'klinic-book'; font-size: 3.5vh; color:#000; margin-bottom: 30px; }
    input:focus, select:focus, textarea:focus, button:focus { outline: none; }
    .contact-container form { width: 60%; margin: auto; }
      .contact-container input, textarea { border: none; padding: 23px 20px 20px 20px; width: 100%; display: block; font-family: 'klinic-book'; font-size: 1.2em; line-height: 1.2em; color:#2E3A41; margin-bottom: 6px; }
      .contact-container button { border: 0; cursor: pointer; display: block; padding: 23px 20px 20px 20px; width: auto; text-decoration: none; font-family: 'klinic-book'; font-size: 1.2em; color: #fff; background-color: #f7931d; transition: all .3s ease-in-out; margin: auto; }
      .contact-container button:hover { background-color:rgb(0,167,157); }

/*##############################################################################################################################################
##############################################################################################################################################*/


/* 4) RESPONSIVE */
  /* a) MAX WIDTH 640PX */ 
  @media only screen 
  and (max-width : 640px)
  and (orientation : portrait)  { 
  .logo img { width: 120%; }
  .controlArrow.prev { display: none; }
  .controlArrow.next { display:none; }
  .index-top-container { width:100%; box-sizing:border-box; padding:30px 10% 15px 10%; margin-top:80px;}
  .index-top-container img { width:100%; }
  .section-title { font-size: 7vh; z-index: 299; }
  .mobile-off { display:none; }
  .mobile-on { display:block; }
  
  .content h1 { font-size: 1.5em; }
  .content h2 { font-size: 1.5em; }
  .content h3 { font-size: 1.5em; }
  .content h4 { font-size: 1.5em;  }
  .content h5 { font-size: 1.5em; }
  .content h6 { font-size: 1.5em; }
  .content p { margin: auto; text-align: center; font-family: "klinic-book", Arial, Helvetica, sans-serif; font-style: normal; font-weight: 300; font-size: 1.2em; line-height: 1.4em; color: #2e3a41; max-width: 800px; }
  
  .tool-top-container { padding-bottom: 6%; }
  .tool-top-container h1 { font-size: 2em; }
  .tool-top-container img { width:96%; margin-top: 80px; }
  .tool-middle-container ul { width: 100%;  }
  .tool-middle-container li { display: block; width: 96%; padding: 0 2% 5% 2%; }
    .tool-middle-container li img { height:60px; }
    .tool-middle-container li p { font-size: 1.6em; line-height: 1em; }
    .tool-middle-container li p:last-child { margin-bottom:20px; }
  .tool-bottom-container { position:relative; display: block; }

  .bkgd-screen-blue { height: auto; padding: 0; }
  .services-container h1 { margin-top: 80px; font-size: 2em;  }
  .services-container h2 { display:block; font-size: 1.5em; }
  .services-container img { height:30px; }
  .services-container h3 { width: 96%; padding: 10px 2%;  font-size: 1.5em;  margin-bottom: 10px; }
  .services-container p { font-size: 1.6em; padding: 0 0 16px 0; line-height: 1em; color: #fff; }
  .services-container p:last-child { padding-bottom: 50px; }
  .services-container p i { font-size:.9em; }
    
  .about-container { max-width: 88%; margin: 84px 6% 60px 6%; }
    .about-container  img { width:50%; padding-bottom:10px; }
    .about-container h1 { font-family: 'klinic-bold'; font-size: 3em; font-weight:400; padding: 0 0 10px 0;  }
    .about-container h2 { font-family:'klinic-bold'; font-size: 1.5em; font-weight:400; padding: 0 0 10px 0; }
    .about-container p { font-family: 'klinic-book'; font-size: 1.3em; padding: 0 0 20px 0; }
  .contact-us a { display: block; padding: 20px; width: 96px; text-decoration: none; font-family: 'klinic-book'; font-size: 1em; color: #fff; background-color: #f7931d; transition: all .3s ease-in-out; margin: auto; }
  .contact-us a:hover { background-color:rgb(0,167,157); }
  
  .contact-container { max-width: 88%; height:auto; margin: auto; padding: 0 0 40px 0; }
    .contact-container h1 { margin-top: 84px; font-size: 3em; }
    .contact-container h2 { font-size: 2em; margin-bottom: 20px; }
    input:focus, select:focus, textarea:focus, button:focus { outline: none; }
    .contact-container form { width: 100%; }
      .contact-container input, textarea { width: 88%; padding: 12px; margin-bottom: 10px; }
      .contact-container button { padding: 12px;  }

     }
  
  @media only screen 
  and (max-width : 670px)
  and (orientation : landscape) { }
  
  /* iPads (portrait)*/
  @media only screen 
  and (min-width : 768px) 
  and (orientation : portrait) { }
  
  /*Mobile Devices in Landscape*/
  @media only screen 
  and (orientation : landscape ){ }