/*

	00. Font Face
	01. Key Frames Fade-It
	02. Media Queries MAX WIDTH 960px
	03. Media Queries MAX WIDTH 720px
	04. Media Queries MAX WIDTH 520px
	05. Media Queries for Smartphones landscapes
	06. Media Queries for Smartphones Portraits
	07. Media Queries for iPads Portraits
	08. WORKS GRID Media Queries
	09. Mobile Navigation Queries
	
*/



/* 00. FONT FACE ================================================== */


@font-face {
    font-family: 'OpenSansLight';
    src: url('../fonts/OpenSans-Light-webfont.eot');
    src: url('../fonts/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Light-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Light-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Light-webfont.svg#OpenSansLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansRegular';
    src: url('../fonts/OpenSans-Regular-webfont.eot');
    src: url('../fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'OpenSansSemibold';
    src: url('../fonts/OpenSans-Semibold-webfont.eot');
    src: url('../fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('../fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('../fonts/OpenSans-Semibold-webfont.svg#OpenSansSemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}



/* SOCIAL ICON */


@font-face {
    font-family: 'Socialico';
    src: url('../fonts/Socialico.eot');
    src: url('../fonts/Socialico.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Socialico.ttf') format('truetype'),
         url('../fonts/Socialico.svg#Socialico') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* 01. KEY FRAMES FADE IN ================================================== */


@-webkit-keyframes Anim { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes Anim { from { opacity:0; } to { opacity:1; } }
@keyframes Anim { from { opacity:0; } to { opacity:1; } }
 
.fade-it {
    -webkit-animation:Anim ease-in 1;
    -moz-animation:Anim ease-in 1;
    animation:Anim ease-in 1;
    opacity: 0.7;
    filter: alpha(opacity=70);
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    -webkit-animation-duration:1s;
    -moz-animation-duration:1s;
    animation-duration:1s;}
 
.fade-it {
	-webkit-animation-delay: 0.3s;
	-moz-animation-delay: 0.3s;
	animation-delay: 0.3s;}


.mobile_menu_list{
	display: none;
}

.menu_button{
	display: none;
}

/* 02. MAX WIDTH 960px ================================================== */


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



.subtittle {
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	padding:20px 30px 10px 30px;}

#whatwedo .og-grid .og-details h3 { 
	font-size:30px; }

#consultingservice .og-grid .og-details a {
	font-size: 13px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 10px;
	background: #00aed7;
	border: 3px solid #d62038;
	display: inline-block;
	margin: 10px 0 0;
	outline: none;}
	
}


/* 02. MAX WIDTH 960px ================================================== */


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


.ticker ul.tweet_list {
	height:16px;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
}

.ticker .tweet_list li {
	overflow:hidden;
	font-family: 'Roboto', sans-serif;
	font-size:14px;
	color:#666;
	height:30px;
}

.subtittle {
	font-family: 'Roboto', sans-serif;
	font-size:18px;
	padding:20px 30px 10px 30px;}

#consultingservice .og-grid .og-details h3 { 
	font-size:30px; }

#consultingservice .og-grid .og-details a {
	font-size: 13px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 10px;
	background: #d62038;
	border: 3px solid #d62038;
	display: inline-block;
	margin: 10px 0 0;
	outline: none;}
	
.dotline{float:left; margin:0 0px 0 20px!important;}	
.midline{float:left; margin:40px 25px 0 35px!important;}
img.paytitle{display:block; margin-top:0px!important;}

}

/* 03. MAX WIDTH 720px ================================================== */


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

#home .roles {
    font-size:  20pt;  }
    
.portraits{
    width: 50%;
    margin-bottom: 4%;}

#contact .row .info {
	margin-left:0%;
	text-align:center;
	line-height:25px;}

#consultingservice .og-grid {
	padding: 10px 0;
	margin: 0px auto;
	text-align: center;
	width: 100%;}
	
#consultingservice .og-grid li {
	width: 100%;
	display: inline-block;
	margin: 0px 15px 20px 0px;
	vertical-align: top;
	height: 185px;}

#consultingservice .og-grid .og-details h3 { 
	font-size:20px; }

#consultingservice .og-grid .og-details a {
	font-size: 13px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 10px;
	background: #d62038;
	border: 3px solid #d62038;
	display: inline-block;
	margin: 10px 0 0;
	outline: none;}

#consultingservice .og-grid .og-details { 
	text-align: center;
	width: 100%; }
	

}


/* 04. MAX WIDTH 520px ================================================== */


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

#home {
	width:100%;
	height:100%;
	color:#FFF;
	background:#fff no-repeat center center fixed!important;
	background-position:center;
	background-size: cover;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
    background-attachment : fixed;  /* FIXED FOR IE */}

	
.row .subtittle {
	font-size:16px;}

#consultingservice .row h2,
#mobilecontentgateway .row h2,#applicationdevelopment .row h2, #payment .row h9,
#contact .row h2 {
	font-size:40px; line-height:35px;}
	
.portraits{
	width: 80%;
	margin-bottom: 4%;}

.og-grid {
	padding: 10px 0;
	margin: 0px auto;
	text-align: center;
	width: 100%;}
	
.og-grid li {
	width: 100%;
	display: inline-block;
	margin: 0px 15px 20px 0px;
	vertical-align: top;
	height: 185px;}

#consultingservice .og-grid .og-details a {
	font-size: 13px;
	color: #FFF;
	font-family: 'Roboto', sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	padding: 10px 10px;
	background: #d62038;
	border: 3px solid #d62038;
	display: inline-block;
	margin: 15px 0 0;
	outline: none;}

