/* Header */

.large-header {

	position: relative;

	width: 100%;

	background: #000;

	overflow: hidden;

	background-size: cover;

	background-position: center center;

	z-index: 1;

}



.demo-1 .large-header {

	/*background-image: url('../img/floorplan.jpg');*/

	background:#000;

	

}



.demo-2 .large-header {

	background-image: url('../img/demo-2-bg.jpg');

	background-position: center bottom;

}



.demo-3 .large-header {

	background: #7f8c8d;

}



.demo-4 .large-header {

	background: #f9f1e9;

}



.main-title {

	position: absolute;

	margin: 0;

	padding: 0;

	color: #f9f1e9;

	text-align: center;

	top: 50%;

	left: 50%;

	-webkit-transform: translate3d(-50%,-50%,0);

	transform: translate3d(-50%,-50%,0);

}



.demo-1 .main-title, 

.demo-3 .main-title {

	text-transform: uppercase;

	font-size: 4.2em;

	letter-spacing: 0.1em;

}



.demo-2 .main-title {

	font-family: 'Clicker Script', cursive;

	font-weight: normal;

	font-size: 8em;

	padding-left: 10px;

	text-shadow: 2px 2px 4px rgba(0,0,0,0.4);

}



.demo-2 .main-title::before {

	content: '';

	width: 20vw;

	height: 20vw;

	min-width: 3.5em;

	min-height: 3.5em;

	background: url(../img/deco.svg) no-repeat center center;

	background-size: cover;

	position: absolute;

	top: 50%;

	left: 50%;

	border-radius: 50%;

	z-index: -1;

	-webkit-transform: translate3d(-50%,-50%,0);

	transform: translate3d(-50%,-50%,0);

}



.demo-3 .main-title {

	padding: 10px 40px;

	border: 10px double #f9f1e9;

	text-transform: uppercase;

	font-family: Londrina Outline, sans-serif;

}



.demo-4 .main-title {

	font-size: 6em;

	font-weight: 300;

	padding: 10px 30px;

	text-transform: uppercase;

	color: #222;

}



.main-title .thin {

	font-weight: 200;

}



.gol-1{

	width:250px;

	height:250px;

	background:rgba(200, 152, 0,1);

	border-radius:125px;

	position:absolute;

	top:50%;

	margin-top:-70px;

	left:40px;

	overflow:hidden;

	border:5px solid rgba(200, 152, 0,1);

	opacity:.5;	

}

.gol-2{

	width:250px;

	height:250px;

	background:rgba(200, 152, 0,1);

	border-radius:125px;

	position:absolute;

	top:50%;

	margin-top:-100px;

	right:40px;

	overflow:hidden;

	border:5px solid rgba(200, 152, 0,1);

	opacity:.5;		

}

.gol-3{

	width:250px;

	height:250px;

	background:rgba(200, 152, 0,1);

	border-radius:125px;

	position:absolute;

	top:50%;

	margin-top:-100px;

	left:40px;

	overflow:hidden;

	border:5px solid rgba(200, 152, 0,1);

	opacity:.5;		

}

.gol-4{

	width:250px;

	height:250px;

	background:rgba(200, 152, 0,1);

	border-radius:125px;

	position:absolute;

	top:50%;

	margin-top:-100px;

	right:40px;	

	overflow:hidden;

	border:5px solid rgba(200, 152, 0,1);

	opacity:.5;	

}

.logo{

	position:absolute;

	top:40%;

	left:50%;

	margin-left:-145px;

}

.writer {

width: 124px;

height: 35px;

bottom: -60px;

position: absolute;

left: auto;

margin-left: 0;

color: #fff;

font-size: 20px;

padding: 5px 5px 5px 7px;

background: rgba(0, 2, 2,.6);

text-align: center;

text-shadow: 0 0 5px #000;

box-sizing: border-box;

transition: all .4s ease-in-out;

/* border: 1px solid rgba(200, 152, 0,1); */

overflow: hidden;

right: 50%;

margin-right: -61px;	

}

.writer:hover{

	color:#fff;

	transform:scale(1.1);	

}



@media only screen and (max-width : 768px) {

	.demo-1 .main-title, 

	.demo-3 .main-title,

	.demo-4 .main-title {

		font-size: 3em;

	}



	.demo-2 .main-title {

		font-size: 4em;

	}

}











