/* ==========================================================================

Colors: 	  #1cb2b0   teal
			  #242830   black
			  #ef7a4b   orange
			  #ca293e   red
			  #2d122b   aubergine
			  #8c9398   grey

Typography:   font-family: "adelle", serif;
			  font-family: "brandon-grotesque", sans-serif;
			  font-family: "open-sans", sans-serif;

========================================================================== */

video {  
   width:100%; 
   max-width:900px; 
   height:auto; 
}   
/* ------------------------------------------
 Nav Icons mobile
--------------------------------------------- */

.nav-collapse a span {
    -webkit-transition: color .2s;
    -moz-transition: color .2s;
    -o-transition: color .2s;
    transition: color .2s;
    display: none;
}

 @media screen and (max-width:40em) {
 
 #headernav {
  background:#fff !important; z-index: 2000;
  position: absolute !important; /* -- fix for mobile nav overflow hidden --*/
  }
 

/* hide main hover effect  */
.nav-collapse a::before,
.nav-collapse a::after {
display: none !important;
}

  .nav-collapse a {          
	text-align: center;
    border: solid #f3f3f3;
    border-width: 0 1px 1px 0;
    padding: 1% !important;
    white-space: nowrap;
    display: block;
    float: left;
    color: ;
    font-size: 12px !important;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    -webkit-transition: background .2s ease;
    -moz-transition: background .2s ease;
    -o-transition: background .2s ease;
    transition: background .2s ease;

}

    .nav-collapse a:hover {
    color: #5b5957;
    background: #f6f6f6;
}
.nav-collapse a:hover span {
    color: #8ec9d2;
}
.nav-collapse a span {
    color: #cfd0d0;
    display: block;
    font-size: 25px;
    line-height: 16px;
    margin-top: 15px;
    width: 100%;}
    }
 

/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

.nav-collapse li {
  width: 100%;
  display: block;
}

.js .nav-collapse {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  overflow:  hidden;
  zoom: 1;
}

.nav-collapse.opened {
  max-height: 9999px;
}

.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 40em) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  FIXED HEADER
--------------------------------------------- */
@font-face {
    font-family: "rotissansserifbold";
          src:url("../fonts/rotis-webfont.eot?#iefix") format("embedded-opentype"),
         url("../fonts/Rotis.ttf") format("truetype"),
         url("../fonts/rotis-webfont.woff") format("woff"),
         url("../fonts/rotis-webfont.svg#rotissansserifbold") format("svg");
    font-weight: normal;
    font-style: normal;

} 
body{
font-family: "rotissansserifbold";
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
			@font-face {
    		font-family: "rotissansserifbold";
    		src: url("../fonts/rotis-webfont.svg") format("svg"),
    		url("../fonts/Rotis.ttf") format("truetype"),
    		url("../fonts/rotis-webfont.woff") format("woff"),
    		url("../fonts/rotis-webfont.eot") format("embedded-opentype");
        font-weight: normal;
    		font-style: normal;
		}
    }
    
  

#headernav {
  background:rgba(255,255,255, 0.9) ;
  background: #fff;
    box-shadow: 0 2px 2px -2px rgba(0,0,0,0.2);
  position: fixed;
  z-index: 10;
  width: 100%;
  left: 0;
  top: 0;
  border-bottom:5px solid #ff0000;
}

.logo {
-webkit-tap-highlight-color: rgba(0,0,0,0);
padding: 20px;
float: left;
text-transform: uppercase;
letter-spacing: 3px;
font-weight: 500;
font-size: 14px;
vertical-align: middle;
/*font-family: "brandon-grotesque", sans-serif;*/
color: #242830;
}

.logo span {
font-size: 32px;
vertical-align: middle;
padding-right: 3px;	
color: ;
}



/* link hover effect */
.nav-collapse a::before,
.nav-collapse a::after {
display: inline-block;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.2s;
-moz-transition: -moz-transform 0.3s, opacity 0.2s;
transition: transform 0.3s, opacity 0.2s;
}

.nav-collapse a::before {
margin-right: 10px;
content: '[';
-webkit-transform: translateX(20px);
-moz-transform: translateX(20px);
transform: translateX(20px);
}

.nav-collapse a::after {
margin-left: 10px;
content: ']';
-webkit-transform: translateX(-20px);
-moz-transform: translateX(-20px);
transform: translateX(-20px);
}

.nav-collapse a:hover::before,
.nav-collapse a:hover::after,
.nav-collapse a:focus::before,
.nav-collapse a:focus::after {
opacity: 1;
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
transform: translateX(0px);
}



/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
}

.nav-collapse,
.nav-collapse * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.nav-collapse,
.nav-collapse ul {
  list-style: none;
  width: 100%;
  float: left;
 margin-right: 2%;
;
}

