* {
  font-family: 'Quicksand', sans-serif;
  font-weight: light;
  box-sizing: border-box;
  font-size:18px;
}

@media screen and (max-width:600px) {
* {
  font-family: 'Quicksand', sans-serif;
  font-weight: light;
  box-sizing: border-box;
  font-size:18px;
}
#password{
width:6em;
}

div.wrapp {
width:98%;
padding-left: 10px;
padding-right: 10px;
 }
}

@media screen and (min-width:900px){

    div.wrapp {
width:70%;

 }
}

#password{
width:8em;
}

@font-face {
  font-family: 'Quicksand';
  src: url('Quicksand-Light.ttf');
  font-weight: light;
  font-style:light;
}
 
  body {
  padding-bottom:10px;
  }
  
  #page-head {
position: fixed;
  top: 0;
  z-index: 9;
width: 100%;
  height: 8%;
  padding: 10px;
  display: flex;
  align-items: center;
  border-bottom:2px dashed #f0f0f0;
  background: white;
 }
 
 .site-name {
font-weight:bold;
color:#5c729e;
font-size:1.4em;
text-align:center;
}

.title {
        margin-top:4px;
        margin-bottom:4px;
     /*   margin-left:30px; */
        font-size:1.2em;
        font-weight:bold;
        width:300px;
        color:rgb(92,114,158);
       /* height:24px; */
       padding-left:2px;
    }
 
    .editor {
        width:100%;
        min-height:350px;
        max-height:900px;
        margin:0 auto;
        padding:10px;
        margin-top:30px;
        margin-bottom:10px;
        overflow: hidden;
        background:#ffffff;
        border:1px solid #f0f0f0; 
        z-index:1;
    }
    
    button {
       margin:8px;
      /* padding:8px; */
       background:#ffffff;
       border: 1px solid #ffffff;
       border-radius:4px;
       width:26px; 
       height:26px;
       cursor:pointer;
       color:#a4a4a4;
   }
   
   button:hover {
   background:#e9e9e9;
    border: 1px solid #5c729e;
   }
   
   #modal-image {
      display:none;
      width:360px;
      height:100px;
      border: 1px solid #5c729e;
       border-radius:4px;
       position: absolute;
    top:0;   
    left: 0;
    right: 0;
    background:#ffffff;
    margin: auto;
    text-align:center;
    z-index:2;
   }
   
   #img-path {
       margin:8px;
       padding:4px;
       margin-right:4px;
   }
   
     button[name="enable-editor"] {
  background-image: url("../icons/svg/off.svg"); 
  background-repeat:no-repeat; 
  text-align:center;
  font-size:12px;
 margin-right:20px;
 margin-left:10px;
}

   button[name="add-post"] {
  background-image: url("../icons/svg/add-post.svg"); 
  background-repeat:no-repeat; 
  text-align:center;
}

   button[name="add-image"] {
  background-image: url("../icons/svg/add-image.svg"); 
  background-repeat:no-repeat; 
  text-align:center;
}

   button[name="update"] {
  background-image: url("../icons/svg/update.svg"); 
  background-repeat:no-repeat; 
  margin-right:20px;
  text-align:center;
}

  button[name="delete"] {
  background-image: url("../icons/svg/delete.svg"); 
  background-repeat:no-repeat; 
  
  text-align:center;
}

button[name="save"] {
  background-image: url("../icons/svg/save.svg"); 
  background-repeat:no-repeat; 
  
  text-align:center;
}
 
    .img-block {
       border:1px solid blue;
       float:left;
       margin-right:20px;
    }
    
    .text-block {
          border:1px solid green;
         width:100%;
    }
    
    [contenteditable] {
  outline: 1px solid transparent;
}
   
