p {
    margin: 0;
    padding: 0; 
}


/*!
 * Start Bootstrap - Grayscale Bootstrap Theme (http://startbootstrap.com)
 * Code licensed under the Apache License v2.0.
 * For details, see http://www.apache.org/licenses/LICENSE-2.0.
 */

body {
    font-family: Lora,"Helvetica Neue",Helvetica,Arial,sans-serif;
    color: #fff;
    background-color: #000;
}
h1,
h2{
    margin: 0 0 35px;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

h3,
h4,
h5,
h6 {
    margin: 0 0 35px;
    text-transform: initial;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    letter-spacing: 1px;
}

p {
    margin: 0 0 25px;
    font-size: 18px;
    line-height: 1.5;
}

@media(min-width:768px) {
    p {
        margin: 0 0 35px;
        font-size: 20px;
        line-height: 1.6;
    }
}

a {
    color: #42dca3;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

a:hover,
a:focus {
    text-decoration: none;
    color: #1d9b6c;
}

.light {
    font-weight: 400;
}

.navbar-custom {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-custom .navbar-brand {
    font-weight: 700;
}

.navbar-custom .navbar-brand:focus {
    outline: 0;
}

.navbar-custom .navbar-brand .navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-custom .navbar-brand .navbar-toggle:focus,
.navbar-custom .navbar-brand .navbar-toggle:active {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover {
    outline: 0;
    color: rgba(255,255,255,.8);
    background-color: transparent;
}

.navbar-custom .nav li a:focus,
.navbar-custom .nav li a:active {
    outline: 0;
    background-color: transparent;
}

.navbar-custom .nav li.active {
    outline: 0;
}

.navbar-custom .nav li.active a {
    background-color: rgba(255,255,255,.3);
}

.navbar-custom .nav li.active a:hover {
    color: #fff;
}

@media(min-width:768px) {
    .navbar-custom {
        padding: 20px 0;
        border-bottom: 0;
        letter-spacing: 1px;
        background: 0 0;
        -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
        -moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
        transition: background .5s ease-in-out,padding .5s ease-in-out;
    }

    .navbar-custom.top-nav-collapse {
        padding: 0;
        border-bottom: 1px solid rgba(255,255,255,.3);
        background: #000;
    }
}

/*.intro {
    display: table;
    width: 100%;
    height: auto;
    padding: 100px 0;
    text-align: center;
    color: #fff;
    background: url(../img/intro-bg.jpg) no-repeat bottom center scroll;
    background-attachment: fixed;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
}

.intro .intro-body {
    display: table-cell;
    vertical-align: middle;
}

.intro .intro-body .brand-heading {
    font-size: 40px;
}

.intro .intro-body .intro-text {
    font-size: 18px;
}

@media(min-width:768px) {
    .intro {
        height: 100%;
        padding: 0;
    }

    .intro .intro-body .brand-heading {
        font-size: 100px;
    }

    .intro .intro-body .intro-text {
        font-size: 26px;
    }
}
*/
.btn-circle {
    width: 70px;
    height: 70px;
    margin-top: 15px;
    padding: 7px 16px;
    border: 2px solid #a1d8c4;
    border-radius: 100%!important;
    font-size: 40px;
    color: #fff;
    background: 0 0;
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.btn-circle:hover,
.btn-circle:focus {
    outline: 0;
    color: #fff;
    border: 2px solid #42dca3;
    background: rgba(255,255,255,.1);
}

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

@-webkit-keyframes pulse {    
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@-moz-keyframes pulse {    
    0% {
        -moz-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -moz-transform: scale(1.2);
        transform: scale(1.2);
    }

    100% {
        -moz-transform: scale(1);
        transform: scale(1);
    }
}



.content-section {
    margin: 100px 0;
}
@media(min-width:767px) {
    .content-section {
        margin: 80px 0;
    }

    .download-section {
        padding: 100px 0;
        margin-top: 200px;
    }

    #map {
        height: 400px;
        margin-top: 250px;
    }
}

.btn {
    border-radius: 0;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.btn-default {
    border: 1px solid #42dca3;
    color: #42dca3;
    background-color: transparent;
}

.btn-default:hover,
.btn-default:focus {
    border: 1px solid #42dca3;
    outline: 0;
    color: #000;
    background-color: #42dca3;
}

ul.banner-social-buttons {
    margin-top: 0;
}

@media(max-width:1199px) {
    ul.banner-social-buttons {
        margin-top: 15px;
    }
}

@media(max-width:767px) {
    ul.banner-social-buttons li {
        display: block;
        margin-bottom: 20px;
        padding: 0;
    }

    ul.banner-social-buttons li:last-child {
        margin-bottom: 0;
    }
}

footer {
    padding: 50px 0;
}

footer p {
    margin: 0;
}

::-moz-selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

::selection {
    text-shadow: none;
    background: #fcfcfc;
    background: rgba(255,255,255,.2);
}

img::selection {
    background: 0 0;
}

img::-moz-selection {
    background: 0 0;
}

body {
    webkit-tap-highlight-color: rgba(255,255,255,.2);
}

.work p{
    position: relative;
    z-index: 400;
}
.about p{
    position: relative;
    z-index: 400;
}
.contact p{
    position: relative;
    z-index: 400;
}
.intro .img-responsive {
    padding-left: 5%;
    margin-top: 4em;
}

text {
    margin: 0 0 35px !important;
    text-transform: uppercase !important;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

#about{
    width: 100%;
    padding: 100px 0 ;
    margin-top: 200px;
}

#skills {
    width: 100%; 
    height: auto;
    background-color: #000;
    margin-top: -10em;
    padding: 2em 0 0 0;
    z-index: 10 !important;
}
#map {
    width: 100%;
    height:20em;
    background-color: #42dca3;
    margin: 0;
    z-index: 10 !important;
}
#contact {
    width: 100%; 
    height: 100%;
    background-color: #000;
    margin: 0;
    padding: 2em;
    z-index: 10 !important;
}


/*-----circle buttons-----*/
.circleBox {
    height: 500px;
    width: 780px;
    margin: 0 auto;
}

.circle {
    width: 200px;
    height: 200px;
    margin: 30px;
    background-color: lightpink;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    float:left;
}

/*-----cross section-----*/
div .content {
    position: relative;
    width: 100%; 
    height: auto;
    z-index: 100;
}
div .content2 {
    position: relative;
    width: 100%; 
    z-index: 100;
    background-color: none;
    padding:40px 0 0 0;
}
.skew {
    transform: skew(0deg, 20deg);
    margin: 100px 0 -200px;
}
.skew .content {
    margin: -80px 0;
    transform: skew(0deg, -20deg);
}
.skew2 {
    transform: skew(0deg, -20deg);
    margin: -80px 0;
}
.skew2 .content2 {
    margin: -80px 0;
    transform: skew(0deg, 20deg);
}
.block-1 {
    background: #0C0D0F;
}
.block-3 {
    background: #252628;
}
.contained{
    margin: auto;
    width: 90%;
}


@media(min-width:768px) {
    #cssmenu,
    #cssmenu ul,
    #cssmenu ul li,
    #cssmenu ul li a,
    #cssmenu #menu-button {
        float: right;
        position: relative;
    }

    #cssmenu {
        font-family: 'Open Sans', sans-serif;
    }
    .effect {
        position: absolute;
        float: right;
        top: 38px;
        right: 0;
        height: 3px;
        background: #42dca3;
        -webkit-transition: all 0.25s ease-out;
        -moz-transition: all 0.25s ease-out;
        -ms-transition: all 0.25s ease-out;
        -o-transition: all 0.25s ease-out;
        transition: all 0.25s ease-out;
    }

    #cssmenu > ul > li > a {
        color: #fff;
        -webkit-transition: color .2s ease;
        -moz-transition: color .2s ease;
        -ms-transition: color .2s ease;
        -o-transition: color .2s ease;
        transition: color .2s ease;
    }
    #cssmenu > ul > li:hover > a,
    #cssmenu > ul > li.active > a {
        color: azure;
    }
}
.btn-social {
    color: #42dca3;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    line-height: 45px;
    background: transparent;
}

