@charset "UTF-8";


/* 1.Basic Styling
-------------------------------------------------------------- */
html, body{
    overflow-x: hidden;
    -webkit-font-smoothing:antialiased;
}

body {
    font-family: "Brown-Light",Helvetica,Arial,sans-serif;
    font-size: 15px;
    font-weight: 400; 
    line-height: 1.628571;   
    color: #666666;
    background: #fff;
    width:100%;
    height:100%;    
    margin:0;
    padding:0;
}

a{
    outline: none;
    opacity: 0.9;
    -webkit-transition: background 0.3s false;
    -moz-transition: background 0.3s false false;
    -o-transition: background 0.3s false false;
    transition: background 0.3s;
}
a:hover,a:focus {    
    text-decoration: none;
    outline: none;
    opacity: 1;    
}

h1, h2, h3, h4, h5, h6 {    
    font-family: 'Brown-Light',Arial,sans-serif;    
    color: #333;
    text-rendering: optimizelegibility;
    line-height: 1.2em;
}
.text-light{
    color: #fff;
}

p{  
    font-family: "Brown-Light",Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.628571;   
    color: #666666;
    text-rendering: optimizelegibility;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    -o-hyphens: auto;
    hyphens: auto;
}
strong{    
    font-weight: 800;
}
strong.colored{
    color: #029ece;
    font-weight: 800;
}
input[type=text], input[type=url], input[type=tel], input[type=number], input[type=email], textarea {
    width: 100%;
    font-family: "Brown-Light",Helvetica,Arial,sans-serif;
    height: 40px;
    display: block;
    font-size: 15px;
    padding-left: 6px;
    border-radius: 0;
    margin: 0 10px 10px 0;
    -webkit-transition: all .1s ease-in-out;
    -moz-transition: all .1s ease-in-out;
    -ms-transition: all .1s ease-in-out;
    -o-transition: all .1s ease-in-out;
    transition: all .1s ease-in-out;
}

::selection {color:#fff;background-color: #029ece;}
::-moz-selection {color:#fff;background-color: #029ece;}

/*Pre Loader*/
#pre-loader {
    position:fixed;
    display: table;
    width: 100%;
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: hidden;
    vertical-align: middle;
    background: #fff;
    z-index:99999;
}
.pre-loader-container {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    z-index: 3;
    text-align:center;
}
.back-logo {
    z-index:-1;
    color: #F4F4F4;
    position: absolute;
    top:40%;
    left:45%;
    font-size: 50px;
}

.loader {
  position: absolute;
  left: 50%;
  top: 70%;
  margin: -20px 0 0 -20px;
  background-color: white;
  border-radius: 50%;
  box-shadow: 0 0 0 6.66667px #141414;
  width: 40px;
  height: 40px;
}
.loader:before, .loader:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  z-index: 2;
  width: 42px;
  height: 42px;
}
.loader:before {
  background-color: #141414;
  -webkit-animation: expand 1.6s linear infinite both;
  -moz-animation: expand 1.6s linear infinite both;
  animation: expand 1.6s linear infinite both;
}
.loader:after {
  background-color: white;
  -webkit-animation: expand 1.6s linear 0.8s infinite both;
  -moz-animation: expand 1.6s linear 0.8s infinite both;
  animation: expand 1.6s linear 0.8s infinite both;
}

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

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

  100% {
    z-index: 1;
  }
}
@-moz-keyframes expand {
  0% {
    -moz-transform: scale(0);
  }

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

  100% {
    z-index: 1;
  }
}
@-o-keyframes expand {
  0% {
    -o-transform: scale(0);
  }

  50% {
    -o-transform: scale(1);
  }

  100% {
    z-index: 1;
  }
}
@keyframes expand {
  0% {
    transform: scale(0);
  }

  50% {
    transform: scale(1);
  }

  100% {
    z-index: 1;
  }
}

/* 2. Content
-------------------------------------------------------------- */
.container{
    background: transparent;
}
.container-fluid{
    margin-right: auto;
    margin-left: auto;
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
    clear: both;
}
/*image mask*/
.image-mask{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/patterns/image-mask.png) center center repeat;
    background-color: rgba(0,0,0,0.2);
    z-index: 2;
}

