/* ====================================================================================================
  BASIC ELEMENTS
==================================================================================================== */

@import url("../basic/reset.css");

@import url("../basic/simplegrid.css");

@import url("../basic/basic.css");


/* ==============================
  LAYOUT
============================== */

@import url("slider-banners.css");

@import url("services.css");

@import url("technologies.css");

@import url("about-us.css");

@import url("contact-me.css");

@import url("contact-icons.css");

@import url("footer.css");


/* ==============================
  JS SCRIPTS
============================== */

@import url("../js-scripts/navigation.css");

@import url("../js-scripts/page-header.css");

@import url("../js-scripts/magnific-popup.css");


/* ====================================================================================================
  GOOGLE FONTS
==================================================================================================== */

/* Roboto */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,600,700');

/* Raleway */
@import url('https://fonts.googleapis.com/css?family=Raleway:300,400,600,700');


/* ==============================
  BODY
============================== */

/* body */
body {
	margin: 0px 0 0 0;
	padding: 0px 0 0 0;
	background: #fff;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size: 18px;
	color: #000;

	width: 100%;
	overflow-x: hidden; /* Stops horizontal scrolling. */
}



/* ====================================================================================================
  THEME COLOR
==================================================================================================== */

/* ==============================
  BACKGROUND PRIMARY
============================== */
.bg_primary,
.button_large.primary,
.button_small.primary,
.menu_dropdown nav ul ul li a:hover,
.menu_dropdown .active,
.sidebar_nav .closebtn
{
	background: #00adef; /* IMPORTANT! CHANGE COLOR */
}


/* menu line color active */
.nav-collapse a:active,
.nav-collapse .active a {
	background: #fff;
	color:#00adef;

}


/* icons fill */
.icons {
	fill: #00adef; /* IMPORTANT! CHANGE COLOR */
}

/* ==============================
  BACKGROUND SECONDARY
============================== */
.bg_secondary,
.button_large.secondary,
.button_small.secondary
{
	background: #bdd632; /* IMPORTANT! CHANGE COLOR */
}

/* ==============================
  BACKGROUND TERTIARY
============================== */
.bg_tertiary,
.button_large.tertiary,
.button_small.tertiary
{
	background: #233d56; /* IMPORTANT! CHANGE COLOR */
}



/* ==============================
  GRAY SCALE
============================== */

/* bg_white */
.bg_white {
	background: #fff; /* IMPORTANT! CHANGE COLOR */
}

/* bg_light_gray */
.bg_light_gray {
	background: #f4f6f9; /* IMPORTANT! CHANGE COLOR */
}

/* bg_gray */
.bg_gray {
	background: #c8d0d8; /* IMPORTANT! CHANGE COLOR */
}

/* bg_mid_gray */
.bg_mid_gray {
	background: #a9b1bc; /* IMPORTANT! CHANGE COLOR */
}

/* bg_dark_gray */
.bg_dark_gray {
	background: #646c77; /* IMPORTANT! CHANGE COLOR */
}

/* bg_deep_gray */
.bg_deep_gray {
	background: #424953; /* IMPORTANT! CHANGE COLOR */
}

/* bg_black */
.bg_black {
	background: #000; /* IMPORTANT! CHANGE COLOR */
}





/* ====================================================================================================
  TEXT COLOR
==================================================================================================== */

/* ==============================
  TEXT PRIMARY
============================== */
.text_primary,
a.link_primary
{
	color: #00adef; /* IMPORTANT! CHANGE COLOR */
}



/* ==============================
  TEXT SECONDARY
============================== */
.text_secondary,
a.link_secondary
{
	color: #bdd632; /* IMPORTANT! CHANGE COLOR */
}



/* ==============================
  TEXT TERTIARY
============================== */
.text_tertiary,
a.link_tertiary
{
	color: #233d56; /* IMPORTANT! CHANGE COLOR */
}



/* ==============================
  LINK COLOR
============================== */

/* link */
a.link_primary:link, /* primary */
a.link_secondary:link, /* secondary */
a.link_tertiary:link /* tertiary */
{
	text-decoration: none;
}

