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

:root {
    --fnblue: #00467f;
    --fngreydark: #4d4d4f;
    --fngreylight: #f1f1f1;
    --fnorange: #e97e00;
    --fnfontcolor: #505052;
    --customgreen: #15a062;
    --custompurple: #8b5b95;
    --customgrey: #ced4da;
}

body {
    background: #f1f1f1;
}

.container {
    background: rgb(255, 255, 255);
    color: #505052;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.26);
    font-family: 'Roboto', sans-serif;
}

[class*="col-"], [class^="col-"] {
    padding-left: 0;
    padding-right: 0;
}


#header {
    max-width: 320px;
}

#creatives .btn-primary {
    color: #f1f1f1;
    background-color: #00467f;
    border-color: #f1f1f1;
}

#creatives .btn-primary:hover {
    color: #ffffff;
    border-color: #00467f;
}

#creatives .modal-dialog {
    min-width: 350px;
}

#creatives .modal-content {
    color: #505052;
    background-color: #ffffff;
}

#creatives .carousel-item {
    text-align: center;
}

#creatives .carousel-source {
    height: 100%;
    min-height: 610px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#creatives .carousel-source iframe {
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.26);
}

#creatives .carousel-caption {
    color: #505052;
    position: relative;
    left: 0px;
    right: 0px;
}

#creatives .carousel-control-next-icon {
    height: 30px;
    width: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300467f' 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;
}

#creatives .carousel-control-prev-icon {
    height: 30px;
    width: 30px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300467f' 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;
}

#creative-size-160x600 {
    width: 160px;
    height: 600px;
    border: 0px;
}

#creative-size-240x400 {
    width: 240px;
    height: 400px;
    border: 0px;
}

#creative-size-300x250 {
    width: 300px;
    height: 250px;
    border: 0px;
}

#creative-size-300x600 {
    width: 300px;
    height: 600px;
    border: 0px;
}

#creative-size-728x90 {
    width: 728px;
    height: 90px;
    border: 0px;
}

@media (min-width: 576px) {
    #header {
        max-width: 446px;
    }
}

@media (min-width: 768px) {
    #header {
        max-width: 638px;
    }
}

@media (min-width: 992px) {
    #header {
        max-width: 862px;
    }

    #creatives .modal-dialog {
        min-width: 950px;
        min-height: 650px;
    }
}

@media (min-width: 1200px) {
    #header {
        max-width: 1070px;
    }
}