.btn-outline {
    color: white;
    font-size: 20px;
    border: solid 2px #42dca3;
    background: transparent;
    transition: all 0.3s ease-in-out;
    margin-top: 15px;
}
.btn-outline:hover,
.btn-outline:focus,
.btn-outline:active,
.btn-outline.active {
    color: white;
    background: #42dca3;
    border: solid 2px #42dca3;
}

/* Released: 14th April 2014 - Beverley Hooton @ Focus on Function Web Design - http://fofwebdesign.co.uk */
/* Updated: 22nd September 2014 - transforms replace positioning to improve performance */
/* Updated: 27th October 2014 - IE7 support added via horizontal scrollbar to match IE8 */
/* Updated: 17th July 2015 - :checked nav pip highlighted to indicate active slide 

 #### - slider css below - #### */
.content2 {overflow-y: hidden;}
#slider-outer { max-width:100%; margin:auto; position:relative; line-height:1.75em; padding:1.50em; overflow: visible;} /* change padding to move arrows */
#slider { display:block; overflow:hidden; height: 100%; }
#slider-outer .slide-check { position:absolute; left:-9999px }

#slider .slides { width:300% } /* #### (slides x 100) #### */
#slider .slides > div { width:33.3%; /* #### (100 / slides) #### */
    float:left; overflow:hidden; position:relative; 
    -webkit-transform:translate3d(0,0,0); /* http://davidwalsh.name/translate3d */
    -webkit-transition:-webkit-transform .5s ease-in-out; transition:transform .5s ease-in-out
}

