/* Uses CSS variables to make use of preprocessors unnecessary */

/*:root{
	--color1: #7faca1;
	--color2: #dddddd;
	--color3: #777777;
	--color-bkg: #9e9e9e;
	
	--color-web: #ff3300;
	--color-design: #00cccc;
	--color-video: #663399;
	--color-audio: #33cc66;
	--color-learn: #cc9900;
	
	--zero: 0px;
	--main-gap: 5px;
	
	--font-stack: 'Open Sans', 'Arial', sans-serif;
	
}*/

/*4K*/
@media only screen and (min-width: 1441px){
	.hero-main{
	height:500px;
}
	
	.logo-area{
	position:relative;
	top:100px;
	left:100px;
	width:75%;
}
	
	.container{
		margin:auto; 
		max-width:1800px;
	}
	
	#main-content{
	max-width:350px;
}
	
	.content-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.extras-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.circle-container{
	display:-webkit-flex; 
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:stretch;
	align-items:stretch; 
	}
	
	.circle-container-main{
	position:relative; 
	top:440px; 
	z-index:20;
}

.container{
	top:470px;
}

.tools-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
}

.tools-box{
	/*max-width:190px;*/
}
	
.circle-item{
	text-align:center;  
	width:100px;
	height:100px;
	border-radius: 50px;
}

.circle-label{
	text-align:center;
	width:100px;
	padding-top:5px;
}

.circle-column{
	padding-left:20px;
	padding-right:20px;
}

.comment-container{
   max-width: 800px;
   }

#phoneMobile{
		display:none;
	}
	
	.flex-row-wrap img{
	width:100%;
	height:auto;
}
}/*---END Desktop and Up---*/


/*DESKTOP or TABLET LANDSCAPE*/
@media only screen and (max-width: 1440px) and (min-width: 769px){
	.hero-main{
	height:500px;
}

.logo-area{
	position:relative;
	top:100px;
	left:50px;
}
	
	.container{
		margin:auto;
	}
	
	#main-content{
	padding-right:20px;
        width:30%;
}
	
	.content-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.extras-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.circle-container{
	display:-webkit-flex; 
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-items:stretch;
	align-items:stretch; 
	}
	
	.circle-container-main{
	position:relative; 
	top:430px; 
	z-index:20;
}

.container{
	top:460px;
}

#tools-proficiencies{
 width:65%;
}

.tools-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
        
}

.tools-box{
	width:30%;
}
	
.circle-item{
	text-align:center;  
	width:100px;
	height:100px;
	border-radius: 50px;
}

.circle-label{
	text-align:center;
	width:100px;
	padding-top:5px;
}

.circle-column{
	padding-left:20px;
	padding-right:20px;
}

.comment-container{
   width:100%;
}

#phoneMobile{
		display:none;
	}
}/*---END Desktop and Up---*/

/*TABLET PORTRAIT and UP*/
@media only screen and (max-width: 768px) and (min-width: 426px){
	.hero-main{
	height:300px;
}

.logo-area{
	position:relative;
	top:80px;
	left:50px;
}
	
	.content-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column nowrap;
	flex-flow:column nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.extras-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.tools-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.circle-container{
	display:-webkit-flex; 
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	-webkit-align-items:stretch;
	align-items:stretch; 
	}

	.circle-container-main{
	position:relative; 
	top:240px; 
	z-index:20;
}

.container{
	top:260px; 
}

	
.circle-item{
	text-align:center;  
	width:100px;
	height:100px;
	border-radius: 50px;
}

.circle-label{
	text-align:center;
	width:100px;
	padding-top:5px;
}

.circle-column{
	padding-left:10px;
	padding-right:10px;
}

.tools-box{
	min-width:140px;
        max-width:249px;
}

#phoneMobile{
		display:none;
	}
	
	.flex-row-wrap div{
	width:50%;
	height:auto;
}
}/*---END Tablet Profile & Up---*/

/*PHONE and UP*/
@media only screen and (max-width: 425px){
	.hero-main{
	height:250px;
}

.logo-area{
	position:relative;
	top:100px;
	left:10px;
}

.content-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column nowrap;
	flex-flow:column nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.extras-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column nowrap;
	flex-flow:column nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}
	
.tools-container{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:column nowrap;
	flex-flow:column nowrap;
	-webkit-align-items:stretch;
	align-items:stretch;
	}

.circle-container{
	display:-webkit-flex; 
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
	-webkit-justify-content:space-around;
	justify-content:space-around;
	-webkit-align-items:stretch;
	align-items:stretch; 
	}

	.circle-container-main{
	position:relative; 
	top:210px; 
	z-index:20;
}

