/* ----- CSS RESET ----- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, 

b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body { line-height: 1; }

ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }







/* ----- Fonts ----- */

@font-face {

    font-family: 'latobold';

    src: url('../fonts/lato-bold.eot');

    src: url('../fonts/lato-bold.eot?#iefix') format('embedded-opentype'),

         url('../fonts/lato-bold.woff') format('woff'),

         url('../fonts/lato-bold.ttf') format('truetype'),

         url('../fonts/lato-bold.svg#latobold') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'latoregular';

    src: url('../fonts/lato-regular.eot');

    src: url('../fonts/lato-regular.eot?#iefix') format('embedded-opentype'),

         url('../fonts/lato-regular.woff') format('woff'),

         url('../fonts/lato-regular.ttf') format('truetype'),

         url('../fonts/lato-regular.svg#latoregular') format('svg');

    font-weight: normal;

    font-style: normal;



}



@font-face {

    font-family: 'latolight';

    src: url('../fonts/lato-light.eot');

    src: url('../fonts/lato-light.eot?#iefix') format('embedded-opentype'),

         url('../fonts/lato-light.woff') format('woff'),

         url('../fonts/lato-light.ttf') format('truetype'),

         url('../fonts/lato-light.svg#latolight') format('svg');

    font-weight: normal;

    font-style: normal;



}





