* { box-sizing: border-box; }
	  body { 
		background: #eeeeee;
		background: -moz-linear-gradient(top,  #eeeeee 0%, #cccccc 100%);
		background: -webkit-linear-gradient(top,  #eeeeee 0%,#cccccc 100%);
		background: linear-gradient(to bottom,  #eeeeee 0%,#cccccc 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 );
		font-size: 16px;
	  }
	  .container {
	    width: 100%;
	    max-width: 960px;
	    margin: 1em auto;
	    border: 2px solid #fff;
	    background: rgba(255,255,255,0.75);
	    padding: 1rem;
	    box-shadow: 5px 5px 5px #999;
	    border-radius: 2em 2em 0 0;
	  }
	  .col-10, .col-8, .col-4, .col-2 { float: left; padding: 0 15px; }
	  .col-10 {
	  	width: 83.33%;
	  }
	  .col-8 {
	  	width: 66.66%;
	  }
	  .col-4 {
	  	width: 33.33%;
	  }
	  .col-2 {
	  	width: 16.66%;
	  }
	  header {
	  	background: #6db3f2;
		background: -webkit-linear-gradient(#6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
		background: -o-linear-gradient(#6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
		background: linear-gradient(#6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%);
	  	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 );
	  	padding: .05em 1em;
	  }
	  	header h4 { 
	  		color: #fff;
	  		text-shadow: 1px 1px 0 #333;
		}
		header h4 img {
			height: 22px;
		    top: 5px;
		    position: relative;
		}
	  h1, h2, h3, h4 {
	    color: #BD203A;
	    font-family: 'Slabo 27px', serif;
	  }
	  p, li {
	    color: #4F403C;
	    font-family: 'Source Sans Pro', sans-serif;
	  }

	  section.separador {
	  	clear: both;
	  	padding: 1em 0;
	  	border-bottom: 1px solid #999;
	  	overflow: hidden;
	  	margin: 0 -15px;
	  }

	  .img-responsive { max-width: 100%; }
	  .border { border: 2px solid #fff; }

	  .text-right { text-align: right; }
	  ul { list-style-type: none;}
	  ul li strong { color: #BD203A; }

	  .portfolio {
		  display: grid;
		  grid-template-columns: repeat(4, 1fr);
		  grid-gap: .75rem;
	  }
	  .portfolio > .video {
		grid-column: span 2;
		max-width: 100%;
		display: flex;
		align-items: center;
		background: #e4e4e4;
	   }
	  .portfolio > div {
	  	border: 1px solid #BD203A;
	  }

	  iframe.iframeweb {
		  max-width: 100%;
		  min-width: 100%;
		  min-height: 400px;
		  margin: 1.5rem 0;
	  }

@media screen and (max-width: 767px ) {
	body { font-size: 14px;}
	.col-10, .col-8, .col-4, .col-2 { width: 100%; }
	img { max-width: 100%;}
	.portfolio { grid-template-columns: repeat(2, 1fr); }
		
}