/* Thomsoon.com - OnePage CSS Responsive theme
-- version 1.0
-- Copyright (c) 2014 Thomsoon.com
-- licensed under the MIT
--
-- http://www.thomsoon.com/
--
*/

/* Font Google - strong reaload time */
@import url(http://fonts.googleapis.com/css?family=Lato:400,300,100,700,900&subset=latin,latin-ext);
@import "https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.3/flexslider.min.css";


/*
 * Theme Name: Onepage
 * Author: Thomsoon
 * Created: 14/11/2014
 */


.preloader{
  position:fixed;
  width:100%;
  height:100%;
  background:white;
  z-index:99999;
}
 
.preloader .item{
  position:absolute;
  width:100px;
  height:100px;
  left:50%;
  top:50%;
  margin-left:-50px;
  margin-top:-50px;
} 


html, body{
  font-family: 'Lato', sans-serif;
  font-size:15px;
  -webkit-font-smoothing: subpixel-antialiased!important;
  color:black;
  font-weight:400;
  height:100%;
}

a{
  text-decoration:none;
  outline:none;
  font-size:14px;
}

h1{
  font-size:24px;
  color:#333;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:6px;
  line-height:1.2;
    padding:20px 0px;
}

#home h1{
    line-height: 50px;
    text-align: center !important;
    text-shadow: 1px 2px 2px #000000;
}
.flexslider h1{
    font-size:18px;
  color:#222;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:1px;
  line-height:1.2;
margin-top: 20px;
}
p{
  font-size:14px;
  color:white;
  font-weight:300;
  letter-spacing:1px;
  margin-top:40px;
}


h1 span{
  color:#2fa68e;
}


::selection {
  background: #f9a53a;
  color:white;
}

::-moz-selection {
  background: #f9a53a;
  color:white;
}


.container{
  position:absolute;
  width:100%;
  height:100%;
}

.wrapper{
    position:relative;
    width:100%;
    max-height:650px;
    margin:0 auto !important;
}

/*
#com-01, #com-02{    display:none;}
*/

/* Start page */

.start-page{
  position:relative;
  width:100%;
  height:93%;
  z-index:10;
    top:0;
  background:url('../img/start-page.jpg') #c0c0c0 center center fixed no-repeat !important;
  -webkit-background-size: cover !important;
  -moz-background-size: cover !important;
  -o-background-size: cover !important;
  background-size: cover !important;
background-position: top center !important;

}

.start-page hr{
  color: white;
  margin-top:30px;
  background-color: white;
  height: 1px;
  width:106px;
  border:0;

}

.start-page .opacity{
  position:absolute;
  width:100%;
  height:100%;
/*  background: radial-gradient(rgba(180,150,80,0.3), #f9a53a); */
}


.brief{
    color:#7a540a;
    font-size:18px;
    position:relative;
    width:60%;
    margin:200px auto;
    height:auto;
    line-height: 24px;
    background-color: rgba( 255,255,255, 0.90);
    border-radius:100px;
    padding: 30px 70px;
}
.

.content{
    width:100%;
}
.start-page .content .text{
  position:relative;
  text-align:center;
  margin:auto;
  top:0; 
  left:0; 
  bottom:0; 
  right:0;
/*  width:700px;*/
    width:100%;
  height:400px;
}

.start-page .content .text .logo{
  width:123px;
  height:123px;
  margin:0 auto 50px;
  
}



.start-page .content .text .read-more{
  width:183px;
  height:47px;
  margin:auto auto auto auto;
  line-height:47px;
  border:1px solid #7c7048;
  text-transform:uppercase;
  color:#7c7048;
  display:block;
  cursor:pointer;
  font-size:14px;
  letter-spacing:1px;
  background:rgba(255,255,255, 0.1);
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.start-page .content .text .read-more:hover{
  color:white;
  background: #f9a53a;
  border:1px solid #f9a53a;
}

.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:#f9a53a;
  z-index:1000;
  display:none;
}

.menu-media .menu-content{
    width:80%;
/*  width:280px;*/
  position:relative;
  margin:0 auto;
}