#main-wrapper{
    background-image: url(../images/patterns/dots-dark.png);
}
.section{
    padding-top: 100px;
}
.section-title {
    font-size: 3em;
    font-family: "Raleway",Arial,sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 30px 0 0px 0;
    text-transform: uppercase;
}
.section-title-border{
    border: 4px solid #333;    
    padding: 5px 20px;    
}
.section-info{  
    padding: 10px 0px 80px 0px;
}
.section-info h3{
    font-family: "Brown-Light",Arial,sans-serif;
    font-size: 1.5em;    
    margin: 12px 0px;
    line-height: 36px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
}
.section-info p{
    font-family: "Brown-Light",Helvetica,Arial,sans-serif;
    font-size: 1.5em;
    font-weight: 400;
    max-width: 80rem;
    margin: 1em auto 0.25em auto;    
    letter-spacing: 0;
    line-height: 1.5em;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.04);    
}
.text-center{
    text-align: center;
}
/*hr*/
.hr{
    margin: 0;
    padding: 0;
    font-size: 0;    
    text-align: center;
}
ul.hr li {
    display: inline-block;        
}
ul.hr li.hr-line {
    width: 350px;
    height: 4px;
    margin-bottom: 6px;
    border-bottom: 1px solid #a9a9a9;
    border-top: 1px solid #a9a9a9;
}
ul.hr li.hr-icon {
    width: 10%;
    color: #a9a9a9;
    font-size: 28px;
    line-height: 1.5;
}
.circle-point {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    display: block;
    width: 12px;
    height: 12px;
    position: absolute;
    right: -7px;
    top: -7px;
    border: 1px solid #bfbfbf;
    background: #fff;
    z-index: 5;
}


/* 3. Logo
-------------------------------------------------------------- */
.logo-wrapper{
    position: fixed;
    z-index: 1000;
    left: 40px;
}
.logo{
    font-family: "Brown-Light",Arial,sans-serif;
    font-weight: 200;
    color: #fff;
    margin-top: 18px;
}
a .logo:hover{
    text-decoration: none;
}
.logo img{
    margin-top: -10px;    
}

/* 4. Menu
-------------------------------------------------------------- */
.navbar {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99999;
    background: rgba(2, 158, 206, 0.95);
}

.navmenu-open{
    position: fixed;
    z-index: 1000;
    top: 20px;
    right: 40px;
}
#trigger-navbar:hover{
    text-decoration: none;
}
#trigger-navbar span{
    padding: 2px;
    background: rgba(0,0,0,0.2);
    font-size: 3em;    
    color: #FFF;
}

/* Overlay closing cross */
.navbar .navbar-close {     
    position: absolute;
    right: 40px;
    top: 10px;
    overflow: hidden;
    text-indent: 200%;
    font-size: 3em;
    color: #FFF;
    outline: none;
    z-index: 100;
}
.navbar .navbar-close:hover{
    text-decoration: none;
}
.navbar .nav-logo {
    top: 0px;
    position: relative;
    padding-top: 0px;
    text-align: center;
}
.navbar nav {   
    position: relative; 
    top: 40%;
    text-align: center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
}

.navbar ul li {
    display: block;
    height: 20%;
    height: calc(100% / 5);
    min-height: 54px;
}