@media screen and (min-width: 40em) {
  .nav-collapse {
    float: right;
    width: auto;
    margin-top:31px;
  }
}

.nav-collapse li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 40em) {
  .nav-collapse li {
    width: auto;
  }
}

.nav-collapse a  {
	letter-spacing: 1px;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  text-decoration: none;
  background: ;
  color: #242830;
  width: 100%;
  float: left;
  /*font-family: "adelle", sans-serif;*/
  font-size: 14px;
  line-height: 40px;
}

.nav-collapse a:active,
.nav-collapse .active a {
  color: #ff0000; 
}

.nav-collapse a.lang {
-webkit-tap-highlight-color: rgba(0,0,0,0);
letter-spacing: 2px;
text-decoration: none;
font-size: 10px;
line-height: 55px;
/*font-family: "brandon-grotesque", sans-serif;*/
font-weight: 700;
color: #8c9398;
padding: 0.7em 0.6em;
}

.nav-collapse a.lang:hover {
color: #ff0000;
}

.nav-collapse a.lang::before {
margin-right: 0;
content: '';
}

.nav-collapse a.lang::after {
margin-left: 0;
content: '';
}


@media screen and (min-width: 40em) {
  .nav-collapse a {
    padding: 1.02em 1.4em;
    text-align: center;
    border-top: 0;
    float: left;
    margin: 0;
  }
}

.nav-collapse ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

@media screen and (min-width: 40em) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES (hamburger/close icon) 
--------------------------------------------- */
  @font-face {
  font-family: "responsivenav";
  src:url("../icons/responsivenav.eot");
  src:url("../icons/responsivenav.eot?#iefix") format("embedded-opentype"),
    url("../icons/responsivenav.ttf") format("truetype"),
    url("../icons/responsivenav.woff") format("woff"),
    url("../icons/responsivenav.svg#responsivenav") format("svg");
  font-weight: normal;
  font-style: normal;
}

.nav-toggle {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
  text-indent: -300px;
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 55px;
  float: right;
}

.nav-toggle:before {
  color: #242830; /* Edit this to change the icon color */
  font: normal 21px/55px "responsivenav"; /* Edit font-size (28px) to change the icon size */
  text-transform: none;
  text-align: center;
  position: absolute;
  content: "\2261"; /* Hamburger icon */
  text-indent: 0;
  speak: none;
  width: 100%;
  left: 0;
  top: 4px;
}

.nav-toggle.active:before {
  font-size: 22px;
  content: "\78"; /* Close icon */
}




/* ==========================================================================
Icon Fonts
========================================================================== */

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?') format('eot'), 
    url('../fonts/icomoon.woff') format('woff'), 
    url('../fonts/icomoon.ttf') format('truetype'),
    url('../fonts/icomoon.svg') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], 
