/** A LA BRUTUS Blogger Template
*** By Integra Studio
*** 2016
*** https://www.fiverr.com/integrastudio
*** blue: #209691
**/


@import url('https://fonts.googleapis.com/css?family=Oswald');
@import url('https://fonts.googleapis.com/css?family=Amatic+SC:400,700');
@import url('https://fonts.googleapis.com/css?family=Dosis');


/* ---- General ---*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
}

body, html{
    font-family: 'Dosis', sans-serif;
    color:#555;
    max-width: 100%;
    overflow-x: hidden;
    background-image: url(http://nebula.wsimg.com/eaf66e4651fd59991b8779c289d1ecda?AccessKeyId=531592D248B589D87A56&disposition=0&alloworigin=1);
    background-size: cover ;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

a, a:visited, a:active{
    color:#000;
    text-decoration: none;
    -webkit-transition: all 200ms linear;
    -moz-transition: all 200ms linear;
    -ms-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    transition: all 200ms linear;
}

.row{
    width: 100%;
    display: inline-block;
    position: relative;
    margin: 20px 0;
}

.row .inner-container{
    margin:0px 10%;
    z-index: 2;
    position: relative;
    padding: 10px 0;
}

.row .row-title{
    font-family: 'Amatic SC', cursive;
    widt:auto;
    font-size:30px;
    color: #000;
    text-transform: uppercase;
    margin:20px auto;
    text-align: center;
    border-bottom:1px solid #ccc;
    display: table;
    position: relative;
    z-index: 2;
}

.overlay{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(255,255,255 ,0.7);
    z-index: 1;
}

.section, .widget{
    margin: 0;
    padding: 0;
}

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

.header-row{
    color: #fff;
    background-size: cover;
    background-position: center center;
    text-align: center;
    font-family: 'Amatic SC', cursive;
    padding:10% 0;
    margin-top:0;
}

.header-row a, .header-row a:visited, .header-row a:active{
    color:#000;
}

.header-row a:hover{
    text-shadow: 0 0 3px #209691;
}

.header-row .logo{
    display: inline-block;;
    width:50%;
    height:auto;
    margin: 10px auto;
    float: none;
}


ul.main-menu{
    display: inline-block;
    list-style: none;
    width:100%;
    position: relative;

}


.fa.menu-button{
    color: #000;
    clear: both;
    display: none;
}
ul.main-menu li{
    display: inline-block;
    list-style:none;
    float: none;
    position: relative
}

ul.main-menu li i{
    background: #000;
    color: #FFF;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    padding: 10px;
    margin:10px;
    font-size:18px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);;
    text-shadow: 0 0 3px #000;
}

ul.main-menu li a {
    padding:0 20px;
    height:60px;
    line-height:60px;
    text-transform: uppercase;
    font-weight:700;
    font-size: 24px;
    cursor: pointer;
}

ul.main-menu li:hover  {
    text-shadow: 0 0 5px #209691;
}

ul.main-menu li:hover i {
    background: #2bd1cc;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 10px 5px #209691;
    box-shadow: 0px 0px 10px 5px #209691;
}

/* -- Social Menu ---*/
ul.social-menu{
    display: inline-block;
    list-style: none;
    position: relative;
    clear: both;
    top: -70px;
    left: -170px;

}

ul.social-menu li{
    display: inline-block;
    list-style:none;
    float: none;
    position: relative;
    text-shadow: 0 0 3px #000;
}

ul.social-menu li i{
    background: #209691;
    color: #FFF;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    padding: 8px 9px;
    margin:1px;
    font-size:12px;
    -webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
    box-shadow: 1px 1px 1px 0 rgba(0,0,0,0.5);
}

ul.social-menu li i.fa-facebook{
    background: #285b96;
}

ul.social-menu li i.fa-tumblr{
    background: #183559;
}

ul.social-menu li i.fa-twitter{
    background: #3c7cee;
}

ul.social-menu li a {
    padding:0 2px;
}

ul.social-menu li:hover  {
    text-shadow: 0 0 5px #209691;
}

ul.social-menu li:hover i {
    background: #2bd1cc;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 10px 5px #209691;
    box-shadow: 0px 0px 10px 5px #209691;
}

/* --- about --*/
.about-row{
    margin-top:-20px;
}
.about-row, .vision-row, .experience-row{
    text-align: justify;
    font-size:18px;
    border: 1px solid #000 ;
    border-left: none;
    border-right:none;
    padding-bottom: 20px;
    background: #FFF;
    -webkit-box-shadow: 0px 0px 1px 0px #000;
    box-shadow: 0px 0px 1px 0px #000;
}


