/*
@Author: ThemeMascot
@URL: http://ThemeMascot.com

This is the file where you can add your custom styles to change the look of the
theme. But don't modify style-main.css file.

*/

/* Your custom css codes start here: */

.form-error{
    border-color: #ff0033;
}

.resource{
    border-bottom: 3px solid #1283c4;
    margin-right: 5px;
    margin-top: 15px;
}

.vid-container {
    bottom: 0;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    .vid{
        height: auto;
        width: 100%;
    }

    .header.header-floating.header-floating-text-dark .sticky-wrapper:not(.is-sticky) .header-nav.navbar-sticky .menuzord-menu > li:not(.active):not(:hover) > a {
        color: #404040;
    }
}


/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    /* Styles */
    .vid{
        height: auto;
        width: 100%;
    }

    .header.header-floating.header-floating-text-dark .sticky-wrapper:not(.is-sticky) .header-nav.navbar-sticky .menuzord-menu > li:not(.active):not(:hover) > a {
        color: #fff;
    }
}


/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
    .vid{
        height: 360px;
        width: 720px;
    }

    .header.header-floating.header-floating-text-dark .sticky-wrapper:not(.is-sticky) .header-nav.navbar-sticky .menuzord-menu > li:not(.active):not(:hover) > a {
        color: #fff;
    }
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
    /* Styles */
    .vid{
        height: 640px;
        width: 1280px;
    }

    .header.header-floating.header-floating-text-dark .sticky-wrapper:not(.is-sticky) .header-nav.navbar-sticky .menuzord-menu > li:not(.active):not(:hover) > a {
        color: #fff;
    }
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    /* Styles */
    .vid{
        height: auto;
        width: 100%;
    }

    .header.header-floating.header-floating-text-dark .sticky-wrapper:not(.is-sticky) .header-nav.navbar-sticky .menuzord-menu > li:not(.active):not(:hover) > a {
        color: #404040;
    }
}

.white-text{
    color: #ffffff;
}

.white-link{
    color: #ffffff;
}

.white-link:hover{
    color: #1283c4;
}