@CHARSET "UTF-8";

/* Use on an element and child elements to create a drop-down menu. */

/* Desktop size. */
@media screen and (min-width: 970px)
{	
	.dropdown
	{
		position: relative;
		display: inline-block;
		z-index: 1;
	}
	
	.dropdown-child
	{
		display: none;
		position: relative;
		color: black;
		font-size: 1.75vw;
		text-align: center;
		text-decoration: none;
		background-color: #DDDDF0;
		border-color: white gray gray white;
		border-width: .3vw;
		border-style: solid;
		margin-left: 10%;
		width: 90%;
		height: 2.3vw;
	}
	
	.dropdown:hover .dropdown-child
	{
		display: block;
	    -webkit-animation: fadeInFromNone 0.3s ease-out;
	    -moz-animation: fadeInFromNone 0.3s ease-out;
	    -o-animation: fadeInFromNone 0.3s ease-out;
	    animation: fadeInFromNone 0.3s ease-out;
	}	
	    
	@media (pointer: coarse)
	{
		.dropdown:hover
		{
			display: block;
		}
	}
	
	.dropdown-child:hover
	{
		background-color: #eeeeee;	
		color: blue;
	}
	
	.dropdown-child:active
	{
		color: #AAAAFF;
		padding-top: .1vw;
		padding-left: .08vw;
		border-color: gray white white gray;
	}
	
	.dropdown-child a
	{
		text-decoration: none;
	    display: block;
	}
}

/* tablet size. */
@media screen and (min-width: 480px) and (max-width: 969px)
{	
	.dropdown
	{
		position: relative;
		display: inline-block;
		z-index: 99;
	}
	
	.dropdown-child
	{
		display: none;
		position: relative;
		color: black;
		font-size: 2vw;
		text-align: center;
		text-decoration: none;
		background-color: #DDDDF0;
		border-color: white gray gray white;
		border-width: .4vw;
		border-style: solid;
		margin-left: 10%;
		width: 110%;
		height: 2.6vw; 
	}
	
	.dropdown:hover .dropdown-child
	{
		display: block; 
	    -webkit-animation: fadeInFromNone 0.3s ease-out;
	    -moz-animation: fadeInFromNone 0.3s ease-out;
	    -o-animation: fadeInFromNone 0.3s ease-out;
	    animation: fadeInFromNone 0.3s ease-out;
	}
	    
	@media (pointer: coarse)
	{
		.dropdown:hover
		{
			display: none;
		}
	}
	
	.dropdown-child:hover
	{
		background-color: #eeeeee;	
		color: blue;	
	}
	
	.dropdown-child:active
	{
		color: #AAAAFF;
		padding-top: .1vw;
		padding-left: .08vw;
		border-color: gray white white gray;
	}
	
	.dropdown-child a
	{
	    text-decoration: none;
	    display: block;
	}	
	
	.dropdown-child a:hover
	{
		color: red;
	    text-decoration: none;
	    display: block;
	}	
}

/* Cell phone size */
@media screen and (max-width: 479px)
{
	.dropdown
	{
		display: inline-block;
		position: relative;
		z-index: 1;
	}
	
	.dropdown-child
	{
		position: relative;
		display: none;
		color: black;
		font-size: 3vw;
		text-align: center;
		text-decoration: none;
		background-color: #DDDDF0;
		border-color: white gray gray white;
		border-width: .3vw;
		border-style: solid;
		margin-left: 10%;
		width: 90%;
		height: 3.8vw;
		z-index: 2;
	}
	
	.dropdown:hover .dropdown-child
	{
		display: block; 	
	    -webkit-animation: fadeInFromNone 0.3s ease-out;
	    -moz-animation: fadeInFromNone 0.3s ease-out;
	    -o-animation: fadeInFromNone 0.3s ease-out;
	    animation: fadeInFromNone 0.3s ease-out;
	}
	
	.dropdown-child:hover
	{
		background-color: #eeeeee;	
		color: blue;	
	}
	
	.dropdown-child:active
	{
		color: #AAAAFF;
		padding-top: .1vw;
		padding-left: .08vw;
		border-color: gray white white gray;
	}
	
	.dropdown-child a
	{
	    text-decoration: none;
	    display: block;
	}
	
	@media (pointer: coarse)
	{
		.dropdown:hover .dropdown-child
		{
			display: none;
		}
	}
}
	
@-webkit-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-moz-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@-o-keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}

@keyframes fadeInFromNone {
    0% {
        display: none;
        opacity: 0;
    }

    1% {
        display: block;
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}