body { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1; color:#fff;}
/*body.startPage { background: url('background2.png'),  url('background3.png'), url('background1.jpg');
background-position:center left, center right, center;
background-repeat:no-repeat, no-repeat, no-repeat;
-webkit-background-size: auto, auto, cover;
-moz-background-size: auto, auto, cover;
-o-background-size: auto, auto, cover;
background-size: auto, auto, cover;
}*/
body.startPage { background: url('background.jpg') center no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

.underline { position: relative; }
.underline:after { content: ' '; width: 43px; height: 5px; position: absolute; bottom: -8px; left: 0; }
.color1 { color: #ed2437; }
.color2 { color:#009edb; }
.color1background { background-color: #ed2437; }
.color2background { background-color: #009edb; }
.color1after:after { background-color: #ed2437; }
.color2after:after { background-color:#009edb; }
.marginB50 { margin-bottom:50px; }

a, a:visited, a:link { color: inherit; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease; }
a:hover, a:active, a:focus { text-decoration: none; outline: none; }



h1 { display:inline-block; font-size:40px; font-weight:900; margin:35px 0 14px 0;}
h2 { font-size:24px; font-weight:900; margin:0 0 35px 0;}
h3 { display:inline-block; font-size:18px; font-weight:700; margin:0 0 40px 0; padding:12px 40px; background:#393233; border-radius:20px;}



#sOptions { margin-bottom:170px;}
#sOptions .arrowLeft, #sOptions .arrowRight { margin-bottom:7px; position:relative; display:inline-block;}
#sOptions .arrowLeft:after, #sOptions .arrowRight:after { content:' ';  position:absolute; top:100%; left:50%; width:27px; height:71px; }
#sOptions .arrowLeft:after { background:url(arrowLeft.png); }
#sOptions .arrowRight:after { background:url(arrowRight.png); }
#sOptions .browser { position:relative; }
#sOptions .browser > img { position: relative; display: block; width: 100%; height: auto; }
#sOptions .browser .theme { position: absolute; width: 93.8%; height: 82.5%; margin: 5.4% 0 0 2.8%; overflow: hidden; top: 0; bottom: 0; right: 0; left: 0;  }
#sOptions .browser .theme img { position:absolute; top: auto; bottom: 100%; display: block; height: auto; width: 100%; max-width: 100%; -webkit-transform: translateY(100%); -moz-transform: translateY(100%); -ms-transform: translateY(100%); -o-transform:translate(100%); transform: translateY(100%); -webkit-transition: -webkit-transform 15s; -moz-transition: -moz-transform 15s; -o-transition: -o-transform 15s; transition: transform 15s;}
#sOptions .browser .theme:hover img { -webkit-transform: translateY(0%); -moz-transform: translateY(0%); -ms-transform: translateY(0%); -o-transform:translate(0%); transform: translateY(0%); }
#sOptions .browser h3 { font-size:16px; position:absolute; bottom:-20px; right:0px; opacity:0; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; -ms-transition: all 0.5s ease; transition: all 0.5s ease;}
#sOptions .browser:hover h3 { bottom:15px; opacity:1; }
#sOptions .choose { margin-left:15px; margin-bottom:15px; display:inline-block; }
#sOptions .pageList { list-style-type:none; margin:0; padding:0; display:inline-block;}
#sOptions .pageList li {  float:left; padding:0 15px; border-right:2px solid #fff;}
#sOptions .pageList li a {line-height:1;}
#sOptions .pageList li:last-of-type { border-right:0;}
#sOptions .pageList li:hover { color: #ed2437; }
#sOptions .freelancer .pageList li:hover { color: #009edb; }


/***************************
* PAGE LOADER
****************************/
#loader { display:none; }
body.loading { overflow:hidden; }
body.loading #page { opacity:0; }
body.loading #loader { display: block; position: fixed; width: 100%; background: #FFF; z-index: 100; height: 100%; }
body.loading #loader h1 { font-weight: 900; color:#000;}
body.loading #loader h2 { color:#000; }
/* Make clicks pass-through */
#nprogress { pointer-events: none; }
#nprogress .bar { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 5px; }
#nprogress .bar { background: #ed2437; }
#nprogress .peg { box-shadow: 0 0 10px #ed2437, 0 0 5px #ed2437; }
#nprogress .spinner-icon { border-top-color: #ed2437; border-left-color: #ed2437; }
/* Fancy blur effect */
#nprogress .peg { display: block; position: absolute; right: 0px; width: 100px; height: 100%;  opacity: 1.0; -webkit-transform: rotate(3deg) translate(0px, -4px); -ms-transform: rotate(3deg) translate(0px, -4px); transform: rotate(3deg) translate(0px, -4px); }
/* Remove these to get rid of the spinner */
#nprogress .spinner { display: block; position: fixed; z-index: 100; top: 15px; right: 15px; }
#nprogress .spinner-icon { width: 18px; height: 18px; box-sizing: border-box; border: solid 2px transparent; border-radius: 50%; -webkit-animation: nprogress-spinner 400ms linear infinite; animation: nprogress-spinner 400ms linear infinite; }
@-webkit-keyframes nprogress-spinner {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}

@keyframes nprogress-spinner {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


@media (max-width:450px) {
    #sOptions .pageList, #sOptions .choose { display:block; text-align:center;}
    #sOptions .pageList li {  float:none; padding:5px; border-right:0;}
}