/* -------------------------------- 



Primary style



-------------------------------- */

*, *::after, *::before {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}



.cd-panel-close-tw::after, .cd-panel-close-tw::before {

  content: '';

}







.mod_slide_panel a {

  color: #89ba2c;

  text-decoration: none;

}



/* -------------------------------- 



Main components 



-------------------------------- */

html, body {

  height: 100%;

}



.cd-main-content-tw {

  text-align: center;

}

.cd-main-content-tw h1 {

  font-size: 20px;

  font-size: 1.25rem;

  color: #64788c;

  padding: 4em 0;

}

.cd-main-content-tw .cd-btn-tw {

  position: absolute;

  padding: 18px;

  background-repeat: no-repeat;

  height: 100px;





}

.no-touch .cd-main-content-tw .cd-btn-tw:hover {

  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);

}

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

  .cd-main-content-tw h1 {

    font-size: 32px;

    font-size: 2rem;

  }

}



.cd-panel-tw {

  position: fixed;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%;

  visibility: hidden;

  -webkit-transition: visibility 0s 0.6s;

  -moz-transition: visibility 0s 0.6s;

  transition: visibility 0s 0.6s;

}

header.cd-panel-header-tw {

width: 25%;

}

.cd-panel-tw::after {

  /* overlay layer */

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: transparent;

  cursor: pointer;

  -webkit-transition: background 0.3s 0.3s;

  -moz-transition: background 0.3s 0.3s;

  transition: background 0.3s 0.3s;

}

.cd-panel-tw.is-visible {

  visibility: visible;

  -webkit-transition: visibility 0s 0s;

  -moz-transition: visibility 0s 0s;

  transition: visibility 0s 0s;

}

.cd-panel-tw.is-visible::after {

  background: rgba(0, 0, 0, 0.6);

  -webkit-transition: background 0.3s 0s;

  -moz-transition: background 0.3s 0s;

  transition: background 0.3s 0s;

}

.cd-panel-tw.is-visible .cd-panel-close::before {

  -webkit-animation: cd-close-1 0.6s 0.3s;

  -moz-animation: cd-close-1 0.6s 0.3s;

  animation: cd-close-1 0.6s 0.3s;

}

.cd-panel-tw.is-visible .cd-panel-close::after {

  -webkit-animation: cd-close-2 0.6s 0.3s;

  -moz-animation: cd-close-2 0.6s 0.3s;

  animation: cd-close-2 0.6s 0.3s;

}



@-webkit-keyframes cd-close-1 {

  0%, 50% {

    -webkit-transform: rotate(0);

  }

  100% {

    -webkit-transform: rotate(45deg);

  }

}

@-moz-keyframes cd-close-1 {

  0%, 50% {

    -moz-transform: rotate(0);

  }

  100% {

    -moz-transform: rotate(45deg);

  }

}

@keyframes cd-close-1 {

  0%, 50% {

    -webkit-transform: rotate(0);

    -moz-transform: rotate(0);

    -ms-transform: rotate(0);

    -o-transform: rotate(0);

    transform: rotate(0);

  }

  100% {

    -webkit-transform: rotate(45deg);

    -moz-transform: rotate(45deg);

    -ms-transform: rotate(45deg);

    -o-transform: rotate(45deg);

    transform: rotate(45deg);

  }

}

@-webkit-keyframes cd-close-2 {

  0%, 50% {

    -webkit-transform: rotate(0);

  }

  100% {

    -webkit-transform: rotate(-45deg);

  }

}

@-moz-keyframes cd-close-2 {

  0%, 50% {

    -moz-transform: rotate(0);

  }

  100% {

    -moz-transform: rotate(-45deg);

  }

}

@keyframes cd-close-2 {

  0%, 50% {

    -webkit-transform: rotate(0);

    -moz-transform: rotate(0);

    -ms-transform: rotate(0);

    -o-transform: rotate(0);

    transform: rotate(0);

  }

  100% {

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

  }

}

.cd-panel-header-tw {

  position: fixed;

  width: 90%;

  height: 50px;

  line-height: 50px;

  background: rgba(255, 255, 255, 0.96);

  z-index: 2;

  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);

  -webkit-transition: top 0.3s 0s;

  -moz-transition: top 0.3s 0s;

  transition: top 0.3s 0s;

}

.cd-panel-header-tw h1 {

  font-weight: bold;

  color: #89ba2c;

  padding-left: 5%;

}