.menu-media .menu-content .logo {
   color:white;
   font-weight:700;
   font-size:24px;
   width:80%;
   line-height:90px;
   float:left;
   list-style: none;
}

.menu-media .menu-content .icon{
  width:41px;
  height:23px;
  float:right;
  line-height:100px;
}

.menu-click{
  display:none;
}


.menu-click li {
  position:relative;
  width:100%;
  height:70px;
  color:#333333;
  font-size:18px;
  text-align:center;
  line-height:70px;
  z-index:1000;
  border-bottom:1px solid #f2f2f2;
  -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:#f9a53a;
 }


/* Menu */

.menu{
 position:relative;
  width:100%;
  height:60px;
  background:white;
  border-bottom: 1px solid #f2f2f2;
  z-index:1000;
  box-shadow: 0px 2px 7px #999;
}

.menu-content{
  width:900px;
  position:relative;
  margin:0 auto;
}

.menu-content .logo {
   color:#333;
   font-weight:700;
   font-size:24px;
   width:300px;
   line-height:60px;
   float:left;
   list-style: none;
 }

.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:#333;
  font-size:16px;
  display: block;
  padding: 0 20px 0 20px;
  line-height:60px;
  -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{
  color:#f9a53a;
}

.menu-content li a:hover{
  color:#f9a53a;
}


/* About us */

.about-me{
  position:relative;
  width:100%;
  background:white;
  z-index:10;
}

.about-me .content{
  position:relative;
  width:900px;
  margin: 0 auto;
  overflow: hidden;
    padding:0px 0px 50px 0px;
}

.about-me h1{
  font-size:34px;
  color:black;
  text-align:center;
    vertical-align: top;
  margin-top:80px;
  letter-spacing:6px;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.2;

}
.focus{
    border: 10px solid #ededed;
    padding: 20px !important; 
}
.about-me .content h1 .focus-icon{
 display:inline-block;
  position:relative;
border: 1px solid #ffffff !important;
  width: 60px;
    height:60px;
    vertical-align: middle;
}
img{
    border:transparent !important;
}
.about-me hr{
  color: black;
  margin-top:30px;
  background-color: black;
  height: 1px;
  width:106px;
  border:0;

}

.about-me p.title{
   color: #555;
  margin:30px auto;
  width:90%;
  line-height:26px;
  letter-spacing:0;
  font-size: 16px;
  font-weight:400;
  text-align:justify;
    padding:0px 15px;
}

.about-me h2{
  text-align:center;
  margin-top:50px;
  font-size:26px;
  color:black;
  line-height:1.2;
  letter-spacing:6px;
  width:100%;
  position:relative;
  font-weight:400;
}

.about-me p{
 text-align:center;
  font-size: 16px;
  width: 260px;
  margin:30px auto;
  color:#454545;
  line-height:26px;
  letter-spacing:0;
  position:relative;
  font-weight:300;
}

.about-me .column-one{
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}




