/*************************************************************************/

/**************************    MIN-WIDTHS  *******************************/

/*************************************************************************/

/* -----------------------------   1024px++  ----------------------------*/
@media screen and (min-width: 1023px)   {
    .popup { padding: 5%; }
    
    .popup .gabbro-form { max-width: 600px; }
    
    #profilePopup.popup,
    #documentsPopup.popup,
    #galleryPopup.popup,
    #faqPopup.popup { padding: 2% 25%; }
   
    #submitTicketTable,
    #submitManagerMessageTable { margin: auto; max-width: 768px; }
    #updateTicketTable  { margin: auto; max-width: 840px; }
    #usersTable { margin: auto; max-width: 960px; }
    #billingTable { margin: auto; max-width: 1024px; }
}


@media screen and (min-width: 1023px)  and (min-height: 960px) {
    body { background-size: 100%!important; background-repeat: no-repeat!important;}
    .gabbro-form { padding: 1%; }
    
    .coat {    opacity: 0.8;} /* */
   
   
   
    #gms-tickets-form.gabbro-form  td {  padding: 10px 20px; font-size: 12px; }
    
    #gms-tickets-form.gabbro-form  td.ActionText,
    #gms-tickets-form.gabbro-form  td.updateButton,
    #gms-tickets-form.gabbro-form  td.DateCreatedText,
    #gms-tickets-form.gabbro-form  td.ticketDate,
    #gms-tickets-form.gabbro-form  td.StatusText,
    #gms-tickets-form.gabbro-form  td.ticketStatus,
    #gms-tickets-form.gabbro-form  td.UnitText,
    #gms-tickets-form.gabbro-form  td.ticketUnit{  padding: 5px 20px; }
    


    
    #gms-feedback-form td {font-size: 18px; }
    
    .tickets .search input{ width: 75%; }
    .tickets .searchIcon { margin: 0px 20px; }
    .popup-action.filter .level,
    .popup-action.filter .reset { padding: 5px 10px; margin-left: 10px; }
    
    .login-buttons { display: none;}
    


    .newsletter img {  height: 80vh;  width: auto;   margin: 20px auto; }
    
    .www .poster { width: auto; margin-left: 40px;}
    .www .popup .poster { font-size: 60px; letter-spacing: 0px; }
    .www .contact .gabbro-form { width: 800px; }
    .www .tile.col-sm-6 { padding: 2% 5%; }
    
}



/* -----------------------------   1500px++  ----------------------------*/

@media screen and (min-width: 1500px) {
 
   
  
   
   
    .popup.tickets {  padding: 0%; }
    .popup-action.close {  right: 1%; }
    
    .photos.popup .photo { width: 33%; margin: 0px; }
    
    .gabbro-form  #usersBody td{  font-size: 12px; }
    
    .www .content { padding: 1%; }
    .www .content p{ font-size: 20px; letter-spacing: -1px;}
    .www .tight {padding: 0% 25%!important;    }
    .www .poster {  top: 20vh;  font-size: 70px; position: fixed; }
    .www .content p.large { font-size: 30px; }
    .www .intro { font-size: 20px; }
    .www .tile { font-size: 14px; }
    
    #gms-tickets-form.gabbro-form  td span.StatusText,
    #gms-tickets-form.gabbro-form  td span.ticketStatusText,
    #gms-tickets-form.gabbro-form  td span.PriorityText,
    #gms-tickets-form.gabbro-form  td span.ticketPriorityText,
    #gms-tickets-form.gabbro-form  td span.ReporterText,
    #gms-tickets-form.gabbro-form  td span.ticketReporterNameText { width: 70px;   }
    #gms-tickets-form.gabbro-form  td span.ticketFeedbackText,
    #gms-tickets-form.gabbro-form  td span.ticketfDescriptionText { width: 500px; }
    
    
    

    
    
    @media (max-height: 820px){
        .www .poster {  top: 5vh;  font-size: 60px; }
        .block {  min-height: 15vh; padding: 0% 0%; }
        .www .intro { font-size: 20px;}
        
    }
    
    
}


