/* Thomsoon.com - OnePage CSS Responsive theme -- version 1.0 -- Copyright (c) 2014 Thomsoon.com -- licensed under the MIT -- -- http://www.thomsoon.com/free-onepage-theme-html5.html -- */ /* Font Google - strong reaload time */ @import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,200,300,700,900&subset=latin,latin-ext); /* * Theme Name: Onepage * Author: Thomsoon * Created: 15/02/2014 */ html, body{ font-family: 'Source Sans Pro', sans-serif; font-size:15px; -webkit-font-smoothing: subpixel-antialiased!important; color:black; font-weight:400; height:100%; } a{ text-decoration:none; outline:none; } h1{ font-size:56px; color:white; font-weight:bold; text-transform:uppercase; line-height:1.2; } p{ font-size:19px; color:white; margin-top:50px; } h1 span{ color:#2fa68e; } ::selection { background: #fff; color:#2fa68e; } ::-moz-selection { background: #fff; color:#2fa68e; } .container{ position:absolute; width:100%; height:100%; } /* Start page */ .start-page{ position:relative; width:100%; height:580px; background:url('../img/background/start-page.jpg') 0px 0px fixed; } .start-page .opacity{ position:absolute; width:100%; height:580px; background:rgba(0,0,0,0.7); } .start-page .content{ position:relative; width:900px; margin:0 auto; height:580px; } .start-page .content .text{ position:absolute; text-align:center; margin:auto; top:0; left:0; bottom:0; right:0; width:500px; height:320px; } .start-page .content .text{ position:absolute; text-align:center; margin:auto; top:0; left:0; bottom:0; right:0; width:500px; height:320px; } .start-page .content .text .read-more{ width:183px; height:47px; margin:50px auto; line-height:47px; border:1px solid white; text-transform:uppercase; color:white; cursor:pointer; font-size:19px; background:none; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .start-page .content .text .read-more:hover{ color:black; background:white; } .start-page .content .arrow-down{ position: absolute; bottom: 110px; left: 50%; margin-left: -10px; width: 21px; height: 29px; background: url(../img/arrow-down.png) no-repeat center center; display: block; -webkit-animation: bounce-fade 1.2s infinite; /* Safari 4+ */ -moz-animation: bounce-fade 1.2s infinite; /* Fx 5+ */ -o-animation: bounce-fade 1.2s infinite; /* Opera 12+ */ animation: bounce-fade 1.2s infinite; /* IE 10+ */ } @-webkit-keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } @-moz-keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } @-o-keyframes bounce-fade { 0% { opacity: 0; bottom:70px; } 100% { opacity: 1; bottom: 35px; } } @keyframes bounce-fade { 0% { opacity: 0; bottom: 70px; } 100% { opacity: 1; bottom: 35px; } } /* Menu mobile */ .menu-media{ position:relative; width:100%; height:90px; background:#2f363e; z-index:1000; display:none; } .menu-media .menu-content{ width:280px; position:relative; margin:0 auto; } .menu-media .menu-content .logo { color:white; font-weight:700; font-size:30px; width:200px; line-height:90px; float:left; list-style: none; } .menu-media .menu-content .icon{ width:41px; height:23px; float:right; line-height:100px; } /* Menu */ .menu{ position:relative; width:100%; height:90px; background:#2f363e; z-index:1000; } .menu-content{ width:900px; position:relative; margin:0 auto; } .menu-content .logo { color:white; background:#2f363e; font-weight:700; font-size:30px; width:300px; line-height:90px; float:left; list-style: none; } .menu-click{ display:none; } .menu-click li { position:relative; width:100%; height:70px; color:white; font-size:29px; text-align:center; line-height:70px; background:#2fa68e; z-index:1000; border-bottom:1px solid #1a7966; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .menu-click li:hover { color:#2f363e; } .menu-content ul{ width:500px; left:50%; float:right; text-align:right; list-style:none; } .menu-content li{ display:inline-block; position:relative; } .menu-content li a{ color:#a3b2c0; font-size:16px; display: block; padding: 0 20px 0 20px; line-height:90px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .menu-content li.active a{ background-color:#131a21; } .menu-content li a:hover{ color:white; } /* About us */ .about-us{ position:relative; width:900px; margin:0 auto; margin-bottom:10px; } .about-us h1{ font-size:56px; color:black; text-align:center; margin-top:50px; font-weight:bold; text-transform:uppercase; line-height:1.2; } .about-us hr{ color: black; margin-top:30px; background-color: black; height: 1px; width:340px; border:0; } .about-us p.title{ color: #919191; margin-top:40px; width:100%; font-size:15px; text-align:center; } .about-us h2{ text-align:center; margin-top:20px; font-size:29px; color:black; line-height:1.2; width:100%; position:relative; font-weight:bold; } .about-us p{ text-align:center; margin-top:20px; font-size:15px; width:100%; color:#919191; line-height:1.4; position:relative; font-weight:400; } .about-us .column-one{ margin-top:40px; width:300px; float:left; margin-bottom:70px; height:350px; } .about-us .column-one .circle-one{ height: 174px; position:relative; margin:0 auto; border:8px solid #ebebeb; background: url(../img/icons/responsive.png) #f3f3f3 no-repeat center center; -moz-border-radius:174px; -webkit-border-radius:174px; border-radius: 174px; width: 174px; cursor:pointer; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .about-us .column-one .circle-one:hover{ background: url(../img/icons/responsive.png) #2fa68e no-repeat center center; } .about-us .column-two{ margin-top:40px; width:300px; float:left; margin-bottom:70px; height:350px; } .about-us .column-two .circle-two{ height: 174px; position:relative; margin:0 auto; border:8px solid #ebebeb; background: url(../img/icons/minimalist.png) #f3f3f3 no-repeat center center; -moz-border-radius:174px; -webkit-border-radius:174px; border-radius: 174px; width: 174px; cursor:pointer; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .about-us .column-two .circle-two:hover{ background: url(../img/icons/minimalist.png) #2fa68e no-repeat center center; } .about-us .column-three{ margin-top:40px; width:300px; float:left; margin-bottom:70px; height:350px; } .about-us .column-three .circle-three{ height: 174px; position:relative; margin:0 auto; border:8px solid #ebebeb; background: url(../img/icons/free.png) #f3f3f3 no-repeat center center; -moz-border-radius:174px; -webkit-border-radius:174px; border-radius: 174px; width: 174px; cursor:pointer; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .about-us .column-three .circle-three:hover{ background: url(../img/icons/free.png) #2fa68e no-repeat center center; } /* Portfolio */ .portfolio{ position:relative; width:100%; background:#23282d; } .portfolio .portfolio-margin{ position:relative; width:900px; overflow:hidden; margin:0 auto; } .portfolio .portfolio-margin .read-more{ width:183px; height:47px; position:relative; margin:50px auto; line-height:47px; border:1px solid white; text-transform:uppercase; text-align:center; color:white; cursor:pointer; font-size:19px; background:none; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .portfolio .portfolio-margin .read-more:hover{ color:black; background:white; } .portfolio .portfolio-margin h1{ font-size:56px; color:white; padding-top:50px; text-align:center; font-weight:bold; text-transform:uppercase; line-height:1.2; } .portfolio .portfolio-margin hr{ color: black; margin-top:30px; background-color: white; height: 1px; width:340px; border:0; } /* Portfolio grid */ .grid{ margin-top:70px; width:100%; position:relative; margin-bottom:70px; overflow:hidden; } .grid li{ width:300px; height:225px; float: left; position: relative; overflow: auto; } .grid img{ width: 100%; height: 225px; float: left; position: relative; } .grid .text { position: absolute; width: 300px; height: 225px; background: #2fa68e; z-index: 2; opacity:0; } .grid p { font-size: 29px; text-align:center; margin-top:80px; font-weight: bold; color: #FFF; } .grid p.description { font-size: 15px; width:300px; margin-top:20px; text-align:center; font-weight: 400; color: #FFF; } .clear { clear:both; } /* Partners */ .partners{ position:relative; width:100%; height:307px; background:url('../img/background/partners.jpg') 0px 0px fixed; } .partners .opacity{ position:absolute; width:100%; height:307px; background:rgba(0,0,0,0.8); } .partners .content{ position:absolute; width:900px; height:190px; margin:auto; top:0; bottom:0; left:0; right:0; } .partners h2{ color:white; font-size:32px; font-weight:300; text-align:center; } .partners .logo{ position:relative; width:900px; overflow:hidden; margin-top:50px; text-align:center; } .partners .logo img{ opacity:0.5; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .partners .logo img:hover{ opacity:1; } /* Contact */ .contact{ position:relative; width:900px; margin: 0 auto; } .contact h1{ font-size:56px; color:black; padding-top:50px; text-align:center; font-weight:bold; text-transform:uppercase; line-height:1.2; } .contact hr{ margin-top:30px; background-color: black; height: 1px; width:340px; border:0; } .contact .content{ position:relative; width:900px; overflow:hidden; margin: 60px 0 65px 0; } .contact .content .form{ width:455px; overflow:hidden; height:auto; float:left; } .contact .content .contact-text{ width:405px; overflow:hidden; height:auto; float:left; padding-left:40px; color:black; font-size:17px; line-height:1.7; } strong{ font-weight:700; } input{ width:420px; height:40px; background:#23282d; border:0; color:white; font-weight:bold; line-height:40px; padding-left:35px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; font-family: 'Source Sans Pro', sans-serif; font-size:17px; margin-bottom:10px; } textarea{ width:420px; height:283px; background:#23282d; border:0; color:white; font-weight:bold; padding:15px 0 0 35px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; font-family: 'Source Sans Pro', sans-serif; font-size:17px; margin-bottom:10px; } .contact .content .form .button{ width:142px; height:34px; float:right; margin:0; background:#23282d; border:0; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius: 4px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .contact .content .form a .button{ text-align:center; color:white; font-weight:bold; line-height:34px; font-size:17px; } .contact .content .form .button:hover{ color:white; background:#2fa68e; } /* Footer */ .footer{ position:relative; width:100%; height:90px; background:#23282d; } .footer .margin{ position:relative; width:900px; margin:0 auto; height:90px; } .footer .margin .menu-footer{ width:450px; margin:0 auto; float:left; } .footer .margin .menu-footer a{ line-height:90px; padding-right:25px; color:#5f666e; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .footer .margin .menu-footer a:hover{ color:white; } .footer .margin .copyright{ width:420px; margin:0 auto; text-align:right; float:left; line-height:90px; padding-right:25px; color:#5f666e; }