[class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-genomedic_icon:before {
	content: "\e608";
}

.icon-detecmed-icon:before {
	content: "\e600";
}
.icon-snowflake-icon:before {
	content: "\e606";
}
.icon-cplus-icon:before {
	content: "\e602";
}
.icon-cplus-icon:before {
	content: "\e900";
}
.icon-genevita-icon:before {
	content: "\e603";
}
.icon-edel-icon:before {
	content: "\e604";
}
.icon-scu-icon:before {
	content: "\e605";
}
.icon-navclose:before {
	content: "\78";
}
.icon-navhamburger:before {
	content: "\2261";
}
.icon-downchevron:before {
	content: "\e601";
}

/* ==========================================================================

Global Styles

========================================================================== */

::selection {
  /*background: #1cb2b0;*/ 
  background: #cdcdcd;
  color: #fff;
}

a {
    color: #353535;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
a:hover, a:focus {
    /*color: #0DB2B0;*/
    color:#ff0000;
    text-decoration: none;
}
p {
    color: #8c9398;
    word-spacing: 1px;
    line-height: 25px;
    font-size: 14px;
}
h2 {
    font-size: 15px;
    color: #353535;
    text-transform: uppercase;
    font-weight: bold;
}
.about h2 {
    font-size: 18px;
    color: #353535;
    text-transform: uppercase;
    font-weight: bold;
    text-align:left;
    padding:10px;
}
/*.section-padding1 {
    padding: 50px 0 100px
}
*/
.section-padding1 {
    /*padding: 23px 0 100px*/
}

.section-padding {
    padding: 90px 0 100px
}
.dark-bg {
    background: #f3f5f8;
}
.light-bg {
    background-color: #fff;
}
.dark-box {
    background: #f3f5f8;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
}
.light-box {
    background-color: #fff;
    -webkit-box-shadow: 0px 3px 0px 0px #f0f2f4;
    -moz-box-shadow: 0px 3px 0px 0px #f0f2f4;
    box-shadow: 0px 3px 0px 0px #f0f2f4;
    padding: 20px 0;
}
.light-box:hover, .light-box:focus {
    -webkit-box-shadow: 0px 3px 0px 0px #0DB2B0;
    -moz-box-shadow: 0px 3px 0px 0px #0DB2B0;
    box-shadow: 0px 3px 0px 0px #0DB2B0;
}
.box-hover {
    transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
}
.box-hover:hover, .box-hover:focus {
    transform: translate(0, -15px);
    -webkit-transform: translate(0, -15px);
    -ms-transform: translate(0, -15px);
}
.wrapper {
    /*height: 650px;*/
    height:990px;
}
.nopadding {
    padding: 0;
}
.inner {
    padding-top: 95px;
}

/* ==========================================================================
Waypoints
========================================================================== */

.wp1, .wp2, .wp3, .wp4, .wp5, .wp6 {
    visibility: hidden;
}
.bounceInLeft, .bounceInRight, .fadeInUp, .fadeInUpDelay, .fadeInDown, .fadeInUpD, .fadeInLeft, .fadeInRight {
    visibility: visible;
}
.delay-05s {
    animation-delay: 0.5s;
    -webkit-animation-delay: 0.5s;
}
.delay-1s {
    animation-delay: 1s;
    -webkit-animation-delay: 1s;
}

.delay-1.5s {
    animation-delay: 1.5s;
    -webkit-animation-delay: 1.5s;
}

.delay-2s {
    animation-delay: 2s;
    -webkit-animation-delay: 2s;
}





/* ==========================================================================
Services
========================================================================== */

#cplusfeatures {
/*background: #e3e2e3;*/
/*overflow: hidden;*/
}


#cplusfeatures .light-box {
    background-color: #e3e2e3;
    -webkit-box-shadow: 0px 3px 0px 0px transparent;
    -moz-box-shadow: 0px 3px 0px 0px transparent;
    box-shadow: 0px 3px 0px 0px transparent;
    padding: 20px 0;
}


#cplusfeatures .light-box:hover, .light-box:focus {
    -webkit-box-shadow: 0px 3px 0px 0px #921414;
    -moz-box-shadow: 0px 3px 0px 0px #921414;
    box-shadow: 0px 3px 0px 0px #921414;
}


#cplusfeatures h1 {
color: #ff0000;
/*font-family: "adelle", serif;*/
font-weight: 400;
font-size: 28px;
letter-spacing: 1px;
}
#cplusfeatures h2 {
/*font-family: "brandon-grotesque", sans-serif;*/
font-size: 14px;
font-weight: 500;
letter-spacing: 2px;
color: #ff0000;
}

#cplusfeatures p {
/*font-family: "open-sans", sans-serif;*/
font-weight: 400;
font-size: 16px;

}

.services-wrapper {/*margin: 70px 0 0;*/}

.icon img {
/*width: 175px;*/
margin-top: -9px;
}
										
.icon {
/*height: 175px;*/
height: 125px;
width: 175px;
/*line-height: 175px;*/
line-height: 150px;
max-width: 100%;
background: transparent;
border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
display: block;
color: #fff;
font-size: 55px;
text-align: center;
vertical-align: middle;
position: relative;
margin: 0 auto 50px;
}

.icon:after {
pointer-events: none;
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
content: '';
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

.icon:before {
speak: none;
}

/* = .icon:hover {

transition: all 500ms ease-in-out;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
opacity: 0.8;} = */

/* ==========================================================================
Portfolio
========================================================================== */
#portfolio {
background: #F3F5F8; 
padding-bottom: 0px; 
}

.portfolioheader1 {
background: #fff;
padding-top:23px;
padding-bottom:20px;
/*padding: 23px 0;*/
/*padding: 40px 0;*/
}

.portfolioheader {
/*background: #0DB2B0;*/
/*padding: 20px 0;*/
padding-top: 20px;
padding-bottom: 30px;
background-image:url(../img/imgstrap.png);
}

.portfolioheader h1 {
color: #ff0000;
font-size: 22px;
text-transform: uppercase;
/*letter-spacing: 4px;*/
/*font-family: "", sans-serif;*/
background-color:#fff;
padding:35px;
 filter: alpha(opacity=60);
  /* IE */
  -moz-opacity: 0.6;
  /* Mozilla */
  opacity: 0.6;
font-weight: 300;
}

.portfolioheader p {
color: #fff;
font-size: 16px;
letter-spacing: 2px;
/*font-family: "adelle", sans-serif;*/
font-weight: 400;
color: #a3e0df;
}

/***********************/
.bulletbig{font-size:40px;letter-spacing: 12px;}
/***********************/
/*---------------*/
/***** Grid Effects *****/
/*---------------*/

