@charset "utf-8";
/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);
* { box-sizing: border-box; animation-timing-function: cubic-bezier(0.8,0,0.2,1); animation-fill-mode: forwards; transition: all 0.3s; }

body { font-family: 'Roboto', 'Arial', 'sans-serif'; font-size:19px; font-weight:600; margin:0; font-weight:400; color:#777; overflow-x: hidden; -webkit-font-smoothing:antialiased; }

a { text-decoration:none; border-bottom:2px solid transparent; color:#333; transition: all 0.3s }
a:hover { color:#b7b7b7 }
h1,h2 { margin:0; color:#333 }
h1 { font-size:4vmax; margin-bottom:30px; font-weight:700; }
h2 { font-size:26px; margin-top:10px; margin-bottom:-10px; line-height:130%; }
h3 { margin:0 auto; font-size:22px; text-align:center; border-top:1px solid #ececec; padding-top:60px }
p { line-height:150%; margin:0 }
ol, ul { list-style: none }
menu, ol, ul { padding: 0 }

.wrap { max-width:1100px; margin:0 auto }
.fade { opacity: 0 }
.fade_ani { animation-name:fade; animation-duration:0.5s }

.fb-follow-container { position:absolute; right:20px; max-width:300px; overflow:hidden; top:20px; line-height:0 }

.grey { box-sizing:border-box; margin:0 auto; background-color:#f2f2f2 }
#header { height:80vh; width:100vw; text-align:center; display:table-cell; vertical-align: middle }
	
input { font-size:14px; font-weight:700; border-radius:50px; border:1px solid #b7b7b7; padding:0px 15px; box-sizing: border-box; height:50px; background-color:white; width:300px; outline: none }
::-webkit-input-placeholder { color:#d1d1d1; font-weight:600 }

@media screen and (min-width: 768px) {
.half { width:50vw; margin-left:auto; margin-right:auto }
}
	
.button { display:inline-block; margin-left:12px; font-size:16px; padding:0 30px; line-height:50px; background-color:black; font-weight:700; color:white; border-radius:50px; cursor:pointer }
.button:hover { background-color:#ff571c }
.button:active { background-color:#e24610 }

.wrap { max-width:75vw; margin:0 auto; }
	
.brmobile { display:none }
	
.success input { color:#1b815c; border:0; padding:0; background-color:transparent; text-align:center }
.thanks { display:none }
#error { margin:10px 0; font-size:14px; }
#loader { display:none; margin:0 auto; width:200px; border-radius:3px; }
#loader .bar { background-color:black; height:3px; animation-name:loader; animation-duration:1s; width:0% }

.container { margin:0 auto; margin-bottom:60px; display:flex; justify-content: space-around; flex-wrap: wrap; font-weight:400}
.item { display:inline-block; width:47%; line-height:160%; margin-top:3vw }
.item img { width:100%; border-radius:4px }
.item video { width:100%; border-radius:4px }

#footer { text-align:center; padding:80px; border-top:1px solid #ececec; margin-top:80px }
#footer h2 { margin-bottom:20px }
#footer div { font-size:24px; margin-bottom:20px }
#footer a { padding:10px }

/* Floating Social Media Bar Style Starts Here */
.social-icons { text-transform:uppercase; letter-spacing:3px; width:auto; position:fixed; left:91vw; top:66vh; z-index:1000; -webkit-transition:all .25s ease; -moz-transition:all .25s ease; -ms-transition:all .25s ease; -o-transition:all .25s ease; transition:all .25s ease;

	/* 40px left */
    -webkit-margin-start: 40px;
}

.social-icons #social i.fa { font-size:1.3vw; color:#333; margin-bottom:4.3vh }
.social-icons #social i.fa.fa-linkedin { margin-bottom:0 }

.social-icons #social i.fa.fa-dribbble {
    animation: fa-spin 6s infinite linear;
}
@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}
/* Floating Social Media Bar Style Ends Here */

/* Mobile Social icons */
.mobile-social-icons { display:none }
.mobile-social-icons ul#mobile-social { padding:20px 0 0 0; text-align:center }
.mobile-social-icons ul#mobile-social li { display:inline }

.mobile-social-icons #mobile-social i.fa { font-size:5.5vw; margin:0 3vw }
/* Mobile Social icons Ends Here */

@keyframes loader {
0% { width:0% }
70% { width:100%; height:3px}
80% { width:100%; height:3px}
100% { height:0px; width:100%; }
}

@keyframes fade {
    0% { transform: translateY(20px)}
    100% { opacity:1 }
}

/* Services */
.services {
	display: flex;
	flex: 1
}
ul.columns {
	text-align: center;
	flex: 1;
    display: box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    box-orient: horizontal;
    -webkit-flex-direction: row;
    -moz-flex-direction: row;
    flex-direction: row;
    -ms-flex-direction: row;
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    box-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    -ms-justify-content: space-between;
    -o-justify-content: space-between;
    justify-content: space-between;
    -ms-flex-pack: justify
}
.columns li { width: 100% }

.columns p { margin-bottom: .6em; margin-left: auto; margin-right: auto }

.columns h2 { margin-bottom: .5em; max-width: 800px; margin-left: auto; margin-right: auto }

/* Back-to-Top */
.back-to-top {
	display: none;
    width: 30px;
    height: 30px;
    border: 2px solid #333;
    position: fixed;
	left:91vw;
	top:8.5vh; 
    overflow: hidden;
    border-radius: 15px;
    box-sizing: border-box;
    text-decoration: none;
    z-index: 100;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: cubic-bezier(.77, 0, .175, 1).5s;
    transition: cubic-bezier(.77, 0, .175, 1).5s;

	/* 40px left */
    -webkit-margin-start: 40px;
}

.back-to-top span:nth-child(1) {
    width: 2px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #333

}

.back-to-top span:nth-child(2) {
    width: 2px;
    height: 8px;
    position: absolute;
    top: 6px;
    left: 10px;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-color: #333
}

.back-to-top span:nth-child(3) {
    width: 2px;
    height: 8px;
    position: absolute;
    top: 6px;
    right: 10px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    background-color: #333
}

.back-to-top:hover {
    background-color: #333
}

.back-to-top:hover span {
    background-color: #fff
}

/* Responsive */
@media screen and (max-width: 600px) {
body { margin:0px; font-size:24px }
.wrap { max-width: 95vw }
h1 { font-size:42px }
h2 { font-size:42px; margin:20px 0 -20px }
#header { height: 55vh; padding:0 8vw 0 8vw; text-align: left }
#footer { padding-bottom:40px }
#social a { margin-right:5px }
.button { font-size:26px; line-height:80px; display:block; margin:10px 0; text-align:center; max-width:100% }
input { font-size:24px; width:100%; padding-left:30px; margin-top:30px; margin-bottom:20px; height:80px }
.item { width:90%; margin:30px auto }
.brmobile { display:block }
.social-icons { display:none }
.mobile-social-icons { display:unset }
.back-to-top { display: none !important }
.services { flex: none; width:90%; margin:30px auto }
ul.columns { clear: both; display: block; text-align: left }
.columns li { margin-bottom: 3em }
}