@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

html{
    overflow-x: hidden;
}

body {
    font-family: 'Fredoka One', cursive;
    scroll-behavior: smooth;
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
input[type=number]:focus,
[type=text].form-control:focus,
[type=password].form-control:focus,
[type=email].form-control:focus,
[type=tel].form-control:focus,
[contenteditable].form-control:focus {
    box-shadow: none;
}

.navbar-light .navbar-toggler {
    color: #ffffff !important;
    border-color: transparent !important;
}

.navbar-light .navbar-toggler-icon {
    background-image: url(../images/menu.svg);
}

.mainMenu{
    transition: 500ms ease;
    background:transparent !important;
    box-shadow: none;
}

.mainMenu.scrolled{
    background: #ffffff !important;
    box-shadow: #5c5c5c 0px 4px 6px !important;
    border-radius: 20px;
}

#logo, #logo_n{
    height: 70px;
}

#logo_n{
    display:none;
}

#logo.scrolled{
    display:none;
}
#logo_n.scrolled{
    display: block;
}

.navbar-light .navbar-nav .nav-link{
    color:#ffffff !important;
    cursor: pointer !important;
}

.navbar-light .navbar-nav .nav-link.scrolled{
    color:#ffffff !important;
    background:#00bef3;
    padding:5px 10px;
    font-size: 13px;
    border-radius:60px;
    margin:5px;
    cursor: pointer !important;
}

.bg-light {
    background-color: transparent!important;
}

#textCarosuel{
    color:#ffffff;
    font-size:5rem;
}

#scrollImg{
    height: 45px;
}

#scrollText{
    color: #ffffff;
    font-size:24px;
}
#main{
    /* animation: changeColor 18s infinite; */
    background: #00bef3;
    color:#ffffff;
}

#main-footer{
    background: url(../images/ground.png);
    background-repeat: repeat-x;
    height: 114px;
}

@keyframes changeColor{
    0%{background:#432774 url(../images/pattern.png);}
    32%{background:#432774 url(../images/pattern.png);}
    63%{background:#0059b4 url(../images/pattern.png);}
    90%{background:#88032f url(../images/pattern.png);}
    100%{background:#432774 url(../images/pattern.png);}
}

#about {
    background: #00bef3 url(../images/footer-bottom.png);
    background-position: bottom;
    background-repeat: repeat-x;
    background-size: 90%;
}

#abt {
    background: url(../images/tower.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: 70%;
}

#comp {
    margin-bottom: 100px;
}

#welcome::after {
    position: absolute;
    content: "";
    height: 50%;
    background-color: #242424;
    width: 15px;
    top: -50px;
    right: 45px;
}

#welcome::before {
    position: absolute;
    content: "";
    height: 50%;
    background-color: #242424;
    width: 15px;
    top: -50px;
}

#aboutme {
    font-size: 60px;
    margin-left: 15px;
    color: #ffffff;
    text-shadow: -3px 3px 0 #cccccc, -4px 4px 0 #cccccc, -5px 5px 0 #cccccc, -6px 6px 0 #cccccc, -7px 7px 0 #cccccc, -8px 8px 0 #cccccc, -9px 9px 0 #cccccc, -10px 10px 0 #cccccc, -11px 11px 0 #cccccc, -12px 12px 0 #cccccc, -13px 13px 0 #cccccc, -14px 14px 0 #cccccc, -15px 15px 0 #cccccc, -16px 16px 0 #cccccc, -17px 17px 0 #cccccc, -18px 18px 0 #cccccc, -19px 19px 0 #cccccc, -20px 20px 0 #cccccc;
}

#txtabout {
    font-size: 20px;
    color: #f3f3f3;
}

#in {
    color: #FF9933;
}

#ia {
    color: #138808;
}

#u {
    color: #b31c31;
}

#s {

    color: #39386e;
}

#big {
    font-size: 40px;
}

#educationtitle {
    font-size: 60px;
    color: #156385;
    margin-left: 30px;
    text-shadow: -3px 3px 0 #0199d9, -4px 4px 0 #0199d9, -5px 5px 0 #0199d9, -6px 6px 0 #0199d9, -7px 7px 0 #0199d9, -8px 8px 0 #0199d9, -9px 9px 0 #0199d9, -10px 10px 0 #0199d9, -11px 11px 0 #0199d9, -12px 12px 0 #0199d9, -13px 13px 0 #0199d9, -14px 14px 0 #0199d9, -15px 15px 0 #0199d9, -16px 16px 0 #0199d9, -17px 17px 0 #0199d9, -18px 18px 0 #0199d9, -19px 19px 0 #0199d9, -20px 20px 0 #0199d9;

}

