/* ==========================================================================
   Base Foundation
   ========================================================================== */

*, *:before, *:after{
    box-sizing:border-box;
    }


body {
    margin:0;
    font-size:16px; 
    font-weight:100; 
    letter-spacing:1.2px;
    font-family: Helvetica;
}

.header-container-wrapper{
    background:#EBEBEB; 
}

.body-container-wrapper{
    background:#FFFFFF; 
}

.footer-container {
    color:#68BCFF;
    text-align:center;
}

.footer-container-wrapper{
    background:#0D0F0C; 
}

a{
    text-decoration:none;
    color:#68BCFF; 
}

a:hover{
    color:#3D8CFF; 
}

h1, h2, h3, h4, h5, h6{
    color:#68BCFF;
    font-family: Helvetica;
    }

.landing-page {
    background-color: #fff;
}

/* ==========================================================================
   Layout
   ========================================================================== */

.page-center{
    max-width:1080px; 
    margin:0 auto!important; 
    display:block; 
    float:none!important; 
    padding: 25px 0; 
}

.page-center h1{
    text-align:center; 
    color: #68BCFF; 
    font-size:70px; 
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.4);
}
.page-center h2{
    font-size:40px; 
    text-align:center; 
    margin: 0 0 20px 0; 
}

.row-fluid .headline{
    display:table; 
    min-height:350px;
    width:100%;
}

.headline .cell-wrapper {
    display:table-cell; 
    vertical-align:middle;
}

/* ==========================================================================
   Specific IDs and Classes
   ========================================================================== */

#comics {
    background:#000000;
}

.comic {
    position:relative; 
    margin-bottom:25px;
}

.comic-text{
    position:absolute; 
    top:0; 
    left:0;
    background:rgba(0, 0, 0, .7); 
    color:#FFFFFF; 
    height:100%;
    width:100%;
    opacity:0;
    padding:20px; 
}

.comic-text h2{
    text-align:left; 
}

.comic-text a:hover{
    color:#fff; 
}

.comic:hover .comic-text{
    opacity:1;
}

#main-top img{
    border-radius:280px; 
    display:block;
    margin:0 auto;
}

#bg-image{
    background: url('//cdn2.hubspot.net/hubfs/525856/Mattisnotarobot/Meylikhov.jpg'); 
    background-size:cover;
    background-position: center top; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#bg-image-2{
    background: url('//cdn2.hubspot.net/hubfs/525856/Mattisnotarobot/A06-Album-Cover.jpg'); 
    background-size:cover;
    background-position: right top; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#bg-image-3{
    background: url('//cdn2.hubspot.net/hubfs/525856/Mattisnotarobot/Control/Control-000.jpg'); 
    background-size:cover;
    background-position: center; 
    background-repeat: no-repeat;
    background-attachment: fixed;
}

#about{
    background:#F6F6F6;
}

#music{
    background:#8BA870;
}

/* ==========================================================================
   Pop-Up Box
   ========================================================================== */

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target {
  visibility: visible;
  opacity: 1;
}

.popup {
  margin: 70px auto;
  padding: 20px;
  background: #fff;
  border-radius: 5px;
  width: 50%;
  position: relative;
  transition: all 5s ease-in-out;
}

.popup h3 {
  margin-top: 0;
  color: #333;
  font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: #333;
}
.popup .close:hover {
  color: orange;
}
.popup .content {
  max-height: 30%;
  overflow: auto;
}

/* ==========================================================================
   Menu
   ========================================================================== */

.hs-menu-wrapper > ul{
    max-width:768px; 
    display:block; 
    margin:0 auto; 
    list-style:none; 
    margin-top:25px;
    padding:0; 
}

.hs-menu-wrapper > ul > li{
    display:inline-block;
    width:20%;
    text-align:center; 
    float:left; 
    position:relative; 
}

.hs-menu-wrapper ul li a{
    /* color:#DFB201; */
    text-decoration:none; 
    font-size:30px;
    font-family: Helvetica;
}
.hs-menu-wrapper ul li a:hover{
    /* color:#BB0303; */
}

ul.hs-menu-children-wrapper{
    position:absolute; 
    list-style:none; 
    background:#fff; 
    padding:0;
    width:100%;
    display:none; 
}

ul.hs-menu-children-wrapper li{
    margin:20px 0; 
}

ul.hs-menu-children-wrapper li a{
    color:#68BCFF; 
}

ul.hs-menu-children-wrapper li a:hover{
   /* color:#DFB201; */
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    display:block; 
}