.navbar ul li a {
    font-family: "Raleway",Arial,sans-serif;
    font-weight: 800;
    display: block;
    text-transform: uppercase;  
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

.navbar ul li a .primary {    
    font-size: 35px;
    line-height: 22px;
    color: rgba(255,255,255,0.8);        
    padding-top: 20px;    
}
.navbar ul li a .secondary {
    font-size: 15px;
    visibility:hidden;
    color: rgba(255,255,255,0.6);    
    margin-bottom: 5px;
    letter-spacing: 2px;    
}
.navbar ul li a .primary, .navbar ul li a .secondary {
    display: block;
}
.navbar ul li a:hover,
.navbar ul li a:focus {
    color: #fff;
    text-decoration: none;    
}

.navbar ul li a:hover .secondary{
    color: #fff;
    visibility: visible;
}
/* Effects */
.navbar-hugeinc {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}

.navbar-hugeinc.open {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.navbar-hugeinc nav {
    -webkit-perspective: 1200px;
    perspective: 1200px;
}

.navbar-hugeinc nav ul {
    opacity: 0.4;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}

.navbar-hugeinc.open nav ul {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.navbar-hugeinc.close nav ul {
    -webkit-transform: translateY(25%) rotateX(-35deg);
    transform: translateY(25%) rotateX(-35deg);
}
.navbar footer .nav-footer{
    position: fixed;
    bottom: 20px;
    right: 20px;
    text-align: right;
}
.navbar footer .nav-footer ul{
    list-style: none;
}
.navbar footer .nav-footer ul li{
    display: inline-block;
    display: inline-block;
    min-height: 0px;
    padding-bottom: 10px;
}
.navbar footer .nav-footer ul li a span{        
    text-decoration: none;
    background: rgba(255,255,255,0.6);
    border-radius: 50%;  
    padding: 6px;
}
.navbar footer .nav-footer ul li a:hover span{        
    color: #029ece;
    background-color: #fff;
    text-decoration: none;    
    border-radius: 50%;  
    padding: 6px;
}
.navbar footer .nav-footer-copy{
    font-size: 12px;
    color: #fff;
}


.navbar .heading-sep {
    width: 25px;
    height: 2px;
    margin: 2px auto !important;
    background: #ffffff;
}



.overly-mask{
    background: url(../images/patterns/overly-mask.png) center center repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
}
.home-text{
    color: #fff;
    position:relative;
    text-align: center;
    width: 100%;
    z-index: -1;
    
}

.home-text h3{    
    font-family: "Brown-Light",Arial,sans-serif;
    font-size: 4em;
    letter-spacing: 2px;    
    color: #fff;
    font-weight: 400;
    line-height: 1;    
    text-transform: uppercase;
}
.home-text h2{
    font-family: "Brown-Light",Arial,sans-serif;
    font-size: 4em;
    letter-spacing: 2px;
    color: #fff;
    font-weight: 300;
    line-height: 1;
    text-transform: uppercase;
}
.home-carousel-caption p{
    font-family: "Brown-Light",Arial,sans-serif;
    width: 100%;
    font-size: 2em;
    color: #fff;
    letter-spacing: 2px;
    text-align:center;
    text-transform: uppercase;    
}
.home-carousel-caption hr{
    border-top: 4px solid #fff;
    margin: 0 auto;
    width: 25%;
}
#home-text-slider .owl-controls{
    display: none !important;
}

#home div.scroll
{
    position:absolute;
    bottom:15px;
    left:50%;
    z-index: 100;
    margin-left:-24.5px
}
#home div.scroll,.footer-text span {
    -webkit-animation: fadein 1s ease-in alternate infinite;
    -moz-animation: fadein 1s ease-in alternate infinite;
    animation: fadein 1s ease-in alternate infinite;
}

@-webkit-keyframes fadein
{
    0%
    {
        opacity:.3
    }
    100%,90%
    {
        opacity:1
    }
}

@-moz-keyframes fadein
{
    0%
    {
        opacity:.3
    }
    100%,90%
    {
        opacity:1
    }
}
@keyframes fadein
{
    0%
    {
        opacity:.3
    }
    100%,90%
    {
        opacity:1
    }
}
#home div.scroll span.scroll-down
{
    color:#1c1c1b;
    display:block;
    font-size:42px;
    width:16px;
    height:30px;
    border:2px solid #1c1c1b;
    position:relative;
    margin:0 auto 5px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px
}
#home div.scroll span.scroll-down:before
{
    content:'';
    display:block;
    position:absolute;
    top:8px;
    width:2px;
    height:4px;
    background:#1c1c1b;
    left:50%;
    margin-left:-1px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    border-radius:2px
}
#home div.scroll .scroll-text
{
    text-transform:uppercase;
    font-weight:400;
    font-size:12px;
    text-align:center;
    float:left;
    color:#1c1c1b;
    letter-spacing:1px
}


/* 17. Separator - Get Connected
-------------------------------------------------------------- */
#address{
    background-color: #029ECE;
    padding: 58px 0px 80px 0;
   
}
.lts-talk{
    color: #ffffff;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.contact-no{
    color: #fff;
	font-weight: 300;
    letter-spacing: 2px;
}
.full-address,.email-add a{
    color: #fff;
}
.contact-no,.email-add,.full-address{
    margin-bottom: 5px;
}
.email-add{
    margin-top: 0px;
}