.container{
	top:230px;
}
	
.circle-item{
	text-align:center;  
	width:58px;
	height:58px;
	border-radius:29px;
}

.circle-label{
	text-align:center;
	width:50px;
	padding-top:5px;
	font-size:10px;
}

.circle-column{
	padding-left:1px;
	padding-right:1px;
	}
	
	.tools-box{
	min-width:280px;
}

	#phoneOther{
		display:none;
	}
	
	.flex-row-wrap img{
	width:100%;
	height:auto;
	
	.explain-txt{
		-webkit-order:1;
		order:1;
	}
	
	.explain-img{
		-webkit-order:2;
		order:2;
	}
}
}/*---END Phone & Up---*/

body{
	font-family: 'Open Sans', 'Arial', sans-serif;;
	color: #555555;
}

h1{
	color: #555555;
	font-size: 1.5em;
	font-weight: lighter;
	text-align: center;
}

h2{
	color: #555555;
	font-size: 1.25em;
	font-weight: lighter;
	
}

h3{
	color: #555555;
	font-size: .75em;
	font-weight: lighter;
	text-align: center;
}

p{
	font-size: 1em;
}

.hero-main{
	position:absolute; 
	top:0px; 
	left:0px;
	z-index:10;
	width:100%;
	/*height:250px;*/
	background-color: #9e9e9e;
}

.hero-origin{
	background-repeat: no-repeat;
	background-position: right top;
	background-size: contain;
}


.container{
	position:relative;
	/*top:210px;*/
	z-index:0;
}

.web-font{
	color: #a82200;
}

.web-circle{
	background-color: #ff3300;
	text-align: center;
}

div.circle-item img{
	margin-top: 5px;
}

.design-font{
	color: #006061;
}

.design-circle{
	background-color: #00cccc;
}

.video-font{
	color: #663399;
}

.video-circle{
	background-color: #663399;
}

.audio-font{
	color: #1a6634;
}

.audio-circle{
	background-color: #33cc66;
}

.learn-font{
	color: #705300;
}

.learn-circle{
	background-color: #cc9900;
}

.comment-container{
   display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	/*-webkit-align-items:stretch;*/
	/*align-items:stretch;*/
	overflow-x:scroll;
}

.comment-box{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	/*-webkit-align-items:stretch;*/
	/*align-items:stretch;*/
	min-width:285px;
	max-width:420px;
	padding: 5px;
}

.comment-box img{
	width:50px;
	border-radius:25px;
	float:left;
}

.comment-block{
	padding-left: 10px;
	border-left: 5px solid gray;
	background-color: #eeeeee;
	margin-left:5px;
	padding-top: 5px;
	padding-bottom: 5px;
	width:100%;
}

.tools-box{
	/*border: 1px solid gray;*/
	padding-top: 10px;
	padding: 10px;
	text-align: center;
}

.tools-item{
    border-top: 1px solid gray;
	padding-top: 10px;
}

.comment{
	font-size:1em;
	font-weight:lighter;
}

.name{
	font-size: .8em;
}

.affiliation{
	font-size: .8em;
}



.contact-item{
	height:75px;
	width:75px;
}

#main-content{
	padding-left:10px;
	padding-right:10px;
}

#phoneOther{
	width: 150px;
}

.card {
	width:90%;
	box-shadow:2px 2px 4px #dddddd; 
	margin: auto;
	border: 1px solid #dddddd;
	margin-bottom:20px;
	border-radius:3px;
}

.flex-row-nowrap{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row nowrap;
	flex-flow:row nowrap;
	-webkit-justify-content:space-around;
	justify-content:space-around;
}

.flex-row-nowrap img{
	border: 1px solid #dddddd;
}

.flex-row-nowrap div{
	padding:10px;
}

.flex-row-wrap{
	display:-webkit-flex;
	display:flex;
	-webkit-flex-flow:row wrap;
	flex-flow:row wrap;
}

.flex-row-wrap img{
	border: 1px solid #dddddd;
}

.flex-row-wrap div{
	padding:10px;
}

.button{
	height: 35px;
	font-size: 1.25em;
	text-align: center;
	padding: 10px;
	border-radius: 3px;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-size: 1px;
        border-style: solid;
        color:#ffffff;
}

.button:hover{
       background-color: white;
       border-size: 1px;
}

.button:active{
       background-color: white;
       border-size:2px;
}

.button-web{
	background-color: #ff3300;
	border-color:#ff3300;
}

.button-web:hover{
       background-color: white;
       color:#ff3300;
}

/*font-family: 'Open Sans', sans-serif*/