/* link:hover */
a.link_primary:hover, /* primary */
a.link_secondary:hover, /* secondary */
a.link_tertiary:hover /* tertiary */
{
	text-decoration: underline;
}



/* ==============================
  GRAY SCALE
============================== */

/* text_white */
.text_white,
a.link_white
{
	color: #fff; /* IMPORTANT! CHANGE COLOR */
}

/* text_light_gray */
.text_light_gray,
a.link_light_gray
{
	color: #f4f6f9; /* IMPORTANT! CHANGE COLOR */
}

/* text_gray */
.text_gray,
a.link_gray
{
	color: #c8d0d8; /* IMPORTANT! CHANGE COLOR */
} 

/* text_mid_gray */
.text_mid_gray,
a.link_mid_gray
{
	color: #a9b1bc; /* IMPORTANT! CHANGE COLOR */
} 

/* text_dark_gray */
.text_dark_gray,
a.link_dark_gray
{
	color: #646c77; /* IMPORTANT! CHANGE COLOR */
}

/* text_deep_gray */
.text_deep_gray,
a.link_deep_gray
{
	color: #424953; /* IMPORTANT! CHANGE COLOR */
}

/* text_black */
.text_black,
a.link_black
{
	color: #000; /* IMPORTANT! CHANGE COLOR */
}



/* ==============================
  LINK GRAY SCALE
============================== */

/* link */
a.link_white:link, /* white */
a.link_light_gray:link, /* light_gray */
a.link_gray:link, /* gray */
a.link_mid_gray:link, /* mid_gray */
a.link_dark_gray:link, /* dark_gray */
a.link_deep_gray:link, /* deep_gray */
a.link_black:link /* black */
{
	text-decoration: none;
}

/* link:hover */
a.link_white:hover, /* white */
a.link_light_gray:hover, /* light_gray */
a.link_gray:hover, /* gray */
a.link_mid_gray:hover, /* mid_gray */
a.link_dark_gray:hover, /* dark_gray */
a.link_deep_gray:hover, /* deep_gray */
a.link_black:hover /* black */
{
	text-decoration: underline;
}



/* ==============================
  BUTTONS LARGE
============================== */

.button_large.secondary { /* secondary */
	color: #fff;
}

.button_large.tertiary { /* tertiary */
	color: #fff;
}

/* button_large :hover */
.button_large.primary:hover, /* primary */
.button_large.secondary:hover, /* secondary */
.button_large.tertiary:hover /* tertiary */
{
	background: rgba(0, 0, 0, .7);
	text-decoration: none;
	color: #fff;
}

/* ==============================
  BUTTONS SMALL
============================== */

.button_small.secondary { /* secondary */
	color: #fff;
}

.button_small.tertiary { /* tertiary */
	color: #fff;
}

/* button_small :hover */
.button_small.primary:hover, /* primary */
.button_small.secondary:hover, /* secondary */
.button_small.tertiary:hover /* tertiary */
{
	background: rgba(0, 0, 0, .7);
	text-decoration: none;
	color: #fff;
}



/* ====================================================================================================
  CUSTOM ELEMENTS
==================================================================================================== */

/* ==============================
  CONTAINERS PAGE
============================== */

/* container_page */
.container_page {
	padding: 0 20px;
}

/* section_page */
.section_page {
	padding: 0 0 40px 0;
}

/* section_text_page */
.section_text_page {
	padding: 20px 0;
}



/* ==============================
  HEADINGS
============================== */

/* headings */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Raleway', Helvetica, Arial, sans-serif;
	font-weight: 400;
	line-height: normal;
}



/* ==============================
  TITLES (headings line color)
============================== */

/* container_title_page */
.container_title_page {
	padding: 0 20px;
}

/* H1 title_page*/
.title_page {
	padding: 0 0 15px 0;
	font-size: 34px;
}

/* title_line_color */
.title_line_color {
	width: 100px;
	height: 3px;
}

/* title_line_color left */
.title_line_color.left {
	float: left;
}