.grid {
position: relative;
/*margin: 40px auto;*/
/*max-width: 1000px;*/
list-style: none;
text-align: center;
}

/* Common style */
.grid figure {
position: relative;
float: left;
overflow: hidden;
margin: 10px 1%;
/*min-width: 191px;
max-width: 480px;*/
height: 93px;
/*width: 48%;*/
width:23%;
background: #fff;
text-align: center;
cursor: pointer;
}

.grid figure img {
position: relative;
display: block;
}

.grid figure figcaption {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}

.grid figure figcaption::before,
.grid figure figcaption::after {
pointer-events: none;
}

.grid figure figcaption,
.grid figure figcaption > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.grid figure figcaption > a {
z-index: 1000;
text-indent: 200%;
white-space: nowrap;
font-size: 0;
opacity: 0;
}

.grid figure h2,
.grid figure p
{
margin: 0;
}

.grid figure p {
letter-spacing: 1px;
font-size: 68.5%;
}

@media screen and (max-width: 50em) {
.content {
padding: 0 10px;
text-align: center;
}

.grid figure {
display: inline-block;
float: none;
margin: 10px auto;
width: 85%;		
}}

figure.effect-cplusfolio {background: none;}

figure.effect-cpluservice img {
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
-webkit-transform: scale(1);
transform: scale(1);
/*max-width: 340px;*/ 
/*max-height: 320px;*/
}

figure.effect-cpluservice:hover img {
opacity: 0.7;

/*-webkit-transform: scale(2.1);
transform: scale(2.1);*/
}

figure.effect-cpluservice figcaption {
padding: 3em; 
}

