:root{

  --font-primary: 'Saira', sans-serif;
  --color-primary: #4A8EDD  ;
  --color-primary-light: #A3C8F1;
  --color-primary-white: #B7D6F7;
  --color-primary-light-bg: #D4E7FF;
  --color-primary-dark-light: #3F5B9A;
  --color-primary-dark: #2D4A7D;
  --color-primary-dark-deep-1: #1E3B66;
  --color-primary-dark-deep-2: #0028AA;
  --color-font-dark: #000;
  --color-font-white: #fff;
  --color-font-grey: #606060;
  --color-bg-white: #fff;
  --color-bg-dark: #000;
  --color-font-title:#040F43;
  --color-font-orange:#F56C6C;
  --color-bg-secondary:#f7f7f7;
  --color-bg-err:#dc3545;
  --color-bg-success: #198754;
  --color-font-p:#9CA2C0;
}
*{
  margin: 0;
  padding: 0 ;
}
body p {
  color: var( --color-font-grey);
}
.color-primary { color: var(--color-primary) !important; }
.color-primary-light { color: var(--color-primary-light) !important; }
.color-primary-dark { color: var(--color-primary-dark) !important; }

.btn-primary-all { 
  border: 1px solid var(--color-primary);
  background: transparent;
}

.btn_primary{
  position: relative;
  border:2px solid var(--color-primary);
  box-shadow: none;
  width: 130px;
  height: 40px;
  line-height: 42px;
  -webkit-perspective: 230px;
  perspective: 230px;
  overflow: hidden;
}
.btn_primary span {
  display: block;
  position: absolute;
  width: 126px;
  height: 36px;
  border-radius: 5px;
  margin:0;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
  color: var(--color-font-white);
}
.btn_primary span:nth-child(1) {
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  transform: rotateX(90deg);
  -webkit-transform-origin: 50% 50% -24px;
  -moz-transform-origin: 50% 50% -24px;
  transform-origin: 50% 50% -24px;
}
.btn_primary span:nth-child(2) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-transform-origin: 50% 50% -20px;
  -moz-transform-origin: 50% 50% -20px;
  transform-origin: 50% 50% -20px;
  background: transparent;
}
.btn_primary:hover span:nth-child(1) {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.btn_primary:hover span:nth-child(2) {
 color: transparent;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
/* 7 */
.btn-page-all {
  display: inline-block;
  background:var(--color-primary);
  line-height: 42px;
  padding: 0;
  border: none;
  color: var(--color-font-white);
  position: relative;
  
}
.btn-page-all span {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  padding: 0 60px;
  text-align: center;
  cursor: pointer;

  
}
.btn-page-all:before,
.btn-page-all:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: rgba(251,75,2,1);
  /* box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3); */
  transition: all 0.3s ease;
}
.btn-page-all:before{
   height: 0%;
   width: 2px;
}
.btn-page-all:after {
  width: 0%;
  height: 2px;
}
.btn-page-all:hover{
  color: rgba(251,75,2,1);
  background: transparent;
}
.btn-page-all:hover:before {
  height: 100%;
}
.btn-page-all:hover:after {
  width: 100%;
}
.btn-page-all span:before,
.btn-page-all span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: rgba(251,75,2,1);
  /* box-shadow:
   -7px -7px 20px 0px rgba(255,255,255,.9),
   -4px -4px 5px 0px rgba(255,255,255,.9),
   7px 7px 20px 0px rgba(0,0,0,.2),
   4px 4px 5px 0px rgba(0,0,0,.3); */
  transition: all 0.3s ease;
}
.btn-page-all span:before {
  width: 2px;
  height: 0%;
}
.btn-page-all span:after {
  height: 2px;
  width: 0%;
}
.btn-page-all span:hover:before {
  height: 100%;
}
.btn-page-all span:hover:after {
  width: 100%;
}
.btn-page-all-wrapper{
 display: flex;
 justify-content: center;
}
.flex{
  display: flex;
}
.align-center{
  align-items: center;
}
.justify-center{
  justify-content: center;
}
.justify-between{
  justify-content: space-between;
}
.flex-wrap{
  flex-wrap: wrap;
}
.flex1{
  flex: 1;

}
.flex-column{
  flex-direction: column;
}
.default-title { 
  font-size:36px;
  color: var(--color-font-title);
  text-align: center;
  margin-bottom: 40px;
}
.t-center{
  text-align: center;
}
.color-white{
  color: var(--color-font-white) !important;
}