html, body {
margin: 0; 
padding: 0; 
border: 0; 
font-family: 'Helvetica', 'Arial', sans-serif; 
/*color: #4d4e51; */
color: #28292a;
background: #F6F6F6;  
text-align:center;
}

#publishing_spinner_message img, #pixelhub_spinner {
		-webkit-animation: rotation 1s infinite linear;
}
@-webkit-keyframes rotation {
		from {
				-webkit-transform: rotate(0deg);
		}
		to {
				-webkit-transform: rotate(359deg);
		}
}

a {
text-decoration: none;
color: inherit;
-webkit-tap-highlight-color:  rgba(255, 255, 255, 0); 
}

header {
background: #fff;
width: 100%;
height: 60px;
position: fixed;
top: 0;
left: 0;
z-index: 100;
box-shadow: 0 14px 16px -16px rgba(0,0,0,0.2);
}

nav {
float: right;
padding: 20px;	
}

#menu-icon, .menu_close {
width: 30px;
height: 30px;
line-height:30px;
font-size: 25px;
text-align:center;
display:block;
}
.menu_close {
position:fixed;
top:20px;
right:20px;
z-index:103;
}
nav ul, nav:active ul { 
display: none;
position: fixed;
padding: 20px;
background: #fff;
right: 0px;
bottom:auto;
top: 0px;
width: 100%;
height: auto;
border-radius: 4px 0 4px 4px;
box-sizing: border-box;
list-style: none;
z-index:102;
box-shadow: 0 14px 16px -16px rgba(0,0,0,0.2);
}

nav li {
text-align: center;
width: 100%;
padding: 20px 0;
margin: 0;
font-weight:bold;
font-size:1.1em;
}

.login-overlay-app {
position:fixed; 
background: white; 
top:0; 
left:0; 
right:0; 
bottom:0; 
height:100%; 
width:100%; 
text-align: center; 
z-index:100;
box-sizing: border-box;  
padding:40px;
}


