/* Custom CSS */
@media (min-width: 1200px) {
    .container {
        width: 860px;
        max-width: 860px;
    }
}
@media (min-width: 992px) {
        .container {
    width: 860px;
    max-width: 860px;
        }
}
.container {
    padding:0 10px; 
}
.row {
    margin-right: -10px;
    margin-left: -10px;
}

body {
	border:0px solid red;
	background:url('../../img/ricepaper2-white_@2X.jpg') repeat;
	background-size: 300px;
	margin-top: 80px;
	font-family: 'Roboto Condensed', sans-serif;
	-webkit-font-smoothing: antialiased;
	font-weight: 500;
	font-size:100%;
	line-height: 1.6;
	color: #444;
	transition: all ease .5s;
}
 
 img {
    height: auto;
    width: auto;
    max-width: 100%;
 }
.logo {
	height: auto;
	width:75px;
	max-height: 100%;
	margin:0 15px 0px 36px;
	border: 0px solid red;
	position: relative;
	padding-bottom: 20px;
	opacity: 0;
	/*animation*/
    animation: fadeinlogo 1.25s;
    -moz-animation: fadeinlogo 1.25s; /* Firefox */
    -webkit-animation: fadeinlogo 1.25s; /* Safari and Chrome */
    -o-animation: fadeinlogo 1.25s; /* Opera */ 
    /* delay */
    animation-delay: 1s;
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-in-out;
    -webkit-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;
    -o-animation-timing-function:ease-in-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

/* animation logo */

@keyframes fadeinlogo {
    from { opacity:0; left: -0px;}
    to {opacity:1; left:0; }
}
@-moz-keyframes fadeinlogo { /* Firefox */
    from { opacity:0; left: -0px; }
    to { opacity:1; left:0; }
}
@-webkit-keyframes fadeinlogo { /* Safari and Chrome */
    from { opacity:0; left: -0px; }
    to { opacity:1; left:0; }
}


.contact {
	display: block;
	border: 0px solid red;
	padding: 10px 0;
	margin-left:35px; 
}
.contact span {
	display: block;
	position: relative;
}

.contact .name {
	font-size: 125%;
	opacity: 0;

		/*animation*/
    animation: fadeinnormal .25s;
    -moz-animation: fadeinnormal .25s; /* Firefox */
    -webkit-animation: fadeinnormal .25s; /* Safari and Chrome */
    -o-animation: fadeinnormal .25s; /* Opera */
    /* delay */
    animation-delay: 2.5s;
    -webkit-animation-delay: 2.5s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 2.5s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 2.5s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-out;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}
.contact .address {
	font-size: 95%;
	margin-bottom: .5em;
	opacity: 0;

	/*animation*/
    animation: fadeinnormal .25s;
    -moz-animation: fadeinnormal .25s; /* Firefox */
    -webkit-animation: fadeinnormal .25s; /* Safari and Chrome */
    -o-animation: fadeinnormal .25s; /* Opera */
    /* delay */
    animation-delay: 3s;
    -webkit-animation-delay: 3s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 3s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 3s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-out;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}
.contact .interests {
	font-size: 90%;
	font-weight: 500;
	font-style: italic;
	margin-bottom: .5em;
	opacity: 0;

			/*animation*/
    animation: fadeinnormal .25s;
    -moz-animation: fadeinnormal .25s; /* Firefox */
    -webkit-animation: fadeinnormal .25s; /* Safari and Chrome */
    -o-animation: fadeinnormal .25s; /* Opera */
    /* delay */
    animation-delay: 3.5s;
    -webkit-animation-delay: 3.5s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 3.5s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 3.5s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-out;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

/* animation normal */

@keyframes fadeinnormal {
    from {opacity:0; left:-3px; }
    to { opacity:1; left:0px; }
}
@-moz-keyframes fadeinnormal { /* Firefox */
    from { opacity:0; left:-3px; }
    to { opacity:1; left:0px; }
}
@-webkit-keyframes fadeinnormal { /* Safari and Chrome */
    from { opacity:0; left:-3px; }
    to { opacity:1; left:0px;
    }
}

.contact .button {
	font-size: 13px;
	font-weight: 500;
	font-style: normal;
	margin-top: .75em;
	opacity: 0;
	border: 1px solid #ccc;
	padding: 3px 15px;
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 1px;

/*animation fade in contact */
    animation: fadeincontact .25s;
    -moz-animation: fadeincontact .25s; /* Firefox */
    -webkit-animation: fadeincontact .25s; /* Safari and Chrome */
    -o-animation: fadeincontact .25s; /* Opera */
    /* delay */
    animation-delay: 4.5s;
    -webkit-animation-delay: 4.5s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 4.5s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 4.5s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-out;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}

/* animation fade in contact area */

@keyframes fadeincontact {
    from { opacity:0; top:-3px; }
    to { opacity:1; top:0px; }
}
@-moz-keyframes fadeincontact { /* Firefox */
    from { opacity:0; top:-3px; }
    to { opacity:1; top:0px;
    }
}
@-webkit-keyframes fadeincontact { /* Safari and Chrome */
    from { opacity:0; top:-3px; }
    to { opacity:1; top:0px; }
}

.grid.effect-2 {
    opacity: 1;
            /*animation*/
    animation: fadeingrid .75s;
    -moz-animation: fadeingrid .75s; /* Firefox */
    -webkit-animation: fadeingrid .75s; /* Safari and Chrome */
    -o-animation: fadeingrid .75s; /* Opera */
    /* delay */
    animation-delay: 1s;
    -webkit-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 1s; /* Safari 4.0 - 8.0 */
    
    animation-timing-function:ease-out;
    -webkit-animation-timing-function:ease-out;
    -moz-animation-timing-function:ease-out;
    -o-animation-timing-function:ease-out;

    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}
/* animation fade portfolio grid */

@keyframes fadeingrid {
    from {  opacity:0; top:25px; }
    to { opacity:1; top:0px; }
}
@-moz-keyframes fadeingrid { /* Firefox */
    from { opacity:0; top:25px; }
    to { opacity:1; top:0px; }
}
@-webkit-keyframes fadeingrid { /* Safari and Chrome */
    from { opacity:0; top:25px; }
    to {  opacity:1; top:0px;
    }
}

.button {
	display: inline-block;
	overflow: hidden;
	white-space: nowrap;
	color: #666;
	transition: all .5s ease;
}
.button .fa {
	padding-left: 11px;
}
.email i {
	font-size: 110%;
    top: -1px;
    position: relative;
}
.call i {
	font-size: 140%;
    position: relative;
    top: 1px;
}
.button.email {
	width: 66px;
}
.button.call {
	width: 60px;
	animation-delay: 5.25s;
    -webkit-animation-delay: 5.25s; /* Safari 4.0 - 8.0 */
    -moz-animation-delay: 5.25s; /* Safari 4.0 - 8.0 */
    -o-animation-delay: 5.25s; /* Safari 4.0 - 8.0 */
}
.button.email:hover, .button.email:focus {
	width: 96px;
	border-color: #333; 
	text-decoration: none;
	color: #000;
}
.button.call:hover, .button.call:focus {
	width: 84px;
	border-color: #333; 
	text-decoration: none;
	color: #000;
}

/*** FOOTNOTE ***/
/*****************/

.footnote {
    padding:60px 20px 10px 20px;
    text-align: center;
    font-style: italic;
    font-weight: 400;
    font-size: 90%; 
    display: block;
}

.ftr-logo {
    text-align: center; padding:10px 10px 60px 10px;
}
.ftr-logo img {max-height: 25px;}

/*** MASONARY AREA ***/
* { box-sizing: border-box; }

/* force scrollbar */
html { overflow-y: scroll; }


/* SAVVIOR GRID STYLES  */

#grid {
  width: 100%;
  margin: auto;
  border: 0px solid lightgrey;
}
#grid:after {
  content: "";
  display: table;
  clear: both;
}
#grid[data-columns]::before {
  clear: both;
  display: block;
  padding: 10px;
}

.box {
  margin-bottom: 20px;
  height: auto;
  border: 1px solid #ccc;
}
.box:last-child {
  margin-bottom: 0;
}

.column { float: left; padding: 10px; box-sizing: border-box; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.33333%; }
.size-1of4 { width: 25%; }