/* --- Services ----*/

.services-row{
    background: #fefefe;
    border: 1px solid #000 ;
    border-left: none;
    border-right:none;
    -webkit-box-shadow: 0px 0px 1px 0px #000;
    box-shadow: 0px 0px 1px 0px #000;
}


.services-icons{
    display: inline-block;
    width: 100%;
}

.services-icons .box{
    display: inline-block;
    float: left;
    width:19%;
    margin:20px 0.01%;
    text-align: center;
    padding:20px 10px;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    text-shadow: 0 0 1px #209691;
    color: #000;
}


.services-icons .box i.icon{
    background: #000;
    color: #fff;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    padding: 30px;
    margin:10px 0;
    transition: all 300ms ease ;
    -webkit-box-shadow: 0px 0px 0 ;
    box-shadow: 0px 0px 0;
}


.services-icons .box:hover i.icon{
    -webkit-box-shadow: 0px 0px 10px 1px #209691;
    box-shadow: 0px 0px 10px 1px #209691;
    color: #000;
    background: #209691;
}

.services-icons h3{
    font-size:20px;
}

.services-icons ul{
    font-size:14px;
}

.services-icons ul li{
    margin:10px 0;
    list-style: none;
}


/* -- Portifolio ---*/
.portifolio-row{
    background: rgba(20,20,20,0.9);
    border: 1px solid #FFF ;
    border-left: none;
    border-right:none;
    -webkit-box-shadow: 0px 0px 1px 0px #000;
    box-shadow: 0px 0px 1px 0px #000;
}

.portifolio-row .row-title{
    color: #fff;
}
.portifolio-slider{
    width:100%;
    max-width:800px;
    margin:20px auto;
}

.portifolio-slider .slide{
    width:100%;
    height:auto;
    margin:0px auto 10px;
    text-align: center;
}

.portifolio-slider .slide img{
    width:100%;
    height:auto;
}

.portifolio-slider .caption{
    padding:5px;
    width:100%;
    color: #FFF;
}

.portifolio-slider-nav{
    width:100%;
    max-width:800px;
    margin:20px auto;
}


.portifolio-slider-nav  img{
    height:200px;
    object-fit: cover;
}


/* -- Contact ---**/

.contact-row{
    background: #ffffff;
    color: #000;
    border: 1px solid #000 ;
    border-left: none;
    border-right:none;
    -webkit-box-shadow: 0px 0px 1px 0px #000;
    box-shadow: 0px 0px 1px 0px #000;
}

.contact-row .inner-container{
    margin:0px 20%;
}

.contact-section, .contact-social{
    display: inline-block;
    float: left;
    width:40%;
    text-align: center;
}

.contact-social{
    margin-left:8%;
}

.contact-form-widget{
    text-align: left;
}
.contact-form-widget input, .contact-form-widget textarea {
    padding: 5px 5px;
    margin: 5px auto 15px;
    border: 1px solid #000;
    width: 100%;
}

.contact-social i {
    background: #000;
    color: #fff;
    padding: 20px;
    border-radius: 100%;
    margin: 10px;
    width:70px;
    height:70px;
}

.contact-social i:hover {
    background: #2bd1cc;
    color: #FFF;
    -webkit-box-shadow: 0px 0px 10px 5px #209691;
    box-shadow: 0px 0px 10px 5px #209691;
}

input#ContactForm1_contact-form-submit {
    background: #000;
    color: #fff;
    padding: 15px 0;
}


@media screen and (max-width: 1000px) {
    .row .inner-container{
        margin:0 2%;
    }
}

@media screen and (max-width: 800px) {
    .header-row .column-right {
        width: 100%;
    }

    .header-row .logo {
        width: 100%;
        text-align: center;
    }

    ul.social-menu {
        display: inline-block;
        list-style: none;
        position: relative;
        clear: both;
        top: -70px;
        left: 20%;
    }

    .services-icons .box i.icon {
        padding: 20px;
    }

    .services-icons h3 {
        font-size: 16px;
    }

    .contact-social i {
        padding: 10px;
        margin: 5px;
        width: 50px;
        height: 50px;
    }

    .services-icons .box{
        width:48%;
        margin:20px 0.01%;
        float: none;
    }


    .services-icons .box i.icon{
        padding: 30px;
    }



}

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

    .contact-section, .contact-social {
        width: 100%;
        margin-left:0;
    }

    .contact-social {
        padding-bottom: 20px;
    }
}

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

    ul.main-menu{
        display: none;
    }
    ul.main-menu li {
        width: 100%;
    }
    .fa.menu-button{
        display: inline-block;
    }
}