@charset "UTF-8";
@import url("font-awesome.min.css");

body,html{
    height: 100%
}

html,body {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

h1,h2,h3,h4,h5,h6 {
    font-family:'Roboto', sans-serif;
    font-weight:300;
}


ol, ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.menu {
    display: none
}

.fw1 {
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}
	  
.fw3 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

/* Animate Clouds */

.w3-animate-left-right {
    position: relative;
    animation: animateleftright 5s linear infinite;
	z-index: 1;
}

@keyframes animateleftright {
    0% {
        left: -10px;
    }
    50% {
        left: 10px;
    }
    100% {
        left: -10px;
    }
}

.w3-animate-right-left {
    position: relative;
    animation: animaterightleft 5s linear infinite;
}

.w3-animate-dummy {
    position: relative;
    animation: animatedummy 5s linear infinite;
}

.sf-solutions {
    max-width: 70%;
    height: auto
}

.sf-content {
    background-image: url("../images/circuit.jpg");
	background-size: cover;
}

.sf-contact {
    background-image: url("../images/bg.jpg");
	background-size: contain;
}


@keyframes animaterightleft {
    0% {
        right: -10px;
    }
    50% {
        right: 10px;
    }
    100% {
        right: -10px;
    }
}

@keyframes animatedummy {
    0% {
        right: 0px;
    }
    50% {
        right: 0px;
    }
    100% {
        right: 0px;
    }
}

/* Images */

.w3-image {
    z-index: -1;
}

.w3-image-mod {
    position: absolute;
	top: 0px;
    max-width: 100%;
	height: auto;
	z-index: 0;
}

.w3-image-logo {
    margin-top: 20%;
	max-width: 50%;
	z-index: 0;
}

.w3-slogan {
    margin-bottom: 10%;
}

/* Icon */

.icon {
	text-decoration: none;
	position: relative;
}

	.icon:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
	}

	.icon > .label {
		display: none;
	}


/*Added by Alfred*/

/* override w3-content max size */
.w3-content {
	max-width: 1100px;
}

.w3-bar-item{
	min-height:72px;
}


#header h1{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	
}


#about p{
	color: black;
	font-size: 24px;
	font-weight: bold;
	font-family: Poppins,Arial,sans-serif;
	
}

#about h4 {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; /*Poppins,Arial,sans-serif;*/
	font-weight:500;
	color:  #181920;
	line-height: 1.5;
}

#about h1{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	
}

#partners h1{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#partners p {
	color: #696b6d;
	line-height: 28px;
	font-weight: normal;
	font-family: Poppins,Arial,sans-serif;
	
}

#services h3{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#services h1,p{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#services h3{
	font-weight: 300;
	color: black;
}
#services {
	font-weight: 300;
	color: black;
}

#silicon_ips h1,h3,h4,li{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	text-align: left;
}

#silicon_ips h4{
	font-weight: bold;
}


.silicon_header_list li::before{
	content: "•"; 
	color: black;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}

.silicon_card_list li::before{
	content: "•"; 
	color: black;
	display: inline-block; 
	width: 1em;
	margin-left: -1em;
}
.silicon_card_list{
	font-size: 12px;
}
.silicon_card_content{
	padding: px 40px 0px;
}


#contact h1 {
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight:500;
	color: #181920;
	line-height: 1.5;
}

#contact{
	height:937px;
}
#contact p{
	color: #696b6d;
	line-height: 28px;
	/*font-size: 16px;*/
	font-weight:normal;
	font-family: Poppins,Arial,sans-serif;
}




/*Start of changes made in index_v1.html */
/*NOTE: comment out section below of "Added by Alfred" to fix style of older versions of index_v1 (index.html) */

#googleMap{
	position:absolute; 
	height: 800px; 
	width: 100%; 
}

#contactform2{
	position:relative;
	
		
	margin: 60px auto 0;
	padding: 10px;
	background: white;
	color: black;
	opacity:0.8134;
}
/*Size contact form for modile responsiveness */
@media screen and (min-width:901px){
#contactform { 
	 position:absolute;
	 width:490px;
	 height:540px;
	 right: 120px;
	 margin: 60px auto 0;
	 padding: 10px;
	 background: white;
	 color: black;
	 opacity:0.8134;
}
}



@media screen and (max-width:900px) {	
	#contactform {
		position:relative;
		width:490px;
		height:650px;
		
		margin: 60px auto 0;
		padding: 10px;
		background: white;
		color: black;
		opacity:0.8134;
	}
	
}