body { color: #555; font: 14px/20px "latolight", sans-serif; }



h1 { color: #111; font: 20px/34px 'latobold', sans-serif; }

h2 { font: 15px/1.059em 'latobold', sans-serif; }



b, strong { color: #222; font-family: 'latobold', sans-serif; }



a, a:hover { color: #7763c3; -o-transition:.3s; -ms-transition:.3s; -moz-transition:.3s; -webkit-transition:.3s; transition:.3s; text-decoration: none; }





img { max-width: 100%; height: auto; }





#left-container { width: 270px; padding: 30px 0; text-align: right; float: left; border-right: 1px solid #e5e5e5; overflow: hidden; }

#right-container, #page-container { position: absolute; top: 0; bottom: 0; margin-left: 270px; padding: 30px; }

#page-container { max-width: 1200px; }



#top { margin: 0 20px 20px; }

#pull { display: none; }





nav { margin-bottom: 20px; }

nav ul li a {

    display: block; padding: 10px 20px; color: #fff; text-align: right; text-transform: uppercase; border-bottom: 1px solid #6452a8;



    background: #7c68c8;

    background: -moz-linear-gradient(top,  #7c68c8 0%, #6f5bbb 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7c68c8), color-stop(100%,#6f5bbb));

    background: -webkit-linear-gradient(top,  #7c68c8 0%,#6f5bbb 100%);

    background: -o-linear-gradient(top,  #7c68c8 0%,#6f5bbb 100%);

    background: -ms-linear-gradient(top,  #7c68c8 0%,#6f5bbb 100%);

    background: linear-gradient(to bottom,  #7c68c8 0%,#6f5bbb 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7c68c8', endColorstr='#6f5bbb',GradientType=0 );

}



nav ul li a:hover, .active-menu {

    color: #fff;



    background: #3b3b3b;

    background: -moz-linear-gradient(top,  #3b3b3b 0%, #2e2e2e 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b3b3b), color-stop(100%,#2e2e2e));

    background: -webkit-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -o-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -ms-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: linear-gradient(to bottom,  #3b3b3b 0%,#2e2e2e 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2e2e2e',GradientType=0 );

}





#left-contact { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; }

#left-contact ul { margin-right: 20px; }

#left-contact ul li { margin-bottom: 5px; color: #a5a5a5; }

#left-contact ul li a { color: #a5a5a5; }

#left-contact ul li a:hover { color: #555; }

#left-contact ul li i { width: 16px; margin-left: 10px; color: #555; }





#social-container { padding-bottom: 20px; border-bottom: 1px solid #e5e5e5; overflow: hidden; }

#social-container ul { margin-right: 20px; }

#social-container ul li { margin-left: 10px; float: right; }

#social-container ul li a {

    display: block; width: 40px; height: 40px; color: #fff; text-align: center;



    background: #3b3b3b;

    background: -moz-linear-gradient(top,  #3b3b3b 0%, #2e2e2e 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b3b3b), color-stop(100%,#2e2e2e));

    background: -webkit-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -o-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -ms-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: linear-gradient(to bottom,  #3b3b3b 0%,#2e2e2e 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2e2e2e',GradientType=0 );



    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;



    -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.1);

    -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.1);

    box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.1);

}

#social-container ul li a i { margin-top: 13px; }





.index-portfolio-container { overflow: hidden; }

.index-portfolio-container a { position: relative; display: block; width: 100%; height: auto; margin-bottom: 15px; overflow: hidden; }

.index-portfolio-container img { position: relative; display: block; width: 100%; transform: translate3d(0px,0px,0px); box-shadow: #000 0em 0em 0em; }

.index-portfolio-container h2 { margin-bottom: 10px; font-size: 15px; font-family: 'latoregular', sans-serif; }

.index-portfolio-container p { margin-bottom: 20px; font-size: 13px; }

.index-portfolio-container div { min-height: 200px; overflow: hidden; }



.index-line { display: block; width: 20px; margin-bottom: 5px; border: 0; border-bottom: 2px solid #715dbd; clear: both; }

.img-hover-plus {

    position: absolute; top: 0; left: 50%; display: block; width: 40px; height: 40px; margin-top: -20px; margin-left: -20px; color: #fff; text-align: center;



    background: #3b3b3b;

    background: -moz-linear-gradient(top,  #3b3b3b 0%, #2e2e2e 100%);

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3b3b3b), color-stop(100%,#2e2e2e));

    background: -webkit-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -o-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: -ms-linear-gradient(top,  #3b3b3b 0%,#2e2e2e 100%);

    background: linear-gradient(to bottom,  #3b3b3b 0%,#2e2e2e 100%);

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b3b3b', endColorstr='#2e2e2e',GradientType=0 );



    -webkit-border-radius: 20px;

    -moz-border-radius: 20px;

    border-radius: 20px;

}

.img-hover-plus i { margin-top: 14px; }



#load-more { margin: 30px 0; text-align: center; }

#load-more a { background-color: #7763c3; padding: 10px 30px; color: #fff; }





#page-container { padding: 80px; }

#page-container .row { margin-bottom: 80px; overflow: hidden; }

#page-container h2 { margin-bottom: 20px; }

#page-container p { margin-bottom: 20px; }



#page-text ul { margin: 20px 0 20px 40px; list-style: disc; }

#page-text h1, #page-text h2 { text-transform: uppercase; }

#page-text h2 { margin-bottom: 40px; color: #5a5a5a; font-size: 12px; }





.price-table table { width: 60%; margin: auto; }

.price-table table tr:nth-child(2n+1) { background-color: #f4f4f4; }

.price-table table tr td:nth-child(2n) { text-align: right; }

.price-table table td { padding: 5px 20px; }

.price-table p { margin-bottom: 20px; text-align: center; }





#contact-list {}

#contact-list td { padding: 0 10px 20px 0; }

#contact-list a { color: #555; }

#contact-list a:hover { color: #7763c3; }

#contact-map { width: 100%; height: 250px; }





.form-row { margin-bottom: 10px; border: 1px solid #e5e5e5; overflow: hidden; }

.form-row label {

    display: block; width: 30px; height: 30px; margin: 10px; text-align: center; border: 2px solid #151515; float: left;



    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

}

.form-row label i { margin-top: 5px; }

.form-row div { width: auto; overflow: hidden; }

.form-row input[type="text"] { width: 100%; height: 50px; padding: 10px; border: 0; border-left: 1px solid #e5e5e5; }

textarea { display: block; width: 100%; height: 114px; margin-bottom: 10px; padding: 10px; border: 1px solid #e5e5e5; }



input[type="submit"] { background-color: #7662c1; width: 100%; height: 50px; padding: 10px; color: #fff; text-align: center; text-transform: uppercase; border: 0; }





.scrollup { background-color: #000; position: fixed; left: 20px; bottom: 20px; display: none; padding: 5px 10px; color: #fff; font-size: 24px; }

.scrollup:hover { background-color: #7763c3; color: #fff; }







@media (max-width: 1024px){

    #left-container { width: 270px; padding: 30px 0; }

    #right-container, #page-container { margin-left: 270px; padding: 30px; }



    .price-table, .page-box { width: 100%; }



}



@media (max-width: 480px){

    nav ul { display: none; height: auto; }

    #pull { position: absolute; top: 35px; right: 10px; display: block; padding: 10px; overflow: hidden; }

    #pull img { display: block; }



    #left-container { width: 100%; padding: 20px 0; text-align: left; float: none; }

    #right-container, #page-container { position: inherit; margin-left: 0; padding: 20px; }



    .index-portfolio-container div { height: inherit; }



    .price-table table { width: 100%; }



    .hidden, .scrollup { display: none; }

}