#slider-outer .pips { position:absolute; z-index:1; bottom:1px; text-align:center; width:100%; margin-left:-1.25em }
#slider-outer .pips div { display:inline-block; margin:auto }
#slider-outer .pips label { font:bold 1em/2em Arial; color:#fff; background:#222; width:2em; border-radius:2em; margin:0 0.25em; float:left; display:block; cursor:pointer; }
#slider-outer .arrows { font:2em/3em Arial; text-indent:0em; text-align:center; position:absolute; display:none; z-index:100; color:#fff; background:#555; width:3em; border-radius:3em; cursor:pointer; bottom: 43%;}
#slider-outer .pips label:hover, #slider-outer .arrows:hover { background:#666 }

/* #### - define ids of checked pips here - #### */
#btn-1:checked ~ .pips div #pip-1, 
#btn-2:checked ~ .pips div #pip-2, 
#btn-3:checked ~ .pips div #pip-3{ background:#666 }

/* #### - define ids of checked buttons/arrows here - #### */
#btn-goto-first:checked ~ #arrow-1, 
#btn-1:checked ~ #arrow-2, 
#btn-2:checked ~ #arrow-3,
#btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
    right:-5%; display:block
}

/* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
#btn-2:checked ~ #arrow-1, 
#btn-3:checked ~ #arrow-2,
#btn-4:checked ~ #arrow-3{ /* #btn-1 always goes to last arrow */
    left:-5%; display:block; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1)
}

/* #### - define ids of checked buttons/arrows here - (% increment per slide) - move slides when checked - #### */
#slider-outer #btn-1:checked ~ #slider .slides > div, #slider #btn-goto-first:checked ~ #slider .slides > div { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0) }
#slider-outer #btn-2:checked ~ #slider .slides > div { -webkit-transform:translate(-100%,0); -ms-transform:translate(-100%,0); transform:translate(-100%,0) }
#slider-outer #btn-3:checked ~ #slider .slides > div { -webkit-transform:translate(-200%,0); -ms-transform:translate(-200%,0); transform:translate(-200%,0) }
#slider-outer #btn-5:checked ~ #slider .slides > div, #slider #btn-goto-last:checked ~ #slider .slides > div { -webkit-transform:translate(-300%,0); -ms-transform:translate(-300%,0); transform:translate(-300%,0) }

/* - #### custom styles for slide content - #### */
#slider .slides > div > div { line-height:0; text-align:center }
#slider .slides > div > div { padding:3px }
#slider .slides img { max-width:100% }


@media ( max-width:768px) { /* #### - make better use of space at 480px (480/16=30 - 16px being default browser font-size) - #### */
    #slider-outer { padding: 2em 0; overflow-x: visible;}
    #slider .slides .portfolio-item { }
    #slider-outer .pips { display:none }
    #slider-outer .arrows { font:2em/3em Arial; text-indent:0em; text-align:center; position:absolute; display:none; z-index:100; color:#fff; background:#555; width:3em; border-radius:3em; cursor:pointer; bottom: 1px;}
    
    /* #### - define ids of checked buttons/arrows here - #### */
    #btn-goto-first:checked ~ #arrow-1, 
    #btn-1:checked ~ #arrow-2, 
    #btn-2:checked ~ #arrow-3,
    #btn-5:checked ~ #arrow-1 { /* last button always goes to #arrow-1 */
        right:-3%; display:block
    }

    /* #### - define ids of checked buttons/arrows here - reposition/rotate '>' arrows to fake '<' arrows - #### */
    #btn-2:checked ~ #arrow-1, 
    #btn-3:checked ~ #arrow-2,
    #btn-4:checked ~ #arrow-3{ /* #btn-1 always goes to last arrow */
        left:-3%; display:block; -webkit-transform:scale(-1,1); -ms-transform:scale(-1,1); transform:scale(-1,1)
    }

}

.icon {
    text-align: center;
    text-indent: -1px;
}
.icon i{
    text-align: center;
    text-indent: -1px;
}
.icon:hover {
color: #E5B1D1;
}

