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

*{
        margin:0;
        padding:0;
        list-style-type:none;
        font-family: "Raleway";
		text-decoration: none;
        font-size:20px;!important
		
}

body{
        background-color:white;
		text-decoration: none;
}

a{
        display:block;
        padding:10px 0;
        color:#fff;
        text-decoration:none; 
}

.top {

}



.nav-section {
background-image: url("images/about.jpeg");


}

.main-menu{
        display:flex;
        margin-top:0px;
}
.main-menu>li{
        flex:1;
        text-align:center;				
}


.main-menu>li>a{
        background-color: #34495e;
        font-style: bold;
		font-size:20px;
		color: white;!important
 }
 
 .contact p {
		font-style: bold;!important
 }

.sub-menu-layout-1>li>a{
        background-color: orange;
        font-style: bold;
        color: black;
        padding: 5px 5px 5px;
}

.sub-menu-layout-2>li>a{
        background:linear-gradient(to bottom, #008080, #000);
}

.main-menu>li:not(:first-child){
        margin-left:1px;
}

.sub-menu-layout-1>li{
        margin-top:1px;
}

.sub-menu-2{
        position:relative;
}
.sub-menu-layout-2{
        position:absolute;
        width:100%;
        left:100%;
        top:0%;
}

.sub-menu>a:after{
        content:"";
        width:10px;
        height:10px;
        display:inline-block;
        border-right:3px solid #fff;
        border-bottom:3px solid #fff;
        margin-left:10px;
        transform:rotate(45deg);
        position:relative;
        transition:1s transform ease;
}

.sub-menu-2>a:after{
        transform:rotate(315deg);
}

li>a:hover{
        font-size:21px;
        text-decoration:none;
}

.sub-menu-layout{
        display:none;
}

.sub-menu-1:hover .sub-menu-layout-1,
.sub-menu-2:hover .sub-menu-layout-2{
        display:block;
}

.sub-menu-1:hover>a:after{
        transform:rotate(-135deg);
        top:3px;
}

.sub-menu-2:hover>a:after{
        transform:rotate(135deg);

}

@media screen and (max-width:500px){
        .main-menu{
                flex-direction:column;
				
        }
		
		.main-menu a{
			   padding: 5px 5px 5px;!important
		}
		
        .sub-menu-1,.sub-menu-layout-2{
                position:static; !important
        }
        .main-menu>li:not(:first-child){
                margin-left:0;
                margin-top:1px;
        }

        .sub-menu-layout li:nth-child(n){
                margin:1px 0 0 0;!important
        }

        .sub-menu-2>a:after{
                transform:rotate(45deg);
        }

        .sub-menu-2:hover>a:after{
                transform:rotate(-135deg);
                top:3px;
        }


        .sub-menu-layout-1,.sub-menu-layout-2{
                display:block;
                margin:0;
                max-height:0px;
                overflow:hidden;
                transition:6s all ease;
        }

        .sub-menu-1:hover .sub-menu-layout-1,
        .sub-menu-2:hover .sub-menu-layout-2{
                max-height:280px;
				font-size: 20px;!important
        }
}