/*
Media queries used to change the width and height 
of elements based on the size of the screen    
*/

@media (max-width: 1200px) {
    .out-margins {
        max-width: 100% !important;
    }
}

@media (max-width: 767px) {
    .header {
        height: 800px !important;
    }
    .in-margins {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .carousel-control-next, .carousel-control-prev {
        width: 30%;
    }
}