@charset "utf-8";

/* Fonts --------------------------------------------------------*/
@font-face {
    font-family: 'sansationbold';
    src: url('../fonts/sansation_bold.eot');
    src: url('../fonts/sansation_bold.eot?#iefix') format('embedded-opentype'),
         url('../fonts/sansation_bold.woff') format('woff'),
         url('../fonts/sansation_bold.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

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

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), 
		url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), 
		url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), 
		url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), 
		url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* NeedWork Good ~ Font */
@font-face {
    font-family: 'Needlework-Good';
    src: url('../fonts/NeedleworkGood.eot');
    src: url('../fonts/NeedleworkGood.eot?#iefix') format('embedded-opentype'),
    url('../fonts/NeedleworkGood.woff2') format('woff2'),
    url('../fonts/NeedleworkGood.woff') format('woff'),
    url('../fonts/NeedleworkGood.ttf') format('truetype'),
    url('../fonts/NeedleworkGood.svg#NeedleworkGood') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "Flaticon";
    src: url("../fonts/Flaticon.eot");
    src: url("../fonts/Flaticon.eot?#iefix") format("embedded-opentype"),
    url("../fonts/Flaticon.woff") format("woff"),
    url("../fonts/Flaticon.ttf") format("truetype"),
    url("../fonts/Flaticon.svg#Flaticon") format("svg");
    font-weight: normal;
    font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: "Flaticon";
        src: url("../fonts/Flaticon.svg#Flaticon") format("svg");
    }
}