.wrapp {
/* width:96%; */
min-height:350px;
max-height:900px;
margin:0 auto;
padding:20px;  
margin-top:80px;
margin-bottom:20px;
overflow: hidden;
 }}
  
   
   .ctl-button {
       display:none;
   }

    .afterbegin, .beforeend {
    position:relative;
    float:left;
    top:10px;
    margin-left:23px;
    display:inline;
    height:20px;
    margin-bottom:6px;
    }
    
    .edit-btns {    
       display:block;
    }
    
    .close-btn {
float:right;
margin:0;
 /* background-image: url("../icons/close.png"); 
  background-repeat:no-repeat; */
}
    
    .new-title {
      border:  2px dashed #5c729e;
    } 

    .m-image {
color:#000000;
background:#dbe6ee;
border:1px solid #d4e1eb;
border-radius:4px;
width:70px;
text-align:center;
float:right;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}



.svg {
  /* filter: invert(68%) sepia(13%) saturate(641%) hue-rotate(164deg) brightness(80%) contrast(92%); */
}

/*-------------------------------------------------------------------------*/
 /* @media screen and (max-width: 600px) {
    .title {
        margin-top:4px;
        margin-bottom:4px;
        margin-left:20px;
        font-size:30px;
        font-weight:bold;
       
        color:rgb(92,114,158);
      
       padding-left:2px;
    }
    
.editor {
     
        margin:0 auto;
        padding:5px;
        margin-top:10px;
        margin-bottom:5px;
        overflow: hidden;
        background:#ffffff;
        border:1px solid #f0f0f0; 
        z-index:1;
        font-size:30px;
    }
    
      #page-head {
position: fixed;
  top: 0;
  z-index: 9;
width: 100%;
  height: 90px;
  padding: 10px;
  display: flex;
  align-items: center;
  text-align:center;
  border-bottom:2px dashed #f0f0f0;
  background: white;
  margin-bottom:40px;
 }
    
    .site-name {
font-weight:bold;
color:#5c729e;
font-size:46px;
text-align:center;
}

button {
       margin-top:8px;
    
       background:#ffffff;
       border: 1px solid #ffffff;
       border-radius:4px;
       width:60px; 
       height:60px;
       cursor:pointer;
       color:#a4a4a4;
        font-size:24px;
   }
   
    button[name="enable-editor"] {
  background-image: url("../icons/svg/off.svg"); 
  background-repeat:no-repeat; 
  text-align:center;
  font-size:24px;
 background-size: 60px;
  height: 60px;
  margin-left:8px;
  margin-right:80px;
}

   button[name="add-post"] {
  background-image: url("../icons/svg/add-post.svg"); 
  background-repeat:no-repeat; 
  text-align:center;
  font-size:24px;
   background-size: 60px;
  height: 60px;
}

   button[name="add-image"] {
  background-image: url("../icons/svg/add-image.svg"); 
  background-repeat:no-repeat; 
   background-size: 60px;
  height: 60px;
  text-align:center;
}

   button[name="update"] {
  background-image: url("../icons/svg/update.svg"); 
  background-repeat:no-repeat; 
   background-size: 60px;
  height: 60px;
  text-align:center;
  margin-right:80px;
}

  button[name="delete"] {
  margin-top:10px;
  background-image: 0; 
  background-repeat:no-repeat; 
   background-size: 60px;
  height: 60px;
  text-align:center;
}

button[name="save"] {
  background-image: url("../icons/svg/save.svg"); 
  background-repeat:no-repeat; 
   background-size: 60px;
  height: 60px;
  text-align:center;
}


    
     #modal-image {
      display:none;
      width:750px;
      height:250px;
      border: 1px solid #5c729e;
       border-radius:4px;
       position: absolute;
    top:0;   
    left: 0;
    right: 0;
    background:#ffffff;
    margin: 10px;
    text-align:center;
    z-index:2;
   }
   
     .m-image {
color:#000000;
background:#dbe6ee;
border:1px solid #d4e1eb;
border-radius:4px;
width:120px;
text-align:center;
margin-top:40px;
}

 #img-path {
       margin:8px;
       padding:4px;
       margin-right:6px;
       width:320px;
       height:40px
   }
   
    .wrapp {
    
        margin:0 auto;
     padding:20px;  
        margin-top:160px;
        margin-bottom:80px;
        overflow: hidden;
    } 

}
*/