@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i&subset=latin-ext');

/*Defaults*/
body, html {
	font-family: 'Open Sans', sans-serif;
	margin: 0;
	padding: 0;
}

p {
	width: 100%;
}

/*Containers*/
div, nav, section {
	box-sizing: border-box;
}

.main {
	width: 80%;
	max-width: 1366px;
	margin-left: auto;
	margin-right: auto;
}

/*base container class*/
.row {
	display: flex;
	flex-flow: row wrap;
}

.row-r {
	display: flex;
	flex-flow: row-reverse wrap;
}

.col {
    flex: 0 0 auto;
    max-width: 100%;
}

.col-1 {
	flex: 0 0 8.3333%; 
	max-width: 8.3333%; /*for IE only since it does not properly calculate border-box*/
}
.col-2 {
	flex: 0 0 16.6666%;
	max-width: 16.6666%;
}
.col-3 {
	flex: 0 0 25%; 
	max-width: 25%;
}
.col-4 {
	flex: 0 0 33.3333%; 
	max-width: 33.3333%;
}
.col-5 {
	flex: 0 0 41.6666%; 
	max-width: 41.6666%;
}
.col-6 {
	flex: 0 0 50%; 
	max-width: 50%;
}
.col-7 {
	flex: 0 0 58.3333%; 
	max-width: 58.3333%;
}
.col-8 {
	flex: 0 0 66.6666%;
	max-width: 66.6666%;
}
.col-9 {
	flex: 0 0 75%;
	max-width: 75%;
}
.col-10 {
	flex: 0 0 83.3333%;
	max-width: 83.3333%;
}
.col-11 {
	flex: 0 0 91.6666%;
	max-width: 91.6666%;
}
.col-12 {
	flex: 0 0 100%;
	max-width: 100%;
}

div[class^="col-"]{
	box-sizing: border-box;
	padding: 15px;
}

div.nopad {
	padding: 0;
}

.center-h {	justify-content: center;/*center horizontally*/ }
.center div{ align-self: center; /*center vertically*/ }


/*Navigation - non mobile yet*/ 
.navbar{
}

.navbar, .nav > li > ul  li{
	background-color: rgba(50,50,50,1);
	color: rgb(250,250,250);
}

.nav-content {
	width: 80%;
	max-width: 1366px;
	margin-left: auto;
	margin-right: auto;
}

.nav-content ul {
	margin: 0;
	padding: 0;
}

.nav {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
}

.nav>li>ul,.nav>li>ul>li ul {
	box-shadow: 0px 3px 5px rgb(150,150,150);
}

.nav>li>ul {
	top: calc(100%);
	position: absolute;
	display: none;
}

.nav>li>ul>li ul {
	position: absolute;
	top: 0;
	left: 100%;
	display: none;
}

.nav>li>ul li {
	position: relative;
}

/*.nav>li>ul li:hover>ul {
	display: block;
}

.nav>li:hover>ul {
	display: block;
}*/

.nav>li>ul>li a {
	display: block;
	padding: 8px 15px 8px 15px;
	white-space: nowrap;
}

.nav>li>div {
    left: 0;
	width: 100%;
	padding:15px;
	transition-duration: 0.9s;
	flex-flow: row wrap;
	position: absolute;
	display: none;
	color: rgb(60,60,60);
	background-color: rgb(250,250,250);
	box-shadow: 0px 3px 5px rgb(150,150,150);
}

.nav>li>div>div>ul {
	padding-left: 2rem;
}

.nav>li:hover>div {
	display: flex;
}

.nav>li {
	display: inline;	
}

.nav li {
	list-style-type: none;
	display: block;
}

.nav a {
	text-decoration: none;
	color: rgb(200,200,200);	
}

.nav>li>a {	
	display: block;
	padding: 15px;
}

/*.nav a:hover, .nav li:hover {
	color: rgb(250,250,250);
	background-color: rgb(40,40,40);
}*/

/*test click*/
.nav>li a:focus{
	background-color: rgb(40,40,40);
	outline: none;
}

.nav>li a:focus + ul, .nav>li ul:hover, .nav>li:hover>ul {	
	display: block;
}

/*end of test*/

.red {
	background-color: red;
}

.orange {
	background-color: orange;
}

.blue {
	background-color: blue;
}

.green {
	background-color: green;
}

.pink {
	background-color: pink;
}

/* start of desktop styles */
@media screen and (max-width: 991px) {
     /* start of large tablet styles */

}

@media screen and (max-width: 767px) {
     /* start of medium tablet styles */
	.main {
		width: 100%;
	}
}

@media screen and (max-width: 479px) {
     /* start of phone styles */
	div[class^="col-"] {
		flex: 0 0 100%;
		max-width: 100%;
	}
	
	/*Navigation*/
	.nav>li, .nav-content {
		width: 100%
	}
	
	.nav>li ul , .nav>li>div {
		position: relative;
		top: inherit;
	}
}