#loader-wrapper {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 1000;

}

#loader {

    display: block;

    position: relative;

    left: 50%;

    top: 50%;

    width: 150px;

    height: 150px;

    margin: -75px 0 0 -75px;

    border-radius: 50%;

    border: 3px solid transparent;

    border-top-color: #3498db;



    -webkit-animation: spin 2s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

    animation: spin 2s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */



    z-index: 1001;

}



    #loader:before {

        content: "";

        position: absolute;

        top: 5px;

        left: 5px;

        right: 5px;

        bottom: 5px;

        border-radius: 50%;

        border: 3px solid transparent;

        border-top-color: #e74c3c;



        -webkit-animation: spin 3s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

        animation: spin 3s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    }



    #loader:after {

        content: "";

        position: absolute;

        top: 15px;

        left: 15px;

        right: 15px;

        bottom: 15px;

        border-radius: 50%;

        border: 3px solid transparent;

        border-top-color: #f9c922;



        -webkit-animation: spin 1.5s linear infinite; /* Chrome, Opera 15+, Safari 5+ */

          animation: spin 1.5s linear infinite; /* Chrome, Firefox 16+, IE 10+, Opera */

    }



    @-webkit-keyframes spin {

        0%   { 

            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(0deg);  /* IE 9 */

            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

        }

        100% {

            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(360deg);  /* IE 9 */

            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

        }

    }

    @keyframes spin {

        0%   { 

            -webkit-transform: rotate(0deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(0deg);  /* IE 9 */

            transform: rotate(0deg);  /* Firefox 16+, IE 10+, Opera */

        }

        100% {

            -webkit-transform: rotate(360deg);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: rotate(360deg);  /* IE 9 */

            transform: rotate(360deg);  /* Firefox 16+, IE 10+, Opera */

        }

    }



    #loader-wrapper .loader-section {

        position: fixed;

        top: 0;

        width: 51%;

        height: 100%;

        background: #222222;

        z-index: 1000;

        -webkit-transform: translateX(0);  /* Chrome, Opera 15+, Safari 3.1+ */

        -ms-transform: translateX(0);  /* IE 9 */

        transform: translateX(0);  /* Firefox 16+, IE 10+, Opera */

    }



    #loader-wrapper .loader-section.section-left {

        left: 0;

    }



    #loader-wrapper .loader-section.section-right {

        right: 0;

    }



    /* Loaded */

    .loaded #loader-wrapper .loader-section.section-left {

        -webkit-transform: translateX(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateX(-100%);  /* IE 9 */

                transform: translateX(-100%);  /* Firefox 16+, IE 10+, Opera */



        -webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  

                transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    }



    .loaded #loader-wrapper .loader-section.section-right {

        -webkit-transform: translateX(100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateX(100%);  /* IE 9 */

                transform: translateX(100%);  /* Firefox 16+, IE 10+, Opera */



-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);  

        transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);

    }

    

    .loaded #loader {

        opacity: 0;

        -webkit-transition: all 0.3s ease-out;  

                transition: all 0.3s ease-out;

    }

    .loaded #loader-wrapper {

        visibility: hidden;



        -webkit-transform: translateY(-100%);  /* Chrome, Opera 15+, Safari 3.1+ */

            -ms-transform: translateY(-100%);  /* IE 9 */

                transform: translateY(-100%);  /* Firefox 16+, IE 10+, Opera */



        -webkit-transition: all 0.3s 1s ease-out;  

                transition: all 0.3s 1s ease-out;

    }

    

    













/* ==========================================================================

   Helper classes

   ========================================================================== */



/*

 * Image replacement

 */



.ir {

    background-color: transparent;

    border: 0;

    overflow: hidden;

    /* IE 6/7 fallback */

    *text-indent: -9999px;

}



.ir:before {

    content: "";

    display: block;

    width: 0;

    height: 150%;

}



/*

 * Hide from both screenreaders and browsers: h5bp.com/u

 */



.hidden {

    display: none !important;

    visibility: hidden;

}



/*

 * Hide only visually, but have it available for screenreaders: h5bp.com/v

 */



.visuallyhidden {

    border: 0;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

}



/*

 * Extends the .visuallyhidden class to allow the element to be focusable

 * when navigated to via the keyboard: h5bp.com/p

 */



