/* body, h's, a's, ul'------------------------------------------------------------*/



* {
  margin: 0px;
  padding: 0px;
}
html {
  height: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body {
  font-family:'Rubik', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 22px;
  margin: 0px auto;
  height: auto;
}

a {
  color: #000;
  text-decoration: none;
}

a,
a:hover,
a:active,
a:visited {
  outline: 0px;
}

a{
  border-bottom: solid 1px black;
}

a:hover {
  color: gray;
  border-bottom: solid 1px gray;

}

img {
  outline: 0;
  border: 0;
}

h1 {
  font-size: 30px;
  line-height: 18px;
  z-index: 1;
  margin: 5px 0;
  line-height: 35px;
  color: black;
}

h2 {
  font-size: 18px;
  line-height: 22px;
  font-weight: normal;
  color: #222;
}

h2 .active {
color: gray;}

h2 a:hover {
color: gray;
border-bottom: 0px;}

h3 {
font-size: 16px;
font-weight: normal;
}

h4 {
  font-weight: normal;
}

.about {
  margin: 0 0 15px 0;}

ul {
  list-style-type: none;
}

/* text selector Mozilla based browsers */
::-moz-selection {
  background-color: #000;
  color: #FFF;
  opacity: 0.8;
}

/* text selector Works in Safari */
::selection {
  background-color: #000;
  color: #FFF;
}


/* spans --------------------------------------------------*/

.ident{
  margin-right: 5px;
}

.underline {
  border-bottom: solid 1px;
}


/* --------------------------------------------- SNIPPETS */
/* Header ------------------------------------------------*/



#header {
border-bottom: 1px solid #EBEBEB;
height: auto;
padding-top: 4px;
z-index: 999;
margin: 0px auto;
position: fixed;
top:0px;
right:15px;
left:15px;
padding-top: 10px;
background-color: rgba(255, 255, 255, 0.5);
min-width: 290px;
}


.headerwrapper {

margin: 0px auto;
overflow: auto;
padding: 0;
clear: both;
position: relative;
}

.AndAtelier {
  float: left; 
  width: 33%; 
  float: left; 
  padding-bottom: 10px;
  text-align: center;
}

.contacts { 
float: right;
overflow: hidden;
line-height: 25px;
}

.contacts ul{
  padding-left: 5px;
}

/*.hide{
  display: none;
}

a:hover .hide {
  display:inline;
}*/


/* Menu -------------------------------------------------*/

nav {
  overflow: hidden;
  }

nav li {
  float: left;
  margin-right: 10px;
}

nav li:last-child {
  margin-right: 0px;
}

nav.menu { 
  padding-top: 0px;
  padding-bottom: 10px;
  width: 33%;
  position: relative;
  float: left;
}

#header a{
  border-bottom: 0px;
}

/* Footer -----------------------------------------------*/

footer {
  padding: 2px;
  margin-top: 10px;
  font-size: 13px;
  position: fixed;
  bottom:0px;
  right:15px;
  left:15px;
  background-color: white;
  z-index: 9998;
  height: 25px;
  opacity: 0.9;
}



/* H O M E P A G E --------------------------------------------------------------------------*/

#backgroundImage {
  height: 100%;
  width: 100%;	
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right:0;
  background-color: rgba(0, 0, 0, 0.9);

}

.phrase {
color: white; 
font-size: 200px; 
text-align: center; 
top:45% ; 
z-index: 1000; 
position: relative;
cursor: pointer;
}


/* P R O J E C T S (ex-masonry)  -----------------------------------------------------------*/

#masonrywrapper {
margin-top: 50px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 50px;
}

#masonry {
  overflow: hidden;
  padding: 0px;
  margin: 0 auto;
  height: 100%;
}

#thumb{
  float: left;
  list-style: none;
  width: calc(25% - 15px);
  height: auto;
  margin-top: 10px;
  margin-bottom: 0px;
  margin-right: 7.5px;
  margin-left: 7.5px;
  position: relative;

}


#thumb img{
width: 100%;
height: auto; 
display: block; 
overflow: hidden;
display: none;
} 


