/*/////////////////////////////////REUSED/////////////////////////////////*/

body {
    overflow-x:hidden;
}

/*/////////////HEADERS/////////////*/
.gen-header {
    text-align: center;
    font-size: calc(70px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    color: #133072;
    font-family:raleway;
    border-bottom: 1px solid #133072;
    border-top: 1px solid #133072;
    border-bottom:1px solid #133072;
    padding-bottom: 10px;
}

/*/////////////BUTTONS/////////////*/
.button-dkblue{
    border: 1px solid #133072;
    color: #133072;
    font-size: 1.5em;
    background-color:white;
    }
    .button-dkblue:hover {
        background-color: #133072;
        color:white;
    }

.button-royalpink{
    border: 1px solid #d33368;
    color: #d33368;
    font-size: 1.5em;
    background-color:white;
    }
    .button-royalpink:hover {
        background-color: #d33368;
        color:white;
    }

/*/////////////////////////////////////NAVBAR/////////////////////////////////////*/

.navbar {
    background-color:#133072;
    font-family:'Raleway', sans-serif;
    font-size:1.1em;
    text-transform: uppercase;
}

.navbar .navbar-brand {
    letter-spacing:3px;
}

/*/////////////////////////////////////CAROUSEL/////////////////////////////////////*/
/*GENERAL STYLE*/
#slider {
    padding-top: 2.9vw
}

.carousel-item {
    height: 100%;
    min-height: 650px;
    width: 100%;
}

.carousel-caption {
    top: 0;
    bottom: auto;
    border-bottom: 1px solid white;
    }
    .carousel-caption h1{
        font-size: calc(70px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }

    .carousel-caption h2 {
        font-size: calc(60px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }

/*///CAROUSEL, IMGS///*/
    #slide-1 {
        background: url(../img/Compresssed/Pic1.jpg) center no-repeat;
    }
    #slide-2{
        background: url(../img/Compresssed/Pic2.jpg) center no-repeat;
    }
    #slide-3{
        background: url(../img/Compresssed/Pic3.jpg) center no-repeat;
    }
    #slide-4{
        background: url(../img/Compresssed/Pic4.jpg) center no-repeat;
    }
.slider-button {
    font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    word-wrap: break-word;
    padding-left: 1%;
}
    .slider-button-sm-screen{
    font-size: calc(19px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }

/*////////////////////////////////ABOUT////////////////////////////////*/
/*GENERAL STYLE*/
.banner {
    margin-top: 10em;
    background-Color: #d33368;
    padding: 2vw 6vw 2vw 6vw;
}

.banner-lead{
    font-size: calc(20px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    border-bottom: 1px solid white;
    margin: 0 auto;
}
.banner-lead-sm{
    font-size: calc(9px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    padding: 1vw 2vw;
    overflow: hidden;
}

.banner-icon {
    font-size: calc(20px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/*//////////////////////////////////ACCORDION//////////////////////////////////*/

#bsc .accordion-header{
    font-size: calc(30px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    border-top: none;
    text-align:left;
    padding-bottom:2px;
    width:70%;
}

.accordion-card{
    border:none;
    font-family: 'Raleway', sans-serif;
    }
    .accordion-card h6{
        border-bottom: 1px solid #133072;
        font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        color:#133072;
        background-color:white;
        width:100%;
        cursor:cell;
    }

.accordion-inside {
    color: #d33368;
    }
    .accordion-inside i{
        font-size: calc(90px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    .accordion-inside p{
        font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        border-bottom: 1px solid #d33368;
    }

.accordion-contact-button{
    width:65%;
}

/*//////////////////////////////////PROJECTS//////////////////////////////////*/
#projects .card-title{
    font-size: calc(12px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    margin-bottom:2vh;
    }
    #projects a,
    #projects button {
        font-size: 1em;
        }
    #projects p button {
        font-size: calc(22px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
        background:none;
        border:none;
        color: #d33368
        }
        .tooltip-inner,
        .tooltip.top .tooltip-arrow{
            background-color: #133072;
        }

/*///////////////////////////////////COTACT///////////////////////////////////*/
#contact .contact-image {
    background: linear-gradient(rgba(19, 48, 114, 0.3), rgba(19, 48, 114, 0.3)), url(../img/my-desk.jpg) right no-repeat;
    background-attachment: fixed !important;
    background-size: cover !important;
    position: static !important;
    z-index:-1 !important;
    max-height:575px;
}
#form input:valid {
  color: green;
    }
    #form input:invalid {
  color: red;
    }

#form span{
    background-color:#d33368;
    color:white;
    font-size: calc(10px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/*//////////////////////////////////FOOTER//////////////////////////////////*/
footer{
    background-color:#133072;
    font-size: calc(15px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    }
    footer a:visited{
        color:#b4b4b4;
        border:#b4b4b4;
    }
footer button{
    width:60%;
}

/*//////////////////////////////////MODALS//////////////////////////////////*/
.modal-title {
   font-size: calc(25px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

/*////MODAL, RESUME////*/

.modal-body embed {
    height:70vh;
    width:100%;
    padding:10px;
}