/* =============================================================================
1. CSS RESET
============================================================================= */

a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption,center, cite, code, dd, del, details, dfn, dialog, div, dl, dt, em, embed, fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, meter, nav, object, ol, output, p, pre, progress, q, rp, rt, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video, xmp { border: 0; margin: 0; padding: 0;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
b, strong {font-weight: bold;}
img {color: transparent; font-size: 0; vertical-align: middle; -ms-interpolation-mode: bicubic;}
ol, ul {list-style: none;}
li {display: list-item;}
table {border-collapse: collapse; border-spacing: 0;}
th, td, caption {font-weight: normal; vertical-align: top; text-align: left;}
q {quotes: none;}
q:before, q:after {content: ''; content: none;}
sub, sup, small {font-size: 75%;}
sub,sup {line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -0.25em;}
sup {top: -0.5em;}
svg {overflow: hidden;}
a{list-style: none; text-decoration: none;}
a:active{outline: none;}
a:focus{ outline: none;}
:focus {outline: 0;}


.clear {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}
.clearfix:before, .clearfix:after, .container_full:before, .container_full:after { content: '.'; display: block; overflow: hidden; visibility: hidden; font-size: 0; line-height: 0; width: 0; height: 0;}
.clearfix:after, .container_full:after {clear: both;}



body{
    font: 12px 'Open Sans', Arial, sans-serif;
    line-height: 20px;
    color: #888;
}


h1{
    font: 20px  'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px; 
}

h2{
    font: 18px 'Open Sans', Arial , sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

h3{
    font: 16px 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

h4{
    font: 15px 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

h5{
    font: 14px 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

h6{
    font: 13px 'Open Sans', Arial, sans-serif;
    font-weight: 600;
    color: #444;
    margin-bottom: 20px;
}

p{
    font: 12px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    line-height: 20px;
    color: #777;
}

a{
    font: 12px 'Open Sans', Arial, sans-serif;
    font-weight: 400;
    color: #777;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

img.float-left{
    margin-right: 20px;
    float: left;
    margin-top: 5px;
}

img.float-right{
    float: right;
    margin-left: 20px;
    margin-top: 5px;
}

.text-dark{
    color: #333;
}

.back-button{
}

/* `Container
----------------------------------------------------------------------------- */
.container_full {
	margin-left: auto; 
	margin-right: auto; 
	width: 960px;
}

.column_1, .column_2, .column_3, .column_4, .column_5, .column_6, .column_7, .column_8, .column_9, .column_10, .column_11, .column_12 {
	display: inline; 
	float: left; 
	margin-left: 10px; 
	margin-right: 10px; 
	margin-bottom: 60px;
}


.container_full .column_1 {
	width: 60px;
	}

.container_full .column_2 {
	width: 140px;
}

.container_full .column_3 {
	width: 220px;
}

.container_full .column_4 {
	width: 300px;
}

.container_full .column_5 {
	width: 380px;
}

.container_full .column_6 {
	width: 460px;
}

.container_full .column_7 {
	width: 540px;
}

.container_full .column_8 {
	width: 620px;
}

.container_full .column_9 {
	width: 700px;
}

.container_full .column_10 {
	width: 780px;
}

.container_full .column_11 {
	width: 860px;
}

.container_full .column_12 {
	width: 940px;
}

#header-wrapper{
    width: 100%;
    margin: 0 auto;
    position: relative;
	background: #ffffff;
}

#header{
    width: 940px;
    margin: 30px auto 20px;
}

#logo{
	float: left;
	width: 126px;
	height: 65px;
	margin-right: 30px;
}

#cv-container{
    float: right;
    width: 784px;
}

#cv-container .info{
    float: right;
    display: block;
    margin-bottom: 5px;
}

#cv-container .info li{
    float: left;
    text-align: right;
    margin-right: 20px;
}

#cv-container .info li:last-child{
    margin-right: 0;
}