/* -----------------------------   2048px++  ----------------------------*/
@media screen and ((min-width: 2048px)  and (min-height: 1080px))  {
            
    td { padding: 30px; }
    .popup-action.filter { top: 40px; }
    .popup-action.new span2 { font-size: 30px;  }
    .tickets table { margin-top: 50px; }
   
   .gabbro-form input { font-size: 14px; }
    .gabbro-form td { font-size: 14px; }
    .gabbro-form textarea { font-size: 16px; }
    
    #gms-tickets-form.gabbro-form  td{ font-size: 14px; }
    #gms-tickets-form.gabbro-form  td span{  font-size: 14px;  width: 60px;   }
  
     .login-form.gabbro-form.static { top: 25vh; }
    .login-form.gabbro-form.static input,
    .login-form.gabbro-form.static label2 {  width: 100%; margin-right: 2vw;}

    .www .intro { font-size: 20px;}
    
    .spo-responsive-navigation>ul { top: 90px;  }
    .spo-responsive-navigation>ul>li>a  {  padding: 20px 0px 20px 25px; }
    .spo-responsive-navigation>ul>li>a#newsletter { font-size: 18px; letter-spacing: -1px; }
    
    .greeting { font-size: 20px; }
    .poster { font-size: 25px; }
   
   .poster span3 {  font-size: 30px; font-weight: 400;  width: 50vw; text-align: right;  letter-spacing: -2px;}

    
    .www .poster { font-size: 120px; letter-spacing: -8px; }
    .www .content  {  font-size: 20px;  }
    .www .medium,
    .www .content .container.tight { font-size: 30px; }
}





/*************************************************************************/

/**************************    MAX-WIDTHS  *******************************/

/*************************************************************************/


@media only screen and (max-width : 1260px){
    
    .tile-container.col-sm-3,
    .tile-container.col-sm-4,
    .tile-container.col-sm-6,
    .tile-container.col-sm-8,
    .tickets.tile-container { width: 100%;}
    
    .www .tight { padding: 0% 5%!important;     }
    
}
/* --------------- 767px --------------- */
/* Anything SMALLER than an IPAD @767px */

@media only screen and (max-width : 767px){
    
    .popup { padding: 1%; }
    
    ::-webkit-scrollbar { display: none; }
    .page-container { max-width: 100%; padding: 0px; left: 0px; top: 0px; }
    
    .www .tile {  width: 60%; text-align: center;  padding: 0px; margin: 0px auto; font-weight: 400; font-size: 12px; min-height: 250px; background: none; }
    .www .intro { width: 90%; float: none; margin: 0px auto; font-size: 14px; text-align: left; letter-spacing: 0px; }
    .www .tight {padding: 0% 3%!important; }
    .www .large { font-size: 15px; }
    .www .fa.large { font-size: 20px; }
    .www .content .container {   margin: 5% auto;  }
    .www .block { min-height: 30vh;}
    .www .tile.price { width: 90%; }
    .www .content .tile.subscriptions{ width: 90%;  margin: 20px auto 60px auto; line-height: 1.5; background: none;}
    .www .contact .gabbro-form {  width: 60vw; }
    .www .contact .gabbro-form input, .www .contact .gabbro-form textarea { background: none;}
    .www .g-recaptcha { transform: scale(0.7); }
    
    
    #gms-tickets-form.gabbro-form  td.UnitText ,
    #gms-tickets-form.gabbro-form  td.DescriptionText,
    #gms-tickets-form.gabbro-form  td.PriorityText,
    #gms-tickets-form.gabbro-form  td.StatusText,
    #gms-tickets-form.gabbro-form  td.LatestFeedbackText,
    #gms-tickets-form.gabbro-form  td.ticketUnit ,
    #gms-tickets-form.gabbro-form  td.ticketDescription,
    #gms-tickets-form.gabbro-form  td.ticketPriority,
    #gms-tickets-form.gabbro-form  td.ticketStatus,
    #gms-tickets-form.gabbro-form  td.ticketFeedback { display: none; }
    
    .tickets table { margin-top: 40px; }
    
    
  
}