/* ==========================================================================
   Forms
   ========================================================================== */

form.hs-form{
    display:block;
    margin:0 auto;
    max-width:500px; 
}

.hs-input, form.hs-form fieldset.form-columns-1 .hs-input { 
    width:100%; 
    border-radius:8px; 
    font-size:16px; 
    height:44px; 
    border: 1px solid #C2C2C2; 
    padding:8px;
}

form.hs-form textarea{
    height: 75px!important; 
}

.hs-form-field > label{
    margin:15px 0; 
    display:none;
}

form.hs-form fieldset.form-columns-1 input[type="radio"]{
    width:auto; 
    height:16px; 
    margin-right:15px; 
}

.hs-field-desc{
    font-size:13px; 
}

.hs-form input[type="submit"]{
    width:100%; 
    /* max-width:320px; */
    height:50px; 
    background:#BB0303; 
    color:#FFFFFF; 
    border:none;
    border-radius:8px;
    -webkit-appearance: none; 
    margin-top:15px; 
    font-size:20px;
    cursor:pointer; 
}

.hs-form input[type="submit"]:hover{
    background:#DFB201;
}

form ul{
    list-style:none;
   padding:0; 
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media (max-width:768px){
.hs-menu-wrapper > ul > li{
        width:100%; 
    }

ul.hs-menu-children-wrapper{
        position:relative; 
    }

ul.hs-menu-children-wrapper li{
    margin:0; 
}

.headshot{
    margin-bottom:25px;
}

#about img{
    float:none!important; 
    margin:0 auto 25px auto!important; 
    display:block; 
}

#about .page-center, #music .page-center, #contest .page-center{
    padding:25px; 

}
    }
    
/* ==========================================================================
   Smartphone Portrait and Landscape Hide Thing for Practicum
   ========================================================================== */    
   
@media (max-width:480px) {
    .mobileHide {display: none !important;}
}    

/* ==========================================================================
   CSS3 Fanciness
   ========================================================================== */

a{
   transition:  color .3s ease-in-out; 
   -webkit-transition:  color .3s ease-in-out;
    -moz-transition:  color .3s ease-in-out;
    -ms-transition:  color .3s ease-in-out;
    -o-transition:  color .3s ease-in-out; 
}

.comic-text{
    transition: opacity .3s ease-in-out; 
    -webkit-transition:  opacity .3s ease-in-out;
    -moz-transition:  opacity .3s ease-in-out;
    -ms-transition:  opacity .3s ease-in-out;
    -o-transition:  opacity .3s ease-in-out;
}

.hs-form input[type="submit"]{
    transition:  background .3s ease-in-out; /
    -webkit-transition:  background .3s ease-in-out;
    -moz-transition:  background .3s ease-in-out;
    -ms-transition:  background .3s ease-in-out;
    -o-transition:  background .3s ease-in-out;
}

ul.hs-menu-children-wrapper{
    display:block; 
    max-height:0;
    overflow:hidden; 
    transition: all .3s ease-in-out; 
    -webkit-transition:  all .3s ease-in-out;
    -moz-transition:  all .3s ease-in-out;
    -ms-transition:  all .3s ease-in-out;
    -o-transition:  all .3s ease-in-out;
}

.hs-menu-wrapper ul li.hs-item-has-children:hover ul.hs-menu-children-wrapper{
    max-height:220px; 
}



/* ==========================================================================
   Mobile Menu - Hubspot Standard Toggle Menu - Copy/Pasted for Practicum
   ========================================================================== */


/**
 * Special Note
 *
 * When the menu is open, a class of .mobile-open is applied to the body. You can 
 * use this for custom styling on any element when the menu is in the open position.                     
 */

@media (min-width: 768px){

  a.mobile-trigger, a.child-trigger {
      display: none !important; /* Hide button on Desktop */
  }

}