.from-right-tw .cd-panel-header-tw, .from-left-tw .cd-panel-header-tw {

  top: -50px;

}

.from-right-tw .cd-panel-header-tw {

  right: 0;

}

.from-left-tw .cd-panel-header-tw {

  left: 0;

}

.is-visible .cd-panel-header-tw {

  top: 0;

  -webkit-transition: top 0.3s 0.3s;

  -moz-transition: top 0.3s 0.3s;

  transition: top 0.3s 0.3s;

}

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

  .cd-panel-header-tw {

    width: 70%;

  }

}

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

  .cd-panel-header-tw {

    width: 50%;

  }

}



.cd-panel-close-tw {

  position: absolute;

  top: 0;

  right: 0;

  height: 100%;

  width: 60px;

  /* image replacement */

  display: inline-block;

  overflow: hidden;

  text-indent: 100%;

  white-space: nowrap;

}

.cd-panel-close-tw::before, .cd-panel-close-tw::after {

  /* close icon created in CSS */

  position: absolute;

  top: 22px;

  left: 20px;

  height: 3px;

  width: 20px;

  background-color: #424f5c;

  /* this fixes a bug where pseudo elements are slighty off position */

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

}

.cd-panel-close-tw::before {

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  transform: rotate(45deg);

}

.cd-panel-close-tw::after {

  -webkit-transform: rotate(-45deg);

  -moz-transform: rotate(-45deg);

  -ms-transform: rotate(-45deg);

  -o-transform: rotate(-45deg);

  transform: rotate(-45deg);

}

.no-touch .cd-panel-close-tw:hover {

  background-color: #424f5c;

}

.no-touch .cd-panel-close-tw:hover::before, .no-touch .cd-panel-close-tw:hover::after {

  background-color: #ffffff;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  -moz-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.no-touch .cd-panel-close-tw:hover::before {

  -webkit-transform: rotate(220deg);

  -moz-transform: rotate(220deg);

  -ms-transform: rotate(220deg);

  -o-transform: rotate(220deg);

  transform: rotate(220deg);

}

.no-touch .cd-panel-close-tw:hover::after {

  -webkit-transform: rotate(135deg);

  -moz-transform: rotate(135deg);

  -ms-transform: rotate(135deg);

  -o-transform: rotate(135deg);

  transform: rotate(135deg);

}



.cd-panel-container-tw {

  position: fixed;

  width: 90%;

  height: 100%;

  top: 0;

  background: #dbe2e9;

  z-index: 1;

  -webkit-transition-property: -webkit-transform;

  -moz-transition-property: -moz-transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  -moz-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-delay: 0.3s;

  -moz-transition-delay: 0.3s;

  transition-delay: 0.3s;

}

.from-right-tw .cd-panel-container-tw {

  right: 0;

  -webkit-transform: translate3d(100%, 0, 0);

  -moz-transform: translate3d(100%, 0, 0);

  -ms-transform: translate3d(100%, 0, 0);

  -o-transform: translate3d(100%, 0, 0);

  transform: translate3d(100%, 0, 0);

}

.from-left-tw .cd-panel-container-tw {

  left: 0;

  -webkit-transform: translate3d(-100%, 0, 0);

  -moz-transform: translate3d(-100%, 0, 0);

  -ms-transform: translate3d(-100%, 0, 0);

  -o-transform: translate3d(-100%, 0, 0);

  transform: translate3d(-100%, 0, 0);

}

.is-visible .cd-panel-container-tw {

  -webkit-transform: translate3d(0, 0, 0);

  -moz-transform: translate3d(0, 0, 0);

  -ms-transform: translate3d(0, 0, 0);

  -o-transform: translate3d(0, 0, 0);

  transform: translate3d(0, 0, 0);

  -webkit-transition-delay: 0s;

  -moz-transition-delay: 0s;

  transition-delay: 0s;

}

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

  .cd-panel-container-tw {

    width: 70%;

  }

}

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

  .cd-panel-container-tw{

    width: 50%;

  }

}



.cd-panel-content-tw {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  padding-top: 50px ;

  overflow: hidden;

  /* smooth scrolling on touch devices */

  -webkit-overflow-scrolling: touch;

}

.cd-panel-content-tw p {

  font-size: 14px;

  font-size: 0.875rem;

  color: #424f5c;

  line-height: 1.4;

  margin: 2em 0;

}

.cd-panel-content-tw p:first-of-type {

  margin-top: 0;

}

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

  .cd-panel-content-tw p {

    font-size: 16px;

    font-size: 1rem;

    line-height: 1.6;

  }

}



