@charset "UTF-8";

* {
    box-sizing: border-box;
}

/* NAME: [Brandi Lemessy]
    STUDENT #: [100722147]
    DATE: [Sunday 17th November 2019] [Also updated on Sunday 02nd December 2019 - to add styles for motion graphics page]
    DESCRIPTION: [This css controls the custom bootstrap stylings to make the site look like my own. It edits the bootstrap classes, change, colour, position, media queries and edits to the bootstrap grid is also  in this css file ]
*/

/* General Styles */

p {
    font-family: 'Montserrat';
}

h1 {
    font-family: 'Montserrat';
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #15071a;
    color: white;
}

.color-yellow {
    color: rgb(250, 255, 3);
}

.active {
    text-shadow: 1px 1px rgb(196, 207, 39);
}

.color-white {
    color: white;
}

.padding-container {
    padding-top: 60px;
    padding-bottom: 60px;
}

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #fff;
    margin: 1em 0;
    padding: 0;
}

.col-sm-4 {
    margin-bottom: 25px;
}

.col-lg-4 {
    margin-bottom: 15px;
}


/* Responsive Style edits */

@media (min-width: 992px) {
    .col-md-4 {
        margin-left: 15px;
    }
}

@media (max-width: 992px) {
    .mobile-margin {
        margin-bottom: 20px;
    }
}

/* ///////   NAV section Edits /////////// */
.navbar-dark .navbar-nav .nav-link.active {
    color: rgb(250, 255, 3);
}

.navbar-dark .navbar-nav .nav-link {
    color: #ffffff;
    font-weight: bold;
    font-family: "Cavier Dreams";
}

.navbar-light .navbar-nav .nav-link {
    color: #ffffff;
    font-weight: bold;
    font-family: "Cavier Dreams";
}

.nav-item .nav-link{
    font-weight: bold;
}


.navbar-bg {
    background-color: white;
}

/* Responsive Style edits */

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 4rem;
        padding-left: 0.5rem;
    }
}

@media (max-width: 986px) {
    .col-4 {
        margin-bottom: 20px;
    }
}

/* Home image push down */
.landimg1 {
    margin-top: 50px;
}

/* Section Work */
.work-bg {
    background-color: #3b144a;
}

/* section skills */
.skill-box {
    width: 175px;
    height: 120px;
    background-color: #551d6a;
    color: white;
    text-decoration: none;
}
.skill-box .center {
    text-align: center;
}

/* Contact me  */
.input-box-bg {
    width: 80%;
    height: 70px;
    background-color: #fff;
    border-radius: 50px;
}

/* section skillls  */
.btn-primary:hover {
    color: #5e5e5e;
    background-color: #fff;
    border-color: #eee;
}

.btn-primary {
    color: #fff;
    background-color: #d236ba;
    border-color: #d236ba;
}

.skill-box:hover {
    color: black;
    background-color: yellow;
}


.skill-box:hover .small-work-bg {
    background-color: white;
}

.contact-form {
    margin-top: 250px;
}

.small-work-bg {
    display: inline-block;
    background-color: yellow;
    width: 50px;
    height: 50px;
}

.small-work-bg img {
    display: inline-block;
    margin-top: auto;
    margin-bottom: auto;
}

label {
    color: black;
}

.lower-writing {
    text-align: center;
    font-family: 'Cavier Dreams';
    font-size: 1.5em;
}

.lower-writing>p {
    font-family: 'Cavier Dreams';
    font-size: 1.3em;
}

.home-para{
    font-size: 1.5em;

}

.home-para p{

    font-family: 'Cavier Dreams';
}

.add-weight{
    font-weight:900;
}


/* PICTURE hover effect and overlay animation */ 
.hovereffect {
width:100%;
height:100%;
float:left;
overflow:hidden;
position:relative;
text-align:center;
cursor:default;
}

.hovereffect .overlay {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
top:0;
left:0;
opacity:0;
background-color:rgba(0,0,0,0.5);
-webkit-transition:all .4s ease-in-out;
transition:all .4s ease-in-out
}

.hovereffect img {
display:block;
position:relative;
-webkit-transition:all .4s linear;
transition:all .4s linear;
}

.hovereffect h2 {
text-transform:uppercase;
color:#fff;
text-align:center;
position:relative;
font-size:17px;
background:rgba(0,0,0,0.6);
-webkit-transform:translatey(-100px);
-ms-transform:translatey(-100px);
transform:translatey(-100px);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
padding:10px;
}

.hovereffect a.info {
text-decoration:none;
display:inline-block;
text-transform:uppercase;
color:#fff;
border:1px solid #fff;
background-color:transparent;
opacity:0;
filter:alpha(opacity=0);
-webkit-transition:all .2s ease-in-out;
transition:all .2s ease-in-out;
margin:50px 0 0;
padding:7px 14px;
}

.hovereffect a.info:hover {
box-shadow:0 0 5px #fff;
}

.hovereffect:hover img {
-ms-transform:scale(1.2);
-webkit-transform:scale(1.2);
transform:scale(1.2);
}

.hovereffect:hover .overlay {
opacity:1;
filter:alpha(opacity=100);
}

.hovereffect:hover h2,.hovereffect:hover a.info {
opacity:1;
filter:alpha(opacity=100);
-ms-transform:translatey(0);
-webkit-transform:translatey(0);
transform:translatey(0);
}

.hovereffect:hover a.info {
-webkit-transition-delay:.2s;
transition-delay:.2s;
}