@media only screen and ((max-width : 767px) or (max-height: 840px)){
    .spo-responsive-navigation>ul {   top: 60px;}
    .spo-responsive-navigation>ul>li>a#newsletter { font-size: 10px; }
    .spo-responsive-navigation>ul>li>a {  padding: 10px 0px; font-size: 12px;}
    .spo-responsive-navigation>ul>li>a#newTicket { font-size: 12px;     }
    .spo-responsive-trigger {  top: 15px; }
    
    .poster { font-size: 15px; letter-spacing: -1px; padding: 10px 0px;}
    
    .greeting { font-size: 12px;letter-spacing: 0px; }
    
    .poster span2 { background: none; margin-top: 0px;}
    
    .gabbro-form ::-webkit-input-placeholder { padding: 0px!important; }  /* WebKit, Blink, Edge */
    
    .tile-container { padding: 25px;  height: 60vh; }
    .tile-border { border-radius: 50px; }
    
    .tickets .search input {font-size: 15px; text-transform: lowercase; letter-spacing: 0px; }
    img.ticketImg,
    img.invoiceImg {  width: 20px;  }
    
    .gabbro-form input,
    .gabbro-form select { font-weight: 400;   position: relative; font-size: 10px; letter-spacing: 0px;  }
    .gabbro-form textarea{  height: 150px; border-radius: 10px; letter-spacing: 0px; }
    .gabbro-form textarea::-webkit-input-placeholder { font-size: 11px!important;  }
    .gabbro-form .heading,
    .gabbro-form  td,
    .gabbro-form .heading td {  padding: 5px; }
    
    .gabbro-button { font-size: 12px; }
    
    #gms-tickets-form.gabbro-form td span.ticketFeedbackText,
    #gms-tickets-form.gabbro-form td span.ticketDescriptionText { font-size: 10px; }
    #gms-tickets-form.gabbro-form.gabbro-form ::-webkit-input-placeholder { font-size: 11px; letter-spacing: 0px; padding: 0px!important; text-transform: lowercase; }
    #gms-tickets-form.gabbro-form  td.UnitText ,
    #gms-tickets-form.gabbro-form  td.PriorityText,
    #gms-tickets-form.gabbro-form  td.StatusText,
    #gms-tickets-form.gabbro-form  td.ticketUnit ,
    #gms-tickets-form.gabbro-form  td.ticketPriority,
    #gms-tickets-form.gabbro-form  td.ticketStatus { display: none; }
    
    #gms-tickets-form.gabbro-form .heading td { font-size: 10px; }
    .gabbro-form .heading,
    .gabbro-form  td,
    .gabbro-form .heading td { font-size: 10px;  }

    .photos.popup .photo{    width: 100%; margin: 0px; }
   
    .tickets .search { max-width: 250px; }
   
    .gabbro-form label {  font-size: 11px ; font-weight: 400; padding: 1px!important;}
	.gabbro-form label.managerToLabel{ font-size: 20px; font-weight: 400; }
    .gabbro-form input[type=radio] {margin: 2px!important;}
    
  
    .updateTicket .popup-header h2,
    .tickets .popup-header h2   { font-size: 14px; letter-spacing: -1px; font-weight: 500; width: 100%; left: 0px; opacity: 1; padding: 0px 25px;}
    .tickets.tile-container { width: 100%; }
    .updateTicket .popup-header h2 {padding: 25px; }
   
    .popup-header h2{ font-size: 16px; font-weight: 600;  letter-spacing: -1px;  }
    .popup-action{ font-size: 18px; }
    .popup-action.new { background-size: 30px 30px;  padding-left: 30px; letter-spacing: 1px;  }
    .popup-action.new span2 {opacity: 0; }
    .popup-action.filter,
    .popup-action.filter .level,
    .popup-action.filter .reset,
    .popup-action.filter .title,
    .popup-action.filter.priority,
    .popup-action.filter.status { font-size: 9px; padding: 10px 5px; margin: 0px;}
    
    
    .contact .gabbro-form,
    .www .content { padding: 5px; }
    .www .poster { font-size: 40px; font-weight: 400;  letter-spacing: -4px;}
    .www .poster span { margin: 5px auto; font-size: 9px; font-weight: 500; }
    .login-action { font-size: 12px; padding: 5px; font-weight: 400; letter-spacing: 0px; }
    
  
}


