#main-reference {
	width: 100%;
	height:auto;
	background-color: hsla(0,0%,100%,1.00);
	float :left;
    left: 0;
    background-image: url("../img/arkaplan-resim/arkaplan1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main-solyan {
	width: 15%;
    height: 10px;
	float: left;
}
.main-sagyan {
	width: 15%;
    height: 10px;
	float: left;
}
.container-reference {
    width: 70%;
    height: auto;
    float: left;
    margin-top: 30px;
}
.container-reference-menu-ana-baslik {
    width: 100%;
	height: 50px;
    line-height: 50px;
	margin-left: auto; 
    margin-right: auto;
    text-align: center;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 24px;
    margin-bottom: 10px;
    font-weight:bold;
	transition: 0.4s;
    background-color:hsla(359,100%,31%,1.00);
    color: hsla(0,0%,100%,1.00);
    transform: skewX(-20deg);
    border-radius: 5px;
    animation: container-reference-menu-ana-baslik 2.5s 1;
}
@keyframes container-reference-menu-ana-baslik {
    0% {position: relative ; width: 0 ; opacity: 0;}
    100% {position: relative ; width: 100% ; opacity: 1;}
}
.container-reference-icerik {
    width: 60%;
    height: auto;
    float: left;
    margin-right: 2%;
}
.container-reference-icerik-resim {
    width: 100%;
    height: 400px;
    float: left;
    margin-top: 20px;
    margin-bottom: 30px; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
    animation: container-reference-icerik-resim 2s 1;
}
@keyframes container-reference-icerik-resim {
    0% {position: relative; left: -2000px; opacity: 0;}
    100% {position: relative; left: 0px; opacity: 1;}
}
.container-reference-icerik-resim:hover {
    box-shadow: 0 10px 20px hsla(0,0%,20%,1.00);
}
.container-reference-icerik-yazi {
    width: 38%;
    height: auto;
    float: left;
    text-align: center;
    margin-top: 20px;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 18px;
    font-weight: normal;
    animation: container-reference-icerik-yazi 2s 1; 
}
@keyframes container-reference-icerik-yazi {
    0% {position: relative; right: -2000px; opacity: 0;}
    100% {position: relative; right: 0px; opacity: 1;}
}
.span-yazi {
    color: hsla(359,100%,31%,1.00); 
}

.container-contact-us {
    width: 38%;
    height: auto;
    float: left;
    margin-top: 30px;
}
.container-contact-us-ic {
    width: 45%;
    height: 50px;
    line-height: 50px;
    margin-left: auto;
    margin-right: auto;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 24px;
    font-weight: bolder;
    text-align: center;
    background-color: hsla(0,0%,0%,1.00);
    color: hsla(0,0%,100%,1.00);
    cursor: pointer;
    border-radius: 5px;
    transition: .2s;
    transition-timing-function: ease-in-out;
    animation: container-contact-us-ic 4s 1;
}
@keyframes container-contact-us-ic {
    0% {position: relative; bottom: -2000px; opacity: 0;}
    50% {position: relative; bottom: 0px; opacity: 0.5; transform:skewX(0deg);}
    100% {transform:skewX(10deg); background-color: hsla(359,100%,31%,1.00); color: hsla(0,0%,100%,1.00); opacity: 1;}
}
.container-contact-us-ic:hover {
    background-color: hsla(359,100%,31%,1.00);
    color: hsla(0,0%,100%,1.00);
    transform:skewX(-10deg);
    
}

/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/
/*///////////////////////////////////////////////////////////*/

@media screen and (max-width: 850px) {
	
#main-reference {
	width: 100%;
	height:auto;
	background-color: hsla(0,0%,100%,1.00);
	float :left;
    left: 0;
    background-image: url("../img/arkaplan-resim/arkaplan1.jpg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.main-solyan {
	width: 10%;
    height: 10px;
	float: left;
}
.main-sagyan {
	width: 10%;
    height: 10px;
	float: left;
}
.container-reference {
    width: 80%;
    height: auto;
    float: left;
    margin-top: 10px;
}
.container-reference-menu-ana-baslik {
    width: 100%;
	height: 40px;
    line-height: 40px;
	margin-left: auto; 
    margin-right: auto;
    text-align: center;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 20px;
    margin-bottom: 10px;
    font-weight:bold;
	transition: 0.4s;
    background-color:hsla(359,100%,31%,1.00);
    color: hsla(0,0%,100%,1.00);
    transform: skewX(-20deg);
    border-radius: 5px;
    animation: container-reference-menu-ana-baslik 2.5s 1;
}
.container-reference-icerik {
    width: 100%;
    height: auto;
    float: left;
    margin-right: 0%;
}
.container-reference-icerik-resim {
    width: 100%;
    height: 220px;
    float: left;
    margin-top: 0px;
    margin-bottom: 0px; 
    background-repeat: no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
    animation: container-reference-icerik-resim 2s 1;
}
.container-reference-icerik-resim:hover {
    box-shadow: 0 5px 10px hsla(0,0%,20%,1.00);
}
.container-reference-icerik-yazi {
    width: 100%;
    height: auto;
    float: left;
    text-align: center;
    margin-top: 10px;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 18px;
    font-weight: normal;
    animation: container-reference-icerik-yazi 2s 1; 
}
.span-yazi {
    color: hsla(359,100%,31%,1.00); 
}

.container-contact-us {
    width: 100%;
    height: auto;
    float: left;
    margin-top: 20px;
    margin-bottom: 20px;
}
.container-contact-us-ic {
    width: 45%;
    height: 40px;
    line-height: 40px;
    margin-left: auto;
    margin-right: auto;
    font-family:Helvetica, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Arial, "sans-serif";
    font-size: 20px;
    font-weight: bolder;
    text-align: center;
    background-color: hsla(0,0%,0%,1.00);
    color: hsla(0,0%,100%,1.00);
    cursor: pointer;
    border-radius: 5px;
    transition: .2s;
    transition-timing-function: ease-in-out;
    animation: container-contact-us-ic 4s 1;
}
.container-contact-us-ic:hover {
    background-color: hsla(359,100%,31%,1.00);
    color: hsla(0,0%,100%,1.00);
    transform:skewX(-10deg);
}   

	
}