.thumbinfo{

left: 0px;
right: 0px;
top: 0px;
bottom: 6px;
list-style: none;
color: black;
z-index: 999;
z-index: 1;
}

#thumb:hover figure {
opacity: 0.9;
    -webkit-filter: drop-shadow(4px 4px 5px gray);
    filter: drop-shadow(4px 4px 5px gray);
}

#thumb:hover .thumbinfo {
opacity: 0.5;
}

.thumbinfoBox {
margin-top: 1%; 
}

.thumbinfoleft{
  width: 75%;
  float: left;
}

.thumbinfoyearclient {
  width: 25%;
  float: left;
  text-align: right;
}

#news{
padding: 30px 15px 70px 15px ;
border-top: solid 1px;
left: 15px;
right: 15px;
position: fixed;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
min-width:260px;
}


#news a{ 
  color: rgba(255, 255, 255, 0.5);
  border-bottom: solid 1px rgba(255, 255, 255, 0.5);

}

.new{
  float: left; 
  width: 25%;
  min-height: 152px;

}

.new-date{
float: right; 
font-size: 12px; 
line-height: 20px;
padding-right: 40px;
}

.new-title{
  font-family: 'Rubik', Helvetica, Arial, sans-serif; 
  color: rgba(255, 255, 255, 1);

}

.new-text{
  width: 75%;
}


/*tagcloud*/

#resultswrapper{
position: fixed;
z-index: 9998;
width: auto;
bottom: 30px;
min-height: 28px;
right: 15px;
}

.indexrowwrapper{
  display: none; 
  width: 100%; 
  margin-top: 10px; 
  height: auto; 
}

.indexrow p{
  margin-bottom: 5px; 
  margin-top: 5px; 
  padding-left: 5px;
}

.indexrow{
  background-color: white; 
  width: 100%; 
  float: left;
}

.indexitem{
  width: 25%;
  float: left; 
  border-bottom: solid 1px;
}

.indexyear{
  padding-left: 25%;
}


.indexitem ul{
  margin-bottom: 5px; 
  margin-top: 5px;
  padding-left: 10px;
}

.indexitem li {
display: inline;
padding-right: 3px;
}

.indexitem a:hover{
  color:white;
}

#index{
border-top: solid 1px #EBEBEB; 
padding-top: 5px;
position: fixed;
bottom: 0px;
left: 15px;
right: 15px;
background-color: white;
opacity: 0.9;
min-height: 28px;
z-index: 999;
cursor: pointer;
max-height: calc(100% - 146px);
overflow: auto;


}

#index a{
  border-bottom: 0px;
}

.indexname{overflow: hidden;}

.indexname h4{
margin-left: 50.15%;
}

.blink {
  animation: blink 1s steps(5, start) infinite;
  -webkit-animation: blink 1s steps(5, start) infinite;
}
@keyframes blink {
  to { visibility: hidden; }
}
@-webkit-keyframes blink {
  to { visibility: hidden; }
}


/* P R O J E C T -----------------------------------------------------------*/

#container {
max-width: 100%;
min-width: 290px;
overflow: none;
margin-top: 25px;
margin-bottom: 100px;
margin-left: 15px;
margin-right: 15px;
height: auto;
}

#content {
max-width: 100%;
margin: 0px auto;
overflow: hidden;
padding: 0;
clear: both;
position: relative;
}

.projectimages {
max-width: 65%;
max-height: 100%;
margin: auto;
}


.projectimages img {
max-width: 100%; 
min-width: 290px; 
display: block;
margin: 60px auto;
}

.twocolumns {
  float: left; 
  width: calc(50% - 10px);
  padding: 0 5px;
}

.twocolumns img{
min-width: 0px;
margin-top: 0px;
} 

.twocolumns .caption  {
  min-width: 100px;
}

.twocolumns .caption p:first-child {
margin-left: 0%;
}

#projintrobox {
  width:100%;
  border-bottom:1px dotted black;
  padding-top: 10px;
}