/* --------------- 460px --------------- */
@media screen and  (max-width: 460px) /*Big Cell Phones */ {
    
    .popup { padding: 20px 0px;}
    .gabbro-form { padding: 5px; }
    img.invoiceImg { width: 20px; }
    
    
    
    #gms-tickets-form.gabbro-form td { padding: 15px;}
 
    #gms-tickets-form.gabbro-form .heading td { border-top: none; }
    .popup-action.filter .title { font-size: 10px; letter-spacing: 0px; }
    .popup-action.filter.reset .title { border: none; }
    .ticketFeedbackText, .ticketDescriptionText {  text-transform: lowercase;}
    
    
    .g-recaptcha-archived { transform: scale(0.67); }
    
    .poster span,
    .poster span2 { font-size: 10px; letter-spacing: 0px; }
    
    .www .contact .gabbro-form {  width: 100%; }
    
    
}

/* --------------- 400px --------------- */
@media screen and (max-width: 400px)/*Small Cell Phones */ {
    
    .poster span { letter-spacing: 3px; }
    .poster span2 { display: none;}
    .spo-responsive-navigation>ul { top: 0px; height: 100vh;}
    
  
    
}



@media screen and (max-height : 960px)  {
    
    
    .gabbro-form input,
    .gabbro-form button{ padding: 5px 25px; }
    
    .login-form.gabbro-form.static { top: 15vh;}
    
    
    
    
    .poster.login {   }
    .poster span { font-size: 10px;  }
    .poster span2 { font-size: 12px;}
    #gms-tickets-form.gabbro-form  td{  padding: 0px 10px; }
    .popup-action.filter .title ,
    #gms-tickets-form.gabbro-form  td span{ width: 100px; }
    #gms-tickets-form.gabbro-form td span.ticketFeedbackText,
    #gms-tickets-form.gabbro-form td span.ticketDescriptionText { padding:  10px 2px; }
    
   
    .popup-action.filter.priority, .popup-action.filter.status, .popup-action.filter.reset { padding: 10px 5px;     }
    .popup-action.filter,
    .popup-action.filter .level,
    .popup-action.filter .reset,
    .popup-action.filter .title { letter-spacing: 0px; }
    
    
    footer { font-size: 12px; min-height: 50px;}
    footer .col-sm-12 { padding: 0px 10%; }
    
}

@media screen and (max-height : 800px) {
    footer { font-size: 9px;  }
    footer span { font-size: 7px; }
    .tickets table{ margin: 20px auto; }
   

    .gabbro-button { font-size: 10px; letter-spacing: 1px; }
    .poster span2 {display: none; }
    .poster span3 { font-size: 14px;  }
  
  @media screen and (orientation: landscape) {
        .photos.popup .photo{ width: 33%; margin: 0px;}
    }
   
}

@media screen and (max-height : 768px){
    
    .tickets.tile-container { height: 80vh; }
  
    @media screen and (orientation: landscape) {
        .popup { padding-top: 0px!important}
    }
    
}


@media screen and (orientation: landscape) and (max-height : 600px){
    
    .gabbro-form .heading,
    .gabbro-form td,
    .gabbro-form .heading td { font-size: 10px; padding: 2px; }
    
    .tickets .popup-header { height: 50px;}
    .tickets table{ margin: 50px auto 0px auto;}
    .popup-action.filter { display: none; }
    #gms-tickets-form.gabbro-form td { min-width: 100px;  }
    #gms-tickets-form.gabbro-form .heading td { border-top: none; }
    
    .spo-responsive-navigation>ul>li>a { font-size: 10px; }
    
    .poster.login { top: 0vh; position: fixed;  }
    .login-form .gabbro-button {  padding: 10px 10px; }
   
}
/**************** END:  MOBILE LANDSCAPE VIEW ****************/