body, html { 
    width: 100%;
    padding: 0;
    margin: 0;
    background-color: #114e9c;
}

img {
width:100%;
vertical-align: top;
margin: 0;
padding:0;
}

h1 {font-family: 'GT-american', sans-serif;
	font-size:50px;
 }

::selection {
    color: #fff;
    background: #ea5558;
}

h2 {font-family: 'GT-american', sans-serif;
	font-size:40px;
 }

 h3 {font-family: 'GT-american', sans-serif;
  font-size:20px;
  color:#fff;
 }


a:link {
  color: #ffffff;
  text-decoration: none;
}
a:visited {
  text-decoration: none;
  color: #ffffff;
}
a:hover {
  text-decoration: none;
  color: #114e9c;
}
a:active {
  text-decoration: none;
  color: #ffffff;
}

* {
margin: 0;
padding: 0;
}



/*BASIS*/


.logo {
width:200px;
margin:49px 0 0 110px;
position:fixed;
top:0;
z-index: 1;

}


.head {
width: 50%;
margin: 15px;
float: left;
flex-direction:column;
}



.headphoto {
width: 50%;
margin: 15px;
float: right;
flex-direction:column;
}



.container {
display: flex;
	flex-wrap: wrap;
	flex-wrap: wrap;
	background-color: #FADDDC;
	margin: 0px 0px 0px 0px;
}

.header {
height: 350px;
width: 100%;
background-color: #FADDDD;
display:flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.title {
padding:0;
color: #114e9c;
line-height:80px;
font-family: 'GT-american', sans-serif;
font-size:90px;
justify-content: center;
flex-wrap: wrap;
}



.block {
width: 100%;
background-color: #114e9c;

}

.gridgrid {
max-width:1280px;
margin: 0 auto;
display: flex;
/*background-color: #fff;*/
}

.grid {
max-width:1280px;
margin: 0 auto;
display: flex;
height: 50px!important;
/*background-color: #fff;*/
}


.contact {
bottom:45px;
left:45px;
width:50px;
position: fixed;
}

.exit {
position: fixed;
right:45px;
top:45px;
}


.dot {
  height: 50px;
  width: 50px;
  margin:10px;
  background-color: #ea5558;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-direction: column;
}


/*WORKPAGINA*/

.work {
display: flex;
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
max-width:1580px;
justify-content: center;
align-items: center;
justify-content: center;
}

.workimage {
display: flex;
max-width: 650px;
    -webkit-transition: all 800ms;
    -webkit-transform: scale(1); 
    -ms-transition: all 800ms;
    -ms-transform: scale(1); 
    -moz-transition: all 800ms;
    -moz-transform: scale(1);
    transition: all 800ms;
    transform: scale(1);
  }

.workimage:hover {
        -webkit-transition: all 0.8s;
    -webkit-transform: scale(1.2);
    -ms-transition: all 800ms;
    -ms-transform: scale(1.2);   
    -moz-transition: all 800ms;
    -moz-transform: scale(1.2);
    transition: all 800ms;
    transform: scale(1.2);
}


.workimage-2 {
display: flex;
max-width: 1050px;
    -webkit-transition: all 800ms;
    -webkit-transform: scale(1); 
    -ms-transition: all 800ms;
    -ms-transform: scale(1); 
    -moz-transition: all 800ms;
    -moz-transform: scale(1);
    transition: all 800ms;
    transform: scale(1);
  }


.workimage-2:hover {
        -webkit-transition: all 0.8s;
    -webkit-transform: scale(1.2);
    -ms-transition: all 800ms;
    -ms-transform: scale(1.2);   
    -moz-transition: all 800ms;
    -moz-transform: scale(1.2);
    transition: all 800ms;
    transform: scale(1.2);
}


.responsive {
  width: 50%;
  height: auto;
}

.worktextbox {
display: flex;
flex-direction:column;
max-width: 30%;
height: 550px;
margin-left: 10px;
}


.worktitle {
font-size: 55px;
color: #fff;
margin: 45px;
margin-bottom: 0px;
}


.worksub {
font-size: 20px;
color: #fff;
margin: 0px 45px 0px 45px;
}

.worktext {
font-size: 16px;
color: #fff;
margin: 10px 45px 10px 45px;
/*width:inherit;*/
}





.home-button {
  display: inline-block;
  padding: 10px 18px;
  margin-top:20px;
  background: #EEE;
  border: none;
  border-radius: 0px;
  background-color: #ea5558;
  color: #fff;
  font-family: 'GT-american', sans-serif;
  font-size: 20px;
  text-shadow: 0 0px white;
  cursor: pointer;



}

.home-button-holder {
background-color: ;
z-index: 1;
padding: 0px;
margin: 0 auto;
max-width:1280px;
padding-top:20px!important;
}

.home-button:hover {
  background-color: #114e9c;
  text-shadow: 0 0px hsla(0, 0%, 100%, 0.5);
  color: #fff;

}

a.whitebutton:hover { color: white; }








/*
.footer {
height: 30px;
padding: 10px 0px 5px 10px;
width: auto;
background-color: #f0d1d1;
display:flex;
text-align: right;
color: #192e4d;
}

.height-1 {
height:250px;
margin:15px;
}


.height-2 {
height:530px;
margin:15px; 
}
*/



}

.content {
color:#fff;
background-size:cover!important;
background-position:center center!important;
text-align:center;
position:relative;
justify-content:center;
align-items:center;
-webkit-align-items:center;
padding:20px;
}


.case {
background-color: #fff;
width:50%;
height: auto;
margin: 0 auto;
margin-top:48px;
margin-bottom: 48px;
}

