*{margin: 0; padding: 0;}
a{ text-decoration: none;}
canvas {display:block }
html{ position: relative; width: 100%; height: 100%; font-size: 16px; overflow: hidden}
main{ position: absolute; width: 100%; color: white; z-index: 2; top:0; left: 0; text-align: center; padding-top: 200px;}
main .avatar{ display: inline-block; width: 8em; height: 8em; border-radius: 8em; border: 8px solid rgba(255,255,255,0.2)}
main h1{font-weight: 600; padding: 0.5em 0 0.5em; position: relative; color:#1c88e4}
main h1 small{ position: absolute; font-size: 10px; top: 2.3em; color: #15368a}
main h2{font-weight: 600; }
main .contact{ width: 40%; margin: 0 auto; padding: 0;}
main .contact li{ width: 33%; float: left; list-style: none;}
main .contact i{ display: block; font-size: 1.5em; width: 2.5em; height: 2.5em; line-height: 2.5em; text-align: center; background: rgba(90,157,220,0.4); border-radius: 2.5em; margin: 1em auto;}
main .contact span,main .contact span a{ text-shadow: 2px 2px 5px #662f08; font-weight: 800; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: white;}
footer{ width: 96%; padding: 0.5em 2%; position: fixed; left: 0; bottom: 20px; text-align: center; background: rgba(90,157,220,0.4); background: -webkit-linear-gradient(left, rgba(90,157,220,0.0) 0%,rgba(90,157,220,0.4) 50%,rgba(90,157,220,0.0) 100%);color: white; font-size: 12px;}
footer a{color: white;}

@media (max-width:414px){
    main{padding-top: 80px;}
    main .avatar{ display: inline-block; width: 8em; height: 8em; border-radius: 8em; border: 8px solid rgba(255,255,255,0.2)}
    main .contact{ width: 70%; margin-top: 1em;}
    main .contact li{ width: 100%; float: none; list-style: none; line-height: 1em; text-align: left;}
    main .contact i{ display:inline-block; font-size: 1.2em; width: 2em; height: 2em; line-height: 2em; text-align: center; background: rgba(90,157,220,0.6); border-radius: 2em; margin: 0.3em 0.6em;}
}
@media (max-width:321px){
    main{padding-top: 50px;}
    main h1{font-size: 1.5em;}
    main h1 small{ top: 1.3em; }
    main .avatar{ display: inline-block; width: 6em; height: 6em; border-radius: 6em; border: 5px solid rgba(255,255,255,0.2)}
    main .contact{ width: 90%; margin-top: 0.5em;}
    main .contact li{ width: 100%; float: none; list-style: none; line-height: 1em; text-align: left;}
    main .contact i{ display:inline-block; font-size: 1.2em; width: 2em; height: 2em; line-height: 2em; text-align: center; background: rgba(90,157,220,0.6); border-radius: 2em; margin: 0.3em 0.6em;}
}
@media (min-width:415px){
    main{padding-top: 180px;}
    main .avatar{  width:10em; height: 10em; }
    main .contact{ width: 70%; margin: 2em auto 0; padding: 0;}
}
@media (min-width:1366px){
    main{padding-top: 180px;}
    main .avatar{  width:10em; height: 10em; }
    main .contact{ width: 700px; margin: 2em auto 0; padding: 0;}
}





#ajaxloader2 {
    margin: 0 auto;
}
#ajaxloader2 .outer {
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    width: 50px;
    height: 50px;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    -moz-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    -webkit-animation: spin-right 0.5s linear infinite normal;
    -moz-animation: spin-right 0.5s linear infinite normal;
    -ms-animation: spin-right 0.5s linear infinite normal;
    animation: spin-right 0.5s linear infinite normal;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
    margin: 0 auto;
}
#ajaxloader2 .inner {
    display: block;
    width: 30px;
    height: 30px;
    border: 5px solid rgba(0, 183, 229, 0.9);
    opacity: .9;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    -webkit-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    -moz-box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    box-shadow: 0 0 35px rgba(0, 61, 76, 0.9);
    position: relative;
    top: -50px;
    margin: 0 auto;
    -webkit-animation: spin-left 0.5s linear infinite normal;
    -moz-animation: spin-left 0.5s linear infinite normal;
    -ms-animation: spin-left 0.5s linear infinite normal;
    animation: spin-left 0.5s linear infinite normal;
    -webkit-animation-delay: 0;
    -moz-animation-delay: 0;
    -o-animation-delay: 0;
    animation-delay: 0;
}
@keyframes spin-right {
    from {
        transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        transform: rotate(180deg);
        opacity: 1.0;
    }
    to {
        transform: rotate(360deg);
        opacity: 0.2;
    }
}
@-moz-keyframes spin-right {
    from {
        -moz-transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -moz-transform: rotate(180deg);
        opacity: 1.0;
    }
    to {
        -moz-transform: rotate(360deg);
        opacity: 0.2;
    }
}
@-webkit-keyframes spin-right {
    from {
        -webkit-transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -webkit-transform: rotate(180deg);
        opacity: 1.0;
    }
    to {
        -webkit-transform: rotate(360deg);
        opacity: 0.2;
    }
}
@keyframes spin-left {
    from {
        transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        transform: rotate(-180deg);
        opacity: 1.0;
    }
    to {
        transform: rotate(-360deg);
        opacity: 0.2;
    }
}
@-moz-keyframes spin-left {
    from {
        -moz-transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -moz-transform: rotate(-180deg);
        opacity: 1.0;
    }
    to {
        -moz-transform: rotate(-360deg);
        opacity: 0.2;
    }
}
@-webkit-keyframes spin-left {
    from {
        -webkit-transform: rotate(0deg);
        opacity: 0.2;
    }
    50% {
        -webkit-transform: rotate(-180deg);
        opacity: 1.0;
    }
    to {
        -webkit-transform: rotate(-360deg);
        opacity: 0.2;
    }
}