/* -------------------------------- 



responsive 



-------------------------------- */



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

.cd-panel-container-tw{

  width: 25% !important;

  }

header.cd-panel-header-tw{

 width: 25% !important;

  }  

}



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

.cd-panel-container-tw{

  width: 26% !important;

  }

header.cd-panel-header-tw{

 width: 26% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 27% !important;

  }

header.cd-panel-header-tw{

 width: 27% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 28% !important;

  }

header.cd-panel-header-tw{

 width: 28% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 29% !important;

  }

header.cd-panel-header-tw{

 width: 29% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 30% !important;

  }

header.cd-panel-header-tw{

 width: 30% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 31% !important;

  }

header.cd-panel-header-tw{

 width: 31% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 32% !important;

  }

header.cd-panel-header-tw{

 width: 32% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 33% !important;

  }

header.cd-panel-header-tw{

 width: 33% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 34% !important;

  }

header.cd-panel-header-tw{

 width: 34% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 35% !important;

  }

header.cd-panel-header{

 width: 35% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 36% !important;

  }

header.cd-panel-header-tw{

 width: 36% !important;

  }  

}

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

.cd-panel-container-tw{

  width: 37% !important;

  }

header.cd-panel-header-tw{

 width: 37% !important;

  }  

}

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

.cd-panel-container{

  width: 38% !important;

  }

header.cd-panel-header-tw{

 width: 38% !important;

  }  

}

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

.cd-panel-container{

  width: 39% !important;

  }

header.cd-panel-header-tw{

 width: 39% !important;

  }  

}

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

.cd-panel-container-tw{



  width: 40% !important;

}

header.cd-panel-header-tw{

 width: 40% !important;

}

}



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

.cd-panel-container-tw{



  width: 41% !important;

}

header.cd-panel-header-tw{

 width: 41% !important;

}

}

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

.cd-panel-container-tw{



  width: 42% !important;

}

header.cd-panel-header-tw{

 width: 42% !important;

}

}

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

.cd-panel-container-tw{



  width: 43% !important;

}

header.cd-panel-header-tw{

 width: 43% !important;

}

}

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

.cd-panel-container-tw{



  width: 44% !important;

}

header.cd-panel-header-tw{

 width: 44% !important;

}

}

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

.cd-panel-container-tw{



  width: 45% !important;

}

header.cd-panel-header-tw{

 width: 45% !important;

}

}



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

.cd-panel-container-tw{



  width: 46% !important;

}

header.cd-panel-header-tw{

 width: 46% !important;

}

}



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

.cd-panel-container-tw{



  width: 47% !important;

}

header.cd-panel-header-tw{

 width: 47% !important;

}

}



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

.cd-panel-container-tw{



  width: 48% !important;

}

header.cd-panel-header-tw{

 width: 48% !important;

}

}

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

.cd-panel-container-tw{



  width: 49% !important;

}

header.cd-panel-header-tw{

 width: 49% !important;

}

}

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

.cd-panel-container-tw{



  width: 50% !important;

}

header.cd-panel-header-tw{

 width: 50% !important;

}

}

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

.cd-panel-container-tw{



  width: 51% !important;

}

header.cd-panel-header-tw{

 width: 51% !important;

}

}

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

.cd-panel-container-tw{



  width: 53% !important;

  

}

header.cd-panel-header-tw{

 width: 53% !important;

  }

}

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

.cd-panel-container-tw{



  width: 55% !important;

  

}

header.cd-panel-header-tw{

 width: 55% !important;

  }

}

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

.cd-panel-container-tw{



  width: 56% !important;

  

}

header.cd-panel-header-tw{

 width: 56% !important;

  }

}

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

.cd-panel-container-tw{



  width: 59% !important;

  

}

header.cd-panel-header-tw{

 width: 59% !important;

  }

}

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

.cd-panel-container-tw{



  width: 60% !important;

  

}

header.cd-panel-header-tw{

 width: 60% !important;

  }

}

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

.cd-panel-container-tw{



  width: 62% !important;

  

}

header.cd-panel-header-tw{

 width: 62% !important;

  }

}

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

.cd-panel-container-tw{



  width: 65% !important;

  

}

header.cd-panel-header-tw{

 width: 65% !important;

  }

}



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

.cd-panel-container-tw{



  width: 72% !important;

  

}

header.cd-panel-header-tw{

 width: 72% !important;

  }

}









@charset "utf-8";

/* CSS Document */