@import 'sitewide_constants.css';


iframe.welcome-video {
    @media screen and (min-width: 768px) {
        width: 50%;
        height: 300px;

        float: right;
        margin: 0 0 20px 20px;
    }

    @media screen and (max-width: 767px) {
        width: 100%;
        height: 300px;
    }
}


div.intro {
    @media screen and (max-width: 767px) {
        background-color: var(--darkblue);
        background-image: url(/wp-content/themes/watertool/images/bluewave-top-fullwidth-dark.svg);
        background-repeat: no-repeat;
        background-position: center -2px;
        padding: 30px 10px 20px 10px;
        color: white;
    }
}

div.mainchoices {
    justify-content: center;
    margin-top: 2em;

    > div.choice {
        background-color: var(--wavetop-blue);
        background-image: url(/wp-content/themes/watertool/images/bluewave-top-fullwidth.svg);
        background-repeat: no-repeat;
        background-position: center -2px;

        color: white;
        font-family: 'Droid Sans';

        padding-top: 50px;
        padding-bottom: 20px;
								
        max-width: 372px;  /* the background image is this wide, don't let it repeat */
								
        @media screen and (max-width: 768px) {
            max-width: 100%;
												background-image: url(/wp-content/themes/watertool/images/bluewave-top-fullwidth.svg);
            background-repeat: no-repeat;
            background-position: center -2px;
												padding-bottom: 40px;
        }

        a, a:hover {  /* the whole thing is a link, shouldn't look like it */
            color: white !important;
            text-decoration: none !important;
        }

        h1 {
            text-align: center;
            color: white;
        }

        img {
            display: block;
            margin: 5px auto 10px auto;
        }
    }
    
    @media screen and (max-width: 768px) {
        > div.choice:last-child {
            margin-top: 40px;
        }
    }

    > .col-md-1 {
        height: 0;
    }
}

div.didyouknow {
    margin: 40px -30px -30px -30px;
}

@media screen and (max-width: 768px) {
    div.didyouknow {
        margin: 0 0 0 0;
    }
				
				.row {
    margin-right: 0;
    margin-left: 0;
    }
}