section {
	min-height: 100px;
}

a {
	color: #28a745;
}
a:hover {
	color: LimeGreen;
}


.header {
	padding: 4rem 2rem;
	background-color: #28a745;
	color: #FFF;
}

.banner {
	background-color: #e9ecef;
	color: #FFF;
}

.box:before {
	content: "";
    display: block;
    padding-top: 100%;
	border: 1px solid #CCC;
	border-radius: 14px;
	margin: 3rem 0px 1rem 0px;
	overflow: hidden;
}

.strip:before {
    display: block;
    padding: 3vw 0vh;
	margin: 3rem 0px 1rem 0px;
	overflow: hidden;
	font-size: calc(1.5rem + 1.5vw);
}

.strip{
    padding: 6vw 0vh;
	text-align: center;
	font-size: calc(1.5rem + 1.5vh);
}


.box-title {
	text-align: center;
	font-size: calc(.8rem + .5vw);
	color: #CCC;
}


.at {
font-size: 24px;
color: LimeGreen;
}

.form {
  padding: 8px;
  width: 50%;
 }

.form_title {
	margin: 4px;
	color: #999999;
	font-size: 12px;
 }

.form_header {
	padding: 8px 0px 0px 8px;
	font-size: 18px;
 }

.form_events {
    display: none;
    font-style: italic;
    font-size: 11px;
    padding: 10px;
    color: #BBBBBB;
    text-align: center;
}

.form_item div.button {
	font-size: 15px;
	background-color: #999999;
	color: #FFFFFF;
	margin: 8px 8px 8px 4px;
	padding: 8px;
	width: 80px;
	text-align: center;
	font-size: 12px;
	cursor: pointer;
	display: inline-block;
}

.form_item div.button:hover {
  background-color: LimeGreen;
}

.form_item input, .form_item textarea {
    color: #999999;
	font-size: 15px;
	padding: 8px;
	margin: 4px;
	border: 1px solid #CCCCCC;
	background-color: #EEEEEE;
 }


/*CSS BOX GRID*/
.moodle {
	background-image: url(../img/thumbs/moodle-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.canvas {
	background-image: url(../img/thumbs/canvas-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.formalms {
	background-image: url(../img/thumbs/formalms-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.open-edx {
	background-image: url(../img/thumbs/OPEN-edX-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.dokuwiki {
	background-image: url(../img/thumbs/dokuwiki-logo.webp);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.google-edu {
	background-image: url(../img/thumbs/google-edu-logo.jpg);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.wordpress {
	background-image: url(../img/thumbs/wordpress-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.woocommerce {
	background-image: url(../img/thumbs/woocommerce-logo.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.printful {
	background-image: url(../img/thumbs/printful-logo.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

/***************/
/***UI Design***/
/***************/
.html5 {
	background-image: url(../img/thumbs/html5-logo.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.css3 {
	background-image: url(../img/thumbs/css3-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.javascript {
	background-image: url(../img/thumbs/javascript-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.bootstrap {
	background-image: url(../img/thumbs/bootstrap-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.jquery {
	background-image: url(../img/thumbs/jquery-logo.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.php {
	background-image: url(../img/thumbs/php-logo.png);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.mariadb {
	background-image: url(../img/thumbs/mariadb-logo.webp);
	background-size: 90%;
	background-repeat: no-repeat;
	background-position: center;
}

.nodejs {
	background-image: url(../img/thumbs/nodejs-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.github {
	background-image: url(../img/thumbs/github-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}


/*****************/
/****SOFTWARE***/
/*****************/
.itemcloud {
	background-image: url(http://itemcloud.org/img/itemcloud-icon-bw.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}


.youtube {
	background-image: url(../img/thumbs/youtube-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.google {
	background-image: url(../img/thumbs/google-logo.webp);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.google-maps {
	background-image: url(../img/thumbs/google-maps-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.facebook-api {
	background-image: url(../img/thumbs/facebook-api-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.youtube {
	background-image: url(../img/thumbs/youtube-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.google-stats {
	background-image: url(../img/thumbs/google-stats-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.bing-maps {
	background-image: url(../img/thumbs/bing-maps-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.oauth {
	background-image: url(../img/thumbs/oauth-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.pma{
	background-image: url(../img/thumbs/phpmyadmin-logo.jpg);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.json {
	background-image: url(../img/thumbs/json-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.drupal {
	background-image: url(../img/thumbs/drupal-logo.png);
	background-size: 70%;
	background-repeat: no-repeat;
	background-position: center;
}

.wikipedia {
	background-image: url(../img/thumbs/wikipedia-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.giphy {
	background-image: url(../img/thumbs/giphy-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}

.joomla {
	background-image: url(../img/thumbs/joomla-logo.png);
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
}