/*CODE CSS BY PROJER DESIGNS*/

/*CODE VERSION 1.1*/

/*CONTACT SUPPORT otapia@projerdesigns.com*/

/*WRITTEN 03/30/2018*/

/*----------SECTIONS---------*/

/*00 GENERAL*/

/*01 HOME*/

/*02 DEMOS*/

/*03 SERVICES*/

/*04 PORTFOLIO*/

/*05 VIDEOS*/

/*06 CONTACT*/

/*07 FOOTER*/



/*IMPORT FONT BY GOOGLE FONTS*/

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i,900');

*{font-family: 'Roboto', sans-serif;}

/*SECTION: 00 GENERAL*/

#social-box{background-color:#262626; color: #fff; height: 40px; border-bottom: 1px solid #373737; transition: all 0.5s ease;}

#social-box a{color: #fff;; float: right; padding: 5px; margin: 5px 10px; font-size: 14px}

#social-box a:active, #social-box a:hover{color: #ee2643}

.navbar.navbar-default{background-color: #262626; color: #fff; border: none; border-radius: 0; padding: 0; margin: 0}

.navbar-default{background-color: #262626; color: #fff;}

.navbar-default .navbar-collapse ul.navbar-nav li a{color: #fff}

.navbar-default .navbar-collapse ul.navbar-nav li.active a,.navbar-default .navbar-collapse ul.navbar-nav li:hover a{ color:#ee2643; text-decoration: underline; background-color: transparent}

.navbar-default .navbar-collapse ul.navbar-nav li:hover a{background-color: rgba(255,255,255,0.04)}

.navbar-brand>img {height: 100%;padding: 0;width: auto;}

.navbar-default .navbar-brand {height: 90px; padding: 0; margin-top: -40px;transition: all 0.5s ease;}

.navbar-default .navbar-toggle {padding: 10px; margin: 25px 15px 25px 0;}

.navbar-fixed-top.top-nav-collapse #social-box{display:none}

.navbar-fixed-top.top-nav-collapse .navbar-brand{margin: 0; height: 50px}

.navbar-default .navbar-toggle:focus, .navbar-default .navbar-toggle:hover{background-color:#ee2643; border-color: #c21f36;}

.navbar-default .navbar-toggle:focus .icon-bar,.navbar-default .navbar-toggle:hover .icon-bar{background-color: #262626}

.navbar-default .navbar-toggle{border-color: #c01f36;}

.navbar-default .navbar-toggle .icon-bar{background-color: #ee2643;}

.carousel-control,.carousel-control:focus, .carousel-control:hover{color:#ee2643}



/*SECTION: 01 HOME*/

#decoration-slider{position: absolute; right: 0; bottom: 0; max-height: 500px}

#home-slider{margin-top: 90px}



#home-slider .carousel-caption h2{font-weight: 900; text-transform: uppercase; text-align: right; font-size: 4em; padding: 0; margin: 0; text-shadow: 0px 0px 20px rgba(0,0,0,.7)}

#home-slider .carousel-caption h3{padding: 0; margin: 0; font-size: 2em; text-transform: uppercase; text-align: right; border-bottom: 2px solid #ee2643;text-shadow: 0px 0px 10px rgba(0,0,0,.7); display: table-cell; float: right;}



/*SECTION: 02 DEMOS*/

section{padding:50px 0}

section#demos{background-image: url(../img/lines_banner.png); background-repeat: no-repeat; background-position: 50px center; background-size: contain}

h1.title{text-align: center; color: #ee2643; margin: 0 0 40px 0; background-position: center top; background-repeat: no-repeat; background-size: 40px; font-weight: 900; text-transform: uppercase; font-size: 22px; padding: 15px 0 0 0}

h1.title img{display: block; margin: 3px auto 0 auto;}

#demos h1.title{background-image:url(../img/mic.png)}
#bio-text-box{margin: 0 auto; width: 310px}
#bio-text h3{color:#ee2643; text-transform: uppercase; font-weight:700}

#bio-text p{max-width: 310px;}

#box-smedia{border-top: 1px solid #787878; padding: 10px 20px 0 0; float: left}

#box-smedia a{color:#222; margin:5px 10px; padding:5px;transition: all 0.2s ease;}

#box-smedia a:hover{color: #ee2643}



/*SECTION: 03 SERVICES*/

section#servicios{background-image: url(../img/back_servicios.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; padding-bottom: 100px}

#servicios h1.title{background-image:url(../img/mic.png)}

.item-services{}

.item-services h2{margin: 0; padding: 0; font-weight: 700; font-size: 18px; color: #ee2643; text-transform: uppercase;}

.item-services p{float: left;width: 75%; font-size: 14px;}



/*SECTION: 04 PORTFOLIO*/

section#portafolio{}

#portafolio h1.title{background-image:url(../img/mic.png)}

#portafolio .box-soundcloud{margin-bottom: 15px}

#portafolio-voice .carousel-caption{font-size: 30px;text-shadow: 0 0 8px #000000;padding-bottom: 70px;background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);bottom: 0; left: 0; right: 0;font-weight: 100;}

#portafolio-voice .carousel-caption small{font-size: 17px; display: table; border-bottom: 3px solid #ee2643; margin: 0 auto; font-weight: 600; text-transform: uppercase;}

#portafolio-voice{box-shadow: 0 0 20px 1px #000;}

#portafolio-voice .carousel-indicators li{background-color:#A6A4A4; border: 1px solid #A6A4A4;}

#portafolio-voice .carousel-indicators .active{background-color: #fff}

.carousel-fade .carousel-inner .item {

  transition-property: opacity;

}

.carousel-fade .carousel-inner .item,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  opacity: 0;

}

.carousel-fade .carousel-inner .active,

.carousel-fade .carousel-inner .next.left,

.carousel-fade .carousel-inner .prev.right {

  opacity: 1;

}

.carousel-fade .carousel-inner .next,

.carousel-fade .carousel-inner .prev,

.carousel-fade .carousel-inner .active.left,

.carousel-fade .carousel-inner .active.right {

  left: 0;

  transform: translate3d(0, 0, 0);

}

.carousel-fade .carousel-control {

  z-index: 2;

}





/*SECTION: 05 VIDEOS*/

section#videos{background-image: url(../img/back_videos-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center top; padding-bottom: 100px}

#videos h1.title{background-image:url(../img/mic.png)}

.ycp .clearfix{display: none}



/*SECTION: 06 CONTACT*/

section#contacto{background-color: #f1f1f1}

#contacto h1.title{background-image:url(../img/mic.png); margin: 0 15px 0 0;}

#contacto p.title{text-align: center; font-size: 12px; width: 400px; margin: 15px auto 40px auto}

.form-group input, .form-group textarea{font-weight: 400;font-size: 17px;}

#contacto{padding-top:50px}

.form-control{border-radius: 0; border: none; box-shadow: none; border-bottom: 1px solid #D81823;}

.form-control:focus{border-color: #333333;box-shadow:none}

.form-group label, .form-group select{font-size: 17px;  font-weight: 400; margin: 0;}

#contact-form-box{ margin:50px 0}

.btn-danger{background-color: #ee2643; border-color: #c01f36;border-radius: 1px;}

.btn-danger:hover{background-color: #c01f36; border-color: #ee2643;}

.form-control{background-color: #f1f1f1;}

textarea{resize: vertical;}

.data-contact:first-child{margin-top: 50px}

.data-contact{margin-bottom: 15px}

.data-contact img{float: right; margin: 0 0 0 5px}

.data-contact h3{font-weight: 900; font-size: 16px; margin: 0 0 0 0; padding: 10px 0 0 ; text-align: right; }

.data-contact p{text-align: right;}

canvas{/*prevent interaction with the canvas*/pointer-events:none; background-color: #c1c1c1; border-radius: 3px; padding: 0 10px;}

/*SECTION: 07 FOOTER*/

footer{background-color: #282828; border-top: 2px solid #ee2643; padding: 15px 0}

footer img{height: 40px; margin: 0 auto; display: block}
footer #smedia-box-footer{width: 222px; margin: 15px auto; border-top: 1px solid #ee2643; padding-top: 15px}
footer #smedia-box-footer a{color: #fff; text-decoration: none; padding: 2px 10px}
footer #smedia-box-footer a:focus,footer #smedia-box-footer a:hover{color: #ee2643}


/*MEDIA QUERYS*/

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

	.item-services>img{padding: 15px}

}

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

	.navbar-default .navbar-brand{height: 80px;}

	.navbar-nav>li>a{padding: 10px 15px 5px;}

	.top-nav-collapse ul.navbar-nav li a{padding: 15px 15px}

	#home-slider {margin-top: 80px;}

	#home-slider .carousel-caption{right: 15%;}

	#home-slider .carousel-caption h2{font-size: 3em;}

	#home-slider .carousel-caption h3{font-size: 1.5em;}

	#box-smedia a{margin: 5px;}

	.item-services>img{padding: 10px 5px}

	#contact-form-box.col-sm-12,#contact-info-box{width: 50%; float: left}

	.data-contact img{margin: 10px 0 10px 5px;}

}

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

	.ycp {height: auto!important;}
	#bio-text{margin-bottom: 25px}
}

@media (orientation: landscape) and (max-width: 740px), handheld {

	.navbar-default .navbar-brand {height: 96px;}

	.navbar-default .navbar-toggle{margin: 10px 15px 10px 0;}

	#home-slider {margin-top: 96px;}

	#home-slider .carousel-indicators{display: none}

	#home-slider .carousel-caption{bottom: 0; right: 20%;}

	#bio-text img{width: 50%; float: left}

	#bio-text h3, #bio-text p{float: left;padding: 0 20px;}

	#box-smedia{margin: 5px 20px;}

	#bio-text{padding-bottom: 15px; margin-bottom: 15px}

	section#demos{background-size: cover}

	#mic-box{width: 25%; float: left}

	#box-services{float: left; width: 65%;}

	.item-services{overflow: hidden;}

	.item-services p{width: 83%}

	.item-services:last-child h2{padding: 30px 0;}

	#bio-text p{text-align: justify}

}

@media (orientation: landscape) and (max-width: 640px), handheld {

	.navbar-default .navbar-brand {height: 96px;}

	.navbar-default .navbar-toggle{margin: 10px 15px 10px 0;}

	#home-slider {margin-top: 96px;}

	#home-slider .carousel-indicators{display: none}

	#home-slider .carousel-caption{bottom: 15px; right: 20%;}

	#bio-text img{width: 50%; float: left}

	#bio-text h3, #bio-text p{float: left;padding: 0 20px;max-width: 250px;}

	#box-smedia{margin: 5px 0; width: 100%;}

	#box-smedia a {margin: 5px 5.6666667%;}

	#bio-text{padding-bottom: 15px; margin-bottom: 15px}

	section#demos{background-size: cover}

	#mic-box{width: 25%; float: left}

	#mic-box #mic-img{display: block}

	#box-services{float: left; width: 65%;}

	.item-services{overflow: hidden;}

	.item-services p{width: 83%}

	.item-services:last-child h2{padding: 8px 0;}

	#home-slider .carousel-caption h2 {font-size: 35px;}

	#home-slider .carousel-caption h3 {font-size: 15px;}

}

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

	.navbar-default .navbar-toggle{margin: 15px 15px 15px 0;}

	.navbar-default .navbar-brand{margin-top: 0;height: 66px;}

	.navbar-default.top-nav-collapse .navbar-toggle{margin: 10px 15px;}

	.navbar-fixed-top.top-nav-collapse .navbar-brand{height: 56px;}

	#home-slider {margin-top: 106px;}

	#decoration-slider{max-height: 270px;}

	#bio-text{padding-bottom: 15px }

	#bio-text img {width: 50%; float: left; padding: 0 15px}

	#mic-img{display: none}

	.item-services {overflow: hidden;}

	.item-services img{max-width: 50px; padding: 0 10px;}

	.col-sm-3.box-soundcloud{width: 50%; float: left;}

	.data-contact img{padding: 0 5px}

	#bio-text p{text-align: justify}

}

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

	#social-box a{margin: 5px 7px;}

	.navbar-default .navbar-toggle{margin: 10px 15px;}

	#home-slider {margin-top: 96px;}

	.navbar-default .navbar-brand{height: 56px}

	.navbar-fixed-top.top-nav-collapse .navbar-brand{height: 56px; margin: 0 0 0 15px;}

	#home-slider .carousel-caption {padding-bottom: 0; bottom: 20px; right:20%}

	

	#home-slider .carousel-caption h2{font-size: 24px;}

	#home-slider .carousel-caption h3{font-size: 16px;}

	#bio-text{margin-bottom: 10px;}

	#bio-text p{max-width: 100%}

	#demos #box-smedia{float: none; padding-bottom: 15px;}

	.item-services>img{padding: 10px;}

	#contact-form-box.col-sm-12{width: 100%; margin:0 0 15px}

	.data-contact img{float: left;min-width: 50px;}

	.data-contact h3,.data-contact p{text-align: left}

	#navbar.navbar-collapse.collapse.in .nav>li{border-bottom: 1px solid #333;}

	#navbar.navbar-collapse.collapse.in .nav>li.active{background-color: #1f1f1f}

	.navbar-default .navbar-collapse ul.navbar-nav li.active a, .navbar-default .navbar-collapse ul.navbar-nav li:hover a{text-decoration: none}

	.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse{max-height: 350px}

	.carousel-indicators{display: none}

	#portafolio-voice .carousel-caption{font-size: 20px; padding-bottom: 10px}

	#portafolio-voice .carousel-caption small{font-size: 14px; font-weight: 500}

	#contacto p.title{width: 100%}

	#box-smedia a{margin: 5px 14px;}

	.col-sm-3.box-soundcloud{width: 100%; float: none;}

	#contact-form-box.col-sm-12, #contact-info-box{float: none; width: 100%}

	section#videos{background-position: 42% top}

}

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

	#home-slider {margin-top: 96px;}

	#home-slider .carousel-caption{right: inherit; left: 15%; width: 70%;}

	#home-slider .carousel-caption h2{font-size: 25px}

	#home-slider .carousel-caption h3{font-size: 15px; border-bottom: none}

	#decoration-slider{max-height: 210px;}

	section#demos{background-position: -281px top; background-size: cover;}

	#bio-text img{display: block; margin: 0 auto 10px auto; width: 100%; float: none;}

	.navbar-default .navbar-brand{margin: 0 0 0 15px; height: 56px;}

}

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

	#home-slider{margin-top: 96px;}

	#home-slider .carousel-caption{right: inherit; left: 10%; width: 70%;}

	#home-slider .carousel-caption h2{font-size: 20px}

	#home-slider .carousel-caption h3{font-size: 15px; border-bottom: none}

	.navbar-default .navbar-brand{margin: 0 0 0 15px; height: 56px;}

	

	

	#decoration-slider{max-height: 180px}

}

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

	#box-smedia a {margin: 5px 6px;}
	#bio-text-box{width: 100%}
}