#consultingservice .og-grid .og-details h3 { 
	font-size:20px; }

#consultingservice .og-grid .og-details { 
	text-align: center;
	width: 100%; }

#social_module .row ul li i {
	padding: 0px 0px 0px 0px;}
	
}

/* 05. Smartphones landscape  ================================================== */

@media only screen 
and (max-device-width : 550px) 
and (orientation : landscape) {
#home {
	height:100%;
}
#home .row h1 {
	margin-top:5%;}

#down_button a {display: none;}
}


/* 06. Smartphones portraits  ================================================== */

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px)
and (orientation : portrait) {

#consultingservice .row h2,
#mobilecontentgateway .row h2,
#contact .row h2 {
	font-size:30px;}
}


/* 07. iPads portrait  ================================================== */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {

#home h1 {
	margin-top:45%;}
}


/* 08. WORKS GRID Media Queries ================================================== */



@-webkit-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@-moz-keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@keyframes loader {
	0% { background: #ddd; }
	33% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ccc, -15px 30px 1px #ddd; }
	66% { background: #ccc; box-shadow: 0 0 1px #ccc, 15px 30px 1px #ddd, -15px 30px 1px #ccc; }
}

@media screen and (max-width: 1024px) {
	#payment img.paytitle{display:block; margin-top:0!important;width: 60%;}
	.subtittle1 {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 20px 0px!important;
	font-size:14px;
	text-align:left!important;
}
}

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

	.og-expander h3 { font-size: 32px; }
	.og-expander p { font-size: 13px; }
	.og-expander a { font-size: 12px; }
	.og-fullimg { margin-top:2%; }
	#payment img.paytitle{display:block; margin-top:0!important;width: 60%;}
	.subtittle1 {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 20px 0px!important;
	font-size:14px;
	text-align:left!important;
}


}

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

	.og-fullimg { display: none; }
	.og-close {right:45%; top:10px; display: none; }
	.og-details h3 {padding-top: 50px;}
	.og-expander-container {padding-top:10px; }  
	.dotline{display:none!important;}
	.midline{display:none!important;}
	#applicationdevelopment img{ display:inline!important;}
	#applicationdevelopment p{ text-align: center!important;}
	#applicationdevelopment h8{ text-align: center!important;}
	#payment img.paytitle{display:inline!important; margin-top:0!important;width: 296px;}
	.subtittle1 {
	font-family: 'Roboto', sans-serif;
	font-weight:300;
	color:#343131;
	margin-bottom:0px;
	padding:30px 30px 20px 0px!important;
	font-size:14px;
	text-align:center!important;
	}
	h9 {
	color:#000000;
	font-family: 'Roboto', sans-serif;
	font-size:36px;
	text-align:center!important;
	padding: 30px 0px 0px 0px;
	display: block;
	}
	#consultingservice img.martop{margin-top:20px;}
}

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

	.og-fullimg { display: none; }
	.og-close {right:45%; top:10px; display: none; }
	.og-details h3 {padding-top: 50px; width: 100%; }
	.og-expander-container {padding-top:10px;  }  

}


/* 09. Mobile Navigation Queries ================================================== */ 

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


.nav-container nav ul.web_menu li {
	  display: none;}
	
.nav-container	nav select text {
	  color:red;}

.nav-container	nav ul.web_menu {
	  margin-top:20px;}

/* .nav-container	nav select {
      display: block;
      margin-top:20px;
	  background: url('../img/nav-icon.png') no-repeat  ;
	  width: 30px;
	  border: none;
	  height: 30px;
	  float: right;
	  color: rgba(0, 0, 0, 0.0); } */

	  
	  
.mobile_menu_list{
	display: block;
}

.menu_button{
	display: block;
	float: right;
	width: 30px;
	height: 30px;
	margin-top:30px;
	margin-right:10px;
}


.mobile_menu_list{
	display: none;
	background-color: #ffffff;
	float:left;
	width:100%;
	margin-top:-15px;
}

.mobile_menu_list ul{
	list-style: none;
	margin-top: 0px;
	margin-bottom: 3px;
}

.mobile_menu_list li{
	text-align: center;
	padding-bottom: 5px;
}

.mobile_menu_list a{
	text-decoration: none;
	color: #000;
	display: block;
	padding-left: 0px;
	font-size: 12px;
	font-weight: bold;
}

}	

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

nav ul.web_menu li{
    display:inline-block;
    list-style: none;
    float:left;
    padding:5px 8px!important;}
	
}

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

.nav-container nav ul.web_menu li {
	  display: none;}
	
.nav-container	nav select text {
	  color:red;}

.nav-container	nav ul.web_menu {
	  margin-top:20px;display: none;}

/* .nav-container	nav select {
      display: block;
      margin-top:20px;
	  background: url('../img/nav-icon.png') no-repeat  ;
	  width: 30px;
	  border: none;
	  height: 30px;
	  float: right;
	  color: rgba(0, 0, 0, 0.0); } */

	  
	  
.mobile_menu_list{
	display: block;
}

.menu_button{
	display: block;
	float: right;
	width: 30px;
	height: 30px;
	margin-top:30px;
	margin-right:10px;
}


.mobile_menu_list{
	display: none;
	background-color: #ffffff;
	float:left;
	width:100%;
	margin-top:-15px;
}

.mobile_menu_list ul{
	list-style: none;
	margin-top: 0px;
	margin-bottom: 3px;
}

.mobile_menu_list li{
	text-align: center;
	padding-bottom: 5px;
}

.mobile_menu_list a{
	text-decoration: none;
	color: #000;
	display: block;
	padding-left: 0px;
	font-size: 12px;
	font-weight: bold;
}


	
}