.about-me .column-one .circle-one{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/ux.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  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-me .column-one .circle-one:hover{
  border:2px solid #f9a53a;

}

.about-me .column-two{
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}

.about-me .column-two .circle-two{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/rdesign.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
    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-me .column-two .circle-two:hover{
  border:2px solid #f9a53a;
}


.about-me .column-three{ 
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:70px;
  height:350px;
}

.about-me .column-three .circle-three{ 
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/free.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  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-me .column-three .circle-three:hover{ 
  border:2px solid #f9a53a;
}

.about-me .column-four{ 
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:20px;
  height:350px;
}
.about-me .column-four .circle-four{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/develop.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  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-me .column-four .circle-four:hover{
  border:2px solid #f9a53a;

}

.about-me .column-five{ 
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:20px;
  height:350px;
}
.about-me .column-five .circle-five{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/animation.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  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-me .column-five .circle-five:hover{
  border:2px solid #f9a53a;

}

.about-me .column-six{ 
  margin-top:40px;
  width:300px;
  float:left;
  margin-bottom:20px;
  height:350px;
}
.about-me .column-six .circle-six{
  height: 100px;
  position:relative;
  margin:0 auto;
  border:2px solid #f0f0f0;
  background: url(../img/icons/widget.png) white no-repeat center center;
  -moz-border-radius:100px;
  -webkit-border-radius:100px;
  border-radius: 100px;
  width: 100px;
  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-me .column-six .circle-six:hover{
  border:2px solid #f9a53a;

}

/* Portfolio */


.portfolio{
  position:relative;
  width:100%;
  background:#f3f3f3;
  z-index:10;

}

.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 100px;
  line-height:47px;
  border:1px solid #333333;
  text-transform:uppercase;
  text-align:center;
  color:#333333;
  cursor:pointer;
  font-size:14px;
  background:none;
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
	letter-spacing:1px;
}

.portfolio .portfolio-margin .read-more:hover{
  background:#f9a53a;
  color:white;
  border:1px solid #f9a53a;
}

.portfolio .portfolio-margin h1{
  font-size: 24px;
  color:black;
  text-align:center;
   margin-top:20px; 
  letter-spacing:6px;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.2;
  padding: 10px 0px;
}

.portfolio .portfolio-margin hr{
  color: black;
  margin-top:30px;
  background-color: black;
  height: 1px;
  width:106px;
  border:0;
}




/* Portfolio grid */

.grid{
  margin-top:70px;
  width:100%;
  position:relative;
  margin-bottom:70px;
  overflow:hidden;
}

.grid li{
  width:280px;
  margin:0 15px 15px 0;
  float: left;
  position: relative;
  overflow: hidden;
  border:1px solid #cccccc;
  box-shadow: 0px 4px 8px #cdcdcd;
}

.grid img{
  width:285px;
  float: left;
  position: relative;
}

.grid .text {
  position: absolute;
  width: 285px;
  height:100%;
  background: rgba(250,250,250,0.9);
  z-index: 2;
  color: #2222222;
  opacity:1;
  -webkit-transition: all 0.6s ease-in;
  -moz-transition: all 0.6s ease-in;
  -ms-transition: all 0.6s ease-in;
  -o-transition: all 0.6s ease-in;
  transition: all 0.6s ease-in;
}

.grid .text:hover {
  opacity:0;
}

.grid .no-text {
  position: absolute;
  width: 285px;
  height:100%;
  background: rgba(173,160,116,0.5);
  z-index: 2;
  opacity:1;
  -webkit-transition: all 0.6s ease-in;
	-moz-transition: all 0.6s ease-in;
	-ms-transition: all 0.6s ease-in;
	-o-transition: all 0.6s ease-in;
	transition: all 0.6s ease-in;
}

.grid .no-text:hover {
  opacity:1;
}

.grid p {
    width:300px;
  font-size: 18px;
  text-align:center;
  line-height:26px;
  margin-top:90px;
  font-weight: bold;
  letter-spacing:1px;
  color: #333333;
}

.grid p.description {
  font-size: 12px;
  width:300px;
  margin-top:20px;
  text-align:center;
  line-height:20px;
  font-weight: 400;
  color: #333333;
  position:relative;
}

.clear { 
    clear:both; 
}

/* Partners */

.partners{
  position:relative;
  width:100%;
  z-index:10;
  height:400px;
  background:url('../img/partners.jpg') 0px 0px fixed;
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.partners .opacity{
  position:absolute;
  width:100%;
  height:400px;
  background:rgba(79,79,79,0.6);
}

.partners .content{
  position:absolute;
  width:900px;
  height:190px;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

.partners h2{
  color:white;
  letter-spacing:1px;
  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;
}
.half-grid{
    width:45% !important;
    height:auto;
    display:inline-block;
    margin:25px auto;
       vertical-align: text-top;
}

.half-grid h3{
    font-size:16px;
       font-weight: bold;
    color:#222222;
}
.half-grid img{
    width:200px;
    height:auto;
     margin:10px auto;
}

.half-grid p{
   font-size:16px;
    color:#222222;
    width: 360px;
    height:auto;
    display:block;
    text-align: center;
    margin:0 auto;
    padding: 10px;
    
}

.center-align{
    margin:0 auto;
}

.hobby{
    width:100%;
    height:700px;
    display:block;
}


.hobby .container{
 width:100%; 
  display:block;
  height:auto;
  font-weight:300;
  color:black;
  font-size:14px;
  line-height:26px;
  text-align: center;
}


.hobby  .container h1{
  font-size:34px;
  color:black;
  text-align:center;
  margin:40px auto auto auto;
  letter-spacing:6px;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.2;
}
.hobby  .container h4{
  font-size:18px;
  color:black;
  text-align:center;
  margin:40px auto auto auto;
  letter-spacing:6px;
  font-weight:bold;
  text-transform:uppercase;
  line-height:1.2;
}

strong{
  font-weight:700;

}

/* Footer */


.footer{
  position:fixed;
  bottom:0;
  width:100%;
  background:#444;
}

.footer .logo{

  position:relative;
  width:58px;
  height:58px;
  margin: 0 auto;
  padding-top:50px;

}

.footer .menu-footer{
  width:80%;
  text-align:center;
  margin:0 auto;
  padding-top:30px;
  overflow: hidden;
  position:relative;  
}


.footer .menu-footer a{
  line-height:46px;
  padding:10px;
  color:#f1f1f1;
  -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 .menu-footer a:hover{
  color:#f9a53a;
}


.footer .copyright{
  width:80%;
  position:relative;
  font-weight:300;
  margin:0 auto;
  padding:30px 0 50px;
  text-align:center;
  font-size:14px;
  line-height:36px;
  color:#000;
}

.flexslider{
    max-width:800px;
    height:auto;
    margin:0px auto;
    border:8px solid #f1f1f1;
    padding:1em;
            }

li a.caption { 
  font-size:14px;
  background: tomato; 
  color: white;
  position: absolute;
  bottom: 0;
  padding:0.6em 1em;
  border-radius:20px;
  text-decoration: none;
  opacity:0.80;
  z-index:1000;
    float:left;
/* margin:10px;*/
}
           li a.caption:hover{
                opacity:1.0;
            }


.flex-control-paging li a{
    width:8px;
    height:8px;
    
}

.flex-control-paging li a.flex-active{
    background:rgba(150,130,100,1) !important;
}
.flex-direction-nav a, .flex-direction-nav a:before{
    color:rgba(173,160,116,1)!important;
}

.gif{
     width: auto !important;
    height: 400px !important;
    margin:0 auto;
}

.title-container{
   color:#222222;
    width:780px;
	max-width:780px;
    height:auto;
    display: table;
    margin:0 auto;
    padding: 0px 0px;
}
.back-arrow{
    margin:10px;
    padding:0px;
    display:table-cell;
    float:right;
    z-index:1;
    cursor: pointer;
}

.back-arrow img{
    width:35px;
    height:35px;
}
.title-container h1{
    font-size: 30px;
    padding-top:12px;
    padding-left:10px;
    letter-spacing:2px;
 	color:#222222;   
    text-transform: inherit;
}

.popup{
    overflow-x: hidden;
    overflow-y: hidden;
}

/* <<< footer >>> */
footer { overflow: hidden; width: 100%; text-align: center; background: #444; position:relative;}
footer .Cntr { padding:  10px 0px 0px; max-width: 1100px; margin: auto; height:50px;}
footer .Cntr p { padding: 0px; font-size: 11px; color: #ffffff; font-family:'Open Sans'; margin: 0px; }
footer .Cntr a { color: #a9abad; text-decoration: none; }
footer .Cntr a:hover { color: #fff; }
footer .Cntr ul { display:block; position:relative; width:100%; list-style: none;}
footer .Cntr ul li { width:40px; height:auto; display:inline-block;	padding-bottom:5px; 	position:relative;	text-decoration:none;}
footer .Cntr ul li img { width:60%; float:left;	display:block;	position:relative;	text-decoration:none;}
footer .Cntr ul li a { text-decoration: none; }