.page-title-container{
    width: 100%;
    background-image: url('../img/bg-pattern-title.png');
    background-repeat: repeat-x repeat-y;
    background-color: #eee;
    display: block;
    margin: 0 auto 40px;
    padding: 30px 0;
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.page-title{
    width: 940px;
    margin-bottom: 0;
}

.page-title .title{
    float: left;
    max-width: 700px;
}

.page-title .title h1{
    display: inline-block;
    font: 20px Arial, sans-serif;
    font-weight: normal;
    float: left;
    margin-right: 20px;
    line-height: 20px;
    text-transform: none;
    margin-bottom: 0;
}


#content-wrapper{
    width: 960px;
    margin: 0 auto;
}

.portfolio{
    overflow: hidden;    
}

.quicksand-filter-container{
    width: 100%;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
}

.quicksand-filter-container span{
    float: left;
    margin-right: 20px;
    padding-top: 4px;
}

.quicksand-filter-container #quicksand-filter{
    float: left;
}

.quicksand-filter-container #quicksand-filter li{
    float: left;
    padding: 4px 10px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    -ms-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

.quicksand-filter-container #quicksand-filter li a{
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;  
}

.quicksand-filter-container #quicksand-filter li.active a, 
.quicksand-filter-container #quicksand-filter li.active a:hover, 
.quicksand-filter-container #quicksand-filter li:hover a{
    color: #fff !important;
}


.portfolio-hover{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    opacity: 0;
}

.portfolio-hover .mask{
    width: 100%;
    height: 100%;
    background: #444;     
    opacity: 0.6;
    position: absolute;
    top:0;
    left: 0;
}

.portfolio-hover ul{
    display: block;
}

.portfolio-hover li{
    float: left;
    background: #222;
    width: 36px;
    height: 36px;
    opacity: 1;
    top: 50%;
    margin-top: -18px;
    -webkit-transition: all 0.2s ease 0s;
    -moz-transition: all 0.2s ease 0s;
    -o-transition: all 0.2s ease 0s;
    -ms-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
}

.portfolio-hover .portfolio-zoom{
    margin-right: 4px;
    position: absolute;
    left: -42px;
}

.portfolio-hover .portfolio-zoom a{
    text-indent: -9999px;
    background: url('../img/portfolio/zoom.png') no-repeat center center;
    display: block;
    width: 36px;
    height: 36px;
}

.portfolio-hover .portfolio-single a{
    text-indent: -9999px;
    background: url('../img/portfolio/link.png') no-repeat center center;
    display: block;
    width: 36px;
    height: 36px;
}

.portfolio:hover .portfolio-hover{
    opacity: 1;
}

.portfolio-hover .portfolio-single{
    position: absolute;
    right: -42px;
}

.portfolio:hover .portfolio-single{
	right: 50%;
	margin-right: -15px;
}

.portfolio:hover .portfolio-zoom{
	left: 50%;
	margin-left: -15px;
}


.column_3.portfolio-style{
    margin-bottom: 20px;
}

.column_3.portfolio-style:last-child{
    margin-bottom: 60px;
}

.portfolio-style .portfolio{
    cursor: pointer;
}

.portfolio-style .portfolio .portfolio-image{
    width: 100%;
    margin-right: 0;
    margin-bottom: 0;
    position: relative;
    float: left;
}

.portfolio figcaption{
    float: left;
    width: 100%;
    background: #f6f6f6;
    border-top: 3px solid #ddd;
    padding: 5px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
	    box-sizing: border-box;
}

.portfolio figcaption a{
    font-size: 13px;
    font-weight: 600;
    color: #333;
    text-align: center;
    width: 100%;
    display: block;
}

.portfolio figcaption span{
    width: 100%;
    text-align: center;
    display: block;
    font-style: italic;
}


#footer-wrapper{
	width: 100%;
	margin: 0 auto;
	background-color: #e0e0e0;
	background-position: center 0;
	background-repeat: no-repeat;
	margin-top: 10px;
	border-top: 4px solid #4cbfa4;
}

#footer{
	padding-top: 60px;
}