.projintro{
  width: 65%;
  overflow: hidden;
  margin-top: 20px; 
  margin-bottom: 40px; 
  margin: auto; 
  padding-bottom: 30px;
  z-index: 100;
}

.projinfo {
  width: 50%; 
  float: left; 
  position: relative; 
}

.projinfo h3 {
  padding-right: 20px;
}

.projinfo h4 {
  padding-right: 20px;
}

/* attention: this style exists both here 
and on the projects page*/
.yearclient{
margin-top: 22px;
margin-right: 20px;
}

.yearclient li{
  display: inline;
}

.taglist {
margin-top: 0px; 
padding-right: 15px;
}

.taglist li {
display: inline;
padding-right: 5px;
}

.taglist li a:hover {
color:rgb(0, 0, 255)}

.projtext {
  width: 50%; 
  margin-left: 50%; 
}

.projtext p{
margin-bottom: 23px; 
} 




/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
 
.fade-in {
    opacity:0;  /* make things invisible upon start */
    -webkit-animation:fadeIn ease-in 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
    -moz-animation:fadeIn ease-in 1;
    animation:fadeIn ease-in 1;
 
    -webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
 
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;
}
 
.fade-in.one {
-webkit-animation-delay: 0.7s;
-moz-animation-delay: 0.7s;
animation-delay: 0.7s;
}
 
.fade-in.two {
-webkit-animation-delay: 1.2s;
-moz-animation-delay:1.2s;
animation-delay: 1.2s;
}
 
.fade-in.three {
-webkit-animation-delay: 1.6s;
-moz-animation-delay: 1.6s;
animation-delay: 1.6s;
}



.caption{
float: left;
/* width: 65%;*/
width: 75%; 
min-width: 290px;
font-size: 14px;
line-height: 18px;
color: #505050;
}

.caption p{
margin-bottom: 60px; 
} 

.caption p:first-child {
margin-top: 0px;
margin-left: 25%;
}

.videocaption {
float: left;
/* width: 65%;*/
width: 75%; 
min-width: 290px;
font-size: 12px;
line-height: 16px;
color: #505050;
margin-bottom: 60px;
}

.readmore {
float: left;
width: 65%; 
margin-left: 50%;
margin-bottom: 15px;
min-width: 290px;
}

.readmore p{
margin-bottom: 20px;
width: 50%; 
} 

.readmore p:first-child {
margin-top: 0px; /*was set to 20*/
}


.fichatecnica {
border-top: 1px dotted;
width: 50%;
padding-top: 10px;
padding-bottom: 10px;
font-size: 16px;

}

.fichatecnica p{
  padding-right: 30px;
}



.related{
  display: inline;
  list-style-type: none;
  padding:1px 5px 0 0;
}

.related a{
  border-bottom: solid 1px;
}

.moreprojectstitle {
  text-align: center;
}

.top{
  width: 90%; 
  float: left; 
  padding-bottom: 20px; 
  z-index: 999;
}  

.top a{
  border-bottom: 0px; 
  color: gray
}  
 
#leftarrow{
  position:fixed; 
  left:0px; 
  top:0px; 
  bottom:100px; 
  width:10%; 
  cursor: url('http://localhost:8888/kirby/assets/images/L.png'), auto; 
  z-index:99;
}

#rightarrow{
  position:fixed; 
  right:0px; 
  top:0px; 
  bottom:100px; 
  width:10%; 
  cursor: url('http://localhost:8888/kirby/assets/images/R.png'), auto;
  z-index:99;
}

.row{
  padding-bottom: 20px;
}

.left {float: left;}
.right{float: right;}

.border {
  padding-top:30px; 
  border-top: solid 1px;
}

.col-100 {width: 100%;}
.col-75 {width: 75%;}
.col-50 {width: 50%;}
.col-25 {width: 25%;}

.col-25 ul{padding-right: 15px; margin-bottom: 20px;}
.col-25 p{padding-right: 30px; margin-bottom: 20px;}
.col-50 ul{padding-right: 15px; margin-bottom: 20px;}
.col-50 p{padding-right: 35px; margin-bottom: 20px;}
 
