/* 
    Created on : Feb 23, 2019, 10:53:56 PM
    Author     : Felixom
*/

i.icon {
    margin: 12px;
    border: 6px solid #fff;
    display: inline-block;
    position: relative;
    vertical-align: top;
}
i.icon:after,
i.icon:before {
    background: #fff;
    border: 6px solid #fff;
    content: '';
    position: absolute;
}

i.cross {
    border-radius: 100%;
    height: 120px;
    width: 120px;
}
i.cross:after {
    height: 2px;
    left: 6px;
    top: 47px;
    width: 100px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
i.cross:before {
    height: 2px;
    left: 4px;
    top: 48px;
    width: 100px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
}

i.tick {
    border-radius: 100%;
    height: 120px;
    width: 120px;
}
i.tick:after {
    height: 0;
    left: 15px;
    top: 52px;
    width: 90px;
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    
}
i.tick:before {
    height: 0;
    left: 6px;
    top: 68px;
    width: 30px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}

@media (max-width: 320px) {
    i.icon {
        margin: 12px;
        border: 3px solid #fff;
        display: inline-block;
        position: relative;
        vertical-align: top;
    }
    i.icon:after,
    i.icon:before {
        background: #fff;
        border: 3px solid #fff;
        content: '';
        position: absolute;
    }

    i.cross {
        border-radius: 100%;
        height: 40px;
        width: 40px;
    }
    i.cross:after {
        height: 2px;
        left: -2px;
        top: 13px;
        width: 37px;
        -webkit-transform: rotate(45deg);
           -moz-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
             -o-transform: rotate(45deg);
                transform: rotate(45deg);
    }
    i.cross:before {
        height: 2px;
        left: -3px;
        top: 15px;
        width: 37px;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);
    }

    i.tick {
        border-radius: 100%;
        height: 120px;
        width: 120px;
    }
    i.tick:after {
        height: 0;
        left: 15px;
        top: 52px;
        width: 90px;
        -webkit-transform: rotate(-45deg);
           -moz-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
             -o-transform: rotate(-45deg);
                transform: rotate(-45deg);

    }
    i.tick:before {
    height: 0;
    left: 6px;
    top: 68px;
    width: 30px;
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
}
}
/*********************************************/

/* STYLE 3 */

button.error {
    border-color: white;
    color: #fff;	
    padding: 8px 20px;
    background: #e8e8e8;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	
    background: #d59f9f;
    background: -moz-linear-gradient(top, #dd2525 51%, #a80808 51%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#dd2525), color-stop(51%,#a80808));
    background: -webkit-linear-gradient(top, #dd2525 51%,#a80808 51%);
    background: -o-linear-gradient(top, #dd2525 51%,#a80808 51%);
    background: -ms-linear-gradient(top, #dd2525 51%,#a80808 51%);
    background: linear-gradient(top, #dd2525 51%,#a80808 51%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dd2525', endColorstr='#a80808',GradientType=0 );
}

button.success {
    border-color: white;
    color: #fff;	
    padding: 8px 20px;
    background: #e8e8e8;

    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
	
    background: #d59f9f;
    background: -moz-linear-gradient(top, #2edd25 51%, #10a808 51%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#2edd25), color-stop(51%,#10a808));
    background: -webkit-linear-gradient(top, #2edd25 51%,#10a808 51%);
    background: -o-linear-gradient(top, #2edd25 51%,#10a808 51%);
    background: -ms-linear-gradient(top, #2edd25 51%,#10a808 51%);
    background: linear-gradient(top, #2edd25 51%,#10a808 51%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2edd25', endColorstr='#10a808',GradientType=0 );
}

/*********************************************/

/* :: 3.0 Preloader Area CSS */
#preloader {
  /*position: fixed;*/
  font-family: sans-serif;
  flex-direction: column;
  color: #ffffff;
  font-size: 18px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: #0f5fee8f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden; }
#preloader p{margin:20px;}

#preerror {
  /*position: fixed;*/
  font-family: sans-serif;
  flex-direction: column;
  color: #ffffff;
  font-size: 18px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: #ee0f0f;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden; }
#preerror p{margin:20px;}

#presuccess {
  /*position: fixed;*/
  font-family: sans-serif;
  flex-direction: column;
  color: #ffffff;
  font-size: 18px;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 2000;
  top: 0;
  left: 0;
  background-color: #48c803;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  overflow: hidden; }
#presuccess p{margin:20px;}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out; }

.loader {
  margin-bottom: 30px;
  color: #ffffff;
  font-size: 6px;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s; }

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0; }

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s; }

.loader:after {
  left: 3.5em; }

@-webkit-keyframes load7 {
  0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }
@keyframes load7 {
  0%,
    80%,
    100% {
    box-shadow: 0 2.5em 0 -1.3em; }
  40% {
    box-shadow: 0 2.5em 0 0; } }