@media (max-width: 767px){

  /* Variables
     ========================================================================== */

     /* Set Mobile Menu Background Color */
        /* Set Link Color */
   /* Set Link Hover Color */


  /* Menu Reset - Remove styling from desktop version of custom-menu-primary */
  /* Place any additional CSS you want removed from the mobile menu in this reset */
  .custom-menu-primary, .custom-menu-primary *{
    display: block;
    float: none;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    bottom: auto;
    padding: 0px;
    margin: 0px;
    background-image: none;
    background-color: transparent;
    border: 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    -webkit-box-shadow: none;
    -moz-box-shadow:    none;
    box-shadow:         none; 
    max-width: none;
    width: 100%;
    height: auto;
    line-height: 1;  
    font-weight: normal;
    text-decoration: none;
    text-indent: 0px;
    text-align: left;
    color: #ffffff;
    }


  /* Toggle Button
     ========================================================================== */

  a.mobile-trigger {
      display: inline-block !important; /* Hide button on Desktop */
      cursor: pointer; /* Mouse pointer type on hover */
      position: absolute; /*******************************************/
      top: 0px;          /* Position Button at top right of screen  */
      right: 10px;        /*******************************************/
      width: auto; /* Button width */
      height: auto; /* Button height */      
      padding: 12px 10px;
      background: #000000; /* Background color */
      z-index: 99999999999; /* Z-index to keep button on top of other layers */
      -webkit-transition: background-color 0.2s linear; /* Button color transition effect */
      font-size: 16px;
      font-weight: normal;
      text-align: left;
      text-transform: uppercase;
      -webkit-border-bottom-right-radius: 6px;
      -webkit-border-bottom-left-radius: 6px;
      -moz-border-radius-bottomright: 6px;
      -moz-border-radius-bottomleft: 6px;
      border-bottom-right-radius: 6px;
      border-bottom-left-radius: 6px;
      -webkit-transition:color .2s ease-in; 
      -moz-transition:color .2s ease-in;
      transition:color .2s ease-in;
  }

  a.mobile-trigger:hover {
      text-decoration: none; /* Removes link text underline on button */
      color: #ffffff;
  }

  a.mobile-trigger span{
      display: inline;
  }

  a.mobile-trigger span:before{
      position: absolute;
      content: 'Menu'; /* Change the text on the closed toggle button */
  }

  a.mobile-trigger span:after{
      position: relative;
      right: 2px;
      content: 'Close'; /* Change the text on the open toggle button */
      background-color: #000000;
      opacity: 0;
      transition: opacity .4s ease-in-out;
      -moz-transition: opacity .4s ease-in-out;
      -webkit-transition: opacity .4s ease-in-out; 
  }

  /* Change button when menu is open */
  .mobile-open a.mobile-trigger{
      -webkit-transition:background-color 0.2s linear; /* Button color transition effect */
      -moz-transition:background-color 0.2s linear; /* Button color transition effect */
      transition:background-color 0.2s linear; /* Button color transition effect */
      background: transparent; /* Changes button background to be slightly darker than open menu color */  
  }

  .mobile-open a.mobile-trigger span:after{
     opacity: 1; 
  }


  /* Toggle Button Icon & Animations
     ========================================================================== */

  a.mobile-trigger i {
      display: inline;
      position: relative;
      top: -5px;
      margin-left: 5px;
      -webkit-transition-duration: 0s;
      -webkit-transition-delay: .2s;
      -moz-transition-duration: 0s;
      -moz-transition-delay: .2s;
      transition-duration: 0s;
      transition-delay: .2s;
  }
  a.mobile-trigger  i:before, a.mobile-trigger i:after {
      position: absolute;
      content: '';
  }
  a.mobile-trigger  i, a.mobile-trigger  i:before, a.mobile-trigger  i:after {
      width: 15px; /* Icon line width */
      height: 2px; /* Icon line height */
      background-color: #ffffff; /* Icon color */
      display: inline-block;
  }
  a.mobile-trigger  i:before {
      margin-top: -6px; /* Position top line */
      -webkit-transition-property: margin, -webkit-transform;
      -webkit-transition-duration: .2s;
      -webkit-transition-delay: .2s, 0;
  }
  a.mobile-trigger  i:after {
      margin-top: 6px; /* Position bottom line */
      -webkit-transition-property: margin, -webkit-transform;
      -webkit-transition-duration: .2s;
      -webkit-transition-delay: .2s, 0;
  }
  .mobile-open a.mobile-trigger i {
      background-color: rgba(0,0,0,0.0);
      -webkit-transition-delay: .2s;
      -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
      -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
      box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }
  .mobile-open a.mobile-trigger i:before {
      margin-top: 0;
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg);
      -webkit-transition-delay: 0, .2s;
      -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
      -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
      box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }
  .mobile-open a.mobile-trigger i:after {
      margin-top: 0;
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg);
      -webkit-transition-delay: 0, .2s;
      -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0);
      -moz-box-shadow:    0px 1px 1px rgba(0, 0, 0, 0);
      box-shadow:         0px 1px 1px rgba(0, 0, 0, 0);
  }

  /* Child Toggle Button
     ========================================================================== */

  a.child-trigger {
      display: block !important; /* Hide button on Desktop */
      cursor: pointer; /* Mouse pointer type on hover */
      position: absolute;
      top: 0px;
      right: 0px;
      width: 55px !important; /* Button width */
      min-width: 55px !important;
      height: 45px !important; /* Button height */  
      padding: 0 !important;
      border-left: 1px dotted rgba(255, 255, 255, .20);
  }
  a.child-trigger:hover {
      text-decoration: none;
  }


  /* Child Toggle Button Icon & Animations
     ========================================================================== */

  a.child-trigger span {
      position: relative;
      top: 50%; /* Centers icon inside button */
      margin: 0 auto !important;
      -webkit-transition-duration: .2s;
      -moz-transition-duration: .2s;
      transition-duration: .2s;
  }
  a.child-trigger span:after {
      position: absolute;
      content: '';
  }
  a.child-trigger span, a.child-trigger span:after {
      width: 10px; /* Icon line width */
      height: 1px; /* Icon line height */
      background-color: #ffffff; /* Icon color */
      display: block;
  }
  a.child-trigger span:after {
      -webkit-transform: rotate(-90deg);
       -ms-transform: rotate(-90deg);
      transform: rotate(-90deg);
       -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
      transition-duration: .2s;
  }
  a.child-trigger.child-open span:after {
      -webkit-transform: rotate(-180deg);
       -ms-transform: rotate(-180deg);
      transform: rotate(-180deg);
       -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
      transition-duration: .2s;
  }
  a.child-trigger.child-open span {
      -webkit-transform: rotate(180deg);
       -ms-transform: rotate(180deg);
      transform: rotate(180deg);
       -webkit-transition-duration: .2s;
       -moz-transition-duration: .2s;
      transition-duration: .2s;
  }

    
  /* Menu Styles on Mobile Devices
     ========================================================================== */  


  /* Hide menu on mobile */
  .custom-menu-primary.js-enabled .hs-menu-flow-horizontal,
  .custom-menu-primary.js-enabled .hs-menu-children-wrapper{
      display: none;
  }  

  /* Make child lists appear below parent items */
  .custom-menu-primary ul.hs-menu-children-wrapper {
      visibility: visible !important;
      opacity: 1 !important;
      position: static !important;
      display: none;
  }

  /* Mobile Menu Styles */
  .custom-menu-primary.js-enabled .hs-menu-flow-horizontal{
      position: absolute; /**************************************************************/
      top: 0;             /* Positions the menu to drop from the very top of the screen */
      left: 0px;          /**************************************************************/                                              
      width: 100%;   
      -webkit-box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.65);
      -moz-box-shadow:    0px 5px 5px 0px rgba(0, 0, 0, 0.65);
      box-shadow:         0px 5px 5px 0px rgba(0, 0, 0, 0.65); 
  }
  .custom-menu-primary .hs-menu-flow-horizontal{
      padding: 40px 0 0 0; /* Padding to add room for close button */
      background-color: #000000; /* Menu background color set off global mobile-menuColor variable */
      width: 100%; /* Full screen width */
      z-index: 8888;
  }

   /* Level 1 Menu List Styles */
  .custom-menu-primary .hs-menu-flow-horizontal > ul > li{
      position: relative;
   }
  .custom-menu-primary .hs-menu-flow-horizontal > ul > li a{
      font-size: 22px; /* Font size of top level list items */
      line-height: 45px;
      overflow: visible;
  }

  /* Level 1 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-flow-horizontal ul li{
      border-top: 1px dotted rgba(255, 255, 255, .35); /* Adds transparent dark highlights to top of top level list items */
  }
  .custom-menu-primary .hs-menu-flow-horizontal ul li a{
      padding: 0 10px;
  }
  .custom-menu-primary .hs-menu-flow-horizontal ul li a:hover{
      color: #ffffff; /* link hover color set by global mobile-aColorHover variable */
  }

  /* Level 2 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-flow-horizontal > ul ul li{
     background-color: rgba(255, 255, 255, .08);
  }
  .custom-menu-primary .hs-menu-flow-horizontal > ul ul li a{
      text-indent: 10px; /* Indent Child lists */
      font-size: 16px; /* Font size of child lists */
  }

  /* Level 3 and Higher Menu List Styles */
  .custom-menu-primary .hs-menu-flow-horizontal > ul ul ul li a{
      text-indent: 30px; /* Indent Child lists */
  }
  .custom-menu-primary .hs-menu-flow-horizontal > ul ul ul ul li a{
      text-indent: 50px; /* Indent Child lists */
  }
}