/******************************* RESET *******************************/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video 
{margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
html {overflow-y: scroll;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}
ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
ins {background-color:#ff9; color:#000; text-decoration:none;}
mark {background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}
del {text-decoration: line-through;}
abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}
table {border-collapse:collapse; border-spacing:0;}
hr {display:block; height:0; background-color: #c7c7c7; border-top: 1px solid #c7c7c7; border-left:0; border-right:0; border-bottom: 1px solid #FFF; margin:1em 0; padding:0;}
*+html hr {height: 2px;}

/* Standar Styles --------------------------------------------------------*/
html,
body {
  width: 100%;
  height: 100%;
}

body {
  background: url('../images/bg.gif');
  font-family: 'sansationregular';
}

.background {
  width: 100%;
  height: 900px;
  background: url('../images/background.jpg') no-repeat center top;
}

::-webkit-input-placeholder {
   color: #FFF;
}

:-moz-placeholder { /* Firefox 18- */
   color: #FFF;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #FFF;  
}

:-ms-input-placeholder {  
   color: #FFF;  
}

textarea:hover, 
input:hover, 
textarea:active, 
input:active, 
textarea:focus, 
input:focus,
button:focus,
button:active,
button:hover {
  outline:0px !important;
  -webkit-appearance:none;
}

a:focus {
	outline: none;
}
/* Content Styles --------------------------------------------------------*/
.wrapper {
  margin: 0 auto;
  width: 990px;
  position: relative;
}

.turtle {
  position: absolute;
  top: 416px;
  left: 0;
}

.turtle {
  position: relative;
  float: left;
  -moz-animation: 6s ease 0s normal none infinite swing;
  -moz-transform-origin: center top;
  -webkit-animation:swing 6s infinite ease-in-out;
  -webkit-transform-origin:bottom;
  -o-animation: 6s ease 0s normal none infinite swing;
  -o-transform-origin: center top;
  -o-animation:swing 6s infinite ease-in-out;
  -o-transform-origin:bottom;
  -ms-animation: 6s ease 0s normal none infinite swing;
  -ms-transform-origin: center top;
  -ms-animation:swing 6s infinite ease-in-out;
  -ms-transform-origin:bottom;
  animation: 6s ease 0s normal none infinite swing;
  transform-origin: center top;
  animation:swing 6s infinite ease-in-out;
  transform-origin:bottom;
  z-index: 1000;
}

@-moz-keyframes swing {
  0%{-moz-transform:rotate(-6deg)}
  50%{-moz-transform:rotate(6deg)}
  100%{-moz-transform:rotate(-6deg)}
}

@-webkit-keyframes swing {
  0%{-webkit-transform:rotate(-6deg)}
  50%{-webkit-transform:rotate(6deg)}
  100%{-webkit-transform:rotate(-6deg)}
}

@-o-keyframes swing {
  0%{-o-transform:rotate(-6deg)}
  50%{-o-transform:rotate(6deg)}
  100%{-o-transform:rotate(-6deg)}
}

@-ms-keyframes swing {
  0%{-ms-transform:rotate(-6deg)}
  50%{-ms-transform:rotate(6deg)}
  100%{-ms-transform:rotate(-6deg)}
}

@keyframes swing {
  0%{transform:rotate(-6deg)}
  50%{transform:rotate(6deg)}
  100%{transform:rotate(-6deg)}
}

.shadow {
  position: absolute;
  top: 756px;
  left: 0;
  width: 619px;
  height: 79px;
  background: url('../images/shadow.png') no-repeat;
}

.wall-p-c {
  position: absolute;
  top: 420px;
  left: 550px;
}

.description {
  position: absolute;
  top: 120px;
  left: 64px;
}

.description h1 {

  font-size: 110px;
  color: #FFF;
}

.description h2 {

  font-size: 52px;
  color: #f5d4ff;
  margin-bottom: 10px;
}


.description h2::after {
font-family: Flaticon;
    content: '\f12d';
    color: #fff;
    position: absolute;
    top: 29px;
    right: 50px;
    font-size: 70px;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}


.description h2 span.rBot-1 {
    position: absolute;
    right: -55px;
    bottom: -96px;
    color: #fff;
    font-size: 150px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -ms-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}


.description h1 span.lTop {
    position: absolute;
    top: -105px;
    left: -75px;
    color: #ffffff;
    font-size: 150px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

.social{bottom:-90px;position:absolute;z-index:2;color:#fff;}
.social span{float:left;margin-right:15px}
.social b{float:left;display:block;line-height:30px}
.social small{display:block}
.social .btn{float:left}
.social .btn a{font-size:17px;color:#fff;width:39px;height:39px;border:1px solid rgba(255,255,255,.5);float:left;margin-right:10px;border-radius:50px;line-height:41px;transition:all 250ms}
.social .btn a:hover{background:#fff;color:#a38d51;transition:all 250ms}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.description p {
  font-family: Tahoma, Verdana, Arial, Helvetica;
  font-size: 22px;
  color: #d1e881;
}

.sidebar {
  position: absolute;
  top: 434px;
  left: 720px;
}

.sidebar form {
  margin-bottom: 10px;
}

.sidebar input[type='text'],
.sidebar input[type='search'] {
  width: 260px;
  height: 55px;
  font-weight: bold;
  font-family: 'sansationregular';
  background: url('../images/icon-link2.png') no-repeat;
  border: 0;
  color: #FFF;
  font-size: 15px;
  text-align: center;
  letter-spacing: 1px;
}

.sidebar input[type='submit'] {
  float: left;
  width: 54px;
  height: 54px;

  border: 0;
  cursor: pointer;
}

.title {
  color: #FFF;
  font-size: 14px;
  padding: 10px 0 10px 0px;

}

.links ul {
  margin: 5px 0 0 73px;
}

.links ul li a {
  display: inline-block;
  font-size: 11px;
  color: #c7dd75;
  text-decoration: none;
  padding: 3px 14px;
  margin-bottom: 5px;
}

.links ul li.active a,
.links ul li a:hover {
  background: #bed46f;
  color: #3b1a45;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
  border-radius: 9px;
}


/******************************* RESPONSIVE *******************************/
@media (max-width: 1000px) {
	.background {
	  background: url('../images/background.jpg') no-repeat center -56px;
	}
	.wrapper {
	  width: 768px;
	}
	.description h1 {
	  font-size: 94px;
	}
	.description h2 {
	  font-size: 32px;
	}
	.description p {
	  font-size: 22px;
	}
	.turtle {
	  top: 370px;
	  width: 500px;
	}
	.shadow {
	  top: 666px;
	  width: 560px;
	  background-size: 540px;
	}
	.wall-p-c {
	  width: 110px;
	  top: 401px;
	  left: 494px;
	}
	.sidebar {
	  width: 260px;
	  top: 561px;
	  left: 508px;
	}
}

@media (max-width: 768px) {
	.background {
	  background: url('../images/background.jpg') no-repeat center -175px;
	}
	.wrapper {
	  width: 580px;
	}
	.description {
	  top: 40px;
	}
	.description h1 {
	  font-size: 76px;
	}
	.description h2 {
	  font-size: 27px;
	}
	.description p {
	  font-size: 18px;
	}
	.turtle {
	  top: 248px;
	  left: 30px;
	}
	.shadow {
	  top: 544px;
	  left: 30px;
	}
	.wall-p-c {
	  left: 470px;
	}
	.sidebar {
	  width: 260px;
	  top: 635px;
	  left: 50%;
	  margin-left: -130px;
	}
	.links ul {
	  margin-bottom: 30px;
	}
}

@media (max-width: 580px) {
	.background {
	  background: url('../images/background.jpg') no-repeat center -349px;
	  height: 740px;
	}
	.wrapper {
	  width: 300px;
	}
	.description {
	  top: 20px;
	  left: 0;
	  padding: 0 20px;
	}
	.description h1 {
	  font-size: 54px;
	}
	.description h2 {
	  font-size: 22px;
	}
	.description p {
	  font-size: 18px;
	}
	.turtle {
	  top: 219px;
	  left: 0;
	  width: 274px;
	}
	.shadow {
	  top: 383px;
	  width: 300px;
	  background-size: 300px;
	  left: 0;
	}
	.wall-p-c {
	  left: 230px;
	  width: 63px;
	  top: 234px;
	}
	.sidebar {
	  width: 260px;
	  top: 455px;
	}
	.sidebar input[type='text'],
	.sidebar input[type='search'] {
	  width: 190px;
	}
}


.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 10px 0px 0px 0px;
    font-size: 14px;
    line-height: 1.42857143;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fa-foursquare:before {
    content: "\f180";
}
.fa-youtube:before {
    content: "\f167";
}
.fa-instagram:before {
    content: "\f16d";
}
.fa-facebook:before {
    content: "\f09a";
}

.fa-twitter:before {
    content: "\f099";
}


.fa-phone:before {
  content: "\f095";
}

.fa-mobile-phone:before,
.fa-mobile:before {
  content: "\f10b";
}

.fa-mail-forward:before,
.fa-share:before {
  content: "\f064";
}

.fa-map-marker:before {
  content: "\f041";
}

.fa-envelope-o:before {
  content: "\f003";
}

.fa-fax:before {
  content: "\f1ac";
}