figure.effect-cpluservice figcaption::before {
position: absolute;
top: 30px;
right: 30px;
bottom: 30px;
left: 30px;
/*border: 2px solid #fff;*/
content: '';
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

figure.effect-cpluservice figcaption::before,
figure.effect-cpluservice h2,
figure.effect-cpluservice .icon-cpluslogo,
figure.effect-cpluservice .icon-scu-icon,
figure.effect-cpluservice .icon-genevita-icon,
figure.effect-cpluservice .icon-edel-icon,
figure.effect-cpluservice .icon-detecmed-icon, 
figure.effect-cpluservice .icon-snowflake-icon, 
figure.effect-cpluservice .icon-genomedic_icon{
opacity: 0;
-webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
transition: opacity 0.35s, transform 0.35s;
}

figure.effect-cpluservice h2 {
padding: 20% 0 20px 0;
-webkit-transform: scale(1.5);
transform: scale(1.5);
color: #fff;
font-size: 17px;
letter-spacing: 2px;
/*font-family: "brandon-grotesque", sans-serif;*/
font-weight: 500;
}

figure.effect-cpluservice p {
margin: 0 auto;
max-width: 200px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
color: #fff;
font-size: 14px;
/*font-family: "adelle", sans-serif;*/
padding-bottom: 20px;
}

figure.effect-cpluservice:hover figcaption::before,
figure.effect-cpluservice:hover h2,
figure.effect-cpluservice:hover .icon-cpluslogo,
figure.effect-cpluservice:hover .icon-scu-icon,
figure.effect-cpluservice:hover .icon-genevita-icon,
figure.effect-cpluservice:hover .icon-edel-icon,
figure.effect-cpluservice:hover .icon-detecmed-icon, 
figure.effect-cpluservice:hover .icon-snowflake-icon, 
figure.effect-cpluservice:hover .icon-genomedic_icon
 {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}

figure.effect-cpluservice .icon-cpluslogo,
figure.effect-cpluservice .icon-scu-icon,
figure.effect-cpluservice .icon-genevita-icon,
figure.effect-cpluservice .icon-edel-icon,
figure.effect-cpluservice .icon-detecmed-icon,
figure.effect-cpluservice .icon-snowflake-icon, 
figure.effect-cpluservice .icon-genomedic_icon
 {
color: #fff; 
font-size: 27px;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}

/*---------------*/
/***** Lightbox Styles *****/
/*---------------*/

/* Styles for lightbox window */
.projects {
background: #ffffff;
padding: 50px;
text-align: left;
max-width: 900px;
margin: 40px auto;
position: relative;
}

.projects h1 {
padding-top: 35px;
color: #242830;
/*font-family: "brandon-grotesque", sans-serif;*/
font-weight: 300;
font-size: 30px;
line-height: 35px;
letter-spacing: 4px;
text-align: center;
text-transform: uppercase;
}

.projects h2 {
color: #8c9398;
/*font-family: "adelle", serif;*/
letter-spacing: 3px;
font-weight: normal;
font-size: 12px;
padding-top: 5px;
padding-bottom: 40px;
text-align: center;
text-transform: none;
}

.projects p{
color: #272727;
line-height: 27px;
font-size: 14px;
text-align: center;
/*font-family: "adelle", serif;*/
padding: 20px 0 0 0;
}

.projects p span {
color: #1cb2b0;
font-weight: normal;
}

p.projectcaption {
color: #8c9398;
padding: 0;
text-transform: uppercase;
font-size: 11px;
/*font-family: "open-sans", sans-serif;*/
letter-spacing: 2px;
}

a.projectlink  {
width: 210px;
font-size: 11px;
font-weight: 500 ;
letter-spacing: 3px;
display: block;
margin: 0 auto 30px;
text-transform: uppercase;
text-decoration: none;
color: #242830;
padding: 12px;
border: 1px #242830 solid;
border-radius: 1px;
/*font-family: "open-sans", sans-serif;*/
text-align: center;
-webkit-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out; 
}

a.projectlink:hover {
color:#242830; 
border: 1px #242830 dashed;
}

.projects img {padding: 30px 0 10px 0; max-width: 100%;}


.iphone_container {background: #e6eaed; padding: 30px 0; margin: 30px 0 10px 0;}
#iphone_0,#iphone_1, #iphone_2, #iphone_3, #iphone_4, #iphone_5, #iphone_6, #iphone_7, #iphone_8{margin: 0 auto;}




/**
* Fade-zoom animation for lightbox
*/

/* start state */
.my-mfp-zoom-in .zoom-anim-dialog {
opacity: 0;

-webkit-transition: all 0.2s ease-in-out; 
-moz-transition: all 0.2s ease-in-out; 
-o-transition: all 0.2s ease-in-out; 
transition: all 0.2s ease-in-out; 
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 
}

/* animate in */
.my-mfp-zoom-in.mfp-ready .zoom-anim-dialog {
opacity: 1;

-webkit-transform: scale(1); 
-moz-transform: scale(1); 
-ms-transform: scale(1); 
-o-transform: scale(1); 
transform: scale(1); 
}

/* animate out */
.my-mfp-zoom-in.mfp-removing .zoom-anim-dialog {
-webkit-transform: scale(0.8); 
-moz-transform: scale(0.8); 
-ms-transform: scale(0.8); 
-o-transform: scale(0.8); 
transform: scale(0.8); 

opacity: 0;
}

/* Dark overlay, start state */
.my-mfp-zoom-in.mfp-bg {
opacity: 0;
-webkit-transition: opacity 0.3s ease-out; 
-moz-transition: opacity 0.3s ease-out; 
-o-transition: opacity 0.3s ease-out; 
transition: opacity 0.3s ease-out;
}
/* animate in */
.my-mfp-zoom-in.mfp-ready.mfp-bg {
opacity: 0.8;
}
/* animate out */
.my-mfp-zoom-in.mfp-removing.mfp-bg {
opacity: 0;
}


/* padding-bottom and top for image */
.mfp-no-margins img.mfp-img {
padding: 0;
}
/* position of shadow behind the image */
.mfp-no-margins .mfp-figure:after {
top: 0;
bottom: 0;
}
/* padding for main container */
.mfp-no-margins .mfp-container {
padding: 0;
}
/**
* Magnific Popup CSS
*/

.mfp-bg {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1042;
overflow: hidden;
position: fixed;
background: #0b0b0b;
opacity: 0.8;
filter: alpha(opacity=80); }

.mfp-wrap {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1043;
position: fixed;
outline: none !important;
-webkit-backface-visibility: hidden; }

.mfp-container {
text-align: center;
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
padding: 0 8px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }

.mfp-container:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle; }

.mfp-align-top .mfp-container:before {
display: none; }

.mfp-content {
position: relative;
display: inline-block;
vertical-align: middle;
margin: 0 auto;
text-align: left;
z-index: 1045; }

.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content {
width: 100%;
cursor: auto; }

.mfp-ajax-cur {
cursor: progress; }

.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close {
cursor: url(../img/projects/icon_close.svg), pointer;
}

.mfp-zoom {
cursor: pointer;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in; }

.mfp-auto-cursor .mfp-content {
cursor: auto; }

.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter {
-webkit-user-select: none;
-moz-user-select: none;
user-select: none; }

.mfp-loading.mfp-figure {
display: none; }

.mfp-hide {
display: none !important; }

.mfp-preloader {
color: #cccccc;
position: absolute;
top: 50%;
width: auto;
text-align: center;
margin-top: -0.8em;
left: 8px;
right: 8px;
z-index: 1044; }


.mfp-preloader a {
color: #cccccc; }

.mfp-preloader a:hover {
color: white; }

.mfp-s-ready .mfp-preloader {
display: none; }

.mfp-s-error .mfp-content {
display: none; }

button.mfp-close {
overflow: visible;
cursor: pointer;
border: 0;
-webkit-appearance: none;
display: block;
outline: none;
padding: 0;
z-index: 1046;
-webkit-box-shadow: none;
box-shadow: none; }
button::-moz-focus-inner {
padding: 0;
border: 0; }

.mfp-close {
background:url(../img/projects/icon_close.svg) no-repeat right center !important;
background-size: 80% !important;
width: 25px;
height: 25px;
position: absolute;
right: 2.8%;
top: 20px;
overflow: hidden;
z-index: 10;
cursor: pointer !important;
color: transparent;
}

.mfp-close:hover {
background:url(../img/projects/icon_close_hover.svg) no-repeat right center !important;
background-size: 80% !important;
width: 25px;
height: 25px;
position: absolute;
right: 2.8%;
top: 20px;
overflow: hidden;
z-index: 10;
cursor: pointer !important;
color: transparent;
}

/* ==========================================================================
About
========================================================================== */

#cpluscontact {position: relative; }

.aboutimg {
background: url('../img/about.jpg') no-repeat center center;
height: 100%;

}

.aboutimgwrap {
width: 50%;
background: #fff;
float: left;
height: 100%;
z-index: 1;

}

.about {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top:-19px;
}

.about h1 {
/*font-family: "adelle", sans-serif;*/
font-size: 28px;
/*color: #242830;*/
color: #ff0000;
padding-bottom: 25px;
}

.about p {
/*font-family: "open-sans", sans-serif;*/
line-height: 25px;
padding-bottom: 17px;	
font-size: 18px;
text-align:left;
}

/* ==========================================================================
social buttons
========================================================================== */


ul.social-buttons {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.social-buttons li {
    display: inline-block;
    margin-right: 10px;
}
ul.social-buttons li:last-child {
    margin-right: 0;
}
.social-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    background: #242830;
    display: inline-block;
    color: #fff;
    font-size: 17px;
    line-height: 40px;
    text-align: center;
}
.social-btn:hover, .social-btn:focus {
    background: #0DB2B0;
    color: #fff;
}
.social {
    margin-top: 25px
}
/* ==========================================================================
Contact
========================================================================== */
#contact {position: relative; background: ;}

#contact h1 {			  
font-size: 33px;
text-transform: uppercase;
letter-spacing: 4px;
/*font-family: "brandon-grotesque", sans-serif;*/
font-weight: 500;
}

#contact h2 {
color: #8c9398;
font-size: 16px;
letter-spacing: 2px;
/*font-family: "adelle", sans-serif;*/
font-weight: normal;	
text-transform: none;
line-height: 28px;
margin-bottom: 5%;
}