/* 18. Contact Form
-------------------------------------------------------------- */
#comments {    
    height: 100px;
    margin-bottom: 25px;
    border-bottom: 1px solid #333;
    resize:none;
    background: transparent;

}
#contactform input[type=text]{
    padding-left: 20px;
    background: transparent;
}
#contactform input#email{
    width: 96%;
    background: transparent;
    margin-right:4%;
}
#contactform input#phone{
    width: 96%;
    background: transparent;
    margin-left:4%;
}
#contactform input[type=text]:focus,#contactform input#email:focus,#contactform input#phone:focus,#comments:focus{
    background-color: #fff;    
}
.form-control{
    border: none;
    border-bottom: 1px solid #333;
}

/* 20. Footer Section
-------------------------------------------------------------- */
#footer{
    background-color: #333333;
    padding: 5px;
}
#footer .move-up{
    text-align: right;
    margin-top: 10px;
    margin-right:6px;
}
#footer .move-up a{
    color: #fff;
    font-size: 22px;
    text-decoration: none;
	border: 2px solid #fff;
    padding: 2px;
    -webkit-transition: background 0.3s false;
    -moz-transition: background 0.3s false false;
    -o-transition: background 0.3s false false;
    transition: background 0.3s;
    float: right;
}
#footer .move-up a:hover{
    background: rgba(255,255,255,0.3);
    border-color: #fff;
}
.footer-logo h3{
    margin-top: 11px;
    margin-bottom: 11px;
    font-family: "Raleway",Arial,sans-serif;
}
.footer-text a{
    color: #fff;
}
.footer-logo,.footer-text{
    color: #fff;
    text-align: center;
    font-size: 12px;
}