.back, .back-to-sections{
cursor:pointer; 
position:fixed; 
top:13px;
left:20px;
width: 70px;
height: 34px;
line-height: 34px;
z-index:101;
-webkit-tap-highlight-color:  transparent; 
background: #f9b801;
color: white;
display:block;
padding: 0px;
border-radius: 5px;
text-align:center;
}
.main { 
float: none; 
position:relative; 
max-width: 100%; 
width: 1000px; 
box-sizing: border-box;  
padding: 15px; 
text-align:center;  
padding-top: 80px; 
display: inline-block; 
}
#uploadForm input, #uploadSectionForm input, .login-overlay-app input,  #uploadForm textarea,  .form_submit_btn,  .main .post-list, .main .add_new_post_btn, .embed_code_copy1, .embed_code_copy2, .embed_code_copy3, .main .sections-list, input, .get_in_touch { 
position:relative; 
float:left;  
box-sizing: border-box;  
margin: 0; 
margin-bottom:15px; 
width:100%; 
padding: 5px; 
font-size:15px; 
border: 1px solid #f0f0f0; 
border:none; 
background: white; 
color: #a0a6b4;  
font-family: 'Helvetica', 'Arial', sans-serif; 
box-shadow: 0px 3px 15px rgba(0,0,0,0.1); 
overflow:hidden;  
}
   #uploadForm input, #uploadSectionForm input , .login-overlay-app input,  #uploadSectionForm textarea, #uploadForm textarea, .hbx_signup_form input, .get_in_touch, input {  
   height:62px; 
   padding: 5px 10px; 
   box-shadow: none; 
   border: 1px solid #dadada; 
   background-color:white;
    color: #4d4e51; 
    font-size:16px; 
    border-radius:6px;  
    }
  #uploadSectionForm input:focus , .login-overlay-app input:focus , #uploadForm input:focus, #uploadForm textarea:focus, input:focus {  background-color: #4d4e51; outline: none; color: white; }
   #uploadSectionForm textarea, #uploadForm textarea  { height: 200px; }
   
   .select-css {
    float:left;
    display: block;
    box-sizing: border-box; 
    font-size: 16px;
    font-weight: normal;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 0;
    margin-bottom:15px;
    border: 1px solid #dadada;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.02);
    border-radius: 6px;
    height:62px; padding: 5px 10px;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    cursor:pointer;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}


    .main .post-list, .main .add_new_post_btn, .main .sections-list, .form_submit_btn { background: #fff; border:none; border-radius:50px; -webkit-tap-highlight-color:  rgba(255, 255, 255, 0);  transition: 0.3s; }
    .main .add_new_post_btn, .main .add_new_post_btn a, .form_submit_btn,  .login-overlay-app  input[type="submit"]  { color: white; text-decoration: none; cursor: pointer; /*background: #053486;*/ background: #9158aa;  width: 100%; margin:0 auto; float:none; display:inline-block; margin-bottom:15px; }
    .form_submit_btn,  .login-overlay-app  input[type="submit"]  { border-radius: 6px; /*background-image: url(images/bg.png) , linear-gradient( #053486, #1070b7 ); */ }
     .form_submit_btn:hover { opacity:0.8 !important; }
     .main .post-list .post_title_wrap, .main .sections-list .post_title_wrap, .main .add_new_post_btn .post_title_wrap, .main .add_new_section_btn .post_title_wrap, .form_submit_btn .post_title_wrap { float:left; height: 52px; line-height: 52px; margin-left: 10px; width:30%;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align:left; }
     .main .post-list .post_img_preview { height:50px; width: 50px; background-size: cover; display: inline-block; float:left; border-radius: 50%; border: 1px solid #666666;  }

    .main .post-list .delete, .main .post-list .copy,  .main .sections-list .delete ,  .main .sections-list .edit { color: #999; float:right; cursor: pointer;  }
    .main .post-list, .main .sections-list {  float:left; margin-right: 10px; color: #666666; text-decoration: none; cursor: pointer;  }
    .main .post-list i, .main .sections-list i,  .form_submit_btn .post_title_wrap i { margin-right: 6px; }
    #uploadForm input[type="submit"] { background: #08506c;   border-radius:50px; border: none; color: white; cursor:pointer; height: 52px; line-height: 52px; text-align:left; }

    
    #post_type {display: block; }
    #post_type .type { float:left; width:50%;  box-sizing: border-box;  padding: 5px;  }
    #post_type .type .type_inner { float:left;box-sizing: border-box;  padding: 15px 10px;  width: 100%; /*background: #053486;*/ background: #f9b801; /*background-image: url(images/bg.png) , linear-gradient( #053486, #1070b7 );  */border-radius: 5px; display:block; text-align:center;  color: white; cursor:pointer; box-shadow: 0px 3px 15px rgba(0,0,0,0.2); -webkit-tap-highlight-color:  transparent;  }
    #post_type .type i  { font-size: 40px; margin-bottom:10px; }
    
    .embed_code_wrap { float:left; width:100%; display:none; box-sizing: border-box; }
    .embed_code_wrap p { float:left; margin-top:20px; }
    #embed_code_copy1, #embed_code_copy2, #embed_code_copy3 { overflow:scroll; }
    .copy_btn, .copy_btn2, .copy_btn3 { float:right; cursor: pointer; padding: 3px 14px; border: 2px solid rgba(100,149,237,0.3) !important; color:cornflowerblue; border-radius:5px; margin-bottom: 0px;  transition: all 0.4s ease;  }
    .copy_btn:hover, .copy_btn2:hover, .copy_btn3:hover { border: 2px solid rgba(100,149,237,1) !important; }
    
    .offer_badge_wrap, .offer_cta_wrap {
    float:left; 
    margin-bottom: 0px; 
    text-align:left;
    width:100%;
    }
    .offer_badge_wrap .offer_label, .offer_cta_wrap .offer_label {
    float:left; 
    margin:0px; 
    display:inline-block;
    }
    .offer_badge_wrap .badge, .offer_cta_wrap .badge {
    cursor:pointer; 
    padding: 8px 13px;  
    color: white; 
    background: #999; 
    border-radius:5px; 
    float:left; 
    margin: 5px; 
    margin-left:0;
    display:inline-block;
    }
    .offer_badge_wrap .active, .offer_cta_wrap .active { 
    background-color: #333; 
    }
    
     .post_offer, .post_campaign, .post_news,  .post_event, .post_text, .post_image { 
     display:none !important; 
     }


       .image-editor {
         display: inline-block;
         width:100%;
         position:relative;
         overflow:hidden;
         background: #dadada; 
         padding:15px; 
         border-radius: 5px; 
         box-sizing: border-box; 
         margin-bottom:15px;
       }
      .cropit-preview {
        background-color: transparent;
        background-size: cover;
        border: none;
        border-radius: 3px;
        margin-top: 0px;
        width: 300px;
        height: 200px;
        border-radius: 5px; 
        overflow:hidden;
      }
      .cropit-preview img{
        border-radius: 5px; 
      }
      
      .cropit-image-input, .cropit-image-input-button, .academy_button_perfect_photos {
         display:block; 
         background: #f9b801;
         width: 100%; 
         height: 45px;
         line-height: 45px;
         cursor: pointer;
         color:white;
         font-size:16px;
         margin-bottom:10px;
         border-radius: 5px; 
      }
      .cropit-image-input {
         position:absolute;
         top:15px;
         left:15px;
         width:100%;
         z-index:10;
         opacity:0;
         border-radius: 5px;
         background: transparent;
      }

      .cropit-preview-image-container {
        cursor: move;
        background-image: url('../images/camera.png');
        background-size: cover;
        background-color: transparent;
        border-radius: 5px;
      }

      .image-size-label {
        margin-top: 0px;
      }

      input, .export {
        display: block;
      }

      .rotate-ccw, .rotate-cw {
        display:block; 
         background: #28292a; 
         width:35px; 
         height: 35px;
         line-height: 35px;
         cursor: pointer;
         color:white;
         font-size:16px;
        border:none;
        border-radius: 50%; 
        float:left;
        margin-right:5px;
        margin-top: 15px;
      }
      
     .cropit-image-zoom-input {
       -webkit-appearance: none;  /* Override default CSS styles */
       appearance: none;
        width: calc(100% - 90px);
        float:right;
        height: 5px; /* Specified height */
        background: #28292a; /* Grey background */
         outline: none; /* Remove outline */
         display:inline-block;
        margin-top: 26px;
        border-radius:50px;
        overflow:visible;
      }
      .cropit-image-zoom-input::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #1070b7; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius:50%;
}

.cropit-image-zoom-input::-moz-range-thumb {
  width: 20px; /* Set a specific slider handle width */
  height: 20px; /* Slider handle height */
  background: #1070b7; /* Green background */
  cursor: pointer; /* Cursor on hover */
  border-radius:50%;
}

/*prompt to install webapp*/
.ios-prompt {
        background-color: white;
        border: none
        display: none;
        border-radius: 4px;
        padding: 0.8rem 1rem 0 0.5rem;
        text-decoration: none;
        font-size: 16px;
        color: #555;
        position: fixed;
        margin: 0 auto 1rem;
        left: 1rem;
        right: 1rem;
        bottom: 1rem;
        z-index: 1000;
        box-shadow: 3px 0px 103px 31px rgba(0,0,0,0.4); 
      }


/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
  transform: rotateY(180deg);
  -webkit-tap-highlight-color:  transparent; 
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #333;
}

input:focus + .slider {
  box-shadow: 0 0 1px #333;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 5px;
}

.slider.round:before {
  border-radius: 5px;
}

.published_tooltip { position:absolute; top:-30px; right:0; height: 35px; line-height: 35px; color: white; background:  #ff4768; z-index:10; width: 200px; cursor:pointer; padding:0; text-align:center; display:inline-block; font-size:13px; border-radius: 30px; cursor:pointer; -webkit-tap-highlight-color:  transparent;  }

/*Start Academy styles*/
.academy_wrapper { display: none;  position:fixed; width:100%; height: 100%; z-index:100002; bottom: -100%; left: 0; right: 0; top: auto; }
#academy_close { position: absolute; top: 20px; right: 20px;  z-index: 10;  color: #222; background: rgba(255,255,255,0.9); height: 50px; width: 50px; border-radius:50%; text-align:center !important; line-height:50px; font-size: 20px; }
#academy_close i {padding:0; margin:0;}
#academy_main_image {position: absolute; z-index: 9; width:100%; height:auto; top:0; left:0; }
.academy_box {background: #fff; color: #222; position: absolute; width:1000px; max-width:100%; height: 70%; z-index:11; bottom:0; left: 50%; right:50%; transform: translate(-50%, 0); border-top-left-radius: 40px;  border-top-right-radius: 40px; overflow: hidden; box-sizing: border-box; padding-bottom: 0px; }
.academy_box_content {float:left; padding: 20px 20px; text-align:left;  height:100%; overflow: auto; box-sizing: border-box; }
.academy_box_content h1 { font-size: 26px; padding:10px 0px; font-weight: bold; }
.academy_box_content h2 { font-size:18px; font-weight:bold;}
.academy_box_content ul { font-weight: 300; list-style-position:outside;margin:0;padding:0; list-style-type:none;}
.academy_box_content li { list-style-position:outside; margin:0; padding:0; }