.col-75 img {width: 100%;}
.col-50 img {width: 100%;}

.push-25{padding-left: 25%; }
.pull-25{padding-right: 25%;}

#aboutcontainer {
max-width: 100%;
min-width: 290px;
overflow: none;
margin-left: 15px;
margin-right: 15px;
height: auto;
}

#aboutcontent {
  max-width: 75%;
  margin: 0 auto;
  margin-top: 70px;

}

.about-contacts{
  padding-top: 0px; 
  padding-bottom: 35px;
}

.about-text {width: 25%;}

.about-text p{
  padding-right: 30px; 
  margin-bottom: 20px;
}

#colophon{
  font-size: 14px; 
  line-height: 17px;
} 

.video {max-width: 1080px; 
  height: auto; }

video {width: 100%;}

  
/* More projects collapsible panel ------------------------------------------------------------------------------*/

#accordion {
  text-align: center; 
  padding-top: 5px;
  padding-bottom: 3px;
  position: fixed;
  bottom: 0px;
  left: 15px;
  right: 15px;
  min-height: 28px;
  z-index: 9998;
}

#accordion a{
  border-bottom: 0px;
}

#moreprojectswrapper {
  overflow: hidden;
  max-width: 1440px;
  padding: 25px 0;
  margin: 0 auto;
  height: 100%;
}

.moreprojects {
  float: left;
  list-style: none;
  width: 25%;
  height: auto;
  margin-right: 0px;
  line-height: 0;
  }  

.moreprojectstitle {
  cursor: pointer;
}

.moreprojects img {
  width: calc(100% - 10px);
  height: auto;
  padding: 0px 5px 0px 5px;
}

.collapse{
display:none;
}

.panel-title{
  text-align: center;
}



/* TYPE LAB */

.pt-wrapper {
max-width: 1440px;
overflow: hidden;
}


.pt-trigger-container {
    position: fixed;
    z-index: 999999;
    left: 50%;
    margin-top: 100px;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.pt-trigger {
    border: none;
    background-color: transparent;
    font-size: 16px;
    margin: 10px 0 10px;
    padding: 0 20px;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
    display: inline;

}


.pt-page {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    visibility: hidden;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.full {
    max-width: 100%;
    height: auto;
 
   position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;

    margin: auto;
}

.full img {max-width: 75%;
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.pt-page-current, .no-js .pt-page {
    visibility: visible;
    z-index: 1;
}

.pt-page-0 {
    background: #FFF;
}

.pt-page-1 {
    background: #fd6a62;
}

.pt-page-2 {
    background: #f2f2f2;
}

.pt-page-3 {
    background: #FFF;
}

.pt-page-4 {
    background: #00FF00;
}

.pt-page-5 {
    background: #ee4035;
}

.pt-page-6 {
    background: #f68dbb;
}

.pt-page-7 {
    background: #f68dbb;
}

.pt-page-8 {
    background: #009367;
}

.pt-page-black {
    background: #34282C;
}
 
/* ---------------------------------------------------------------------------------------------------------- */  
/* ------------------------------------------ M E D I A  Q U E R I E S  ------------------------------------- */
/* ---------------------------------------------------------------------------------------------------------- */

/* ------------------------------------------ max:1600px ------------------------------------- */   
@media all and (max-width: 1600px){
  .projectimages {max-width: 75%;}
  .projintro {width: 75%;}
}



/* ------------------------------------------ max:1440px ------------------------------------- */   
@media all and (max-width: 1440px){

body{
  font-size: 16px; 
  line-height: 21px;
}

h2 {
  font-size: 18px;
}

footer{
  display: none;
}

.phrase{
  font-size: 160px;
}

#news{
  padding-bottom: 40px;
}

nav.menu { 
  margin-top: 0px;
}

nav li{
  margin-right: 15px;
}


#thumb{
  width: calc(33.33% - 15px);
}

#accordion {
  bottom: 0px;
}

#resultswrapper{
  width: 25%;
  left: 15px;
  bottom: 0px;
  padding-bottom: 2px;
}

#index {
  bottom: 0px;
  padding-bottom: 2px;}