.case-block {
min-height: 350px;
width: 100%;
display:flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.quote-block {
min-height: 300px;
width: 100%;
margin:0 200px 0 200px;
display:flex;
background-color: #f1f9fc;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

.case-image {
display: flex;
  width: 50%;
  height: auto;
  margin:0px;
  background-color:#f0d1d1;
  padding: 0px;
  background: #f0d1d1;
  color: #262524;
}

.case-image-200 {
display: flex;
  width: 100%;
  height: auto;
  margin:0px;
  background-color:#f0d1d1;
  padding: 0px;
  background: #f0d1d1;
  color: #262524;
}



/*MENU*/

#menuToggle
{
  display: block;
  position: fixed;
    top: 50px;
  left: 50px;

  
  z-index: 2;
  
  -webkit-user-select: none;
  user-select: none;
}

#menuToggle input
{
  display: block;
  width: 66px;
  height: 44px;
  position: absolute;
  top: -7px;
  left: -5px;
  
  cursor: pointer;
  
  opacity: 0; /* hide this */
  z-index: 2; /* and place it over the hamburger */
  
  -webkit-touch-callout: none;
}


/*HAMBURGER ICON*/
#menuToggle span
{
  display: block;
  width: 40px;
  height: 6px;
  margin-bottom: 5px;
  position: relative;
  
  background: #f1f9fc;

  
  z-index: 1;
  
  transform-origin: 4px 0px;
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
              opacity 0.55s ease;
}

#menuToggle span:first-child
{
  transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2)
{
  transform-origin: 0% 100%;
}

/* 
 * Transform all the slices of hamburger
 * into a crossmark.
 */
#menuToggle input:checked ~ span
{
  opacity: 1;
  transform: rotate(45deg) translate(-2px, -1px);
  background: #fff;
}

/*
 * But let's hide the middle one.
 */
#menuToggle input:checked ~ span:nth-last-child(3)
{
  opacity: 0;
  transform: rotate(0deg) scale(0.2, 0.2);
}

/*
 * Ohyeah and the last one should go the other direction
 */
#menuToggle input:checked ~ span:nth-last-child(2)
{
  transform: rotate(-45deg) translate(0, -1px);
}

/*
 * Make this absolute positioned
 * at the top left of the screen
 */
#menu
{
  position: absolute;
  height: 1000px;
  width: 300px;
  margin: -100px 0 0 -50px;
  padding: 35px;
  padding-top: 125px;
/*  box-shadow: 1px 1px 45px #192e4d;*/
  background: #ea5558;
  list-style-type: none;
  -webkit-font-smoothing: antialiased;
  /* to stop flickering of text in safari */
  
  transform-origin: 0% 0%;
  transform: translate(-100%, 0);
  
  transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
}

#menu li
{
  padding: 10px 0;
  font-size: 34px;
}

/*
 * And let's slide it in from the left
 */

#menuToggle input:checked ~ ul
{
  transform: none;
}


.svg {
  filter: invert(1);
}

.svg:hover {
  filter: 
    invert(0)
    sepia(0)
    hue-rotate(0deg)
    saturate(0)
    brightness(1.2);
}

.svg-work {
  filter: invert(1)
      brightness(6);
}


/*MASONRY*/
.element-item {
position: absolute;
  width: 50%;
  height: auto;
  margin:0px;
  background-color:#f0d1d1;
  float: left;
  padding: 0px;
  background: #f0d1d1;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item-2 {
position: absolute;
  width: 48%;
  height: auto;
  margin:10px;
  background-color:#f0d1d1;
}


@media screen and (max-width: 640px) {
.element-item {
position: absolute;
  width: 100%;
  margin:0px;
}
}

.element-item li {
  opacity: 0;
}
/*
.element-item li.shown,
.no-js .grid li,
.no-cssanimations .grid li {
  opacity: 1;
}
*/



/*ISOTOPE BUTTON*/

.button {
  display: inline-block;
  padding: 10px 18px;
  background: #EEE;
  border: none;
  border-radius: 0px;
  background-color: #FFF;
  color: #114e9c;
  font-family: 'GT-american', sans-serif;
  font-size: 15px;
  text-shadow: 0 0px white;
  cursor: pointer;
}

.button-holder {
background-color: ;
z-index: 1;
padding: 0px;
margin: 0 auto;
max-width:1280px;
padding-top:20px!important;
}

.button:hover {
  background-color: #ea5558;
  text-shadow: 0 0px hsla(0, 0%, 100%, 0.5);
  color: #fff;
}

.button:active,
.button.is-checked {
  background-color: #ea5558;
}

.button.is-checked {
  color: #fff;
  text-shadow: 0 0px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 0px 0px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-top: 3px;
  margin-right: 3px;
  margin-bottom: 3px;
}



@media screen and (max-width:1600px) { 

.case {width:80%;}
}


.workimage {
max-width: 500px;
  }
.worktextbox {

max-width: 50%;
}



@media screen and (max-width:1250px) { 


.case-block {margin:0 0px 0 0px;}

.quote-block {margin:0 100px 0 100px;}
.contact {display:none;}
.head {flex-direction:row;}
}






@media screen and (max-width:1000px) { 


.worktitle {margin-left:60px;}

.worksub {margin-left:60px;}

.worktext {margin-left:60px;}

.case-block {margin:0 0px 0 0px;}

.logo {width:300px;


}


.head {width:100%;}

.header {
height: 150px;
}

.title {
font-size:0px;
}

h1 { font-size:35px; }

.case {width:100%;margin-top:125px;}

}






@media screen and (max-width:750px) { 
  h1 {color:#fff; }  


.quote-block {
background-color: #192e4d;margin:20px;min-height: 0px;}

}