/* title_line_color center */
.title_line_color.center {
	margin: auto;
}

/* title_line_color right */
.title_line_color.right {
	float: right;
}

/* H2 subtitle_page */
.subtitle_page {
	padding: 15px 0 40px 0;
	font-size: 24px;
}

/* text_page */
.text_page {
	line-height: 2;
	margin: 0 0 20px 0;
}

/* text_graphic */
.text_graphic {
	padding: 10px 20px 0 20px;
}

.text_graphic img {
	width: 100%;
	max-width: 680px;
	height: auto;
}




/* ==============================
  WHITE POPOP
============================== */

/* white_popup */
.white_popup {
	position: relative;
	background: #fff;
	padding: 20px;
	width:auto;
	max-width: 420px;
	margin: 20px auto;
}

/* title */
.white_popup .title {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	font-size: 24px;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
}

/* subtilte */
.white_popup .subtitle {
	font-size: 18px;
}

/* text */
.white_popup .text {
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	border-bottom: 1px solid rgba(0, 0, 0, .2);
	line-height: 1.5;
}

/* footnote */
.white_popup .footnote {
	padding: 5px 0 0 0;
	font-size: 12px;
	line-height: 1.5;
}

/* icons */
.white_popup .icons {
	padding: 0 0 20px 0;
}

/* email icon */
.white_popup .email_icon {
	float: left;
	margin: 0 20px 0 0 ;
}

.white_popup .email_icon img {
	height: 23px;
	
	opacity: 1;
    filter: alpha(opacity=100);
	
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

.white_popup .email_icon img:hover {
	opacity: 0.6;
    filter: alpha(opacity=60);
}

/* social icon */
.white_popup .social_icon {
	float: right;
	margin: 3px 0 0 25px;
}

.white_popup .social_icon img {
	height: 17px;
	opacity: 0.4;
    filter: alpha(opacity=40);
	
	-webkit-transition: all 300ms ease-out;
	-moz-transition: all 300ms ease-out;
	-o-transition: all 300ms ease-out;
	-ms-transition: all 300ms ease-out;	
	transition: all 300ms ease-out;
}

.white_popup .social_icon img:hover {
	opacity: 0.8;
    filter: alpha(opacity=80);
}

/* hidden gallery */
.hidden_gallery {
  overflow: hidden;
  display: none;
  visibility: hidden;
}



/* ==============================
  ANIMATED
============================== */
/* animated */
.animated {
  animation-duration: 5s;
  animation-fill-mode: both;
}

/* infinite */
.animated.infinite {
  animation-iteration-count: infinite;
}

/* shake */
@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);
  }

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-3px, 0, 0);
  }

  20%, 40%, 60%, 80% {
    transform: translate3d(3px, 0, 0);
  }
}

.shake {
  animation-name: shake;
}





/* ====================================================================================================
  MEDIA QUERIES
==================================================================================================== */



/* # TABLET
==================================================================================================== */
@media handheld, only screen and (max-width: 959px) {

/* ==============================
  TITLES (headings line color)
============================== */

/* h1 */
.title_page {
	font-size: 32px;
}

/* h2 */
.subtitle_page {
	font-size: 22px;
}

/* text_bullet */
.text_bullet {
	padding: 20px 20px 0 20px;
}



}
/* # END TABLET
==================================================================================================== */


/* # SMARTPHONE
==================================================================================================== */
@media handheld, only screen and (max-width: 639px) {

/* ==============================
  HEADINGS
============================== */

/* headings */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

/* ==============================
  TITLES (headings line color)
============================== */

/* container_title_page */
.container_title_page {
	padding: 0 20px 0 20px;
}

/* h1 */
.title_page {
	font-size: 28px;
}

/* h2 */
.subtitle_page {
	padding: 15px 0 10px 0;
	font-size: 20px;
}



/* ==============================
  BUTTONS LARGE
============================== */

/* button_large */
.button_large {
	padding: 15px 10px;
	display: block;
	text-align: center;
}



}
/* # END SMARTPHONE
==================================================================================================== */