.indexrowwrapper .indexrow:last-child .indexitem:last-child{
  margin-bottom: 35px;
}

#leftarrow{
  display: none;
}

#rightarrow{
  display: none;
}

video {width: 100%;}  


}


/* ------------------------------------------ max:1280px ------------------------------------- */   
@media all and (max-width: 1280px){

h2 {
  font-size: 18px;
}

h3 {
  font-size: 16px;
}

.contacts ul{
  font-size: 16px;
}


#accordion {
  font-size: 16px;
}

.yearclient{
  margin-top: 21px;
}

.taglist{
  margin-top: 0px;
}

.fichatecnica p{
  padding-right: 25px;
}

.projectimages {max-width: 100%;}
.projintro {width: 80%;}

#aboutcontent {max-width: 100%;}

#container {margin-top: 0px;}
.projintro {width: 100%;}


}

/* ------------------------------------------ max:1080px ------------------------------------- */   
@media all and (max-width: 1080px){

#news{max-height: 20%; overflow: scroll;
}

.phrase{
  font-size: 150px; 
  top:40%;
}

.new{
  width:50%; 
  margin-bottom: 20px;
}

#thumb{
  width: calc(50% - 15px);
}


.indexitem ul {
  padding-left: 5px;
}

.indexyear{
  padding-left: 0;
  width: 10%;
}

.indextitle{
  width:40%;
}

.indextags{
  width: 50%;
}

video {width: 100%;} 




#aboutcontent {
  max-width: 100%;}

  .push-25{
  padding-left: 0px;
}

.col-25{
  width: 50%;
}
   
.col-75 {
  width:100%;
}



.about-text{
  width: 100%;
}

.about-text p{
  width: 50%; 
  margin-left: 50%;
}

.about-text h3{
  float: left;
}

.festivals {
  float: right;
}



}

/* ------------------------------------------ max:960px ------------------------------------- */   
@media all and (max-width: 960px){

.phrase{
  font-size:130px; 
}



.projinfo{
 width: 50%;
}

.projinfo h4 {
  padding-right: 15%;
}

.projtext{
  margin-left: 50%;
}

.projtext {
  width: 50%; 
}

.caption{
  width: 97%;
}

.readmore{
  width: 75%;
}



}

/* ------------------------------------------ max:768px ------------------------------------- */   
@media all and (max-width: 768px){

.AndAtelier {
  float: right;
  text-align: right; 
}

.phrase{
  font-size: 100px;
}

.projectimages {
  max-width: 100%;
  margin-left: 0;
}

.projectimages img {
  margin-bottom: 30px;
}


.projinfo h4 {
  padding-right: 25%
}

.projtext {
  width: 50%; 
  float: left;
  margin-left: 0;
}

.projtext p{
  padding-right: 0px;
  margin-bottom: 0px; 
} 


.readmore {
  width: 100%;
  margin-left: 0px;
  margin-top: 15px;
}

.readmore p:first-child {
  margin-top: 15px;
}

.readmore p {
    width: 100%;}

.caption p{
margin-bottom: 30px; 
} 
.contacts {display: none;}
nav.menu {width: 50%}
.AndAtelier {width: 50%;}
}



/* ------------------------------------------ max:600px ------------------------------------- */   
@media all and (max-width: 600px){

.AndAtelier h2{
  float: right;
}

.phrase{
  font-size: 80px; 
}

#news{
  padding-bottom: 10px;
}

.new{
  font-size: 14px; 
  line-height: 19px; 
}

.new-date{
  padding-right: 10px;
}

nav.menu {
  position: absolute;
  top: 0px;
  padding-top: 0px;
}

#masonrywrapper{
  margin-top: 55px;
}

#thumb{
  width: calc(100% - 10px);
}


#container {
    margin-top: 40px;
}

.projinfo{
 width: 100%;
 margin-bottom: 20px; 
}

.projinfo h4{
  padding-right: 25%;
}

.yearclient {
  margin-top: 10px;
}

.projtext {
  width: 100%;
  padding-left: 0px;
  padding-top: 15px;
  border-top: 1px dotted #A5A5A5;
}

