@keyframes example {
	
	10% {
		-ms-transform: rotate(50deg); /* IE 9 */
		-webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
		transform: rotate(50deg); 
	}
	20% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg); 
	}
	30% {
		-ms-transform: rotate(50deg); /* IE 9 */
		-webkit-transform: rotate(50deg); /* Chrome, Safari, Opera */
		transform: rotate(50deg); 
	}
	40% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg); 
	}
    100% {
		-ms-transform: rotate(0deg); /* IE 9 */
		-webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
		transform: rotate(0deg); 
	}
   
}

.manual {
    list-style-type: number;
}

@keyframes icon {
	
	10% {
		-ms-transform: scale(1.3,1.3); /* IE 9 */
		-webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
		transform: scale(1.3,1.3); 
	}
	20% {
		-ms-transform: scale(1.0,1.0); /* IE 9 */
		-webkit-transform: scale(1.0,1.0); /* Chrome, Safari, Opera */
		transform: scale(1.0,1.0);  
	}
	30% {
		-ms-transform: scale(1.3,1.3); /* IE 9 */
		-webkit-transform: scale(1.3,1.3); /* Chrome, Safari, Opera */
		transform: scale(1.3,1.3); 
	}
	40% {
		-ms-transform: scale(1.0,1.0); /* IE 9 */
		-webkit-transform: scale(1.0,1.0); /* Chrome, Safari, Opera */
		transform: scale(1.0,1.0);  
	}
    100% {
		-ms-transform: scale(1.0,1.0); /* IE 9 */
		-webkit-transform: scale(1.0,1.0); /* Chrome, Safari, Opera */
		transform: scale(1.0,1.0); 
	}
   
}

body
{
	color: #535353;
	font-family: 'Arimo', sans-serif;
}
.jumbotron
{
	background-color: #0057A6;
	color: #fff;
}

.main-header
{
	background-color: #0057A6;
	color: #fff;
	padding-top: 10px;
	padding-bottom: 10px;
	font-size: 20px;
}


    .networks-icon
	{
		font-size: 150px;
	}
	.networks-label
	{
		font-size: 30px;
		font-weight: bold;
	}
	
	.os-icon
	{
		font-size: 150px;
		color: #fff;
	}
	.os-label
	{
		font-size: 30px;
		font-weight: bold;
		color: #fff;
	}
	.os-icon:hover
	{
		color: #d8d8d8;
	}
	.os-label:hover
	{
		color: #d8d8d8;
	}
	
	.wrench-icon
	{
		font-size: 20px;
		color: #535353;
		margin-right: 5px;
		
		
	}
	
	.rotate
	{
		animation-name: example;
		animation-duration: 3s;
		animation-delay: 2s;
		animation-iteration-count: infinite;
		
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		vertical-align: top;
		margin-right: 5px;
	}
	.icon1
	{
		animation-name: icon;
		animation-duration: 3s;
		animation-delay: 1s;
		animation-iteration-count: infinite;
	}
	.icon2
	{
		animation-name: icon;
		animation-duration: 3s;
		animation-delay: 1s;
		animation-iteration-count: infinite;
		
		display: -moz-inline-stack;
		display: inline-block;
		zoom: 1;
		*display: inline;
		vertical-align: top;
		margin-right: 5px;
	}
	.wrench-label
	{
		font-size: 20px;
		font-weight: bold;
		color: #535353;
	}
	.wrench-icon:hover
	{
		color: #d8d8d8;
	}
	.wrench-label:hover
	{
		
	}
	
	.icon-ok
	{
		color: green;
	}

a:hover
{
	text-decoration: none;
	color: #009933;
}

.logo-cmuj
{
	margin-top: 10px;
	margin-bottom: 15px;
}

.main-footer
{
	background-color: #b3e6ff;
	margin-top: 60px;
	padding-top: 10px;
	font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
}

.text-footer{
	
}
.os-choose{
	background-color: rgb(52, 152, 219);
}
.h2
{
	color: #fff;
}

#btn-close-modal 
{
    width:100%;
    text-align: center;
    cursor:pointer;
    color:#fff;
}



.config-start
{
	font-size: 20px;
	color: #fff;
}

.network-description
{
	font-size: 16px;
	margin-left: 10px;
	margin-right: 10px;
}
.bold-text
{
	font-weight: bold;
}

.link1
{
	color: #fff;
	text-decoration: underline;
}
.link1:hover
{
	color: #5d5d5d;
	text-decoration: underline;
}


  
#next-slider {
	color: #535353;
}



.menu-network {
	font-size: 40px;
	margin-top: 20px;
}	

.description {
	font-size: 20px;
	line-height: 200%;
}

.margin-bottom-1
{
	margin-bottom: 10px;
}
.icon-picture
{
	font-size: 20px;
}
video {
	width: 800px;
}


.slider-navigation
{
    font-size: 20px;
    font-weight: bold;
}

.mySlides {display:none}
.w3-left, .w3-right, .w3-badge {cursor:pointer}
.w3-badge {height:13px;width:13px;padding:0}

.gallery {
        list-style: none;
        overflow: hidden;
        padding: 0;
        margin: 0;
    }
    
    .gallery li {
        float: left;
        margin: 4px;
    }
  
@media only screen and (max-width: 800px) {
	
	.jumbotron p
	{
		margin-bottom: 15px;
		font-size: 12px;
		font-weight: 200;
	}
	.label1
	{
		font-size: 16px;
		font-weight: bold;
		margin-top: -10px;
	}
	.os-choose{
		padding-left: 15px;
		padding-right: 15px;
	}
	
	.h2
	{
		font-size: 20px;
	}
	.networks-icon
	{
		font-size: 100px;
	}

	.networks-label
	{
		font-size: 20px;
		font-weight: bold;
	}
	
	.os-icon
	{
		font-size: 100px;
	}

	.os-label
	{
		font-size: 20px;
		font-weight: bold;
	}
	
	.menu-network {
	font-size: 20px;
	margin-top: 5px;
	
	}
	.wrench-icon {
		font-size: 14px;
	}
	
	.description {
		font-size: 12px;
		line-height: 200%;
	}
	.icon-picture
	{
		font-size: 12px;
	}
	
	video {
		width: 290px;
	}
}