#banner {
    background: #f7941d;
    font-size: 20px;
    padding: 5px 10px 2px 10px;
    margin-left: 15px;
    margin-right: 35px;
    height: 40px;
    color: #ffffff;
    position: relative;
}

#banner:after {
    content: url('../images/ribbon-r.png');
    position: absolute;
    margin-left: 9px;
    margin-top: -5px;
}

#banner:before {
    content: url('../images/ribbon-l.png');
    position: absolute;
    margin-left: -29px;
    margin-top: -5px;
}

#educationschool {
    font-size: 26px;
}

#resume {
    color: #ffffff;
    font-size: 30px;
    background: #00bef3;
    border-radius: 100px;
    padding: 10px 30px;
    cursor: pointer;
    text-shadow: 2px 2px 0px #038cad;
}

#resume:hover {
    text-decoration: none;
}

#worktext {
    font-size: 70px;
    margin-left: 15px;
    color: #ffffff;
    text-shadow: -3px 3px 0 #cccccc, -4px 4px 0 #cccccc, -5px 5px 0 #cccccc, -6px 6px 0 #cccccc, -7px 7px 0 #cccccc, -8px 8px 0 #cccccc, -9px 9px 0 #cccccc, -10px 10px 0 #cccccc, -11px 11px 0 #cccccc, -12px 12px 0 #cccccc, -13px 13px 0 #cccccc, -14px 14px 0 #cccccc, -15px 15px 0 #cccccc, -16px 16px 0 #cccccc, -17px 17px 0 #cccccc, -18px 18px 0 #cccccc, -19px 19px 0 #cccccc, -20px 20px 0 #cccccc;
}

#work {
    background: #00446b url(../images/footer-top.png);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 90%;
}

#mta {
    background: #4d4d4d;
    border: 10px solid #828282;
    color: #ffffff;

}

#fs {
    background: #4d4d4d;
    border: 10px solid #828282;
    color: #ffffff;
    max-height: auto;
    padding-left: 2.6rem !important;
}

#eco {
    background: #4d4d4d;
    border: 10px solid #828282;
    color: #ffffff;
    max-height: auto;
}

#work-date {
    color: #ffffff;
    font-size: 50px;
    font-weight: bold;
}

#work-tech-mta {
    margin-left: -50px;
}

#technologies {
    background: #ef1d29;
    padding: 5px 10px;
    font-size: 12px;
    margin: 5px 5px 5px 0px;
}

#work-tech-fs {
    margin-right: -50px;
    z-index: 2;
}

#skill {
    background: #68538d url(../images/footer-top-dark.png);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 90%;
}

.table {
    margin-bottom: 0rem !important;
    border-color: transparent !important;
}

.table td,
.table th {
    border-top: none !important;
    border-right: 1px solid #ffffff;
}

.table thead th {
    border-bottom: none !important;
}

.table thead tr th {
    color: #ffffff;
    font-size: 22px;
}

#banner-skill {
    background: #ef1d29;
    color: #ffffff;
    padding: 5px 10px;
    font-weight: 300;
}

#banner-skill-graphic {
    background: #1a93d0;
    color: #ffffff;
    padding: 5px 10px;
    font-weight: 300;
}

#free-time {
    background: #ffffff url(../images/footer-top-purple.png);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 90%;
}

#bold-shadow {
    text-shadow: 1px 1px 1px #a5650a;
}

#button-red {
    background: #f7941d;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 15px;
    border-radius: 1px;
    text-shadow: 1px 1px 0 #b86a0a;
    margin-top: 15px;
}

#skillme {
    background: #03c5f5 url(../images/footer-top.png);
    background-position: top;
    background-repeat: repeat-x;
    background-size: 90%;
}

#txtSkill {
    color: #ffffff;
    font-size: 30px;
    text-align: center;
    text-shadow: 1px 1px 0px #07819a;
}


#where {
    background: url(../images/footer-top-blue.png) #f9a823;
    background-position: top;
    background-size: 90%;
    background-repeat: repeat-x;
}

#wheretext {
    font-size: 70px;
    margin-left: 15px;
    color: #f47988;
    text-shadow: -3px 3px 0 #85012b, -4px 4px 0 #85012b, -5px 5px 0 #85012b, -6px 6px 0 #85012b, -7px 7px 0 #85012b, -8px 8px 0 #85012b, -9px 9px 0 #85012b, -10px 10px 0 #85012b, -11px 11px 0 #85012b, -12px 12px 0 #85012b, -13px 13px 0 #85012b, -14px 14px 0 #85012b, -15px 15px 0 #85012b, -16px 16px 0 #85012b, -17px 17px 0 #85012b, -18px 18px 0 #85012b, -19px 19px 0 #85012b, -20px 20px 0 #85012b;
}