.send-message {
cursor: pointer;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
overflow: hidden;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
background: transparent;
padding: 10px 30px;
border: 2px solid #1cb2b0;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
display: inline-block;
transition:none;
/*font-family: "open-sans", sans-serif;*/
font-weight: 400;
font-size: 0.9em;
background: #1cb2b0;
}

.send-message:after {
content: '';
position: absolute;
z-index: -1;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
}

/* Pseudo elements for icons */
.send-message:before{
  /*font-family: 'FontAwesome';*/
content: "\f1d8";
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
position: relative;
-webkit-font-smoothing: antialiased;
position: absolute;
height: 100%;
width: 100%;
line-height: 2.5;
font-size: 150%;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
left: 0;
top: -100%;
color: #fff;
}

.send-message span {
display: inline-block;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s;
-webkit-backface-visibility: hidden;
-moz-transition: all 0.5s;
-moz-backface-visibility: hidden;
transition: all 0.5s;
backface-visibility: hidden;
}

.send-message:hover span {
-webkit-transform: translateY(300%);
-moz-transform: translateY(300%);
-ms-transform: translateY(300%);
transform: translateY(300%);
}

.send-message:hover:before {
top: -5px;
}


/* ==========================================================================
Contact Form Overlay
========================================================================== */

/* Overlay style */
.overlay {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(28, 178, 176, 0.9);
z-index: 2000;
overflow: auto;

}

/* Overlay closing cross */
.overlay .overlay-close {
width: 80px;
height: 80px;
position: absolute;
right: 20px;
top: 20px;
overflow: auto;
border: none;
background: url(../img/overlay_close.svg) no-repeat center center;
text-indent: 200%;
color: transparent;
outline: none;
z-index: 100;
}

