html, body{ margin: 0; padding: 0; }
h2{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 35px; color: #b18331; }
h3{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 35px; line-height: 110%; color: #FFF; }
p, a, a:hover{ font-family: "fira-sans", Arial; font-weight: 100; font-size: 35px; color: #FFF; line-height: 110%; text-decoration: none; }
p strong, a strong{ font-family: "fira-sans",Arial; font-weight: 600; font-size: 35px; line-height: 110%;  }
p strong.big{ font-weight: 700; font-size: 110px; line-height: 80%;  }
html .mobile{ display: none; }
.calltoaction{ width: 500px; text-align: center; position: fixed; bottom: 0px; right: 8.33333%; z-index: 999; }
.calltoaction a{ background: url(../img/button_background.jpg) repeat-x bottom; display: inline-block; line-height: 62px; width: 80%; max-width: 460px; font-size: 20px; }
.calltoaction a strong{ font-size: 20px; }

.fullwidth{ width: 100%; display: inline-block; }
.panel{ max-width: 1100px; position: relative; margin: 0 auto; padding: 0 15px; }
.panel.landing{}
.panel > .left{ width: 50%; float: left; }
.panel  > .right{ width: 50%; float: left; }
.panel.arrow{}
html .row{ margin: 0; }
.clear{ clear: both; height: 0; }
.bluebackground{ min-height: 410px; background: url(../img/background_blue.jpg) repeat-x bottom #b18331; }
.bluestart{ background: #dbbc5e; }
.blueend{ background: #dbbc5e; }
.maincontainer{ max-width: 1150px; margin: 0 auto; position: relative; }
.headscontainer{ position: relative; overflow: hidden; padding: 0; }
.headscontainer.first{ z-index: 999; }
.headscontainer.one{ min-height: 230px; max-height: 230px;}
.heads{ width: 150%; margin: 0 auto; overflow: hidden; position: absolute; }
.heads.one{ max-height: 230px; }
.face{ width: 230px; height: 230px; background-size: cover; float: left; opacity: 0; }

.logo{ max-width: 460px; width: 100%; height: 74px; background: url(../img/logo.png) no-repeat center center #FFF; }
.intro{ position: relative; }
.intro p{ margin: 80px 0 0 0; }
.intro .languages{ text-align: right; padding-top: 20px; }
.intro .languages ul li{ display: inline-block; margin-left: 10px; }
.intro .languages ul li a{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 14px; color: #c9a86f; }
.intro .languages ul li a:hover{ color: #FFF; text-decoration: none; }
.intro .languages ul li.active a{ color: #FFF; }
.intro .cardholder{ margin-top: 20px; background-size: 100% auto; padding-top: 20px; }
.intro .cardholder img{ width: 100%; max-width: 625px; }
.intro .arrowout{ text-align: center; position: absolute; bottom: -175px; z-index: 99; width: 235px; height: 104px; background: url(../img/big_arrow_down.png) no-repeat center center; display: none;  }
.intro .arrowout p{ width: 100px; line-height: 48px; color: #946225; display: inline-block; font-family: "fira-sans",Arial; font-weight: 600; font-size: 20px; margin: 0; background: url(../img/arrow_middle_big_arrow.png) no-repeat center center; }

.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-30px);} 
    60% {-webkit-transform: translateY(-15px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-30px);} 
    60% {transform: translateY(-15px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}

.nav .navbutton{ width: 23.5%; float: left; margin-right: 2%; }
.nav .navbutton.last{ margin: 0;}
.nav .navbutton:hover, .nav .navbutton.selected{ background-color: #b18331; cursor: pointer; }
.nav .navbutton .center{ width: 100%; vertical-align: top;  /*height: 121px; float: left; */ border-left: 1px solid #FFF; border-right: 1px solid #FFF; border-top: 1px solid #FFF; }
.nav .navbutton .center p{ margin-bottom: 0px; }
.nav .navbutton .bottom{ width: 100%; height: 10px; float: left; background: url(../img/navbutton-bottom4.png) center no-repeat; }
.nav .navbutton:hover .bottom, .nav .navbutton.selected .bottom{ background: url(../img/navbutton-bottom.png) center no-repeat; }
.nav .navbutton:hover .center, .nav .navbutton.selected .center{ border-color: transparent; }
.nav .navbutton p{ font-size: 18px; padding-left: 30px; /*height: 121px;*/ padding: 30px 30px 30px 100px; margin: 0;  }
.nav .navbutton.one p{ background: url(../img/icon1.png) no-repeat 20px center; }
.nav .navbutton.two p{ background: url(../img/icon2.png) no-repeat 20px center; }
.nav .navbutton.three p{ background: url(../img/icon3.png) no-repeat 16px center; }
.nav .navbutton.four p{ background: url(../img/icon4.png) no-repeat 20px center; }

.slidertestimonials .row.content{ margin-top: 20px; }
#testimonials .item, #testimonials .panel{ min-height: 534px; padding-top: 40px; }
#testimonials .item  .panel > div{ margin-left: 500px; }
#testimonials .item .textcontainer em{ font-family: "fira-sans", Arial; font-weight: 600; font-size: 60px; color: #b18331; font-style: normal; }
#testimonials .item .textcontainer{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 30px; color: #b18331; }
#testimonials .item .quotecontainer > div{ display: inline-block; }
#testimonials .item .quotecontainer .center{ width: 93%; }
#testimonials .item .quotecontainer .right{ width: 5%; min-width: 30px; min-height: 30px; }
#testimonials .item .quotecontainer p{ font-family: "fira-sans", Arial; font-weight: 100; font-style: italic; font-size: 20px; color: #b18331; line-height: 180%; letter-spacing: 1px; }
#testimonials .item .quotecontainer p strong{ font-size: 20px; }
#testimonials .sofia{ background: url(../img/sofia.png) no-repeat bottom left; }
#testimonials .claudio{ background: url(../img/claudio.png) no-repeat bottom left; }
#testimonials .alex{ background: url(../img/alex.png) no-repeat bottom left; }
#testimonials .julia{ background: url(../img/julia.png) no-repeat bottom left; }

.slidertestimonials{ background-color: #ebd79e; padding-top: 20px; }
.accordion{ background-color: #ebd79e;  }
.accordion{ display: none; }

/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
.accordion-section{ border-top: 1px solid #b18331; }
.accordion-section > a:before{ content: "»  "}
/*----- Section Titles -----*/
.accordion-section-title {
    width: 100%;
    padding: 20px 20px;
    display:inline-block;
}
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}
.accordion-section-content img{ max-width: 200px; }
.accordion-section-content img.np{ display: none; }

.cornercardemotions{ padding: 0; }
.cornercardemotions .line{ background: url(../img/bg-line.jpg); repeat-x; height: 69px; }

.slideremotions{ padding: 0; }
.slideremotions { background: url(../img/slider_emotions.jpg) top center; background-size: cover; }
.slideremotions .textcontainer{ max-width: 50%; margin: 70px 0; padding: 50px; background: url(../img/bg-emotions.png); }
.slideremotions .textcontainer h3{ max-width: 80%; margin-bottom: 40px; margin-top: 0; }
.slideremotions .textcontainer p{ font-size: 20px; line-height: 190%; }
.slideremotions img{ margin: 60px 0 0 0; }

.videosection{ padding: 0; }
.videosection .phone{ background: url(../img/iphone.png) no-repeat bottom center; min-height: 680px; }
.videosection .textcontainer{ padding: 70px 0; }
.videosection .textcontainer img{ cursor: pointer; }
.videosection p{ margin-bottom: 50px; }
.videosection h4{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 35px; color: #b18331; margin-top: 0; margin-bottom: 50px; }
.videosection h4 strong{ font-weight: 600; }
.videosection p{ font-family: "fira-sans", Arial; font-weight: 100; font-style: italic; font-size: 20px; color: #b18331; line-height: 180%; letter-spacing: 1px; }
.videosection .showvideo{ width: 100%; background: url(../img/bg-video.png); position: absolute; z-index: 99; text-align: center; padding: 163px 0; }
.videosection .showvideo.closed { display: none; }
.videosection .showvideo img{ position: absolute; margin-left: 517px; cursor: pointer; }

.endsection{ background: url(../img/background_blue.jpg) repeat-x bottom #b28331; padding: 70px 0; }
.endsection .bg3cards{ text-align: center; }
.endsection .bg3cards img{ max-width: 100%; }
.endsection p{ font-size: 35px; margin: 20px 0 0 0; }
.endsection .textcontainer{ padding-top: 40px; }

.footer{ padding: 20px 0 20px 0; }
.footer .row{ margin: 10px 0; }
.footer ul{ margin: 0; padding: 0; list-style: none; }
.footer ul li{ display: inline-block; margin-right: 30px; }
.footer ul li a{ font-size: 14px; color: #b18331; font-weight: 600; }
.footer ul li a:hover{ text-decoration: underline; }
.footer .copyright p{ font-size: 14px; color: #b18331; }

@media only all and (max-width:1370px),(max-device-width : 1024px)  and (max-height:770px), (max-height:900px){ 
	.headscontainer.one{ max-height: 130px; min-height: 130px; }
	.headscontainer.second{ display: none; }
	.heads.one{ max-height: 130px; }
	.face{ max-width: 130px; max-height: 130px; }
	
	.panel { padding: 0 30px; }
	
	.intro .cardholder{ margin-top: 0; background-position: center 20px; }
	
	.intro p{ margin: 70px 0 30px; }
	p, a, a:hover{ font-size: 22px; }
	p strong.big{ font-size: 80px; }
	
	.nav .navbutton p{ background-image: none !important; padding: 15px !important; font-weight: 300; }
	#testimonials .item{ padding-top: 0px;}
	#testimonials .item .panel > div{ margin-left: 50%;  }
	#testimonials .item , #testimonials .item .panel{ min-height: 404px; background-size: auto 80%; background-position: 10% bottom; }
	
	#testimonials .item .textcontainer em{ font-size: 40px; }
	#testimonials .item .textcontainer{ font-size: 20px; padding-top: 30px; }
	#testimonials .item .quotecontainer p{ font-size: 16px; max-width: 98%; }
	
	.bluebackground{ min-height: 360px; }
	
	.endsection .panel > .right, .endsection .panel > .left{ width: 100%; }
	.endsection .textcontainer{ padding-top: 10px; text-align: center; }
	.intro .arrowout{ bottom: -140px; }
	
	.footer{ padding: 20px 0 60px 0; }
	
}
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {
	.arrowout{ display: none !important; }
}

@media only all and (max-width:1250px){ 

	.intro .arrowout{ bottom: -145px; }
}

@media only all and (max-width:1090px){ 

	.intro .arrowout{ bottom: -165px; }
}


@media only all and (max-width:1000px){ 

	.videosection .panel > .left{ width: 100%; }
	.videosection .panel > .right.phone{ display: none; }
}

@media only all and (max-width:870px){ 

	.intro .arrowout{ display: none !important; }
}


@media only all and (max-width:680px){ 
	.intro p{ margin: 30px 0 30px; }
	.headscontainer.one{ max-height: 75px; min-height: 75px; }
	.headscontainer.second{ display: none; }
	.heads.one{ max-height: 75px; }
	.face{ max-width: 75px; max-height: 75px; }
	
	
	
	body{ padding-bottom: 62px; }
	p, a, a:hover{ font-size: 20px; font-weight: 300; }
	p strong, a strong{ font-size: 26px; }
	.desktop{ display: none; }
	html .mobile{ display: block; }
	.panel.arrow{ display: none; }
	.fullwidth.logo{ width: 100%; max-width: 100%; }
	.fullwidth .logo{ width: 100%; max-width: 100%; }
	
	.panel > .right, .panel > .left{ width: 100%; }
	.panel { padding: 0 20px; }
	.accordion{ display: block; }
	.nodesktop{ display: none; }
	.slideremotions .textcontainer{ max-width: 100%; }
	.intro .arrowout{ bottom: -100px; }
	.endsection .textcontainer{ padding-top: 0; }
	.slidertestimonials{ padding-top: 30px; }
	.slidertestimonials h2, .slidertestimonials em{ font-style: normal; margin: 0 0 30px 0; font-size: 20px; font-weight: 600; }
	.slidertestimonials span{ font-weight: 600; }
	.slidertestimonials .accordion-section-content > div{ text-align: center; border-bottom: 1px solid #b18331;  }
	.langholder{ background: #b28331; }
	.langholder .languages{ text-align: right; padding-top: 20px; }
	.langholder .languages ul li{ display: inline-block; margin-left: 10px; }
	.langholder .languages ul li a{ font-family: "fira-sans", Arial; font-weight: 300; font-size: 14px; color: #c5a467; }
	.langholder .languages ul li a:hover{ color: #FFF; text-decoration: none; }
	.langholder .languages ul li.active a{ color: #FFF; }
	.langholder .languages{ text-align: center; padding-top: 0; }
	.langholder .languages ul{ padding-left: 0px; }
	.langholder .languages ul li.one{ margin-left: 0; }
	
	.videosection h4{ line-height: 120%; }
	.intro .cardholder{ padding-bottom: 30px; background-size: 100%; }
	.logo{ background-size: 200px; height: 54px; }
	
	.accordion-section > a{ color: #b18331; }
	.accordion-section-content{ color: #b18331; font-family: "fira-sans", Arial; font-size: 15px; }
	
	.videosection h4{ font-size: 20px; margin-bottom: 30px; }
	.videosection p{ font-size: 15px; }
	.videosection img{ margin: 0 auto; }
	
	.slideremotions .textcontainer h3{ font-size: 20px; max-width: 100%; }
	.slideremotions .textcontainer p{ font-size: 15px; }
	.slideremotions img{ margin-top: 30px; margin: 0 auto; }
	.videosection .textcontainer{ padding: 30px 0; }

	.slideremotions .textcontainer{ margin: 30px 0; }
	
	.slideremotions .textcontainer{ padding: 30px; }
	.endsection{ padding: 30px 0; }
	
	.endsection p{ font-size: 20px; }
	
	.bluebackground{ min-height: 330px; }
	
	.calltoaction, .calltoaction a{ width: 100%; right: 0; }
	
	.calltoaction a{ font-size: 15px; }
	.calltoaction a strong{ font-size: 17px; }
}