#contactform h4{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; /*Poppins,Arial,sans-serif;*/
	font-weight:500;
	color:  #181920;
	line-height: 1.5;
}
#contactform p{
	/*font-size:15px;*/
	color:black;
	
}


/* added mobile responsiveness using theses classes */
.mobile_h1{
	font-size:4.8vw;
	font-weight:bold;
	margin-bottom:1vw;
}

.mobile_h4{
	font-size: 4.5vw;
	font-weight:500;
}

.non_mobile_h4{
	font-size:24px;
}
.mobile_p{
	font-size:3.5vw;
	
}

.non_mobile_p{
	font-size: 16px;
}


footer{
	width:100%;
}

#about .s4{
	padding-left: 30px;
	padding-right: 30px;
	width: 33.33333333%;
}



.w3-center-image {
    text-align: center;		/* Partners */
}


/*Adding spacing to the nav bar at full screen */

@media screen and (min-width:1400px) {	
	#spacer {
		
		width: 100px;
	}
	
}

@media screen and (max-width:1200px){
	#spacer {
		display: none;
	}
	
}



/*end of added by alfred*/

/* Set Icons */

@-moz-keyframes icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@-webkit-keyframes icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@-ms-keyframes icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@-moz-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@-webkit-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@-ms-keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

@keyframes nav-icons {
	0% {
		-moz-transform: translate3d(0,1em,0);
		-webkit-transform: translate3d(0,1em,0);
		-ms-transform: translate3d(0,1em,0);
		transform: translate3d(0,1em,0);
		opacity: 0;
	}

	100% {
		-moz-transform: translate3d(0,0,0);
		-webkit-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		opacity: 1;
	}
}

#icons {
	-moz-animation: icons 1s 2.25s forwards;
	-webkit-animation: icons 1s 2.25s forwards;
	-ms-animation: icons 1s 2.25s forwards;
	animation: icons 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: -1em;
	vertical-align: middle;
	width: 100%;
}

	#icons h1 {
		font-size: 4.35em;
		font-weight: 900;
		letter-spacing: -0.035em;
		line-height: 1em;
		color: #da7720;
	}

	#icons p {
		font-size: 1.25em;
		font-weight: 600;
		margin: 0.75em 0 0.25em 0;
		opacity: 0.75;
		color: #da7720;		
	}

	#icons nav {
		margin: 0 0 0 0;
	}

		#icons nav li {
			-moz-animation: nav-icons 0.5s ease-in-out forwards;
			-webkit-animation: nav-icons 0.5s ease-in-out forwards;
			-ms-animation: nav-icons 0.5s ease-in-out forwards;
			animation: nav-icons 0.5s ease-in-out forwards;
			-moz-backface-visibility: hidden;
			-webkit-backface-visibility: hidden;
			-ms-backface-visibility: hidden;
			backface-visibility: hidden;
			-moz-transform: translate3d(0,0,0);
			-webkit-transform: translate3d(0,0,0);
			-ms-transform: translate3d(0,0,0);
			transform: translate3d(0,0,0);
			display: inline-block;
			height: 5.35em;
			line-height: 5.885em;
			opacity: 0;
			position: relative;
			top: 0;
			width: 5.35em;
		}

			#icons nav li:nth-child(1) {
				-moz-animation-delay: 2.5s;
				-webkit-animation-delay: 2.5s;
				-ms-animation-delay: 2.5s;
				animation-delay: 2.5s;
			}

			#icons nav li:nth-child(2) {
				-moz-animation-delay: 2.75s;
				-webkit-animation-delay: 2.75s;
				-ms-animation-delay: 2.75s;
				animation-delay: 2.75s;
			}

			#icons nav li:nth-child(3) {
				-moz-animation-delay: 3s;
				-webkit-animation-delay: 3s;
				-ms-animation-delay: 3s;
				animation-delay: 3s;
			}

			#icons nav li:nth-child(4) {
				-moz-animation-delay: 3.25s;
				-webkit-animation-delay: 3.25s;
				-ms-animation-delay: 3.25s;
				animation-delay: 3.25s;
			}

			#icons nav li:nth-child(5) {
				-moz-animation-delay: 3.5s;
				-webkit-animation-delay: 3.5s;
				-ms-animation-delay: 3.5s;
				animation-delay: 3.5s;
			}

			#icons nav li:nth-child(6) {
				-moz-animation-delay: 3.75s;
				-webkit-animation-delay: 3.75s;
				-ms-animation-delay: 3.75s;
				animation-delay: 3.75s;
			}

			#icons nav li:nth-child(7) {
				-moz-animation-delay: 4s;
				-webkit-animation-delay: 4s;
				-ms-animation-delay: 4s;
				animation-delay: 4s;
			}

			#icons nav li:nth-child(8) {
				-moz-animation-delay: 4.25s;
				-webkit-animation-delay: 4.25s;
				-ms-animation-delay: 4.25s;
				animation-delay: 4.25s;
			}

			#icons nav li:nth-child(9) {
				-moz-animation-delay: 4.5s;
				-webkit-animation-delay: 4.5s;
				-ms-animation-delay: 4.5s;
				animation-delay: 4.5s;
			}

			#icons nav li:nth-child(10) {
				-moz-animation-delay: 4.75s;
				-webkit-animation-delay: 4.75s;
				-ms-animation-delay: 4.75s;
				animation-delay: 4.75s;
			}

		#icons nav a {
			-webkit-tap-highlight-color: transparent;
			-webkit-touch-callout: none;
			border: 0;
			display: inline-block;
		}

			#icons nav a:before {
				-moz-transition: all 0.2s ease-in-out;
				-webkit-transition: all 0.2s ease-in-out;
				-ms-transition: all 0.2s ease-in-out;
				transition: all 0.2s ease-in-out;
				border-radius: 100%;
				border: solid 1px #fff;
				display: block;
				font-size: 1.75em;
				height: 2.5em;
				line-height: 2.5em;
				position: relative;
				text-align: center;
				top: 0;
				width: 2.5em;
				color: #fff;
			}

			#icons nav a:hover {
				font-size: 1.1em;
			}

				#icons nav a:hover:before {
					background-color: rgba(255, 255, 255, 0.175);
					color: #fff;
				}

			#icons nav a:active {
				font-size: 0.95em;
				background: none;
			}

				#icons nav a:active:before {
					background-color: rgba(255, 255, 255, 0.35);
					color: #fff;
				}

			#icons nav a span {
				display: none;
			}

