@charset "utf-8";

/* **********      from http://css3please.com       ********** 
   ********** use css3pie.com to get effects for IE **********
*/

.align-center {
	text-align: center;
}

.card {
    width:80%; margin:auto;
}

.box_round {
  -webkit-border-radius:   12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
     -moz-border-radius:   12px;             /* FF1-3.6                                                 */
          border-radius:   12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
               behavior:   url(PIE/PIE.htc); /* IE<9 */
  -webkit-background-clip: padding-box; 
     -moz-background-clip: padding; 
          background-clip: padding-box;      /* keeps bg color from leaking outside the border: */
}

.box_top_round {
  -webkit-border-top-left-radius:  12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
     -moz-border-top-left-radius:  12px;             /* FF1-3.6                                                 */
          border-top-left-radius:  12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -webkit-border-top-right-radius: 12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
     -moz-border-top-right-radius: 12px;             /* FF1-3.6                                                 */
          border-top-right-radius: 12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* longhand border-top-left/right-radius not supported by PIE yet so no IE<9 support for this yet */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; /* keeps bg color from leaking outside the border: */
}

.box_bottom_round {
  -webkit-border-bottom-left-radius:  12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
     -moz-border-bottom-left-radius:  12px;             /* FF1-3.6                                                 */
          border-bottom-left-radius:  12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  -webkit-border-bottom-right-radius: 12px;             /* Saf3-4, iOS 1-3.2, Android <e;1.6                       */
     -moz-border-bottom-right-radius: 12px;             /* FF1-3.6                                                 */
          border-bottom-right-radius: 12px;             /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
  /* longhand border-bottom-left/right-radius not supported by PIE yet so no IE<9 support for this yet */
  -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;   /* keeps bg color from leaking outside the border: */
}

.box_gradient {
  background-color: #FFFFFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#999999)); /* Saf4+, Chrome               */
  background-image: -webkit-linear-gradient(top, #FFFFFF, #999999);                              /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #FFFFFF, #999999);                              /* FF3.6                       */
  background-image:     -ms-linear-gradient(top, #FFFFFF, #999999);                              /* IE10                        */
  background-image:      -o-linear-gradient(top, #FFFFFF, #999999);                              /* Opera 11.10+                */
  background-image:         linear-gradient(top, #FFFFFF, #999999);
   -pie-background: linear-gradient(#FFFFFF, #999999);                                           /* PIE for IE<9                */
          behavior: url(PIE/PIE.htc);                                                            /* PIE for IE<9                */
}

.box_igradient {
  background-color: #FFFFFF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#999999)); /* Saf4+, Chrome               */
  background-image: -webkit-linear-gradient(top, #999999, #FFFFFF);                              /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #999999, #FFFFFF);                              /* FF3.6                       */
  background-image:     -ms-linear-gradient(top, #999999, #FFFFFF);                              /* IE10                        */
  background-image:      -o-linear-gradient(top, #999999, #FFFFFF);                              /* Opera 11.10+                */
  background-image:         linear-gradient(top, #999999, #FFFFFF);
   -pie-background: linear-gradient(#999999, #FFFFFF);                                           /* PIE for IE<9                */
          behavior: url(PIE/PIE.htc);                                                            /* PIE for IE<9                */
}

.box_shadow {
  -webkit-box-shadow: 8px 8px 4px #999999; /* Saf3-4, iOS 4.0.2 - 4.2, Android 2.3+   */
     -moz-box-shadow: 8px 8px 4px #999999; /* FF3.5 - 3.6                             */
          box-shadow: 8px 8px 4px #999999; /* Opera 10.5, IE9, FF4+, Chrome 6+, iOS 5 */
            behavior: url(PIE/PIE.htc);    /* IE<9 */
}

.box_vertical { 
  -webkit-transform: rotate(-90deg); /* Saf3.1+, Chrome */
     -moz-transform: rotate(-90deg); /* FF3.5+ */
      -ms-transform: rotate(-90deg); /* IE9 */
       -o-transform: rotate(-90deg); /* Opera 10.5 */
          transform: rotate(-90deg);
		             /* IE filter calculations courtesy of http://samples.msdn.microsoft.com/workshop/samples/author/dhtml/filters/matrix.htm */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, sizingMethod='auto expand');  /* IE6IE9 */
               zoom: 1;
}

.glass {                     /* inspired by https://css.glass */
    background-color:        rgba(255, 255, 255, 0.2);
    border-radius:           16px;
    backdrop-filter:         blur(5px); /* saturate(100%) contrast(45%) brightness(130%); */
    -webkit-backdrop-filter: blur(5px); /* saturate(100%) contrast(45%) brightness(130%); */
    border:                  1px solid rgba(255, 255, 255, 0.08);
}