.banner-social-buttons .btn-default {
    background-color: transparent;
    border: 1px solid #e5b1d1;
    color: #fff;
    margin: 5px;
}

video { 
    z-index: -100;
    position: fixed;
    top:50%;
    left:50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
    background: url(../vid/clouds.png) no-repeat bottom center scroll;
    background-attachment: fixed;
    background-color: #000;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    background-size: cover;
    -o-background-size: cover;
    display: table-cell;
    vertical-align: middle;
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}

.stopfade { 
   opacity: .5;
}

@media screen and (max-device-width: 800px) {
    #bgvid { display: none; }
    height: 100%;
    padding: 0;
}

.bigger_blacker {
    background-color: black;
}



body {
    overflow-x: hidden;
}
#portfolio .portfolio-item {
    right: 0;
    margin: 0 0 15px;
}

#portfolio .portfolio-item .portfolio-link {
    display: block;
    position: relative;
    margin: 0 auto;
    max-width: 260px;
    border-radius: 50%;
    overflow: hidden;
}
#portfolio .portfolio-item .portfolio-link:active,
#portfolio .portfolio-item .portfolio-link:focus{
    outline: 0;
}
#portfolio .portfolio-item .portfolio-link:active .shadow{
    background: rgba(229,177,209,0.9);
}

#portfolio .portfolio-item .portfolio-link .caption {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(217,248,237,0.9);
    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
    border-radius: 50%;
    transform: scale(0);
}

#portfolio .portfolio-item .portfolio-link .shadow {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: 
        inset 0 0 0 16px rgba(244,223,232,0.6),
        0 1px 2px rgba(0,0,0,0.1);

    -webkit-transition: all ease .5s;
    -moz-transition: all ease .5s;
    transition: all ease .5s;
}

#portfolio .portfolio-item .portfolio-link:hover .shadow {
    box-shadow: 
        inset 0 0 0 1px rgba(244,223,232,0.1),
        0 1px 2px rgba(0,0,0,0.1);
}

#portfolio .portfolio-item .portfolio-link:hover .caption {
    opacity: 1;
    transform: scale(1);
}


#portfolio .portfolio-item .portfolio-link .caption .caption-content {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 20px;
    margin-top: -12px;
    text-align: center;
    font-size: 20px;
    color: #fff;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content i {
    margin-top: -12px;
}

#portfolio .portfolio-item .portfolio-link .caption .caption-content h3,
#portfolio .portfolio-item .portfolio-link .caption .caption-content h4 {
    margin: 0;
}

#portfolio * {
    z-index: 2;
}

@media(min-width:767px) {
    #portfolio .portfolio-item {

        margin: 0 0 15px;
    }
}



.portfolio-modal .modal-content {
    color:#e8bccf;
    padding: 100px 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    text-align: center;
    background-clip: border-box;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.portfolio-modal .modal-content i {
    font-size: 40px !important;
}

.portfolio-modal .modal-content .btn i {
    font-size: 20px !important;
}
.portfolio-modal .modal-content a {
    color: #A1D8C4;
    transition: all 0.2s ease-in-out 0s;
}
.portfolio-modal .modal-content a:hover, .portfolio-modal .modal-content a:focus {
    color: #1d9b6c;
    text-decoration: none;
}
.portfolio-modal .modal-content h2 {
    color:#A1D8C4;
    margin: 0;
    font-size: 3em;
}
.portfolio-modal .modal-content .btn {
    border-radius: 0;
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 400;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

.portfolio-modal .modal-content .btn-default {
    border: 1px solid #A1D8C4;
    color: #A1D8C4;
    background-color: transparent;
}

.portfolio-modal .modal-content .btn-default:hover,
.portfolio-modal .modal-content .btn-default:focus {
    border: 1px solid #A1D8C4;
    outline: 0;
    color: #fff;
    background-color: #A1D8C4;
}

.portfolio-modal .modal-content img {
    margin-bottom: 30px;
}

.portfolio-modal .modal-content .item-details {
    margin: 30px 0;
}

.portfolio-modal .close-modal {
    position: fixed;
    top: 25px;
    right: 25px;
    width: 75px;
    height: 75px;
    background-color: transparent;
    cursor: pointer;
}

.portfolio-modal .close-modal:hover {
    opacity: .3;
}

.portfolio-modal .close-modal .lr {
    z-index: 1051;
    width: 1px;
    height: 75px;
    margin-left: 35px;
    background-color: #2c3e50;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.portfolio-modal .close-modal .lr .rl {
    z-index: 1052;
    width: 1px;
    height: 75px;
    background-color: #2c3e50;
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.portfolio-modal .modal-backdrop {
    display: none;
    opacity: 0;
}