@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,700,900');
/*$mainFont: 'Montserrat', sans-serif;
$primaryColor: #4A90E2;
$secondColor:#0087AC;
*/
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
.switch input {display:none;}
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #c00;
  -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;
}
input:checked + .slider {
  background-color: #2196F3;
}
input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}
.slider.round {
  border-radius: 34px;
}
.slider.round:before {
  border-radius: 50%;
}
a.redbtn {
  width:70px;
  text-align:center;
  display:block;
  font-family: arial;
  text-decoration: none;
  font-weight: 300;
  font-size: 14px;
  border: #1071FF 1px solid;
  color: #1071FF;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  position: static;
   /*margin: 20px auto;*/
  transition: .5s;
  border-radius: 0px;
}
a.redbtn:hover {
  top: 5px;
  transition: .5s;
  color: #FF0000;
  border: #FF0000 1px solid;
  border-radius: 10px;
}
a.redbtn:active {
  color: #000;
  border: #1A1A1A 1px solid;
  transition: .07s;
  background-color: #FFF;
} 
a.blubtn {
  width:100px;
  text-align:center;
  display:block;
  font-family: arial;
  text-decoration: none;
  font-weight: 300;
  font-size: 14px;
  border: #1071FF 1px solid;
  color: #1071FF;
  padding: 3px;
  padding-left: 5px;
  padding-right: 5px;
  position: static;
   /*margin: 20px auto;*/
  transition: .5s;
  border-radius: 0px;
}
a.blubtn:hover {
  top: 5px;
  transition: .5s;
  color: #10FF58;
  border: #10FF58 1px solid;
  border-radius: 10px;
}
a.blubtn:active {
  color: #000;
  border: #1A1A1A 1px solid;
  transition: .07s;
  background-color: #FFF;
} 




body{
  /*background: #8FA6B4;*/
  font-family: 'Montserrat', sans-serif;
}


.button-parent{
  max-width: 900px;
  margin: auto;
  text-align: center;
}
/*.button-parent--inner{
    padding: 4em 1em;
  }
 */ 


a{
  text-decoration: none;
  font-weight: 500;
  position: relative; 
  color: #4A4A4A;
  display: inline-block;
}

.button-item{
  padding-bottom: 0.25em;
}

.button-itemr{
  padding-bottom: 0.25em;
}

.btn-1{
  padding: 0.25em 0.25em;
  width: 200px;
  border: 2px solid #4A90E2;
  transition: all 300ms ease;   
  box-shadow: 0px 4px 10px 2px rgba(black, 0.2);
}
.btn-1r{
  padding: 0.25em 0.25em;
  width: 300px;
  border: 2px solid #4A90E2;
  transition: all 300ms ease;   
  box-shadow: 0px 4px 10px 2px rgba(black, 0.2);
}

.btn-1:before{
    position: absolute;
    content: '';
    width: 0%; height: 100%;
    background: #4A90E2;
    top: 0; left: 50%;
    z-index: -1;
    transition: all 0ms ease;
  }

.btn-1r:before{
    position: absolute;
    content: '';
    width: 0%; height: 100%;
    background: #4A90E2;
    top: 0; left: 50%;
    z-index: -1;
    transition: all 0ms ease;
  }
   
  .btn-1:hover{
    color: white; 
    box-shadow:none;
  }
  .btn-1r:hover{
    color: white; 
    box-shadow:none;
  }

    .btn-1:hover:before{
      position: absolute;
      content: '';
      width: 100%; height: 100%;
      background: #4A90E2;
      top: 0; left: 0%;
      z-index: -1;
      transition: all 300ms ease;
    }

    .btn-1r:hover:before{
      position: absolute;
      content: '';
      width: 100%; height: 100%;
      background: #4A90E2;
      top: 0; left: 0%;
      z-index: -1;
      transition: all 300ms ease;
    }
.btn-s{
      padding: 0.25em 0.25em;
      width: 200px;
      border: 2px solid #4A90E2;
      transition: all 300ms ease;   
      box-shadow: 0px 4px 10px 2px rgba(black, 0.2);
      font-family: 'Montserrat', sans-serif;
    }
    .btn-s:before{
        position: absolute;
        content: '';
        width: 0%; height: 100%;
        background: #4A90E2;
        top: 0; left: 50%;
        z-index: -1;
        transition: all 0ms ease;
      }
      .btn-s:hover:before{
        position: absolute;
        content: '';
        width: 100%; height: 100%;
        background: #4A90E2;
        top: 0; left: 0%;
        z-index: -1;
        transition: all 300ms ease;
      }   
      .btn-s:hover{
        color: black; 
        box-shadow:none;
      }

        .btn-r{
          padding: 0.25em 0.25em;
          width: 200px;
          border: 2px solid rgb(255, 0, 0);
          transition: all 300ms ease;   
          box-shadow: 0px 4px 10px 2px rgba(black, 0.2);
        }
        .btn-r:before{
            position: absolute;
            content: '';
            width: 0%; height: 100%;
            background: rgb(255, 0, 0);
            top: 0; left: 50%;
            z-index: -1;
            transition: all 0ms ease;
          }
           
          .btn-r:hover{
            color: white; 
            box-shadow:none;
          }
            .btn-r:hover:before{
              position: absolute;
              content: '';
              width: 100%; height: 100%;
              background: rgb(255, 0, 0);
              top: 0; left: 0%;
              z-index: -1;
              transition: all 300ms ease;
            }   


            .btn-g{
              padding: 0.25em 0.25em;
              width: 200px;
              border: 2px solid rgb(2, 63, 2);
              transition: all 300ms ease;   
              box-shadow: 0px 4px 10px 2px rgba(black, 0.2);
            }
            .btn-g:before{
                position: absolute;
                content: '';
                width: 0%; height: 100%;
                background: rgb(2, 63, 2);
                top: 0; left: 50%;
                z-index: -1;
                transition: all 0ms ease;
              }
               
              .btn-g:hover{
                color: white; 
                box-shadow:none;
              }
                .btn-g:hover:before{
                  position: absolute;
                  content: '';
                  width: 100%; height: 100%;
                  background: rgb(2, 63, 2);
                  top: 0; left: 0%;
                  z-index: -1;
                  transition: all 300ms ease;
                }