/*
Theme Name: copro child
Description: copro Child Theme
Author: Brand Exponents
Template: copro
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css?family=Dosis:200,300,400,500,600,700,800');
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Rokkitt:700,900');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i');
@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

h1,h2,h3,h4,h5,p, a,li,span{
	font-family: 'Montserrat', sans-serif;
}

a, li{
		-webkit-transition: all .3s ease-in-out 0ms;
    -moz-transition: all .3s ease-in-out 0ms;
    -ms-transition: all .3s ease-in-out 0ms;
    -o-transition: all .3s ease-in-out 0ms;
    transition: all .3s ease-in-out 0ms;
}

p, li, tr, td{
    color:#333;
    font-size: 15px;
    line-height: 18px;
}

.box-servicios[data-vc-full-width]{
    overflow: initial!important;
}

.ivan-custom-wrapper{
	margin-bottom: 0px;
}
.iv-layout.header.light.semi-transparent-bg {
    background: rgba(0, 0, 0, 0.25);
}



/*##########################################
MENU
##########################################*/
.logo {
    display: block;
    margin: 5px 0 5px;
}

#menu-tetrix-principal li a, #menu-tetrix-principal li a span{
	font-family: 'Dosis', sans-serif!important;    
	text-transform: uppercase;
	font-size: 16px!important;
	font-weight: 500;
}


/*##########################################
TITULOS Y TEXTO
##########################################*/
.txt-portafolio h2, .tit-section h2{
    font-size: 60px;
    line-height: 60px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #243a76;
    text-decoration:none;
    padding-top: 10px;
}

/* flechas */

