/*SETS FONT*/
body {
    font-family: 'Inter', 'Helvetica', sans-serif;
    color:#15334f;
}

/*SETS PAGE NAME ON NAVBAR*/
.navbar > .container > .navbar-brand {
    font-weight:700;
    color:#6BACDE;
}

.navbar > .container > .navbar-brand > #yee-icon {
    margin-right:1em;
}

/*SETS LINKS ON NAVBAR*/
.navbar > .container > #topnav > ul > li a{
    color:#15334f;
}

.navbar > .container > #topnav > ul > li a:hover{
    color:#6BACDE;
}

.navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(107,172,222, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
  
.navbar-toggler.navbar-toggler {
    border-color: transparent;
}

/*COVER TEST*/

.coverintro{
    color:#6BACDE;
    position: relative;
    width:100%;
    height:100vh;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    font-weight:700;
    animation-name:animate-title;
    animation-duration:2s;
    animation-timing-function: ease-out;
}

/* OLD MAIN TITLE

.container > .row > .col-md-12 > h1.main-title {
    font-weight:500;
    color:white;
    animation-name:animate-title;
    animation-duration:2s;
    animation-timing-function: ease-out;
}

.container > .row > #title-block {
    margin-top:3em;
    margin-bottom:4em;
}

.home-color {
    background-color:#6BACDE;
}

*/

/*SETS MAIN TITLE ANIMATION*/

@keyframes animate-title {
    0% {opacity:0;}
    100% {opacity: 1;}
}

/*SETS SECTION NAMES*/
.container > #art, #animation, #about {
    font-weight:700;
}

/*SETS CAROUSEL*/

.carousel {
    margin-bottom:5em;
}

.carousel-item img {
    margin:0 auto;
    max-width:100%;
    max-height:100%;
}

.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007dc3' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
   
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23007dc3' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}

.carousel-indicators li {
    background-color: #6BACDE !important;
       /*more custom style*/
}

.carousel-indicators .active {
    background-color: #6BACDE !important;
}

/*SETS VIDEO EMBEDS*/
.container > .video-row {
    padding-bottom:4em;
}

.embed-responsive {
    position: relative;
    width:100%;
    height: 0;
    padding-top: 56.25%;
  }
  
  .video-size{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }

/*RESPONSIVE DESIGN*/

@media /*(min-width: 576px) and*/ (max-width:767px){

    /*.container > .row > .col-md-12 > h1.main-title {
        font-size:4em;
    }*/

    div.coverintro .col-md-12 h1 {
        margin-top: 40%;
        font-size: 4em;
    }

    .text-padding-right {
        padding-right:0em;
        padding-left:0;
    }

    .carousel-item img {
        margin:0 auto;
        max-width:100%;
        max-height:100%;
    }

}

@media (min-width: 768px) and (max-width:991px){

    /*.container > .row > .col-md-12 > h1.main-title {
        font-size:6em;
    }*/

    div.coverintro .col-md-12 h1 {
        font-size: 6em;
    }

    .text-padding-right {
        padding-right:1em;
        padding-left:0;
    }

    .carousel-item img {
        margin:0 auto;
        max-width:100%;
        max-height:100%;
    }

}

@media (min-width: 992px) and (max-width:1199px){

    /*.container > .row > .col-md-12 > h1.main-title {
        font-size:8em;
    }*/

    div.coverintro .col-md-12 h1 {
        font-size: 8em;
    }

    .text-padding-right {
        padding-right:2em;
        padding-left:0;
    }

    .carousel-item img {
        margin:0 auto;
        max-width:100%;
        max-height:100%;
    }

}

@media (min-width: 1200px) {

    /*h1.main-title {
        font-size:12em;
    }*/

    div.coverintro .col-md-12 h1 {
        font-size: 12em;
    }

    .text-padding-right {
        padding-right:2em;
        padding-left:0;
    }

    .carousel-item img {
        margin:0 auto;
        max-width:100%;
        max-height:100%;
    }
    
}