.visuallyhidden.focusable:active,

.visuallyhidden.focusable:focus {

    clip: auto;

    height: auto;

    margin: 0;

    overflow: visible;

    position: static;

    width: auto;

}



/*

 * Hide visually and from screenreaders, but maintain layout

 */



.invisible {

    visibility: hidden;

}



/*

 * Clearfix: contain floats

 *

 * For modern browsers

 * 1. The space content is one way to avoid an Opera bug when the

 *    `contenteditable` attribute is included anywhere else in the document.

 *    Otherwise it causes space to appear at the top and bottom of elements

 *    that receive the `clearfix` class.

 * 2. The use of `table` rather than `block` is only necessary if using

 *    `:before` to contain the top-margins of child elements.

 */



.clearfix:before,

.clearfix:after {

    content: " "; /* 1 */

    display: table; /* 2 */

}



.clearfix:after {

    clear: both;

}



/*

 * For IE 6/7 only

 * Include this rule to trigger hasLayout and contain floats.

 */



.clearfix {

    *zoom: 1;

}



/* ==========================================================================

   EXAMPLE Media Queries for Responsive Design.

   These examples override the primary ('mobile first') styles.

   Modify as content requires.

   ========================================================================== */



@media only screen and (min-width: 35em) {

    /* Style adjustments for viewports that meet the condition */

}



@media print,

       (-o-min-device-pixel-ratio: 5/4),

       (-webkit-min-device-pixel-ratio: 1.25),

       (min-resolution: 120dpi) {

    /* Style adjustments for high resolution devices */

}



/*..........media queries for tab.........*/



@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {

	.slider,.contener-home{

		width:250px;	

	}

	.slider{

		margin-top:-120px;	

	}

	.logo_block{

		margin-top:-40px;

		top:50%;	

	}

}

@media only screen and (min-device-width : 320px) and (max-device-width : 767px) {

	.logo_block{

		width:100%;

		margin-top:10px;

		margin-bottom:20px;	

	}

	.slider {

    border: medium none;

    clear: both;

    float: none;

    margin: 10px auto;

    overflow: hidden;

    top: 0;

    width: 200px;

}

	.contener-home{

		width:200px;

		border:none;	

	}

	.logo_block {

    margin-bottom: 20px;

    margin-left: 0;

    margin-top: 25px;

    text-align: center;

    width: 100%;

}

.logo_block a {

    display: inline-block;

    float: none;

}

.slider {

    clear: both;

    float: none;

    margin: 10px auto;

    top: 0;

    width: 200px;

}

.mid_part {

    background: url("../demo_back.png") no-repeat scroll center center / cover #8f6412;

    left: 0;

    margin-top: 0;

    min-height: 100%;

    padding-bottom: 25px;

    position: relative;

    top: 0;

    width: 100%;

}

.nivoSlider {

    border: 5px solid rgba(26, 26, 26, 0.5);

    height: auto;

    margin-bottom: 20px;

    overflow: hidden;

    position: relative;

    width: 100%;

}

.mid_part {

    background: url("../demo_back.png") no-repeat scroll center center / cover #8f6412;

    left: 0;

    margin-top: 0;

    min-height: 100%;

    padding-bottom: 25px;

    position: relative;

    top: 0;

    width: 100%;

}

#demo-canvas{

	display:none;	

}

.large-header{

	overflow:visible !important;	

}

.writer {

    background: none repeat scroll 0 0 rgba(0, 2, 2, 0.6);

    bottom: auto;

    box-sizing: border-box;

    color: #fff;

    display: block;

    font-size: 20px;

    height: 35px;

    left: auto;

    margin-left: auto;

    margin-right: auto;

    overflow: hidden;

    padding: 5px 5px 5px 7px;

    position: relative;

    right: auto;

    text-align: center;

    text-shadow: 0 0 5px #000;

    transition: all 0.4s ease-in-out 0s;

    width: 124px;

    z-index: 2147483647;

}

body{

	overflow-x:hidden;	

}

}



.demo-1 .large-header{

			background: #000 url(../img/indexban.jpg) no-repeat center center;	
			background-size: contain;
		}

		.mid_part{

			background:none;	

		}

		.contener-home{

			border:none;	

		}

		.nivoSlider{

			visibility:hidden;	

		}