.caption{
  width: 100%; 
}

.readmore p {
    width: 100%;}

.col-25{
  width: 100%;
}

.col-50{
  width: 100%;
}

.about-text{
  width: 100%;
  margin-bottom: 10px;
}

.about-text p{
  width: auto; 
  margin-left: 0px;
  padding-right: 30px;
}

.about-text h3{
  float: none;
}

.projintro{
  margin-top: 0px; 
  padding-bottom: 15px;
}

#projintrobox{
  padding-top: 0px;
}

.projectimages img {
  margin: 20px auto;
}

}

/* ------------------------------------------ max:480px ------------------------------------- */   
@media all and (max-width: 480px){
 

#masonrywrapper {
    margin-left: 15px;
    margin-right: 15px;
    margin-bottom: 20px;}

#thumb{
  width: 100%;
  margin-right: 0px;
  margin-left: 0px;
}

#thumb img{
  width: 100%;
  height: auto;
}

.thumbinfo{
  top:0px;
  left:0px;
  right: 0px;
}


#index{
  border-top: 1px solid;
  position: inherit;
  padding-top: 0px;
}

#index h4{
  margin-left: 0px;
}

.indexrowwrapper{
  display: block;
  margin-top: 0px; 
}

.indexrow p {
  padding-left: 0px;
}

.indexname {
  display: none;
}

.indexyear{
  width: 20%;
}

.indextitle{
  width: 80%;
}

.indextags{
  display: none;
}

.projinfo h4 {
  padding-right: 25%;
}

.yearclient {
  padding-left: 0px;
}

.yearclient li{
  display: inline;
}



nav li {
  float: left;
  width: auto;
  margin-right: 10px;
}

#content .col-75{
  width:100%;
}

.phrase {
  font-size: 50px; 
  line-height: 70px; 
}

#news{
  height: 20%;
  overflow: scroll;
}
.new{
  width: 100%;
  min-height: 100px;
}

.moreprojectstitle{
  display: none;
}

.hideat480{
  display: none;
}

#resultswrapper{    
  width: 50%;
  left: 50%;
}

#resultswrapper h4{
  margin-right: 15px;
  text-align: right;
}

#container{margin-bottom: 50px;}

.col-100{
  margin-top: 0px;
  margin-bottom: 0px;
}

.fichatecnica{
  width: 100%; 
  padding-bottom: 20px;}

.about-contacts {
  padding-top: 0px;
  padding-bottom: 15px;
}

.caption p:first-child {
    margin-left: 0;
  }

.twocolumns .caption  {
  display: none;
}

.twocolumns img {
  margin-bottom: 30px;
  margin-top: 0px;
}

}



/* ------------------------------------------ max:360px ------------------------------------- */   

@media all and (max-width: 360px){

.projtext {
  width: 100%;
  padding-left: 0px; 
}

.pt-trigger{
  padding: 0px;
}
.pt-trigger-container{
  bottom: 0px; 
}

}

/* ------------------------------------------ max:320px ------------------------------------- */   
@media all and (max-width: 320px){

/*.hide{ display: inline;}*/

nav li {
  margin-right: 10px;
}

.projinfo h4 {
  padding-right: 0px;
}


.taglist {
  text-align: right; 
  padding-right:0px;
}


#index h4 {
  margin-left:0; 
}

.col-25 p{
  padding-right: 15px;
}

.about-text p{
  padding-right: 15px;
}

.hideat320{
  display: none;
}

.twocolumns {
  width: 100%;
  padding: 0px;
}


}

/* --- VERTICAL MEDIA QUERIES - IMAGES --- */

@media all and (max-width: 1440px) and (min-width: 1281px) and (max-height: 800px){
.projectimages img{max-width: 85%;}
.full img{max-width: 40%;}
.phrase {top: 40%;}
}

@media screen and (max-width: 1280px) and (min-width: 1081px) and (max-height: 700px){
.projectimages img{max-width: 85%;} 
.full img{max-width: 40%;} 
.phrase {top: 35%;} 
}