.overlay-contentpush {
background: rgba(28, 178, 176, 1);
visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
-webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentpush.open {
visibility: visible;
-webkit-transform: translateX(0%);
transform: translateX(0%);
-webkit-transition: -webkit-transform 0.5s;
transition: transform 0.5s;
}

.projectplanner {
position: relative;
}

.projectplanner h1 {
text-align: center; 
color: #fff;
font-size: 40px;
line-height: 40px;
letter-spacing: 5px;
/*font-family: "brandon-grotesque", sans-serif;*/
font-weight: 500;
text-transform: uppercase;
margin-top: 10%;
}

.projectplanner h2 {
text-align: center; 
color: #a3e0df;
/*font-family: "adelle", serif;*/
font-weight: normal;
text-transform: none;
line-height: 28px;
font-size: 22px;
letter-spacing: 3px;
}

.projectplanner h3 {
text-align: center; 
color: #fff;
/*font-family: "open-sans", sans-serif;*/
font-weight: normal;
text-transform: none;
line-height: 28px;
font-size: 14px;
letter-spacing: 1px;

}

.projectplanner a {
color: #fff; 
text-decoration: none;
}

.projectplanner a:hover {
color: #a3e0df; 
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.projectplanner p {
color: #fff; 
font-size: 14px;
/*font-family: "open-sans", sans-serif;*/
font-weight: normal;
padding-bottom: 2%;
text-align: center;
}
 
 /* ==========================================================================
Contact Form
========================================================================== */

.cplusform {
background: transparent; 
padding: 10% 0;
}

.cplusform p {
color: #fff !important; 
font-size: 15px;	
text-align: left;
}

.cplusform .required{
/*font-family: "open-sans", sans-serif;*/
font-weight: normal;
color: #fff;
text-align: center;
display: block;
font-size: 15px;
}

.cplusbtn {
background: transparent; 
padding: 10px 20px; 
border-radius: 3px;
color: #fff;  
border: 1px solid #fff;
font-size: 17px;
letter-spacing: 1px;
/*font-family: "open-sans", sans-serif;*/
}

.cplusbtn:hover {
background: #fff; 
color: #1cb2b0;  
border: 1px solid #fff;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
transition: all 0.5s;
}

.cplusform .controls {}

.cplusform .controls label {
color: #fff;
text-indent: -9999px;
}

.cplusform .controls input, .cplusform .controls textarea{
color: #242830;
font-size: 14px;
border: 2px solid #fff;
box-shadow: none;
}

.cplusform .controls input:focus, .cplusform .controls textarea:focus {
border: 2px solid #a4e0df;
}

.form-control::-webkit-input-placeholder { 
/*font-family: "open-sans", sans-serif !important;*/
color: #000 !important; 
font-size: 14px;
}

.form-control::-moz-placeholder { 
/*font-family: "open-sans", sans-serif;*/
color: #000 !important; 
font-size: 14px;
}

.form-control:-ms-input-placeholder {
/*font-family: "open-sans", sans-serif;*/
color: #000 !important; 
font-size: 14px;
}

/* ==========================================================================
Google Map
========================================================================== */

#google-container {
  position: relative;
  width: 100%;
  height: 260px;
  background-color: #e7eaf0;
}

#cd-google-map {
  position: relative;
}

#cd-google-map address {
  position: absolute;
  width: 100%;
  bottom: -5px;
  left: 0;
  padding: 1em 1em;
  background-color: rgba(28, 178, 176, 0.9);
  color: #fff;
  font-size: 14px ;
  text-align: center;
  /*font-family: "open-sans", sans-serif;*/

}

@media only screen and (min-width: 768px) {
  #cd-google-map address {
    font-size: 12px;
    text-align: center;
    letter-spacing: 1px;
  }
}

#cd-zoom-in, #cd-zoom-out {
  height: 32px;
  width: 32px;
  cursor: pointer;
  margin-left: 10px;
  background-color: rgba(28, 178, 176, 0.9);
  background-repeat: no-repeat;
  background-size: 32px 64px;
  background-image: url("../img/cd-icon-controller.svg");
}
.no-touch #cd-zoom-in:hover, .no-touch #cd-zoom-out:hover {
  background-color: #242830;
}

@media only screen and (min-width: 768px) {
  #cd-zoom-in, #cd-zoom-out {
    margin-left: 50px;
  }
}

#cd-zoom-in {
  background-position: 50% 0;
  margin-top: 10px;
  margin-bottom: 1px;
}

@media only screen and (min-width: 768px) {
  #cd-zoom-in {
    margin-top: 50px;
  }
}

#cd-zoom-out {
  background-position: 50% -32px;
}

/* ==========================================================================
Footer
========================================================================== */

footer {
border-top: 1px solid #ccc ; 
position: relative;
background: #fff;  
padding: 40px 0;
}



footer a {color: #0DB2B0;
line-height: 30px;
 }

