@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Light.eot');
    src: local('Cera Pro Light'), local('../font/CeraPro-Light'),
        url('../font/CeraPro-Light.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Light.woff') format('woff'),
        url('../font/CeraPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Regular.eot');
    src: local('Cera Pro Regular'), local('../font/CeraPro-Regular'),
        url('../font/CeraPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Regular.woff') format('woff'),
        url('../font/CeraPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Italic.eot');
    src: local('Cera Pro Italic'), local('../font/CeraPro-Italic'),
        url('../font/CeraPro-Italic.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Italic.woff') format('woff'),
        url('../font/CeraPro-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Medium.eot');
    src: local('Cera Pro Medium'), local('../font/CeraPro-Medium'),
        url('../font/CeraPro-Medium.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Medium.woff') format('woff'),
        url('../font/CeraPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Bold.eot');
    src: local('Cera Pro Bold'), local('../font/CeraPro-Bold'),
        url('../font/CeraPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Bold.woff') format('woff'),
        url('../font/CeraPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-BoldItalic.eot');
    src: local('Cera Pro Bold Italic'), local('../font/CeraPro-BoldItalic'),
        url('../font/CeraPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-BoldItalic.woff') format('woff'),
        url('../font/CeraPro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: 'Cera Pro';
    src: url('../font/CeraPro-Black.eot');
    src: local('Cera Pro Black'), local('../font/CeraPro-Black'),
        url('../font/CeraPro-Black.eot?#iefix') format('embedded-opentype'),
        url('../font/CeraPro-Black.woff') format('woff'),
        url('../font/CeraPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
*, ul{
  margin: 0;
  padding: 0;  
  box-sizing: border-box;   
}
::selection{background-color:#00b1bc; color:#ffffff !important;}
::-moz-selection{background-color:#00b1bc; color:#ffffff !important;}

.dialog-off-canvas-main-canvas {
  background-color: white;
}

#block-userth-branding {
  background: transparent ;
  padding-left:241px;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

body{
  width: 100%;
  font-size: 15px;
  line-height: 1.4;
  color: #7f7f7f;
  font-family: 'Cera Pro';
	font-weight: 400;
	font-style: normal;
}
h1, h2, h3, h4,
strong, .form-item label, .form-wrapper > summary{
	font-weight: 600;
	font-style: normal;
}
h1, h2, h3, h4,
.form-item label, 
.form-wrapper > summary{
  color: #00b1bc;
}
h1, h2, h3, h4{
  margin: 0 0 20px;
}
h2{
  margin-bottom: 15px;
}
h3, h4{
  margin-bottom: 10px;
}
h1{
  font-size: 30px;
  margin-bottom: 30px;
}
h2{
  font-size: 20px;
}
h3{
  font-size: 18px;
}
h4{
  font-size: 16px;
}
.layout-container{
  overflow: hidden;
  position: relative;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
img{
  max-width: 100%;
  height: auto;
}
.field--type-image img{
  width: 100%;
  display: block;
}
.field--name-body img{
  width: auto;
}
.region-content ul{
  margin: 20px 0 20px 25px;
}
.region-content li{
  list-style-position: outside;
  margin: 5px 0;
}
.region-content .menu,
.region-content .menu li{
  margin: 0;
}
p{
  margin-bottom: 10px;
}
p:last-of-type{
  margin-bottom: 0;
}
a{
  text-decoration: none;
  color: #00b1bc;
  outline: none;
  -webkit-transition: all 500ms ease-out;
  -moz-transition: all 500ms ease-out;
  -o-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
a:hover{
  color:#7f7f7f;
}
.menu a{
  display: block;
}
.menu li{
  list-style: none;
}
.handle{
  box-sizing: content-box;
}
hr{
  border: none;
  border-bottom: 1px solid #d0d0d0;
  margin: 20px 0;
}

video{
  width: 100%;
  height: auto;
  display: block;
}
iframe{
  max-width: 100%;
}


/* general layout */

.layout-container{
  max-width: 1500px;
  padding: 50px 20px 100px;
  margin: 0 auto;
}
.region-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.menu--account .menu{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.menu--account a{
  padding: 10px;
  font-size: 13px;
  text-transform: uppercase;
  margin: 5px 0;
}
.menu--account li:first-child a{
  padding-left: 0;
}
.user-form fieldset,
.contact-form,
.view-notification,
.profile{
  max-width: 650px;
}
ul.tabs{
  padding: 0;
  margin: 0 0 15px;
  z-index: 30;
}
ul.tabs a{
  margin: 0;
  font-size: 18px;
  padding: 10px 15px;
  background-color: #eee;
  opacity: 0.8;
  color: #7f7f7f;
}
ul.tabs a.is-active,
ul.tabs a.is-active:hover{
  background-color: #aaa;
  color: #fff;
}
ul.tabs a:hover{
  background-color: #ddd;
}
ul.tabs a.is-active:hover,
ul.tabs a:hover{
  opacity: 1;
}

.block-views-blocknotification-block-1 .views-row,
.block-views-blocknotification-block-3 .views-row{
  margin-bottom: 30px;
}

.user-form{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}
.wrapfieldset{
  margin-right: 50px;
}
.user-form .form-actions{
  width: 100%;
}
.user-form fieldset + fieldset{
  margin-top: 50px;
}

fieldset[data-drupal-selector="edit-group-documents"],
.user-register-form .field--name-field-photo{
  display: none;
}
.user-logged-in fieldset[data-drupal-selector="edit-group-documents"],
.user-logged-in .user-register-form .field--name-field-photo{
  display: block;
}
.field--name-field-photo img{
  width: auto;
}

form input,
form textarea{
  max-width: 100%;
  border: none;
  transition: all 300ms ease-out;
  background-color: transparent;
  padding: 8px 0;
  line-height: 1;
  border-bottom: 1px solid #cbcbcb;
  background-color: rgba(255,255,255,0.8);
}
form input:focus{
  border-bottom: 1px solid #00b1bc;
}
.form-item label{
  display: block;
}
.form-item label.form-required::after{
  content: "*";
}
.form-type-checkbox label{
  display: inline-block;
}
.form-item .description{
  font-size: 12px;
  margin-top: 5px;
}
.fieldset-wrapper > .form-wrapper,
.fieldset-wrapper > .description,
.form-item{
  margin-top: 25px;
}
.details-wrapper .form-item{
  margin-top: 0;
}
.fieldset-wrapper > .description{
  font-size: 15px;
}
.form-wrapper > summary{
  position: relative;
  padding-right: 25px;
  margin-bottom: 5px;
  cursor: pointer;
}
.form-wrapper > summary::before{
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #00b1bc;
  clip-path: polygon(32% 0%,80% 50%,32% 100%,20% 87%,56% 50%,20% 13%);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(0);
  transition: all 300ms ease-out;
}
.form-wrapper > summary[aria-expanded="true"]::before{
  transform: translateY(-50%) rotate(90deg);
}
.form-item details label{
  color: #7f7f7f;
}
.details-description{
  margin-bottom: 5px;
}
.form-submit{
  color: #fff;
  border: none;
  padding: 15px 20px;
  display: inline-block;
  margin-top: 25px;
  z-index: 2;
  font-size: 18px;
  background-color: #00b1bc;
}
.form-submit:hover{
  background-color: #7f7f7f;
}
.draggable .form-submit{
  margin-top: 0;
  padding: 5px 10px;
  font-size: 14px;
}
th, td{
  padding: 0 15px 5px 0;
  text-align: left;
}
.draggable td div{
  display: inline-block;
}

.userinfo > div{
  margin-top: 30px;
}
.userinfo > div:first-child{
  margin-top: 0;
}
.userinfo > div > div{
  margin: 15px 0;
}
.yourdocs > div{
  position: relative;
  padding-left: 30px;
}
.yourdocs > div::after{
  content: " ";
  display: block;
  width: 16px;
  height: 16px;
  background-color: #00b1bc;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.yourdocs > .exist::after{
  clip-path: polygon(16% 41%, 36% 61%, 84% 13%, 99% 28%, 36% 91%, 1% 56%);;
  background-color: #24a777;
}
.yourdocs > .missing::after{
  clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);
  background-color: #cc3333;
}
.yourdocs > .opt-missing::after{
  border-radius: 50%;
  width: 8px;
  height: 8px;
}
.yourdocs .field--type-file .field__item{
  display: inline-block;
}
.yourdocs .field--type-file .field__item::after{
  content: ",";
}
.yourdocs .field--type-file .field__item:last-child:after{
  content: none;
}

.tabledrag-toggle-weight{
  display: none;
}

.view-user-admin-people thead th{
  font-size: 12px;
  text-transform: none;
}

input[data-drupal-selector="edit-preview"],
.region-popup{
  display: none;
}
.emailus .region-popup{
  display: block;
}
.contact-message-notification-form input.form-text{
  width: 100%;
}
.contact-message-notification-form .form-wrapper:first-child .form-item{
  margin-top: 0;
}
.contact-message-notification-form .form-wrapper{
  display: none;
}
.contact-message-notification-form .form-actions{
  display: block;
}
.region-popup{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 100;
  background-color: rgba(255,255,255,0.5);
}
.popup-wrap{
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
}
.popup{
  max-width: 750px;
  margin: 20px auto;
  padding: 20px;
  background-color: #eee;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  position: relative;
}
.close-popup-x{
  width: 30px;
  height: 30px;
  display: block;
  position: absolute;
  top: 15px;
  right: 15px;
  cursor: pointer;
}
.close-popup-x > span{
  display: block;
  background-color: #00b1bc;
  width: 30px;
  height: 30px;
  transition: all 300ms ease-out;
  clip-path: polygon(20% 0%, 50% 30%, 80% 0%, 100% 20%, 70% 50%, 100% 80%, 80% 100%, 50% 70%, 20% 100%, 0% 80%, 30% 50%, 0% 20%);
}
.close-popup-x:hover > span{
  background-color: #7f7f7f;
}
.popup .node--type-page > h2{
  margin-right: 50px;
}
.close-popup-txt{
  margin-top: 15px;
  text-decoration: underline;
  cursor: pointer;
}
.close-popup-txt:hover{
  color: #000;
}
.messages{
  display: inline-block;
}
.region-help{
  margin-bottom: 20px;
}

.applist > .view-filters{
  margin-bottom: 50px;
}
.applist > .view-filters .form--inline{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
.applist > .view-filters label{
  margin-bottom: 5px;
}
.applist > .view-filters select{
  padding: 5px;
}
.applist > .view-filters .form--inline > div{
  margin: 20px 20px 20px 0;
}
.applist > .view-filters .form-submit{
  margin-top: 0;
}
.applist > .view-content > div{
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: 1px solid #ccc;
}
.applist > .view-content .views-field{
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  font-size: 17px;
}
.applist > .view-content .views-field:nth-child(2n+2){
  background-color: #eee;
}
.applist > .view-content .views-field > *{
  margin-right: 10px;
}
.applist > .view-content .views-field > *:last-child{
  margin-right: 0;
}

@media screen and (max-width: 1200px) {
  .user-form{
    display: block;
  }
  .wrapfieldset{
    margin-right: 0;
  }
    #block-userth-branding {
  background: transparent ;
  padding-left:0px;
}

header {
    display:block;
     align-items: initial;
    justify-content: initial;
  margin-bottom: 50px;
}
}
@media screen and (max-width: 700px) {
  h1{
    font-size: 20px;
    margin-bottom: 20px;
  }
  h2{
    font-size: 18px;
    line-height: 1.1;
  }
  .region-header{
    display: block;
  }
  .menu--account .menu{
    justify-content: flex-start;
    margin-top: 20px;
  }
  ul.tabs a{
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
  }
  form input,
  form textarea{
    width: 100%;
  }
  .field--widget-boolean-checkbox input{
    width: auto;
  }
  #block-userth-branding img{
    width: 180px;
    height: auto;
  }
  .menu--account a{
    padding: 5px 10px 5px 0;
  }
  .layout-container{
    padding-top: 20px;
  }
  
}