img.praxis-logo{max-height: 265px;}
 .schrift-praxis{font-size: 1.2em!important;color: #f39200!important; font-family:  Helvetica, Arial, sans-serif!important ; margin-top: 2em;}
 
/* 22. Media Queries
-------------------------------------------------------------- */

/* Menu Media Queries*/ 
@media screen and (max-height: 30.5em) {
    .navbar nav {
        height: 70%;
        font-size: 34px;
    }
    .navbar ul li {
        min-height: 34px;
        height: 15%;
    }
}

/* Portfolio Media Queries*/ 
@media screen and (max-width: 60em) {    
    .grid li {
        width: 33.3%;
    }
 
    .slideshow li {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        margin: 0;
    }
 
    .slideshow li figure img {
        width: auto;
        margin: 0 auto;
        max-width: 100%;
    }
 
    .slideshow nav span,
    .slideshow nav span.nav-close {
        font-size: 1.8em;
        padding: 0.3em;
        color: #31373a;
    }
    .slideshow nav span.nav-close {
        font-size: 1.8em;
        padding: 0.3em;
        top: 0;
        left: 0;
        padding: 0.5em 1em;
        color: #31373a;
    } 
    .info-keys {
        display: none;
    }
 
}
 
@media screen and (max-width: 35em) {
    .grid li {
        width: 50%;
    }
}
 
 
 
 
@media screen and (max-width: 24em) {
    .grid li {
        width: 100%;
    }
}


/* Media Queries for Standard Devices
 ---------------------------------------------*/
/* Large screens ----------- */
@media only screen and (min-width : 1824px) {
    .navbar ul li a .primary {    
        font-size: 60px;
        line-height: 62px;
    }
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {    


.home-text{padding-left: 0px;}
    h2{
        font-size: 2.8em;
    }
    h3{
        font-size: 22px;
    }
    p{
        font-size: 1.3em;
    }
    
    
    .navbar nav{
        font-size: 34px;
    }
    .navbar ul li a .primary {    
        font-size: 30px;    
        line-height: 18px;
        padding-top: 18px;
        padding-bottom: 5px;
    }
    .navbar ul li .secondary{
        color: #fff;
        font-size: 15px;
        display: block;
        visibility: hidden;
        line-height: 15px;
    }
    .navbar ul li a:hover .secondary{
        color: #fff;
        visibility: visible;
        font-size: 15px;
    }
    h2.section-title,h2.single-title,h2.work-title,.services-info h2{
        font-size: 2.5em;
    }    
    .grid-gallery figcaption h3{
        font-size: 1em;
    }
    .home-text h2{
        font-size: 6em;
    }
    .instagram-caption{    
        font-size: 14px;    
    }
    .section-info h3{
        font-size: 20px;
        padding: 12px;
    }
    .service-list .service-title {
        font-size: 1.6em;
    }
    .section-info p{
        font-size: 18px;
        padding: 12px;   
    }
    .btn-video-wr,.btn-transparent{
        padding: 12px 30px;
        font-size: 18px;
    }
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
     .schrift-praxis{font-size: .9em!important;color: #f39200!important; font-family:  Helvetica, Arial, sans-serif !important; margin: 0 5%!important;
width:90%!important;}
    img.praxis-logo{max-height: 125px;margin-top: -4em;}
   .home-text{padding-left: 0px;}
    h2{
        font-size: 2.8em;
    }
    h3{
        font-size: 22px;
    }
    p{
        font-size: 1.3em;
    }
        h1.logo {
        font-size: 30px;
    }
    .logo img {
        margin-top: -10px;
        width: 30px;
    }
    .navmenu-open,.navbar .navbar-close{
        top: 10px;
        right: 10px;
    }
    .navbar nav{
        font-size: 24px;
    }
    h2.section-title,h2.single-title,h2.work-title,.services-info h2{
        font-size: 20px;
    }
    .home-text h2{
        font-size: 3em;
    }
    .home-text h3{
        font-size: 2.6em;
    }
    .home-carousel-caption p{
        font-size: 1.2em;
    }
    #testimonial blockquote{
        font-size: 1.2em;   
    }
    .section-info h3{
        font-size: 18px;
        padding: 12px;
    }
    .section-info p{
        font-size: 16px;
        padding: 12px;   
    }
    .service-list .service-title {
        font-size: 1.2em;
    }
    .btn-video-wr,.btn-transparent{
        padding: 8px 20px;
        font-size: 16px;
    }
    .navbar ul li a .primary {
        font-family: "Raleway",Arial,sans-serif;
        font-size: 22px;
        color: rgba(255,255,255,0.8);
        line-height: 22px;
        padding-top: 5px;
    }
    .navbar ul li a .secondary {
        font-size: 12px;
        color: rgba(255,255,255,0.6);        
        letter-spacing: 2px;    
    }
    .slideshow nav span.nav-prev,.slideshow nav span.nav-next{
        color: #333;
    }
    #work .work-carousel-caption{
        text-align: center;
        right: 0;
        padding: 20px;
    }
    #work .work-content, #work .work-list,#work .work-carousel-caption a{
        display: none;
    }
    #contactform{
        padding: 10px;
    }
    #contactform input#email{
        width: 100%;
        margin-right:0%;
    }
    #contactform input#phone{
        width: 100%;
        margin-left:0%;
    }

    #contactform #comments{
        margin: 0px 0px 10px 0px;
    }
    /*hide theme customizer in mobile*/
    #theme-customizer{
        display: none;
    }
}

/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
    h1.logo {
        font-size: 30px;
    }
    .logo img {
        margin-top: -10px;
        width: 30px;
    }
}