@font-face {
    font-family: 'robotolight';
    src: url('fonts/Roboto-Light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoitalic';
    src: url('fonts/Roboto-Italic-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotomedium';
    src: url('fonts/Roboto-Medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotobold';
    src: url('fonts/Roboto-Bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'robotoblack';
    src: url('fonts/Roboto-Black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'montserratextrabold';
    src: url('fonts/montserrat-extrabold-webfont.woff2') format('woff2'),
        url('fonts/montserrat-extrabold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'sensations_and_qualitiesRg';
    src: url('fonts/sensations_and_qualities-webfont.woff2') format('woff2'),
         url('fonts/sensations_and_qualities-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}





/* Generals */
body{
    font-family: 'robotomedium', sans-serif;
}

img{
    max-width: 100%;
}

strong{
    font-family: 'robotoblack', sans-serif;
}

.block{
    padding: 100px 0;
    margin: 0;
}

.alpha{
    opacity: 60%;
}

.alpha_hover:hover{
    opacity: 80%;
    cursor: pointer;
}

/* Boostrap Overwrite */
.modal-dialog {
    max-width: 600px !important;
}

.fade{
    background-color: rgba(0,0,0,.8) !important;
}

/* Section About Me */
.btn_about{
    padding: 10px 50px!important;
    height: 50px;
    border-radius: 25px !important;
}

.btn_about {
    background-color: #39C48E !important;
}

.btn_about i{
    margin-right: 5px;
}

.btn_about:hover {
    background-color: #39C48E !important;
    color: #FFF !important;
}

.section_title{
    padding: 15px 15px 30px 15px;

}

.section_title h2{
    font-size: 14px !important;
    font-family: 'montserratextrabold', sans-serif !important;
    opacity: 50%;
    margin: 0;
    padding: 0;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-right: 15px;
}

.section_title p{
    margin: 0;
    font-size: 14px !important;
    font-family: 'robotolight', sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.studies img,
.experiences img {
    width: 50px;
    float: right;   
    margin-left: 10px;
}

.info_block{
    padding: 20px 0;
}

.info_block h2{
    font-family: 'robotolight', sans-serif;
    font-size: 40px;
}

.info_block h3{
    font-family: 'robotobold', sans-serif;
    font-size: 20px;
    border-bottom: 1px solid #666;
    padding-bottom: 15px;
    margin-bottom: 10px;
}

.info_block h4{
    font-family: 'robotomedium', sans-serif;
    font-size: 16px !important;
}

.info_block h5{
    font-family: 'robotolight', sans-serif;
    font-size: 14px !important;
    opacity: 75%;
}

/*.alpha .info_block img{
    width: 100%;
}*/

.info_block .blockquote p{
    font-family: 'robotolight', sans-serif;
    font-size: 16px !important;
    line-height: 20px;
    border-bottom: 1px solid #666;
    padding-bottom: 15px;

}

.info_block .blockquote footer{
    font-family: 'robotomedium', sans-serif;
    font-size: 14px !important;
    line-height: 20px;
    color: #000;
    margin-top: 10px;
}

.info_block .blockquote cite{
    font-family: 'robotomedium', sans-serif;
    font-size: 14px !important;
    line-height: 20px;
    opacity: 75%;
}

.recommendations img{
    border-radius: 50%;
    width: 50px;
    float: right;
    margin-left: 10px; 
    margin-top: 10px;
    border: 2px solid #FFF;
}

/* My Card */
.myCard{
    padding: 120px 0 100px 0;
    background-color: #000000;
    background-image: url(img/backgrounds/blackorchid.jpg);
    margin-top: -25px;
    color: #FFF;
    text-transform: uppercase;
}

.myCard h1{
    font-family: 'robotolight', sans-serif;
    font-size: 40px;
    letter-spacing: 2.5px;
    margin: 0 !important;
    line-height: 20px;
    opacity: .9;
}

.myCard h2{
    font-family: 'montserratextrabold', sans-serif;
    font-size: 70px;
    letter-spacing: 1px;
    margin: 0 !important;
    line-height: 60px;
}

.myCard h3{
    font-family: 'robotolight', sans-serif;
    font-size: 14px;
    letter-spacing: 10px;
    opacity: 80%
}

.myCard .multidisciplinary{
    font-family: 'sensations_and_qualitiesRg', sans-serif;
    text-transform: none;
    font-size: 100px;
    line-height: 10px;
    opacity: .85;
    color: #39C48E;
    margin-right: -20px
}

/* Back to Home */
.backhome{
    background-color: #DDD;
    padding: 10px 0;
}

.backhome a{
    color: #666;
}

.backhome a:hover{
    color: #444;
    text-decoration: none;
}

/* Project */
.project_intro{
    padding-left: 20px !important;
}

.project_intro a{
    text-decoration: none !important;
}


.project_intro a h3:hover,
.project_intro a h4:hover,
.project_intro a h5:hover,
.project_intro a:hover{
    text-decoration: none !important;
}

.project_intro h3{
    font-size: 16px;
    font-family: 'montserratextrabold', sans-serif !important;
    opacity: 50%;
    color: #000;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.project_intro h4{
    font-size: 16px;
    color: #000;
    font-family: 'robotolight', sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.project_intro h5{
    font-size: 12px;
    color: #000;
    font-family: 'montserratextrabold', sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.project p{
    color: #666;
}

.project_intro button{
    border-radius: 50% !important;
    border: none !important;
    width: 45px;
    height: 45px;
    line-height: 2;
    color: #FFF;
    background-color: rgba(0,0,0,.2) !important;
}

/* Other Works */
.otherWorks a{
    text-align: center;
    padding: 50px;
    font-family: 'robotomedium', sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #FFF;
    background-color: #222;
}

.otherWorks a:hover{
    text-decoration: none;
    color: #FFF;
}

/* Project */
.border-5{
    border: 5px solid #FFF !important;
}

.project a:hover{
    text-decoration: none !important;
}

.project .section_intro .h3{
    font-size: 14px;
    font-family: 'montserratextrabold', sans-serif !important;
    opacity: 50%;
    color: #000;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.project .section_intro h2{
    font-size: 30px;
    color: #000;
    font-family: 'robotobold', sans-serif !important;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.projects img,
.project img{
    /*    max-width: 100%;
        height: auto;*/
}

.btn_to_site{
    border-radius: 20px !important;
    border: none !important;
    height: 35px;
    color: #FFF !important;
    margin-top: 20px;
    margin-left: 5px;
    padding: 5px 20px !important;
    background-color: rgba(0,0,0,.2) !important;
}

.btn_to_site:hover{
    background-color: rgba(0,0,0,.25) !important;
}

.btn_to_site i{
    margin-left: 5px;
}

.btn_to_instagram{
    border-radius: 50% !important;
    border: none !important;
    width: 37px;
    height: 37px;
    margin-top: 20px;
    margin-left: 5px;
    background-color: rgba(0,0,0,.2) !important;
    color: #FFF !important;
    font-size: 16px !important;
}

.btn_to_instagram:hover{
    background-color: rgba(0,0,0,.25) !important;
}

/* Logos - Illustrations - Social Media - Infographics */

.illustrations img,
.socialmedia img,
.infographics img{
    width: 100%;
    border: 1px solid #EEE;
}

.logos h2,
.illustrations h2,
.socialmedia h2,
.infographics h2{
    font-family: 'montserratextrabold', sans-serif !important;
    color: #CCC;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.infographics img{
    cursor: pointer;
}

.modal .modal-dialog{
    width: 90% !important;
}

/* Footer */
.footer{
    background-image: url(img/backgrounds/blackorchid.jpg);
    color: #444;
    padding: 20px 0 10px 0;
}

.footer p{
    color: #666;
    font-size: 14px;
}

.footer i{
    color: #39C48E;
}

.footer a i{
    color: #666;
    margin-left: 10px;
    font-size: 20px;
}



/* MASONRY */
.gal {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}	
.gal img{
    width: 100%;
    padding: 0;
    margin-bottom: 15px;
}

/* // Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
    .myCard h1{
        font-size: 30px;
    }

    .myCard h2{
        font-size: 55px;
        line-height: 50px;
    }

    .myCard h3{
        font-size: 14px;
    }
    
    .myCard .multidisciplinary{
        font-size: 79px;
        line-height: 10px;
    }
    
    .gal {
    -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
}
}

/* // Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) { 
    .gal {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
}
}

/* // Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { 

}

/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) { 

}

/* // Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

}