a:hover {
    color: #4cbfa4 !important;
}

.quicksand-filter-container #quicksand-filter li.active, 
.quicksand-filter-container #quicksand-filter li:hover, 
.portfolio-hover li:hover {
	background-color: #4cbfa4 !important;
}

.portfolio:hover figcaption {
    border-top: 3px solid #4cbfa4;
}


/* =============================================================================
    Media Queries
============================================================================= */
@media only screen and (min-width: 768px) and (max-width: 959px){
    #content-wrapper{
        width: 728px;
    }

    #header{
	width: 688px;
	margin-bottom: 30px;
    }

    #cv-container{
        width: 406px;
    }

    img{
        max-width: 100%;
    }
	

    .container_full{
        width: 708px !important;
    }
    .column_1{
        width: 39px !important;
    }
    .column_2{
        width: 98px !important;
    }
    .column_3{
        width: 157px !important;
    }
    .column_4{
        width: 216px !important;
    }
    .column_5{
        width: 275px !important;
    }
    .column_6{
        width: 334px !important;
    }
    .column_7{
        width: 393px !important;
    }
    .column_8{
        width: 452px !important;
    }
    .column_9{
        width: 511px !important;
    }
    .column_10{
        width: 570px !important;
    }
    .column_11{
        width: 629px !important;
    }
    .column_12{
        width: 688px !important;
    }

	   

}

@media only screen and (min-width: 480px) and (max-width: 767px){
    #content-wrapper{
        width: 440px;
    }

    #header{
        width: 420px;
    }

    #cv-container{
        float: left;
        width: 100%;
    }

    #cv-container .info{
        float: none;
        margin: 0 auto 5px;
        display: table;
    }

    #logo{
        float: none;
        margin: 0 auto 30px;
    }


    img{
        max-width: 100%;
        height: auto;
    }


    /* columns */
    .container_full{
        width: 420px !important;
    }

    .column_1,
    .column_2,
    .column_3,
    .column_4,
    .column_5,
    .column_6,
    .column_7,
    .column_8,
    .column_9,
    .column_10,
    .column_11,
    .column_12{
        width: 400px !important;
    }

    .container_full [class*="column_"] [class*="column_"]{
        margin-left: 0 !important;
    }


    
    /* PORTFOLIO
    --------------------------------------------------------------------------*/
    .quicksand-filter-container span{
        text-align: center;
        width: 100%;
        margin-bottom: 5px;
    }
    
    .quicksand-filter-container #quicksand-filter{
        float: none;
        display: table;
        margin: 0 auto;
    }
    
    .portfolio img{
        width: 100%;
    }
    
}

@media only screen and (min-width: 320px) and (max-width: 479px){
    #content-wrapper{
        width: 280px;
    }
    
    #header{
        width: 240px;
    }

    img{
        max-width: 100%;
        height: auto;
    }

    iframe{
        max-width: 100%;
        height: auto;
    }

       
    /* columns */
    .container_full{
        width: 260px !important;
    }
    
    #cv-container{
        float: left;
        width: 100%;
    }

    #cv-container .info{
        float: none;
        margin: 0 auto 5px;
        display: table;
    }


    #logo{
        float: none;
        margin: 0 auto 30px;
    }

    .column_1,
    .column_2,
    .column_3,
    .column_4,
    .column_5,
    .column_6,
    .column_7,
    .column_8,
    .column_9,
    .column_10,
    .column_11,
    .column_12{
        width: 240px !important;
    }

    .container_full [class*="column_"] [class*="column_"]{
        margin-left: 0 !important;
    }

   
    #logo{
        float: none;
        margin: 0 auto 30px;
    }

       

    /* PORTFOLIO
    --------------------------------------------------------------------------*/
    .quicksand-filter-container span{
        text-align: center;
        width: 100%;
        margin-bottom: 5px;
    }
    
    .quicksand-filter-container #quicksand-filter{
        float: none;
        display: table;
        margin: 0 auto;
    }
    
    .portfolio img{
        width: 100%;
    }


}