@import url('https://fonts.googleapis.com/css?family=Montserrat:600');

body{
  font-family: 'Montserrat', sans-serif;
}

.main-nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  position: fixed;
  bottom: 0;
  left: 50vw;
  margin-left: -520px;
  margin-bottom: 40px;
  align-content: center;
  /* background-color: #fff; */
}
.main-nav a {
  margin: 10px;
  border-radius: 5px;
  /* background: #988864; */
  color: #fff;
	display: block;
	padding: 15px;
  text-decoration: none;
  letter-spacing: 4px;
  font-size: 14px;
  /* mix-blend-mode: difference; */
}

.main-nav a:hover {
  color:rgb(176, 0, 0);
}
.main-nav .logo {
  background: #60B99A;
  border-radius: 30px;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 500px;

  position: fixed;
  top: 100px;
}

.socialIcons{
  position: fixed;
  top: 15px;
  right: 10px;
}

.socialIcons img{
  width:35px;
  margin-right: 8px;
}


.titleWork{
  text-align: center;
  font-size: 15px;
}

/* 
.flex-grid {
  display: flex;
}

.flex-grid .col {
  flex: 1;
}

.flex-grid-thirds {
  display: flex;
  justify-content: space-between;
}

.flex-grid-thirds .col {
  width: 32%;
}

@media (max-width: 400px) {
  .flex-grid,
  .flex-grid-thirds {
    display: block;
  }
  .flex-grid .col,
  .flex-grid-thirds .col {
    width: 100%;
    margin: 0 0 10px 0;
  }
}
* {
  box-sizing: border-box;
}

body {
  padding: 20px;
}

.flex-grid {
  margin: 0 0 20px 0;
}

.col {
  background: salmon;
  padding: 20px;
} */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:600");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
  /* background: #f1f1f1; */
  /* color: #333; */
  /* font: 12px/1 'Open Sans', sans-serif; */
  font-family: 'Montserrat', sans-serif;
}

.wrapper {margin: 20px auto;}

[class*="col-"] {
  margin-bottom: 20px;
  min-height: 30px;
  background: #fff;
  /* box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1); */
  text-align: center;
  padding: 0px;
}
@media all and (max-width: 500px){
	.no-mobile {display: none;}
}

@media all and (min-width: 500px) {
  .wrapper {
    padding: 0 20px;
	 /* background-color: #e1e1e1; */
	 padding-top: 20px;
	 border-radius: 5px;
  }

  .row {display: flex;}

  [class*="col-"] {margin-right: 20px;}

  [class*="col-"]:last-child {margin-right: 0;}

  .col-1 {flex: 1;}
  .col-2 {flex: 2;}
  .col-3 {flex: 3;}
  .col-4 {flex: 4;}
  .col-5 {flex: 5;}
  .col-6 {flex: 6;}
  .col-7 {flex: 7;}
  .col-8 {flex: 8;}
  .col-9 {flex: 9;}
  .col-10 {flex: 10;}
  .col-11 {flex: 11;}
  .col-12 {flex: 12;}
}
@media all and (min-width: 1000px) {
  .wrapper {max-width: 1300px;}
}

h2 {
  font: 600 20px/1 'Open Sans', sans-serif;
  color: #888;
  margin: 20px 0;
}

h3 {
	font: 600 15px/1 'Open Sans', sans-serif;
	color: #999;
	margin: 20px 0;
}

p {
  /* font: 12px/1 'Open Sans', sans-serif; */
  /* color: #777; */
  letter-spacing: 4px;
  font-size: 12px;
}

a {
	color: #333;
	text-decoration: none;
}
/* a:hover {text-decoration: underline;} */

/* Just so you can get an impression of what it looks like when the height changes without spamming the code with useless text. */
.blank-col {
	min-height: 150px;
	max-height: 150px;
}

.sticky {
  font: 600 20px/1 'Open Sans', sans-serif;
  top: 0;
  position:fixed;
  width: 100%;
  max-height: 150px;
}

.no-back {
	 background-color: #f1f1f1; /* make sure to change this to the background color */
  }

.warn {background: #FFDB4D;}
.note {
	background: #5CADFF;
	color: #fff;
}
.error {
	background: #FF5353;
	color: #fff;
}
.correct {
	background: #33D685;
	color: #fff;
}
.rounded {border-radius: 100px;}

.top-r {border-top-right-radius: 100px;}
.top-l {border-top-left-radius: 100px;}
.bottom-r {border-bottom-right-radius: 100px;}
.bottom-l {border-bottom-left-radius: 100px;}

.rad-l {border-radius: 100px 0 0 100px;}
.rad-r {border-radius: 0 100px 100px 0;}

.hidden-col {visibility: hidden;}

.text-left {text-align: left;}
.text-right {text-align: right;}

.back-img {
	/* Use on columns only! */
	background-image: url(http://xendox.com/assets/img/header_bg.jpg);
	height: 150px;
	background-size:cover;
	color: #fff; /*change this to the best color with your background */
}


/*
===============
Contributions
===============
*/
/* by BCasal.es */
.full-width { margin-bottom: 0; }

.full-width:last-child { margin-bottom: 20px; }

.space-off,
.space-off:last-child {
  margin-bottom: 0;
}

@media all and (min-width: 500px) {
	.full-width {
    margin-bottom: 20px;
    margin-right: 0;
  }

  .space-off,
  .space-off:last-child {
    margin-bottom: 0;
  }
}

.cardIMG{
  width: 100%;
  height: auto;
  margin-top: 20px;
}

.wrapper2 { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  grid-auto-rows: 100px; 
} 

.box1 { 
  grid-column-start: 1; 
  grid-column-end: 3; 
  grid-row-start: 1; 
  grid-row-end: 5; 
}

.box2 { 
  grid-column-start: 3; 
  grid-column-end: 4; 
  grid-row-start: 1; 
  grid-row-end: 3; 
}

.box3 { 
  grid-column-start: 3; 
  grid-column-end: 4; 
  grid-row-start: 3; 
  grid-row-end: 5; 
}

.box4 { 
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 5; 
  grid-row-end: 7; 
}

.box5 { 
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 5; 
  grid-row-end: 7; 
}

.box6 { 
  grid-column-start: 3; 
  grid-column-end: 4; 
  grid-row-start: 5; 
  grid-row-end: 7; 
}

.box7 { 
  grid-column-start: 1; 
  grid-column-end: 2; 
  grid-row-start: 7; 
  grid-row-end: 9; 
}

.box8 { 
  grid-column-start: 2; 
  grid-column-end: 3; 
  grid-row-start: 7; 
  grid-row-end: 9; 
}

.box9 { 
  grid-column-start: 3; 
  grid-column-end: 4; 
  grid-row-start: 7; 
  grid-row-end: 9; 
}

* {box-sizing: border-box;}

.wrapper2 {
  /* border: 2px solid #f76707; */
  border-radius: 5px;
  /* background-color: #fff4e6; */
  margin-bottom: 200px;
}

.wrapper2 > div {
  border: 2px solid #fff;
  border-radius: 5px;
  /* background-color: #ffd8a8; */
  /* padding: 1em; */
  color: #d9480f;

}