footer a:hover {color: #fff;}

footer p {
color: #fff;
font-size: 13px;
line-height: 14px;
}

.copyright {
/*font-family: "open-sans", sans-serif;*/
/*background: url('../img/footerbg.png') no-repeat;*/
background-size: 175px;
background-position: top left;
padding-bottom: 20px;
}

.copyright h1 {
color: #fff; 
letter-spacing: 3px;
font-weight: 500;
font-size: 14px;
vertical-align: middle;
/*font-family: "brandon-grotesque", sans-serif;*/
text-transform: uppercase;
vertical-align: middle;
margin-bottom: 25px;
}

.copyright span /* -Logo- */{
color: #fff; 
font-size: 32px;    
padding-right: 3px;
vertical-align:middle;
}

.footerlinks {padding-top: 5%; text-align: right;}

.footerlinks ul {
list-style: none;
/*font-family: "adelle", serif;*/
line-height: 40px;
}

.footerlinks ul li {
display: block;
}

.footerlinks ul li:last-child a {
color: #fff;
text-transform: uppercase;
/*font-family: "open-sans", sans-serif;*/
letter-spacing: 2px;
font-size: 11px;  
}

.footerlinks ul li:last-child a:hover {/*color:#0DB2B0;*/ }

.mockup h1{    position: absolute;
    width: 100%;
    color: white;
    line-height:34px;
    padding-top: 134px;
    padding-left: 250px;
    width: 612px;
    margin: 0;
    text-align:center;
    /*font-family:"rotissansserifbold";*/
    font-size: 32px;}
.loginportal ul li{
display:inline;
background-color:#ff0000;
padding:5px;
margin-left:3px;
}
.loginportal ul li a{color:#fff !important;}

.loginportal{position:fixed;/*right:125px;*/margin-top:8px;}

.searchcplus{position:fixed !important;right:0px !important; z-index:10}

@media (min-width: 992px){
.loginportal{position:fixed;right:197px;margin-top:14px;}
.mockup img{width:100%;}
.contact table{margin-left:60px;}
 .col-md-6{   
    padding-right: 2px !important;
    padding-left: 0px !important;
}

@media only screen and (min-width: 768px) {
.loginportal{position:fixed;right:197px;margin-top:14px;}
.mockup img{width:100%;}
}
@media only screen and (max-width: 768px) {
.loginportal{position:fixed;/*right:185px;*/margin-top:8px;}
.mockup img{width:100%;}
}

@media only screen and (max-width: 480px) {
.loginportal{display:none;}
.searchcplus {display:none;}
.mockup img{width:100%;}
.homepay img{display:none}
span.video img{display:none}

}
body{overflow-x: hidden !important;}
/******************************************************************************************/
#contact ul{
	list-style: none;
	padding:0;
}

#contact ul li{
	margin-bottom:15px;
  text-align:left;	
}

#contact input, #contact textarea,#contact select{
	padding:10px;
	background-color:#ff0000;
	color:#fff;
	border-top:1px solid #116883;
	border-left:1px solid #116883;
	border-bottom:1px solid #ffffff;
	border-right:1px solid #ffffff;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#contact input:focus, #contact textarea:focus{
	border:1px solid #fec346;
	-webkit-box-shadow: 0 0px 8px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0 0px 8px rgba(255, 255, 255, 0.8);
	box-shadow: 0 0px 8px rgba(255, 255, 255, 0.8);
}

#contact input{
	width:450px;
}
#contact select{
	width:450px;
}

#contact option {padding:3px; line-height: 35px; }
#contact textarea{
	width:450px;
}

#contact input#submit{
	width: auto;
	min-width:100px;
	background-color:#ff0000;
	color: #f6f5cc;
	text-transform: uppercase;
	letter-spacing: 1px;
	border-bottom:1px solid #116883;
	border-right:1px solid #116883;
	border-top:1px solid #ffffff;
	border-left:1px solid #ffffff;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}

#contact input#submit:hover{
	background-color:#ff0000;
	color:#fbdaa0;
}


#contact input#name, #contact input#email, #contact input#tel,#contact select#country{
		padding-left:67px;
		background-position: 10px center;
		background-repeat: no-repeat;
}
#contact textarea#message {
	padding-left:27px;
	padding-top:37px;
		background-position:initial;
		background-repeat: no-repeat;
}

#contact input#name{
	background-image: url(../img/cplus/name.png);
}

#contact input#tel{
	background-image: url(../img/cplus/tele.png);
}

#contact input#email{
	background-image: url(../img/cplus/email.png);
}
#contact select#country{
	background-image: url(../img/cplus/country.png);
}

#contact textarea#message{
	background-image: url(../img/cplus/message.png);
}

input:valid, textarea:valid {
}
button, input {
    line-height: normal;
}
.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.bordercplus{border-left: 1px solid rgba(0,0,0,0.15);border-right: 1px solid rgba(0,0,0,0.15);border-bottom: 1px solid rgba(0,0,0,0.15);
    -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
    -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.05);
    box-shadow: 0px 0px 6px rgba(0,0,0,0.05);}