/* Animate Title */
			
#animate-title {
	-moz-animation: icons 1s 2.25s forwards;
	-webkit-animation: icons 1s 2.25s forwards;
	-ms-animation: icons 1s 2.25s forwards;
	animation: icons 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	display: inline-block;
	opacity: 0;
	position: relative;
	text-align: center;
	top: 0em;
	vertical-align: middle;
	width: 100%;
}

/* Animate Paragraph */

#animate-paragraph {
	-moz-animation: icons 1s 2.25s forwards;
	-webkit-animation: icons 1s 2.25s forwards;
	-ms-animation: icons 1s 2.25s forwards;
	animation: icons 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	opacity: 0;
}

/* Animate Default */

#animate-default {
	-moz-animation: icons 1s 2.25s forwards;
	-webkit-animation: icons 1s 2.25s forwards;
	-ms-animation: icons 1s 2.25s forwards;
	animation: icons 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	opacity: 0;
}

/* Animate Clouds */

#animate-clouds {
	-moz-animation: icons 1s 2.25s forwards;
	-webkit-animation: icons 1s 2.25s forwards;
	-ms-animation: icons 1s 2.25s forwards;
	animation: icons 1s 2.25s forwards;
	-moz-backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	cursor: default;
	opacity: 0;
	position: absolute;
	top: 0px;
    max-width: 100%;
	height: auto;
	z-index: 0;
}

/* Overlay */

	@-moz-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-webkit-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@-ms-keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

	@keyframes overlay {
		0% {
			opacity: 0;
		}

		100% {
			opacity: 1;
		}
	}

#overlay {
	-moz-animation: overlay 1.5s 1.5s forwards;
	-webkit-animation: overlay 1.5s 1.5s forwards;
	-ms-animation: overlay 1.5s 1.5s forwards;
	animation: overlay 1.5s 1.5s forwards;
	background-attachment: fixed, fixed;
	background-image: url("../images/overlay-pattern.png"), url("../images/overlay.svg");
	background-position: top left, center center;
	background-repeat: repeat, no-repeat;
	background-size: auto, cover;
	height: 100%;
	left: 0;
	opacity: 0;
	position: fixed;
	top: 0;
	width: 100%;
}