.caanvascontent{width:100%; margin:0; padding: 20px; }
.caanvashead{position: relative; width: 280px; top: 0; left: 0; padding: 40px; z-index: 10000; }



.downloads{width: 100%; max-width: 540px; margin: 40px auto;  }
.eachdownload{border: 10px solid #003a32; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; padding: 10px 20px; font-size: 36px; margin-bottom: 20px;}
.eachdownloadtitle{width: 80%;}


.eachdownloaddesc{font-size: 14px; }
.brandcontent{width: calc(100% - 400px); padding: 40px;}
.eachcolor{font-weight: bold; font-size: 20px; margin-bottom: 10px;}
.redcolor{color: #F15251;}
.mintcolor{color: #AEDED6;}
.bluecolor{color: #0D2238;}

.eachfont{font-size: 30px; margin-bottom: 10px;}
.lightfont{font-weight: normal}
.boldfont{font-weight: bold}

.redtreelogos{display: flex; justify-content: flex-start; flex-wrap: wrap;}
.eachlogo{margin-right: 20px;}
/* ==========================================================================
   POSTER
   ========================================================================== */
.section{color: #1B2638;}
.section h3{color: #1B2638;}
.postersection{text-align: center; width: calc(100% - 400px); background: #fff; padding: 20px 20px 200px;}
.hpostertitle{display: block; margin: 10px auto; border: 0;}
.postertable{width: 100%; margin: 0 auto; background: #fff; padding: 20px;}

.chooselogo{width: 100%; height: auto; max-height: 400px; overflow: auto;}

img, iframe {
max-width: 100%;
height: auto;
display: block;
}
.imagepreview img{width: 100%;}

.draggable{position: relative;}
.draggableimage{position: relative;}
.linedrag{position: absolute; top:0; left: -20px; width:20px; height:100%; background: rgba(255,255,255,0.3) url(../img/move.png) center center no-repeat; opacity: 0; cursor:move;}
.draggable:hover{background: rgba(255,255,255,0.3);box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.draggableimage:hover{outline: 1px solid black;}
.draggable:hover .linedrag{opacity: 1;}
.draggableimage:hover .linedrag{opacity: 1;}
.draggable:focus{outline: 1px solid black;}
.draggableimage:focus{outline: 1px solid black;}
.resizeholder:hover{background:url(../img/resize.png) bottom right no-repeat; z-index: 10000}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(../img/resize.png) bottom right no-repeat; z-index: 10000
}



.ui-icon {
    width: 16px;
    height: 16px;
}

.ui-resizable-se {
    cursor: se-resize;
    width: 12px;
    height: 12px;
    right: 1px;
    bottom: 1px;
}

.ui-resizable-handle {
    position: absolute;
    font-size: 0.1px;
    display: block;
    -ms-touch-action: none;
    touch-action: none;
}
.linefont{position: absolute; top:0; right: -40px; width: 40px; height:100%; background: rgba(255,255,255,0.3); display: flex; justify-content: space-between; flex-wrap: wrap;}
.fontchanger{width:20px; height: 100%; display: block;}
.fontplus{background: url(../img/plus.png) center center no-repeat;}
.fontplus:hover{background: rgba(255,255,255,0.6) url(../img/plus.png) center center no-repeat;}
.fontminus{background: url(../img/minus.png) center center no-repeat;}
.fontminus:hover{background: rgba(255,255,255,0.6) url(../img/minus.png) center center no-repeat;}
.nonclick{filter: grayscale(1); opacity: 0.5; pointer-events: none;}


.bgchoose{max-height: 50vh; overflow: auto;}




/* ==========================================================================
   JOB BOARD MASONRY
   ========================================================================== 
 
.masonry {display: flex; justify-content: flex-start; flex-wrap: wrap; width: 100%; outline: 0px solid red; list-style-type: none; padding: 0 20px; margin: 0;}*/
.toggleedit{position: absolute; top: 0; right: -47px; background: rgba(189,215,60,0.8); color: #fff; padding: 10px;}
.toggleedit i{margin: 0; padding: 0; font-size: 24px;}
.filterheader{color: #fff; text-transform: uppercase; margin-bottom: 20px; display: none;}
.homeholder{background: #CBE2D8 url(../img/footerbg.png); }
.homeholder{width: 100%; min-height: calc(100vh - 100px); position: relative;}
.users{width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; background: #fff; position: relative}
.controls{ padding: 40px 40px; width: 400px; position: sticky; top: 0; align-self: flex-start; height: 100vh; background: #BDD73C;}
.postercontrols{ padding: 40px; position: sticky; top: 0; align-self: flex-start; min-height: 100vh; height:auto;}

.masonry {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  grid-auto-rows: 1px;
  padding: 40px;background: #e6e6e6;min-height: 100vh;width: calc(100% - 400px); list-style-type: none; margin: 0;
}


.item {
margin: 0;box-shadow: 0 30px 90px rgba(0,0,0,0.25), 0 7px 20px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(.25,.8,.25,1); background: #fff; position: relative;
}

.item:hover{box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);}
.iteminfo{background: #fff; padding: 20px 20px 2px;}
.iteminfo h3{font-weight: 400;}
.font0{font-size: 0;}
.psize{position: absolute; top: 10px; right: 10px; color: #fff; font-size: 20px;}




.sorters{width:100%;display:flex;justify-content:flex-start;flex-wrap:wrap}
input.sortinput{border:solid 5px transparent;border-radius:0;padding:8px 14px;width:100%;margin-bottom:20px}
input.sortinput:focus{outline:none;border-color:#fff}
.sort{padding:13px 30px;border-radius:2px;border:none;display:inline-block;color:#fff;text-decoration:none;background-color:#003a32;text-align:center;font-weight:700;font-size:14px}
.sort:hover{text-decoration:none;background-color:#fff}
.sort:focus{outline:none}
.sort:after{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid transparent;content:"";position:relative;top:-10px;right:-5px}
.sort.asc:after{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #fff;content:"";position:relative;top:13px;right:-5px}
.sort.desc:after{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:5px solid #fff;content:"";position:relative;top:-10px;right:-5px}
.filterer{cursor:pointer;padding:0;margin:0 20px 0 0;border-radius:2px;border:none;display:inline-block;color:#fff;text-decoration:none;text-align:center;font-weight:300;font-size:30px}
.filterer{color: #1B2638;}
.filterer:hover{text-decoration:none;color:#fff}
.filterer i{margin:0!important;padding:0!important}
.filtereractive{color:#fff}

.field-group{margin:0 0 12px 0}
.field-group .label{background:#efefef;text-transform:uppercase;font-weight:300; font-size: 14px; width: 100%;padding: 10px;}
.label{position: relative; overflow: hidden; color: #1a1a1a;}
.checker{position: absolute; right: -4px; top:-4px; width:52px; height: 52px; opacity: 0.3 }
.checkersc{position: absolute; right: -4px; top:-4px; width:52px; height: 52px; opacity: 0.3 }
.checkno{background: url(../img/cross.png) no-repeat; background: url(../img/checksquares.png) no-repeat; background-size: cover;}
.checkyes{background: url(../img/tick.png) no-repeat; background: url(../img/checksquares.png) no-repeat; background-size: cover;}
.field-group .field{outline: 0px solid red;
  width: 100%;
}
/*
.field-group:last-child{
  display: flex;
  justify-content: flex-end;
}
.field-group:last-child .field{
  max-width: 75%;
}*/
input, select, textarea{
  padding: 10px; 
  font-size: 13px; 
  border: solid 1px #eee;
  background: #fff; 
  box-sizing: border-box;
font-family: 'Montserrat', sans-serif;   
}
textarea {
  width: 100%;  
}
input, select{
  width: 100%;
}
input[type="radio"],
input[type="checkbox"],
input[type="submit"]{
  width: 100%;
}

/*/////////////// RWD STYLES //////////////////// https://codepen.io/torbencolding/pen/emKMZx */
@media (max-width: 720px) {
.field-group .label{
     text-align: left; 
     margin: 0;
  }
  input, select{
    width: 60%;
  }
}
@media (max-width: 480px) {
  input,
  select{width: 100%;}
  input[type="radio"],
  input[type="checkbox"],
  input[type="submit"]{
  width: auto;
  }
.field-group{
  display: flex;
  flex-direction: column;
  margin: 0 0 6px 0;
  }
.field-group .label{
  padding: 0 0 5px 0;
  margin: 10px 0 0 0;
  }
}

.gradient-pattern {
    display: none;
    pointer-events: none;
    position: absolute; top: 0; left: 0;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
    z-index: 10;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(255,255,255,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: -webkit-linear-gradient(90deg, #F15251 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(0deg, #F15251 2px, rgba(0,0,0,0) 2px), -webkit-linear-gradient(90deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px), -webkit-linear-gradient(0deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px);
  background: -moz-linear-gradient(0deg, #F15251 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(90deg, #F15251 2px, rgba(0,0,0,0) 2px), -moz-linear-gradient(0deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px), -moz-linear-gradient(90deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px);
  background: linear-gradient(0deg, #F15251 2px, rgba(0,0,0,0) 2px), linear-gradient(90deg, #F15251 2px, rgba(0,0,0,0) 2px), linear-gradient(0deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px), linear-gradient(90deg, rgba(12,26,48,0.298039) 1px, rgba(0,0,0,0) 1px);
  background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
  -webkit-background-origin: padding-box;
  background-origin: padding-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch .gtoggler {display:none;}

/* 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;
}

.gtoggler:checked + .slider {
  background-color: #F15251;
}

.gtoggler:focus + .slider {
  box-shadow: 0 0 1px #F15251;
}

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

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

.slider.round:before {
  border-radius: 50%;
}
.togglegrid{color: #F15251; margin: 0 0 10px; font-size: 16px; text-transform: uppercase; }
.thelogo{z-index: 100000 !important;}



.togglee{display: none;}
            ul.thumbnails.image_picker_selector li{width:70px; height:70px; overflow:hidden;}
          
            .lightbox {
  display: none;
  position: fixed;
  top: 0;
  z-index: 500000;
  width: 100%;
  height: 100%;
  background-color: rgba(28, 28, 28, 0.7);
}

.closebox {
  color: #fff;
  text-decoration: none;
  font-size: 50px;
  position: fixed;
  top: 20px;
  right: 25px;
}

.imager {
  display: none;
  position: fixed;
  top: 25px;
  right: 70px;
  margin: 0 auto;
  z-index: 1000;
  max-height: 100%; width: auto;
}
.ui-datepicker{z-index: 100 !important;}
.uploader {position:relative; overflow:hidden; width:300px; height:100px; background:#efefef; border:2px dashed #e8e8e8; padding: 20px; text-align: center; font-family: 'Source Sans Pro', sans-serif; opacity: 0.8}

#filePhoto{
    position:absolute;
    width:100%;
    height:100%;
    position: absolute; top: 0; left: 0;
    z-index:2;
    opacity:0;
    cursor:pointer; display: 
}


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

    .caanvashead{position: relative; width: 100%; padding: 20px; display: flex; justify-content: space-between; flex-wrap: wrap;}
}
@media only screen and (max-width: 1220px) {
.controls{ padding: 40px 40px; width: 100%; position: relative; top: 0; align-self: flex-start; height: auto; background: #BDD73C;}
   .masonry {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
  grid-auto-rows: 1px;
  padding: 40px;background: #e6e6e6;min-height: 100vh;width: 100%; list-style-type: none; margin: 0;
} 
}