textarea:focus,
input:focus {
    outline: none;
}

.form-control:focus {
    outline: none !important;
}

#formName {
    background: url(../images/suffix.png) #f26522;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    border: 5px solid #ffffff;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 200;
    font-size: 18px;
}

#formName::placeholder {
    color: #f1eded;
}

#formEmail {
    background: url(../images/suffix.png) #f26522;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    border: 5px solid #ffffff;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 200;
    font-size: 18px;
}

#formEmail::placeholder {
    color: #f1eded;
}

#formSubj {
    background: url(../images/suffix.png) #f26522;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    border: 5px solid #ffffff;
    color: #ffffff;
    border-radius: 4px;
    font-weight: 200;
    font-size: 18px;
}

#formSubj::placeholder {
    color: #f1eded;
}

#formMsg::placeholder {
    color: #f1eded;
}

#formMsg {
    resize: none;
    background: url(../images/suffixMsg.png) #f26522;
    background-repeat: no-repeat;
    background-position: right;
    background-size: contain;
    border: 5px solid #ffffff;
    border-radius: 4px;
    color: #ffffff;
    font-weight: 200;
    font-size: 18px;
}

#btnSend {
    background: #ec1c24;
    color: #ffffff;
    padding: 7px 18px;
    border: 5px solid #ffffff;
    border-radius: 4px;
    font-size: 18px;
}

#currentLive {
    color: #ffffff;
    font-size: 36px;
    text-shadow: 1px 1px 0 #a5650a;
}

.list-inline-item img {
    height: 60px;
}

#footer {
    font-size: 20px;
}

#boringBtn{
    margin-bottom: 0.7rem;
}


@media (max-width: 425px) {

    #aboutme,
    #educationtitle,
    #worktext,
    #wheretext {
        font-size: 50px;
    }

    #big {
        font-size: 34px !important;
    }

    #txtabout {
        font-size: 26px;
    }

    #work-tech-mta,
    #work-tech-fs,
    #work-tech-eco {
        margin-left: 0px;
        margin-top: -40px !important;
    }

    #comp #banner {
        font-size: 20px;
        line-height: 1.5;
    }

    #banner {
        font-size: 17px;
        line-height: 1.6;
    }

    .list-inline-item img {
        height: 50px;
    }

    #boringBtn{
        margin-bottom: 3rem;
    }

    #easyBtn{
        margin-bottom: 1.5rem;
    }

    #fs{
        padding-left: 1.5rem !important;
    }

    @media (max-width:375px) {
        #banner {
            font-size: 14px;
            line-height: 2.2;
        }

        #comp #banner {
            font-size: 20px;
            line-height: 1.5;
        }

        #fs{
            padding-left: 1.5rem !important;
        }
    }
}

@media (min-width: 768px) {
    #work-tech-mta {
        margin-left: -40px;
    }
}

#resumeModal .modal-dialog{
        -webkit-transform: translate(0,-50%);
        -o-transform: translate(0,-50%);
        transform: translate(0,-50%);
        top: 50%;
        margin: 0 auto;
}

.modal-header{
    border-bottom:none !important;
}

.modal-content{
    border-radius:0px !important;
    background:#4d4d4d;
    border:13px solid #2e2e2e !important;
    color: #ffffff;
}

.close{
    color:#ffffff !important;
    text-shadow:none;
}

.modal-title{
    font-size:30px;
}

.modal-body{
    padding: 0rem 1rem 1rem 1rem;
}

.txtModalBody{
    font-size: 20px;
}

#buttonResumePanel{
    background: #f7941d;
    border: 6px solid #ffffff;
    border-radius: 16px;
    color:#ffffff;
    font-size: 20px;
    padding:5px 10px;
    box-shadow: 0px 7px 0 #dceaf8;
}

#buttonResumePanel:hover{
    text-decoration: none !important;
}

#loader{
    position:fixed;
    z-index: 99;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: #00bef3;
    display: flex;
    justify-content: center;
    align-items: center;
}

#see-resume{
    color: #ffffff;
    background:#f7941d;
    border:none;
}

#hom{
    padding:30px;
}
@media (max-width: 480px) {
.pt-5{
padding-top: 0 !important;
}
.mt-5{
margin-top: 0 !important;
}
#txtabout{
	font-size: 16px;
    color: #f3f3f3;
}
}