a.pp_next {
    top: 50%;
    position: absolute;
    right: -42px;
    width: 32px;
    height: 32px;
    text-indent: 0px;
    color:transparent;
    background: url(http://optimusaccounts.com/tetrix/wp-content/uploads/2019/01/flecha-derecha.png)no-repeat;
}

a.pp_previous {
    top: 50%;
    position: absolute;
    left: -42px;
    width: 32px;
    height: 32px;
    text-indent: 0px;
    color:transparent;
    background: url(http://optimusaccounts.com/tetrix/wp-content/uploads/2019/01/flecha-izquierda.png)no-repeat;
}
/*//////////////////
 * INTRO
 * ///////////////////*/

.logo-intro{
	max-width:570px!important;
}

.menu-intro-mobile{
	display:none;
}
.intro-mobile{
		display:none;
	}

/*##########################################
INICIO
##########################################*/

.home .wpb_wrapper{
    width: 100%;
}
.txt-logo{
    margin: auto;
    display: block;
}

.txt-logo img{
    max-width: 400px;
    margin: auto;
    display: block;
}

.txt-logo a{
    font-size: 28px;
    color: #fff;
    letter-spacing: 12px;
    font-weight: 600;
    margin-top: 50px;
    position: relative;
    display: block;
    font-family: 'Rokkitt', serif;
    font-weight: 900;
    animation-name: coin;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes coin {
    0% {opacity: 0;}
    50%{opacity: 1;}
    51%{opacity: 0;}
    100%{opacity: 1;}
}

@-webkit-keyframes coin {
    0% {opacity: 0;}
    50%{opacity: 1;}
    51%{opacity: 0;}
    100%{opacity: 1;}
}


.video-tetrix{
  position: fixed;
  top: 50%; left: 50%;
  z-index: 1;
  min-height: 100%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
}


/* animacion */

.txt-logo{
    position: relative;
    z-index: 30000;
    animation-name: logo;
    animation-duration: 10s;
}

@keyframes logo {
    0% {opacity: 0;}
    60%{opacity: 0;}
    65%{opacity: 1;}
}

@-webkit-keyframes logo {
    0% {opacity: 0;}
    60%{opacity: 1;}
}

/* fin animacion */

.intro-home .wpb_wrapper{width: 100%;}

.intro-home {
	z-index: 1000!important;
	background-color:transparent!important;
}

.intro-home ul{
	width: 100%;
	text-decoration: none;
	list-style: none;
	margin-left: 0px;
	padding-left: 0px;
}

.intro-home ul li:nth-of-type(1){
	background:transparent;
}
.intro-home ul li:hover:nth-of-type(1){
	background:orange;
	border:2px solid orange;
}

.intro-home ul li:nth-of-type(2){
	background:transparent;
}
.intro-home ul li:hover:nth-of-type(2){
	background:red;
	border:2px solid red;
}

.intro-home ul li:nth-of-type(3){
	background:transparent;
}
.intro-home ul li:hover:nth-of-type(3){
	background:blue;
	border:2px solid blue;
}

.intro-home ul li:nth-of-type(4){
	background:transparent;
}
.intro-home ul li:hover:nth-of-type(4){
	background:green;
	border:2px solid green;
}

.intro-home ul li{
	width: 24%;
	float:left;
	margin-left: .5%;
    margin-right: .5%;
    border: 2px solid #fff;
        margin-top: 10px;
    margin-bottom: 10px;
    opacity: 0.3;
}

.intro-home ul li a{
    width: 100%;
    padding: 40px 20px;
    position: relative;
    display: block;
    text-align: center;
    color:#fff;
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 900;
}

.intro-home ul li a:hover{
	color:#fff;
	opacity: 1;

}

.intro-home ul li:hover{
	margin-top:0px;
	margin-top: 0px;
	  opacity: 1;
	  box-shadow: 0px 0px 30px rgba(0,0,0,.8);
}

/* inicio */

.cuadricula{
    width: 100%;
    position:relative;
}

.cuadricula ul{
    margin-left: 0px;
    padding-left: 0px;
    width: 80%;
    margin:auto;
    list-style: none;
    text-decoration: none;
    display: block;
    position: relative;
}


.cuadricula ul li{
    width: 20%;
    float: left;
}

.cuadricula ul li a{
    cursor: pointer;
        width: 100%;
    height: 100%;
    display: block;
    z-index: 1000;
}

.cuadricula ul li a:hover{
    opacity: .6;
}


/*##########################################
PORTAFOLIO
##########################################*/

.punto-venta{
	background: url(http://localhost:8888/tetrix/wp-content/uploads/2018/12/text-left.png);
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}

.especiales{
	background: url(http://localhost:8888/tetrix/wp-content/uploads/2018/12/texr-rigth.png);
	background-size: contain;
	background-position: right center;
	background-repeat: no-repeat;
}

.corporativos{
	background: url(http://localhost:8888/tetrix/wp-content/uploads/2018/12/text-left.png);
	background-size: contain;
	background-position: left center;
	background-repeat: no-repeat;
}

.punto-venta img, .especiales img, .corporativos img{
	border-radius: 10px;
	overflow: hidden;
    -webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
    box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
}

.punto-venta h3, .especiales h3, .corporativos h3{
    font-size: 32px;
    font-weight: 800;
    line-height: 26px;
    color: #208a43;
    text-transform: uppercase;;
}
.punto-venta h4, .especiales h4, .corporativos h4{
    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
    color: #243a76;
}

.punto-venta h5{
    font-size: 18px;
    line-height: 20px;
    font-weight: 500;
    color: #333;
}

.txt-portafolio h4{
    font-size: 18px;
    font-weight: 500;
    line-height: 22px;
   margin-bottom: 0px;
}

.punto-venta p a, .especiales p a, .corporativos p a{
    display: table;
    padding: 10px 60px;
    background: #f27328;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    border-radius: 4px;
}

.box-galeria h3{
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: 0px;
    text-transform: uppercase;
    color: #243a76;
    text-decoration:none;
    padding-top: 10px;
    text-align: right;
}

.rl-load-more{
        margin-top: 40px;
    background: yellow;
    color: #449a4a;
    font-size: 14px;
}


/*##########################################
QUIENES SOMOS
##########################################*/
.txt-galeria h4, .txt-galeria h3{
	    font-size: 20px;
    line-height: 22px;
    font-weight: 500;
    color: #208a43;
}

/*##########################################
SERVICIOS
##########################################*/

.intro-section h3{
    font-size:25px;
    text-align: center;
}

.motivacion h3{
    font-size:25px;
    text-align: center;
    color:#fff;
}

.box-servicios{
	background: url(../../uploads/2018/12/text-left.png);
	background-size: cover;
	background-position: left top;
	background-repeat: no-repeat;
}

.box-servicios img{
	width:30px;
	margin-bottom: 10px!important;
}

.box-servicios h3{
    font-size: 28px;
    line-height: 30px;
    text-transform: uppercase;
    font-family: 'Dosis', sans-serif!important;
    font-weight: 900;
    letter-spacing: 1px;
    color:#fff;
}

.box-servicios p{
    font-size: 16px;
    color:#fff;
    margin-bottom: 0px;
}

.box-servicios .wpb_text_column{
	min-height: 275px;
	border-radius: 10px;
	-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
    box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
}

.box-servicios .owl-carousel .owl-wrapper-outer, .box-servicios .ivan-carousel{
	overflow: visible;
}

.icon-servicios .ivan-icon-box .icon-box-holder .fa-stack{

}

.icon-servicios .ivan-icon-box .icon-box-holder .fa-stack .main-icon{
	color:#243a76;
}

.icon-servicios .ivan-icon-box .icon-box-text-holder .icon-box-title{
	color:#243a76;
}

.icon-servicios .icon-box-content{
	font-size: 16px;
	color:#666;
}


.call-tetrix .wpb_row, .wpb_content_element, ul.wpb_thumbnails-fluid > li, .last_toggle_el_margin, .wpb_button{
	margin-bottom: 0px;
}

.call-tetrix h3{
	color:#fff;
	font-size: 24px;
	line-height: 50px;
	margin-bottom: 0px;
}

.call-tetrix a{
	color:#fff;
	display: block;
	text-align: center;
	text-transform: uppercase;
	line-height: 50px;
	background: #52c159;
	margin-bottom: 0px;
	border-radius: 6px;
	font-weight: 600;
	-webkit-box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
    box-shadow: 0 30px 60px -12px rgba(50,50,93,.25), 0 18px 36px -18px rgba(0,0,0,.3);
}


/*##########################################
EN QUE CREEMOS
##########################################*/

.creemos-icons{
    background: rgba(68,154,77,1);
background: -moz-linear-gradient(-45deg, rgba(68,154,77,1) 0%, rgba(55,133,63,1) 100%);
background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(68,154,77,1)), color-stop(100%, rgba(55,133,63,1)));
background: -webkit-linear-gradient(-45deg, rgba(68,154,77,1) 0%, rgba(55,133,63,1) 100%);
background: -o-linear-gradient(-45deg, rgba(68,154,77,1) 0%, rgba(55,133,63,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(68,154,77,1) 0%, rgba(55,133,63,1) 100%);
background: linear-gradient(135deg, rgba(68,154,77,1) 0%, rgba(55,133,63,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#449a4d', endColorstr='#37853f', GradientType=1 );
}

.creemos-icons .wpb_content_element{
    margin-bottom: 0px;
}

.creemos-icons h3{
    color: #6fe277;
    font-size: 32px;
    font-weight: 200;
    margin-bottom: 0px;
}

.txt-grafiti h3, .txt-grafiti h3 span{
    font-family: 'Permanent Marker', cursive!important;
    font-size: 60px;
    line-height: 65px;
}

/*##########################################
FOOTER
##########################################*/

.footer p{
	color:#999;
}

/*##########################################
CONTACTO
##########################################*/

label {
    width:100%;
}

/*++++++++++++++++++++
 * RESPONSIVE
 * +++++++++++++++++++*/
@media only screen and (max-width: 768px) {
  .tit-section h2 {
    font-size:20px!important;
  }
	.intro-desktop{
		display:none!important;
	}
	.intro-mobile{
		display:block;
		/*margin-top:100px;*/
		
	}
	.intro-mobile .wpb_wrapper{
		width:100%!important;
	}
	.menu-intro-desktop{
		display:none;
	}
	.menu-intro-mobile{
		display:block;
	}
	.menu-intro-mobile ul li{
		list-style:none;
		padding:15px 10px;
	}
	.menu-intro-mobile ul li a{
		color:#ffffff;
	}
	.menu-intro-mobile .green-back{
		background-color:#01b43c;
	}
	.menu-intro-mobile .blue-back{
		background-color:#0c356b;
	}
	.menu-intro-mobile .yellow-back{
		background-color:#fabd00;
	}
	.menu-intro-mobile .orange-back{
		background-color:#ff651b;
	}
	
}