@font-face {
    font-family:FontAwesome;
    src:url(../fonts/fontawesome-webfont.eot?v=4.7.0);
    src:url(../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(../fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),url(../fonts/fontawesome-webfont.woff?v=4.7.0) format('woff'),url(../fonts/fontawesome-webfont.ttf?v=4.7.0) format('truetype'),url(../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular) format('svg');
    font-weight:400;
    font-style:normal
}
.fa {
    display:inline-block;
    font:normal normal normal 14px/1 FontAwesome;
    font-size:inherit;
    text-rendering:auto;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale
}
.fa-fw {
    width:1.28571429em;
    text-align:center
}
@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    100% {
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg)
    }
}
@keyframes fa-spin {
    0% {
        -webkit-transform:rotate(0);
        transform:rotate(0)
    }
    100% {
        -webkit-transform:rotate(359deg);
        transform:rotate(359deg)
    }
}







/*MI CODIGO*/
img {
    vertical-align: middle;
    border-radius: 17em;
    border: 1em solid hsl(220 90% 20% / 1);
    border-right-width: medium;
}

@media (min-width: 601px) {
    .w3-col.m4, .w3-third {
        width: 26%;
    }
    
    .w3-col.m8, .w3-twothird {
        width: 70%;
    }
}

@media (max-width: 602px) {
    .w3-content, .w3-auto {
        padding-left: 0!important;
    }
}

.w3-tooltip, .w3-display-container {
    position: relative;
    display: flex;
    justify-content: center;
}

.w3-white.w3-text-grey.w3-card-4, .w3-container.w3-card.w3-white.w3-margin-bottom, .w3-container.w3-card.w3-white {
    border-radius: 2em;
}

h1, h2, h3, h4, h5, h6, h7 {
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 400;
    margin: 10px 0;
}

.w3-opacity, .w3-hover-opacity:hover {
    opacity: 1;
    color: hsl(210 100% 80% / 1);
}

h7 {
    font-size: 15px;
    color: hsl(200 60% 80% / 1);
    font-weight: 400;
}

.w3-light-grey, .w3-hover-light-grey:hover, .w3-light-gray, .w3-hover-light-gray:hover {
    color: #ffffff !important;
    background-color: hsl(220 75% 5% / 1) !important;
}

.w3-white, .w3-hover-white:hover {
    color: #ffffff !important;
    background-color: hsl(225 50% 12% / 1) !important;
}

.w3-text-grey, .w3-hover-text-grey:hover, .w3-text-gray, .w3-hover-text-gray:hover {
    color: hsl(210 20% 90% / 1) !important;
}

.w3-teal, .w3-hover-teal:hover {
    color: #fff !important;
    background-color: hsl(210 100% 40% / 1) !important;
}

.w3-text-teal, .w3-hover-text-teal:hover {
    color: hsl(210 100% 65% / 1) !important;
}

.w3-row-padding, .w3-row-padding>.w3-half, .w3-row-padding>.w3-third, .w3-row-padding>.w3-twothird, .w3-row-padding>.w3-threequarter, .w3-row-padding>.w3-quarter, .w3-row-padding>.w3-col {
    padding: 0 8px;
    margin-top: 10px;
}

.nameperso {
    color: #f3f3f3;
    font-weight: 900;
    text-shadow: -2px 2px 4px black;
    position: relative;
    top: -1em;
    font-size: 28px;
    text-align: center;
}

.tele-name {
    color: hsl(200 80% 50% / 1) !important;
}

b, strong {
    font-weight: 500;
}

.w3-display-bottomleft.w3-container.w3-text-black {
    right: 0;
}

.footer.dark-background .container {
    padding: 0 1em;
}

.w3-content, .w3-auto {
    padding-left: 4.1em;
}


/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
    color: #ffffff;
    background-color: hsl(225 40% 10% / 1);
    font-size: 14px;
    text-align: center;
    padding: 30px 0;
    position: relative;
    margin-top: 10em;
}

.footer a {
    color: #01ace3;
}

.footer h3 {
  font-size: 36px;
  font-weight: 700;
  position: relative;
  padding: 0;
  margin: 0 0 15px 0;
}

.footer p {
  font-size: 15;
  font-style: italic;
  padding: 0;
  margin: 0 0 30px 0;
}

.footer .social-links {
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
    flex-direction: row;
}

.footer .social-links a {
    font-size: 26px;
    color: #e0e6eb;
    line-height: 1;
    margin: 0 4px;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    text-decoration: none;
    color: #4ca6ff;
}

.footer .copyright {
  padding-top: 25px;
  border-top: 1px solid color-mix(in srgb, #ffffff, transparent 90%);
}

.footer .credits {
  font-size: 13px;
  padding-top: 5px;
}