/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(http://fonts.gstatic.com/s/ubuntu/v7/WtcvfJHWXKxx4x0kuS1koRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(http://fonts.gstatic.com/s/ubuntu/v7/_aijTyevf54tkVDLy-dlnFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
/* latin-ext */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://fonts.gstatic.com/s/ubuntu/v7/Wu5Iuha-XnKDBvqRwQzAG_esZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(http://fonts.gstatic.com/s/ubuntu/v7/sDGTilo5QRsfWu6Yc11AXg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v8/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}

/* Global 
----------------- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #f6f6f6; overflow-x: hidden; height: 100%; -webkit-font-smoothing: antialiased; }
body {  font-family: 'Ubuntu', sans-serif; font-weight: 300; }
a { color: #d02323; text-decoration: none; border-bottom: 1px dotted; }
  a:hover { color: #36BB86; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.row { overflow: hidden; margin: 0 auto; max-width: 1000px; padding: 0 20px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; }
.gray h2, .about h2, .work h2, .contact h2 { font-size: 18px; font-weight: 600; text-transform: uppercase; color: #333; text-align: center; line-height: 35px; }
.gray p, .about p, .work p, .contact p { font-size: 16px; line-height: 40px; text-align: center; margin: 20px auto 0;}
.dash { border-bottom: 3px solid #CCCCCC; margin: 35px auto 30px auto; overflow: visible; width: 30px; }
.btn { border: 2px solid #d02323; border-radius: 3px; padding: 10px 20px; width: 220px; margin: 30px auto 0; display: block; text-align: center; font-weight: 400; overflow: hidden; }
  .btn:hover { border-color: #36BB86; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }
.wrapper { overflow-x: hidden;}
/* Header 
----------------- */
.header { background-size: cover; overflow: hidden; height: 655px; position: relative; }
  .header section { overflow: hidden; height: 100%; }
  .header .redline { position: absolute; left: 50%; top: 0;height: 100px;background: #d02323; width: 1px; opacity: .2;}
  .header .row { margin-top: 20px; }
  .header h1 { font-family: 'Open Sans', sans-serif; max-width: 800px; color: #555; text-align: center; font-size: 21px; margin: 40px auto 0px; line-height: 42px; }
    .header h1 span {color: #d02323;}
  .header p { text-align: center; font-size: 32px; margin-top: 20px; color: #333; }
  .logo { margin: 100px auto 50px; display: block;  }
  .f { position: fixed; top: 10px; left: 10px; }
  .learn-more { font-size: 14px !important; color: #666 !important; width: 100%; text-align: center; position: absolute; bottom: 10px; left: 0; }
    .learn-more img { clear: both; display: block; margin: 0 auto; -webkit-animation-name: Floatingx; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: Floating; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; }

/* More About me 
----------------- */
.gray { background: #f6f6f6; width: 100%; padding: 50px 0 60px 0;  }
  .gray p { -webkit-font-smoothing: antialiased; font-weight: 400; }
.about { position: relative; width: 100%; padding: 50px 0 100px 0;  }
  .about p {font-family: 'Open Sans', sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }
  .about a {  color: #ECA7A7; font-family: 'Ubuntu', sans-serif !important; font-weight: 400; }
    .about a:hover { color: #222; opacity: 1;}
  .about .btn { background: #fff; color: #d02323; border: none; opacity: 1; font-family: 'Ubuntu', sans-serif !important; margin-top: 50px; }
  .about h2 { -webkit-font-smoothing: antialiased; font-weight: 400; color: #fff; margin-top: 120px; }
.about .row {position: relative; z-index: 999; overflow: hidden;}
.back {
  width: 100%;
  height: 100%;
  position: absolute; }

.background {
  width: 300%;
  height: 100%;
  background: #d02323;
  position: absolute;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%) rotate(-10deg);
  -moz-transform: translateX(-50%) rotate(-10deg);
  -o-transform: translateX(-50%) rotate(-10deg);
  -ms-transform: translateX(-50%) rotate(-10deg);
  transform: translateX(-50%) rotate(-10deg);
  -webkit-transform-origin: center top;
}
  
/* Work ( Dribbble ) 
----------------- */
.work { width: 100%; overflow: hidden; padding: 120px 0 100px 0; }
.work p { color: #666;}
.shots { overflow: hidden; margin-top: 20px;}
.shot { max-width: 25%; padding: 10px; float: left; border-radius: 3px;  }
.shot a { position: relative; display: block; border: none; }
  .shot span { width: 100%; height: 100%; border-radius: 3px; background: rgba(234, 76, 137, 0.8) url("../img/dribbble-ball.png") center center no-repeat; position: absolute; opacity: 0; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
  .shot:hover span { opacity: 1; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
  .shot img { width: 100%; display: block; border-radius: 3px; }
.loader { margin: 100px auto; width: 50px; height: 50px; display: block; vertical-align: middle; position: relative; }
.loader-double { border-radius: 50px; border: 6px solid transparent; border-top-color: #36BB86; border-bottom-color: #36BB86; -webkit-animation: spin 1s linear infinite; -moz-animation: spin 1s linear infinite; animation: spin 1s linear infinite; }
  .loader-double:after { content: ''; position: absolute; top: 5px; left: 5px; bottom: 5px; right: 5px; border-radius: 50px; border: 6px solid transparent; border-top-color: #36BB86; border-bottom-color: #36BB86; opacity: 0.6; -webkit-animation: spinreverse 2s linear infinite; -moz-animation: spinreverse 2s linear infinite; animation: spinreverse 2s linear infinite; }

/* Footer 
----------------- */
footer { background: #d02323; width: 100%; }
.contact {  width: 100%; padding: 50px 0 30px 0; overflow: hidden; }
  .contact h2, .contact p {color: #fff; font-weight: normal;}
  .contact p {font-family: 'Open Sans', sans-serif; color: #fff; -webkit-font-smoothing: antialiased; }
  .contact a {  color: #ECA7A7; }
    .contact a:hover { color: #222; opacity: 1;}
  .contact .logo { margin: 40px auto 0; width: 60px; -webkit-animation-name: Floatingx; -webkit-animation-duration: 3s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: Floating; -moz-animation-duration: 3s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out;}

/* Animations 
----------------- */

@-webkit-keyframes Floatingx{
    from {-webkit-transform:translate(0, 0px);}
    65% {-webkit-transform:translate(0, 10px);}
    to {-webkit-transform: translate(0, -0px);}    
}
    
@-moz-keyframes Floating{
    from {-moz-transform:translate(0, 0px);}
    65% {-moz-transform:translate(0, 10px);}
    to {-moz-transform: translate(0, -0px);}    
}

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);}
  to {
    -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
  from {
    -moz-transform: rotate(0deg);}
  to {
    -moz-transform: rotate(360deg);}
}

@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg); }
}

@-webkit-keyframes spinreverse {
  from {
    -webkit-transform: rotate(0deg);}
  to {
    -webkit-transform: rotate(-360deg); }
}

@-moz-keyframes spinreverse {
  from {
    -moz-transform: rotate(0deg);}
  to {
    -moz-transform: rotate(-360deg);}
}

@keyframes spinreverse {
  from {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg); }
}


/* Media Queries 
----------------- */
@media only screen and (max-width: 640px) { 
  .logo { width: 80px; margin-top: 30px;}
  .shot { max-width: 50%;}
  .header { padding-bottom: 0; height: auto; min-height: 460px;}
  .header section { height: inherit;}
    .header h1 { font-size: 18px; line-height: 28px;}
  .gray p { font-size: 14px; line-height: 28px;}
  .learn-more { display: none;}

}

@media only screen and (max-width: 440px) {
  .shot { max-width: 100%;}
}